/* Paradigm Wellness — NHC storefront · built on the "Meridian" system (matches Paradigm Health) */
@import url('fonts/hanken.css');

:root{
  /* KIOSK-MATCHED TOKENS (2026-07-26 rebrand). Same palette + typography as
     apps/calanthe/current/src/patient-ui/design.jsx and src/kiosk-ui/App.jsx so
     the customer touches one design across every surface. */
  --bg:#faf9fc;            /* paper */
  --surface:#ffffff;       /* card */
  --ink:#1b1f27;           /* ink */
  --ink-soft:#4a5163;      /* dim */
  --purple:#5f54b8;        /* lavDeep — primary accent for links + strong text */
  --purple-deep:#1b1f27;   /* dark blocks now use ink (kiosk uses ink for dark surfaces) */
  --lavender:#8b80d9;      /* lav — the brand mid-tone */
  --lilac:#efecfb;         /* lavPale — pale section wash */
  --sage:#eaf4ee;          /* very-soft good-tinted wash to replace the mint sage */
  --peach:#fdf1ea;         /* coralPale */
  --line:rgba(27,31,39,.09);
  /* Action / "good" — kiosk green. Replaces the neon-teal that was the old wordmark accent. */
  --neon:#2f9e6b;
  --neon-bright:#3fb47d;
  --neon-deep:#218253;
  /* Brand pops still used by category chips: coral + coralDeep + lav pieces. Kept the same names
     for backward compat with existing inline styles that reference them. */
  --c-peach:#f2b79c; --c-magenta:#e08a5c; --c-teal:#5f54b8; --c-periwinkle:#8b80d9;
  /* Kiosk-matched extras */
  --coral:#f2b79c; --coralDeep:#e08a5c; --coralPale:#fdf1ea;
  --lav:#8b80d9; --lavDeep:#5f54b8; --lavPale:#efecfb;
  --good:#2f9e6b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Hanken Grotesk',sans-serif;font-weight:600;line-height:1.05;letter-spacing:-0.025em;color:var(--ink);margin:0}
h1{font-size:clamp(38px,5.6vw,64px)} h2{font-size:clamp(28px,3.4vw,42px)} h3{font-size:20px;letter-spacing:-0.015em} h4{font-size:16px;letter-spacing:-0.01em}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--purple)}
.lead{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--ink-soft);max-width:58ch}
.muted{color:var(--ink-soft)}
.center{text-align:center;max-width:760px;margin:0 auto 48px}
.center .lead{margin:14px auto 0}
/* Buttons re-tuned to the kiosk voice: btn-primary = ink bg + white text (the confident
   kiosk CTA), btn-ghost = outlined lavender text, btn-neon = lavender bg + dark ink
   text (the warm accent CTA, matches the kiosk cart bar / bigBtn primary). */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:14px 26px;border-radius:14px;border:1px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#000}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{background:var(--surface)}
