/* ============================================================
   FurSlot: design system
   Display: Bricolage Grotesque (self-hosted variable woff2, OFL) — a warm
            grotesque sans. No serifs anywhere in this product, by design.
   Body/UI: Inter (self-hosted variable woff2, licensed OFL)
   Fully offline after first load. No CDN dependency.
   ============================================================ */

@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('fonts/bricolage-grotesque-wght.woff2') format('woff2');
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/inter-variable.woff2') format('woff2');
}

:root{
  /* brand */
  --ink:#141C2E; --ink-soft:#232F45; --teal:#0E7C7B; --teal-bright:#14A39D; --teal-deep:#0A5F5E;
  --coral:#FF7A59; --coral-deep:#E85A38; --coral-btn:#C0451F; --success:#189A6C; --success-deep:#12744F; --warn:#D97438;
  --cloud:#F6F8F9; --sand:#F8F4EC; --line:#E7ECEC; --line-soft:#EEF2F2; --slate:#5B6B72; --slate-soft:#8A99A0; --slate-text:#63737A;
  --white:#fff;

  /* elevation */
  --shadow-xs:0 1px 2px rgba(16,32,42,.05);
  --shadow-sm:0 2px 8px rgba(16,32,42,.06), 0 1px 2px rgba(16,32,42,.04);
  --shadow-md:0 8px 24px rgba(16,32,42,.08), 0 2px 6px rgba(16,32,42,.05);
  --shadow-lg:0 24px 60px -12px rgba(16,32,42,.20), 0 8px 20px -6px rgba(16,32,42,.10);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.5);
  --glow-teal:0 0 0 1px rgba(14,124,123,.10), 0 30px 80px -20px rgba(14,124,123,.35);
  --glow-coral:0 20px 50px -14px rgba(255,122,89,.45);

  /* geometry */
  --radius-sm:10px; --radius-md:16px; --radius-lg:22px; --radius-xl:30px;
  --container:1180px;

  --font: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --head: 'Bricolage Grotesque', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; color-scheme:light}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"cv11","ss01";
}
h1,h2,h3{
  font-family:var(--head);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.06;
  margin:0 0 .38em;
  color:var(--ink);
  text-wrap:balance;
}
h1{font-size:clamp(38px,5.6vw,68px); font-weight:500}
h2{font-size:clamp(28px,3.6vw,44px); font-weight:500}
h3{font-size:21px; font-weight:600; font-family:var(--font); letter-spacing:-.01em}
em, .accent-italic{font-family:var(--head); font-style:normal; font-weight:600; color:var(--teal-deep); letter-spacing:-.02em}
p{margin:0 0 1em; color:#3A4750}
strong,b{font-weight:600; color:var(--ink)}
a{color:var(--teal-deep); text-decoration:none}
a:hover{color:var(--teal)}

::selection{background:rgba(255,122,89,.22); color:var(--ink)}

.wrap{max-width:var(--container); margin:0 auto; padding:0 28px}
.narrow{max-width:760px}
.center{text-align:center}
.muted{color:var(--slate)}
.small{font-size:14px}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  text-transform:uppercase; letter-spacing:.14em; font-size:12.5px; font-weight:700;
  color:var(--teal-deep); margin-bottom:16px;
}
.eyebrow::before{content:""; width:16px; height:1.5px; background:var(--coral); display:inline-block}
.lede{font-size:clamp(17px,1.6vw,20px); color:#425058; max-width:640px; line-height:1.65}

/* ---------------------------------------------------------- buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:12px; padding:15px 26px; font-size:15.5px; font-weight:600;
  cursor:pointer; font-family:var(--font); letter-spacing:-.01em;
  transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease;
  will-change:transform;
}
.btn:hover{text-decoration:none; transform:translateY(-2px)}
.btn:active{transform:translateY(0px) scale(.98)}
.btn-primary{background:var(--coral-btn); color:#fff; box-shadow:var(--glow-coral)}
.btn-primary:hover{background:#A93A19; color:#fff; box-shadow:0 24px 60px -14px rgba(232,90,56,.55)}
.btn-secondary{background:var(--ink); color:#fff; box-shadow:0 14px 32px -10px rgba(20,28,46,.4)}
.btn-secondary:hover{background:var(--ink-soft); color:#fff}
.btn-ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line); box-shadow:var(--shadow-xs)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal-deep); background:var(--cloud)}
.btn.sm{padding:11px 18px; font-size:14.5px; border-radius:10px}
.btn.block{display:flex; width:100%; margin-top:8px}
.btn svg{width:16px; height:16px}

/* ---------------------------------------------------------- nav */
.site-nav{
  position:sticky; top:0; z-index:30;
  background:rgba(255,255,255,.72); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid rgba(231,236,236,.8);
}
.navrow{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:10px; color:var(--ink); font-family:var(--head); font-weight:600; font-size:20px; letter-spacing:-.01em}
.brand b{color:var(--teal-deep); font-weight:600}
.brand:hover{text-decoration:none}
.links{display:flex; align-items:center; gap:30px}
.links a:not(.btn){
  position:relative; color:var(--ink); font-weight:500; font-size:14.5px; padding:6px 0;
}
.links a:not(.btn):hover{color:var(--teal-deep); text-decoration:none}
.links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--coral);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease;
}
.links a.active::after,.links a:not(.btn):hover::after{transform:scaleX(1)}
.links a.active{color:var(--teal-deep)}

/* ---------------------------------------------------------- hero */
.hero{position:relative; padding:96px 0 88px; overflow:hidden; background:var(--white)}
.hero::before{
  content:""; position:absolute; top:-220px; right:-160px; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(20,163,157,.14), rgba(20,163,157,0) 70%);
  filter:blur(10px); pointer-events:none;
}
.hero::after{
  content:""; position:absolute; bottom:-260px; left:-200px; width:560px; height:560px; border-radius:50%;
  background:radial-gradient(circle at 60% 40%, rgba(255,122,89,.10), rgba(255,122,89,0) 70%);
  filter:blur(10px); pointer-events:none;
}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center}
.hero-copy h1{margin-bottom:.3em}
.hero-copy h1 em{display:block}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin:30px 0 26px}
.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--ink-soft);
  background:var(--cloud); border:1px solid var(--line); padding:8px 14px; border-radius:999px;
}
.chip::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--success); flex:0 0 auto}

