/* ---------------------------------------------------------------------------
   nexthealth-labs / style.css

   Matched to the site we built for them: nexthealth-v2, live at
   nexthealth-redesign.vercel.app. Tokens taken from its own :root.

     --cyan #17C4FF   --navy #054990   --ink #0B1622
     --grey #808891   --line #DDE5EC
     Fjalla One headings, Lato body, black pill CTAs, dark hero on white body.

   Earlier passes: style-teal.css.bak, style-emil.css.bak, style-gold.css.bak
--------------------------------------------------------------------------- */

:root{
  --cyan:#17c4ff;
  --navy:#054990;
  --ink:#0b1622;
  --ink-deep:#0a0e10;
  --grey:#808891;
  --line:#dde5ec;
  /* the internal rules of a card: a quarter the weight of --line, because a
     line inside a card only has to group, never to enclose */
  --hair:#eef2f6;
  --paper:#ffffff;
  --wash:#f4f6f7;
  --lav:#e7eafb;
  --display:'Fjalla One',Impact,'Arial Narrow',sans-serif;
  --sans:'Lato',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --shell:1200px;
  --ease:cubic-bezier(.4,0,.2,1);
  --fade:linear-gradient(to bottom,#000 78%,transparent);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}

h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.04;letter-spacing:-.5px}
h1{font-size:clamp(42px,5.4vw,64px)}
h2{font-size:clamp(30px,3.4vw,44px)}
h3{font-size:21px;letter-spacing:-.2px}
p{margin:0}

.shell{width:var(--shell);max-width:calc(100% - 48px);margin:0 auto}
.eyebrow{
  font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--cyan);margin-bottom:16px;
}
.eyebrow.dark{color:var(--navy)}
.lede{color:var(--grey);font-size:17px;line-height:1.75;max-width:60ch}