.btn-neon{background:var(--lav);color:#14121f;font-weight:800;box-shadow:0 8px 22px -6px rgba(139,128,217,.35)}
.btn-neon:hover{background:var(--lavDeep);color:#fff;box-shadow:0 12px 26px -6px rgba(95,84,184,.45)}

/* ===== Brand logo (image) ===== */
.logo-link{display:inline-flex;align-items:center;margin-right:auto}
.logo-img{height:34px;width:auto;display:block}
@media(max-width:600px){.logo-img{height:28px}}

/* ===== Brand wordmark (CSS fallback): "Paradigm" black + petrol line through the P · "Wellness" neon ===== */
.brand{font-weight:700;font-size:21px;letter-spacing:-0.02em;color:var(--ink);display:inline-block;line-height:1;white-space:nowrap}
.brand .p-mark{position:relative;color:var(--ink)}
.brand .p-mark::after{content:"";position:absolute;left:-2px;right:-1px;top:54%;height:3px;border-radius:2px;background:var(--purple);transform:translateY(-50%)}
.brand .w{color:var(--neon);text-shadow:0 0 11px rgba(26,167,181,.55),0 0 2px rgba(26,167,181,.5);font-weight:700}
.brand.lg{font-size:46px}
.brand.lg .p-mark::after{height:5px;top:55%}
.brand.inv{color:#fff}.brand.inv .p-mark{color:#fff}
.brand.inv .p-mark::after{background:var(--neon)}

/* header */
header{position:sticky;top:0;z-index:50;background:rgba(252,250,254,.86);backdrop-filter:saturate(1.3) blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:22px;height:74px}
.nav .brand{margin-right:auto}
.navlinks{display:flex;gap:20px;align-items:center}
.navlinks a{font-size:14px;color:var(--ink-soft);font-weight:500}
.navlinks a:hover,.navlinks a.active{color:var(--purple)}
@media(max-width:980px){.navlinks{display:none}}

/* sections */
section{padding:84px 0}
.sec-lilac{background:var(--lilac)} .sec-sage{background:var(--sage)} .sec-white{background:var(--surface)}
.sec-dark{background:var(--purple-deep);color:#fff}
.sec-dark h2,.sec-dark h3{color:#fff}.sec-dark .lead,.sec-dark p{color:#c9c4dc}.sec-dark .eyebrow{color:var(--lav)}
.sec-dark .btn-neon{background:var(--lav);color:#14121f}
.sec-dark .btn-neon:hover{background:#a89ee5;color:#14121f}
.sec-dark .card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);box-shadow:none}
.sec-dark .card h3{color:#fff}.sec-dark .card p{color:#c9c4dc}
.sec-dark .card .ic{background:rgba(139,128,217,.20);color:#c9bdff}

/* hero */
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr;gap:32px}}
.hero-art{position:relative;border-radius:18px;overflow:hidden;min-height:460px;border:1px solid var(--line);
  background-color:#ECF1EF;
  background-image:linear-gradient(#e0e8e5 1px,transparent 1px),linear-gradient(90deg,#e0e8e5 1px,transparent 1px);
  background-size:42px 42px}
.hero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.hero-art .glow{position:absolute;z-index:2;inset:auto -40px -40px auto;width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle,rgba(26,167,181,.5),transparent 65%);filter:blur(8px);pointer-events:none}
.hero-art.dark{background:#0d0a12;border-color:#241b2c}
.hero-art.dark .glow{background:radial-gradient(circle,rgba(214,92,196,.45),transparent 65%)}
/* Hero panel — matches the kiosk placeholder wash (coralPale → lavPale → lav-tinted). */
.hero-art.soft{background:linear-gradient(135deg,#fdf1ea 0%,#efecfb 50%,#dcd5f6 100%)}
.hero-art.soft .glow{background:radial-gradient(circle,rgba(242,183,156,.45),transparent 65%)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.trust{display:flex;gap:30px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.trust span{font-size:13.5px;color:var(--ink-soft);font-weight:500}.trust b{color:var(--purple);font-weight:600}
.partner{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--purple);
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px}
.partner .nhc{color:var(--lavDeep);font-weight:700}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cards.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.cards{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.cards,.cards.two{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 4px 18px rgba(27,31,39,.06);transition:box-shadow .18s ease,transform .18s ease}
.card:hover{box-shadow:0 8px 26px rgba(27,31,39,.10);transform:translateY(-1px)}
.card .ic{width:44px;height:44px;border-radius:12px;background:var(--lilac);color:var(--lavDeep);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;font-weight:600}
.card h3{margin-bottom:7px}.card p{font-size:14.5px;color:var(--ink-soft);margin:0;line-height:1.55}
.sec-dark .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.sec-dark .card .ic{background:rgba(26,167,181,.13);color:var(--neon)}
.sec-dark .card p{color:#bcd0cb}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{counter-increment:s;padding-top:14px;border-top:2px solid var(--neon)}
.step .n{font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--purple)}
.step .n::before{content:"0" counter(s)" / "}
.step h3{margin:8px 0 6px}.step p{font-size:14.5px;color:var(--ink-soft);margin:0}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:30px}}
.flist{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:11px}
.flist li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--ink-soft)}
.flist li::before{content:"";width:8px;height:8px;margin-top:7px;flex-shrink:0;background:var(--lav);border-radius:2px;transform:rotate(45deg);box-shadow:0 0 8px rgba(139,128,217,.55)}
.sec-dark .flist li{color:#c9c4dc}

/* ===== Bundle builder ===== */
.builder{display:grid;grid-template-columns:1.5fr .9fr;gap:26px;align-items:start}
@media(max-width:900px){.builder{grid-template-columns:1fr}}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}
.svc{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:18px 18px 16px;cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .12s}
.svc:hover{transform:translateY(-2px);box-shadow:0 10px 26px -16px rgba(27,31,39,.24)}
.svc.on{border-color:var(--lav);box-shadow:0 0 0 1px var(--lav),0 10px 30px -14px rgba(139,128,217,.45)}
.svc .tick{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;border:1.5px solid #d8cfe6;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;background:transparent;transition:.15s}
.svc.on .tick{background:var(--neon);border-color:var(--neon);color:#053038}
.svc .nm{font-weight:600;font-size:16px;color:var(--ink);padding-right:30px}
.svc .ds{font-size:13px;color:var(--ink-soft);margin:5px 0 11px;line-height:1.5}
.svc .pr{font-size:15px;font-weight:700;color:var(--ink)}.svc .pr small{font-weight:500;color:var(--ink-soft);font-size:12.5px}
.svc .pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--lavDeep);background:rgba(139,128,217,.14);border-radius:999px;padding:2px 9px;margin-bottom:9px}

/* Bundle-builder summary card — dark ink surface with lav-tinted text, matching the kiosk's
   ink-primary CTA voice. Green "good" for savings. */
.summary{position:sticky;top:92px;background:var(--ink);color:#fff;border-radius:18px;padding:24px 22px;border:1px solid rgba(139,128,217,.28)}
.summary h3{color:#fff;font-size:18px;margin-bottom:4px}
.summary .sub{font-size:12.5px;color:#c9c4dc;margin-bottom:16px}
.sum-lines{list-style:none;margin:0 0 12px;padding:0 0 12px;border-bottom:1px dashed rgba(255,255,255,.18);min-height:30px}
.sum-lines li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;color:#e0dced;padding:5px 0}
.sum-lines li span:last-child{color:#fff;font-weight:600;white-space:nowrap}
.sum-empty{font-size:13px;color:#c9c4dc;font-style:italic;padding:6px 0}
.sum-row{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:#c9c4dc;margin:4px 0}
.sum-row.save{color:#7ce0a7;font-weight:700}
.sum-row.total{margin-top:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.18);font-size:15px;color:#fff}
.sum-row.total .big{font-size:30px;font-weight:700;letter-spacing:-.02em;color:#fff}
.save-badge{display:block;text-align:center;background:var(--lav);color:#14121f;font-weight:800;font-size:13px;border-radius:10px;padding:10px;margin:14px 0 12px;box-shadow:0 8px 22px -6px rgba(139,128,217,.5)}
.save-badge.hide{display:none}
.summary .btn{width:100%;justify-content:center;margin-top:4px}
.summary .fine{font-size:11px;color:#a8a3bc;text-align:center;margin:11px 0 0;line-height:1.5}
.tiers{display:flex;justify-content:center;gap:7px;margin-top:14px;flex-wrap:wrap}
.tiers b{font-size:10.5px;font-weight:600;letter-spacing:.03em;color:#c9c4dc;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:3px 9px}
.tiers b.act{color:#14121f;background:var(--lav);border-color:var(--lav)}

/* plans / programs */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.plans{grid-template-columns:1fr}}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;display:flex;flex-direction:column;position:relative}
.plan.featured{border:2px solid var(--lav);box-shadow:0 0 0 1px var(--lav),0 18px 40px -22px rgba(139,128,217,.55)}
.plan .tag{position:absolute;top:-11px;left:26px;background:var(--lav);color:#14121f;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 12px;border-radius:6px}
.plan h3{font-size:21px}.plan .price{font-size:15px;color:var(--ink);font-weight:700;margin:6px 0 14px}
.plan .price small{color:var(--ink-soft);font-weight:500;font-size:13px}
.plan .flist{margin:0 0 18px}.plan .flist li{font-size:13.5px}
.plan .btn{margin-top:auto;justify-content:center;width:100%}

/* contact */
.contact{background:var(--purple-deep);color:#fff;border-radius:20px;padding:50px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:820px){.contact{grid-template-columns:1fr;padding:34px}}
.contact h2{color:#fff}.contact .lead{color:#c9c4dc}
.contact .eyebrow{color:var(--lav)}
.formcard{background:#fff;border-radius:14px;padding:22px}
.formcard .ph{display:flex;align-items:center;justify-content:center;text-align:center;min-height:240px;border:1px dashed rgba(139,128,217,.35);border-radius:10px;color:var(--lavDeep);font-size:13px;padding:14px;line-height:1.5}

/* footer */
footer{padding:46px 0;border-top:1px solid var(--line);color:var(--ink-soft);font-size:14px}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot a{color:var(--ink-soft);font-weight:500}.foot a:hover{color:var(--lavDeep)}

/* ===== lab packages ===== */
.lab-callout{background:var(--lilac);border:1px solid rgba(139,128,217,.28);border-radius:12px;padding:13px 18px;font-size:14px;color:var(--ink);margin:0 auto 26px;max-width:920px;text-align:center;line-height:1.65}
.lab-callout b{color:var(--lavDeep)} .lab-callout .fee{color:var(--coralDeep)}
.lab-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:820px){.lab-grid{grid-template-columns:1fr}}
.lab-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;display:flex;flex-direction:column;box-shadow:0 4px 18px rgba(27,31,39,.06);transition:transform .15s,box-shadow .15s,border-color .15s}
.lab-card:hover{transform:translateY(-3px);border-color:rgba(139,128,217,.35);box-shadow:0 16px 38px -20px rgba(27,31,39,.20)}
.lab-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.lab-top h3{font-size:19px;color:var(--ink)}
.lab-alc{font-size:19px;font-weight:800;color:var(--ink);white-space:nowrap}
.lab-why{font-size:13.5px;color:var(--ink-soft);font-weight:600;margin:5px 0 13px;line-height:1.55}
.lab-tests{list-style:none;padding:0;margin:0 0 15px;columns:2;column-gap:20px;font-size:12px;color:var(--ink-soft)}
@media(max-width:480px){.lab-tests{columns:1}}
.lab-tests li{padding:2px 0 2px 13px;break-inside:avoid;position:relative;line-height:1.4}
.lab-tests li::before{content:"";position:absolute;left:1px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--lav)}
.lab-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:13px;border-top:1px solid var(--line);flex-wrap:wrap}
.lab-mem{font-size:13px;color:var(--ink-soft)}
.lab-mem b{font-size:18px;color:var(--neon-deep);font-weight:800;margin-right:3px}
.lab-fee{font-size:11.5px;color:var(--ink-soft)}

/* ===== medical programs gallery ===== */
.proggrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:700px){.proggrid{grid-template-columns:1fr}}
.progcard{border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--surface);transition:transform .15s,box-shadow .15s}
.progcard:hover{transform:translateY(-3px);box-shadow:0 16px 36px -18px rgba(94,62,119,.45)}
.progcard img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
.progcard .pc-body{padding:14px 17px}
.progcard h3{font-size:17px;margin-bottom:3px}
.progcard p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.5}

/* ===== IV infusions (matches the printed IV menu: dark navy + violet neon) ===== */
.iv{position:relative;background:#1A172B;color:#EDEAF7;overflow:hidden}
.iv::before{content:"";position:absolute;top:-120px;right:-80px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(133,123,220,.28),transparent 65%);pointer-events:none}
.iv .wrap{position:relative;z-index:1}
.iv .eyebrow{color:#A49EDA}
.iv h2{color:#fff} .iv .lead{color:#C7C0E0}
.iv-hero{display:grid;grid-template-columns:1.45fr .8fr;gap:34px;align-items:center;margin-bottom:36px}
@media(max-width:760px){.iv-hero{grid-template-columns:1fr;text-align:center;gap:14px}}
.iv-hero-txt h2{margin:8px 0 0} .iv-hero-txt .lead{margin-top:12px}
.iv-hero-txt .iv-tiernote{text-align:left;margin:16px 0 20px;max-width:none}
@media(max-width:760px){.iv-hero-txt .iv-tiernote{text-align:center}}
.iv-hero-img{display:flex;justify-content:center}
.iv-hero-img img{max-height:430px;width:auto;
  filter:drop-shadow(0 0 38px rgba(133,123,220,.55));
  -webkit-mask-image:radial-gradient(ellipse 72% 82% at 50% 50%,#000 58%,transparent 93%);
          mask-image:radial-gradient(ellipse 72% 82% at 50% 50%,#000 58%,transparent 93%)}
@media(max-width:760px){.iv-hero-img img{max-height:300px}}
.iv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.iv-grid{grid-template-columns:1fr}}
.iv-card{position:relative;background:#221E3C;border:1px solid #322B52;border-radius:14px;padding:18px 20px 16px 22px;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.iv-card:hover{transform:translateY(-3px);border-color:#857BDC;box-shadow:0 16px 42px -18px rgba(133,123,220,.6)}
.iv-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#857BDC,#A49EDA)}
.iv-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.iv-top h3{color:#fff;font-size:18px;letter-spacing:.2px;text-transform:uppercase}
.iv-price{color:#fff;font-weight:800;font-size:18px;white-space:nowrap}
.iv-desc{color:#B3AAD0;font-size:13.5px;margin:6px 0 12px;line-height:1.5}
.iv-mem{display:flex;justify-content:space-between;font-size:12.5px;color:#9C90CF;padding:4px 0;border-top:1px solid rgba(133,123,220,.16)}
.iv-mem b{color:#CBC0F0;font-weight:600}
.iv-tiernote{color:#9C90CF;font-size:12.5px;text-align:center;margin:0 auto 22px;max-width:60ch}
.iv-tiernote b{color:#C7C0E0}
.iv-addons{margin-top:18px;background:#221E3C;border:1px solid #322B52;border-radius:14px;padding:18px 22px}
.iv-addhead{color:#A49EDA;font-weight:700;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
.iv-addgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 30px}
@media(max-width:640px){.iv-addgrid{grid-template-columns:1fr}}
.iv-add{display:flex;align-items:baseline;gap:9px;font-size:13.5px;color:#C7C0E0;border-bottom:1px solid rgba(133,123,220,.12);padding:7px 0}
.iv-add b{color:#fff;font-weight:700;white-space:nowrap}
.iv-add span{margin-left:auto;color:#A49EDA;font-weight:700;white-space:nowrap}
.iv-cta{text-align:center;margin-top:24px}

/* ===== registration form ===== */
.seg{display:flex;gap:6px;background:#eef2f0;border-radius:12px;padding:5px;margin-bottom:18px}
.seg-b{flex:1;border:0;background:transparent;font-family:inherit;font-weight:600;font-size:13.5px;color:var(--ink-soft);padding:9px 8px;border-radius:8px;cursor:pointer;transition:.15s}
.seg-b.on{background:#fff;color:var(--purple);box-shadow:0 1px 4px rgba(94,62,119,.12)}
.field{display:block;margin-bottom:13px}
.field span{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:5px}
.field span i{color:var(--neon-deep);font-style:normal}
.field input{width:100%;font-family:inherit;font-size:15px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:11px 13px;transition:border-color .15s,box-shadow .15s}
.field input:focus{outline:none;border-color:var(--neon);box-shadow:0 0 0 3px rgba(26,167,181,.18)}
.field input.bad{border-color:#e0564e;box-shadow:0 0 0 3px rgba(224,86,78,.14)}
#regSubmit{width:100%;justify-content:center;margin-top:6px}
.formnote{font-size:12px;color:var(--ink-soft);text-align:center;margin:11px 0 0;line-height:1.5;min-height:1px}
.formnote.err{color:#c0463e;font-weight:600}
.le-note{font-size:12.5px;color:var(--purple);background:rgba(26,167,181,.1);border:1px solid rgba(26,167,181,.4);border-radius:9px;padding:9px 12px;margin:0 0 13px;line-height:1.5}
.regdone{text-align:center;padding:14px 6px}
.regdone .big{font-size:40px;line-height:1}
.regdone h3{margin:12px 0 6px}
.regdone p{font-size:14px;color:var(--ink-soft);margin:0 auto;max-width:34ch}
.regdone ul{list-style:none;padding:0;margin:14px auto 0;max-width:30ch;text-align:left;display:grid;gap:7px}
.regdone ul li{font-size:13px;color:var(--ink-soft);display:flex;gap:9px}
.regdone ul li::before{content:"✓";color:var(--neon-deep);font-weight:800}

/* demo note */
.note{background:#fbf7ed;border-bottom:1px solid #ecdcb6;color:#6f5a23;font-size:13px;padding:9px 16px;text-align:center}

/* ─────────────────────────────────────────────────────────────────────────────
   MARKETING REBUILD — 2026-09-13, from the 13-person FG.
   Brightens WITHIN the kiosk-matched palette. The July rebrand deliberately
   aligned this site with the kiosk and the patient app so a customer meets one
   design everywhere; --neon (kiosk green) is already the action colour, so this
   promotes it rather than inventing a new one.
   ───────────────────────────────────────────────────────────────────────────── */

/* Contrast fix. Body-dim on lilac was ~4.9:1 — a panellist with reading glasses
   simply gave up on the small print under the prices. This is 8.6:1. */
:root{ --ink-dim:#3a3350; --brand-wash:linear-gradient(135deg,#fdf1ea 0%,#efecfb 55%,#eaf4ee 100%); }
.fine, .small-print{ color:var(--ink-dim) }

/* ── The offer band: the one piece of real scarcity we have ─────────────────── */
.offerband{background:linear-gradient(100deg,#5f54b8 0%,#8b80d9 52%,#2f9e6b 130%);color:#fff;
  border-radius:16px;padding:16px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  box-shadow:0 14px 34px -14px rgba(95,84,184,.55)}
.offerband .ob-main{font-weight:800;font-size:16.5px;letter-spacing:-.01em;flex:1 1 320px}
.offerband .ob-sub{font-size:13.5px;opacity:.93;flex:1 1 260px}
.offerband .ob-count{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);
  border-radius:99px;padding:5px 13px;font-weight:800;font-size:13px;white-space:nowrap}
@media(max-width:640px){.offerband{padding:14px 16px}.offerband .ob-main{font-size:15px}}

/* ── Brand lockup: the wordmark treated as a hero element, not a favicon ────── */
.brandmark{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:22px}
.brandmark img{width:min(430px,78vw);height:auto;display:block}
.brandmark .tag{font-size:12.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--purple);display:flex;gap:12px;flex-wrap:wrap}
.brandmark .tag span::after{content:"·";margin-left:12px;opacity:.4}
.brandmark .tag span:last-child::after{content:""}
.logo-img{height:40px}
@media(max-width:640px){.logo-img{height:30px}.brandmark img{width:min(300px,80vw)}}

/* ── Action affordances on every price ─────────────────────────────────────── */
.btn-act{background:var(--neon);color:#fff;font-weight:800;
  box-shadow:0 8px 20px -8px rgba(47,158,107,.6)}
.btn-act:hover{background:var(--neon-deep);color:#fff}
.btn-sm{padding:9px 16px;font-size:13.5px;border-radius:10px}
.card-act{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:11px}
.memberprice{background:var(--lilac);color:var(--purple);font-weight:800;font-size:12.5px;
  border-radius:99px;padding:5px 11px;white-space:nowrap}

/* ── Visit us ──────────────────────────────────────────────────────────────── */
.visit{display:grid;grid-template-columns:1.05fr 1fr;gap:26px;align-items:center}
.visit-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:24px;
  box-shadow:0 18px 44px -30px rgba(27,31,39,.4)}
.visit-land{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0 0 4px}
.visit-addr{color:var(--ink-dim);font-size:15px;line-height:1.7}
.visit-map{border-radius:18px;overflow:hidden;border:1px solid var(--line);min-height:270px;
  background:var(--brand-wash);display:block;width:100%}
.visit-map iframe{display:block;width:100%;height:300px;border:0}
@media(max-width:880px){.visit{grid-template-columns:1fr}.visit-map iframe{height:230px}}

/* ── Credentials strip ─────────────────────────────────────────────────────── */
.creds{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.cred{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px}
.cred b{display:block;font-size:13.5px;margin-bottom:3px}
.cred span{font-size:13px;color:var(--ink-dim)}
@media(max-width:880px){.creds{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.creds{grid-template-columns:1fr}}

/* ── Account callout ───────────────────────────────────────────────────────── */
.acct{background:var(--brand-wash);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.acct h3{margin:0 0 6px;font-size:18px}
.acct p{margin:0;color:var(--ink-dim);font-size:14.5px}

/* The offer band's own CTA. Must not use --neon: the band's gradient ends in --neon, so a
   green button on it measured 1.0:1 — literally invisible at the right-hand end. */
.offerband .btn-act{background:#fff;color:var(--purple);box-shadow:0 6px 18px -6px rgba(0,0,0,.35)}
.offerband .btn-act:hover{background:#fff;color:var(--neon-deep);transform:translateY(-1px)}

/* Hero art: was an empty gradient panel — a dead screenful on a phone, and the FG's
   second-most-common complaint. Now carries real photography. */
.hero-art.soft{background:var(--brand-wash);overflow:hidden;position:relative;min-height:300px}
.hero-art.soft img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}

/* ── Mobile navigation ─────────────────────────────────────────────────────────
   The nav was display:none below 980px with nothing replacing it, so a phone
   visitor had no navigation at all — only the logo and Join. Measured, not
   guessed: computed display was "none" at 375px.
   A scrolling row rather than a hamburger: six short links, always visible, no
   JavaScript, and nothing to discover behind an icon. */
@media(max-width:980px){
  .navlinks{display:flex;order:3;flex:1 0 100%;gap:18px;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:2px 0 10px;margin-top:2px;border-top:1px solid var(--line)}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{white-space:nowrap;font-size:14.5px;padding:8px 0}
  .nav{flex-wrap:wrap;height:auto;padding-top:12px;row-gap:2px}
}

/* The brand lockup was 300px on a 375px screen — 80% of the width, pushing the
   headline and the offer off the first screenful. */
@media(max-width:640px){ .brandmark img{width:min(228px,62vw)} }
@media(max-width:400px){ .brandmark img{width:min(200px,58vw)} }

/* ─────────────────────────────────────────────────────────────────────────────
   BRIGHTEN — 2026-09-13. David: no dark sections, and do not show the logo twice.
   Three areas were near-black (#1b1f27 / #1A172B): the clinician block, the IV
   menu and the sign-up block. Each had a family of child rules assuming white
   text on dark, so those are flipped here rather than edited in place.
   ───────────────────────────────────────────────────────────────────────────── */
.sec-dark{background:linear-gradient(135deg,#fdf1ea 0%,#efecfb 60%,#eaf4ee 100%);color:var(--ink)}
.sec-dark h2,.sec-dark h3{color:var(--ink)}
.sec-dark .lead,.sec-dark p{color:var(--ink-dim)}
.sec-dark .eyebrow{color:var(--purple)}
.sec-dark .card{background:#fff;border-color:var(--line);box-shadow:0 12px 30px -24px rgba(27,31,39,.5)}
.sec-dark .card h3{color:var(--ink)} .sec-dark .card p{color:var(--ink-dim)}
.sec-dark .card .ic{background:var(--lilac);color:var(--purple)}
.sec-dark .flist li{color:var(--ink-dim)}
.sec-dark .btn-neon{background:var(--neon);color:#fff}
.sec-dark .btn-neon:hover{background:var(--neon-deep);color:#fff}

.iv{background:#fff;color:var(--ink)}
.iv h2,.iv h3{color:var(--ink)}
.iv .lead,.iv p,.iv .iv-desc{color:var(--ink-dim)}
.iv .eyebrow{color:var(--purple)}
.iv .iv-card{background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px -26px rgba(27,31,39,.45)}
.iv .iv-price{color:var(--purple)}
.iv .iv-mem{color:var(--dim,#6b7080)}
.iv .iv-addons{background:var(--lilac);border:1px solid var(--line)}
.iv .iv-addhead{color:var(--ink)}
.iv .iv-add{background:#fff;border:1px solid var(--line);color:var(--ink)}
.iv .iv-add span{color:var(--purple)}
.iv .iv-tiernote{color:var(--purple)}

.contact{background:linear-gradient(135deg,#fdf1ea 0%,#efecfb 62%,#eaf4ee 100%);color:var(--ink);
  border:1px solid var(--line)}
.contact h2{color:var(--ink)} .contact .lead,.contact p{color:var(--ink-dim)}
.contact .eyebrow{color:var(--purple)}
.contact b{color:var(--ink)}
.contact .formcard{background:#fff;border:1px solid var(--line)}

/* One logo, in the header, at a size that reads as the brand. */
.logo-img{height:54px}
@media(max-width:640px){.logo-img{height:38px}}
.nav{gap:26px}

/* Memberships are the first thing after the headline now, so the cards carry
   more weight than a mid-page block would. */
#packages .plan{box-shadow:0 18px 44px -30px rgba(27,31,39,.42)}

/* The booster panels are reused in the Premium section, which is not inside .iv,
   so the scoped override above never reached them. Brighten them everywhere. */
.iv-addons{background:var(--lilac);border:1px solid var(--line)}
.iv-addhead{color:var(--ink)}
.iv-add{background:#fff;border:1px solid var(--line);color:var(--ink)}
.iv-add span{color:var(--purple)}

/* ─────────────────────────────────────────────────────────────────────────────
   FULL-BLEED HERO — 2026-09-13.
   Drop a photograph at images/hero.jpg and it appears here. Until then the brand
   wash shows, so the page never looks broken while waiting for the asset.
   The scrim is WHITE, not black: the brief is bright, and a dark overlay is the
   usual way a bright site quietly becomes a dark one. It guarantees the text
   stays readable whatever the photograph turns out to be.
   ───────────────────────────────────────────────────────────────────────────── */
.hero-full{
  position:relative; isolation:isolate; padding:0; margin:0;
  background-image:url("images/hero.jpg"), var(--brand-wash);
  background-size:cover; background-position:center 30%; background-repeat:no-repeat;
}
.hero-full::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,
    rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 34%,
    rgba(255,255,255,.72) 54%, rgba(255,255,255,.30) 72%, rgba(255,255,255,.10) 100%);
}
/* PHONE: show the whole photograph, don't crop a slice of it.
   A tall screen filled by a wide photo can only show about a quarter of its
   width, and that quarter gets blown up ~3x — which is what made the source
   resolution look like the problem. It wasn't, really: the crop was.
   Sitting the full 16:9 image in a band across the top asks for 390px of width
   from a 1376px file, so there is no upscaling at all and it stays sharp.
   The text then sits on plain white underneath, where it needs no veil. */
@media(max-width:880px){
  .hero-full{
    background-size:100% auto;
    background-position:top center;
    background-repeat:no-repeat;
    display:flow-root;   /* or hero-inner's top margin collapses out of the
                            section and pushes the whole hero down, leaving the
                            band showing page background instead of the photo */
  }
  .hero-full::before{background:none}
  .hero-full .hero-inner{
    position:relative;
    margin-top:55.8vw;              /* 768/1376 — the image's own aspect ratio */
    background:#fff;
    border-radius:20px 20px 0 0;
    padding-top:26px;
  }
}
.hero-full .hero-inner{padding-top:54px;padding-bottom:64px;max-width:660px}
.hero-full h1{margin:0 0 6px}
@media(max-width:880px){.hero-full .hero-inner{padding-top:32px;padding-bottom:40px;max-width:none}}

/* ── The last of the dark-theme text ───────────────────────────────────────────
   Brightening the backgrounds left several text rules still coloured for a
   near-black surface. Measured, not guessed: a proper WCAG pass found 47 failures,
   six of them at a contrast ratio of exactly 1.0 — text the same colour as the
   background it sat on. The booster names were literally invisible. */
.iv-add b{color:var(--ink)}
.iv-add{color:var(--ink-dim)}
.iv-add span{color:var(--purple)}
.iv-addhead{color:var(--purple)}
.iv-desc{color:var(--ink-dim)}
.iv-mem{color:var(--ink-dim);border-top-color:var(--line)}
.iv-mem b{color:var(--ink)}
.iv-tiernote{color:var(--ink-dim)} .iv-tiernote b{color:var(--purple)}
.iv-top h3{color:var(--ink)} .iv-price{color:var(--purple)}
.iv h2{color:var(--ink)} .iv .lead{color:var(--ink-dim)}
.sec-dark .card p, .sec-dark .flist li, .sec-dark .lead, .sec-dark p{color:var(--ink-dim)}
.sec-dark h2, .sec-dark h3, .sec-dark .card h3{color:var(--ink)}
.sec-dark .card .ic{background:var(--lilac);color:var(--purple)}
.sec-dark .eyebrow{color:var(--purple)}
.contact h2{color:var(--ink)} .contact .lead{color:var(--ink-dim)}

/* The credentials row sits at the bottom of the hero, where the veil is thinnest
   and the vials are busiest, so it gets its own soft plate to stay readable.
   Desktop ONLY — on a phone the row is already on plain white, where a plate is
   just a stray box. Scoped with min-width rather than reset inside the mobile
   block: both selectors have the same specificity, so a reset placed above this
   rule would lose on source order and the plate would show up on phones anyway. */
@media(min-width:881px){
  .hero-full .trust{
    background:rgba(255,255,255,.82); backdrop-filter:blur(2px);
    border-radius:12px; padding:10px 14px; margin-left:-14px;
    display:inline-flex; flex-wrap:wrap; gap:18px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   WIDE SCREENS — reclaim the dead gutter. Measured at 1980px: the hero text was
   a 660px column with margin:auto, so it floated in the MIDDLE of the viewport
   with 660px of empty cream to its left and another 660px to its right. Two
   thirds of the screen did nothing, and the text sat nowhere near the left
   margin every other section on the page uses.
   The 660px limit belongs on the TEXT LINES, not on the block. Give the block
   the site's normal 1180px wrap so it starts where the rest of the page starts,
   and cap the children instead.
   Placed at the end of the file deliberately: .hero-full .hero-inner is set
   earlier with identical specificity, so anything above it would lose on source
   order — the same trap as the trust plate.
   ───────────────────────────────────────────────────────────────────────────── */
@media(min-width:881px){
  .hero-full .hero-inner{max-width:1180px;padding-top:46px;padding-bottom:52px}
  .hero-full .hero-inner > *{max-width:660px}
  /* The credentials row is three short items; at 660px it broke onto two lines
     and the plate became a tall stray box. Given room it sits on one line. */
  .hero-full .trust{max-width:940px}
  /* The 660px cap is right for prose but wrong for a 64px headline — it forced
     "Progress you can measure." onto a third line. Give the h1 its own width.
     Selectors written as `.hero-full .hero-inner > x` on purpose: the blanket
     `> *` rule above is two classes, so a plain `.hero-full h1` would lose the
     specificity contest and silently do nothing. */
  .hero-full .hero-inner > h1{max-width:860px}
  /* The Founding card lays its sub-text out beside the heading once it has the
     room, which reads as a broken two-column block. Hold it at its old width. */
  .hero-full .hero-inner > .offerband{max-width:600px}
}

/* ─────────────────────────────────────────────────────────────────────────────
   MEMBERSHIP CARDS — alignment and scannability.

   .plans is a fixed three-column grid. The Wellness group has only two cards,
   so they filled columns 1 and 2 and left column 3 empty: the row stopped a
   third short of the IV row directly beneath it, which is what read as "not
   aligned". Two cards get a two-column grid, so both rows span the same width
   and share the same left and right edges.
   ───────────────────────────────────────────────────────────────────────────── */
.plans-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:860px){.plans-2{grid-template-columns:1fr}}

/* Member savings was one run-on sentence chained with middle dots — five
   wrapped lines in the featured card, and unreadable at a glance. The number is
   the part anyone is actually looking for, so it leads; the label follows.
   margin-top:auto pins the block to the bottom of the card, so the savings and
   the button line up across cards of unequal length and the slack falls in one
   place instead of leaving a hole mid-card. */
.plan .savings{
  margin-top:auto; padding-top:16px;
  border-top:1px solid var(--line);
}
.plan .savings-h{
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--purple); margin-bottom:10px;
}
.plan .savings ul{
  list-style:none; margin:0 0 18px; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 16px;
}
.plan .savings li{
  font-size:13px; line-height:1.35; color:var(--ink-dim);
  display:flex; gap:7px; align-items:baseline;
}
.plan .savings li b{
  color:var(--purple); font-weight:800; font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.plan .savings li.wide{grid-column:1 / -1}
@media(max-width:520px){
  .plan .savings ul{grid-template-columns:1fr}
  .plan .savings li.wide{grid-column:auto}
}

/* ─────────────────────────────────────────────────────────────────────────────
   CREDENTIALS STRIP — it was crammed because of where it sits, not its own rules.

   .creds is the THIRD child of .wrap.split, which is a two-column grid. So it
   dropped into column 1 and then divided that half into four, giving each card
   about 145px: "Board-\ncertified care", "Delivered by\nboard-certified\n
   physicians and\nnurse\npractitioners." — one or two words a line.

   Span it across both columns and the same four cards get ~265px each, which is
   enough for the headings to sit on one line and the body to read normally.
   ───────────────────────────────────────────────────────────────────────────── */
#clinician .creds{grid-column:1 / -1;margin-top:40px;gap:18px}
.cred{padding:20px}
.cred b{font-size:14.5px;margin-bottom:6px;line-height:1.3}
.cred span{font-size:13.5px;line-height:1.55;display:block}

/* The two columns are vertically centred, which was fine with two rows but
   leaves the shorter column floating once a full-width row is added. Pin them
   to the top so the section reads as two aligned columns over one strip. */
#clinician .split{align-items:start}

/* The IV row is three-up, so each card has roughly 310px of content width — a
   two-column savings list there gives ~145px a column and "at Natural Healthy
   Concepts" wraps. Two columns is right for the two-up Wellness cards only. */
#packages .plans:not(.plans-2) .savings ul{grid-template-columns:1fr;gap:6px}
#packages .plans:not(.plans-2) .savings li.wide{grid-column:auto}

/* ─────────────────────────────────────────────────────────────────────────────
   BOOSTERS — the one row that wrapped set the height of every row beside it.

   The rows were a single flex line: name, description, dose, price. "B12
   (methylcobalamin) Energy & neurological support (1000 mcg / 2000 mcg)" is too
   long for a half-width column, so it broke onto a second line — and because
   .iv-addgrid is a CSS grid, its row partner (Zofran) was stretched to match and
   rendered as a half-empty white box. Its dose also split across the break,
   leaving "2000 mcg)" stranded on its own line.

   Fixed structurally rather than by shortening text until it happened to fit:
   name and price on the first line, detail on the second. Every row is two
   lines by design, so they are uniform, nothing wraps unpredictably, and the
   price sits on the same baseline as the name it belongs to.
   ───────────────────────────────────────────────────────────────────────────── */
.boosters .iv-add{
  display:grid; grid-template-columns:1fr auto;
  column-gap:14px; row-gap:3px; align-items:baseline;
  padding:11px 14px;
}
.boosters .iv-add b{grid-column:1; grid-row:1; white-space:normal}
.boosters .iv-add span{grid-column:2; grid-row:1; margin-left:0}
.boosters .iv-add i{
  grid-column:1 / -1; grid-row:2;
  font-style:normal; font-size:12.5px; line-height:1.4; color:var(--ink-dim);
}

/* ─────────────────────────────────────────────────────────────────────────────
   INBODY 970s — the device sits in the à la carte section, where the scan is
   actually sold, as a background rather than an inline figure. Anchored to the
   right edge so on a wide screen it occupies the gutter beside the card grid,
   which was dead space anyway. A white gradient scrim runs left-to-right so the
   cards keep a clean ground and only the right edge of the section carries it.
   Hidden below 1200px: narrower than that there is no gutter, so it would sit
   behind the cards instead of beside them.
   ───────────────────────────────────────────────────────────────────────────── */
@media(min-width:1200px){
  #alacarte{position:relative; isolation:isolate; overflow:hidden}
  #alacarte::before{
    content:""; position:absolute; z-index:-2;
    right:10px; bottom:0; width:200px; height:90%;
    background:url("images/inbody-970s.png") no-repeat right bottom;
    background-size:contain;
    opacity:.62;
  }
  #alacarte::after{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(90deg,
      var(--bg,#faf9fc) 0%, var(--bg,#faf9fc) 62%,
      rgba(250,249,252,.86) 78%, rgba(250,249,252,.35) 100%);
  }
}

/* Vendor credit — the InBody wordmark beside the service that uses their kit.
   A statement of what equipment we run, not a partnership claim: no "official",
   no badge, one placement only, at a size that sits under the body text rather
   than competing with the card's own heading. Clear space around the mark comes
   from the padding here since the supplied file is cropped tight. */
.vendor{
  display:flex; align-items:center; gap:10px;
  margin-top:12px; padding:9px 12px 9px 10px;
  background:rgba(139,128,217,.07); border:1px solid var(--line); border-radius:10px;
}
.vendor img{display:block; width:75px; height:auto; flex-shrink:0; opacity:.9}
.vendor span{font-size:11.5px; line-height:1.3; color:var(--ink-dim)}

/* .card is not a flex column, so its action row sat wherever the copy ended and
   the buttons in a row landed at three different heights. The vendor credit made
   it obvious rather than causing it. Scoped to #alacarte: the other card grids
   on the page have no action row to align. */
#alacarte .card{display:flex; flex-direction:column}
#alacarte .card .card-act{margin-top:auto; padding-top:14px}

/* An odd number of rows in a two-column panel left the last one stranded in the
   left column with a hole beside it — "120 g / 2 hours / $799" alone under four
   filled rows, and the same for Toradol in the boosters. It reads as a layout
   that broke rather than a list that ended.
   Let the last row span both columns when the count is odd. Written as a rule on
   the count, not a class on one element, so it stays correct when Matt adds or
   removes a dose from the menu — which is the whole point of the menu living in
   inventory rather than in this stylesheet. */
/* An odd last row spans both columns so it is not stranded with a hole beside it — but spanning
   alone threw its PRICE to the far right edge, half a panel away from the dose it belongs to, while
   every other price sits at the column boundary. Keep the full-width row (no hole) and pad the right
   so the price lands on the same line as the ones above it. The gap matches .iv-addgrid's 30px. */
.iv-addgrid > .iv-add:last-child:nth-child(odd){
  grid-column:1 / -1;
  padding-right:calc(50% + 15px);
}
/* Booster rows carry their own 14px horizontal padding, so their prices sit 14px further left than
   the bare rows in the other panels. The span rule above lands every full-width row at the same
   place, which is right for the bare panels and 14px off for this one — add its own padding back. */
.boosters .iv-add:last-child:nth-child(odd){padding-right:calc(50% + 29px)}
@media(max-width:640px){
  .iv-addgrid > .iv-add:last-child:nth-child(odd){grid-column:auto;padding-right:14px}
  .boosters .iv-add:last-child:nth-child(odd){padding-right:14px}
}

/* ─────────────────────────────────────────────────────────────────────────────
   CLINICIAN BIO CARD. Photo left, words right; on a phone it stacks and the
   portrait becomes a band, because a 4:5 image beside text at 380px leaves
   neither enough room to be worth having.
   The photo is given an explicit aspect-ratio and object-fit so a future
   replacement of a different shape cannot distort her face — the failure mode
   of a bare <img> in a flex row.
   ───────────────────────────────────────────────────────────────────────────── */
/* Spans BOTH columns of .wrap.split. Left inside the text column it gets half the
   width and the prose renders as a thin ribbon beside the photo — the same defect
   the credentials strip had, from the same cause. */
#clinician .npcard{grid-column:1 / -1}
.npcard{
  margin-top:26px; padding:20px; background:#fff; border:1px solid var(--line);
  border-radius:18px; display:flex; gap:22px; align-items:flex-start;
  box-shadow:0 18px 44px -32px rgba(27,31,39,.42);
}
.npcard img{
  flex-shrink:0; width:188px; height:auto; aspect-ratio:4/5; object-fit:cover;
  object-position:50% 12%;      /* bias to the face, not the middle of the torso */
  border-radius:14px; display:block; background:var(--lilac);
}
.npcard-body{min-width:0}
.npcard h3{font-size:19px; margin:0; color:var(--ink); line-height:1.25}
.npcard h3 span{font-weight:600; font-size:14px; color:var(--ink-dim); white-space:nowrap}
.npcard-role{
  font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--purple); margin:6px 0 12px;
}
.npcard p{font-size:14px; line-height:1.6; color:var(--ink-dim); margin:0 0 10px}
.npcard p.fine{font-size:12.5px; line-height:1.55; color:var(--ink-soft, #5c5470)}
.npcard p:last-child{margin-bottom:0}
@media(max-width:760px){
  .npcard{flex-direction:column; gap:16px; padding:16px}
  /* Stays a PORTRAIT rather than stretching to a full-width band. A 3:2 letterbox cut from a 4:5
     photograph is a squat strip of somebody's collar — the shape fights the picture. Narrower and
     upright reads as a headshot, which is what it is. */
  .npcard img{width:152px; aspect-ratio:4/5; object-position:50% 8%}
}