/* 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(--accent-soft)}
.shell{background:var(--shell)}
.sun{background:var(--sun-soft)}
.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:44ch;margin-bottom:var(--s-12)}
.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(--sun-soft);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(--sun-soft);
}
.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}
.figure{border-radius:var(--r-xl);overflow:hidden;background:var(--accent-soft);padding:var(--s-8)}

/* 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:var(--sun-soft)}
.figure.on-coral{background:var(--accent-soft)}
.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-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(--sun-soft);box-shadow:none;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(--sun-soft);border-radius:var(--r-xl);overflow:hidden}
.doc-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s-12);align-items:end;padding-left:var(--s-8)}
.doc-photo{align-self:end}
.doc-photo img{width:100%;max-width:360px}
.doc-body{padding:var(--s-16) var(--s-12) var(--s-16) 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 ---------- */
.cta-band{
  background:var(--accent);border-radius:var(--r-xl);
  padding:var(--s-24) var(--s-12);text-align:center;color:var(--ink);
}
.cta-band h2{color:var(--ink);max-width:20ch;margin-inline:auto}
.cta-band p{color:var(--ink);max-width:52ch;margin:var(--s-6) auto var(--s-8);font-size:var(--t-md)}
.cta-band .btn-row{justify-content:center}
.cta-band .risk{color:rgba(30,27,51,.78)}
.btn-onCoral{background:rgba(255,255,255,.18);color:var(--ink);box-shadow:inset 0 0 0 1.8px rgba(30,27,51,.55)}
.btn-onCoral:hover{box-shadow:inset 0 0 0 1.8px var(--ink);background:rgba(255,255,255,.34)}

/* ---------- 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-left: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-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(--accent-soft);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(--sun-soft);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(320px,1fr))}
.post-card{background:var(--card);border-radius:var(--r-lg);padding:var(--s-8);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}
}