/* ==========================================================================
   FOUNDATIONRX — FOUNDATION
   Design system shared across lander / intake / checkout.
   Palette: Foundation Nutrition navy (#1D3363, sampled from the logo) on
   white, with the storefront's neutral grounds (#F5F5F5, #E1EDF5) and
   near-black ink (#111417). Type: Open Sans, as on foundationdaily.com.
   foundationrx.health
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&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:    #101C3A;   /* deepest navy — CTA band base, dark ground */
  --brand-800:    #16284F;
  --brand-700:    #1D3363;   /* primary button — the logo navy */
  --care-blue:    #0083BF;   /* care.foundationrx.health login panel — header CTA and home gate */
  --care-blue-deep: #00486C; /* care's darker blue — hover and gradient ends */
  --brand-600:    #264481;   /* primary — 9:1 on white */
  --brand-500:    #3F5EA6;
  --brand-300:    #A9BBDD;   /* light accent on dark ground */
  --brand-100:    #E1EDF5;   /* storefront light blue — top bar, pills, notice panels */
  --brand-050:    #F0F5F9;   /* faintest tint */
  --ink:          #111417;

  /* brand accent, used sparingly. Token name kept as --flag so this sheet
     stays line-for-line comparable with the other sites. */
  --flag:         #1D3363;   /* 12:1 on white */
  --flag-deep:    #16284F;   /* hover / pressed */
  --flag-soft:    #E1EDF5;

  --charcoal:     #111417;
}

/* --------------------------------------------------------------- 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:     #1F2A44;

  /* neutrals, cooled toward the brand hue so white and tint sit together */
  --paper:        #FFFFFF;
  --bg:           #F5F5F5;   /* storefront grey — alternates with white */
  --bg-deep:      #E1EDF5;
  --text:         #1A1D22;
  --text-2:       #4B5160;
  --text-3:       #737A8A;
  --line:         #D9DEE6;
  --line-soft:    #EBEEF3;

  /* 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(17,20,23,.07), 0 2px 6px rgba(17,20,23,.06);
  --shadow-md:    0 2px 6px rgba(17,20,23,.07), 0 12px 28px rgba(17,20,23,.09);
  --shadow-lg:    0 4px 12px rgba(17,20,23,.09), 0 24px 60px rgba(17,20,23,.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:'Open Sans',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:'Open Sans',system-ui,sans-serif;
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
}
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:.22em; 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 #C9D9E6;
  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:#8FA3BF; 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; }
/* wordmark lockup (~5.4:1) */
.brand img{ height:30px; 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(--care-blue); }
.header .btn--primary:hover{ background:var(--care-blue-deep); }

/* 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(225,237,245,.9) 0%, rgba(225,237,245,0) 64%),
    radial-gradient(1100px 620px at 14% 0%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#FFFFFF 0%,#E1EDF5 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:500; font-size:12.5px; color:var(--text-2); }

/* --------------------------------------------------------------- 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:'Open Sans',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:'Open Sans',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:'Open Sans',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(169,187,221,.22) 0%, rgba(225,237,245,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:#D5DDEA; }

/* --------------------------------------------------------------- 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:#B4B9C2; font-size:14px; }
.footer a{ color:#DCE0E6; 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:#A9AFBA;
  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:#9DA3AE; }
.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; }
}
/* small phones: logo + CTA must fit in 375px with the 24px gutters */
@media (max-width:400px){
  .header .container{ gap:12px; }
  .brand img{ height:24px; }
  .header .btn--primary{ padding:9px 14px; font-size:12.5px; }
}
@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,#E1EDF5);
  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%,#E1EDF5 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(29,51,99,.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; }
}

/* ================================================= PRODUCT PHOTOGRAPHY == */
/* the hero shot is a photo with its own baked background, so it fills the
   column as a rounded card rather than floating like a cut-out */
