/* Smartbite. One stylesheet, no framework, no build step.
   Reads tokens.css. Brand: "Ugrás". See ../BRAND.md. */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:var(--t-base);font-weight:400;
  line-height:1.55;letter-spacing:-.004em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;margin:0;letter-spacing:-.025em}
h1{font-size:var(--t-hero);line-height:.98}
h2{font-size:var(--t-h2);line-height:1.05;text-wrap:balance}
h3{font-size:var(--t-md);line-height:1.25;letter-spacing:-.015em}
p{margin:0 0 var(--s-4)}
/* the UA gives figure a 40px side margin, which quietly narrowed every
   review card inside its grid cell. */
figure,blockquote{margin:0}
a{color:var(--accent-ink);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px;border-radius:6px}

.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--s-6)}
.narrow{max-width:var(--narrow)}
section{padding-block:var(--s-24)}
.tint{background:var(--surface-tint)}
.shell{background:var(--shell)}
.sun{background:var(--surface-sun)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- section headers ---------- */
.eyebrow{
  font-family:var(--font-body);font-size:var(--t-sm);font-weight:600;
  color:var(--accent-ink);margin:0 0 var(--s-3);letter-spacing:0;
}
.lede{font-size:var(--t-md);color:var(--ink-2);max-width:60ch;line-height:1.5}
.head{max-width:52ch;margin-bottom:var(--s-12)}
/* On a wide screen 44ch broke two-word headings onto three lines while the
   right half of the row sat empty. The lede keeps its own 60ch measure. */
@media (min-width:1000px){.head{max-width:64ch}}
.head.center{margin-inline:auto;text-align:center}
.head h2 + .lede{margin-top:var(--s-4)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-size:var(--t-base);font-weight:700;
  padding:15px 26px;border-radius:var(--r-pill);border:0;cursor:pointer;
  text-decoration:none;white-space:nowrap;min-height:52px;
  transition:transform var(--t-fast) var(--ease),background var(--t-fast) linear;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
/* the coral button carries INK text. white on coral is 3.45:1 and fails AA. */
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-press)}
.btn-dark{background:var(--ink);color:var(--on-dark)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--hair)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-onDark{background:var(--accent);color:var(--on-accent)}
.btn-sm{min-height:46px;padding:12px 20px;font-size:var(--t-sm)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center}
.risk{font-size:var(--t-sm);color:var(--ink-3);margin:var(--s-4) 0 0}
@media (prefers-reduced-motion:reduce){.btn:hover,.btn:active{transform:none}}

/* the sheen. one slow highlight crossing the primary action, so the eye
   lands on it without anything blinking or bouncing. */
@keyframes sb-sheen{0%,55%{left:-60%}100%{left:135%}}
.btn-sheen{position:relative;overflow:hidden}
.btn-sheen::before{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(105deg,rgba(255,255,255,0),rgba(255,255,255,.62),rgba(255,255,255,0));
  transform:skewX(-16deg);animation:sb-sheen 4.2s ease-in-out infinite;pointer-events:none;
}
@media (prefers-reduced-motion:reduce){.btn-sheen::before{animation:none;opacity:0}}

/* ---------- the mark and the wordmark ---------- */
.logo{display:inline-flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none}
.logo:hover{text-decoration:none}
.logo .mark{width:26px;height:26px;flex:none;color:var(--accent)}
.logo .word{
  font-family:var(--font-display);font-weight:800;font-size:20px;
  letter-spacing:-.035em;line-height:1;
}
.logo.on-dark{color:var(--on-dark);--mark-cut:var(--ink)}
.logo.lg .mark{width:34px;height:34px}
.logo.lg .word{font-size:26px}

/* ---------- floating header ----------
   No bar. A soft scrim at the very top so anything scrolling underneath
   stays readable, and on top of it separate glass chips that float on
   their own: the logo, the nav, and the actions. Same mechanic as the
   easysleep build. */
.site-head{position:fixed;top:0;left:0;right:0;z-index:60;pointer-events:none}
.head-scrim{
  position:absolute;top:0;left:0;right:0;height:64px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,252,246,.88) 0%,rgba(255,252,246,.55) 50%,rgba(255,252,246,0) 100%);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  -webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 40%,transparent 100%);
}
.head-inner{
  position:relative;display:flex;align-items:center;gap:var(--s-3);
  width:100%;max-width:var(--container);margin-inline:auto;
  padding:14px var(--s-6);
}
.head-inner > *{pointer-events:auto}

.chip{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--chip);border:1px solid var(--chip-edge);
  border-radius:var(--r-pill);box-shadow:var(--chip-shadow);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
}
.chip-logo{padding:9px 16px;min-height:46px}

