/* Self-hosted webfonts — no third-party requests. Generated from the
   Google Fonts css2 set (latin + latin-ext subsets). font-display:swap. */
@font-face{font-family:'Alice';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/alice-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Alice';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/alice-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/dm-serif-display-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/dm-serif-display-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/dm-serif-display-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/dm-serif-display-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/poppins-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/poppins-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:italic;font-weight:500;font-display:swap;src:url('assets/fonts/poppins-500-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:italic;font-weight:500;font-display:swap;src:url('assets/fonts/poppins-500-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:italic;font-weight:600;font-display:swap;src:url('assets/fonts/poppins-600-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:italic;font-weight:600;font-display:swap;src:url('assets/fonts/poppins-600-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:italic;font-weight:700;font-display:swap;src:url('assets/fonts/poppins-700-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:italic;font-weight:700;font-display:swap;src:url('assets/fonts/poppins-700-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/poppins-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/poppins-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/poppins-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/poppins-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/poppins-600-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/poppins-600-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/poppins-700-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/poppins-700-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   VIV RX — Design System v3 (motion edition)
   ============================================================ */
:root {
  /* Official brand palette (see BRAND.md).
     --coral-deep is a darkened cut of Bright Orange 200 used for small text
     and hover states so orange type keeps WCAG AA contrast on Light Tan. */
  --coral:#FE621D;           /* Bright Orange 200 */
  --coral-deep:#B84510;      /* derived dark orange (AA for small text) */
  --coral-bright:#F7805A;    /* Light Orange 200 */
  --coral-soft:#F0E7D6;      /* Tan */
  --coral-tint:#FFF6E5;      /* Light Tan */
  --ink:#131314; --ink-2:#131314;            /* Black */
  --charcoal:#525252; --muted:#525252;       /* Gray */
  --cream:#FFF6E5;           /* Light Tan — page background */
  --paper:#FEFDFC;           /* White */
  --line:#E3E3E3; --line-2:#E3E3E3;          /* Light Gray */
  --radius:24px; --radius-sm:16px; --radius-xs:12px;
  /* Layered, neutral elevation — reads like real light, not a colored glow */
  --shadow-xs:0 1px 2px rgba(19,19,20,.05);
  --shadow-sm:0 2px 4px rgba(19,19,20,.04), 0 8px 20px -10px rgba(19,19,20,.12);
  --shadow:0 4px 10px -4px rgba(19,19,20,.07), 0 22px 44px -20px rgba(19,19,20,.16);
  --shadow-lg:0 8px 18px -8px rgba(19,19,20,.08), 0 44px 80px -34px rgba(19,19,20,.22);
  --shadow-coral:0 2px 6px rgba(254,98,29,.20), 0 14px 28px -12px rgba(254,98,29,.40);
  --topbar-bg:#292725;       /* neutral warm charcoal — announcement ribbon */
  --maxw:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --font-display:"Poppins",system-ui,sans-serif;
  --font-body:"Poppins",system-ui,sans-serif;
  --font-logo:"Alice",Georgia,serif;
}
* { box-sizing:border-box; margin:0; padding:0; }

/* ---------- Accessibility utilities ---------- */
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:12px; top:-60px; z-index:1000; background:var(--ink); color:#fff; padding:12px 18px; border-radius:10px; font-weight:600; font-size:15px; transition:top .2s var(--ease); }
.skip-link:focus { top:12px; }

html { scroll-behavior:smooth; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }
/* Keep type at the author's size when a phone is rotated to landscape */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { font-family:var(--font-body); color:var(--ink); background:var(--cream); line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-feature-settings:"kern","liga","calt"; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
/* No grey tap/click flash on any interactive element; keyboard focus rings stay */
a, button, summary, [role="button"] { -webkit-tap-highlight-color:transparent; }
/* Remove the 300ms mobile tap delay and stop double-tap zoom on controls —
   makes every tap register instantly. */
a, button, summary, label, [role="button"], input, select { touch-action:manipulation; }
/* In-page anchors land below the fixed header instead of under it */
[id] { scroll-margin-top:84px; }
/* The logo never shows a drag ghost or selection box */
.brand__img, .loader__logo { -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }
::selection { background:var(--coral); color:#fff; }
:focus-visible { outline:2px solid var(--coral-deep); outline-offset:3px; border-radius:6px; }
:focus:not(:focus-visible) { outline:none; }
/* Tabular figures keep prices & stats optically aligned */
.pc__price, .pdp__price .price, .buybar__info span, .float-card__v, .stat__num, .co-line span, .rev-score__n, .pdp-nav__buy strong { font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }

/* ---------- Wordmark ---------- */
.wordmark { font-family:var(--font-logo); font-weight:400; font-size:30px; letter-spacing:-.01em; line-height:1; display:inline-flex; align-items:flex-end; color:var(--coral); }
.wordmark--sm { font-size:24px; } .wordmark--xl { font-size:64px; }
.wordmark__viv { position:relative; }
.wordmark__viv .dot { position:relative; }
.wordmark__viv .dot::after { content:""; position:absolute; bottom:.64em; left:50%; transform:translateX(-50%); width:.15em; height:.15em; background:currentColor; border-radius:50%; }
.wordmark__rx { font-size:.42em; margin-left:.08em; margin-bottom:.12em; color:var(--coral-deep); }

/* ---------- Brand logo (image) ---------- */
.brand { display:inline-flex; align-items:center; }
.brand__img { display:block; width:auto; }
.brand__img--nav { height:42px; }
.brand__img--compare { height:22px; margin:0; }
.brand__img--modal { height:26px; }
.brand__img--footer { height:46px; margin-bottom:18px; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-weight:600; font-size:15px; padding:12px 22px; border-radius:100px; cursor:pointer; border:1.5px solid transparent; position:relative; transition:transform .22s var(--ease),box-shadow .25s var(--ease),background .2s,color .2s,border-color .2s; white-space:nowrap; will-change:transform; -webkit-tap-highlight-color:transparent; letter-spacing:-.005em; }
.btn:focus-visible { outline:2px solid var(--coral-deep); outline-offset:3px; }
.btn:active { transform:translateY(0) scale(.98); }
.btn--solid { background:var(--coral); color:#fff; box-shadow:var(--shadow-coral); }
.btn--solid:hover { background:var(--coral-deep); transform:translateY(-1px); box-shadow:0 3px 8px rgba(254,98,29,.26),0 18px 32px -14px rgba(254,98,29,.5); }
.btn--ghost { background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover { border-color:var(--coral); color:var(--coral-deep); background:var(--coral-tint); }
.btn--outline { background:transparent; color:var(--coral-deep); border-color:var(--coral); }
.btn--outline:hover { background:var(--coral); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow-coral); }
.btn--light { background:#fff; color:var(--coral-deep); box-shadow:var(--shadow-sm); }
.btn--light:hover { transform:translateY(-1px); box-shadow:0 18px 40px -16px rgba(0,0,0,.32); }
.btn--text { background:none; color:var(--ink); padding:12px 6px; }
.btn--text:hover { color:var(--coral-deep); gap:.85em; }
.btn--lg { padding:16px 30px; font-size:16px; }
.btn--xl { padding:22px 34px; font-size:19px; font-weight:700; letter-spacing:.01em; }

/* ============================================================
   PRELOADER
   ============================================================ */
.loader { position:fixed; inset:0; z-index:1000; background:var(--cream); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; overflow:hidden; }
.loader__aurora { position:absolute; inset:0; pointer-events:none; }
.loader__orb { position:absolute; border-radius:50%; opacity:.55; }
.loader__orb--1 { width:440px; height:440px; background:radial-gradient(circle,#FFB59B 0%,rgba(255,181,155,.4) 36%,transparent 66%); top:-110px; right:-70px; animation:drift 16s ease-in-out infinite; }
.loader__orb--2 { width:400px; height:400px; background:radial-gradient(circle,#FFD9C7 0%,rgba(255,217,199,.4) 36%,transparent 66%); bottom:-130px; left:-90px; animation:drift 20s ease-in-out infinite reverse; }
.loader__center { position:relative; display:flex; flex-direction:column; align-items:center; gap:24px; opacity:0; transform:translateY(6px); }
.loader.is-in .loader__center { opacity:1; transform:none; transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); }
/* ---- Minimal, professional loader: logo + refined progress bar ---- */
.loader__logo { width:78px; height:auto; opacity:0; transform:translateY(6px); }
.loader.is-in .loader__logo { opacity:1; transform:none; transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); }
.loader__bar { width:188px; height:2px; border-radius:2px; background:rgba(19,19,20,.1); overflow:hidden; opacity:0; }
.loader.is-in .loader__bar { opacity:1; transition:opacity .6s var(--ease-out) .15s; }
.loader__bar span { display:block; height:100%; width:0; border-radius:2px; background:linear-gradient(90deg,var(--coral),var(--coral-deep)); transition:width .2s var(--ease-out); }

/* Status — small refined label */
.loader__status { opacity:0; }
.loader.is-in .loader__status { opacity:1; transition:opacity .6s var(--ease-out) .25s; }
.loader__meta { display:flex; align-items:center; gap:9px; font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.loader__word { position:relative; }
.loader__word::after { content:""; position:absolute; right:-5px; top:50%; width:3px; height:3px; border-radius:50%; background:var(--line-2); transform:translateY(-50%); }
.loader__pct { color:var(--coral-deep); font-weight:600; font-variant-numeric:tabular-nums; padding-left:3px; }

/* Reveal */
.loader.is-out { opacity:0; transform:scale(1.05); filter:blur(6px); transition:opacity .7s var(--ease-out),transform .8s var(--ease-out),filter .7s var(--ease-out); }
body.is-loading { overflow:hidden; }

/* Scroll progress */
.progress { position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--coral),var(--coral-deep)); z-index:200; }

/* ---------- Top bar ---------- */
.topbar { background:var(--topbar-bg); color:#fff; overflow:hidden; font-size:11.5px; }
.topbar__track { display:flex; width:max-content; padding:10px 0; will-change:transform; }
.topbar__track span { white-space:nowrap; opacity:.85; letter-spacing:.16em; text-transform:uppercase; font-weight:500; display:inline-flex; align-items:center; }
.topbar__track span::after { content:"•"; padding:0 26px; opacity:.3; letter-spacing:0; }
/* Phones: let the scrolling text dissolve into the bar at both edges instead of
   hard-clipping flush against the screen — a calmer match for the 24px gutter
   the rest of the page uses. The bar itself stays full-bleed. */
@media (max-width:880px) {
  .topbar { position:relative; }
  .topbar::before, .topbar::after { content:""; position:absolute; top:0; bottom:0; width:28px; z-index:2; pointer-events:none; }
  .topbar::before { left:0; background:linear-gradient(90deg,var(--topbar-bg),transparent); }
  .topbar::after { right:0; background:linear-gradient(270deg,var(--topbar-bg),transparent); }
}

/* ---------- Nav ---------- */
.nav { position:fixed; top:33px; left:0; right:0; z-index:100; background:rgba(255,246,229,0); transition:transform .45s var(--ease),background .3s,box-shadow .3s,border-color .3s; border-bottom:1px solid transparent; }
.nav.is-scrolled { top:0; background:rgba(255,246,229,.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow-sm); border-bottom-color:var(--line); }
.nav.is-hidden { transform:translateY(-160%); }
.nav__inner { max-width:var(--maxw); margin:0 auto; padding:15px 24px; display:flex; align-items:center; gap:24px; }
.nav__links { display:flex; gap:30px; margin:0 auto; }
.nav__item { position:relative; }
.nav__drop { position:absolute; top:100%; left:50%; transform:translate(-50%,10px); padding-top:14px; opacity:0; visibility:hidden; transition:opacity .26s var(--ease),transform .26s var(--ease),visibility .26s; z-index:60; }
.nav__item:hover .nav__drop, .nav__item:focus-within .nav__drop { opacity:1; visibility:visible; transform:translate(-50%,0); }
.nav__item.is-dismissed .nav__drop { opacity:0; visibility:hidden; transform:translate(-50%,10px); pointer-events:none; }
.nav__drop::before { content:""; position:absolute; inset:14px 0 0; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 60px -18px rgba(30,20,10,.22), 0 4px 14px rgba(30,20,10,.06); }
.nav__drop::after { content:""; position:absolute; top:9px; left:50%; width:11px; height:11px; transform:translateX(-50%) rotate(45deg); background:#fff; border-left:1px solid var(--line); border-top:1px solid var(--line); border-radius:2px 0 0 0; }
.nav__drop > * { position:relative; }
.nav__drop { display:flex; flex-direction:column; min-width:320px; }
.nav__drop-label { display:block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--muted); padding:20px 22px 10px; }
.nav__drop a::after { display:none; }
.nav__drop-item { display:flex; align-items:center; gap:13px; margin:0 8px; padding:8px 14px; border-radius:14px; white-space:nowrap; transition:background .18s var(--ease); }
.nav__drop-item:hover { background:var(--coral-soft); }
.nav__drop-thumb { flex:0 0 auto; display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:linear-gradient(160deg,#FFF3E4,#FFE3D1); border:1px solid var(--line); overflow:hidden; transition:transform .25s var(--ease); }
.nav__drop-thumb img { width:34px; height:34px; object-fit:contain; transform:translateY(2px); }
.nav__drop-item:hover .nav__drop-thumb { transform:scale(1.06); }
.nav__drop-txt { display:flex; flex-direction:column; gap:1px; min-width:0; }
.nav__drop-txt strong { display:inline-flex; align-items:center; gap:3px; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.25; }
.nav__drop-txt small { font-size:12px; color:var(--muted); font-weight:500; line-height:1.3; }
.nav__drop .rx { font-size:14px; margin:0; }
.nav__drop-list { display:flex; flex-direction:column; max-height:min(58vh,430px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.nav__drop-all { display:flex; align-items:center; justify-content:center; gap:6px; margin-top:10px; padding:13px 22px 15px; font-size:13.5px; font-weight:600; color:var(--coral-deep); border-top:1px solid var(--line); border-radius:0 0 20px 20px; transition:background .18s var(--ease); }
.nav__drop-all:hover { background:var(--coral-soft); }
.nav__links a { font-size:15px; font-weight:500; color:var(--charcoal); position:relative; padding:4px 0; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--coral); transition:width .3s var(--ease); }
.nav__links a:hover { color:var(--ink); }
.nav__links a:hover::after { width:100%; }
.nav__actions { display:flex; gap:10px; align-items:center; }
.nav__burger { display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px; background:none; border:0; cursor:pointer; width:44px; height:44px; padding:0; margin-right:-8px; }
.nav__burger span { width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
/* Full-screen mobile menu */
.drawer { position:fixed; inset:0; z-index:98; display:flex; flex-direction:column; justify-content:flex-start; overflow:hidden auto; padding:96px 30px calc(34px + env(safe-area-inset-bottom)); background:rgba(255,246,229,.86); -webkit-backdrop-filter:blur(26px) saturate(1.5); backdrop-filter:blur(26px) saturate(1.5); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .4s var(--ease), visibility 0s linear .4s; }
.drawer.is-open { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .4s var(--ease); }
.drawer__orb { position:absolute; top:-18vw; right:-30vw; width:80vw; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(247,128,90,.3),transparent 65%); filter:blur(28px); pointer-events:none; }
.drawer__links { display:flex; flex-direction:column; position:relative; margin-top:auto; }
.drawer__links > a, .drawer__group summary { display:flex; align-items:baseline; gap:16px; padding:15px 2px; font-family:var(--font-display); font-weight:600; font-size:clamp(27px,7.4vw,38px); line-height:1.1; letter-spacing:-.02em; color:var(--ink); border-bottom:1px solid var(--line-2); opacity:0; transform:translateY(28px); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); -webkit-tap-highlight-color:transparent; }
.drawer__links > a em, .drawer__group summary em { font-style:normal; font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--coral-deep); }
.drawer__links > a:active, .drawer__group summary:active { color:var(--coral-deep); }
.drawer.is-open .drawer__links > * { opacity:1; transform:none; }
.drawer.is-open .drawer__links > *:nth-child(1) { transition-delay:.05s; }
.drawer.is-open .drawer__links > *:nth-child(2) { transition-delay:.11s; }
.drawer.is-open .drawer__links > *:nth-child(3) { transition-delay:.17s; }
.drawer.is-open .drawer__links > *:nth-child(4) { transition-delay:.23s; }
.drawer.is-open .drawer__links > *:nth-child(5) { transition-delay:.29s; }
.drawer__group { border-bottom:1px solid var(--line-2); opacity:0; transform:translateY(28px); transition:opacity .55s var(--ease-out), transform .55s var(--ease-out); }
.drawer__group summary { cursor:pointer; list-style:none; border-bottom:0; opacity:1; transform:none; }
.drawer__group summary::-webkit-details-marker { display:none; }
.drawer__chev { margin-left:auto; align-self:center; width:11px; height:11px; border-right:2.5px solid var(--coral-deep); border-bottom:2.5px solid var(--coral-deep); transform:rotate(45deg) translateY(-2px); transition:transform .3s var(--ease); }
.drawer__group[open] .drawer__chev { transform:rotate(-135deg); }
.drawer__sub { display:flex; flex-direction:column; padding:0 2px 16px 42px; }
.drawer__sub a { padding:10px 0; font-size:17px; font-weight:500; color:var(--charcoal); -webkit-tap-highlight-color:transparent; }
.drawer__sub a:active { color:var(--coral-deep); }
.drawer__sub .drawer__suball { color:var(--coral-deep); font-weight:600; }
.drawer__cta { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:30px; position:relative; opacity:0; transform:translateY(22px); transition:opacity .55s var(--ease-out) .36s, transform .55s var(--ease-out) .36s; }
.drawer.is-open .drawer__cta { opacity:1; transform:none; }
.drawer__cta .btn { padding:15px 18px; font-size:15.5px; }
.drawer__foot { margin-top:20px; margin-bottom:auto; text-align:center; font-size:12.5px; color:var(--muted); position:relative; opacity:0; transition:opacity .6s var(--ease) .46s; }
.drawer.is-open .drawer__foot { opacity:1; }
@media (min-width:1001px) { .drawer { display:none; } }

/* ============================================================
   HERO
   ============================================================ */
.hero { position:relative; overflow:hidden; padding-top:60px; }
.hero__inner { max-width:var(--maxw); margin:0 auto; padding:clamp(44px,7vw,104px) 24px clamp(56px,7vw,96px); display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; position:relative; z-index:2; }
.hero__aurora { position:absolute; inset:0; z-index:0; pointer-events:none; }
.orb { position:absolute; border-radius:50%; opacity:.38; }
.orb--1 { width:540px; height:540px; background:radial-gradient(circle,#FFB59B 0%,rgba(255,181,155,.4) 36%,transparent 66%); top:-150px; right:-80px; animation:drift 18s ease-in-out infinite; }
.orb--2 { width:480px; height:480px; background:radial-gradient(circle,#FFD9C7 0%,rgba(255,217,199,.4) 36%,transparent 66%); bottom:-180px; left:-110px; animation:drift 22s ease-in-out infinite reverse; }
.orb--3 { width:380px; height:380px; background:radial-gradient(circle,#FFE7D2 0%,rgba(255,231,210,.4) 36%,transparent 66%); top:28%; left:44%; animation:drift 26s ease-in-out infinite; }
@keyframes drift { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(28px,-22px) scale(1.07); } }
.grain { position:absolute; inset:0; background-image:radial-gradient(rgba(19,19,20,.05) 1px,transparent 1px); background-size:6px 6px; opacity:.22; }

.pill { display:inline-flex; align-items:center; gap:8px; background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:7px 16px; font-size:13px; font-weight:600; color:var(--charcoal); box-shadow:var(--shadow-xs); }
.pill__dot { width:8px; height:8px; border-radius:50%; background:#34c759; box-shadow:0 0 0 4px rgba(52,199,89,.18); }
.hero__title { font-family:var(--font-display); font-weight:500; font-size:clamp(42px,6.2vw,84px); line-height:1.0; letter-spacing:-.025em; margin:22px 0 20px; }
.hero__title em { font-style:italic; color:var(--coral); }
.line { display:block; overflow:hidden; padding:0 0 .14em .06em; margin:0 0 -.1em -.06em; }
.line > span { display:block; transform:translateY(110%); transition:transform 1s var(--ease-out); }

/* Hero intro — CSS-driven (added .is-in after preloader) */
.hero__copy [data-anim="fade"] { opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease-out),transform .8s var(--ease-out); }
.hero__visual .float-card, .hero__vial { opacity:0; transition:opacity .9s var(--ease-out); }
.hero.is-in .line > span { transform:none; }
.hero.is-in .line:last-child > span { transition-delay:.12s; }
.hero.is-in .pill { transition-delay:.45s; }
.hero.is-in .hero__sub { transition-delay:.58s; }
.hero.is-in .hero__cta { transition-delay:.7s; }
.hero.is-in .hero__proof { transition-delay:.82s; }
.hero.is-in .hero__copy [data-anim="fade"] { opacity:1; transform:none; }
.hero.is-in .hero__vial { opacity:1; transition-delay:.3s; }
.hero.is-in .float-card--price { opacity:1; transition-delay:.6s; }
.hero.is-in .float-card--ship { opacity:1; transition-delay:.74s; }
.hero.is-in .float-card--rating { opacity:1; transition-delay:.88s; }
.hero__sub { font-size:clamp(16px,1.4vw,19px); color:var(--charcoal); max-width:530px; }
.hero__cta { display:flex; align-items:center; gap:14px; margin:30px 0 30px; flex-wrap:wrap; }
.hero__proof { display:flex; align-items:center; gap:16px; }
.hero__avatars { display:flex; }
.hero__avatars span { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--coral-deep); background:var(--coral-soft); border:2px solid var(--cream); margin-left:-10px; }
.hero__avatars span:first-child { margin-left:0; }
.hero__proof p { font-size:14px; color:var(--muted); margin-top:2px; }
.hero__proof strong { color:var(--ink); }
.stars { color:var(--coral); letter-spacing:1px; }

.hero__visual { position:relative; display:flex; justify-content:center; align-items:center; min-height:380px; }
.hero__ring { position:absolute; width:340px; height:340px; border:1px solid var(--line-2); border-radius:50%; }
.hero__ring::after { content:""; position:absolute; inset:44px; border:1px solid var(--line); border-radius:50%; }
.hero__glow { position:absolute; width:310px; height:310px; background:radial-gradient(circle,rgba(247,128,90,.24),transparent 62%); border-radius:50%; }
/* The v2 render is upright, so the old render's baked-in lean (measured at
   +7.5° clockwise via principal-axis fit) is reproduced here in CSS. */
.hero__vial { width:clamp(130px,13vw,175px); filter:drop-shadow(0 28px 42px rgba(19,19,20,.18)); position:relative; z-index:2; transform:rotate(7.5deg); }
.float-card { position:absolute; z-index:3; background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:13px 17px; font-size:14px; }
.float-card--price { top:8%; left:-3%; display:flex; flex-direction:column; }
.float-card--price .float-card__k { color:var(--muted); font-size:12px; }
.float-card--price .float-card__v { font-family:var(--font-display); font-size:26px; font-weight:600; color:var(--ink); }
.float-card--price .float-card__v em { font-style:normal; font-size:14px; color:var(--muted); }
.float-card--ship { bottom:18%; right:-5%; display:flex; align-items:center; gap:8px; font-weight:500; }
.float-card--ship .check { display:inline-grid; place-items:center; width:22px; height:22px; background:var(--coral); color:#fff; border-radius:50%; font-size:12px; }
.float-card--rating { bottom:4%; left:2%; display:flex; align-items:center; gap:8px; font-weight:500; }
.float-card--rating .check { display:inline-grid; place-items:center; width:22px; height:22px; background:var(--coral); color:#fff; border-radius:50%; font-size:12px; }
/* Rotating hero word */
.hero__rotator { display:inline-grid; white-space:nowrap; vertical-align:bottom; transition:width .55s var(--ease-out); }
.hero__rotator .rotate-word { grid-area:1/1; justify-self:start; opacity:0; transform:translateY(55%); filter:blur(8px); transition:opacity .45s ease, transform .6s var(--ease-out), filter .45s ease; pointer-events:none; }
.hero__rotator .rotate-word.is-active { opacity:1; transform:none; filter:none; }
.hero__rotator .rotate-word.is-out { opacity:0; transform:translateY(-55%); filter:blur(8px); }

/* Hero star rating */
.hero__rating { display:flex; align-items:center; gap:12px; margin-top:2px; }
.hero__rating .stars { position:relative; font-size:19px; letter-spacing:3px; line-height:1; color:#e4d8c9; }
.hero__rating .stars i { position:absolute; inset:0; overflow:hidden; font-style:normal; letter-spacing:3px; color:var(--coral); white-space:nowrap; }
.hero__rating p { font-size:14px; color:var(--muted); }
.hero__rating p strong { color:var(--ink); font-weight:600; }

.scroll-hint { text-align:center; color:var(--muted); font-size:12px; letter-spacing:.18em; text-transform:uppercase; padding-bottom:26px; position:relative; z-index:2; }
.scroll-hint span { display:block; width:1px; height:34px; margin:0 auto 10px; background:linear-gradient(var(--coral),transparent); animation:scrolly 2s ease-in-out infinite; }
@keyframes scrolly { 0%,100% { transform:scaleY(.4); transform-origin:top; opacity:.4; } 50% { transform:scaleY(1); opacity:1; } }

/* ---------- Press ---------- */
.press { padding:42px 0 14px; border-top:1px solid var(--line); }
.press__label { text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); max-width:72ch; margin:0 auto 22px; padding:0 24px; line-height:1.9; }
.marquee { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.marquee__track { display:flex; align-items:center; gap:64px; width:max-content; }
.marquee__track img { height:26px; width:auto; opacity:.4; filter:grayscale(1) contrast(.9); transition:opacity .35s var(--ease),filter .35s var(--ease); }
.marquee__track img:hover { opacity:.85; filter:grayscale(.25) contrast(1); }

/* ============================================================
   SECTION SHELL
   ============================================================ */
section { position:relative; }
.section-head { max-width:720px; margin:0 auto clamp(36px,5vw,56px); text-align:center; }
.eyebrow { display:inline-block; font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--coral-deep); margin-bottom:14px; }
.section-head h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(31px,4.6vw,52px); line-height:1.06; letter-spacing:-.02em; }
.section-head p { margin-top:16px; color:var(--charcoal); font-size:17px; }

/* ---------- Promise ---------- */
.promise { max-width:var(--maxw); margin:0 auto; padding:clamp(56px,7vw,92px) 24px; }
.promise__grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--paper); }
.promise__item { padding:38px 34px; border-right:1px solid var(--line); transition:background .3s; }
.promise__item:last-child { border-right:0; }
.promise__item:hover { background:var(--coral-tint); }
.promise__no { font-family:var(--font-display); font-size:15px; color:var(--coral-deep); font-weight:600; }
.promise__item h2 { font-family:var(--font-display); font-weight:600; font-size:23px; margin:14px 0 8px; }
.promise__item p { color:var(--charcoal); font-size:15.5px; }

/* ============================================================
   STICKY SHOWCASE
   ============================================================ */
.sc { max-width:var(--maxw); margin:0 auto; padding:clamp(40px,5vw,72px) 24px clamp(56px,7vw,110px); }
.sc__grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.sc__media { position:sticky; top:96px; height:min(78vh,620px); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.sc__stage { position:relative; width:100%; flex:1; display:grid; place-items:center; }
.sc__stage::before { content:""; position:absolute; width:62%; aspect-ratio:1; background:radial-gradient(circle,rgba(247,128,90,.22),transparent 65%); border-radius:50%; }
.sc__img { position:absolute; height:clamp(300px,46vh,460px); width:auto; object-fit:contain; filter:drop-shadow(0 30px 42px rgba(19,19,20,.18)); opacity:0; transform:scale(.9) translateY(20px); transition:opacity .6s var(--ease),transform .8s var(--ease); }
.sc__img.is-active { opacity:1; transform:none; }
.sc__dots { display:flex; gap:10px; margin-top:18px; }
.sc__dots button { width:9px; height:9px; border-radius:50%; border:0; background:var(--line-2); cursor:pointer; padding:0; transition:.3s var(--ease); }
.sc__dots button.is-active { background:var(--coral); width:30px; border-radius:6px; }

.sc__panels { display:flex; flex-direction:column; }
.sc__panel { min-height:78vh; display:flex; flex-direction:column; justify-content:center; padding:40px 0; opacity:.32; transition:opacity .5s var(--ease); }
.sc__panel.is-active { opacity:1; }
.sc__cat { font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--coral-deep); }
.sc__index { font-family:var(--font-display); font-size:13px; color:var(--muted); margin-top:6px; }
.sc__panel h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(30px,4vw,46px); line-height:1.04; margin:10px 0 14px; letter-spacing:-.02em; }
.sc__panel > p { color:var(--charcoal); font-size:17px; max-width:460px; }
.sc__feats { list-style:none; margin:22px 0 0; display:grid; gap:10px; }
.sc__feats li { position:relative; padding-left:30px; font-size:15.5px; color:var(--charcoal); }
.sc__feats li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--coral-deep); font-weight:700; background:var(--coral-soft); width:20px; height:20px; display:grid; place-items:center; border-radius:50%; font-size:11px; }
.sc__foot { margin-top:30px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.price { font-family:var(--font-display); font-size:34px; font-weight:600; color:var(--ink); }
.price em { font-style:normal; font-size:14px; color:var(--muted); font-family:var(--font-body); }

/* ============================================================
   WHY / COMPARE
   ============================================================ */
.why { max-width:980px; margin:0 auto; padding:clamp(56px,7vw,96px) 24px; }
/* Why VIV reads as one left-aligned block: the row labels are flush left, so a
   centered head and centered value cells made the section look misaligned.
   The <=700px rules further down already did this — desktop was the outlier. */
.why .section-head { margin-left:0; margin-right:0; text-align:left; }
.compare { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); }
.compare__head, .compare__row { display:grid; grid-template-columns:1.2fr 1fr 1fr; }
.compare__head { background:var(--ink); }
.compare__col { padding:22px; text-align:left; color:rgba(255,255,255,.7); font-weight:600; font-size:15px; }
/* Indent the two value headers past the ✓/✕ gutter (20px icon + 8px gap) so the
   header text sits on the same left edge as the answers underneath it. */
.compare__col--viv, .compare__col--old { padding-left:calc(22px + 28px); }
.compare__col--viv { color:#fff; background:linear-gradient(180deg,rgba(247,128,90,.25),transparent); }
.compare__col--viv .wordmark { color:#fff; }
.compare__col--viv .wordmark__viv .dot::after, .compare__col--viv .wordmark__rx { background:#fff; color:#fff; }
.compare__row { border-top:1px solid var(--line); align-items:center; }
.compare__row:nth-child(odd) { background:var(--cream); }
.compare__row > span { padding:18px 22px; font-size:15px; }
.compare__row > span:first-child { font-weight:600; color:var(--ink); }
.compare__row .yes { color:var(--ink); display:flex; align-items:center; justify-content:flex-start; gap:8px; font-weight:500; }
.compare__row .yes::before { content:"✓"; flex:none; color:#fff; background:var(--coral); width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; }
.compare__row .no { color:var(--muted); display:flex; align-items:center; justify-content:flex-start; gap:8px; }
.compare__row .no::before { content:"✕"; flex:none; color:var(--muted); background:var(--line); width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:700; }

/* ============================================================
   HOW IT WORKS (timeline)
   ============================================================ */
.how { max-width:var(--maxw); margin:0 auto; padding:clamp(56px,7vw,96px) 24px; }
.timeline { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.timeline__line { position:absolute; top:42px; left:16%; right:16%; height:2px; background:var(--line-2); z-index:0; border-radius:2px; overflow:hidden; }
.timeline__line i { display:block; height:100%; width:0; background:var(--coral); }
/* Non-actionable numbered step boxes — not selectable / highlightable */
.promise__item, .tstep, .howcard, .scard { -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; }
.tstep { position:relative; z-index:1; text-align:center; padding:14px; }
.tstep__num { width:72px; height:72px; margin:0 auto 20px; display:grid; place-items:center; font-family:var(--font-display); font-size:24px; font-weight:600; color:#fff; background:var(--coral); border-radius:50%; box-shadow:var(--shadow-coral); }
.tstep__c h3 { font-family:var(--font-display); font-weight:600; font-size:22px; margin-bottom:8px; }
.tstep__c p { color:var(--charcoal); font-size:15.5px; max-width:300px; margin:0 auto; }
.how__cta { text-align:center; margin-top:48px; }

/* ---------- Stats ---------- */
.stats { background:var(--ink); color:#fff; position:relative; overflow:hidden; }
.stats::before { content:""; position:absolute; width:600px; height:600px; background:radial-gradient(circle,rgba(247,128,90,.18),transparent 65%); top:-300px; right:-100px; }
.stats__inner { max-width:var(--maxw); margin:0 auto; padding:clamp(44px,6vw,76px) 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; position:relative; }
.stat__num { display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(40px,5vw,62px); color:var(--coral); line-height:1; }
.stat__label { display:block; margin-top:10px; font-size:14px; color:rgba(255,255,255,.7); }

/* ---------- Providers ---------- */
.providers { max-width:var(--maxw); margin:0 auto; padding:clamp(56px,7vw,96px) 24px; }
.providers__grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.providers__copy h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(28px,3.6vw,42px); line-height:1.1; letter-spacing:-.02em; }
.providers__copy > p { color:var(--charcoal); font-size:17px; margin:16px 0 24px; }
.providers__points { list-style:none; display:grid; gap:12px; }
.providers__points li { display:flex; align-items:center; gap:12px; font-weight:500; }
.providers__points li span { width:24px; height:24px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--coral); color:#fff; font-size:12px; }
.providers__cards { display:grid; gap:14px; }
.pcard-doc { display:flex; align-items:center; gap:16px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px 22px; box-shadow:var(--shadow-xs); transition:transform .3s var(--ease),box-shadow .3s var(--ease); }
.pcard-doc:hover { transform:translateX(6px); box-shadow:var(--shadow-sm); }
.pcard-doc strong { display:block; font-size:16px; }
.pcard-doc em { font-style:normal; font-size:13.5px; color:var(--muted); }
.avatar { width:40px; height:40px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:700; font-size:14px; color:var(--coral-deep); background:var(--coral-soft); }
.avatar--lg { width:54px; height:54px; font-size:17px; }
.avatar--icon svg { width:26px; height:26px; }

/* ---------- FAQ ---------- */
.faq { max-width:820px; margin:0 auto; padding:clamp(56px,7vw,96px) 24px; }
.faq__list { display:grid; gap:12px; }
.qa { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px 22px; transition:box-shadow .3s,border-color .3s; }
.qa[open] { box-shadow:var(--shadow-sm); border-color:var(--coral-soft); }
.qa summary { list-style:none; cursor:pointer; padding:18px 0; font-weight:600; font-size:17px; display:flex; justify-content:space-between; gap:16px; align-items:center; }
.qa summary::-webkit-details-marker { display:none; }
.qa summary::after { content:"+"; font-size:26px; font-weight:400; color:var(--coral-deep); transition:transform .3s var(--ease); line-height:1; }
.qa[open] summary::after { transform:rotate(45deg); }
.qa__body { overflow:hidden; height:auto; transition:height .32s var(--ease); }
.qa__body p { padding:0 0 20px; color:var(--charcoal); font-size:15.5px; }

/* ---------- CTA ---------- */
.cta { padding:clamp(40px,6vw,80px) 24px; max-width:var(--maxw); margin:0 auto; }
.cta__card { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--coral),var(--coral-deep)); color:#fff; border-radius:32px; text-align:center; padding:clamp(48px,7vw,92px) 24px; box-shadow:var(--shadow-lg); }
.cta__aurora { position:absolute; inset:0; opacity:.5; background:radial-gradient(400px 240px at 20% 10%,rgba(255,255,255,.4),transparent 60%),radial-gradient(400px 240px at 85% 90%,rgba(255,255,255,.25),transparent 60%); }
.cta__card > * { position:relative; z-index:1; }
.cta__card h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4.4vw,54px); line-height:1.06; letter-spacing:-.02em; }
.cta__card p { margin:16px auto 30px; max-width:520px; font-size:18px; opacity:.95; }
.cta__fine { display:block; margin-top:18px; font-size:13px; opacity:.85; }

/* ---------- Footer ---------- */
.footer { background:var(--ink); color:rgba(255,255,255,.72); overflow:hidden; }
.footer__inner { max-width:var(--maxw); margin:0 auto; padding:20px 24px 40px; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr; gap:36px; }
.footer__brand p { margin:0 0 18px; font-size:14.5px; max-width:260px; }
.footer__socials { display:flex; gap:10px; }
.footer__socials a { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.18); color:#fff; transition:.25s var(--ease); }
.footer__socials a:hover { background:var(--coral); border-color:var(--coral); transform:translateY(-2px); }
.footer__col h2 { color:#fff; font-size:14px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:16px; font-weight:600; }
.footer__col a { display:block; padding:6px 0; font-size:14.5px; transition:color .2s; }
.footer__col a:hover { color:var(--coral); }
.footer__col--contact p { font-size:14.5px; line-height:1.7; }
.footer__legal { border-top:1px solid rgba(255,255,255,.12); max-width:var(--maxw); margin:0 auto; padding:26px 24px 48px; }
.footer__legal p { font-size:12.5px; color:rgba(255,255,255,.5); line-height:1.7; }
.footer__legal p + p { margin-top:10px; }
.footer__legallinks { display:flex; flex-wrap:wrap; gap:8px 26px; margin-bottom:18px; }
/* padding+negative-margin enlarges the tap area to ~40px tall without moving the row */
.footer__legallinks a { font-size:13px; font-weight:500; color:rgba(255,255,255,.72); transition:color .2s; padding:9px 0; margin:-9px 0; }
.footer__legallinks a:hover { color:var(--coral-bright); }
.footer__copy { margin-top:14px; }

/* ---------- Legal / policy pages ---------- */
.legal-doc { padding:130px 20px 90px; background:var(--cream); min-height:60vh; }
/* Match the 24px content gutter used site-wide on phones (was 20px). */
@media (max-width:880px) { .legal-doc { padding:56px 24px 72px; } }
.legal-doc__inner { max-width:760px; margin:0 auto; }
.draft-banner { background:var(--coral-soft); border:1px solid var(--coral); color:var(--coral-deep); border-radius:14px; padding:14px 18px; font-size:14.5px; font-weight:600; line-height:1.55; margin-bottom:34px; }
.legal-doc h1 { font-family:var(--font-display); font-size:clamp(32px,5vw,46px); line-height:1.12; margin-bottom:10px; }
.legal-doc__updated { color:var(--muted); font-size:14px; margin-bottom:36px; }
.legal-doc h2 { font-family:var(--font-display); font-size:22px; margin:36px 0 12px; }
.legal-doc p, .legal-doc li { color:var(--charcoal); font-size:16px; line-height:1.75; }
.legal-doc ul { margin:10px 0 14px 22px; }
.legal-doc li { margin-bottom:6px; }
.legal-doc a { color:var(--coral-deep); text-decoration:underline; }
.legal-doc__placeholder { background:var(--paper); border:1px dashed var(--line-2); border-radius:12px; padding:14px 16px; color:var(--muted); font-size:14.5px; margin:12px 0; }
.legal-doc__back { display:inline-block; margin-top:40px; color:var(--coral-deep); font-weight:600; text-decoration:none; }

/* ---------- Sticky mobile CTA ---------- */

/* ============================================================
   GET STARTED MODAL
   ============================================================ */
.gs { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:20px; visibility:hidden; opacity:0; transition:opacity .35s var(--ease),visibility .35s; }
.gs.is-open { visibility:visible; opacity:1; }
.gs__overlay { position:absolute; inset:0; background:rgba(19,19,20,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.gs__panel { position:relative; width:100%; max-width:560px; max-height:92vh; overflow-y:auto; background:var(--paper); border-radius:26px; box-shadow:0 50px 120px -30px rgba(19,19,20,.5); padding:34px clamp(22px,4vw,44px) clamp(28px,4vw,40px); transform:translateY(24px) scale(.98); transition:transform .4s var(--ease-out); -webkit-overflow-scrolling:touch; }
.gs.is-open .gs__panel { transform:none; }
.gs__close { position:absolute; top:16px; right:18px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--cream); color:var(--charcoal); font-size:15px; cursor:pointer; transition:.2s var(--ease); display:grid; place-items:center; }
.gs__close:hover { background:var(--coral); color:#fff; border-color:var(--coral); transform:rotate(90deg); }
.gs__brand { margin-bottom:18px; }
.gs__bar { height:5px; background:var(--line); border-radius:5px; overflow:hidden; margin-bottom:26px; }
.gs__bar i { display:block; height:100%; width:33%; background:linear-gradient(90deg,var(--coral),var(--coral-deep)); border-radius:5px; transition:width .45s var(--ease); }
.gs__step { display:none; }
.gs__step.is-active { display:block; }
.gs__eyebrow { font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--coral-deep); }
.gs__step h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(24px,3.4vw,30px); line-height:1.12; margin:8px 0 6px; letter-spacing:-.01em; }
.gs__lead { color:var(--charcoal); font-size:15px; margin-bottom:22px; }
.gs__opts { display:grid; gap:12px; }
.gs__opts--grid { grid-template-columns:1fr 1fr; }
.gs__opt { display:flex; align-items:center; gap:14px; text-align:left; width:100%; padding:16px 18px; border:1.5px solid var(--line); background:var(--paper); border-radius:var(--radius-sm); cursor:pointer; font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--ink); transition:.2s var(--ease); }
.gs__opt:hover { border-color:var(--coral); background:var(--coral-tint); transform:translateY(-2px); }
.gs__opt.is-active { border-color:var(--coral); background:var(--coral-tint); box-shadow:0 0 0 3px rgba(247,128,90,.18); }
.gs__opt em { display:block; font-style:normal; font-size:12.5px; font-weight:500; color:var(--muted); margin-top:3px; }
.gs__opt-ico { font-size:24px; flex:none; }
.gs__opt-ico + span em { margin-top:2px; }
.gs__label { display:block; margin-bottom:16px; font-size:13px; font-weight:600; color:var(--charcoal); }
.gs__label input { display:block; width:100%; margin-top:7px; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--radius-xs); font-family:var(--font-body); font-size:16px; color:var(--ink); background:var(--cream); transition:.2s var(--ease); }
.gs__label input:focus { outline:none; border-color:var(--coral); background:#fff; box-shadow:0 0 0 3px rgba(247,128,90,.16); }
.gs__err { display:none; color:#d2453a; font-size:12.5px; font-weight:600; margin-top:6px; }
.gs__label.has-error input { border-color:#d2453a; }
.gs__label.has-error .gs__err { display:block; }
.gs__nav { display:flex; justify-content:space-between; gap:12px; margin-top:24px; }
.gs__nav .btn { flex:0 0 auto; }
.gs__nav .btn[type="submit"] { margin-left:auto; }
.gs__fine { font-size:11.5px; color:var(--muted); line-height:1.6; margin-top:16px; }
.gs__done { text-align:center; padding-top:10px; }
.gs__check { width:64px; height:64px; margin:0 auto 18px; border-radius:50%; background:var(--coral); color:#fff; display:grid; place-items:center; font-size:30px; box-shadow:var(--shadow-coral); }
.gs__summary { display:inline-flex; flex-direction:column; gap:6px; text-align:left; background:var(--coral-tint); border:1px solid var(--coral-soft); border-radius:var(--radius-sm); padding:16px 20px; margin:20px auto 24px; font-size:14px; }
.gs__summary span { color:var(--charcoal); }
.gs__summary strong { color:var(--ink); }
body.gs-open { overflow:hidden; }
@media (max-width:480px) {
  .gs__opts--grid { grid-template-columns:1fr; }
  .gs__panel { border-radius:22px; }
  /* One-column treatment cards: push every price flush-right so they line up
     no matter how long the name is (short names were leaving the price mid-row). */
  .gs__opts--grid .gs__opt > em { margin-left:auto; padding-left:14px; white-space:nowrap; text-align:right; }
}

/* ============================================================
   ANIM PRIMITIVES (GSAP targets fall back to visible)
   ============================================================ */
[data-anim="up"] { opacity:0; transform:translateY(42px); transition:opacity .8s var(--ease-out),transform .8s var(--ease-out); will-change:transform,opacity; }
[data-anim="up"].in { opacity:1; transform:none; }
[data-row] { opacity:0; transform:translateX(-18px); transition:opacity .6s var(--ease-out),transform .6s var(--ease-out); }
[data-row].in { opacity:1; transform:none; }
[data-step] { opacity:0; transform:translateY(30px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); }
[data-step].in { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
  .orb,.hero__ring::after,.topbar__track,.scroll-hint span { animation:none !important; }
  html { scroll-behavior:auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px) {
  .nav__links, .nav__actions { display:none; }
  .nav__burger { display:flex; margin-left:auto; }
  .providers__grid { grid-template-columns:1fr; gap:32px; }
  .sc__grid { gap:32px; }
}
@media (max-width:880px) {
  .hero { padding-top:50px; }
  .hero__inner { grid-template-columns:1fr; }
  .hero__visual { order:-1; min-height:380px; }
  .timeline { grid-template-columns:1fr; gap:0; }
  .timeline__line { display:none; }
  .tstep { display:grid; grid-template-columns:auto 1fr; gap:18px; text-align:left; padding:18px 0; align-items:start; }
  .tstep__num { margin:0; width:56px; height:56px; font-size:20px; }
  .tstep__c p { margin:0; }
  .stats__inner { grid-template-columns:repeat(2,1fr); gap:36px 24px; }
  .footer__inner { grid-template-columns:1fr 1fr; }
  /* Showcase → single column, media stays sticky at top, image swaps on scroll */
  .sc__grid { grid-template-columns:1fr; gap:0; }
  .sc__media { position:sticky; top:60px; height:42vh; order:-1; z-index:1; background:linear-gradient(180deg,var(--cream),rgba(255,246,229,0)); }
  .sc__img { height:min(34vh,300px); }
  .sc__panel { min-height:62vh; padding:24px 0; }
}
/* Promise cards keep their 3-up row through the tablet band; stack only on phones */
@media (max-width:640px) {
  .promise__grid { grid-template-columns:1fr; }
  .promise__item { border-right:0; border-bottom:1px solid var(--line); }
  .promise__item:last-child { border-bottom:0; }
}
@media (max-width:560px) {
  .footer__inner { grid-template-columns:1fr 1fr; column-gap:20px; row-gap:28px; }
  .footer__brand { grid-column:1/-1; }
  .footer__col a { padding:10px 0; }
  .hero__proof { flex-wrap:wrap; }
  .float-card--price { left:0; } .float-card--ship { right:0; }
  .compare__row > span, .compare__col { padding:13px 8px; font-size:12.5px; }
  .compare__row .yes, .compare__row .no { gap:5px; }
  .section-head h2 { font-size:29px; }
}

/* ============================================================
   SHOP — collections, products, PDP, cart, checkout
   ============================================================ */
.nav.nav--solid { position:sticky; top:0; background:rgba(255,246,229,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); box-shadow:var(--shadow-sm); border-bottom:1px solid var(--line); }
.nav--solid .nav__links a { color:var(--charcoal); }

.shop-hero { background:radial-gradient(900px 420px at 72% -25%, var(--coral-tint), transparent 60%), var(--cream); padding:clamp(40px,6vw,84px) 24px clamp(30px,4vw,48px); text-align:center; }
.shop-hero__inner { max-width:760px; margin:0 auto; }
.shop-hero h1 { font-family:var(--font-display); font-weight:500; font-size:clamp(34px,5vw,62px); letter-spacing:-.02em; line-height:1.04; margin:12px 0 14px; }
.shop-hero p { color:var(--charcoal); font-size:18px; max-width:620px; margin:0 auto; }

.shop-wrap { max-width:var(--maxw); margin:0 auto; padding:clamp(34px,5vw,60px) 24px clamp(56px,7vw,96px); }

/* Collection tiles */
/* Callout strip (hero trust points) */
/* Trust feature strip — editorial icon/heading/description rows, hairline-divided */
.callouts { display:grid; grid-template-columns:repeat(3,1fr); gap:0 34px; max-width:1000px; margin:8px auto 60px; padding:0 24px; }
.callout { position:relative; text-align:left; }
.callout + .callout { padding-left:34px; border-left:1px solid var(--line); }
.callout__ico { display:grid; place-items:center; width:46px; height:46px; border-radius:13px; background:var(--coral-soft); color:var(--coral-deep); margin-bottom:16px; }
.callout__ico svg { width:22px; height:22px; display:block; }
.callout__h { font-size:16.5px; font-weight:600; color:var(--ink); margin:0 0 7px; letter-spacing:-.01em; }
.callout__d { font-size:14px; font-weight:400; color:var(--muted); line-height:1.55; margin:0; }
@media (max-width:760px) {
  .callouts { grid-template-columns:1fr; gap:0; margin:0 auto 40px; }
  .callout { padding:22px 0; }
  .callout + .callout { padding-left:0; border-left:0; border-top:1px solid var(--line); }
  .callout:first-child { padding-top:6px; }
  .callout__ico { margin-bottom:13px; }
  .callout__d { max-width:34ch; }
}

/* Collection banner extras */
.coll-banner__cta { margin-top:26px; }
.callouts--coll { margin:28px auto 0; padding:0; }

/* Wellness duo feature blocks */
.duo { padding:56px 24px 8px; }
.duo__inner { max-width:1160px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.duo__card { position:relative; overflow:hidden; border:1.5px solid var(--line); border-radius:var(--radius); background:var(--paper); box-shadow:var(--shadow-xs); padding:40px; min-height:340px; display:flex; align-items:flex-end; }
.duo__card--art { background:linear-gradient(150deg,var(--coral-tint) 0%,#fff 55%,var(--coral-soft) 100%); }
.duo__art span { position:absolute; border:1px solid var(--line-2); border-radius:50%; }
.duo__art span:nth-child(1) { width:340px; height:340px; top:-120px; right:-90px; }
.duo__art span:nth-child(2) { width:220px; height:220px; top:-40px; right:20px; border-color:rgba(254,98,29,.25); }
.duo__art span:nth-child(3) { width:120px; height:120px; top:40px; right:120px; background:radial-gradient(circle,rgba(247,128,90,.28),transparent 65%); border:none; }
.duo__body { position:relative; z-index:2; max-width:420px; }
.duo__body h2 { font-family:var(--font-display); font-weight:600; font-size:clamp(26px,2.6vw,34px); margin:10px 0 10px; }
.duo__body p { color:var(--charcoal); font-size:15.5px; }
.duo__card--nad { background:linear-gradient(160deg,#fff 30%,var(--coral-tint)); }
.duo__img { position:absolute; top:28px; right:28px; height:150px; width:auto; filter:drop-shadow(0 18px 26px rgba(19,19,20,.15)); }
/* Rx wordmark — lowercase serif to match the "viv rx" logo, on every page */
.rx { display:inline; vertical-align:baseline; margin-left:.05em; width:auto; height:auto; flex:0 0 auto; background:none; border:none; color:var(--coral); border-radius:0; box-shadow:none; font-family:var(--font-logo); font-weight:400; font-style:normal; font-size:.62em; text-transform:lowercase; letter-spacing:0; line-height:1; }
.duo__cta { margin-top:16px; }
.duo__links { display:flex; gap:22px; margin-top:14px; }
.duo__links a { font-weight:600; font-size:14px; color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.duo__links a:hover { color:var(--coral-deep); }
.duo__safety { margin-top:12px; font-size:12.5px; color:var(--muted); }
.duo__safety summary { cursor:pointer; text-decoration:underline; text-underline-offset:3px; list-style:none; }
.duo__safety summary::-webkit-details-marker { display:none; }
.duo__safety p { margin-top:8px; max-width:420px; }
@media (max-width:900px) { .duo__inner { grid-template-columns:1fr; } .duo__card { min-height:280px; padding:28px; } .duo__img { height:110px; top:20px; right:20px; } }

/* PDP — Amble-style media panel */
/* Slight warm wash behind the product shot (2026-07-27) — a soft coral gradient
   over white, so the vial sits on a background instead of floating on a flat
   panel. Tune the alphas to make it more or less orange. */
.pdp__media.pdp__media--panel { aspect-ratio:auto; min-height:520px; padding:56px; background:linear-gradient(165deg,rgba(254,98,29,.17) 0%,rgba(254,98,29,.07) 52%,rgba(254,98,29,.02) 100%),var(--coral-tint); }
.pdp__media--panel img { max-height:380px; width:auto; filter:drop-shadow(0 30px 44px rgba(19,19,20,.18)); }
.pdp__chip { position:absolute; top:18px; left:18px; background:#fff; border:1px solid var(--line); border-radius:100px; padding:8px 16px; font-size:12.5px; font-weight:600; color:var(--charcoal); box-shadow:var(--shadow-xs); }
.pdp__rating { margin:0 0 10px; }
.pdp__info h1 .rx { margin-left:3px; font-size:.5em; vertical-align:.12em; }
/* Buy-box callouts — three benefit-led lines, each in its own outlined card
   that hugs its text and stacks in a column (the Ivy RX pattern), keeping our
   coral check as the bullet. Replaced a 2-up feature grid of six generic
   items 2026-07-27. Content lives in EXTRAS[slug].callouts in shop.js. */
.pdp__values { list-style:none; margin:20px 0 0; display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.pdp__values li { display:inline-flex; align-items:center; gap:10px; max-width:100%; padding:10px 14px; border:1px solid rgba(19,19,20,.1); border-radius:8px; background:var(--paper); box-shadow:0 3px 10px rgba(19,19,20,.05); font-size:14px; line-height:1.5; font-weight:500; color:rgba(19,19,20,.72); }
.pdp__values li::before { content:"✓"; flex:0 0 auto; width:18px; height:18px; display:grid; place-items:center; background:var(--coral); color:#fff; border-radius:50%; font-size:10px; font-weight:700; }
.pdp__values + .pdp__buy { margin-top:22px; }
.pdp__aslow + .pdp__promo { margin-top:18px; }
.pdp__from { display:block; font-style:normal; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:2px; }
.pdp__buy { display:flex; gap:12px; flex-wrap:wrap; }
.pdp__buy--single { display:block; }
.pdp__buy--single .btn { width:100%; }
/* "What's included" now lives inside a collapsed accordion row rather than an
   always-open two-column grid, so each item can carry its description. */
.pdp__inclist { list-style:none; display:grid; gap:13px; margin:2px 0; }
.pdp__inclist li { position:relative; padding-left:27px; font-size:14px; line-height:1.55; color:var(--muted); }
.pdp__inclist li strong { display:block; font-size:14.5px; font-weight:600; color:var(--ink); }
.pdp__inclist li::before { content:"✓"; position:absolute; left:0; top:2px; width:18px; height:18px; display:grid; place-items:center; background:var(--coral-soft); color:var(--coral-deep); border-radius:50%; font-size:10px; font-weight:700; }
.pdp__accs { margin-top:22px; }
/* Buy-box accordions follow Ivy RX: a soft filled row, generous corner radius,
   no hard border, a lighter label, and a muted "+" instead of a coral one.
   Scoped to .pdp__accs so the site-wide FAQ styling stays as it is. */
.pdp__accs .qa { border-color:rgba(19,19,20,.06); border-radius:20px; padding:2px 20px; }
.pdp__accs .qa[open] { border-color:rgba(19,19,20,.09); }
.pdp__accs .qa summary { font-size:16px; font-weight:500; padding:16px 0; }
.pdp__accs .qa summary::after { color:var(--muted); font-size:24px; }
.pdp__accs ul { margin:8px 0 8px 18px; }

/* Quality tested */
.qt { padding:72px 24px 8px; }
.qt__inner { max-width:1160px; margin:0 auto; }
.qt__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:36px; }
.qt__card { background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:26px; }
.qt__pass { display:inline-flex; align-items:center; gap:6px; background:#e8f5ec; color:#1c7c3c; border-radius:100px; padding:5px 12px; font-size:12px; font-weight:700; letter-spacing:.04em; }
.qt__card h3 { font-size:18px; margin:14px 0 6px; }
.qt__card p { color:var(--charcoal); font-size:14px; }
@media (max-width:960px) { .qt__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .qt__grid { grid-template-columns:1fr; } }

/* How does X help you (per-product benefits) */
.howx { padding:72px 24px 8px; }
.howx .section-head p { max-width:640px; }
.howx__grid { max-width:1160px; margin:36px auto 0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.howx__card { background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:26px; }
.howx__no { display:block; font-family:var(--font-display); font-size:22px; color:var(--coral); margin-bottom:10px; }
.howx__card strong { display:block; font-size:16.5px; margin-bottom:6px; }
.howx__card p { color:var(--charcoal); font-size:14px; }
@media (max-width:960px) { .howx__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .howx__grid { grid-template-columns:1fr; } }

/* Important safety information bar */
.safebar { padding:56px 24px 72px; }
.safebar__inner { max-width:1160px; margin:0 auto; }
.safebar__details { background:var(--ink); color:#fff; border-radius:var(--radius-sm); overflow:hidden; }
.safebar__details summary { display:flex; align-items:center; gap:16px; padding:20px 26px; cursor:pointer; list-style:none; }
.safebar__details summary::-webkit-details-marker { display:none; }
.safebar__tag { flex:none; background:var(--coral); color:#fff; border-radius:100px; padding:7px 16px; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.safebar__details summary em { font-style:normal; font-size:14.5px; opacity:.85; flex:1; }
.safebar__toggle { font-size:22px; opacity:.7; }
.safebar__details[open] .safebar__toggle { transform:rotate(45deg); }
.safebar__details p { padding:0 26px 24px; font-size:14px; line-height:1.7; opacity:.85; max-width:900px; }
@media (max-width:640px) { .safebar__details summary { flex-wrap:wrap; gap:10px; } }

/* Reviews placeholder */

/* How it works box */
.hiw { padding:64px 24px; }
.hiw__box { max-width:1160px; margin:0 auto; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:clamp(32px,4vw,56px); }
.hiw__head h2 { font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3vw,40px); margin-top:8px; }
.hiw__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:36px; }
.hiw__no { display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--coral-deep); background:var(--coral-soft); border-radius:100px; padding:6px 14px; }
.hiw__step h3 { font-size:18px; margin:14px 0 8px; }
.hiw__step p { color:var(--charcoal); font-size:14.5px; }
.hiw__cta { margin-top:36px; text-align:center; }
@media (max-width:960px) { .hiw__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .hiw__grid { grid-template-columns:1fr; } }

.coll-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.coll-tile { display:flex; flex-direction:column; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-xs); transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .35s var(--ease); }
.coll-tile__media { background:linear-gradient(160deg,var(--coral-tint),#fff); display:grid; place-items:center; padding:24px; transition:background .4s var(--ease); }
.coll-tile__media img { height:150px; width:auto; filter:drop-shadow(0 16px 22px rgba(19,19,20,.13)); transition:transform .45s var(--ease); }
.coll-tile__body { padding:28px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.coll-tile__body > span:not(.coll-tile__cta) { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--coral-deep); font-weight:600; }
.coll-tile__body h2 { font-family:var(--font-display); font-weight:600; font-size:26px; margin:8px 0; }
.coll-tile__body p { color:var(--charcoal); font-size:14.5px; }
/* CTA reads as a real, tappable button (selector kept specific so it beats the eyebrow span rule) */
.coll-tile__body .coll-tile__cta { display:inline-flex; align-items:center; gap:.5em; margin-top:20px; padding:12px 24px; border-radius:100px; background:var(--coral); color:#fff; font-weight:700; font-size:14.5px; letter-spacing:.01em; text-transform:none; box-shadow:var(--shadow-coral); transition:background .25s var(--ease),box-shadow .3s var(--ease),transform .25s var(--ease); }
.coll-tile__body .coll-tile__cta svg, .coll-tile__body .coll-tile__cta span { transition:transform .25s var(--ease); }

/* Hover lift — pointer devices ONLY. On touch, :hover latches after a tap and
   stays until you tap elsewhere, which painted a dark coral-deep block behind
   the mobile text-link CTA ("Shop Wellness →") where there should be no fill.
   Touch gets its own feedback from the `.coll-tile:active` rule below. */
@media (hover:hover) and (pointer:fine) {
  .coll-tile:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--coral); }
  .coll-tile:hover .coll-tile__media { background:linear-gradient(160deg,var(--coral-soft),#fff); }
  .coll-tile:hover .coll-tile__media img { transform:scale(1.06) translateY(-4px); }
  .coll-tile:hover .coll-tile__cta { background:var(--coral-deep); color:#fff; box-shadow:0 3px 8px rgba(254,98,29,.26),0 18px 32px -14px rgba(254,98,29,.5); }
}

.shop-allhead { margin:clamp(40px,5vw,64px) 0 24px; }
.shop-allhead h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.01em; }

/* Product grid + card */
.pgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pc { display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-xs); transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .3s; }
.pc:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--coral-soft); }
.pc__media { position:relative; aspect-ratio:4/3; background:linear-gradient(160deg,var(--coral-tint),#fff); display:grid; place-items:center; padding:20px; overflow:hidden; }
.pc__media::before { content:""; position:absolute; width:66%; aspect-ratio:1; background:radial-gradient(circle,rgba(247,128,90,.2),transparent 65%); border-radius:50%; }
.pc__media img { position:absolute; inset:0; margin:auto; z-index:1; height:90%; width:90%; object-fit:contain; filter:drop-shadow(0 14px 20px rgba(19,19,20,.13)); transition:transform .5s var(--ease); }
.pc:hover .pc__media img { transform:translateY(-5px) scale(1.04); }
.pc__badge { position:absolute; top:12px; left:12px; z-index:2; background:var(--coral); color:#fff; font-size:11px; font-weight:600; padding:5px 11px; border-radius:100px; }
.pc__body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.pc__cat { font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--coral-deep); }
.pc__body h3 { font-family:var(--font-display); font-weight:600; font-size:20px; margin:6px 0 4px; }
.pc__body > p { color:var(--muted); font-size:14px; }
.pc__foot { margin-top:auto; padding-top:16px; display:flex; align-items:center; justify-content:space-between; }
.pc__price { font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--ink); }
.pc__price em { font-style:normal; font-size:12px; color:var(--muted); font-family:var(--font-body); }
.pc__price--tbd { font-family:var(--font-body); font-size:13px; font-weight:600; line-height:1.3; color:var(--muted); max-width:14ch; }
/* First-order promo price on a card. MUST stay after .pc__price — the `em`
   rules above are (0,1,1), so the modifier needs its descendant form to win. */
.pc__price--promo { display:flex; flex-direction:column; gap:1px; }
.pc__figs { display:flex; align-items:baseline; gap:8px; }
.pc__price--promo .pc__then { display:block; font-style:normal; font-family:var(--font-body); font-weight:500; font-size:11.5px; line-height:1.35; color:var(--muted); }
.pc__view { font-weight:600; font-size:14px; color:var(--coral-deep); }

/* Featured treatments — horizontal scroll rail (mirrors the reviews rail) */
.feat-rail-wrap { position:relative; }
.feat-rail { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; padding:8px 2px 20px; scrollbar-width:none; -ms-overflow-style:none; scroll-padding-left:2px; }
.feat-rail::-webkit-scrollbar { display:none; }
.feat-rail > .pc { scroll-snap-align:start; flex:0 0 min(300px,80vw); }
.feat-rail-wrap .rev-arrow { top:44%; }
@media (max-width:700px) { .feat-rail-wrap .rev-arrow { display:none; } }

/* Breadcrumb */
.crumb { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); margin-bottom:24px; flex-wrap:wrap; }
.crumb a:hover { color:var(--coral-deep); }
.crumb em { color:var(--ink); font-style:normal; font-weight:600; }
.crumb span { color:var(--line-2); }

/* Collection head */
.coll-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:32px; flex-wrap:wrap; }
.coll-head h1 { font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4vw,46px); letter-spacing:-.02em; margin:8px 0; }
.coll-head p { color:var(--charcoal); max-width:540px; }
.coll-sort label { font-size:13px; color:var(--muted); font-weight:600; display:flex; align-items:center; gap:8px; }
.coll-sort select { font-family:var(--font-body); font-size:14px; padding:9px 14px; border:1.5px solid var(--line-2); border-radius:100px; background:var(--paper); color:var(--ink); cursor:pointer; }

/* PDP */
.pdp { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; margin-bottom:clamp(40px,6vw,72px); }
.pdp__media { position:sticky; top:90px; background:linear-gradient(160deg,var(--coral-tint),#fff); border:1px solid var(--line); border-radius:var(--radius); display:grid; place-items:center; padding:40px; aspect-ratio:1/1; overflow:hidden; }
.pdp__media::before { content:""; position:absolute; width:70%; aspect-ratio:1; background:radial-gradient(circle,rgba(247,128,90,.22),transparent 65%); border-radius:50%; }
.pdp__media img { position:absolute; inset:0; margin:auto; z-index:1; height:80%; width:84%; object-fit:contain; filter:drop-shadow(0 22px 32px rgba(19,19,20,.16)); }
.pdp__badge { position:absolute; top:16px; left:16px; background:var(--coral); color:#fff; font-size:12px; font-weight:600; padding:6px 13px; border-radius:100px; z-index:2; }
.pdp__cat { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--coral-deep); }
/* Product name holds one line at every width — the size is capped low enough
   that the longest name ("Compounded Semaglutide" + the Rx badge) still fits
   the buy-box column. Raise the cap and it will overflow, not wrap. */
.pdp__info h1 { font-family:var(--font-display); font-weight:600; font-size:clamp(26px,3vw,36px); line-height:1.05; letter-spacing:-.02em; margin:8px 0 12px; white-space:nowrap; }
.pdp__price { display:flex; align-items:baseline; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.pdp__price .price { font-size:32px; }
.pdp__price em { font-style:normal; color:var(--muted); font-size:14px; }
.pdp__was { color:var(--muted); font-size:19px; }
.pdp__then { margin-left:4px; }
.pdp__price--tbd .price { font-family:var(--font-body); font-size:17px; font-weight:600; color:var(--muted); }

/* Promo price block. Must sit AFTER .pdp__price — same specificity, so source
   order is what lets the modifier switch the row to a stacked layout. */
.pdp__price--promo { display:block; margin-bottom:16px; }
.pdp__price--promo .pdp__from { display:block; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.pdp__figs { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.pdp__figs .price { font-size:32px; line-height:1.05; }
.pdp__terms { margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted); }

/* Shown under the PDP image when the vial artwork does not depict the actual
   dosage form (e.g. metformin, which is an oral tablet). */
.pdp__imgnote { margin:10px 2px 0; font-size:12.5px; line-height:1.45; color:var(--muted); font-style:italic; }
.pdp__short { color:var(--muted); font-size:15px; line-height:1.6; margin:20px 0 0; }
.pdp__lbl { display:block; font-size:13px; font-weight:600; color:var(--charcoal); margin-bottom:10px; }
.pdp__plans { margin-bottom:22px; display:grid; gap:10px; grid-template-columns:1fr 1fr; }
.pdp__plans .pdp__lbl { grid-column:1/-1; margin-bottom:0; }
.planopts { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin-bottom:16px; }
.planopt { text-align:left; padding:13px 16px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); cursor:pointer; transition:.2s var(--ease); }
.planopt:hover { border-color:var(--coral); }
.planopt.is-active { border-color:var(--coral); background:var(--coral-tint); box-shadow:0 0 0 3px rgba(247,128,90,.16); }
.planopt strong { display:block; font-size:14px; }
.planopt em { font-style:normal; font-size:13px; color:var(--muted); }
.pdp__buy { display:flex; gap:12px; align-items:stretch; }
.pdp__buy .btn--lg { flex:1; }
.qty { display:inline-flex; align-items:center; border:1.5px solid var(--line-2); border-radius:100px; overflow:hidden; }
.qty button { width:42px; min-height:48px; background:none; border:0; font-size:18px; cursor:pointer; color:var(--ink); }
.qty button:hover { background:var(--coral-tint); color:var(--coral-deep); }
.qty span { min-width:30px; text-align:center; font-weight:600; }
.qty--sm button { min-height:32px; width:30px; font-size:15px; }
.pdp__trust { list-style:none; display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; font-size:13.5px; color:var(--charcoal); }
.pdp__detail { display:grid; grid-template-columns:1fr 1fr; gap:48px; padding-top:clamp(30px,4vw,48px); border-top:1px solid var(--line); }
.pdp__col h2 { font-family:var(--font-display); font-weight:600; font-size:24px; margin-bottom:12px; }
.pdp__col h3 { font-family:var(--font-display); font-weight:600; font-size:18px; margin:20px 0 10px; }
.pdp__col p { color:var(--charcoal); margin-bottom:12px; }
.pdp__benefits { list-style:none; display:grid; gap:10px; }
.pdp__benefits li { position:relative; padding-left:28px; color:var(--charcoal); }
.pdp__benefits li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--coral-deep); background:var(--coral-soft); width:19px; height:19px; display:grid; place-items:center; border-radius:50%; font-size:11px; font-weight:700; }
.pdp__meta { display:flex; gap:24px; flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.pdp__meta span { display:flex; flex-direction:column; font-size:14px; color:var(--charcoal); }
.pdp__meta strong { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:4px; }
.pdp__steps { list-style:none; counter-reset:s; display:grid; gap:14px; }
.pdp__steps li { position:relative; padding-left:46px; color:var(--charcoal); }
.pdp__steps li strong { display:block; color:var(--ink); }
.pdp__steps li::before { counter-increment:s; content:counter(s,decimal-leading-zero); position:absolute; left:0; top:0; font-family:var(--font-display); font-weight:600; color:var(--coral-deep); background:var(--coral-soft); width:32px; height:32px; display:grid; place-items:center; border-radius:50%; font-size:13px; }
.pdp__faq .qa { margin-bottom:10px; }
.related { margin-top:clamp(48px,6vw,80px); }
.related h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(24px,3vw,34px); margin-bottom:24px; }
.notfound { text-align:center; padding:80px 0; }
.notfound h1 { font-family:var(--font-display); font-size:40px; margin-bottom:10px; }
.notfound p { color:var(--muted); margin-bottom:20px; }

/* Cart button */
.cart-btn { position:relative; display:inline-grid; place-items:center; width:42px; height:42px; border-radius:50%; border:1px solid var(--line-2); background:var(--paper); color:var(--ink); cursor:pointer; transition:.2s var(--ease); }
.cart-btn:hover { border-color:var(--coral); color:var(--coral-deep); }
.cart-btn__count { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--coral); color:#fff; font-size:11px; font-weight:700; display:grid; place-items:center; }
.cart-btn__count.is-empty { display:none; }
.cart-btn--mobile { display:none; margin-left:auto; }

/* Cart drawer */
.cart-overlay { position:fixed; inset:0; background:rgba(19,19,20,.5); backdrop-filter:blur(4px); opacity:0; visibility:hidden; transition:.35s var(--ease); z-index:300; }
.cart-overlay.is-open { opacity:1; visibility:visible; }
.cart-drawer { position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--paper); z-index:310; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .4s var(--ease-out); box-shadow:-20px 0 60px -20px rgba(19,19,20,.4); }
.cart-drawer.is-open { transform:none; }
.cart-drawer__head { display:flex; align-items:center; justify-content:space-between; padding:22px 24px; border-bottom:1px solid var(--line); }
.cart-drawer__head h2 { font-family:var(--font-display); font-weight:600; font-size:22px; }
.cart-drawer__head button { width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:var(--cream); cursor:pointer; font-size:14px; }
.cart-drawer__body { flex:1; overflow-y:auto; padding:8px 24px; }
.cart-drawer__foot { padding:20px 24px calc(20px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
.cart-empty { text-align:center; padding:60px 0; color:var(--muted); }
.cart-empty .btn { margin-top:16px; }
.citem { display:grid; grid-template-columns:64px 1fr auto; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.citem img { width:64px; height:74px; object-fit:contain; background:var(--coral-tint); border-radius:12px; padding:6px; }
.citem__info strong { display:block; font-size:14.5px; }
.citem__info em { font-style:normal; font-size:12.5px; color:var(--muted); }
.citem__qty button { background:none; border:0; color:var(--muted); font-size:12px; text-decoration:underline; cursor:pointer; padding:0; margin-top:8px; }
.citem__qty button:hover { color:var(--coral-deep); }
.citem__right { display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:8px; }
.citem__price { font-weight:600; font-size:14.5px; }
.cart-sub { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.cart-sub strong { font-family:var(--font-display); font-size:24px; }
.cart-sub strong em { font-style:normal; font-size:13px; color:var(--muted); }
.cart-note { font-size:12px; color:var(--muted); margin-bottom:14px; }
.cart-drawer__foot .btn { width:100%; }
body.noscroll { overflow:hidden; }

/* Checkout summary (reuses .gs modal) */
.co-summary { background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:20px; }
.co-line { display:flex; justify-content:space-between; font-size:14px; color:var(--charcoal); padding:5px 0; }
.co-line em { font-style:normal; color:var(--muted); }
.co-line--total { border-top:1px solid var(--line); margin-top:6px; padding-top:10px; font-weight:700; color:var(--ink); }
.co-line--note { font-size:12.5px; color:var(--muted); padding-top:2px; }

@media (max-width:1000px) {
  .nav--solid .nav__links, .nav--solid .nav__actions { display:none; }
  .cart-btn--mobile { display:inline-grid; }
}
@media (max-width:900px) {
  .coll-tiles { grid-template-columns:1fr; }
  .coll-tile { grid-template-columns:.8fr 1.2fr; }
  .pgrid { grid-template-columns:1fr 1fr; }
  .pdp { grid-template-columns:1fr; gap:28px; }
  .pdp__media { position:relative; top:0; aspect-ratio:4/3; }
  .pdp__detail { grid-template-columns:1fr; gap:32px; }
}
@media (max-width:560px) {
  .pgrid { grid-template-columns:1fr; }
  .pdp__plans { grid-template-columns:1fr; }
  .coll-tile { grid-template-columns:1fr; }
  .coll-tile__media { padding:30px; }
}

/* ============================================================
   SHOP v2 — flagship components
   ============================================================ */
/* Shop hero */
.shop-hero2 { position:relative; overflow:hidden; background:var(--cream); }
.shop-hero2__bg { position:absolute; inset:0; pointer-events:none; }
.shop-hero2__bg .orb { position:absolute; border-radius:50%; }
.shop-hero2__bg .orb--1 { width:520px; height:520px; background:radial-gradient(circle,#FFB59B 0%,rgba(255,181,155,.4) 36%,transparent 66%); top:-180px; right:-90px; opacity:.5; }
.shop-hero2__bg .orb--2 { width:440px; height:440px; background:radial-gradient(circle,#FFE0CF 0%,rgba(255,224,207,.4) 36%,transparent 66%); bottom:-200px; left:-100px; opacity:.55; }
.shop-hero2__inner { position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:clamp(40px,6vw,84px) 24px; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.shop-hero2__copy h1 { font-family:var(--font-display); font-weight:500; font-size:clamp(38px,5.4vw,68px); line-height:1.02; letter-spacing:-.025em; margin:14px 0 16px; }
.shop-hero2__copy h1 em { font-style:italic; color:var(--coral); }
.shop-hero2__copy p { color:var(--charcoal); font-size:18px; max-width:520px; }
.shop-hero2__cta { display:flex; gap:12px; margin:28px 0 22px; flex-wrap:wrap; }
.shop-hero2__proof { font-size:14px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.shop-hero2__proof strong { color:var(--ink); }
.shop-hero2__art { position:relative; min-height:380px; display:grid; place-items:center; }
.shop-hero2__art .ring { position:absolute; width:360px; height:360px; border:1px solid var(--line-2); border-radius:50%; }
.shop-hero2__art .ring::after { content:""; position:absolute; inset:36px; border:1px dashed var(--line-2); border-radius:50%; }
.art-vial { position:absolute; filter:drop-shadow(0 22px 34px rgba(19,19,20,.17)); animation:floaty 6s ease-in-out infinite; }
.art-vial--1 { height:300px; z-index:2; }
.art-vial--2 { height:150px; right:6%; bottom:6%; opacity:.92; z-index:1; animation-delay:1.2s; }
@keyframes floaty { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-9px) rotate(.4deg); } }
.art-card { position:absolute; z-index:3; background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:14px; padding:12px 16px; box-shadow:var(--shadow); font-size:13px; }
.art-card--a { top:6%; left:-2%; display:flex; flex-direction:column; }
.art-card--a strong { font-family:var(--font-display); font-size:24px; }
.art-card--a em { font-style:normal; color:var(--muted); font-size:12px; }
.art-card--b { bottom:10%; left:0; display:flex; align-items:center; gap:8px; font-weight:500; }
.dotok { width:8px; height:8px; border-radius:50%; background:#34c759; box-shadow:0 0 0 4px rgba(52,199,89,.18); }

/* Value strip */
.valuestrip { max-width:var(--maxw); margin:0 auto; padding:8px 24px; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.vstrip { display:flex; align-items:center; gap:12px; padding:18px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-xs); }
.vstrip__ico { width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:11px; background:var(--coral-soft); font-size:18px; }
.vstrip strong { display:block; font-size:14.5px; }
.vstrip em { font-style:normal; font-size:12.5px; color:var(--muted); }

.shop-allhead { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:clamp(40px,5vw,64px) 0 24px; }
.shop-allhead h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.01em; }
.shop-allhead span { color:var(--muted); font-size:14px; }

/* Science band */
.science { background:var(--ink); color:#fff; margin-top:clamp(50px,7vw,90px); position:relative; overflow:hidden; }
.science::before { content:""; position:absolute; width:560px; height:560px; background:radial-gradient(circle,rgba(247,128,90,.18),transparent 65%); top:-260px; left:-120px; }
.science__inner { position:relative; max-width:var(--maxw); margin:0 auto; padding:clamp(48px,6vw,84px) 24px; display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.science__copy h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(28px,3.6vw,42px); letter-spacing:-.02em; margin:12px 0 14px; }
.science__copy p { color:rgba(255,255,255,.78); font-size:16.5px; }
.science__list { list-style:none; margin-top:18px; display:grid; gap:10px; }
.science__list li { position:relative; padding-left:28px; color:rgba(255,255,255,.9); }
.science__list li::before { content:"✓"; position:absolute; left:0; color:var(--coral); font-weight:700; }
.science__cards { display:grid; gap:14px; }
.scard { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-sm); padding:22px 24px; }
.scard h3 { font-family:var(--font-display); color:var(--coral); font-size:15px; margin-bottom:6px; }
.scard p { color:rgba(255,255,255,.75); font-size:14.5px; }

/* Collection banner + toolbar */
.coll-banner { background:radial-gradient(800px 360px at 80% -30%, var(--coral-tint), transparent 60%), var(--cream); border-bottom:1px solid var(--line); }
.coll-banner__inner { max-width:var(--maxw); margin:0 auto; padding:clamp(32px,4vw,56px) 24px; text-align:center; }
.coll-banner__inner .crumb { justify-content:center; }
.coll-banner__inner p { margin-left:auto; margin-right:auto; }
.coll-banner h1 { font-family:var(--font-display); font-weight:500; font-size:clamp(32px,4.4vw,52px); letter-spacing:-.02em; margin:8px 0 10px; }
.coll-banner p { color:var(--charcoal); max-width:560px; }
.coll-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.coll-chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip2 { font-family:var(--font-body); font-weight:600; font-size:13.5px; padding:8px 16px; border-radius:100px; border:1.5px solid var(--line-2); background:var(--paper); color:var(--charcoal); cursor:pointer; transition:.2s var(--ease); }
.chip2:hover { border-color:var(--coral); color:var(--coral-deep); }
.chip2.is-active { background:var(--ink); color:#fff; border-color:var(--ink); }

/* PDP v2 */
.pdp-wrap { padding-bottom:clamp(30px,4vw,48px); }
.pdp__media-col { position:sticky; top:84px; display:flex; flex-direction:column; gap:14px; }
/* top:0 resets the top:90px inherited from the earlier sticky .pdp__media rule.
   With position:relative that offset shifted the panel 90px below its layout
   box, so it painted over whatever followed it in .pdp__media-col. */
.pdp__media { position:relative; top:0; background:linear-gradient(160deg,var(--coral-tint),#fff); border:1px solid var(--line); border-radius:var(--radius); display:grid; place-items:center; padding:40px; aspect-ratio:1/1; overflow:hidden; }
.pdp__media::before { content:""; position:absolute; width:70%; aspect-ratio:1; background:radial-gradient(circle,rgba(247,128,90,.22),transparent 65%); border-radius:50%; }
.pdp__media img { position:absolute; inset:0; margin:auto; z-index:1; height:80%; width:84%; object-fit:contain; filter:drop-shadow(0 22px 32px rgba(19,19,20,.16)); transition:transform .6s var(--ease); }
.pdp__media:hover img { transform:scale(1.05); }
.pdp__chips { display:flex; gap:10px; flex-wrap:wrap; }
.pdp__chips span { font-size:12.5px; font-weight:600; color:var(--charcoal); background:var(--paper); border:1px solid var(--line); border-radius:100px; padding:8px 14px; }
.planopt { position:relative; }
.planopt__tag { position:absolute; top:-9px; right:12px; background:var(--coral); color:#fff; font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:100px; letter-spacing:.02em; }
.pdp__buy .btn--lg { flex:1; }
/* Reassurance line under the Buy button — centred and small, the way Ivy RX
   sets its "Compounded in an FDA-registered U.S. pharmacy" note. */
.pdp__aslow { font-size:12.5px; line-height:1.5; font-weight:500; color:var(--muted); margin-top:12px; text-align:center; }
.pdp__aslow strong { color:var(--ink); }
/* Removed 2026-07-27: .pdp__included and .qa.inc were two earlier takes on the
   "What's included" list. Neither class was emitted by any markup any more —
   the live version is the .pdp__accs accordion with .pdp__inclist inside it. */
.pdp__guarantee { display:flex; gap:12px; align-items:flex-start; background:var(--coral-tint); border:1px solid var(--coral-soft); border-radius:var(--radius-sm); padding:16px 18px; }
.pdp__guarantee span { font-size:20px; }
.pdp__guarantee strong { display:block; font-size:14.5px; }
.pdp__guarantee div { font-size:13.5px; color:var(--charcoal); }

/* First-time-customer promo with scratch-to-reveal code */
/* First-order discount — basic box (no scratch card) */
.pdp__promo { display:flex; gap:10px; align-items:flex-start; background:var(--coral-tint); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 16px; }
.pdp__promo > span { font-size:18px; line-height:1.5; }
.pdp__promo strong { display:block; font-size:14px; color:var(--ink); }
.pdp__promo div { font-size:13.5px; color:var(--charcoal); }
.pdp__promo-code { font-weight:700; letter-spacing:.06em; color:var(--coral-deep); }

/* Sticky sub-nav */
.pdp-nav { position:sticky; top:62px; z-index:50; background:rgba(255,246,229,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pdp-nav__inner { max-width:var(--maxw); margin:0 auto; padding:0 24px; display:flex; align-items:center; gap:28px; height:56px; }
.pdp-nav a { font-size:14px; font-weight:600; color:var(--muted); position:relative; height:100%; display:flex; align-items:center; }
.pdp-nav a::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--coral); transform:scaleX(0); transition:transform .25s var(--ease); }
.pdp-nav a.is-active { color:var(--ink); } .pdp-nav a.is-active::after { transform:scaleX(1); }
.pdp-nav__buy { margin-left:auto; display:flex; align-items:center; gap:14px; opacity:0; transform:translateX(12px); pointer-events:none; transition:.3s var(--ease); }
.pdp-nav__buy strong { font-family:var(--font-display); font-size:18px; }
.pdp-nav.is-stuck .pdp-nav__buy { opacity:1; transform:none; pointer-events:auto; }

/* Persistent buy bar — always one easy tap to start, at any scroll position */
.buybar { position:fixed; left:0; right:0; bottom:0; z-index:80; background:rgba(255,255,255,.94); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--line); box-shadow:0 -12px 40px -22px rgba(19,19,20,.45); transform:translateY(115%); transition:transform .45s var(--ease-out); }
.buybar.is-shown { transform:none; }
.buybar__inner { max-width:var(--maxw); margin:0 auto; padding:12px 24px calc(12px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:16px; }
.buybar__inner img { width:48px; height:56px; object-fit:contain; background:var(--coral-tint); border-radius:12px; padding:5px; flex:none; }
.buybar__info { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.buybar__info strong { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.buybar__info span { font-size:14px; font-weight:600; color:var(--coral-deep); }
.buybar .btn { margin-left:auto; min-width:210px; }
body.pdp-active .footer { padding-bottom:96px; }
@media (max-width:600px) {
  .buybar__inner { padding:10px 16px calc(10px + env(safe-area-inset-bottom)); gap:12px; }
  .buybar__inner img { display:none; }
  .buybar .btn { min-width:0; flex:1; }
  .buybar__info strong { font-size:14px; }
}

/* PDP sections */
.pdp-sections { padding-top:clamp(40px,5vw,64px); }
.pdp-sec { padding:clamp(34px,4vw,52px) 0; border-bottom:1px solid var(--line); }
.pdp-sec:last-of-type { border-bottom:0; }
.pdp-sec > h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(26px,3.4vw,38px); letter-spacing:-.01em; margin-bottom:24px; }
.pdp-sec__grid { display:grid; grid-template-columns:1.3fr 1fr; gap:40px; }
.pdp-sec__grid p { color:var(--charcoal); margin-bottom:14px; }
.howcards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.howcard { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:24px; box-shadow:var(--shadow-xs); }
.howcard span { font-family:var(--font-display); font-weight:600; color:var(--coral-deep); font-size:15px; }
.howcard strong { display:block; font-family:var(--font-display); font-size:18px; margin:8px 0 6px; }
.howcard p { color:var(--charcoal); font-size:14.5px; }
.timeline2 { margin-top:34px; }
.timeline2 h3 { font-family:var(--font-display); font-weight:600; font-size:19px; margin-bottom:18px; }
.timeline2__track { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; position:relative; }
.timeline2__track::before { content:""; position:absolute; top:5px; left:6%; right:6%; height:2px; background:repeating-linear-gradient(90deg,var(--coral-soft) 0 10px,transparent 10px 18px); }
.tl2 { position:relative; padding-top:22px; }
.tl2__dot { position:absolute; top:0; left:0; width:12px; height:12px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 4px var(--coral-soft); }
.tl2 strong { display:block; font-size:13px; color:var(--coral-deep); margin-bottom:4px; }
.tl2 p { font-size:14px; color:var(--charcoal); }
.ingrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.ingcard { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:22px; box-shadow:var(--shadow-xs); }
.ingcard__mol { width:42px; height:42px; border-radius:12px; margin-bottom:14px; background:radial-gradient(circle at 30% 30%, var(--coral) 0 22%, transparent 23%), radial-gradient(circle at 72% 42%, var(--coral-deep) 0 16%, transparent 17%), radial-gradient(circle at 50% 78%, var(--coral) 0 14%, transparent 15%), var(--coral-soft); }
.ingcard strong { display:block; font-family:var(--font-display); font-size:17px; margin-bottom:6px; }
.ingcard p { color:var(--charcoal); font-size:14px; }

/* Rail arrows (used by the featured-treatments rail) */
.rev-arrow { position:absolute; top:42%; transform:translateY(-50%); z-index:3; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2); background:rgba(255,255,255,.95); backdrop-filter:blur(6px); color:var(--ink); cursor:pointer; box-shadow:var(--shadow-sm); display:grid; place-items:center; font-size:18px; transition:transform .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease); }
.rev-arrow:hover { border-color:var(--coral); color:var(--coral-deep); transform:translateY(-50%) scale(1.08); }
.rev-arrow--prev { left:-12px; }
.rev-arrow--next { right:-12px; }

/* Toast */
.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,140%); z-index:400; display:flex; align-items:center; gap:12px; background:var(--ink); color:#fff; padding:13px 16px 13px 14px; border-radius:100px; box-shadow:0 20px 50px -16px rgba(19,19,20,.5); transition:transform .4s var(--ease-out); max-width:92vw; }
.toast.show { transform:translate(-50%,0); }
.toast__ico { width:22px; height:22px; flex:none; display:grid; place-items:center; border-radius:50%; background:var(--coral); font-size:12px; }
.toast__msg { font-size:14px; font-weight:500; }
.toast__act { background:rgba(255,255,255,.14); border:0; color:#fff; font-weight:600; font-size:13px; padding:7px 14px; border-radius:100px; cursor:pointer; }
.toast__act:hover { background:var(--coral); }

/* Cart bump + progress + upsell */
.cart-btn.bump { animation:cartBump .5s var(--ease); }
@keyframes cartBump { 0%,100% { transform:none; } 30% { transform:scale(1.18) rotate(-6deg); } 60% { transform:scale(.96); } }
.cart-prog { background:var(--coral-tint); border:1px solid var(--coral-soft); border-radius:var(--radius-sm); padding:14px 16px; margin:8px 0 16px; }
.cart-prog p { font-size:13px; color:var(--charcoal); margin-bottom:9px; }
.cart-prog i { display:block; height:7px; background:#fff; border-radius:5px; overflow:hidden; }
.cart-prog i b { display:block; height:100%; background:linear-gradient(90deg,var(--coral),var(--coral-deep)); border-radius:5px; transition:width .4s var(--ease); }
.cart-empty__ico { font-size:40px; margin-bottom:10px; }
.cart-upsell { margin-top:18px; padding-top:18px; border-top:1px dashed var(--line-2); }
.cart-upsell h4 { font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:12px; }
.upitem { display:flex; align-items:center; gap:12px; padding:8px 0; }
.upitem img { width:42px; height:48px; object-fit:contain; background:var(--coral-tint); border-radius:10px; padding:5px; }
.upitem strong { display:block; font-size:13.5px; }
.upitem em { font-style:normal; font-size:12.5px; color:var(--muted); }
.upitem button { margin-left:auto; background:var(--ink); color:#fff; border:0; border-radius:100px; padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer; transition:.2s var(--ease); }
.upitem button:hover { background:var(--coral); }

@media (max-width:900px) {
  .shop-hero2__inner { grid-template-columns:1fr; }
  .shop-hero2__art { order:-1; min-height:300px; }
  .valuestrip { grid-template-columns:1fr 1fr; }
  .science__inner { grid-template-columns:1fr; gap:30px; }
  .pdp__media-col { position:relative; top:0; }
  .pdp-sec__grid { grid-template-columns:1fr; gap:24px; }
  .howcards { grid-template-columns:1fr; }
  .timeline2__track { grid-template-columns:1fr 1fr; gap:24px; }
  .timeline2__track::before { display:none; }
  .rev-arrow { display:none; }
  .pdp-nav__inner { gap:18px; overflow-x:auto; }
}
@media (max-width:560px) {
  .valuestrip { grid-template-columns:1fr; }
  .timeline2__track { grid-template-columns:1fr; }
  .pdp-nav__buy { display:none; }
}

/* ============================================================
   COLLECTION GALLERY — editorial offset layout
   ============================================================ */
.coll-wrap { padding-top:18px; }
.gallery { display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(28px,4.5vw,64px); row-gap:clamp(36px,5vw,72px); align-items:start; padding-bottom:clamp(48px,7vw,110px); }
.gallery > .gcard:nth-child(even) { margin-top:clamp(48px,9vw,120px); }
.gcard { display:flex; flex-direction:column; position:relative; }

.gcard__media { position:relative; aspect-ratio:4/4.4; border-radius:calc(var(--radius) + 6px); overflow:hidden; display:grid; place-items:center; transition:box-shadow .5s var(--ease); }
.gcard:nth-child(4n+1) .gcard__media { background:linear-gradient(168deg,#F0E7D6 0%,#FFFBF2 70%); }
.gcard:nth-child(4n+2) .gcard__media { background:linear-gradient(168deg,#FDE4D6 0%,#FFF6EE 70%); }
.gcard:nth-child(4n+3) .gcard__media { background:linear-gradient(168deg,#FFEEDC 0%,#FEFDFC 70%); }
.gcard:nth-child(4n) .gcard__media { background:linear-gradient(168deg,#F5EDDE 0%,#FFFBF4 70%); }
.gcard__media::before { content:""; position:absolute; width:70%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(247,128,90,.22),transparent 65%); transition:transform .6s var(--ease); }
.gcard__media::after { content:""; position:absolute; inset:0; border-radius:inherit; border:1.5px solid transparent; transition:border-color .4s var(--ease); pointer-events:none; }
.gcard:hover .gcard__media { box-shadow:var(--shadow-lg); }
.gcard:hover .gcard__media::before { transform:scale(1.15); }
.gcard:hover .gcard__media::after { border-color:var(--coral); }

.gcard__no { position:absolute; top:2px; left:18px; font-family:var(--font-display); font-weight:600; font-size:clamp(84px,10vw,132px); line-height:1.1; color:rgba(194,73,30,.09); user-select:none; }
.gcard__badge { position:absolute; top:16px; right:16px; z-index:2; background:var(--coral); color:#fff; font-size:11.5px; font-weight:600; padding:6px 13px; border-radius:100px; box-shadow:var(--shadow-coral); }
.gcard__media img { position:absolute; inset:0; margin:auto; z-index:1; height:85%; width:86%; object-fit:contain; filter:drop-shadow(0 26px 34px rgba(19,19,20,.18)); transition:transform .6s var(--ease); }
.gcard:hover .gcard__media img { transform:translateY(-10px) scale(1.05) rotate(-2deg); }

.gcard__body { padding:22px 6px 0; display:flex; flex-direction:column; }
.gcard__cat { font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--coral-deep); }
.gcard__body h3 { font-family:var(--font-display); font-weight:600; font-size:clamp(24px,2.6vw,31px); letter-spacing:-.01em; margin:8px 0 8px; transition:color .25s var(--ease); }
.gcard:hover .gcard__body h3 { color:var(--coral-deep); }
.gcard__body > p { color:var(--muted); font-size:14.5px; line-height:1.6; max-width:44ch; }
.gcard__foot { margin-top:16px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:14px; }
.gcard__price { font-family:var(--font-display); font-weight:600; font-size:23px; font-variant-numeric:tabular-nums; }
.gcard__price em { font-style:normal; font-size:12.5px; color:var(--muted); font-family:var(--font-body); }
.gcard__price--tbd { font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--muted); }
.gcard__cta { font-weight:600; font-size:14px; color:var(--coral-deep); display:inline-flex; align-items:center; gap:6px; }
.gcard__cta i { font-style:normal; transition:transform .25s var(--ease); }
.gcard:hover .gcard__cta i { transform:translateX(5px); }

@media (max-width:700px) {
  .gallery { grid-template-columns:1fr; row-gap:44px; }
  .gallery > .gcard:nth-child(even) { margin-top:0; }
  .gcard__media { aspect-ratio:4/3.6; }
  .gcard__media img { height:88%; width:90%; }
}

/* ============================================================
   BMI CALCULATOR — screening guideline helper
   ============================================================ */
.bmi { background:radial-gradient(900px 480px at 82% -10%,var(--coral-soft),transparent 62%),linear-gradient(180deg,var(--cream),var(--coral-tint)); border-top:1px solid var(--line); }
.bmi__inner { max-width:var(--maxw); margin:0 auto; padding:clamp(56px,7vw,104px) 24px; display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(32px,5vw,72px); align-items:center; }
.bmi__copy h2 { font-family:var(--font-display); font-weight:500; font-size:clamp(30px,4vw,46px); line-height:1.06; letter-spacing:-.02em; }
.bmi__copy > p { color:var(--charcoal); font-size:16.5px; margin-top:16px; max-width:46ch; }
.bmi__points { list-style:none; margin-top:22px; display:grid; gap:11px; }
.bmi__points li { position:relative; padding-left:30px; font-size:15px; color:var(--charcoal); font-weight:500; }
.bmi__points li::before { content:"✓"; position:absolute; left:0; top:1px; color:var(--coral-deep); background:#fff; border:1px solid var(--coral-soft); width:20px; height:20px; display:grid; place-items:center; border-radius:50%; font-size:11px; font-weight:700; }

.bmi__card { background:var(--paper); border:1.5px solid var(--line); border-radius:calc(var(--radius) + 6px); padding:clamp(24px,3vw,38px); box-shadow:var(--shadow-lg); transition:border-color .4s var(--ease); }
.bmi__card.is-eligible { border-color:var(--coral); }
.bmi__row { margin-bottom:20px; }
.bmi__row label { display:flex; justify-content:space-between; align-items:baseline; font-size:13.5px; font-weight:600; color:var(--charcoal); margin-bottom:10px; }
.bmi__row output { font-family:var(--font-display); font-size:19px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.bmi__row input[type="range"] { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; background:linear-gradient(90deg,var(--coral-soft),var(--line-2)); outline:none; cursor:pointer; }
.bmi__row input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--coral); border:3.5px solid #fff; box-shadow:var(--shadow-coral); transition:transform .15s var(--ease); }
.bmi__row input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.12); }
.bmi__row input[type="range"]::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:var(--coral); border:3.5px solid #fff; box-shadow:var(--shadow-coral); cursor:pointer; }
.bmi__row input[type="range"]:focus-visible { outline:2px solid var(--coral-deep); outline-offset:4px; }

.bmi__readout { display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center; margin:26px 0 14px; padding-top:22px; border-top:1px solid var(--line); }
.bmi__score { text-align:center; }
.bmi__score span { display:block; font-family:var(--font-display); font-weight:600; font-size:clamp(44px,5vw,58px); line-height:1; color:var(--ink); font-variant-numeric:tabular-nums; }
/* before the first calculation the "—" placeholder should read as empty, not as a heavy black bar */
.bmi__card:not(.is-calculated) .bmi__score span { color:var(--line-2); }
.bmi__score em { font-style:normal; display:block; margin-top:6px; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.bmi__catlabel { display:inline-block; font-size:13px; font-weight:700; color:var(--coral-deep); margin-bottom:10px; }
.bmi__scale { position:relative; height:10px; border-radius:8px; background:linear-gradient(90deg,#8FB8E8 0 12.9%,#43A96E 12.9% 37%,#F2B84B 37% 55.6%,var(--coral) 55.6% 100%); }
.bmi__scale i { position:absolute; top:50%; left:0; width:20px; height:20px; border-radius:50%; background:#fff; border:4px solid var(--ink); transform:translate(-50%,-50%); transition:left .25s var(--ease); box-shadow:var(--shadow-sm); }
.bmi__ticks { position:relative; height:18px; margin-top:6px; font-size:11px; color:var(--muted); }
.bmi__ticks span { position:absolute; transform:translateX(-50%); }
.bmi__ticks span:nth-child(1) { left:12.9%; } .bmi__ticks span:nth-child(2) { left:37%; } .bmi__ticks span:nth-child(3) { left:55.6%; } .bmi__ticks span:nth-child(4) { left:92.6%; }
.bmi__msg { font-size:14.5px; color:var(--charcoal); line-height:1.6; min-height:3.2em; margin-bottom:14px; }
.bmi__card.is-eligible .bmi__msg { color:var(--ink); font-weight:500; }
.bmi__cta { width:100%; }
.bmi__fine { margin-top:14px; font-size:12px; color:var(--muted); line-height:1.6; }

@media (max-width:900px) {
  .bmi__inner { grid-template-columns:1fr; }
  .bmi__readout { grid-template-columns:1fr; gap:16px; text-align:left; }
  .bmi__score { display:flex; align-items:baseline; gap:12px; text-align:left; }
}

/* ============================================================
   MOBILE REVAMP — app-quality small-screen experience
   ============================================================ */
@media (max-width:880px) {
  /* Hero — copy-first, full-width CTAs, compact layered visual */
  .hero { padding-top:44px; }
  .hero__inner { padding-top:30px; padding-bottom:26px; gap:8px; }
  .hero__visual { order:1; min-height:330px; margin-top:4px; }
  .hero__title { font-size:clamp(43px,11.4vw,64px); margin:18px 0 16px; }
  .hero__sub { font-size:16px; }
  .hero__cta { flex-direction:column; align-items:stretch; gap:10px; }
  .hero__cta .btn--lg { width:100%; padding:16px 22px; font-size:16px; }
  .hero__cta .btn--text { justify-content:center; padding:10px; }
  .hero__proof { margin-top:18px; }
  .hero__ring { width:290px; height:290px; }
  .hero__glow { width:260px; height:260px; }
  .hero__vial { width:150px; }
  .float-card { padding:10px 14px; font-size:12.5px; border-radius:14px; }
  .float-card--price { top:4%; left:2%; }
  .float-card--price .float-card__v { font-size:22px; }
  .float-card--ship { bottom:8%; right:2%; }
  .float-card--rating { display:none; }
  .scroll-hint { display:none; }

  /* Sticky bottom bar — glassier, tighter */
}

@media (max-width:700px) {
  /* Compare table → stacked feature cards */
  .compare__head { grid-template-columns:1fr 1fr; }
  .compare__head > div:first-child { display:none; }
  /* Move the row's 18px gutter from the row onto its cells, so the head grid and
     the row grid use identical full-width tracks (padding on the row shrank its
     tracks and knocked the columns 18px out of step). The head keeps padding:0 so
     the VIV column's gradient still bleeds to the table edge. */
  .compare__col { text-align:left; padding:14px 14px; font-size:13px; }
  /* No ✓/✕ indent on phones — the columns are ~163px and the extra 28px pushed
     "Traditional clinic" onto two lines. Headers sit over the icon column instead. */
  .compare__col--viv, .compare__col--old { padding-left:14px; }
  .compare__col--viv .brand__img--compare { margin:0; }
  .compare__row { grid-template-columns:1fr 1fr; row-gap:8px; padding:15px 0; }
  .compare__row > span { padding:0 14px; font-size:13.5px; }
  .compare__row > span:first-child { grid-column:1/-1; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
  .compare__row .yes, .compare__row .no { justify-content:flex-start; text-align:left; gap:8px; }

  /* Horizontal rails — bigger peek, consistent card width */
  .feat-rail > .pc { flex:0 0 74vw; }

  /* Shop toolbar stacks */
  .coll-toolbar { flex-direction:column; align-items:stretch; }
  .coll-sort { display:flex; justify-content:flex-end; }
  .shop-hero2__cta .btn { width:100%; }
  .shop-hero2__cta { flex-direction:column; align-items:stretch; gap:10px; }
}

@media (max-width:560px) {
  /* Rhythm & type scale */
  .section-head h2 { font-size:30px; }
  .section-head { margin-bottom:30px; }
  .section-head p { font-size:15.5px; }
  .eyebrow { font-size:12px; }
  .promise__item { padding:26px 22px; }
  .promise__item h2 { font-size:21px; }
  .coll-tile__media { padding:22px; }
  .coll-tile__media img { height:118px; }
  .coll-tile__body { padding:22px; }
  .tstep__num { width:50px; height:50px; font-size:18px; }
  .stats__inner { gap:30px 18px; }
  .stat__num { font-size:42px; }
  .pcard-doc { padding:14px 16px; }
  .avatar--lg { width:46px; height:46px; font-size:15px; }
  .qa { padding:2px 18px; }
  .qa summary { font-size:15.5px; padding:16px 0; }
  .cta__card { border-radius:24px; padding:46px 22px; }
  .cta__card h2 { font-size:31px; }
  .footer__inner { gap:26px; padding-bottom:26px; }
  .footer__legallinks { gap:8px 18px; }
  .footer__legal { padding-bottom:calc(84px + env(safe-area-inset-bottom)); }

  /* Press strip */
  .press { padding:34px 0 8px; }
  .marquee__track { gap:44px; }
  .marquee__track img { height:21px; }

  /* Shop: banner, gallery, BMI, PDP */
  .coll-banner h1 { font-size:36px; }
  .gcard__body h3 { font-size:24px; }
  .gcard__no { font-size:88px; }
  .bmi__inner { padding:56px 24px; } /* 24px gutter + 56px rhythm, matching every other section */
  .bmi__copy h2 { font-size:30px; }
  .bmi__card { padding:22px 18px; }
  .pdp__media { padding:26px; }
  /* The 520px studio panel ate the whole first screen on a phone. Shorter, so
     the name, price, and Buy button clear the fold like Good Life's PDP does. */
  .pdp__media.pdp__media--panel { min-height:340px; padding:34px 26px; }
  .pdp__media--panel img { max-height:250px; }
  /* Scales with the viewport so the longest product name still holds one line
     down to 320px. See the nowrap note on the base .pdp__info h1 rule. */
  .pdp__info h1 { font-size:clamp(20px,6vw,29px); }
  .pdp__price .price { font-size:30px; }
  .pdp__buy .btn--lg { width:100%; padding:16px 22px; font-size:16px; }
  .pdp__chips { flex-wrap:wrap; }
  .pdp-sec h2 { font-size:26px; }
  .buybar__inner { padding:10px 16px calc(10px + env(safe-area-inset-bottom)); gap:12px; }
  .buybar { background:rgba(255,246,229,.82); -webkit-backdrop-filter:blur(24px) saturate(1.6); backdrop-filter:blur(24px) saturate(1.6); }
}

/* Touch feedback — cards respond like native buttons */
@media (hover:none) {
  .gcard:active .gcard__media { box-shadow:var(--shadow-sm); }
  .gcard:active .gcard__media img { transform:scale(.97); }
  .pc:active, .coll-tile:active { transform:scale(.985); }
  .rev:active { transform:scale(.985); }
  .qa summary, .drawer__links a, .nav__burger { -webkit-tap-highlight-color:transparent; }
}

/* ============================================================
   DISPLAY TYPE TUNING — optical corrections for Poppins headlines
   (the serif metrics — ultra-tight leading/tracking + italic
   accents — don't translate to a geometric sans)
   ============================================================ */
/* Hero: firmer weight, breathing room between lines, relaxed tracking */
.hero__title { font-weight:600; font-size:clamp(40px,5.7vw,76px); line-height:1.09; letter-spacing:-.015em; }
/* Accent words: color + weight carry the emphasis — no faux-slant italic */
.hero__title em, .shop-hero2__copy h1 em { font-style:normal; color:var(--coral); }
.shop-hero2__copy h1 { font-weight:600; font-size:clamp(36px,5vw,62px); line-height:1.1; letter-spacing:-.015em; }

/* Section headings: consistent 600 weight, open leading */
.section-head h2 { font-weight:600; font-size:clamp(29px,4.2vw,46px); line-height:1.14; letter-spacing:-.015em; }
.providers__copy h2, .bmi__copy h2 { font-weight:600; line-height:1.16; letter-spacing:-.015em; }
.cta__card h2 { font-weight:600; font-size:clamp(28px,4vw,48px); line-height:1.14; letter-spacing:-.015em; }
.coll-banner h1 { font-weight:600; font-size:clamp(31px,4.2vw,48px); line-height:1.12; letter-spacing:-.015em; }
.shop-hero h1 { font-weight:600; line-height:1.12; letter-spacing:-.015em; }
.coll-head h1 { font-weight:600; line-height:1.12; letter-spacing:-.015em; }
.shop-allhead h2 { font-weight:600; letter-spacing:-.01em; }
.pdp__info h1 { line-height:1.12; letter-spacing:-.015em; }
.pdp-sec h2 { letter-spacing:-.01em; }

/* Mobile: keep the corrected leading at the larger mobile scale */
@media (max-width:880px) {
  .hero__title { font-size:clamp(38px,10vw,58px); line-height:1.1; }
}

/* ============================================================
   PRODUCT PAGE — real e-commerce presentation
   (clean studio panel + thumbnail views; the arty tinted panels
   stay on collection/gallery cards only)
   ============================================================ */
.pdp__media { background:var(--paper); }
.pdp__media::before { display:none; }
#pdpImg { transition:opacity .18s var(--ease); }
.pdp__thumbs { display:flex; gap:10px; margin-top:14px; }
.pdp__thumb { position:relative; width:74px; height:74px; flex:none; border:1.5px solid var(--line); border-radius:14px; background:var(--paper); cursor:pointer; overflow:hidden; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); -webkit-tap-highlight-color:transparent; }
.pdp__thumb img { position:absolute; inset:8px; width:calc(100% - 16px); height:calc(100% - 16px); object-fit:contain; }
.pdp__thumb:hover { border-color:var(--coral-bright); }
.pdp__thumb.is-active { border-color:var(--coral); box-shadow:0 0 0 3px rgba(254,98,29,.12); }
.pdp__thumb:focus-visible { outline:2px solid var(--coral-deep); outline-offset:2px; }

/* ============================================================
   BMI CALCULATOR v2 — field inputs + Calculate (Good Life pattern)
   ============================================================ */
.bmi__fields { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:10px; margin-bottom:12px; }
.bmi__field label { display:block; font-size:12px; font-weight:600; color:var(--charcoal); margin-bottom:6px; }
.bmi__field input { width:100%; padding:13px 14px; border:1.5px solid var(--line-2); border-radius:12px; font-family:var(--font-body); font-size:16px; font-weight:600; color:var(--ink); background:var(--paper); transition:border-color .2s var(--ease), box-shadow .2s var(--ease); -moz-appearance:textfield; }
.bmi__field input::-webkit-outer-spin-button, .bmi__field input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.bmi__field input:focus { outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(254,98,29,.14); }
.bmi__field input::placeholder { color:#B9B9B9; font-weight:500; }
.bmi__calc { width:100%; margin-bottom:20px; }
.bmi__seglabels { position:relative; height:16px; margin-top:6px; font-size:10.5px; font-weight:600; letter-spacing:.02em; color:var(--muted); }
.bmi__seglabels span { position:absolute; transform:translateX(-50%); white-space:nowrap; }
.bmi__seglabels span:nth-child(1) { left:6.5%; }
.bmi__seglabels span:nth-child(2) { left:25%; }
.bmi__seglabels span:nth-child(3) { left:46.3%; }
.bmi__seglabels span:nth-child(4) { left:77.8%; }
.bmi__scale i[hidden] { display:none; }
.bmi__card .bmi__cta { width:100%; }
@media (max-width:420px) {
  .bmi__fields { grid-template-columns:1fr 1fr; }
  .bmi__field:nth-child(3) { grid-column:1/-1; }
  .bmi__seglabels { font-size:9px; }
  /* .btn is white-space:nowrap; long CTA labels must wrap on narrow phones
     or they widen the layout past the viewport */
  .btn--lg { white-space:normal; text-align:center; }
}

/* ---------- Motion pause control (WCAG 2.2.2) ---------- */
/* z-index 80: below the mobile CTA bar (90), drawer (98), nav (100), and
   modals (300) so it never floats over navigation chrome. */
.motion-toggle { position:fixed; left:18px; bottom:18px; z-index:80; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1.5px solid var(--line); background:var(--paper); color:var(--charcoal); font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer; box-shadow:var(--shadow-sm); transition:border-color .2s var(--ease), color .2s var(--ease); }
.motion-toggle:hover { border-color:var(--coral); color:var(--ink); }
.motion-toggle span[aria-hidden] { font-size:11px; }
html.motion-paused * { animation-play-state:paused !important; }
/* Mobile: compact icon-only circle so it doesn't cover content */
@media (max-width:880px) {
  .motion-toggle { left:12px; bottom:calc(74px + env(safe-area-inset-bottom)); width:42px; height:42px; padding:0; justify-content:center; gap:0; border-radius:50%; }
  .motion-toggle .mt-label { display:none; }
  .motion-toggle span[aria-hidden] { font-size:13px; }
}

/* ---------- BMI guidelines table + disclaimer ---------- */
.bmi__guide { margin-top:24px; background:var(--paper); border:1.5px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.bmi__guide h3 { font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:13px 16px 11px; border-bottom:1px solid var(--line); }
.bmi__guiderow { display:flex; align-items:center; gap:10px; padding:11px 16px; font-size:14px; border-bottom:1px solid var(--line); transition:background .25s var(--ease), box-shadow .25s var(--ease); }
.bmi__dot { width:10px; height:10px; border-radius:50%; flex:none; }
.bmi__dot--under { background:#8FB8E8; }
.bmi__dot--normal { background:#43A96E; }
.bmi__dot--over { background:#F2B84B; }
.bmi__dot--obese { background:var(--coral); }
.bmi__guidecat { font-weight:600; color:var(--ink); }
.bmi__guiderange { margin-left:auto; color:var(--charcoal); font-variant-numeric:tabular-nums; }
.bmi__guiderow.is-active { background:var(--coral-tint); box-shadow:inset 3px 0 0 var(--coral); }
.bmi__guiderow.is-active .bmi__guidecat { color:var(--coral-deep); }
.bmi__guidenote { padding:12px 16px 14px; font-size:12.5px; color:var(--muted); line-height:1.6; }
.bmi__range { font-size:13.5px; font-weight:500; color:var(--coral-deep); margin:-6px 0 14px; }
.bmi__range[hidden] { display:none; }
.bmi__disclaimer { margin-top:14px; padding:13px 15px; background:var(--coral-tint); border:1px solid var(--line); border-radius:12px; font-size:12px; color:var(--muted); line-height:1.65; }
.bmi__disclaimer strong { color:var(--charcoal); font-weight:600; }

/* ============================================================
   HERO DISPLAY FACE — DM Serif Display.
   A bold didone serif against Poppins body text.
   (Ships 400 + italic only — heavier weights would be synthesized.)
   ============================================================ */
.hero__title { font-family:"DM Serif Display",Georgia,serif; font-weight:400; font-size:clamp(32px,4.3vw,62px); line-height:1.12; letter-spacing:-.008em; }
.hero__title em { font-size:1.78em; line-height:1.08; }
.hero__title em { font-style:italic; font-weight:400; color:var(--coral); }
/* the headline ends with the brand's dot — the same mark as the logo's dotted i */
.hero__dot { display:inline-block; width:.115em; height:.115em; margin-left:.075em; border-radius:50%; background:var(--coral); }

@media (max-width:880px) {
  .hero__title { font-size:clamp(26px,7vw,38px); line-height:1.1; }
}

/* ============================================================
   MOBILE POLISH PASS — 2026-07-20
   Fit-and-finish refinements for phones only. Everything here is
   scoped to ≤880 / ≤560 / ≤380 (or is a safe, size-agnostic type
   nicety), so the desktop layout is untouched. Grouped in one block
   so it's easy to find and reason about.
   ============================================================ */

/* --- Smarter line breaks everywhere (progressive; ignored by old browsers) --- */
.section-head h2, .cta__card h2, .providers__copy h2, .bmi__copy h2,
.coll-banner h1, .shop-hero h1, .shop-hero2__copy h1, .gcard__body h3,
.sc__panel h3 { text-wrap:balance; }
.section-head p, .hero__sub, .cta__card p, .providers__copy > p,
.bmi__copy > p, .coll-tile__body p, .pc__body > p { text-wrap:pretty; }

@media (max-width:880px) {
  /* --- Hero: centered, tighter vertical rhythm + a touch more command in the type --- */
  .hero { padding-top:38px; }
  .hero__inner { padding-top:24px; padding-bottom:34px; gap:2px; }
  .hero__copy { text-align:center; display:flex; flex-direction:column; align-items:center; }
  .pill { font-size:12.5px; padding:7px 15px; }
  .hero__title { width:100%; }
  .hero__cta { margin:24px 0 22px; gap:10px; width:100%; max-width:400px; }
  .hero__rating { justify-content:center; }

  /* --- Hero visual: the vial becomes a luminous, well-framed centerpiece --- */
  .hero__visual { min-height:388px; margin-top:10px; }
  .hero__vial { width:clamp(158px,45vw,190px); filter:drop-shadow(0 30px 40px rgba(19,19,20,.22)); }
  .hero__ring { width:320px; height:320px; }
  .hero__ring::after { inset:46px; }
  .hero__glow { width:326px; height:326px; background:radial-gradient(circle,rgba(247,128,90,.32),transparent 62%); }
  .float-card { padding:11px 15px; font-size:12.5px; border-radius:15px;
    box-shadow:0 6px 14px -6px rgba(19,19,20,.14), 0 20px 36px -22px rgba(19,19,20,.30); }
  .float-card--price { top:2%; left:-2%; }
  .float-card--price .float-card__v { font-size:23px; }
  .float-card--ship { bottom:10%; right:-2%; }

  /* --- Section headings breathe a little more against the eyebrow --- */
  .eyebrow { margin-bottom:12px; }

  /* --- Sticky bottom bar: crisper top edge + comfortable one-hand height --- */
}

@media (max-width:560px) {
  /* --- Collection tiles: one clean, spacious column. Editorial calm (Good-Life
     inspired) — big product, confident heading, quiet copy, and a decluttered
     coral arrow-link CTA divided by a hairline instead of a heavy pill. --- */
  .coll-tiles { grid-template-columns:1fr; gap:18px; }
  .coll-tile { border-radius:22px; }
  .coll-tile__media { padding:36px 26px 6px; }
  .coll-tile__media img { height:158px; }
  .coll-tile__body { padding:24px 26px 22px; }
  .coll-tile__body h2 { font-size:25px; margin:0 0 9px; letter-spacing:-.015em; }
  .coll-tile__body p { font-size:14.5px; line-height:1.6; color:var(--muted); }
  .coll-tile__body .coll-tile__cta { margin-top:20px; padding:17px 0 3px; width:100%;
    background:none; box-shadow:none; border-radius:0; border-top:1px solid var(--line);
    color:var(--coral-deep); font-weight:600; font-size:15px; letter-spacing:0;
    justify-content:space-between; text-transform:none; }

  /* --- Featured rail: a bigger card with a clear peek of the next --- */
  .feat-rail > .pc { flex:0 0 78vw; }
  .pc__body { padding:18px 20px 20px; }

  /* --- FAQ: slightly tighter cards, snappier tap targets --- */
  .qa summary { padding:17px 0; }
}

/* At phone widths the collection CTA is a hairline text link, not a pill — so
   even on a fine pointer (a narrow desktop window) hover must not repaint it
   with the desktop pill fill. Deepen the coral instead of filling a block. */
@media (max-width:560px) and (hover:hover) and (pointer:fine) {
  .coll-tile:hover .coll-tile__cta { background:none; box-shadow:none; color:var(--coral); }
}

/* Very small phones (iPhone SE / 320): guard the widest rotating word
   ("weight loss") from clipping by easing the hero scale down. */
@media (max-width:360px) {
  .hero__title { font-size:clamp(24px,7vw,30px); }
  .float-card--price .float-card__v { font-size:21px; }
  .coll-tile__media img { height:142px; }
}

/* ============================================================
   MOBILE POLISH PASS 2 — 2026-07-21
   Deeper fit-and-finish. Phones only (≤560 / ≤360); desktop layout
   is untouched. Grouped here so it's easy to find and reason about.
   ============================================================ */
@media (max-width:560px) {
  /* Uniform section-heading size. On desktop these live in different column
     layouts (centered vs copy-beside-content) and are intentionally 46/42/46,
     but on phones they're all full-width headings — so they should read at one
     size. They were drifting 28 / 29 / 30; lock them to 29. */
  .section-head h2, .providers__copy h2, .bmi__copy h2 { font-size:29px; }
}

/* Narrow phones (<375, e.g. iPhone SE 320 / older Androids): the PDP's two
   side-by-side CTAs ("Get started" + "Am I eligible?") wrap mid-label and
   break the arrow onto its own line. Stack them so each is a clean full-width
   button. 375+ keeps them side by side; desktop untouched. */
@media (max-width:374px) {
  .pdp__buy { flex-direction:column; align-items:stretch; }
  .pdp__buy .btn { width:100%; }
}