/* ============================================================
   IMMUFIX — design system
   Palette: navy/bone do 95% of the work, gold means buy.
   Type: Fraunces (display serif) + General Sans (body).
   ============================================================ */

@font-face{font-family:'Zodiak';src:url('../fonts/zodiak-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Zodiak';src:url('../fonts/zodiak-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Zodiak';src:url('../fonts/zodiak-300-italic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('../fonts/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  --navy:#0B2545; --navy-deep:#081B34; --ink:#111D33;
  --bone:#F6EFDF; --paper:#FFFCF7; --white:#FFFFFF;
  --gold:#B8923A; --gold-deep:#866722; --gold-soft:#E8D9B4;
  /* Gold as TEXT on a light ground. #B8923A reads 2.54:1 on bone and
     2.85:1 on paper, and large text needs 3:1, so the brand gold fails
     WCAG wherever it is set as a colour rather than painted as a fill.
     This is the smallest darkening that clears it on both grounds
     (3.47 on paper, 3.10 on bone). Buttons and gradients keep --gold. */
  --gold-ink:#A68331;
  --orange:#D96E34; --vanilla:#E9DCC3;
  --muted:#5A6472; --line:rgba(17,29,51,.14); --line-soft:rgba(17,29,51,.08);
  --serif:'Zodiak', Didot, Georgia, serif; --display:'Switzer',-apple-system,'Helvetica Neue',sans-serif; --red:#C24334; --sand:#EDE1C9;
  --sans:'Switzer', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono:'Switzer', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --maxw:1200px; --pad:clamp(20px, 4vw, 48px);
  --r:14px; --r-ui:4px; --header-h:72px;
  --ease:cubic-bezier(.32,.24,.15,1); --ease-expo:cubic-bezier(.16,1,.3,1);
}

/* Bypass blocks (WCAG 2.4.1, level A). Without this a keyboard user tabs
   through the whole header on every page before reaching anything they came
   for. Off-screen until focused, then it lands top-left over the header. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--navy);color:var(--paper);padding:12px 20px;
  border-radius:0 0 var(--r-ui,4px) 0;font-weight:600;text-decoration:none;
  font-size:15px}
.skip-link:focus{left:0}


*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* cross-document page transitions (View Transitions API; no-op elsewhere) */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .16s ease-out both}
  ::view-transition-new(root){animation:vt-in .26s ease-out both}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}
body{
  background:var(--paper); color:var(--ink);
  font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* NOT overflow-x:hidden. `hidden` on one axis forces the other axis to
     compute to `auto`, which makes the body its own scroll container — and a
     position:sticky header inside a scroll container sticks to THAT box, not
     to the viewport. In an in-app browser (Telegram, Instagram) that is
     exactly how page content ends up drawn above the nav: the body scrolls,
     the header sticks to the body, and the gap fills with whatever was there.
     `clip` hides the same horizontal overflow without creating a scroll
     container at all, so overflow-y stays `visible` and the header sticks to
     the viewport. The `hidden` line stays first as the fallback for engines
     older than `clip` (Safari < 16). */
  overflow-x:hidden;
  overflow-x:clip;
}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--gold-soft)}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}

