/* 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:#ffffff;            /* paper — pure white (David, 2026-09-20: the brightness he liked on
                              innerbalance.com is a white ground, colour only in the section washes
                              and the type). Was #faf9fc, a lavender-tinted 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:1520px;margin:0 auto;padding:0 32px}
/* 1520px, not 1180px (David, 2026-09-20). He compared us with innerbalance.com and named the
   horizontal dimensions first; measured side by side, their content container is 1600px and ours
   was 1180px, which is what made our page feel narrow and tall on a wide screen. Long TEXT blocks
   stay constrained separately (.hero2-lead is 640px) so line length does not follow the container. */
.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. Since the 2026-09-17 refresh every primary action is the same green pill (.btn-act and
   .btn-neon share it) and every secondary action an outline pill (.btn-ghost) — see the REFRESH layer. */
.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-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}}

/* 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}

/* 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)}

/* 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) }

/* ── 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}

/* ─────────────────────────────────────────────────────────────────────────────
   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)}

/* 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)}

/* ── 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)}

/* ─────────────────────────────────────────────────────────────────────────────
   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}

/* ─────────────────────────────────────────────────────────────────────────────
   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}

/* Odd last rows are NOT stretched across both columns. David, 2026-09-17: the Toradol booster and the 120 g
   vitamin C row should be single column like the others — a stretched last card read as a different kind of
   item. The gap beside an odd last card is intended. (Earlier the last row spanned both columns with padding
   to hold its price in line; that rule was removed here.) */

/* ═════════════════════════════════════════════════════════════════════════════
   REFRESH — 2026-09-17. From the focus-group comparison with innerbalance.com
   (~/Downloads/Paradigm/05-product-design/Wellness-Site-Gap-vs-InnerBalance-FG-2026-09-16.html);
   David approved the mockup and asked for it to be built.

   The gap was energy, not information: colour in the headings, a light headline
   with one italic word, one pill button, bright small details, more air. All of it
   stays inside the Paradigm Wellness palette.

   CONTRAST (computed, WCAG): small text is held at 7:1 or better.
   · Action green is DEEPENED from the brand #2F9E6B: white on #2F9E6B is 3.4:1,
     white on #17603F is 7.5:1.
   · Small purple text uses #4A3F96 (7.4:1 or better on every tint used here).
   · Brand purple #5F54B8 appears only at heading sizes (28px and up), where it
     measures 5.0–6.1:1 against the 3:1 large-text floor. If the site is ever held
     to 7:1 everywhere, #4B419D is the same hue at 7.1:1.
   ═════════════════════════════════════════════════════════════════════════════ */
:root{
  --go:#17603f; --go-hover:#11502f; --purple-ink:#4a3f96; --mist:#f7f5fe;
  --peach-solid:#f2b79c; --sage-ink:#134f34;
}

/* One button: a pill. Green for the main action, outline for everything else. */
/* Squared, r=8. David, 2026-09-20: "Square off the buttons" — the same radius the Calanthe card
   design language uses, so the two products stop disagreeing about what a button looks like. */
