/* ==========================================================================
   CORESCRIPTS — FOUNDATION
   Design system shared across lander / intake / checkout.
   Palette: clinical baby blue on white. Light chrome, tinted grounds,
   deep teal-blue for ink and dark surfaces.
   getcorescripts.com · MXS Suppliments LLC (DE) dba CoreScripts
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ==========================================================================
   BRAND PALETTE — the only colors to change when copying this to a new brand
   --------------------------------------------------------------------------
   Nine values define the look. Everything else derives from neutrals below.

     --brand-600   the primary. Buttons, links, active states, eyebrow text.
     --brand-700   button hover / darker fills.
     --brand-800   deep fill, used in gradients and the CTA band.
     --brand-900   darkest. Section backgrounds and the compliance top bar.
     --brand-500   lighter accent, for hover states on dark ground.
     --brand-300   light accent on dark backgrounds (footer sub-labels).
     --brand-100   tint. Pill backgrounds, table headers, selected outlines.
     --brand-050   faintest tint. Notice panels, product-shot backgrounds.
     --ink         the header/footer near-black. Keep it dark enough for a
                   white logo to read against it.

   Pick a 600 that passes 4.5:1 against white for body-size text, then step the
   others around it. The tints (100 / 050) must stay light enough for
   near-black text to sit on them.
   ========================================================================== */
:root{
  --brand-900:    #06394C;   /* deepest teal-blue — CTA band base, dark ground */
  --brand-800:    #08506A;
  --brand-700:    #0A6486;   /* primary button */
  --brand-600:    #0E7CA3;   /* primary — 4.7:1 on white, safe for body text */
  --brand-500:    #2B9AC2;
  --brand-300:    #7FCFEA;   /* baby blue — the brand's signature tone */
  --brand-100:    #D3EDF9;   /* baby blue tint — top bar, pills, notice panels */
  --brand-050:    #EFF8FD;   /* faintest tint */
  --ink:          #0A2C3A;

  /* brand accent, used sparingly. Token name kept as --flag so this sheet
     stays line-for-line comparable with the other sites. */
  --flag:         #0E7CA3;   /* 4.7:1 on white, so it may carry small text */
  --flag-deep:    #0A6486;   /* hover / pressed */
  --flag-soft:    #D3EDF9;

  --charcoal:     #072E3D;
}

