/* ===================================================================
   THUNDER HONEY — shared site stylesheet (Figma 1:1 rebuild)
   Source: Figma y2OlzbUSXRmHVq8xr7G4Fm. Linked by every page.
   =================================================================== */

/* ---- DESIGN TOKENS (Figma swatch + Design Tokens frame) ---- */
:root{
  --page:#ebeef1;          /* page grey */
  --page2:#f1f3f5;         /* lighter grey (PDP hero bg) */
  --card:#ffffff;
  --card-grey:#dce0e4;
  --ink:#2b2e33;           /* primary text / dark surfaces / dark button */
  --ink-2:#5c636b;         /* muted text */
  --ink-deep:#1c2126;      /* announcement / addtocart / hover */
  --ice:#cefbff;           /* light blue */
  --ice-h:#b8f2f7;
  --blue:#0b1c66;          /* main dark blue */
  --accent:#0051D7;        /* accent blue */
  --line:rgba(43,46,51,.10);
  --radius:15px;
  --pill:100px;
  --maxw:1700px;

  /* =====================================================================
     TRUE FROSTED GLASS SYSTEM (iOS Control Center / Seed)
     ---------------------------------------------------------------------
     A translucent MATERIAL: the blurred page/photo shows THROUGH and the
     glass picks up the page color, so on the grey page it reads as a light
     GREY glass (a real material), never flat white, never dark, never
     faded. Lower opacity + strong blur + a defined border + a real drop
     shadow + an inset top highlight = glass WITH depth (a raised 3D panel).
     Tinted toward the page grey (#ebeef1 / panel #dce0e4) on purpose.
     ===================================================================== */
  /* LIGHT glass — for cards/panels on the grey page (USP, benefit cards, dose, pdp cap) */
  --glass-fill:rgba(222,224,221,.52);        /* light-grey tint, low opacity → page reads through */
  --glass-blur:blur(26px) saturate(180%);
  --glass-border:1px solid rgba(255,255,255,.55);
  --glass-shadow:0 18px 50px rgba(18,28,52,.16), 0 3px 10px rgba(18,28,52,.07), inset 0 1px 0 rgba(255,255,255,.72), inset 0 0 0 1px rgba(255,255,255,.14);
  /* faint cool wash that makes the material read as glass catching light */
  --glass-wash:radial-gradient(120% 95% at 14% -10%,rgba(206,251,255,.26),transparent 56%);

  /* DARK glass — for panels over dark imagery (comparison table) */
  --glass-dark-fill:rgba(34,40,52,.34);      /* lighter than before → photo blurs through, not a slab */
  --glass-dark-blur:blur(30px) saturate(165%);
  --glass-dark-border:1px solid rgba(255,255,255,.22);
  --glass-dark-shadow:0 26px 60px rgba(6,14,32,.34), inset 0 1px 0 rgba(255,255,255,.20), inset 0 0 0 1px rgba(255,255,255,.05);

  /* PILL glass — header / hero CTA wrappers (light, legible, with depth) */
  --glass-pill-fill:rgba(229,230,227,.82);
  --glass-pill-blur:blur(22px) saturate(180%);
  --glass-pill-border:1px solid rgba(255,255,255,.55);
  --glass-pill-shadow:0 12px 34px rgba(18,28,52,.18), inset 0 1px 0 rgba(255,255,255,.7);

  /* 3D depth for solid buttons (ice + dark + white) */
  --btn-shadow:0 10px 24px rgba(18,28,52,.18), 0 2px 6px rgba(18,28,52,.12), inset 0 1px 0 rgba(255,255,255,.45);
  --btn-shadow-hover:0 16px 34px rgba(18,28,52,.24), 0 3px 8px rgba(18,28,52,.14), inset 0 1px 0 rgba(255,255,255,.5);
  --btn-shadow-dark:0 10px 24px rgba(8,16,36,.30), 0 2px 6px rgba(8,16,36,.18), inset 0 1px 0 rgba(255,255,255,.14);
  --btn-shadow-dark-hover:0 16px 34px rgba(8,16,36,.38), inset 0 1px 0 rgba(255,255,255,.18);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{background:var(--page);color:var(--ink);font-family:'Inter',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 25px;}
.sec-h2{font-size:clamp(28px,3.4vw,45px);font-weight:600;line-height:1.0;letter-spacing:-.45px;color:var(--ink);}

/* ---- GRAIN OVERLAY: REMOVED (Joakim 2026-07-02) ----
   The fixed full-viewport noise overlay sat at 42% opacity over every image
   and video on the site and read as low quality (the spin video's back label
   was unreadable through it). Markup (<div class="grain">) stays on the
   pages; this kills the overlay everywhere. */
.grain,.grain::after{display:none !important;}

/* ---- MEDIA PLACEHOLDERS (grey/dark slots = where imagery goes) ---- */
.media-slot{position:relative;border-radius:var(--radius);background:linear-gradient(160deg,#d6dbe0,#c4cad1);overflow:hidden;}
.media-slot::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(27,29,33,.18));}
.dark-slot{position:relative;border-radius:var(--radius);background:linear-gradient(160deg,#3a4049,#23262b);overflow:hidden;}
.media-slot>img,.dark-slot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.igrid__front>img,.story>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;}
.ingcard__front>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0;}
.media-slot>video,.howto__simg>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.community__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}