.btn{border-radius:8px;font-weight:600;padding:14px 26px;justify-content:center}
.btn-sm{border-radius:8px;padding:9px 18px;font-size:14px}
.btn-act,.btn-neon,.sec-dark .btn-neon{background:var(--go);color:#fff;box-shadow:none;font-weight:600}
.btn-act:hover,.btn-neon:hover,.sec-dark .btn-neon:hover{background:var(--go-hover);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid #cfc9e6}
.btn-ghost:hover{background:var(--mist)}

/* Colour lives in the type. Section headings are light and purple; one word in a
   heading may be the italic accent, in ink. */
h2{font-weight:300;font-size:clamp(32px,4.2vw,52px);line-height:1.06;letter-spacing:-.03em;color:var(--purple)}
.sec-dark h2,.iv h2,.contact h2{color:var(--purple)}
/* No italic font file is loaded on purpose: the only Hanken italic we host is a single medium weight,
   which reads as bold beside a light headline. The browser slants the light roman instead. */
em.accent{font-style:italic;font-weight:300;font-synthesis:style;letter-spacing:-.01em;color:var(--ink)}
.eyebrow{color:var(--purple-ink)}

/* Small bright details: soft chips. */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;font-size:13px;font-weight:600;padding:5px 12px;white-space:nowrap;line-height:1.3}
.chip-peach{background:var(--peach-solid);color:#3a1c0e}
.chip-sage{background:var(--sage);color:var(--sage-ink)}
.chip-lilac{background:var(--lilac);color:var(--purple-ink)}
.chip-white{background:rgba(255,255,255,.9);color:var(--ink)}

/* No coloured bars down the left edge of a card (a standing rule of David's). */
.iv-card::before{display:none}

/* Jumping to a section must not hide its heading under the floating header. */
section[id]{scroll-margin-top:96px}

/* ── Announcement strip + floating header ─────────────────────────────────── */
.strip{background:var(--purple-ink);color:#fff;font-size:14px;text-align:center;padding:9px 16px;line-height:1.4}
.strip a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;margin-left:8px}
.strip-short{display:none}
header{position:sticky;top:12px;z-index:50;margin-top:12px;padding:0 16px;background:none;border:0;backdrop-filter:none}
.capsule{position:relative;max-width:1532px;margin:0 auto;display:flex;align-items:center;gap:24px;
  padding:10px 12px 10px 26px;border-radius:999px;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 10px 30px -12px rgba(74,63,150,.28),0 0 0 1px rgba(95,84,184,.06)}
.capsule .logo-link{margin-right:0}
.capsule .logo-img{height:36px;width:auto}
.cnav{display:flex;gap:26px;margin:0 auto;font-size:15px}
.cnav a{color:var(--ink)}
.cnav a:hover{color:var(--purple-ink)}
.menu-btn{display:none;width:44px;height:44px;border-radius:8px;border:0;background:var(--mist);align-items:center;justify-content:center;cursor:pointer}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
section.hero2{padding:44px 0 20px}
.proof{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:22px}
.avatar-chip{display:inline-flex;align-items:center;gap:10px;background:var(--mist);border-radius:999px;padding:4px 14px 4px 4px;font-size:13.5px;color:var(--ink)}
.avatar-chip img{width:32px;height:32px;border-radius:999px;object-fit:cover;object-position:50% 18%}
.avatar-chip b{font-weight:600}
.hero2-row{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
.hero2 h1{font-weight:300;font-size:clamp(44px,5.6vw,78px);line-height:.98;letter-spacing:-.035em;color:var(--purple);margin:0}
.hero2-lead{font-size:20px;line-height:1.55;color:var(--ink-dim);max-width:640px;margin:22px 0 0}
.hero2-cta{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:290px}
.hero2-note{font-size:14px;color:var(--ink-dim);text-align:center}

.shop{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.shopcard{position:relative;border-radius:28px;padding:22px;min-height:380px;display:flex;flex-direction:column;color:var(--ink);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.shopcard:hover{transform:translateY(-4px);box-shadow:0 24px 44px -24px rgba(74,63,150,.35)}
/* The tag sits on its own line under the card title. Side by side it overflowed the card at the site's
   1180px content width ("Memberships" + "Founding price" + arrow = 241px in a 223px card). */
.shop-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:16px;font-weight:600}
/* The arrow is the END of the row — say so, do not rely on the width. At the old 1180px container the
   chip wrapped to its own line so order never showed; at 1520px (2026-09-20) it sits beside the title
   and the arrow landed BETWEEN them, reading "Memberships -> Founding price", because margin-left:auto
   pushed it off the title while the chip's order:3 put it further right still. */
.shop-top .arrow{order:4;margin-left:auto}
.shop-top .chip{order:3;font-size:12px;padding:4px 10px}
.arrow{width:32px;height:32px;border-radius:999px;background:rgba(255,255,255,.75);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.shopcard .visual{flex:1;display:grid;place-items:center;margin:14px 0;min-height:170px}
.shop-price{font-weight:300;font-size:40px;letter-spacing:-.03em;line-height:1;color:var(--purple-ink)}
.shop-price small{font-size:16px;letter-spacing:0;color:var(--ink-dim);font-weight:400;margin-left:4px}
.shop-sub{font-size:14.5px;color:var(--ink-dim);margin-top:6px;line-height:1.45}
.c-mem{background:linear-gradient(160deg,#efecfb 0%,#f6f1fd 100%)}
.c-iv{background:linear-gradient(160deg,#eef3fb 0%,#f4f2fd 100%)}
.c-lab{background:linear-gradient(160deg,#eaf4ee 0%,#f4f8f5 100%)}
.c-inb{background:linear-gradient(160deg,#fdf1ea 0%,#fbf6f2 100%)}
/* Membership visual, drawn in CSS so there is no image to load. Text on both cards is 7:1+. */
.mcards{position:relative;width:200px;height:150px}
.mcard{position:absolute;width:180px;height:112px;border-radius:16px;padding:14px 16px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;line-height:1.3;box-shadow:0 18px 30px -16px rgba(74,63,150,.55)}
.mcard b{display:block;font-size:15px;letter-spacing:-.01em;text-transform:none;font-weight:400;margin-top:30px}
.mcard.back{left:22px;top:0;transform:rotate(8deg);background:linear-gradient(135deg,#f2b79c,#e3aec0);color:#3a1c0e}
.mcard.front{left:0;top:34px;transform:rotate(-5deg);background:linear-gradient(135deg,#4a3f96,#564bab);color:#fff}
.ivphoto{width:100%;height:190px;border-radius:20px;background:url("images/hero.jpg") 88% 0%/205% auto no-repeat}
.labchips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;max-width:230px}
.labchips span{background:#fff;border-radius:999px;padding:6px 11px;font-size:12.5px;color:var(--sage-ink);box-shadow:0 6px 14px -10px rgba(19,79,52,.45)}
.labchips span:nth-child(3n+2){transform:translateX(10px)}
.shopcard .inbody{height:200px;width:auto;filter:drop-shadow(0 18px 18px rgba(107,52,25,.18))}

/* Founding band, with the clinician beside the offer at a large, tall size. */
.fband{margin:56px 0 0;border-radius:32px;background:var(--brand-wash);padding:48px;display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}
.fband h2{font-size:clamp(32px,4vw,48px);line-height:1.05;margin:12px 0 14px}
.fband p{margin:0 0 22px;color:var(--ink-dim);font-size:18px;max-width:520px}

/* ── Memberships ──────────────────────────────────────────────────────────── */
section.mem2{margin-top:96px;background:var(--mist);padding:96px 0 104px;border-radius:40px 40px 0 0}
.mem2-head{text-align:center}
.mem2 h2{margin:16px auto 14px;max-width:820px;font-size:clamp(34px,4.6vw,56px);line-height:1.04}
.mem2-intro{font-size:19px;color:var(--ink-dim);max-width:600px;margin:0 auto}
.mtabs{display:none;background:#fff;border-radius:10px;padding:5px;margin:34px auto 0;box-shadow:0 0 0 1px #e4e0f4}
.mem2.tabbed .mtabs{display:inline-flex}
.mtabs button{border:0;background:transparent;border-radius:8px;padding:11px 22px;font:600 15px 'Hanken Grotesk',sans-serif;color:var(--ink-dim);cursor:pointer}
.mtabs button[aria-selected="true"]{background:var(--purple-ink);color:#fff}
.mgroup-h{text-align:center;font-size:24px;margin:44px 0 0}
.mem2.tabbed .mgroup-h{display:none}
.mgroup-note{text-align:center;font-size:16px;color:var(--ink-dim);margin:18px auto 0;max-width:640px}
.mpanel[hidden]{display:none}
.tiers2{display:grid;gap:20px;margin-top:36px}
.tiers2.two{grid-template-columns:repeat(2,1fr);max-width:980px;margin-left:auto;margin-right:auto}
.tiers2.three{grid-template-columns:repeat(3,1fr)}
.tier{background:#fff;border-radius:30px;padding:32px 30px 30px;box-shadow:0 0 0 1px #e4e0f4;display:flex;flex-direction:column}
.tier.featured{background:linear-gradient(170deg,#fff 0%,#f1eefc 100%);box-shadow:0 0 0 1.5px var(--lavender),0 30px 60px -36px rgba(74,63,150,.45)}
.tier-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px}
.tier h3{font-size:24px;font-weight:600;letter-spacing:-.01em;margin:0;line-height:1.2}
.tier-amount{display:flex;align-items:baseline;gap:6px;margin:18px 0 8px}
.tier-amount .num{font-weight:300;font-size:64px;line-height:1;letter-spacing:-.04em;color:var(--purple)}
.tier-amount .per{font-size:17px;color:var(--ink-dim)}
.tier-was{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:15px;color:var(--ink-dim)}
.tier-feat{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.tier-feat li{display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:16.5px;line-height:1.45;color:var(--ink)}
.tk{width:24px;height:24px;border-radius:999px;background:var(--sage);display:grid;place-items:center;margin-top:1px}
.tk svg{width:13px;height:13px}
.msave{margin:26px 0;padding-top:22px;border-top:1px solid #e4e0f4}
.msave-h{font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-ink);margin-bottom:12px}
.msave-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.msave-item{background:var(--mist);border-radius:16px;padding:10px 12px;font-size:14.5px;line-height:1.3;color:var(--ink)}
.msave-item b{display:block;font-size:22px;font-weight:400;letter-spacing:-.02em;color:var(--purple-ink)}
.tier.featured .msave-item{background:#fff}
.tier-go{margin-top:auto}
.tier-go .btn{width:100%}
.mem2-fine{text-align:center;font-size:15px;color:var(--ink-dim);max-width:760px;margin:34px auto 0}

/* ── Tablet ───────────────────────────────────────────────────────────────── */
@media(max-width:1080px){
  .cnav{gap:18px;font-size:14.5px}
  .shop{grid-template-columns:repeat(2,1fr)}
  .tiers2.three{grid-template-columns:1fr;max-width:560px;margin-left:auto;margin-right:auto}
  .fband{grid-template-columns:1fr;padding:36px}
}
/* ── Phone and small tablet: the menu folds behind a button ───────────────── */
@media(max-width:900px){
  .capsule{padding:8px 8px 8px 18px;gap:10px}
  .capsule .logo-img{height:30px}
  .capsule .join{margin-left:auto}
  .menu-btn{display:inline-flex}
  .cnav{display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;margin:0;flex-direction:column;gap:2px;
    background:#fff;border-radius:24px;padding:10px;box-shadow:0 24px 50px -20px rgba(74,63,150,.4),0 0 0 1px rgba(95,84,184,.08)}
  .capsule.open .cnav{display:flex}
  .cnav a{padding:12px 16px;border-radius:14px;font-size:16px}
  .cnav a:hover{background:var(--mist)}
}
@media(max-width:760px){
  .strip{font-size:13px}
  .strip-long,.strip a{display:none}
  .strip-short{display:inline}
  header{top:8px;margin-top:8px;padding:0 10px}
  section.hero2{padding:26px 0 8px}
  .proof{gap:8px;margin-bottom:18px}
  .proof .hide-sm{display:none}
  .hero2-row{grid-template-columns:1fr;gap:22px}
  .hero2 h1{font-size:38px;line-height:1.02;letter-spacing:-.03em}   /* 40px broke "Health you can feel." in the site's 32px gutters */
  .hero2-lead{font-size:17.5px;margin-top:16px}
  .hero2-cta{min-width:0}
  .shop{gap:10px;margin-top:28px}
  .shopcard{min-height:250px;padding:14px;border-radius:22px}
  .shop-top{font-size:14.5px;flex-wrap:wrap}
  .shop-top .chip{font-size:11.5px;padding:3px 9px}
  .arrow{width:26px;height:26px;font-size:13px}
  .shopcard .visual{min-height:110px;margin:12px 0 8px}
  .shop-price{font-size:28px}
  .shop-price small{font-size:13px}
  .shop-sub{font-size:12.5px}
  .mcards{transform:scale(.62);margin:-28px -38px}
  .ivphoto{height:118px;border-radius:14px}
  .labchips{gap:5px}
  .labchips span{font-size:11px;padding:4px 8px}
  .labchips span:nth-child(n+5){display:none}
  .shopcard .inbody{height:124px}
  .fband{margin-top:36px;padding:26px 18px;border-radius:26px;gap:22px}
  .fband p{font-size:16.5px}
  .fband .btn{width:100%}
  section.mem2{margin-top:64px;padding:64px 0 72px;border-radius:30px 30px 0 0}
  .mem2-intro{font-size:17px}
  .mem2.tabbed .mtabs{display:flex}
  .mtabs button{flex:1;padding:11px 8px;font-size:14px}
  .tab-long{display:none}
  .tiers2.two{grid-template-columns:1fr}
  .tier{padding:24px 20px 22px;border-radius:24px}
  .tier-head{flex-direction:column-reverse;align-items:flex-start;gap:8px}
  .tier-amount .num{font-size:54px}
}

/* ─────────────────────────────────────────────────────────────────────────────
   PHOTO RHYTHM — 2026-09-17. David: "mix up the photos and their sizes so it's not
   all the same", compared against innerbalance.com. Measured at 1440px wide: theirs
   runs from 168px strips to 1200×519 and 1190×610 banners, ratios 0.66 to 3.4.
   Ours had nothing wider than 548px or taller than 430px. Tracey now appears three
   ways: a 32px chip, a tall 3:4 portrait in the Founding band, and a wide banner in
   the clinician section — separated by the pricing section so she is not back to back.
   ───────────────────────────────────────────────────────────────────────────── */
.fportrait{position:relative;display:block;justify-self:end;width:100%;max-width:400px;border-radius:28px;overflow:hidden;
  box-shadow:0 30px 60px -34px rgba(74,63,150,.55)}
.fportrait img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.ftag{position:absolute;left:14px;right:14px;bottom:14px;display:flex;flex-direction:column;gap:2px;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:18px;padding:12px 16px;color:var(--ink)}
.ftag b{font-size:17px;font-weight:600}
.ftag span{font-size:13.5px;color:var(--ink-dim)}

#clinician .tbanner,#clinician .tbio{grid-column:1 / -1}
.tbanner{position:relative;margin-top:44px;border-radius:32px;overflow:hidden;aspect-ratio:9/5;background:#e9e8e6}
.tbanner img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.tcard{position:absolute;right:40px;top:50%;transform:translateY(-50%);width:min(500px,46%);
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-radius:24px;padding:28px 30px;box-shadow:0 24px 50px -30px rgba(27,31,39,.35)}
.tcard h3{font-size:30px;font-weight:300;letter-spacing:-.02em;color:var(--purple);margin:14px 0 4px}
.tcard-cred{font-size:14px;color:var(--ink-dim);margin-bottom:14px}
.tcard p{font-size:15.5px;line-height:1.6;color:var(--ink);margin:0}
.tbio{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;margin-top:30px}
.tbio p{font-size:15px;line-height:1.65;color:var(--ink-dim);margin:0 0 12px}

@media(max-width:1080px){
  .fportrait{justify-self:start;max-width:420px}
  .tbanner{aspect-ratio:auto;overflow:visible;background:none}
  .tbanner img{position:static;display:block;aspect-ratio:3/2;border-radius:28px;object-position:20% 0%}
  .tcard{position:relative;right:auto;top:auto;transform:none;width:auto;margin:-60px 20px 0;background:rgba(255,255,255,.96)}
  .tbio{grid-template-columns:1fr;gap:0}
}
@media(max-width:760px){
  .fportrait{max-width:none;border-radius:22px}
  .fportrait img{aspect-ratio:1/1;object-position:50% 12%}
  .ftag{left:10px;right:auto;bottom:10px;padding:8px 12px;border-radius:14px}
  .ftag b{font-size:15px}
  .ftag span{font-size:12.5px}
  .tbanner{margin-top:32px}
  .tbanner img{aspect-ratio:1/1;border-radius:22px;object-position:27% 0%}   /* square, so she fills the frame rather than standing small in it */
  .tcard{margin:-40px 10px 0;padding:22px 20px;border-radius:20px}
  .tcard h3{font-size:26px}
  .tcard p{font-size:15px}
}

/* ─────────────────────────────────────────────────────────────────────────────
   PREMIUM DOSE MENUS — 2026-09-17. David: "better formatted so the cards don't just
   blend into the background". The panels were lilac on the lilac #premium section,
   and the rows had no inner padding, so text touched each row's edge. Now: two white
   cards side by side, each dose a soft tile, dose and price large enough to scan.
   Contrast: price #4A3F96 on #F7F5FE 7.9:1; duration #3A3350 on #F7F5FE 11:1.
   ───────────────────────────────────────────────────────────────────────────── */
.premium-menus{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px;align-items:start}
#premium .iv-addons{margin:0;background:#fff;border:0;border-radius:28px;padding:26px 26px 24px;
  box-shadow:0 0 0 1px #e4e0f4,0 24px 48px -34px rgba(74,63,150,.45)}
#premium .iv-addhead{font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--purple-ink);margin-bottom:14px}
#premium .iv-addgrid{grid-template-columns:1fr;gap:8px}
#premium .iv-add{display:flex;align-items:baseline;gap:10px;background:var(--mist);border:0;border-radius:16px;
  padding:14px 18px;font-size:15px;color:var(--ink-dim)}
#premium .iv-add b{font-size:17px;font-weight:600;color:var(--ink);min-width:78px}
#premium .iv-add span{margin-left:auto;font-size:20px;font-weight:400;letter-spacing:-.01em;color:var(--purple-ink);
  font-variant-numeric:tabular-nums}
@media(max-width:900px){.premium-menus{grid-template-columns:1fr}}
@media(max-width:520px){
  #premium .iv-addons{padding:20px 16px;border-radius:22px}
  #premium .iv-add{padding:12px 14px}
  #premium .iv-add b{min-width:84px;font-size:16px}   /* wide enough for "1,000 mg" */
  #premium .iv-add span{font-size:18px}
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIGN-UP FORM — 2026-09-17. David: "looks better and easier to fill in. I like
   clickable buttons for what they are interested in." The drop-down became chips
   (checkboxes underneath, so keyboard and screen readers work unchanged), inputs got
   larger with 16px text (phones do not zoom in), optional fields say "Optional"
   instead of marking required ones with an asterisk, and email + phone share a row.
   ───────────────────────────────────────────────────────────────────────────── */
.contact .formcard{border-radius:28px;padding:32px;border:0;box-shadow:0 0 0 1px #e4e0f4,0 30px 60px -36px rgba(74,63,150,.45)}
.form-head h3{font-size:26px;font-weight:300;letter-spacing:-.02em;color:var(--purple);margin:0 0 4px;line-height:1.15}
.form-head p{font-size:15px;color:var(--ink-dim);margin:0 0 22px}
.picks{border:0;margin:0 0 20px;padding:0;min-width:0}
.picks legend{font-size:14.5px;font-weight:600;color:var(--ink);margin-bottom:10px;padding:0}
.picks legend em,.field span em{font-style:normal;font-weight:400;color:var(--ink-dim);font-size:13px;margin-left:6px}
.pick-row{display:flex;flex-wrap:wrap;gap:8px}
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.pick span{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:10px 16px;font-size:15px;font-weight:500;
  color:var(--ink);background:var(--mist);box-shadow:inset 0 0 0 1.5px #dcd6f0;transition:background .15s,box-shadow .15s,color .15s;user-select:none}
.pick:hover span{background:#efecfb}
.pick input:checked + span{background:var(--purple-ink);color:#fff;box-shadow:none}
.pick input:checked + span::before{content:"✓";font-weight:700}
.pick input:focus-visible + span{outline:3px solid var(--lavender);outline-offset:2px}
.contact .field{margin-bottom:16px}
.contact .field span{font-size:14.5px;font-weight:600;margin-bottom:7px}
.contact .field input,.contact .field textarea{width:100%;font:400 16px 'Hanken Grotesk',system-ui,sans-serif;color:var(--ink);
  background:var(--mist);border:1.5px solid #dcd6f0;border-radius:14px;padding:14px 16px;transition:border-color .15s,box-shadow .15s,background .15s}
.contact .field textarea{resize:vertical;min-height:96px;line-height:1.5;display:block}
.contact .field input::placeholder,.contact .field textarea::placeholder{color:#534c68}   /* 7.5:1 on the field */
.contact .field input:focus,.contact .field textarea:focus{outline:none;background:#fff;border-color:var(--purple);box-shadow:0 0 0 4px rgba(95,84,184,.16)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact #regSubmit{margin-top:8px;padding:17px 26px;font-size:16px}
.contact .formnote{font-size:14px;color:var(--ink-dim);margin-top:12px}
@media(max-width:600px){
  /* The gradient panel's own 34px padding plus the page gutter left the form 255px wide on a phone, one
     chip per line. On a phone the panel steps aside and the form uses the full column. */
  .contact{padding:0;background:none;border:0;border-radius:0}
  .contact .formcard{padding:22px 18px;border-radius:22px}
  .form-head p{margin-bottom:18px}
  .field-row{grid-template-columns:1fr;gap:0}
  .pick span{padding:9px 14px;font-size:14.5px}
}

/* Buttons and form controls do not inherit the page font on their own, so every <button> on the page
   (the sign-up buttons, the gift buttons) was drawing in Arial. */
button,input,select,textarea{font-family:inherit}

/* Two ways to send the form: interest first (green), a Founding place request second (outline). */
.form-actions{display:grid;gap:10px;margin-top:8px}
.form-actions .btn{width:100%;justify-content:center;padding:16px 24px;font-size:16px}
.contact #regSubmit{margin-top:0}
.form-actions .btn:disabled{opacity:.6;cursor:default;transform:none}

/* 2026-09-18 (Tracey's review): "From" sits before the price on the top cards, as in the one-off visits section. */
.shop-price .from{font-size:16px;letter-spacing:0;color:var(--ink-dim);font-weight:400;margin-right:6px}
.shop-price small{white-space:nowrap}
@media (max-width:760px){.shop-price .from{display:block;font-size:13px;margin:0 0 4px}.shop-price small.draw{display:block;margin:4px 0 0}}
/* Gifts get their own wash so they are not missed between the lilac lab menu and the steps. */
.sec-gift{background:var(--peach)}
.sec-gift h2{font-size:clamp(30px,3.6vw,44px)}
#meet-tracey{scroll-margin-top:96px}


/* ── Physician oversight cards (2026-09-20) ───────────────────────────────────────────────────────
   Four headshots naming the physicians behind the "physician-overseen" claim the page already makes.
   The practice headshots are 750x560 landscape with the face centred in the upper two-thirds, so the
   crop is object-position 50% 22% rather than centre — centre puts the chin at the bottom edge. */
.docs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
@media(max-width:1000px){.docs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.docs{grid-template-columns:1fr}}
.doc{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;
     box-shadow:0 4px 18px rgba(27,31,39,.06);transition:box-shadow .18s ease,transform .18s ease}
.doc:hover{box-shadow:0 10px 30px -14px rgba(74,63,150,.28);transform:translateY(-2px)}
.doc img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 22%;display:block;background:var(--lilac)}
.doc figcaption{padding:18px 20px 22px}
.doc .chip{margin-bottom:10px}
.doc h3{font-size:17px;line-height:1.25;margin:0 0 4px;color:var(--ink)}
.doc p{font-size:14.5px;line-height:1.5;color:var(--ink-dim);margin:8px 0 0}


/* ── Cookie consent banner (2026-09-20) ───────────────────────────────────────────────────────────
   Ported from the practice site's ConsentBanner.astro, restyled to the Wellness palette: pill buttons
   and the Wellness purple rather than the practice plum. Same markup, same `ph_consent` key. */
.ph-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:9999;max-width:560px;margin:0 auto;
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 14px 40px -12px rgba(74,63,150,.32);
  padding:16px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ph-consent[hidden]{display:none}
.ph-consent-text{margin:0;font-size:13.5px;color:var(--ink-dim);line-height:1.5;flex:1;min-width:220px}
.ph-consent-actions{display:flex;gap:10px;margin-left:auto}
.ph-consent-btn{font:inherit;font-size:14px;font-weight:600;border-radius:8px;padding:9px 20px;cursor:pointer;border:1.5px solid #cfc9e6}
.ph-decline{background:transparent;color:var(--ink)}
.ph-decline:hover{background:var(--mist)}
.ph-accept{background:var(--go);color:#fff;border-color:var(--go)}
.ph-accept:hover{background:var(--go-hover)}
@media(max-width:520px){.ph-consent-actions{width:100%}.ph-consent-btn{flex:1}}


/* ── Founding tile image (2026-09-20) ─────────────────────────────────────────────────────────────
   The tile used to hold Tracey's 3:4 studio portrait, so the slot is portrait and the default centre
   crop suited it. The lavender-field photo is LANDSCAPE (1600x1067) and its subject sits in the right
   third with the lavender across the lower left — a centre crop puts the stems in the middle and
   slices her face off at the edge. Pull the focal point right and slightly up so the crop keeps both.
   ⛔ If this image is ever swapped again, re-check this: object-position is tuned to ONE photograph. */
.fportrait img{object-position:64% 42%}
@media(max-width:760px){
  /* Wide-and-short on a phone: the 1:1 crop keeps her and the nearest lavender, not the blurred
     treeline at the top (the inherited 50% 12% framed mostly greenery). */
  .fportrait img{object-position:60% 48%}
}


/* ── Page headliner (2026-09-20) ───────────────────────────────────────────────────────────────────
   A wide banner under the hero on a section page. The source photograph is 1408x768 (about 1.83:1),
   so the box uses that ratio rather than a crop — the IV bag sits dead centre and any tighter crop
   would push it off-frame. Capped at its natural width so it is never upscaled and never soft. */
.headliner{display:block;width:100%;max-width:1408px;height:auto;aspect-ratio:1408/768;object-fit:cover;
  border-radius:26px;margin:6px auto 0;background:var(--lilac)}
@media(max-width:760px){.headliner{border-radius:18px;aspect-ratio:3/2;object-position:50% 45%}}

/* ═══ IV menu: picture cards, boosters and the cart ═════════════════════════════════════════════════
   David, 2026-09-20: small blended pictures on the drip cards; the boosters and the cart live on the
   inside page, and the home page keeps only a link to it. The picture BLEEDS into the card with a
   soft mask rather than sitting in a framed box — a hard-edged thumbnail beside text reads as a
   catalogue row; a faded one reads as part of the card. The fade is CSS, not baked into the JPEG, so
   the same file works on white and on the lilac wash. */
.ivcard{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:0}
/* The photo is cropped PORTRAIT and tight around the bag (430x768, centred on the bag in each shot
   — Immunity Shield's hangs left of centre, so its crop is offset). A square crop of a landscape
   photo put the bag's middle third in the slot and cut the top and bottom off: David, 2026-09-20,
   "this IV card needs to show more of the drip IV bag". A portrait source in a portrait slot means
   cover barely crops at all. */
.ivcard .cardpic{position:absolute;top:0;right:0;width:46%;height:100%;object-fit:cover;object-position:50% 30%;
  opacity:.94;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.6) 34%,#000 76%);
          mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.6) 34%,#000 76%)}
.ivcard.haspic{padding-right:44%}
@media(min-width:561px) and (max-width:1180px){
  /* Two columns: the card is narrower, so the text column needs the room back. */
  .ivcard.haspic{padding-right:36%}.ivcard .cardpic{width:38%}
}
.ivcard .ivname{display:block;color:var(--ink);text-decoration:none}
.ivcard .ivname:hover h3{color:var(--purple)}
.ivcard h3{transition:color .15s ease}
.ivcard .ivprice{margin:10px 0 0;font-size:14.5px;color:var(--ink-soft)}
.ivcard .ivprice b{color:var(--purple);font-size:26px;font-weight:300}
.ivcard .ivdesc{margin-top:8px}
.ivcard .ivact{margin-top:16px;display:flex;align-items:center;gap:10px;position:relative;z-index:1}
@media(max-width:560px){.ivcard.haspic{padding-right:38%}.ivcard .cardpic{width:40%}}

/* An "add" button, used by both the drip cards and the booster chips. */
.addbtn{font-family:inherit;cursor:pointer;border-radius:8px;border:1.5px solid var(--neon);
  background:var(--neon);color:#fff;font-weight:600;font-size:13.5px;padding:9px 15px;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.addbtn:hover{background:var(--neon-deep);border-color:var(--neon-deep)}
.addbtn.added{background:#fff;color:var(--neon-deep);border-color:var(--neon-deep)}

/* Boosters. Moved off the home page (David, 2026-09-20) and onto /iv/, where the cart is. */
.boosters2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:24px}
@media(max-width:760px){.boosters2{grid-template-columns:1fr}}
/* Picture, then name + blurb, then the doses on their own line. The doses used to sit beside the
   name and wrapped on the two longest rows only, so five rows came out three different heights. */
.boost{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px 18px;
  display:grid;grid-template-columns:auto 1fr;align-items:start;gap:14px}
.boost-n{font-weight:600;font-size:15.5px;color:var(--ink);grid-column:2}
.boost-n i{display:block;font-style:normal;font-weight:400;font-size:13px;color:var(--ink-soft);margin-top:3px}
.boost-doses{display:flex;gap:8px;flex-wrap:wrap;grid-column:2;margin-top:2px}
.rxtag{display:inline-block;margin-left:7px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--purple);background:var(--lilac);border-radius:5px;padding:2px 6px;vertical-align:2px}

/* The cart bar, pinned to the bottom, and the panel it opens. */
.cartbar{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:60;
  display:flex;align-items:center;gap:16px;background:var(--ink);color:#fff;
  border-radius:14px;padding:12px 14px 12px 20px;box-shadow:0 10px 34px rgba(27,31,39,.28);
  max-width:calc(100vw - 32px)}
/* ⛔ display:flex/fixed BEATS the HTML hidden attribute, so an empty cart bar stayed on screen
   reading "0 items · $0". Both need an explicit [hidden] rule. */
.cartbar[hidden],.cartwrap[hidden]{display:none}
.cartbar-txt{font-size:14.5px;white-space:nowrap}
.cartbar .btn{white-space:nowrap}
@media(max-width:560px){
  .cartbar{left:12px;right:12px;transform:none;bottom:12px;padding:10px 10px 10px 16px;gap:10px;
    justify-content:space-between}
  .cartbar-txt{font-size:13.5px}
  .cartbar .btn{padding:9px 14px;font-size:13.5px}
}
.cartbar-txt b{font-weight:600}
.cartwrap{position:fixed;inset:0;z-index:70}
.cartback{position:absolute;inset:0;background:rgba(27,31,39,.44)}
.cartpanel{position:absolute;top:0;right:0;height:100%;width:min(440px,100%);background:#fff;
  box-shadow:-12px 0 40px rgba(27,31,39,.22);display:flex;flex-direction:column}
.carthead{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.carthead h3{margin:0;font-size:19px}
.cartx{background:none;border:0;font-size:26px;line-height:1;color:var(--ink-soft);cursor:pointer;padding:0 4px}
.cartbody{padding:20px 24px 28px;overflow-y:auto;flex:1}
.cartempty{color:var(--ink-soft);font-size:14.5px}
.cartlist{list-style:none;margin:0;padding:0}
.cartline{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.cartline-n{flex:1;font-size:14.5px;color:var(--ink);line-height:1.4}
.cartline-n i{display:block;font-style:normal;font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.cartline-p{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.cartqty{display:flex;align-items:center;gap:2px}
.cartqty button{width:28px;height:28px;border-radius:8px;border:1.5px solid var(--line);background:#fff;
  color:var(--ink);font-size:16px;line-height:1;cursor:pointer;font-family:inherit}
.cartqty button:hover{border-color:var(--purple);color:var(--purple)}
.cartqty span{min-width:24px;text-align:center;font-size:14.5px;font-weight:600}
.carttotal,.cartmem{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 0;font-size:15px}
.carttotal b{font-size:24px;font-weight:300;color:var(--purple)}
.cartmem{padding-top:4px;color:var(--ink-soft);font-size:13.5px}
.cartmem b{font-weight:600;color:var(--neon-deep)}
.cartnote{margin:16px 0 20px;font-size:13px;color:var(--ink-soft);line-height:1.55}
.cartacts{display:flex;align-items:center;gap:10px;margin-top:6px;flex-wrap:wrap}
.cartmsg{margin:12px 0 0;font-size:13.5px;color:#b3352d;min-height:1px}
.cartdone h4{margin:0 0 10px;font-size:19px}
.cartdone p{margin:0;font-size:14.5px;color:var(--ink-soft);line-height:1.6}
body.cart-open{overflow:hidden}

/* The home page's IV block, now a link to the menu rather than the menu itself. */
.ivband{display:flex;align-items:center;gap:34px;flex-wrap:wrap}
/* .iv-tiernote is centred and lavender-on-dark from the old dark IV section. The band is white and
   left-aligned, so it is re-stated here rather than centred in the middle of a left-aligned column. */
.ivband .iv-tiernote{text-align:left;margin:0;max-width:none;color:var(--ink-soft);font-size:13.5px}
.ivband .iv-tiernote b{color:var(--purple)}
.ivband-txt{flex:1 1 380px}
.ivband-pic{flex:0 1 380px;max-width:100%}
.ivband-pic img{width:100%;height:auto;display:block;border-radius:20px}

/* The time picker inside the cart. Real open times from the clinic's scheduler — see cart.js. */
.slotdays{display:flex;flex-direction:column;gap:14px;max-height:320px;overflow-y:auto;
  border:1.5px solid var(--line);border-radius:10px;padding:14px}
.slotday h5{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--ink)}
.slottimes{display:flex;flex-wrap:wrap;gap:7px}
.slotbtn{font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;border-radius:8px;
  border:1.5px solid var(--line);background:#fff;color:var(--ink);padding:8px 12px;
  transition:border-color .12s ease,background .12s ease,color .12s ease}
.slotbtn:hover{border-color:var(--purple);color:var(--purple)}
.slotbtn.on{background:var(--neon);border-color:var(--neon);color:#fff}
.cartwhen{margin-top:4px}

/* ⛔ The textarea in the cart was UNSTYLED — .field input is styled but .field textarea only inside
   .contact, so the cart's "when suits you" box drew a raw browser border next to styled inputs.
   Style the element, not the element inside one section. */
.field textarea{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;resize:vertical;line-height:1.5;
  display:block;transition:border-color .15s,box-shadow .15s}
.field textarea:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px rgba(95,84,184,.18)}

/* A picture on each booster row. David supplied one composite of the five substances (2026-09-20);
   it was sliced per substance and the burnt-in labels cropped off, because the row already names it. */
/* A fixed chip, pinned to the top. Stretching it to the row height (grid-row span 2 + height:100%)
   made it a tall narrow strip on phones, where the doses stack and the row doubles in height — the
   Glutathione crop became a hand and nothing else. */
.boostpic{width:104px;height:86px;object-fit:cover;border-radius:10px;
  grid-row:1 / span 2;grid-column:1;align-self:start;background:var(--lilac);pointer-events:none}
@media(max-width:560px){.boostpic{width:84px;height:68px}}

/* Premium infusion cards carry the NAD+ helix (David, 2026-09-20) but they are short cards with a
   long name and, for the loading protocol, a long description. The drip cards' 44% picture squeezed
   "NAD+ Loading Protocol" onto two lines and its paragraph into a column five words wide, so here
   the picture takes a third and the text keeps the rest. */
/* The premium cards take the NAD+ helix as a STRIP ACROSS THE TOP, not a panel down the side.
   A side panel reserves horizontal space, and these cards have long names: measured at four widths,
   a 34% panel pushed three names onto two lines and even a 26% one still did it at 1100, 900 and
   375. Narrowing it further would have kept chasing the same problem down the breakpoints. A strip
   takes vertical space instead, which nothing competes for — the text column stays full width at
   every size, so no name wraps because of the picture at any width.

   (The first measurement said nothing wrapped. It asked the <h3> for getClientRects(), and a block
   element returns one rect however many lines its text takes. A Range over the text node counts
   lines; that is what found the real answer.) */
.premcard .cardpic{position:static;width:100%;height:84px;object-fit:cover;object-position:50% 45%;
  border-radius:12px;margin-bottom:14px;opacity:.95;
  -webkit-mask-image:none;mask-image:none}
.premcard.haspic{padding-right:26px}
@media(max-width:560px){.premcard .cardpic{height:72px}}
}