/* --------------------------------------------------------------- tokens - */
:root{
  /* legacy aliases — the rest of the sheet refers to these */
  --blue-900:     var(--brand-900);
  --blue-800:     var(--brand-800);
  --blue-700:     var(--brand-700);
  --blue-600:     var(--brand-600);
  --blue-500:     var(--brand-500);
  --blue-300:     var(--brand-300);
  --blue-100:     var(--brand-100);
  --blue-050:     var(--brand-050);

  --ink-soft:     #1B3742;

  /* neutrals, cooled toward the brand hue so white and tint sit together */
  --paper:        #FFFFFF;
  --bg:           #EEF7FC;   /* baby-blue ground — alternates with white */
  --bg-deep:      #DCEEF7;
  --text:         #16303B;
  --text-2:       #42606C;
  --text-3:       #6E8994;
  --line:         #CFE3EC;
  --line-soft:    #E4F1F7;

  /* utility */
  --amber-bg:     #FBF3E2;
  --amber-line:   #E0C489;
  --amber-ink:    #6B4E12;
  --green:        #1B6B4B;
  --green-bg:     #E8F3ED;
  --red:          #B3121A;
  --red-bg:       #FDEDEE;

  /* system */
  --radius:       10px;
  --radius-lg:    18px;
  --radius-pill:  999px;
  --shadow-sm:    0 1px 2px rgba(6,57,76,.07), 0 2px 6px rgba(6,57,76,.06);
  --shadow-md:    0 2px 6px rgba(6,57,76,.07), 0 12px 28px rgba(6,57,76,.09);
  --shadow-lg:    0 4px 12px rgba(6,57,76,.09), 0 24px 60px rgba(6,57,76,.13);
  --container:    1200px;
  --header-h:     72px;
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.6;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--blue-700); text-decoration:none; }
a:hover{ text-decoration:underline; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,.h1,.h2,.h3,.h4{
  margin:0; color:var(--ink);
  font-family:'Outfit','Inter',system-ui,sans-serif;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.022em;   /* geometric sans wants a little tightening at display sizes */
}
p{ margin:0 0 1em; }
ul,ol{ margin:0 0 1em; padding-left:1.25em; }
hr{ border:0; border-top:1px solid var(--line); margin:0; }
:focus-visible{ outline:3px solid var(--blue-500); outline-offset:2px; border-radius:4px; }
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{ outline:none; }

/* --------------------------------------------------------------- layout - */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.container--narrow{ max-width:860px; }
.section{ padding:96px 0; }
.section--tight{ padding:64px 0; }
.section--paper{ background:var(--paper); }
.section--deep{ background:var(--blue-900); color:#fff; }
.section--deep h2,.section--deep h3{ color:#fff; }
.grid{ display:grid; gap:24px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
.stack-sm > * + *{ margin-top:8px; }

/* --------------------------------------------------------- typography --- */
.eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--flag); margin:0 0 14px;
}
.eyebrow--light{ color:var(--blue-300); }
.h1{ font-size:clamp(40px,5.2vw,66px); }
.h2{ font-size:clamp(30px,3.7vw,47px); }
.h3{ font-size:clamp(20px,2vw,25px); }
.h4{ font-size:18px; }
.lede{ font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--text-2); }
.small{ font-size:14px; line-height:1.55; color:var(--text-2); }
.micro{ font-size:12.5px; line-height:1.5; color:var(--text-3); }
.center{ text-align:center; }
.measure{ max-width:64ch; }
.measure-sm{ max-width:52ch; }
.mx-auto{ margin-inline:auto; }
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.section-head{ max-width:720px; margin:0 0 48px; }
.section-head.center{ margin-inline:auto; }

/* ------------------------------------------------------------- buttons -- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:var(--radius-pill); border:1px solid transparent;
  font-size:15px; font-weight:700; letter-spacing:.01em; cursor:pointer;
  text-decoration:none; transition:background .16s ease, color .16s ease,
    border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn--primary{ background:var(--brand-700); color:#fff; box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--brand-800); box-shadow:var(--shadow-md); }
.btn--ghost{ background:#fff; color:var(--brand-800); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--brand-500); color:var(--brand-700); background:var(--brand-050); }
.btn--white{ background:#fff; color:var(--blue-900); }
.btn--white:hover{ background:var(--blue-050); }
.btn--lg{ padding:18px 38px; font-size:16px; }
.btn--block{ display:flex; width:100%; }
.btn__arrow{ transition:transform .16s ease; }
.btn:hover .btn__arrow{ transform:translateX(3px); }
.btn[disabled],.btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

.link-arrow{ font-weight:700; font-size:15px; display:inline-flex; align-items:center; gap:7px; }

/* ------------------------------------------------------------ top bar --- */
.topbar{
  background:var(--brand-100); color:var(--brand-900);
  border-bottom:1px solid #B9DFF1;
  font-size:12.5px; letter-spacing:.01em; line-height:1.4;
}
.topbar .container{
  display:flex; align-items:center; justify-content:center; gap:10px 26px;
  flex-wrap:wrap; min-height:38px; padding-block:9px; text-align:center;
}
.topbar b{ color:var(--brand-900); font-weight:700; }
.topbar__dot{ width:4px; height:4px; border-radius:50%; background:#7FB6CD; flex:none; }

/* ------------------------------------------------------------- header --- */
.header{
  position:relative; z-index:60;
  background:#fff; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.header .container{
  display:flex; align-items:center; gap:28px; min-height:var(--header-h);
}
.brand{ display:flex; align-items:center; flex:none; }
/* the wordmark is a wide horizontal lockup (~6:1), so it is set shorter than
   on the other sites to keep its rendered width in range */
.brand img{ height:26px; width:auto; }
.nav{ display:flex; align-items:center; gap:30px; margin-left:14px; }
.nav a{
  color:var(--text-2); font-size:14.5px; font-weight:600; text-decoration:none;
  padding:6px 0; border-bottom:2px solid transparent; transition:color .15s, border-color .15s;
}
.nav a:hover{ color:var(--brand-700); border-bottom-color:var(--brand-500); text-decoration:none; }
.header__actions{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.header__phone{ color:var(--text-2); font-size:13.5px; font-weight:600; text-decoration:none; }
.header__phone:hover{ color:var(--brand-700); text-decoration:none; }
.header .btn--primary{ padding:11px 22px; font-size:14px; background:var(--brand-700); }
.header .btn--primary:hover{ background:var(--brand-800); }

/* pill toggle (packaging-style segmented control) */
.pill-toggle{
  display:inline-flex; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-pill); padding:4px; flex:none;
}
.pill-toggle a{
  padding:7px 20px; border-radius:var(--radius-pill); font-size:13.5px; font-weight:700;
  color:var(--ink); text-decoration:none; transition:background .15s, color .15s;
}
.pill-toggle a.is-active{ background:var(--brand-700); color:#fff; }
.pill-toggle a:hover{ text-decoration:none; }

/* ---------------------------------------------------------------- hero -- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1000px 560px at 78% -10%, rgba(127,207,234,.30) 0%, rgba(127,207,234,0) 64%),
    radial-gradient(1100px 620px at 14% 0%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#FFFFFF 0%,#DFF1FA 100%);
  border-bottom:1px solid var(--line);
}
.hero__lattice{ display:none; }   /* no pattern — the gradient carries the hero */
.vials{ position:relative; z-index:1; }

.hero .container{ position:relative; }
.hero__grid{
  display:grid; grid-template-columns:1.28fr .72fr; gap:48px; align-items:center;
  padding:84px 0 92px;
}
.hero h1{ margin-bottom:22px; }
.hero .lede{ margin-bottom:30px; max-width:48ch; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.hero__note{ margin:20px 0 0; max-width:44ch; }
.hero__trust{
  display:grid; grid-template-columns:repeat(2,max-content); gap:12px 30px;
  margin-top:34px; padding-top:26px; border-top:1px solid var(--line);
  max-width:max-content;
}
.hero__trust li{ display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; color:var(--ink-soft); }
.hero__trust{ list-style:none; padding:0; }
.tick{ flex:none; color:var(--brand-600); }

/* hero product shot */
.hero__visual{ position:relative; }

/* --------------------------------------------------------- trust strip -- */
.trustbar{ background:var(--paper); border-bottom:1px solid var(--line); }
.trustbar .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px 40px; flex-wrap:wrap; padding-block:26px;
}
.trustbar__item{ display:flex; align-items:center; gap:11px; }
.trustbar__item svg{ flex:none; color:var(--blue-600); }
.trustbar__item span{ font-size:13.5px; font-weight:600; color:var(--ink-soft); line-height:1.35; }
.trustbar__item em{ display:block; font-style:normal; font-weight:400; font-size:12px; color:var(--text-3); }

/* --------------------------------------------------------------- cards -- */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px; box-shadow:var(--shadow-sm);
}
.card--flat{ box-shadow:none; }
.card h3{ margin-bottom:10px; }
.card p:last-child{ margin-bottom:0; }

/* steps */
.step{ position:relative; padding-top:8px; }
.step__num{
  width:44px; height:44px; border-radius:50%; background:var(--brand-600); color:#fff;
  display:grid; place-items:center; margin-bottom:18px;
  font-family:'Outfit','Inter',sans-serif; font-size:18px; font-weight:600; letter-spacing:-.015em;
}
.step h3{ font-size:19px; margin-bottom:8px; }
.step p{ margin:0; color:var(--text-2); font-size:15px; }
.steps{ counter-reset:step; position:relative; }
.steps::before{
  content:''; position:absolute; top:27px; left:8%; right:8%; height:1px;
  background:linear-gradient(90deg,transparent,var(--blue-300),var(--blue-300),transparent);
}
@media (max-width:860px){ .steps::before{ display:none; } }

/* med option cards */
.med{ display:flex; flex-direction:column; }
.med__tag{
  align-self:flex-start; font-size:11.5px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding:6px 12px; border-radius:var(--radius-pill);
  background:var(--blue-100); color:var(--blue-800); margin-bottom:16px;
}
.med__tag--alt{ background:var(--line-soft); color:var(--ink-soft); }
.med ul{ list-style:none; padding:0; margin:18px 0 0; }
.med li{ display:flex; gap:10px; font-size:15px; color:var(--text-2); padding:9px 0; border-top:1px solid var(--line-soft); }
.med li:first-child{ border-top:0; }
.med__foot{ margin-top:auto; padding-top:20px; }

/* --------------------------------------------------------------- price -- */
.price-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.plan{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:30px; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
}
.plan--featured{ border-color:var(--blue-600); box-shadow:var(--shadow-md); position:relative; }
.plan__flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--blue-700); color:#fff; font-size:11px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; padding:6px 16px; border-radius:var(--radius-pill);
  white-space:nowrap;
}
.plan__name{ font-size:16px; font-weight:800; letter-spacing:-.01em; }
.plan__price{ display:flex; align-items:baseline; gap:5px; margin:14px 0 4px; }
.plan__price b{ font-family:'Outfit','Inter',sans-serif; font-size:52px; font-weight:700; letter-spacing:-.035em; line-height:1; color:var(--ink); }
.plan__price span{ font-size:14px; color:var(--text-3); font-weight:500; }
.plan__sub{ font-size:13px; color:var(--text-3); margin:0 0 22px; min-height:36px; }
.plan ul{ list-style:none; padding:0; margin:0 0 26px; }
.plan li{ display:flex; gap:10px; font-size:14.5px; color:var(--text-2); padding:8px 0; }
.plan .btn{ margin-top:auto; }