/* ---------------------------------- CTA ----------------------------------- */
.cta{
  display:inline-block;background:var(--ink);color:#fff;border:0;border-radius:999px;
  padding:15px 30px;font-weight:700;font-size:13px;letter-spacing:1.4px;text-transform:uppercase;
  transition:background .15s var(--ease);
}
.cta:hover{background:#1d2b3a}
.cta.light{background:#fff;color:var(--ink)}
.cta.light:hover{background:#e9edf0}
.cta.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.cta.ghost:hover{background:var(--wash)}
.cta:disabled{background:#aeb6bd;cursor:not-allowed}

/* -------------------------------- draft ----------------------------------- */
.draftbar{
  background:var(--ink-deep);color:#9fb0bd;font-size:12.5px;letter-spacing:.3px;
  text-align:center;padding:9px 24px;
}
.draftbar b{color:var(--cyan);letter-spacing:1.6px;text-transform:uppercase;font-size:11.5px}

/* -------------------------------- header ---------------------------------- */
header{
  position:sticky;top:0;z-index:50;background:rgba(231,234,251,.94);
  border-bottom:0;backdrop-filter:saturate(160%) blur(8px);
}
header .inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
header .mark img{height:38px;width:auto}
header nav{display:flex;gap:30px;align-items:center}
header nav a{font-size:15px;font-weight:700;color:var(--ink);transition:color .15s var(--ease)}
header nav a:hover{color:var(--navy)}
/* 12px vertical measured 41px tall, 3px under the 44px tap-target floor.
   1px more clears it without a visible size jump. */
header .cta{padding:13px 22px}

/* --------------------------------- hero -----------------------------------
   Client brief on the 2026-09-15 call: portrait on top and centred, the
   pitch centred underneath it, on desktop and phone alike. That collapses
   what used to be two different layouts (a two-column grid on desktop, a
   reordered flex column on phones) into one centred stack at every width.
--------------------------------------------------------------------------- */
.hero{
  background:var(--lav);color:var(--ink);position:relative;overflow:hidden;
  /* The section below carries .curve, which pulls up 40px (26px on a
     phone) and drew over the stats row. The hero reserves that space
     itself; padding on .stats cannot fix it because makeMobileRails()
     adds .m-rail to that element and .m-rail's padding wins. */
  padding:30px 0 52px;
}
.hwrap{
  position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding-bottom:40px;
}

/* the surname, set huge and barely there, behind him. Centred behind the
   portrait now that the portrait is centred, not beside it. */
/* Scoped to the hero deliberately. This is the giant ghosted surname behind
   the portrait, and the name collided with `.cta.ghost`, the outline button
   style used on the confirmation step. That button was rendering as 210px
   absolutely-positioned display type across the order summary. */
.hero .ghost{
  position:absolute;left:50%;top:4%;z-index:1;pointer-events:none;
  transform:translateX(-50%);
  /* "make dr habib and the text behind a lil bigger", client call 2026-09-15.
     Floor raised 64->78 so it actually reads bigger on phones too, where the
     old 13vw never cleared the floor below ~520px wide and rendered fixed. */
  font-family:var(--display);font-size:clamp(78px,15vw,170px);line-height:.8;
  letter-spacing:-2px;color:#fff;opacity:.72;white-space:nowrap;
}

/* Sized so the portrait never pushes the H1 below the fold on a phone: the
   asset is 1270x1905, so a 300px height budget caps it at ~200px wide. */
.cutout{position:relative;z-index:2;max-width:230px;margin:0 auto}
.cutout img{
  width:100%;height:auto;max-height:min(300px,34vh);display:block;object-fit:contain;margin:0 auto;
  /* The asset is a rectangular studio photo, not a keyed cut-out, so its bottom
     corner reads as a hard edge against the lavender. The hero is one centred
     stack at every width now, so the fade applies everywhere rather than only
     on phones. The drop-shadow has to go with it: a shadow on a faded edge
     draws the rectangle straight back in. Drop both once a real cut-out lands
     in assets/hero/. */
  -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 99%);
  mask-image:linear-gradient(180deg,#000 66%,transparent 99%);
}

/* proof chip. The Google-rating chip that used to float top-right of the
   portrait was removed at the client's request; see the comment in
   index.html and renderChrome() in app.js for where its data still lives. */
.chip{
  position:relative;z-index:3;background:#fff;border-radius:14px;
  padding:16px 18px;box-shadow:0 14px 34px -18px rgba(26,34,84,.42);
  max-width:220px;
}
.chip .big{font-family:var(--display);font-size:30px;line-height:1;color:var(--ink)}
.chip .k{font-size:12px;font-weight:700;color:var(--ink);margin-top:5px}
.chip .s{font-size:11.5px;color:var(--grey);line-height:1.45;margin-top:5px}

/* the "30+ years" line no longer floats beside the portrait: in a centred
   stack there is nothing for it to float over, so it is a plain centred
   caption between the portrait and the pitch. */
.chip-rate{
  background:none;box-shadow:none;padding:0;max-width:360px;
  margin:14px auto 0;
  /* Sent to the bottom of the hero. The client wants the five panels visible
     beside the CTA, and this caption was 60px of supporting detail sitting
     between the portrait and the name, pushing that list under the fold. It
     is still in the hero, just after the proof carousel instead of before the
     headline. */
  order:2;
}
.chip-rate .score{font-size:15px;font-weight:700;color:var(--ink)}
.chip-rate .score i{color:var(--cyan);font-style:normal}
.chip-rate .s{margin-top:4px}

/* the pitch */
.pitch{position:relative;z-index:3;max-width:560px;margin:18px auto 0}
.pitch .hey{color:var(--grey);font-size:15px;margin-bottom:10px}
/* "a lil bigger", client call 2026-09-15 */
.pitch h1{font-size:clamp(40px,8.4vw,68px);color:var(--ink);margin-bottom:12px}
.pitch .sub{color:var(--grey);font-size:15.5px;margin:0 auto 20px;max-width:42ch;line-height:1.6}
.pitch .cta{background:var(--navy)}
.pitch .cta:hover{background:#073a70}

.stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  padding:0 0 46px;position:relative;z-index:3;
}
.stats .v{
  font-family:var(--display);font-size:28px;color:var(--ink);
  border-top:1px solid rgba(11,22,34,.14);padding-top:13px;
}
.stats .k{color:var(--grey);font-size:12.5px;margin-top:4px;line-height:1.4}

/* ------------------------ hero review carousel ----------------------------
   Replaces the four stock-photo faces + "2 clinics" line: real, verbatim
   Google reviews (DATA.reviews), one at a time, auto-advancing. Built the
   same way as .track/.dots further down: scroll-snap does the sliding and
   the swiping, JS only drives the dots and the auto-advance timer. The
   4.6/57-ratings figure that used to live in the removed Google chip is
   restated here in the header, so the strongest single number stays visible.
--------------------------------------------------------------------------- */
.hero-proof{width:100%;max-width:400px;margin:26px auto 0;position:relative;z-index:3}
.hp-head{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:10px}
.hp-score{display:flex;align-items:baseline;gap:5px;font-family:var(--display);font-size:16px;color:var(--ink)}
.hp-score i{color:var(--cyan);font-style:normal;font-size:13px}
.hp-score span{font-family:var(--sans);font-weight:700;font-size:11.5px;color:var(--ink)}
.hp-note{color:var(--grey);font-size:11.5px}
.hp-track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;border-radius:14px;overflow-anchor:none;
}
.hp-track::-webkit-scrollbar{display:none}
.hp-slide{
  flex:0 0 100%;scroll-snap-align:start;background:#fff;border-radius:14px;
  padding:16px 18px;margin:0;text-align:left;
}
.hp-slide q{quotes:none;display:block;color:var(--ink);font-size:13.5px;line-height:1.6}
.hp-slide q:before{content:'\201C'}
.hp-slide q:after{content:'\201D'}
.hp-slide figcaption{display:flex;align-items:center;gap:10px;margin-top:12px}
.hp-av{
  width:28px;height:28px;border-radius:999px;background:var(--wash);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;
  color:var(--navy);flex:none;
}
.hp-nm{font-weight:700;font-size:12.5px;display:block}
.hp-mt{color:var(--grey);font-size:11px}
.hero-proof .dots{margin:12px 0 0;justify-content:center}

/* ------------------------------- sections --------------------------------- */
section{padding:88px 0}
section.wash{background:var(--wash)}
section.dark{background:var(--ink-deep);color:#fff}
section.dark .lede{color:#b9c4cc}
section.dark h2{color:#fff}
.sec-head{margin-bottom:44px;max-width:66ch}
.sec-head h2{margin-bottom:14px}

/* ------------------------- panels: sliding carousel ------------------------ */
.carousel{position:relative;min-width:0;max-width:100%}
.track{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 20px;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.track::-webkit-scrollbar{display:none}
.panel{
  flex:0 0 320px;scroll-snap-align:start;display:flex;flex-direction:column;
  background:#fff;border-radius:14px;padding:0;
  text-align:left;position:relative;overflow:hidden;
  /* The client read the 1px outline round every card as heavy and boxy, and
     five of them side by side made it worse. The cards lift off the page on
     shadow instead, so they read as five objects rather than five boxes. */
  box-shadow:0 1px 2px rgba(11,22,34,.05),0 10px 24px -16px rgba(11,22,34,.28);
  transition:box-shadow .18s var(--ease),transform .18s var(--ease);
}
.panel .pbody{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}

/* the photograph strip at the top of each card */
.pshot{
  position:relative;margin:0;overflow:hidden;background:var(--wash);
}
.pshot img{
  display:block;width:100%;height:168px;object-fit:cover;
  filter:grayscale(1) contrast(1.04);
  transition:transform .5s var(--ease),filter .3s var(--ease);
}
/* a whisper of the brand cyan over the monochrome, so the strip belongs here */
.pshot:after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,73,144,.14) 0%,rgba(5,73,144,0) 40%,rgba(11,22,34,.30) 68%,rgba(11,22,34,.74) 100%);
}
.pshot-cat{
  position:absolute;left:16px;bottom:12px;z-index:1;color:#fff;
  font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(11,22,34,.9),0 2px 14px rgba(11,22,34,.6);
}
.panel:hover .pshot img{transform:scale(1.045);filter:grayscale(.55) contrast(1.04)}
.panel:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(11,22,34,.06),0 18px 36px -16px rgba(11,22,34,.34);
}
/* The one card that is different keeps a ring, not a border. It is the only
   outline left in the row, which is what makes it read as the featured one. */
.panel.featured{box-shadow:0 0 0 1.5px rgba(23,196,255,.72),0 12px 28px -16px rgba(5,73,144,.34)}
.panel.featured:hover{
  transform:translateY(-3px);
  box-shadow:0 0 0 1.5px var(--cyan),0 20px 40px -18px rgba(5,73,144,.42);
}
.panel .badge{
  position:absolute;top:0;right:0;z-index:2;background:var(--cyan);color:var(--ink);
  font-size:10.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  padding:6px 12px;border-radius:0 14px 0 14px;
}
.panel .cat{
  font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--grey);margin-bottom:10px;
}
.panel h3{margin-bottom:10px}
.panel .desc{color:var(--grey);font-size:15px;margin-bottom:20px}
.panel .amt{font-family:var(--display);font-size:38px;color:var(--navy);line-height:1}
.panel .amtnote{color:var(--grey);font-size:12px;margin:6px 0 20px}
.panel .inc{
  font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink);
  border-top:1px solid var(--hair);padding-top:18px;margin-bottom:12px;
}
.panel ul{list-style:none;margin:0 0 24px;padding:0;font-size:14.5px;color:var(--grey);flex:1}
.panel li{padding:5px 0 5px 20px;position:relative}
.panel li:before{content:'';position:absolute;left:0;top:12px;width:9px;height:2px;background:var(--cyan);border-radius:2px}
.panel .cta{width:100%;text-align:center}

.rail{display:flex;align-items:center;gap:14px;margin-top:22px}
.arrow{
  width:44px;height:44px;border-radius:999px;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:17px;
  transition:background .15s var(--ease),border-color .15s var(--ease),opacity .15s var(--ease);
}
.arrow:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.arrow[disabled]{opacity:.32;cursor:not-allowed}
.arrow[disabled]:hover{background:#fff;color:var(--ink);border-color:var(--line)}
.dots{display:flex;gap:7px;margin-left:auto}
.dot{
  width:7px;height:7px;border-radius:999px;background:var(--line);border:0;padding:0;
  transition:background .15s var(--ease),width .15s var(--ease);
}
.dot.on{background:var(--navy);width:22px}

/* ------------------------------- doctor ----------------------------------- */
.doc{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:44px;align-items:start}
.doc > *{min-width:0}
.doc .shot img{border-radius:14px}
.doc h2{margin-bottom:5px;font-size:clamp(24px,2.6vw,34px)}
.doc .role{
  color:var(--navy);font-weight:700;font-size:12.5px;letter-spacing:1.2px;
  text-transform:uppercase;margin-bottom:14px;
}
/* Not --grey here. With the frosted panel gone the bio sits straight on the
   gradient, and #808891 on that ground measures 3.59:1, under the 4.5:1 floor
   for body text. This is a medical page; the bio has to be readable. */
.doc p{color:#4f5862;line-height:1.65;margin-bottom:10px;font-size:15px}
.creds{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
.creds li{padding-left:26px;position:relative;color:var(--ink);font-size:15px}
.creds li:before{content:'';position:absolute;left:0;top:10px;width:13px;height:2px;background:var(--cyan);border-radius:2px}

/* the "Read more" toggle under a clamped bio (mobile only, see .doc-bio
   below); same look as the review cards' "Read the full review" button */
.doc-more{
  display:block;background:none;border:0;padding:2px 0 0;margin:0 0 14px;
  color:var(--navy);font-size:12.5px;font-weight:700;letter-spacing:.6px;cursor:pointer;
}
.doc-more:hover{text-decoration:underline}

/* ----------------------------- testimonials -------------------------------- */
.ratings{display:flex;gap:40px;flex-wrap:wrap;margin-bottom:36px}
.rating .sc{font-family:var(--display);font-size:30px;color:var(--ink)}
.rating .cl{color:var(--grey);font-size:13.5px;margin-top:2px}
.reviews{columns:3;column-gap:22px}
.review{
  break-inside:avoid;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 22px 20px;margin:0 0 22px;
}
.review q{quotes:none;display:block;color:var(--ink);font-size:15px;line-height:1.7}
.review q:before{content:'\201C'}
.review q:after{content:'\201D'}
.review .by{display:flex;align-items:center;gap:12px;margin-top:16px}
.review .av{
  width:36px;height:36px;border-radius:999px;background:var(--wash);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  color:var(--navy);flex:none;
}
.review .nm{font-weight:700;font-size:14px}
.review .mt{color:var(--grey);font-size:12.5px}
.provenance{color:var(--grey);font-size:13px;margin-top:8px;line-height:1.7}

/* -------------------------------- facts ----------------------------------- */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px}
.fact .k{
  font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--navy);margin-bottom:9px;
}
.fact .v{color:var(--grey);font-size:15.5px;line-height:1.7}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.checks li{padding-left:26px;position:relative;color:var(--grey)}
.checks li:before{content:'';position:absolute;left:0;top:11px;width:13px;height:2px;background:var(--cyan);border-radius:2px}

/* -------------------------------- close ----------------------------------- */
.close-cta{text-align:center}
.close-cta .lede{margin:0 auto 30px}

/* -------------------------------- footer ---------------------------------- */
footer{background:var(--ink-deep);color:#8e9aa4;padding:56px 0;font-size:14.5px;line-height:1.85}
footer img{height:32px;margin-bottom:22px;filter:brightness(0) invert(1);opacity:.9}
footer a{color:#c3cdd4;border-bottom:1px solid rgba(255,255,255,.2)}
footer a:hover{color:var(--cyan);border-color:var(--cyan)}
footer .fine{margin-top:22px;font-size:12.5px;max-width:80ch;color:#6f7a83}

/* padding was 0 vertical: fine for a short one-line flag, but the sample-results
   placeholder wraps to four lines and the dotted underline sat right on the
   descenders of the line above. A few px of vertical air fixes that without
   touching the colour, dotted style or radius. */
.todo{color:#8a6f31;background:#fbf5e7;border-bottom:1px dotted #b9a267;padding:5px 2px;border-radius:2px}
section.dark .todo,.hero .todo{background:rgba(255,214,120,.14);color:#e7c98a;border-bottom-color:#8d7a4e}

/* =========================================================================
   ORDER FLOW
   ========================================================================= */
dialog{
  width:660px;max-width:calc(100% - 32px);border:0;padding:0;border-radius:16px;
  background:#fff;color:var(--ink);max-height:92vh;overflow:hidden;
}
dialog::backdrop{background:rgba(10,14,16,.6)}
.dhead{padding:24px 36px;border-bottom:1px solid var(--line);position:relative;background:var(--wash)}
.dhead .who{color:var(--grey);font-size:14.5px}
.dhead .who b{color:var(--ink)}
.close{
  /* padding was 4px 8px: a ~30x27px hit box on the control that exits the
     whole order flow. Grown to clear 44x44; still the same glyph, same
     colour, anchored the same 20px off the corner. */
  position:absolute;right:20px;top:20px;background:none;border:0;font-size:19px;
  line-height:1;color:var(--grey);padding:13px 15px;transition:color .15s var(--ease);
}
.close:hover{color:var(--ink)}
.dbody{padding:32px 36px 36px;overflow-y:auto;max-height:calc(92vh - 82px)}
.step[hidden]{display:none}
.step h3{font-size:26px;margin-bottom:10px}
.step .sub{color:var(--grey);margin-bottom:28px;line-height:1.7}

.choices{display:grid;gap:14px}
.choice{
  display:block;cursor:pointer;border:1px solid var(--line);border-radius:12px;
  padding:19px 21px;background:#fff;
  transition:border-color .15s var(--ease),background .15s var(--ease);
}
.choice:hover{border-color:var(--grey)}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice .row{display:flex;justify-content:space-between;gap:18px;align-items:baseline}
.choice .nm{font-weight:700;font-size:16.5px}
.choice .amt{font-family:var(--display);font-size:19px;color:var(--navy);white-space:nowrap}
.choice .bl{color:var(--grey);font-size:14.5px;margin-top:9px;line-height:1.65}
.choice ul{list-style:none;margin:11px 0 0;padding:0;color:var(--grey);font-size:13.5px}
.choice li{padding:3px 0 3px 18px;position:relative}
.choice li:before{content:'';position:absolute;left:0;top:12px;width:9px;height:2px;background:var(--cyan);border-radius:2px}
.choice:has(input:checked){border-color:var(--navy);background:#f5f9fd}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.field{display:flex;flex-direction:column}
.field.wide{grid-column:1 / -1}
.field label{
  font-size:11.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--ink);margin-bottom:8px;
}
.field .hint{font-weight:400;letter-spacing:0;text-transform:none;color:var(--grey)}
.field input,.field select,.field textarea{
  font:inherit;font-size:15.5px;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:9px;padding:11px 13px;width:100%;transition:border-color .15s var(--ease);
}
.field textarea{resize:vertical;min-height:76px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy)}
.field input::placeholder,.field textarea::placeholder{color:#aab3ba}
.field.bad input,.field.bad select{border-color:#c0392b;background:#fdf7f6}
.err{color:#c0392b;font-size:13px;margin-top:7px}
.err:empty{display:none}

.review-box{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rrow{
  display:flex;justify-content:space-between;gap:18px;padding:12px 18px;
  border-bottom:1px solid var(--line);font-size:14.5px;
}
.rrow:last-child{border-bottom:0}
.rrow span{color:var(--grey)}
.rrow b{font-weight:700;text-align:right}
.rrow.total{background:var(--wash)}
.rrow.total b{font-family:var(--display);font-size:21px;color:var(--navy);font-weight:400}
.tests-line{
  color:var(--grey);font-size:13.5px;padding:12px 18px;
  border-bottom:1px solid var(--line);line-height:1.65;
}
.fine{color:var(--grey);font-size:13px;line-height:1.65;margin-top:18px}
.actions{display:flex;align-items:center;gap:22px;margin-top:28px;flex-wrap:wrap}
.back{
  background:none;border:0;color:var(--grey);padding:0;font-weight:700;font-size:14px;
  transition:color .15s var(--ease);
}
.back:hover{color:var(--ink)}
.done .mark{
  font-size:11.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--navy);margin-bottom:12px;
}
.done .summary{
  margin-top:22px;padding:18px;border:1px solid var(--line);border-radius:12px;
  background:var(--wash);color:var(--grey);line-height:1.7;
}
.done .summary b{color:var(--ink)}

/* ------------------------------ responsive -------------------------------- */
@media(max-width:1080px){
  .hero .inner{padding-top:64px;min-height:440px}
  .hero .shot{width:62%;opacity:.5}
  .stats{grid-template-columns:repeat(2,1fr);gap:22px;margin-top:36px}
  .doc{grid-template-columns:1fr;gap:30px}
  .doc .shot{max-width:300px}
  .reviews{columns:2}
}

/* ------------------ the 761 to 899 band, iPad portrait --------------------
   Between the 1080px block above and the 760px phone block below there was
   nothing, so the full desktop nav rendered at full desktop size: five items
   at 15px with 30px gaps, plus the logo and the CTA. That is wider than the
   bar at 768px, which is iPad portrait and a real width, so the items wrapped
   to two lines and CHOOSE A PANEL broke mid-button.

   Tightening the gaps and the type rather than hiding the nav: this is a
   screen with room for navigation, and the phone block below already drops it
   for the widths that genuinely cannot fit it.
-------------------------------------------------------------------------- */
@media(min-width:761px) and (max-width:899px){
  header .inner{gap:14px}
  header nav{gap:12px}
  header nav a{font-size:13px}
  /* stays above the 44px tap-target floor: 13px vertical padding is unchanged,
     only the horizontal padding and the label tighten. */
  header .cta{padding:13px 14px;font-size:12px}
}

@media(max-width:760px){
  .shell{max-width:calc(100% - 36px)}
  section{padding:60px 0}
  header nav{display:none}
  /* 11px vertical measured 41px tall on a phone, 3px under the 44px tap-target
     floor; this is the one that is actually live under 760px. */
  header .cta{padding:13px 16px;font-size:12px}
  .sec-head{margin-bottom:30px}
  .panel{flex-basis:270px}
  .reviews{columns:1}
  .ratings{gap:26px}
  dialog{width:100%;max-width:100%;max-height:100vh;border-radius:0}
  .dhead{padding:20px 22px}
  .dbody{padding:26px 22px 34px;max-height:calc(100vh - 74px)}
  .fields{grid-template-columns:1fr}
  .actions .cta{width:100%;text-align:center}
}
/* ----------------------------- hero on phones -----------------------------
   The hero is one centred stack at every width now (portrait, then caption,
   then pitch, then the review carousel), so there is no separate mobile
   layout to keep in sync: no reordering, no float-to-static conversion, no
   second copy of the ghost/chip rules. What is left here is just type and
   spacing getting tighter as the viewport narrows.
--------------------------------------------------------------------------- */
@media(max-width:760px){
  .hero{padding-top:18px}
  .pitch h1{font-size:clamp(40px,12vw,60px)}
  .pitch .sub{max-width:36ch;font-size:15px}
  .pitch .cta{display:block;width:100%;text-align:center}
  /* one CTA in the first screen, not two. See armHeaderCta(). */
  header.at-hero .cta{opacity:0;pointer-events:none;transform:translateY(-4px)}
  header .cta{transition:opacity .2s var(--ease),transform .2s var(--ease)}

  .stats{grid-template-columns:repeat(2,1fr);gap:18px 20px;padding:4px 0 34px}
  .stats .v{font-size:24px}
}

/* Phones with limited vertical room (667px tall or less) do not have space
   for the desktop gaps between the portrait, the "30+ years" caption and
   the pitch: shaving those margins is what keeps the H1 on the first
   screen at 375x667. */
@media(max-height:700px){
  .chip-rate{margin-top:6px}
  .pitch{margin-top:10px}
  .pitch .hey{margin-bottom:6px}
}

@media(max-width:700px) and (max-height:430px){
  /* 667x375 leaves the least vertical room of any target size */
  .stats{gap:16px;padding-bottom:26px}
  .stats .v{font-size:22px;padding-top:10px}
}
/* ------------------------- the smallest phone ----------------------------
   iPhone SE is 375x667. The centred stack put "Choose your panel" 53px below
   the fold there, which is the one screen size where the buy button did not
   survive the fold. Everything above it gives back a few pixels rather than
   any single element shrinking noticeably.
-------------------------------------------------------------------------- */
@media(max-width:400px) and (max-height:700px){
  .hero{padding-top:4px}
  /* 667px cannot hold the portrait, the name, the sub, the CTA and the five
     panel names at once. The portrait gives up the most because it is the
     one element that still reads at half the size. */
  .cutout img{max-height:170px}
  .hpan{margin-top:9px}
  .hpan-lab{margin-bottom:5px}
  .chip-rate{margin-top:8px}
  .chip-rate .s{font-size:11.5px}
  .pitch{padding-top:12px}
  .pitch .hey{margin-bottom:4px}
  .pitch h1{font-size:46px}
  .pitch .sub{font-size:14.5px;margin-bottom:16px}
}

/* ------------------- the hero at tablet size and up ----------------------
   The portrait was capped at 230x300 for EVERY width, because that cap was
   calculated to stop it pushing the H1 below the fold on a 390px phone. On a
   1440px screen that left a phone-sized doctor stranded in a field of empty
   lavender with the whole composition reading as an afterthought.

   The constraint on a desktop is a 900px tall viewport, not a 390px wide one,
   so the cap is lifted and everything scales with the room available.
------------------------------------------------------------------------- */
@media(min-width:761px){
  .hero{padding-top:18px}
  .hwrap{padding-bottom:34px}

  .cutout{max-width:330px}
  /* Sized against viewport HEIGHT, not a fixed cap. A fixed 400px looked
     right at 1440x900 and pushed the buy button under the fold at
     1024x768. 40vh keeps the portrait the same proportion of whatever
     screen it lands on, so the CTA stays visible on both. */
  .cutout img{max-height:min(400px,40vh)}

  .hero .ghost{font-size:clamp(170px,19vw,290px);top:2%}

  .chip-rate{max-width:460px;margin-top:16px}
  .chip-rate .score{font-size:17px}
  .chip-rate .s{font-size:13.5px}

  .pitch{max-width:680px;margin-top:14px}
  .pitch .hey{font-size:16.5px;margin-bottom:8px}
  .pitch h1{font-size:clamp(64px,5.6vw,86px);margin-bottom:14px}
  .pitch .sub{font-size:17px;max-width:46ch;margin-bottom:28px}
  .pitch .cta{padding:16px 34px;font-size:14px}

  /* the proof carousel was a 400px card under a 1440px hero, which read as a
     stray note rather than part of the composition */
  .hero-proof{max-width:560px;margin-top:26px}
  .hp-score{font-size:18px}
  .hp-score span{font-size:12.5px}
  .hp-note{font-size:12.5px}
  .hp-slide q{font-size:15px}
}

/* Wide desktops have even more room. Nothing here changes the design, it only
   stops the composition looking undersized on a large screen. */
@media(min-width:1200px){
  .cutout{max-width:380px}
  .cutout img{max-height:min(450px,42vh)}
  .pitch{max-width:740px}
  .hero-proof{max-width:620px}
}

/* MOVED here 15 Sept. This sat ABOVE @media(min-width:761px), and a
   landscape phone at 844x390 matches BOTH queries. Equal specificity means
   source order decides, so the desktop rules won and this block never once
   applied to the phones it was written for. */
/* --------------------- phones held sideways ------------------------------
   A phone in landscape is 844x390 or shorter: wider than the 760px phone
   breakpoint above but with barely any vertical room, so it is keyed on
   height rather than width, which is the thing that is actually short.
-------------------------------------------------------------------------- */
@media(max-width:1000px) and (max-height:540px){
  header nav{display:none}
  .hero{padding:6px 0 38px}
  .hero .ghost{font-size:52px;top:1%}
  .cutout{max-width:118px}
  /* 390px of height, minus a 56px header, has to hold a portrait, a name, a
     sub and the buy button. The portrait is the only one that still works at
     half size, so it gives up the most. */
  .cutout img{max-height:108px}
  /* the draft bar, the header and a 170px portrait already use up most of a
     390px-tall screen; the caption is the one piece of furniture with
     nowhere left to go. Its figure still surfaces below, in the review
     carousel header. */
  .chip-rate{display:none}
  .pitch{margin-top:2px}
  .pitch .hey{font-size:13px;margin-bottom:2px}
  .pitch h1{font-size:30px;margin-bottom:4px}
  .pitch .sub{font-size:13px;line-height:1.45;margin-bottom:10px}
  .pitch .cta{padding:11px 22px;font-size:12.5px}
  .hero-proof{margin-top:14px;max-width:320px}
}

/* ------------------ the five panels, listed at the hero CTA ---------------
   Names and prices only. Deliberately quiet: this sits under the primary
   button and must not compete with it, so the buttons are outlined rather
   than filled and the type stays small.
------------------------------------------------------------------------- */
.hpan{margin-top:13px;position:relative;z-index:3}
.hpan-lab{
  font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--grey);margin-bottom:7px;
}
.hpan-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.hpan-i{
  display:inline-flex;align-items:baseline;gap:7px;
  padding:9px 14px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  font-family:var(--sans);color:var(--ink);
  transition:background .15s var(--ease),border-color .15s var(--ease),transform .15s var(--ease);
}
.hpan-i:hover{background:#fff;border-color:var(--cyan);transform:translateY(-1px)}
.hpan-n{font-size:13px;font-weight:700}
.hpan-p{font-size:12.5px;color:var(--navy);font-weight:700}

@media(max-width:760px){
  .hpan{margin-top:11px}
  .hpan-row{gap:7px}
  /* 44px tall so it is a real tap target, not a decorative pill */
  .hpan-i{padding:12px 13px}
  .hpan-n{font-size:12.5px}
  .hpan-p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track{scroll-behavior:auto}
  *{transition:none!important}
}

/* =========================================================================
   VIDEO TESTIMONIALS
   4:5 portrait cards like nexthealth-v2. Posters are 16:9, so the image is
   sized to the card height and panned to a per-card focal point via --fx/--fy,
   with --vz zooming past YouTube letterbox bars on the smaller posters.
   ========================================================================= */
.vidwrap{margin-bottom:56px}
.vtrack{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 16px;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.vtrack::-webkit-scrollbar{display:none}
.vcard{
  flex:0 0 252px;scroll-snap-align:start;position:relative;display:block;
  aspect-ratio:4/5;border:0;padding:0;margin:0;border-radius:12px;overflow:hidden;
  background:var(--wash);cursor:pointer;text-align:left;
  box-shadow:0 1px 2px rgba(10,14,16,.06),0 14px 28px -20px rgba(10,14,16,.45);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.vcard:hover{transform:translateY(-5px);box-shadow:0 2px 5px rgba(10,14,16,.08),0 26px 46px -24px rgba(10,14,16,.55)}
.vmedia{position:absolute;inset:0;overflow:hidden;display:block;transition:transform .5s var(--ease)}
.vcard:hover .vmedia{transform:scale(1.05)}
.vmedia img{
  position:absolute;left:50%;top:50%;
  height:calc(var(--vz,1) * 100%);width:auto;max-width:none;
  transform:translate(calc(var(--fx,.5) * -100%),calc(var(--fy,.5) * -100%));
}
.vscrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top,rgba(10,14,16,.94) 0%,rgba(10,14,16,.74) 26%,rgba(10,14,16,.28) 52%,rgba(10,14,16,0) 72%),
    linear-gradient(to bottom,rgba(10,14,16,.3) 0%,rgba(10,14,16,0) 30%);
}
.vtime{
  position:absolute;top:12px;right:12px;z-index:2;
  background:rgba(10,14,16,.78);color:#fff;font-size:12px;font-weight:700;
  letter-spacing:.4px;padding:4px 9px;border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.vplay{
  /* above centre, not on it: .vmeta is anchored to the bottom and a two-line
     title grew up into the button on every card */
  position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:52px;height:52px;border-radius:999px;background:rgba(255,255,255,.94);
  color:var(--ink);display:flex;align-items:center;justify-content:center;
  font-size:17px;padding-left:3px;transition:transform .25s var(--ease),background .25s var(--ease);
}
.vcard:hover .vplay{transform:translate(-50%,-50%) scale(1.09);background:#fff}
.vmeta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px 16px 16px;display:block}
.vline{display:block;color:#fff;font-family:var(--display);font-size:17px;line-height:1.16;letter-spacing:-.2px}
.vname{display:block;color:var(--cyan);font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;margin-top:8px}
.vtreat{display:block;color:rgba(255,255,255,.66);font-size:12px;line-height:1.45;margin-top:5px}

.vbox{
  position:fixed;inset:0;z-index:200;background:rgba(10,14,16,.92);
  display:flex;align-items:center;justify-content:center;padding:32px;
}
.vbox[hidden]{display:none}
.vframe{width:min(1000px,100%);aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.vframe iframe{width:100%;height:100%;border:0;display:block}
.vclose{
  position:absolute;top:22px;right:26px;background:none;border:0;color:#fff;
  font-size:22px;padding:8px 12px;cursor:pointer;
}
.vclose:hover{color:var(--cyan)}

@media(max-width:760px){
  .vcard{flex-basis:215px}
  .vbox{padding:16px}
}

/* =========================================================================
   CORPORATE MEMBERS + CURVED SECTION EDGES
   The hero is a lavender panel, the corporate rail sits on it, and the white
   body rises into it with a curved top edge.
   ========================================================================= */
.corp{background:var(--lav);padding:0 0 52px;position:relative;z-index:3}
.corp-label{
  font-size:11.5px;font-weight:700;letter-spacing:2.2px;text-transform:uppercase;
  color:var(--navy);text-align:center;margin-bottom:22px;
}
.corp-note{color:var(--grey);font-size:13px;text-align:center;margin-top:20px}
.railbox{position:relative;overflow:hidden}
/* edge fades painted in the panel colour, so no masking is needed */
.railbox:before,.railbox:after{
  content:'';position:absolute;top:0;bottom:0;width:88px;z-index:2;pointer-events:none;
}
.railbox:before{left:0;background:linear-gradient(to right,var(--lav),rgba(231,234,251,0))}
.railbox:after{right:0;background:linear-gradient(to left,var(--lav),rgba(231,234,251,0))}
.rail-logos{
  display:flex;gap:64px;align-items:center;width:max-content;
  animation:railslide 32s linear infinite;
}
.railbox:hover .rail-logos{animation-play-state:paused}
.clogo{flex:none;display:flex;align-items:center;justify-content:center;height:38px}
.clogo img{max-height:38px;width:auto;object-fit:contain;opacity:.6;filter:grayscale(1);transition:opacity .2s var(--ease),filter .2s var(--ease)}
.clogo img:hover{opacity:1;filter:grayscale(0)}
@keyframes railslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .rail-logos{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:40px}
}

/* the curved lip where the white body meets the lavender hero */
.curve{position:relative;background:#fff;border-radius:40px 40px 0 0;margin-top:-40px;z-index:4;padding-top:76px}
footer{border-radius:40px 40px 0 0;margin-top:-40px;position:relative;z-index:4}

@media(max-width:760px){
  .curve{border-radius:26px 26px 0 0;margin-top:-26px;padding-top:56px}
  footer{border-radius:26px 26px 0 0;margin-top:-26px}
  .rail-logos{gap:40px}
  .clogo,.clogo img{height:30px;max-height:30px}
  .railbox:before,.railbox:after{width:48px}
}

/* =========================================================================
   VIDEO LIGHTBOX: story panel beside the player
   ========================================================================= */
.vstage{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;align-items:stretch;
  width:min(1180px,100%);background:#000;border-radius:16px;overflow:hidden;max-height:86vh;
}
/* the player cell is black so the space around a 16:9 frame reads as letterbox
   rather than as a white gap under the video */
.vcell{display:flex;align-items:center;justify-content:center;background:#000;min-height:0}
.vframe{aspect-ratio:16/9;width:100%;background:#000;border-radius:0}
.vside{padding:30px 28px;overflow-y:auto;background:#fff;display:flex;flex-direction:column}
.vside .who{font-family:var(--display);font-size:28px;color:var(--ink);line-height:1.05}
.vside .role{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--navy);margin-top:7px}
.vside .lbl{font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--grey);margin:26px 0 9px}
.vside .treat{color:var(--ink);font-size:15.5px;line-height:1.6}
.vside blockquote{
  margin:0;padding:16px 18px;background:var(--wash);border-radius:12px;
  border-left:3px solid var(--cyan);color:var(--ink);font-size:15px;line-height:1.7;
}
.vside .out{color:var(--grey);font-size:14.5px;line-height:1.7}
.vside .run{margin-top:auto;padding-top:22px;color:var(--grey);font-size:12.5px}

@media(max-width:1000px){
  .vstage{grid-template-columns:1fr;max-height:92vh}
  .vside{padding:22px 20px}
  .vside .who{font-size:23px}
}
/* Testimonial cards component (vanilla CSS)
   Ported from a React/shadcn pattern. Uses host page tokens defined on
   :root; fallbacks are included so the block still renders sanely if a
   token is ever missing. */

/* Scope box-sizing so card padding/width math is predictable no matter
   what (or whether) the host page resets box-sizing globally. */
.tc-section,
.tc-section *,
.tc-section *::before,
.tc-section *::after {
  box-sizing: border-box;
}

.tc-section {
  font-family: var(--sans, 'Lato', sans-serif);
}

.tc-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 32px;
}

.tc-title {
  font-family: var(--display, 'Fjalla One', sans-serif);
  color: var(--ink, #0b1622);
  font-size: clamp(22px, 4vw, 30px);
  letter-spacing: .02em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.tc-desc {
  font-family: var(--sans, 'Lato', sans-serif);
  color: var(--grey, #808891);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.tc-wrap {
  position: relative;
}

.tc-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

/* The clipped state approximates "maxDisplayed" cards worth of height.
   Every card is already in the DOM; Load More just lifts the cap. */
.tc-list-clipped {
  max-height: 720px;
  overflow: hidden;
  transition: max-height .4s var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.tc-card {
  position: relative;
  width: 320px;
  padding: 20px;
  background: var(--paper, #fff);
  border: 1px solid var(--line, #dde5ec);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tc-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 18px;
  height: 18px;
  color: var(--cyan, #17c4ff);
  opacity: .85;
  pointer-events: none;
}

.tc-badge svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tc-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 20px; /* keep name/meta clear of the corner badge */
}

.tc-avatar {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--wash, #f4f6f7);
  border: 1px solid var(--line, #dde5ec);
  color: var(--navy, #054990);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tc-who {
  min-width: 0;
}

.tc-name {
  font-weight: 600;
  color: var(--ink, #0b1622);
  font-size: 15px;
  line-height: 1.3;
}

.tc-meta {
  font-weight: 400;
  color: var(--grey, #808891);
  font-size: 13px;
  margin-top: 2px;
}

.tc-quote {
  font-weight: 500;
  color: var(--ink, #0b1622);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}

/* Fade sits over the clipped edge of the list, white to transparent
   because the section this ships into has a white background (not a
   token, since it must match the page background exactly, not a color
   token that could differ). */
.tc-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 24px;
  pointer-events: none;
  transition: opacity .3s var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.tc-loadmore {
  pointer-events: auto;
  background: var(--navy, #054990);
  color: #fff;
  border: none;
  font-family: var(--sans, 'Lato', sans-serif);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 26px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(5, 73, 144, .25);
  transition: background .2s var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.tc-loadmore:hover {
  background: var(--cyan, #17c4ff);
}

.tc-loadmore:focus-visible {
  outline: 2px solid var(--cyan, #17c4ff);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tc-list-clipped,
  .tc-fade {
    transition: none;
  }
}

@media (max-width: 480px) {
  .tc-card {
    width: 100%;
  }
}

/* ------------------------- the outcome bars ------------------------------- */
.out-tile-label{
  font-size:11px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--navy);margin-bottom:24px;
}
.bars{display:grid;gap:20px;max-width:760px}
.bar .bk{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.bar .bk span{font-size:15.5px;color:var(--ink);font-weight:700}
.bar .bk b{font-family:var(--display);font-size:26px;color:var(--navy);font-weight:400}
.btrack{height:6px;border-radius:999px;background:#e3e8ec;overflow:hidden}
.btrack i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--navy),var(--cyan));
}
#outcome .provenance{margin-top:26px;max-width:70ch}

/* --------------------- generic snap scroller ------------------------------
   Sits still on desktop when the row already fits, swipes on a phone.
--------------------------------------------------------------------------- */
.scroller{
  /* min-width:0 stops a flex row of fixed-width cards from forcing its grid
     column wider than the viewport */
  min-width:0;max-width:100%;
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:2px 2px 14px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.scroller::-webkit-scrollbar{display:none}
.scroller > *{scroll-snap-align:start}
.fact.card{
  flex:0 0 280px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 22px 20px;
}
.wash .fact.card{background:#fff}
.creds.scroller{display:flex;gap:16px;margin-top:26px}
.creds.scroller li{
  flex:0 0 260px;padding:16px 18px 16px 32px;background:#fff;
  border:1px solid var(--line);border-radius:12px;font-size:14.5px;
}
.creds.scroller li:before{left:16px;top:26px}
.arrow[hidden]{display:none}
@media(max-width:760px){
  .fact.card{flex-basis:250px}
  .creds.scroller li{flex-basis:230px}
}

/* =========================================================================
   THE DOCTOR: real clinic photography, numbered credentials, a sliding
   creds carousel. Used to be a frosted-glass panel (backdrop-filter blur,
   22px radius, 38px padding) sitting on top of this gradient; the client
   read that box as heavy and asked for the content to just sit on the page
   and scroll normally, so the box is gone and the content sits directly on
   the soft colour pools below. The pools stay: they are what stops the
   section reading as flat white between the corp-logo rail above it and the
   panel carousel below.
   ========================================================================= */
#doctor{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#eef1fc 0%,#f7f9fb 52%,#eaf6fd 100%);
}
#doctor:before,#doctor:after{
  content:'';position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;
}
#doctor:before{width:520px;height:520px;top:-140px;left:-120px;background:rgba(23,196,255,.30)}
#doctor:after{width:560px;height:560px;right:-160px;bottom:-200px;background:rgba(5,73,144,.20)}
#doctor .shell{position:relative;z-index:1}

#doctor.curve{padding-top:52px}
#doctor .doc{padding:0}
#doctor .rail{margin-top:12px}
#doctor .shot .doc-portrait,#doctor .shot img#docImg{border-radius:16px}
.shot-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.shot-strip img{
  width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;
  border:1px solid rgba(255,255,255,.65);
  box-shadow:0 8px 22px -14px rgba(11,22,34,.4);
  transition:transform .25s var(--ease);
}
.shot-strip img:hover{transform:translateY(-3px)}

/* numbered credentials, replacing the dash marker. Each card keeps a light
   frosted look of its own, which is fine at this size: it is six small
   objects riding the wash, not one big box standing on top of it. */
.creds.scroller li{
  padding:14px 16px 13px;display:flex;gap:10px;align-items:flex-start;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 10px 26px -20px rgba(11,22,34,.32);
}
.creds.scroller li:before{content:none}
.creds .cn{
  font-family:var(--display);font-size:14px;color:var(--cyan);line-height:1.2;
  flex:none;padding-top:1px;letter-spacing:.5px;
}
.creds .ct{color:var(--ink);font-size:13.5px;line-height:1.45}

@media(max-width:1080px){
  .shot-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  #doctor .doc{padding:20px;border-radius:18px}
  #doctor:before,#doctor:after{filter:blur(60px)}
}
/* ==========================================================================
   Results bento grid, vanilla CSS.
   Pairs with /tmp/bento.js -> renderResultsBento(rootEl, data)

   Expects these tokens already on :root
   --cyan --navy --ink --grey --line --wash --display --sans --ease

   Animation contract:
   .nhb            base rules describe the FINAL state, so the section is
                   correct with JS off or under reduced motion
   .nhb-armed      added by JS only when motion is allowed, sets start state
   .is-in          added once by the IntersectionObserver, plays everything
   --d             per element stagger delay, set inline by JS
   ========================================================================== */

.nhb {
  font-family: var(--sans), Helvetica, Arial, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.nhb *,
.nhb *::before,
.nhb *::after { box-sizing: border-box; }

.nhb-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- section head ---------- */

.nhb-head { max-width: 42ch; margin: 0 0 22px; }
.nhb-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
}
.nhb-title {
  margin: 0;
  font-family: var(--display), var(--sans), sans-serif;
  font-weight: 400;
  font-size: clamp(27px, 3.3vw, 44px);
  line-height: 1.06;
  letter-spacing: -.005em;
  color: var(--ink);
}

/* ---------- grid ---------- */

.nhb-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.nhb-card {
  grid-column: 1 / -1;          /* mobile default, every card full width */
  min-width: 0;                 /* lets SVG and text shrink instead of overflowing */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
}
@media (min-width: 700px) {
  .nhb-grid { gap: 14px; }
  .nhb-s2 { grid-column: span 3; }
  .nhb-s3 { grid-column: span 6; }
}
/* tablet tier: the chart card goes full width so it does not leave a hole
   next to the full width split cards below it */
@media (min-width: 700px) and (max-width: 1023px) {
  .nhb-c { grid-column: span 6; }
}
@media (min-width: 1024px) {
  .nhb-card { padding: 24px; }
  .nhb-s2 { grid-column: span 2; }
  .nhb-s3 { grid-column: span 3; }
}

/* ---------- shared type ---------- */

.nhb-h3 {
  margin: 0 0 8px;
  font-family: var(--display), var(--sans), sans-serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.18;
  letter-spacing: -.005em;
  color: var(--ink);
}
.nhb-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  opacity: .74;
}
/* regulatory lines, held darker and never smaller than 12.5px */
.nhb-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
  opacity: .82;
}

/* ---------- shared line art ---------- */

.nhb-art { fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nhb-art-accent { fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nhb-art-dot { fill: var(--cyan); stroke: none; }

/* ---------- badges ---------- */

.nhb-badge {
  position: relative;
  flex: 0 0 auto;
  width: 70px; height: 70px;
  border-radius: 50%;
  background: var(--wash);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
.nhb-badge::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.nhb-badge svg { display: block; width: 34px; height: 34px; }
.nhb-badge.-sm { width: 46px; height: 46px; }
.nhb-badge.-sm::before { inset: -6px; }
.nhb-badge.-sm svg { width: 23px; height: 23px; }

@keyframes nhb-ring {
  0%   { transform: scale(1);    opacity: .95; }
  55%  { transform: scale(1.12); opacity: .2; }
  100% { transform: scale(1);    opacity: .95; }
}
@keyframes nhb-ring-in {
  0%   { transform: scale(.94); }
  55%  { transform: scale(1.04); }
  100% { transform: scale(.94); }
}
.nhb-armed.is-in .nhb-badge::before { animation: nhb-ring 3.4s var(--ease) .45s infinite; }
.nhb-armed.is-in .nhb-badge > svg   { animation: nhb-ring-in 3.4s var(--ease) .45s infinite; }

/* ---------- card A, scribbled stat ---------- */

.nhb-a { display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.nhb-statwrap { position: relative; align-self: flex-start; padding: 8px 24px 12px; }
/* sizer and live number share one grid cell so counting digits cannot reflow
   the card or slide the scribble sideways */
.nhb-statline { display: grid; justify-items: start; }
.nhb-statline > span { grid-area: 1 / 1; }
.nhb-sizer { visibility: hidden; }
.nhb-sizer,
.nhb-stat {
  font-family: var(--display), var(--sans), sans-serif;
  font-weight: 400;
  font-size: clamp(56px, 6.6vw, 82px);
  line-height: .95;
  color: var(--navy);
}
.nhb-scribble {
  position: absolute;
  left: -2px; top: -4px;
  width: calc(100% + 4px);
  height: calc(100% + 8px);
  overflow: visible;
  pointer-events: none;
}
.nhb-scribble path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nhb-cap {
  font-family: var(--display), var(--sans), sans-serif;
  font-size: 21px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 6px;
}

.nhb-armed .nhb-scribble path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.nhb-armed.is-in .nhb-scribble path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.15s var(--ease) .22s;
}

/* ---------- card B, centred badge ---------- */

.nhb-b { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.nhb-b .nhb-h3 { margin-top: 4px; }

/* ---------- card C, line and area chart ---------- */

.nhb-chart { display: block; width: 100%; height: auto; margin: 0 0 18px; }
.nhb-axis { stroke: var(--line); stroke-width: 1; }
.nhb-stem { fill: var(--line); transform-box: fill-box; transform-origin: bottom; }
.nhb-line { fill: none; stroke: var(--cyan); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nhb-pt { fill: #fff; stroke: var(--cyan); stroke-width: 2.4; transform-box: fill-box; transform-origin: center; }
.nhb-cval { font-family: var(--sans), sans-serif; font-size: 15px; font-weight: 700; fill: var(--navy); }
.nhb-clab { font-family: var(--sans), sans-serif; font-size: 10.5px; font-weight: 400; fill: var(--grey); }

.nhb-armed .nhb-area { opacity: 0; }
.nhb-armed .nhb-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.nhb-armed .nhb-stem { transform: scaleY(0); }
.nhb-armed .nhb-pt   { transform: scale(0); }
.nhb-armed .nhb-cval,
.nhb-armed .nhb-clab { opacity: 0; }

.nhb-armed.is-in .nhb-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.05s var(--ease) .18s; }
/* the fill only reads as "under the line" once the line exists, so it waits */
.nhb-armed.is-in .nhb-area { opacity: 1; transition: opacity .75s var(--ease) 1.02s; }
.nhb-armed.is-in .nhb-stem { transform: scaleY(1); transition: transform .55s var(--ease) var(--d, 0s); }
.nhb-armed.is-in .nhb-pt   { transform: scale(1);  transition: transform .5s var(--ease) var(--d, 0s); }
.nhb-armed.is-in .nhb-cval,
.nhb-armed.is-in .nhb-clab { opacity: 1; transition: opacity .5s var(--ease) var(--d, 0s); }

/* ---------- cards D and E, two column split ---------- */

.nhb-split { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.nhb-split-l { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.nhb-split-r { min-width: 0; }
@media (min-width: 700px) {
  .nhb-split { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 20px; align-items: center; }
  .nhb-e .nhb-split { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
}

/* ---------- card D, inset panel with diverging tracks ---------- */

.nhb-panel {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--wash);
  padding: 11px 12px 10px;
}
.nhb-dots { display: flex; gap: 5px; margin: 0 0 8px; }
.nhb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.nhb-dot.-on { background: var(--cyan); }
.nhb-panel-head {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--grey);
}
.nhb-tracks { display: block; width: 100%; height: auto; }
.nhb-track { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nhb-track.-good { stroke: var(--cyan); }
.nhb-track.-bad  { stroke: var(--navy); opacity: .45; }
.nhb-track-start { fill: var(--navy); }
.nhb-tval { font-family: var(--sans), sans-serif; font-size: 14px; font-weight: 700; }
.nhb-tval.-good { fill: var(--cyan); }
.nhb-tval.-bad  { fill: var(--navy); }
.nhb-tval.-now  { fill: var(--grey); }

.nhb-armed .nhb-track { stroke-dasharray: 1; stroke-dashoffset: 1; }
.nhb-armed .nhb-tval:not(.-now) { opacity: 0; }
.nhb-armed .nhb-track-start { transform: scale(0); transform-box: fill-box; transform-origin: center; }
.nhb-armed.is-in .nhb-track { stroke-dashoffset: 0; transition: stroke-dashoffset 1.15s var(--ease) .3s; }
.nhb-armed.is-in .nhb-tval:not(.-now) { opacity: 1; transition: opacity .5s var(--ease) 1.25s; }
.nhb-armed.is-in .nhb-track-start { transform: scale(1); transition: transform .45s var(--ease) .18s; }

/* ---------- card E, alternating name chips ---------- */

.nhb-rail { position: relative; padding: 4px 0; }
.nhb-rail::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
}
.nhb-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.nhb-row + .nhb-row { margin-top: 9px; }
.nhb-row::after {           /* node where the chip meets the rail */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--cyan);
}
.nhb-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px 4px 4px;
}
.nhb-row.-l .nhb-chip { grid-column: 1; justify-self: end; margin-right: 9px; }
.nhb-row.-r .nhb-chip { grid-column: 2; justify-self: start; margin-left: 9px; }
.nhb-name {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
/* monogram avatars, drawn in CSS, no image requests anywhere */
.nhb-mono {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--navy);
  color: #fff;
}
.nhb-mono.-alt { background: var(--ink); }
.nhb-mono.-accent { background: var(--cyan); color: var(--ink); }

.nhb-armed .nhb-rail::before { transform: scaleY(0); transform-origin: top; }
.nhb-armed .nhb-chip { opacity: 0; }
.nhb-armed .nhb-row::after { opacity: 0; }
.nhb-armed .nhb-row.-l .nhb-chip { transform: translateX(-10px); }
.nhb-armed .nhb-row.-r .nhb-chip { transform: translateX(10px); }
.nhb-armed.is-in .nhb-rail::before { transform: scaleY(1); transition: transform .7s var(--ease) .12s; }
.nhb-armed.is-in .nhb-chip {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .5s var(--ease) var(--d, 0s), transform .5s var(--ease) var(--d, 0s);
}
.nhb-armed.is-in .nhb-row::after { opacity: 1; transition: opacity .4s var(--ease) var(--d, 0s); }

/* ---------- reduced motion, final state, zero movement ---------- */

@media (prefers-reduced-motion: reduce) {
  .nhb, .nhb *, .nhb *::before, .nhb *::after {
    animation: none !important;
    transition: none !important;
  }
  /* JS skips .nhb-armed under reduced motion, this covers a stale class */
  .nhb-armed .nhb-scribble path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .nhb-armed .nhb-line { stroke-dasharray: none; stroke-dashoffset: 0; }
  .nhb-armed .nhb-track { stroke-dasharray: none; stroke-dashoffset: 0; }
  .nhb-armed .nhb-area,
  .nhb-armed .nhb-cval,
  .nhb-armed .nhb-clab,
  .nhb-armed .nhb-chip,
  .nhb-armed .nhb-row::after,
  .nhb-armed .nhb-tval { opacity: 1; }
  .nhb-armed .nhb-stem,
  .nhb-armed .nhb-pt,
  .nhb-armed .nhb-track-start,
  .nhb-armed .nhb-rail::before,
  .nhb-armed .nhb-chip { transform: none; }
}

/* the bento renders its own label and heading, so the intro sits under it */
#outcome .out-intro{margin:0 0 34px}
#outcome .nhb-head,#outcome [class*="nhb"] h2{margin-bottom:10px}

/* ===================== corporate strip, richer ============================ */
.corp-headline{
  font-family:var(--display);font-weight:400;font-size:clamp(22px,2.4vw,30px);
  color:var(--ink);text-align:center;margin:0 auto 28px;max-width:22ch;line-height:1.12;
}
.corp .rail-logos{gap:78px}
.clogo{height:46px}
.clogo img{max-height:46px;opacity:.72}
.corp-note{max-width:56ch;margin-left:auto;margin-right:auto}

/* ===================== how it works, as a timeline ======================== */
.steps-line{
  list-style:none;margin:0 0 56px;padding:0;position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:26px;
}
/* the rule the numbers sit on */
.steps-line:before{
  content:'';position:absolute;left:22px;right:22px;top:23px;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--navy));opacity:.28;
}
.stp{position:relative;padding-right:8px}
.stp-n{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:999px;background:var(--navy);color:#fff;
  font-family:var(--display);font-size:17px;letter-spacing:.5px;
  box-shadow:0 0 0 6px var(--paper);
}
.stp-b{margin-top:20px}
.stp-b h3{font-size:19px;margin-bottom:9px;color:var(--ink)}
.stp-b p{color:var(--grey);font-size:15px;line-height:1.65}
.stp-m{
  display:inline-block;margin-top:12px;font-size:11px;font-weight:700;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--navy);
  background:var(--wash);border:1px solid var(--line);border-radius:999px;padding:5px 11px;
}

/* ===================== paying, compact row ================================ */
.payrow{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pay{
  background:var(--wash);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;display:flex;align-items:flex-start;gap:12px;
}
.pay:before{
  content:'';flex:none;width:9px;height:9px;border-radius:999px;
  background:var(--cyan);margin-top:7px;
}
.pay-t{color:var(--ink);font-size:15px;line-height:1.55}

@media(max-width:1080px){
  .steps-line{grid-template-columns:repeat(2,1fr);gap:34px 26px}
  .steps-line:before{display:none}
  .payrow{grid-template-columns:1fr}
}
@media(max-width:760px){
  .steps-line{grid-template-columns:1fr;gap:28px;margin-bottom:40px}
  .corp .rail-logos{gap:48px}
  .clogo,.clogo img{height:34px;max-height:34px}
}

/* ================= practical detail cards, with icons ===================== */
.fact.card{
  flex:0 0 288px;padding:24px 22px 22px;position:relative;
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.fact.card:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 14px 32px -22px rgba(11,22,34,.4)}
.fact-ico{
  display:flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:12px;background:rgba(23,196,255,.12);color:var(--navy);margin-bottom:16px;
}
.ico{width:21px;height:21px;display:block}
.fact.card .k{margin-bottom:8px}
.fact.card .v{font-size:15px}

/* ======================= book your visit ================================== */
.bookblock{
  margin-top:56px;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:38px 36px;box-shadow:0 18px 46px -32px rgba(11,22,34,.35);
}
.bb-head{max-width:58ch;margin-bottom:28px}
.bb-head h3{font-size:clamp(22px,2.2vw,28px);color:var(--ink);margin-bottom:10px}
.bb-note{color:var(--grey);font-size:15px;line-height:1.65}
.bb-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bb-card{
  border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:var(--wash);
  display:flex;flex-direction:column;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.bb-card:hover{border-color:var(--navy);background:#fff}
.bb-ico{
  display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--navy);margin-bottom:16px;
}
/* the real clinic photo, bled out to the card's own edges the same way
   .pshot bleeds out of a panel card. Only the card with a verified real
   photo gets one (see the note on DATA.locationsPick.image in data.js); the
   other keeps the plain pin icon above instead of showing no image at all. */
.bb-shot{
  margin:-26px -24px 18px;border-radius:16px 16px 0 0;overflow:hidden;background:var(--wash);
}
.bb-shot img{display:block;width:100%;height:180px;object-fit:cover}
.bb-card h4{font-family:var(--display);font-weight:400;font-size:22px;color:var(--ink);margin:0 0 10px}
.bb-addr{color:var(--ink);font-size:14.5px;line-height:1.55;margin-bottom:6px}
.bb-hours{color:var(--grey);font-size:14px;margin-bottom:22px}
.bb-go{margin-top:auto;width:100%;text-align:center;background:var(--navy)}
.bb-go:hover{background:#073a70}

@media(max-width:760px){
  .bookblock{padding:26px 22px;border-radius:16px;margin-top:40px}
  /* a plain vertical stack, not a rail: see the comment on makeMobileRails()
     in app.js for why these two cards are deliberately excluded from the
     swipeable-rail treatment every other set of cards on the page gets */
  .bb-grid{grid-template-columns:1fr}
  .fact.card{flex-basis:258px}
  /* matches the .bb-card{padding:22px 20px} mobile override further down,
     so the photo still bleeds exactly to the card's edges at this padding */
  .bb-shot{margin:-22px -20px 16px}
  .bb-shot img{height:160px}
}

/* A bracketed placeholder inside the featured badge keeps the dotted "not
   approved" cue but must not drag the amber panel onto the cyan chip. */
.panel .badge .todo{
  background:none;color:inherit;padding:0;border-radius:0;
  border-bottom:1px dotted rgba(11,22,34,.5);
}
.tests-line .tl-k{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--grey);margin-bottom:7px;
}

/* ==========================================================================
   MOBILE: turn the vertical stacks into swipeable rails.

   On a phone every grid in this page collapsed to one column, which turned
   the page into roughly twelve screens of scrolling. Anything that is a set
   of peer items now slides sideways instead: the bento, the reviews, the
   clinic cards, the how-it-works steps, the trust line and the hero stats.

   One shared recipe, .m-rail, so they all scroll and snap identically. The
   rail bleeds into the 18px shell gutter on both sides so the next card
   peeks in and the gesture is discoverable without an arrow.
   ========================================================================== */
@media(max-width:760px){

  .m-rail{
    display:flex !important;
    grid-template-columns:none !important;
    flex-wrap:nowrap !important;
    gap:14px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    margin-left:-18px;margin-right:-18px;
    padding:2px 18px 14px;
    /* without this the snapport starts at the padding box and the browser
       silently scrolls each rail 18px on load, clipping the first card */
    scroll-padding-left:18px;scroll-padding-right:18px;
    /* .tc-list centres its cards, which with nowrap pushes the first one a
       thousand pixels left of the origin */
    justify-content:flex-start !important;
    align-items:stretch;
  }
  .m-rail::-webkit-scrollbar{display:none}
  .m-rail > *{flex:0 0 79%;scroll-snap-align:start;min-width:0}

  /* the outcome bento: five spanning cards become five equal slides.
     The nhb-s2 / nhb-s3 column spans mean nothing once the grid is a flex
     rail, so the cards simply stretch to the tallest of the five. */
  .nhb-grid > .nhb-card{height:auto;grid-column:auto;grid-row:auto}

  /* tighter rhythm everywhere, the single biggest scroll saving after the rails */
  section{padding:44px 0}
  .sec-head{margin-bottom:24px}

  /* hero */
  .stats > *{padding-right:6px}

  /* testimonials: the component clips itself vertically and fades, which is
     the wrong gesture once the cards are side by side */
  #reviews .tc-list-clipped{max-height:none}
  #reviews .tc-fade{display:none}
  #reviews .tc-section{margin:0}
  .ratings{gap:20px;margin-bottom:24px}

  /* how it works */
  .steps-line{margin-bottom:28px}
  .steps-line > .stp{padding-right:4px}

  /* before you book */
  .bookblock{margin-top:32px}
  .bb-grid{gap:14px}
  .bb-card{padding:22px 20px}

  /* a rail that sits inside a padded white card should not bleed past it */
  .bookblock .m-rail{
    margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px;
    scroll-padding-left:22px;scroll-padding-right:22px;
  }

  /* Nobody taps a 44px arrow on a phone when the card is right there to be
     pushed, and the three arrow rails cost about 200px of pure scroll. The
     half card peeking past the right edge is the affordance instead. Dots
     stay: they say how far along you are, which the peek does not. */
  .rail .arrow{display:none}
  .rail{margin-top:0;min-height:0}
  .rail .dots{margin-left:0;margin-top:2px}
  .carousel .rail:not(:has(.dots)){display:none}

  /* the doctor, on a phone: the client's complaint was a big static portrait
     pinned at the top eating the screen, on top of a heavy stacked-photo
     rail. The portrait is dropped outright here (not just shrunk) and the
     three real clinic photos become the whole sliding set, each large
     enough to read as its own slide rather than a sliver of card 02. */
  #doctor .doc{gap:18px}
  #doctor #docImg{display:none}
  #doctor .shot{
    display:flex;max-width:none;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none;
    margin:0 -18px;padding:0 18px 12px;
  }
  #doctor .shot::-webkit-scrollbar{display:none}
  #doctor .shot-strip{display:contents}
  #doctor .shot-strip img{flex:0 0 78%;scroll-snap-align:start}
  #doctor .shot img{height:200px;object-fit:cover;border-radius:14px;width:auto}

  /* the bio: with the glass panel gone the two paragraphs would otherwise
     run the section past a full screen, so the first is clamped short and
     the second stays hidden until "Read more" is tapped (wireDocBio() in
     app.js only adds that button when the clamp actually cuts text off).
     The words themselves never change, only how much shows at once. */
  #doctor .doc-bio p{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
    overflow:hidden;
  }
  #doctor .doc-bio p ~ p{display:none}
  #doctor .doc-bio.open p{-webkit-line-clamp:unset;overflow:visible;display:block}

  /* the nine reviews are verbatim Google text and some run long. Side by side
     they only need to be equal, so clamp the quote and let the card open on
     tap rather than making every card as tall as the longest one. */
  #reviews .tc-card{padding:20px 20px 18px}
  #reviews .tc-quote{
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;
    overflow:hidden;
  }
  #reviews .tc-card.open .tc-quote{-webkit-line-clamp:unset;overflow:visible}

}

/* ==========================================================================
   The second price on a panel card. The client sells every panel twice, once
   with labs alone and once with a consultation, so the card states both
   rather than making someone reach the next step to find out.
   ========================================================================== */
.panel .amt2{
  margin:-12px 0 20px;color:var(--navy);font-size:15px;font-weight:700;
  padding-top:12px;border-top:1px solid var(--hair);
}
.panel .amt2 span{color:var(--grey);font-weight:400;font-size:13.5px}

/* ======================= consultation, sold on its own ==================== */
.conly{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:40px 44px;box-shadow:0 18px 46px -34px rgba(11,22,34,.35);
}
.conly-copy h2{font-size:clamp(24px,2.6vw,34px);margin-bottom:10px}
.conly-copy .lede{margin:0;max-width:56ch}
.conly-buy{text-align:right;min-width:230px}
.conly-amt{font-family:var(--display);font-size:46px;color:var(--navy);line-height:1}
.conly-note{color:var(--grey);font-size:13px;margin:8px 0 18px}
.conly-buy .cta{width:100%;text-align:center}

/* ============================ conditions chips =========================== */
.chipgrid{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:12px;
}
.chip-item{
  border:1px solid var(--line);border-radius:999px;background:#fff;
  padding:11px 20px;font-size:14.5px;color:var(--ink);
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.chip-item:hover{border-color:var(--cyan);background:var(--wash)}

/* ============================== services ================================= */
.svcrail{display:flex;gap:14px}
.svc.card{
  flex:0 0 232px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:22px 22px;display:flex;align-items:center;min-height:92px;
  transition:border-color .16s var(--ease),transform .16s var(--ease);
}
.svc.card:hover{border-color:var(--cyan);transform:translateY(-3px)}
.svc-n{font-family:var(--display);font-weight:400;font-size:19px;color:var(--ink);line-height:1.25}
.svc-n sup{color:var(--cyan);font-size:13px;margin-left:2px}
.svc-notes{
  list-style:none;margin:26px 0 0;padding:0;display:grid;gap:9px;max-width:80ch;
}
.svc-notes li{color:var(--grey);font-size:13.5px;line-height:1.65}
.svc-notes b{color:var(--ink);font-weight:700}
.svc-mark{color:var(--cyan);font-weight:700;margin-right:4px}

@media(max-width:1080px){
  .conly{grid-template-columns:1fr;gap:26px;padding:32px 30px}
  .conly-buy{text-align:left;min-width:0}
  .conly-buy .cta{width:auto;padding-left:34px;padding-right:34px}
}
@media(max-width:760px){
  .conly{padding:26px 22px;border-radius:16px}
  .conly-amt{font-size:38px}
  .conly-buy .cta{width:100%}
  .chip-item{padding:9px 16px;font-size:13.5px}
  .svc.card{flex-basis:200px;min-height:80px;padding:18px}
  .svc-n{font-size:17px}
  .svc-notes{margin-top:20px}
  .panel .amt2{margin:-5px 0 9px;padding-top:8px;font-size:13px}
}

/* a long test list splits into two columns so it stops setting the height of
   every other card in the carousel */
.panel ul.two{columns:2;column-gap:16px}
.panel ul.two li{break-inside:avoid;padding-left:16px;font-size:13.5px}
.panel ul.two li:before{width:7px;top:11px}
@media(max-width:760px){ .panel ul.two{columns:1} .panel ul.two li{font-size:14.5px;padding-left:20px} }


/* ==========================================================================
   Review cards.

   Two things were wrong on desktop. The "read the full review" button was
   being created for every card but only styled under 760px, so nine unstyled
   browser buttons rendered full width. And the component clips its list to a
   fixed 720px, which fell in the middle of the second row and sliced three
   reviews through the sentence.

   Fixed by clamping every quote to the same number of lines at every width,
   which makes the cards a predictable height, and then clipping to a whole
   number of rows instead of an arbitrary pixel value.
   ========================================================================== */
#reviews .tc-quote{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;
  overflow:hidden;
}
#reviews .tc-card.open .tc-quote{-webkit-line-clamp:unset;overflow:visible}
#reviews .tc-more{
  align-self:flex-start;margin-top:auto;padding:4px 0 0;background:none;border:0;
  color:var(--navy);font-size:12.5px;font-weight:700;letter-spacing:.6px;cursor:pointer;
}
#reviews .tc-more:hover{text-decoration:underline}
#reviews .tc-card.open .tc-more{display:none}

@media(max-width:760px){
  #reviews .tc-card{cursor:pointer;padding:20px 20px 18px}
  #reviews .tc-quote{-webkit-line-clamp:7}
}

/* The component clips its list with a fixed max-height, which lands wherever
   it lands and cut the third row through the middle. Hiding whole cards
   instead means the boundary can never fall inside one, at any column count.
   Load More still works: its handler drops the .tc-list-clipped class. */
/* Desktop only. Below 760px the same element is a side-scrolling rail, and
   these overrides would beat .m-rail on specificity and kill its overflow,
   which stretched the page 2257px wide. */
@media(min-width:761px){
  #reviews .tc-list-clipped{max-height:none;overflow:visible}
  #reviews .tc-list-clipped > .tc-card:nth-child(n+7){display:none}
  #reviews .tc-fade{
    position:static;height:auto;padding-top:26px;background:none;
    display:flex;justify-content:center;
  }
}
@media(max-width:760px){
  /* every card stays in the rail, and the Load More affordance is pointless
     when the gesture is a swipe */
  #reviews .tc-fade{display:none}
}

/* ==========================================================================
   Choosing more than one panel.

   Someone who wants Female Vitality and Thyroid should buy both in one go and
   pay for one appointment, not check out twice. The card button became a
   toggle and this bar is the running total plus the way forward.
   ========================================================================== */
/* Selected has to survive on a borderless card, so it takes a full cyan ring,
   a tinted paper and a cyan button rather than a one pixel colour change. */
.panel.picked{
  background:#f4fbff;
  box-shadow:0 0 0 2px var(--cyan),0 16px 32px -16px rgba(5,73,144,.4);
}
.panel.picked:hover{
  transform:translateY(-3px);
  box-shadow:0 0 0 2px var(--cyan),0 22px 42px -18px rgba(5,73,144,.46);
}
.panel .select[aria-pressed="true"]{background:var(--cyan);color:var(--ink)}
.panel .select[aria-pressed="true"]:hover{background:#0eb4ee}

.cartbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:rgba(11,22,34,.94);backdrop-filter:blur(14px);
  border-top:1px solid rgba(255,255,255,.12);
  padding:14px 0;color:#fff;
  animation:cartup .22s var(--ease);
}
@keyframes cartup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.cartbar-in{display:flex;align-items:center;gap:18px}
.cart-clear{
  width:30px;height:30px;flex:none;border-radius:999px;border:1px solid rgba(255,255,255,.28);
  background:none;color:#fff;font-size:12px;line-height:1;
}
.cart-clear:hover{background:rgba(255,255,255,.14)}
.cart-what{min-width:0;flex:1}
.cart-what b{display:block;font-size:14px;font-weight:700}
.cart-what span{
  display:block;color:rgba(255,255,255,.62);font-size:12.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cart-amt{font-family:var(--display);font-size:28px;color:var(--cyan);line-height:1;flex:none}
.cartbar .cta{flex:none;background:#fff;color:var(--ink)}
.cartbar .cta:hover{background:var(--cyan)}

/* the bar sits over the page, so give the foot of the page room to clear it */
body.has-cart{padding-bottom:86px}

@media(max-width:760px){
  .cartbar{padding:11px 0}
  .cartbar-in{gap:11px}
  .cart-what b{font-size:13px}
  .cart-what span{display:none}
  .cart-amt{font-size:23px}
  .cartbar .cta{padding:11px 18px;font-size:12.5px}
  body.has-cart{padding-bottom:74px}
}

/* ==========================================================================
   All five panels on one screen.

   The rail fitted three and a half cards, so the fourth was sliced by the
   viewport edge and the fifth was a guess. Nobody compares five prices they
   cannot see at once. Above phone width the track stops being a scroller and
   becomes a grid: five columns on a desktop, three below that. Nothing is
   left to page through there, so the arrows and dots go with it.

   The phone rail under 760px is untouched. Swiping is the right gesture when
   only one card fits, and the half card peeking past the edge says so.
   ========================================================================== */
@media(min-width:761px){
  .track{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
    /* visible, so the card shadows are not clipped flat by the old scroller */
    overflow:visible;scroll-snap-type:none;
    padding:3px 0 6px;
  }
  .panel{flex:none;min-width:0;scroll-snap-align:none}
  #panels .rail{display:none}

  /* The five descriptions run one to three lines. Reserving three for all of
     them lines the prices and the WHAT IS INCLUDED rule up across the row,
     which is the only reason to put the five cards side by side at all. */
  .panel .desc{min-height:4.8em}

  /* Blueprint's 13 markers go in two columns of UNEQUAL width. Equal columns
     are 91px at the five across size and its longest marker,
     Lipids/Cholesterol, wants 99px, so it bled over its neighbour's bullets.
     The grid hands the left column the extra it needs without charging the
     right one more than it uses. Ordinary multicol stays on the phone, where
     the list is one column anyway. */
  .panel ul.two{
    columns:auto;display:grid;grid-template-columns:1.27fr 1fr;gap:0 16px;
  }
}

/* 1248px is where the 1200px shell stops shrinking with the window, which
   makes the five across card exactly 227px at every width above it. Below it
   the shell is narrower, the card drops under 220px and Blueprint's longest
   marker no longer holds one line, so three across is the better answer
   there than five cramped ones. */
@media(min-width:1248px){
  .track{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
}

/* The dense card. Originally keyed to the two widths that render a 225 to
   290px column (five across on a desktop, three across on the narrow end of
   the tablet band), which left the gap between them (941-1247px, three
   across but a wider column) on the full-size card and made it the tallest
   card at any width. Widened to the whole grid range so every grid width
   gets the same compact card and none of them sticks out taller than the
   others. */
@media(min-width:761px){
  .panel .pbody{padding:14px 14px 16px}
  .pshot img{height:96px}
  .pshot-cat{left:12px;bottom:9px;font-size:9.5px;letter-spacing:1.2px}
  .panel .badge{font-size:9px;letter-spacing:.9px;padding:5px 9px;border-radius:0 14px 0 12px}
  .panel h3{font-size:16px;margin-bottom:4px}
  .panel .desc{font-size:11.5px;line-height:1.4;margin-bottom:9px;min-height:4em}
  .panel .amt{font-size:26px}
  .panel .amtnote{font-size:10px;margin:3px 0 9px}
  .panel .amt2{margin:-5px 0 9px;padding-top:8px;font-size:12px}
  .panel .amt2 span{font-size:11.5px}
  .panel .inc{font-size:10px;letter-spacing:1.1px;padding-top:10px;margin-bottom:6px}
  .panel ul{font-size:12px;margin-bottom:10px}
  .panel li{padding:2px 0 2px 14px;line-height:1.4}
  .panel li:before{top:9px;width:7px}
  /* break-word is the backstop: if this copy ever outgrows even the wide
     column, a marker wraps instead of bleeding over its neighbour. */
  .panel ul.two{gap:0 8px}
  .panel ul.two li{font-size:11px;padding-left:11px;overflow-wrap:break-word}
  .panel ul.two li:before{width:6px}
  .panel .cta{padding:13px 8px;font-size:11px;letter-spacing:.9px}
}

/* ==========================================================================
   FUNNEL SECTIONS
   Added so the page persuades rather than just lists. Each one exists because
   of a specific place people were dropping: no reason to trust the price, no
   help choosing between two similar panels, and no way to reach anyone who
   left without buying.
   ========================================================================== */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ------- the band for someone who just heard him on someone's show -------- */
.podband{background:var(--lav);padding:26px 0}
.pod-in{display:flex;align-items:center;gap:22px}
.pod-ico{
  flex:none;width:46px;height:46px;border-radius:999px;background:#fff;color:var(--navy);
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px -4px rgba(11,22,34,.3);
}
.pod-ico .ico{width:22px;height:22px}
.pod-copy{flex:1;min-width:0}
.pod-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--navy);margin-bottom:4px;
}
.podband h2{font-size:clamp(19px,2vw,25px);margin:0 0 3px}
.pod-copy p{color:var(--grey);font-size:14.5px;margin:0;max-width:74ch;line-height:1.6}
.podband .cta{flex:none}

/* --------- proof and trust, sitting beside the prices themselves ---------- */
.panel-proof{display:flex;flex-wrap:wrap;gap:10px 26px;margin:-18px 0 26px}
.pp-item{color:var(--grey);font-size:13.5px}
.pp-item b{font-family:var(--display);font-weight:400;font-size:19px;color:var(--ink);margin-right:5px}
.paystrip{display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:26px}
.ps-item{
  display:inline-flex;align-items:center;gap:8px;background:var(--wash);
  border-radius:999px;padding:9px 17px;font-size:13.5px;color:var(--ink);
}
.ps-item:before{content:'';width:6px;height:6px;border-radius:999px;background:var(--cyan);flex:none}

/* ---------------------------- comparison table --------------------------- */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;border-radius:16px;background:#fff}
.cmp{
  /* separate, not collapse: WebKit ignores position:sticky on cells of a
     border-collapse:collapse table, so scrolling right to reach Thyroid and
     Blueprint carried the marker names off screen and left five columns of
     anonymous ticks. Borders here are bottom-only, so nothing doubles up. */
  border-collapse:separate;border-spacing:0;
  /* overflow:hidden here (it was rounding the corners) made the table its own
     clipping context, which breaks sticky cells against .cmp-wrap. The radius
     moves to the wrapper, which already clips. */
  width:100%;min-width:760px;background:#fff;
}
.cmp th,.cmp td{padding:13px 12px;text-align:center;border-bottom:1px solid var(--hair,#eef2f6)}
.cmp thead th{
  vertical-align:bottom;font-family:var(--display);font-weight:400;font-size:15px;
  color:var(--ink);line-height:1.25;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:#fff;z-index:1;
}
.cmp thead th i{display:block;font-family:var(--sans);font-style:normal;font-size:12.5px;color:var(--navy);font-weight:700;margin-top:5px}
/* the marker name column stays put while the panels scroll sideways */
.cmp .cmp-m{
  text-align:left;font-family:var(--sans);font-size:14px;font-weight:400;color:var(--ink);
  position:sticky;left:0;background:#fff;min-width:210px;z-index:2;
}
.cmp thead .cmp-m{z-index:3;font-weight:700;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:var(--grey)}
.cmp tbody tr:hover .cmp-m,.cmp tbody tr:hover td{background:#fbfdff}
/* the featured panel keeps its emphasis here too */
.cmp .on{background:rgba(23,196,255,.05)}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.tick{display:inline-flex;width:21px;height:21px;align-items:center;justify-content:center;
  border-radius:999px;background:rgba(23,196,255,.14)}
.tick svg{width:12px;height:12px;fill:none;stroke:var(--navy);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}
.dash{color:#c6d2dd}
.cmp-note{color:var(--grey);font-size:13px;margin-top:16px}

/* ------------------------------ sample results --------------------------- */
.smp-box{
  border:1px dashed var(--line);border-radius:18px;padding:40px 36px;background:var(--wash);
  color:var(--grey);font-size:15.5px;line-height:1.75;max-width:78ch;
}

/* --------------------------- the email capture --------------------------- */
.leadmag{background:var(--ink);color:#fff;padding:54px 0}
.lm-in{display:flex;gap:44px;align-items:center;flex-wrap:wrap}
.lm-copy{flex:1 1 380px;min-width:0}
.leadmag .eyebrow{color:var(--cyan);margin-bottom:8px}
.leadmag h2{color:#fff;font-size:clamp(22px,2.4vw,31px);margin:0 0 9px}
.lm-copy p{color:rgba(255,255,255,.66);font-size:15px;margin:0;line-height:1.65;max-width:52ch}
.lm-form{flex:1 1 330px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.lm-form input{
  flex:1 1 210px;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  color:#fff;border-radius:999px;padding:14px 20px;font:inherit;font-size:15px;
}
.lm-form input::placeholder{color:rgba(255,255,255,.42)}
.lm-form input:focus{outline:2px solid var(--cyan);outline-offset:2px;border-color:transparent}
.lm-form input.bad{border-color:#ff8f8f}
.leadmag .cta{flex:none;background:var(--cyan);color:var(--ink)}
.leadmag .cta:hover{background:#fff}
.leadmag .cta[disabled]{opacity:.6;cursor:default}
.lm-fine,.lm-err{flex:1 0 100%;font-size:12.5px;margin:0}
.lm-fine{color:rgba(255,255,255,.44)}
.lm-err{color:#ff9d9d}
.lm-ok{margin:0;color:#fff;font-size:15.5px;line-height:1.6}
.lm-ok b{color:var(--cyan)}

@media(max-width:900px){
  .pod-in{flex-wrap:wrap;gap:16px}
  .podband .cta{width:100%;text-align:center}
}
@media(max-width:760px){
  .podband{padding:22px 0}
  .pod-ico{width:40px;height:40px}
  .panel-proof{gap:8px 18px;margin:-10px 0 20px}
  .pp-item{font-size:12.5px}
  .pp-item b{font-size:17px}
  .paystrip{gap:8px}
  .ps-item{font-size:12.5px;padding:8px 14px}
  .cmp{min-width:620px}
  .cmp .cmp-m{min-width:158px;font-size:13px}
  .cmp th,.cmp td{padding:11px 8px}
  .cmp thead th{font-size:13px}
  .smp-box{padding:26px 22px;font-size:14.5px}
  /* was 40px, every other section on the page settled on 44px top/bottom;
     no reason for this one band to sit 4px off that rhythm */
  .leadmag{padding:44px 0}
  .lm-in{gap:24px}
  .lm-form input,.leadmag .cta{flex:1 0 100%;text-align:center}
}
.cmp-more-btn{
  margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:11px 22px;font-size:13.5px;font-weight:700;color:var(--navy);cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.cmp-more-btn:hover{border-color:var(--cyan);background:var(--wash)}

/* ------------------- consultation booking, after payment ------------------ */
.bookwrap{margin-top:26px;border-top:1px solid var(--line);padding-top:24px}
.bookwrap h4{
  font-family:var(--display);font-weight:400;font-size:21px;color:var(--ink);margin:0 0 6px;
}
.book-note{color:var(--grey);font-size:14px;line-height:1.6;margin:0 0 18px;max-width:58ch}
/* the widget posts its own height; this is only the value before it answers */
.ghl{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.ghl:empty{display:none}

/* A landscape phone is only ~390px tall, and an 80px fixed bar eats a fifth of
   it. At that height the bar covered the "Add to order" buttons at a range of
   scroll positions. Compacted to a single line, and the panels section gets
   enough bottom room that the last row always clears it. */
@media(max-height:520px){
  .cartbar{padding:7px 0}
  .cartbar-in{gap:10px}
  .cart-what span{display:none}
  .cart-what b{font-size:12.5px}
  .cart-amt{font-size:19px}
  .cart-clear{width:26px;height:26px}
  .cartbar .cta{padding:9px 16px;font-size:12px}
  body.has-cart #panels{padding-bottom:104px}
  body.has-cart{padding-bottom:56px}
}
/* any programmatic scroll (anchor jump, keyboard focus) must clear the bar */
body.has-cart .panel{scroll-margin-bottom:96px}

/* ========================= the panel detail sheet ==========================
   The cards on a phone carry the name, the price and one line. Everything
   else lives in here: one panel per screen, swiped left and right.
========================================================================== */

/* the pair of buttons at the foot of a card */
.pacts{margin-top:auto;display:flex;flex-direction:column;gap:9px}
.pmore{
  display:none;width:100%;padding:12px 16px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--ink);
  font-family:var(--sans);font-size:13.5px;font-weight:700;letter-spacing:.3px;
  cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease);
}
.pmore:hover{border-color:var(--cyan);background:var(--wash)}

#peek{
  border:0;padding:0;background:#fff;color:var(--ink);
  width:min(560px,100%);max-width:100%;
  height:min(92vh,860px);max-height:92vh;
  border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(11,22,34,.55);
  /* without this the rail's flex:1 has nothing to divide, the cards grow to
     their content, and the Add button and the dots fall off the bottom */
  display:flex;flex-direction:column;
}
#peek:not([open]){display:none}
#peek::backdrop{background:rgba(11,22,34,.55)}

.peek-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 10px;border-bottom:1px solid var(--hair);
  position:relative;z-index:2;background:#fff;
}
.peek-count{
  font-size:12px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--grey);padding-left:6px;
}
.peek-x{
  /* was 38x38, under the 44px tap-target floor for a control someone on a
     phone has to hit to back out of the sheet */
  width:44px;height:44px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.peek-x:hover{background:var(--wash)}

.peek-rail{
  display:flex;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  flex:1;min-height:0;scrollbar-width:none;
}
.peek-rail::-webkit-scrollbar{display:none}

.peek-card{
  flex:0 0 100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;flex-direction:column;min-height:0;
}
.peek-card .pshot{flex:0 0 auto}
.peek-card .pshot img{height:150px;width:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.peek-body{flex:1;min-height:0;overflow-y:auto;padding:20px 22px 16px;-webkit-overflow-scrolling:touch}
.peek-body h3{font-size:26px;margin-bottom:8px}
.peek-body .desc{color:var(--grey);font-size:14.5px;line-height:1.6;margin-bottom:16px}
.peek-body .amt{font-family:var(--display);font-size:38px;line-height:1;color:var(--ink)}
.peek-body .amtnote{font-size:12px;color:var(--grey);margin-top:6px}
.peek-body .amt2{font-size:13.5px;font-weight:700;color:var(--navy);margin-top:10px}
.peek-body .amt2 span{font-weight:400;color:var(--grey)}
.peek-body .inc{
  font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--grey);margin:20px 0 10px;padding-top:16px;border-top:1px solid var(--hair);
}
.peek-body ul{list-style:none;display:grid;gap:8px;padding:0;margin:0}
.peek-body li{
  position:relative;padding-left:22px;font-size:14.5px;line-height:1.5;color:var(--ink);
}
.peek-body li:before{
  content:'';position:absolute;left:4px;top:8px;width:7px;height:7px;
  border-radius:999px;background:var(--cyan);
}

.peek-foot{
  flex:0 0 auto;padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--hair);background:#fff;position:relative;
}
/* a marker list longer than the sheet was being sliced through the middle of
   a word, which reads as a rendering fault rather than "there is more below" */
.peek-foot:before{
  content:'';position:absolute;left:0;right:0;bottom:100%;height:30px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);
}
.peek-foot .cta{display:block;width:100%;text-align:center}

.peek-dots{
  flex:0 0 auto;display:flex;justify-content:center;gap:8px;
  padding:0 0 12px;background:#fff;
}
.pdot{
  width:8px;height:8px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:var(--line);transition:background .18s var(--ease),width .18s var(--ease);
}
.pdot.on{background:var(--navy);width:22px}

/* ---- phones: the card sheds its marker list, the sheet takes it ---- */
@media(max-width:760px){
  /* dialog{border-radius:0} above is for the order flow, which wants the whole
     screen. This one is a sheet and keeps its corners. */
  #peek{
    width:100%;max-width:100%;
    height:88vh;max-height:88vh;
    border-radius:16px;
  }

  .panel ul{display:none}
  .panel .inc{display:none}
  .pmore{display:block}
  /* the card led the page too tall on a phone: photo strip, type and rhythm
     all pulled in together rather than dropping any information */
  .panel .pshot img{height:100px}
  .panel .pbody{padding:13px 16px 14px}
  .panel h3{font-size:18px;margin-bottom:6px}
  .panel .desc{
    font-size:13px;line-height:1.4;margin-bottom:8px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .panel .amt{font-size:25px}
  .panel .amtnote{font-size:11px;margin:3px 0 9px}
  .pacts{gap:6px}
  /* the card's own cta, not .peek-foot .cta: the sheet keeps its full size */
  .panel .cta{padding:13px 24px}
  .peek-body h3{font-size:23px}
}

/* the review carousel and the years caption, lifted out of the hero so the
   panels could sit where the CTA was. Tighter than a normal section: it is
   supporting proof between two blocks of offer, not a section in its own
   right. */
.heroproof-band{padding:34px 0}
.heroproof-band .hero-proof{margin-top:0}
.heroproof-band .chip-rate{margin:16px auto 0;text-align:center}
@media(max-width:760px){ .heroproof-band{padding:26px 0} }

/* ---------------- the at-home kit callout, above the panels --------------
   Dr. Habib asked for the kit to be explicit rather than implied. Sits above
   the first panel so nobody reads the page assuming they are booking a visit.
------------------------------------------------------------------------- */
.kitbar{background:var(--navy);color:#fff;padding:11px 0}
.kitbar .shell{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:6px 9px;text-align:center;
}
.kb-lead{font-weight:700;font-size:13.5px;letter-spacing:.2px}
.kb-body{font-size:13.5px;color:rgba(255,255,255,.88)}
@media(max-width:760px){
  .kitbar{padding:10px 0}
  .kb-lead,.kb-body{font-size:12.5px}
}

/* ------------- proof row and condition chips, readable whole ------------
   Both used to be swipeable rails on a phone, which showed one item and hid
   the rest behind a gesture nothing advertised. The client asked for them
   smaller and fully on screen instead.
------------------------------------------------------------------------ */
@media(max-width:760px){
  /* three figures, three columns, tighter type: the whole row fits */
  #stats.stats{
    display:grid !important;grid-template-columns:repeat(3,1fr);
    gap:10px;overflow:visible !important;padding:2px 0 30px;margin:0;
  }
  #stats .v{font-size:19px;padding-top:9px;letter-spacing:-.3px}
  #stats .k{font-size:10.5px;line-height:1.3;margin-top:3px}

  /* every condition visible, wrapped, no gesture required */
  #condGrid.chipgrid{
    display:flex !important;flex-wrap:wrap;justify-content:center;
    gap:7px;overflow:visible !important;margin:0;padding:0;
  }
  #condGrid .chip-item{
    flex:0 1 auto;padding:8px 13px;font-size:12.5px;white-space:normal;
  }

  /* the services list the same way: stacked and whole, not a rail */
  #svcGrid.svcrail{
    display:grid !important;grid-template-columns:1fr;gap:9px;
    overflow:visible !important;margin:0;padding:0;
  }
  #svcGrid > *{flex:none !important;width:auto !important;min-width:0}
}