/* the nav reads as an iPhone tab bar: one floating capsule, pills inside */
.navbar{
  display:flex;gap:4px;margin-inline:auto;padding:5px;
  background:var(--chip);border:1px solid var(--chip-edge);
  border-radius:var(--r-pill);box-shadow:var(--chip-shadow);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
}
.navbar a{
  font-size:var(--t-sm);font-weight:600;color:var(--ink);
  padding:10px 16px;border-radius:var(--r-pill);white-space:nowrap;
  min-height:38px;display:inline-flex;align-items:center;
  transition:background var(--t-fast) linear,color var(--t-fast) linear;
}
.navbar a:hover{text-decoration:none;background:rgba(30,27,51,.06)}
.navbar a[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.navbar a[aria-current="page"]:hover{background:var(--accent-press)}

.head-actions{display:flex;align-items:center;gap:var(--s-2)}
.tel{
  padding:9px 16px;min-height:46px;color:var(--ink);
  font-weight:600;font-size:var(--t-sm);white-space:nowrap;
}
.tel:hover{text-decoration:none;color:var(--accent-ink)}
.tel svg{width:17px;height:17px;flex:none}
.head-actions .btn{box-shadow:var(--chip-shadow)}

/* hamburger: two bars, not three. Morphs into an X when the menu opens. */
.burger{
  display:none;position:relative;width:46px;height:46px;flex:none;padding:0;cursor:pointer;
  background:var(--chip);border:1px solid var(--chip-edge);
  border-radius:var(--r-pill);box-shadow:var(--chip-shadow);
  backdrop-filter:blur(12px) saturate(160%);
  -webkit-backdrop-filter:blur(12px) saturate(160%);
}
.burger i{
  position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform var(--t-enter) var(--ease-out);
}
.burger i:nth-child(1){top:19px}
.burger i:nth-child(2){top:25px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* the menu drops down from behind the chips */
.sheet-back{
  position:fixed;inset:0;z-index:55;background:rgba(30,27,51,.42);
  opacity:0;pointer-events:none;transition:opacity var(--t-enter) linear;
}
.sheet-back[data-open]{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;top:0;left:0;right:0;z-index:58;background:var(--paper);
  border-bottom-left-radius:var(--r-xl);border-bottom-right-radius:var(--r-xl);
  box-shadow:0 18px 50px rgba(30,27,51,.18);
  padding:calc(var(--header-h) + 26px) var(--s-6) var(--s-8);
  display:flex;flex-direction:column;gap:2px;
  transform:translateY(-100%);transition:transform .42s var(--ease-out);
  max-height:100vh;overflow-y:auto;
}
.sheet[data-open]{transform:translateY(0)}
.sheet a{
  color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:24px;
  letter-spacing:-.02em;padding:13px 0;border-bottom:1px solid var(--hair-2);
}
.sheet a:hover{text-decoration:none;color:var(--accent-ink)}
.sheet .btn{margin-top:var(--s-6);width:100%}
.sheet .sheet-tel{
  font-family:var(--font-body);font-size:var(--t-sm);font-weight:600;
  color:var(--ink-2);border:0;padding-top:var(--s-4);
}

/* ---------- mobile call bar ---------- */
.callbar{display:none}

/* ---------- hero ---------- */
.hero{padding-block:calc(var(--header-h) + var(--s-16)) var(--s-16);position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-16);align-items:center}
.hero h1{margin-bottom:var(--s-6)}
.hero h1 em{font-style:normal;color:var(--accent-ink)}
.hero .lede{font-size:var(--t-md);margin-bottom:var(--s-8)}
/* The hero carries the real appliance, not a stock child: a warm panel,
   the photo resting on it at a slight angle like something actually
   handed to you, and one callout naming a specific part of it. The
   callout is the "only someone who used the product" detail: it points
   at the raised tongue guide that is otherwise just an odd blue shape. */
.hero-art{position:relative;margin:0}
.hero-art img{width:100%;max-width:400px}
.hero-panel{
  background:var(--surface-sun);border-radius:var(--r-xl);
  padding:var(--s-16) var(--s-10);
  display:grid;place-items:center;
}
.hero-photo{position:relative;width:100%;max-width:360px;transform:rotate(-4deg)}
.hero-photo img{width:100%;display:block;filter:drop-shadow(0 22px 30px rgba(30,27,51,.16))}

.hero-note{position:absolute;left:var(--nx);top:var(--ny);transform:rotate(4deg)}
.hero-note-dot{
  position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;
  background:var(--ink);box-shadow:0 0 0 3px var(--surface-sun);
}
.hero-note-dot::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1.5px solid var(--ink);opacity:.4;animation:sb-note-pulse 2.6s ease-out infinite;
}
.hero-note-line{
  position:absolute;left:0;top:0;width:38px;height:1.5px;background:var(--ink);
  opacity:.4;transform-origin:0 50%;transform:rotate(-36deg) translateY(-1px);
}
.hero-note-card{
  position:absolute;left:34px;top:-52px;max-width:168px;
  background:var(--paper);border-radius:12px;padding:9px 13px;
  box-shadow:var(--ring),0 8px 18px rgba(30,27,51,.12);
  font-size:var(--t-xs);font-weight:600;line-height:1.4;color:var(--ink);
}
@keyframes sb-note-pulse{0%{transform:scale(.6);opacity:.55}100%{transform:scale(2.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-note-dot::after{animation:none;opacity:.25}}

/* ---------- the mechanism diagram ----------
   Two schematic cross-sections of the upper jaw. Coral here is semantic,
   not decorative: it only ever marks the state that is going wrong. */
/* full width under the prose: this is the section's main visual, so it
   gets the room rather than being squeezed into a side column */
.diagram{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);margin-bottom:var(--s-12)}
.dg{margin:0;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--ring);padding:var(--s-8);display:grid;grid-template-columns:auto 1fr;gap:var(--s-8);align-items:center}
.dg svg{width:100%;max-width:210px;height:auto;display:block;color:var(--ink)}
.dg figcaption{font-size:var(--t-sm);line-height:1.5;color:var(--ink-2)}
.dg figcaption b{color:var(--ink);font-weight:700}
.dg-arch{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round}
.dg-tongue{fill:var(--sun);stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round}
.dg-tongue.dg-low{fill:var(--sun-soft)}
.dg-dot{fill:var(--ink)}
.dg-tooth{fill:var(--ink)}
.dg-tooth.dg-bad{fill:var(--accent)}
.dg-cheek{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;opacity:.34}
.dg-arrow path{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.dg-out path{stroke:var(--ink)}
.dg-in path{stroke:var(--ink);opacity:.55}
.dg-bad-arrow path{stroke:var(--accent);opacity:1}
.dg-gap{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:5 6;opacity:.75}

/* facts under the hero */
.facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--hair);border-radius:var(--r-xl);overflow:hidden;
  margin-top:var(--s-12);box-shadow:var(--ring);
}
.facts div{background:var(--card);padding:var(--s-6)}
.facts dt{font-family:var(--font-display);font-weight:800;font-size:var(--t-lg);line-height:1.1;letter-spacing:-.02em}
.facts dd{margin:6px 0 0;color:var(--ink-2);font-size:var(--t-sm)}