/* ------------------------------------------------------------- notices -- */
.notice{
  border-radius:var(--radius); padding:20px 22px; font-size:14.5px; line-height:1.6;
  border:1px solid var(--line); background:var(--blue-050); color:var(--ink-soft);
}
.notice p:last-child{ margin-bottom:0; }
.notice strong{ color:var(--ink); }
.notice--warn{ background:var(--amber-bg); border-color:var(--amber-line); color:var(--amber-ink); }
.notice--warn strong{ color:#4A3608; }
.notice--boxed{ border:2px solid var(--ink); background:#fff; color:var(--ink-soft); border-radius:8px; padding:24px; }
.notice--boxed .h4{ text-transform:uppercase; letter-spacing:.08em; font-size:13px; margin-bottom:12px; }
.notice--danger{ background:var(--red-bg); border-color:#E3B9B6; color:#6B1A18; }
.notice--danger strong{ color:#4E120F; }
.notice--danger a{ color:#6B1A18; text-decoration:underline; }

/* ---------------------------------------------------------------- FAQ --- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding:24px 44px 24px 0; position:relative;
  font-family:'Outfit','Inter',sans-serif; font-weight:600;
  font-size:18.5px; letter-spacing:-.015em; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:2px solid var(--blue-600); border-bottom:2px solid var(--blue-600);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq .faq__body{ padding:0 60px 26px 0; color:var(--text-2); font-size:15.5px; }
.faq .faq__body p:last-child{ margin-bottom:0; }

/* ------------------------------------------------------------ callout --- */
.cta-band{
  background:
    radial-gradient(760px 380px at 50% -12%, rgba(127,207,234,.26) 0%, rgba(127,207,234,0) 68%),
    linear-gradient(158deg,var(--brand-700) 0%,var(--brand-900) 100%);
  color:#fff; border-radius:var(--radius-lg); padding:56px; text-align:center;
  position:relative; overflow:hidden;
}
.cta-band h2{ color:#fff; margin-bottom:14px; }
.cta-band p{ color:#CDEAF6; }

/* --------------------------------------------------------------- table -- */
.tbl{ width:100%; border-collapse:collapse; font-size:14.5px; }
.tbl th,.tbl td{ text-align:left; padding:14px 16px; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl th{ font-weight:700; color:var(--ink); font-size:13px; letter-spacing:.04em; text-transform:uppercase; }
.tbl td{ color:var(--text-2); }

/* -------------------------------------------------------------- footer -- */
.footer{ background:var(--charcoal); color:#A9C6D3; font-size:14px; }
.footer a{ color:#D3E9F3; text-decoration:none; }
.footer a:hover{ color:#fff; text-decoration:underline; }
.footer__top{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:48px; padding:64px 0 48px; }
.footer__brand img{ height:32px; width:auto; margin-bottom:22px; }
.footer h4{ color:#FFFFFF; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px; font-weight:700; }
.footer ul{ list-style:none; padding:0; margin:0; }
.footer li{ margin-bottom:11px; }
.footer__addr{ font-style:normal; line-height:1.7; font-size:13.5px; }
.footer__seals{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.seal{
  border:1px solid rgba(255,255,255,.22); border-radius:8px; padding:9px 13px; font-size:10.5px;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9FC0CE;
  line-height:1.3; text-align:center; background:rgba(255,255,255,.07);
}
.seal b{ display:block; color:#fff; font-size:11.5px; letter-spacing:.06em; }
.footer__legal{ border-top:1px solid rgba(255,255,255,.14); padding:32px 0 56px; font-size:12.5px; line-height:1.7; color:#94B6C5; }
.footer__legal p{ margin-bottom:14px; }
.footer__bar{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-top:8px; }
.footer__bar nav{ display:flex; gap:20px; flex-wrap:wrap; }

/* ============================================================ QUIZ ====== */
.quiz-body{ background:var(--bg); }
.quiz-header{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50; }
.quiz-header .container{ display:flex; align-items:center; min-height:62px; gap:20px; }
.quiz-header .brand img{ height:24px; }
.quiz-header__mid{ margin-left:auto; margin-right:auto; color:var(--text-3); font-size:13px; display:flex; align-items:center; gap:8px; }
.quiz-header__mid svg{ color:var(--brand-600); }
.quiz-header__exit{ color:var(--text-3); font-size:13.5px; font-weight:600; text-decoration:none; }
.quiz-header__exit:hover{ color:var(--brand-700); text-decoration:none; }

.progress{ height:4px; background:var(--bg-deep); position:sticky; top:62px; z-index:49; }
.progress__bar{ height:100%; width:9%; background:var(--flag); transition:width .35s cubic-bezier(.4,0,.2,1); }

.quiz-wrap{ max-width:660px; margin-inline:auto; padding:52px 24px 120px; }
.quiz-step{ display:none; animation:fade .3s ease; }
.quiz-step.is-active{ display:block; }
@keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
.quiz-step__count{ font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-600); margin-bottom:14px; }
.quiz-step h2{ font-size:clamp(26px,3.3vw,34px); margin-bottom:12px; }
.quiz-step__help{ color:var(--text-2); font-size:15.5px; margin-bottom:28px; }

.opts{ display:grid; gap:12px; margin-bottom:28px; }
.opts--2{ grid-template-columns:1fr 1fr; }
.opt{
  position:relative;
  display:flex; align-items:center; gap:14px; background:var(--paper);
  border:1.5px solid var(--line); border-radius:var(--radius); padding:18px 20px;
  cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s;
}
.opt:hover{ border-color:var(--brand-300); background:var(--brand-050); }
.opt input{
  position:absolute; opacity:0; margin:0; left:20px; top:50%;
  width:22px; height:22px; transform:translateY(-11px);
}
.opt__mark{
  flex:none; width:22px; height:22px; border-radius:50%; border:2px solid #A9CBDA;
  display:grid; place-items:center; transition:border-color .15s, background .15s;
}
.opt__mark::after{ content:''; width:9px; height:9px; border-radius:50%; background:#fff; transform:scale(0); transition:transform .15s; }
.opt--check .opt__mark{ border-radius:6px; }
.opt--check .opt__mark::after{ border-radius:2px; width:11px; height:6px; background:transparent; border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(-45deg) scale(0); margin-top:-3px; }
.opt input:checked ~ .opt__mark{ border-color:var(--blue-600); background:var(--blue-600); }
.opt input:checked ~ .opt__mark::after{ transform:scale(1); }
.opt--check input:checked ~ .opt__mark::after{ transform:rotate(-45deg) scale(1); }
.opt input:checked ~ .opt__body .opt__title{ color:var(--blue-800); }
.opt:has(input:checked){ border-color:var(--brand-600); box-shadow:0 0 0 3px rgba(14,124,163,.18); background:var(--brand-050); }
.opt input:focus-visible ~ .opt__mark{ outline:3px solid var(--blue-500); outline-offset:2px; }
.opt__body{ flex:1; }
.opt__title{ display:block; font-size:15.5px; font-weight:600; color:var(--ink); line-height:1.35; }
.opt__desc{ display:block; font-size:13.5px; color:var(--text-3); margin-top:3px; line-height:1.45; }
.opt__emoji{ font-size:22px; flex:none; }

.field{ margin-bottom:20px; }
.field > label,.field__label{ display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:8px; }
.field__hint{ font-size:12.5px; color:var(--text-3); margin-top:7px; line-height:1.5; }
.input,select.input,textarea.input{
  width:100%; background:#fff; border:1.5px solid var(--line); border-radius:10px;
  padding:14px 16px; font-size:16px; color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
.input::placeholder{ color:#93AEBA; }
.input:focus{ outline:none; border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(0,0,0,.12); }
select.input{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2375768A' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; }
textarea.input{ min-height:104px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-row--3{ grid-template-columns:1fr 1fr 1fr; }
.input-group{ display:flex; gap:10px; align-items:center; }
.input-group .input{ flex:1; }
.input-suffix{ font-size:14px; color:var(--text-3); font-weight:600; flex:none; }

.bmi-readout{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--blue-050); border:1px solid var(--blue-100); border-radius:var(--radius);
  padding:16px 20px; margin-top:6px;
}
.bmi-readout__label{ font-size:13px; color:var(--text-2); font-weight:600; }
.bmi-readout__val{ font-size:26px; font-weight:800; color:var(--blue-800); letter-spacing:-.03em; line-height:1; }

.consent{ display:flex; gap:13px; align-items:flex-start; padding:15px 0; border-top:1px solid var(--line-soft); }
.consent:first-of-type{ border-top:0; }
.consent input{ margin:2px 0 0; width:19px; height:19px; flex:none; accent-color:var(--blue-600); }
.consent label{ font-size:13.5px; line-height:1.55; color:var(--text-2); }
.consent label b{ color:var(--ink); font-weight:600; }

.quiz-nav{ display:flex; align-items:center; gap:14px; margin-top:32px; }
.quiz-nav .btn{ min-width:150px; }
.btn--back{
  background:none; border:0; color:var(--text-2); font-size:14.5px; font-weight:600;
  cursor:pointer; padding:10px 6px; border-radius:8px;
}
.btn--back:hover{ color:var(--ink); }
.quiz-foot{
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--text-3); line-height:1.6;
}
.review-list{ list-style:none; padding:0; margin:0 0 28px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; overflow:hidden; }
.review-list li{ display:flex; justify-content:space-between; gap:20px; padding:15px 20px; border-top:1px solid var(--line-soft); font-size:14.5px; }
.review-list li:first-child{ border-top:0; }
.review-list dt,.review-list .k{ color:var(--text-3); }
.review-list .v{ font-weight:600; color:var(--ink); text-align:right; }

/* =========================================================== CHECKOUT === */
.co-body{ background:var(--bg); }
.co-grid{ display:grid; grid-template-columns:1fr 420px; gap:56px; align-items:start; padding:52px 0 110px; }
.co-main h1{ font-size:clamp(28px,3.2vw,36px); margin-bottom:8px; }
.co-block{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; margin-bottom:22px; box-shadow:var(--shadow-sm); }
.co-block__head{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.co-block__num{ width:26px; height:26px; border-radius:50%; background:var(--brand-700); color:#fff; font-size:12.5px; font-weight:800; display:grid; place-items:center; flex:none; }
.co-block__head h2{ font-size:18px; letter-spacing:-.015em; }

.plan-pick{ display:grid; gap:12px; }
.plan-pick .opt__title{ font-size:15.5px; }
.plan-pick .opt__price{ text-align:right; flex:none; white-space:nowrap; min-width:66px; }
.plan-pick .opt__price b{ font-size:18px; font-weight:800; letter-spacing:-.02em; display:block; color:var(--ink); }
.plan-pick .opt__price span{ font-size:12px; color:var(--text-3); }
.badge-save{ display:inline-block; background:var(--green-bg); color:var(--green); font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:5px; margin-left:8px; }

.pay-methods{ display:flex; gap:10px; margin-bottom:20px; flex-wrap:wrap; }
.pay-method{ flex:1; min-width:120px; text-align:center; padding:14px; border:1.5px solid var(--line); border-radius:10px; background:#fff; cursor:pointer; font-size:14px; font-weight:600; }
.pay-method.is-active{ border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(0,0,0,.10); }
.card-brands{ display:flex; gap:6px; align-items:center; }
.card-brands span{ font-size:9.5px; font-weight:800; letter-spacing:.02em; color:var(--text-2); border:1px solid var(--line); border-radius:4px; padding:4px 6px; background:var(--brand-050); }

/* summary rail */
.co-rail{ position:sticky; top:88px; }
.summary{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); }
.summary__head{ padding:22px 26px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.summary__head h2{ font-size:16px; letter-spacing:-.01em; }
.summary__item{ display:flex; gap:16px; padding:22px 26px; border-bottom:1px solid var(--line-soft); }
.summary__thumb{
  width:66px; height:66px; border-radius:10px; flex:none;
  background:linear-gradient(150deg,var(--blue-700),var(--blue-500));
  display:grid; place-items:center;
}
.summary__lines{ padding:20px 26px; }
.summary__line{ display:flex; justify-content:space-between; gap:16px; font-size:14.5px; padding:7px 0; color:var(--text-2); }
.summary__line b{ color:var(--ink); font-weight:600; }
.summary__total{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:18px 26px; border-top:1px solid var(--line); background:var(--brand-050); }
.summary__total .lbl{ font-size:15px; font-weight:700; color:var(--ink); }
.summary__total .amt{ font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--ink); }
.summary__terms{ padding:20px 26px; border-top:1px solid var(--line); background:var(--brand-050); }
.promo{ display:flex; gap:8px; padding:0 26px 20px; }
.promo .input{ padding:11px 14px; font-size:14px; }
.promo .btn{ padding:11px 18px; font-size:13.5px; }

.rail-trust{ margin-top:20px; display:grid; gap:12px; }
.rail-trust__item{ display:flex; gap:11px; align-items:flex-start; font-size:13px; color:var(--text-2); line-height:1.5; }
.rail-trust__item svg{ flex:none; color:var(--blue-600); margin-top:1px; }
.rail-trust__item b{ color:var(--ink); display:block; font-size:13.5px; }

/* ------------------------------------------------------------ helpers --- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.divider{ height:1px; background:var(--line); margin:28px 0; }
.pill{
  display:inline-flex; align-items:center; gap:7px; background:var(--blue-100); color:var(--blue-800);
  font-size:12px; font-weight:700; letter-spacing:.04em; padding:6px 13px; border-radius:var(--radius-pill);
}

/* ---------------------------------------------------------- responsive - */
@media (max-width:1080px){
  .co-grid{ grid-template-columns:1fr; gap:32px; }
  .co-rail{ position:static; }
  .footer__top{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:960px){
  .nav,.header__phone{ display:none; }
  .hero__grid{ grid-template-columns:1fr; gap:44px; padding:56px 0 64px; }
  .hero .lede{ max-width:none; }
  .hero__visual{ max-width:420px; margin-inline:auto; }
  .grid-3,.grid-4,.price-grid{ grid-template-columns:1fr 1fr; }
  .section{ padding:68px 0; }
}
@media (max-width:720px){
  body{ font-size:16px; }
  .hero__trust{ grid-template-columns:1fr; }
  .grid-2,.grid-3,.grid-4,.price-grid,.field-row,.field-row--3,.opts--2{ grid-template-columns:1fr; }
  .footer__top{ grid-template-columns:1fr; }
  .cta-band{ padding:38px 24px; }
  .card{ padding:24px; }
  .co-block{ padding:22px; }
    .quiz-wrap{ padding:36px 20px 90px; }
  .hero__cta .btn,.quiz-nav .btn,.plan .btn{ width:100%; }
  .header .btn--primary{ padding:10px 16px; font-size:13px; }
  .doc-hero h1{ font-size:clamp(26px,7vw,34px); }
  .quiz-nav{ flex-direction:column-reverse; align-items:stretch; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}

/* ==================================================== PRODUCT VIALS ===== */
.hero__visual{ position:relative; padding-block:4px; }
.vials{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  align-items:end; justify-items:center;
}
.vials img{
  width:100%; max-width:252px; height:auto;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.20));
}
.vials__floor{
  position:absolute; left:6%; right:6%; bottom:-6px; height:22px; z-index:-1;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.15), transparent 72%);
}

/* vial captions, mirroring the packaging layout */
.vials__caps{
  list-style:none; padding:0; margin:26px 0 0;
  display:grid; grid-template-columns:1fr 1fr; gap:14px; text-align:center;
}
.vials__caps li{
  font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-3); line-height:1.5;
}
.vials__caps b{
  display:block; font-size:15px; font-weight:800; letter-spacing:.14em;
  color:var(--ink); margin-bottom:4px;
}

/* product cards in the medications section */
.product{
  display:grid; grid-template-columns:196px 1fr; gap:26px; align-items:start;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow-sm);
}
.product__shot{
  background:linear-gradient(170deg,#FFFFFF,#DFF1FA);
  border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:18px 14px; display:grid; place-items:center;
}
.product__shot img{
  height:206px; width:auto; max-width:100%;
  filter:drop-shadow(0 12px 16px rgba(0,0,0,.18));
}
.product h3{ margin-bottom:6px; }
.product__mol{ font-size:12.5px; color:var(--text-3); margin:0 0 14px; letter-spacing:.01em; }
.product ul{ list-style:none; padding:0; margin:14px 0 0; }
.product li{ display:flex; gap:9px; font-size:14.5px; color:var(--text-2); padding:7px 0; }
.product .pill{ margin-bottom:12px; }
@media (max-width:600px){
  .product{ grid-template-columns:1fr; gap:22px; }
  /* full-width panel with the vial centred in it, rather than a small
     left-aligned thumbnail */
  .product__shot{ max-width:none; width:100%; padding:26px 20px; }
  .product__shot img{ height:auto; width:100%; max-width:220px; }
}

/* stacked notices and cards inside a quiz step need breathing room */
.quiz-step .notice + .card,
.quiz-step .notice + .notice,
.quiz-step .card + .notice{ margin-top:18px; }
.quiz-step .notice{ margin-bottom:0; }
.quiz-step .opts + .notice{ margin-bottom:8px; }

/* ====================================================== DOCUMENT PAGES == */
.doc-hero{
  background:linear-gradient(180deg,#F5FBFE 0%,#DFF1FA 100%);
  border-bottom:1px solid var(--line);
  padding:56px 0 48px;
}
.doc-hero h1{ font-size:clamp(30px,3.8vw,46px); margin-bottom:14px; max-width:20ch; }
.doc-hero .lede{ max-width:62ch; margin-bottom:0; }
.doc-meta{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:22px;
  font-size:13px; color:var(--text-3);
}
.doc-meta b{ color:var(--ink-soft); font-weight:600; }

.doc-grid{
  display:grid; grid-template-columns:258px minmax(0,1fr); gap:56px;
  align-items:start; padding:56px 0 96px;
}
.doc-toc{ position:sticky; top:96px; }
.doc-toc h2{
  font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); margin:0 0 14px; font-weight:700;
}
.doc-toc ol{ list-style:none; padding:0; margin:0; counter-reset:toc; }
.doc-toc li{ counter-increment:toc; }
.doc-toc a{
  display:flex; gap:10px; padding:7px 0; font-size:13.5px; line-height:1.4;
  color:var(--text-2); text-decoration:none; border-left:2px solid transparent; padding-left:12px;
  margin-left:-14px; transition:color .15s, border-color .15s;
}
.doc-toc a::before{ content:counter(toc) "."; color:var(--text-3); flex:none; font-variant-numeric:tabular-nums; }
.doc-toc a:hover{ color:var(--blue-700); border-left-color:var(--blue-300); text-decoration:none; }

.doc-body{ max-width:74ch; min-width:0; }   /* min-width:0 lets wide tables scroll instead of stretching the grid */
.doc-body > section{ padding-bottom:42px; }
.doc-body > section + section{ border-top:1px solid var(--line); padding-top:42px; }
.doc-body h2{
  font-size:24px; margin-bottom:16px;
  display:flex; gap:12px; align-items:baseline;
}
.doc-body h2 .n{
  font-size:13px; font-weight:800; color:var(--blue-600);
  font-variant-numeric:tabular-nums; flex:none; letter-spacing:0;
}
.doc-body h3{ font-size:17.5px; margin:28px 0 10px; }
.doc-body p,.doc-body li{ color:var(--text-2); font-size:16px; line-height:1.65; }
.doc-body strong{ color:var(--ink); }
.doc-body ul,.doc-body ol{ padding-left:22px; margin-bottom:1em; }
.doc-body li{ margin-bottom:8px; }
.doc-body li::marker{ color:var(--brand-500); }
.doc-body dl{ margin:0 0 1em; }
.doc-body dt{ font-weight:700; color:var(--ink); font-size:15.5px; margin-top:16px; }
.doc-body dd{ margin:4px 0 0; color:var(--text-2); font-size:15.5px; line-height:1.6; }

.plain{
  background:var(--blue-050); border:1px solid var(--blue-100);
  border-left:3px solid var(--blue-600); border-radius:0 var(--radius) var(--radius) 0;
  padding:18px 22px; margin:0 0 30px;
}
.plain__label{
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue-700); margin:0 0 6px;
}
.plain p{ margin:0; font-size:15px; line-height:1.6; color:var(--ink-soft); }
.plain p + p{ margin-top:8px; }

.doc-body .notice{ margin-bottom:22px; }
.doc-body .tbl{ margin-bottom:22px; }
.doc-body .tbl td,.doc-body .tbl th{ font-size:14.5px; }

.doc-cta{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px 28px; margin-top:8px;
}
.doc-cta h3{ margin:0 0 8px; font-size:17px; }
.doc-cta p{ margin:0; font-size:15px; }

.doc-nav{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:38px;
  padding-top:26px; border-top:1px solid var(--line);
}
.doc-nav a{
  font-size:13.5px; font-weight:600; color:var(--text-2); text-decoration:none;
  border:1px solid var(--line); border-radius:var(--radius-pill); padding:8px 16px;
  background:var(--paper); transition:border-color .15s,color .15s;
}
.doc-nav a:hover{ border-color:var(--blue-600); color:var(--blue-700); text-decoration:none; }

@media (max-width:960px){
  .doc-grid{ grid-template-columns:minmax(0,1fr); gap:32px; padding:36px 0 72px; }
  .doc-toc{ position:static; border:1px solid var(--line); border-radius:var(--radius);
            background:var(--paper); padding:20px 22px; }
  .doc-toc a{ margin-left:0; }
}

/* inline code, used where pages reference config keys */
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em; background:var(--blue-050); border:1px solid var(--blue-100);
  border-radius:5px; padding:1px 5px; color:var(--blue-800);
}

/* ==================================================== FORM VALIDATION ==== */

/* number inputs are used for range-validated fields; the spinners are noise */
.input[type="number"]{ -moz-appearance:textfield; appearance:textfield; }
.input[type="number"]::-webkit-outer-spin-button,
.input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* :user-invalid only fires after the field has been interacted with, so empty
   required fields are not painted red before the user has had a chance */
.input:user-invalid{
  border-color:#000000;
  box-shadow:0 0 0 3px rgba(0,0,0,.10);
}
.input:user-invalid:focus{
  border-color:#000000;
  box-shadow:0 0 0 3px rgba(0,0,0,.16);
}

/* set by JS for control groups, where a single input cannot express the rule */
.opt.is-invalid,
.opts.is-invalid > .opt{ border-color:#000000; }
.consent.is-invalid label{ color:var(--red); }

.field-error{
  display:none; align-items:flex-start; gap:7px; margin:9px 0 0;
  font-size:13px; line-height:1.45; color:var(--red); font-weight:600;
}
.field-error.is-shown{ display:flex; }
.field-error svg{ flex:none; margin-top:2px; }

/* "all fields required unless marked optional" hint */
.req-note{
  font-size:12.5px; color:var(--text-3); margin:-14px 0 24px;
}
.req-note b{ color:var(--ink-soft); font-weight:600; }

/* checkout success panel */
.co-done{
  background:var(--green-bg); border:1px solid var(--green); border-radius:var(--radius);
  padding:22px 24px; margin-top:24px;
}
.co-done h3{ font-size:17px; margin:0 0 8px; color:var(--ink); }
.co-done p{ margin:0; font-size:14.5px; color:var(--ink-soft); }

/* payment-method chips are real radios; the control itself is visually hidden */
.pay-method{ position:relative; display:block; }
.pay-method input{
  position:absolute; opacity:0; margin:0; left:50%; top:50%;
  width:18px; height:18px; transform:translate(-9px,-9px);
}
#cardPanel[hidden]{ display:none; }

/* single-product hero variant */
.vials--single{ grid-template-columns:1fr; }
.vials--single img{ max-width:304px; }
.vials__caps--single{ grid-template-columns:1fr; }

/* ==================================================== LIFESTYLE BLOCK === */
.lifestyle-figure{
  margin:0 auto; max-width:760px; text-align:center;
}
.lifestyle-figure img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/2; object-fit:cover;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}
.lifestyle-figure figcaption{
  margin:14px auto 0; max-width:56ch;
  font-size:11.5px; line-height:1.5; color:var(--text-3);
}

/* one card per factor, stacked, matching the image width above */
.lifestyle-list{
  list-style:none; padding:0;
  margin:36px auto 0; max-width:760px;
  display:grid; grid-template-columns:1fr; gap:12px;
}
.lifestyle-list li{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:22px 26px;
}
.lifestyle-list .tick{ margin-top:1px; }
.lifestyle-list b{
  display:block; font-size:17.5px; font-weight:700; letter-spacing:-.01em;
  color:var(--ink); margin-bottom:5px;
}
.lifestyle-list span{ display:block; font-size:15px; line-height:1.55; color:var(--text-2); }

.lifestyle-cta{ margin-top:34px; text-align:center; }
.lifestyle-cta .micro{ margin:14px auto 0; max-width:46ch; }

@media (max-width:560px){
  .lifestyle-list li{ padding:20px; }
}

/* single all-inclusive plan + billing steps */
.price-solo{
  display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:44px;
  align-items:start; max-width:920px; margin-inline:auto;
}
.price-solo__card{ position:relative; }
.price-solo__terms h3{ margin-bottom:14px; }
.price-solo__terms ol{ padding-left:20px; margin:0; }
.price-solo__terms li{ margin-bottom:10px; color:var(--text-2); }
.price-solo__terms li::marker{ color:var(--brand-600); font-weight:700; }
@media (max-width:860px){
  .price-solo{ grid-template-columns:1fr; gap:28px; }
}

/* single-program summary on checkout */
.co-plan{
  border:1.5px solid var(--brand-600); border-radius:var(--radius);
  background:var(--brand-050); padding:20px 22px;
  box-shadow:0 0 0 3px rgba(14,124,163,.14);
}
.co-plan__row{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.co-plan__price{ text-align:right; white-space:nowrap; flex:none; }
.co-plan__price b{ font-size:26px; font-weight:800; letter-spacing:-.03em; color:var(--ink); display:block; }
.co-plan__price span{ font-size:12.5px; color:var(--text-3); }
@media (max-width:560px){
  .co-plan__row{ flex-direction:column; }
  .co-plan__price{ text-align:left; }
}

/* product shot inside the closing call to action */
.cta-band__shot{
  display:block; margin:0 auto 30px;
  width:304px; max-width:100%; height:auto;   /* same rendered size as the hero shot */
  filter:drop-shadow(0 20px 30px rgba(0,0,0,.38));
}
@media (max-width:560px){
  .cta-band__shot{ margin-bottom:24px; }
}

/* in a monochrome palette colour alone cannot mark a link */
.doc-body p a, .doc-body li a, .doc-body dd a,
.faq__body a, .notice a, .quiz-foot a, .consent label a, .field__hint a,
.footer__legal a, .micro a{
  text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px;
}
.footer a:not(.seal){ text-decoration:none; }
.footer ul a:hover, .footer__bar a:hover{ text-decoration:underline; }

/* eyebrow rule — a small gold mark before each section label */
.eyebrow{ display:flex; align-items:center; gap:10px; }
.eyebrow::before{
  content:''; width:22px; height:3px; background:var(--flag); flex:none; border-radius:2px;
}
.section-head.center .eyebrow{ justify-content:center; }
.cta-band .eyebrow::before{ background:var(--brand-300); }

/* a thin accent stripe above the compliance bar */
.topbar{ border-top:4px solid var(--brand-600); }

/* wide tables scroll inside their own box so the page never scrolls sideways */
.tbl-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin-bottom:22px; }
.tbl-scroll .tbl{ min-width:520px; margin-bottom:0; }
@media (max-width:560px){
  .tbl-scroll{ border:1px solid var(--line); border-radius:var(--radius); }
  .tbl-scroll .tbl th, .tbl-scroll .tbl td{ padding:12px 14px; }
}