/* ---- ANNOUNCEMENT BAR ---- */
.ann{background:var(--ink-deep);color:#fff;text-align:center;font-size:13px;font-weight:500;letter-spacing:-.1px;padding:9px 16px;}
.ann b{font-weight:700;}

/* ---- HEADER base — only what the unified loovi-style header (further down)
   does not itself define. The legacy dark/over generation (z-index:50, solid
   #1c2333 background, flex inner, 450px columns, white nav/logo) was fully
   superseded by the unified header and has been removed; the .hdr--solid /
   .hdr--over classes still carried by page markup are inert aliases. ---- */
.hdr__nav{font-size:16px;font-weight:500;letter-spacing:-.176px;}
.hdr__logo svg{height:16px;width:auto;display:block;}
.hdr__right{display:flex;justify-content:flex-end;}
.hdr__pill{display:flex;align-items:center;gap:15px;border-radius:var(--pill);padding:5px 5px 5px 20px;background:rgba(255,255,255,.12);backdrop-filter:blur(8px);}
.hdr__pill .ic{width:23px;height:23px;}
.hdr__cart{width:45px;height:45px;border-radius:var(--pill);background:#fff;display:flex;align-items:center;justify-content:center;}
.hdr__cart svg{width:23px;height:23px;color:var(--ink);}

/* ---- CTA-WRAPPED PILL (3431-4982) ---- */
.cta-wrap{display:inline-flex;align-items:center;gap:16px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.28);border-radius:var(--pill);padding:7px 24px 7px 7px;box-shadow:0 10px 30px rgba(8,18,40,.18),inset 0 1px 0 rgba(255,255,255,.35);}
.cta-pill{background:var(--ice);color:var(--ink);font-size:16px;font-weight:600;letter-spacing:-.198px;padding:15px 28px;border-radius:var(--pill);transition:background .2s,box-shadow .25s,transform .25s;box-shadow:var(--btn-shadow);}
.cta-pill:hover{background:var(--ice-h);box-shadow:var(--btn-shadow-hover);transform:translateY(-1px);}
.cta-note{color:#fff;font-size:14px;font-weight:600;letter-spacing:-.1px;}

/* ---- BUTTONS (3431-4827): h58 pad20 r100 SemiBold 18/-0.198 ---- */
.btn{display:inline-flex;align-items:center;gap:15px;height:58px;padding:0 30px 0 35px;border-radius:var(--pill);font-size:18px;font-weight:600;letter-spacing:-.198px;cursor:pointer;border:1px solid transparent;transition:background .2s,box-shadow .25s,transform .25s;}
.btn--dark{background:var(--ink);color:#fff;box-shadow:var(--btn-shadow-dark);} .btn--dark:hover{background:var(--ink-deep);box-shadow:var(--btn-shadow-dark-hover);transform:translateY(-1px);}
.btn--outline{background:transparent;border-color:var(--ink);color:var(--ink);}
.btn--white{background:#fff;color:var(--ink);box-shadow:var(--btn-shadow);} .btn--white:hover{box-shadow:var(--btn-shadow-hover);transform:translateY(-1px);}

/* ===================================================================
   REUSABLE SECTIONS
   =================================================================== */

/* ---- R1 HERO ---- */
.hero{padding:14px 25px 0;}
.hero__card{position:relative;max-width:1870px;margin:0 auto;height:760px;border-radius:24px;overflow:hidden;}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero__tint{position:absolute;inset:0;background:linear-gradient(105deg,rgba(27,29,33,.62) 0%,rgba(27,29,33,.28) 42%,rgba(27,29,33,.05) 80%);}
.hero__content{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 0 64px;}
.hero__content .wrap2{max-width:var(--maxw);margin:0 auto;padding:0 60px;}
.hero h1{color:#fff;font-size:clamp(40px,5.4vw,72px);font-weight:600;line-height:1.0;letter-spacing:-.7px;}
.hero__sub{color:#fff;font-size:clamp(16px,1.7vw,22px);font-weight:500;letter-spacing:-.2px;margin-top:18px;opacity:.92;}
.hero .cta-wrap{margin-top:28px;}

/* ---- R2 3-PRODUCT GRID + TRUST ROW ---- */
.pgrid{padding:90px 25px 26px;}
.pgrid__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;}
.pgrid__head .sec-h2{font-size:clamp(30px,4vw,52px);max-width:900px;line-height:1.02;}
.pgrid__all{font-size:15px;font-weight:600;color:var(--ink);border:1px solid var(--line);padding:11px 20px;border-radius:var(--pill);white-space:nowrap;}
.pgrid__all:hover{border-color:var(--ink);}
.pgrid__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.pcard{background:linear-gradient(180deg,#e0e4e8,#ccd2d8);border-radius:var(--radius);padding:28px 28px 32px;display:flex;flex-direction:column;align-items:center;text-align:center;border:1px solid rgba(43,46,51,.05);}
.pcard__label{align-self:stretch;display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--ink);opacity:.28;letter-spacing:.02em;}
.pcard__name{font-size:26px;font-weight:600;letter-spacing:-.3px;color:var(--ink);margin-top:16px;}
.pcard__desc{font-size:15px;font-weight:500;line-height:1.5;color:var(--ink-2);max-width:340px;margin-top:8px;}
.pcard__media{height:300px;display:flex;align-items:center;justify-content:center;margin:18px 0 22px;}
.pcard__media img{height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 26px 36px rgba(43,46,51,.20));}
/* R2 benefit cards: centered, big header, minimal text, animated icon on the grey card */
.pcard--benefit{align-items:center;text-align:center;padding:30px 26px 34px;}
.pcard--benefit .pcard__label{width:100%;display:flex;justify-content:space-between;opacity:.5;font-size:13px;font-weight:600;}
.pcard--benefit .pcard__name{font-size:clamp(24px,2.1vw,31px);line-height:1.08;letter-spacing:-.5px;font-weight:600;margin-top:16px;}
.pcard--benefit .pcard__desc{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:28ch;margin:12px auto 0;}
.pcard__anim{height:200px;width:100%;display:flex;align-items:center;justify-content:center;margin-top:14px;}
.pcard__anim svg.ban{width:92px;height:92px;display:block;overflow:visible;}
.ban--bolt{transform-box:fill-box;transform-origin:center;animation:banpulse 2.6s ease-in-out infinite;}
@keyframes banpulse{0%,100%{transform:translateY(0);filter:drop-shadow(0 0 0 rgba(0,71,171,0));}50%{transform:translateY(-4px);filter:drop-shadow(0 9px 18px rgba(0,71,171,.35));}}
.ban--focus circle{transform-box:fill-box;transform-origin:center;}
.ban--focus .r1{animation:banring 2.4s ease-in-out infinite;}
.ban--focus .r2{animation:banring 2.4s ease-in-out infinite .3s;}
@keyframes banring{0%,100%{transform:scale(1);opacity:.4;}50%{transform:scale(.84);opacity:1;}}
.ban--swirl{transform-box:fill-box;transform-origin:center;animation:banswirl 9s linear infinite;}
@keyframes banswirl{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.ban--bolt,.ban--focus .r1,.ban--focus .r2,.ban--swirl{animation:none;}}
/* R2 USP frosted-glass panel — true Seed / iOS light glass (translucent grey material w/ depth) */
.usp{position:relative;overflow:hidden;display:grid;grid-template-columns:repeat(4,1fr);gap:44px;max-width:1180px;margin:0 auto;border-radius:28px;padding:60px 52px;
  background:var(--glass-fill);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:var(--glass-border);
  box-shadow:var(--glass-shadow);}
.usp::before{content:'';position:absolute;inset:0;background:var(--glass-wash);pointer-events:none;}
.usp__col{position:relative;z-index:1;display:flex;flex-direction:column;}
.usp__ic{width:48px;height:48px;color:var(--blue);stroke-width:1.4;display:block;margin-bottom:24px;}
.usp__col h4{font-size:21px;font-weight:600;color:var(--ink);letter-spacing:-.35px;line-height:1.14;}
.usp__col p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:12px;max-width:24ch;}
#s-products .pgrid__head{max-width:1180px;margin-left:auto;margin-right:auto;}
.pgrid__head--center{justify-content:center;text-align:center;}
.pgrid__head--center .sec-h2{max-width:none;}
/* R3 Meet the ritual (product + experience, how-to videos) */
.ritual{padding:90px 25px 26px;}
.ritual__head{text-align:center;max-width:680px;margin:0 auto 46px;}
.ritual__eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);}
.ritual__head .sec-h2{margin-top:12px;}
.ritual__sub{font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:14px;}
.ritual__film{position:relative;max-width:1180px;margin:0 auto;border-radius:24px;overflow:hidden;aspect-ratio:16/9;background:linear-gradient(160deg,#dce0e4,#c9ced4);box-shadow:0 34px 80px rgba(8,24,55,.18);}
.ritual__film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;}
.ritual__row{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1180px;margin:30px auto 0;}
.ritual__n{font-size:13px;font-weight:700;color:var(--blue);letter-spacing:.04em;}
.ritual__row b{display:block;font-size:18px;font-weight:600;color:var(--ink);letter-spacing:-.2px;margin-top:4px;}
.ritual__row p{font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:6px;}
.ritual__cta{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:46px;flex-wrap:wrap;}
.ritual__note{font-size:13px;font-weight:500;color:var(--ink-2);}
@media(max-width:760px){.ritual{padding:46px 18px 16px;}.ritual__row{grid-template-columns:1fr;gap:20px;text-align:center;}.ritual__film{aspect-ratio:4/3;}.ritual__head{margin-bottom:32px;}}

@media(max-width:900px){.usp{grid-template-columns:1fr 1fr;gap:40px 44px;padding:48px 36px;}}
@media(max-width:560px){.usp{grid-template-columns:1fr;gap:34px;padding:40px 28px;}}

.pcard__btn{background:var(--ink);color:#fff;font-size:15px;font-weight:600;letter-spacing:-.198px;padding:14px 30px;border-radius:var(--pill);}
.pcard__btn:hover{background:var(--ink-deep);}
.pcard__note{font-size:12px;color:var(--ink-2);margin-top:12px;}
.trustrow{display:flex;justify-content:center;flex-wrap:wrap;gap:46px;padding:30px 25px 10px;}
.trustrow span{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--ink);}
.trustrow span::before{content:"";width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink);background:no-repeat center/9px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2e33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>");flex:none;}

/* ---- R3 FORMULATED FOR FUNCTION (dark image-bg) ---- */
.feat{padding:26px 25px 0;}
.feat__card{position:relative;max-width:1870px;margin:0 auto;border-radius:24px;overflow:hidden;padding:70px 60px 60px;color:#fff;}
.feat__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.feat__bg-tint{position:absolute;inset:0;background:linear-gradient(115deg,rgba(27,29,33,.82) 0%,rgba(27,29,33,.5) 45%,rgba(27,29,33,.3) 100%);}
.feat__content{position:relative;z-index:2;max-width:560px;}
.feat__content h2{font-size:clamp(28px,3.2vw,40px);font-weight:600;line-height:1.05;letter-spacing:-.4px;}
.feat__content p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.82);margin-top:16px;max-width:460px;}
.feat__cta{margin-top:26px;}
.feat__cards{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:80px;}
.feat__c{background:rgba(222,224,221,.55);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.5);border-radius:var(--radius);padding:24px;color:var(--ink);}
.feat__ic{width:46px;height:46px;color:var(--ice);margin-bottom:16px;display:flex;align-items:center;justify-content:center;
  /* HARD GUARANTEE: never a coin/disc here again. No bg, no border, no radius. */
  background:none!important;border:none!important;border-radius:0!important;box-shadow:none!important;}
/* Clean symbol-only ice glyphs (lightning / eye / flask). Vector, always crisp,
   transparent, NO round coin, NO disc, NO white plate. Sits directly on the dark card. */
.feat__ic svg.feat__glyph{width:44px;height:44px;display:block;color:var(--ice);overflow:visible;
  background:none!important;border:none!important;border-radius:0!important;box-shadow:none!important;
  transform-origin:center;will-change:transform,rotate;cursor:grab;touch-action:pan-y;
  /* soft dark drop-shadow lifts the ice symbol off the dark photo card, no halo/glow */
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
  /* premium idle: slow gentle float + faint tilt, NOT a fast spin */
  animation:feicFloat 7.5s ease-in-out infinite, feicTilt 16s ease-in-out infinite;}
/* stagger the three glyphs so they breathe out of sync (more organic) */
.feat__c:nth-child(2) .feat__ic svg.feat__glyph{animation-delay:-2.5s,-5s;}
.feat__c:nth-child(3) .feat__ic svg.feat__glyph{animation-delay:-5s,-10s;}
.feat__c:hover .feat__ic svg.feat__glyph{animation-play-state:paused;transform:translateY(-3px) scale(1.06);transition:transform .35s ease;}
/* JS owns rotation while the user grabs/spins: keep the float, drop the CSS tilt */
.feat__ic svg.feat__glyph.js-spin{animation-name:feicFloat;}
.feat__ic svg.feat__glyph.is-grabbing{cursor:grabbing;animation-play-state:paused;transform:translateY(-3px) scale(1.06);}
@keyframes feicFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
@keyframes feicTilt{0%,100%{rotate:-3.2deg;}50%{rotate:3.2deg;}}
@media(prefers-reduced-motion:reduce){
  .feat__ic svg.feat__glyph{animation:none!important;}
  .feat__c:hover .feat__ic svg.feat__glyph{transform:none;}
}
.feat__c h4{font-size:17px;font-weight:600;letter-spacing:-.2px;}
.feat__c p{font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:6px;}

/* ---- R4 SOCIAL PROOF ---- */
.social{padding:96px 25px 80px;text-align:center;}
.social__h{font-size:clamp(24px,2.6vw,34px);font-weight:600;line-height:1.18;letter-spacing:-.4px;color:var(--ink-2);max-width:760px;margin:0 auto;}
.social__h b{color:var(--ink);font-weight:700;}
/* MARQUEES: customer photos + reviews scroll left, pause on hover */
.social__marquee{margin-top:44px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.social__marquee .mq-track{display:flex;gap:14px;width:max-content;animation:mqscroll 64s linear infinite;}
@media(hover:hover){.social__marquee:hover .mq-track,.social__reviews:hover .mq-track{animation-play-state:paused;}}
.social__marquee .media-slot{flex:0 0 230px;aspect-ratio:3/4;}
.social__reviews{margin-top:16px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.social__reviews .mq-track{display:flex;gap:16px;width:max-content;animation:mqscroll 52s linear infinite;text-align:left;}
@keyframes mqscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* fallback layout before JS wraps loose rows (pages on old grid markup) */
.social__marquee:not(:has(.mq-track)){display:flex;gap:14px;}
.social__reviews:not(:has(.mq-track)){display:flex;gap:16px;}
/* marquees intentionally keep running under reduced-motion (Joakim 2026-07-02) */
.rev{flex:0 0 372px;background:var(--card);border-radius:var(--radius);padding:24px;}
.rev__stars{color:#f5a623;font-size:14px;letter-spacing:2px;}
.rev__q{font-size:14px;line-height:1.55;color:var(--ink);margin-top:12px;font-weight:500;}
.rev__by{display:flex;align-items:center;gap:10px;margin-top:16px;}
.rev__av{width:38px;height:38px;border-radius:50%;background:var(--card-grey);flex:none;object-fit:cover;}
/* Ice monogram avatar — used wherever no genuine customer face exists (never a founder portrait). */
.rev__av--mono{display:inline-flex;align-items:center;justify-content:center;background:#cefbff;color:#0d0f12;font-size:14px;font-weight:700;letter-spacing:.01em;box-shadow:inset 0 0 0 1px rgba(13,15,18,.06);object-fit:initial;}
.rev__nm{font-size:13px;font-weight:600;color:var(--ink);} .rev__nm span{display:block;font-weight:500;color:var(--ink-2);font-size:12px;}
.social__press{display:flex;align-items:center;justify-content:center;gap:42px;flex-wrap:wrap;margin-top:52px;opacity:.7;}
.social__press img{height:26px;width:auto;}

/* ---- R5 INGREDIENT BREAKDOWN (carousel) ---- */
.ingbd{padding:30px 0 90px;}
.ingbd__head{max-width:var(--maxw);margin:0 auto;padding:0 25px;display:grid;grid-template-columns:1fr 1fr auto;gap:30px;align-items:start;}
.ingbd__head h2{font-size:clamp(28px,3.2vw,42px);font-weight:600;letter-spacing:-.45px;color:var(--ink);}
.ingbd__line{height:2px;width:120px;background:var(--ink);margin-top:14px;}
.ingbd__intro{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:420px;align-self:center;}
.ingbd__arrows{display:flex;gap:10px;align-self:center;}
.ingbd__arrows button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:18px;cursor:pointer;}
.ingbd__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:34px 25px 8px;scrollbar-width:none;}
.ingbd__track::-webkit-scrollbar{display:none;}
.ingcard{position:relative;flex:0 0 350px;height:500px;scroll-snap-align:start;perspective:1500px;cursor:pointer;color:#fff;} /* taller, less square (Joakim 2026-07-02) */
.ingcard__inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.15,.2,1);}
.ingcard.flipped .ingcard__inner{transform:rotateY(180deg);}
.ingcard__face{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.ingcard__front{background:linear-gradient(160deg,#4a5560,#2b2e33);}
.ingcard__front::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,18,24,.82) 0%,rgba(14,18,24,.4) 30%,rgba(14,18,24,.08) 52%,rgba(14,18,24,.5) 100%);}
.ingcard__back{background:linear-gradient(160deg,#2b2e33,#1c2126);transform:rotateY(180deg);padding:30px;display:flex;flex-direction:column;}
.ingcard__lbl{position:absolute;top:18px;left:20px;right:20px;z-index:2;display:flex;justify-content:space-between;font-size:11px;font-weight:600;opacity:.65;letter-spacing:.04em;}
.ingcard__nm{position:absolute;top:42px;left:20px;z-index:2;font-size:28px;font-weight:600;letter-spacing:-.4px;}
.ingcard__dose{position:absolute;top:82px;left:20px;z-index:2;font-size:13px;font-weight:500;opacity:.85;max-width:230px;}
.ingcard__plus{position:absolute;bottom:20px;left:20px;z-index:2;width:54px;height:54px;border-radius:50%;background:rgba(19,20,23,.4);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;}
.ingcard:hover .ingcard__plus{background:rgba(206,251,255,.25);}
.ingcard__back h4{font-size:26px;font-weight:600;letter-spacing:-.4px;}
.ingcard__back .b{font-size:14px;line-height:1.6;color:rgba(255,255,255,.82);margin-top:12px;}
.ingcard__back .meta{font-size:12px;font-weight:600;color:var(--ice);margin-top:auto;letter-spacing:.02em;}
.ingcard__back .close{position:absolute;top:16px;right:20px;font-size:22px;color:rgba(255,255,255,.55);line-height:1;}

/* ---- R6 BASED ON RESEARCH (mauve) ---- */
.research{padding:26px 25px 0;}
.research__card{position:relative;max-width:1870px;margin:0 auto;border-radius:24px;overflow:hidden;background:linear-gradient(120deg,#b7a2ac 0%,#c8b7bf 55%,#a7b0bd 100%);padding:64px 60px;color:#fff;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;min-height:440px;}
.research__stats{display:flex;flex-direction:column;gap:16px;max-width:380px;}
.research__stat{background:rgba(27,29,33,.32);backdrop-filter:blur(12px);border-radius:var(--radius);padding:24px;}
.research__stat .n{font-size:40px;font-weight:600;letter-spacing:-.5px;line-height:1;} .research__stat .n span{font-size:20px;}
.research__stat h4{font-size:15px;font-weight:600;margin-top:10px;} .research__stat p{font-size:13px;line-height:1.5;color:rgba(255,255,255,.8);margin-top:5px;}
.research__right h2{font-size:clamp(30px,3.4vw,44px);font-weight:600;letter-spacing:-.45px;line-height:1.02;}
.research__right p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.88);margin-top:14px;max-width:440px;}
.research__cta{display:inline-flex;align-items:center;gap:8px;margin-top:24px;background:var(--ice);color:var(--ink);font-size:15px;font-weight:600;padding:14px 26px;border-radius:var(--pill);}

/* ---- ACCORDION (native details/summary) ---- */
.ac{border-top:1px solid var(--line);}
.ac summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-size:16px;font-weight:600;color:var(--ink);}
.ac summary::-webkit-details-marker{display:none;}
.ac summary::after{content:"+";font-size:20px;font-weight:400;color:var(--ink);transition:transform .25s;}
.ac[open] summary::after{content:"\2212";}
.ac__body{font-size:14px;line-height:1.6;color:var(--ink-2);padding:0 0 18px;max-width:520px;}

/* ---- R7 OUR PROMISE ---- */
.promise{padding:90px 25px;}
.promise__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.promise__media{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.promise__media .a,.promise__media .b{aspect-ratio:1/1;} .promise__media .c{grid-column:1 / -1;aspect-ratio:2.3/1;}
.promise__r h2{font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-.4px;color:var(--ink);}
.promise__r .lead{font-size:15px;line-height:1.55;color:var(--ink-2);margin:14px 0 22px;max-width:440px;}
.promise__cta{margin-top:24px;background:rgba(222,224,221,.6);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border:1px solid rgba(255,255,255,.5);}

/* ---- R11 COMMUNITY CTA ---- */
.community{padding:16px 25px 0;}
.community__card{position:relative;max-width:1870px;margin:0 auto;height:520px;border-radius:24px;overflow:hidden;}
.community__bg{position:absolute;inset:0;background:linear-gradient(160deg,#c7ccd2,#aab2bb);}
.community__tint{position:absolute;inset:0;background:linear-gradient(105deg,rgba(27,29,33,.6),rgba(27,29,33,.15) 55%,transparent);}
.community__c{position:absolute;left:60px;bottom:54px;z-index:2;color:#fff;max-width:520px;}
.community__c h2{font-size:clamp(28px,3.2vw,42px);font-weight:600;letter-spacing:-.4px;line-height:1.05;}
.community__c p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.88);margin-top:14px;}

/* ---- R10 FAQ (2-col) ---- */
.faq{padding:90px 25px;}
.faq__grid{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:start;}
.faq__l h2{font-size:clamp(28px,3vw,40px);font-weight:600;letter-spacing:-.4px;color:var(--ink);margin-bottom:18px;}
.faq__media{border-radius:24px;min-height:420px;}

/* ---- R12 LIFESTYLE STRIP ---- */
.lifestrip{display:flex;gap:14px;padding:16px 25px 0;overflow:hidden;}
.lifestrip .media-slot{flex:1;aspect-ratio:1/1.08;}

/* ---- "THUNDER HONEY IN THE WILD" — shared Moby-style IG-story marquee ----
   Uniform 9:16 story cards, continuous horizontal auto-scroll, rounded, subtle
   @handle tag. Injected site-wide by figma-site.js just above the footer; the
   home page renders it inline. Customer/event IG-story screenshots only — never
   founder portraits. Palette: ice #cefbff + black + white + grey only. */
.igstrip{margin:0 auto;padding:54px 0 8px;overflow:hidden;}
.igstrip--global{padding:64px 0 18px;background:var(--page,#ebeef1);}
/* Moby-style CENTERED header stacked above the marquee row */
.igstrip__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin:0 auto 28px;padding:0 25px;max-width:760px;}
.igstrip__eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#0047AB;margin:0;}
.igstrip__h{font-size:clamp(26px,3.2vw,40px);font-weight:600;letter-spacing:-.4px;color:var(--ink);margin:0;}
.igstrip__sub{font-size:clamp(14px,1.5vw,17px);font-weight:500;line-height:1.5;color:var(--ink-2);margin:0;max-width:54ch;}
.igstrip__viewport{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.igstrip__track{display:flex;gap:16px;width:max-content;padding:6px 25px;animation:igwild 80s linear infinite;}
.igstrip:hover .igstrip__track{animation-play-state:paused;}
/* igstrip marquee intentionally keeps running under reduced-motion (Joakim 2026-07-02) */
.igcard{flex:0 0 auto;width:232px;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#0c0f13;position:relative;box-shadow:0 16px 38px rgba(8,24,55,.14);}
.igcard img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .5s ease;}
.igcard:hover img{transform:scale(1.04);}
/* solid tint (no backdrop-filter): 32 of these chips ride inside a transform-animated
   marquee, so a blur here forced a continuous per-frame backdrop resample on mobile.
   The darker solid fill reads near-identically at 11px text. */
.igcard__tag{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;letter-spacing:.01em;color:#fff;background:rgba(8,12,18,.72);border:1px solid rgba(255,255,255,.16);padding:5px 10px;border-radius:100px;}
.igcard__tag .dot{width:5px;height:5px;border-radius:50%;background:#cefbff;}
@keyframes igwild{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(max-width:560px){.igcard{width:188px;}}

/* ---- FOOTER ---- */
.foot{background:var(--ink);color:#fff;border-radius:24px 24px 0 0;margin-top:26px;padding:56px 60px 28px;overflow:hidden;}
.foot__wm{font-size:clamp(44px,8vw,120px);font-weight:700;letter-spacing:-.03em;line-height:1;white-space:nowrap;}
.foot__wm .ghost{color:rgba(255,255,255,.12);}
.foot__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:48px;padding-top:34px;border-top:1px solid rgba(255,255,255,.12);}
.foot__col h5{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px;}
.foot__col a{display:block;font-size:14px;color:rgba(255,255,255,.85);padding:5px 0;}
.foot__col a:hover{color:#fff;}
.foot__news .nh{font-size:18px;font-weight:600;color:#fff;margin-bottom:8px;}
.foot__news p{font-size:13px;color:rgba(255,255,255,.7);line-height:1.5;margin-bottom:14px;}
.foot__form{display:flex;background:rgba(255,255,255,.1);border-radius:var(--pill);padding:5px 5px 5px 18px;align-items:center;}
.foot__form input{flex:1;background:none;border:0;color:#fff;font-size:14px;outline:none;}
.foot__form button{background:var(--ice);color:var(--ink);border:0;border-radius:var(--pill);padding:11px 20px;font-size:13px;font-weight:600;cursor:pointer;}
.foot__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px;font-size:12px;color:rgba(255,255,255,.5);}
.foot__bottom a{color:rgba(255,255,255,.5);}
/* ---- Footer rolling wordmark marquee REMOVED (per CEO). The .foot__marquee
   markup is still baked into page bodies, so hide it site-wide here. ---- */
.foot__marquee{display:none !important;}

/* ===================================================================
   PDP — PRODUCT HERO / BUY BOX (3431-676)
   =================================================================== */
.pdp-hero{background:var(--page2);padding:25px 110px;display:flex;flex-direction:column;gap:50px;}
.pdp-hero__row{display:flex;gap:50px;align-items:flex-start;max-width:1700px;margin:0 auto;width:100%;}
/* gallery */
.pdp-gal{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:25px;}
.pdp-gal__cap{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;width:calc(100% - 28px);display:flex;align-items:center;justify-content:space-between;gap:24px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);background:var(--glass-fill);border:var(--glass-border);box-shadow:var(--glass-shadow);border-radius:var(--radius);padding:22px 25px;}
.pdp-gal__cap h4{font-size:20px;font-weight:600;letter-spacing:-.22px;color:rgba(43,46,51,.65);line-height:1.05;}
.pdp-gal__cap p{font-size:13px;line-height:1.5;color:rgba(43,46,51,.5);max-width:600px;}
.pdp-gal__subs{display:flex;gap:25px;}
.pdp-gal__subs .media-slot{flex:1;height:421px;border:1px solid #e5e5e5;}
/* buy box */
.buybox{width:600px;flex:none;display:flex;flex-direction:column;gap:30px;padding:26px 0;}
.bb__stars{display:flex;align-items:center;gap:10px;}
.bb__stars .s{color:#f5a623;font-size:16px;letter-spacing:2px;}
.bb__stars .n{font-size:14px;font-weight:600;color:#304051;letter-spacing:.14px;}
.bb__title{font-size:40px;font-weight:600;line-height:1.02;letter-spacing:-.44px;color:var(--ink);}
.bb__title .tm{color:rgba(43,46,51,.38);}
.bb__lead{font-size:16px;font-weight:500;line-height:1.5;letter-spacing:-.176px;color:var(--ink);}
.bb__divider{height:1px;background:rgba(8,27,56,.15);}
.bb__ptype{font-size:18px;font-weight:600;letter-spacing:-.198px;color:var(--ink);margin-bottom:-10px;}
/* subscription card */
.opt{border-radius:10px;position:relative;}
.opt--sub{border:1px solid var(--ink);background:#fff;box-shadow:1px 2px 7.5px rgba(28,33,38,.15);}
.opt--sub .opt__head{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--ink-deep);padding:27px 25px 20px;border-radius:10px 10px 0 0;border-bottom:1px solid #000;}
.opt__radio{width:22px;height:22px;border-radius:50%;border:1.1px solid var(--ice);display:flex;align-items:center;justify-content:center;flex:none;}
.opt__radio i{width:12px;height:12px;border-radius:50%;background:var(--ice);display:block;}
.opt__lname{display:flex;align-items:center;gap:15px;}
.opt__lname b{font-size:20px;font-weight:600;letter-spacing:-.22px;color:#f6feff;}
.opt__price{text-align:right;}
.opt__price .was{font-size:16px;font-weight:600;text-decoration:line-through;color:rgba(246,254,255,.4);margin-right:10px;}
.opt__price .now{font-size:20px;font-weight:600;color:#f6feff;}
.opt__price .per{font-size:12px;font-weight:600;color:rgba(206,251,255,.75);margin-top:5px;}
.opt__badge{position:absolute;top:-14px;right:60px;background:linear-gradient(148deg,#cefbff 25%,#68b6bd 92%);border:1px solid #93cfd4;color:#1f5f65;font-size:12px;font-weight:700;letter-spacing:-.24px;padding:7px 15px;border-radius:var(--pill);}
.opt__benefits{display:flex;gap:25px;padding:20px 25px;}
.opt__bcol{flex:1;min-width:0;}
.opt__bcol h6{font-size:14px;font-weight:600;letter-spacing:-.28px;color:rgba(43,46,51,.5);margin-bottom:15px;}
.opt__blist{display:flex;flex-direction:column;gap:10px;}
.opt__blist li{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600;letter-spacing:-.28px;color:#3f5055;list-style:none;}
.opt__blist li::before{content:"";width:13px;height:9px;flex:none;background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 9' fill='none' stroke='%233f5055' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 4.5L4.5 8L12 1'/></svg>");}
.opt__freq{background:#f9feff;border:2px solid rgba(1,11,26,.75);border-radius:10px;display:flex;align-items:center;justify-content:space-between;padding:15px;font-size:16px;font-weight:600;letter-spacing:-.176px;color:var(--ink);}
.opt__freq .chev{font-size:13px;color:var(--ink);}
.opt__billed{font-size:12px;font-weight:600;letter-spacing:-.132px;color:rgba(15,37,39,.75);margin-top:10px;}
/* one-time */
.opt--once{border:1px solid #9c9c9c;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 25px;}
.opt--once .opt__radio{border-color:var(--ink);}
.opt--once .l b{font-size:20px;font-weight:600;letter-spacing:-.22px;color:var(--ink);display:block;}
.opt--once .l span{font-size:14px;font-weight:600;color:rgba(43,46,51,.5);letter-spacing:-.28px;}
.opt--once .l{display:flex;align-items:flex-start;gap:15px;}
.opt--once .opt__price .now{color:var(--ink);}
.opt--once .opt__price .per{color:rgba(43,46,51,.75);}
/* add to cart + guarantee */
.bb__cart{display:flex;flex-direction:column;gap:17px;align-items:center;}
.bb__atc{width:100%;background:var(--ice);color:var(--ink);border:0;border-radius:var(--pill);padding:24px 30px;font-size:20px;font-weight:700;letter-spacing:-.22px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:background .2s;}
.bb__atc:hover{background:var(--ice-h);}
.bb__guar{display:flex;gap:12px;align-items:flex-start;border:1px solid #9fd9e0;background:linear-gradient(85deg,#eafdff 70%,#cdf3f7 100%);border-radius:12px;padding:16px 18px;}
.bb__guar svg{width:24px;height:24px;color:#1f5f65;flex:none;}
.bb__guar b{display:block;font-size:16px;font-weight:600;letter-spacing:-.176px;color:var(--ink);}
.bb__guar span{font-size:12.5px;font-weight:500;color:var(--ink-2);}

/* ---- PDP 3-tier purchase options (3-Month Journey / Monthly / One-time) ---- */
.bb__opts{display:flex;flex-direction:column;gap:14px;margin-top:18px;}
.popt{position:relative;border-radius:16px;cursor:pointer;display:block;}
.popt--sel{background:linear-gradient(160deg,#2b2e33,#1b1d21);color:#fff;padding:26px 28px;box-shadow:0 18px 40px rgba(27,29,33,.18);}
.popt--plain{background:#fff;border:1px solid var(--line);padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.popt--plain.is-active{border-color:var(--ink);box-shadow:0 8px 22px rgba(43,46,51,.1);}
.popt__save{position:absolute;top:-13px;right:24px;background:linear-gradient(148deg,#cefbff 25%,#9fe9ef 92%);color:#1f5f65;font-size:12px;font-weight:700;letter-spacing:.02em;padding:6px 14px;border-radius:var(--pill);}
.popt__top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;}
.popt__l{display:flex;gap:14px;align-items:flex-start;}
.radio{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ice);display:flex;align-items:center;justify-content:center;flex:none;margin-top:2px;}
.popt--plain .radio{border-color:#c2c7cd;}
.popt--plain.is-active .radio{border-color:var(--ice);}
.radio i{width:12px;height:12px;border-radius:50%;background:var(--ice);display:block;}
.popt__pop{display:inline-block;background:var(--ice);color:#1a2b2e;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--pill);margin-bottom:10px;}
.popt__name{font-size:24px;font-weight:600;letter-spacing:-.3px;}
.popt--plain .popt__name{color:var(--ink);font-size:21px;}
.popt__sub{font-size:14px;margin-top:4px;}
.popt--sel .popt__sub{color:rgba(255,255,255,.72);} .popt--plain .popt__sub{color:var(--ink-2);}
.popt__price{text-align:right;flex:none;}
.popt__was{font-size:15px;text-decoration:line-through;opacity:.5;}
.popt__now{font-size:24px;font-weight:700;letter-spacing:-.3px;} .popt__now small{font-size:14px;font-weight:600;opacity:.7;}
.popt--plain .popt__now{color:var(--ink);}
.popt__per{font-size:12px;margin-top:4px;} .popt--sel .popt__per{color:rgba(206,251,255,.8);} .popt--plain .popt__per{color:var(--ink-2);}
.popt__div{height:1px;background:rgba(255,255,255,.14);margin:22px 0;}
.popt__wyg{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:14px;}
.popt__list{list-style:none;display:flex;flex-direction:column;gap:11px;}
.popt__list li{display:flex;gap:12px;font-size:15px;color:rgba(255,255,255,.92);align-items:flex-start;}
.popt__list li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:7px;flex:none;}
.popt__fine{font-size:13px;color:rgba(255,255,255,.45);margin-top:18px;}
/* pdp faq accordion (in sidebar) */
.bb__faq .ac summary{font-size:20px;line-height:1.6;}

/* ===================================================================
   R9 HOW IT WORKS (3431-1183, exact) · R8 COMPARISON · R-TIMELINE · R13 REVIEWS
   =================================================================== */

/* ---- R9 HOW IT WORKS ---- */
.howto{background:var(--page2);padding:75px 25px;display:flex;flex-direction:column;gap:50px;align-items:center;}
.howto__head{text-align:center;max-width:734px;}
.howto__head h2{font-size:clamp(30px,3.6vw,45px);font-weight:600;letter-spacing:-.45px;line-height:.98;color:var(--ink);}
.howto__head p{font-size:20px;font-weight:500;line-height:1.5;letter-spacing:-.22px;color:var(--ink);margin-top:25px;}
.howto__steps{display:flex;width:100%;max-width:1700px;border:1px solid rgba(92,99,107,.15);border-radius:var(--radius);overflow:hidden;background:linear-gradient(87deg,#f1f3f5 33%,#c9ced4 99%);}
.howto__step{flex:1;min-width:0;height:571px;display:flex;flex-direction:column;justify-content:space-between;padding:25px 25px 50px;}
.howto__step + .howto__step{border-left:1px solid rgba(92,99,107,.15);}
.howto__shead{display:flex;justify-content:space-between;font-size:16px;font-weight:600;color:rgba(1,11,26,.25);}
.howto__sbody{display:flex;flex-direction:column;align-items:center;gap:25px;}
.howto__simg{width:100%;max-width:400px;height:285px;border-radius:12px;}
.howto__step h3{font-size:35px;font-weight:600;letter-spacing:-.385px;color:var(--ink);}
.howto__step .d{font-size:18px;font-weight:600;line-height:1.5;letter-spacing:-.198px;color:var(--ink-2);text-align:center;max-width:400px;}
.howto__cta{display:inline-flex;align-items:center;gap:15px;background:var(--ink);border-radius:var(--pill);padding:10px 35px 10px 10px;}
.howto__cta .pill{background:var(--ice);color:var(--ink);height:58px;display:flex;align-items:center;padding:0 35px;border-radius:var(--pill);font-size:18px;font-weight:600;letter-spacing:-.198px;}
.howto__cta .pill:hover{background:var(--ice-h);}
.howto__cta .note{color:#fff;font-size:16px;font-weight:700;letter-spacing:-.176px;}

/* ---- R8 COMPARISON TABLE (3431-1263, exact: dark image-bg + frosted panel) ---- */
.compare{padding:15px 25px;}
.compare__card{position:relative;display:flex;gap:50px;align-items:stretch;border-radius:var(--radius);overflow:hidden;padding:50px 85px 75px;background:#5c636b;max-width:1870px;margin:0 auto;}
.compare__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.compare__card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,28,52,.66) 0%,rgba(18,28,52,.42) 45%,rgba(18,28,52,.30) 100%);z-index:1;}
.compare__text{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:25px 0;color:#fff;position:relative;z-index:2;}
.compare__text h2{font-size:clamp(30px,3.4vw,45px);font-weight:600;letter-spacing:-.45px;line-height:.98;}
.compare__text p{font-size:20px;font-weight:500;line-height:1.5;letter-spacing:-.22px;color:rgba(255,255,255,.9);}
.compare__panel{position:relative;z-index:2;display:flex;gap:50px;align-items:stretch;width:1200px;max-width:64%;-webkit-backdrop-filter:var(--glass-dark-blur);backdrop-filter:var(--glass-dark-blur);background:var(--glass-dark-fill);border:var(--glass-dark-border);box-shadow:var(--glass-dark-shadow);border-radius:35px;padding:25px 35px;overflow:hidden;}
.compare__rows{width:279px;flex:none;display:flex;flex-direction:column;padding:25px 0;}
.compare__rows .rh{height:44px;}
.compare__rows li{list-style:none;height:75px;display:flex;align-items:center;font-size:18px;font-weight:700;letter-spacing:-.198px;color:#fff;line-height:1.15;}
.compare__cols{flex:1;display:flex;gap:25px;}
.compare__col{flex:1;display:flex;flex-direction:column;align-items:center;border-radius:var(--radius);padding:0 15px 50px;}
.compare__col--th{background:rgba(206,251,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(206,251,255,.10);}
.compare__col h4{height:44px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;letter-spacing:-.198px;color:#fff;text-align:center;padding-top:25px;}
.compare__col .m{height:75px;display:flex;align-items:center;justify-content:center;}
.mark{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.mark--y{background:var(--ice);color:var(--ink);}
.mark--n{border:1.5px solid rgba(255,255,255,.35);color:rgba(255,255,255,.45);}
.mark svg{width:14px;height:14px;}

/* ---- RESEARCH TIMELINE (3431-1219, exact: timeline left + image gallery right) ---- */
.tl{background:var(--page2);padding:75px 25px;}
.tl__wrap{max-width:1410px;margin:0 auto;display:flex;gap:50px;align-items:stretch;}
.tl__info{flex:1;min-width:0;display:flex;flex-direction:column;gap:50px;}
.tl__head{max-width:685px;}
.tl__head h2{font-size:clamp(30px,3.6vw,45px);font-weight:600;letter-spacing:-.45px;line-height:.98;color:var(--ink);}
.tl__head p{font-size:20px;font-weight:500;line-height:1.5;letter-spacing:-.22px;color:var(--ink);margin-top:25px;}
.tl__line{position:relative;display:flex;flex-direction:column;gap:45px;}
.tl__line::before{content:"";position:absolute;left:8px;top:28px;bottom:28px;width:3px;background:linear-gradient(var(--ice),#7fbfe0,var(--blue));border-radius:2px;}
.tl__item{display:flex;gap:35px;align-items:flex-start;padding:9px 0;position:relative;}
.tl__point{display:flex;align-items:center;gap:25px;flex:none;}
.tl__dot{width:18px;height:18px;border-radius:50%;background:var(--ice);border:3px solid var(--blue);box-shadow:0 0 0 3px rgba(0,71,171,.12);flex:none;}
.tl__pill{flex:none;display:inline-flex;align-items:center;justify-content:center;height:34px;min-width:128px;padding:0 18px;border-radius:var(--pill);background:var(--ice);color:#0a3a6b;font-size:14px;font-weight:700;letter-spacing:-.1px;white-space:nowrap;}
.tl__d h4{font-size:20px;font-weight:600;line-height:1.6;color:#010b1a;}
.tl__d p{font-size:18px;font-weight:500;line-height:1.4;color:var(--ink);margin-top:5px;}
.tl__imgs{flex:1;min-width:0;display:flex;flex-direction:column;gap:25px;}
.tl__main{flex:1;min-height:320px;border-radius:var(--radius);}
.tl__gal{display:flex;gap:25px;height:275px;}
.tl__gal .a{width:204px;flex:none;border-radius:var(--radius);}
.tl__gal .b{flex:1;border-radius:var(--radius);}

/* ---- R13 MEMBER REVIEWS ---- */
.mrev{padding:90px 25px;}
.mrev__grid{display:grid;grid-template-columns:320px 1fr;gap:40px;max-width:1700px;margin:0 auto;align-items:start;}
.mrev__sum{background:var(--card);border-radius:var(--radius);padding:32px;position:sticky;top:20px;}
.mrev__big{font-size:64px;font-weight:700;letter-spacing:-1px;color:var(--ink);line-height:1;}
.mrev__sstars{color:#f5a623;font-size:18px;letter-spacing:3px;margin:8px 0;}
.mrev__count{font-size:14px;color:var(--ink-2);}
.mrev__bars{margin-top:20px;display:flex;flex-direction:column;gap:8px;}
.mrev__bar{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink-2);}
.mrev__bar .track{flex:1;height:6px;border-radius:3px;background:var(--card-grey);overflow:hidden;}
.mrev__bar .fill{height:100%;background:var(--ink);}
.mrev__list{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.mrev__card{background:var(--card);border-radius:var(--radius);padding:24px;}
.mrev__card .s{color:#f5a623;font-size:14px;letter-spacing:2px;}
.mrev__card h5{font-size:15px;font-weight:600;color:var(--ink);margin:10px 0 6px;}
.mrev__card p{font-size:14px;line-height:1.55;color:var(--ink-2);}
.mrev__card .who{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:12px;font-weight:600;color:var(--ink);}
.mrev__card .who .av{width:28px;height:28px;border-radius:50%;background:var(--card-grey);}

/* ---- INGREDIENT GRID (3431-3024, exact: header card + 4x3 flip grid) ---- */
.igrid{background:var(--page2);padding:0 25px 15px;}
.igrid__head{background:#e0e4e8;border-radius:var(--radius);padding:75px 85px;display:flex;flex-direction:column;gap:75px;}
.igrid__top{display:flex;gap:50px;align-items:flex-end;}
.igrid__title{flex:1;min-width:0;}
.igrid__bc{font-size:14px;font-weight:600;color:#081b38;opacity:.5;}
.igrid__bc .dim{color:rgba(8,27,56,.3);}
.igrid__title h1{font-size:clamp(38px,4.4vw,60px);font-weight:600;letter-spacing:-.6px;line-height:1.02;color:var(--ink);max-width:658px;margin-top:20px;}
.igrid__intro{flex:1;min-width:0;font-size:clamp(18px,1.7vw,25px);font-weight:500;line-height:1.5;letter-spacing:-.275px;color:var(--ink);}
.igrid__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;}
.igrid__card{position:relative;height:520px;border-radius:var(--radius);perspective:1600px;cursor:pointer;}
.igrid__inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,.15,.2,1);}
.igrid__card.flipped .igrid__inner{transform:rotateY(180deg);}
.igrid__face{position:absolute;inset:0;border-radius:var(--radius);overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.igrid__front{background:linear-gradient(160deg,#c4cad1,#9aa2ab);display:flex;flex-direction:column;justify-content:space-between;padding:25px;color:#eceff2;}
.igrid__front::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,18,24,.92) 0%,rgba(14,18,24,.6) 26%,rgba(14,18,24,.14) 46%,rgba(14,18,24,0) 62%,rgba(14,18,24,.5) 100%);}
.igrid__ftop{position:relative;z-index:2;display:flex;flex-direction:column;gap:25px;}
.igrid__fhead{display:flex;justify-content:space-between;opacity:.7;font-size:16px;font-weight:600;color:#eef1f4;}
.igrid__ftext h3{font-size:35px;font-weight:600;letter-spacing:-.385px;text-shadow:0 1px 16px rgba(8,12,18,.6);}
.igrid__ftext p{font-size:18px;font-weight:600;line-height:1.5;margin-top:10px;text-shadow:0 1px 14px rgba(8,12,18,.55);}
.igrid__add{position:relative;z-index:2;width:68px;height:68px;border-radius:34px;background:rgba(43,46,51,.5);backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;font-weight:300;align-self:flex-start;border:0;cursor:pointer;transition:background .2s;}
.igrid__card:hover .igrid__add{background:rgba(206,251,255,.3);}
.igrid__back{background:linear-gradient(160deg,#2b2e33,#1c2126);transform:rotateY(180deg);padding:30px;display:flex;flex-direction:column;color:#fff;}
.igrid__back h3{font-size:30px;font-weight:600;letter-spacing:-.4px;}
.igrid__back p{font-size:15px;line-height:1.6;color:rgba(255,255,255,.82);margin-top:14px;}
.igrid__back .meta{margin-top:auto;font-size:13px;font-weight:600;color:var(--ice);}
.igrid__back .close{position:absolute;top:18px;right:22px;font-size:24px;color:rgba(255,255,255,.5);}

/* ---- R14 STORIES / TESTIMONIALS (design-system) ---- */
.stories{padding:90px 25px;}
.stories__head{max-width:760px;margin:0 auto 44px;text-align:center;}
.stories__head h2{font-size:clamp(28px,3.2vw,42px);font-weight:600;letter-spacing:-.45px;color:var(--ink);}
.stories__head p{font-size:16px;color:var(--ink-2);margin-top:12px;line-height:1.5;}
.stories__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1700px;margin:0 auto;}
.story{position:relative;border-radius:var(--radius);overflow:hidden;min-height:440px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;color:#fff;background:linear-gradient(160deg,#3a4049,#23262b);}
.story::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(20,21,24,.7));}
.story__tag{position:absolute;top:22px;left:24px;z-index:2;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ice);}
.story__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.18);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;}
.story__play svg{width:22px;height:22px;color:#fff;margin-left:3px;}
.story__c{position:relative;z-index:2;}
.story__c h4{font-size:20px;font-weight:600;letter-spacing:-.2px;}
.story__c p{font-size:14px;line-height:1.55;color:rgba(255,255,255,.82);margin-top:8px;}
.story__by{font-size:12px;font-weight:600;color:rgba(255,255,255,.7);margin-top:14px;}

/* ---- ABOUT: HERO ---- */
.abhero{padding:14px 25px 0;}
.abhero__card{position:relative;max-width:1870px;margin:0 auto;height:560px;border-radius:24px;overflow:hidden;display:flex;align-items:flex-end;}
.abhero__bg{position:absolute;inset:0;background:linear-gradient(150deg,#3a4049,#1c2126);}
.abhero__tint{position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,21,24,.65),rgba(20,21,24,.1) 60%);}
.abhero__c{position:relative;z-index:2;padding:0 60px 60px;color:#fff;}
.abhero__c h1{font-size:clamp(36px,5vw,70px);font-weight:600;letter-spacing:-.7px;line-height:1.0;max-width:920px;}

/* ---- ABOUT: OUR STORY TIMELINE ---- */
.ostory{padding:90px 25px;}
.ostory__head{max-width:1700px;margin:0 auto 46px;}
.ostory__head h2{font-size:clamp(30px,3.6vw,45px);font-weight:600;letter-spacing:-.45px;color:var(--ink);}
.ostory__head p{font-size:18px;color:var(--ink-2);margin-top:14px;max-width:640px;line-height:1.5;}
.tlrow{max-width:1700px;margin:0 auto;display:flex;flex-direction:column;gap:24px;}
.tlentry{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;background:var(--card);border-radius:var(--radius);overflow:hidden;}
.tlentry__img{min-height:380px;}
.tlentry:nth-child(even) .tlentry__img{order:2;}
.tlentry__txt{padding:52px;display:flex;flex-direction:column;justify-content:center;}
.tlentry__yr{font-size:48px;font-weight:700;letter-spacing:-.5px;color:var(--ink);opacity:.22;line-height:1;}
.tlentry__txt h3{font-size:clamp(24px,2.6vw,35px);font-weight:600;letter-spacing:-.385px;color:var(--ink);margin:10px 0 14px;}
.tlentry__txt p{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:460px;}
.signature{max-width:1700px;margin:34px auto 0;text-align:right;}
.signature .sig{font-family:'Inter',cursive;font-size:30px;font-style:italic;font-weight:500;color:var(--ink);opacity:.7;}
.signature .who{font-size:14px;color:var(--ink-2);margin-top:4px;}

/* ---- ABOUT: FOUNDERS MISSION ---- */
.mission{padding:26px 25px 0;}
.mission__card{position:relative;max-width:1870px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;border-radius:24px;overflow:hidden;background:linear-gradient(160deg,#2b2e33,#1c2126);color:#fff;min-height:520px;}
.mission__img{min-height:520px;}
.mission__c{padding:64px;display:flex;flex-direction:column;justify-content:center;}
.mission__c h2{font-size:clamp(28px,3.6vw,48px);font-weight:600;letter-spacing:-.5px;line-height:1.05;}
.mission__c p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.82);margin-top:18px;max-width:480px;}
.mission__sign{margin-top:28px;font-size:14px;color:rgba(255,255,255,.7);}
.mission__sign b{color:#fff;font-weight:600;}

/* ---- BLOG: HERO + TABS ---- */
.jhero{padding:56px 25px 36px;max-width:1700px;margin:0 auto;}
.jhero h1{font-size:clamp(40px,6vw,70px);font-weight:600;letter-spacing:-.7px;line-height:1;color:var(--ink);}
.jhero p{font-size:18px;color:var(--ink-2);margin-top:16px;max-width:560px;line-height:1.5;}
.jtabs{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap;}
.jtab{font-size:14px;font-weight:600;padding:10px 18px;border-radius:var(--pill);border:1px solid var(--line);color:var(--ink);cursor:pointer;background:none;transition:background .18s ease,border-color .18s ease,color .18s ease;}
.jtab:hover{border-color:var(--ink);}
.jtab.active{background:var(--ice);color:#000;border-color:var(--ice);}
/* BLOG: FEATURED */
.featured{padding:0 25px;}
.featured__card{max-width:1700px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;border-radius:24px;overflow:hidden;background:var(--card);}
.featured__img{min-height:460px;}
.featured__c{padding:54px;display:flex;flex-direction:column;justify-content:center;}
.featured__cat{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.featured__c h2{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.4px;line-height:1.08;color:var(--ink);margin:14px 0;}
.featured__c p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:480px;}
.featured__meta{font-size:13px;color:var(--ink-2);margin-top:18px;}
.featured__link{margin-top:22px;align-self:flex-start;background:var(--ink);color:#fff;font-size:14px;font-weight:600;padding:13px 24px;border-radius:var(--pill);}
.featured__link:hover{background:var(--ink-deep);}
/* BLOG: ARTICLE GRID */
.artgrid{max-width:1700px;margin:0 auto;padding:70px 25px;}
.artgrid h2{font-size:clamp(24px,2.6vw,32px);font-weight:600;letter-spacing:-.35px;color:var(--ink);margin-bottom:28px;}
.artgrid__g{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.artcard{background:var(--card);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .25s,box-shadow .25s;}
.artcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(43,46,51,.12);}
.artcard__img{height:230px;}
.artcard__b{padding:24px;}
.artcard__cat{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.artcard__b h3{font-size:24px;font-weight:600;letter-spacing:-.3px;line-height:1.15;color:var(--ink);margin:10px 0;}
.artcard__meta{font-size:13px;color:var(--ink-2);}
/* BLOG: NEWSLETTER CTA */
.nlcta{padding:26px 25px 0;}
.nlcta__card{max-width:1870px;margin:0 auto;border-radius:24px;background:linear-gradient(160deg,#2b2e33,#1c2126);color:#fff;padding:64px;text-align:center;position:relative;overflow:hidden;}
.nlcta__card h2{font-size:clamp(28px,3.4vw,44px);font-weight:600;letter-spacing:-.45px;}
.nlcta__card p{font-size:16px;color:rgba(255,255,255,.8);margin:14px auto 26px;max-width:480px;line-height:1.5;}
.nlcta__form{display:flex;max-width:460px;margin:0 auto;background:rgba(255,255,255,.1);border-radius:var(--pill);padding:6px 6px 6px 20px;align-items:center;}
.nlcta__form input{flex:1;background:none;border:0;color:#fff;outline:none;font-size:15px;}
.nlcta__form button{background:var(--ice);color:var(--ink);border:0;border-radius:var(--pill);padding:13px 24px;font-weight:600;font-size:14px;cursor:pointer;}

/* ---- LANDING PAGE: HERO + PROBLEM/SOLUTION ---- */
.lphero{padding:14px 25px 0;}
.lphero__card{max-width:1870px;margin:0 auto;display:grid;grid-template-columns:1.1fr 1fr;border-radius:24px;overflow:hidden;background:var(--card);min-height:560px;}
.lphero__c{padding:64px;display:flex;flex-direction:column;justify-content:center;}
.lphero__eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.lphero__c h1{font-size:clamp(34px,4.2vw,56px);font-weight:600;letter-spacing:-.6px;line-height:1.02;color:var(--ink);margin:14px 0 16px;}
.lphero__c p{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:480px;}
.lphero__rev{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:14px;color:var(--ink-2);}
.lphero__rev .s{color:#f5a623;letter-spacing:2px;}
.lphero__cta{margin-top:26px;}
.lphero__img{min-height:560px;}
.psol{padding:80px 25px;max-width:1200px;margin:0 auto;}
.psol h2{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.4px;text-align:center;color:var(--ink);margin-bottom:36px;}
.psol__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.psol__col{border-radius:var(--radius);padding:34px;}
.psol__col--p{background:#e7e1e1;}
.psol__col--s{background:var(--ink);color:#fff;}
.psol__col h3{font-size:20px;font-weight:600;margin-bottom:18px;letter-spacing:-.2px;}
.psol__col--p h3{color:#7a6a6a;}
.psol__col ul{list-style:none;display:flex;flex-direction:column;gap:13px;}
.psol__col li{font-size:15px;line-height:1.5;display:flex;gap:11px;align-items:flex-start;}
.psol__col--p li{color:#7a6a6a;}
.psol__col--s li{color:rgba(255,255,255,.9);}
.psol__col li::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;margin-top:1px;}
.psol__col--p li::before{background:no-repeat center/10px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a6a6a' stroke-width='3' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");}
.psol__col--s li::before{background:var(--ice) no-repeat center/10px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2e33' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4L19 7'/></svg>");}

/* ---- RESPONSIVE ---- */
@media(max-width:1180px){.pdp-hero{padding:25px 40px;}.buybox{width:480px;}}
@media(max-width:980px){
  .hdr__nav,.hdr__right{width:auto;} .hdr__nav{display:none;}
  .hero__card{height:560px;} .hero__content .wrap2{padding:0 28px;}
  .pgrid__cards,.feat__cards{grid-template-columns:1fr;} .pgrid__head{flex-direction:column;align-items:flex-start;}
  .social__marquee{grid-template-columns:repeat(3,1fr);} .social__reviews{grid-template-columns:1fr 1fr;}
  .ingbd__head{grid-template-columns:1fr;} .research__card{grid-template-columns:1fr;}
  .promise__grid,.faq__grid{grid-template-columns:1fr;}
  .foot__grid{grid-template-columns:1fr 1fr;}
  .community__c{left:28px;right:28px;}
  .pdp-hero__row{flex-direction:column;align-items:stretch;} .pdp-gal,.buybox{width:100%;} .opt__benefits{flex-direction:column;}
  .howto__steps{flex-direction:column;} .howto__step + .howto__step{border-left:0;border-top:1px solid rgba(92,99,107,.15);} .howto__step{height:auto;}
  .tl__wrap{flex-direction:column;} .compare__card{flex-direction:column;} .compare__panel{width:100%;max-width:100%;}
  .mrev__grid{grid-template-columns:1fr;} .mrev__sum{position:static;} .mrev__list{grid-template-columns:1fr;}
  .igrid__top{flex-direction:column;align-items:flex-start;} .igrid__grid{grid-template-columns:1fr 1fr;} .igrid__head{padding:40px 28px;}
  .stories__grid{grid-template-columns:1fr;}
  .tlentry{grid-template-columns:1fr;} .tlentry:nth-child(even) .tlentry__img{order:0;} .tlentry__img{min-height:240px;} .tlentry__txt{padding:32px;}
  .mission__card{grid-template-columns:1fr;} .mission__img{min-height:280px;} .mission__c{padding:36px;}
  .abhero__c{padding:0 28px 36px;}
  .featured__card{grid-template-columns:1fr;} .featured__img{min-height:260px;} .featured__c{padding:32px;}
  .artgrid__g{grid-template-columns:1fr;} .nlcta__card{padding:40px 28px;}
  .lphero__card{grid-template-columns:1fr;} .lphero__img{min-height:280px;} .lphero__c{padding:36px;} .psol__grid{grid-template-columns:1fr;}
}

/* ===================================================================
   LISTICLE (editorial article) + VERSUS (comparison) layouts
   =================================================================== */
.lst-hero{padding:48px 25px 0;max-width:900px;margin:0 auto;}
.lst-hero .eyebrow,.vs-hero .eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.lst-hero h1{font-size:clamp(34px,4.6vw,56px);font-weight:600;letter-spacing:-.6px;line-height:1.04;margin:14px 0 16px;color:var(--ink);}
.lst-hero .dek{font-size:19px;line-height:1.5;color:var(--ink-2);}
.lst-hero .meta{font-size:13px;color:var(--ink-2);margin-top:16px;display:flex;gap:16px;flex-wrap:wrap;}
.lst-hero__img{max-width:1100px;margin:36px auto 0;border-radius:24px;overflow:hidden;aspect-ratio:16/9;position:relative;}
.lst{max-width:820px;margin:0 auto;padding:50px 25px 10px;}
.lst__intro{font-size:18px;line-height:1.7;color:var(--ink);margin-bottom:30px;}
.lst__item{display:flex;gap:24px;padding:34px 0;border-top:1px solid var(--line);}
.lst__num{flex:none;width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;}
.lst__b{flex:1;min-width:0;}
.lst__b h2{font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.3px;color:var(--ink);margin-bottom:12px;line-height:1.1;}
.lst__b p{font-size:16px;line-height:1.65;color:var(--ink-2);margin-bottom:12px;}
.lst__b p:last-child{margin-bottom:0;}
.lst__cta{background:linear-gradient(160deg,#2b2e33,#1c2126);color:#fff;border-radius:20px;padding:44px;text-align:center;margin:46px auto;max-width:820px;}
.lst__cta h3{font-size:28px;font-weight:600;letter-spacing:-.35px;margin-bottom:10px;}
.lst__cta p{color:rgba(255,255,255,.82);margin:0 auto 24px;max-width:520px;line-height:1.55;}

.vs-hero{padding:48px 25px 0;max-width:1000px;margin:0 auto;text-align:center;}
.vs-hero h1{font-size:clamp(32px,4.4vw,52px);font-weight:600;letter-spacing:-.6px;line-height:1.05;margin:14px 0 16px;color:var(--ink);}
.vs-hero .dek{font-size:18px;line-height:1.55;color:var(--ink-2);max-width:620px;margin:0 auto;}
.vs-verdict{max-width:1000px;margin:36px auto 0;background:var(--card);border-radius:20px;padding:32px 36px;display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center;text-align:center;}
.vs-verdict__col h4{font-size:20px;font-weight:600;color:var(--ink);}
.vs-verdict__col .price{font-size:14px;color:var(--ink-2);margin-top:6px;}
.vs-verdict__col--th h4{color:var(--accent);}
.vs-verdict__vs{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;}
.vs-rounds{max-width:1000px;margin:0 auto;padding:40px 25px 10px;}
.vs-round{padding:26px 0;border-top:1px solid var(--line);}
.vs-round h3{font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px;}
.vs-round__grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.vs-card{border-radius:16px;padding:26px;}
.vs-card--th{background:var(--ink);color:#fff;}
.vs-card--c{background:#e7e1e1;color:#5b5b5b;}
.vs-card h5{font-size:17px;font-weight:600;margin-bottom:10px;}
.vs-card--th h5{color:#fff;} .vs-card--c h5{color:#3a3a3a;}
.vs-card p{font-size:15px;line-height:1.55;}
.vs-card--th p{color:rgba(255,255,255,.88);}

/* ===================================================================
   DOSE USP — "1,000mg, not a pinch" / 4-10x stronger / extract-ratio scam
   =================================================================== */
.dose{padding:26px 25px 0;}
.dose__card{position:relative;max-width:1870px;margin:0 auto;border-radius:24px;overflow:hidden;background:linear-gradient(150deg,#0a3a8c 0%,#04173a 70%);color:#fff;padding:64px 60px;}
.dose__card::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 10%,rgba(206,251,255,.18),transparent 45%);pointer-events:none;}
.dose__grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;}
.dose__l .eyebrow{color:var(--ice);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;}
.dose__l h2{font-size:clamp(30px,4vw,52px);font-weight:700;letter-spacing:-.7px;line-height:1.0;margin:14px 0 18px;}
.dose__l h2 em{font-style:normal;color:var(--ice);}
.dose__l p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.84);max-width:500px;margin-bottom:14px;}
.dose__chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;}
.dose__chip{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:var(--pill);padding:8px 16px;font-size:13px;font-weight:600;}
.dose__bars{display:flex;flex-direction:column;gap:20px;}
.dose__bar .lab{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:600;margin-bottom:8px;gap:12px;}
.dose__bar .lab b{font-size:16px;}
.dose__bar .track{position:relative;height:48px;border-radius:12px;background:rgba(255,255,255,.08);overflow:hidden;}
.dose__bar .fill{height:100%;border-radius:12px;display:flex;align-items:center;padding-left:18px;font-weight:700;font-size:13px;white-space:nowrap;width:0;transition:width 1.1s cubic-bezier(.3,.1,.2,1);}
.dose__bar--th .fill{background:linear-gradient(90deg,var(--ice),#84e6f0);color:var(--ink);}
.dose__bar--them .ghost{position:absolute;inset:0;display:flex;align-items:center;padding-left:18px;font-size:12px;font-weight:600;color:rgba(255,255,255,.45);border:1.5px dashed rgba(255,255,255,.3);border-radius:12px;}
.dose__bar--them .fill{position:relative;z-index:1;background:rgba(255,255,255,.3);color:#fff;}
.dose__card.in .dose__bar--th .fill{width:100%;}
.dose__card.in .dose__bar--them .fill{width:11%;min-width:90px;}
.dose__multi{display:flex;align-items:baseline;gap:16px;margin-top:30px;}
.dose__multi .big{font-size:clamp(56px,8vw,108px);font-weight:800;letter-spacing:-3px;color:var(--ice);line-height:.85;}
.dose__multi span{font-size:16px;color:rgba(255,255,255,.85);max-width:220px;line-height:1.35;}

/* ---- BLOG ARTICLE (prose) ---- */
.post{max-width:760px;margin:0 auto;padding:40px 25px 10px;}
.post p{font-size:17px;line-height:1.75;color:var(--ink);margin-bottom:20px;}
.post h2{font-size:clamp(24px,2.8vw,30px);font-weight:600;letter-spacing:-.3px;margin:36px 0 14px;color:var(--ink);}
.post blockquote{border-left:3px solid var(--accent);padding-left:22px;margin:28px 0;font-size:21px;font-style:italic;line-height:1.5;color:var(--ink);}
.post ul{margin:0 0 20px 20px;} .post li{font-size:17px;line-height:1.7;color:var(--ink);margin-bottom:8px;}
.post__author{max-width:760px;margin:30px auto 0;padding:24px 25px;display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);}
.post__author .av{width:48px;height:48px;border-radius:50%;background:var(--card-grey);flex:none;}
.post__author b{font-size:15px;color:var(--ink);} .post__author span{display:block;font-size:13px;color:var(--ink-2);}
/* simple cart + 404 */
.simple{max-width:1000px;margin:0 auto;padding:70px 25px;}
.cartrow{display:flex;gap:18px;align-items:center;background:var(--card);border-radius:var(--radius);padding:20px;margin-bottom:14px;}
.cartrow__img{width:90px;height:90px;border-radius:12px;background:linear-gradient(160deg,#eef2f6,#c0c6cc);flex:none;overflow:hidden;}
.cartrow__img img{width:100%;height:100%;object-fit:contain;}
.cartrow__b{flex:1;min-width:0;} .cartrow__b h4{font-size:17px;font-weight:600;color:var(--ink);} .cartrow__b p{font-size:13px;color:var(--ink-2);margin-top:4px;}
.cartrow__price{font-size:17px;font-weight:700;color:var(--ink);}
.cart__sum{background:var(--ink);color:#fff;border-radius:var(--radius);padding:28px;margin-top:20px;}
.cart__line{display:flex;justify-content:space-between;font-size:15px;color:rgba(255,255,255,.85);margin-bottom:10px;}
.cart__line--total{font-size:20px;font-weight:700;color:#fff;border-top:1px solid rgba(255,255,255,.15);padding-top:14px;margin-top:6px;}
.err{max-width:620px;margin:0 auto;padding:140px 25px;text-align:center;}
.err h1{font-size:clamp(60px,12vw,140px);font-weight:700;letter-spacing:-2px;color:var(--ink);line-height:1;}
.err p{font-size:18px;color:var(--ink-2);margin:16px 0 28px;}

/* ===================================================================
   ENERGY GRAPH (caffeine borrows / Thunder Honey builds) + spinning seal
   =================================================================== */
.th-graph-sec{padding:26px 25px 0;}
.th-graph{position:relative;overflow:hidden;border-radius:24px;padding:clamp(32px,4vw,56px);max-width:1100px;margin:0 auto;color:var(--ink);background:#fff;box-shadow:0 24px 60px rgba(8,24,55,.10);}
.th-graph__eyebrow{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);}
.th-graph__h{font-weight:700;font-size:clamp(26px,3.4vw,44px);line-height:1.04;letter-spacing:-.5px;color:var(--ink);margin-top:13px;}
.th-chart{width:100%;height:auto;margin-top:30px;display:block;}
.th-chart .axis{stroke:rgba(16,38,80,.16);stroke-width:1.5;}
.th-chart .base{stroke:rgba(16,38,80,.2);stroke-width:1.5;stroke-dasharray:4 6;}
.th-chart .caff{fill:none;stroke:#8b929c;stroke-width:5;stroke-linecap:round;stroke-dasharray:2600;stroke-dashoffset:2600;transition:stroke-dashoffset 2.4s ease;}
.th-chart .th{fill:none;stroke:var(--blue);stroke-width:6;stroke-linecap:round;stroke-dasharray:2200;stroke-dashoffset:2200;transition:stroke-dashoffset 2.6s ease .3s;}
.th-graph.in .caff,.th-graph.in .th{stroke-dashoffset:0;}
.th-chart text{font-size:20px;font-weight:700;}
.th-chart .tcaff{fill:#6c727b;} .th-chart .tth{fill:var(--blue);}
.th-graph__legend{display:flex;gap:32px;margin-top:24px;flex-wrap:wrap;}
.th-graph__legend div{font-size:14px;color:var(--ink-2);max-width:34ch;}
.th-graph__legend b{color:var(--ink);}
.th-graph__legend .dot{display:inline-block;width:10px;height:10px;border-radius:99px;margin-right:8px;vertical-align:middle;}
.dot--caff{background:#8b929c;} .dot--th{background:var(--blue);}
.th-area,.caff-area{opacity:0;transition:opacity 1.3s ease .6s;}
.th-graph.in .th-area,.th-graph.in .caff-area{opacity:1;}
.th-seal{position:absolute;top:18px;right:18px;width:84px;height:84px;z-index:3;filter:drop-shadow(0 10px 22px rgba(8,24,55,.2));pointer-events:none;}
.th-seal svg{width:100%;height:100%;display:block;}
.th-seal__ring{transform-box:fill-box;transform-origin:center;animation:sealspin 22s linear infinite;}
.th-seal__ring text{font-size:9.5px;font-weight:800;letter-spacing:.14em;fill:var(--blue);text-transform:uppercase;}
.th-seal__ring .th-seal__tag{font-size:6.5px;letter-spacing:.16em;}
.th-seal__disc{fill:rgba(255,255,255,.92);stroke:rgba(0,71,171,.22);stroke-width:1;}
@keyframes sealspin{to{transform:rotate(360deg);}}
/* North Star scroll-spinner (fixed bottom-LEFT; bottom-right is reserved for the support chat bubble) */
.th-northstar{position:fixed;left:22px;bottom:22px;width:76px;height:76px;z-index:9998;pointer-events:none;transition:bottom .42s cubic-bezier(.4,.15,.2,1),transform .35s ease,opacity .4s ease;}
.th-northstar img{width:100%;height:100%;display:block;will-change:transform;filter:drop-shadow(0 4px 10px rgba(20,22,26,.18));}
.th-northstar.is-lifted{bottom:104px;}
@media(min-width:1024px){.th-northstar{pointer-events:auto;cursor:grab;}.th-northstar:hover{transform:scale(1.05);}.th-northstar.is-grabbing{cursor:grabbing;}}
@media(max-width:600px){.th-northstar{width:60px;height:60px;left:14px;bottom:14px;}.th-northstar.is-lifted{bottom:92px;}}
@media(prefers-reduced-motion:reduce){.th-northstar img{transform:none!important;}}
@media(max-width:560px){.th-seal{width:60px;height:60px;}}
@media(prefers-reduced-motion:reduce){.th-seal__ring{animation:none;}}

/* ===================================================================
   MOBILE PASS — overflow guard, type/padding scale, nav drawer
   =================================================================== */
html,body{overflow-x:clip;}
.hdr__burger{display:none;}
/* The JS-built mobile drawer (.hdr__menu) + its scrim (.nav-scrim) are appended
   to <body> on every page. They must be hidden by default so they never render
   as a stray white block in normal flow on desktop (>980px). The mobile media
   query below re-enables and positions them off-canvas until .nav-open. */
.hdr__menu,.nav-scrim{display:none;}
.lang{display:inline-flex;gap:2px;align-items:center;font-size:13px;font-weight:600;margin-left:14px;flex:none;}
.lang a{padding:4px 7px;border-radius:8px;color:inherit;opacity:.5;}
.lang a.on{opacity:1;background:rgba(43,46,51,.12);}
.hdr--over .lang a.on{background:rgba(255,255,255,.2);}

@media(max-width:980px){
  .hdr__inner{padding:18px 18px;}
  .hdr__right{gap:10px;align-items:center;}
  .hdr__burger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;color:var(--ink);background:rgba(43,46,51,.08);flex:none;}
  .hdr--over .hdr__burger{color:#fff;background:rgba(255,255,255,.16);}
  /* Seed / iOS-style FROSTED-GLASS drawer: light translucent panel, strong blur, soft edges */
  .hdr__menu{
    position:fixed;top:12px;right:12px;bottom:12px;width:84%;max-width:360px;z-index:1000;
    display:flex;flex-direction:column;
    padding:22px 24px 26px;
    border-radius:26px;
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:blur(28px) saturate(185%);backdrop-filter:blur(28px) saturate(185%);
    border:1px solid rgba(255,255,255,.65);
    box-shadow:0 30px 80px rgba(8,18,40,.22),inset 0 1px 0 rgba(255,255,255,.75);
    transform:translateX(118%);opacity:0;
    transition:transform .42s cubic-bezier(.22,.8,.2,1),opacity .3s ease;
    overflow:hidden;
  }
  /* faint cool top-glow so the glass reads as "brightening" what's behind it */
  .hdr__menu::before{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 70% at 80% -10%,rgba(206,251,255,.40),transparent 60%);}
  body.nav-open .hdr__menu{transform:translateX(0);opacity:1;}
  .hdr__menu>*{position:relative;z-index:1;}
  .hdr__menu-close{align-self:flex-end;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.7);color:var(--ink);cursor:pointer;
    box-shadow:0 2px 8px rgba(8,18,40,.08);transition:background .2s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
  .hdr__menu-close:hover{background:#fff;}
  .hdr__menu-nav{display:flex;flex-direction:column;margin-top:14px;}
  /* expandable Shop / Learn / About groups */
  .hdr__menu-group{border-bottom:1px solid rgba(43,46,51,.10);}
  .hdr__menu-grouptop{display:flex;align-items:center;justify-content:space-between;width:100%;
    background:none;border:0;cursor:pointer;text-align:left;
    font-size:24px;font-weight:600;letter-spacing:-.5px;color:var(--ink);padding:16px 2px;transition:color .2s;}
  .hdr__menu-grouptop:hover{color:var(--ink);}
  .hdr__menu-chev{width:11px;height:11px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-3px) rotate(45deg);opacity:.55;transition:transform .3s cubic-bezier(.22,.8,.2,1);}
  .hdr__menu-group.is-open .hdr__menu-chev{transform:translateY(2px) rotate(225deg);opacity:.9;}
  .hdr__menu-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.22,.8,.2,1);}
  .hdr__menu-sub-in{min-height:0;overflow:hidden;}
  .hdr__menu-group.is-open .hdr__menu-sub{grid-template-rows:1fr;}
  .hdr__menu-sub a{display:block;font-size:16px;font-weight:500;color:var(--ink-2) !important;
    padding:10px 2px 10px 6px;text-decoration:none;transition:color .2s,padding-left .2s;}
  .hdr__menu-sub a:first-child{padding-top:2px;}
  .hdr__menu-sub a:last-child{padding-bottom:16px;}
  .hdr__menu-sub a:hover{color:var(--ink) !important;padding-left:12px;}
  .hdr__menu-foot{margin-top:auto;display:flex;flex-direction:column;gap:18px;padding-top:26px;}
  .hdr__menu-lang{display:inline-flex;gap:4px;align-items:center;font-size:14px;font-weight:600;}
  .hdr__menu-lang a{padding:7px 14px;border-radius:10px;color:var(--ink-2) !important;background:rgba(43,46,51,.06);transition:background .2s,color .2s;}
  .hdr__menu-lang a.on{color:var(--ink) !important;background:rgba(255,255,255,.85);box-shadow:0 1px 4px rgba(8,18,40,.10);}
  .hdr__menu-cta{display:block;text-align:center;background:var(--ice);color:#000 !important;font-size:16px;font-weight:700;letter-spacing:-.2px;
    padding:17px;border-radius:var(--pill);box-shadow:0 8px 22px rgba(206,251,255,.45),inset 0 1px 0 rgba(255,255,255,.6);transition:background .2s,transform .2s;}
  .hdr__menu-cta:hover{background:var(--ice-h);transform:translateY(-2px);}
  .nav-scrim{display:block;position:fixed;inset:0;background:rgba(16,22,36,.34);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:999;opacity:0;pointer-events:none;transition:opacity .3s;}
  body.nav-open .nav-scrim{opacity:1;pointer-events:auto;}
  body.nav-open{overflow:hidden;}
}
@media(prefers-reduced-motion:reduce){.hdr__menu{transition:opacity .2s ease;}}

@media(max-width:600px){
  .wrap{padding:0 18px;}
  /* perf: drop the grain overlay's second fractal-noise layer on phones — one less
     full-viewport blended compositing pass while scrolling; visually negligible. */
  .grain::after{display:none;}
  .hero h1{font-size:30px;letter-spacing:-.4px;}
  .hero__sub{font-size:15px;margin-top:12px;}
  .hero__content{padding-bottom:34px;} .hero__content .wrap2{padding:0 20px;}
  /* MOBILE: Seed-style bare CTAs (Joakim 2026-07-02). The frosted/dark wrapper
     boxes read as ugly squares around the button on phones, and half the CTAs
     never had a wrapper anyway, so on mobile the wrapper chrome is dropped
     entirely: just the ice pill + a plain caption below it (matches the hero).
     Desktop keeps the frosted pill. Caption gets a soft dark text-shadow since
     every instance sits on a dark/photo panel. */
  .cta-wrap,.howto__cta{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    flex-wrap:nowrap;gap:12px;
    width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;
    background:none;border:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    border-radius:0;overflow:visible;padding:0;
  }
  .cta-wrap .cta-pill{width:auto;min-width:210px;text-align:center;padding:15px 28px;}
  .cta-note{font-size:12.5px;width:100%;text-align:center;line-height:1.35;text-shadow:0 1px 14px rgba(8,18,40,.45);}
  /* .howto__cta is the same visual pattern (dark wrapper + ice pill + white note),
     used on 14 pages: give it the same bare re-flow. Its note (and the promise CTA's)
     sits on a LIGHT grey panel once the dark wrapper is gone, so those captions flip
     to dark ink instead of white-with-shadow. */
  .howto__cta .pill{min-width:210px;justify-content:center;}
  .howto__cta .note,.promise__cta.cta-wrap .cta-note{color:var(--ink-2);font-size:12.5px;width:100%;text-align:center;line-height:1.35;text-shadow:none;}
  .sec-h2{font-size:25px;} .pgrid__head .sec-h2{max-width:100%;}
  .feat__content h2,.research__right h2,.community__c h2,.compare__text h2,.mission__c h2,.promise__r h2,.faq__l h2,.tl__head h2,.howto__head h2,.stories__head h2,.ostory__head h2,.nlcta__card h2,.featured__c h2,.psol h2{font-size:25px;letter-spacing:-.3px;}
  .bb__title{font-size:26px;} .igrid__title h1{font-size:30px;} .abhero__c h1{font-size:30px;} .jhero h1{font-size:38px;} .lphero__c h1{font-size:30px;}
  .social__h{font-size:22px;}
  .dose{padding:16px;} .dose__card{padding:36px 24px;} .dose__grid{grid-template-columns:1fr;gap:34px;} .dose__l h2{font-size:30px;}
  .pcard{padding:24px 20px 28px;} .pcard__name{font-size:22px;} .pcard__media{height:240px;}
  .pgrid{padding:46px 18px 16px;} .feat{padding:16px;} .feat__card{padding:32px 20px;} .feat__cards{margin-top:36px;}
  .social{padding:46px 18px;} .ingbd{padding:16px 0 46px;} .ingbd__head{padding:0 18px;}
  .research{padding:16px;} .research__card{padding:32px 20px;}
  .promise{padding:46px 18px;} .community{padding:16px;} .community__c{left:20px;right:20px;bottom:28px;}
  .faq{padding:46px 18px;} .howto{padding:46px 18px;} .compare{padding:14px 16px;} .compare__card{padding:28px 18px;}
  .tl{padding:46px 18px;} .mrev{padding:46px 18px;} .stories{padding:46px 18px;}
  .ostory{padding:46px 18px;} .mission{padding:16px;} .abhero__c{padding:0 20px 26px;}
  .pdp-hero{padding:16px;} .nlcta{padding:16px;} .nlcta__card{padding:34px 22px;}
  .featured{padding:0 18px;} .artgrid{padding:46px 18px;}
  .foot{padding:38px 20px 24px;border-radius:20px 20px 0 0;} .foot__grid{grid-template-columns:1fr 1fr;gap:18px;}
  .foot__wm{font-size:34px;white-space:normal;line-height:1.05;} .foot__wm .ghost{display:none;} .foot__bottom{flex-direction:column;gap:10px;} .pdp-gal__cap{padding:16px;} .pdp-gal__cap p{display:none;} .buybox{padding:8px 0;}
  .popt--sel{padding:22px 18px;} .popt--plain{padding:18px;flex-direction:column;align-items:flex-start;gap:14px;} .popt__name{font-size:19px;} .popt--plain .popt__name{font-size:18px;} .popt__save{right:18px;}
  .popt__top{flex-direction:column;align-items:flex-start;gap:14px;} .popt__price{text-align:left;} .popt__l{min-width:0;}
  .popt__now{font-size:22px;} .popt__per{font-size:12px;} .popt__was{font-size:14px;} .popt__list li{font-size:14px;}
  .social__marquee{grid-template-columns:repeat(2,1fr);} .social__reviews{grid-template-columns:1fr;}
  .igrid__grid{grid-template-columns:1fr;} .igrid__card{height:360px;} .igrid__head{padding:34px 22px;}
  .lifestrip{flex-wrap:wrap;} .lifestrip .media-slot{flex:0 0 calc(50% - 7px);}
  .ingcard{flex:0 0 300px;height:375px;} /* taller, less square (Joakim 2026-07-02) */
  .compare__panel{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:20px;gap:24px;}
  .compare__rows{width:170px;} .compare__rows li{font-size:14px;} .compare__col{min-width:104px;}
}

/* ===== Unified loovi-style header on all inner pages (sticky LIGHT frosted pill, centered logo) =====
   True Apple glass: light translucent material, strong blur, defined border, real depth.
   Dark ink text so it stays legible over BOTH the photo hero and the light grey page. */
.hdr{position:sticky;top:0;z-index:100;background:transparent;padding:14px 20px;}
.hdr--solid,.hdr--over{position:sticky;top:0;background:transparent;}
.hdr__inner>*{grid-row:1;}
.hdr__inner{transition:background .35s ease, box-shadow .35s ease, border-color .35s ease;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;max-width:1280px;margin:0 auto;padding:11px 22px;border-radius:999px;background:var(--glass-pill-fill);-webkit-backdrop-filter:var(--glass-pill-blur);backdrop-filter:var(--glass-pill-blur);border:var(--glass-pill-border);box-shadow:var(--glass-pill-shadow);}
.hdr__nav{grid-column:1;justify-self:start;width:auto;display:flex;gap:25px;align-items:center;}
.hdr__item{position:relative;}
/* top-level link sits on its row; padding gives the hover a forgiving target down to the panel */
.hdr__top{display:inline-flex;align-items:center;gap:5px;padding:6px 0;cursor:pointer;}
.hdr__top::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.55;transition:transform .25s ease,opacity .2s ease;}
.hdr__item:hover .hdr__top::after,.hdr__item.is-open .hdr__top::after{transform:translateY(0) rotate(225deg);opacity:.9;}
/* dark ink on the light glass — scoped to beat the base .hdr--solid/.hdr--over rules */
.hdr .hdr__nav a,.hdr--solid .hdr__nav a,.hdr--over .hdr__nav a{color:rgba(28,33,38,.82);}
.hdr .hdr__nav a:hover,.hdr--solid .hdr__nav a:hover,.hdr--over .hdr__nav a:hover{color:var(--ink);opacity:1;}
.hdr .hdr__logo,.hdr--solid .hdr__logo,.hdr--over .hdr__logo{grid-column:2;justify-self:center;color:var(--ink);}
.hdr__right{grid-column:3;justify-self:end;width:auto;align-items:center;gap:10px;}
.hdr__pill{background:rgba(255,255,255,.5) !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
.hdr__pill .ic,.hdr__pill svg{stroke:var(--ink);color:var(--ink);}
.hdr .lang a{color:rgba(28,33,38,.6);}
.hdr .lang a.on{color:var(--ink);background:rgba(255,255,255,.55);}
.hdr__burger{grid-column:1;justify-self:start;color:var(--ink) !important;background:rgba(255,255,255,.5) !important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
@media(max-width:980px){.hdr__inner{grid-template-columns:40px 1fr 40px;padding:9px 14px;}.hdr__nav,.hdr__right{display:none;}.hdr__logo{grid-column:2;justify-self:center;}}

/* ===== HOMEPAGE-ONLY header: DARK translucent glass over the hero video =====
   Scoped to .hdr--home (only home-figma.html carries this class). Overrides the
   light frosted-glass pill above with a dark pill + white logo/nav so it melts
   into the hero video. CTA stays #cefbff + black. Does NOT leak to inner pages. */
/* home: header floats fixed over the full-bleed hero video (no white band).
   Was an inline !important layer on the home page; now a scoped modifier here.
   Wins over the sticky .hdr/.hdr--solid rules above purely by source order. */
.hdr--home{position:fixed;top:0;left:0;right:0;padding:14px 20px 14px;}
/* mobile: clear the (often 2-line) fixed announcement banner with a comfortable
   gap below it before the header pill */
@media(max-width:760px){.hdr--home{padding:6px 12px 10px;}}
@media(max-width:430px){.hdr--home{padding:6px 12px 10px;}}
.hdr--home .hdr__inner{
  background:var(--glass-pill-fill);
  -webkit-backdrop-filter:var(--glass-pill-blur);
  backdrop-filter:var(--glass-pill-blur);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 12px 34px rgba(20,24,32,.14), inset 0 1px 0 rgba(255,255,255,.4);
}
.hdr--home .hdr__nav a{color:rgba(255,255,255,.86);}
.hdr--home .hdr__nav a:hover{color:#fff;opacity:1;}
.hdr--home .hdr__logo{color:#fff;}
.hdr--home .lang a{color:rgba(255,255,255,.62);}
.hdr--home .lang a.on{color:#fff;background:rgba(255,255,255,.16);}
.hdr--home .hdr__pill{background:rgba(255,255,255,.14) !important;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);}
.hdr--home .hdr__pill .ic,.hdr--home .hdr__pill svg{stroke:#fff;color:#fff;}
.hdr--home .hdr__burger{color:#fff !important;background:rgba(255,255,255,.14) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);}
/* CTA unchanged: stays #CEFBFF fill + dark text (see .hdr__cta) */

/* ===== Seed-style FROSTED-GLASS nav dropdowns (desktop, hover/focus) =====
   CEO fix: dropdown must be readable over ANY page content. Keeps the frosted
   blur+saturate glass look, but the panel fill is now NEAR-OPAQUE (~0.93) so the
   menu text never reads as see-through over busy content underneath. The ::before
   adds a final near-opaque light layer behind the text as a legibility guarantee.
   Opens on hover (.hdr__item:hover) or via JS (.is-open) for keyboard/focus access. */
.hdr__dd{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  min-width:300px;padding:14px;border-radius:20px;z-index:60;
  background:rgba(224,226,223,.72);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:var(--glass-border);
  box-shadow:var(--glass-shadow);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .26s ease,transform .3s cubic-bezier(.22,.8,.2,1),visibility .26s;
}
/* near-opaque legibility layer behind the menu text (sits below content via z-index:1 on >*) */
.hdr__dd::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(244,247,250,.55)),var(--glass-wash);}
.hdr__dd--list{min-width:288px;}
/* invisible hover-bridge so moving the cursor from the link to the panel never closes it */
.hdr__item::after{content:"";position:absolute;left:0;right:0;top:100%;height:18px;}
.hdr__item:hover .hdr__dd,.hdr__item.is-open .hdr__dd,.hdr__item:focus-within .hdr__dd{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.hdr__dd>*{position:relative;z-index:1;}

/* SHOP — single product card */
.hdr__dd-card{display:flex;gap:14px;align-items:center;padding:12px;border-radius:14px;text-decoration:none;transition:background .2s;}
.hdr__dd-card:hover{background:rgba(255,255,255,.5);}
.hdr__dd-card-media{flex:none;width:72px;height:72px;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;}
.hdr__dd-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.hdr__dd-card-tx{display:flex;flex-direction:column;gap:3px;}
.hdr__dd-card-tx b{font-size:15px;font-weight:700;letter-spacing:-.2px;color:var(--ink);}
.hdr__dd-card-tx span{font-size:12.5px;line-height:1.35;color:var(--ink-2);opacity:.8;max-width:200px;}

/* LEARN / ABOUT — lead row + linklist */
.hdr__dd-lead{display:flex;flex-direction:column;gap:3px;padding:11px 12px;border-radius:12px;text-decoration:none;transition:background .2s;}
.hdr__dd-lead:hover{background:rgba(255,255,255,.5);}
.hdr__dd-lead b{font-size:14.5px;font-weight:700;letter-spacing:-.2px;color:var(--ink);}
.hdr__dd-lead span{font-size:12px;line-height:1.35;color:var(--ink-2);opacity:.8;}
.hdr__dd-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);opacity:.55;padding:12px 12px 6px;}
.hdr__dd-link{display:block;padding:9px 12px;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink) !important;text-decoration:none;transition:background .2s,padding-left .2s;}
.hdr__dd-link:hover{background:rgba(255,255,255,.5);padding-left:16px;}
.hdr__dd-link--more{margin-top:4px;font-weight:700;color:var(--ink) !important;border-top:1px solid rgba(43,46,51,.10);border-radius:0 0 10px 10px;padding-top:11px;}

/* Home dropdowns use the same ONE light glass as every page (Seed system). */

/* ===== Ritual "How it works" 3-card grid (matches USP width, 4:3 media, not tall-thin) ===== */
.ritual__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1180px;margin:0 auto;}
.rcard{background:linear-gradient(180deg,#e9edf1,#d8dde3);border:1px solid rgba(255,255,255,.6);border-radius:22px;padding:18px 18px 26px;box-shadow:0 18px 44px rgba(8,24,55,.10),inset 0 1px 0 rgba(255,255,255,.55);display:flex;flex-direction:column;text-align:center;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;}
.rcard:hover{transform:translateY(-4px);box-shadow:0 28px 60px rgba(8,24,55,.16),inset 0 1px 0 rgba(255,255,255,.6);}
.rcard__top{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--ink-2);opacity:.5;padding:2px 4px 13px;}
.rcard__media{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(160deg,#dce0e4,#c9ced4);}
.rcard__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.rcard h3{font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.5px;margin-top:18px;}
.rcard p{font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:8px;max-width:30ch;margin-left:auto;margin-right:auto;}
@media(max-width:760px){.ritual__steps{grid-template-columns:1fr;max-width:420px;gap:18px;}.rcard h3{font-size:24px;}}

/* ===== Dose section: 3D pouch (left) + animated 1g-vs-100mg story (right) ===== */
.dose__grid:has(.dose__pouch){grid-template-columns:0.66fr 1fr;align-items:center;}
.dose__pouch{position:relative;display:flex;align-items:center;justify-content:center;min-height:500px;}
.dose__pouch-glow{position:absolute;width:80%;height:72%;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(206,251,255,.30),rgba(0,71,171,0) 66%);filter:blur(6px);pointer-events:none;animation:doseGlow 6s ease-in-out infinite;}
@keyframes doseGlow{0%,100%{opacity:.75;}50%{opacity:1;}}
.pouch3d{position:relative;z-index:1;width:100%;height:500px;cursor:grab;}
.pouch3d:active{cursor:grabbing;}
.pouch3d canvas{display:block;width:100%!important;height:100%!important;}
.dose__story .dose__note{font-size:13px;line-height:1.55;color:rgba(255,255,255,.6);max-width:480px;margin:18px 0 0;}
.dose__powder{display:flex;align-items:center;gap:24px;margin-top:32px;}
.pmass{display:flex;flex-direction:column;align-items:center;gap:12px;margin:0;}
.pmass__dot{display:block;border-radius:50%;
  /* 3D sphere: hot specular highlight up-left, ice body, darker under-rim */
  background:radial-gradient(circle at 34% 28%,#ffffff 0%,#eafdff 14%,var(--ice) 45%,#8fdde8 72%,#5fbecd 100%);
  box-shadow:0 0 44px rgba(206,251,255,.55),0 18px 30px rgba(8,40,60,.22),
    inset -10px -14px 26px rgba(8,64,84,.28),inset 8px 12px 20px rgba(255,255,255,.75);
  transform:scale(0);transition:transform 1s cubic-bezier(.2,.85,.2,1) .3s;}
.pmass--lg .pmass__dot{width:120px;height:120px;}
.pmass--sm .pmass__dot{width:38px;height:38px;opacity:.5;
  box-shadow:0 0 14px rgba(206,251,255,.3),0 8px 14px rgba(8,40,60,.2),
    inset -4px -6px 10px rgba(8,64,84,.3),inset 3px 5px 8px rgba(255,255,255,.6);}
.dose__card.in .pmass__dot{transform:scale(1);}
/* Alive: after the entrance, the 1,000mg sphere breathes up while the 100mg one
   shrinks in counter-rhythm (Joakim 2026-07-02: grow and shrink, more 3D) */
@keyframes pmassBreatheLg{0%,100%{transform:scale(1) translateY(0);}50%{transform:scale(1.07) translateY(-5px);}}
@keyframes pmassBreatheSm{0%,100%{transform:scale(1);}50%{transform:scale(.9);}}
.dose__card.in .pmass--lg .pmass__dot{animation:pmassBreatheLg 4.2s ease-in-out 1.6s infinite;}
.dose__card.in .pmass--sm .pmass__dot{animation:pmassBreatheSm 4.2s ease-in-out 1.6s infinite;}
@media (prefers-reduced-motion:reduce){.dose__card.in .pmass__dot{animation:none !important;}}
.pmass figcaption{text-align:center;line-height:1.15;}
.pmass figcaption b{display:block;font-size:19px;font-weight:700;color:#fff;}
.pmass--sm figcaption b{color:rgba(255,255,255,.68);font-size:15px;}
.pmass figcaption small{font-size:11px;color:rgba(255,255,255,.5);letter-spacing:.02em;}
.pmass__x{font-size:32px;font-weight:800;color:var(--ice);letter-spacing:-1px;align-self:center;margin-bottom:24px;}
@media(max-width:980px){
  .dose__grid{grid-template-columns:1fr;gap:24px;}
  .dose__pouch{min-height:300px;order:-1;}
  .pouch3d{height:300px;}
  .dose__powder{gap:18px;flex-wrap:wrap;justify-content:center;}
  .pmass--lg .pmass__dot{width:92px;height:92px;}
  .pmass__x{margin-bottom:24px;}
}

/* ===== Dose section v2: two contained cards (Seed-style) ===== */
.dose{padding:34px 24px;}
.dose__card--split{max-width:1240px;background:none!important;padding:0!important;box-shadow:none!important;overflow:visible;}
.dose__card--split::after{display:none!important;}
.dose__grid:has(.dose__pcard){grid-template-columns:0.82fr 1.18fr;gap:20px;align-items:stretch;}
.dose__pcard{position:relative;border-radius:24px;overflow:hidden;min-height:470px;background:#06214e;box-shadow:0 30px 70px rgba(8,24,55,.22);}
.dose__pcard-bg{position:absolute;inset:0;background:url('Section_Imagery/dose-bg.png') center/cover;}
.dose__pcard-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,rgba(206,251,255,.16),transparent 60%);}
.pouch3d{position:absolute!important;inset:0;width:100%;height:100%;z-index:1;cursor:grab;}
.dose__story{background:linear-gradient(150deg,#0a3a8c 0%,#04173a 78%);border-radius:24px;padding:46px 46px;color:#fff;position:relative;overflow:hidden;}
.dose__story::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 86% 6%,rgba(206,251,255,.16),transparent 46%);pointer-events:none;}
.dose__story>*{position:relative;z-index:1;}
@media(max-width:980px){
  .dose__grid:has(.dose__pcard){grid-template-columns:1fr;gap:16px;}
  .dose__pcard{min-height:330px;order:-1;}
  .dose__story{padding:32px 26px;}
}

/* ===== Dose v2 balance: tighten story so the two cards read as squares ===== */
.dose__grid:has(.dose__pcard){grid-template-columns:0.95fr 1.15fr;}
.dose__story{padding:36px 40px;}
.dose__story h2{font-size:clamp(26px,2.6vw,38px);margin:10px 0 13px;line-height:1.05;}
.dose__story .dose__lead{font-size:14.5px;line-height:1.55;margin:0 0 16px;max-width:460px;}
.dose__bars{gap:13px;}
.dose__bar .track{height:38px;}
.dose__bar .lab{margin-bottom:6px;}
.dose__powder{margin-top:18px;gap:18px;}
.pmass--lg .pmass__dot{width:82px;height:82px;}
.pmass--sm .pmass__dot{width:30px;height:30px;}
.pmass figcaption b{font-size:16px;}
.pmass figcaption small{font-size:10px;}
.pmass__x{font-size:25px;margin-bottom:16px;}
.dose__story .dose__note{margin-top:13px;font-size:12px;}
.dose__chips{margin-top:15px;gap:8px;}
.dose__chip{padding:7px 13px;font-size:12px;}

/* ===== Dose v3: light GREY FROSTED GLASS (Grain & Glass language, not dark cobalt) ===== */
.dose__card--split{position:relative;}
.dose__card--split::before{content:"";position:absolute;inset:-26px 0;background:url('Section_Imagery/dose-bg-light.png') center/cover;border-radius:32px;z-index:0;opacity:.55;}
.dose__grid{position:relative;z-index:1;}
/* frosted glass cards — true light glass token (translucent grey material + depth) */
.dose__pcard,.dose__story{
  background:var(--glass-fill)!important;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:var(--glass-border);
  box-shadow:var(--glass-shadow);
  color:var(--ink);
}
.dose__story::after{display:none!important;}
.dose__pcard-bg{background:radial-gradient(circle at 50% 45%,rgba(0,71,171,.10),transparent 62%)!important;}
.dose__pcard-bg::after{background:radial-gradient(circle at 50% 46%,rgba(206,251,255,.20),transparent 60%)!important;}
/* text + accents flip to dark / cobalt */
.dose__story .eyebrow{color:var(--blue)!important;}
.dose__story h2{color:var(--ink)!important;}
.dose__story h2 em{color:var(--blue)!important;}
.dose__story .dose__lead{color:#565d66!important;}
.dose__story .dose__note{color:#878d95!important;}
/* bars */
.dose__story .dose__bar .lab{color:var(--ink)!important;}
.dose__story .dose__bar .lab b{color:var(--ink)!important;}
.dose__story .dose__bar .track{background:rgba(43,46,51,.07)!important;}
.dose__story .dose__bar--th .fill{background:var(--ice)!important;color:var(--ink)!important;}
.dose__story .dose__bar--them .ghost{color:#9aa0a8!important;border-color:rgba(43,46,51,.22)!important;}
.dose__story .dose__bar--them .fill{background:rgba(43,46,51,.24)!important;color:#fff!important;}
/* powder blobs (cobalt-tinted so they read on light) */
.dose__story .pmass__dot{background:radial-gradient(circle at 38% 32%,#ffffff,#bfe6f3 42%,rgba(0,71,171,.14) 74%,transparent 82%)!important;box-shadow:0 0 34px rgba(0,71,171,.20),0 0 0 1px rgba(0,71,171,.10)!important;}
.dose__story .pmass figcaption b{color:var(--ink)!important;}
.dose__story .pmass--sm figcaption b{color:#9aa0a8!important;}
.dose__story .pmass figcaption small{color:#9aa0a8!important;}
.dose__story .pmass__x{color:var(--blue)!important;}
/* chips */
.dose__story .dose__chip{background:rgba(43,46,51,.05)!important;border:1px solid rgba(43,46,51,.12)!important;color:var(--ink)!important;}

/* ===== FIGMA SECTIONING: every section sits on a darker-grey rounded panel, separated by lighter page ===== */
.pgrid,.ritual,.social,.ingbd,.research,.promise,.community,.faq{
  background:var(--card-grey)!important;
  border-radius:30px;
  width:calc(100% - 36px);
  max-width:var(--maxw);
  margin:18px auto!important;
  padding:64px 52px!important;
  overflow:hidden;
}
@media(max-width:860px){
  .pgrid,.ritual,.social,.ingbd,.research,.promise,.community,.faq{
    width:calc(100% - 18px);
    margin:10px auto!important;
    padding:40px 18px!important;
    border-radius:22px;
  }
}

/* ===== Section panels extended to other page types (PDP/LP/vs/about/listicle/ingredients) ===== */
.howto,.psol,.vs-rounds,.compare,.artgrid,.tl,.stories,.igrid,.mrev,.mission,.ostory,.featured{
  background:var(--card-grey)!important;
  border-radius:30px;
  width:calc(100% - 36px);
  max-width:var(--maxw);
  margin:18px auto!important;
  padding:64px 52px!important;
  overflow:hidden;
}
@media(max-width:860px){
  .howto,.psol,.vs-rounds,.compare,.artgrid,.tl,.stories,.igrid,.mrev,.mission,.ostory,.featured{
    width:calc(100% - 18px);margin:10px auto!important;padding:40px 18px!important;border-radius:22px;
  }
}

/* ===== Timeline: Seed-style blur-reveal — steps start blurred/dimmed, sharpen + rise as you scroll ===== */
.tl__item{opacity:.30;filter:blur(4px);transform:translateY(12px);transition:opacity .7s ease,filter .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);}
.tl__item.in{opacity:1;filter:blur(0);transform:none;}
/* ===== Energy graph: draw lines + fade areas/dots/labels on scroll-in ===== */
.th-graph .th-area,.th-graph .caff-area,.th-graph .dot,.th-graph .tth,.th-graph .tcaff{opacity:0;transition:opacity .8s ease .5s;}
.th-graph.in .th-area,.th-graph.in .caff-area,.th-graph.in .dot,.th-graph.in .tth,.th-graph.in .tcaff{opacity:1;}
@media(prefers-reduced-motion:reduce){.tl__item{opacity:1;filter:none;transform:none;}.th-graph .th-area,.th-graph .caff-area,.th-graph .dot,.th-graph .tth,.th-graph .tcaff{opacity:1;}}

/* ===== Research section: brand video background (replaces off-brand pink) ===== */
.research{background:transparent!important;padding:18px 16px 0!important;border-radius:0!important;overflow:visible!important;width:auto!important;max-width:none!important;margin:0 auto!important;}
.research__card{background:#08214e!important;}
.research__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.research__scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(118deg,rgba(4,16,44,.86) 0%,rgba(7,26,66,.62) 55%,rgba(7,26,66,.5) 100%);}
.research__card>*:not(.research__bg):not(.research__scrim){position:relative;z-index:2;}

/* ===== FAQ: media image matches the question-column height (was too tall) ===== */
.faq__grid{align-items:stretch!important;}
.faq__media{height:100%!important;min-height:0!important;align-self:stretch;overflow:hidden;}
.faq__media img{width:100%;height:100%;object-fit:cover;display:block;}
@media(max-width:860px){.faq__media{height:300px!important;}}

/* FAQ media: cap height so it stays tidy next to the questions */
.faq__media{max-height:480px!important;}

/* ===== PDP gallery: Moby-style (left thumbnail column + big main image) ===== */
.pdp-gal{display:grid!important;grid-template-columns:92px 1fr;gap:16px;align-items:start;}
.pdp-gal__thumbs{display:flex;flex-direction:column;gap:12px;}
.pdp-thumb{padding:0;border:1.5px solid rgba(43,46,51,.12);border-radius:14px;overflow:hidden;background:var(--card);cursor:pointer;aspect-ratio:1;transition:border-color .2s,transform .2s,box-shadow .2s;}
.pdp-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.pdp-thumb:hover{transform:translateY(-1px);}
.pdp-thumb.is-active{border-color:var(--blue);box-shadow:0 0 0 1.5px var(--blue);}
@media(max-width:760px){.pdp-gal{grid-template-columns:1fr!important;}.pdp-gal__thumbs{flex-direction:row;order:2;overflow-x:auto;padding-bottom:4px;}.pdp-thumb{width:68px;flex:none;}}
@media(max-width:760px){}

/* ===== PDP gallery: sticky on scroll + thumbs scroll within the main height (no pull-down) ===== */
.pdp-gal{align-self:flex-start;position:sticky;top:104px;}
.pdp-gal__thumbs{overflow-y:auto;padding-right:5px;scrollbar-width:thin;scrollbar-color:rgba(43,46,51,.25) transparent;}
.pdp-gal__thumbs::-webkit-scrollbar{width:5px;}
.pdp-gal__thumbs::-webkit-scrollbar-thumb{background:rgba(43,46,51,.22);border-radius:3px;}
.pdp-gal__thumbs::-webkit-scrollbar-track{background:transparent;}
@media(max-width:760px){.pdp-gal{position:static;}.pdp-gal__thumbs{max-height:none!important;}}

/* ===== PDP gallery main: true 1:1 square frame, image fills edge-to-edge (cover), no letterbox bars ===== */
.pdp-gal__main{display:block;width:100%;aspect-ratio:1/1;border-radius:22px;overflow:hidden;background:var(--card);box-shadow:0 20px 54px rgba(8,24,55,.10);}
.pdp-gal__main img{display:block;width:100%;height:100%;object-fit:cover;}
/* how-to stills (converted from letterboxed video) fill the card edge-to-edge */
.rcard__media .howto-still,.howto__simg .howto-still,.media-slot .howto-still,.howto-still{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
/* unified header: lang switch + Start Your Ritual CTA on the right */
.hdr__right{gap:12px;align-items:center;}
.hdr__lang{display:inline-flex;gap:2px;align-items:center;font-size:13px;font-weight:600;}
.hdr__lang a{padding:4px 7px;border-radius:8px;color:rgba(28,33,38,.6);text-decoration:none;}
.hdr__lang a.on{color:var(--ink);background:rgba(255,255,255,.55);}
.hdr__cta{background:#CEFBFF;color:#15203a;border-radius:100px;padding:10px 20px;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .2s,box-shadow .25s,transform .25s;box-shadow:0 8px 20px rgba(18,28,52,.16),inset 0 1px 0 rgba(255,255,255,.5);}
.hdr__cta:hover{background:#b8e8ed;box-shadow:0 12px 26px rgba(18,28,52,.22),inset 0 1px 0 rgba(255,255,255,.55);transform:translateY(-1px);}
/* dose section: net-weight quick tip */
.dose__tip{margin-top:16px;font-size:14px;line-height:1.55;color:#5c636b;border-left:3px solid #0b1c66;padding:2px 0 2px 14px;max-width:560px;}
.dose__tip b{color:#15203a;font-weight:700;}
/* ingredient breakdown: explore-all CTA next to the carousel arrows */
.ingbd__explore{display:inline-flex;align-items:center;background:var(--ice);color:var(--ink);border-radius:100px;padding:10px 18px;font-size:14px;font-weight:600;text-decoration:none;margin-right:10px;white-space:nowrap;transition:background .2s;}
.ingbd__explore:hover{background:#aef0f7;}

/* ===== Dose + how-to: mobile stack + readability (authoritative, last in file) ===== */
@media(max-width:980px){
  /* never split the 10:1 section on mobile — pouch on top, story below */
  .dose__grid:has(.dose__pcard){grid-template-columns:1fr!important;gap:16px!important;align-items:stretch!important;}
  .dose__pcard{order:-1;min-height:300px!important;}
  .dose__story{padding:30px 24px!important;}
  /* how-to: real breathing room between the step label and the media */
  .howto__step{gap:20px;padding:24px 22px 34px;}
  .howto__sbody{margin-top:4px;}
}
/* quick tip: always solid + readable (no faint/white text) */
.dose__tip{color:#2b2e33!important;border-left:3px solid var(--ice)!important;}
.dose__tip b{color:#0b1c66!important;}
/* remove any stray scroll/control bar inside the dose cards */
.dose__pcard,.dose__story{scrollbar-width:none;-ms-overflow-style:none;}
.dose__pcard::-webkit-scrollbar,.dose__story::-webkit-scrollbar{display:none;width:0;height:0;}

/* ---- MOBILE FLIP-CARD READABILITY (Joakim 2026-07-02: flipped ingredient text too big + clipped) ---- */
@media (max-width:760px){
  .igrid__back{padding:22px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .igrid__back h3{font-size:21px;letter-spacing:-.3px;padding-right:28px;}
  .igrid__back p{font-size:13.5px;line-height:1.55;margin-top:10px;}
  .igrid__back .meta{margin-top:16px;font-size:12px;}
  .igrid__back .close{top:14px;right:16px;font-size:22px;}
  .ingcard__back{padding:22px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .ingcard__back h4{font-size:20px;padding-right:26px;}
  .ingcard__back .b{font-size:13.5px;line-height:1.55;margin-top:10px;}
  .ingcard__back .meta{margin-top:16px;}
}
@media (max-width:760px){
  .pdpsc__name{font-size:13px;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.2;}
  .pdpsc__sub{font-size:11px;}
}

/* ---- MID-PAGE "START YOUR RITUAL" CTA (Joakim 2026-07-02: every content page needs a buy path near the top) ---- */
.miniCta{padding:34px 25px;text-align:center;}
.miniCta__btn{display:inline-flex;align-items:center;gap:10px;background:#CEFBFF;color:#0d0f12;font-weight:700;font-size:16px;letter-spacing:-.15px;padding:16px 30px;border-radius:100px;text-decoration:none;box-shadow:0 10px 26px rgba(8,18,40,.14);transition:transform .2s ease, box-shadow .2s ease;}
.miniCta__btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(8,18,40,.2);}
.miniCta__btn svg{width:18px;height:18px;}
.miniCta__sub{margin-top:10px;font-size:12.5px;color:#5a6472;}

/* WELCOME10 announcement bar removed site-wide (Joakim 2026-07-02) */
.ann{display:none !important;}

/* iOS Safari 3D flip robustness: explicit rotation on faces prevents mirrored bleed-through */
.ingcard__inner,.igrid__inner{-webkit-transform-style:preserve-3d;}
.ingcard__front,.igrid__front{transform:rotateY(0deg);}
.ingcard__back{-webkit-backface-visibility:hidden;}
@media (max-width:880px){
  .howto__vid[src*="howto-scoop"]{object-position:62% 50%;}
}

/* ---- JOAKIM MOBILE REVIEW JUL 3 BATCH ---- */
/* IM8-STYLE PURCHASE BOXES (matches the reference screenshot):
   Monthly is a full box w/ save badge + price/mo + per-serving; one-time is
   the small underlined link below. Both subscription tiers read as designed. */
#s-buybox .popt--box{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:20px 22px 15px;display:block;transition:border-color .15s ease, box-shadow .15s ease;}
#s-buybox .popt--box.is-active{border-color:var(--ink);box-shadow:0 8px 22px rgba(43,46,51,.11);}
#s-buybox .popt--box .popt__save{top:-12px;right:20px;}
#s-buybox .popt--box .popt__boxrow{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;}
#s-buybox .popt--box .popt__name{font-size:19px;font-weight:600;letter-spacing:-.3px;color:var(--ink);}
#s-buybox .popt--box .popt__sub{font-size:13px;color:var(--ink-2);margin-top:3px;}
#s-buybox .popt--box .popt__price{text-align:right;flex:none;}
#s-buybox .popt--box .popt__was{font-size:14px;text-decoration:line-through;opacity:.55;color:var(--ink-2);}
#s-buybox .popt--box .popt__now{font-size:23px;font-weight:700;letter-spacing:-.3px;color:var(--ink);}
#s-buybox .popt--box .popt__now small{font-size:14px;font-weight:600;opacity:.65;}
#s-buybox .popt--box .popt__boxfoot{display:flex;justify-content:space-between;align-items:baseline;margin-top:13px;padding-top:13px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-2);}
#s-buybox .popt--box .popt__boxfoot b{font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);}
/* one-time = small centered underlined link (IM8) */
#s-buybox .popt--link{display:flex;justify-content:center;align-items:center;background:transparent;border:none;box-shadow:none;padding:4px 0 2px;}
#s-buybox .popt--link .radio{display:none;}
#s-buybox .popt--link .popt__linktx{font-size:14px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
#s-buybox .popt--link .popt__linktx b{font-weight:700;}
#s-buybox .popt--link.is-active .popt__linktx{color:var(--ink);font-weight:600;}
/* PDP ingredient cards on mobile: same scale/typography as homepage cards */
@media (max-width:880px){
  .igrid__card{height:400px;}
  .igrid__ftext h3{font-size:23px;letter-spacing:-.3px;}
  .igrid__ftext p{font-size:13px;line-height:1.45;margin-top:6px;}
  .igrid__fhead{font-size:12px;}
  .igrid__add{width:52px;height:52px;font-size:24px;}
}
/* comparison: two columns in view, no overshoot */
@media (max-width:760px){
  #s-compare .compare__col{flex:0 0 calc((100vw - 232px)/2) !important;min-width:96px !important;}
  #s-compare .compare__col--th{flex-basis:calc((100vw - 224px)/2) !important;}
  #s-compare .compare__cols{padding-right:6px !important;}
}
/* mobile menu: compact frosted panel dropping from below the header (Seed-style,
   Joakim jul 4: NOT full-screen — header + page stay visible behind it). */
@media (max-width:1023px){
  .hdr__menu{
    top:74px !important; left:10px !important; right:10px !important; bottom:auto !important;
    width:auto !important; max-width:none !important; max-height:calc(100svh - 96px) !important;
    border-radius:24px !important; padding:14px 20px 20px !important;
    background:rgba(248,250,252,.78) !important;
    -webkit-backdrop-filter:blur(26px) saturate(180%) !important; backdrop-filter:blur(26px) saturate(180%) !important;
    transform:translateY(-14px) !important; transition:transform .34s cubic-bezier(.22,.8,.2,1), opacity .26s ease !important;
    overflow-y:auto !important;
  }
  body.nav-open .hdr__menu{transform:translateY(0) !important;}
  /* keep the header pill visible ABOVE the panel */
  .hdr--home, .hdr{z-index:1002 !important;}
  /* light scrim so page shows through (not an opaque wall) */
  .nav-scrim{background:rgba(12,16,24,.18) !important; -webkit-backdrop-filter:blur(1px); backdrop-filter:blur(1px);}
  /* tighter menu type + hide the redundant in-panel close (header X stays) */
  .hdr__menu-close{display:none !important;}
  .hdr__menu-grouptop{font-size:20px !important; padding:12px 0 !important;}
  .hdr__menu-sub a{font-size:15px !important; padding:6px 0 !important;}
  .hdr__menu-foot{padding-top:16px !important;}
}

.qtip{margin-top:14px;border-left:3px solid #CEFBFF;padding:2px 0 2px 14px;}
.qtip summary{cursor:pointer;font-weight:700;font-size:13.5px;list-style:none;}
.qtip summary::after{content:" +";color:#5a6472;}
.qtip[open] summary::after{content:" \2212";}
.qtip__body{font-size:13px;line-height:1.55;color:#4a5260;margin-top:8px;}

/* ---- JUL 3 VIDEO REVIEW BATCH ---- */
/* reviews marquee: slower on mobile so they are readable */
@media (max-width:880px){
  /* clearly-visible motion on mobile (60-80s read as frozen, Joakim jul 4) */
  .social__reviews .mq-track{animation-duration:42s !important;}
  .social__marquee .mq-track{animation-duration:30s !important;}
  .igstrip__track{animation-duration:40s !important;}
}
/* stacks-up: readable text, proper scrim, smaller type on mobile */
@media (max-width:880px){
  #s-stacks .vsx__c h2, .compareX h2{font-size:26px;}
}
/* quick-tip reads as a button now */
.qtip{border-left:0;padding:0;margin-top:14px;}
.qtip summary{display:inline-flex;align-items:center;gap:8px;background:#eaf7f9;border:1px solid rgba(8,18,40,.08);
  border-radius:100px;padding:9px 16px;font-weight:700;font-size:13px;cursor:pointer;}
.qtip summary::after{content:"+";font-size:15px;color:#0a5a66;}
.qtip[open] summary::after{content:"\2212";}
.qtip__body{background:#f2f5f7;border-radius:12px;padding:12px 14px;margin-top:8px;}
/* Building-the-ritual timeline — SEED-STYLE on mobile (Joakim jul 4): thin line + small
   dot on the far left, a small pill inline ABOVE a small heading, all full-width in one
   column. Kills the dead left gutter (pill used to sit in its own 128px column) and the
   giant .tl__d h4 heading. Fits far more per screen, like seed.com's timeline. */
@media (max-width:880px){
  .tl{padding:44px 16px !important;}
  .tl__wrap{gap:26px !important;}
  .tl__info{gap:22px !important;}
  .tl__head h2{font-size:23px !important;line-height:1.05 !important;}
  .tl__head p{font-size:14px !important;line-height:1.5 !important;margin-top:10px !important;}
  .tl__line{gap:0 !important;}
  .tl__line::before{left:6px !important;top:14px !important;bottom:22px !important;width:2px !important;}
  .tl__item{display:grid !important;grid-template-columns:16px 1fr !important;column-gap:12px !important;row-gap:5px !important;align-items:start !important;padding:11px 0 !important;}
  .tl__point{display:contents !important;}
  .tl__dot{grid-column:1 !important;grid-row:1 !important;width:14px !important;height:14px !important;border-width:3px !important;margin-top:3px !important;}
  .tl__pill{grid-column:2 !important;grid-row:1 !important;justify-self:start !important;min-width:0 !important;height:24px !important;padding:0 12px !important;font-size:11.5px !important;}
  .tl__d{grid-column:2 !important;grid-row:2 !important;}
  .tl__d h4{font-size:16px !important;line-height:1.25 !important;}
  .tl__d p{font-size:13px !important;line-height:1.5 !important;margin-top:3px !important;}
  .tl__imgs{gap:14px !important;}
  .tl__main{min-height:200px !important;}
  .tl__gal{height:150px !important;}
  .tl__gal img{max-height:150px;object-fit:cover;}
}

/* ---- JOAKIM JUL 4: MOBILE DENSITY (sections too long, text/icons too big) ---- */
@media (max-width:760px){
  /* feature "Formulated for function": tighter Seed-density */
  .feat__card{padding:26px 18px !important;}
  .feat__content p{font-size:14px !important;line-height:1.5 !important;margin-top:12px !important;}
  .feat__cards{margin-top:22px !important;gap:12px !important;}
  .feat__c{padding:16px 18px !important;}
  .feat__ic{width:32px !important;height:32px !important;margin-bottom:8px !important;}
  .feat__ic svg.feat__glyph{width:30px !important;height:30px !important;}
  .feat__c h4{font-size:16px !important;line-height:1.2 !important;}
  .feat__c p{font-size:12.5px !important;line-height:1.45 !important;margin-top:4px !important;}
  /* general section rhythm: shorter vertical padding + smaller body copy */
  .social{padding:56px 18px 44px !important;}
  .social__h{font-size:22px !important;}
  .stories,.mrev,.community,.promise,.ostory,.faq,.howto,.psol{padding-top:52px !important;padding-bottom:52px !important;}
  .research__right p,.community__c p,.promise__r p,.faq__l p,.mission__c p{font-size:13.5px !important;line-height:1.5 !important;}
  /* "How to make it" ritual: shorter cards so all 3 steps read faster */
  .ritual{padding:52px 18px 20px !important;}
  .ritual__head{margin-bottom:26px !important;}
  .ritual__sub{font-size:14px !important;line-height:1.5 !important;margin-top:10px !important;}
  .ritual__steps{gap:14px !important;max-width:360px !important;}
  .rcard{padding:14px 14px 20px !important;}
  .rcard__media{aspect-ratio:16/10 !important;}
  .rcard__top{padding:0 2px 10px !important;font-size:10px !important;}
  .rcard h3{font-size:19px !important;margin-top:12px !important;}
  .rcard p{font-size:13px !important;line-height:1.45 !important;margin-top:6px !important;}
  .ritual__cta{margin-top:26px !important;}
  /* press logo strip: tighter, less vertical air */
  .social__press{gap:20px !important;margin-top:22px !important;}
  .social__press img{max-height:20px !important;}
  /* promise accordions + lead copy tighter */
  .promise__r h2{font-size:24px !important;}
  .promise .ac summary{font-size:14px !important;padding:12px 0 !important;}
}

/* ---- JOAKIM JUL 4: smaller mobile type site-wide (Seed density — fit more per screen) ---- */
@media (max-width:760px){
  /* section headings a notch smaller than the old 25px */
  .sec-h2,
  .feat__content h2,.research__right h2,.community__c h2,.compare__text h2,.mission__c h2,
  .promise__r h2,.faq__l h2,.tl__head h2,.howto__head h2,.stories__head h2,.ostory__head h2,
  .nlcta__card h2,.featured__c h2,.psol h2,.ritual__head .sec-h2{
    font-size:22px !important;letter-spacing:-.3px !important;line-height:1.1 !important;}
  /* body / lead copy: calmer, denser */
  .feat__content p,.research__right p,.community__c p,.mission__c p,.promise__r .lead,
  .faq__l p,.ostory__c p,.stories__head p,.howto__head p,.ritual__sub,.psol p,
  .featured__c p,.nlcta__card p{font-size:13.5px !important;line-height:1.5 !important;}
  /* eyebrows a touch smaller */
  .igstrip__h{font-size:22px !important;}
  .igstrip__sub{font-size:13.5px !important;}
}

/* hero note: one row on desktop, stacked on mobile (Joakim jul 4: too much text in one row) */
.lhero__note-br{display:none;}
@media (max-width:760px){
  .lhero__note-br{display:inline;}
  .lhero__note-sep{display:none;}
  .lhero__note{line-height:1.5 !important;}
}

/* ---- JOAKIM JUL 4b: section-2 hierarchy + ingredient card text on mobile ---- */
@media (max-width:760px){
  /* the beat title (s2m__h "Eleven actives, one cup") must READ bigger than the card
     sub-head (bcard__h "One scoop, not a shelf") — Joakim: the hierarchy was inverted */
  #s-cup .bcard__h{font-size:17px !important;line-height:1.2 !important;margin:10px 0 5px !important;}
  #s-cup .bcard__s{font-size:13px !important;line-height:1.5 !important;}
  #s-cup .bcard__kicker{font-size:10px !important;}
  /* ingredient cards / "what's inside" — text still read too big */
  .ingcard__nm{font-size:22px !important;top:38px !important;}
  .ingcard__dose{font-size:12px !important;top:70px !important;}
  .ingcard__back h4{font-size:19px !important;}
  .ingcard__back .b{font-size:13px !important;line-height:1.5 !important;margin-top:8px !important;}
  .ingcard__lbl{font-size:10px !important;}
}

/* ---- JOAKIM JUL 4: "Building the ritual" timeline — fade the upcoming phases ----
   Like seed.com: the last two (future) phases sit dimmed so the journey feels ongoing. */
.tl__line .tl__item:nth-last-child(2){opacity:.60 !important;filter:blur(0) !important;transform:none !important;}
.tl__line .tl__item:nth-last-child(1){opacity:.40 !important;filter:blur(0) !important;transform:none !important;}

/* ---- JOAKIM JUL 4: dose "10x" points -> tap-to-expand (less text, more interactive) ---- */
.dose__accs{margin-top:18px;display:flex;flex-direction:column;gap:8px;}
.dose__q{border:1px solid #e4e8ec;border-radius:14px;background:#fff;overflow:hidden;transition:border-color .18s;}
.dose__q[open]{border-color:#c7d6ef;}
.dose__q summary{list-style:none;cursor:pointer;padding:13px 16px;font-weight:600;font-size:14.5px;color:var(--ink,#0a1526);display:flex;justify-content:space-between;align-items:center;gap:12px;}
.dose__q summary::-webkit-details-marker{display:none;}
.dose__q summary::after{content:"+";font-size:20px;font-weight:400;line-height:1;color:#0047AB;flex:none;transition:transform .2s;}
.dose__q[open] summary::after{content:"\2212";}
.dose__q p{margin:0;padding:0 16px 15px;font-size:13.5px;line-height:1.55;color:var(--ink-2,#5c636b);}

/* ---- JOAKIM JUL 4: IM8 buy-box — welcome kit row + future gifts accordion (90-Day box) ---- */
#s-buybox .popt__welcome{margin-top:14px;padding-top:14px;border-top:1px solid rgba(10,15,20,.10);}
#s-buybox .popt__welcome-h{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#0a0f14;opacity:.6;}
#s-buybox .popt__wkrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
#s-buybox .popt__wk{font-size:12.5px;font-weight:600;color:#0a3a6b;background:#eaf4ff;border:1px solid #cfe4ff;border-radius:100px;padding:6px 12px;}
#s-buybox .popt__gifts{margin-top:12px;border-top:1px solid rgba(10,15,20,.10);}
#s-buybox .popt__gifts summary{list-style:none;cursor:pointer;padding:12px 0 0;font-weight:600;font-size:13.5px;color:#0a0f14;display:flex;justify-content:space-between;align-items:center;}
#s-buybox .popt__gifts summary::-webkit-details-marker{display:none;}
#s-buybox .popt__gifts summary::after{content:"+";font-size:18px;color:#0047AB;font-weight:400;line-height:1;}
#s-buybox .popt__gifts[open] summary::after{content:"\2212";}
#s-buybox .popt__gifts p{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2,#5c636b);}
/* collapse them with the box when another plan is selected */
#s-buybox .popt--sel:not(.is-active) .popt__welcome,
#s-buybox .popt--sel:not(.is-active) .popt__gifts{display:none !important;}

/* ============ MOBILE-FIRST TIGHTENING 2026-07-05 (measured 390px audit; Joakim: 90% mobile traffic) ============ */
/* WebKit backface bug: ingredient flip-card painted its MIRRORED back face on load in iOS Safari.
   backface-visibility alone is unreliable inside preserve-3d in WebKit — gate with opacity too. */
.ingcard:not(.flipped) .ingcard__back{opacity:0 !important;pointer-events:none;transition:opacity .18s;}
.ingcard.flipped .ingcard__back{opacity:1 !important;}
.ingcard.flipped .ingcard__front{opacity:0;}

@media(max-width:880px){
  /* --- HOME: oversized type + dead space (audit sev 2-3) --- */
  .outro__h{font-size:24px !important;line-height:1.05 !important;}
  .outro{padding:48px 22px 40px !important;}
  .ingbd h2{font-size:22px !important;}
  .th-graph__h{font-size:22px !important;line-height:1.12 !important;}
  .th-graph-sec .th-graph__eyebrow{max-width:calc(100% - 84px);}
  .ingcard__nm{font-size:18px !important;}
  .ritual.wrap,.social.wrap,.promise.wrap{padding-top:36px !important;}
  .promise.wrap{padding-bottom:36px !important;}

  /* --- PDP: buy area density (sev 3: plan card was 642px tall, accordions 69px rows) --- */
  #s-pdphero details.ac summary{font-size:16px !important;padding:12px 0 !important;}
  label.popt{padding:16px !important;}
  .popt__name{font-size:16px !important;}
  .popt__now{font-size:18px !important;}
  ul.popt__list li{font-size:13px !important;line-height:1.45 !important;margin:4px 0 !important;}
  .bb__atc{font-size:16px !important;padding:16px 0 !important;}
  .bb__ptype{font-size:12px !important;text-transform:uppercase;letter-spacing:.08em;}
  /* --- PDP: ingredient block reads desktop-shrunk --- */
  .igrid__intro{font-size:14px !important;line-height:1.55 !important;}
  .igrid__title h1{font-size:24px !important;line-height:1.1 !important;}
  .igrid__face h3,.igrid__ftext h3{font-size:18px !important;}
  /* --- PDP: review surfaces padded out --- */
  .mrev__big{font-size:44px !important;line-height:1 !important;}
  .mrev__sum{padding:24px !important;}
  .mrev__card{padding:18px !important;}
  #s-social .rev{padding:16px 18px !important;height:auto !important;align-self:flex-start;}
  .dose__story h2{font-size:22px !important;}
  .ac__body a{display:inline-block;padding:8px 0;margin:-8px 0;}
}

/* 2026-07-05 finish pass: ingredients section header, calmer scale (Joakim: giant font + paragraph felt off) */
.igrid__title h1{font-size:clamp(26px,3.2vw,42px) !important;line-height:1.06 !important;letter-spacing:-.02em;}
.igrid__intro{font-size:clamp(14px,1.15vw,16.5px) !important;line-height:1.6 !important;max-width:58ch;}

/* ==== SEED HEADER: transparent at top, frosted grey on scroll (2026-07-08) ==== */
body:not(.is-scrolled) .hdr .hdr__inner{background:transparent;box-shadow:none;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;}
body:not(.is-scrolled) .hdr--home .hdr__inner, body:not(.is-scrolled) .hdr--home .hdr__inner a,
body:not(.is-scrolled) .hdr--home .hdr__top, body:not(.is-scrolled) .hdr--home .hdr__logo{color:#fff;}
body:not(.is-scrolled) .hdr--home .hdr__cta{background:rgba(255,255,255,.22);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);}

body.is-scrolled .hdr--home .hdr__inner, body.is-scrolled .hdr--home .hdr__inner a,
body.is-scrolled .hdr--home .hdr__top, body.is-scrolled .hdr--home .hdr__logo{color:var(--ink);}
body.is-scrolled .hdr--home .hdr__cta{background:var(--ice);color:#000;}