/* device mockup */
.device-wrap{position:relative; display:flex; justify-content:center; perspective:1400px}
.browser-frame{
  width:100%; max-width:460px; background:#fff; border-radius:16px; overflow:hidden;
  box-shadow:var(--shadow-lg), var(--glow-teal); border:1px solid rgba(20,28,46,.06);
  transform:rotateY(-6deg) rotateX(2deg); transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.device-wrap:hover .browser-frame{transform:rotateY(-2deg) rotateX(1deg) translateY(-4px)}
.browser-bar{
  display:flex; align-items:center; gap:10px; padding:11px 14px; background:linear-gradient(180deg,#F5F7F7,#EFF3F3);
  border-bottom:1px solid var(--line);
}
.browser-dots{display:flex; gap:6px}
.browser-dots span{width:9px; height:9px; border-radius:50%; background:#D7DEDE}
.browser-url{
  flex:1; background:#fff; border:1px solid var(--line); border-radius:7px; padding:5px 12px;
  font-size:12px; color:var(--slate); font-family:var(--font); text-align:center;
}
.browser-body img{display:block; width:100%; height:auto}
.floating-badge{
  position:absolute; z-index:2; background:#fff; border-radius:14px; padding:12px 16px; box-shadow:var(--shadow-md);
  border:1px solid var(--line); font-size:13px; font-weight:600; display:flex; align-items:center; gap:10px;
}
.floating-badge .ico{width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:15px}
.floating-badge.b1{top:8%; left:-8%; animation:floaty 6s ease-in-out infinite}
.floating-badge.b2{bottom:6%; right:-6%; animation:floaty 6s ease-in-out infinite 1.4s}
.floating-badge .ico.teal{background:rgba(20,163,157,.12); color:var(--teal-deep)}
.floating-badge .ico.coral{background:rgba(255,122,89,.14); color:var(--coral-deep)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* trust band */
.trustband{padding:26px 0; background:var(--cloud); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
.trust-item{display:flex; gap:12px; align-items:flex-start}
.trust-item .ti-ico{flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(14,124,123,.10); color:var(--teal-deep)}
.trust-item .ti-ico svg{width:19px; height:19px}
.trust-item b{display:block; font-size:14.5px; color:var(--ink); letter-spacing:-.01em; margin-bottom:2px}
.trust-item span{display:block; font-size:13px; color:var(--slate); line-height:1.5}
@media (max-width:900px){ .trust-grid{grid-template-columns:1fr 1fr; gap:18px} }
@media (max-width:560px){ .trust-grid{grid-template-columns:1fr} }

/* ---------------------------------------------------------- sections */
section{padding:clamp(56px,8vw,96px) 0}
.band{background:var(--cloud)}
.band.sand{background:var(--sand)}
.band.dark{background:var(--ink); color:#EAF0F1}
.band.dark h2,.band.dark h3{color:#fff}
.band.dark p{color:#AEBCC1}
.section-head{max-width:640px; margin:0 auto 44px}
.section-head.left{margin-left:0; text-align:left}

.two{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px;
  box-shadow:var(--shadow-sm); transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  text-align:left;
}
.card .icn svg{width:22px;height:22px}
.card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:#DCE6E6}
.card .icn{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(14,124,123,.10); color:var(--teal-deep); margin-bottom:18px; font-size:20px;
}
.card h3{margin-bottom:.35em}
.card p{margin-bottom:0; font-size:15px}

.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:44px 0 0; position:relative}
.step{position:relative; padding:0 22px 0 0}
.step:not(:last-child)::after{
  content:""; position:absolute; top:23px; right:-2px; width:calc(100% - 66px); height:1.5px;
  background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
}
.step .n{
  display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:#fff; font-weight:600; font-family:var(--head); font-size:17px; margin-bottom:20px;
  box-shadow:0 10px 24px -8px rgba(20,28,46,.35);
}
.step h3{font-size:18.5px}
.step p{font-size:14.5px}

/* calculator */
.calc{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; align-items:stretch}
.calc > *{min-width:0}
.calc-inputs{display:flex; flex-direction:column; gap:16px}
.calc-card{background:#fff; border:1px solid var(--line,#e8e2d7); border-radius:16px; padding:18px 20px; box-shadow:0 1px 3px rgba(20,28,46,.05)}
.calc-card label{display:flex; flex-direction:column; gap:12px}
.calc-lbl-row{display:flex; justify-content:space-between; align-items:baseline; width:100%; font-size:14px; font-weight:600; color:var(--slate-text,#5b6470)}
.calc-val{color:var(--teal); font-weight:700; font-size:19px; font-family:var(--head)}
.calc-card input[type="range"]{width:100%; min-width:0; -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; background:#e7ecec; outline:none; cursor:pointer; accent-color:var(--teal)}
.calc-card input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--teal); border:3px solid #fff; box-shadow:0 2px 6px rgba(14,124,123,.35); cursor:pointer}
.calc-card input[type="range"]::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:var(--teal); border:3px solid #fff; box-shadow:0 2px 6px rgba(14,124,123,.35); cursor:pointer}
.calc-card input[type="range"]:focus-visible{outline:2px solid var(--teal); outline-offset:4px}
.calc-out{background:linear-gradient(155deg,var(--teal),var(--teal-deep)); color:#fff; border-radius:20px; padding:34px; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; box-shadow:var(--shadow-lg)}
.calc-out::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 88% 0%, rgba(255,255,255,.16), transparent 55%); pointer-events:none}
.calc-eyebrow{position:relative; font-size:13px; font-weight:600; letter-spacing:.03em; color:rgba(255,255,255,.72)}
.calc-big{position:relative; display:flex; align-items:baseline; gap:6px; margin-top:4px}
.calc-big strong{font-family:var(--head); font-weight:500; font-size:clamp(40px,5vw,60px); color:#fff; line-height:1}
.calc-unit{font-size:16px; color:rgba(255,255,255,.7); font-weight:500}
.calc-per{position:relative; display:flex; align-items:baseline; gap:5px; margin-top:4px}
.calc-per b{font-size:22px; color:#fff; font-family:var(--head); font-weight:500}
.calc-note{position:relative; margin:18px 0 0; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.9); border-top:1px solid rgba(255,255,255,.16); padding-top:18px}
.calc-cta{position:relative; margin-top:22px; align-self:flex-start; background:#fff; color:var(--ink); font-weight:700; border:none; padding:13px 22px; border-radius:999px}
.calc-cta:hover{background:#f3efe8}

/* pagehead */
.pagehead{position:relative; padding:80px 0 32px; background:var(--white); overflow:hidden}
.pagehead::before{
  content:""; position:absolute; top:-180px; left:50%; transform:translateX(-50%); width:720px; height:420px;
  background:radial-gradient(ellipse at center, rgba(20,163,157,.10), transparent 70%); pointer-events:none;
}

:is(a,button,input,select,textarea):focus-visible{
  outline:2.5px solid var(--teal); outline-offset:2px;
}
.btn:focus-visible{outline-offset:3px}

/* skip link: visually hidden until keyboard focus */
.skip{position:absolute; left:-9999px; top:0; z-index:100}
.skip:focus{left:12px; top:12px; width:auto; height:auto; padding:10px 16px; background:var(--ink); color:#fff; border-radius:10px; font-weight:600; box-shadow:var(--shadow-md)}

/* pricing */
.price-card{
  position:relative; max-width:460px; margin:0 auto; background:#fff; border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg); padding:40px 38px; text-align:left; border:1px solid var(--line); overflow:hidden;
}
.price-top{display:flex; align-items:baseline; gap:8px; margin-bottom:4px}
.price-num{font-family:var(--head); font-size:60px; font-weight:500; color:var(--ink); letter-spacing:-.02em}
.price-per{color:var(--slate); font-weight:600; font-size:15px}
.price-plan{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:16px}
.plan-name{display:block; font-family:var(--head); font-size:22px; font-weight:600}
.plan-aud{display:block; font-size:14px; color:var(--slate); margin-top:2px}
.plan-badge{
  flex:0 0 auto; background:rgba(255,122,89,.12); color:var(--coral-deep);
  font-size:12.5px; font-weight:700; padding:6px 12px; border-radius:999px; white-space:nowrap;
}
.price-sub{font-size:14px; color:var(--slate); margin:2px 0 20px}
.price-trust{font-size:13px; color:var(--slate-text); margin:10px 0 2px; text-align:center}
.included-label{display:flex; align-items:center; gap:12px; margin:24px 0 2px}
.included-label span{font-size:11.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--slate)}
.included-label::after{content:""; flex:1; height:1px; background:var(--line)}
.ticks{list-style:none; padding:0; margin:8px 0 0; text-align:left}
.ticks li{display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:15px; color:#3A4750}
.ticks li:last-child{border-bottom:0}
.ticks .tick-ico{flex:0 0 20px; width:20px; height:20px; margin-top:2px}
.price-context{max-width:660px; margin:32px auto 0; font-size:14.5px}

/* FAQ (native details/summary, no JS) */
.faq{max-width:760px; margin:6px auto 0}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); margin-bottom:12px; box-shadow:var(--shadow-xs); overflow:hidden; transition:box-shadow .2s ease, border-color .2s ease}
.faq details[open]{border-color:#DCE6E6; box-shadow:var(--shadow-sm)}
.faq summary{
  list-style:none; cursor:pointer; padding:19px 24px; font-family:var(--head); font-weight:600; font-size:17px;
  color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:16px; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--font); font-weight:400; font-size:26px; color:var(--teal-deep); flex:0 0 auto; transition:transform .2s ease; line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--teal-deep)}
.faq summary:focus-visible{outline:2.5px solid var(--teal); outline-offset:-3px; border-radius:6px}
.faq .faq-a{padding:0 24px 20px; margin:0; font-size:15px; color:#3A4750; line-height:1.68}
.cmp .part{color:var(--warn); font-weight:600}

/* comparison table */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); margin-top:22px; box-shadow:var(--shadow-sm)}
table.cmp,table.appts,table.matrix{width:100%; border-collapse:collapse; font-size:14.5px; background:#fff}
table.cmp th,table.cmp td,.appts th,.appts td,.matrix th,.matrix td{padding:15px 18px; text-align:left; border-bottom:1px solid var(--line-soft); white-space:nowrap}
table.cmp thead th,.appts thead th,.matrix thead th{background:var(--ink); color:#EAF0F1; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.cmp tbody tr:hover{background:var(--cloud)}
.cmp tbody tr:last-child td{border-bottom:0}
.yes{color:var(--success); font-weight:700}
.no{color:var(--slate-soft)}

/* booking */
.book{padding:56px 0}
.book-shop{text-align:center; margin-bottom:26px}
.book-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:30px; max-width:560px; margin:0 auto}
.field{margin-bottom:18px; display:flex; flex-direction:column; gap:7px}
.field label{font-weight:600; font-size:13.5px; color:var(--slate)}
.field input,.field select{
  font-size:16px; padding:13px 14px; border:1.5px solid var(--line); border-radius:11px;
  font-family:var(--font); background:#fff; transition:border-color .15s ease;
}
.field input:focus,.field select:focus{outline:none; border-color:var(--teal)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.quote{background:var(--cloud); border-radius:14px; padding:16px 18px; margin-bottom:18px}
.q-row{display:flex; justify-content:space-between; padding:7px 0; font-size:15px}
.q-row b{font-weight:700}
.q-row.deposit{border-top:1px solid var(--line); margin-top:7px; padding-top:14px; color:var(--teal-deep)}
.q-row.deposit b{color:var(--teal-deep)}
.card-sim input{letter-spacing:2px}
.consent{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:#3A4750; margin:10px 0 18px; line-height:1.55}
.consent input{margin-top:3px; width:18px; height:18px; flex:0 0 auto; accent-color:var(--teal)}
.book-msg{margin-top:16px; font-size:15px}
.book-msg.ok{color:var(--success); font-weight:600}
.book-msg.err{color:var(--coral-deep); font-weight:600}
.book-success{background:#EAFAF3; border:1px solid #C3EEDA; border-radius:14px; padding:24px 22px}
.book-success b{color:var(--success)}
.book-success h3:focus-visible{outline:none}
.success-check{display:block; margin:2px 0 12px}

/* footer */
.site-foot{background:var(--ink); color:#AEBCC1; padding:52px 0 36px; position:relative}
.site-foot::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.site-foot{padding:64px 0 36px}

/* scroll reveal */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 80ms)}

/* app shell (dashboard) */
.app{display:grid; grid-template-columns:250px 1fr; min-height:100vh}
.app-side{background:var(--ink); color:#AEBCC1; padding:24px 20px; display:flex; flex-direction:column; gap:22px}
.app-side .brand{color:#fff}
.app-side .brand b{color:var(--teal-bright)}
.app-side nav{display:flex; flex-direction:column; gap:4px}
.app-side nav a{color:#B7C6CB; padding:11px 13px; border-radius:10px; font-weight:500; font-size:14.5px}
.app-side nav a:hover{background:rgba(255,255,255,.06); text-decoration:none}
.app-side nav a.active{background:var(--teal); color:#fff}
.app-side-foot{margin-top:auto; font-size:13px}
.app-main{padding:36px 40px; background:var(--cloud); min-width:0}
.appts th,.appts td{padding:14px 15px}
.appts .rowact{padding-left:12px}
.app-main h1{margin-bottom:22px; font-size:clamp(26px,3vw,34px)}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:28px}
.stat{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 24px;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
}
.stat:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#DCE6E6}
.stat::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), var(--glow,rgba(14,124,123,.12)), transparent 70%)}
.stat:hover::after{opacity:1}
.stat.accent-teal{--glow:rgba(14,124,123,.14)}
.stat.accent-coral{--glow:rgba(255,122,89,.16)}
.stat.accent-green{--glow:rgba(24,154,108,.15)}
.stat.accent-ink{--glow:rgba(20,28,46,.09)}
.stat > *{position:relative; z-index:1}
.stat span{display:block; font-size:14px; font-weight:600; color:var(--slate); margin-bottom:6px}
.stat strong{font-family:var(--head); font-size:clamp(30px,2.6vw,40px); font-weight:500; line-height:1}
.stat .sub{display:block; font-size:13px; color:var(--slate-text); margin-top:8px; font-weight:500}
.warn-text{color:var(--warn)}
.pill{display:inline-block; padding:5px 12px; border-radius:999px; font-size:12.5px; font-weight:600; background:var(--line-soft); color:var(--slate)}
.pill.ok{background:rgba(24,154,108,.12); color:var(--success)}
.pill.warn{background:rgba(217,116,56,.14); color:var(--warn)}
.pill.muted{background:var(--line-soft); color:var(--slate)}
/* dashboard row actions */
.rowact{white-space:nowrap; display:flex; flex-direction:column; gap:6px; align-items:stretch}
.btn-mini{
  font:600 12.5px/1 var(--font); padding:9px 13px; border-radius:9px; border:1.5px solid var(--line);
  background:#fff; color:var(--ink-soft); cursor:pointer; letter-spacing:-.01em; text-align:center;
  transition:background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.btn-mini:hover{transform:translateY(-1px); box-shadow:var(--shadow-xs)}
.btn-mini.done:hover{border-color:var(--success); color:var(--success); background:rgba(24,154,108,.06)}
.btn-mini.danger:hover{border-color:var(--coral-deep); color:var(--coral-deep); background:rgba(255,122,89,.06)}
.btn-mini:disabled{opacity:.55; cursor:default; transform:none; box-shadow:none}
/* breed matrix, editorial restyle */
.tablewrap:has(.matrix){box-shadow:var(--shadow-md); border-color:var(--line)}
.matrix{font-size:15px}
/* override the shared dark thead just for the matrix */
.matrix thead th{background:var(--cloud); color:var(--ink); border-bottom:1px solid var(--line)}
.matrix thead tr:first-child th.grp{
  font-family:var(--head); font-size:14px; font-weight:600; letter-spacing:0; text-transform:none;
  padding:16px 20px 12px; color:var(--ink); text-align:center;
}
.matrix th.sub{
  background:var(--cloud); color:var(--slate); font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; padding:8px 28px 12px; text-align:center; border-bottom:1px solid var(--line);
}
.matrix thead .bname{
  background:var(--cloud); color:var(--ink); text-align:left; vertical-align:middle;
  font-family:var(--head); font-size:14px; font-weight:600; letter-spacing:0; text-transform:none; padding-left:20px;
}
/* group dividers between services */
.matrix .grp{border-left:1px solid var(--line-soft)}
.matrix thead .grp{border-left:1px solid var(--line)}

/* body cells */
.matrix tbody td{padding:16px 20px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--line-soft)}
.matrix tbody tr:last-child td{border-bottom:0}
.matrix .bname{position:sticky; left:0; background:#fff; padding:16px 16px 16px 20px; width:1%; min-width:0; white-space:nowrap}
.matrix .bn-name{display:block; font-weight:600; font-size:14px; color:var(--ink); letter-spacing:-.01em}
.matrix .bn-coat{
  display:inline-block; margin-top:5px; font-size:10px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--teal-deep);
}
.matrix tbody td.grp, .matrix tbody td.pr{text-align:center; padding-left:28px; padding-right:28px}
.matrix .num{color:var(--slate); font-variant-numeric:tabular-nums}
.matrix .num .unit{margin-left:4px; font-size:11px; color:var(--slate-soft)}
.matrix .pr{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
.matrix tbody tr{transition:background .12s ease}
.matrix tbody tr:hover td{background:var(--cloud)}
.matrix tbody tr:hover .bname{background:var(--cloud)}
/* flat-rate add-ons: editorial menu list, dotted leaders instead of cards */
.flatrate{margin-top:40px; padding-top:32px; border-top:1px solid var(--line)}
.flatrate h2{font-family:var(--head); font-size:22px; font-weight:600; letter-spacing:-.01em; margin:0 0 8px}
.flatrate > p{max-width:560px; margin-bottom:24px}
.fr-list{display:flex; flex-direction:column}
.fr-row{
  display:flex; align-items:baseline; gap:14px; padding:16px 4px; border-bottom:1px solid var(--line-soft);
}
.fr-row:first-child{border-top:1px solid var(--line-soft)}
.fr-idx{font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--slate-soft); font-variant-numeric:tabular-nums}
.fr-name{font-family:var(--head); font-size:16px; font-weight:600; color:var(--ink); white-space:nowrap}
.fr-note{font-size:13px; color:var(--slate); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fr-dots{flex:1; border-bottom:1px dotted var(--line); margin-bottom:6px; min-width:24px}
.fr-price{font-size:16px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap}
@media (max-width:720px){
  .fr-row{flex-wrap:wrap}
  .fr-note{display:none}
  .fr-dots{order:1}
}
.petlink{color:var(--ink)} .petlink:hover b{color:var(--teal)}
.crumb{display:inline-block; font-size:14px; font-weight:600; margin-bottom:14px}
.pet-head{display:flex; gap:20px; align-items:center; margin-bottom:24px}
.pet-head h1{margin-bottom:2px}
.pet-tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.pet-avatar{flex:0 0 auto}
.notes-line{font-size:20px !important; line-height:1.3 !important}
.pet-head-info{min-width:0}
.pet-title{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.pet-title h1{margin:0}
.vip-badge{
  font-size:12px; font-weight:700; letter-spacing:.3px; color:var(--teal-deep);
  border:1.5px solid var(--teal); border-radius:999px; padding:3px 11px; background:rgba(14,124,123,.06);
}

/* recurring-customer profile: two-column detail + photo layout */
.pet-cols{display:grid; grid-template-columns:1.1fr 1fr; gap:20px; align-items:start; margin-top:26px}
.pet-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); padding:20px 22px; box-shadow:var(--shadow-xs)}
.pet-card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.h-sub{font-family:var(--head); font-weight:600; font-size:20px; line-height:1.3; margin-bottom:10px}
.pet-card-head h2,.pet-card-head h3{margin:0}
.photo-add{cursor:pointer; margin:0}
.photo-gallery{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.ph-item{margin:0; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:var(--cloud); position:relative}
.ph-item img{display:block; width:100%; aspect-ratio:1/1; object-fit:cover}
.ph-item figcaption{position:absolute; left:0; right:0; bottom:0; padding:6px 10px; font-size:12px; font-weight:600; color:#fff; background:linear-gradient(transparent, rgba(20,28,46,.72))}
.ph-empty-full{
  grid-column:1/-1; aspect-ratio:2/1; border:1.5px dashed #cfdad9; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;
  color:var(--slate-text); font-size:13.5px; background:var(--cloud); padding:20px;
}
.ph-empty-full svg{width:28px; height:28px; opacity:.45}
.ph-empty-full.mini{aspect-ratio:auto; min-height:0; border:none; background:transparent; padding:24px 16px; flex-direction:row; gap:12px}
.ph-empty-full.mini svg{width:22px; height:22px}
#pet-details textarea{
  font-size:16px; padding:12px 14px; border:1.5px solid var(--line); border-radius:11px; width:100%;
  font-family:var(--font); background:#fff; resize:vertical; transition:border-color .15s ease, box-shadow .15s ease;
}
#pet-details textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(14,124,123,.14)}
.pet-saved{margin-left:12px; font-size:13.5px; font-weight:600}
.pet-saved.ok{color:var(--success)} .pet-saved.err{color:var(--coral-deep)}

/* VIP toggle: a real switch, no filled-pill AI look */
.toggle{display:inline-flex; align-items:center; gap:9px; cursor:pointer; user-select:none; font-size:13.5px; font-weight:600; color:var(--slate)}
.toggle input{position:absolute; opacity:0; width:0; height:0}
.toggle-track{position:relative; width:44px; height:25px; border-radius:999px; background:#d5dedd; transition:background .22s ease; flex:0 0 auto}
.toggle-track::after{
  content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(20,28,46,.28); transition:transform .22s cubic-bezier(.34,1.56,.64,1);
}
.toggle input:checked + .toggle-track{background:var(--teal)}
.toggle input:checked + .toggle-track::after{transform:translateX(19px)}
.toggle input:focus-visible + .toggle-track{box-shadow:0 0 0 4px rgba(14,124,123,.2)}
.toggle-label{color:var(--teal-deep)}
@media (max-width:820px){.pet-cols{grid-template-columns:1fr}}
.policy-doc{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-md); padding:20px 24px; max-width:760px; box-shadow:var(--shadow-xs);
}
.policy-doc p{margin-bottom:10px; font-size:15px} .policy-doc p:last-child{margin-bottom:0}
.app-main h3{margin-bottom:10px}

/* ---------------------------------------------------------- legal center */
.app-main.legal{padding:0; background:var(--cloud)}
.legal-hero{
  background:linear-gradient(160deg, var(--ink), var(--ink-soft));
  color:#fff; padding:52px 48px 44px;
}
.legal-eyebrow{text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700; color:var(--teal-bright); margin-bottom:14px}
.legal-hero h1{color:#fff; font-size:clamp(30px,3.4vw,44px); margin-bottom:14px}
.legal-sub{color:#B9C7CC; max-width:720px; font-size:16px; line-height:1.65; margin-bottom:22px}
.legal-meta{display:flex; gap:10px; flex-wrap:wrap}
.legal-chip{
  font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:999px;
  background:rgba(255,255,255,.08); color:#D6E1E4; border:1px solid rgba(255,255,255,.12);
}
.legal-chip.warn{background:rgba(255,122,89,.14); color:#FFC7B5; border-color:rgba(255,122,89,.3)}

.legal-layout{display:grid; grid-template-columns:236px 1fr; gap:44px; padding:40px 48px 64px; max-width:1180px}
.legal-toc{position:sticky; top:24px; align-self:start; display:flex; flex-direction:column; gap:3px}
.toc-head{font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); margin-bottom:8px}
.legal-toc a{
  color:var(--slate); font-size:14px; padding:8px 12px; border-radius:8px; border-left:2px solid transparent;
}
.legal-toc a:hover{background:#fff; color:var(--ink); border-left-color:var(--teal)}

.legal-body{min-width:0; max-width:800px}
.legal-section{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 36px; margin-bottom:22px; box-shadow:var(--shadow-xs); scroll-margin-top:24px}
.legal-num{
  position:absolute; top:-14px; left:32px; min-width:30px; height:30px; padding:0 10px;
  display:inline-flex; align-items:center; justify-content:center; background:var(--teal); color:#fff;
  font-family:var(--head); font-size:14px; font-weight:600; border-radius:8px; box-shadow:var(--shadow-sm);
}
.legal-section h2{font-size:24px; margin:6px 0 6px}
.legal-role{font-size:13.5px; color:var(--teal-deep); font-weight:600; margin-bottom:16px}
.legal-doc{background:var(--cloud); border:1px solid var(--line-soft); border-radius:var(--radius-md); padding:22px 26px}
.legal-doc > p{font-size:15px; line-height:1.7; margin-bottom:12px; color:#37444C}
.legal-doc > p:last-child{margin-bottom:0}
.clauses{margin:6px 0 0; padding-left:0; counter-reset:cl; list-style:none}
.clauses li{position:relative; padding:10px 0 10px 34px; font-size:15px; line-height:1.65; color:#37444C; border-bottom:1px solid var(--line-soft)}
.clauses li:last-child{border-bottom:0}
.clauses li::before{counter-increment:cl; content:counter(cl); position:absolute; left:0; top:11px; width:22px; height:22px; background:#fff; border:1px solid var(--line); border-radius:6px; font-size:12px; font-weight:700; color:var(--teal-deep); display:flex; align-items:center; justify-content:center}
.legal-note{margin-top:16px; font-size:13.5px; line-height:1.65; color:var(--slate); background:rgba(20,163,157,.06); border:1px solid rgba(20,163,157,.16); border-radius:12px; padding:16px 18px}
.legal-note b{color:var(--teal-deep)}
.legal-dl{margin:0}
.legal-dl dt{font-weight:700; color:var(--ink); font-size:14px; margin-top:14px}
.legal-dl dt:first-child{margin-top:0}
.legal-dl dd{margin:4px 0 0; font-size:14.5px; line-height:1.6; color:#37444C}
.statutes{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:16px 0}
.statute{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; text-align:center}
.statute b{display:block; font-size:14px; color:var(--ink)}
.statute span{display:block; font-size:12.5px; color:var(--teal-deep); font-weight:600; margin:5px 0 3px; font-variant-numeric:tabular-nums}
.statute em{font-size:11.5px; color:var(--slate-soft); font-style:normal}
.statute .pill{margin-top:8px; padding:3px 10px; font-size:10.5px}
.not-advice{display:flex; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 30px; box-shadow:var(--shadow-xs)}
.not-advice-mark{flex:0 0 auto; width:44px; height:44px; border-radius:12px; background:rgba(255,122,89,.12); color:var(--coral-deep); display:flex; align-items:center; justify-content:center}
.not-advice-mark svg{width:22px; height:22px}
.not-advice h3{margin-bottom:6px}
.not-advice p{margin:0; font-size:14.5px; line-height:1.65; color:#37444C}
.fact-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:6px}
.fact{background:var(--cloud); border:1px solid var(--line); border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:4px}
.fact span{font-size:13px; color:var(--slate); font-weight:600}
.fact b{font-family:var(--head); font-size:24px; font-weight:600; color:var(--ink)}
.settings{background:#fff; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; max-width:560px}
.setrow{display:flex; justify-content:space-between; padding:17px 20px; border-bottom:1px solid var(--line)}
.setrow b{font-weight:700}

/* footer v2 */
.foot-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; padding-bottom:28px}
.foot-brand .brand{color:#fff; font-size:19px}
.foot-brand .brand b{color:var(--teal-bright)}
.foot-brand p{margin-top:12px; font-size:14.5px; color:#9FB3B8; max-width:340px; line-height:1.6}
.foot-brand .foot-fine{font-size:12.5px; color:#6E8489; margin-top:6px}
.foot-col{display:flex; flex-direction:column; gap:9px}
.foot-head{font-size:11.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#7E959B; margin-bottom:4px}
.foot-col a{color:#C4D2D6; font-size:14.5px}
.foot-col a:hover{color:#fff}
.foot-base{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.09); padding-top:20px; font-size:13px; color:#7E959B}

/* responsive */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:40px}
  .floating-badge{display:none}
  .foot-grid{grid-template-columns:1fr; gap:28px}
  .foot-base{flex-direction:column; gap:6px}
  .legal-hero{padding:40px 24px 32px}
  .legal-layout{grid-template-columns:1fr; gap:24px; padding:28px 24px 48px}
  .legal-toc{position:static; flex-direction:row; flex-wrap:wrap; gap:8px}
  .legal-toc .toc-head{width:100%}
  .statutes{grid-template-columns:1fr}
  .fact-grid{grid-template-columns:1fr}
  .two,.steps,.calc,.calc-inputs{grid-template-columns:1fr}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .step:not(:last-child)::after{display:none}
  .links a:not(.btn){display:none}
  .app{grid-template-columns:1fr}
  .app-side{flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px}
  .app-side nav{flex-direction:row; flex-wrap:wrap}
  .app-side-foot{display:none}
  .grid2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  .floating-badge{animation:none}
}

/* ============================================================
   Motion + component polish
   Anime.js entrance hooks; UI components adapted from uiverse.io
   (button shine, cbolson checkbox, spinner) into the FurSlot palette.
   ============================================================ */

/* Hero: hide the animated pieces only while motion is on; Anime.js reveals them. */
.anim-on .hero [data-a]{opacity:0}

/* Hand-drawn coral underline under "dog." (Anime.js draws the stroke in). */
.hero-em{position:relative}
.squiggle{position:absolute; left:.06em; bottom:-.05em; width:2.6em; height:.34em; overflow:visible; pointer-events:none}

/* Draggable hero badges — enabled only when motion is on (ambient float off then). */
.floating-badge{touch-action:none}
.anim-on .floating-badge{animation:none; cursor:grab}
.anim-on .floating-badge:active{cursor:grabbing; box-shadow:var(--shadow-lg)}

/* Primary button: a light shine sweep on hover (uiverse-inspired, on-brand). */
.btn-primary{position:relative; overflow:hidden}
.btn-primary::after{
  content:""; position:absolute; top:0; left:0; height:100%; width:55%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-190%) skewX(-18deg);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.btn-primary:hover::after{transform:translateX(360%) skewX(-18deg)}

/* Inputs: soft teal focus ring. */
.field input,.field select{transition:border-color .15s ease, box-shadow .15s ease}
.field input:focus,.field select:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(14,124,123,.14)}

/* Consent checkbox: custom animated tick (uiverse cbolson-inspired). */
.consent input{
  appearance:none; -webkit-appearance:none; width:20px; height:20px; margin-top:2px; flex:0 0 auto;
  border:1.5px solid var(--slate-soft); border-radius:5px; background:#fff; cursor:pointer;
  display:grid; place-content:center; transition:border-color .15s ease, background .15s ease;
}
.consent input::after{content:"\2714"; font-size:12px; line-height:1; color:#fff; opacity:0; transform:scale(.5); transition:opacity .15s ease, transform .15s ease}
.consent input:hover{border-color:var(--teal)}
.consent input:checked{background:var(--teal); border-color:var(--teal)}
.consent input:checked::after{opacity:1; transform:scale(1)}
.consent input:focus-visible{outline:2.5px solid var(--teal); outline-offset:2px}

/* In-button spinner for the booking submit loading state. */
.btn-spin{
  display:inline-block; width:15px; height:15px; margin-right:9px; vertical-align:-2px;
  border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff; border-radius:50%;
  animation:btn-spin .7s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  .anim-on .hero [data-a]{opacity:1}
  .btn-primary::after{display:none}
  .btn-spin{animation:none; border-top-color:rgba(255,255,255,.45)}
  .anim-on .floating-badge{cursor:default}
}

/* ============================================================
   Table polish — compare, dashboard appointments, breed matrix
   ============================================================ */

/* Tighter density on the wide tables. */
table.cmp th,table.cmp td,.appts th,.appts td{padding:14px 16px}

/* --- Compare table --- */
.cmp .tool{display:flex; align-items:center; gap:9px}
.cmp .tool img{border-radius:5px}
.cmp .fits{white-space:normal; color:var(--slate); min-width:190px; line-height:1.45; font-size:13.5px}
/* Status / capability indicator — a small dot + label, not a filled badge. */
.stat-dot{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink-soft); white-space:nowrap; line-height:1.3}
.stat-dot::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--slate-soft); flex:0 0 auto}
.stat-dot.ok{color:var(--success-deep)} .stat-dot.ok::before{background:var(--success)}
.stat-dot.warn{color:var(--coral-btn)} .stat-dot.warn::before{background:var(--coral)}
.stat-dot.amber{color:var(--warn)} .stat-dot.amber::before{background:var(--warn)}
.stat-dot.off{color:var(--slate)} .stat-dot.off::before{background:var(--slate-soft)}
.cmp td,.cmp th{vertical-align:middle}
.cmp tbody tr.row-us td{background:rgba(14,124,123,.055)}
.cmp tbody tr.row-us:hover td{background:rgba(14,124,123,.09)}
.cmp tbody tr.row-us td:first-child{box-shadow:inset 3px 0 0 var(--teal)}
.cmp tbody tr.row-us .tool b{color:var(--teal-deep)}

/* --- Dashboard appointments: row hover; tightened so all columns fit desktop. --- */
.appts tbody tr:hover td{background:var(--cloud)}
.appts td.rowact{padding-left:14px}

/* --- Breed matrix: search + size filters over 200 rows --- */
.matrix-controls{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:20px 0 0}
.matrix-search{position:relative; flex:1 1 240px; max-width:360px}
.matrix-search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--slate-soft); pointer-events:none}
.matrix-search input{
  width:100%; padding:11px 14px 11px 40px; border:1.5px solid var(--line); border-radius:12px;
  font:16px var(--font); background:#fff; transition:border-color .15s ease, box-shadow .15s ease;
}
.matrix-search input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(14,124,123,.14)}
.matrix-chips{display:flex; gap:6px; flex-wrap:wrap}
.mchip{
  padding:8px 14px; border:1.5px solid var(--line); border-radius:999px; background:#fff;
  font:600 13px var(--font); color:var(--slate); cursor:pointer; letter-spacing:-.01em;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
}
.mchip:hover{border-color:var(--teal); color:var(--teal-deep)}
.mchip:active{transform:scale(.96)}
.mchip.active{background:var(--teal); color:#fff; border-color:var(--teal)}
.mchip:focus-visible{outline:2.5px solid var(--teal); outline-offset:2px}
.matrix-count{font-size:13px; font-weight:600; color:var(--slate); margin-left:auto; white-space:nowrap}
.matrix tbody tr.hidden{display:none}

@media (max-width:640px){
  .matrix-count{margin-left:0}
  .cmp .fits{min-width:150px}
}

/* ============================================================
   Booking calendar — Calendly-style day + time picker
   ============================================================ */
.cal{display:grid; grid-template-columns:1fr 196px; gap:18px; border:1.5px solid var(--line); border-radius:14px; padding:16px; background:#fff}
.cal-panel{min-width:0}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.cal-title{font-family:var(--head); font-weight:600; font-size:16px; color:var(--ink); letter-spacing:-.01em}
.cal-nav{
  width:32px; height:32px; border:1.5px solid var(--line); border-radius:9px; background:#fff; cursor:pointer;
  font-size:18px; line-height:1; color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, color .15s ease;
}
.cal-nav:hover:not(:disabled){border-color:var(--teal); color:var(--teal-deep)}
.cal-nav:disabled{opacity:.35; cursor:default}
.cal-dow{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:6px}
.cal-dow span{text-align:center; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--slate-soft); padding:4px 0}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; min-height:232px; align-content:start}
.cal-day{
  aspect-ratio:1; border:0; background:transparent; border-radius:9px; cursor:pointer;
  font:600 14px var(--font); color:var(--ink); display:flex; align-items:center; justify-content:center;
  transition:background .12s ease, color .12s ease, box-shadow .12s ease;
}
.cal-day.empty{visibility:hidden; cursor:default}
.cal-day:not([disabled]):hover{background:var(--cloud); color:var(--teal-deep)}
.cal-day[disabled]{color:var(--slate-soft); opacity:.45; cursor:default}
.cal-day.today{box-shadow:inset 0 0 0 1.5px var(--line)}
.cal-day.sel,.cal-day.sel:hover{background:var(--teal); color:#fff}
.cal-times{border-left:1px solid var(--line); padding-left:18px; min-width:0}
.cal-hint{font-size:13.5px; color:var(--slate); margin:0; line-height:1.5}
.cal-times-head{font-family:var(--head); font-weight:600; font-size:14px; color:var(--ink); margin-bottom:10px; letter-spacing:-.01em}
.cal-times-list{display:flex; flex-direction:column; gap:8px; max-height:232px; overflow-y:auto}
.cal-time{
  padding:11px 12px; border:1.5px solid var(--line); border-radius:10px; background:#fff; cursor:pointer;
  font:600 14px var(--font); color:var(--teal-deep); text-align:center;
  transition:border-color .12s ease, background .12s ease;
}
.cal-time:hover{border-color:var(--teal); background:var(--cloud)}
.cal-time.sel{background:var(--teal); color:#fff; border-color:var(--teal)}
.cal-time.taken{color:var(--slate-soft); background:var(--cloud); border-color:var(--line-soft); cursor:not-allowed; text-decoration:line-through; text-decoration-thickness:1px}
.cal-time.taken:hover{border-color:var(--line-soft); background:var(--cloud)}
.cal-x{display:block; font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--slate-soft); text-decoration:none; margin-top:2px}
.cal-dur{font-weight:600; font-size:12px; color:var(--slate-text); background:var(--cloud); border-radius:999px; padding:2px 9px; margin-left:4px}
.cal-nav:focus-visible,.cal-day:focus-visible,.cal-time:focus-visible{outline:2.5px solid var(--teal); outline-offset:2px}
@media (max-width:768px){
  .cal{grid-template-columns:1fr; gap:14px}
  .cal-times{border-left:0; border-top:1px solid var(--line); padding-left:0; padding-top:14px}
  .cal-times-list{flex-direction:row; flex-wrap:wrap; max-height:none}
  .cal-time{flex:1 1 78px; min-height:44px}
  .cal-day{aspect-ratio:auto; min-height:44px}
  .cal-nav{width:44px; height:44px}
}

/* ============================================================
   Mobile / responsive overhaul — fits every phone size.
   ============================================================ */
.nav-toggle{display:none; width:44px; height:44px; margin-right:-9px; border:0; background:transparent; cursor:pointer; padding:11px; flex-direction:column; justify-content:center; gap:5px}
.nav-toggle span{display:block; height:2.5px; width:22px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease}
.nav-toggle:focus-visible{outline:2.5px solid var(--teal); outline-offset:2px; border-radius:8px}
.site-nav.open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.site-nav.open .nav-toggle span:nth-child(2){opacity:0}
.site-nav.open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:flex}
  .links{
    position:absolute; top:100%; left:0; right:0; gap:0; margin:0;
    flex-direction:column; align-items:stretch;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow-md);
    padding:6px 20px 16px;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s .22s;
  }
  .site-nav.open .links{opacity:1; visibility:visible; transform:none; transition:opacity .22s ease, transform .22s ease}
  .links a:not(.btn){display:block; padding:14px 4px; font-size:16px; border-bottom:1px solid var(--line-soft)}
  .links a:not(.btn)::after{display:none}
  .links .btn{margin-top:14px; width:100%; justify-content:center}

  /* Dashboard shell: sidebar becomes a top bar with a scrollable nav row */
  .app{grid-template-columns:1fr; min-height:auto}
  .app-side{flex-direction:column; align-items:stretch; gap:12px; padding:16px 18px}
  .app-side nav{flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:6px; padding-bottom:2px}
  .app-side nav a{white-space:nowrap; flex:0 0 auto; padding:9px 14px}
  .app-side-foot{display:none}
  .app-main{padding:26px 20px}
}

@media (max-width:600px){
  .wrap{padding:0 20px}
  .navrow{height:60px}
  section{padding:44px 0}
  .hero{padding:32px 0 44px}
  .hero .wrap{gap:30px}
  h1{font-size:clamp(30px,8.5vw,40px)}
  h2{font-size:clamp(25px,7vw,34px)}
  .lede{font-size:16.5px}
  .cta-row{flex-direction:column; gap:10px; margin:24px 0 22px}
  .cta-row .btn{width:100%; justify-content:center}
  .card{padding:24px}
  .section-head{margin-bottom:28px}
  .steps{margin-top:28px}
  .calc-inputs{padding:24px; gap:14px}
  .calc-out{padding:26px}
  .price-card{padding:30px 22px}
  .book-card{padding:22px 18px}
  .pagehead{padding:52px 0 18px}
  .legal-hero{padding:30px 20px 24px}
  .legal-section{padding:26px 22px}
  .legal-doc{padding:18px}
  .stat{padding:20px 22px}
  .stat-row{grid-template-columns:1fr}
  .app-main h1{font-size:26px}
  .faq summary{padding:17px 18px; font-size:16px}
  /* 44px tap targets where controls sit close together */
  .btn-mini{min-height:44px; padding:11px 15px}
  .mchip{min-height:42px; padding:11px 15px}
  .app-side nav a{min-height:44px; display:flex; align-items:center}
}

/* Signup: shareable-link row + booking-page viral badge */
.signup-card{margin-top:6px}

/* ---------------- destructive buttons. Coral is the brand accent, so danger gets the
   deeper coral fill that actually clears contrast on white. */
.btn-danger{background:var(--coral-btn); color:#fff; border:1.5px solid var(--coral-btn)}
.btn-danger:hover{background:#A63A19; border-color:#A63A19}
.btn-danger-outline{background:#fff; color:var(--coral-btn); border:1.5px solid rgba(192,69,31,.4)}
.btn-danger-outline:hover{border-color:var(--coral-btn); background:rgba(192,69,31,.05)}
.btn-danger-outline:disabled{opacity:.45; cursor:default}
.btn-danger-outline:disabled:hover{background:#fff; border-color:rgba(192,69,31,.4)}

/* ---------------- alert dialog (pattern from coss.com/ui, rebuilt on native <dialog>:
   focus trap, Esc, and ::backdrop come free instead of via a JS focus manager). */
.alert-dialog{border:0; border-radius:16px; padding:0; max-width:470px; width:calc(100% - 32px); background:#fff; box-shadow:0 24px 60px rgba(20,28,46,.3)}
.alert-dialog::backdrop{background:rgba(20,28,46,.55)}
.alert-in{padding:26px 26px 22px}
.alert-head h2{font-size:20px; margin:0 0 8px}
.alert-head p{color:var(--slate-text); font-size:14px; line-height:1.6; margin:0 0 18px}
.alert-head b{color:var(--ink)}
.nowrap{white-space:nowrap}
.alert-foot{display:flex; gap:10px; justify-content:flex-end; margin-top:16px}
@media (max-width:520px){ .alert-foot{flex-direction:column-reverse} .alert-foot .btn{width:100%; justify-content:center} }

/* ---------------- policy picker: custom checkbox mark, real radio underneath */
.policy-set{border:0; padding:0; margin:0; display:flex; flex-direction:column; gap:9px}
.policy-opt{display:flex; align-items:flex-start; gap:11px; padding:13px 14px; border:1.5px solid var(--line); border-radius:12px; cursor:pointer; transition:border-color .16s ease, background .16s ease}
.policy-opt:hover{border-color:var(--slate-soft)}
.policy-opt input{position:absolute; opacity:0; width:0; height:0}
.chk-box{flex:0 0 auto; width:19px; height:19px; border:2px solid var(--line); border-radius:5px; display:grid; place-items:center; margin-top:1px; transition:background .16s ease, border-color .16s ease; color:#fff}
.chk-box svg{width:12px; height:12px; stroke-dasharray:18; stroke-dashoffset:18; transition:stroke-dashoffset .2s ease .04s}
.policy-opt input:checked ~ .chk-box, .chk:has(input:checked) .chk-box{background:var(--teal); border-color:var(--teal)}
.policy-opt input:checked ~ .chk-box svg, .chk:has(input:checked) .chk-box svg{stroke-dashoffset:0}
.policy-opt input:checked ~ .policy-txt b{color:var(--teal-deep)}
.policy-opt:has(input:checked){border-color:var(--teal); background:rgba(14,124,123,.05)}
.policy-opt input:focus-visible ~ .chk-box{outline:2px solid var(--teal-deep); outline-offset:2px}
.policy-txt{display:flex; flex-direction:column; gap:2px}
.policy-txt b{font-size:14px; color:var(--ink)}
.policy-txt span{font-size:12.5px; color:var(--slate-text); line-height:1.5}
.vis-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------------- minutes stepper. A stepper, not a slider: groomers need exact
   numbers and a slider is imprecise on touch. */
.stepper{display:flex; align-items:center; gap:10px; margin:6px 0 2px}
.step-btn{width:44px; height:44px; border-radius:11px; border:1.5px solid var(--line); background:#fff; color:var(--ink); font:400 22px/1 var(--font); cursor:pointer; transition:border-color .15s ease, background .15s ease}
.step-btn:hover{border-color:var(--teal); background:rgba(14,124,123,.06)}
.step-val{flex:1; display:flex; align-items:baseline; justify-content:center; gap:6px; border:1.5px solid var(--line); border-radius:11px; height:44px; padding:0 8px}
.step-val input{width:66px; border:0; text-align:right; font:700 22px var(--head); color:var(--ink); background:transparent; font-variant-numeric:tabular-nums; -moz-appearance:textfield}
.step-val input::-webkit-outer-spin-button, .step-val input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.step-val input:focus{outline:none}
.step-val span{font-size:13px; color:var(--slate-text)}
.step-val:focus-within{border-color:var(--teal); box-shadow:0 0 0 4px rgba(14,124,123,.13)}
.mins-btn{background:none; border:0; padding:0; font:inherit; color:var(--teal-deep); cursor:pointer; border-bottom:1px dashed rgba(10,95,94,.45)}
.mins-btn:hover{color:var(--teal); border-bottom-style:solid}

/* ---------------- client autocomplete (pattern from coss.com/ui, rebuilt as a real
   combobox: input + listbox + aria-activedescendant, no framework needed). */
/* Wrapping the h1 in a flex row zeroed its margin, so the wrapper has to carry the
   same 22px the bare h1 used to, or the stat cards ride up against the search box. */
.app-head{display:flex; align-items:center; justify-content:space-between; gap:18px 24px; flex-wrap:wrap; margin-bottom:22px}
.app-head h1{margin:0}
@media (max-width:760px){ .app-head{gap:12px} .ac{flex:1 1 100%} }
.ac{position:relative; flex:0 1 320px; min-width:210px}
.ac-ico{position:absolute; left:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--slate-soft)}
.ac-ico svg{width:16px; height:16px; display:block}
.ac input{width:100%; height:42px; padding:0 12px 0 36px; border:1.5px solid var(--line); border-radius:11px; font:14.5px var(--font); background:#fff}
.ac input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(14,124,123,.13)}
.ac-list{position:absolute; z-index:40; top:calc(100% + 6px); left:0; right:0; margin:0; padding:5px; list-style:none; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 34px rgba(20,28,46,.14); max-height:320px; overflow:auto}
.ac-item{display:grid; grid-template-columns:auto auto; gap:1px 8px; padding:8px 10px; border-radius:8px; cursor:pointer; align-items:baseline}
.ac-item b{font-size:14px; color:var(--ink)}
.ac-breed{font-size:12px; color:var(--slate-soft)}
.ac-owner{grid-column:1 / -1; font-size:12.5px; color:var(--slate-text)}
.ac-item.on, .ac-item:hover{background:var(--cloud)}
.ac-item.on b{color:var(--teal-deep)}
.ac-empty{padding:11px 10px; font-size:13.5px; color:var(--slate-text)}

/* ---------------- CSV import. The <label> IS the drop target, so the whole zone is
   clickable and keyboard-reachable without a single click handler. */
.import-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; margin-top:18px; max-width:720px}
.dropzone{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center;
  padding:38px 20px; border:2px dashed var(--line); border-radius:13px; cursor:pointer; background:var(--cloud);
  transition:border-color .16s ease, background .16s ease}
.dropzone:hover{border-color:var(--slate-soft)}
.dropzone.over{border-color:var(--teal); border-style:solid; background:rgba(14,124,123,.06)}
.dropzone input[type=file]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.dropzone:focus-within{outline:2px solid var(--teal-deep); outline-offset:3px}
.dz-ico svg{width:26px; height:26px; color:var(--teal-deep); margin-bottom:4px}
.dz-main{font:600 15.5px var(--font); color:var(--ink)}
.dz-sub{font-size:13.5px; color:var(--slate-text)}
.dz-browse{color:var(--teal-deep); font-weight:600; text-decoration:underline}
.import-help{margin-top:16px; border-top:1px solid var(--line-soft); padding-top:14px}
.import-help summary{cursor:pointer; font:600 14px var(--font); color:var(--teal-deep)}
.import-help p, .import-help li{font-size:13.5px; color:var(--slate-text); line-height:1.6}
.import-help ul{margin:8px 0 8px 18px}
.import-help b{color:var(--ink)}
.imp-h2{margin:30px 0 10px; font-size:21px}
.imp-summary{font-size:14px; color:var(--ink-soft); margin-bottom:12px}
.imp-summary code{background:var(--cloud); border-radius:4px; padding:1px 5px; font-size:12.5px}
.imp-warn{background:#FFF8EC; border:1px solid #F0DFC0; border-radius:11px; padding:13px 15px; margin-bottom:14px; font-size:13px; color:#6B4E16}
.imp-warn ul{margin:7px 0 0 17px; line-height:1.6}
.imp-warn b{color:#5A3F0C}
.imp-table{font-size:13.5px}
.imp-actions{display:flex; gap:10px; margin-top:16px}
@media (max-width:640px){ .imp-actions{flex-direction:column} .imp-actions .btn{width:100%; justify-content:center} }

/* ---------------- pet profile v2: photo avatar, meta + temperament chips, header save */
.pet-head{align-items:flex-start}
.pet-avatar{flex:0 0 auto; position:relative; width:92px; height:92px; border-radius:50%; overflow:hidden; cursor:pointer;
  background:var(--cloud) center/cover no-repeat; display:grid; place-items:center; border:3px solid #fff; box-shadow:0 4px 14px rgba(20,28,46,.12)}
.pet-avatar img{width:100%; height:100%; object-fit:cover}
.pet-avatar input[type=file]{display:none}
.pet-avatar-cam{position:absolute; right:2px; bottom:2px; width:26px; height:26px; border-radius:50%; background:var(--teal); display:grid; place-items:center; opacity:0; transition:opacity .15s ease}
.pet-avatar-cam svg{width:14px; height:14px; stroke:#fff; color:#fff}
.pet-avatar:hover .pet-avatar-cam, .pet-avatar:focus-within .pet-avatar-cam{opacity:1}
.pet-head-act{margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto}
.pet-breedline{color:var(--slate-text); font-size:14.5px; margin-top:2px}
.sexsym{font-size:20px; line-height:1}
.sexsym.male{color:#2f74d0}
.sexsym.fem{color:#c0451f}
.pet-meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.pet-meta-bit{font-size:12.5px; color:var(--ink-soft); background:var(--cloud); border-radius:7px; padding:3px 9px}
.pet-temps{display:flex; gap:7px; flex-wrap:wrap; margin-top:8px}
.temp-chip{font-size:12.5px; font-weight:600; color:var(--teal-deep); background:rgba(14,124,123,.09); border-radius:999px; padding:4px 11px}
@media (max-width:640px){ .pet-head-act{margin-left:0; width:100%; align-items:stretch} .pet-head-act .btn{width:100%; justify-content:center} }

/* About + grooming preferences + health inputs read cleanly, not form-heavy */
.about-box{width:100%; border:1.5px solid var(--line); border-radius:11px; padding:11px 13px; font:14.5px/1.6 var(--font); color:var(--ink); resize:vertical; background:#fff}
.about-box:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(14,124,123,.12)}
.pref-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 16px}
@media (max-width:560px){ .pref-grid{grid-template-columns:1fr} }

/* groom history as a timeline (was a flat table) */
.groom-timeline{list-style:none; margin:12px 0 0; padding:0}
.gt-item{position:relative; padding:0 0 16px 24px}
.gt-item:not(:last-child)::before{content:""; position:absolute; left:6px; top:15px; bottom:0; width:2px; background:var(--line)}
.gt-dot{position:absolute; left:0; top:4px; width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--teal)}
.gt-item.done .gt-dot{border-color:var(--success-deep, #12744F); background:var(--success-deep, #12744F)}
.gt-item.warn .gt-dot{border-color:var(--coral-btn)}
.gt-top{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.gt-top b{font-size:13.5px; color:var(--ink)}

/* notes: sticky-style entries with author + date */
.note-list{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:9px}
.note-item{background:#FFF8EC; border:1px solid #F0DFC0; border-radius:11px; padding:11px 13px}
.note-item p{margin:0 0 6px; font-size:13.5px; line-height:1.55; color:#5A3F0C}
.note-foot{display:flex; align-items:center; justify-content:space-between; gap:8px}
.note-del{background:none; border:0; color:var(--slate-soft); font-size:16px; line-height:1; cursor:pointer; padding:0 4px}
.note-del:hover{color:var(--coral-btn)}
.note-empty{padding:2px}
.note-add{margin-top:13px; padding-top:13px; border-top:1px solid var(--line-soft)}
.note-add textarea{width:100%; border:1.5px solid var(--line); border-radius:10px; padding:9px 11px; font:14px/1.5 var(--font); resize:vertical}
.note-add textarea:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,124,123,.12)}
.note-add-row{display:flex; gap:8px; margin-top:8px}
.note-add-row input{flex:1; height:38px; border:1.5px solid var(--line); border-radius:10px; padding:0 11px; font:13.5px var(--font); min-width:0}
.note-add-row .btn{flex:0 0 auto}

/* ---------------- dashboard v2: briefing, count cards, 7-day chart, get-started */
.briefing{margin:-6px 0 18px; font-size:14.5px; color:var(--slate-text); line-height:1.6}
.briefing b{color:var(--ink)}
.dash-row{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px}
@media (max-width:1100px){ .dash-row{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .dash-row{grid-template-columns:1fr} }
.dash-row .sub a{color:var(--teal-deep)}
.target-track{display:block; height:6px; border-radius:4px; background:var(--line-soft); margin:8px 0 4px; overflow:hidden}
.target-track i{display:block; height:100%; width:var(--w,0%); background:var(--teal); border-radius:4px; transition:width .8s cubic-bezier(.2,.7,.2,1)}
.dash-cols{display:grid; grid-template-columns:1.05fr 1.4fr; gap:22px; align-items:start; margin-bottom:6px}
@media (max-width:1100px){ .dash-cols{grid-template-columns:1fr} }
.dash-stats{grid-template-columns:repeat(2,1fr); margin-bottom:0}
.getstart{margin-bottom:22px; border-color:rgba(14,124,123,.35)}
.gs-list{margin:10px 0 0 18px; display:flex; flex-direction:column; gap:12px; font-size:14px; color:var(--ink-soft); line-height:1.55}
.gs-list a{color:var(--teal-deep); font-weight:600}
.gs-link{display:flex; align-items:center; gap:8px; margin-top:6px; flex-wrap:wrap}
.gs-link code{background:var(--cloud); border-radius:7px; padding:5px 9px; font-size:12.5px; word-break:break-all}

/* column charts (reports + dashboard). Bars grow in when motion is allowed. */
.colchart{display:flex; align-items:flex-end; gap:10px; height:170px; padding-top:14px}
.colchart.mini{height:120px}
.colbar{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; min-width:0}
.colbar i{display:block; width:100%; max-width:44px; height:var(--h,0%); min-height:2px; background:rgba(14,124,123,.8); border-radius:6px 6px 0 0}
.anim-on .colbar i{animation:colgrow .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes colgrow{from{height:0}to{height:var(--h,0%)}}
.colbar b{font-size:11px; color:var(--ink); margin:4px 0 1px; white-space:nowrap}
.colbar span{font-size:11px; color:var(--slate-soft)}
.hbar{display:flex; align-items:center; gap:10px; margin-top:11px}
.hb-label{flex:0 0 128px; font-size:13px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.hb-track{flex:1; height:9px; border-radius:5px; background:var(--line-soft); overflow:hidden}
.hb-track i{display:block; height:100%; width:var(--w,0%); background:var(--teal); border-radius:5px; transition:width .8s cubic-bezier(.2,.7,.2,1)}
.hbar b{flex:0 0 auto; font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.rep-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start}
@media (max-width:980px){ .rep-grid{grid-template-columns:1fr} }

/* ---------------- groomer week/day calendar */
.calbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.calbar .cal-title{font:600 15px var(--font); color:var(--ink); min-width:120px; text-align:center}
.calbar .off{pointer-events:none; opacity:.5}
.viewtog{display:inline-flex; border:1.5px solid var(--line); border-radius:10px; overflow:hidden}
.viewtog a{padding:7px 14px; font:600 13px var(--font); color:var(--slate-text); text-decoration:none}
.viewtog a.on{background:var(--teal); color:#fff}
.wk-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:#fff}
.wk-grid{display:grid; grid-template-columns:56px repeat(7,minmax(122px,1fr)); min-width:760px}
.wk-grid.day{grid-template-columns:56px 1fr; min-width:0}
.wk-corner{border-bottom:1px solid var(--line)}
.wk-head{padding:10px 8px; text-align:center; border-bottom:1px solid var(--line); border-left:1px solid var(--line-soft)}
.wk-head span{display:block; font-size:11.5px; color:var(--slate-soft); text-transform:uppercase; letter-spacing:.04em}
.wk-head b{font-size:16px; color:var(--ink)}
.wk-head.today b{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--teal); color:#fff}
.wk-hours{position:relative; height:calc(var(--span) * 56px)}
.wk-hour{position:absolute; right:8px; transform:translateY(-6px); font-size:10.5px; color:var(--slate-soft)}
.wk-col{position:relative; height:100%; min-height:100%; border-left:1px solid var(--line-soft);
  background-image:repeating-linear-gradient(to bottom, transparent 0 55px, var(--line-soft) 55px 56px)}
.wk-col.closed{background:repeating-linear-gradient(-45deg, var(--cloud) 0 8px, #fff 8px 16px)}
.wk-closed-label{position:sticky; top:12px; display:block; text-align:center; margin-top:14px; font-size:12px; color:var(--slate-soft)}
.wk-open{position:absolute; left:0; right:0; background:rgba(14,124,123,.045)}
.wk-now{position:absolute; left:0; right:0; height:2px; background:var(--coral); z-index:3}
.wk-now::before{content:""; position:absolute; left:-1px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--coral)}
.wk-ev{position:absolute; left:4px; right:4px; z-index:2; display:block; padding:5px 8px; border-radius:9px; overflow:hidden;
  background:rgba(14,124,123,.13); border-left:3px solid var(--teal); text-decoration:none; transition:transform .15s ease, box-shadow .15s ease}
.wk-ev:hover{transform:translateY(-1px); box-shadow:0 6px 16px rgba(20,28,46,.14); z-index:4}
.wk-ev b{display:block; font-size:12.5px; color:var(--ink); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wk-ev span{display:block; font-size:11px; color:var(--slate-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wk-ev.done{background:var(--cloud); border-left-color:var(--slate-soft); opacity:.8}
.wk-ev.warn{background:rgba(192,69,31,.10); border-left-color:var(--coral-btn)}
.anim-on .wk-ev{animation:evpop .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes evpop{from{opacity:0; transform:translateY(5px)}to{opacity:1; transform:none}}

/* clients page */
.cl-search{height:40px; border:1.5px solid var(--line); border-radius:11px; padding:0 12px; font:14px var(--font); min-width:230px}
.cl-search:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(14,124,123,.13)}

/* settings: hours editor, notifications, share rows */
.hours-editor{display:flex; flex-direction:column; gap:9px; max-width:560px}
.hrow{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:12px; padding:10px 14px}
.hrow .toggle-label{font-weight:600; color:var(--ink); min-width:88px}
.hrow-times{display:flex; align-items:center; gap:8px}
.hrow-times select{height:38px; border:1.5px solid var(--line); border-radius:9px; font:13.5px var(--font); padding:0 8px}
.hrow-closed{display:none}
.hrow.closed{background:var(--cloud)}
.hrow.closed .hrow-times{display:none}
.hrow.closed .hrow-closed{display:block}
.hrow.closed .toggle-label{color:var(--slate-soft)}
.notif-list{display:flex; flex-direction:column; gap:9px; max-width:560px}
.notif-row{display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer}
.notif-txt{display:flex; flex-direction:column; gap:2px}
.notif-txt b{font-size:14px; color:var(--ink)}
.notif-txt span{font-size:12.5px; color:var(--slate-text); line-height:1.5}
.share-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.share-url{flex:1 1 260px; background:var(--cloud); border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:12.5px; word-break:break-all; min-width:0}

/* ---------------- pet profile grid. The old single column left a dead right rail;
   main work (details, vaccinations, history) left, reference (owner, photos,
   defaults) right, like a real records product. */
.pet-grid{display:grid; grid-template-columns:1.55fr 1fr; gap:22px; align-items:start; margin-top:4px}
.pet-col{display:flex; flex-direction:column; gap:22px; min-width:0}
@media (max-width:980px){ .pet-grid{grid-template-columns:1fr} }
.owner-rows{border:1px solid var(--line); border-radius:12px; overflow:hidden}
.owner-rows .setrow{padding:13px 16px; font-size:14px}
.owner-rows .setrow:last-child{border-bottom:0}
.owner-rows a{color:var(--teal-deep)}

/* vaccination records */
.vax-list{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.vax-row{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:11px; padding:10px 12px}
.vax-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.vax-main b{font-size:14px; color:var(--ink)}
.vax-row .stat-dot{flex:0 0 auto}
.vax-del{flex:0 0 auto; width:28px; height:28px; border:0; border-radius:8px; background:none; color:var(--slate-soft); font-size:18px; line-height:1; cursor:pointer}
.vax-del:hover{background:rgba(192,69,31,.08); color:var(--coral-btn)}
.vax-empty{padding:4px 2px}
.vax-add{display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--line-soft)}
.vax-add input[type=text]{flex:1 1 150px; min-width:0; height:40px; border:1.5px solid var(--line); border-radius:10px; padding:0 11px; font:14px var(--font)}
.vax-date{display:flex; flex-direction:column; gap:3px; flex:0 1 auto}
.vax-date span{font-size:11.5px; font-weight:600; color:var(--slate-text)}
.vax-date input{height:40px; border:1.5px solid var(--line); border-radius:10px; padding:0 8px; font:13px var(--font); color:var(--ink)}
.vax-add input:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(14,124,123,.12)}
.vax-add .btn{height:40px}

/* editable shop settings on the settings page */
.shop-form{max-width:560px}
.shop-form .book-msg{margin-top:10px}

/* ---------------- mixed-breed toggle. Most dogs a groomer sees are mixes. */
.mix-toggle{display:flex; align-items:center; gap:9px; margin-top:9px; font-size:13.5px; color:var(--ink-soft); cursor:pointer}
.mix-toggle input{position:absolute; opacity:0; width:0; height:0}
.mix-toggle input:checked ~ .chk-box{background:var(--teal); border-color:var(--teal)}
.mix-toggle input:checked ~ .chk-box svg{stroke-dashoffset:0}
.mix-toggle input:focus-visible ~ .chk-box{outline:2px solid var(--teal-deep); outline-offset:2px}
.mix-tag{font-size:11.5px; color:var(--teal-deep); background:rgba(14,124,123,.09); border-radius:4px; padding:1px 5px; margin-left:5px; white-space:nowrap}

/* ---------------- coat condition. Real radios in a fieldset: arrow-key nav and
   group semantics come free, which a div+role would have to reimplement badly. */
.coat-set{border:0; padding:0; margin:0 0 4px; min-width:0}
.coat-set legend{padding:0; font:600 14px var(--font); color:var(--ink); margin-bottom:7px}
.coat-opts{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:7px}
.coat-opt{flex:1 1 0; min-width:112px; position:relative}
.coat-opt input{position:absolute; opacity:0; width:0; height:0}
.coat-opt span{display:block; text-align:center; padding:11px 8px; border:1.5px solid var(--line); border-radius:11px;
  font:500 13.5px/1.3 var(--font); color:var(--slate-text); cursor:pointer; transition:border-color .16s ease, color .16s ease, background .16s ease}
.coat-opt span:hover{border-color:var(--slate-soft)}
.coat-opt input:checked + span{border-color:var(--teal); background:rgba(14,124,123,.07); color:var(--teal-deep); font-weight:600}
.coat-opt input:focus-visible + span{outline:2px solid var(--teal-deep); outline-offset:2px}
.q-note{margin:8px 0 0; padding-top:9px; border-top:1px solid var(--line-soft); font-size:12.5px; line-height:1.5; color:var(--slate-text)}

/* ---------------- Stripe trust note. One quiet line beats a decorated security
   card: trust messaging reads as less credible the more it is dressed up. */
.stripe-note{display:flex; align-items:flex-start; gap:10px; background:var(--cloud); border-radius:12px; padding:12px 14px; margin:4px 0 2px; font-size:13px; line-height:1.55; color:var(--slate-text)}
.stripe-note .lock-ico{width:16px; height:16px; flex:0 0 auto; color:var(--teal-deep); margin-top:1px}
.stripe-note b{color:var(--ink); font-weight:600}
.stripe-note-lg{padding:16px 16px; gap:12px; align-items:flex-start; border:1px solid var(--line)}
.stripe-note-lg .lock-ico{width:20px; height:20px}
.stripe-note-lg b{display:block; font-size:14.5px; margin-bottom:3px}
.stripe-note-lg span{display:block; font-size:13px}
.trust-line{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--slate-text); margin-top:12px}
.trust-line .lock-ico{width:15px; height:15px; color:var(--teal-deep); flex:0 0 auto}
.trust-line b{color:var(--ink); font-weight:600}

/* ---------------- no-show fee decision (native <dialog>: focus trap + Esc free) */
.fee-dialog{border:0; border-radius:18px; padding:0; max-width:440px; width:calc(100% - 32px); background:#fff; box-shadow:0 24px 60px rgba(20,28,46,.28)}
.fee-dialog::backdrop{background:rgba(20,28,46,.5)}
.fee-dlg-in{padding:30px 28px 24px; display:flex; flex-direction:column; gap:10px}
.fee-dlg-in h2{font-size:21px; margin:0}
.fee-dlg-sub{color:var(--ink-soft); font-size:14.5px; margin:0; line-height:1.5}
.fee-amount{font:700 42px/1 var(--head); color:var(--ink); margin:6px 0 2px; font-variant-numeric:tabular-nums}
.fee-dlg-note{color:var(--slate); font-size:13px; margin:0; line-height:1.5}
.fee-remember{display:flex; align-items:center; gap:9px; margin-top:8px; font-size:13.5px; color:var(--ink-soft); cursor:pointer}
.fee-remember input{width:16px; height:16px; accent-color:var(--teal); cursor:pointer}
.fee-dlg-actions{display:flex; gap:10px; margin-top:14px}
.fee-dlg-actions .btn{flex:1; justify-content:center}
.fee-dlg-x{background:none; border:0; color:var(--slate); font:500 13px var(--font); cursor:pointer; padding:8px 0 0; text-decoration:underline}
.fee-dlg-x:hover{color:var(--ink)}

/* ---------------- login: Uiverse form (micaelgomestavares), adapted to brand */
.login-page{padding:56px 0 84px}
.login-page .wrap{display:flex; justify-content:center}
.uiform{display:flex; flex-direction:column; gap:10px; background:#fff; padding:36px 32px; width:100%; max-width:460px; border-radius:22px; border:1px solid var(--line); box-shadow:var(--shadow-lg)}
.uiform-head{margin-bottom:10px}
.uiform-head h1{font-size:27px; margin-bottom:4px}
.uiform .flex-column > label{color:var(--ink); font-weight:600; font-size:14px}
.inputForm{border:1.5px solid var(--line); border-radius:12px; height:52px; display:flex; align-items:center; padding-left:14px; background:#fff; transition:border-color .2s ease, box-shadow .2s ease}
.inputForm > svg{flex:0 0 auto; fill:var(--slate); opacity:.85}
.inputForm .input{margin-left:10px; flex:1; min-width:0; border:none; height:100%; font:15.5px var(--font); background:transparent}
.inputForm .input:focus{outline:none}
.inputForm:focus-within{border-color:var(--teal); box-shadow:0 0 0 4px rgba(14,124,123,.14)}
.eye-toggle{background:none; border:0; cursor:pointer; height:100%; padding:0 14px; display:flex; align-items:center}
.eye-toggle svg{fill:var(--slate); transition:fill .15s ease}
.eye-toggle:hover svg, .eye-toggle[aria-pressed="true"] svg{fill:var(--teal-deep)}
.uiform .flex-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.remember{display:flex; align-items:center; gap:8px}
.remember input{width:16px; height:16px; accent-color:var(--teal); cursor:pointer}
.remember label{font-size:13.5px; color:var(--ink-soft); font-weight:500; cursor:pointer}
.uiform .span{font-size:13.5px; color:var(--teal-deep); font-weight:600; cursor:pointer}
.uiform .span:hover{text-decoration:underline}
.button-submit{margin-top:14px; background:var(--ink); border:none; color:#fff; font:600 15.5px var(--font); border-radius:12px; height:52px; width:100%; cursor:pointer; transition:background .2s ease, transform .16s ease}
.button-submit:hover{background:var(--ink-soft); transform:translateY(-1px)}
.button-submit:active{transform:translateY(0) scale(.99)}
.button-submit:disabled{opacity:.6; cursor:default; transform:none}
.uiform .p{text-align:center; color:var(--ink-soft); font-size:14px; margin:6px 0 0}
.uiform .p.line{display:flex; align-items:center; gap:12px; color:var(--slate)}
.uiform .p.line::before, .uiform .p.line::after{content:""; flex:1; height:1px; background:var(--line)}
.btn-social{flex:1; height:50px; border-radius:12px; display:flex; justify-content:center; align-items:center; gap:9px; font:600 14.5px var(--font); border:1.5px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; transition:border-color .2s ease, transform .16s ease}
.btn-social:hover{border-color:var(--teal); transform:translateY(-1px)}
.btn-social svg{fill:currentColor}
@media (max-width:480px){ .uiform{padding:28px 20px; border-radius:18px} }
.hours-row{display:flex; align-items:center; gap:12px}
.hours-row select{flex:1; min-width:0}
.hours-to{color:var(--slate); font-weight:600; font-size:14px; flex:0 0 auto}
.signup-why{margin-top:40px; border-top:1px solid var(--line); padding-top:30px}
.signup-why h2{font-size:22px; margin-bottom:20px}
.signup-why .trust-grid{grid-template-columns:repeat(3,1fr)}
.signup-link{display:flex; gap:8px; margin-top:12px}
.signup-link input{
  flex:1; min-width:0; font:16px var(--font); padding:11px 13px; border:1.5px solid var(--line);
  border-radius:10px; background:var(--cloud); color:var(--ink);
}
.signup-link input:focus{outline:none; border-color:var(--teal)}
.signup-link .btn{flex:0 0 auto}
.powered-by{text-align:center; padding:22px 0 6px}
.powered-by a{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--slate)}
.powered-by a:hover{color:var(--teal-deep)}
.powered-by img{width:20px; height:20px; border-radius:5px}
.breed-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:8px; margin:14px 0 30px}
.breed-grid a{padding:11px 14px; border:1px solid var(--line); border-radius:10px; font-size:14px; font-weight:600; color:var(--ink); background:#fff; transition:border-color .15s ease, color .15s ease}
.breed-grid a:hover{border-color:var(--teal); color:var(--teal-deep)}
.breed-grid a.hidden{display:none}
.breed-h{scroll-margin-top:80px}
.breed-h-count{color:var(--slate); font-weight:600; font-size:.66em}
.crumbs{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; font-weight:600; color:var(--slate); margin-bottom:16px}
.crumbs a{color:var(--teal-deep)}
.crumbs span[aria-hidden]{color:var(--slate-soft)}
.related-breeds{margin-top:38px; border-top:1px solid var(--line); padding-top:26px}
.related-breeds h2{font-size:20px; margin-bottom:12px; text-transform:capitalize}
.cp-out{width:100%; font:16px/1.6 var(--font); padding:14px; border:1.5px solid var(--line); border-radius:12px; background:var(--cloud); color:var(--ink); resize:vertical}
.cp-out:focus{outline:none; border-color:var(--teal); box-shadow:0 0 0 4px rgba(14,124,123,.14)}
/* Before/after showcase gallery */
.show-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; margin-top:8px}
.show-card{margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:box-shadow .25s ease, transform .25s ease}
.show-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px)}
.show-img{position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:linear-gradient(115deg, var(--cloud) 0 48%, rgba(14,124,123,.12) 52% 100%); color:var(--teal-deep)}
.show-img svg{width:46px; height:46px; opacity:.5}
.show-tag{position:absolute; top:10px; font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:999px}
.show-tag.before{left:10px; background:#fff; color:var(--slate); border:1px solid var(--line)}
.show-tag.after{right:10px; background:var(--teal); color:#fff}
.show-card figcaption{padding:13px 16px; display:flex; flex-direction:column; gap:2px}
.show-card figcaption b{font-size:15px; color:var(--ink); letter-spacing:-.01em}
.show-card figcaption span{font-size:13px}

/* Wide data tables become stacked cards on narrow screens */
@media (max-width:700px){
  .appts thead, .cmp thead{position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
  .appts, .appts tbody, .appts tr, .appts td,
  .cmp, .cmp tbody, .cmp tr, .cmp td{display:block; width:auto}
  .tablewrap:has(.appts), .tablewrap:has(.cmp){overflow:visible; border:0; box-shadow:none; border-radius:0; margin-top:8px}
  .appts tr, .cmp tr{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm); padding:8px 18px 14px; margin-bottom:14px;
  }
  .appts td, .cmp td{padding:10px 0; border-bottom:1px solid var(--line-soft); white-space:normal; text-align:left}
  .appts tr td:last-child, .cmp tr td:last-child{border-bottom:0}
  .appts td::before, .cmp td::before{
    content:attr(data-label); display:block; margin-bottom:3px;
    font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--slate-soft);
  }
  .appts td.rowact{display:flex; gap:10px; padding-top:12px}
  .appts td.rowact::before{display:none}
  .appts .rowact .btn-mini{flex:1 1 0; max-width:none}
  .cmp .tool{justify-content:flex-start}
  .cmp tbody tr.row-us{border-color:var(--teal); box-shadow:0 0 0 1.5px var(--teal), var(--shadow-sm)}
  .cmp tbody tr.row-us td{background:transparent}
  .cmp tbody tr.row-us td:first-child{box-shadow:none}
  .matrix-controls{flex-direction:column; align-items:stretch}
  .matrix-search{max-width:none}
  .matrix-chips{overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px}
  .matrix-count{margin-left:0}
}

/* Client appointment manage page (/appt/<token>) */
.am-status{font-size:16px;color:var(--slate-text,#475569)}
.am-warn{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:12px 14px;border-radius:10px;font-size:14px;margin-bottom:16px}
.am-resched{margin-top:22px}
.am-resched h2{font-size:18px;margin:0 0 12px}
.am-day{margin-bottom:16px}
.am-day-h{font-weight:600;font-size:14px;color:var(--slate-text,#475569);margin-bottom:8px}
.am-slots{display:flex;flex-wrap:wrap;gap:8px}
.am-slot{border:1px solid var(--line,#e2e8f0);background:#fff;color:var(--ink,#0f172a);border-radius:9px;padding:9px 14px;font:inherit;font-size:14px;cursor:pointer;transition:border-color .12s,background .12s}
.am-slot:hover{border-color:var(--teal,#0E7C7B);background:rgba(14,124,123,.06)}
.am-slot:disabled{opacity:.5;cursor:default}
#am-cancel{margin-bottom:8px}

/* Breed page editorial content block */
.breed-about{max-width:620px;margin:26px auto 0;background:var(--sand,#faf7f2);border:1px solid var(--line,#e2e8f0);border-radius:14px;padding:20px 22px}
.breed-about p{margin:0 0 14px;font-size:15.5px;line-height:1.65;color:var(--ink,#0f172a)}
.breed-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.breed-facts li{display:flex;flex-direction:column;gap:2px}
.breed-facts li span{color:var(--slate-text,#64748b);text-transform:uppercase;letter-spacing:.03em;font-size:11px}
.breed-facts li b{font-size:14.5px;color:var(--ink,#0f172a)}
@media(max-width:520px){.breed-facts{grid-template-columns:1fr}}

/* Pricing plans grid (Solo / Pro / Team) */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;margin-top:8px}
.plan-card{position:relative;background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:16px;padding:26px 24px 28px}
.plan-card.featured{border-color:var(--teal,#0E7C7B);box-shadow:0 10px 34px rgba(14,124,123,.12)}
.plan-card .plan-badge{position:absolute;top:-11px;left:24px;background:var(--teal,#0E7C7B);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 11px;border-radius:999px}
.plan-head{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.plan-lead{font-size:13px;font-weight:600;color:var(--slate-text,#475569);margin:16px 0 8px}
.plan-card .ticks{margin-top:6px}
@media(max-width:820px){.plans{grid-template-columns:1fr;max-width:440px;margin:0 auto}}

/* Settings: plan picker, team list, sidebar switcher */
.plan-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px}
.plan-opt{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line,#e2e8f0);border-radius:12px;padding:12px 14px;cursor:pointer}
.plan-opt.sel{border-color:var(--teal,#0E7C7B);background:rgba(14,124,123,.05)}
.plan-opt-h{font-size:15px}
.plan-opt-sub{font-size:12px;color:var(--slate-text,#64748b)}
.team-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.team-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line,#e2e8f0);border-radius:10px}
.side-switch{margin:10px 12px 2px}
.side-switch-lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--slate-text,#94a3b8);margin-bottom:4px}
.side-switch-sel{width:100%;padding:7px 8px;border:1px solid var(--line,#e2e8f0);border-radius:8px;font:inherit;font-size:13px;background:#fff}
@media(max-width:520px){.plan-picker{grid-template-columns:1fr}}

/* Pricing card interactive effects (vanilla port of React Bits SpotlightCard + BorderGlow) */
.plans .plan-card{--mouse-x:50%;--mouse-y:50%;--edge-proximity:0;--cursor-angle:90deg}
.plans .plan-card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(340px circle at var(--mouse-x) var(--mouse-y), rgba(14,124,123,.16), transparent 62%);
  opacity:0;transition:opacity .4s ease}
.plans .plan-card:hover::before,.plans .plan-card:focus-within::before{opacity:1}
.plans .plan-card.featured .pcard-glow{position:absolute;inset:0;border-radius:inherit;padding:1.6px;pointer-events:none;
  background:conic-gradient(from var(--cursor-angle),transparent 0deg,var(--teal,#0E7C7B) 32deg,#3ad0cc 80deg,transparent 128deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:calc(var(--edge-proximity) * .95);transition:opacity .3s ease}
@media (prefers-reduced-motion: reduce){.plans .plan-card::before,.plans .plan-card.featured .pcard-glow{transition:none}}

/* Standalone footer pages (Terms, Privacy, How it works, Booking policy) */
.doc{padding:56px 0 76px}
.doc-h1{font-family:var(--head); font-weight:500; font-size:clamp(32px,4.5vw,46px); color:var(--ink); letter-spacing:-.01em; margin:0}
.doc-updated{color:var(--slate-text,#8a8577); font-size:14px; margin:8px 0 34px}
.doc-sec{margin-bottom:24px}
.doc-sec h2{font-family:var(--head); font-weight:600; font-size:19px; color:var(--ink); margin:0 0 10px}
.doc-sec p{font-size:15.5px; line-height:1.7; color:var(--slate-text,#4b5563); margin:0 0 10px; max-width:70ch}
/* Footer legal row */
.foot-legal{display:flex; flex-wrap:wrap; align-items:center; gap:16px}
.foot-base a{color:inherit; opacity:.82}
.foot-base a:hover{opacity:1}

/* ---- photo cards & split bands (Base44-design port, 2026-07-21) ---- */
.photo-card{border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--cloud)}
.photo-card img{display:block;width:100%;height:100%;object-fit:cover}
.photo-hero{position:relative;display:flex;justify-content:center}
.hero-photo{max-width:520px;aspect-ratio:3/4}
.depo-card{position:absolute;left:-14px;bottom:26px;background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:14px 18px;min-width:215px}
.depo-head{display:flex;gap:10px;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--line-soft);margin-bottom:8px}
.depo-head .ico{flex:none}
.depo-row{display:flex;justify-content:space-between;font-size:.86rem;color:var(--slate-text);padding:3px 0}
.depo-row b{color:var(--ink);font-weight:650}
.depo-row .depo-minus{color:var(--success)}
.band-photo{margin-top:34px;aspect-ratio:1100/468}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.split-photo{align-self:center}
.split-copy h2{margin:10px 0 14px;max-width:560px}
.check-list{list-style:none;margin:22px 0 20px;padding:0;display:grid;gap:14px}
.check-list li{position:relative;padding-left:34px}
.check-list li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--success);opacity:.14}
.check-list li::after{content:"";position:absolute;left:6px;top:8px;width:10px;height:6px;border-left:2px solid var(--success-deep);border-bottom:2px solid var(--success-deep);transform:rotate(-45deg)}
.check-list b{display:block;font-weight:650}
.check-list span{font-size:.92rem;color:var(--slate-text)}
.link-arrow{color:var(--teal);font-weight:600;text-decoration:none}
.link-arrow:hover{color:var(--teal-deep);text-decoration:underline}
.quote-copy{max-width:560px}
.quote-mark{font-family:var(--head);font-size:4rem;line-height:1;color:var(--teal);opacity:.35;display:block}
.quote{margin:0 0 18px;font-family:var(--head);font-size:1.45rem;line-height:1.45;font-weight:600;color:var(--ink-soft)}
.quote-attr{color:var(--slate-text)}
.quote-attr b{color:var(--ink)}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:28px}
  .split-photo{max-width:480px;margin:0 auto}
  .depo-card{left:8px;bottom:14px}
  .quote{font-size:1.2rem}
}

/* ---- breed marquee ---- */
.marquee{overflow:hidden;padding:4px 0 30px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq 45s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
.mq-chip{flex:none;margin-right:12px;padding:9px 20px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--slate-text);font-size:.92rem;text-decoration:none;box-shadow:var(--shadow-xs);transition:color .15s,border-color .15s}
.mq-chip:hover{color:var(--teal-deep);border-color:var(--teal)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}}