/* ---------- the tick-box checker ---------- */
.checker{
  background:var(--ink);color:var(--on-dark);border-radius:var(--r-xl);
  padding:var(--s-16) var(--s-12);
}
.checker h2{color:var(--on-dark)}
.checker .lede{color:var(--on-dark-2)}
.checker .eyebrow{color:var(--sun)}
.sympt{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3);margin:var(--s-8) 0 0}
.sympt label{
  display:flex;align-items:flex-start;gap:14px;cursor:pointer;
  padding:16px 20px;border-radius:var(--r-card);
  background:rgba(255,255,255,.05);border:1px solid var(--hair-dark);
  transition:background var(--t-fast) linear,border-color var(--t-fast) linear;
  font-size:var(--t-base);line-height:1.4;
}
.sympt label:hover{background:rgba(255,255,255,.09)}
.sympt input{position:absolute;opacity:0;width:0;height:0}
.tick{
  flex:none;width:24px;height:24px;border-radius:8px;margin-top:1px;
  border:1.5px solid rgba(255,255,255,.4);position:relative;
  transition:background var(--t-fast) linear,border-color var(--t-fast) linear;
}
.tick::after{
  content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;
  border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);
  transition:transform var(--t-fast) var(--ease-out);
}
.sympt input:checked + .tick{background:var(--sun);border-color:var(--sun)}
.sympt input:checked + .tick::after{transform:rotate(45deg) scale(1)}
.sympt input:focus-visible + .tick{outline:3px solid var(--sun);outline-offset:3px}
.sympt label:has(input:checked){background:rgba(255,201,74,.10);border-color:rgba(255,201,74,.45)}
.verdict{
  margin-top:var(--s-8);padding-top:var(--s-8);border-top:1px solid var(--hair-dark);
  display:flex;flex-wrap:wrap;gap:var(--s-6);align-items:center;justify-content:space-between;
}
.verdict p{margin:0;max-width:52ch;color:var(--on-dark-2);font-size:var(--t-base)}
.verdict strong{color:var(--on-dark);font-weight:600}

/* ---------- split blocks ----------
   The column count lives in one custom property so the phone breakpoint can
   override it once, for every variant. Setting grid-template-columns on
   .split.wide-left directly would out-specify the media query and leave the
   two columns squashed side by side on a phone. */
.split{display:grid;grid-template-columns:var(--split-cols,1fr 1fr);gap:var(--s-16);align-items:center}
.split.wide-left{--split-cols:1.15fr .85fr}
/* Photos are never framed: no tinted box, no padding. Only the map keeps a
   surface, because an iframe needs one. */
.figure{border-radius:var(--r-xl);overflow:hidden;background:none;padding:0}
.figure.map-figure{background:var(--surface-tint);padding:0}

/* the contact section's map: no padding, the iframe fills the whole panel,
   and gets a fixed height since it has no intrinsic aspect ratio like a photo */
.map-figure{padding:0;min-height:320px}
.map-figure iframe{width:100%;height:100%;min-height:320px;border:0;display:block}
.figure.on-sun{background:none}
.figure.on-coral{background:none}
.figure img{margin-inline:auto}

/* checklist */
.checks li{
  display:flex;gap:14px;align-items:flex-start;
  padding:12px 0;border-bottom:1px solid var(--hair-2);line-height:1.45;
}
.checks li:last-child{border-bottom:0}
.checks svg{flex:none;width:22px;height:22px;margin-top:1px;color:var(--accent-ink)}

/* ---------- card grids ---------- */
.grid{display:grid;gap:var(--s-6)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--card);border-radius:var(--r-lg);padding:var(--s-8);
  box-shadow:var(--ring);
}
.card h3{margin-bottom:var(--s-2)}
.card p{color:var(--ink-2);font-size:var(--t-sm);margin:0;line-height:1.5}
.card .ico{
  width:46px;height:46px;border-radius:14px;background:var(--accent-soft);
  display:grid;place-items:center;margin-bottom:var(--s-6);color:var(--accent-ink);
}
.card .ico svg{width:22px;height:22px}
.card.sun .ico{background:var(--sun-soft);color:var(--ink)}
.card .num{
  font-family:var(--font-display);font-weight:800;font-size:36px;line-height:1;
  color:var(--accent);margin-bottom:var(--s-4);letter-spacing:-.03em;
}

/* photo cards for the audience grid */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.who article{
  border-radius:var(--r-lg);overflow:hidden;background:var(--card);
  box-shadow:var(--ring);display:flex;flex-direction:column;
}
.who img{aspect-ratio:16/10;object-fit:cover;width:100%}
.who .body{padding:var(--s-6) var(--s-6) var(--s-8)}
.who h3{margin-bottom:var(--s-2)}
.who p{margin:0;color:var(--ink-2);font-size:var(--t-sm);line-height:1.5}