.hero__shot{
  display:block; width:100%; height:auto; aspect-ratio:777/824; object-fit:cover;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md);
}
.cta-band__shot--photo{
  width:260px; border-radius:var(--radius-lg); filter:none; box-shadow:var(--shadow-lg);
}
.product__shot img{ filter:none; }

/* ================================================================ SHOP == */
.shop-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.shop-item{ display:flex; flex-direction:column; }
.shop-item .pill{ align-self:flex-start; margin-bottom:14px; }
.shop-item h2{ margin-bottom:10px; }
.shop-item__price{ margin:auto 0 6px; padding-top:14px; }
.shop-item__price b{ font-size:28px; color:var(--ink); }
.shop-item .btn{ margin-top:14px; }
@media (max-width:900px){ .shop-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .shop-grid{ grid-template-columns:1fr; } }

/* accepted card brands, footer bar */
.pay-icons{ display:flex; gap:8px; list-style:none; margin:0; padding:0; }
.pay-icons li{ margin:0; line-height:0; }
.pay-icons svg{ width:38px; height:24px; display:block; }

/* ========================================================= ENTRY FORK == */
.entry-fork{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:28px 0 8px; }
.entry-fork__path{ display:flex; flex-direction:column; gap:6px; padding:18px 20px; border-radius:var(--radius-lg);
  background:#fff; border:1px solid var(--line, #dfe5f2); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-sm, none); }
.entry-fork__path:hover{ border-color:var(--brand-500, #2b4fd8); }
.entry-fork__path--new{ background:var(--brand-700, #1d3aa8); border-color:transparent; color:#fff; }
.entry-fork__path--new .entry-fork__sub, .entry-fork__path--new .entry-fork__label{ color:#d9e2ff; }
.entry-fork__label{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted, #5b6478); }
.entry-fork__title{ display:flex; align-items:center; gap:8px; font-size:19px; font-weight:700; }
.header__login{ color:var(--text-2); font-size:13.5px; font-weight:600; text-decoration:none; }
.header__login:hover{ color:var(--brand-700); text-decoration:none; }
@media (max-width:600px){ .entry-fork{ grid-template-columns:1fr; } }
.nav a, .header__login, .header__phone, .header .btn{ white-space:nowrap; }
/* the mock's top right is phone + one button; the login link only fits on wide screens */
@media (max-width:1439px){ .header__login{ display:none; } }
@media (max-width:1200px){ .header__phone{ display:none; } .nav{ gap:24px; } }

/* ===================================================== TRT INTEREST LIST ==
   Dyllen's Version B (menu tab + popup), 2026-10-29. */
/* ---------- shared bits ---------- */
.trt-dot{ position:relative; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--brand-600); flex:none; }
.trt-dot::after{
  content:''; position:absolute; inset:0; border-radius:50%; background:var(--brand-600);
  animation:trtPing 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes trtPing{ 0%{ transform:scale(1); opacity:.55; } 80%,100%{ transform:scale(2.8); opacity:0; } }

/* reveal-on-load stagger */
.trt-rv{ opacity:0; transform:translateY(16px); }
.is-live .trt-rv{ animation:trtUp .8s cubic-bezier(.16,1,.3,1) forwards; animation-delay:var(--d,0ms); }
@keyframes trtUp{ to{ opacity:1; transform:none; } }

/* ---------- VERSION B: menu tab ---------- */
.nav a.nav__trt{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--brand-700); font-weight:800; letter-spacing:.005em;
  border-bottom-color:var(--brand-500);
}
.nav a.nav__trt:hover{ color:var(--brand-800); border-bottom-color:var(--brand-700); }

.trt-strip{ display:none; }
@media (max-width:960px){
  .trt-strip{
    position:relative; overflow:hidden; isolation:isolate;
    display:flex; align-items:center; justify-content:center; gap:10px;
    background:var(--brand-800); color:#fff; text-decoration:none;
    font-size:14px; padding:12px 16px; border-bottom:1px solid var(--brand-900);
  }
  .trt-strip:hover{ text-decoration:none; background:var(--brand-900); }
  .trt-strip b{ font-weight:800; letter-spacing:.01em; }
  .trt-strip .trt-dot, .trt-strip .trt-dot::after{ background:#8FB0F0; }
  .trt-strip__go{ display:inline-flex; align-items:center; gap:6px; color:#C9D7F5; font-weight:600; }
  .trt-strip::after{
    content:''; position:absolute; top:0; bottom:0; left:-40%; width:30%; z-index:-1;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);
    animation:trtSheen 4.5s ease-in-out 1s infinite;
  }
}

/* ---------- POPUP ---------- */
.trt-modal[hidden]{ display:none; }
.trt-modal{ position:fixed; inset:0; z-index:500; }
.trt-modal__scrim{
  position:absolute; inset:0; background:rgba(16,28,58,.58);
  -webkit-backdrop-filter:blur(6px) saturate(1.1); backdrop-filter:blur(6px) saturate(1.1);
  opacity:0; transition:opacity .35s ease;
}
.trt-modal__wrap{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  overflow-y:auto; pointer-events:none;
}
.trt-modal__card{
  pointer-events:auto; position:relative;
  width:min(900px,100%); max-height:calc(100dvh - 32px);
  display:grid; grid-template-columns:.92fr 1.08fr;
  background:#fff; border-radius:22px; overflow:hidden;
  box-shadow:0 30px 80px rgba(8,15,35,.38), 0 2px 8px rgba(8,15,35,.12);
  opacity:0; transform:translateY(22px) scale(.96);
  transition:opacity .4s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
  outline:none;
}
.trt-modal.is-open .trt-modal__scrim{ opacity:1; }
.trt-modal.is-open .trt-modal__card{ opacity:1; transform:none; }
.trt-modal.is-closing .trt-modal__card{ transition-duration:.22s; transform:translateY(10px) scale(.98); }

.trt-modal__media{
  position:relative; min-height:100%;
  background:#BFE0F7 url("../../img/trt-modal.jpg") center 40% / cover no-repeat;
}
.trt-chip{
  position:absolute; z-index:2; top:16px; left:16px;
  display:inline-flex; align-items:center; gap:9px;
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:var(--brand-900, var(--flag)); border:1px solid rgba(255,255,255,.9);
  font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  padding:8px 13px; border-radius:999px; box-shadow:0 6px 18px rgba(16,28,58,.12);
}
.trt-modal__media .trt-chip{ top:18px; left:18px; }
.trt-modal__media::after{ /* ties the photo into the white panel */
  content:''; position:absolute; inset:auto 0 0 0; height:30%;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.35));
}
.trt-modal__body{ padding:38px 40px 30px; overflow-y:auto; overscroll-behavior:contain; }
.trt-modal__logo{ height:24px; width:auto; margin:0 0 22px; }
.trt-modal__body .eyebrow{ margin-bottom:12px; }
.trt-modal__title{ font-size:clamp(24px,2.6vw,31px); line-height:1.12; letter-spacing:-.02em; color:var(--ink); margin:0 0 12px; }
.trt-modal__sub{ font-size:15.5px; line-height:1.55; color:var(--text-2); margin:0 0 18px; }
.trt-perks{ list-style:none; padding:0; margin:0 0 22px; display:grid; gap:9px; }
.trt-perks li{ display:flex; gap:10px; font-size:14.5px; line-height:1.45; color:var(--text-2); }
.trt-perks li svg{ margin-top:2px; }
.trt-perks b{ color:var(--ink); font-weight:700; }

.trt-field{ display:block; position:relative; }
.trt-field__label{ display:block; font-size:13px; font-weight:700; color:var(--ink); margin:0 0 7px; }
.trt-field__wrap{ position:relative; }
.trt-field__wrap svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-3); pointer-events:none; transition:color .2s; }
.trt-input{
  width:100%; height:54px; padding:0 16px 0 46px;
  border:1.5px solid var(--line); border-radius:12px; background:#fff;
  font-size:16px; color:var(--ink); outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.trt-input::placeholder{ color:#9AA1AF; }
.trt-input:focus{ border-color:var(--brand-600); box-shadow:0 0 0 4px rgba(38,68,129,.14); }
.trt-field__wrap:focus-within svg{ color:var(--brand-600); }
.trt-form.is-error .trt-input{ border-color:var(--red); box-shadow:0 0 0 4px rgba(179,18,26,.10); }
.trt-form.is-error .trt-field{ animation:trtShake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes trtShake{ 20%,80%{ transform:translateX(-2px); } 30%,50%,70%{ transform:translateX(-5px); } 40%,60%{ transform:translateX(5px); } }
.trt-err{ min-height:0; margin:8px 0 0; font-size:13px; font-weight:600; color:var(--red); display:none; }
.trt-form.is-error .trt-err{ display:block; }
.trt-submit{ margin-top:14px; height:56px; padding-block:0; }
.trt-submit .trt-spin{ display:none; width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:trtSpin .7s linear infinite; }
.trt-form.is-loading .trt-submit .trt-spin{ display:inline-block; }
.trt-form.is-loading .trt-submit .trt-bell{ display:none; }
@keyframes trtSpin{ to{ transform:rotate(360deg); } }
/* Notify Me: a light sheen crosses the button, then the bell rings */
.trt-btn{ position:relative; overflow:hidden; isolation:isolate; }
.trt-btn::after{
  content:''; position:absolute; top:0; bottom:0; left:-60%; width:45%; z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg); animation:trtSheen 4.2s ease-in-out 1.6s infinite;
}
.trt-bell{ transform-origin:50% 2px; animation:trtRing 4.2s ease-in-out 2s infinite; }
@keyframes trtRing{
  0%,62%,100%{ transform:rotate(0); } 65%{ transform:rotate(16deg); } 70%{ transform:rotate(-14deg); }
  75%{ transform:rotate(10deg); } 80%{ transform:rotate(-6deg); } 85%{ transform:rotate(3deg); }
}
.trt-consent{ font-size:12px; line-height:1.5; color:var(--text-3); margin:12px 0 0; text-align:center; }
.trt-consent a{ text-decoration:underline; text-underline-offset:2px; }

.trt-legal{
  margin:20px 0 0; padding:14px 0 0; border-top:1px solid var(--line-soft);
  font-size:11px; line-height:1.55; color:var(--text-3);
}
.trt-legal b{ color:var(--text-2); }

/* staggered content entrance inside the popup */
.trt-modal .trt-st{ opacity:0; transform:translateY(10px); }
.trt-modal.is-open .trt-st{ animation:trtUp .6s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(140ms + var(--i,0) * 55ms); }

/* success view */
.trt-done{ text-align:center; padding:8px 0 0; }
.trt-done[hidden], .trt-formview[hidden]{ display:none; }
.trt-check{ width:76px; height:76px; margin:6px auto 18px; position:relative; }
.trt-check svg{ width:76px; height:76px; }
.trt-check circle{ stroke-dasharray:214; stroke-dashoffset:214; }
.trt-check path{ stroke-dasharray:40; stroke-dashoffset:40; }
.trt-done.is-in .trt-check circle{ animation:trtDraw .7s cubic-bezier(.65,0,.35,1) forwards; }
.trt-done.is-in .trt-check path{ animation:trtDraw .45s cubic-bezier(.65,0,.35,1) .55s forwards; }
.trt-check::after{ content:''; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgba(38,68,129,.35); }
.trt-done.is-in .trt-check::after{ animation:trtHalo 1.2s ease-out .9s; }
@keyframes trtDraw{ to{ stroke-dashoffset:0; } }
@keyframes trtHalo{ from{ box-shadow:0 0 0 0 rgba(38,68,129,.35); } to{ box-shadow:0 0 0 22px rgba(38,68,129,0); } }
.trt-done .trt-st2{ opacity:0; transform:translateY(8px); }
.trt-done.is-in .trt-st2{ animation:trtUp .6s cubic-bezier(.16,1,.3,1) forwards; animation-delay:calc(700ms + var(--i,0) * 80ms); }
.trt-done h2{ font-size:clamp(24px,2.6vw,30px); margin:0 0 10px; }
.trt-done p{ color:var(--text-2); font-size:15.5px; margin:0 auto 22px; max-width:38ch; }
.trt-done__email{ color:var(--ink); font-weight:700; word-break:break-all; }

.trt-x{
  position:absolute; top:12px; right:12px; z-index:5;
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  display:grid; place-items:center;
  background:rgba(255,255,255,.92); color:var(--ink);
  box-shadow:0 2px 10px rgba(16,28,58,.14);
  transition:transform .25s cubic-bezier(.16,1,.3,1), background .2s;
}
.trt-x:hover{ transform:rotate(90deg); background:#fff; }

/* popup — tablet & phone: single column, compact photo band on top */
@media (max-width:760px){
  .trt-modal__wrap{ padding:12px; }
  .trt-modal__card{ grid-template-columns:1fr; max-height:calc(100dvh - 24px); overflow-y:auto; overscroll-behavior:contain; border-radius:20px; }
  .trt-modal__media{
    min-height:0; height:124px;
    background:linear-gradient(180deg,#93C9EE 0%,#BADEF6 45%,#E2F2FC 80%,#F3FAFE 100%);
  }
  .trt-modal__media::before{
    content:''; position:absolute; top:50%; left:63%; height:132%; aspect-ratio:1/1;
    transform:translate(-50%,-46%);
    background:url("../../img/trt-modal.jpg") center / cover no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%);
            mask-image:linear-gradient(90deg,transparent 4%,#000 30%,#000 70%,transparent 96%);
  }
  .trt-modal__media::after{ display:none; }
  .trt-modal__media .trt-chip{ top:12px; left:12px; font-size:10.5px; padding:6px 11px; }
  .trt-modal__body{ padding:16px 20px 16px; overflow:visible; }
  .trt-modal__logo{ display:none; }
  .trt-modal__body .eyebrow{ font-size:11px; margin-bottom:8px; }
  .trt-modal__title{ font-size:23px; margin-bottom:8px; }
  .trt-modal__sub{ font-size:14.5px; margin-bottom:14px; }
  .trt-perks{ gap:6px; margin-bottom:16px; }
  .trt-perks li{ font-size:13.5px; }
  .trt-field__label{ font-size:12.5px; margin-bottom:6px; }
  .trt-input{ height:50px; }
  .trt-submit{ height:52px; margin-top:10px; }
  .trt-consent{ margin-top:10px; font-size:11.5px; }
  .trt-legal{ margin-top:12px; padding-top:10px; font-size:10.5px; }
  .trt-x{ top:10px; right:10px; width:36px; height:36px; }
}
@media (max-width:760px) and (max-height:800px){
  .trt-modal__media{ height:104px; }
  .trt-perks{ display:none; }
  .trt-modal__sub{ margin-bottom:14px; }
}
html.trt-lock, html.trt-lock body{ overflow:hidden; }
@media (max-width:1180px){ .header__login{ display:none; } }

.entry-fork__path--soon{ grid-column:1 / -1; flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
  padding:12px 20px; background:transparent; border-style:dashed; box-shadow:none; }
.entry-fork__path--soon .entry-fork__title{ font-size:16px; }

/* =============================================================== GATE == */
/* Home page entry: two questions, two big cards each (EMB-1889). */
.gate{
  --wall:#C9D3CF;
  position:relative; overflow:hidden; padding:64px 0 56px;
  min-height:min(calc(100vh - 150px), 780px); min-height:min(calc(100svh - 150px), 780px); display:flex; align-items:center; background:var(--wall);
}
.gate::before{
  content:''; position:absolute; top:0; bottom:0; right:-20vw; aspect-ratio:1200 / 767;
  background:url(../../img/lifestyle-1.png) center / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 22%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 22%);
  pointer-events:none;
}
.gate > .container{ position:relative; z-index:1; width:100%; }
.gate__step{ max-width:820px; scroll-margin-top:24px; }
.gate__step--intent{ display:none; }
.gate:has(#care-intent:target) .gate__step--who{ display:none; }
.gate:has(#care-intent:target) .gate__step--intent{ display:block; animation:fade .3s ease; }
.gate .eyebrow{ color:var(--care-blue-deep); }
.gate__q{ margin:0 0 8px; font-size:clamp(30px,3.6vw,44px); line-height:1.12; letter-spacing:-.02em; color:var(--ink); }
.gate__hint{ margin:0 0 28px; font-size:17px; color:#2E3A40; }
.gate__paths{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.gate__path{
  position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:28px;
  min-height:300px; padding:34px 34px 32px; overflow:hidden;
  background:linear-gradient(140deg,var(--care-blue),var(--care-blue-deep)); color:#FFFAF1;
  border-radius:var(--radius-lg); box-shadow:0 10px 30px rgba(0,40,60,.18); text-decoration:none;
  transition:transform .2s, box-shadow .2s;
}
.gate__path--deep{ background:linear-gradient(140deg,#0A5F8A,#062F47); }
.gate__path--soon{ background:linear-gradient(140deg,#5B6B78,#2B3640); }
.gate__path:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,40,60,.26); color:#FFFAF1; text-decoration:none; }
.gate__path:focus-visible{ outline:3px solid var(--care-blue-deep); outline-offset:3px; }
.gate__icon{ display:block; color:#FFFAF1; opacity:.9; }
.gate__icon svg{ width:54px; height:54px; }
.gate__badge{ position:absolute; top:22px; right:22px; padding:5px 11px; border-radius:var(--radius-pill);
  background:#FFFAF1; color:#2B3640; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.gate__body{ display:flex; flex-direction:column; gap:6px; }
.gate__title{ display:flex; align-items:center; gap:10px; font-size:clamp(22px,2.1vw,28px); font-weight:700; color:#FFFAF1; }
.gate__title .btn__arrow{ color:#FFFAF1; transition:transform .2s; }
.gate__path:hover .gate__title .btn__arrow{ transform:translateX(4px); }
.gate__sub{ font-size:16.5px; line-height:1.45; color:rgba(255,250,241,.88); }
.gate__back{ display:inline-block; margin-bottom:14px; font-size:14px; font-weight:600; color:var(--care-blue-deep); }
.gate__911{ margin:18px 0 0; font-size:13.5px; color:#2E3A40; }
@media (max-width:1100px){
  .gate::before{ right:-12vw; opacity:.45; }
}
@media (max-width:760px){
  .gate{ padding:36px 0 32px; }
  .gate::before{ top:0; bottom:auto; left:0; right:0; height:340px; aspect-ratio:auto;
    background-size:160% auto; background-position:62% 0; opacity:.6;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,transparent 100%); }
  .gate__step{ max-width:none; }
  .gate__paths{ grid-template-columns:1fr; gap:14px; }
  .gate__path{ min-height:0; gap:18px; padding:22px; }
  .gate__icon svg{ width:40px; height:40px; }
}
.gate__trust{ list-style:none; display:flex; flex-wrap:wrap; gap:10px 22px; padding:0; margin:24px 0 0; }
.gate__trust li{ display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:#24313A; }

@keyframes trtSheen{ 0%{ left:-60%; } 28%,100%{ left:130%; } }
@media (max-width:1366px) and (min-width:761px){ .gate__step{ max-width:680px; } .gate__path{ min-height:260px; } }

/* LegitScript seal: shown at its native 73x79, as LegitScript asks */
.footer__seal{ display:inline-block; margin-top:18px; line-height:0; }
.footer__seal img{ width:73px; height:79px; }