/* ---------- typography ---------- */
h1,h2,h3.display{font-family:var(--display);font-weight:600;line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(38px,4.8vw,60px)}
h2{font-size:clamp(30px,3.6vw,46px)}
h1 em,h2 em{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:0;font-size:1.04em}
.sub{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:56ch;line-height:1.6}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);display:block;margin-bottom:14px}
.on-dark .eyebrow{color:#C9A85C}
.on-dark{color:#EDE8DA}
.on-dark h1,.on-dark h2{color:#F6F2E6}
.on-dark .sub{color:#B9B4A4}
/* We ship Switzer 400/500/600 and Zodiak 300/400 + 300-italic. Nothing may ask
   for a weight or style we do not have a file for, or the browser synthesises it
   (smeared faux-bold, sheared faux-italic) and the type quality drops on the
   exact elements that carry prices and headings. 600 is the heaviest real
   Switzer; 400 the heaviest real upright Zodiak; 300 the only real Zodiak
   italic. qa/audit-fixes.mjs R28 fails the build if a synthetic face appears. */
strong,b{font-weight:600}
h3,h4,h5,h6{font-weight:600}
h2.serif,h3.serif,.serif h2,.serif h3{font-weight:400}

/* ---------- glass panels ---------- */
/* ONE glass recipe sitewide: radius 16, blur 20, hairline top light */
.glass{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.75);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 18px 48px rgba(17,29,51,.08);border-radius:16px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(255,255,255,.94)}}
.on-dark .glass,.glass-dark{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:16px;
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 22px 60px rgba(0,0,0,.32)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.on-dark .glass,.glass-dark{background:rgba(14,38,68,.92)}}

/* ---------- buttons ----------
   Niche consensus (Spacegoods/Rheal/WN audits): 400–500 weight, 15–17px,
   no uppercase, ~54px height, hover = darken, press = 1px sink,
   house easing cubic-bezier(.165,.84,.44,1) at 160–320ms. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:500;font-size:16px;letter-spacing:.01em;line-height:1.2;border-radius:var(--r-ui);
  min-height:54px;padding:14px 34px;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),
    color .18s var(--ease),box-shadow .18s var(--ease),transform .15s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn-gold{color:var(--navy-deep);background:linear-gradient(135deg,#E0C377 0%,#C69F47 30%,#B8923A 55%,#D4B462 100%);
  background-size:180% 180%;background-position:20% 30%;
  box-shadow:inset 0 1px 0 rgba(255,240,200,.55), inset 0 -1px 0 rgba(90,66,18,.2);
  transition:background-position .5s var(--ease),box-shadow .3s var(--ease),transform .15s var(--ease)}
.btn-gold:hover{background-position:80% 70%;box-shadow:inset 0 1px 0 rgba(255,240,200,.6), inset 0 -1px 0 rgba(90,66,18,.25), 0 6px 18px rgba(140,110,44,.22)}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink);background:transparent;
  transition:background-color .25s ease-out,color .25s ease-out,border-color .25s ease-out,transform .15s var(--ease)}
/* the V7.6 "ghost buttons are filled" rules further down own the hover now.
   These two used the `background` SHORTHAND, so they kept winning the
   background-size and background-color longhands the later rules never
   re-declare: on hover the gradient snapped from 180% to auto in one frame
   while background-position eased uselessly for 500ms. */
.on-dark .btn-ghost{border-color:rgba(246,242,230,.4);color:#F6F2E6}
.btn-lg{min-height:60px;padding:16px 46px;font-size:16.5px}
.btn .arr{display:inline-block;transition:transform .24s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
/* max-width, not a fixed width: inside the buy box this is already narrow and
   the cap never bites. It exists for the full-bleed uses (science.html ran to
   201ch), which is the "avoid long line lengths" point from the review. */
.microcopy{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);margin-top:12px;text-wrap:balance;max-width:80ch}
.on-dark .microcopy{color:#9A9584}

/* ---------- announcement + header ---------- */
/* owner: the top line is red — this exact one, #7A1F14 */
.announce{position:relative;background:#7A1F14;color:#FFF3EE;text-align:center;
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.02em;height:40px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0 16px}
.announce b{color:#FFF3EE;font-weight:600}
.announce .a-msg{position:absolute;left:0;right:0;padding:0 16px;opacity:0;
  transform:translateY(9px);transition:opacity .4s var(--ease),transform .4s var(--ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.announce .a-msg.on{opacity:1;transform:none}
.announce .a-msg.off{opacity:0;transform:translateY(-9px)}
/* near-opaque: iOS Safari silently drops backdrop-filter on sticky headers,
   so at low alpha the page text ghosts through the nav */
header.site{position:sticky;top:0;z-index:80;background:rgba(255,252,247,.97);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);transition:box-shadow .3s}
header.site.scrolled{box-shadow:0 6px 24px rgba(17,29,51,.07)}
/* No translateZ and no backdrop-filter at this width: the background is fully
   opaque here so the blur buys nothing, and either property promotes the
   sticky header to its own compositor layer. iOS updates a promoted sticky
   layer a frame late during momentum scroll, which lets a sliver of the page
   show above the nav even once the body is no longer a scroll container. */
@media(max-width:960px){header.site{background:var(--paper);transform:none;
  backdrop-filter:none;-webkit-backdrop-filter:none}}
.nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.logo{display:flex;align-items:center;gap:12px}
.logo .shield{width:30px;height:34px;flex:none}
.logo .word{font-family:var(--serif);font-weight:400;font-size:23px;letter-spacing:.14em;color:var(--navy)}
.navlinks{display:flex;align-items:center;gap:34px}
.navlinks a{font-size:14.5px;font-weight:500;color:var(--ink);padding:8px 2px;transition:color .2s var(--ease)}
.navlinks a:not(.btn):hover{color:var(--gold-deep)}
.navlinks a[aria-current="page"]:not(.btn){color:var(--gold-deep)}
.nav-icons{display:flex;align-items:center;gap:6px;margin-left:6px}
.nav-icons a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;transition:background .2s var(--ease)}
.nav-icons a:hover{background:rgba(17,29,51,.06)}
.nav-icons svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.7}
.nav .btn{min-height:0;padding:12px 26px;font-size:14.5px}
.burger{display:none;width:44px;height:44px;position:relative;z-index:101}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:.3s}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:28px}
body.menu-open .burger span:nth-child(1){top:22px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:22px;transform:rotate(-45deg)}
body.menu-open .burger span{background:#F6F2E6}
.mobile-menu{position:fixed;inset:0;background:var(--navy-deep);z-index:100;display:flex;
  flex-direction:column;justify-content:center;padding:0 32px;
  opacity:0;pointer-events:none;transition:opacity .35s}
body.menu-open .mobile-menu{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}
.mobile-menu a{font-family:var(--serif);font-weight:300;font-size:38px;color:#F6F2E6;
  padding:14px 0;border-bottom:1px solid rgba(246,242,230,.1);
  transform:translateY(18px);opacity:0;transition:.45s cubic-bezier(.2,.7,.3,1)}
body.menu-open .mobile-menu a{transform:none;opacity:1}
.mobile-menu a:nth-child(2){transition-delay:.05s}.mobile-menu a:nth-child(3){transition-delay:.1s}
.mobile-menu a:nth-child(4){transition-delay:.15s}.mobile-menu a:nth-child(5){transition-delay:.2s}
.mobile-menu .btn{margin-top:34px;transition-delay:.25s;font-size:16px}

/* ---------- art-directed placeholder plates ---------- */
.ph{position:relative;border-radius:var(--r);overflow:hidden;min-height:140px;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(120% 100% at 50% -10%, #14335F 0%, #0B2545 52%, #071930 100%)}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 62%, rgba(184,146,58,.14), transparent 70%)}
.ph .ph-frame{position:absolute;inset:11px;border:1px solid rgba(201,168,92,.26);
  border-radius:calc(var(--r) - 5px);pointer-events:none;z-index:2}
.ph .ph-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px;text-align:center;transition:transform .65s var(--ease)}
.ph:hover .ph-inner{transform:scale(1.06)}
.ph .ph-icon{width:clamp(60px,24%,136px);opacity:.92}
.ph .ph-cap{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(16px,1.8vw,22px);color:#D9C58A;letter-spacing:.02em}
.ph .ph-tag{position:absolute;left:16px;bottom:13px;z-index:2;font-family:var(--mono);
  font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(201,168,92,.5);white-space:nowrap}
.ph-43{aspect-ratio:4/3}.ph-45{aspect-ratio:4/5}.ph-11{aspect-ratio:1/1}.ph-169{aspect-ratio:16/9}

/* ---------- welcome popup ---------- */
/* V13.0 — NO backdrop-filter on this element, and it must not come back.
   It was blur(9px) across the whole viewport. Frame-diffed with the page
   behind it provably frozen (no DOM mutations, no running animations, scroll
   locked, Lenis parked): 40 captured frames of pure backdrop still came back
   4 distinct. A full-viewport backdrop-filter is re-rasterised by the
   compositor on its own schedule and does not land on identical pixels each
   time, so the scrim shimmers with nothing behind it moving at all. That is
   the flicker the owner kept seeing, and it is why it looked machine-specific
   — it depends on the GPU, not on the markup.
   The cart drawer has always used a flat scrim (.cart-scrim, rgba(5,14,27,.5))
   and has never flickered. Same treatment here, a little denser to hold the
   same separation the blur was giving. */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(5,14,27,.74);
  display:flex;align-items:center;justify-content:center;padding:22px;
  opacity:0;pointer-events:none;transition:opacity .45s ease}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{position:relative;display:grid;grid-template-columns:290px 1fr;width:100%;max-width:730px;
  background:var(--paper);border-radius:24px;overflow:hidden;
  box-shadow:0 48px 120px rgba(3,10,20,.5);
  transform:translateY(30px) scale(.965);transition:transform .6s cubic-bezier(.22,.9,.28,1)}
.modal-overlay.open .modal{transform:none}
.modal-media{position:relative;display:flex;align-items:center;justify-content:center;
  padding:34px 26px;background:radial-gradient(130% 110% at 50% -20%, #16375F 0%, #0B2545 55%, #071930 100%);overflow:hidden}
.modal-media .pouch-slot{width:172px;position:relative;z-index:1;filter:drop-shadow(0 22px 30px rgba(0,0,0,.45))}
.modal-glow{position:absolute;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle, rgba(184,146,58,.32), transparent 62%)}
.modal-body{padding:40px 38px 32px}
.modal-body h3{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.6vw,37px);line-height:1.08;margin:10px 0 12px;color:var(--ink)}
.modal-body p{font-size:14.5px;color:var(--muted);max-width:38ch}
.modal-form{display:flex;flex-direction:column;gap:10px;margin:22px 0 12px}
.modal-form input{height:56px;border:1.5px solid var(--line);border-radius:var(--r-ui);padding:0 24px;
  font:inherit;font-size:15px;background:var(--white);color:var(--ink);outline:none;
  transition:border-color .2s, box-shadow .2s}
.modal-form input::placeholder{color:#9AA1AD}
.modal-form input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(184,146,58,.2)}
.modal-form input.err{border-color:#9A3B2E;box-shadow:0 0 0 3px rgba(154,59,46,.14)}
.modal-micro{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;color:#9AA1AD}
.modal-x{position:absolute;top:14px;right:14px;z-index:3;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;
  color:var(--muted);background:rgba(252,250,244,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .25s, color .25s}
.modal-x:hover{transform:rotate(90deg);color:var(--ink)}
@media(max-width:680px){
  .modal{grid-template-columns:1fr;max-width:430px}
  .modal-media{display:none}
  .modal-body{padding:34px 28px 28px}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--navy);color:#F6F2E6}
.hero-main{position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  padding:clamp(36px,6vh,72px) 0 clamp(40px,7vh,80px);min-height:min(88svh,900px)}
.hero-stars{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.stars-row{display:inline-flex;gap:3px}
.stars-row i{width:17px;height:17px;background:#FFB850;
  clip-path:polygon(50% 2%,63% 36%,98% 38%,71% 60%,81% 95%,50% 74%,19% 95%,29% 60%,2% 38%,37% 36%)}
.stars-cap{font-size:13px;font-weight:500;letter-spacing:.02em;color:#C6C0AE}
.claim-line{font-size:13.5px;line-height:1.55;color:#9BA5B8;max-width:52ch;margin-top:12px}
.hero-stats{display:inline-flex;gap:0;margin:26px 0 0;padding:20px 10px}
.hero-stats div{padding:0 clamp(16px,4vw,30px);text-align:center;font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:#D6DCE7}
.hero-stats div+div{border-left:1px solid rgba(255,255,255,.12)}
.hero-stats b{display:block;font-family:var(--display);font-weight:600;font-size:31px;letter-spacing:-.01em;margin-bottom:6px;
  background:linear-gradient(135deg,#E8CF8A 0%,#C9A85C 45%,#E0C377 70%,#B8923A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow-pill{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:11.5px;
  letter-spacing:.18em;text-transform:uppercase;color:#C9A85C}
.eyebrow-pill::before{content:"";width:22px;height:1px;background:var(--gold)}
.hero-cta{margin-top:38px}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(1100px 520px at 50% 118%, rgba(184,146,58,.16), transparent 62%),
  radial-gradient(900px 500px at 82% -10%, rgba(30,58,95,.7), transparent 60%),
  var(--navy)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,520px);
  gap:clamp(24px,4vw,72px);align-items:center}
.hero-copy{min-width:0}
.hero-copy h1{margin-bottom:14px}
.hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pouch-stage{position:relative;display:flex;align-items:center;justify-content:center;perspective:1100px}
.pouch-wrap{width:min(400px,72vw);will-change:transform;transform-style:preserve-3d;filter:drop-shadow(0 40px 60px rgba(0,0,0,.45))}
.hero-particles{position:absolute;inset:-10% -20%;pointer-events:none}
.hero-particles i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:0}
.hero-side{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.hero-side .chipnote{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:#C9A85C;border:1px solid rgba(201,168,92,.35);border-radius:99px;padding:8px 16px}

/* 3D pouch stage */
.pouch3d{position:relative;width:min(620px,94vw);aspect-ratio:10/13;margin:0 auto}
.pouch3d canvas{position:absolute;inset:0;width:100% !important;height:100% !important;display:block}
.pouch3d .pouch-slot{display:none;width:min(400px,70vw);margin:0 auto;filter:drop-shadow(0 40px 60px rgba(0,0,0,.45))}
.pouch3d.pouch3d-fallback .pouch-slot{display:block}

/* credibility stat row (Paula band) */
.cred-row{display:grid;grid-template-columns:repeat(4,auto);gap:clamp(18px,3vw,44px);justify-content:start;margin:30px 0 34px}
.cred-row b{display:block;font-family:var(--display);font-weight:600;font-size:clamp(24px,2.6vw,36px);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,#E8CF8A 0%,#C9A85C 45%,#E0C377 70%,#B8923A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.cred-row b i{font-style:normal;font-size:.55em;letter-spacing:.04em}
.cred-row span{display:block;font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#A9B4C6;margin-top:8px;max-width:14ch}
@media(max-width:700px){
  .cred-row{grid-template-columns:1fr 1fr;gap:0;margin:26px 0 30px;
    border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.03)}
  .cred-row>div{padding:18px 16px 15px;min-width:0}
  .cred-row>div:nth-child(even){border-left:1px solid rgba(255,255,255,.14)}
  .cred-row>div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.14)}
  .cred-row b{font-size:27px}
  .cred-row span{max-width:none;font-size:9.5px;letter-spacing:.09em;line-height:1.55;margin-top:7px}
}

/* trusted-by cards (A+B pattern) */
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px) clamp(28px,4vw,72px)}
.trust-card{display:flex;gap:clamp(20px,2.6vw,30px);align-items:flex-start}
.trust-face{width:clamp(120px,13vw,180px);aspect-ratio:1;border-radius:50%;min-height:0;flex:none}
.trust-face .ph-frame{inset:6px;border-radius:50%}
.trust-face .ph-inner{padding:0;gap:0}
.trust-face .ph-icon{width:38%}
.trust-face .ph-tag{display:none}
.trust-body{flex:1;padding-top:6px}
.trust-line{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(17px,1.8vw,21px);line-height:1.5;color:var(--ink)}
.trust-name{font-weight:600;font-size:16px;margin-top:16px}
.trust-name span{display:block;font-weight:400;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}
@media(max-width:900px){.trust-grid{grid-template-columns:1fr;gap:34px}.trust-face{width:96px}}

/* research tabs (AG1 pattern) */
/* overflow-x:clip, never auto: the tabs always fit, and an auto scroller
   rubber-bands on iOS, dragging the sweep line around with it */
.tab-nav{position:relative;display:flex;justify-content:space-between;gap:clamp(18px,3vw,36px);border-bottom:1px solid var(--line-soft);margin-bottom:clamp(28px,4vw,48px);overflow-x:clip}
@media(max-width:360px){.tab-btn{font-size:15.5px}}
/* continuous sweep progress line: fills the whole nav once per cycle (rAF-driven);
   each tab activates as the leading edge passes its label; wraps with an opacity fade */
.tab-prog{position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:var(--gold);
  transform-origin:left;transform:scaleX(0);opacity:.9;border-radius:2px;pointer-events:none;
  transition:opacity .35s var(--ease)}
@media(prefers-reduced-motion:reduce){
  .tab-prog{display:none}
  .tab-btn.active{box-shadow:inset 0 -2px 0 var(--gold)}
}
.tab-btn{font-size:clamp(17px,1.7vw,23px);font-weight:400;color:var(--muted);padding:4px 2px 14px;border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s var(--ease),border-color .2s var(--ease)}
.tab-btn:hover{color:var(--ink)}
.tab-btn.active{color:var(--ink)}
.tab-panel{display:none;grid-template-columns:minmax(0,1fr) minmax(300px,480px);gap:clamp(28px,5vw,80px);align-items:center}
.tab-panel.active{display:grid;animation:tabin .45s var(--ease)}
@keyframes tabin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tp-copy h3{font-family:var(--sans);font-weight:400;font-size:clamp(22px,2.6vw,34px);line-height:1.22;letter-spacing:-.02em;text-wrap:balance}
.mono-note{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;line-height:1.7;text-transform:uppercase;color:#707170;margin:20px 0 24px;max-width:52ch}
.tab-link{font-weight:500;font-size:15px;border-bottom:1.5px solid var(--gold);padding-bottom:3px}
.tab-link .arr{display:inline-block;transition:transform .24s var(--ease)}
.tab-link:hover .arr{transform:translateX(4px)}
.tp-visual{background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.85);border-radius:22px;padding:clamp(24px,3vw,36px);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 20px 50px rgba(17,29,51,.09)}
.tp-cap{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:20px}
.nrv-bar{display:grid;grid-template-columns:92px 1fr 52px;gap:14px;align-items:center;margin:14px 0;font-size:13.5px;font-weight:500}
.nrv-bar>div{height:10px;border-radius:99px;background:rgba(17,29,51,.08);overflow:hidden}
.nrv-bar>div i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#C9A85C,var(--gold));transition:width 1.1s var(--ease-expo)}
.nrv-bar b{font-family:var(--mono);font-size:12.5px;font-weight:500;text-align:right;color:var(--navy);font-variant-numeric:tabular-nums}
/* stat row inside the glass panel: hairline dividers, gold-gradient numbers, no nested boxes */
.tp-stats{display:flex;padding:16px 0 10px}
.tp-stats div{flex:1;min-width:0;text-align:center;padding:8px 10px}
.tp-stats div+div{border-left:1px solid var(--line-soft)}
.tp-stats b{display:inline-flex;align-items:baseline;justify-content:center;gap:1px;
  font-family:var(--display);font-weight:600;font-size:clamp(26px,2.6vw,36px);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,#C69F47 0%,#8F6F24 55%,#B8923A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.tp-stats b i{font-style:normal;font-size:.5em;font-weight:500}
.tp-stats span{display:block;font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:860px){.tab-panel{grid-template-columns:1fr}.tab-panel.active{gap:24px}}

/* UGC wall (Rheal pattern) */
.ugc-grid{display:flex;gap:24px;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  scroll-behavior:smooth}
.ugc-grid::-webkit-scrollbar{display:none}
.ugc-card{scroll-snap-align:start}
.ugc-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:18px}
.ugc-controls button{width:40px;height:40px;border-radius:50%;background:var(--navy);flex:none;
  display:flex;align-items:center;justify-content:center;transition:background-color .15s cubic-bezier(.4,0,.2,1)}
.ugc-controls button:hover{background:var(--navy-deep)}
.ugc-controls button[disabled]{opacity:.35;cursor:default}
.ugc-controls button svg{width:20px;height:20px;fill:none;stroke:#FFFCF7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ugc-progress{width:min(350px,40vw);height:6px;border-radius:99px;background:rgba(17,29,51,.12);overflow:hidden}
.ugc-progress i{display:block;height:100%;width:25%;border-radius:99px;background:var(--navy);transition:width .3s var(--ease)}
.ugc-card{position:relative;flex:0 0 calc(25% - 18px);min-width:258px;aspect-ratio:9/15;border-radius:16px;overflow:hidden;margin:0}
.ugc-card::after{content:"";position:absolute;inset:0;z-index:1;background:rgba(11,37,69,.25);pointer-events:none}
.ugc-card .ph .ph-inner{transition:transform .65s var(--ease)}
.ugc-card:hover .ph .ph-inner{transform:scale(1.06)}
.ugc-meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:44px 16px 14px;
  background:linear-gradient(transparent, rgba(5,14,27,.55));color:#F6F2E6}
.ugc-meta b{display:block;font-family:var(--display);font-weight:600;font-size:15px}
.ugc-meta span{display:block;font-size:11.5px;color:#C9D1DE;margin-top:3px}
.ugc-card .ph{position:absolute;inset:0;min-height:100%;border-radius:0}
.ugc-card .ph .ph-cap,.ugc-card .ph .ph-icon{display:none}
.ugc-play{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  border:1.5px solid rgba(246,242,230,.85);background:rgba(8,27,52,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:transform .3s var(--ease);pointer-events:none}
.ugc-play::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);
  border-left:14px solid #F6F2E6;border-top:9px solid transparent;border-bottom:9px solid transparent}
.ugc-card:hover .ugc-play{transform:scale(1.08)}
@media(max-width:820px){.ugc-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:8px;margin:0 calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad)}
  .ugc-card{flex:0 0 224px;width:224px;scroll-snap-align:center}}

/* timeline thumbs */
.tl-thumb{margin-bottom:18px;border-radius:12px}
.tl-thumb .ph-cap{display:none}
.tl-thumb .ph-icon{width:34%}

/* founding offer card */
.offer-card{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,52px);align-items:center;
  background:var(--navy);border-radius:var(--r);padding:clamp(28px,4vw,48px) clamp(28px,4.5vw,56px);color:#EDE8DA}
.offer-card .eyebrow{color:#C9A85C}
.offer-card h2{color:#F6F2E6;font-size:clamp(25px,3vw,36px);margin-bottom:12px}
.offer-card p{color:#B9B4A4;max-width:52ch}
.offer-cta{margin-top:22px}
.offer-cta .microcopy{color:#9A9584}

/* PDP offer strip */
/* compositor-only pulse — see the .ot-dot note */
/* ---------- marquee proof bar ---------- */
.proofbar{background:var(--navy-deep);border-top:1px solid rgba(201,168,92,.22);padding:20px 0;overflow:hidden}
.marquee{display:flex;width:max-content;animation:marquee 36s linear infinite;gap:64px;align-items:center}
.marquee span{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#B9B4A4;white-space:nowrap;display:flex;align-items:center;gap:64px}
.marquee span::after{content:"◆";color:var(--gold);font-size:8px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section.band{padding:clamp(72px,10vw,130px) 0}
.band-bone{background:var(--bone)}
.band-sand{background:var(--sand)}
.band-navy{background:var(--navy)}
.sec-head{max-width:720px;margin-bottom:clamp(36px,5vw,64px)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ---------- benefits scene ---------- */
.benefits-pin{position:relative}
.benefits-stage{display:grid;grid-template-columns:1fr;gap:0;position:relative;min-height:70vh;align-items:center}
.benefits-pouch{width:min(280px,50vw);margin:0 auto;filter:drop-shadow(0 30px 44px rgba(17,29,51,.25))}
.bchip{position:absolute;width:min(250px,42vw);background:var(--white);border:1px solid var(--line-soft);
  border-radius:16px;padding:18px 20px;box-shadow:0 18px 44px rgba(17,29,51,.09);opacity:0}
.bchip h3{font-size:15.5px;font-weight:600;margin-bottom:5px;display:flex;align-items:center;gap:9px}
.bchip h3 i{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:none;font-style:normal}
.bchip p{font-size:13px;color:var(--muted);line-height:1.55}
.bchip .amt{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--gold-deep);display:block;margin-top:7px}
.bchip.c1{top:4%;left:2%}.bchip.c2{top:4%;right:2%}
.bchip.c3{top:38%;left:0}.bchip.c4{top:38%;right:0}
.bchip.c5{bottom:4%;left:2%}.bchip.c6{bottom:4%;right:2%}
@media(max-width:900px){
  .benefits-stage{min-height:0;display:flex;flex-direction:column;gap:14px}
  .benefits-pouch{order:-1;margin-bottom:20px}
  .bchip{position:static;width:100%;opacity:1}
}

/* ---------- value chart ---------- */
.value-table{max-width:680px;margin:0 auto}
.vrow{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 4px;border-bottom:1px solid var(--line-soft)}
.vrow .vname{font-weight:500;font-size:15.5px;display:flex;align-items:center;gap:12px}
.vrow .vname i{font-style:normal;font-family:var(--mono);font-size:10px;color:var(--gold-deep);border:1px solid rgba(184,146,58,.4);border-radius:6px;padding:2px 7px;letter-spacing:.06em}
.vrow .vprice{font-family:var(--mono);font-size:14px;color:var(--muted)}
.vrow.vsum{border-bottom:none;border-top:2px solid var(--ink);margin-top:6px;padding-top:20px}
.vrow.vsum .vname{font-family:var(--serif);font-weight:400;font-size:21px}
.vrow.vsum .vprice{color:var(--ink);font-size:17px;text-decoration:line-through;text-decoration-color:var(--orange)}
.vrow.vimmu .vname{font-family:var(--serif);font-size:24px;color:var(--navy)}
.vrow.vimmu{border:none;background:var(--navy);border-radius:14px;padding:22px 24px;margin-top:14px}
.vrow.vimmu .vname{color:#F6F2E6}
.vrow.vimmu .vprice{font-size:22px;color:var(--gold);font-weight:600}
.vnote{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted);text-align:center;margin-top:18px}

/* ---------- paula ---------- */
.paula-grid{display:grid;grid-template-columns:minmax(280px,460px) 1fr;gap:clamp(32px,6vw,90px);align-items:center}
.paula-quote{font-family:var(--serif);font-weight:300;font-size:clamp(24px,3.2vw,38px);line-height:1.28;color:#F6F2E6;text-wrap:balance}
.paula-quote .goldi{font-style:italic;color:var(--gold)}
.stat-wr{margin:34px 0 30px}
.stat-wr .big{font-family:var(--serif);font-weight:300;font-size:clamp(64px,9vw,120px);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.stat-wr .lab{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#B9B4A4;margin-top:10px}

/* ---------- timeline strip (home) ---------- */
.tl-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;margin-top:20px}
.tl-strip::before{content:"";position:absolute;top:9px;left:2%;right:2%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold),transparent);opacity:.5}
.tl-card{padding-top:34px;position:relative}
.tl-card::before{content:"";position:absolute;top:4px;left:0;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--gold)}
.tl-card .yr{font-family:var(--serif);font-weight:300;font-size:clamp(28px,3.4vw,44px);color:var(--navy);line-height:1}
.tl-card p{font-size:13.5px;color:var(--muted);margin-top:9px;line-height:1.55}
@media(max-width:760px){.tl-strip{grid-template-columns:1fr;gap:30px}
  .tl-strip::before{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,var(--gold),transparent)}
  .tl-card{padding:0 0 0 30px}
  .tl-card::before{top:8px}}

/* ---------- ritual ---------- */
.ritual-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ritual-grid figure .ph{margin-bottom:16px}
.ritual-grid figcaption b{font-family:var(--serif);font-weight:400;font-size:21px;display:block;margin-bottom:4px}
.ritual-grid figcaption p{font-size:14px;color:var(--muted)}
@media(max-width:760px){.ritual-grid{grid-template-columns:1fr}}

/* ---------- expect ---------- */
.expect-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.expect-card{background:var(--white);border:1px solid var(--line-soft);border-radius:18px;padding:30px 28px}
.expect-card .mo{font-family:var(--display);font-weight:600;font-size:40px;letter-spacing:-.02em;line-height:1;
  background:linear-gradient(135deg,#C69F47 0%,#8F6F24 55%,#B8923A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.expect-card .mo small{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block;margin-top:8px;-webkit-text-fill-color:var(--muted)}
.expect-card h3{font-size:16.5px;font-weight:600;margin:18px 0 8px}
.expect-card p{font-size:14px;color:var(--muted)}
@media(max-width:760px){.expect-grid{grid-template-columns:1fr}}

/* ---------- reviews slot ---------- */
.reviews-slot{border:1.5px dashed var(--line);border-radius:20px;padding:clamp(36px,5vw,60px);text-align:center;max-width:760px;margin:0 auto}
.reviews-slot p{color:var(--muted);max-width:52ch;margin:10px auto 0}

/* ---------- guarantee ---------- */
.guarantee{display:flex;flex-direction:column;align-items:center;text-align:center;gap:26px;max-width:620px;margin:0 auto;color:var(--ink)}
.gseal{width:108px;height:108px;border-radius:50%;border:1px solid var(--gold);background:var(--paper);display:flex;flex-direction:column;gap:3px;
  align-items:center;justify-content:center;font-family:var(--display);color:var(--gold-deep);flex:none}
.gseal b{font-size:34px;font-weight:600;line-height:1;letter-spacing:-.02em}
.gseal small{font-family:var(--sans);font-weight:600;font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;text-align:center;max-width:10ch;line-height:1.5}
.guarantee h2{font-size:clamp(26px,3.2vw,40px)}
.guarantee p{color:var(--muted);max-width:48ch}

/* ---------- FAQ accordions ---------- */
.acc{border-bottom:1px solid var(--line-soft)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:22px 2px;font-weight:500;font-size:16.5px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-family:var(--serif);font-size:26px;font-weight:300;color:var(--gold-deep);transition:transform .3s;flex:none}
.acc[open] summary::after{transform:rotate(45deg)}
.acc .acc-body{padding:0 2px 24px;color:var(--muted);max-width:68ch}
.acc .acc-body p{margin-bottom:10px}
.acc .acc-body p:last-child{margin-bottom:0}

/* ---------- closing CTA ---------- */
.closing{text-align:center}
.closing .price-line{font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.4vw,52px);margin:16px 0 8px}
.closing .price-line em{font-style:italic;color:var(--gold-ink)}

/* ---------- footer ---------- */
footer.site{background:var(--navy-deep);color:#9A9584;padding:70px 0 40px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.foot-grid h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#C9A85C;margin-bottom:16px;font-weight:500}
.foot-grid a{display:block;padding:5px 0;color:#B9B4A4}
.foot-grid a:hover{color:#F6F2E6}
.foot-brand .word{font-family:var(--serif);font-size:26px;letter-spacing:.14em;color:#F6F2E6}
.foot-brand p{margin-top:14px;max-width:34ch;line-height:1.7}
.bewell{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#8F8A78;margin-top:20px}
.foot-legal{border-top:1px solid rgba(246,242,230,.08);padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:#8F8A78}
.foot-legal .disclaimer{max-width:72ch;line-height:1.7}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}

/* ============================================================
   PDP
   ============================================================ */
.pdp{padding:clamp(28px,4vw,56px) 0 90px}
.pdp-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(340px,5fr);gap:clamp(28px,4vw,64px);align-items:start}
.gallery{position:sticky;top:calc(var(--header-h) + 20px)}
.gallery-main{border-radius:20px;overflow:hidden;background:var(--bone);position:relative}
.gslide{display:none;align-items:center;justify-content:center;aspect-ratio:4/5;padding:8%}
.gslide.active{display:flex}
.gslide:not(.slide-navy){padding:0}
.gslide .ph{min-height:100%}
.gslide .pouch-wrap{width:min(340px,60%);filter:drop-shadow(0 30px 44px rgba(17,29,51,.28))}
.gslide.slide-navy{background:var(--navy)}
.g-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:40px;height:40px;border-radius:50%;
  background:rgba(8,27,52,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .15s cubic-bezier(.4,0,.2,1)}
.g-arrow svg{width:20px;height:20px;fill:none;stroke:#FFFCF7;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-arrow:hover{background:rgba(8,27,52,.8)}
.g-prev{left:14px}.g-next{right:14px}
.gthumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:12px}
.gthumbs button{aspect-ratio:1/1;border-radius:8px;border:1px solid var(--line-soft);
  background:radial-gradient(120% 100% at 50% -10%, #14335F 0%, #0B2545 60%, #071930 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:#8FA0BC;
  padding:8px 4px;line-height:1.2;transition:border-color .15s cubic-bezier(.4,0,.2,1);min-width:0;overflow:hidden}
.gthumbs .th-art{width:34%;flex:none}
.gthumbs button.active,.gthumbs button:hover{border-color:var(--gold)}
.gthumbs button.active{box-shadow:0 0 0 1px var(--gold)}

.buybox h1{font-size:clamp(30px,3.4vw,42px);margin-bottom:8px}
.buybox .promise{color:var(--muted);font-size:16px;max-width:44ch}
.trust-inline{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0 26px}
.trust-inline span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);display:flex;align-items:center;gap:7px}
.trust-inline span::before{content:"✓";color:var(--gold)}

/* Delivery answer, sat directly under the buy button. Rectangles only (--r-ui),
   hairline rule rather than a card, so it reads as part of the buy box and not
   as another panel competing with it. */
.pdp-eta{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pdp-eta p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.pdp-eta .eta-when{color:var(--ink)}
.pdp-eta .eta-when b{font-weight:600;color:var(--ink)}
.pdp-eta .eta-when em{font-style:normal;color:var(--gold-deep);font-weight:600}
.pdp-eta .eta-cost{margin-top:4px;font-size:12.5px}

.opt-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:22px 0 10px;display:block}
.flavours{display:flex;gap:12px}
.flav{flex:1;border:1px solid var(--line);border-radius:8px;padding:14px 16px;display:flex;align-items:center;gap:12px;
  font-weight:500;font-size:15px;transition:border-color .15s cubic-bezier(.4,0,.2,1), box-shadow .15s cubic-bezier(.4,0,.2,1);background:var(--white)}
.flav .dot{width:20px;height:20px;border-radius:50%;flex:none;border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line)}
.flav[data-flavour="orange"] .dot{background:var(--orange)}
.flav[data-flavour="vanilla"] .dot{background:var(--vanilla)}
.flav.active{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}

.plans{display:flex;flex-direction:column;gap:16px}
.plan{position:relative;border:1px solid var(--line);border-radius:8px;padding:18px 20px;background:var(--white);
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;text-align:left;
  transition:border-color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1)}
.plan:hover{border-color:var(--gold)}
.plan .radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);background:var(--paper);position:relative;flex:none;transition:border-color .15s}
.plan.active .radio{border-color:var(--gold-deep)}
.plan.active .radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--gold-deep)}
.plan.active{border-color:var(--gold-deep);background:#FBF6E9}
.plan .pt{font-weight:600;font-size:15.5px;display:block}
.plan .pd{font-size:12.5px;color:var(--muted);margin-top:3px;display:block}
.plan > span:nth-child(2),.plan > span:nth-of-type(2){min-width:0}
.plan .pp{text-align:right}
.plan .pp b{font-size:19px;font-weight:600}
.plan .pp s{display:block;font-size:12px;color:var(--muted)}
.plan .pp small{display:block;font-family:var(--mono);font-size:10px;color:var(--gold-deep);letter-spacing:.04em}
.plan .tag{grid-column:1/-1;grid-row:1;display:block;text-align:center;
  background:linear-gradient(135deg,#E0C377,#C69F47 60%,#D4B462);color:var(--navy-deep);
  font-family:var(--sans);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  border-radius:8px 8px 0 0;padding:7px 12px;margin:-18px -20px 2px}

.qty-atc{display:flex;gap:12px;margin-top:20px}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:var(--r-ui)}
.qty button{width:44px;height:54px;font-size:20px;color:var(--muted)}
.qty output{min-width:28px;text-align:center;font-weight:600}
.atc{flex:1}
.buybox .microcopy{text-align:center}

.pdp-accs{margin-top:34px}

/* sticky mobile ATC */
.sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(252,250,244,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line-soft);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:none;align-items:center;gap:14px;
  transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.sticky-atc.show{transform:none}
.sticky-atc .s-info b{font-size:14px;font-weight:600;display:block}
.sticky-atc .s-info span{font-family:var(--mono);font-size:10.5px;color:var(--gold-deep)}
.sticky-atc .btn{flex:1;min-height:48px;padding:12px 16px;font-size:14px;white-space:nowrap}

/* ingredient spotlights */
.spot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.spot{background:var(--white);border:1px solid var(--line-soft);border-radius:18px;padding:26px 24px}
.spot .amt{font-family:var(--display);font-weight:600;font-size:32px;letter-spacing:-.02em;line-height:1;
  background:linear-gradient(135deg,#C69F47 0%,#8F6F24 55%,#B8923A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.spot .amt small{font-size:16px;-webkit-text-fill-color:var(--gold-deep)}
.spot h3{font-size:15.5px;font-weight:600;margin:12px 0 6px}
.spot p{font-size:13.5px;color:var(--muted)}
@media(max-width:860px){.spot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.spot-grid{grid-template-columns:1fr}}

/* ============================================================
   Science page
   ============================================================ */
.nutri-card{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);padding:8px 26px}
/* nutrient accordion columns (replaces the label spreadsheet) */
.nut-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(28px,4vw,64px);align-items:start}
.nacc .facc-q{font-size:15px;padding:15px 2px;gap:14px}
.nacc .facc-q span{flex:1;text-align:left}
.nacc .facc-q b{font-weight:500;font-size:13.5px;color:var(--navy);font-variant-numeric:tabular-nums;flex:none}
.nacc .facc-a>div{font-size:13.5px;max-width:none}
.nacc .facc-a p{padding-bottom:16px}
@media(max-width:760px){.nut-cols{grid-template-columns:1fr}}
.nutri-table{width:100%;border-collapse:collapse;font-size:14px}
.nutri-table th{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);text-align:left;padding:16px 14px 12px 0;border-bottom:1px solid var(--ink);font-weight:600}
.nutri-table td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.nutri-table tr:last-child td{border-bottom:none}
.nutri-table tbody tr{transition:background-color .15s cubic-bezier(.4,0,.2,1)}
.nutri-table tbody tr:hover{background:#FBF8F0}
.nutri-table td:first-child{font-weight:500;white-space:nowrap}
.nutri-table td.amt{font-family:var(--mono);font-size:12.5px;white-space:nowrap;color:var(--navy)}
.nutri-table td.claim{color:var(--muted);font-size:13.5px}
.tablewrap{overflow-x:auto}
.macro-band{background:var(--navy);padding:44px 0}
.macro-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.macro-strip div{text-align:center}
.macro-strip b{font-family:var(--display);font-weight:600;font-size:clamp(30px,3vw,42px);letter-spacing:-.02em;display:block;color:#F6F2E6;line-height:1}
.macro-strip b i{font-style:normal;font-size:.55em;color:#C9A85C}
.macro-strip small{display:block;font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.06em;color:#9BA5B8;margin-top:8px}
@media(max-width:760px){.macro-strip{grid-template-columns:repeat(2,1fr);gap:24px}}

/* ============================================================
   Story page
   ============================================================ */
.story-hero{background:var(--navy);color:#F6F2E6;padding:clamp(64px,9vw,110px) 0 clamp(48px,6vw,80px);text-align:center}
.story-scroll{display:flex;justify-content:center;margin-top:34px}
.story-scroll i{width:1px;height:44px;background:linear-gradient(var(--gold),transparent)}
.phil-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.phil h3{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;color:#F6F2E6;margin-bottom:10px;
  padding-top:18px;border-top:1px solid rgba(201,168,92,.4)}
.phil p{font-size:15px;line-height:1.65;color:#B9C2D2}
@media(max-width:860px){.phil-grid{grid-template-columns:1fr}}
.story-quote{max-width:820px;margin:0 auto;padding:clamp(40px,6vw,72px) 0;text-align:center}
.story-quote p{font-size:clamp(24px,3vw,36px);font-weight:300;line-height:1.35;color:var(--navy);text-wrap:balance}
.story-quote p::before{content:"";display:block;width:44px;height:2px;background:var(--gold);margin:0 auto 26px}
.chapter{display:grid;grid-template-columns:minmax(90px,180px) 1fr minmax(260px,420px);gap:clamp(24px,4vw,60px);
  padding:clamp(48px,7vw,90px) 0;border-bottom:1px solid var(--line-soft);align-items:center}
.chapter .yr{font-family:var(--display);font-weight:600;font-size:clamp(40px,5.5vw,72px);letter-spacing:-.02em;color:var(--gold-ink);line-height:1}
.chapter h2{font-size:clamp(24px,3vw,36px);margin-bottom:12px}
.chapter p{color:var(--muted);max-width:56ch}
@media(max-width:860px){.chapter{grid-template-columns:1fr}}

/* ---------- bento (Huel pattern) ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(172px,auto);gap:14px}
.btile{border-radius:18px;overflow:hidden;position:relative;padding:26px;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--white);border:1px solid var(--line-soft);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.btile:hover{box-shadow:none}
.btile.b-img .ph .ph-inner{transition:transform .65s var(--ease)}
.btile.b-img:hover .ph .ph-inner{transform:scale(1.06)}
.btile.b-img{padding:0}
.btile.b-img .ph{position:absolute;inset:0;min-height:100%;border-radius:0}
.btile.b-navy{background:var(--navy);border:none;color:#EDE8DA}
.btile.b-sand{background:var(--sand);border:none}
.btile .bn{font-family:var(--display);font-weight:600;font-size:clamp(34px,3.6vw,52px);letter-spacing:-.02em;line-height:1;color:var(--navy)}
.btile .bn i{font-style:normal;font-size:.5em;color:var(--gold-deep)}
.btile.b-navy .bn{color:var(--gold)}
.btile .bl{font-size:17px;font-weight:500;margin-top:12px;color:var(--muted);max-width:30ch;line-height:1.5}
.btile.b-navy .bl{color:#B9B4A4}
.btile .bchecks{display:flex;flex-direction:column;gap:11px;font-size:15.5px;font-weight:500}
.btile .bchecks span{white-space:nowrap}
.btile .bchecks span::before{content:"✓";color:var(--gold-deep);margin-right:9px;font-weight:600}
.b-2x2{grid-column:span 2;grid-row:span 2}
.b-2x1{grid-column:span 2}
.btile.b-2x1{flex-direction:row;align-items:center;justify-content:flex-start;gap:26px}
.btile.b-2x1 .bl{margin-top:0;max-width:30ch;border-left:1px solid rgba(255,255,255,.16);padding-left:26px}
@media(max-width:860px){.bento{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(150px,auto)}.b-2x2{grid-column:span 2;grid-row:span 2}.b-2x1{grid-column:span 2}
  /* the checks tile needs the full row for its one-line entries */
  .btile.b-sand{grid-column:span 2}}

/* ---------- AG1 split: copy + checklist accordions left, tall image right ---------- */
.ag-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,46%);gap:clamp(32px,5vw,88px);align-items:start}
.ag-copy{padding-top:10px}
.ag-checks{margin-top:26px}
.agc .facc-q{font-size:16px;padding:19px 2px}
.agc-t{display:flex;align-items:center;gap:14px;text-align:left}
.agc-t svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--gold-deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.agc .facc-a>div{padding-left:32px}
.ag-media{position:relative}
.ag-media .ph{aspect-ratio:4/5.4;border-radius:var(--r)}
.js .mask-reveal{clip-path:inset(6% 6% 6% 6% round 14px);transition:clip-path 1.1s cubic-bezier(.22,1,.36,1)}
.mask-reveal.unmasked{clip-path:inset(0 0 0 0 round 14px)}
@media(max-width:900px){.ag-split{grid-template-columns:1fr}.ag-media{order:-1}.ag-media .ph{aspect-ratio:4/3}}

/* ---------- scroll-driven showcase (sticky media left, scrolling entries right) ---------- */
.show-grid{display:grid;grid-template-columns:minmax(320px,46%) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.show-sticky{position:sticky;top:calc(var(--header-h) + 48px);aspect-ratio:4/4.6}
.show-media{position:absolute;inset:0;opacity:0;transform:scale(.985);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.show-media.on{opacity:1;transform:none}
.show-media .ph{position:absolute;inset:0;min-height:100%;border-radius:var(--r)}
.show-items{display:flex;flex-direction:column}
.show-item{min-height:46vh;display:flex;flex-direction:column;justify-content:center;
  border-top:1px solid rgba(246,242,230,.12);padding:34px 0;opacity:.28;transition:opacity .5s var(--ease)}
.show-item:first-child{border-top:none;justify-content:flex-start;padding-top:12px;min-height:40vh}
.show-item.on{opacity:1}
.show-idx{font-size:12px;font-weight:600;letter-spacing:.18em;color:#C9A85C;margin-bottom:14px}
.show-item h3{font-family:var(--display);font-weight:600;font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em;color:#F6F2E6;margin-bottom:12px}
.show-item p{font-size:16.5px;line-height:1.65;color:#B9C2D2;max-width:44ch}
.show-role{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9BA5B8;margin-top:16px}
/* (legacy mobile inline-showcase block removed in V8.1 — mobile now uses the
   same sticky crossfade as desktop; see the V8.1 layer at the end of this file) */

/* ---------- ingredient cards (Rheal pattern) ---------- */
.ing-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;touch-action:pan-x pan-y}
.ing-card.ing-card.ing-more{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  background:var(--navy);color:#EDE8DA;padding:20px 14px;
  transition:background-color .25s ease-out}
.ing-card.ing-more:hover{background:var(--navy-deep)}
.ing-more-num{font-family:var(--display);font-weight:600;font-size:clamp(34px,3vw,46px);letter-spacing:-.02em;line-height:1;
  background:linear-gradient(135deg,#E8CF8A 0%,#C9A85C 45%,#E0C377 70%,#B8923A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.ing-more-lab{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9BA5B8}
.ing-more-link{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:#F6F2E6;margin-top:10px;
  border-bottom:1px solid var(--gold);padding-bottom:3px}
.ing-more-link svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .24s var(--ease)}
.ing-more:hover .ing-more-link svg{transform:translateX(4px)}
.ing-card{margin:0;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--sand)}
.ing-card .ph{aspect-ratio:1/1.14;border-radius:0}
.ing-card .ph .ph-icon{width:34%}
.ing-card .ph .ph-cap{display:none}
.ing-card figcaption{padding:21px 21px 23px;flex:1}
.ing-card h3{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;margin-bottom:7px}
.ing-card p{font-size:15px;line-height:1.55;color:var(--muted)}
@media(max-width:960px){.ing-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin:0 calc(-1*var(--pad));padding:0 var(--pad) 10px}
  .ing-grid::-webkit-scrollbar{display:none}
  .ing-card{flex:0 0 276px;scroll-snap-align:center}}

/* wide content row */
.wrap-wide{max-width:1380px}

/* ---------- credibility carousel (A+B pattern) ---------- */
.cq{position:relative}
.cq-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0}
.cq-track::-webkit-scrollbar{display:none}
.cq-slide{flex:0 0 100%;scroll-snap-align:start;display:flex;gap:clamp(22px,3vw,40px);align-items:center;padding:10px 4px}
@media(min-width:900px){.cq-slide{flex:0 0 72%}}
.cq-face{width:clamp(120px,16vw,220px);aspect-ratio:1;border-radius:50%;min-height:0;flex:none}
.cq-face .ph-frame{inset:6px;border-radius:50%}
.cq-face .ph-inner{padding:0;gap:0}
.cq-face .ph-icon{width:36%}
.cq-face .ph-tag,.cq-face .ph-cap{display:none}
.cq-body{flex:1}
.cq-line{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(18px,2vw,24px);line-height:1.5}
.cq-name{font-weight:600;font-size:16px;margin-top:18px;font-family:var(--display)}
.cq-name span{display:block;font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.cq-nav{position:absolute;top:-64px;right:0;display:flex;gap:10px}
.cq-nav button{width:40px;height:40px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--paper);transition:background-color .15s cubic-bezier(.4,0,.2,1)}
.cq-nav button:hover{background:var(--navy-deep)}
.cq-nav button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cq-dots{display:flex;gap:8px;justify-content:center;margin-top:26px}
.cq-dots i{width:8px;height:8px;border-radius:50%;background:rgba(17,29,51,.18);transition:background .2s}
.cq-dots i.on{background:var(--ink)}

/* ---------- FAQ page group headers ---------- */
.faq-group{display:flex;align-items:baseline;gap:16px;margin:54px 0 10px}
.faq-group:first-of-type{margin-top:10px}
.faq-group .eyebrow{margin-bottom:0;flex:none}

/* ---------- animated FAQ (home) ---------- */
.facc{border-bottom:1px solid var(--line-soft)}
.facc-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 2px;
  font-weight:500;font-size:17px;text-align:left;font-family:var(--display);letter-spacing:-.01em}
.facc-q::after{content:"+";font-family:var(--serif);font-size:26px;font-weight:300;color:var(--gold-deep);transition:transform .3s var(--ease);flex:none}
.facc.open .facc-q::after{transform:rotate(45deg)}
.facc-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.facc.open .facc-a{grid-template-rows:1fr}
.facc-a>div{overflow:hidden;color:var(--muted);max-width:64ch}
.facc-a p{padding-bottom:22px}

/* ---------- journal ---------- */
.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.j-card{display:block}
.j-card .ph{aspect-ratio:16/10;border-radius:16px;margin-bottom:16px}
.j-card .ph .ph-cap{display:none}
.j-card:hover .ph .ph-inner{transform:scale(1.06)}
.j-card h3{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;line-height:1.3}
.j-card:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.j-card .j-meta{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:8px;display:block}
@media(max-width:820px){.journal-grid{grid-template-columns:1fr}}

/* ---------- USP strip (bone band, hairline separators — no boxes) ---------- */
.usp-band{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.usp-bar{display:flex;gap:0}
.usp{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:24px 16px;font-size:13.5px;font-weight:500;line-height:1.4;color:var(--ink);min-width:0}
.usp+.usp{border-left:1px solid var(--line-soft)}
.usp svg{width:24px;height:24px;flex:none;stroke:var(--gold-deep);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.usp .stars{display:inline-flex;gap:2px;flex:none}
.usp .stars i{width:13px;height:13px;background:var(--gold);
  clip-path:polygon(50% 2%,63% 36%,98% 38%,71% 60%,81% 95%,50% 74%,19% 95%,29% 60%,2% 38%,37% 36%)}
/* chips release one after another when the bar reveals */
.usp-bar.reveal .usp{opacity:0;transform:translateY(10px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.usp-bar.reveal.in .usp{opacity:1;transform:none}
.usp-bar.reveal .usp:nth-child(2){transition-delay:.07s}
.usp-bar.reveal .usp:nth-child(3){transition-delay:.14s}
.usp-bar.reveal .usp:nth-child(4){transition-delay:.21s}
.usp-bar.reveal .usp:nth-child(5){transition-delay:.28s}
.usp-bar.reveal.out .usp{transition-duration:.4s,.4s;transition-delay:0s}
@media(max-width:960px){.usp-bar{overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--pad))}
  .usp-bar::-webkit-scrollbar{display:none}
  /* only once the JS marquee mounts; reduced-motion/flat keep a swipeable row */
  .usp-bar.usp-marquee{overflow:hidden}
  .usp-track{display:flex;will-change:transform}
  .usp{flex:0 0 auto;padding:20px 22px;font-size:13px}
  /* auto-drift loop: don't hold clones hostage to reveal delays */
  .usp-bar.reveal .usp{opacity:1;transform:none;transition:none}}
html.flat .usp-bar.reveal .usp{opacity:1;transform:none;transition:none}

/* ---------- people cards (AG1 pattern) ---------- */
.people{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pcard{border-radius:var(--r);overflow:hidden;background:var(--navy);color:#EDE8DA;display:flex;flex-direction:column}
.pcard-media{position:relative;aspect-ratio:4/4.4;overflow:hidden}
.pcard-media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 60%, rgba(0,0,0,.3) 100%)}
.pcard-media .ph{position:absolute;inset:0;min-height:100%;border-radius:0}
.pcard-media .ph .ph-inner{transition:transform .65s var(--ease)}
.pcard:hover .pcard-media .ph .ph-inner{transform:scale(1.06)}
.pcard-media .ph .ph-cap{display:none}
.pcard-name{position:absolute;top:18px;left:20px;z-index:2;font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:#F6F2E6;text-shadow:0 1px 8px rgba(5,14,27,.6)}
.pcard-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.pcard-line{font-size:15px;line-height:1.6;color:#D5D9E2;flex:1}
.pcard-role{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#9BA5B8}
@media(max-width:860px){.people{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;
  margin:0 calc(-1*var(--pad));padding:4px var(--pad) 10px}.pcard{flex:0 0 78vw;scroll-snap-align:center}}

/* ---------- pinned big-image timeline ---------- */
/* pinned horizontal scrub on ALL sizes (owner: mobile should scroll through
   the heritage like the web version); flat/reduced fall back to a swipe row */
.tlx-scroll{position:relative;height:320vh}
.tlx-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
@media(max-width:1020px){
  .tlx-scroll{height:280vh}
  .tlx-slide{flex:0 0 min(440px,82vw)}
}
.tlx-sticky .wrap{width:100%}
.tlx-track{display:flex;gap:clamp(20px,3vw,44px);will-change:transform;
  padding:0 max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad)))}
.tlx-slide{flex:0 0 min(520px,78vw);display:flex;flex-direction:column;gap:0}
.tlx-slide .ph{aspect-ratio:4/3;border-radius:var(--r)}
.tlx-slide:hover .ph .ph-inner{transform:scale(1.06)}
.tlx-meta{display:flex;flex-direction:column;align-items:flex-start;margin-top:20px}
.tlx-year{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.14em;color:var(--gold-deep);
  border-bottom:2px solid var(--gold);padding-bottom:6px;margin-bottom:12px}
.tlx-meta h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,2vw,26px);letter-spacing:-.01em;color:var(--ink);margin-bottom:8px}
.tlx-slide p{color:var(--muted);font-size:15px;line-height:1.6;max-width:52ch}
.tlx-progress{height:2px;background:var(--line-soft);margin:40px max(var(--pad), calc((100vw - var(--maxw)) / 2 + var(--pad))) 0;overflow:hidden}
.tlx-progress i{display:block;height:100%;width:0;background:var(--gold)}
html.flat .tlx-scroll{height:auto !important}
html.flat .tlx-sticky{position:relative !important;height:auto !important}
html.flat .tlx-track{overflow-x:auto}
html.flat .tlx-progress{display:none}
@media(prefers-reduced-motion:reduce){
  .tlx-scroll{height:auto !important}
  .tlx-sticky{position:relative !important;height:auto !important}
  .tlx-track{overflow-x:auto}
  .tlx-progress{display:none}
}


/* ---------- reveal animations (Huel spec: fade-up, long ease-out tail, stagger) ---------- */
.js .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
  transition-delay:calc(var(--ri,0)*70ms)}
.reveal.in{opacity:1;transform:none}
.reveal.out{transition-duration:.4s,.4s;transition-delay:0ms}
.reveal-d1{--ri:1}.reveal-d2{--ri:2}.reveal-d3{--ri:3}

/* fixed-width digits: counting numbers must not reflow their neighbours */
.hero-stats b,.btile .bn,.macro-strip b,.spot .amt{font-variant-numeric:tabular-nums}

/* star cascade: stars pop in one by one (on load in the hero, on reveal elsewhere) */
.stars-row i{opacity:0;transform:scale(.3);transition:opacity .5s var(--ease-expo),transform .5s var(--ease-expo)}
.stars-row i:nth-child(1){transition-delay:.15s}
.stars-row i:nth-child(2){transition-delay:.23s}
.stars-row i:nth-child(3){transition-delay:.31s}
.stars-row i:nth-child(4){transition-delay:.39s}
.stars-row i:nth-child(5){transition-delay:.47s}
.ding .stars-row i,html.flat .stars-row i{opacity:1;transform:none}
html.flat .stars-row i{transition:none}

/* bento tiles release with a stagger inside the section reveal */
.bento.reveal{opacity:1;transform:none}
.bento.reveal .btile{opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.bento.reveal.in .btile{opacity:1;transform:none}
.bento.reveal .btile:nth-child(2){transition-delay:.07s}
.bento.reveal .btile:nth-child(3){transition-delay:.14s}
.bento.reveal .btile:nth-child(4){transition-delay:.21s}
.bento.reveal .btile:nth-child(5){transition-delay:.28s}
.bento.reveal .btile:nth-child(6){transition-delay:.35s}
.bento.reveal .btile:nth-child(7){transition-delay:.42s}
.bento.reveal .btile:nth-child(8){transition-delay:.49s}
.bento.reveal.out .btile{transition-duration:.4s,.4s;transition-delay:0s}
html.flat .bento.reveal .btile{opacity:1;transform:none;transition:none}

/* art plates settle from a gentle zoom as their section reveals (hover zoom still wins) */
:where(.reveal) .ph .ph-inner{transform:scale(1.05)}
:where(.reveal.in) .ph .ph-inner{transform:scale(1)}

/* load-in cascade (A+B pattern): elements release once html.ding lands */
.js .lin-1,.js .lin-2,.js .lin-3,.js .lin-4,.js .lin-5{opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.lin-2{transition-delay:.15s}.lin-3{transition-delay:.3s}.lin-4{transition-delay:.45s}.lin-5{transition-delay:.6s}
.ding .lin-1,.ding .lin-2,.ding .lin-3,.ding .lin-4,.ding .lin-5,
html.flat .lin-1,html.flat .lin-2,html.flat .lin-3,html.flat .lin-4,html.flat .lin-5{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .hero-grid{grid-template-columns:1fr;text-align:center;padding-bottom:90px;gap:8px}
  .hero-copy{order:2}
  .pouch-stage{order:1;margin-bottom:10px}
  .pouch-wrap{width:min(280px,58vw)}
  .hero-stats{justify-content:center}
  .hero-cta{justify-content:center}
  .hero-stars{justify-content:center}
  .hero-side{display:none}
}
@media(max-width:900px){
  .navlinks{display:none}
  .burger{display:block}
  .pdp-grid{grid-template-columns:1fr}
  .gallery{position:static}
  .paula-grid{grid-template-columns:1fr}
  .sticky-atc{display:flex}
}
@media(max-width:560px){
  .qty-atc{flex-direction:column}
  .qty{justify-content:center}
  .flavours{flex-direction:column}
}

/* ---------- QA flat mode (?flat=1 — no pinning, everything revealed) ---------- */
html.flat .reveal{opacity:1;transform:none;transition:none}
html.flat .marquee{animation:none}
html.flat .bchip{opacity:1}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .stars-row i,.usp-bar.reveal .usp,.bento.reveal .btile{opacity:1;transform:none;transition:none}
  :where(.reveal) .ph .ph-inner{transform:none}
  .marquee{animation:none;flex-wrap:wrap;width:auto}
  .scroll-hint::after{animation:none}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ============================================================
   V7.6 — round-6 review layer (2026-08-16 evening)
   ============================================================ */

/* The V7.6 FOUT fix re-declared all five faces at `font-display:block`, which
   is a request to paint NOTHING until the font arrives. On a slow connection
   that is the whole page: measured FCP 8.26s, LCP 10.7s, with nothing at all on
   screen for 8.3s. The faces at the top of this file already declare `swap` —
   these duplicates only overrode them, so deleting the block is the entire fix.
   FOUT is a worse look than a blank page for 8 seconds is not. */

/* breathing room: headings + text rhythm */
h1,h2,h3.display{line-height:1.12}
.sub{line-height:1.68}
.sec-head h2{margin-bottom:2px}
.sec-head .sub{margin-top:12px}

/* hero: stars above the pouch on mobile via grid areas */
.hero-grid{grid-template-areas:"stars pouch" "copy pouch";grid-template-rows:auto 1fr}
.hero-grid .hero-stars{grid-area:stars;align-self:end;margin-bottom:18px}
.hero-grid .hero-copy{grid-area:copy}
.hero-grid .pouch-stage{grid-area:pouch}
@media(max-width:1020px){
  .hero-grid{grid-template-areas:"stars" "pouch" "copy";grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .hero-grid .hero-stars{justify-content:center;margin:0 0 8px}
  .hero-grid .pouch-stage{order:0}
}
.hero-cta .btn{min-width:225px}

/* hero stats: serif numerals + slow shimmer sweep */
.hero-stats b{font-family:var(--serif);font-weight:400;font-size:33px;letter-spacing:0;
  background:linear-gradient(110deg,#C9A85C 0%,#E8CF8A 22%,#B8923A 45%,#C9A85C 60%,#E8CF8A 78%,#B8923A 100%);
  background-size:250% 100%;background-position:0% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:goldshimmer 7s ease-in-out infinite}
@keyframes goldshimmer{0%,55%{background-position:0% 0}75%{background-position:100% 0}100%{background-position:100% 0}}
@media(prefers-reduced-motion:reduce){.hero-stats b{animation:none}}

/* unit suffixes need air */
.btile .bn i,.tp-stats b i,.macro-strip b i{margin-left:3px}
.spot .amt small{margin-left:2px}

/* ghost buttons are FILLED now: navy gradient on light, cream gradient on dark */
.btn-ghost{border:none;color:#F6F2E6;
  background:linear-gradient(135deg,#1A3D68 0%,#0B2545 55%,#123157 100%);
  background-size:180% 180%;background-position:20% 30%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.3);
  transition:background-position .5s var(--ease),box-shadow .3s var(--ease),transform .15s var(--ease)}
.btn-ghost:hover{background-position:80% 70%;color:#F6F2E6;box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 6px 18px rgba(11,37,69,.25)}
.on-dark .btn-ghost{color:var(--navy-deep);border:none;
  background:linear-gradient(135deg,#FFFEF9 0%,#F1EADA 50%,#FFF9EC 100%);
  background-size:180% 180%;background-position:20% 30%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(120,100,60,.18)}
.on-dark .btn-ghost:hover{background:linear-gradient(135deg,#FFFEF9 0%,#F1EADA 50%,#FFF9EC 100%);background-size:180% 180%;background-position:80% 70%;color:var(--navy-deep)}

/* Paula portrait glass quote plate */
.paula-media{position:relative}
.paula-plate{position:absolute;left:14px;right:14px;bottom:14px;padding:18px 20px 16px;border-radius:14px}
.pp-quote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(17px,1.7vw,21px);line-height:1.4;color:#FFFDF7;
  text-shadow:0 1px 2px rgba(3,10,22,.5), 0 2px 18px rgba(3,10,22,.45)}
.pp-attr{display:block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C9A85C;margin-top:10px}

/* USP: single line, links */
.usp span{white-space:nowrap}
a.usp{color:var(--ink)}

/* tab panels: soft crossfade + drift (JS drives .leaving) */
.tab-panel.active{animation:tabin .6s cubic-bezier(.22,1,.36,1)}
@keyframes tabin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tab-panels{transition:height .35s cubic-bezier(.22,1,.36,1)}

/* AG-split + story CTAs centered */
.ag-copy > .btn-gold{display:flex;width:max-content;margin-left:auto !important;margin-right:auto !important}

/* offer: discount-focused */
.offer-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:6px}
.offer-price b{font-family:var(--serif);font-weight:400;font-size:clamp(44px,5vw,64px);line-height:1;
  background:linear-gradient(135deg,#E8CF8A 0%,#C9A85C 45%,#E0C377 70%,#B8923A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.offer-price s{font-size:clamp(20px,2.2vw,28px);color:#8E99AC;text-decoration-color:rgba(255,138,117,.7)}
.offer-price span{font-size:14px;color:#B9B4A4;flex-basis:100%}

/* guarantee seal: true centering */
.gseal{text-align:center}
.gseal b{width:100%;text-align:center}
.gseal small{width:100%;max-width:none;padding:0 14px;letter-spacing:.15em}

/* ingredients: Rheal card language (square top, tinted panel, cut corner) */
.ing-card{border-radius:0;background:transparent;overflow:visible}
.ing-card .ph{border-radius:0}
.ing-card figcaption{background:var(--sand);border-radius:0 0 28px 0;padding:18px 18px 22px}
.ing-card.ing-more{background:var(--navy);border-radius:0 0 28px 0;overflow:hidden}

/* footer: keep-in-touch + socials */
.foot-touch{display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1.2fr) auto;gap:26px;align-items:center;
  border-top:1px solid rgba(246,242,230,.08);padding:30px 0;margin-bottom:8px}
.foot-touch h4{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:none;color:#F6F2E6;margin-bottom:6px}
.foot-touch p{font-size:12.5px;color:#9A9584;line-height:1.6}
.ft-form{display:flex;gap:10px}
.ft-form input{flex:1;height:48px;border:1px solid rgba(246,242,230,.22);border-radius:var(--r-ui);background:rgba(255,255,255,.06);
  padding:0 16px;font:inherit;font-size:14px;color:#F6F2E6;outline:none;transition:border-color .2s}
.ft-form input::placeholder{color:#8E8A7B}
.ft-form input:focus{border-color:var(--gold)}
.ft-form .btn{min-height:48px;padding:10px 22px;font-size:14px}
.ft-social{display:flex;gap:8px}
.ft-social a{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(246,242,230,.2);transition:border-color .25s ease-out,background-color .25s ease-out}
.ft-social a:hover{border-color:var(--gold);background:rgba(184,146,58,.12)}
.ft-social svg{width:19px;height:19px;fill:none;stroke:#CFC9B8;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:860px){.foot-touch{grid-template-columns:1fr;gap:16px}.ft-social{justify-content:flex-start}}

/* (V7.6 mobile swipe-row block removed in V8.2 — its `transform:none !important`
   silently disabled the pinned scrub the V8.0 layer sets up. The pin is the
   contract on every viewport now; see the V8.0 heritage block below.) */

/* mobile nav icons: crisp alignment, no sticky hover circles on touch */
@media(hover:none){.nav-icons a:hover{background:transparent}}
.nav-icons a{-webkit-tap-highlight-color:transparent}
@media(max-width:900px){.nav-icons{gap:2px;margin-right:2px}.nav-icons a{width:38px;height:38px}}

/* story page: chapter rhythm + media-first on mobile + gold quote fill */
.chapter p + p{margin-top:14px}
.chapter p{font-size:16.5px;line-height:1.72;color:#3B4354}
.chapter h2.serif{margin-bottom:14px}
@media(max-width:860px){
  .chapter{grid-template-rows:auto}
  .chapter .ch-media{order:-1;margin-bottom:4px}
  .chapter .yr{order:-2}
  .chapter .btn{display:flex;width:max-content;margin-left:auto !important;margin-right:auto !important}
}
.story-quote p{background:linear-gradient(90deg,var(--navy) var(--fill,0%),var(--gold) var(--fill,0%));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.phil h3{background:linear-gradient(135deg,#E8CF8A 0%,#C9A85C 55%,#E0C377 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;border-top-color:rgba(201,168,92,.5)}

/* popup step 2 + drop game (variant B) */
.pop-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:20px 0 6px}
.pop-opt{border:1px solid var(--line);border-radius:var(--r-ui);background:var(--white);padding:12px 10px;
  font-size:13.5px;font-weight:500;transition:border-color .2s,background-color .2s}
/* Opaque, not a tint. This was rgba(11,37,69,.04) over an assumed white
   card; dropped onto the wheel's navy panel it replaced the white background
   with something almost transparent, so a hovered option went dark text on
   dark ground and disappeared under the cursor. A hover state must not depend
   on what is behind it. */
.pop-opt:hover{border-color:var(--navy);background:var(--bone)}
.pop-opt:active{transform:translateY(1px)}
.pop-skip{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
/* (the plinko drop game was removed in V9.6 — it picked its outcome before the
   ball moved. Its shared modal chrome lives on for the scratch card below.) */
.modal-game,.modal-scratch{grid-template-columns:1fr;max-width:440px;
  background:linear-gradient(160deg,#16375F 0%,#0B2545 55%,#071930 100%);color:#F6F2E6}
.game-body,.scr-body{padding:36px 32px 30px;text-align:center}
.game-body .eyebrow,.scr-body .eyebrow{color:#C9A85C}
.game-body h3,.scr-body h3{font-family:var(--display);font-weight:600;
  font-size:clamp(26px,3.4vw,32px);line-height:1.15;color:#F6F2E6;margin:8px 0 10px}
.scr-body h3 em{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.05em}
.game-body > p,.scr-body > p{font-size:14px;color:#B9C2D2;margin:0 auto;max-width:32ch}
.game-claim .modal-form input,.scr-claim .modal-form input{background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.25);color:#F6F2E6}
.game-claim .modal-form input::placeholder,.scr-claim .modal-form input::placeholder{color:#8E99AC}
.game-body .pop-opt,.scr-body .pop-opt{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:#EDE8DA}
.game-body .pop-opt:hover,.scr-body .pop-opt:hover{border-color:var(--gold);background:rgba(184,146,58,.15)}
.game-body .pop-skip,.scr-body .pop-skip{color:#9BA5B8}

/* ============================================================
   V7.7 — round-7 review layer
   ============================================================ */

/* hero: stars sit tight above the headline, whole column centred */
.hero-grid{align-content:center;grid-template-rows:auto auto}
.hero-grid .hero-stars{align-self:auto;margin-bottom:16px}

/* thicker stat dividers + cream CTA + checks row */
.hero-stats div+div{border-left:2px solid rgba(255,255,255,.22)}
.btn-cream{color:var(--navy-deep);
  background:linear-gradient(135deg,#FFFEF9 0%,#F1EADA 50%,#FFF9EC 100%);
  background-size:180% 180%;background-position:20% 30%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(120,100,60,.18);
  transition:background-position .8s cubic-bezier(.22,1,.36,1),box-shadow .5s var(--ease),transform .2s var(--ease)}
.btn-cream:hover{background-position:80% 70%;box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 8px 22px rgba(0,0,0,.25)}
.hero-checks{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
.hero-checks span{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:#EDE8DA}
.hero-checks svg{width:16px;height:16px;fill:none;stroke:#C9A85C;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:1020px){.hero-checks{justify-content:center}}

/* softer hover choreography on every button */
.btn{transition:background-color .35s ease-out,border-color .35s ease-out,color .35s ease-out,
  box-shadow .5s var(--ease),transform .2s var(--ease),background-position .8s cubic-bezier(.22,1,.36,1)}
.btn-gold{transition:background-position .8s cubic-bezier(.22,1,.36,1),box-shadow .5s var(--ease),transform .2s var(--ease)}
.btn-ghost{transition:background-position .8s cubic-bezier(.22,1,.36,1),box-shadow .5s var(--ease),transform .2s var(--ease),color .35s ease-out}

/* scroll highlight: sand sweep behind key phrases (rides the reveal in/out states) */
.hl{background-image:linear-gradient(var(--sand),var(--sand));background-repeat:no-repeat;
  background-position:0 52%;background-size:0% 78%;
  padding:0 .1em;border-radius:3px;
  transition:background-size .9s cubic-bezier(.22,1,.36,1) .25s,color .6s ease .35s}
.reveal.in .hl,.in .hl{background-size:100% 78%}
.on-dark .reveal.in .hl{color:var(--navy)}
@media(prefers-reduced-motion:reduce){.hl{background-size:100% 78%}.on-dark .hl{color:var(--navy)}}

/* Paula: cred row as one glass strip, readable labels */
.cred-row.glass-dark{display:flex;gap:0;padding:20px 6px;margin:30px 0 30px}
.cred-row.glass-dark div{flex:1;text-align:center;padding:0 16px}
.cred-row.glass-dark div+div{border-left:1px solid rgba(255,255,255,.16)}
.cred-row.glass-dark span{max-width:none;margin-top:8px;font-size:10.5px;letter-spacing:.1em;color:#D6DCE7;line-height:1.5}
@media(max-width:700px){.cred-row.glass-dark{flex-wrap:wrap;padding:10px 6px}
  .cred-row.glass-dark div{flex:1 1 44%;padding:12px 10px}
  .cred-row.glass-dark div:nth-child(3){border-left:none}}

/* Paula plate: edge-to-edge, bigger quote */
.paula-plate{left:0;right:0;bottom:0;border-radius:0 0 var(--r) var(--r);padding:22px 24px 18px}
.pp-quote{font-size:clamp(19px,2vw,25px)}
.pp-attr{font-size:12.5px;letter-spacing:.1em}

/* tabs: only the moving line remains; panel canvas never changes size */
.tab-nav{border-bottom:none}
.tab-panels{overflow:visible}

/* showcase: first entry vertically centred with the media */
.show-item:first-child{justify-content:center;padding-top:34px;min-height:50vh}

/* ag-split CTA: left on desktop, centred on mobile */
@media(min-width:901px){.ag-copy > .btn-gold{margin-left:0 !important;margin-right:0 !important}}

/* ingredients: back to house corners, bigger cards, left-to-right entrance */
.ing-grid{grid-template-columns:repeat(5,1fr);gap:18px}
.ing-card{border-radius:var(--r);overflow:hidden;background:var(--sand)}
.ing-card .ph{border-radius:0}
.ing-card figcaption{border-radius:0;padding:20px 20px 24px}
.ing-card.ing-more{border-radius:var(--r)}
.ing-card h3{font-size:18px}
.ing-card p{font-size:13.5px}
.ing-grid .reveal{transform:translateX(-26px)}
.ing-grid .reveal.in{transform:none}
.reveal-d4{--ri:4}.reveal-d5{--ri:5}
@media(max-width:960px){.ing-grid{padding-bottom:28px}.ing-card{flex:0 0 260px}}

/* heritage: slimmer slides so the progress bar never clips */
.tlx-slide{flex-basis:min(470px,74vw)}
.tlx-sticky .sec-head{margin-bottom:14px !important}
.tlx-progress{margin-top:30px}

/* offer card: bigger presence */
.offer-card{padding:clamp(30px,4vw,52px) clamp(30px,4.5vw,60px)}

/* expect cards: big number left, hairline, copy right */
.expect-card{display:flex;align-items:center;gap:22px;padding:26px 26px}
.expect-card .mo{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--serif);font-weight:400;font-size:56px;line-height:1;padding-right:22px;border-right:1px solid var(--line-soft)}
.expect-card .mo small{margin-top:0}
.expect-card h3{margin:0 0 6px}
.expect-body{flex:1;min-width:0}

/* PDP: buy anchor lands just right; sticky label sans per-day price */
#buy,.buybox{scroll-margin-top:96px}
/* gallery crossfade */
.gallery-main{position:relative;aspect-ratio:4/5}
.gslide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .55s var(--ease)}
.gslide.active{display:flex;opacity:1;pointer-events:auto}
/* PDP founding strip in glass */

/* light showcase (PDP scrollytelling) */
.show-light .show-item{border-top-color:var(--line-soft)}
.show-light .show-item h3{color:var(--ink)}
.show-light .show-item p{color:var(--muted)}
.show-light .show-role{color:var(--gold-deep)}
.show-light .show-idx{color:var(--gold-deep)}
.show-num{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(40px,4vw,58px);line-height:1;margin-bottom:10px;
  background:linear-gradient(135deg,#C69F47 0%,#8F6F24 55%,#B8923A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* footer socials: filled white */
.ft-social svg{fill:#F6F2E6;stroke:none}

/* ============================================================
   V7.8 — round-8 layer
   ============================================================ */

/* hero: no row gap — stars hug the headline */
.hero-grid{row-gap:0 !important;column-gap:clamp(24px,4vw,72px)}
.hero-grid .hero-stars{margin-bottom:14px}

/* Paula cred numbers: same serif-gold voice as the hero stats; roomier labels */
.cred-row.glass-dark b{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.6vw,34px);letter-spacing:0;
  background:linear-gradient(110deg,#C9A85C 0%,#E8CF8A 30%,#B8923A 60%,#C9A85C 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:goldshimmer 7s ease-in-out infinite}
.cred-row.glass-dark span{font-size:11px;letter-spacing:.08em;color:#D6DCE7;line-height:1.5;max-width:18ch;margin:8px auto 0}
@media(prefers-reduced-motion:reduce){.cred-row.glass-dark b{animation:none}}

/* showcase pacing: entry 1 settles first, last entry centres before release */
.show-items{padding-top:6vh}
.show-item{min-height:56vh}
.show-item:first-child{min-height:46vh;justify-content:center;padding-top:0}
.show-item:last-child{padding-bottom:16vh}

/* see-all card: no arithmetic, just the invite */
.ing-more-ring{width:54px;height:54px;border-radius:50%;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.ing-more-ring svg{width:22px;height:22px;fill:none;stroke:#E8CF8A;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ing-card.ing-more{gap:12px}

/* expect + pdp strip: the light glass voice */
.expect-card{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.85);border-radius:16px;
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 14px 36px rgba(17,29,51,.06)}

/* macro band: staggered rise + drawing dividers around the count-ups */
.macro-strip{position:relative;justify-items:center}
.macro-strip div{position:relative;opacity:0;transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.macro-strip div::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;
  background:rgba(255,255,255,.16);transform:scaleY(0);transform-origin:top;
  transition:transform .9s cubic-bezier(.22,1,.36,1) .3s}
.macro-strip div:first-child::before{display:none}
.macro-strip.in div{opacity:1;transform:none}
.macro-strip.in div::before{transform:scaleY(1)}
.macro-strip div:nth-child(2){transition-delay:.09s}
.macro-strip div:nth-child(3){transition-delay:.18s}
.macro-strip div:nth-child(4){transition-delay:.27s}
.macro-strip div:nth-child(5){transition-delay:.36s}
@media(prefers-reduced-motion:reduce){.macro-strip div{opacity:1;transform:none}.macro-strip div::before{transform:scaleY(1)}}

/* PDP accordions: reserve room so opening never shifts the page below */
.pdp-accs{min-height:0}

/* ============================================================
   V7.9 — round-9 layer
   ============================================================ */

/* hero on mobile: pouch, then the stars line, then the headline block */
@media(max-width:1020px){
  .hero-grid{grid-template-areas:"pouch" "stars" "copy" !important}
  .hero-grid .hero-stars{margin:2px 0 12px}
}

/* USP strip: twice the presence */
.usp{height:150px;padding:0 18px;gap:14px;font-size:15.5px;line-height:1.35;border-radius:8px}
.usp svg{width:34px;height:34px}
.usp .stars i{width:17px;height:17px}
.usp span{white-space:normal}
.usp-band{padding:0}
@media(max-width:960px){.usp{height:124px;min-width:270px;font-size:15px}}

/* highlight: gold sweep that clears ascenders AND descenders */
.hl{background-image:linear-gradient(135deg,#F2E0AC 0%,#DFC077 45%,#EBD69B 70%,#D4B462 100%);
  background-repeat:no-repeat;background-position:0 0;background-size:0% 100%;
  padding:.12em .14em .2em;border-radius:3px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .9s cubic-bezier(.22,1,.36,1) .2s,color .5s ease .3s}
.reveal.in .hl,.in .hl{background-size:100% 100%}
.on-dark .reveal.in .hl,.on-dark .in .hl{color:var(--navy-deep)}
h1:has(.hl),h2:has(.hl),.price-line:has(.hl){line-height:1.34}
@media(prefers-reduced-motion:reduce){.hl{background-size:100% 100%}.on-dark .hl{color:var(--navy-deep)}}

/* tabs: labels sit together, the sweep spans exactly that group */
.tab-nav{justify-content:flex-start;gap:clamp(26px,3.4vw,52px);width:max-content;max-width:100%}

/* see-all card: gradient plate, filled arrow */
.ing-card.ing-more{background:linear-gradient(150deg,#16375F 0%,#0B2545 55%,#071930 100%);
  position:relative;overflow:hidden}
.ing-card.ing-more::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, rgba(201,168,92,.18), transparent 60%)}
.ing-more-ring{position:relative;z-index:1;width:60px;height:60px;
  background:linear-gradient(135deg,rgba(232,207,138,.18),rgba(184,146,58,.06));
  border:1px solid rgba(201,168,92,.6)}
.ing-more-ring svg{width:22px;height:22px;fill:#E8CF8A;stroke:none;transition:transform .3s var(--ease)}
.ing-card.ing-more:hover .ing-more-ring svg{transform:translateX(4px)}
.ing-more-lab,.ing-more-link{position:relative;z-index:1}
.ing-more-link{border-bottom-color:rgba(201,168,92,.7)}

/* offer label a touch bigger */

/* UGC track: JS owns the easing now */
.ugc-grid{scroll-behavior:auto}

/* scrollytelling numbers on navy read brighter */
.on-dark .show-num{background:linear-gradient(135deg,#F2E0AC 0%,#D9BC6C 50%,#E8CF8A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.show-num i{font-style:normal;font-size:.5em;margin-left:2px}

/* ============================================================
   V8.0 — round-10 layer (mobile parity pass)
   ============================================================ */

/* asset placeholder tags are dev-only now (?dev=1 shows them) */
.ph .ph-tag{display:none}
html.dev .ph .ph-tag{display:block}

/* hero: stars tighter to the headline on desktop, above the pouch on mobile */
.hero-grid .hero-stars{margin-bottom:8px}
@media(max-width:1020px){
  .hero-grid{grid-template-areas:"stars" "pouch" "copy" !important}
  .hero-grid .hero-stars{margin:0 0 10px}
  /* smaller pouch so the CTA arrives sooner */
  .pouch3d{width:min(360px,68vw)}
  .pouch-wrap{width:min(260px,54vw)}
  .hero-main{padding-top:22px}
}

/* USP marquee: pure motion, no touch handling at all */
.usp-bar.usp-marquee{overflow:hidden;pointer-events:none;touch-action:pan-y}
.usp-marquee .usp-track{pointer-events:none}

/* bento: cleaner mobile set */
@media(max-width:860px){
  .btile.hide-mobile{display:none}
  .btile.b-sand{padding:24px 22px}
  .btile .bchecks{gap:14px;font-size:15px}
  .btile .bchecks span{display:flex;align-items:center;gap:12px}
  .btile .bchecks span::before{content:"\2713";display:flex;align-items:center;justify-content:center;
    width:23px;height:23px;flex:none;border-radius:50%;margin:0;
    background:rgba(184,146,58,.16);box-shadow:inset 0 0 0 1px rgba(184,146,58,.4);
    color:var(--gold-deep);font-size:12px;font-weight:600;line-height:1}
}

/* Paula plate: quote, name, credential — centred and legible on phones */
.paula-plate{text-align:left}
.pp-name{display:block;font-family:var(--display);font-weight:600;font-size:15px;color:#F6F2E6;margin-top:12px}
.pp-attr{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#C9A85C;margin-top:5px}
@media(max-width:900px){
  .paula-plate{position:static;text-align:center;border-radius:0 0 var(--r) var(--r);padding:20px 20px 22px}
  .paula-media .ph.ph-45{border-radius:var(--r) var(--r) 0 0}
  .pp-quote{font-size:19px}
  .paula-grid .btn-ghost{display:flex;width:max-content;margin-left:auto;margin-right:auto}
}

/* highlight: sits lower on the line, never touches the row above */
.hl{padding:.16em .14em .16em;background-position:0 .04em}
h1:has(.hl),h2:has(.hl),.price-line:has(.hl){line-height:1.42}
em.hl{font-weight:400}

/* see-all card: arrow properly centred, filled */
.ing-more-ring svg{display:block;margin:0 auto;width:20px;height:20px}

/* UGC track: horizontal only, nothing clipped at the top */
.ugc-grid{overscroll-behavior-x:contain;padding:6px 0 10px;touch-action:pan-x pan-y}
.ugc-grid .reveal{transform:none}
.ugc-grid .ugc-card{will-change:auto}

/* heritage: the pinned scrub now runs on phones too (vertical scroll drives it) */
@media(max-width:1020px){
  .tlx-scroll{height:300vh !important}
  .tlx-sticky{position:sticky !important;top:0;height:100svh !important;
    display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .tlx-track{overflow:visible;scroll-snap-type:none;padding-bottom:0}
  .tlx-slide{flex:0 0 80vw;scroll-snap-align:none}
  .tlx-slide .ph{aspect-ratio:4/3}
  .tlx-meta{margin-top:14px}
  .tlx-meta h3{font-size:19px}
  .tlx-slide p{font-size:14.5px;line-height:1.55}
  .tlx-progress{display:block;margin-top:22px}
}
html.flat .tlx-scroll,html.flat .tlx-sticky{height:auto !important;position:relative !important}
@media(prefers-reduced-motion:reduce){
  .tlx-scroll{height:auto !important}
  .tlx-sticky{position:relative !important;height:auto !important}
  .tlx-track{overflow-x:auto}
}

/* showcase on mobile: media pins under the header, entries scroll beneath */
@media(max-width:900px){
  .show-grid{grid-template-columns:1fr;gap:0}
  .show-sticky{position:sticky;top:calc(var(--header-h) + 10px);aspect-ratio:16/11;z-index:1;margin-bottom:18px}
  .show-items{padding-top:0}
  .show-item{min-height:52svh;opacity:.3;padding:22px 0}
  .show-item:first-child{min-height:40svh}
  .show-item.on{opacity:1}
  .show-item:last-child{padding-bottom:8vh}
  .show-num{font-size:clamp(38px,11vw,52px)}
}

/* header icons: even spacing, true centring */
.nav-icons{align-items:center}
.nav-icons a,.burger{display:flex;align-items:center;justify-content:center}
@media(max-width:900px){
  .nav-icons{gap:4px;margin:0 2px 0 0}
  .nav-icons a{width:40px;height:40px}
  .burger{width:40px;height:40px;margin-left:2px}
  .burger span{left:9px;right:9px}
  .burger span:nth-child(1){top:14px}
  .burger span:nth-child(2){top:19.5px}
  .burger span:nth-child(3){top:25px}
  body.menu-open .burger span:nth-child(1),body.menu-open .burger span:nth-child(3){top:19.5px}
}

/* hero on phones: compact product, CTA inside the first screen */
@media(max-width:1020px){
  .hero-main{padding-top:12px;padding-bottom:34px;min-height:0}
  .pouch3d{width:min(300px,66vw)}
  .pouch-wrap{width:min(190px,42vw)}
  .pouch-stage{margin-bottom:0}
  .hero-copy h1{margin-bottom:10px}
  .hero-copy .sub{font-size:16px;line-height:1.55}
  .claim-line{font-size:12.5px;margin-top:8px}
  .hero-stats{margin-top:16px;padding:14px 4px}
  .hero-cta{margin-top:22px}
  .hero-checks{margin-top:16px;gap:14px}
  .hero-checks span{font-size:13px}
}
@media(max-width:1020px){
  .pouch3d.pouch3d-fallback .pouch-slot,.pouch3d .pouch-slot{width:min(196px,44vw)}
  .pouch3d{aspect-ratio:auto}
}

/* header: even icon rhythm on phones */
@media(max-width:900px){
  .nav-icons{gap:2px;margin-right:0}
  .burger{margin-left:0;width:38px}
  .burger span{left:8px;right:8px}
}
/* multi-line highlights need a touch more air on phones */
@media(max-width:900px){
  h1:has(.hl),h2:has(.hl),.price-line:has(.hl){line-height:1.5}
}

/* phones: account + basket ride next to the burger, not stranded mid-header */
@media(max-width:900px){
  .nav-icons{margin-left:auto;gap:4px}
  .nav-icons + .burger{margin-left:6px}
}

/* ============================================================
   V8.1 — round-11
   ============================================================ */

/* showcase on phones: block flow so the sticky media has room to travel
   (in a single-column GRID the sticky item is trapped in its own row) */
@media(max-width:900px){
  .show-grid{display:block}
  .show-sticky{display:block;position:sticky;top:calc(var(--header-h) + 12px);
    aspect-ratio:16/11;width:100%;margin:0 0 20px;z-index:1;
    border-radius:var(--r);overflow:hidden}
  .show-media{position:absolute;inset:0}
  .show-media .ph{position:absolute;inset:0;min-height:100%;border-radius:var(--r)}
  .show-items{padding-top:0}
  .show-item{min-height:56svh;opacity:.32;padding:20px 0}
  .show-item:first-child{min-height:36svh}
  .show-item.on{opacity:1}
  .show-item:last-child{padding-bottom:10vh}
}

/* hero: product back to a proper size, breathing room under the header */
@media(max-width:1020px){
  .hero-main{padding-top:26px}
  .pouch3d.pouch3d-fallback .pouch-slot,.pouch3d .pouch-slot{width:100%}
  .hero-stats{margin-top:18px;padding:15px 2px}
  .hero-stats div{padding:0 clamp(12px,3.4vw,22px)}
  .hero-stats b{font-size:29px}
  .hero-copy .sub{font-size:15.5px}
  .claim-line{font-size:12px;margin-top:10px}
}

/* highlights: real rounded corners, flatter gold, heavier italic */
.hl{border-radius:6px;
  background-image:linear-gradient(100deg,#EBD79B 0%,#E3CB86 50%,#EBD79B 100%)}
em.hl{font-weight:500}

/* Paula: two stats on phones, the third is desktop only */
@media(max-width:700px){
  .cred-row.glass-dark div:nth-child(3){display:none}
  .cred-row.glass-dark div{flex:1 1 50%}
}

/* claims tile: compact, matching the 1998 tile's density */
@media(max-width:860px){
  .btile.b-sand{padding:20px 20px}
  .btile .bchecks{gap:11px;font-size:15.5px}
  .btile .bchecks span::before{width:20px;height:20px;font-size:11px}
}

/* UGC: inset from the edge, finger-smooth (mandatory snap was the jitter) */
@media(max-width:900px){
  .ugc-grid{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scroll-padding-left:var(--pad);gap:14px}
  .ugc-card{flex:0 0 74vw;min-width:0}
  .ugc-card:last-child{margin-right:var(--pad)}
}

/* hero on phones: CTA rides above the stat panel so the product stays big
   AND "Shop now" is on the first screen */
@media(max-width:1020px){
  .hero-copy{display:flex;flex-direction:column}
  .hero-copy h1{order:1}
  .hero-copy .sub{order:2}
  .hero-copy .claim-line{order:3}
  .hero-cta{order:4;margin-top:20px}
  .hero-stats{order:5;margin-top:20px}
  .hero-checks{order:6;margin-top:18px}
  .hero-copy .microcopy{order:7}
}

/* UGC: keep the horizontal inset (a shorthand padding earlier wiped it) */
.ugc-grid{padding:6px var(--pad) 12px}
@media(min-width:901px){.ugc-grid{padding:6px 0 12px}}
@media(max-width:900px){
  .ugc-grid{margin:0 calc(-1 * var(--pad))}
}


/* ============================================================
   V8.2 — cross-engine hardening (Safari/iOS) + a11y
   ============================================================ */

/* gradient gold text: explicit fill + a visible fallback if background-clip is unsupported
   (without this the text renders INVISIBLE rather than degraded) */
.hero-stats b,.cred-row.glass-dark b,.tp-stats b,.expect-card .mo,.spot .amt,.show-num,
.offer-price b,.phil h3,.ing-more-num,.macro-strip b,.story-quote p{-webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-stats b,.cred-row.glass-dark b,.tp-stats b,.expect-card .mo,.spot .amt,.show-num,
  .offer-price b,.phil h3,.ing-more-num,.macro-strip b{
    background:none;color:var(--gold);-webkit-text-fill-color:var(--gold)}
  .on-dark .hero-stats b,.on-dark .cred-row.glass-dark b,.on-dark .show-num,.offer-price b{
    color:#E8CF8A;-webkit-text-fill-color:#E8CF8A}
  .story-quote p{background:none;color:var(--navy);-webkit-text-fill-color:var(--navy)}
}

/* iOS zooms any input under 16px on focus and never zooms back */
.modal-form input,.ft-form input,.ob input[type=email],.ob input[type=text]{font-size:16px}

/* wrappers that contain a blurred surface reveal with opacity only —
   a transformed ancestor makes iOS Safari silently drop backdrop-filter */
.js .paula-media.reveal,.js .paula-grid .reveal-d1,.js .rtabs.reveal,
.js .offer-card.reveal,.js .expect-card.reveal{transform:none !important}

/* announcement bar must survive reduced-motion / no-JS with three raw messages */
.announce{white-space:nowrap;text-overflow:ellipsis}
html:not(.js) .announce,.announce.static{white-space:normal;height:auto;padding:9px 16px;line-height:1.4}

/* modal overlay: scrollable and top-aligned so landscape phones can reach the close button */
.modal-overlay{align-items:flex-start;overflow-y:auto;padding:max(18px,env(safe-area-inset-top)) 18px 24px}
.modal{margin:auto}
@media(max-height:560px){.modal-game .game-board{max-width:210px}.game-body{padding:24px 22px 20px}}

/* drop-game: the ball must paint above the slots, and the labels must stay one line */
.game-ball{z-index:2}
.game-slots{z-index:1}
.game-slots span{white-space:nowrap;font-size:10.5px;letter-spacing:.06em}

/* pinch-zoom must stay available over horizontal scrollers */
.ing-grid,.ugc-grid{touch-action:pan-x pan-y pinch-zoom}

/* body scroll lock while a modal is open */
/* Locking body scroll removes the scrollbar, and the page then jumps sideways
   by its width — the jitter when the cart drawer opens. --sbw is measured in
   main.js and holds the layout still while the drawer is up. */
body.modal-open{overflow:hidden;padding-right:var(--sbw,0px)}

/* onboarding: stable progress anchor, reachable skip */
.ob-wrap{align-items:flex-start;padding-top:clamp(28px,7vh,64px)}
.ob-skip{padding:12px 8px;min-height:44px;display:inline-flex;align-items:center}
.pop-skip{padding:10px 8px;min-height:44px;display:inline-flex;align-items:center}

/* glass surfaces that re-declare the recipe need the same opaque fallback,
   or iOS renders them as translucent films with page text ghosting through */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tp-visual{background:#FFFDF7}
  .expect-card{background:#FFFDF7}
  .sticky-atc{background:var(--paper)}
}
.sticky-atc{background:rgba(255,252,247,.94)}


/* ============================================================
   V8.3 — audit fixes
   ============================================================ */

/* the burger must stay clickable above the open menu (header made its own
   stacking context, so z-index:101 on the burger could never win) */
body.menu-open header.site{z-index:120;background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body.menu-open header.site .logo .word{color:#F6F2E6}
body.menu-open header.site .nav-icons svg{stroke:#F6F2E6}
body.menu-open .navlinks,body.menu-open header.site .btn{display:none}

/* marquee edges must fade, not guillotine words */
.usp-bar.usp-marquee{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)}

/* the pinned showcase media must not paint over the entry it belongs to */
@media(max-width:900px){
  .show-sticky{aspect-ratio:16/10}
  .show-items{position:relative;z-index:2}
  .show-item{background:linear-gradient(180deg,rgba(11,37,69,0),rgba(11,37,69,.92) 14%,rgba(11,37,69,.92));
    padding:26px 0 22px}
  .show-light .show-item{background:linear-gradient(180deg,rgba(246,239,223,0),rgba(246,239,223,.94) 14%,rgba(246,239,223,.94))}
}

/* horizontal card rows: fade the cut edge so words are not sliced */
@media(max-width:960px){
  .ing-grid{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%)}
}

/* tap targets */
@media(max-width:900px){
  .foot-grid a{padding:7px 0}
  .tab-link,.facc-a a{display:inline-flex;align-items:center;min-height:44px}
  .tab-btn{padding:6px 4px 14px;min-width:44px}
}

/* the hero trust icon had no intrinsic size, so it collapsed to 0x0 and pushed
   the caption 12px past the headline's left edge */
.stars-mark{display:inline-flex;align-items:center;flex:none}
.stars-mark svg{width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* WCAG: the legal disclaimer and the compliance smallprint must clear 4.5:1 */
.foot-legal,.foot-legal .disclaimer{color:#A9A395}
.mono-note{color:#5A6472;text-transform:none;letter-spacing:.01em;font-size:12.5px;line-height:1.65}

/* the tab indicator must be visible at rest, not a 1px speck */
.tab-prog{min-width:2px}
.tab-btn.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:rgba(184,146,58,.28)}

/* lists should not end on a dangling rule */
#faq .facc:last-of-type,.ag-checks .facc:last-of-type,.pdp-accs .facc:last-of-type{border-bottom:none}

/* PDP: keep the primary CTA reachable on a 900px-tall desktop */
@media(min-width:901px){.gallery-main{max-height:64vh}.gslide .pouch-wrap{max-height:56vh}}

/* PDP founding strip: the clock row was stuck in a column */

/* expect cards: one shared number column so the rules and copy align */
.expect-card .mo{width:96px;padding-right:18px;box-sizing:content-box}
.expect-card h3{min-height:0}

/* sticky buy bar must not cover the footer legal line */
@media(max-width:900px){body{padding-bottom:0}main.pdp ~ footer.site .foot-legal{padding-bottom:76px}}

/* the burger belongs to phones only (a later utility rule had re-shown it on desktop) */
@media(min-width:901px){.burger{display:none !important}}
/* the off-screen mobile menu must not be keyboard-reachable on desktop */
@media(min-width:901px){.mobile-menu{visibility:hidden}}
body.menu-open .mobile-menu{visibility:visible}

/* ============================================================
   V8.4 — accessibility
   ============================================================ */

/* closed overlays must be out of the tab order, not merely transparent */
.modal-overlay{visibility:hidden}
.modal-overlay.open{visibility:visible}
.mobile-menu{visibility:hidden}
body.menu-open .mobile-menu{visibility:visible}
.facc-a > div{visibility:hidden}
.facc.open .facc-a > div{visibility:visible}

/* dimmed showcase entries still have to be readable (was .28/.32 ≈ 1.9:1) */
.show-item{opacity:.62}
@media(max-width:900px){.show-item{opacity:.62}}
.show-item.on{opacity:1}

/* focus ring must clear 3:1 on cream as well as navy */
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.on-dark :focus-visible,.band-navy :focus-visible{outline-color:#E8CF8A}
.ft-form input:focus-visible,.modal-form input:focus-visible,.ob input:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* footer nav is the main mobile navigation: give it real tap targets */
@media(max-width:900px){
  .foot-grid a{min-height:44px;display:flex;align-items:center}
  .nav-icons a{width:44px;height:44px}
  .burger{width:44px;height:44px}
  .ugc-controls button,.g-arrow{width:44px;height:44px}
}

/* the marquee ignores drags, but its chips are navigation links and must stay tappable */
.usp-bar.usp-marquee .usp{pointer-events:auto}


/* ============================================================
   V8.5 — narrow-viewport overflow, reduced-motion parity, CLS
   (every rule below traces to a measured defect, not a guess)
   ============================================================ */

/* the newsletter form's min-content was 329px inside a 280px box at 320px wide,
   pushing all 10 pages 29px sideways */
.ft-form{flex-wrap:wrap}
.ft-form input{min-width:0}
@media(max-width:400px){.ft-form input,.ft-form .btn{flex:1 1 100%}}

/* the burger was the only shrinkable item in the header, so it collapsed to 8px
   (three 0px bars = no navigation at all) below ~356px */
.burger{flex:none}
.nav .logo{min-width:0}
@media(max-width:359px){.nav-icons a{width:36px}.logo svg{max-width:150px}}

/* the desktop hero stat bar stayed 438px wide in a 379px column between 1021
   and 1099px — the compaction lived inside the max-width:1020px block */
@media(max-width:1100px){
  .hero-stats{padding:15px 2px}
  .hero-stats div{padding:0 clamp(12px,3.4vw,22px)}
}

/* "Recovery" rendered as "Recove" at 320 and 360 */
.tab-nav{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.tab-nav::-webkit-scrollbar{display:none}
@media(max-width:380px){.tab-btn{font-size:14.5px;letter-spacing:-.01em}}
@media(max-width:359px){
  .hero-stats{flex-wrap:wrap;justify-content:center;row-gap:12px}
  .hero-stats div+div{border-left:0}
}

/* the "+" glyph pushed every accordion row 11px past its own box at every width */
.facc-q{min-width:0}
.facc-q>span,.facc-q>.agc-t{min-width:0}

/* three "month" cards were rendering at three different widths at 768 and 834 */
.expect-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.expect-grid{grid-template-columns:1fr}}

/* digit glyphs changing width mid count-up was science.html's only CLS source */
.show-num,.hero-stats b,.cred-row b,.tp-stats b,.spot .amt{font-variant-numeric:tabular-nums}

/* the pinned media used to scroll away while the last entry was still being read */
.show-item:last-child{min-height:auto;padding-bottom:clamp(24px,7vh,80px)}
.show-items{padding-bottom:clamp(40px,12vh,140px)}

/* reduced motion left a permanently-empty progress bar on phones: the
   max-width:1020px rule below it won on source order, not specificity */
@media(prefers-reduced-motion:reduce){.tlx-progress{display:none !important}}

/* flat mode had no active-tab indicator at all and still played a 1.1s clip reveal */
html.flat .tab-btn.active{box-shadow:inset 0 -2px 0 var(--gold)}
html.flat .mask-reveal{clip-path:inset(0 0 0 0 round 14px);transition:none}

/* V8.5a — two overflows the first pass did not actually close */

/* the tab buttons were flex-shrinking below their nowrap text ("Recovery" -> "Recover"),
   so the nav must scroll and the buttons must hold their size */
.tab-nav{gap:clamp(14px,2.4vw,26px)}
.tab-btn{flex:0 0 auto}

/* the "+" glyph is an anonymous-flex sibling of a bare text node, so it could never
   be shrunk into the row; take it out of flow instead */
.facc-q{position:relative;padding-right:34px}
.facc-q::after{position:absolute;right:2px;top:50%;transform:translateY(-50%)}
.facc.open .facc-q::after{transform:translateY(-50%) rotate(45deg)}

/* rotating the 26px "+" 45deg swells its axis-aligned box by sqrt(2), which was the
   real 11px overflow — give it a square box that still fits once rotated */
.facc-q::after{right:6px;width:24px;height:24px;line-height:24px;text-align:center}
.facc-q{padding-right:44px}
.facc-q::after{right:12px}

/* below ~380px the wordmark ran into the account icon */
@media(max-width:380px){
  .logo{gap:8px}
  .logo .shield{width:26px;height:29px}
  .logo .word{font-size:19px;letter-spacing:.1em}
  .nav-icons{gap:2px}
}

/* ============================================================
   V9.0 — owner round-12 (2026-08-17)
   Every rule traces to a line of owner feedback or to a defect
   measured while fixing one.
   ============================================================ */

/* ---- hero: the stat panel was carrying too much air, which pushed the
   headline and the trust line up against the header. Shrinking it lets the
   vertically-centred copy column settle lower. ---- */
.hero-stats{padding:13px 4px;margin-top:20px}
.hero-stats div{padding:0 clamp(14px,3vw,26px)}
.hero-stats b{font-size:26px;margin-bottom:4px}
.hero-stats div{font-size:11px;letter-spacing:.14em}
@media(max-width:1020px){
  .hero-stats{margin-top:16px;padding:11px 2px}
  .hero-stats b{font-size:24px}
}

/* five stars, not a tick, beside the trust line (v7 rule: star row pairs with
   temporal trust copy — never a review count) */
.hero-stars .stars-row{gap:4px}
.hero-stars .stars-row i{width:16px;height:16px}
.stars-mark{display:none}

/* ---- highlight sweep now uses the exact Shop Immufix gradient ---- */
.hl{background-image:linear-gradient(135deg,#E0C377 0%,#C69F47 30%,#B8923A 55%,#D4B462 100%)}
.reveal.in .hl,.in .hl{color:var(--navy-deep)}

/* ---- nav CTA hover was instant: `.navlinks a` (0,1,1) outranked `.btn-gold`
   (0,1,0), so the button inherited `transition:color .2s` and nothing else.
   Keep the link rule off the button and restore the button's own easing. ---- */
.navlinks a:not(.btn){transition:color .25s var(--ease)}
.navlinks a.btn,.mobile-menu a.btn{
  transition:background-position .8s cubic-bezier(.22,1,.36,1),
             box-shadow .5s var(--ease),transform .2s var(--ease),color .3s var(--ease)}
/* the mobile menu's serif cream link styling was also bleeding into its gold CTA,
   which is why "Shop Immufix" rendered as unreadable white-on-gold */
.mobile-menu a.btn-gold{font-family:var(--sans);font-weight:500;color:var(--navy-deep);
  border-bottom:none;letter-spacing:.01em}

/* ---- scroll showcase (#trusted, #carries, #scoop) ----------------------------
   Three defects, one component:
   1. the media pinned LOW and off-centre — it is now centred in the pinned band;
   2. entry 01 was skipped before the pin landed — the entries column now starts
      below the fold so 01 arrives at the reading line already pinned;
   3. entries only dimmed. They fade AND travel again, in and out.        ---- */
.show-sticky{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));
  aspect-ratio:auto;display:flex;align-items:center;justify-content:center}
.show-stage{position:relative;margin:0 auto;aspect-ratio:4/4.6;
  width:min(100%, calc((100svh - var(--header-h) - 64px) * 4 / 4.6))}
.show-media{position:absolute;inset:0;transform:scale(.985)}
.show-media .ph{position:absolute;inset:0;min-height:100%;border-radius:var(--r)}

.show-items{padding-top:38vh;padding-bottom:30vh}
.show-item{min-height:64vh;opacity:.3;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.show-item:first-child,.show-item:last-child{min-height:64vh;padding:34px 0;justify-content:center}
.show-item.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.show-item{opacity:1;transform:none}}
html.flat .show-item{opacity:1;transform:none;transition:none}

/* phones: the media pins as a full-bleed band under the header and the entries
   travel BEHIND it. The old layer had the entries painting over the media with an
   opaque navy gradient, which is what killed the effect on mobile entirely. */
@media(max-width:900px){
  .show-grid{display:block}
  .show-sticky{position:sticky;top:0;height:auto;display:block;z-index:3;
    margin:0 calc(-1 * var(--pad));padding:calc(var(--header-h) + 10px) var(--pad) 14px;
    background:var(--navy)}
  .show-light .show-sticky{background:var(--bone)}
  .show-stage{width:100%;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden}
  .show-items{position:relative;z-index:1;padding-top:14vh;padding-bottom:24vh}
  .show-item{background:none;min-height:60svh;padding:22px 0}
  .show-item:first-child,.show-item:last-child{min-height:60svh;padding:22px 0}
  .show-light .show-item{background:none}
  .show-item h3{font-size:clamp(22px,6vw,28px)}
  .show-item p{font-size:16px}
}

/* ---- inside-the-scoop card: the ring is a solid gold disc now, not an outline ---- */
.ing-more-ring{border:none;
  background:linear-gradient(135deg,#E0C377 0%,#C69F47 30%,#B8923A 55%,#D4B462 100%);
  box-shadow:inset 0 1px 0 rgba(255,240,200,.55), inset 0 -1px 0 rgba(90,66,18,.22)}
.ing-more-ring svg{fill:var(--navy-deep);stroke:none}

/* ---- product image slot: an empty, correctly-sized box for the real PNG ---- */
.prod-stage{width:min(510px,86vw);aspect-ratio:10/13;margin:0 auto}
.prod-ph{position:relative;width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;border-radius:var(--r);
  background:radial-gradient(120% 100% at 50% -10%, #14335F 0%, #0B2545 52%, #071930 100%)}
.prod-ph-frame{position:absolute;inset:10px;border:1px dashed rgba(201,168,92,.34);
  border-radius:calc(var(--r) - 4px);pointer-events:none}
.prod-ph-art{width:46%;max-height:56%;opacity:.9}
.prod-ph-lab{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
  font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(201,168,92,.85);padding:0 14px}
.prod-ph-lab em{font-style:normal;font-weight:400;font-size:9.5px;letter-spacing:.1em;
  text-transform:none;color:#7E93B3}
.on-dark .prod-ph{box-shadow:0 34px 60px rgba(0,0,0,.35)}
@media(max-width:1020px){.prod-stage{width:min(288px,60vw)}.prod-ph-lab{font-size:9px}.prod-ph-lab em{display:none}}
/* the gallery + popup slots keep their own widths; only the ratio is shared */
.gslide .pouch-wrap,.modal-media .pouch-slot{aspect-ratio:10/13}
.gslide .pouch-wrap{width:min(440px,76%);filter:none}

/* ---- PDP gallery: the 64vh cap was shrinking the preview to ~450px inside a
   620px column. The sticky column + sticky ATC already keep the CTA reachable. ---- */
@media(min-width:901px){
  .gallery-main{max-height:none;width:100%}
  .gslide .pouch-wrap{max-height:none}
}

/* ---- heritage scrub: the first card used to start hard against the content
   edge and move immediately. It now starts further in (and JS holds the scrub
   still for the first 14% so it can actually be read). ---- */
.tlx-track{padding-left:calc(max(var(--pad), (100vw - var(--maxw)) / 2 + var(--pad)) + clamp(0px, 10vw, 160px))}
@media(max-width:1020px){
  .tlx-track{padding-left:calc(var(--pad) + clamp(0px, 6vw, 44px))}
}

/* ---- hero on phones: Shop Now sits above the claim line, and the claim line
   drops below the 35/30/1998 panel ---- */
@media(max-width:1020px){
  .hero-copy h1{order:1}
  .hero-copy .sub{order:2}
  .hero-cta{order:3;margin-top:20px}
  .hero-stats{order:4;margin-top:18px}
  .hero-copy .claim-line{order:5;margin-top:14px}
  .hero-checks{order:6;margin-top:16px}
  .hero-copy .microcopy{order:7}
}

/* ---- Real Routines on phones: no sticky hover state, no per-card backdrop
   blur (six blurred play buttons was the scroll jank), GPU-friendly track ---- */
@media(hover:none){
  .ugc-card:hover .ph .ph-inner,.ing-card:hover .ph .ph-inner,
  .btile.b-img:hover .ph .ph-inner,.j-card:hover .ph .ph-inner,
  .tlx-slide:hover .ph .ph-inner,.ph:hover .ph-inner{transform:none}
  .ugc-card:hover .ugc-play{transform:none}
}
@media(max-width:900px){
  .ugc-play{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(8,27,52,.5);
    width:48px;height:48px;margin:-24px 0 0 -24px}
  .ugc-grid{scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .ugc-card{contain:paint}
  .ugc-card .ph .ph-inner{transition:none}
}

/* ---- V9.0a — measured tuning after the first screenshot pass ---- */

/* phones: the entry column had ~200px of dead navy between the pinned media and
   the first line of copy. Shorter entries + a reading line under the media band. */
@media(max-width:900px){
  .show-items{padding-top:5vh;padding-bottom:22vh}
  .show-item,.show-item:first-child,.show-item:last-child{min-height:52svh}
}

/* PDP gallery: the product slot was floating in a 610px panel at 58% width */
.gslide .pouch-wrap{width:min(430px,74%)}

/* PDP founding strip: the red ticker wraps to its own row in a 437px column, so
   make that a deliberate row rather than a stranded left-aligned orphan */

/* V9.0b — the V8.1 mobile block pinned the sticky to width:100% of the padded
   column and clipped it to a rounded box, so the new full-bleed band was still
   350px wide inside a 390px screen. Reset the three properties it set. */
@media(max-width:900px){
  .show-sticky{width:auto;overflow:visible;border-radius:0}
  .show-item,.show-item:first-child,.show-item:last-child{min-height:46svh}
}

/* ============================================================
   V9.1 — owner feedback on the V9.0 pass (2026-08-17)
   ============================================================ */

/* ---- the V9.0 showcase opened a ~120px hole between the section heading and
   the media: a full-height flex-centred sticky box is centred BEFORE it pins
   too. The box is now exactly as tall as the media and `top` carries the
   centring offset (JS `showcaseStage()` measures it into --show-top). ---- */
.show-sticky{height:auto;display:block;top:calc(var(--header-h) + var(--show-top, 24px))}
.show-stage{margin:0}

/* ---- and the entries were 64vh apart, which read as one entry per empty
   screen. Tighter, but still a real dwell each. ---- */
.show-items{padding-top:14vh;padding-bottom:16vh}
.show-item,.show-item:first-child,.show-item:last-child{min-height:36vh;padding:26px 0}
@media(max-width:900px){
  .show-sticky{height:auto;top:0}
  .show-items{padding-top:4vh;padding-bottom:18vh}
  .show-item,.show-item:first-child,.show-item:last-child{min-height:40svh;padding:20px 0}
}

/* ---- highlight sweeps animate on their OWN band now (JS `highlights()` adds
   .lit), not on the section reveal, which had always finished painting before
   the phrase was readable and never replayed. ---- */
.js .reveal.in .hl,.js .in .hl{background-size:0% 100%}
.js .hl.lit,.js .reveal.in .hl.lit,.js .in .hl.lit{background-size:100% 100%}
.js .on-dark .reveal.in .hl,.js .on-dark .in .hl{color:inherit}
.js .on-dark .hl.lit,.js .on-dark .reveal.in .hl.lit,.js .on-dark .in .hl.lit{color:var(--navy-deep)}
.hl{transition:background-size .85s cubic-bezier(.22,1,.36,1),color .45s ease .18s}
html.flat .hl,html.flat .reveal.in .hl{background-size:100% 100%}
html.flat .on-dark .hl{color:var(--navy-deep)}
@media(prefers-reduced-motion:reduce){
  .js .reveal.in .hl,.js .in .hl,.hl{background-size:100% 100%}
  .js .on-dark .reveal.in .hl,.js .on-dark .in .hl{color:var(--navy-deep)}
}

/* ---- hero: the authorised claim line moves out of the headline block and
   becomes smallprint at the foot of the hero. It may NOT leave the hero —
   "Immunity, done properly." is a general health reference under Art.10(3)
   and needs the specific claim in the same field of vision (COMPLIANCE.md). ---- */
.claim-line{font-size:11.5px;line-height:1.6;color:#8A93A3;margin-top:16px;max-width:68ch;letter-spacing:.01em}
@media(max-width:1020px){.claim-line{font-size:11.5px;margin-top:14px}}

/* hero content sits lower under the header */
@media(min-width:1021px){
  .hero-main{padding-top:clamp(70px,12vh,140px);padding-bottom:clamp(18px,3vh,40px)}
}

/* ---- UGC progress: a sliding thumb sized to the visible share of the row.
   The old bar filled to 100% after one step with two cards still off-screen. ---- */
.ugc-progress{width:min(420px,46vw);height:4px;background:rgba(17,29,51,.14)}
.ugc-progress i{width:25%;transform:translateX(0);
  transition:transform .3s var(--ease),width .3s var(--ease)}

/* ============================================================
   V9.2 — mobile-audit remediation (2026-08-17)
   ============================================================ */

/* the placeholder is an empty box now, not a drawn silhouette */
.prod-ph-art{display:none}
.prod-ph{gap:8px}
.prod-ph-lab{font-size:11px}

/* ---- SHORT viewports (landscape phones): the pinned band was 581px tall inside
   a 390px viewport, so the pinned state was image-only with every entry pushed
   off-screen. Below 560px tall, go back to the side-by-side layout. ---- */
@media(max-width:900px) and (max-height:560px){
  .show-grid{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);
    gap:clamp(20px,4vw,40px);align-items:start}
  .show-sticky{position:sticky;top:calc(var(--header-h) + 10px);height:auto;
    margin:0;padding:0;background:none;z-index:1;display:block}
  .show-light .show-sticky{background:none}
  .show-stage{width:100%;aspect-ratio:4/3.4;border-radius:var(--r)}
  .show-items{padding-top:4vh;padding-bottom:16vh}
  .show-item,.show-item:first-child,.show-item:last-child{min-height:74svh;padding:14px 0}
  .show-item h3{font-size:21px}
  .show-item p{font-size:15px}
}

/* ---- sticky buy bar collapsed to 173px at 320: the product name broke over three
   lines beside the CTA. Below 400px the bar is the CTA plus one clipped line. ---- */
@media(max-width:400px){
  .sticky-atc{gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  .sticky-atc .s-info{flex:1 1 auto;min-width:0}
  .sticky-atc .s-info b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .sticky-atc .s-info span{display:none}
  .sticky-atc .btn{flex:0 0 auto;min-width:132px;white-space:nowrap}
  main.pdp ~ footer.site .foot-legal{padding-bottom:96px}
}

/* ---- tap targets the audit measured under 44px ---- */
.ft-social a{width:44px;height:44px}
@media(max-width:359px){.nav-icons a{width:40px}}

/* ---- 124px of dead navy under the hero on phones: the grid still carried the
   90px bottom padding from the old pinned-hero layout ---- */
@media(max-width:1020px){
  .hero-grid{padding-bottom:0}
  .hero-main{padding-bottom:clamp(24px,4vh,40px)}
}

/* ---- the hero stat panel wrapped to two rows at 320 with "1998 / EST." stranded.
   With the V9.0 compaction it fits on one row again once the labels tighten. ---- */
@media(max-width:400px){
  .hero-stats div{padding:0 10px;font-size:9.5px;letter-spacing:.1em}
  .hero-stats b{font-size:23px}
}
@media(max-width:359px){
  .hero-stats{flex-wrap:nowrap;row-gap:0}
  .hero-stats div+div{border-left:2px solid rgba(255,255,255,.22)}
  .hero-stars{flex-wrap:wrap;row-gap:4px}
}

/* ---- purchase cards at 320: the price column was being pushed off-axis ---- */
@media(max-width:400px){
  .plan{grid-template-columns:auto 1fr;gap:10px;padding:16px 14px}
  .plan .pp{grid-column:2;text-align:left;margin-top:8px}
  .plan .pp b{font-size:20px}
  .plan .pp s{display:inline;margin-left:8px}
}

/* ---- V9.2a — desktop-audit remediation ---- */

/* science.html: `.nacc .facc-q` re-declared `padding:15px 2px`, which wiped the
   44px right gutter the absolutely-positioned "+" needs. The glyph was striking
   through the amount on all 31 nutrient rows. */
.nacc .facc-q{padding:15px 40px 15px 2px}
.nacc .facc-q b{margin-right:4px}

/* the "+" must never sit over the label or the amount */
.facc-q>span,.facc-q>.agc-t,.facc-q>b{max-width:100%}

/* highlight sweep: the colour flip was delayed .3s behind a .9s gold sweep, so
   the phrase spent ~half a second as cream-on-gold. Shorter sweep, and the
   colour steps once the gold has covered the line. */
.hl{transition:background-size .6s cubic-bezier(.22,1,.36,1),color 0s linear .4s}
.js .on-dark .hl.lit,.js .on-dark .reveal.in .hl.lit,.js .on-dark .in .hl.lit{color:var(--navy-deep)}

/* the nav CTA inherited `.navlinks a { color: var(--ink) }`, so it was the one
   gold button on the site with #111D33 text instead of #081B34 */
.navlinks a.btn-gold,.mobile-menu a.btn-gold{color:var(--navy-deep)}

/* filled "ghost" buttons only shifted a gradient's position on hover, which is
   almost invisible. Give them a real darken like every other button. */
.btn-ghost:hover{background-image:linear-gradient(135deg,#153455 0%,#071B33 55%,#0D2748 100%)}
.on-dark .btn-ghost:hover{background-image:linear-gradient(135deg,#F4EEDE 0%,#E4DAC4 50%,#F2E9D6 100%)}

/* expect cards: `align-items:center` put each card's heading at a different
   height depending on how many lines its paragraph ran to */
.expect-card{align-items:stretch}
.expect-card .mo{align-self:stretch;justify-content:center}
.expect-body{display:flex;flex-direction:column;justify-content:flex-start;padding-top:2px}

/* gallery arrows keep their centring transform through any hover */
.g-arrow{transition:background-color .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1)}

/* tighter still: the cream-on-gold window is now ~180ms, brief enough to read as
   a flourish rather than an unreadable state */
.hl{transition:background-size .45s cubic-bezier(.22,1,.36,1),color 0s linear .3s}

/* short portrait phones (≈568px tall): the pinned band was eating 48% of the
   viewport, so entry 01's heading slid behind it early in its window. Trim the
   band; the ≤560px-tall rule above already hands landscape to side-by-side. */
@media(max-width:900px) and (max-height:660px) and (orientation:portrait){
  .show-sticky{padding-top:calc(var(--header-h) + 6px);padding-bottom:10px}
  .show-stage{aspect-ratio:16/8.6}
  .show-items{padding-top:2vh}
}

/* ---- V9.3 — hero balance (owner) ---- */
@media(min-width:1021px){
  /* the copy column was squeezed by a 520px product column plus a 72px gap, so the
     hero sub broke to THREE lines below ~1200px. Rebalance the split instead of
     shrinking the type. */
  .hero-grid{grid-template-columns:minmax(0,1.25fr) minmax(300px,470px);
    column-gap:clamp(18px,2.6vw,44px)}
  .hero-copy .sub{font-size:18px;max-width:none}
  /* copy block sits a little lower under the header */
  .hero-main{padding-top:clamp(84px,14vh,168px)}
  /* product rides slightly higher than the copy, and a touch larger */
  .hero-grid .pouch-stage{transform:translateY(-22px)}
  .prod-stage{width:min(100%,470px)}
}
@media(min-width:1021px) and (max-width:1140px){
  /* narrow desktops: give the copy the room instead of letting the sub break to
     a third line */
  .hero-grid{grid-template-columns:minmax(0,1.35fr) minmax(280px,400px)}
  .hero-copy .sub{font-size:17.5px}
}

/* ---- V9.4 — hero rhythm + softer highlight sweeps (owner) ---- */

/* The gold sweep was flickery for two reasons: the text colour was a hard STEP
   (`color 0s linear .3s`), which reads as a snap, and the sweep itself was only
   .45s. Long, eased sweep with the colour crossfading over it while the gold has
   already covered most of the line. JS gives the observer hysteresis. */
.hl{transition:background-size .95s cubic-bezier(.22,1,.36,1),color .45s ease .3s}
@media(prefers-reduced-motion:reduce){.hl{transition:none}}

/* Hero vertical rhythm: the star line sat ~42px off the headline while the two
   headline lines are ~27px apart. Pull the headline up into its own half-leading
   so both gaps read the same, and let the shorter block settle lower. */
@media(min-width:1021px){
  .hero-grid .hero-stars{margin-bottom:0}
  .hero-copy h1{margin-top:-.2em}
  .hero-main{padding-top:clamp(96px,16vh,196px)}
}

/* ============================================================
   V9.5 — owner round-13
   ============================================================ */

/* ---- the gold marker sweep is retired. The two-font accent (sans headline +
   Zodiak serif italic on the phrase) carries the emphasis on its own, which is
   the reference pattern anyway. Nothing renders `.hl` any more, so the old
   `:has(.hl)` line-height compensations must not linger either. ---- */
h1:has(.hl),h2:has(.hl),.price-line:has(.hl){line-height:1.12}
@media(max-width:900px){h1:has(.hl),h2:has(.hl),.price-line:has(.hl){line-height:1.12}}

/* ---- showcase entries start lower so the first one is well clear of the
   heading before it reaches the reading line ---- */
@media(min-width:901px){.show-items{padding-top:34vh}}

/* ---- UGC progress: back to a filling bar ---- */
.ugc-progress i{transition:width .35s cubic-bezier(.22,1,.36,1)}

/* ---- PDP gallery: the product slot is edge to edge inside the panel, like
   every other slide. No inset dashed card floating in the middle. ---- */
.gslide .pouch-wrap{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto}
.gslide .prod-ph{border-radius:0;height:100%}
.gslide .prod-ph-frame{inset:0;border-radius:0;border-style:dashed;border-color:rgba(201,168,92,.16)}
.modal-media{padding:0}
.modal-media .pouch-slot{width:100%;height:100%;aspect-ratio:auto;filter:none}
.modal-media .prod-ph{border-radius:0;height:100%}
.modal-media .prod-ph-frame{inset:0;border-radius:0}

/* ---- PDP offer strip: red glass, with each digit on its own subtle tile ---- */

/* the product slide still carried the 8% padding from the old inset layout */
.gslide.slide-navy{padding:0}

/* ============================================================
   V9.6 — scratch-card welcome offer (replaces the plinko game)
   ============================================================ */
.scr-card{position:relative;margin:20px auto 16px;max-width:320px;aspect-ratio:16/9;
  border-radius:12px;overflow:hidden;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.scr-prize{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px}
.scr-amt{font-family:var(--display);font-weight:600;font-size:clamp(40px,11vw,56px);
  line-height:1;letter-spacing:-.02em;
  background:linear-gradient(135deg,#F2E0AC 0%,#D9BC6C 50%,#E8CF8A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .scr-amt{background:none;color:#E8CF8A;-webkit-text-fill-color:#E8CF8A}
}
.scr-lab{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9BA5B8}
.scr-foil{position:absolute;inset:0;width:100%;height:100%;display:block;
  cursor:grab;touch-action:none;transition:opacity .5s var(--ease)}
.scr-foil:active{cursor:grabbing}
.scr-foil.gone{opacity:0;pointer-events:none}
.scr-card.won{box-shadow:inset 0 0 0 1px rgba(201,168,92,.55)}
.scr-card.won .scr-prize{animation:scrpop .55s cubic-bezier(.22,1,.36,1)}
@keyframes scrpop{from{transform:scale(.9)}to{transform:none}}
.scr-reveal{min-height:0;padding:9px 18px;font-size:13px}
.scr-won{font-size:15px;color:#EDE8DA;margin:4px 0 12px}
.scr-won b{color:#E8CF8A}
@media(prefers-reduced-motion:reduce){
  .scr-foil{display:none}
  .scr-card.won .scr-prize{animation:none}
}
@media(max-height:620px){.scr-card{max-width:250px}.scr-body{padding:26px 24px 22px}}

/* ---- V9.7 — hero sits up again. The 16vh top padding was 112-227px depending on
   window height (it grew on tall screens, which is backwards) and the hero
   overflowed the viewport at every size below 1080. Size the band to its content
   with padding that barely moves, so the gap under the header stays ~60px. ---- */
@media(min-width:1021px){
  .hero-main{min-height:0;padding-top:clamp(44px,5vh,72px);padding-bottom:clamp(52px,6vh,88px)}
}

/* ============================================================
   V9.8 — the journal: real articles, not links off-site
   ============================================================ */
.art-hero{padding-bottom:clamp(40px,6vw,72px)}
.art-back{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:#9BA5B8;margin-bottom:26px;
  transition:color .25s var(--ease)}
.art-back:hover{color:#E8CF8A}
.art-hero h1{font-size:clamp(32px,4.4vw,54px)}
.art-meta{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#8E99AC;margin-top:22px;line-height:1.7}

/* article body: one readable measure, generous leading, subheads that are
   subheads rather than marketing h2s (no serif-italic accent down here) */
.art-copy{padding-top:clamp(44px,5vw,72px)}
.art-copy p{font-size:17px;line-height:1.78;color:#3B4354;margin-bottom:22px;max-width:68ch}
.art-copy .art-lede{font-size:clamp(19px,2.1vw,23px);line-height:1.62;color:var(--ink);
  margin-bottom:34px;font-weight:400}
.art-copy h2{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.2vw,27px);
  letter-spacing:-.01em;line-height:1.25;color:var(--ink);margin:44px 0 16px}
.art-copy h2:first-child{margin-top:0}
.art-copy strong{font-weight:600;color:var(--ink)}
.art-list{margin:0 0 26px;padding:0;max-width:68ch}
.art-list li{position:relative;font-size:16.5px;line-height:1.7;color:#3B4354;
  padding:0 0 12px 26px}
.art-list li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;
  border-radius:50%;background:var(--gold)}
.art-note{margin-top:38px;padding:22px 24px;border-left:2px solid var(--gold);
  background:rgba(184,146,58,.06);border-radius:0 var(--r-ui) var(--r-ui) 0;
  font-size:13.5px;line-height:1.7;color:var(--muted);max-width:68ch}
.art-copy .art-note{margin-bottom:0}

/* journal index cards carry a blurb and a date */
.jl-card .j-meta{margin:0 0 8px}
.jl-card h3{font-size:20px;line-height:1.3}
.jl-blurb{font-size:14.5px;line-height:1.6;color:var(--muted);margin-top:10px;max-width:42ch}
.jl-date{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#687488;margin-top:14px}
@media(max-width:820px){.jl-grid{gap:34px}}

/* the article hero was inheriting the full marketing band padding */
.art-hero{padding-top:clamp(48px,6vw,88px)}

/* the h1's optical -.2em pull is measured against a 60px headline; below ~1200px
   the headline clamps down and the same pull dragged it into the star line
   (measured: 239x10px of overlap at 1024) */
@media(min-width:1021px) and (max-width:1199px){.hero-copy h1{margin-top:0}}

/* ============================================================
   V9.9 — owner round-14
   ============================================================ */

/* ---- DESKTOP HERO ------------------------------------------------------
   Three asks in one: the product is smaller, the head/foot space is equal,
   and the next band must not peek above the fold. The band now fills exactly
   the first screen (viewport minus the announce bar and the header) with
   symmetric padding, so `justify-content:center` splits the slack evenly by
   construction rather than by two numbers I keep hand-tuning. The product's
   -22px lift is gone: it was what made the top gap read half the bottom one. */
@media(min-width:1021px){
  .hero-main{min-height:calc(100svh - var(--header-h) - 40px);
    padding-top:clamp(40px,5vh,72px);padding-bottom:clamp(40px,5vh,72px)}
  .hero-grid .pouch-stage{transform:none}
  .prod-stage{width:min(100%,400px)}
}

/* ---- MOBILE HERO ------------------------------------------------------- */
@media(max-width:1020px){
  /* the three stat cells were sized by their labels, so the dividers landed at
     uneven positions and the panel read lopsided */
  .hero-stats{display:flex}
  .hero-stats div{flex:1 1 0;min-width:0;padding:0 6px}
  /* and the whole column was too tight between elements */
  .hero-grid .hero-stars{margin:0 0 22px}
  .pouch-stage{margin-bottom:26px}
  .hero-copy h1{margin-bottom:16px}
  .hero-copy .sub{margin-top:2px}
  .hero-cta{margin-top:26px}
  .hero-stats{margin-top:24px}
  .hero-copy .claim-line{margin-top:20px}
  .hero-checks{margin-top:22px}
}

/* ---- PAULA PLATE: statement large, attribution on one line beneath ---- */
.pp-quote{font-size:clamp(21px,2.3vw,30px);line-height:1.34}
.pp-cred{display:flex;align-items:center;flex-wrap:wrap;gap:2px 12px;margin-top:18px}
.pp-cred .pp-name{font-family:var(--display);font-weight:600;font-size:17px;
  color:#F6F2E6;margin:0;letter-spacing:-.01em}
.pp-cred i{display:inline-block;width:1px;height:13px;background:rgba(255,255,255,.3);flex:none}
.pp-cred .pp-attr{font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:#C9A85C;margin:0}
@media(max-width:900px){
  .paula-plate{padding:24px 22px 26px}
  .pp-quote{font-size:22px}
  .pp-cred{justify-content:center;margin-top:16px}
}

/* ---- MOBILE SHOWCASE: the pinned media sat hard against the header ---- */
@media(max-width:900px){
  .show-sticky{padding-top:calc(var(--header-h) + 34px);padding-bottom:18px}
}

/* ---- PDP purchase card: the "most popular" banner overhung the card by 6px
   at ≤400px, because the tag's negative margin no longer matched the padding ---- */
.plan{--plan-pad-x:20px;--plan-pad-y:18px;padding:var(--plan-pad-y) var(--plan-pad-x)}
.plan .tag{margin:calc(-1 * var(--plan-pad-y)) calc(-1 * var(--plan-pad-x)) 2px}
@media(max-width:400px){.plan{--plan-pad-x:14px;--plan-pad-y:16px}}

/* ---- MOBILE PDP GALLERY: edge to edge, and shorter so the buy box starts
   higher up the page ---- */
@media(max-width:900px){
  .gallery-main{margin:0 calc(-1 * var(--pad));border-radius:0;aspect-ratio:1/1;max-height:none}
  /* The panel is square here and every gallery photograph is 1240x1240, so a
     square slide crops nothing at all. .gslide still carried aspect-ratio:4/5
     from its base rule, which made it 390x488 inside a 390x390 panel — the
     panel clips its overflow, so the bottom 98px went, taking the flavour band
     off the pack with it. inset:0 does not stretch a box that has its own
     aspect ratio; it needs a height. */
  .gslide{aspect-ratio:auto;height:100%}
  .gslide .prod-ph,.gslide .prod-ph-frame{border-radius:0}
  .gthumbs{margin-top:14px}
  .g-prev{left:10px}.g-next{right:10px}
}

/* ---- PDP OFFER STRIP: left aligned, one tile per unit ---- */

/* ---- "We accept": the payment rail, footer sitewide + under the PDP CTA ----
   These are typographic stand-ins, not the schemes' official artwork — at the
   Shopify port, swap `.pay-marks` for the platform's own payment-icon block. */
.pay-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(246,242,230,.08);padding:22px 0 4px;margin-top:6px}
.pay-lab{font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#8F8A78}
.pay-marks{display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.pay-mark{display:flex;align-items:center;justify-content:center;height:26px;min-width:44px;
  padding:0 8px;border-radius:4px;background:rgba(246,242,230,.07);
  box-shadow:inset 0 0 0 1px rgba(246,242,230,.14)}
.pay-mark span{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.06em;
  color:#CFC9B8;white-space:nowrap}
.pm-visa span{letter-spacing:.14em}
.pm-mc{gap:0}
.pm-mc i{width:13px;height:13px;border-radius:50%;display:block}
.pm-mc i:first-child{background:rgba(214,90,70,.85)}
.pm-mc i:last-child{background:rgba(230,168,60,.85);margin-left:-5px;mix-blend-mode:screen}
/* light variant for the buy box */
.pay-buybox{justify-content:flex-start;border-top:1px solid var(--line-soft);
  padding:18px 0 0;margin-top:14px}
.pay-buybox .pay-lab{color:var(--muted)}
.pay-buybox .pay-mark{background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.pay-buybox .pay-mark span{color:var(--muted)}
@media(max-width:600px){
  .pay-row{gap:10px;padding-top:20px}
  .pay-mark{height:24px;min-width:40px;padding:0 6px}
  .pay-mark span{font-size:9px}
}

/* the credential line wrapped on phones, stranding the divider at the end of
   the first line — hold it on one line and let the type do the fitting */
@media(max-width:900px){
  .pp-cred{flex-wrap:nowrap;gap:0 10px}
  .pp-cred .pp-name{font-size:15.5px;white-space:nowrap}
  .pp-cred .pp-attr{font-size:10.5px;letter-spacing:.07em;white-space:nowrap}
}
@media(max-width:359px){.pp-cred .pp-attr{font-size:8.5px;letter-spacing:.04em}}

/* with the gallery full-bleed, the PDP's top padding left a cream seam between
   the header and the image — the reference pattern butts them together */
@media(max-width:900px){.pdp{padding-top:0}}

/* ---- V9.9a — three regressions the harness caught ----

   1. The star line ended up touching the headline. `.hero-stars` sits in a grid
      row that the (taller) product column stretches, and with the default
      `align-self:stretch` the star glyphs drift down as that row grows. Pin it
      to the top of its row so the gap stops depending on the product's height. */
@media(min-width:1021px){
  .hero-grid .hero-stars{align-self:start;margin-bottom:22px}
}

/* 2. `.pp-cred{flex-wrap:nowrap}` with two nowrap spans gave the Paula plate a
      322px min-content, which blew the whole grid out past a 320px screen. */
.paula-grid > *{min-width:0}
@media(max-width:380px){
  .pp-cred{flex-wrap:wrap;justify-content:center;gap:4px}
  .pp-cred i{display:none}
  .pp-cred .pp-name,.pp-cred .pp-attr{flex:1 1 100%;text-align:center;white-space:normal}
}

/* 3. same blowout guard for the PDP columns, now the gallery is full bleed */
.pdp-grid > *{min-width:0}
.gallery,.gallery-main{min-width:0}

/* ============================================================
   V10.0 — official payment marks, clearer clock, shorter PDP gallery
   ============================================================ */

/* real brand marks now (Simple Icons paths, inlined so the page stays
   self-contained). Monochrome is the standard footer treatment. */
.pay-mark{min-width:0;width:46px;height:28px;padding:0}
.pay-mark svg{width:22px;height:22px;fill:#CFC9B8;opacity:.82;transition:opacity .2s var(--ease)}
.pay-mark:hover svg{opacity:1}
.pay-buybox .pay-mark svg{fill:var(--muted);opacity:.75}
.pay-buybox .pay-mark:hover svg{opacity:1}
@media(max-width:600px){.pay-mark{width:42px;height:26px}.pay-mark svg{width:20px;height:20px}}

/* the PDP gallery panel was 763px tall, pushing the thumbnail strip below the
   fold — size it so panel + thumbs fit the first screen */
@media(min-width:901px){
  .gallery-main{aspect-ratio:auto;height:min(calc(100svh - 320px),660px);
    max-height:none}
  .gallery{top:calc(var(--header-h) + 18px)}
}

/* ============================================================
   V10.1 — the journal, made worth reading
   ============================================================ */

/* reading progress: a hairline that fills as the article body passes */
.art-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:90;pointer-events:none;
  background:rgba(17,29,51,.06)}
.art-progress i{display:block;height:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,#E0C377,#C69F47 55%,#D4B462)}
@media(prefers-reduced-motion:reduce){.art-progress{display:none}}

/* figures break the column; the wide one bleeds past the measure */
.art-fig{margin:38px 0 34px}
.art-fig .ph{aspect-ratio:16/9;border-radius:var(--r)}
.art-fig figcaption{font-size:12.5px;line-height:1.6;color:var(--muted);margin-top:12px;
  padding-left:14px;border-left:2px solid rgba(184,146,58,.5);max-width:52ch}
.art-fig-wide{margin:0 0 40px}
@media(min-width:901px){
  .art-fig-wide{width:calc(100% + 120px);margin-left:-60px}
  .art-fig-wide figcaption{padding-left:74px;border-left:none;position:relative}
  .art-fig-wide figcaption::before{content:"";position:absolute;left:60px;top:3px;bottom:3px;
    width:2px;background:rgba(184,146,58,.5)}
}
.art-fig .ph .ph-cap{display:none}

/* pull quote */
.art-pull{margin:44px 0;padding:0 0 0 26px;border-left:2px solid var(--gold);max-width:60ch}
.art-pull p{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(22px,2.6vw,30px);line-height:1.4;color:var(--navy);margin:0}
.art-pull cite{display:block;font-style:normal;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);margin-top:16px}

/* stat strip */
.art-stats{display:flex;flex-wrap:wrap;gap:0;margin:40px 0;padding:26px 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.art-stats div{flex:1 1 0;min-width:120px;padding:0 20px;text-align:center}
.art-stats div+div{border-left:1px solid var(--line-soft)}
.art-stats b{display:block;font-family:var(--display);font-weight:600;
  font-size:clamp(26px,3vw,38px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,#C69F47 0%,#8F6F24 55%,#B8923A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.art-stats b i{font-style:normal;font-size:.55em}
.art-stats span{display:block;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:10px;line-height:1.5}
@media(max-width:600px){.art-stats div{flex:1 1 45%;padding:14px 10px}
  .art-stats div+div{border-left:none}
  .art-stats div:nth-child(even){border-left:1px solid var(--line-soft)}}

/* nutrient cards replace a long bullet list */
.art-nuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:28px 0 34px}
.art-nut{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r-ui);
  padding:20px 20px 22px;border-top:2px solid var(--gold)}
.art-nut b{display:block;font-family:var(--display);font-weight:600;font-size:15.5px;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:7px}
.art-nut p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;max-width:none}
@media(max-width:640px){.art-nuts{grid-template-columns:1fr}}

/* podcast video slot */
.art-video{position:relative;margin:36px 0 34px}
.art-video .ph{aspect-ratio:16/9;border-radius:var(--r)}
.art-video .ph .ph-cap{display:none}
.art-play{position:absolute;top:calc(50% - 34px);left:50%;width:68px;height:68px;margin:-34px 0 0 -34px;
  border-radius:50%;border:1.5px solid rgba(246,242,230,.85);background:rgba(8,27,52,.4);
  pointer-events:none;transition:transform .3s var(--ease)}
.art-play::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-38%,-50%);
  border-left:18px solid #F6F2E6;border-top:11px solid transparent;border-bottom:11px solid transparent}
.art-video:hover .art-play{transform:scale(1.06)}
.art-video figcaption{font-size:12.5px;color:var(--muted);margin-top:12px;
  padding-left:14px;border-left:2px solid rgba(184,146,58,.5)}

/* in-article product card */
.art-prod{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(20px,3vw,34px);
  align-items:center;margin:44px 0;padding:clamp(22px,3vw,32px);border-radius:var(--r);
  background:linear-gradient(150deg,#16375F 0%,#0B2545 55%,#071930 100%);color:#EDE8DA}
.art-prod .eyebrow{color:#C9A85C;margin-bottom:10px}
.art-prod h3{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-.01em;color:#F6F2E6;margin-bottom:8px}
.art-prod p{font-size:14.5px;line-height:1.6;color:#B9C2D2;margin:0 0 4px;max-width:44ch}
.art-prod-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:14px 0 20px !important}
.art-prod-price b{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;color:#E8CF8A}
.art-prod-price s{font-size:16px;color:#8E99AC}
.art-prod-price span{font-size:12px;color:#9BA5B8;flex-basis:100%}
.art-prod-media .prod-stage{width:100%;aspect-ratio:10/13}
.art-prod-media .prod-ph-lab{font-size:8.5px}
.art-prod-media .prod-ph-lab em{display:none}
@media(max-width:640px){.art-prod{grid-template-columns:1fr;text-align:center}
  .art-prod-media{max-width:150px;margin:0 auto}
  .art-prod p{margin-left:auto;margin-right:auto}
  .art-prod-price{justify-content:center}
  .art-prod .btn{display:flex;width:max-content;margin:0 auto}}

/* author byline */
.art-author{display:flex;align-items:center;gap:16px;margin:48px 0 0;padding-top:28px;
  border-top:1px solid var(--line-soft)}
.art-author-face{width:52px;height:52px;min-height:0;border-radius:50%;flex:none}
.art-author-face .ph-frame{inset:4px;border-radius:50%}
.art-author-face .ph-icon{width:46%}
.art-author-face .ph-cap{display:none}
.art-author-name{display:block;font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--ink)}
.art-author-role{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:5px}

/* the slide kept its own 4/5 ratio, so the product slot overflowed the shortened
   panel by 183px */
@media(min-width:901px){.gslide,.gslide .pouch-wrap{height:100%;aspect-ratio:auto}}

/* the wordmark link was 38px tall (31px at 320) — the last sub-44px tap target
   left on the site, and it is on every page */
.logo{min-height:44px}

/* ============================================================
   V11 — cart drawer, product shots, name underline, UGC films
   ============================================================ */

/* ---- 1. A caption burnt into a real photograph ----
   `.ph-cap` is the display line for an EMPTY slot: over a dashed placeholder it
   tells you what belongs there, over a real photograph it sits across a face.
   One rule, and it flips automatically the moment an image lands. */
.ph:has(.ph-img) .ph-cap{display:none}

/* ---- 2. Photography in the placeholder slots ----
   Inert until an .ph-img / .prod-img is actually mounted, which only happens
   when window.IMMUFIX_COMP is present (the comp build) or a real asset lands. */
.ph .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .65s var(--ease)}
.ph:has(.ph-img) .ph-inner{position:relative;z-index:2}
/* the hairline gold rule reads as a stray box drawn on top of the picture.
   It exists to make an EMPTY slot look like a slot, so it goes the moment
   there is a real photograph under it. */
.ph:has(.ph-img) .ph-frame{display:none}
.ph:has(.ph-img)::after{background:linear-gradient(180deg,rgba(5,14,27,.24),rgba(5,14,27,.02) 42%,rgba(5,14,27,.38))}
.ph:has(.ph-img) .ph-cap{text-shadow:0 2px 14px rgba(5,14,27,.75)}
.ph:hover .ph-img{transform:scale(1.06)}

/* ---- 3. Product shot + cursor-tracked sheen ----
   The specular highlight is a radial gradient positioned from --sx/--sy, which
   main.js writes on pointermove. Pointer-driven only: no idle animation, so it
   costs nothing while the page sits still. */
/* A real pack shot is a cut-out PNG: it brings its own edge, so it never gets a
   plate behind it. No background, no frame, no rounded card — just the product
   filling the space it was given.

   It does get a shadow, but a drop-shadow FILTER, not a box-shadow: the filter
   follows the pouch's actual silhouette, where a box-shadow would draw a
   rectangle around a transparent PNG. Two passes — a tight contact shadow and a
   wide soft one — so it reads as sitting in the space rather than pasted on. */
.prod-ph-shot{position:relative;overflow:visible;background:none;border-radius:0;
  box-shadow:none;gap:0;
  /* The pack shot has ~22% transparent margin baked into its frame, so the
     product renders much smaller than the box it sits in. Scaling past the box
     eats that margin instead of shrinking the product. The image and the gleam
     layer MUST share these, or the mask stops lining up with the pixels. */
  /* 128%: the pouch fills 77.8% of its own frame, so at 130% the PDP panel
     clipped ~3px off the top and bottom of it. This is the largest scale that
     still lands the product edge-to-edge without cutting it. */
  --prod-inset:-14%; --prod-size:128%;
  --prod-shadow:drop-shadow(0 14px 18px rgba(3,10,22,.42)) drop-shadow(0 40px 60px rgba(3,10,22,.34))}
.on-dark .prod-ph-shot{box-shadow:none}
/* a soft pool of light under the product, so it is lifted off a flat navy
   field instead of floating on it */
.prod-ph-shot::before{content:"";position:absolute;inset:-18% -12% -22%;
  pointer-events:none;z-index:0;
  background:radial-gradient(52% 44% at 50% 52%, rgba(120,160,220,.16), rgba(120,160,220,.05) 45%, rgba(120,160,220,0) 72%)}
.prod-ph-shot .prod-img{position:relative;z-index:1}
/* on a light band the shadow has to be gentler or it reads as a dark smudge */
.band-bone .prod-ph-shot,.band-paper .prod-ph-shot,.band-sand .prod-ph-shot{
  --prod-shadow:drop-shadow(0 10px 14px rgba(17,29,51,.16)) drop-shadow(0 30px 44px rgba(17,29,51,.12))}
.band-bone .prod-ph-shot::before,.band-paper .prod-ph-shot::before,.band-sand .prod-ph-shot::before{
  background:radial-gradient(52% 44% at 50% 52%, rgba(17,29,51,.05), rgba(17,29,51,0) 70%)}
.prod-ph-shot .prod-ph-lab,.prod-ph-shot .prod-ph-frame{display:none}
/* max-width:100% from the global img reset was silently capping the scale at
   the box width, so --prod-size did nothing on the wider slots */
.prod-ph-shot .prod-img{position:absolute;inset:var(--prod-inset);
  width:var(--prod-size);height:var(--prod-size);max-width:none;object-fit:contain;
  -webkit-user-drag:none;user-select:none;
  transition:transform .6s var(--ease),filter .35s cubic-bezier(.4,0,.2,1)}
/* THE GLEAM — gold light that lands on the product, not over it.

   The pack shot's own alpha channel is the mask (--prod-src, written inline by
   prodPlate), so the highlight is clipped to the pouch silhouette exactly. That
   is the difference between light falling on a product and a translucent blob
   floating in front of one. It shares --prod-inset/--prod-size with the image
   so the mask registers pixel-for-pixel. */
.prod-gleam{position:absolute;inset:var(--prod-inset);
  width:var(--prod-size);height:var(--prod-size);
  pointer-events:none;z-index:2;opacity:var(--slit,0);
  -webkit-mask-image:var(--prod-src);mask-image:var(--prod-src);
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  background:radial-gradient(34% 34% at var(--sx,50%) var(--sy,50%),
    rgba(255,236,178,.22) 0%, rgba(226,186,104,.10) 38%, rgba(198,159,71,.03) 62%, rgba(198,159,71,0) 78%);
  mix-blend-mode:screen}

/* and a much fainter warm bloom on the air around it. The box is far larger
   than the product and the gradient is fully transparent well inside its edges,
   so the light has no rectangle to clip against. `transparent` is avoided as an
   end stop: it interpolates through transparent BLACK and leaves a grey haze
   that a screen blend then shows as a visible box. */
.prod-sheen{position:absolute;inset:-55%;pointer-events:none;
  opacity:var(--slit,0);
  background:radial-gradient(24% 24% at
      calc(50% + (var(--sx,50%) - 50%) * 0.45)
      calc(50% + (var(--sy,50%) - 50%) * 0.45),
    rgba(232,201,124,.07) 0%, rgba(214,176,96,.025) 44%, rgba(214,176,96,0) 72%);
  mix-blend-mode:screen}
/* the product itself catches the light as the cursor comes near, so the glow
   reads as lighting the pouch rather than painting the backdrop behind it */
.prod-ph-shot .prod-img{filter:var(--prod-shadow) brightness(calc(1 + var(--slit,0) * .03))}
@media(prefers-reduced-motion:reduce){
  .prod-sheen{display:none}
  .prod-ph-shot .prod-img{transition:none}
}

/* ---- 4. PDP thumbs are a thumbnail OF THEIR SLIDE ---- */
.gthumbs .th-shot{position:relative;width:100%;flex:1 1 auto;min-height:0;
  border-radius:5px;overflow:hidden;display:block}
.gthumbs .th-shot img{width:100%;height:100%;object-fit:cover;display:block}
.gthumbs .th-shot-prod{background:none}
.gthumbs .th-shot-prod img{object-fit:contain}
/* no photography yet: the pack thumb is the same empty plate its slide shows */
.gthumbs .th-shot-pack{flex:none;width:34%;aspect-ratio:10/13;border:1px dashed rgba(201,168,92,.5);
  border-radius:3px;background:rgba(201,168,92,.06)}
.gthumbs button{gap:7px}

/* ---- 5. Name underline: a 1px gold rule draws in on scroll ----
   Option B. The two-font accent already carries the emphasis in these
   headings, so this adds the scroll moment without a second block of colour. */
.uline{position:relative;display:inline;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-repeat:no-repeat;background-position:0 calc(100% - .04em);
  background-size:0% 1.5px;
  transition:background-size .62s cubic-bezier(.22,1,.36,1)}
.on-dark .uline,.hero .uline{background-image:linear-gradient(#C9A85C,#C9A85C)}
.uline.drawn{background-size:100% 1.5px}
@media(prefers-reduced-motion:reduce){.uline{transition:none;background-size:100% 1.5px}}

/* ---- 6. UGC films ---- */
.ugc-card .ugc-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;background:var(--navy-deep)}
.ugc-card.has-video .ph-icon,.ugc-card.has-video .ph-frame{display:none}
.ugc-card.has-video .ugc-play{transition:opacity .25s cubic-bezier(.4,0,.2,1)}
/* speaker state replaces the play triangle, so the state reads at a glance */
.ugc-card.has-video .ugc-play::after{content:"";position:absolute;inset:0;
  background:no-repeat center/44% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M17 9a4 4 0 0 1 0 6'/%3E%3Cpath d='m22 8-4 8M18 8l4 8' stroke='%23fff'/%3E%3C/svg%3E")}
.ugc-card.unmuted .ugc-play::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5 6 9H3v6h3l5 4z'/%3E%3Cpath d='M15.5 8.5a5 5 0 0 1 0 7'/%3E%3Cpath d='M18.5 5.5a9 9 0 0 1 0 13'/%3E%3C/svg%3E")}
.ugc-card.has-video{cursor:pointer}

/* ============================================================
   CART DRAWER
   ============================================================ */
.cart-btn{position:relative}
.cart-count{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--gold);color:var(--navy-deep);
  font-family:var(--sans);font-weight:600;font-size:10px;line-height:16px;text-align:center;
  letter-spacing:0;pointer-events:none}

.cart-root{position:fixed;inset:0;z-index:210}
.cart-root[hidden]{display:none}
.cart-scrim{position:absolute;inset:0;background:rgba(5,14,27,.5);opacity:0;
  transition:opacity .38s cubic-bezier(.4,0,.2,1)}
.cart-root.open .cart-scrim{opacity:1}
.cart-panel{position:absolute;top:0;right:0;bottom:0;width:min(430px,100vw);
  display:flex;flex-direction:column;background:var(--paper);
  transform:translate3d(100%,0,0);transition:transform .42s cubic-bezier(.22,1,.36,1);
  box-shadow:-1px 0 0 var(--line-soft)}
.cart-root.open .cart-panel{transform:none}
@media(prefers-reduced-motion:reduce){
  .cart-panel,.cart-scrim{transition:none}
}

.cart-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:20px 22px 16px;border-bottom:1px solid var(--line-soft);flex:none}
.cart-head h2{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em;margin:0}
.cart-x{width:40px;height:40px;border-radius:50%;border:0;background:transparent;color:var(--muted);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none;
  transition:color .2s cubic-bezier(.4,0,.2,1),background .2s cubic-bezier(.4,0,.2,1)}
.cart-x svg{width:20px;height:20px}
.cart-x:hover{color:var(--ink);background:rgba(17,29,51,.05)}

/* free-shipping rail */
.cart-ship{padding:16px 22px 20px;background:var(--bone);flex:none;
  border-bottom:1px solid var(--line-soft)}
.cs-copy{font-size:13.5px;color:var(--muted);margin:0 0 14px;text-align:center}
.cs-copy b{color:var(--ink);font-weight:600}
.cs-rail{position:relative;height:2px;background:rgba(17,29,51,.14);margin:0 14px}
.cs-fill{position:absolute;left:0;top:0;height:100%;background:var(--gold);
  transition:width .5s cubic-bezier(.22,1,.36,1)}
.cs-node{position:absolute;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:50%;
  background:var(--paper);border:1px solid var(--line);color:#9AA1AD;
  display:flex;align-items:center;justify-content:center;
  transition:background .3s cubic-bezier(.4,0,.2,1),color .3s cubic-bezier(.4,0,.2,1),border-color .3s}
.cs-node svg{width:14px;height:14px}
.cs-node-a{left:-13px}
.cs-node-b{right:-13px}
.cs-node.on{background:var(--gold);border-color:var(--gold);color:var(--navy-deep)}

.cart-scroll{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* line items */
.cl{display:grid;grid-template-columns:72px 1fr auto;gap:14px;align-items:start;
  padding:18px 22px;border-bottom:1px solid var(--line-soft)}
.cl-thumb{position:relative;display:block;width:72px;aspect-ratio:10/13;border-radius:6px;
  overflow:hidden}
.cl-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.cl-thumb-ph{border:1px dashed rgba(201,168,92,.45)}
.cl-meta{min-width:0}
.cl-meta h3{font-family:var(--display);font-weight:600;font-size:15.5px;margin:0 0 3px;letter-spacing:-.01em}
.cl-plan{font-size:12px;color:var(--muted);margin:0 0 12px}
.cl-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-ui)}
.cl-qty button{width:30px;height:30px;border:0;background:transparent;color:var(--ink);
  font-size:15px;line-height:1;cursor:pointer;transition:color .2s cubic-bezier(.4,0,.2,1)}
.cl-qty button:hover{color:var(--gold-deep)}
.cl-qty output{min-width:26px;text-align:center;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.cl-right{text-align:right}
.cl-price{font-family:var(--display);font-weight:600;font-size:15.5px;margin:0 0 10px;font-variant-numeric:tabular-nums}
.cl-rm{border:0;background:transparent;padding:0;font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#9AA1AD;cursor:pointer;
  transition:color .2s cubic-bezier(.4,0,.2,1)}
.cl-rm:hover{color:var(--red)}

/* empty state */
.ce-box{padding:52px 26px 44px;text-align:center}
.ce-box h3{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.01em;margin:0 0 8px}
.ce-box p{font-size:14.5px;color:var(--muted);margin:0}
.ce-recs{padding:0 22px 26px;border-top:1px solid var(--line-soft);padding-top:22px}
.ce-recs h4{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-deep);margin:0 0 14px}
.ce-row{display:flex;flex-direction:column;gap:10px}
.ce-card{display:grid;grid-template-columns:56px 1fr auto;gap:13px;align-items:center;
  border:1px solid var(--line-soft);border-radius:var(--r-ui);padding:10px 12px;
  transition:border-color .2s cubic-bezier(.4,0,.2,1)}
.ce-card:hover{border-color:var(--line)}
.ce-card .cl-thumb{width:56px}
.ce-meta h5{font-family:var(--display);font-weight:600;font-size:14.5px;margin:0 0 3px;letter-spacing:-.01em}
.ce-price{font-size:13.5px;font-weight:600;color:var(--gold-deep);margin:0}
.ce-price s{color:#9AA1AD;font-weight:500;margin-left:7px}
.ce-per{font-weight:500;color:var(--muted);font-size:12.5px}
.ce-sub{margin:3px 0 0;font-size:12px;line-height:1.35;color:var(--muted)}
.ce-once{margin:14px 0 0;font-size:13px;color:var(--muted);text-align:center}
.ce-once a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pop-code{margin:14px 0 10px}
.pop-code code{display:inline-block;font-family:var(--sans);font-weight:600;font-size:20px;
  letter-spacing:.12em;padding:12px 22px;border-radius:var(--r-ui,4px);
  background:var(--bone);border:1px dashed var(--gold-deep);color:var(--ink)}
.ce-add{min-height:0;height:38px;padding:0 18px;font-size:13.5px}

/* footer */
.cart-foot{flex:none;padding:18px 22px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft);background:var(--paper)}
.cart-foot[hidden]{display:none}
.cf-sum{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.cf-sum span{font-size:14px;color:var(--muted)}
.cf-sum b{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.cf-note{font-size:11.5px;color:#9AA1AD;margin:0 0 14px}
.cart-foot .btn{display:flex;width:100%}
.cf-subs{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-soft);
  display:flex;flex-direction:column;gap:9px}
.cf-sub{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:var(--ink);text-decoration:none;
  transition:color .2s cubic-bezier(.4,0,.2,1)}
.cf-sub svg{width:15px;height:15px;flex:none;color:var(--gold-deep);
  transition:transform .25s cubic-bezier(.4,0,.2,1)}
.cf-sub:hover{color:var(--gold-deep)}
.cf-sub:hover svg{transform:translateX(4px)}

@media(max-width:560px){
  .cart-panel{width:100vw}
  .cl{grid-template-columns:60px 1fr auto;gap:12px;padding:16px 18px}
  .cl-thumb{width:60px}
  .cart-head,.cart-ship,.ce-recs,.cart-foot{padding-left:18px;padding-right:18px}
}

/* ============================================================
   Scratch card — the claim step had one small left-aligned line
   jammed under the card. Give the offer a display line of its own
   and let the form breathe above the fold on a 568px screen.
   ============================================================ */
.scr-claim{text-align:center}
.scr-won{font-size:15px;color:#C3CBD9;margin:16px auto 18px;max-width:34ch;line-height:1.5}
.scr-claim .modal-form{margin-top:0}
.scr-claim .modal-micro{text-align:center}
/* once it is revealed the card is a receipt, not a game — shrink it so the
   CTA never needs scrolling */
.scr-card.won{max-width:230px;transition:max-width .5s var(--ease)}
@media(max-height:700px){
  .scr-card.won{max-width:190px;margin-bottom:10px}
  .scr-won b{font-size:24px}
}

/* ---- Offer band: a pack column beside the copy.
   The card is copy and pack from tablet up. On a phone it is a single stack
   and the pack would push the CTA below the fold, so it comes off there. ---- */
.offer-media{display:none}
@media(min-width:641px){
  .offer-card{grid-template-columns:minmax(0,.86fr) minmax(0,1fr)}
  .offer-media{display:block;align-self:stretch;min-width:0}
  .offer-media .pouch-slot{height:100%;min-height:clamp(250px,26vw,330px)}
  .offer-media .prod-ph{height:100%}
  /* --prod-inset/--prod-size handle this for every shot now */
}
@media(min-width:901px) and (max-width:1120px){
  .offer-card{grid-template-columns:minmax(0,1fr) minmax(0,.72fr);gap:clamp(20px,2.4vw,34px)}
}

/* ---- comp build only: the "not for release" flag (see sync-comp.sh) ---- */
.comp-flag{position:fixed;left:0;right:0;bottom:0;z-index:999;background:#7A1F14;color:#FFE9E4;
  font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;text-align:center;
  padding:9px 12px;pointer-events:none}

/* ============================================================
   PDP offer strip — one row, both ends of it used.

   Ten rounds of overrides had landed on `.pdpt-tag{flex:0 0 100%}` plus
   `align-items:flex-start`, so the copy took a whole row, the clock took
   another underneath it, and the entire right half of the strip was empty.
   The elements were fine; the space was not. Copy left, clock hard right,
   both vertically centred, and the box is shorter for it.
   ============================================================ */
/* nowrap on the row: the copy column shrinks and wraps its own text instead
   of the whole clock being pushed onto a second line, which is what left the
   right half empty. The buybox column is only ~436px, so the two halves have
   to share it rather than take turns. */
/* the tiles carry their own unit labels, so the colons between them are just
   noise taking up width */

/* on a phone the column is too narrow to share, so the clock takes its own
   full-width row and the three tiles split it evenly */

/* ============================================================
   Per-slot product scale + plain image thumbs
   ============================================================ */

/* The hero carries the product on its own against a wide navy field, so it
   takes the largest scale on the site. */
.hero .prod-ph-shot{--prod-inset:-13%; --prod-size:126%}

/* The PDP gallery is the opposite case: the panel is a frame, and a product
   shot pressed edge to edge inside it reads as a crop rather than a product.
   Back to a normal product-page size with the panel's padding visible. */
.gslide .prod-ph-shot{--prod-inset:-2%; --prod-size:104%}

/* ---- gallery thumbs: the picture, and nothing else ----
   They were navy tiles with a caption underneath, so every thumb showed more
   chrome than photograph. The image fills the tile now; the accessible name
   still comes from the button's aria-label. */
.gthumbs button{position:relative;display:block;aspect-ratio:1/1;padding:0;gap:0;
  border-radius:8px;overflow:hidden;background:var(--bone);border:1px solid transparent;
  transition:border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1)}
.gthumbs button > span{display:none}
.gthumbs .th-shot{position:absolute;inset:0;width:100%;height:100%;border-radius:0}
.gthumbs .th-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* the pack shot is a cut-out, so it is fitted rather than cropped */
.gthumbs .th-shot-prod{background:none;padding:6%}
.gthumbs .th-shot-prod img{object-fit:contain}
/* no photography yet: the line-art plate still needs its navy ground */
.gthumbs button:has(.th-art),.gthumbs button:has(.th-shot-pack){
  background:radial-gradient(120% 100% at 50% -10%, #14335F 0%, #0B2545 60%, #071930 100%);
  display:flex;align-items:center;justify-content:center}
.gthumbs button:has(.th-art) > span,.gthumbs button:has(.th-shot-pack) > span{
  display:block;position:absolute;left:0;right:0;bottom:7px;
  font-family:var(--sans);font-weight:500;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#8FA0BC}
.gthumbs button.active,.gthumbs button:hover{border-color:var(--gold)}
.gthumbs button.active{box-shadow:0 0 0 1px var(--gold)}

/* ---- the real podcast episode (journal · Paula's Run Club) ----
   A live <video> replaces the placeholder plate, so it needs the plate's box
   and radius without the plate's play-button overlay. */
.art-video-live video{display:block;width:100%;aspect-ratio:16/9;border-radius:var(--r);
  background:var(--navy-deep);object-fit:cover}
.art-video-live .art-play{display:none}

/* ============================================================
   V11.3 — spin the wheel (welcome offer, variant B)
   Replaces the scratch card. The slice sizes are the odds; see main.js.
   ============================================================ */
.modal-wheel{grid-template-columns:1fr;max-width:452px;
  background:radial-gradient(120% 90% at 50% -10%, #14335F 0%, #0B2545 55%, #081B34 100%)}
.whl-body{padding:34px 34px 30px;text-align:center}
.whl-body .eyebrow{color:#C9A85C}
/* .modal-body h3 (0,1,1) outranks a bare .whl-title (0,1,0), so the heading
   was rendering ink-on-navy and reading as almost invisible */
.modal-wheel .whl-title{color:#F6F2E6;margin-bottom:8px}
.modal-wheel .whl-title em{color:#E8CF8A}
.whl-lead{font-size:14.5px;color:#B9C2D2;margin:0 auto;max-width:32ch}

.whl-wrap{position:relative;width:min(292px,74vw);margin:22px auto 20px}
.whl{display:block;width:100%;height:auto;
  filter:drop-shadow(0 18px 34px rgba(3,10,22,.5))}
.whl-rotor{transform-origin:0 0}
/* the pointer sits at 12 o'clock and never moves; the wheel turns under it */
.whl-pin{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:19px solid #E8CF8A;
  filter:drop-shadow(0 2px 3px rgba(3,10,22,.55))}

.whl-go{min-height:52px;width:100%;max-width:292px}
.whl-go:disabled{opacity:.65;cursor:default}
/* the odds are printed, which is what makes it a published promotion rather
   than a game whose chances the visitor cannot see */
.whl-odds{font-size:11px;line-height:1.5;color:#8E99AC;margin:14px auto 0;max-width:36ch}

.whl-claim{text-align:center}
.whl-won{font-size:15px;color:#C3CBD9;margin:18px auto 18px;max-width:34ch;line-height:1.5}
.whl-won b{display:block;font-family:var(--display);font-weight:600;font-size:30px;
  line-height:1.05;letter-spacing:-.02em;margin-bottom:8px;
  background:linear-gradient(135deg,#F2E0AC 0%,#D9BC6C 50%,#E8CF8A 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .whl-won b{background:none;color:#E8CF8A;-webkit-text-fill-color:#E8CF8A}
}
.modal-wheel.won .whl-wrap{width:min(190px,46vw);margin:16px auto 4px;
  transition:width .5s var(--ease)}
.whl-claim .modal-form{margin-top:0}
.whl-claim .modal-form input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#F6F2E6}
.whl-claim .modal-form input::placeholder{color:#8E99AC}
.whl-claim .modal-micro{text-align:center}

@media(max-height:700px){
  .whl-body{padding:26px 26px 24px}
  .whl-wrap{width:min(230px,60vw);margin:16px auto 14px}
  .whl-won b{font-size:25px}
}
@media(prefers-reduced-motion:reduce){
  .whl-rotor{transition:none !important}
  .modal-wheel.won .whl-wrap{transition:none}
}

/* ============================================================
   V11.5 — owner round: contrast, descenders, card scale
   ============================================================ */

/* ---- 1. descenders were losing their gradient ----
   background-clip:text paints only inside the element's own box, so on a
   line-height:1 numeral the tail of a `g` in "100mg" drops below the box and
   simply gets no fill. Extend the box downward and pull the same amount back
   off the margin: the glyph gets painted, nothing moves. */
.spot .amt,.show-num,.macro-strip b,.btile .bn,.hero-stats b,
.cred-row b,.tp-stats b,.offer-price b,.whl-won b{
  padding-bottom:.16em;margin-bottom:-.16em}

/* ---- 2. the PDP gallery panel was navy behind a navy pouch ----
   A deep navy pack on a deep navy panel has almost nothing to separate it, and
   the drop shadow only muddied it. Bone is what every generated shot on the
   page already sits on, so the gallery now matches the photography and the
   pack reads at full contrast. */
.gslide.slide-navy{background:var(--bone)}
.gslide.slide-navy .prod-ph-shot{
  --prod-shadow:drop-shadow(0 12px 16px rgba(17,29,51,.16)) drop-shadow(0 34px 50px rgba(17,29,51,.13))}
.gslide.slide-navy .prod-ph-shot::before{
  background:radial-gradient(52% 44% at 50% 54%, rgba(17,29,51,.055), rgba(17,29,51,0) 70%)}
.gthumbs .th-shot-prod{background:var(--bone)}

/* ---- 3. ingredient cards want more room ----
   Five cards inside the 1300px container capped them at ~206px. The wide
   container is what the UGC row already uses. */
@media(min-width:961px){
  .ing-grid{max-width:1380px;margin-left:auto;margin-right:auto;gap:18px}
  .ing-card h3{font-size:20px}
  .ing-card p{font-size:15.5px}
  .ing-card figcaption{padding:23px 22px 25px}
}

/* ============================================================
   V11.6 — owner round: hero on mobile, Paula plate, tick list
   ============================================================ */

/* ---- 1. the pack was overpowering the phone hero ----
   147% of a box that is already most of the screen width left no room for the
   headline above the fold. */
@media(max-width:1020px){
  .hero .prod-ph-shot{--prod-inset:-4%; --prod-size:108%}
}
@media(max-width:520px){
  .hero .prod-ph-shot{--prod-inset:0%; --prod-size:100%}
}

/* ---- 2. something behind the bag ----
   Navy pack on a navy band has nothing to separate it. A soft elliptical pool
   of light plus a wide halo lifts it off the field without adding a plate. */
.on-dark .prod-ph-shot::before,.hero .prod-ph-shot::before{
  inset:-22% -16% -26%;
  background:
    radial-gradient(46% 30% at 50% 88%, rgba(4,12,26,.55), rgba(4,12,26,0) 72%),
    radial-gradient(54% 46% at 50% 46%, rgba(126,166,226,.20), rgba(126,166,226,.06) 46%, rgba(126,166,226,0) 74%)}
.on-dark .prod-ph-shot,.hero .prod-ph-shot{
  --prod-shadow:drop-shadow(0 16px 20px rgba(2,8,18,.5)) drop-shadow(0 46px 68px rgba(2,8,18,.42))}

/* ---- 3. Paula plate on phones: the quote overlays the photograph ----
   Desktop already floats the glass panel over the image; mobile stacked it
   underneath, which lost the effect entirely and shrank the quote. */
@media(max-width:900px){
  .paula-media{position:relative}
  .paula-media .ph.ph-45{border-radius:var(--r);aspect-ratio:4/4.6}
  .paula-plate{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;
    padding:20px 20px 22px;border-radius:calc(var(--r) - 4px)}
  .pp-quote{font-size:23px;line-height:1.28}
  .pp-cred{margin-top:14px}
}
@media(max-width:380px){
  .paula-plate{left:10px;right:10px;bottom:10px;padding:17px 16px 18px}
  .pp-quote{font-size:20.5px}
}

/* ---- 4. the tick list ----
   Round bordered ticks with a real gold gradient and a drawn check, staggered
   in as the tile arrives instead of appearing all at once. */
.btile .bchecks span{position:relative;display:flex;align-items:center;gap:13px}
.btile .bchecks span::before{
  content:"";display:block;width:24px;height:24px;flex:none;border-radius:50%;margin:0;
  background:linear-gradient(140deg,#F2E0AC 0%,#D9BC6C 48%,#C19A44 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(120,95,30,.22);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23223' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"),
    linear-gradient(140deg,#F2E0AC 0%,#D9BC6C 48%,#C19A44 100%);
  background-size:13px 13px, auto;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat}
/* stagger in with the tile */
.btile .bchecks[data-stagger] span{opacity:0;transform:translateY(7px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.btile .bchecks[data-stagger] span:nth-child(1){transition-delay:.05s}
.btile .bchecks[data-stagger] span:nth-child(2){transition-delay:.13s}
.btile .bchecks[data-stagger] span:nth-child(3){transition-delay:.21s}
.btile .bchecks[data-stagger] span:nth-child(4){transition-delay:.29s}
.btile .bchecks[data-stagger] span:nth-child(5){transition-delay:.37s}
.btile .bchecks[data-stagger].lit span{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .btile .bchecks[data-stagger] span{opacity:1;transform:none;transition:none}
}

/* ---- the quote panel keeps the sitewide glass ----
   v160 replaced it with an opaque navy gradient over a DEsaturated backdrop
   (saturate(.65)) because backdrop-filter picked up the pink of Paula's vest.
   That fixed the tint by killing the effect: a panel that desaturates what is
   behind it is a smoked panel, not glass. Owner wants the glass, so the plate
   is back on the one sitewide recipe — .glass-dark, blur(20px) saturate(150%)
   over rgba(255,255,255,.07) — and it keeps .glass-dark's own
   @supports-not fallback to solid navy where backdrop-filter is unavailable.

   The tint is real and is accepted: over a warm patch the panel reads warm,
   which is what glass does. What is NOT negotiable is the text on it, so the
   quote and the credit keep a two-pass shadow to hold contrast over whatever
   the blur happens to land on.

   Measured worst-case contrast inside each text band (the vest makes one end
   of the panel far brighter than the other, so the average would lie):
     pure .glass-dark  quote 2.24:1  credit 1.04:1   <- the credit vanished
     this              quote 10.5:1  credit 4.89:1   (mobile; desktop 9.5/5.7)
   .glass-dark's own @supports-not rule still catches engines with no
   backdrop-filter and drops them to solid navy. */
.paula-plate{
  background:linear-gradient(160deg,rgba(11,29,52,.66),rgba(6,18,36,.74));
  -webkit-backdrop-filter:blur(24px) saturate(120%);
  backdrop-filter:blur(24px) saturate(120%);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 18px 44px rgba(3,10,22,.36);
  text-shadow:0 1px 2px rgba(3,10,22,.5), 0 2px 12px rgba(3,10,22,.4)}

/* ============================================================
   V11.7 — PDP gallery rebuilt as a flavour-aware photo deck
   ============================================================ */
.gslide.slide-shot{background:var(--bone);padding:0;overflow:hidden}
.g-shot{position:relative;width:100%;height:100%;aspect-ratio:auto;filter:none}
.g-img{width:100%;height:100%;object-fit:cover;display:block}

/* No hover zoom in the shop. A product page image is a specification, not a
   teaser: the visitor is inspecting it, and having it drift under the cursor
   makes it harder to look at. */
.gallery-main .g-img,.gallery-main .ph .ph-img,.gthumbs img{transition:none !important}
.gallery-main:hover .g-img,.gallery-main .ph:hover .ph-img,
.gthumbs button:hover img{transform:none !important}
.gallery-main .ph:hover .ph-inner{transform:none !important}

/* thumbs are the frame itself */
.gthumbs button{background:var(--bone)}
.gthumbs .th-shot{position:absolute;inset:0;width:100%;height:100%;border-radius:0;padding:0;background:none}
.gthumbs .th-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* ============================================================
   V11.7b — research-tab stat panels become photo panels

   They were plain white cards with three numbers on them, which read as a
   placeholder rather than a designed graphic. Now the panel is a photograph
   with the figures set over it in the house type.

   The numbers stay HTML on purpose. Baking a dose into a generated image
   means a model typing "70mg", and a typo there is a wrong supplement amount
   that nobody can correct without regenerating the picture. Photography for
   the look, real markup for the data.
   ============================================================ */
.tp-visual{position:relative;overflow:hidden;border-radius:var(--r);isolation:isolate}
.tp-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tp-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  /* weighted toward the bottom, where the stat row actually sits: the photo
     still reads across the top, and the labels get a dark ground rather than
     landing on a pale powder pile at 2:1 contrast */
  background:
    linear-gradient(180deg,rgba(6,20,40,.34) 0%,rgba(6,20,40,.46) 34%,rgba(4,14,30,.80) 68%,rgba(3,11,24,.90) 100%),
    radial-gradient(80% 60% at 50% 30%, rgba(4,14,30,.06), rgba(4,14,30,.28) 85%)}
/* every child except the photo and its scrim rides above them — scoping this
   to two classes left the NRV bar rows stranded behind the scrim */
.tp-visual > *:not(.tp-img):not(.tp-scrim){position:relative;z-index:2}
.tp-visual .tp-cap{color:var(--gold-deep)}
.tp-visual .tp-stats b{color:#FFFDF7;
  background:linear-gradient(135deg,#F6E7B8 0%,#E2C67C 52%,#F0DCA6 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .tp-visual .tp-stats b{background:none;-webkit-text-fill-color:#E8CF8A;color:#E8CF8A}
}
.tp-visual .tp-stats span{color:#D6DEEA;text-shadow:0 1px 3px rgba(3,10,22,.6)}
.tp-visual .tp-stats div+div{border-left-color:rgba(255,255,255,.16)}
.tp-visual{padding:26px 24px 22px}
@media(max-width:900px){.tp-visual{padding:22px 18px 18px}}

/* ---- hero pack: an alpha cut-out standing in its own light ----
   The pack used to be a photograph shot on its own navy and feathered into the
   band. The frame's navy is never the band's navy — the hero carries two
   gradients over it — so the rectangle showed however far in the feather
   started. This is a real cut-out, so the light behind it is CSS: a halo we
   can key to the band, and a cast shadow that follows the pack's own alpha
   rather than a box. Both fade to transparent, never to a navy of their own. */
.prod-ph-hero{position:relative;width:100%;height:100%;background:none;
  border-radius:0;box-shadow:none;overflow:visible}
/* `.on-dark .prod-ph` outranks a single class, and an outer box-shadow is
   clipped to OUTSIDE its own box — so it darkened everything around the slot
   and left the slot itself clean. That un-darkened rectangle is the box, not
   the picture. It has to die at matching specificity. */
.on-dark .prod-ph-hero{box-shadow:none}
/* The glow is two stacked layers inside one wrapper. The WRAPPER drifts and
   breathes; each LAYER only ever changes opacity, to carry its flavour in and
   out. Splitting them matters: if the breathing animated opacity on the same
   element the crossfade uses, the animation would win and the colour change
   would stutter halfway through.

   The ellipse is sized 166/132 rather than to the slot: the pack covers
   everything inside ~51% of it at the sides and ~71% over the crimp, so those
   are the only stops that reach the screen. Bright along the flanks, where the
   pack is read against it; softer above, so the light does not pool into a
   spotlight over the hero band. Every stop fades to transparent, never to a
   navy of its own, or the band's gradients would show the disc. */
.hero-glows{position:absolute;left:50%;top:47%;width:166%;height:132%;
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;display:block;
  animation:heroGlowBreathe 13s ease-in-out infinite}
.hero-glow{position:absolute;inset:0;display:block;opacity:0;filter:blur(12px);
  transition:opacity 1.5s cubic-bezier(.4,0,.2,1)}
.hero-glow.is-on{opacity:1}
/* These alphas are high on purpose. This navy is (11,37,69): a warm light laid
   over it at low alpha comes out grey-blue, not orange, because the base's own
   blue outweighs what the glow adds. The orange only reads AS orange once the
   composite gets red clear of blue, which needs roughly 0.6 alpha at the pack's
   flank — measured, not guessed. */
/* pulled back: at the old alphas this read as a hard amber halo around the
   pack rather than light behind it. Still warm, just no longer the loudest
   thing in the hero. */
.hero-glow-orange{background:radial-gradient(closest-side,
  rgba(255,242,226,.62), rgba(255,216,178,.52) 38%,
  rgba(252,188,132,.34) 55%, rgba(240,158,100,.16) 70%,
  rgba(232,140,84,.05) 84%, rgba(232,140,84,0) 100%)}
/* the cream runs deliberately yellow rather than white: this navy pushes 69
   of blue into everything laid over it, so a neutral white composites to a
   cold blue-grey. Taking the blue out of the light is what makes it read
   creamy instead of merely bright. */
/* down 20% on every stop, owner's call — the cream was carrying further into
   the band than the orange does. Scaled in the STOPS rather than by putting
   opacity on the layer: opacity here belongs to the flavour crossfade, and
   overloading it with intensity makes the next tweak ambiguous. */
.hero-glow-vanilla{background:radial-gradient(closest-side,
  rgba(255,252,240,.80), rgba(255,247,224,.752) 38%,
  rgba(250,238,200,.576) 55%, rgba(238,222,184,.288) 70%,
  rgba(232,214,176,.088) 84%, rgba(232,214,176,0) 100%)}
/* barely there on purpose: 6% of scale and a percent and a half of drift over
   13 seconds reads as light breathing, and anything more reads as a loop */
@keyframes heroGlowBreathe{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.88}
  35%    {transform:translate(-51.5%,-49%) scale(1.06);opacity:1}
  70%    {transform:translate(-49%,-51%) scale(.99);opacity:.93}
}
/* the packs crossfade on the same curve and duration as their glows, so the
   flavour and its light arrive together rather than one chasing the other */
.prod-ph-hero .prod-img{position:absolute;inset:0;z-index:1;
  width:100%;height:100%;max-width:none;object-fit:contain;
  -webkit-mask-image:none;mask-image:none;
  filter:drop-shadow(0 28px 34px rgba(3,10,22,.55))
         drop-shadow(0 6px 12px rgba(3,10,22,.38))}
.prod-ph-hero .hero-pack{opacity:0;transition:opacity 1.5s cubic-bezier(.4,0,.2,1)}
.prod-ph-hero .hero-pack.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){
  .hero-glows{animation:none}
  .prod-ph-hero .hero-pack{transition:none}
}
.prod-ph-hero .prod-ph-frame,.prod-ph-hero .prod-ph-lab,
.prod-ph-hero .prod-sheen,.prod-ph-hero .prod-gleam{display:none}

/* ---- UGC cards now carry real film ---- */
.ugc-card.has-video .ph{background:var(--navy-deep)}
.ugc-card.has-video .ph::after{display:none}
.ugc-card .ugc-video{border-radius:inherit}

/* an undeclared amount should not read like a big bold figure */
.nacc .nacc-nd{font-family:var(--sans);font-weight:500;font-size:12px;
  letter-spacing:.04em;color:#9AA1AD;text-transform:none}

/* ============================================================
   V11.9 — audit remediation
   ============================================================ */

/* 1 · the play badge was drawing BOTH glyphs. .ugc-play::after builds its
   triangle out of borders; the has-video rule added a speaker background image
   but never cleared those borders or the -40% centring nudge, so a triangle and
   a speaker sat on top of each other, 21px left and 27px high of the circle. */
.ugc-card.has-video .ugc-play::after{
  top:0;left:0;transform:none;border:0}

/* 2 · the welcome popup opened underneath the cart drawer (200 vs 210), so on a
   phone it was completely invisible while still holding the focus trap and
   eating an Escape press. It sits above now, and popup() refuses to open at all
   while the drawer is up (see main.js). */
.modal-overlay{z-index:240}

/* 3 · `.agc .facc-q{padding:19px 2px}` out-specified the global 44px right
   gutter, so the absolutely-positioned "+" was drawn straight through the label
   at 320 and 360. Same bug that was already fixed for .nacc. */
.agc .facc-q{padding-right:44px}

/* 5 · the announcement bar crossfaded two absolutely-positioned messages in the
   same slot, so two different strings were legible at once for ~0.4s every 4s.
   The outgoing one now leaves before the incoming one arrives. */
.announce .a-msg{transition:opacity .28s var(--ease),transform .28s var(--ease)}
.announce .a-msg:not(.on){opacity:0}
.announce .a-msg.off{opacity:0;transition-duration:.16s}

/* 9 · reveal elements were tabbable while still at opacity 0 */
.reveal:not(.in) a,.reveal:not(.in) button{}
.usp-bar.reveal:not(.in) .usp{pointer-events:none}

/* 10 · the podcast video had no focus ring at all */
.art-video-live video:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* a UGC row that fits centres itself instead of hanging left with dead space */
.ugc-grid.ugc-static{justify-content:center}
.ugc-controls[hidden]{display:none}

/* ---- the offer card below desktop: one column, no pack ----
   A 112px pack was squeezed in beside the copy to give the card something to
   look at. It cost more than it gave: it took a third of the width off the
   only column that had work to do, so "Start subscription" wrapped onto two
   lines inside its own button and the price sat in a gutter. The pack is
   already sold three times above this point on the page, so here the job is
   the price and the button and those want the whole width.
   `.offer-media` is display:none by default and only min-width:641px turns it
   on, so there is nothing to hide here. */
@media(max-width:900px){
  .offer-card{gap:clamp(24px,3.5vw,40px);
    padding:clamp(28px,4.5vw,44px) clamp(26px,4.5vw,40px)}
  .offer-left{min-width:0}
  .offer-card p{max-width:none}
}
@media(max-width:640px){
  .offer-card{grid-template-columns:1fr}
}
/* Phone: the button takes the width. It used to sit beside a 112px pack,
   which left its own label so little room that "Start subscription" wrapped
   onto two lines INSIDE the button. */
@media(max-width:640px){
  .offer-card{align-items:stretch;gap:24px;
    padding:clamp(26px,5.5vw,40px) clamp(22px,5vw,34px)}
  .offer-price{gap:12px;margin-top:10px}
  .offer-price span{margin-top:2px}
  .offer-cta{margin-top:22px}
  .offer-cta .btn{display:flex;width:100%;justify-content:center;white-space:nowrap}
  .offer-cta .microcopy{margin-top:13px;text-align:center}
}

/* ---- Paula's quote: one line, so the plate stops eating the pack ----
   The size has to follow the PLATE, not the viewport, and those two do not
   move together: the plate is 460px wide at a 1440 viewport but 800px at 900,
   because below 901 it goes full-bleed across the photograph. Any vw clamp
   that fits the narrow desktop plate is tiny on the wide tablet one. So the
   plate becomes a query container and the quote is sized in cqi — percent of
   the plate's own width — which is the thing the text actually has to fit in.

   Measured: the string is 15.865em wide, so it needs font-size <= width/15.865.
   5.9cqi leaves ~6% headroom against that at every width from 320 to 1440,
   and the clamp catches both ends — 13px stops a 320px phone shrinking it to
   nothing, and 23px is the ceiling because 801-900px already fitted on one
   line at 23px. Letting it grow to 26 there made that plate 4px TALLER, which
   is the opposite of the point of this change. */

/* Deliberately NOT white-space:nowrap. If the italic ever falls back to a
   wider face, wrapping to two lines is a shrug; overflowing the plate is a
   broken card. */
.paula-plate{container-type:inline-size}
.pp-quote{font-size:clamp(13px,5.9cqi,23px);line-height:1.3}

/* ---- and the credit line, same treatment ----
   Pre-existing, found while measuring the quote: at 390 the credit needs 304px
   inside a 280px plate, so it overflowed by 24. It could not wrap because
   ≤900 pins both spans to nowrap — the fix for a DIFFERENT bug, where wrapping
   stranded the divider on its own line. So it just overflowed instead.

   Wrapping it would make the plate taller, which is what this whole change is
   trying to avoid, so it is fitted rather than wrapped: both spans sized off
   the plate's own width like the quote. Measured, the line is
   6.68em of name + 19.444em of attribution + the divider and gaps, so
   4.5cqi / 3.0cqi lands it at ~88% of the plate at every width from 320 up,
   and the max stops it growing past today's sizes on a wide tablet plate. */
@media(max-width:900px){
  .pp-cred{gap:2px 8px}
  .pp-cred .pp-name{font-size:clamp(9px,4.5cqi,15.5px)}
  .pp-cred .pp-attr{font-size:clamp(6.5px,3cqi,10.5px)}
}

/* ---- company details in the footer ----
   Also the site's first contact route: until now the 60-day guarantee said
   "email us" nine times with no address, phone or form anywhere. */
.ft-company{padding:26px 0 4px;border-top:1px solid rgba(255,255,255,.10);margin-top:22px}
.ft-company h4{color:#E8CF8A;margin-bottom:12px}
.ft-company address{font-style:normal;font-size:13.5px;line-height:1.75;color:#B9B4A4}
.ft-reg,.ft-tel{font-size:13px;color:#B9B4A4;margin-top:10px}
.ft-tel a{color:#F6F2E6;font-weight:600;text-decoration:none}
.ft-tel a:hover{color:#E8CF8A}

/* ---- once a film is unmuted the badge gets out of the way ----
   The visitor has already made the choice; leaving a control parked over the
   middle of the picture just covers it. Tapping again re-mutes and it returns. */
.ugc-card.has-video .ugc-play{transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .25s cubic-bezier(.4,0,.2,1)}
.ugc-card.unmuted .ugc-play{opacity:0;transform:scale(.9);pointer-events:none}
.ugc-card.unmuted:hover .ugc-play{opacity:.85;transform:none}

/* ---- a slow shimmer across the gold CTA, once every 6s ----
   Long enough apart that it reads as a highlight catching the button rather
   than an animation running. Compositor-only, and it stops for reduced motion. */
.btn-gold{position:relative;overflow:hidden;isolation:isolate}
.btn-gold::after{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:36%;
  pointer-events:none;z-index:1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:translate3d(-220%,0,0) skewX(-18deg);
  animation:goldshine 10s cubic-bezier(.45,0,.55,1) infinite}
/* the sweep itself takes ~2.2s of the 10s cycle, so it drifts across rather
   than flicking past, and the button is still for the rest of the time */
@keyframes goldshine{
  0%,78%{transform:translate3d(-220%,0,0) skewX(-18deg)}
  100%{transform:translate3d(400%,0,0) skewX(-18deg)}}
@media(prefers-reduced-motion:reduce){.btn-gold::after{animation:none;opacity:0}}

/* ---- offer band pack: photographed on navy, feathered into the card ----
   Replaces a cut-out whose matte rim kept showing as a white edge on the crimp.
   The glow is in the photograph, so there is nothing to fake behind it; the
   mask just melts the frame into the card. */
.prod-ph-offer{position:relative;width:100%;height:100%;background:none;
  border-radius:0;box-shadow:none;overflow:visible}
.prod-ph-offer .prod-img{position:absolute;inset:-8%;width:116%;height:116%;
  max-width:none;object-fit:contain;filter:none;
  -webkit-mask-image:radial-gradient(68% 66% at 50% 50%, #000 40%, rgba(0,0,0,.55) 76%, rgba(0,0,0,0) 100%);
  mask-image:radial-gradient(68% 66% at 50% 50%, #000 40%, rgba(0,0,0,.55) 76%, rgba(0,0,0,0) 100%)}
.prod-ph-offer .prod-ph-frame,.prod-ph-offer .prod-ph-lab,
.prod-ph-offer .prod-sheen,.prod-ph-offer .prod-gleam{display:none}
.prod-ph-offer::before{display:none}

/* ============================================================
   Policy and contact pages
   ============================================================ */
.pol-body{font-size:16px;line-height:1.7;color:var(--muted)}
.pol-updated{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:26px}
.pol-h{font-family:var(--display);font-weight:600;font-size:clamp(19px,2vw,24px);
  letter-spacing:-.01em;color:var(--ink);margin:34px 0 12px}
.pol-body p{margin-bottom:16px}
.pol-list{list-style:none;margin:0 0 20px;padding:0}
.pol-list li{position:relative;padding-left:20px;margin-bottom:11px}
.pol-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--gold)}
.pol-body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.pol-body a:hover{color:var(--gold-deep)}
.pol-contact{margin-top:30px;padding-top:22px;border-top:1px solid var(--line-soft);
  font-size:13.5px;line-height:1.7;color:var(--muted)}
.pol-contact a{color:var(--ink);font-weight:600;text-decoration:none}
.pol-contact a:hover{color:var(--gold-deep)}

.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(20px,3vw,38px);align-items:start}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr}}
.contact-card{background:var(--bone);border-radius:var(--r);padding:clamp(24px,3vw,34px)}
.contact-list{list-style:none;margin:24px 0 0;padding:0}
.contact-list li{display:flex;flex-direction:column;gap:3px;padding:14px 0;
  border-top:1px solid rgba(17,29,51,.10)}
.c-lab{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep)}
.contact-list a{font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);
  text-decoration:none;letter-spacing:-.01em}
.contact-list a:hover{color:var(--gold-deep)}
.contact-list address{font-style:normal;font-size:14.5px;line-height:1.65;color:var(--muted)}
.contact-links{display:flex;flex-direction:column}
.contact-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;border-top:1px solid rgba(17,29,51,.10);
  font-size:15px;font-weight:500;color:var(--ink);text-decoration:none;
  transition:color .2s cubic-bezier(.4,0,.2,1)}
.contact-links a .arr{color:var(--gold-deep);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.contact-links a:hover{color:var(--gold-deep)}
.contact-links a:hover .arr{transform:translateX(4px)}
.contact-note{margin-top:20px;font-size:13px;line-height:1.65;color:var(--muted)}

/* ---- the Paula quote panel animates in ----
   Hover, keyboard focus or a tap brings it up over the photograph. Guarded to
   pointer:fine — a touch device has no hover, so hiding the credential there
   would just delete it. Same for reduced motion. */
@media (hover:hover) and (pointer:fine){
  .paula-media .paula-plate{
    opacity:0;transform:translateY(16px) scale(.985);
    transition:opacity .42s cubic-bezier(.22,1,.36,1),transform .42s cubic-bezier(.22,1,.36,1)}
  .paula-media:hover .paula-plate,
  .paula-media:focus-within .paula-plate,
  .paula-media.is-open .paula-plate{opacity:1;transform:none}
  /* the photo eases back a touch so the panel reads as arriving over it */
  .paula-media .ph-img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
  .paula-media:hover .ph-img,.paula-media.is-open .ph-img{transform:scale(1.03)}
  .paula-media{cursor:pointer}
}
@media (prefers-reduced-motion:reduce){
  .paula-media .paula-plate{opacity:1 !important;transform:none !important;transition:none}
  .paula-media .ph-img{transform:none !important}
}

/* ============================================================
   V11.8 — QA sweep remediation
   ============================================================ */

/* 4 · the closing band's email overflowed the page at 320 and 360.
   clamp() floors at 30px, and 23 unbreakable characters of display serif at
   30px is 369px — wider than the viewport. Let it break and scale down. */
.closing .price-line{overflow-wrap:anywhere;word-break:break-word;hyphens:none}
@media(max-width:400px){
  .closing .price-line{font-size:clamp(20px,7vw,30px);line-height:1.2}
}

/* 5 · the welcome modal's media panel is overflow:hidden and the image box was
   larger than it, so object-fit had nothing to do and the pack was clipped by
   27% — the X of IMMUFIX sliced off and the whole flavour band gone. */
.modal-media .prod-ph,.modal-media .pouch-slot{width:100%;height:100%}
.modal-media .prod-img{position:absolute;inset:8%;width:84%;height:84%;
  max-width:none;object-fit:contain}

/* 7 · portrait photography was being centre-cropped into landscape boxes, which
   took the top of people's heads off. Anchor faces near the top instead. */
.ph-img{object-position:50% 28%}
.ing-card .ph-img,.btile .ph-img{object-position:50% 50%}

/* 6 · the hero glow had almost no chroma: warm near-white stops composited over
   deep navy in normal blending come out a grey-olive haze (measured saturation
   0.84 -> 0.06). `screen` keeps the navy's blue underneath and lets the amber
   read as light rather than smoke. */
.hero-glow{mix-blend-mode:screen}
/* pushed further: under `screen` the navy's own blue survives underneath, so
   the light has to carry real chroma or it composites back to grey. Almost no
   blue in the stops is what makes it read as amber rather than smoke. */
.hero-glow-orange{background:radial-gradient(closest-side,
  rgba(255,150,40,.92), rgba(250,120,24,.74) 38%,
  rgba(230,92,14,.48) 55%, rgba(200,70,10,.24) 70%,
  rgba(170,56,8,.07) 84%, rgba(170,56,8,0) 100%)}
.hero-glow-vanilla{background:radial-gradient(closest-side,
  rgba(255,236,190,.72), rgba(250,224,168,.56) 38%,
  rgba(238,206,142,.34) 55%, rgba(214,182,120,.16) 70%,
  rgba(196,166,110,.05) 84%, rgba(196,166,110,0) 100%)}

/* ============================================================
   V11.9 — mobile crops that were cutting the subject
   ============================================================ */

@media(max-width:900px){
  /* 1 · the AG-split pack shot is a 3:4 portrait dropped into a 4:3 box, so
     cover sliced it straight through the IMMUFIX wordmark and lost the flavour
     band and the scoop entirely. Give the box the source's own proportions. */
  .ag-media .ph{aspect-ratio:4/4.9}
  .ag-media .ph .ph-img{object-position:50% 42%}

  /* 2 · the showcase band is pinned, so it has to stay short (see the
     short-phone rule above) — the fix is the focal point, not the aspect.
     At 50% 28% a 4:5 portrait in a 16:10 box starts 14% down the image and
     took the crown of the head off. */
  .show-stage .ph-img{object-position:50% 5%}
}

/* ============================================================
   V12.0 — the page behind an open modal must hold still
   ============================================================ */

/* .modal-overlay is a full-viewport backdrop-filter, so ANY movement behind it
   forces the browser to re-blur the entire viewport. The hero pack crossfades
   every 7s, the announcement bar rotates
   every 4s and the CTA shimmers every 10s — between them the backdrop was
   being recomposited continuously, which is what read as the page behind the
   popup flickering. Measured with the popup open: 40 captured frames, zero
   identical. Nothing back there is meant to be watched, so freeze it.

   Only CSS animations are paused here. Transitions are deliberately left
   alone: the things that were driving repaints behind the modal are all
   timer-driven (hero crossfade, announcement bar) and those are
   gated in JS instead, and a blanket transition:none also froze the
   accordions and reveals for anything that ran while a modal happened to be
   open.

   V13.0: this whole rule was DEAD. The comment above used to close on the
   line ending "so freeze it", and the six lines after it sat in raw CSS. The
   parser treated those lines as a malformed selector and swallowed the block
   that follows them, which is the freeze itself, so every animation behind
   the modal had been running the whole time. That is the flicker in the
   screenshot.

   Never write a comment-close sequence inside a CSS comment, even quoted:
   CSS comments do not nest and there is no escape for it. Anything after it
   is live stylesheet, and the failure is silent. */
body.modal-open > *:not(.modal-overlay):not(.cart-root),
body.modal-open > *:not(.modal-overlay):not(.cart-root) *{
  animation-play-state:paused!important;
}

/* ============================================================
   V13.0 — nested backdrop-filters behind the overlay
   ============================================================
   The sticky header is its own backdrop-filter element. Stacked underneath a
   second full-viewport backdrop-filter (the overlay, as it was before V13)
   the two sampled each other's output, which is the hard grey seam across the
   top of the popup screenshot: the header reads washed-out and unblurred
   while everything below it is blurred.
   The overlay's own blur is gone now, so that pairing cannot recur, but every
   remaining backdrop-filter behind the scrim is still a live compositor layer
   being re-derived for no reason — there is nothing to see through any of
   them once a scrim is over the top. Turn them off for the duration. */
body.modal-open header.site,
body.modal-open .glass,
body.modal-open .glass-dark,
body.modal-open .announce{
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}
body.modal-open header.site{background:var(--paper)}

/* Give the overlay a stable compositing layer of its own so the blur is
   rasterised once instead of being re-derived against a moving parent. */
.modal-overlay{contain:layout paint;backface-visibility:hidden}

/* The micro line under the claim button inherits .modal-body p{max-width:38ch}.
   text-align:center then centres the text INSIDE a 38ch box that is still
   flush left in a 452px panel, so the line reads visibly off-centre. Centre
   the box, not just the glyphs. */
.whl-body p,.scr-claim p,.whl-claim p{margin-inline:auto}

/* ============================================================
   V13.0 — showcase becomes stacked cards on a phone
   ============================================================
   Paired with showcaseFlat() in main.js, which moves each .show-media inside
   its own .show-item at 900px and back out again above it. Everything here is
   scoped to .show-flat, so the desktop pinned scene is untouched.

   The two things being undone: a 4:5 portrait was being cover-cropped into a
   near-square pinned box (head and shoulders gone), and every entry was held
   at 56svh to give that box scroll runway, which left a screen of empty navy
   under each person. A card does not need runway. */
.show-flat .show-sticky{display:none}
.show-flat .show-grid{display:block}
.show-flat .show-items{padding-top:0}

.show-flat .show-item{
  min-height:0;opacity:1;padding:0 0 clamp(38px,9vw,54px);
  border-top:none;justify-content:flex-start;
}
.show-flat .show-item + .show-item{padding-top:clamp(30px,7vw,42px);border-top:1px solid rgba(246,242,230,.12)}
.show-flat .show-item:last-child{padding-bottom:0}

/* the portrait, at the proportions it was actually shot in */
.show-flat .show-media{
  position:static;inset:auto;opacity:1;transform:none;transition:none;
  display:block;margin:0 0 clamp(18px,4.5vw,24px);
}
.show-flat .show-media .ph{
  /* relative, NOT static. The mobile block above pins this to position:absolute
     inset:0 for the pinned stage, so it has to be released — but .ph .ph-img is
     itself position:absolute inset:0 and needs .ph as its containing block. Set
     static here and the portrait resolves against a distant ancestor instead
     and paints across the whole section at several times its size. */
  position:relative;inset:auto;min-height:0;
  /* 4/5 is what all three portraits were actually shot at (Paula 940x1175 is
     exactly 4:5; Fiennes and Phillippa are 0.87), so on a normal phone the
     photograph is not cropped at all — which is the whole complaint.
     The cap is height-based, never width-based. A width query cannot know
     whether it is on a 390x844 phone or a 390x667 one, and an earlier
     max-width:420px clamp cut the box to 44svh on BOTH, which is what put a
     15% crop back on Paula at the one size that did not need it.
     52svh: on 390x844 that is 439px against the 437px the aspect asks for, so
     it never binds and the crop is zero. On a short 375x667 it binds at 347px
     and takes ~17% off the frame, which is the right trade there — a card
     whose name has fallen below the fold is worse than a tighter portrait. */
  aspect-ratio:4/5;width:100%;border-radius:var(--r);overflow:hidden;
  max-height:52svh;
}
.show-flat .show-media .ph-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* eye line sits a third down a head-and-shoulders frame */
  object-position:50% 30%;
}
.show-flat .show-idx{margin-bottom:10px}
.show-flat .show-item p{max-width:none}


/* Photographs inside long-form copy. The article body already has .art-video
   for the self-hosted films; this is its still-image sibling, used by the
   Paula journey page. Ratio comes in per figure as --fig-ratio so a portrait
   archive scan and a landscape race photo can share one rule without either
   being cropped to fit the other's shape. */
.art-fig{position:relative;margin:36px 0 34px;max-width:560px}
.art-fig img{display:block;width:100%;aspect-ratio:var(--fig-ratio,3/4);
  object-fit:cover;border-radius:var(--r);background:var(--bone)}
.art-fig figcaption{font-size:12.5px;color:var(--muted);margin-top:12px;
  padding-left:12px;border-left:2px solid var(--gold-soft);line-height:1.5}
@media (max-width:700px){.art-fig{max-width:100%}}

/* PDP pack frame: the hero's idea, retuned for a light ground.
   The hero glow is a warm cream composited with mix-blend-mode screen over
   navy, which works because navy has headroom to lighten into. The gallery
   sits on bone, where screen has almost nothing left to give and the same
   gradient disappears. So this one blends normally and carries more chroma:
   on cream the light has to be a warmer tone than its ground to read as light
   at all, rather than merely brighter than it. */
.g-shot-pack{position:relative;background:var(--bone)}
.pdp-glow{position:absolute;left:50%;top:52%;width:104%;height:86%;
  transform:translate(-50%,-50%);border-radius:50%;z-index:0;pointer-events:none;
  filter:blur(26px);display:block}
.pdp-glow[data-flavour="orange"]{background:radial-gradient(closest-side,
  rgba(232,146,88,.34), rgba(226,150,96,.24) 42%,
  rgba(214,152,104,.11) 66%, rgba(214,152,104,0) 100%)}
.pdp-glow[data-flavour="vanilla"]{background:radial-gradient(closest-side,
  rgba(214,180,116,.30), rgba(220,192,138,.21) 42%,
  rgba(222,200,156,.10) 66%, rgba(222,200,156,0) 100%)}
/* the cut-out is taller than the 4/5 frame, so it is contained rather than
   cropped, and lifted off the ground by the same two-stop shadow the hero
   pack uses so the two read as the same object in two places */
.g-shot-pack .g-img{position:relative;z-index:1;object-fit:contain;
  padding:5% 12%;
  filter:drop-shadow(0 22px 26px rgba(11,37,69,.20))
         drop-shadow(0 5px 9px rgba(11,37,69,.14))}
@media (prefers-reduced-motion:no-preference){
  .pdp-glow{animation:pdpGlowBreathe 15s ease-in-out infinite}
}
@keyframes pdpGlowBreathe{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.92}
  45%    {transform:translate(-50.5%,-51%) scale(1.05);opacity:1}
}

/* Paula's journey hero. The first pass was a navy band with a headline in it
   and half a screen of nothing underneath, which read as an empty page rather
   than an opening. Two columns: the words on the left, her on the right, and
   the band sized to the portrait instead of to a guess. */
/* .band and .art-hero both set padding, so this needs the extra class to win
   rather than adding another 128px of navy under a two-line headline. */
.band.pj-hero{padding-top:clamp(32px,4vw,56px);padding-bottom:clamp(32px,4vw,56px)}
.pj-hero-grid{display:grid;grid-template-columns:1fr minmax(220px,300px);
  gap:clamp(28px,5vw,64px);align-items:center;max-width:1080px}
.pj-hero-text{min-width:0}
.pj-hero .art-meta{margin-bottom:18px}
.pj-hero-sub{font-size:16.5px;line-height:1.65;color:rgba(246,239,223,.72);max-width:46ch;margin:0}
.pj-hero-shot{margin:0}
/* height:auto matters. The img carries width and height attributes so the box
   is reserved before the file lands, and an explicit height beats aspect-ratio
   every time: without this the portrait laid out at its full 638px and left
   half a band of navy above and below the headline. */
.pj-hero-shot img{display:block;width:100%;height:auto;aspect-ratio:4/5;
  object-fit:cover;object-position:50% 22%;
  border-radius:var(--r);border:1px solid rgba(246,239,223,.16)}
@media (max-width:820px){
  .pj-hero-grid{grid-template-columns:1fr;gap:26px}
  .pj-hero-shot{order:-1;max-width:220px}
  .pj-hero-sub{max-width:none}
}

/* Photographs that the copy runs around, rather than sitting in a gap of their
   own. Only above 900px: below that the column is too narrow to wrap anything
   readable around, so they go back to being full-width blocks. */
@media (min-width:900px){
  .art-fig-wrap{float:right;width:46%;max-width:330px;margin:6px 0 22px 32px}
  .art-fig-wrap.art-fig-left{float:left;margin:6px 32px 22px 0}
  /* A tall portrait floated at full height towers over the two paragraphs
     beside it and leaves a column of empty page to its side, which is worse
     than not floating it. Capped so the copy runs past the bottom of the
     picture rather than the picture running past the bottom of the copy. */
  .art-fig-wrap img{aspect-ratio:auto;height:auto;max-height:420px}
  .art-copy h2{clear:both}
}

/* A flavour the shop cannot ship. Muted rather than hidden: knowing it exists
   and is coming back is better than it silently vanishing from the page. */
.flav[disabled]{opacity:.45;cursor:not-allowed}
.flav[disabled]:hover{background:inherit}
.flav-oos{display:block;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red);margin-top:2px}

/* A discount the shop is applying that the basket worked out nothing about.
   Sits under the subtotal, named, so the number in the drawer is the number
   at the checkout rather than a list price that quietly gets better later. */
.cf-disc{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;margin-top:6px;font-size:13.5px;color:var(--gold-deep)}
.cf-disc b{font-weight:600;white-space:nowrap}

/* Where to go from a dead link. A list of real destinations beats an apology:
   somebody who followed a broken link wants the page they were looking for,
   not to be told the site is sorry. */
.nf-links{list-style:none;margin:0;padding:0;display:grid;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.nf-links a{display:block;padding:18px 22px;background:var(--paper);text-decoration:none;
  transition:background .2s cubic-bezier(.4,0,.2,1)}
.nf-links a:hover{background:var(--bone)}
.nf-links b{display:block;font-size:17px;font-weight:600;color:var(--ink);margin-bottom:3px}
.nf-links span{display:block;font-size:14.5px;color:var(--muted);line-height:1.5}

/* ============================================================
   V13.1 — the steps after the wheel were being painted for the
   light modal they are not in.

   stepWhere() and its success state write plain .modal-body markup into
   .whl-body, and .modal-body's colours were written for variant A, which sits
   on paper. Dropped onto the wheel's navy that is ink on navy: "Where did you
   hear about us?" measured 1.4:1, which is not low contrast, it is invisible.
   The same mistake was fixed once for .whl-title and only for .whl-title.

   Scoped to .modal-wheel so variant A is untouched.
   ============================================================ */
.modal-wheel .whl-body h3{color:#F6F2E6}
.modal-wheel .whl-body h3 em{color:#E8CF8A}
.modal-wheel .whl-body p{color:#C3CBD9}
.modal-wheel .whl-body .modal-micro{color:#9AA5B8}
.modal-wheel .whl-body .pop-skip{color:#B9C2D2;text-decoration-color:rgba(185,194,210,.5)}
.modal-wheel .whl-body .pop-skip:hover{color:#F6F2E6}
/* The option buttons were already white on navy and stay that way; only their
   focus ring needed to be visible against the darker ground. */
.modal-wheel .whl-body .pop-opt:focus-visible{outline:2px solid #E8CF8A;outline-offset:2px}

/* ============================================================
   V13.2 — the code is the panel, not a line in it

   No email carries this code. It is shown once, on this screen, and it is
   what the visitor came for, so it gets the heading position and something
   to press rather than sitting in a sentence to be transcribed by eye.
   ============================================================ */
.pop-code{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.pop-copy{font:inherit;font-size:13px;font-weight:600;line-height:1;
  color:var(--ink);background:var(--bone);border:1px solid var(--line-soft,rgba(17,29,51,.18));
  border-radius:var(--r-ui,4px);padding:11px 14px;cursor:pointer;min-height:38px;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease)}
.pop-copy:hover{border-color:var(--gold-deep)}
.pop-copy.done{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
/* On the wheel's navy panel the chip and the button both need their own
   ground, or they read as holes cut in the card. */
.modal-wheel .whl-body .pop-copy{color:#F6F2E6;background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.22)}
.modal-wheel .whl-body .pop-copy:hover{border-color:#E8CF8A}
.modal-wheel .whl-body .pop-copy.done{background:#E8CF8A;border-color:#E8CF8A;color:#0B2545}

/* ============================================================
   V13.3 — the offer panel after the email step
   ============================================================ */

/* On navy the option buttons are white cards, so the hover has to read as a
   press rather than a fade. */
.modal-wheel .whl-body .pop-opt{transition:background .16s var(--ease),border-color .16s var(--ease),transform .12s var(--ease)}
.modal-wheel .whl-body .pop-opt:hover{background:var(--bone);border-color:var(--gold-deep);color:var(--ink)}

/* The success state was a heading, a chip and then two paragraphs of centred
   prose set to the full width of the card, which broke "in at the checkout"
   onto its own line and gave the two sentences the same weight. One line
   carries the instruction, the other is a footnote, and neither runs wider
   than it can be read comfortably. */
/* Stretched, not centred: the chip sets the height and the button was
   sitting two thirds as tall beside it, which read as an afterthought
   rather than the pair they are. */
.whl-body .pop-code{margin:20px auto 18px;align-items:stretch}
.whl-body .pop-copy{display:inline-flex;align-items:center;justify-content:center;padding:0 18px}
.whl-body .pop-said{font-size:15px;line-height:1.45;color:#D6DCE6;max-width:26ch;margin:0 auto}
.modal-wheel .whl-body .modal-micro{max-width:30ch;margin:10px auto 0;font-size:12.5px;
  line-height:1.45;opacity:.8}
.modal-wheel .whl-body .btn-gold{margin-top:22px;min-width:200px}
.modal-wheel .whl-body h3{margin-bottom:2px}

/* ============================================================
   V13.4 — moving between pages

   Cross-document view transitions. The browser takes a snapshot of the old
   page and the new one and animates between them, so a click no longer ends
   in a white flash and a jump.

   Done in CSS rather than by turning the site into a single page app: no
   router, no history handling, no state to get out of step, and a browser
   without support simply navigates the way it does today.

   Deliberately short. A page transition is there to stop the jolt, not to be
   noticed; anything past about 200ms starts to feel like waiting.
   ============================================================ */
@view-transition{navigation:auto}

::view-transition-old(root){animation:pg-out .16s var(--ease) both}
::view-transition-new(root){animation:pg-in .22s var(--ease) both}
@keyframes pg-out{to{opacity:0;transform:translateY(-4px)}}
@keyframes pg-in{from{opacity:0;transform:translateY(6px)}}

/* The header and the offer are the two things that must not slide with the
   page. The header is fixed and would tear; the modal is an overlay and
   sliding it looks like the page moved underneath it. */
.nav,.modal-overlay{view-transition-name:none}

@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* ============================================================
   V13.5 — the habit cards at 768px

   .expect-grid goes three up at 768. Each column is 223px and .mo is a fixed
   115px, which left .expect-body 33px wide: one word per line, a paragraph
   three times its normal height, and "micronutrient" clipped mid-word. It was
   correct at every other width, so nothing caught it.

   The month marker becomes a line above the text rather than a column beside
   it, only in the band where there is not room for both.
   ============================================================ */
@media(min-width:701px) and (max-width:900px){
  .expect-card{display:block}
  .expect-card .mo{width:auto;min-width:0;margin-bottom:10px;display:flex;align-items:baseline;gap:8px}
  .expect-body{width:auto}
}

/* ============================================================
   V13.6 — the newsletter form says what is wrong

   The failing state was a red border and nothing else. Colour alone fails
   WCAG 1.4.1 and tells a sighted visitor nothing either.
   ============================================================ */
.ft-form input.err{border-color:#C24334;box-shadow:0 0 0 3px rgba(194,67,52,.16)}
.ft-form-note{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:#E8A79C;min-height:1.2em}
.ft-form-done{font-size:14px;color:#C9A85C;margin:0}
/* Inline links measured 16 to 21px tall on a phone: the journal back link and
   the footer phone and email. Everything else already cleared 44px. Padding
   rather than font size, so nothing about the type changes. */
@media (hover:none) and (pointer:coarse){
  .art-back{display:inline-flex;align-items:center;min-height:44px;padding:6px 0}
  .foot-contact a,.contact-list a,.ft-social a{display:inline-flex;align-items:center;min-height:44px}
  .pol-contact a{display:inline-block;padding:8px 0}
}

/* ---- Sir Ranulph Fiennes: historical, not a current endorsement ----
   Both owners asked for the same thing independently: keep him in the story,
   mark him, and say plainly at the bottom that he is not endorsing the product
   today. The asterisk is aria-hidden and the footnote reads as a full sentence
   on its own, so a screen reader gets the statement rather than a floating "*". */
.fn-mark{font-size:.55em;font-weight:600;vertical-align:super;line-height:0;
  margin-left:2px;color:var(--gold-soft)}
.show-fn{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);
  max-width:72ch}
.show-fn span{color:var(--gold-soft);margin-right:2px}
@media(max-width:640px){.show-fn{margin-top:24px}}