/* ---------- comparison ---------- */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:stretch}
.col{border-radius:var(--r-xl);padding:var(--s-8);display:flex;flex-direction:column}
.col ul{flex:1}
.col .col-foot{margin-top:var(--s-8)}
.col.ours{background:var(--ink);color:var(--on-dark)}
.col.theirs{background:var(--card);box-shadow:var(--ring);color:var(--ink)}
.col .col-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding-bottom:var(--s-6);margin-bottom:var(--s-2);
}
.col.ours .col-head{border-bottom:1px solid var(--hair-dark)}
.col.theirs .col-head{border-bottom:1px solid var(--hair-2)}
.col .col-head h3{font-size:var(--t-lg)}
.col.ours .col-head h3{color:var(--on-dark)}
.col li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;line-height:1.45;font-size:var(--t-sm)}
.col.ours li{border-bottom:1px solid rgba(255,255,255,.09);color:var(--on-dark-3)}
.col.theirs li{border-bottom:1px solid var(--hair-2);color:var(--ink-2)}
.col li:last-child{border-bottom:0}
.col li svg{flex:none;width:20px;height:20px;margin-top:1px}
.col.ours li svg{color:var(--accent)}
.col.theirs li svg{color:var(--accent)}

/* ---------- price ---------- */
.prices{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:start}
.price-card{border-radius:var(--r-xl);padding:var(--s-8)}
.price-card.ours{background:var(--accent);color:var(--ink)}
.price-card.theirs{background:var(--card);box-shadow:var(--ring)}
.price-card h3{font-size:var(--t-lg);margin-bottom:var(--s-6)}
.price-card .line{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  padding:16px 0;border-bottom:1px solid rgba(30,27,51,.18);
}
.price-card.theirs .line{border-bottom-color:var(--hair-2)}
.price-card .line:last-of-type{border-bottom:0}
.price-card .line span{font-size:var(--t-sm);color:var(--ink-2);max-width:22ch}
.price-card.ours .line span{color:rgba(30,27,51,.78)}
.price-card .line b{
  font-family:var(--font-display);font-weight:800;font-size:var(--t-lg);
  white-space:nowrap;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.price-note{font-size:var(--t-xs);color:var(--ink-3);margin-top:var(--s-6);line-height:1.5}
.price-card.ours .price-note{color:rgba(30,27,51,.72)}

/* ---------- reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.review{
  background:var(--card);border-radius:var(--r-lg);padding:var(--s-8);
  box-shadow:var(--ring);display:flex;flex-direction:column;gap:var(--s-4);
}
.review.feature{grid-column:span 2;background:var(--surface-sun);box-shadow:var(--ring);justify-content:center}
.review blockquote{margin:0;font-size:var(--t-base);line-height:1.55;color:var(--ink)}
.review.feature blockquote{
  font-family:var(--font-display);font-weight:800;font-size:var(--t-lg);
  line-height:1.28;letter-spacing:-.02em;
}
.review footer{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  margin-top:auto;padding-top:var(--s-2);font-size:var(--t-sm);color:var(--ink-3);
}
.review footer b{color:var(--ink);font-weight:600}
.stars{display:flex;gap:2px;color:var(--accent)}
.stars svg{width:16px;height:16px}

/* ---------- doctor ---------- */
.doc{background:var(--surface-sun);border-radius:var(--r-xl);overflow:hidden}
.doc-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s-12);align-items:center;padding:var(--s-8)}
.doc-photo{align-self:center}
.doc-photo img{width:100%;max-width:360px;border-radius:var(--r-lg)}
.doc-body{padding:0 var(--s-8) 0 0}
.doc-body h2{font-size:var(--t-xl)}
.doc-role{color:var(--ink-2);font-weight:600;margin:var(--s-2) 0 var(--s-6)}

/* ---------- faq ---------- */
.faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:var(--s-16);align-items:start}
.faq-layout .head{margin-bottom:0;position:sticky;top:calc(var(--header-h) + 30px)}
.faq{max-width:none}
.faq details{border-bottom:1px solid var(--hair);padding:0}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 0;display:flex;gap:var(--s-6);
  align-items:center;justify-content:space-between;
  font-family:var(--font-display);font-weight:800;font-size:var(--t-md);
  letter-spacing:-.02em;line-height:1.3;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{
  flex:none;width:30px;height:30px;border-radius:50%;background:rgba(30,27,51,.07);
  display:grid;place-items:center;color:var(--ink);
  transition:transform var(--t-enter) var(--ease),background var(--t-fast) linear;
}
.faq summary .pm svg{width:14px;height:14px}
.faq details[open] summary .pm{transform:rotate(45deg);background:var(--accent);color:var(--on-accent)}
.faq details p{color:var(--ink-2);margin:0 0 22px;max-width:66ch}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-12)}
.info li{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--hair-2);align-items:flex-start}
.info li:last-child{border-bottom:0}
.info svg{flex:none;width:22px;height:22px;color:var(--accent-ink);margin-top:2px}
.info b{display:block;font-weight:600}
.info b a{display:inline-flex;align-items:center;min-height:44px}
.info span{color:var(--ink-2);font-size:var(--t-sm)}

/* ---------- closing cta ---------- */
/* The closing CTA is a dark slab. It was a coral fill, which put ink at
   only 4.83:1 and, inside posts, the --ink-2 body copy at about 2.3:1.
   On --ink the heading is 16:1, the copy 12:1 and the small print 6.9:1.
   The .post-body selectors outrank .post-body p, which set that grey. */
.cta-band{
  background:var(--ink);border-radius:var(--r-xl);
  padding:var(--s-24) var(--s-12);text-align:center;color:var(--on-dark);
}
.cta-band h2,.post-body .cta-band h2{color:var(--on-dark);max-width:20ch;margin-inline:auto}
.cta-band p,.post-body .cta-band p{color:var(--on-dark-3);max-width:52ch;margin:var(--s-6) auto var(--s-8);font-size:var(--t-md);line-height:1.6}
.cta-band .btn-row{justify-content:center}
.cta-band .risk,.post-body .cta-band .risk{color:var(--on-dark-2);font-size:var(--t-sm);margin:var(--s-6) auto 0}
/* the booking button turns coral with ink text (4.83:1, bold 17px) so it
   still leads; the dark button would vanish into the slab */
.cta-band .btn-dark{background:var(--accent);color:var(--on-accent)}
.cta-band .btn-dark:hover{background:var(--accent-press)}
.btn-onCoral{background:transparent;color:var(--on-dark);box-shadow:inset 0 0 0 1.8px rgba(255,252,246,.6)}
.btn-onCoral:hover{box-shadow:inset 0 0 0 1.8px var(--on-dark);background:rgba(255,252,246,.08)}
/* the default --accent-ink focus ring is too dark to see on the slab */
.cta-band :focus-visible{outline-color:var(--sun)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--on-dark-2);padding-block:var(--s-16) var(--s-12);margin-top:var(--s-24)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s-8)}
.site-foot h4{font-family:var(--font-body);font-size:var(--t-sm);font-weight:600;color:var(--on-dark);margin:0 0 var(--s-4)}
.site-foot a{color:var(--on-dark-2);font-size:var(--t-sm);display:inline-flex;align-items:center;min-height:44px}
.site-foot a:hover{color:var(--sun);text-decoration:none}
.site-foot .blurb{font-size:var(--t-sm);max-width:34ch;margin:var(--s-6) 0 0}
.site-foot .blurb a{min-height:0}
.socials{display:flex;gap:var(--s-3);margin-top:var(--s-6)}
.socials a{
  width:44px;height:44px;min-height:44px;border-radius:50%;border:1px solid var(--hair-dark);
  display:grid;place-items:center;padding:0;
}
.socials svg{width:18px;height:18px}
.foot-base{
  border-top:1px solid var(--hair-dark);margin-top:var(--s-12);padding-top:var(--s-6);
  display:flex;flex-wrap:wrap;gap:var(--s-4) var(--s-6);justify-content:space-between;font-size:var(--t-xs);
}
.foot-base button{
  font:inherit;background:none;border:0;padding:0;color:var(--on-dark-2);cursor:pointer;
  text-decoration:none;font-size:var(--t-xs);
}
.foot-base button:hover{color:var(--sun);text-decoration:underline}

/* ---------- cookie consent ----------
   Nothing that sets a cookie loads until this is answered. Sits above the
   mobile call bar rather than under it, so it is never mistaken for part
   of the page chrome and never blocks the phone or booking buttons.
   Two views in one panel: the three-button choice (reject / customize /
   accept, the same shape the old Framer site's own consent banner used),
   and a customize view with one real toggle. Only one view shows at a time,
   picked by [data-view] on the panel itself. */
.consent{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:90;
  max-width:520px;margin-inline:auto;
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:0 14px 40px rgba(30,27,51,.22),var(--ring);
  padding:var(--s-6);
  transform:translateY(140%);opacity:0;transition:transform .4s var(--ease-out),opacity .3s ease;
  pointer-events:none;
}
.consent[data-open]{transform:translateY(0);opacity:1;pointer-events:auto}
.consent p{margin:0 0 var(--s-4);font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
.consent-row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.consent .btn{min-height:44px;padding:10px 16px;font-size:var(--t-sm)}
.consent-row .btn{flex:1 1 auto}

.consent-custom{display:none}
.consent[data-view="custom"] .consent-choice{display:none}
.consent[data-view="custom"] .consent-custom{display:block}

.consent-option{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  padding:var(--s-3) 0 var(--s-4);border-bottom:1px solid var(--hair-2);margin-bottom:var(--s-4);
}
.consent-option b{display:block;font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.consent-option span{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:2px;line-height:1.4}

/* reusable pill toggle switch, coral when on */
.switch{position:relative;flex:none;width:42px;height:24px;display:inline-block}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch-track{
  position:absolute;inset:0;border-radius:var(--r-pill);background:var(--hair);
  transition:background var(--t-fast) linear;
}
.switch-track::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--card);box-shadow:0 1px 3px rgba(30,27,51,.35);
  transition:transform var(--t-fast) var(--ease-out);
}
.switch input:checked + .switch-track{background:var(--accent)}
.switch input:checked + .switch-track::after{transform:translateX(18px)}
.switch input:focus-visible + .switch-track{outline:3px solid var(--accent-ink);outline-offset:2px}

@media (max-width:900px){
  .consent{bottom:calc(78px + env(safe-area-inset-bottom))}
}
@media (max-width:520px){
  .consent-row{flex-direction:column}
  .consent-row .btn{width:100%}
}

/* the same control, permanently embedded in the privacy page rather than
   floating. Same toggle component, its own ids, reads and writes the same
   stored choice so the two never disagree. */
.privacy-consent{
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--ring);
  padding:var(--s-6);margin:var(--s-8) 0;
}
.privacy-consent-status{
  display:inline-flex;align-items:center;gap:8px;font-size:var(--t-xs);font-weight:600;
  color:var(--ink-2);margin-bottom:var(--s-4);
}
.privacy-consent-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.privacy-consent-status[data-state="granted"]::before{background:var(--accent)}
.privacy-consent-status[data-state="denied"]::before{background:var(--ink-3)}

/* ---------- scroll reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(18px)}
.js [data-reveal].in{opacity:1;transform:none;transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none}
  .js [data-reveal].in{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .navbar a{padding:10px 13px}
  .tel{display:none}
}
@media (max-width:1080px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .who{grid-template-columns:repeat(2,1fr)}
  .hero-grid{gap:var(--s-8)}
}
@media (max-width:900px){
  :root{--s-24:64px;--s-32:88px}
  /* phone chrome: two floating elements and nothing else. No phone number,
     no nav bar, no CTA in the header. The call bar at the bottom carries
     the actions instead, where a thumb actually reaches. */
  .navbar,.head-actions{display:none}
  .burger{display:block;margin-left:auto}
  .hero-grid{grid-template-columns:1fr;gap:var(--s-12)}
  .hero-art{max-width:380px;margin-inline:auto}
  .hero-panel{padding:var(--s-8) var(--s-6)}
  .hero-photo{max-width:260px}
  .split,.split.wide-left,.contact-grid{grid-template-columns:1fr;gap:var(--s-8)}
  .split .figure{order:-1}
  .faq-layout{grid-template-columns:1fr;gap:var(--s-8)}
  .faq-layout .head{position:static}
  .versus,.prices,.diagram{grid-template-columns:1fr}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .reviews{grid-template-columns:1fr}
  .review.feature{grid-column:span 1}
  .col .col-foot .btn{width:100%}
  .doc-grid{grid-template-columns:1fr;gap:0;padding:0}
  .doc-photo{max-width:300px;margin-inline:auto;order:-1;padding-top:var(--s-8)}
  .doc-body{padding:var(--s-8) var(--s-8) var(--s-12)}
  .checker{padding:var(--s-12) var(--s-6)}

  /* the call bar: no container. Two buttons floating over a blur that fades
     out upwards, matching the top of the page. */
  .callbar{
    display:flex;gap:10px;align-items:center;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    background:none;border:0;box-shadow:none;
  }
  .callbar::before{
    content:"";position:absolute;inset:-18px 0 0;pointer-events:none;z-index:-1;
    background:linear-gradient(to top,rgba(255,252,246,.94) 40%,rgba(255,252,246,0) 100%);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    -webkit-mask-image:linear-gradient(to top,#000 45%,transparent 100%);
    mask-image:linear-gradient(to top,#000 45%,transparent 100%);
  }
  .callbar .btn{min-height:52px;font-size:var(--t-sm);padding-inline:14px;box-shadow:var(--chip-shadow)}
  .callbar .btn-ghost{flex:1;background:var(--card)}
  .callbar .btn-primary{flex:1.3}
  body{padding-bottom:100px}
}
@media (max-width:640px){
  /* long CTA labels must wrap rather than push the page sideways */
  .btn{white-space:normal;text-align:center}
  :root{--s-24:56px;--s-16:44px;--s-12:32px}
  .wrap{padding-inline:20px}
  .head-inner{padding:12px 16px}
  .facts{grid-template-columns:1fr}
  .dg{grid-template-columns:1fr;gap:var(--s-4);justify-items:center;text-align:center}
  .dg figcaption{text-align:left}
  .sympt{grid-template-columns:1fr}
  .g-2,.g-3,.g-4,.who,.reviews{grid-template-columns:1fr}
  .review.feature{grid-column:span 1}
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s-8) var(--s-6)}
  .cta-band{padding:var(--s-16) var(--s-6);border-radius:var(--r-lg)}
  .checker,.col,.price-card,.figure{border-radius:var(--r-lg)}
  .btn-row .btn{width:100%}
  .verdict{flex-direction:column;align-items:flex-start}
  .verdict .btn{width:100%}
  .doc-body{padding-inline:var(--s-6)}
}

/* ==========================================================================
   Blog
   ========================================================================== */
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:var(--t-xs);color:var(--ink-3);margin-bottom:var(--s-6)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--accent-ink)}

.post{padding-block:calc(var(--header-h) + var(--s-12)) var(--s-24)}
.post-head{max-width:70ch;margin-bottom:var(--s-12)}
.post-head h1{font-size:var(--t-2xl);line-height:1.05;margin-bottom:var(--s-4)}
.post-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:var(--t-sm);color:var(--ink-3);margin-bottom:var(--s-6)}
.post-meta b{color:var(--ink-2)}

.post-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s-16);align-items:start}
.post-aside{position:sticky;top:calc(var(--header-h) + 24px)}
.toc{border-left:2px solid var(--hair);padding-left:var(--s-4)}
.toc-title{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:0 0 var(--s-3)}
.toc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.toc a{font-size:var(--t-sm);color:var(--ink-2);text-decoration:none;line-height:1.35;display:block}
.toc a:hover{color:var(--accent-ink)}

.post-body{max-width:68ch;min-width:0}
.post-body h2{font-size:var(--t-xl);margin:var(--s-12) 0 var(--s-4);scroll-margin-top:calc(var(--header-h) + 20px)}
.post-body h3{font-size:var(--t-md);margin:var(--s-8) 0 var(--s-2)}
.post-body p{color:var(--ink-2);margin:0 0 var(--s-4);line-height:1.65}
.post-body a:not(.btn){color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.post-body > ul.checks{margin:var(--s-4) 0 var(--s-6)}

.takeaways{background:var(--surface-tint);border-radius:var(--r-lg);padding:var(--s-6) var(--s-8);margin-bottom:var(--s-8)}
.takeaways-title{font-family:var(--font-display);font-weight:800;font-size:var(--t-md);margin:0 0 var(--s-2);color:var(--ink)}
.takeaways .checks li{border-bottom-color:rgba(30,27,51,.12)}

.author-box{display:grid;grid-template-columns:120px 1fr;gap:var(--s-6);align-items:center;
  background:var(--surface-sun);border-radius:var(--r-lg);padding:var(--s-6);margin-top:var(--s-12)}
.author-box img{width:120px;height:120px;object-fit:cover;object-position:top center;border-radius:50%}
.author-box h3{font-size:var(--t-md);margin:0}
.author-box p{color:var(--ink-2);font-size:var(--t-sm);margin:var(--s-2) 0 0;line-height:1.55}
.author-box .doc-role{margin:2px 0 0}

.post-list{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.post-card{background:var(--card);border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--ring)}
.post-card h2{font-size:var(--t-md);line-height:1.25;margin:var(--s-2) 0 var(--s-3)}
.post-card h2 a{color:var(--ink);text-decoration:none}
.post-card h2 a:hover{color:var(--accent-ink)}
.post-card p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.55;margin:0 0 var(--s-4)}
.post-card .post-meta{margin:0}

@media (max-width:900px){
  .post-grid{grid-template-columns:1fr;gap:var(--s-8)}
  .post-aside{position:static}
  .toc{border-left:0;border-top:2px solid var(--hair);padding-left:0;padding-top:var(--s-4)}
}
@media (max-width:640px){
  .post-head h1{font-size:var(--t-xl)}
  .author-box{grid-template-columns:1fr;text-align:left}
  .author-box img{width:88px;height:88px}
}

/* blog imagery */
/* Article figures are plain, full-bleed-to-content images: no tinted frame,
   no padding. Declared defensively so a stray .figure/.on-coral on the same
   element cannot bring the background or padding back. */
.post-fig{margin:var(--s-8) 0 var(--s-12);padding:0;background:none;border-radius:0;overflow:visible}
.post-fig img{display:block;width:100%;height:auto;border-radius:var(--r-lg);margin:0}
.post-fig figcaption{margin-top:var(--s-3);font-size:var(--t-xs);color:var(--ink-3);line-height:1.5;text-align:left}
.post-card-img{display:block;margin:calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-6);overflow:hidden;
  border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--surface-tint)}
.post-card-img img{display:block;width:100%;height:190px;object-fit:cover}

/* .post-body h2/p set margin-inline:0, which cancels the centring that
   .cta-band h2/p rely on. Restore it for CTA bands inside articles. */
.post-body .cta-band h2{margin-inline:auto;margin-top:0}
.post-body .cta-band p{margin-left:auto;margin-right:auto}

/* The site has one hand-built light palette. Without this, Chrome on Android
   applies Auto Dark Theme and algorithmically inverts the whole page. */
:root{color-scheme:light}

/* The footer grid could not shrink below its widest unbreakable string
   (the email address), which pushed the document to 388px and gave every
   page horizontal scroll on 360-375px phones. */
.foot-grid>*{min-width:0}
.site-foot a{overflow-wrap:anywhere}

/* The sticky call bar covers the CTA it duplicates; fade it out whenever a
   real call-to-action is on screen. */
.callbar{transition:opacity .25s ease, transform .25s ease}
.callbar[data-hidden]{opacity:0;transform:translateY(120%);pointer-events:none}

/* Very narrow phones (320px): the card grid's 320px floor and the price
   row's nowrap value both exceeded the content box. */
.prices>*{min-width:0}
@media (max-width:380px){
  .price-card .line{flex-wrap:wrap;gap:2px var(--s-4)}
  .price-card .line span{max-width:none}
}

/* The scrim was a fixed 64px while the header chips are taller than that on
   phones, so page text showed through beside and behind them. Track the real
   header height instead, plus a little for the fade to land below the chips. */
.head-scrim{height:calc(100% + 18px)}

/* The brand name is a flex child, so it could shrink below its own width and
   break mid-word ("smartbit / e") in the narrow footer column. Never break it,
   and give the brand block the full row on phones so nowrap cannot overflow. */
.logo .word{white-space:nowrap}
.logo .mark{flex:none}
@media (max-width:640px){
  /* brand block and the contact column get the full row; the contact column
     needs it so the email address fits on one line instead of breaking
     mid-word, which is what overflow-wrap:anywhere does to it in a half-column */
  .foot-grid > :first-child,
  .foot-grid > :last-child{grid-column:1 / -1}
  .logo.lg .word{font-size:23px}
}

/* Card padding was 32px a side, which squeezed the text into a narrow column
   on phones. 20px there, 24px elsewhere. */
@media (max-width:640px){
  .post-card{padding:20px}
  .post-card-img{margin:-20px -20px var(--s-4)}
}

/* ENFORCEMENT: any figure inside an article is frameless and full width,
   whatever classes it carries. New posts have twice arrived using
   `class="figure on-sun"`, which paints the yellow tint and 32px of padding.
   `.post-body figure` (0,1,1) outranks `.figure` (0,1,0), so this wins without
   !important and no future post can bring the frame back. */
.post-body figure{margin:var(--s-8) 0 var(--s-12);padding:0;background:none;border-radius:0;overflow:visible}
.post-body figure img{display:block;width:100%;height:auto;border-radius:var(--r-lg);margin:0}
.post-body figure figcaption{margin-top:var(--s-3);font-size:var(--t-xs);color:var(--ink-3);line-height:1.5;text-align:left}
.post-body blockquote{margin:var(--s-6) 0;padding:var(--s-4) var(--s-6);border-left:3px solid var(--accent);background:var(--surface-tint);border-radius:0 var(--r-lg) var(--r-lg) 0}
.post-body blockquote p{margin:0 0 var(--s-2);color:var(--ink)}
.post-body blockquote p:last-child{margin:0;font-size:var(--t-sm);color:var(--ink-3)}

/* ---------- contact form ----------
   The only form on the site. Lives at the end of the three main pages, after
   the booking CTA, for the visitor who is not ready to book an appointment but
   does have a question. Fields are deliberately few: a long form reads as a
   commitment, which is the opposite of the point. */
.cform{max-width:var(--narrow);margin-inline:auto}
.cform-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-4) var(--s-6);margin-top:var(--s-8)}
.cform-field{display:flex;flex-direction:column;gap:6px}
.cform-field.wide{grid-column:1 / -1}
.cform label{font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.cform .opt{font-weight:500;color:var(--ink-3)}
.cform input[type=text],.cform input[type=email],.cform input[type=tel],.cform textarea{
  font:inherit;font-size:var(--t-base);color:var(--ink);
  background:var(--card);border:1px solid var(--hair);border-radius:var(--r-sm);
  padding:12px 14px;width:100%;min-width:0;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cform textarea{min-height:140px;resize:vertical;line-height:1.6}
.cform input:focus-visible,.cform textarea:focus-visible{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(240,84,79,.18);
}
.cform input[aria-invalid="true"],.cform textarea[aria-invalid="true"]{border-color:var(--accent-ink)}

/* The honeypot must be reachable by a bot parsing the DOM but never by a
   person, including a screen-reader user — so it is removed from the
   accessibility tree and from the tab order, not merely painted off-screen. */
.cform-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.cform-consent{display:flex;gap:10px;align-items:flex-start;margin-top:var(--s-4)}
.cform-consent input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent);flex:none}
.cform-consent label{font-weight:500;font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
.cform-foot{display:flex;gap:var(--s-4);align-items:center;flex-wrap:wrap;margin-top:var(--s-6)}
.cform-note{font-size:var(--t-sm);color:var(--ink-3);margin:var(--s-4) 0 0}
.cform-msg{margin:var(--s-4) 0 0;font-size:var(--t-sm);line-height:1.55;border-radius:var(--r-sm);padding:12px 14px}
.cform-msg[data-state="ok"]{background:var(--surface-sun);color:var(--ink)}
.cform-msg[data-state="err"]{background:var(--surface-tint);color:var(--accent-ink);font-weight:600}
.cform button[aria-busy="true"]{opacity:.65;pointer-events:none}

@media (max-width:640px){
  .cform-grid{grid-template-columns:1fr}
  .cform-foot .btn{width:100%}
}

/* ---------- contact form: the sent state ----------
   On success the form is replaced rather than annotated. A status line under a
   still-filled form reads as "maybe", and people re-submit; a panel that takes
   the form's place reads as done. */
.cform-done{
  display:none;text-align:center;padding:var(--s-12) var(--s-6);
  opacity:0;transform:translateY(8px);
}
.cform-done[data-show]{display:block;animation:cf-in .45s ease forwards}
@keyframes cf-in{to{opacity:1;transform:none}}

.cform-done .tick{width:92px;height:92px;display:block;margin:0 auto var(--s-6)}
.cform-done .tick circle{
  fill:none;stroke:var(--ok);stroke-width:3;
  stroke-dasharray:151;stroke-dashoffset:151;
  animation:cf-ring .6s cubic-bezier(.2,.7,.3,1) .1s forwards;
  transform:rotate(-90deg);transform-origin:50% 50%;
}
.cform-done .tick path{
  fill:none;stroke:var(--ok);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:36;stroke-dashoffset:36;
  animation:cf-check .35s cubic-bezier(.4,0,.2,1) .55s forwards;
}
@keyframes cf-ring{to{stroke-dashoffset:0}}
@keyframes cf-check{to{stroke-dashoffset:0}}

.cform-done h3{font-family:var(--font-display);font-size:var(--t-xl);margin:0 0 var(--s-3);color:var(--ink)}
.cform-done p{color:var(--ink-2);font-size:var(--t-base);line-height:1.6;max-width:46ch;margin:0 auto var(--s-3)}
.cform-done:focus{outline:none}

/* The form leaves before the panel arrives, so the two never overlap. */
#contact-form{transition:opacity .3s ease, transform .3s ease}
#contact-form[data-leaving]{opacity:0;transform:translateY(-6px);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .cform-done[data-show]{animation:none;opacity:1;transform:none}
  .cform-done .tick circle,.cform-done .tick path{animation:none;stroke-dashoffset:0}
  #contact-form{transition:none}
}

/* The headline figure in a pricing card. Big enough to be the thing you read
   first, since price is the question this page's visitors arrive with. */
/* .card p is (0,1,1), so a bare .price-big would lose to it on specificity
   and silently render at body size. Scoped to .card to outrank it. */
.card .price-big{
  font-family:var(--font-display);font-size:var(--t-2xl);font-weight:800;
  color:var(--ink);line-height:1.05;margin:var(--s-3) 0 var(--s-4);
}
.card.sun .price-big{color:var(--accent-ink)}