/** Shopify CDN: Minification failed

Line 952:48 Unexpected "}"

**/
:root{
  --navy:#1B1F45; --navy-2:#232750; --ink-black:#0A0C18;
  --cream:#FAF5EC; --cream-2:#F4EDDE; --panel:#FBF0DA;
  --gold:#C1861E; --gold-lt:#DCA94A; --gold-dim:#8A6118;
  --ff-serif:Spectral,Georgia,serif;
  --ff-sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --peri:#AFB4E4; --ink:#1A1A1E; --ink-2:#4A4B55; --ink-3:#7B7C86;
  --on-dark:#F2EDE3; --on-dark-2:#BAB9C9; --on-dark-3:#8C8BA1;
  --line:#E2D9C8; --line-2:#D3C8B2; --line-dark:#2E3358;
  --ph:#9A5A12; --ph-bg:#FBEBD4; --ph-line:#D79A46;
  --ok:#2F6B4F; --r:3px; --maxw:1200px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--ff-sans);
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden}
body.locked{overflow:hidden}
h1,h2,h3,h4,.serif{font-family:var(--ff-serif); font-weight:400; letter-spacing:-.012em}
h1{font-size:clamp(2.1rem,4.6vw,3.35rem); line-height:1.07; margin:0}
h2{font-size:clamp(1.75rem,3.5vw,2.75rem); line-height:1.14; margin:0 0 20px}
h3{font-size:clamp(1.2rem,2vw,1.55rem); line-height:1.22; margin:0 0 12px}
h4{font-size:1.02rem; line-height:1.34; margin:0 0 6px; font-weight:500; font-family:var(--ff-sans)}
p{margin:0 0 1em} a{color:inherit} b,strong{font-weight:600}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}
.narrow{max-width:860px; margin:0 auto}
.sec{padding:104px 0} .sec-sm{padding:68px 0}
@media(max-width:800px){ .sec{padding:64px 0} .sec-sm{padding:44px 0} }
.dark{background:var(--navy); color:var(--on-dark)}
.black{background:var(--ink-black); color:var(--on-dark)}
.panel{background:var(--panel)} .cream2{background:var(--cream-2)}
.dark h1,.dark h2,.dark h3,.dark h4,.black h1,.black h2,.black h3,.black h4{color:#fff}
.eyebrow{font-size:.685rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-dim); display:block; margin-bottom:16px; font-family:var(--ff-sans)}
.dark .eyebrow,.black .eyebrow{color:var(--gold-lt)}
.lede{font-size:1.06rem; color:var(--ink-2); max-width:60ch}
.dark .lede,.black .lede{color:var(--on-dark-2)}
.fine{font-size:.735rem; color:var(--ink-3); line-height:1.55}
.dark .fine,.black .fine{color:var(--on-dark-3)}
hr.rule{border:0; height:1px; background:var(--line); margin:40px 0}
.dark hr.rule,.black hr.rule{background:var(--line-dark)}

/* ---------- placeholder marking ---------- */
.ph-tag{display:inline-block; font:600 .635rem/1.3 var(--ff-sans); letter-spacing:.02em;
  color:var(--ph); background:var(--ph-bg); border:1px dashed var(--ph-line);
  border-radius:2px; padding:3px 7px; vertical-align:middle}
.ph-note{display:block; font:400 .74rem/1.5 var(--ff-sans); color:var(--ph);
  background:var(--ph-bg); border-left:2px solid var(--ph-line); padding:9px 12px; margin-top:12px; border-radius:0 2px 2px 0}
@media(max-width:900px){ .phbtn{bottom:auto; top:64px; right:10px; padding:8px 11px; font-size:10px} }

/* ---------- image placeholders (real paths, real attrs) ---------- */
.ph-img{position:relative; background:var(--cream-2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; overflow:hidden}
.ph-img.on-dark{background:#12152C; border-color:#262A4C}
.ph-img .lbl{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; text-align:center; padding:16px; pointer-events:none}
.ph-img .lbl .sachet{gap:0}
.ph-img .lbl > span,.ph-img .lbl > div > span{font:600 .68rem/1.4 var(--ff-sans); letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3)}
.ph-img.on-dark .lbl > span{color:#6C7099}
.ph-img .lbl em{font:400 .7rem/1.4 var(--ff-sans); font-style:normal; color:var(--ph)}
/* these labels sit on dark placeholder plates, where --ph is too low-contrast */
.theme-dark .ph-img .lbl em,.hero .ph-img .lbl em{color:#E3A94F}
.ph-img img{position:relative; z-index:2; width:100%; height:100%; object-fit:cover}
.ph-img img.missing{display:none}
.ph-img .frame{width:34px; height:34px; border:1px solid var(--line-2); border-radius:50%;
  display:flex; align-items:center; justify-content:center}
.ph-img.on-dark .frame{border-color:#303462}

/* ---------- sachet device ---------- */
.sachet{width:100px; height:282px; border-radius:5px; position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; flex:0 0 auto}
.sachet.am{background:linear-gradient(158deg,#F7F0E0 0%,#E7D9BE 54%,#D2C2A2 100%); color:#8A6118}
.sachet.pm{background:linear-gradient(158deg,#2B3067 0%,#191D45 54%,#0D1030 100%); color:#AFB4E4}
.sachet::before,.sachet::after{content:""; position:absolute; left:0; right:0; height:15px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.15) 2px,transparent 2px,transparent 5px)}
.sachet::before{top:0; border-radius:5px 5px 0 0} .sachet::after{bottom:0; border-radius:0 0 5px 5px}
.sachet .mk{font-family:var(--ff-serif); font-size:.56rem; letter-spacing:.3em; opacity:.85}
.sachet .one{font-family:var(--ff-serif); font-size:4rem; line-height:1.05}
.sachet .td{font-family:var(--ff-serif); font-size:.98rem; letter-spacing:.15em}
.sachet.sm{width:58px; height:160px} .sachet.sm .one{font-size:2.2rem} .sachet.sm .td{font-size:.66rem} .sachet.sm .mk{font-size:.4rem}
.sachet.xs{width:34px; height:92px} .sachet.xs .one{font-size:1.25rem} .sachet.xs .td{font-size:.46rem} .sachet.xs .mk{display:none}
.pairdev{display:flex; gap:12px; align-items:flex-end; justify-content:center}

/* ---------- buttons / focus ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; background:var(--gold);
  color:#14172F; border:1px solid var(--gold); font:600 .875rem/1 var(--ff-sans); letter-spacing:.015em;
  padding:16px 26px; border-radius:var(--r); text-decoration:none; cursor:pointer; min-height:48px;
  transition:background .15s,border-color .15s}
.btn:hover{background:var(--gold-lt); border-color:var(--gold-lt)}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.btn-lg{padding:19px 32px; font-size:.94rem; min-height:56px}
.btn-block{width:100%}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2); font-weight:500}
.btn-ghost:hover{background:rgba(0,0,0,.035); border-color:var(--ink-3)}
.dark .btn-ghost,.black .btn-ghost,.hero .btn-ghost{color:var(--on-dark); border-color:#3B3F68}
.dark .btn-ghost:hover,.black .btn-ghost:hover,.hero .btn-ghost:hover{background:rgba(255,255,255,.07)}
.btn-dark{background:var(--navy); border-color:var(--navy); color:#fff}
.btn-dark:hover{background:var(--navy-2); border-color:var(--navy-2)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:2px}
.dark a:focus-visible,.black a:focus-visible,.dark button:focus-visible{outline-color:var(--gold-lt)}
.txtlink{color:var(--gold-dim); text-decoration:none; border-bottom:1px solid rgba(138,97,24,.45); font-weight:500}
.txtlink:hover{border-bottom-color:currentColor}
.dark .txtlink,.black .txtlink{color:var(--gold-lt); border-bottom-color:rgba(220,169,74,.4)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:10px; top:10px; z-index:300; background:#fff; padding:11px 16px; border-radius:3px}
@media(max-width:860px){ .safety-grid{grid-template-columns:1fr!important; gap:22px!important; padding:22px 20px!important} }
@media(max-width:520px){ .docgrid{grid-template-columns:1fr} .xcard{grid-template-columns:90px 1fr; gap:14px} }
@media(prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important; transition-duration:.001ms!important} html{scroll-behavior:auto} }
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- header ---------- */
header{position:sticky; top:0; z-index:70; background:rgba(250,245,236,.94); backdrop-filter:blur(14px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:36px; height:68px}
.logo{font-family:var(--ff-serif); font-size:1.16rem; letter-spacing:.44em; text-decoration:none; padding-left:.44em}
.nav nav ul{display:flex; gap:26px; list-style:none; margin:0; padding:0}
.nav nav{flex:1}
.nav nav a{font-size:.83rem; text-decoration:none; color:var(--ink-2); font-weight:500}
.nav nav a:hover{color:var(--gold-dim)}
.navutil{display:flex; gap:14px; align-items:center}
.cartbtn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line-2); background:none;
  border-radius:100px; padding:9px 15px; font:500 .82rem/1 var(--ff-sans); cursor:pointer; min-height:40px}
.cartbtn .cnt{background:var(--navy); color:#fff; border-radius:100px; min-width:19px; height:19px;
  display:inline-flex; align-items:center; justify-content:center; font-size:.68rem; font-weight:600; padding:0 5px}
.burger{display:none; background:none; border:0; cursor:pointer; padding:8px; min-height:44px}
.burger span{display:block; width:20px; height:1.5px; background:var(--ink); margin:4px 0}
@media(max-width:900px){
  .nav{gap:12px; height:60px} .burger{display:block}
  .nav nav{position:absolute; top:60px; left:0; right:0; background:var(--cream); border-bottom:1px solid var(--line); display:none; padding:6px 22px 16px}
  .nav nav.open{display:block} .nav nav ul{flex-direction:column; gap:0}
  .nav nav a{display:block; padding:13px 0; border-bottom:1px solid var(--line); font-size:.95rem}
}

/* ---------- PDP top ---------- */
.pdp{padding:56px 0 88px; background:var(--cream)}
.pdp-grid{display:grid; grid-template-columns:1.04fr .96fr; gap:64px; align-items:start}
@media(max-width:980px){ .pdp-grid{grid-template-columns:1fr; gap:36px} .pdp{padding:28px 0 56px} }
.gallery{position:sticky; top:96px}
@media(max-width:980px){ .gallery{position:static} }
.gal-main{aspect-ratio:4/5; border-radius:var(--r)}
.gal-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:10px}
.gal-thumbs button{padding:0; border:1px solid var(--line); background:var(--cream-2); border-radius:2px; cursor:pointer; aspect-ratio:1; overflow:hidden; position:relative}
.gal-thumbs button[aria-current="true"]{border-color:var(--navy); border-width:2px}
.crumb{font-size:.75rem; color:var(--ink-3); margin-bottom:18px}
.crumb a{text-decoration:none; color:var(--ink-3)} .crumb a:hover{color:var(--gold-dim)}
.pdp-title{margin:0 0 6px}
.pdp-ident{font-size:1rem; color:var(--ink-2); margin:0 0 18px; max-width:44ch}
.dosesub{font-size:.85rem; color:var(--ink-2); border-left:2px solid var(--gold); padding:10px 0 10px 14px; margin:0 0 22px; max-width:50ch; line-height:1.6}
.dosesub b{color:var(--ink)}
.ratingrow{display:flex; align-items:center; gap:10px; margin-bottom:22px; font-size:.83rem; color:var(--ink-2); flex-wrap:wrap}
.stars{display:inline-flex; gap:2px} .stars svg{width:15px; height:15px}
.pricebox{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; margin-bottom:24px}
.pricerow{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.price{font-family:var(--ff-serif); font-size:2.5rem; line-height:1; color:var(--navy)}
.was{font-size:.95rem; color:var(--ink-3); text-decoration:line-through}
.saveflag{background:var(--panel); border:1px solid var(--line-2); color:var(--gold-dim);
  font:600 .68rem/1 var(--ff-sans); letter-spacing:.05em; padding:6px 9px; border-radius:2px}
.perday{font-size:.84rem; color:var(--ink-2); margin-top:8px}
.optlabel{font:600 .685rem/1 var(--ff-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin-bottom:11px; display:block}
.variants{display:grid; gap:9px; margin-bottom:26px}
.variant{display:flex; align-items:center; gap:14px; border:1px solid var(--line); background:#fff; border-radius:var(--r);
  padding:14px 16px; cursor:pointer; text-align:left; width:100%; font-family:inherit; transition:border-color .15s,background .15s}
.variant:hover{border-color:var(--line-2)}
.variant[aria-checked="true"]{border-color:var(--navy); background:var(--panel); box-shadow:inset 0 0 0 1px var(--navy)}
.variant .dot{width:16px; height:16px; border:1px solid var(--line-2); border-radius:50%; flex:0 0 auto; position:relative; background:#fff}
.variant[aria-checked="true"] .dot{border-color:var(--navy)}
.variant[aria-checked="true"] .dot::after{content:""; position:absolute; inset:3px; background:var(--navy); border-radius:50%}
.variant .v-t{flex:1; min-width:0}
.variant .v-n{font-weight:600; font-size:.9rem; display:block}
.variant .v-d{font-size:.775rem; color:var(--ink-3); display:block; margin-top:2px}
.variant .v-p{font-family:var(--ff-serif); font-size:1.12rem; white-space:nowrap}
.modes{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:10px}
.mode{border:1px solid var(--line); background:#fff; border-radius:var(--r); padding:14px 15px; cursor:pointer;
  text-align:left; font-family:inherit; position:relative; transition:border-color .15s,background .15s}
.mode[aria-checked="true"]{border-color:var(--navy); background:var(--panel); box-shadow:inset 0 0 0 1px var(--navy)}
.mode .m-n{font-weight:600; font-size:.875rem; display:block}
.mode .m-d{font-size:.755rem; color:var(--ink-3); display:block; margin-top:3px; line-height:1.45}
.mode .m-badge{position:absolute; top:-9px; right:10px; background:var(--gold); color:#14172F;
  font:600 .6rem/1 var(--ff-sans); letter-spacing:.05em; padding:5px 7px; border-radius:2px}
.cancelnote{font-size:.755rem; color:var(--ink-3); margin:0 0 24px}
.qtyrow{display:flex; align-items:center; gap:14px; margin-bottom:18px}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:var(--r); background:#fff}
.qty button{width:44px; height:48px; background:none; border:0; cursor:pointer; font-size:1.1rem; color:var(--ink-2)}
.qty input{width:46px; height:48px; border:0; text-align:center; font:500 .95rem var(--ff-sans); background:none;
  -moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.reassure{display:grid; grid-template-columns:1fr 1fr; gap:11px 18px; margin:22px 0 0; padding-top:20px; border-top:1px solid var(--line)}
.reassure div{display:flex; gap:9px; font-size:.775rem; color:var(--ink-2); line-height:1.45}
.reassure svg{width:15px; height:15px; flex:0 0 auto; margin-top:2px; stroke:var(--gold-dim)}
.trustwall{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.tb{display:flex; align-items:center; gap:7px; border:1px solid var(--line); background:#fff; border-radius:2px;
  padding:8px 11px; font:500 .72rem/1.2 var(--ff-sans); color:var(--ink-2); text-decoration:none}
.tb:hover{border-color:var(--line-2)}
.tb svg{width:14px; height:14px; stroke:var(--gold-dim); flex:0 0 auto}
.guarantee{display:flex; gap:14px; align-items:flex-start; background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--r); padding:16px 18px; margin-top:20px}
.guarantee svg{width:26px; height:26px; flex:0 0 auto; stroke:var(--gold-dim)}
.guarantee b{display:block; font-size:.875rem; margin-bottom:3px}
.guarantee p{margin:0; font-size:.775rem; color:var(--ink-2); line-height:1.5}

/* ---------- content blocks ---------- */
.benefit-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.benefit-strip div{padding:30px 26px; border-right:1px solid var(--line)}
.benefit-strip div:last-child{border-right:0}
.benefit-strip svg{width:22px; height:22px; stroke:var(--gold-dim); margin-bottom:14px}
.benefit-strip b{display:block; font-family:var(--ff-serif); font-size:1.06rem; font-weight:400; margin-bottom:5px}
.benefit-strip p{margin:0; font-size:.79rem; color:var(--ink-2); line-height:1.5}
@media(max-width:900px){ .benefit-strip{grid-template-columns:1fr 1fr}
  .benefit-strip div{padding:22px 18px; border-bottom:1px solid var(--line)}
  .benefit-strip div:nth-child(2n){border-right:0} }
.split{display:grid; grid-template-columns:1.1fr .9fr; gap:62px; align-items:center}
.split.rev{grid-template-columns:.9fr 1.1fr}
@media(max-width:900px){ .split,.split.rev{grid-template-columns:1fr; gap:32px} }
.statline{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line)}
.statline div{padding:26px 24px 0; border-right:1px solid var(--line)}
.statline div:last-child{border-right:0}
.statline b{font-family:var(--ff-serif); font-size:2.5rem; color:var(--gold-dim); display:block; line-height:1; font-weight:400}
.statline p{font-size:.81rem; color:var(--ink-2); margin:12px 0 0; line-height:1.5}
@media(max-width:800px){ .statline{grid-template-columns:1fr} .statline div{border-right:0; border-bottom:1px solid var(--line); padding-bottom:22px} }
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line)}
.trio > div{background:var(--cream); padding:34px 30px}
.dark .trio{background:var(--line-dark)} .dark .trio > div{background:var(--navy)}
@media(max-width:860px){ .trio{grid-template-columns:1fr} }
.numlarge{font-family:var(--ff-serif); font-size:2rem; color:var(--gold); display:block; margin-bottom:14px; line-height:1}

/* ---------- dose tables ---------- */
.dosepair{display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line)}
@media(max-width:900px){ .dosepair{grid-template-columns:1fr} }
.dosecol{padding:38px 34px} .dosecol.am{background:#fff}
.dosecol.pm{background:var(--navy); color:var(--on-dark)} .dosecol.pm h3{color:#fff}
@media(max-width:900px){ .dosecol{padding:28px 22px} }
.dtag{font:600 .67rem/1 var(--ff-sans); letter-spacing:.24em; color:var(--gold-dim); display:block; margin-bottom:14px}
.dosecol.pm .dtag{color:var(--peri)}
.dlist{list-style:none; margin:26px 0 0; padding:0}
.dlist li{padding:16px 0; border-top:1px solid var(--line)}
.dosecol.pm .dlist li{border-color:var(--line-dark)}
.dlist .d-h{display:flex; justify-content:space-between; gap:14px; align-items:baseline}
.dlist .d-n{font-weight:600; font-size:.9rem}
.dlist .d-v{font-family:var(--ff-serif); font-size:1.1rem; color:var(--gold-dim); white-space:nowrap}
.dosecol.pm .dlist .d-v{color:var(--gold-lt)}
.dlist .d-w{font-size:.81rem; color:var(--ink-2); margin:5px 0 0; line-height:1.5}
.dosecol.pm .dlist .d-w{color:var(--on-dark-2)}
.dlist .d-s{font-size:.71rem; color:var(--ink-3); margin:7px 0 0; letter-spacing:.01em}
.dosecol.pm .dlist .d-s{color:var(--on-dark-3)}
.d-s .ph-tag{background:none; border:0; border-bottom:1px dashed var(--ph-line); border-radius:0;
  padding:0 0 1px; font-weight:400; font-size:.71rem; color:var(--ph)}
.dosecol.pm .d-s .ph-tag{color:#D9A860; border-bottom-color:#7A5A22}
.evtable{width:100%; border-collapse:collapse; font-size:.86rem; background:#fff}
.evtable th{background:var(--navy); color:#fff; text-align:left; font:600 .69rem/1.3 var(--ff-sans);
  letter-spacing:.11em; text-transform:uppercase; padding:15px 18px}
.evtable td{padding:15px 18px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.5}
.evtable tr:last-child td{border-bottom:0}
.evtable td:nth-child(2){font-family:var(--ff-serif); font-size:1.1rem; color:var(--gold-dim); white-space:nowrap}
.scrollx{overflow-x:auto} .scrollx table{min-width:700px}

/* ---------- accordion ---------- */
.acc details{border-bottom:1px solid var(--line)}
.acc details:first-child{border-top:1px solid var(--line)}
.dark .acc details{border-color:var(--line-dark)}
.acc summary{cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-family:var(--ff-serif); font-size:1.05rem; line-height:1.35; min-height:48px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:""; position:absolute; right:8px; top:31px; width:11px; height:11px;
  border-right:1px solid var(--gold-dim); border-bottom:1px solid var(--gold-dim); transform:rotate(45deg) translateY(-3px)}
.acc details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.acc .abody{padding:0 44px 24px 0; font-size:.89rem; color:var(--ink-2); line-height:1.68}
.dark .acc .abody{color:var(--on-dark-2)}
.acc .abody p:last-child{margin-bottom:0}

/* ---------- timeline ---------- */
.tl{display:grid; grid-template-columns:repeat(5,1fr); gap:20px; position:relative; margin-top:52px}
.tl::before{content:""; position:absolute; top:6px; left:5px; right:5px; height:1px; background:var(--line-2)}
.tlc{position:relative; padding-top:34px}
.tlc .dot{position:absolute; top:0; left:0; width:13px; height:13px; border-radius:50%; background:var(--gold); border:3px solid var(--cream)}
.tlc:last-child .dot{background:var(--navy)}
.tlc .wk{font:600 .655rem/1 var(--ff-sans); letter-spacing:.15em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:9px}
.tlc h4{font-family:var(--ff-serif); font-size:1.08rem; font-weight:400; margin-bottom:9px}
.tlc p{font-size:.79rem; color:var(--ink-2); margin:0; line-height:1.52}
@media(max-width:860px){ .tl{grid-template-columns:1fr; gap:26px}
  .tl::before{left:6px; top:6px; bottom:6px; right:auto; width:1px; height:auto}
  .tlc{padding-top:0; padding-left:34px} }

/* ---------- doctor board / video ---------- */
.docgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:48px}
@media(max-width:900px){ .docgrid{grid-template-columns:1fr 1fr; gap:20px} }
.doc .ph-img{aspect-ratio:1; border-radius:var(--r); margin-bottom:16px}
.doc .d-n{font-family:var(--ff-serif); font-size:1.08rem; margin-bottom:3px}
.doc .d-c{font-size:.775rem; color:var(--gold-dim); margin-bottom:9px; font-weight:500}
.doc .d-b{font-size:.795rem; color:var(--ink-2); line-height:1.55; margin:0}
.dark .doc .d-b{color:var(--on-dark-2)} .dark .doc .d-c{color:var(--gold-lt)}
.videoblk{position:relative; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden}
.playbtn{position:absolute; inset:0; margin:auto; width:72px; height:72px; border-radius:50%;
  background:rgba(250,245,236,.93); border:0; cursor:pointer; z-index:4; display:flex; align-items:center; justify-content:center}
.playbtn::after{content:""; border-left:18px solid var(--navy); border-top:11px solid transparent;
  border-bottom:11px solid transparent; margin-left:5px}
.playbtn:hover{background:#fff}

/* ---------- reviews ---------- */
.rv-head{display:grid; grid-template-columns:230px 1fr; gap:52px; align-items:start; padding-bottom:34px; border-bottom:1px solid var(--line)}
/* the score column went with the seeded data — the heading takes the full row */
#reviews .rv-head{display:block; border-bottom:0}
#reviews .rv-head h2{max-width:none}
@media(max-width:800px){ .rv-head{grid-template-columns:1fr; gap:28px} }
.rv-score{font-family:var(--ff-serif); font-size:3.6rem; line-height:1; color:var(--navy)}
.rv-bars{display:grid; gap:9px}
.rv-bar{display:grid; grid-template-columns:52px 1fr 40px; gap:12px; align-items:center; font-size:.78rem; color:var(--ink-2)}
.rv-track{height:6px; background:var(--cream-2); border:1px solid var(--line); border-radius:100px; overflow:hidden}
.rv-fill{height:100%; background:var(--gold)}
.rv-ctrl{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin:30px 0}
.pill{border:1px solid var(--line-2); background:#fff; border-radius:100px; padding:9px 15px;
  font:500 .78rem/1 var(--ff-sans); cursor:pointer; min-height:38px}
.pill[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
.rv-ctrl select{border:1px solid var(--line-2); background:#fff; border-radius:100px; padding:9px 14px;
  font:500 .78rem var(--ff-sans); min-height:38px; cursor:pointer}
.rv{padding:28px 0; border-bottom:1px solid var(--line)}
.rv-top{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center; margin-bottom:10px}
.rv-who{display:flex; align-items:center; gap:10px; font-size:.84rem}
.rv-verified{display:inline-flex; align-items:center; gap:5px; font:600 .655rem/1 var(--ff-sans);
  color:var(--ok); background:#EAF2EC; border:1px solid #C6DCCD; border-radius:100px; padding:5px 9px}
.rv h4{font-family:var(--ff-serif); font-weight:400; margin-bottom:7px; line-height:1.25}
.rv p{font-size:.875rem; color:var(--ink-2); margin:0; line-height:1.62}
.rv-meta{font-size:.72rem; color:var(--ink-3); margin-top:10px}
.rv-empty{text-align:center; padding:60px 20px; border:1px dashed var(--line-2); border-radius:var(--r); background:var(--cream-2)}

/* ---------- cross-sell ---------- */
.xsell{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:38px}
@media(max-width:760px){ .xsell{grid-template-columns:1fr} }
.xcard{display:grid; grid-template-columns:118px 1fr; gap:20px; border:1px solid var(--line); background:#fff; padding:18px; border-radius:var(--r); align-items:center}
.xcard .ph-img{aspect-ratio:1; border-radius:2px}
.xcard h4{font-family:var(--ff-serif); font-size:1.08rem; font-weight:400; margin-bottom:4px}
.xcard .x-d{font-size:.775rem; color:var(--ink-3); margin:0 0 12px; line-height:1.45}
.xcard .x-p{font-family:var(--ff-serif); font-size:1.2rem; color:var(--navy); margin-right:auto}
.xcard .x-f{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.addmini{border:1px solid var(--navy); background:none; color:var(--navy); border-radius:var(--r);
  padding:9px 16px; font:600 .76rem/1 var(--ff-sans); cursor:pointer; min-height:38px}
.addmini:hover{background:var(--navy); color:#fff}

/* ---------- sticky bar ---------- */
.stickybar{position:fixed; left:0; right:0; bottom:0; z-index:66; background:var(--ink-black); color:var(--on-dark);
  border-top:1px solid #292C4A; padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:14px; transform:translateY(110%); transition:transform .24s ease}
.stickybar.show{transform:translateY(0)}
.stickybar .sb-i{flex:1; min-width:0}
.stickybar .sb-n{font-family:var(--ff-serif); font-size:.95rem; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stickybar .sb-p{font-size:.74rem; color:var(--on-dark-2)}
.stickybar .btn{padding:13px 22px; min-height:46px; white-space:nowrap}
@media(min-width:901px){ .stickybar{display:none} }

/* ---------- login modal ---------- */
.lg{position:fixed; inset:0; z-index:140; display:none; align-items:center; justify-content:center; padding:20px}
.lg.show{display:flex}
.lg-back{position:absolute; inset:0; background:rgba(10,12,24,.62); backdrop-filter:blur(3px)}
.lg-card{position:relative; width:min(412px,100%); background:var(--cream); border:1px solid var(--line);
  border-radius:var(--r); padding:30px 30px 26px; max-height:92vh; overflow-y:auto;
  box-shadow:0 30px 80px rgba(10,12,24,.42); animation:lgIn .22s ease}
@keyframes lgIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.lg-x{position:absolute; top:10px; right:10px}
.lg-card h2{font-size:1.42rem; margin:0 0 6px}
.lg-sub{font-size:.85rem; color:var(--ink-3); margin:0 0 22px; line-height:1.5}
.lg-card .field{margin-bottom:16px}
.lg-alt{background:none; border:0; padding:8px 0 0; font:500 .78rem var(--ff-sans); color:var(--gold-dim);
  text-decoration:underline; cursor:pointer}
.lg-err{font-size:.76rem; color:#9B2C2C; margin:-8px 0 14px; display:none}
.lg-otp input{letter-spacing:.5em; font-family:var(--ff-serif); font-size:1.3rem; text-align:center}
.lg-meta{display:flex; justify-content:space-between; align-items:center; gap:12px; margin:-4px 0 18px}
.lg-meta span{font-size:.76rem; color:var(--ink-3)}
.lg-row{display:flex; gap:10px; margin-top:4px}
.lg-row .btn{flex:1}
.lg-legal{font-size:.7rem; color:var(--ink-3); line-height:1.55; margin:16px 0 0; text-align:center}
.lg-done{text-align:center; padding:6px 0 0}
.lg-done .done-mark{margin:0 auto 18px}
.lg-who{font-family:var(--ff-serif); font-size:1.05rem; margin:0 0 4px}

/* ---------- cart drawer + checkout ---------- */
.scrim{position:fixed; inset:0; background:rgba(10,12,24,.55); z-index:100; opacity:0; visibility:hidden; transition:opacity .22s}
.scrim.show{opacity:1; visibility:visible}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(440px,100%); background:var(--cream); z-index:110;
  transform:translateX(102%); transition:transform .26s ease; display:flex; flex-direction:column; border-left:1px solid var(--line)}
.drawer.show{transform:translateX(0)}
.dw-h{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line)}
.dw-h h3{margin:0; font-size:1.2rem}
.iconbtn{background:none; border:0; cursor:pointer; width:40px; height:40px; display:flex; align-items:center; justify-content:center; color:var(--ink-2)}
.dw-b{flex:1; overflow-y:auto; padding:6px 22px}
.dw-f{border-top:1px solid var(--line); padding:20px 22px calc(20px + env(safe-area-inset-bottom)); background:var(--cream-2)}
.ci{display:grid; grid-template-columns:56px 1fr; gap:15px; padding:18px 0; border-bottom:1px solid var(--line); align-items:start}
.ci-v{background:var(--cream-2); border:1px solid var(--line); border-radius:2px; display:flex; align-items:center; justify-content:center; padding:7px 0}
.ci-n{font-weight:600; font-size:.875rem; margin:0 0 2px}
.ci-m{font-size:.745rem; color:var(--ink-3); margin:0 0 10px}
.ci-r{display:flex; align-items:center; justify-content:space-between; gap:12px}
.qty-sm button{width:32px; height:34px; font-size:1rem}
.qty-sm input{width:34px; height:34px; font-size:.85rem}
.ci-p{font-family:var(--ff-serif); font-size:1.05rem}
.ci-p s{color:var(--ink-3); font-size:.82em; text-decoration-thickness:1px; margin-right:2px}
.rm{background:none; border:0; font:500 .73rem var(--ff-sans); color:var(--ink-3); cursor:pointer;
  text-decoration:underline; padding:6px 0; margin-top:4px}
.rm:hover{color:#9B2C2C}
.totrow{display:flex; justify-content:space-between; font-size:.85rem; color:var(--ink-2); margin-bottom:9px}
.totrow.grand{font-size:1rem; color:var(--ink); font-weight:600; padding-top:12px; border-top:1px solid var(--line); margin-top:4px}
.totrow.grand span:last-child{font-family:var(--ff-serif); font-size:1.5rem; font-weight:400}
.empty{text-align:center; padding:70px 20px; color:var(--ink-3)}
.empty p{font-size:.88rem}

.co{position:fixed; inset:0; background:var(--cream); z-index:130; overflow-y:auto; display:none}
.co.show{display:block}
.co-h{position:sticky; top:0; background:rgba(250,245,236,.96); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); padding:16px 0; z-index:5}
.co-h .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px}
.steps{display:flex; gap:8px; align-items:center; font:600 .7rem/1 var(--ff-sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); flex-wrap:wrap}
.steps b{font-weight:600; color:var(--ink-3)}
.steps .on{color:var(--navy)} .steps .done{color:var(--gold-dim)}
.steps i{font-style:normal; color:var(--line-2)}
.co-grid{display:grid; grid-template-columns:1.25fr .75fr; gap:56px; padding:52px 0 90px; align-items:start}
@media(max-width:900px){ .co-grid{grid-template-columns:1fr; gap:34px; padding:32px 0 70px} }
.field{margin-bottom:18px}
.field label{display:block; font:500 .78rem/1 var(--ff-sans); color:var(--ink-2); margin-bottom:7px}
.field input,.field select,.field textarea{width:100%; border:1px solid var(--line-2); background:#fff;
  border-radius:var(--r); padding:14px 15px; font:400 .92rem var(--ff-sans); color:var(--ink); min-height:50px}
.field input:invalid:not(:placeholder-shown){border-color:#B4543F}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:600px){ .f2{grid-template-columns:1fr; gap:0} }
.pay{display:grid; gap:10px; margin-bottom:8px}
.payopt{display:flex; align-items:center; gap:13px; border:1px solid var(--line); background:#fff;
  border-radius:var(--r); padding:16px 17px; cursor:pointer}
.payopt:has(input:checked){border-color:var(--navy); background:var(--panel); box-shadow:inset 0 0 0 1px var(--navy)}
.payopt input{width:17px; height:17px; accent-color:var(--navy); flex:0 0 auto}
.payopt .p-n{font-weight:600; font-size:.875rem} .payopt .p-d{font-size:.755rem; color:var(--ink-3); display:block; margin-top:2px}
.summary{border:1px solid var(--line); background:#fff; border-radius:var(--r); padding:24px; position:sticky; top:96px}
@media(max-width:900px){ .summary{position:static} }
.done-wrap{text-align:center; max-width:600px; margin:0 auto; padding:90px 22px 120px}
.done-mark{width:72px; height:72px; border-radius:50%; border:1px solid var(--gold); margin:0 auto 30px;
  display:flex; align-items:center; justify-content:center}
.done-mark svg{width:30px; height:30px; stroke:var(--gold-dim)}
.demo-band{background:var(--navy); color:#fff; text-align:center; padding:11px 22px;
  font:600 .72rem/1.4 var(--ff-sans); letter-spacing:.09em; text-transform:uppercase}

/* ---------------- HERO SLIDER ---------------- */
.hero{position:relative; overflow:hidden; background:var(--cream); padding:56px 0 30px}
.viewport{overflow:hidden}
.track{display:flex; transition:transform .55s cubic-bezier(.4,0,.2,1)}
.slide{min-width:100%; padding:0 4px}
.s-grid{display:grid; grid-template-columns:200px minmax(0,1fr) 250px; gap:40px; align-items:center; max-width:var(--maxw); margin:0 auto; padding:0 22px}
@media(max-width:1080px){ .s-grid{grid-template-columns:1fr; gap:26px; text-align:center} }
.s-mid{text-align:center}
.s-sub{font-size:1.04rem; color:var(--ink-2); max-width:52ch; margin:20px auto 30px}
.s-vis{margin-top:34px; display:flex; justify-content:center; position:relative}
.s-halo{position:absolute; bottom:-6%; left:50%; transform:translateX(-50%); width:min(420px,72%); aspect-ratio:2/1;
  background:radial-gradient(circle at 50% 100%, var(--gold) 0%, rgba(193,134,30,.55) 45%, transparent 72%);
  border-radius:50% 50% 0 0 / 100% 100% 0 0; opacity:.28; z-index:0}
.s-stage{position:relative; z-index:2}

/* left clinical badge */
.claim{display:flex; flex-direction:column; align-items:flex-start; gap:16px}
@media(max-width:1080px){ .claim{align-items:center; flex-direction:row; justify-content:center; gap:14px} }
.claim .mark{width:58px; height:58px; border-radius:50%; background:var(--navy); display:flex; align-items:center; justify-content:center; flex:0 0 auto}
.claim .mark svg{width:26px; height:26px; stroke:var(--gold-lt); fill:none; stroke-width:1.4}
.claim p{font-family:var(--ff-serif); font-size:1.18rem; line-height:1.28; margin:0; max-width:13ch}
@media(max-width:1080px){ .claim p{max-width:none; font-size:1.02rem; text-align:left} }

/* right ingredient list */
.keylist{list-style:none; margin:0; padding:0; text-align:left}
.keylist li{display:flex; gap:12px; align-items:flex-start; padding:17px 0; border-bottom:1px solid var(--line); font-size:.97rem; line-height:1.4}
.keylist li:last-child{border-bottom:0}
.keylist svg{width:17px; height:17px; flex:0 0 auto; margin-top:4px; stroke:var(--gold); fill:none; stroke-width:2}
.keylist b{font-weight:600}
@media(max-width:1080px){ .keylist{max-width:420px; margin:0 auto} }

/* slider controls */
.dots{display:flex; gap:11px; justify-content:center; margin-top:34px}
.dots button{width:13px; height:13px; border-radius:50%; border:1px solid var(--line-2); background:none; cursor:pointer; padding:0}
.dots button[aria-current="true"]{background:var(--navy); border-color:var(--navy)}
.arrow{position:absolute; top:48%; width:46px; height:46px; border-radius:50%; border:1px solid var(--line-2);
  background:rgba(250,245,236,.9); cursor:pointer; z-index:8; display:flex; align-items:center; justify-content:center}
.arrow:hover{border-color:var(--ink-3)} .arrow svg{width:16px;height:16px;stroke:var(--ink-2);fill:none;stroke-width:1.6}
.arrow.prev{left:14px} .arrow.next{right:14px}
@media(max-width:1080px){ .arrow{display:none} }
.s-badge{display:inline-block; font:600 .66rem/1.1 var(--ff-sans); letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--line-2); border-radius:100px; padding:8px 15px; color:var(--gold-dim); margin-bottom:20px}

/* sachet device */
.sachet{width:118px; height:326px; border-radius:6px; position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; flex:0 0 auto; box-shadow:0 26px 54px rgba(20,18,10,.2)}
.sachet.am{background:linear-gradient(158deg,#F8F1E2 0%,#E8DBC0 54%,#D3C3A3 100%); color:#8A6118}
.sachet.pm{background:linear-gradient(158deg,#2B3067 0%,#191D45 54%,#0D1030 100%); color:#AFB4E4}
.sachet.pro{background:linear-gradient(158deg,#3A3018 0%,#211A0C 54%,#120E06 100%); color:#DCA94A}
.sachet.max{background:linear-gradient(158deg,#0E1030 0%,#07081C 60%,#04050F 100%); color:#C9CBF0}
.sachet::before,.sachet::after{content:""; position:absolute; left:0; right:0; height:16px;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.15),rgba(0,0,0,.15) 2px,transparent 2px,transparent 5px)}
.sachet::before{top:0;border-radius:6px 6px 0 0} .sachet::after{bottom:0;border-radius:0 0 6px 6px}
.sachet .mk{font-family:var(--ff-serif); font-size:.6rem; letter-spacing:.3em; opacity:.88}
.sachet .one{font-family:var(--ff-serif); font-size:4.6rem; line-height:1.05}
.sachet .td{font-family:var(--ff-serif); font-size:1.06rem; letter-spacing:.16em}
.sachet .ft{font:600 .52rem/1 var(--ff-sans); letter-spacing:.14em; opacity:.6; position:absolute; bottom:28px}
.sachet.sm{width:74px;height:206px} .sachet.sm .one{font-size:2.8rem} .sachet.sm .td{font-size:.78rem} .sachet.sm .mk{font-size:.46rem} .sachet.sm .ft{display:none}
.pairdev{display:flex; gap:14px; align-items:flex-end; justify-content:center}
@media(max-width:560px){ .sachet{width:92px;height:258px} .sachet .one{font-size:3.4rem} }

/* ---------------- generic blocks ---------------- */
.rowstats{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.rowstats div{padding:32px 26px; border-right:1px solid var(--line)}
.rowstats div:last-child{border-right:0}
.rowstats b{font-family:var(--ff-serif); font-size:2.1rem; color:var(--gold-dim); display:block; line-height:1; font-weight:400; margin-bottom:12px}
.rowstats p{margin:0; font-size:.81rem; color:var(--ink-2); line-height:1.5}
@media(max-width:900px){ .rowstats{grid-template-columns:1fr 1fr} .rowstats div{border-bottom:1px solid var(--line)} .rowstats div:nth-child(2n){border-right:0} }
@media(max-width:520px){ .rowstats{grid-template-columns:1fr} .rowstats div{border-right:0} }

.bcards{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); margin-top:52px}
.bcards > div{background:var(--cream); padding:34px 28px}
.bcards svg{width:24px; height:24px; stroke:var(--gold-dim); fill:none; stroke-width:1.3; margin-bottom:18px}
.bcards h4{font-family:var(--ff-serif); font-size:1.16rem; font-weight:400; margin-bottom:8px}
.bcards p{margin:0; font-size:.84rem; color:var(--ink-2); line-height:1.55}
@media(max-width:900px){ .bcards{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .bcards{grid-template-columns:1fr} }

/* ---------------- combined how-it-works + doses ---------------- */
.systemtabs{display:inline-flex; background:rgba(255,255,255,.07); border:1px solid var(--line-dark); border-radius:100px; padding:4px; margin-bottom:44px}
.systemtabs button{background:none; border:0; border-radius:100px; padding:12px 26px; cursor:pointer;
  font:600 .82rem/1 var(--ff-sans); color:var(--on-dark-2); min-height:44px}
.systemtabs button[aria-selected="true"]{background:var(--gold); color:#14172F}
.sysgrid{display:grid; grid-template-columns:.92fr 1.08fr; gap:60px; align-items:start}
@media(max-width:960px){ .sysgrid{grid-template-columns:1fr; gap:36px} }
.sysleft .tod{font-family:var(--ff-serif); font-size:3.1rem; line-height:1; color:var(--gold); margin-bottom:18px}
.sysleft.pm .tod{color:var(--peri)}
.sysleft h3{font-size:1.75rem; max-width:16ch}
.sysleft .when{display:flex; gap:12px; align-items:flex-start; margin-top:26px; padding-top:22px; border-top:1px solid var(--line-dark)}
.sysleft .when svg{width:17px;height:17px;stroke:var(--gold-lt);fill:none;stroke-width:1.5;flex:0 0 auto;margin-top:3px}
.sysleft .when p{margin:0; font-size:.86rem; color:var(--on-dark-2); line-height:1.55}
.sysd{list-style:none; margin:0; padding:0}
.sysd li{display:grid; grid-template-columns:1fr auto; gap:10px 18px; padding:16px 0; border-top:1px solid var(--line-dark)}
.sysd li:first-child{border-top:0; padding-top:0}
.sysd .n{font-weight:600; font-size:.94rem; color:#fff}
.sysd .v{font-family:var(--ff-serif); font-size:1.2rem; color:var(--gold-lt); white-space:nowrap; text-align:right}
.sysd .w{grid-column:1/-1; margin:0; font-size:.82rem; color:var(--on-dark-2); line-height:1.5}
.sysd .tagline{display:inline-block; font:600 .6rem/1 var(--ff-sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--peri); border:1px solid var(--line-dark); border-radius:2px; padding:4px 7px; margin-left:8px; vertical-align:middle}
.compound{display:flex; gap:20px; align-items:center; justify-content:center; flex-wrap:wrap;
  border:1px solid var(--line-dark); border-radius:var(--r); padding:26px 30px; margin-top:52px; background:rgba(255,255,255,.035)}
.compound span{font-family:var(--ff-serif); font-size:1.6rem; color:#fff}
.compound em{font-style:normal; font-size:.87rem; color:var(--on-dark-2); max-width:34ch}

/* ---------------- what makes us better ---------------- */
.better{background:var(--navy); border-radius:22px; padding:64px 58px}
@media(max-width:800px){ .better{padding:40px 24px; border-radius:14px} }
.bgrid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:42px}
@media(max-width:820px){ .bgrid{grid-template-columns:1fr} }
.bcell{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:32px 30px;
  display:grid; grid-template-columns:54px 1fr; gap:22px; align-items:start}
@media(max-width:560px){ .bcell{grid-template-columns:1fr; gap:16px; padding:26px 22px} }
.bcell svg{width:42px; height:42px; stroke:#fff; fill:none; stroke-width:1.1}
.bcell h3{color:#fff; margin-bottom:10px}
.bcell p{margin:0; font-size:.88rem; color:rgba(242,237,227,.82); line-height:1.6}
.bcell .more{background:none;border:0;padding:0;color:#fff;text-decoration:underline;cursor:pointer;font:500 .88rem var(--ff-sans)}
.bcell .rest{display:none} .bcell.open .rest{display:inline}

/* ---------------- stack-up table ---------------- */
.vs{width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff}
.vs th{padding:0 0 22px; font-weight:400}
.vs thead th{background:none; border:0}
.vs td{padding:22px 26px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); font-size:.95rem; vertical-align:middle}
.vs tr:last-child td{border-bottom:0}
.vs td:last-child{border-right:0}
.vs td.mark{text-align:center; width:210px}
.vs .yes,.vs .no{width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:1px solid}
.vs .yes{border-color:#9DBFAA; color:var(--ok)} .vs .no{border-color:#E0B9B2; color:#B4543F}
.vs .yes svg,.vs .no svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.vshead{display:grid; grid-template-columns:1fr 210px 210px; align-items:end; gap:0; margin-bottom:14px}
.vshead .h-b{text-align:center; font-family:var(--ff-serif); font-size:1.35rem; letter-spacing:.3em; padding-left:.3em}
.vshead .h-o{text-align:center; font-size:1.1rem; color:var(--ink-2); font-family:var(--ff-serif)}
.vshead .h-s{font:600 .66rem/1 var(--ff-sans); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dim); text-align:center; margin-top:6px}
@media(max-width:820px){
  .vshead{grid-template-columns:1fr 84px 84px} .vshead .h-b{font-size:.92rem; letter-spacing:.16em} .vshead .h-o{font-size:.9rem}
  .vs td{padding:15px 14px; font-size:.86rem} .vs td.mark{width:84px}
  .vs .yes,.vs .no{width:26px;height:26px}
}

/* ---------------- range strip ---------------- */
.range{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px}
@media(max-width:860px){ .range{grid-template-columns:1fr} }
.rcard{border:1px solid var(--line); background:#fff; border-radius:var(--r); padding:30px 28px; display:flex; flex-direction:column}
.rcard.feature{border:2px solid var(--navy); background:var(--panel)}
.rcard .vis{display:flex; justify-content:center; padding:6px 0 24px}
.rcard .tier{font:600 .645rem/1 var(--ff-sans); letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:10px}
.rcard h3{font-size:1.4rem; margin-bottom:8px}
.rcard .d{font-size:.87rem; color:var(--ink-2); margin:0 0 20px; line-height:1.55}
.rcard .p{font-family:var(--ff-serif); font-size:1.75rem; color:var(--navy); margin-bottom:4px}
.rcard .pd{font-size:.78rem; color:var(--ink-3); margin-bottom:22px}
.rcard .sp{flex:1}

/* ---------- merged-page additions ---------- */
/* how often, chosen per line in the cart */
.ci-freq{display:flex; gap:6px; margin-top:10px}
.ci-freq button{flex:1; border:1px solid var(--line); background:#fff; border-radius:100px;
  padding:7px 8px; font:600 .69rem/1.2 var(--ff-sans); color:var(--ink-2); cursor:pointer; min-height:34px}
.ci-freq button[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}
.ci-freq .save{font-weight:600; opacity:.75; font-size:.62rem}
.freq-note{font-size:.7rem; color:var(--ink-3); line-height:1.45; margin:8px 0 0}
@media(max-width:1080px){ .tiles{grid-template-columns:1fr 1fr} }

/* buy panel: single column now that the gallery is gone */
.pdp-grid{display:block!important; max-width:940px; margin-inline:auto}
.buybox{width:100%}
.tiles{grid-template-columns:repeat(4,1fr)}
.reassure{grid-template-columns:1fr 1fr}
@media(max-width:560px){ .reassure{grid-template-columns:1fr} }

/* ---------- buy: four product tiles ---------- */
.acctbtn{font:500 .82rem/1 var(--ff-sans); color:var(--ink-2); text-decoration:none; padding:9px 4px;
  white-space:nowrap; background:none; border:0; cursor:pointer}
.acctbtn:hover{color:var(--gold-dim)}
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:26px}
.tile{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:0;
  border:1px solid var(--line); background:#fff; border-radius:var(--r); padding:14px 14px 15px;
  cursor:pointer; text-align:left; font-family:inherit; transition:border-color .15s,background .15s; min-height:170px}
.tile:hover{border-color:var(--line-2)}
.tile[aria-checked="true"]{border-color:var(--navy); background:var(--panel); box-shadow:inset 0 0 0 1px var(--navy)}
.t-vis{display:flex; gap:5px; align-items:flex-end; justify-content:center; width:100%; height:66px; margin-bottom:12px}
.t-n{font-weight:600; font-size:.875rem; line-height:1.25}
.t-d{font-size:.73rem; color:var(--ink-3); line-height:1.4; margin:4px 0 10px; flex:1}
.t-p{font-family:var(--ff-serif); font-size:1.3rem; color:var(--navy); line-height:1}
.t-p.tbc{font-size:1rem; color:var(--ink-3)}
.t-flag{position:absolute; top:-1px; right:10px; background:var(--navy); color:#fff;
  font:600 .58rem/1 var(--ff-sans); letter-spacing:.11em; text-transform:uppercase; padding:6px 8px; border-radius:0 0 3px 3px}
.t-flag.alt{background:var(--gold-dim)}
.sachet.xs{width:26px; height:66px; border-radius:3px}
.sachet.xs .one{font-size:.95rem} .sachet.xs .td{font-size:.42rem; letter-spacing:.08em}
.sachet.xs::before,.sachet.xs::after{height:5px}
.waitnote{font-size:.78rem; color:var(--ink-2); background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--r); padding:11px 13px; margin:0 0 16px}
@media(max-width:520px){ .tiles{gap:8px} .tile{min-height:156px; padding:12px} .t-vis{height:56px} }

/* ---------- how it works (integrated, image beside text) ---------- */
.howworks{background:var(--cream); padding:96px 0}
@media(max-width:800px){ .howworks{padding:58px 0} }
.hw-head{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end;
  padding-bottom:30px; border-bottom:1px solid var(--line); margin-bottom:44px}
.hw-head h2{margin:0; max-width:19ch}
.hw-def{margin:clamp(9px,1.4vh,15px) 0 clamp(11px,1.7vh,18px);
  font-family:var(--ff-sans); font-weight:500; font-size:clamp(.88rem,1.35vh,1.02rem);
  line-height:1.55; letter-spacing:.008em; color:var(--gold-lt); max-width:none}
.hw-head-r{display:flex; flex-direction:column; gap:20px; align-items:flex-start}
.hw-head-r .lede{margin:0; font-size:.97rem}
@media(max-width:860px){ .hw-head{grid-template-columns:1fr; gap:24px; align-items:start} }
.systemtabs{display:inline-flex; background:var(--cream-2); border:1px solid var(--line); border-radius:100px; padding:4px; margin:0}
.systemtabs button{background:none; border:0; border-radius:100px; padding:11px 30px; cursor:pointer;
  font:600 .82rem/1 var(--ff-sans); color:var(--ink-2); min-height:42px; letter-spacing:.04em}
.systemtabs button[aria-selected="true"]{background:var(--navy); color:#fff}
.hw-grid{display:grid; grid-template-columns:400px 1fr; gap:56px; align-items:start}
@media(max-width:960px){ .hw-grid{grid-template-columns:1fr; gap:28px} }
.hw-img{aspect-ratio:5/6; border-radius:var(--r); position:sticky; top:96px}
@media(max-width:960px){ .hw-img{position:static; aspect-ratio:16/10} }
.hw-img{background:#0D1124; border-color:#1B2040; overflow:hidden}
.hw-vis.pm .hw-img .lbl > span{color:#6C7099}
.hw-tod{font-family:var(--ff-serif); font-size:2.4rem; line-height:1; color:var(--gold); margin-bottom:12px}
.hw-tod.pm{color:#fff}
.evsub{font-size:.72rem; color:var(--ink-3)}

.hw-txt h3{font-size:clamp(1.35rem,2.4vw,1.9rem); max-width:26ch; margin-bottom:14px}
.hw-when{font-size:.86rem; color:var(--ink-2); margin:0 0 26px; padding-bottom:22px; border-bottom:1px solid var(--line)}

/* ---------- how it works: the pair, shown together ---------- */
.hw-pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,3.4vw,56px);
  align-items:start}
.hw-card{display:flex; flex-direction:column; min-width:0}
.hw-card .hw-img{position:relative; top:auto; aspect-ratio:auto;
  height:clamp(190px,40vh,420px); margin-bottom:clamp(14px,2.4vh,30px)}
.hw-card .hw-when{margin:0; padding:0; border-bottom:0; max-width:34ch}
.hw-card h3{margin-bottom:8px}
@media(max-width:760px){
  .hw-pair{grid-template-columns:1fr; gap:26px}
  .hw-card .hw-img{height:clamp(150px,26vh,240px)}
}
.hl{list-style:none; margin:0; padding:0}
.hl li{padding:15px 0; border-bottom:1px solid var(--line)}
.hl li:last-child{border-bottom:0}
.hl-h{display:flex; justify-content:space-between; gap:20px; align-items:baseline}
.hl-n{font-weight:600; font-size:.95rem}
.hl-v{font-family:var(--ff-serif); font-size:1.35rem; color:var(--gold-dim); white-space:nowrap; line-height:1}
.hl-w{margin:5px 0 0; font-size:.82rem; color:var(--ink-3); line-height:1.5; max-width:56ch}
.hl-tag{display:inline-block; font:600 .58rem/1 var(--ff-sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy); border:1px solid var(--line-2); border-radius:2px; padding:4px 6px; margin-left:8px; vertical-align:middle}
.hw-foot{display:flex; gap:26px; align-items:center; flex-wrap:wrap; margin-top:48px; padding-top:30px; border-top:1px solid var(--line)}
.hw-eq{font-family:var(--ff-serif); font-size:1.9rem; color:var(--navy); white-space:nowrap}
.hw-foot p{margin:0; font-size:.9rem; color:var(--ink-2); max-width:60ch}

/* ---------- hero: locked to one viewport ---------- */
.sachet .ft{font-weight:600; letter-spacing:.14em; opacity:.6; position:absolute; line-height:1}
.sachet.lg{box-shadow:0 22px 46px rgba(20,18,10,.2)}
.herocallouts .benefit-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.hero{min-height:calc(100svh - 69px); display:flex; flex-direction:column; justify-content:center;
  padding:14px 0 12px; overflow:hidden}
.hero .viewport{flex:0 0 auto; position:relative; z-index:2}
.hero .dots,.hero .herocallouts,.hero .herotrust{position:relative; z-index:2}
.s-grid{display:grid; grid-template-columns:250px minmax(0,1fr) 250px; gap:28px; align-items:center;
  max-width:var(--maxw); margin:0 auto; padding:0 22px}
.s-mid{text-align:center}
.hero h1{font-size:clamp(1.7rem,3.3vw,2.9rem); line-height:1.08; white-space:nowrap}
.s-badge{margin-bottom:clamp(10px,1.6vh,20px)}
.s-sub{font-size:clamp(.88rem,1.5vh,1.02rem); color:var(--ink-2); max-width:58ch;
  margin:clamp(10px,1.6vh,18px) auto 0; line-height:1.55}
.s-vis{margin-top:clamp(14px,2.4vh,32px)}
.s-pills{display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:0 clamp(14px,1.8vw,28px); max-width:none; margin-top:clamp(12px,1.9vh,20px)}
.s-pills span{position:relative; padding:0 0 0 clamp(14px,1.8vw,28px);
  font-family:var(--ff-serif); font-weight:400; font-size:clamp(1rem,1.85vh,1.28rem);
  line-height:1.45; color:#F6F0E4; letter-spacing:-.006em;
  text-shadow:0 1px 16px rgba(4,5,13,.6)}
.s-pills span::before{content:""; position:absolute; left:0; top:.28em; bottom:.28em;
  width:2px; border-radius:2px;
  background:linear-gradient(180deg, rgba(220,169,74,0), var(--gold), rgba(220,169,74,0));
  box-shadow:0 0 10px rgba(220,169,74,.45)}
.s-pills span:first-child{padding-left:0}
.s-pills span:first-child::before{display:none}
@media(max-width:760px){
  .s-pills{flex-direction:column; gap:7px 0}
  .s-pills span{padding-left:0; font-size:.88rem}
  .s-pills span::before{display:none}
}
.s-ph{margin:clamp(6px,1vh,14px) auto 0; max-width:54ch;
  font-size:clamp(.74rem,1.2vh,.84rem); line-height:1.5; color:var(--ink-3)}
.claims{display:flex; flex-direction:column; gap:clamp(12px,2vh,22px); align-self:start; padding-top:clamp(2px,1vh,10px)}
.claim{display:grid; grid-template-columns:38px 1fr; gap:13px; align-items:center; text-align:left; flex-direction:row}
.claim .mark{width:38px; height:38px; border-radius:50%; background:var(--navy);
  display:flex; align-items:center; justify-content:center}
.claim .mark svg{width:18px; height:18px; stroke:var(--gold-lt); fill:none; stroke-width:1.4}
.claim p{font-family:var(--ff-serif); font-size:clamp(.88rem,1.35vh,1.02rem); line-height:1.3; margin:0; max-width:15ch}
.s-spacer{min-height:1px}
.dots{margin-top:clamp(12px,2vh,26px)}
/* sachet scales with viewport height */
.sachet.lg{--h:clamp(140px,27vh,300px); height:var(--h); width:calc(var(--h)*.362)}
.sachet.lg .one{font-size:calc(var(--h)*.226)}
.sachet.lg .td{font-size:calc(var(--h)*.052)}
.sachet.lg .mk{font-size:calc(var(--h)*.0294)}
.sachet.lg .ft{font-size:calc(var(--h)*.0255); bottom:calc(var(--h)*.08)}
.sachet.lg::before,.sachet.lg::after{height:calc(var(--h)*.049)}
.herocallouts{margin-top:clamp(14px,2.6vh,40px)}
.herocallouts .benefit-strip div{padding:clamp(12px,2vh,26px) clamp(14px,1.6vw,26px)}
.herocallouts .benefit-strip svg{width:19px; height:19px; margin-bottom:clamp(6px,1vh,12px)}
.herocallouts .benefit-strip b{font-size:clamp(.93rem,1.5vh,1.06rem); margin-bottom:4px}
.herocallouts .benefit-strip p{font-size:clamp(.71rem,1.15vh,.79rem); line-height:1.45}
.herotrust{justify-content:flex-start; margin-top:0}
/* the two proof marks hold the hero's bottom-left corner instead of sitting under the copy */
.hero .herocallouts{position:absolute; left:0; bottom:clamp(16px,3vh,40px); z-index:6;
  width:auto; max-width:none; margin:0; padding-left:clamp(18px,4vw,62px)}
@media(max-width:860px){
  .hero .herocallouts{position:static; padding-left:0; margin-top:clamp(12px,2vh,20px)}
  .herotrust{justify-content:center}
}
.herotrust .tb{padding:7px 11px; font-size:.71rem}
@media(max-width:1080px){
  .shelfrow{margin-left:0; margin-right:0}
  .s-grid{grid-template-columns:1fr; gap:14px; text-align:center}
  .s-spacer{display:none}
  .claims{flex-direction:row; justify-content:center; flex-wrap:wrap; gap:10px 22px}
  .claim{grid-template-columns:30px 1fr; gap:9px}
  .claim .mark{width:30px;height:30px} .claim .mark svg{width:15px;height:15px}
  .claim p{font-size:.82rem; max-width:13ch}
  .hero h1{font-size:clamp(1.45rem,5.6vw,2.2rem)}
}
@media(max-width:720px){
  .hero{min-height:calc(100svh - 61px); padding:8px 0}
  .hero h1{white-space:normal; font-size:clamp(1.3rem,6.2vw,1.85rem)}
  .s-sub{font-size:.8rem; max-width:34ch; line-height:1.45; margin-top:8px}
  .s-badge{font-size:.6rem; padding:6px 11px; margin-bottom:8px}
  .sachet.lg{--h:clamp(112px,18vh,180px)}
  .s-vis{margin-top:12px} .s-ph{margin-top:6px}
  .dots{margin-top:12px}
  .herocallouts{margin-top:14px}
  .herocallouts .benefit-strip{grid-template-columns:repeat(4,1fr)}
  .herocallouts .benefit-strip div{padding:11px 7px; border-bottom:0}
  .herocallouts .benefit-strip div:nth-child(2n){border-right:1px solid var(--line)}
  .herocallouts .benefit-strip div:last-child{border-right:0}
  .herocallouts .benefit-strip svg{width:15px; height:15px; margin-bottom:6px}
  .herocallouts .benefit-strip b{font-size:.7rem; line-height:1.25}
  .herocallouts .benefit-strip p{display:none}
  .herotrust{gap:5px; margin-top:12px} .herotrust .tb{padding:5px 7px; font-size:.6rem; gap:5px}
  .herotrust .tb svg{width:11px;height:11px}
  .claims{gap:6px 12px} .claim{grid-template-columns:24px 1fr; gap:7px}
  .claim .mark{width:24px;height:24px} .claim .mark svg{width:12px;height:12px}
  .claim p{font-size:.68rem; max-width:11ch; line-height:1.2}
}

/* header must never wrap to a second line */
.nav{flex-wrap:nowrap}
.nav nav ul{flex-wrap:nowrap; gap:20px}
.nav nav a{white-space:nowrap}
.nav .logo{flex:0 0 auto; white-space:nowrap}
.navutil{flex:0 0 auto; white-space:nowrap}
@media(max-width:1180px){
  .nav{gap:14px; height:60px}
  .burger{display:block}
  .nav nav{position:absolute; top:60px; left:0; right:0; background:var(--cream);
    border-bottom:1px solid var(--line); display:none; padding:6px 22px 16px}
  .nav nav.open{display:block}
  .nav nav ul{flex-direction:column; gap:0; flex-wrap:wrap}
  .nav nav a{display:block; padding:13px 0; border-bottom:1px solid var(--line); font-size:.95rem}
}
[hidden]{display:none!important}
.center{text-align:center} .center .lede{margin-inline:auto}
.btn-pill{border-radius:100px; letter-spacing:.14em; text-transform:uppercase; padding:19px 40px}
.sachet.md{width:74px; height:206px}
.sachet.md .one{font-size:2.8rem} .sachet.md .td{font-size:.78rem} .sachet.md .mk{font-size:.46rem} .sachet.md .ft{display:none}
.sachet.pro{background:linear-gradient(158deg,#3A3018 0%,#211A0C 54%,#120E06 100%); color:#DCA94A}
.sachet.max{background:linear-gradient(158deg,#0E1030 0%,#07081C 60%,#04050F 100%); color:#C9CBF0}
.pdp{padding:88px 0 96px}
@media(max-width:800px){ .pdp{padding:56px 0 64px} }

/* ---------- footer ---------- */
footer{background:var(--ink-black); color:var(--on-dark-2); padding:88px 0 34px; font-size:.85rem}
footer h4{color:#fff; font:600 .67rem/1 var(--ff-sans); letter-spacing:.17em; text-transform:uppercase; margin-bottom:17px; font-family:var(--ff-sans)}
footer ul{list-style:none; margin:0; padding:0} footer li{margin-bottom:11px}
footer a{color:var(--on-dark-2); text-decoration:none} footer a:hover{color:var(--gold-lt)}
.fgrid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:38px}
@media(max-width:900px){ .fgrid{grid-template-columns:1fr 1fr; gap:30px} }
.entity{border-top:1px solid #21243C; margin-top:56px; padding-top:30px; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; font-size:.775rem; line-height:1.7}
@media(max-width:800px){ .entity{grid-template-columns:1fr; gap:22px} }
.entity b{color:#fff; display:block; font-size:.67rem; letter-spacing:.15em; text-transform:uppercase; margin-bottom:9px; font-weight:600}
.legal{border-top:1px solid #21243C; margin-top:30px; padding-top:26px; font-size:.725rem; color:var(--on-dark-3); line-height:1.7}
.paymarks{display:flex; gap:7px; flex-wrap:wrap; margin-top:14px}
.paymarks span{border:1px solid #2A2D48; border-radius:2px; padding:6px 9px; font:600 .63rem/1 var(--ff-sans); color:var(--on-dark-3)}

/* ============ v7: one-view sections, full-width tiles, type normalisation ============ */
.fitview{min-height:calc(100svh - 69px); display:flex; flex-direction:column; justify-content:center;
  padding:clamp(20px,3.4vh,56px) 0; overflow:hidden}
.fitview > .wrap{width:100%}

/* type scale — one system across the page */
h2{font-size:clamp(1.6rem,2.9vw,2.4rem)!important; line-height:1.14}
h3{font-size:clamp(1.12rem,1.8vw,1.42rem)!important; line-height:1.25}
.journey h4,.rv h4{font-size:1.02rem!important}
.eyebrow{font-size:.66rem!important; letter-spacing:.2em; margin-bottom:12px}
.lede{font-size:clamp(.88rem,1.5vh,1rem)!important; line-height:1.6}
.fine{font-size:.71rem!important}
.sec h2[style],.sec h3[style]{font-size:inherit}

/* hero: one-line claims, tighter callouts */
.claim p{max-width:none; white-space:nowrap; font-size:clamp(.82rem,1.25vh,.95rem)}
.s-grid{grid-template-columns:230px 1fr 230px; gap:24px}
.s-vis{margin-top:clamp(12px,2vh,26px)}
.herocallouts{margin-top:clamp(12px,2.2vh,30px)}
.herocallouts .benefit-strip div{padding:clamp(10px,1.7vh,20px) clamp(12px,1.4vw,22px)}
.herocallouts .benefit-strip svg{width:17px; height:17px; margin-bottom:clamp(5px,.8vh,10px)}
.herocallouts .benefit-strip b{font-size:clamp(.87rem,1.35vh,.98rem)}
.herocallouts .benefit-strip p{font-size:clamp(.69rem,1.05vh,.76rem); line-height:1.4}
.herotrust{margin-top:clamp(10px,1.7vh,20px)}

/* how it works */
.howworks{padding:0}
.howworks.fitview{justify-content:center;
  padding-top:clamp(20px,3.4vh,52px); padding-bottom:clamp(20px,3.4vh,52px)}
.howworks.fitview > .wrap{margin-bottom:0}
.hw-head{grid-template-columns:1fr auto; align-items:center; gap:28px;
  padding-bottom:clamp(12px,1.8vh,22px); margin-bottom:clamp(14px,2.2vh,30px)}
.hw-head h2{max-width:none; white-space:nowrap}
.systemtabs button{padding:9px 24px; min-height:38px; font-size:.78rem}
.hw-grid{grid-template-columns:clamp(220px,24vw,320px) 1fr; gap:clamp(24px,3vw,48px)}
.hw-img{aspect-ratio:auto; position:relative; height:clamp(170px,35vh,350px)}
.hw-tod{font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:8px}
.hw-txt h3{max-width:none; margin-bottom:10px}
.hw-when{font-size:.8rem; margin:0 0 clamp(12px,1.8vh,20px); padding-bottom:clamp(10px,1.6vh,18px)}
.hl li{padding:clamp(4px,.95vh,13px) 0}
.hl-n{font-size:clamp(.8rem,1.25vh,.93rem)}
.hl-v{font-size:clamp(.98rem,1.7vh,1.28rem)}
.hl-w{font-size:clamp(.7rem,1.05vh,.8rem); margin-top:2px; line-height:1.4}
.eqbanner{position:relative; width:100%; color:#fff;
  padding:clamp(16px,2.6vh,38px) 0; overflow:hidden;
  background:linear-gradient(100deg, #1A1207 0%, #2E2009 44%, #17100A 100%);
  border-top:1px solid rgba(220,169,74,.28); border-bottom:1px solid rgba(220,169,74,.28)}
/* a warm wash behind the equation so the banner carries weight */
.eqbanner::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52% 155% at 18% 50%, rgba(220,169,74,.26) 0%, rgba(220,169,74,.08) 48%, transparent 80%)}
.eqbanner .eqinner{position:relative; z-index:1}
.eqinner{display:flex; gap:clamp(18px,2.6vw,38px); align-items:center; justify-content:flex-start;
  flex-wrap:nowrap; text-align:left}
.eqhead{flex:1 1 auto; min-width:0; max-width:62ch}
.eqmath{flex:0 0 auto; font-family:var(--ff-serif); font-weight:400; white-space:nowrap;
  font-size:clamp(2rem,4.2vw,3.7rem); line-height:1; color:#F3EEE2; letter-spacing:.02em}
.eqmath i{font-style:normal; color:var(--on-dark-2); opacity:.7; padding:0 .06em}
.eqmath b{font-weight:400; color:var(--gold-lt); font-size:1.42em; letter-spacing:-.01em;
  text-shadow:0 0 14px rgba(220,169,74,.55), 0 0 44px rgba(220,169,74,.38)}
.eqcall{margin:0 0 8px; font-family:var(--ff-serif); font-weight:400;
  font-size:clamp(1.14rem,2.1vw,1.78rem); line-height:1.25; color:#F3EEE2; letter-spacing:-.01em}
.eqcall s{color:var(--on-dark-2); opacity:.62; text-decoration-thickness:1.5px}
.eqcall strong{font-weight:400}
.eqcall em{font-style:normal; color:var(--gold-lt); font-size:1.2em;
  text-shadow:0 0 12px rgba(220,169,74,.5), 0 0 34px rgba(220,169,74,.3)}
.eqsub{margin:9px 0 0; font-family:var(--ff-sans); font-weight:400;
  font-size:clamp(.82rem,1.15vw,.97rem); line-height:1.55; color:#CFC7B6; max-width:54ch}
.eqtag{display:inline-block; margin-top:12px; padding:6px 13px; border-radius:100px;
  border:1px solid rgba(220,169,74,.42); background:rgba(220,169,74,.07);
  font:600 .655rem/1 var(--ff-sans); letter-spacing:.16em; text-transform:uppercase; color:#F0D9A4}
.eqrule{flex:1 1 auto; min-width:24px; height:1px; background:linear-gradient(90deg,
  rgba(220,169,74,.7), rgba(255,255,255,.12))}
@media(max-width:760px){
  .eqinner{flex-wrap:wrap; justify-content:center; gap:12px; text-align:center}
  .eqrule{display:none}
  .eqhead{flex:1 1 100%; max-width:none}
}
@media(max-width:960px){ .hw-head{grid-template-columns:1fr} .hw-head h2{white-space:normal}
  .hw-img{height:clamp(150px,26vh,240px)} .hw-grid{grid-template-columns:1fr} }

/* what makes us better */
.better h2{color:#fff; margin-bottom:0}
.betterhead{margin-bottom:clamp(16px,2.6vh,34px)}
.better .eyebrow{color:var(--gold-lt)}
.bcell h3{font-size:clamp(1.12rem,1.8vw,1.42rem)}
.better h3{color:#fff}
#better .better{padding:clamp(24px,3.6vh,48px) clamp(22px,3vw,48px)}
#better h2{margin-bottom:clamp(16px,2.4vh,30px)}
#better .bgrid{gap:clamp(10px,1.6vh,18px); margin-top:0}
#better .bcell{padding:clamp(16px,2.2vh,26px) clamp(16px,1.8vw,26px); gap:16px; grid-template-columns:36px 1fr}
#better .bcell svg{width:32px; height:32px}
#better .bcell h3{margin-bottom:6px}
#better .bcell p{font-size:clamp(.84rem,1.35vh,.95rem); line-height:1.65}

/* stack-up + evidence heads */
.stackhead{margin-bottom:clamp(10px,2.1vh,32px)}
#stackup .vs td{padding:clamp(8px,1.35vh,16px) 22px; font-size:clamp(.8rem,1.25vh,.92rem)}
#stackup .vs .yes,#stackup .vs .no{width:26px; height:26px}
#stackup .vshead{margin-bottom:10px}
#stackup .vshead .h-b{font-size:clamp(1rem,1.8vh,1.25rem)}
#stackup .vshead .h-o{font-size:clamp(.88rem,1.5vh,1rem)}

/* evidence */
#evidence .evtable th{padding:clamp(8px,1.3vh,14px) 16px; font-size:.65rem}
#evidence .evtable td{padding:clamp(4px,.92vh,11px) 14px; font-size:clamp(.74rem,1.1vh,.85rem)}
#evidence .evtable td:nth-child(2){font-size:clamp(.95rem,1.6vh,1.1rem)}
.evpair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,26px); align-items:start}
.evcol{border:1px solid var(--line); background:#fff; overflow:hidden; border-radius:2px}
.evcap{display:flex; align-items:baseline; gap:10px; padding:clamp(8px,1.3vh,13px) 16px;
  background:var(--cream-2); border-bottom:1px solid var(--line)}
.evcap-t{font-family:var(--ff-serif); font-size:clamp(1rem,1.7vh,1.22rem); color:var(--gold-dim); line-height:1}
.evcap-s{font:500 .72rem/1 var(--ff-sans); color:var(--ink-3); letter-spacing:.03em}
.evcol .evtable{border:0}
.evfor{display:block; font:400 .68rem/1.25 var(--ff-sans); color:var(--ink-3); margin-top:1px}
#evidence .evtable td:nth-child(2){white-space:nowrap; text-align:right}
#evidence .evtable th:nth-child(2){text-align:right}
#evidence .evtable td:nth-child(3){font-size:clamp(.68rem,1vh,.78rem); color:var(--ink-3); line-height:1.4}
@media(max-width:900px){
  .evpair{grid-template-columns:1fr}
  #evidence .evtable td:nth-child(2){white-space:normal; text-align:right}
  #evidence .evtable td:nth-child(2) .ph-tag,
  #evidence .evtable td:nth-child(2) .evsub{display:block; margin-top:3px}
  #evidence .evtable td,#evidence .evtable th{padding-left:11px; padding-right:11px}
  #evidence .evtable th{font-size:.6rem}
  .evcol{overflow-x:hidden}
}
#evidence .scrollx{border:1px solid var(--line)}}
#evidence .acc summary{padding:clamp(4px,.85vh,11px) 36px clamp(4px,.85vh,11px) 0; font-size:clamp(.82rem,1.15vh,.9rem); min-height:0}
#evidence .acc summary::after{top:calc(50% - 6px)}
#evidence .acc .abody{padding:0 40px 14px 0; font-size:.8rem}

/* buy: tiles across the full page */
#buy .pdp-grid{max-width:var(--maxw); margin-inline:auto}
#buy .buybox{max-width:none}
#buy .tiles{grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:30px}
#buy .tile{min-height:180px; padding:18px}
#buy .t-vis{height:86px}
#buy .t-n{font-size:.92rem}
#buy .t-d{font-size:.76rem}
#buy .t-p{font-size:1.35rem}
.t-flag{display:none}
#buy .waitnote,#buy .qtyrow,#buy .reassure,#buy .trustwall,#buy .guarantee,#buy .buybox > .ph-tag{
  max-width:760px; margin-left:auto; margin-right:auto}
#buy .buybox > .ph-tag{display:block; width:max-content}
@media(max-width:900px){ #buy .tiles{grid-template-columns:1fr 1fr} }
@media(max-width:1080px){ .fitview{min-height:0} }


/* ============ v8: tighter rhythm + ingredient hover on the stack tiles ============ */
.sec{padding:74px 0}
.sec-sm{padding:48px 0}
@media(max-width:800px){ .sec{padding:48px 0} .sec-sm{padding:34px 0} }
.fitview{padding:clamp(14px,2.4vh,40px) 0}
#buy.pdp{padding:66px 0 72px}
@media(max-width:800px){ #buy.pdp{padding:42px 0 48px} }
#expect .tl{margin-top:clamp(28px,4vh,44px)}
#expect .center{margin-bottom:0}
.docgrid{margin-top:34px; gap:22px}
#reviews .rv-head{padding-bottom:26px}
#reviews .rv-ctrl{margin:22px 0}
#reviews .rv{padding:22px 0}
.acc summary{padding:17px 44px 17px 0}
.acc .abody{padding:0 44px 19px 0}
footer{padding:62px 0 28px}
.entity{margin-top:40px; padding-top:24px}
.legal{margin-top:24px; padding-top:20px}
#buy .tiles{margin-bottom:24px}
#buy .qtyrow{margin-bottom:14px}
#buy .reassure{margin-top:18px; padding-top:16px}
#buy .guarantee{margin-top:16px}
h2{margin-bottom:16px}

/* ---- hover: ingredients + quantities ---- */
#buy .tile{position:relative; overflow:visible}
.t-pop{position:absolute; left:50%; top:calc(100% + 9px); transform:translateX(-50%) translateY(-6px);
  width:min(300px,86vw); background:var(--ink-black); color:var(--on-dark); border:1px solid #2B2E4C;
  border-radius:6px; padding:13px 16px; box-shadow:0 18px 40px rgba(10,12,24,.34);
  opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease; z-index:40;
  text-align:left; pointer-events:none}
.t-pop::after{content:""; position:absolute; bottom:100%; left:50%; margin-left:-7px;
  border:7px solid transparent; border-bottom-color:var(--ink-black)}
#buy .tile:hover .t-pop,#buy .tile:focus-visible .t-pop,#buy .tile:focus-within .t-pop{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.t-pop-h{display:block; font:600 .6rem/1 var(--ff-sans); letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-lt); margin:0 0 8px}
.t-pop ul + .t-pop-h{margin-top:13px}
.t-pop ul{list-style:none; margin:0; padding:0}
.t-pop li{display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding:4px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:.775rem; line-height:1.35}
.t-pop li:last-child{border-bottom:0}
.t-pop li span{color:var(--on-dark-2)}
.t-pop li b{font-family:var(--ff-serif); font-weight:400; font-size:.95rem; color:#fff; white-space:nowrap}
.t-pop-f{display:block; margin-top:11px; padding-top:9px; border-top:1px solid rgba(255,255,255,.1);
  font-size:.68rem; line-height:1.4; color:var(--on-dark-3)}
@media(hover:none){ .t-pop{display:none} }


/* ============ v9: real pack photography (embedded) ============ */
.pk{display:block; background-repeat:no-repeat; background-position:center 38%; background-size:cover;
  background-color:#0D1124; border-radius:7px}
.pk-pair{background-image:url(pk-pair.webp)}
.pk-proam{background-image:url(pk-proam.webp)}
.pk-propm{background-image:url(pk-propm.webp)}
.pk-pro{background-image:url(pk-pro.webp)}
.pk-am{background-image:url(pk-am.webp)}
.pk-pm{background-image:url(pk-pm.webp)}
.heropk{height:clamp(150px,29vh,320px); aspect-ratio:4/5; margin:0 auto;
  box-shadow:0 22px 46px rgba(16,14,8,.26)}
.tilepk{height:86px; aspect-ratio:3/4; margin:0 auto; border-radius:5px; background-position:center 40%}
.hwpk{height:100%; width:100%; border-radius:0; background-position:center 42%}
.cartpk{display:block; width:46px; height:56px; border-radius:4px; background-position:center 40%}

/* ---- what it does: visual journey ---- */
.journey{display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:44px}
.jstep{padding:0 18px; position:relative}
.jstep:first-child{padding-left:0} .jstep.last{padding-right:0}
.jrail{position:relative; height:46px; margin-bottom:16px}
.jline{position:absolute; top:22px; left:23px; right:-18px; height:1px; background:var(--line-2)}
.jstep.last .jline{display:none}
.jnode{position:absolute; top:0; left:0; width:46px; height:46px; border-radius:50%;
  background:var(--navy); display:flex; align-items:center; justify-content:center; z-index:2}
.jnode svg{width:21px; height:21px; stroke:var(--gold-lt)}
.jstep.last .jnode{background:var(--gold)} .jstep.last .jnode svg{stroke:#14172F}
.jmeter{height:5px; background:#E7DECC; border-radius:100px; overflow:hidden; margin-bottom:14px; max-width:86%}
.jmeter span{display:block; height:100%; background:linear-gradient(90deg,var(--gold-lt),var(--gold)); border-radius:100px}
.jwk{font:600 .64rem/1 var(--ff-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:9px}
.journey h4{font-family:var(--ff-serif)!important; font-weight:400; margin-bottom:7px; line-height:1.25}
.journey p{margin:0; font-size:.79rem; color:var(--ink-2); line-height:1.5}
@media(max-width:900px){
  .journey{grid-template-columns:1fr 1fr; gap:26px 18px}
  .jstep{padding:0!important} .jline{display:none}
  .jrail{height:40px; margin-bottom:12px} .jnode{width:40px;height:40px} .jnode svg{width:18px;height:18px}
  .jmeter{max-width:100%}
}
@media(max-width:520px){ .journey{grid-template-columns:1fr} }

/* ================================================================
   v10 — ALFAA NIGHTFIELD
   One night into one morning. Every background is either the dark
   the PM sachet lives in, the first light, or full day at the point
   of purchase. Imagery is generated atmosphere + macro crops of the
   real pack — no stock.
   ================================================================ */
:root{
  --tx-proto:url(tx-proto.webp);
  --tx-room:url(tx-room.webp);
  --tx-nightfall:url(tx-nightfall.webp);
  --tx-sleepwave:url(tx-sleepwave.webp);
  --tx-caustics:url(tx-caustics.webp);
  --tx-clarity:url(tx-clarity.webp);
  --tx-morning:url(tx-morning.webp);
  --tx-grain:url(tx-grain.webp);
  --tx-nightroom:url(tx-nightroom.webp);
  --tx-dawnroom:url(tx-dawnroom.webp);
  --ink-night:#04050D;
}
/* film grain over the whole page — ties every chapter together */
body::after{content:""; position:fixed; inset:0; z-index:200; pointer-events:none;
  background-image:var(--tx-grain); background-size:140px 140px; opacity:.055; mix-blend-mode:overlay}
@media(prefers-reduced-motion:reduce){body::after{opacity:.04}}

.bg{position:relative; isolation:isolate; overflow:hidden}
.bg > *{position:relative; z-index:2}
.bg > .arrow{position:absolute; z-index:8}
.bg::before{content:""; position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center; transition:opacity .6s ease, background-image .4s ease}
.bg::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none}
/* chapter edges: each dark block bleeds into the next */
.edge-t::after{background:linear-gradient(180deg,rgba(4,5,13,.92) 0%,rgba(4,5,13,0) 26%)}
.edge-b::after{background:linear-gradient(0deg,rgba(4,5,13,.92) 0%,rgba(4,5,13,0) 26%)}
.edge-tb::after{background:linear-gradient(180deg,rgba(4,5,13,.9) 0%,rgba(4,5,13,0) 22%,rgba(4,5,13,0) 78%,rgba(4,5,13,.9) 100%)}

/* ---------- inverted type for the night chapters ---------- */
.night{background:var(--ink-night); color:var(--on-dark)}
.night h1,.night h2,.night h3,.night h4,.night b,.night strong{color:#fff}
.night .eyebrow{color:var(--gold-lt)}
.night .lede,.night p{color:var(--on-dark-2)}
.night .fine{color:var(--on-dark-3)}
.night .txtlink{color:var(--gold-lt); border-bottom-color:rgba(220,169,74,.4)}

/* ---------- HERO slide 0 — the problem ---------- */
.s0{position:relative}
/* a soft plate under the copy only, so the photograph can stay bright
   while the type keeps its contrast */
.s0::before{content:""; position:absolute; inset:-8% -4%; z-index:0; pointer-events:none;
  background:radial-gradient(44% 44% at 50% 48%, rgba(4,5,13,.72) 0%, rgba(4,5,13,.44) 58%, rgba(4,5,13,0) 100%)}
.s0 h1,.s0-sub{text-shadow:0 1px 14px rgba(4,5,13,.55)}
.s0-list b{text-shadow:0 1px 10px rgba(4,5,13,.5)}
/* the night runs full-bleed behind the hero, and only on the problem slide */
.s0-field{position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:0; transition:opacity .55s ease;
  background-image:var(--tx-room); background-size:cover; background-position:center 42%}
.hero[data-slide="0"] .s0-field{opacity:.76}
/* faded back so the type carries, with the scene still legible around it */
.s0-field::after{content:""; position:absolute; inset:0;
  background:
    radial-gradient(54% 46% at 50% 44%, rgba(4,5,13,.76) 0%, rgba(4,5,13,.46) 56%, rgba(4,5,13,.08) 100%),
    linear-gradient(180deg, rgba(4,5,13,.66) 0%, rgba(4,5,13,.16) 22%, rgba(4,5,13,.22) 58%, rgba(4,5,13,.90) 100%)}
.s0-in{position:relative; z-index:2; max-width:1240px; margin:0 auto; padding:0 22px; text-align:center}
.s0 h1{white-space:normal; margin:0; font-family:var(--ff-sans); font-weight:400;
  font-size:clamp(.95rem,1.62vw,1.54rem); line-height:1.38; letter-spacing:-.006em; color:#fff}
.s0 h1 b{font-weight:700; color:#fff}
.s0 h1 span{font-weight:400; color:#F0ECE4}
.s0-sub{font-family:var(--ff-sans); font-size:clamp(.86rem,1.5vh,1.04rem); color:#B9B3A7;
  line-height:1.8; letter-spacing:.01em; max-width:58ch; margin:clamp(22px,3.6vh,40px) auto 0}

/* the four frictions — one row, each under its own mark, ruled apart */
.s0-probs{list-style:none; margin:clamp(30px,5.2vh,62px) auto 0; padding:clamp(30px,5.2vh,62px) 0 0;
  max-width:1180px; border-top:1px solid rgba(255,255,255,.15);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.s0-probs li{display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(13px,2.2vh,23px); padding:clamp(2px,.6vh,8px) clamp(14px,2.2vw,36px)}
.s0-probs li + li{border-left:1px solid rgba(255,255,255,.13)}
.s0-probs svg{width:clamp(22px,2.9vh,29px); height:clamp(22px,2.9vh,29px);
  stroke:var(--gold-lt); fill:none; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
.s0-probs span{font-family:var(--ff-sans); font-size:clamp(.72rem,1.2vh,.85rem); line-height:1.85;
  letter-spacing:.014em;
  color:#D9D3C7; text-shadow:0 1px 10px rgba(4,5,13,.55)}

/* the four answers — mark and claim side by side */
.s0-helps{margin-top:clamp(28px,4.8vh,58px); padding-top:0; border-top:0}
.s0-label{display:block; font:600 .68rem/1 var(--ff-sans); letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-lt); margin-bottom:clamp(18px,3.1vh,32px)}
.s0-list{list-style:none; margin:0 auto; padding:0; max-width:1180px;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.s0-list li{display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:clamp(9px,1.2vw,15px); padding:0 clamp(10px,1.7vw,28px)}
.s0-list li + li{border-left:1px solid rgba(255,255,255,.13)}
.s0-list svg{width:19px; height:19px; stroke:var(--gold-lt); fill:none;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
.s0-list b{font-family:var(--ff-sans); font-weight:400; font-size:clamp(.77rem,1.3vh,.92rem);
  color:#EFEAE0; line-height:1.55; letter-spacing:.016em; text-shadow:0 1px 10px rgba(4,5,13,.5)}

/* the closing line — the promise the whole page hangs on */
.s0-close{margin:clamp(28px,4.8vh,56px) auto 0; font-family:var(--ff-serif); font-weight:400;
  font-style:italic; font-size:clamp(.96rem,1.62vh,1.16rem); line-height:1.6; color:#F2EAD9;
  letter-spacing:.012em; text-shadow:0 1px 14px rgba(4,5,13,.6)}

@media(max-width:1000px){
  .s0-probs,.s0-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s0-probs li:nth-child(3),.s0-list li:nth-child(3){border-left:0}
  .s0-probs li:nth-child(n+3),.s0-list li:nth-child(n+3){
    padding-top:clamp(12px,2vh,20px); margin-top:clamp(12px,2vh,20px);
    border-top:1px solid rgba(255,255,255,.1)}
  .s0-list li{justify-content:flex-start}
}
@media(max-width:600px){
  .s0-probs{grid-template-columns:1fr; max-width:36ch; padding-top:16px; margin-top:16px}
  .s0-probs li{flex-direction:row; text-align:left; align-items:center; gap:11px;
    border-left:0!important; padding:0}
  .s0-probs li + li{padding-top:11px; margin-top:11px; border-top:1px solid rgba(255,255,255,.1)}
  .s0-probs li br{display:none}
  .s0-probs span{font-size:.8rem; line-height:1.4}
  .s0-probs svg{width:20px; height:20px}
  .s0-list{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; row-gap:10px}
  .s0-list li{justify-content:flex-start; padding:0 6px; border-left:0!important}
  .s0-list li:nth-child(n+3){border-top:0; margin-top:0; padding-top:0}
  .s0-helps{margin-top:16px}
  .s0-close{margin-top:16px; font-size:.98rem}
  .s0-field{background-position:84% 42%}
  .s0::before{inset:-6% -12%;
    background:radial-gradient(72% 38% at 50% 45%, rgba(4,5,13,.84) 0%, rgba(4,5,13,.56) 60%, rgba(4,5,13,0) 100%)}
}

/* ---------- slide 2: the shelf, and what replaces it ---------- */
/* breaks out of the slide's narrow middle column so the shelf reads as a shelf */
.shelfrow{display:grid; grid-template-columns:minmax(0,1fr) auto auto; justify-content:center;
  align-items:end; gap:clamp(14px,2.6vw,40px);
  width:auto; margin-inline:max(-168px, -11vw)}
.shelf-a,.shelf-b{display:flex; flex-direction:column; align-items:center; gap:clamp(8px,1.3vh,14px); min-width:0}
.shelf-b{position:relative}
.shelfpk{display:block; width:clamp(104px,12.4vw,178px); height:clamp(146px,29vh,248px);
  background-size:contain; background-position:center bottom; background-repeat:no-repeat;
  background-color:transparent; border-radius:0; position:relative; z-index:2}
.shelf-b .s-halo{bottom:14%; width:min(240px,88%); opacity:.24}
.shelf-cap{font:500 clamp(.6rem,1vh,.7rem)/1.5 var(--ff-sans); letter-spacing:.02em;
  color:var(--ink-3); text-align:center; max-width:58ch}
.shelf-cap.is-gold{color:var(--gold-lt); font-weight:600; letter-spacing:.13em; text-transform:uppercase}
.shelf-arrow{align-self:center; color:var(--gold-lt); opacity:.9; margin-bottom:clamp(14px,3vh,34px)}
.shelf-arrow svg{width:clamp(30px,3.4vw,50px); height:auto; display:block}
@media(max-width:860px){
  .shelfrow{grid-template-columns:minmax(0,1fr); gap:10px; justify-items:stretch;
    justify-content:stretch; margin:0}
  .shelf-a,.shelf-b{width:100%}
  .shelf-arrow{transform:rotate(90deg); margin:0; justify-self:center; width:max-content}
  .bottles{height:15vh}
  .shelfpk{height:17vh; width:auto; aspect-ratio:.65}
  .shelf-cap{max-width:30ch}
}

/* ---------- the protocol: numbered steps ---------- */
.prohead{margin-bottom:clamp(26px,4vh,54px)}
.prosteps{list-style:none; margin:0; padding:0; max-width:1000px; margin-inline:auto}
.pstep{display:grid; grid-template-columns:clamp(88px,9vw,140px) minmax(0,1fr);
  gap:clamp(10px,2vw,30px); align-items:start;
  padding:clamp(22px,3.4vh,38px) 0; border-top:1px solid rgba(255,255,255,.12)}
.pstep:first-child{border-top:0; padding-top:0}
/* the steps only start hidden once a live script has taken charge of revealing
   them, so the copy is never lost if the JS fails or is switched off */
#protocol.js-reveal .pstep{opacity:0; transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1)}
#protocol.js-reveal .pstep.is-in{opacity:1; transform:none}
#protocol.js-reveal .pstep.is-in .pnum{color:rgba(220,169,74,.42)}
.pnum{transition:color .8s ease .15s; font-family:var(--ff-sans); font-weight:300; font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(2.1rem,4.2vw,3.4rem); line-height:.92; letter-spacing:.01em;
  color:rgba(255,255,255,.17)}
.pbody h3{color:#F4EFE4; margin-bottom:10px}
.pbody p{margin:0; font-size:clamp(.84rem,1.35vh,.95rem); line-height:1.65;
  color:var(--on-dark-2); max-width:68ch}
#protocol .ph-note{margin-top:clamp(20px,3vh,34px); max-width:1000px; margin-inline:auto}
@media(max-width:700px){
  .pstep{grid-template-columns:1fr; gap:6px; padding:20px 0}
  .pnum{font-size:1.9rem}
}

/* ================= dark theme for the lower half of the page =================
   The commerce and evidence sections used to run cream. Rather than rewrite every
   component, the palette tokens are re-pointed inside .theme-dark and only the
   handful of hard-coded light surfaces are patched underneath.                */
.theme-dark{
  --cream:#0B0D1A; --cream-2:#11142250; --panel:#161A31;
  --ink:#F2EDE3; --ink-2:#C7C1B3; --ink-3:#9B95A6;
  --line:rgba(255,255,255,.11); --line-2:rgba(255,255,255,.19);
  background:var(--ink-night); color:var(--ink)}
.theme-dark h1,.theme-dark h2,.theme-dark h3{color:#fff}
.theme-dark h4{color:#F2EDE3}
.theme-dark .eyebrow{color:var(--gold-lt)}
.theme-dark .lede,.theme-dark p{color:var(--ink-2)}
.theme-dark .fine,.theme-dark .hl-w{color:var(--ink-3)}
.theme-dark .txtlink{color:var(--gold-lt); border-bottom-color:rgba(220,169,74,.4)}

/* surfaces that were hard-coded white */
.theme-dark .tile,.theme-dark .variant,.theme-dark .mode,.theme-dark .qty,.theme-dark .tb,
.theme-dark .evtable,.theme-dark .evcol,.theme-dark .pill,.theme-dark .rv-ctrl select,
.theme-dark .xcard,.theme-dark .rcard,.theme-dark .dosecol.am,.theme-dark .vs,
.theme-dark .field input,.theme-dark .field select,.theme-dark .payopt,.theme-dark .summary{
  background:rgba(255,255,255,.045); color:var(--ink)}
.theme-dark .trio > div,.theme-dark .bcards > div{background:rgba(255,255,255,.04)}
.theme-dark .rv-track{background:rgba(255,255,255,.08)}
.theme-dark .ph-img{background:rgba(255,255,255,.04)}
.theme-dark .systemtabs{background:rgba(255,255,255,.06)}

/* selected states: navy reads as nothing on a dark ground, so they go gold */
.theme-dark .tile[aria-checked="true"],.theme-dark .variant[aria-checked="true"],
.theme-dark .mode[aria-checked="true"],.theme-dark .rcard.feature{
  border-color:var(--gold); background:rgba(220,169,74,.10);
  box-shadow:inset 0 0 0 1px rgba(220,169,74,.55)}
.theme-dark .evtable th{background:#1A1E3C; color:#fff}
.theme-dark .evcap{background:rgba(255,255,255,.055)}
.theme-dark .saveflag,.theme-dark .guarantee,.theme-dark .waitnote{
  background:rgba(220,169,74,.09); border-color:rgba(220,169,74,.30); color:var(--ink-2)}
.theme-dark .rv-empty{background:rgba(255,255,255,.03); border-color:var(--line-2)}
.theme-dark .playbtn{background:rgba(255,255,255,.12)}
.theme-dark .playbtn:hover{background:rgba(255,255,255,.22)}
.theme-dark .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.theme-dark .btn-ghost:hover{border-color:var(--gold); color:#fff}
.theme-dark .acc summary{color:#F2EDE3}
.theme-dark .acc details{border-color:var(--line)}
.theme-dark .stars svg{fill:var(--gold-lt)}
.theme-dark .panel{background:rgba(255,255,255,.035)}
.theme-dark .t-pop{background:#141830; border-color:var(--line-2); color:var(--ink)}
.theme-dark .t-pop b{color:#fff}

/* navy is the ink of the daylight chapters; at night it reads as a hole. */
.theme-dark .t-p,.theme-dark .price,.theme-dark .rcard .p,.theme-dark .rv-score,
.theme-dark .hw-eq,.theme-dark .xcard .x-p{color:var(--gold-lt)}
.theme-dark .t-flag,.theme-dark .demo-band,.theme-dark .pill[aria-pressed="true"],
.theme-dark .systemtabs button[aria-selected="true"]{background:var(--gold); color:#0B0D1A; border-color:var(--gold)}
.theme-dark .claim .mark,.theme-dark .tlc:last-child .dot,
.theme-dark .dots button[aria-current="true"]{background:var(--gold); border-color:var(--gold)}
.theme-dark .claim .mark svg{stroke:#0B0D1A; color:#0B0D1A}
.theme-dark .steps .on{color:var(--gold-lt)}
.theme-dark .addmini{border-color:var(--gold); color:var(--gold-lt)}
.theme-dark .addmini:hover{background:var(--gold); color:#0B0D1A}
.theme-dark .playbtn::after{border-left-color:#0B0D1A}
.theme-dark .t-was,.theme-dark .pd,.theme-dark .rcard .pd{color:var(--ink-3)}
/* gold-dim is tuned for cream; on a night plate it drops under 3:1 */
.theme-dark .evtable td:nth-child(2),.theme-dark .dosecol h3,
.theme-dark .tier,.theme-dark .evcap-t,.theme-dark .steps .done{color:var(--gold-lt)}
/* the placeholder markers must stay legible on the darker plate */
.theme-dark .ph-tag,.theme-dark .ph-note{color:#7A4207; background:#FBEBD0; border-color:#B8823A}

/* ======================= THE DOCTOR BOARD ======================= */
.docgrid2{display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(16px,2.2vw,30px); margin-top:clamp(26px,3.6vh,44px)}
@media(max-width:860px){ .docgrid2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:520px){ .docgrid2{grid-template-columns:1fr} }
.docpic{position:relative; aspect-ratio:1; border-radius:var(--r); overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.025) 100%);
  border:1px solid rgba(255,255,255,.12); margin-bottom:clamp(13px,1.9vh,18px)}
.docpic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.docpic img.missing{opacity:0}
.dx-d{display:block; font-family:var(--ff-serif); font-size:clamp(1.02rem,1.4vw,1.22rem);
  color:var(--gold-lt); line-height:1.25; margin-bottom:8px}
.docx p{margin:0; font-size:.81rem; line-height:1.65; color:var(--ink-2)}

/* ======================= FOUNDER'S NOTE ======================= */
.fnote{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(30px,4.6vw,72px); align-items:center}
@media(max-width:940px){ .fnote{grid-template-columns:1fr; gap:34px} }
.fq{margin:clamp(18px,2.6vh,30px) 0 0; padding:0; border:0;
  font-family:var(--ff-serif); font-weight:400; color:#fff;
  font-size:clamp(1.18rem,2.15vw,1.86rem); line-height:1.32; letter-spacing:-.01em}
.fq-sub{margin:clamp(18px,2.6vh,28px) 0 0; font-size:clamp(.86rem,1vw,.97rem);
  line-height:1.75; color:var(--ink-2); max-width:56ch}
.fq-creds{list-style:none; display:flex; flex-wrap:wrap; gap:9px;
  margin:clamp(20px,2.8vh,30px) 0 0; padding:0}
.fq-creds li{font:600 .63rem/1 var(--ff-sans); letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-2); border:1px solid rgba(255,255,255,.18); border-radius:2px; padding:10px 13px}
.fq-by{margin-top:clamp(22px,3vh,34px)}
.fq-name{display:block; font-family:var(--ff-serif); font-size:1.42rem; color:var(--gold-lt); line-height:1.2}
.fq-role{display:block; margin-top:7px; font:600 .63rem/1 var(--ff-sans); letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-3)}
@media(max-width:600px){ .fq-creds{gap:7px} .fq-creds li{padding:9px 11px; font-size:.58rem; letter-spacing:.11em} }

/* the film sits beside the note */
.videoblk{position:relative; margin:0; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden;
  background:#0D1124; border:1px solid rgba(255,255,255,.12)}
@media(max-width:940px){ .videoblk{aspect-ratio:4/5} .videoblk img{object-position:center 18%} }
.videoblk img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.videoblk img.missing{opacity:0}
.vidcap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px 18px;
  background:linear-gradient(0deg, rgba(4,5,13,.88) 0%, rgba(4,5,13,0) 100%)}
.vidcap span{display:block; font:600 .655rem/1.3 var(--ff-sans); letter-spacing:.16em;
  text-transform:uppercase; color:#EFE9DC}
.vidcap em{display:block; margin-top:5px; font-style:normal;
  font:400 .76rem/1.45 var(--ff-sans); color:#ADA694}

/* ======================= BUY: two products, then a window ======================= */
#buy .reassure,#buy .guarantee{max-width:820px; margin-inline:auto}
#buy > .wrap > .ph-tag{display:block; max-width:820px; margin-inline:auto}
.prodpair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,2.6vw,34px); margin:clamp(22px,3.4vh,40px) 0 clamp(26px,3.6vh,44px)}
.prodcard{display:flex; flex-direction:column; text-align:left; cursor:pointer;
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r); padding:0; overflow:hidden;
  background:rgba(255,255,255,.045); backdrop-filter:blur(6px); color:inherit;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease}
.prodcard:hover,.prodcard:focus-visible{border-color:var(--gold); transform:translateY(-3px);
  box-shadow:0 26px 54px rgba(0,0,0,.42)}
.pc-vis{display:block; height:clamp(180px,26vh,264px); background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.09); position:relative}
.pcpk{position:absolute; inset:0; width:100%; height:100%;
  background-size:contain; background-position:center; background-repeat:no-repeat}
.pc-body{display:flex; flex-direction:column; padding:clamp(18px,2.4vw,26px); gap:0; flex:1}
.pc-tier{font:600 .645rem/1 var(--ff-sans); letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-lt); margin-bottom:10px}
.pc-n{font-family:var(--ff-serif); font-size:clamp(1.3rem,2.1vw,1.72rem); color:#fff; line-height:1.15}
.pc-d{font-size:.87rem; color:var(--ink-2); line-height:1.55; margin-top:8px; max-width:34ch}
.pc-foot{display:flex; align-items:flex-end; justify-content:flex-start; gap:14px;
  flex-wrap:wrap; margin-top:auto; padding-top:clamp(16px,2.2vh,24px)}
.pc-p{font-family:var(--ff-serif); font-size:1.6rem; color:var(--gold-lt); line-height:1.1;
  display:flex; flex-direction:column; gap:5px}
.pc-p em{font-style:normal; font-family:var(--ff-sans); font-size:.74rem; color:var(--ink-3)}
.pc-cta{display:inline-flex; align-items:center; gap:8px; font:500 .81rem/1 var(--ff-sans);
  color:#F0EADD; border-bottom:1px solid rgba(220,169,74,.5); padding-bottom:5px}
.pc-cta svg{width:16px; height:16px; stroke:var(--gold-lt); fill:none;
  stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease}
.prodcard:hover .pc-cta svg{transform:translateX(4px)}
@media(max-width:760px){ .prodpair{grid-template-columns:1fr; gap:16px} }

/* ---- the product window ---- */
.pdscrim{position:fixed; inset:0; z-index:120; background:rgba(4,5,13,.72);
  backdrop-filter:blur(3px); opacity:0; transition:opacity .28s ease}
.pdscrim.show{opacity:1}
/* the window floats outside any section, so it carries the night tokens itself */
.pdwin{--ink:#F2EDE3; --ink-2:#C7C1B3; --ink-3:#A29CAD; --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.2);
  position:fixed; z-index:121; left:50%; top:50%; transform:translate(-50%,-46%) scale(.985);
  width:min(760px, calc(100vw - 32px)); max-height:min(90vh, 860px);
  background:#0C0F20; border:1px solid rgba(255,255,255,.14); border-radius:var(--r);
  box-shadow:0 50px 110px rgba(0,0,0,.6); color:var(--ink);
  opacity:0; transition:opacity .28s ease, transform .28s cubic-bezier(.22,.7,.3,1)}
.pdwin.show{opacity:1; transform:translate(-50%,-50%) scale(1)}
@media(prefers-reduced-motion:reduce){ .pdwin,.pdscrim{transition:none} }
.pdscroll{overflow:auto; max-height:inherit; padding:clamp(26px,3.4vw,40px)}
.pdclose{position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); border-radius:50%; background:rgba(255,255,255,.06)}
.pdclose:hover{border-color:var(--gold); background:rgba(220,169,74,.14)}
.pdclose svg{width:17px; height:17px; stroke:#EDE7DA; fill:none; stroke-linecap:round}
.pd-tier{display:block; font:600 .645rem/1 var(--ff-sans); letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-lt); margin-bottom:11px}
.pdhead h3{font-size:clamp(1.45rem,2.7vw,2rem); color:#fff; margin:0}
.pd-d{font-size:.9rem; color:var(--ink-2); line-height:1.6; margin:10px 0 0; max-width:52ch}

.pdsachets{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.8vw,20px);
  margin:clamp(20px,2.8vh,30px) 0 clamp(13px,1.8vh,18px)}
.pdsach{border:1px solid rgba(255,255,255,.11); border-radius:var(--r);
  background:rgba(255,255,255,.035); padding:16px; text-align:center}
/* a product whose singles are not shot yet shows the pair once, above the two cells */
.pdhero{display:flex; flex-direction:column; align-items:center; gap:10px;
  margin:clamp(20px,2.8vh,30px) 0 0}
.pdheropk{display:block; width:100%; height:clamp(150px,22vh,220px);
  background-size:contain; background-position:center; background-repeat:no-repeat}
.pdsach .pdpk{display:block; height:clamp(112px,17vh,156px); background-size:contain;
  background-position:center; background-repeat:no-repeat; margin-bottom:12px}
.pdsach b{display:block; font-family:var(--ff-serif); font-weight:400; font-size:1.18rem;
  color:var(--gold-lt); margin-bottom:5px}
.pdsach.pm b{color:#BFD2F5}
.pdsach span{display:block; font-size:.77rem; color:var(--ink-3); line-height:1.45}
.pdsach .pdsach-p{margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.1);
  font-family:var(--ff-serif); font-size:1.18rem; color:#EFE9DC}
.pdsach .pdsach-p .ph-tag{display:inline-block; margin-left:7px; vertical-align:2px;
  color:#7A4207; background:#FBEBD0; border-color:#B8823A}
.pdsach .pdsach-p s{color:var(--ink-3); font-size:.72em; margin-right:8px}
/* the dose card, on hover or keyboard focus */
.pdsach{position:relative}
.pdsach:focus-visible{outline:1px solid var(--gold); outline-offset:2px}
.pdpop{position:absolute; left:6px; right:6px; top:50%; transform:translateY(-44%) scale(.98);
  z-index:5; text-align:left; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility .2s;
  background:#141830; border:1px solid rgba(220,169,74,.4); border-radius:var(--r);
  padding:14px 16px; box-shadow:0 26px 54px rgba(0,0,0,.66)}
.pdsach:hover .pdpop,.pdsach:focus .pdpop,.pdsach:focus-within .pdpop,.pdsach.is-open .pdpop{
  opacity:1; visibility:visible; transform:translateY(-50%) scale(1)}
@media(prefers-reduced-motion:reduce){ .pdpop{transition:none} }
.pdpop-h{display:block; font:600 .6rem/1 var(--ff-sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-lt); margin-bottom:11px}
.pdpop ul{list-style:none; margin:0; padding:0}
.pdpop li{display:flex; justify-content:space-between; gap:14px; padding:5px 0;
  border-bottom:1px solid rgba(255,255,255,.08); font-size:.76rem; line-height:1.4}
.pdpop li:last-child{border-bottom:0}
.pdpop li span{color:var(--ink-2)}
.pdpop li b{font-family:var(--ff-serif); font-weight:400; color:#F0EADD; white-space:nowrap}
.pdpop-f{display:block; margin-top:10px; font-size:.7rem; line-height:1.45; color:var(--ink-3)}
.pdpop-soon{margin:0; font-size:.78rem; line-height:1.5; color:var(--ink-2)}
.pdpop.long{padding:11px 13px}
.pdpop.long li{padding:3px 0; font-size:.71rem; gap:10px}
.pdpop.long .pdpop-h{margin-bottom:8px}
.pdpop.long .pdpop-f{margin-top:8px; font-size:.66rem}
@media(max-width:600px){ .pdpop{width:min(250px,80vw)} }
.pdpick{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; cursor:pointer;
  margin-top:13px; padding:10px 12px; border-radius:var(--r); color:var(--ink);
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04);
  font:500 .79rem/1 var(--ff-sans); transition:border-color .2s ease, background .2s ease}
.pdpick:hover{border-color:rgba(255,255,255,.34)}
.pdpick .tick{width:16px; height:16px; border-radius:50%; flex:0 0 auto; position:relative;
  border:1px solid rgba(255,255,255,.34)}
.pdpick[aria-checked="true"]{border-color:var(--gold); background:rgba(220,169,74,.14); color:#fff}
.pdpick[aria-checked="true"] .tick{border-color:var(--gold); background:var(--gold)}
.pdpick[aria-checked="true"] .tick::after{content:""; position:absolute; left:4.5px; top:4px;
  width:5px; height:2.5px; border-left:1.6px solid #0B0D1A; border-bottom:1.6px solid #0B0D1A;
  transform:rotate(-45deg)}
.pd-price .ph-tag{margin-top:7px; align-self:flex-start}
.btn[disabled]{opacity:.45; cursor:not-allowed}

.pdcalls{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px clamp(14px,2vw,24px)}
.pdcalls li{position:relative; padding-left:24px; font-size:.83rem; line-height:1.5; color:#DCD6C9}
.pdcalls li::before{content:""; position:absolute; left:0; top:.32em; width:14px; height:14px;
  border-radius:50%; border:1px solid var(--gold); background:rgba(220,169,74,.16)}
.pdcalls li::after{content:""; position:absolute; left:4.4px; top:.62em; width:5px; height:2.5px;
  border-left:1.4px solid var(--gold-lt); border-bottom:1.4px solid var(--gold-lt);
  transform:rotate(-45deg)}
@media(max-width:600px){ .pdcalls{grid-template-columns:1fr} }

.pdhint{display:flex; align-items:center; justify-content:center; gap:9px; margin:0;
  font-size:.79rem; line-height:1.5; color:var(--ink-3)}
.pdhint svg{width:16px; height:16px; flex:0 0 auto; stroke:var(--gold-lt); fill:none;
  stroke-linecap:round; stroke-linejoin:round}
.pdstep{margin-top:clamp(20px,2.8vh,30px); padding-top:clamp(18px,2.4vh,26px);
  border-top:1px solid rgba(255,255,255,.12)}
.pdstep-1{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.pd-price{font-family:var(--ff-serif); font-size:clamp(1.6rem,2.8vw,2.1rem); color:var(--gold-lt);
  line-height:1.1; display:flex; flex-direction:column; gap:5px}
.pd-price em{font-style:normal; font-family:var(--ff-sans); font-size:.76rem; color:var(--ink-3)}
.pd-price s{color:var(--ink-3); font-size:.62em; margin-right:8px}
.pdstep-1 .btn{min-width:216px}

.pd-freqh{display:block; font:600 .68rem/1 var(--ff-sans); letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-lt); margin-bottom:14px}
.freqs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
@media(max-width:600px){ .freqs{grid-template-columns:1fr} }
.freqopt{text-align:left; cursor:pointer; padding:16px 18px; border-radius:var(--r);
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:inherit;
  display:flex; flex-direction:column; gap:6px; transition:border-color .2s ease, background .2s ease}
.freqopt:hover{border-color:rgba(255,255,255,.3)}
.freqopt[aria-checked="true"]{border-color:var(--gold); background:rgba(220,169,74,.12);
  box-shadow:inset 0 0 0 1px rgba(220,169,74,.5)}
.fq-n{display:flex; align-items:center; gap:9px; font:500 .95rem/1.2 var(--ff-sans); color:#fff}
.fq-tag{font:600 .58rem/1 var(--ff-sans); letter-spacing:.1em; text-transform:uppercase;
  color:#0B0D1A; background:var(--gold); border-radius:100px; padding:4px 8px}
.fq-d{font-size:.76rem; color:var(--ink-3); line-height:1.45}
.fq-p{font-family:var(--ff-serif); font-size:1.24rem; color:var(--gold-lt); margin-top:2px}
.pdconfirm{display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap}
.pd-note{margin:14px 0 0; font-size:.8rem; line-height:1.55; color:var(--gold-lt);
  border-left:2px solid rgba(220,169,74,.45); padding-left:12px}

/* ---------- section seams: a clear, deliberate break between chapters ----------
   carried by a real element, not ::before/::after — those belong to .bg's
   texture + scrim layers and collapse if this steals them. */
main > section{position:relative}
.seam{position:absolute; top:0; left:0; right:0; height:76px; z-index:7; pointer-events:none;
  background:linear-gradient(180deg, rgba(220,169,74,.085) 0%, rgba(220,169,74,0) 100%)}
.seam::before{content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, rgba(220,169,74,0) 0%, rgba(220,169,74,.5) 14%,
    var(--gold) 50%, rgba(220,169,74,.5) 86%, rgba(220,169,74,0) 100%);
  box-shadow:0 0 22px rgba(220,169,74,.42)}
.seam::after{content:""; position:absolute; top:2px; left:0; right:0; height:14px;
  background:linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 100%)}
@media(max-width:800px){ .seam{height:52px} }

/* ---------- HERO — dusk ---------- */
.hero{background:var(--ink-night)}
.hero::before{background-image:var(--tx-nightfall)}
.hero::after{background:
  radial-gradient(120% 70% at 50% 8%, rgba(4,5,13,.88) 0%, rgba(4,5,13,.34) 45%, rgba(4,5,13,0) 70%),
  linear-gradient(0deg, rgba(4,5,13,.92) 0%, rgba(4,5,13,0) 34%)}
/* slide 1 brings its own light, so the hero's blanket scrim steps back */
.hero[data-slide="0"]::after{background:
  linear-gradient(0deg, rgba(4,5,13,.88) 0%, rgba(4,5,13,0) 24%),
  linear-gradient(180deg, rgba(4,5,13,.55) 0%, rgba(4,5,13,0) 16%)}
.hero[data-slide="0"]::before{opacity:.25}
.hero h1{color:#F6F1E6}
.hero .s-badge{color:var(--gold-lt); border-color:rgba(220,169,74,.42); background:rgba(255,255,255,.04)}
.hero .s-sub{color:#CFC8BA}
.hero .s-ph{color:#9E98A8}
.hero .claim p{color:#E8E2D4}
.hero .claim .mark{background:rgba(255,255,255,.07); border:1px solid rgba(220,169,74,.3)}
.hero .claim .mark svg{stroke:var(--gold-lt)}
.hero .s-halo{opacity:.20; background:radial-gradient(circle at 50% 100%, var(--gold-lt) 0%, rgba(220,169,74,.4) 45%, transparent 72%)}
.hero .heropk{background-size:contain; background-position:center bottom; background-color:transparent;
  border-radius:0; box-shadow:none; height:clamp(170px,32vh,350px); aspect-ratio:291/720;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.55));
  -webkit-mask-image:radial-gradient(72% 62% at 50% 46%, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%);
  mask-image:radial-gradient(72% 62% at 50% 46%, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%)}
.hero .arrow{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16)}
.hero .arrow svg{stroke:#E8E2D4}
.hero .dots button{border-color:rgba(255,255,255,.34)}
.hero .dots button[aria-current="true"]{background:var(--gold-lt); border-color:var(--gold-lt)}
.hero .benefit-strip{border-color:rgba(255,255,255,.14)}
.hero .benefit-strip div{border-color:rgba(255,255,255,.14)}
.hero .benefit-strip b{color:#F2EDE3}
.hero .benefit-strip svg{stroke:var(--gold-lt)}
.hero .tb{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); color:#DBD5C6}
.hero .tb svg{stroke:var(--gold-lt)}
.hero .ph-tag{background:rgba(220,154,70,.14); border-color:rgba(220,154,70,.5); color:#E6B877}

/* ---------- header — dark glass throughout ---------- */
header{background:rgba(9,10,14,.95); backdrop-filter:blur(16px) saturate(1.05); border-bottom:1px solid rgba(255,255,255,.08)}
header .logo{color:#F4EFE4}
header .nav nav a{color:#fff} header .nav nav a:hover{color:var(--gold-lt)}
.acctbtn{color:#fff} .acctbtn:hover{color:var(--gold-lt)}
.cartbtn{color:#F4EFE4; border-color:rgba(255,255,255,.2)}
.cartbtn .cnt{background:var(--gold); color:#14172F}
.burger span{background:#F4EFE4}
@media(max-width:1180px){ .nav nav{background:rgba(6,7,16,.97)} .nav nav a{border-color:rgba(255,255,255,.1)} }

/* ---------- HOW IT WORKS — deep night, the light follows the sachet ---------- */
.howworks{background:var(--ink-night); color:var(--on-dark)}
.howworks::before{background-image:var(--tx-foilnight); background-size:cover; opacity:.5; filter:saturate(.8)}
.howworks[data-tod="am"]::before{background-image:var(--tx-foilday); opacity:.32; filter:saturate(.7) brightness(.85)}
.howworks::after{background:linear-gradient(180deg,rgba(4,5,13,.93) 0%,rgba(4,5,13,.80) 34%,rgba(4,5,13,.90) 100%)}
.howworks[data-tod="am"]::after{background:linear-gradient(180deg,rgba(6,7,16,.90) 0%,rgba(10,9,14,.74) 34%,rgba(4,5,13,.90) 100%)}
.howworks h2,.howworks h3{color:#fff} .howworks .eyebrow{color:var(--gold-lt)}
.howworks .hw-head{border-color:rgba(255,255,255,.15)}
.howworks .systemtabs{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16)}
.howworks .systemtabs button{color:#C9C3B4}
.howworks .systemtabs button[aria-selected="true"]{background:var(--gold); color:#14172F}
.howworks .hw-when{color:var(--on-dark-2); border-color:rgba(255,255,255,.14)}
.howworks .hl li{border-color:rgba(255,255,255,.12)}
.howworks .hl-n{color:#F2EDE3} .howworks .hl-v{color:var(--gold-lt)} .howworks .hl-w{color:#9E98A8}
.howworks .hl-tag{color:var(--peri); border-color:rgba(255,255,255,.2)}
.howworks .hw-img{background:transparent; border-color:rgba(255,255,255,.14); box-shadow:0 30px 60px rgba(0,0,0,.5)}
.howworks .fine{color:var(--on-dark-3)}
.howworks .ph-tag{background:rgba(220,154,70,.13); border-color:rgba(220,154,70,.45); color:#E6B877}
.eqbanner{background:linear-gradient(100deg,#1A1207 0%,#2E2009 44%,#17100A 100%);
  border-top:1px solid rgba(220,169,74,.34); border-bottom:1px solid rgba(220,169,74,.34)}

/* ---------- WHAT IT DOES — the night's own signal ---------- */
#expect{background:var(--ink-night); color:var(--on-dark)}
#expect::before{background-image:var(--tx-sleepwave); opacity:1}
#protocol{background:var(--ink-night); color:var(--on-dark)}
#protocol::before{background-image:var(--tx-proto); opacity:.95; background-size:cover}
#protocol::after{background:radial-gradient(64% 58% at 50% 46%, rgba(4,5,13,.80) 0%, rgba(4,5,13,.52) 58%, rgba(4,5,13,.18) 100%),linear-gradient(180deg,rgba(4,5,13,.92) 0%,rgba(4,5,13,.30) 22%,rgba(4,5,13,.38) 74%,rgba(4,5,13,.94) 100%)}
#protocol h2{color:#fff} #protocol .eyebrow{color:var(--gold-lt)}
#expect::after{background:linear-gradient(180deg,rgba(4,5,13,.90) 0%,rgba(4,5,13,.62) 40%,rgba(4,5,13,.93) 100%)}
#expect h2{color:#fff} #expect .eyebrow{color:var(--gold-lt)} #expect .lede{color:var(--on-dark-2)}
#expect .journey h4{color:#F2EDE3} #expect .journey p{color:#A5A0AE}
#expect .jline{background:rgba(255,255,255,.2)}
#expect .jnode{background:rgba(255,255,255,.08); border:1px solid rgba(220,169,74,.35)}
#expect .jstep.last .jnode{background:var(--gold); border-color:var(--gold)}
#expect .jmeter{background:rgba(255,255,255,.12)}
#expect .jwk{color:var(--gold-lt)}
#expect .fine{color:var(--on-dark-3)}

/* ---------- WHY ALFAA — caustics under the panel ---------- */
#better{background:var(--ink-night)}
#better::before{background-image:var(--tx-caustics); opacity:1}
#better::after{background:linear-gradient(180deg,rgba(4,5,13,.80) 0%,rgba(4,5,13,.18) 46%,rgba(4,5,13,.84) 100%)}
#better .better{background:rgba(8,10,26,.62); backdrop-filter:blur(14px) saturate(1.1); border:1px solid rgba(255,255,255,.12); box-shadow:0 40px 90px rgba(0,0,0,.45)}
#better .bcell{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.1)}

/* ---------- HOW WE STACK UP — daylight, clarity ---------- */
#stackup::before{background-image:var(--tx-clarity); opacity:1; background-size:cover}
#stackup::after{background:linear-gradient(180deg,rgba(250,245,236,.52) 0%,rgba(250,245,236,.06) 42%,rgba(250,245,236,.66) 100%)}
#stackup .vs{background:rgba(255,255,255,.72); backdrop-filter:blur(3px)}

/* ---------- BUY — the morning read at night ---------- */
#buy::before{background-image:var(--tx-morning); opacity:.34}
#buy::after{background:linear-gradient(180deg,rgba(4,5,13,.90) 0%,rgba(4,5,13,.66) 45%,rgba(4,5,13,.93) 100%)}
#buy .tile{background:rgba(255,255,255,.055); backdrop-filter:blur(6px); border-color:rgba(255,255,255,.14)}
#buy .tile:hover{border-color:rgba(255,255,255,.28)}
#buy .tile[aria-checked="true"]{background:rgba(220,169,74,.12); border-color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(220,169,74,.55)}
#buy .guarantee{background:rgba(220,169,74,.09); border-color:rgba(220,169,74,.3); backdrop-filter:blur(4px)}
#buy .tb{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14)}

/* ---------- EVIDENCE — clinical, but after dark ---------- */
#evidence::before{background-image:var(--tx-clarity); opacity:.30; transform:scaleX(-1)}
#evidence::after{background:linear-gradient(180deg,rgba(4,5,13,.90) 0%,rgba(4,5,13,.70) 45%,rgba(4,5,13,.93) 100%)}
#evidence .scrollx{background:rgba(255,255,255,.04); backdrop-filter:blur(3px)}

/* ---------- BOARD / FOUNDER / REVIEWS / FAQ — carry the night through ---------- */
#board,#reviews{background:var(--ink-night)}
.sec.cream2.theme-dark{background:#080A18}
#faq.panel.theme-dark{background:#0A0C1C}

/* ---------- CLOSE — back to full night ---------- */
.closing{background:var(--ink-night)}
.closing::before{background-image:var(--tx-nightfall); transform:scaleY(-1); opacity:1}
.closing::after{background:linear-gradient(180deg,rgba(4,5,13,.86) 0%,rgba(4,5,13,.5) 50%,rgba(4,5,13,.95) 100%)}

@media(max-width:800px){
  .bg::before{background-position:center}
  #expect::before{opacity:.6}
  .howworks::before{opacity:.35}
}


/* ---- v10 responsive re-assert (must win over later desktop rules) ---- */
@media(max-width:1080px){
  .s-grid{grid-template-columns:1fr!important; gap:14px!important; text-align:center}
  .s-spacer{display:none}
  .claims{flex-direction:row; justify-content:center; flex-wrap:wrap; gap:10px 22px}
  .claim{grid-template-columns:30px 1fr; gap:9px}
  .claim p{white-space:normal}
  .arrow{display:none!important}
}
@media(max-width:720px){
  .claims{gap:8px 14px} .claim{grid-template-columns:24px 1fr; gap:7px}
  .claim .mark{width:24px;height:24px} .claim .mark svg{width:12px;height:12px}
  .claim p{font-size:.7rem}
  .hero .heropk{height:clamp(140px,22vh,220px)}
}

.closepk{height:clamp(150px,26vh,260px); aspect-ratio:291/720; margin:0 auto 34px;
  background-size:contain; background-position:center bottom; background-color:transparent;
  border-radius:0; filter:drop-shadow(0 22px 40px rgba(0,0,0,.6));
  -webkit-mask-image:radial-gradient(72% 62% at 50% 46%, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%);
  mask-image:radial-gradient(72% 62% at 50% 46%, #000 52%, rgba(0,0,0,.55) 74%, transparent 100%)}

/* ============ v11 — full uncropped pack cut-outs, transparent ============ */
.pk{background-size:contain!important; background-position:center!important;
  background-color:transparent!important; border-radius:0!important}
.hero .heropk,.closepk{-webkit-mask-image:none!important; mask-image:none!important;
  background-size:contain!important; background-position:center bottom!important;
  aspect-ratio:auto!important; width:min(520px,72vw); box-shadow:none!important}
.hero .heropk{height:clamp(190px,34vh,380px); filter:drop-shadow(0 30px 52px rgba(0,0,0,.62))}
.closepk{height:clamp(170px,28vh,300px); filter:drop-shadow(0 26px 44px rgba(0,0,0,.6))}
#buy .t-vis{height:112px}
.tilepk{height:100%!important; width:100%!important; aspect-ratio:auto!important; margin:0!important}
.hwpk{height:100%; width:100%; background-position:center!important;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.55))}
.howworks .hw-img{background:transparent!important; border:0!important; box-shadow:none!important;
  height:clamp(230px,44vh,430px)}
.cartpk{width:52px; height:60px; background-size:contain!important}
/* how it works: atmosphere, not a cropped pack */
.howworks::before{background-image:var(--tx-nightroom)!important; opacity:1!important; filter:none!important}
.howworks[data-tod="am"]::before{background-image:var(--tx-dawnroom)!important; opacity:.95!important; filter:none!important}
.howworks::after{background:linear-gradient(180deg,rgba(4,5,13,.82) 0%,rgba(4,5,13,.52) 38%,rgba(4,5,13,.88) 100%)!important}
.howworks[data-tod="am"]::after{background:linear-gradient(180deg,rgba(8,6,10,.80) 0%,rgba(12,8,8,.46) 38%,rgba(4,5,13,.88) 100%)!important}
/* ---- short-viewport squeeze: keeps How it works and the dose tables to one view
        now that the approved formula carries 13 actives ---- */
@media(min-width:1081px) and (max-height:790px){
  .howworks.fitview{padding-top:clamp(14px,2.6vh,40px)}
  .hw-txt h3{font-size:1.24rem; margin-bottom:6px}
  .hw-when{font-size:.74rem; margin-bottom:8px; padding-bottom:7px}
  .howworks .hl li{padding:2px 0}
  .howworks .hl-n{font-size:.78rem}
  .howworks .hl-v{font-size:.95rem}
  .howworks .hl-w{font-size:.68rem; line-height:1.3; margin-top:0}
  .howworks .hw-img{height:clamp(170px,32vh,320px)}
  #evidence .evtable td{padding:3px 12px; font-size:.72rem}
  #evidence .evtable td:nth-child(3){font-size:.66rem; line-height:1.34}
  #evidence .evtable td:nth-child(2){font-size:.9rem}
  .evfor{font-size:.64rem; line-height:1.2}
  .evcap{padding:5px 14px}
  #evidence .acc summary{padding:3px 34px 3px 0; font-size:.79rem}
  .stackhead{margin-bottom:10px}
  .stackhead h1,.stackhead h2{font-size:1.5rem}
}

/* ---------- article / prose (blog, generic pages) ---------- */
.rte{font-size:1.02rem;line-height:1.72;color:var(--ink)}
.rte > *:first-child{margin-top:0}
.rte h2{font-family:var(--ff-serif);font-size:1.55rem;line-height:1.2;margin:2em 0 .5em}
.rte h3{font-family:var(--ff-serif);font-size:1.2rem;margin:1.6em 0 .4em}
.rte p{margin:0 0 1.1em}
.rte ul,.rte ol{margin:0 0 1.2em;padding-left:1.3em}
.rte li{margin:.35em 0}
.rte a{color:var(--gold-dim);text-underline-offset:2px}
.rte blockquote{margin:1.4em 0;padding:.2em 0 .2em 1.1em;border-left:3px solid var(--gold);color:var(--ink-2);font-style:italic}
.rte table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.92rem}
.rte th,.rte td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.rte th{background:var(--panel);font-weight:600}
.rte figure{margin:1.4em 0}
.rte figcaption{font-size:.82rem;color:var(--ink-3);margin-top:6px}
.rte .keyfacts{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:8px;padding:16px 18px;margin:1.4em 0}
.rte .keyfacts h3{margin-top:0}
.rte .disclaimer{font-size:.84rem;color:var(--ink-3);border-top:1px solid var(--line);margin-top:2em;padding-top:1.1em}
.article-body{max-width:66ch}

/* ================================================================
   LIGHT-PRIMARY RE-SKIN — ALFAA HEPS "Paper"            (v1.2)
   The site was built dark-first; this flips the primary world to
   the HEPS daylight (paper) palette. Kept intentionally dark as the
   HEPS "light/dark sandwich" accents: the 1+1=11 banner, the single
   navy "why ALFAA" card, the footer, and the mobile sticky bar.
   ================================================================ */

/* 1) Base tokens → HEPS Paper */
:root{
  --cream:#FAF7F1; --cream-2:#F2ECE1; --panel:#FBF3E4;
  --navy:#1D2149; --navy-2:#2A2F5C;
  --gold:#C9881F; --gold-lt:#E9B45C; --gold-dim:#9A6A14;
  --ink:#0A0B12; --ink-2:#3E3B33; --ink-3:#7E7A6D;
  --line:#E4DED2; --line-2:#D8D0BE;
}

/* 2) Clean paper ground — drop section textures + film grain */
.bg::before{opacity:0 !important}
body::after{opacity:0 !important}

/* 3) Chapter edges fade to paper, not to black */
.edge-t::after{background:linear-gradient(180deg,rgba(250,247,241,1) 0%,rgba(250,247,241,0) 20%)!important}
.edge-b::after{background:linear-gradient(0deg,rgba(250,247,241,1) 0%,rgba(250,247,241,0) 20%)!important}
.edge-tb::after{background:linear-gradient(180deg,rgba(250,247,241,1) 0%,rgba(250,247,241,0) 16%,rgba(250,247,241,0) 84%,rgba(250,247,241,1) 100%)!important}

/* 4) HERO → photographic "problem" opener: the night image as a
   transparent-ish background under a soft scrim, with light copy.
   This is the one deliberate dark moment; the rest of the site is paper. */
.hero{background:#0A0C18}
.hero::before{opacity:0 !important}
.s0::before{display:none !important}
.hero .s0-field{opacity:1 !important;
  background-image:url(hero-still.jpg) !important;
  background-size:cover !important; background-position:center 38% !important}
/* readability scrim — semi-transparent so the city + room show through */
.hero .s0-field::after{content:"" !important; position:absolute; inset:0;
  background:
    radial-gradient(58% 54% at 44% 46%, rgba(6,7,16,.60) 0%, rgba(6,7,16,.32) 55%, rgba(6,7,16,.10) 100%),
    linear-gradient(180deg, rgba(6,7,16,.52) 0%, rgba(6,7,16,.26) 28%, rgba(6,7,16,.36) 68%, rgba(6,7,16,.80) 100%) !important}
.s0 h1,.s0-sub,.s0-list b{text-shadow:0 1px 18px rgba(4,5,13,.65) !important}
.hero, .hero h1,.hero h2,.hero h3,.hero .s0-sub,.hero p,
.hero .s0-list b,.hero .s0-probs span,.hero .s0-label{color:#F4EFE4 !important}
.hero .s0-probs svg,.hero .s0-list svg{color:var(--gold-lt) !important;stroke:var(--gold-lt) !important}
.hero .btn-ghost{color:#F4EFE4 !important; border-color:rgba(255,255,255,.30)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.08); border-color:var(--gold-lt)}

/* 5) .howworks (the system section) → paper */
.howworks{background:var(--cream) !important; color:var(--ink) !important}
.howworks::before{opacity:0 !important}
.howworks::after{display:none !important}
.howworks h2,.howworks h3{color:var(--ink)}
.howworks .eyebrow{color:var(--gold-dim)}
.howworks .hw-head{border-color:var(--line)}
.howworks .systemtabs{background:#fff; border-color:var(--line)}
.howworks .systemtabs button{color:var(--ink-2)}
.howworks .systemtabs button[aria-selected="true"]{background:var(--navy); color:#fff}
.howworks .hw-when{color:var(--ink-2); border-color:var(--line)}
.howworks .hl li{border-color:var(--line)}
.howworks .hl-n{color:var(--ink)} .howworks .hl-v{color:var(--gold-dim)} .howworks .hl-w{color:var(--ink-3)}
.howworks .hl-tag{color:var(--navy); border-color:var(--line-2)}
.howworks .hw-img{background:#fff; border-color:var(--line); box-shadow:0 20px 44px rgba(10,11,18,.09)}
.howworks .fine{color:var(--ink-3)}
.howworks .sysleft .tod{color:var(--gold-dim)}
.howworks .sysleft .when{border-color:var(--line)}
.howworks .sysleft .when p{color:var(--ink-2)}
.howworks .sysleft .when svg{stroke:var(--gold-dim)}
.howworks .sysd li{border-color:var(--line)}
.howworks .sysd .n{color:var(--ink)} .howworks .sysd .v{color:var(--gold-dim)} .howworks .sysd .w{color:var(--ink-2)}
.compound span{color:var(--ink)} .compound em{color:var(--ink-2)}
/* the AM/PM split keeps its night column dark on purpose */
.dosecol.pm{background:var(--navy)} .dosecol.pm h3{color:#fff}

/* 6) .theme-dark chapters (buy, founder, board, reviews, FAQ, CTA) → paper */
.theme-dark{
  --cream:#FAF7F1; --cream-2:#F2ECE1; --panel:#FBF3E4;
  --ink:#0A0B12; --ink-2:#3E3B33; --ink-3:#7E7A6D;
  --line:#E4DED2; --line-2:#D8D0BE; --line-dark:#E4DED2;
  background:var(--cream) !important; color:var(--ink) !important}
.theme-dark.panel,.theme-dark.cream2{background:var(--cream-2) !important}
.theme-dark h1,.theme-dark h2,.theme-dark h3,.theme-dark h4{color:var(--ink)}
.theme-dark .eyebrow{color:var(--gold-dim)}
.theme-dark .lede,.theme-dark p{color:var(--ink-2)}
.theme-dark .fine,.theme-dark .hl-w{color:var(--ink-3)}
.theme-dark .txtlink{color:var(--gold-dim)}
.theme-dark .tile,.theme-dark .variant,.theme-dark .mode,.theme-dark .qty,.theme-dark .tb,
.theme-dark .evtable,.theme-dark .evcol,.theme-dark .pill,.theme-dark .rv-ctrl select,
.theme-dark .xcard,.theme-dark .rcard,.theme-dark .dosecol.am,.theme-dark .vs,
.theme-dark .field input,.theme-dark .field select,.theme-dark .payopt,.theme-dark .summary{
  background:#fff !important; color:var(--ink) !important; border-color:var(--line) !important}
.theme-dark .trio > div,.theme-dark .bcards > div{background:#fff !important; border-color:var(--line)}
.theme-dark .panel{background:var(--panel) !important}
.theme-dark .rv-track{background:var(--cream-2) !important}
.theme-dark .ph-img{background:var(--cream-2) !important}
.theme-dark .systemtabs{background:#fff !important}
.theme-dark .acc summary{color:var(--ink)}
.theme-dark .acc details{border-color:var(--line)}
.theme-dark .btn-ghost{color:var(--ink); border-color:var(--line-2)}
.theme-dark .btn-ghost:hover{border-color:var(--gold); color:var(--ink)}
.theme-dark .stars svg{fill:var(--gold)}
.theme-dark .rv-empty{background:#fff !important; border-color:var(--line) !important}
.theme-dark .guarantee,.theme-dark .saveflag,.theme-dark .waitnote{
  background:var(--panel) !important; border-color:rgba(201,136,31,.35) !important; color:var(--ink-2) !important}
.theme-dark .t-pop{background:var(--ink-black); border-color:var(--line-2); color:var(--on-dark)}
.theme-dark .t-pop b{color:#fff}
/* selected states: indigo reads correctly on paper again */
.theme-dark .tile[aria-checked="true"],.theme-dark .variant[aria-checked="true"],
.theme-dark .mode[aria-checked="true"],.theme-dark .rcard.feature{
  border-color:var(--navy) !important; background:var(--panel) !important;
  box-shadow:inset 0 0 0 1px var(--navy) !important}
/* accents forced to gold on the dark ground → back to indigo ink */
.theme-dark .t-p,.theme-dark .price,.theme-dark .rcard .p,.theme-dark .rv-score,
.theme-dark .hw-eq,.theme-dark .xcard .x-p,.theme-dark .dosecol h3,.theme-dark .tier,
.theme-dark .evcap-t,.theme-dark .steps .done,.theme-dark .steps .on{color:var(--navy)}
.theme-dark .evtable th{background:var(--navy); color:#fff}
.theme-dark .t-flag,.theme-dark .demo-band,.theme-dark .pill[aria-pressed="true"],
.theme-dark .systemtabs button[aria-selected="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
.theme-dark .claim .mark,.theme-dark .tlc:last-child .dot,
.theme-dark .dots button[aria-current="true"]{background:var(--navy); border-color:var(--navy)}
.theme-dark .claim .mark svg{stroke:#fff; color:#fff}
.theme-dark .addmini{border-color:var(--navy); color:var(--navy)}
.theme-dark .addmini:hover{background:var(--navy); color:#fff}
.theme-dark .ph-tag,.theme-dark .ph-note{color:#7A4207; background:#FBEBD0; border-color:#B8823A}

/* 7) #buy — remove the dark morning-photo overlay + translucent tiles */
#buy::before{opacity:0 !important}
#buy::after{display:none !important}
#buy .tile{background:#fff !important; border-color:var(--line) !important}
#buy .tb{background:#fff !important; border-color:var(--line) !important}
#buy .guarantee{background:var(--panel) !important}
#buy .prodcard{background:#fff !important; border-color:var(--line) !important}

/* 8) Kept-dark accents stay legible (indigo card, banner, footer, sticky) */
.better{background:var(--navy)}
.better h2,.better h3{color:#fff} .better .eyebrow{color:var(--gold-lt)}

/* 9) Header → ink band (near-black, high-contrast top bar over the paper page) */
header{background:rgba(11,12,18,.97)!important; border-bottom:1px solid rgba(255,255,255,.09)!important; -webkit-backdrop-filter:blur(14px)!important; backdrop-filter:blur(14px)!important}
header .logo{color:#F4EFE4!important}
header .nav nav a{color:rgba(244,239,228,.84)!important} header .nav nav a:hover{color:var(--gold-lt)!important}
.acctbtn{color:rgba(244,239,228,.85)!important} .acctbtn:hover{color:var(--gold-lt)!important}
.cartbtn{color:#F4EFE4!important; border-color:rgba(255,255,255,.22)!important}
.cartbtn .cnt{background:var(--gold)!important; color:#14172F!important}
.burger span{background:#F4EFE4!important}
@media(max-width:1180px){ .nav nav{background:#0B0C12!important} .nav nav a{border-color:rgba(255,255,255,.09)!important} }

/* 10) Hero headline over the photo → light */
.hero h1 b,.hero h1 span,.s0 h1 b,.s0 h1 span{color:#fff!important; -webkit-text-fill-color:#fff!important}
.hero .s-badge,.s0 .s-badge{background:rgba(255,255,255,.10)!important; border:1px solid rgba(255,255,255,.30)!important; color:var(--gold-lt)!important; backdrop-filter:blur(4px)}

/* 11) Hard-dark by-ID sections (#expect #protocol #better) → paper.
   Hardened texture/gradient kill: display:none beats the ID / [data-tod]
   texture rules that a plain opacity:0 did not override. */
.bg::before,.howworks::before,.howworks[data-tod]::before,.hero::before,
#expect::before,#protocol::before,#better::before,#stackup::before{display:none!important}
.bg::after,.howworks::after,#expect::after,#protocol::after,#better::after{display:none!important}

#expect,#protocol,#better{background:var(--cream)!important; color:var(--ink)!important}
#expect h2,#protocol h2{color:var(--ink)}
#expect .eyebrow,#protocol .eyebrow{color:var(--gold-dim)}
#expect .lede{color:var(--ink-2)}
#expect .journey h4{color:var(--ink)} #expect .journey p{color:var(--ink-2)}
#expect .jline{background:var(--line-2)}
#expect .jnode{background:#fff; border:1px solid rgba(201,136,31,.4)}
#expect .jstep.last .jnode{background:var(--gold); border-color:var(--gold)}
#expect .jmeter{background:var(--cream-2)}
#expect .jwk{color:var(--gold-dim)} #expect .fine{color:var(--ink-3)}
#protocol .pnum{color:rgba(29,33,73,.26)}
#protocol.js-reveal .pstep.is-in .pnum{color:rgba(201,136,31,.5)}

/* #better card → light paper card (overrides the translucent dark glass card) */
#better .better{background:#fff!important; backdrop-filter:none!important;
  border:1px solid var(--line)!important; box-shadow:0 24px 60px rgba(10,11,18,.08)!important; color:var(--ink)!important}
#better .better h2,#better .better h3{color:var(--ink)!important}
#better .better .eyebrow{color:var(--gold-dim)!important}
#better .bcell{background:var(--cream-2)!important; border-color:var(--line)!important}
#better .bcell h3{color:var(--ink)!important} #better .bcell p{color:var(--ink-2)!important}

/* 12) Final sweep — baked-light text that survived on flipped sections */
#protocol h3,#protocol .pstep h3{color:var(--ink)!important}
#protocol p,#protocol .pstep p{color:var(--ink-2)!important}
.howworks .hw-tod.pm{color:var(--navy)!important}
.howworks .hw-def{color:var(--gold-dim)!important}
#better .bcell .more{color:var(--gold-dim)!important}
#founder .fq,#founder blockquote.fq{color:var(--ink)!important}
#founder span{color:var(--ink)!important}
#founder .fq-name{color:var(--gold-dim)!important}

/* 13) Buy section (#buy) texture/gradient — hardened kill */
#buy::before{display:none!important} #buy::after{display:none!important}

/* 14) Contrast fixes (v1.3.3) — white-on-white cleanup */
/* The 1+1=11 banner is a deliberate dark accent, but its dark ground came from
   a texture layer that no longer renders — leaving light text on cream. Give it
   a solid dark ground so the light copy reads. */
.eqbanner{background:var(--navy)!important}
/* product window is a dark modal: keep its qty control legible on the dark ground */
#pdWin .qty{background:rgba(255,255,255,.08)!important; border-color:rgba(255,255,255,.22)!important}
#pdWin .qty button,#pdWin .qty input{color:#F2EDE3!important; background:transparent!important}
/* gold labels sitting on light grounds → deeper gold for contrast */
#board .dx-d{color:var(--gold-dim)!important}
#cartFoot #ctSave{color:var(--gold-dim)!important}

/* 15) "What makes us better" card icons were white-stroked for the old dark
   card — invisible on the light card. Use the gold accent. */
#better .bcell svg{stroke:var(--gold-dim)!important}



/* ============================================================
   18) Type-size lift on the blocks called out for review
   ============================================================ */

/* 18.1 hero: the sub-line and the four friction statements */
.s0-sub{font-size:clamp(1rem,1.7vh,1.18rem)!important; line-height:1.7!important}
.s0-probs span{font-size:clamp(.88rem,1.5vh,1rem)!important; line-height:1.72!important}
.s0-list b{font-size:clamp(.88rem,1.45vh,.99rem)!important; line-height:1.55!important}
.s0-close{font-size:clamp(1.05rem,1.85vh,1.3rem)!important}

/* 18.2 how it works: the two dosing instructions */
.hw-when{font-size:clamp(1rem,1.25vw,1.14rem)!important; line-height:1.68!important}

/* 18.3 build with prakhar: the credential row, kept to a single line */
.fq-creds li{font-size:clamp(.74rem,1.03vw,.93rem)!important; letter-spacing:.055em;
  padding:12px 13px!important}

/* 18.4 comparison: the seven statements */
.vs td{font-size:clamp(1rem,1.3vw,1.16rem)!important; line-height:1.55!important}
.vs td:first-child{padding-block:clamp(14px,1.9vh,20px)!important}

/* 18.5 choose your stack: card copy + the reassurance row */
.pc-tier{font-size:clamp(.76rem,.92vw,.84rem)!important; letter-spacing:.16em}
.pc-d{font-size:clamp(1rem,1.25vw,1.14rem)!important; line-height:1.66!important}
.pc-cta{font-size:clamp(.94rem,1.1vw,1.04rem)!important}
.reassure span{font-size:clamp(.95rem,1.15vw,1.06rem)!important; line-height:1.6!important}

/* 18.6 "See what's inside" was near-white on a white card — unreadable */
#buy .pc-cta{color:var(--ink)!important; border-bottom-color:var(--gold)}
#buy .pc-cta svg{stroke:var(--gold-dim)!important}


/* ============================================================
   19) Legibility fixes found while enlarging the type
   ============================================================ */

/* 19.1 the product names were #fff on a white card — invisible */
#buy .pc-n{color:var(--ink)!important}
#buy .pc-d{color:var(--ink-2)!important}

/* 19.2 two paper-theme tokens sat just under AA on the paper ground */
:root{ --ink-3:#6B6759; --gold-dim:#8A5D10; }

/* 19.3 gold accents that fell under AA on paper */
#buy .pc-tier{color:var(--gold-dim)!important}
.hw-tod.am{color:var(--gold-dim)!important}
.hw-def{color:var(--gold-dim)!important}



/* ============================================================
   20) Capitalised nav + the hero split across two screens
   ============================================================ */

/* 20.1 nav, login and cart in capitals */
.nav nav a,.acctbtn,.cartbtn{text-transform:uppercase; letter-spacing:.11em}
.nav nav a{font-weight:600}

/* 20.2 the opening statement owns the first screen on its own;
   "ALFAA helps with" now begins the second scroll. */
:root{ --hdr:69px; }
@media(max-width:900px){ :root{ --hdr:61px; } }
.hero{min-height:0!important; justify-content:flex-start!important;
  padding-top:0!important; padding-bottom:clamp(40px,7vh,90px)!important}
.s0-first{min-height:calc(100svh - var(--hdr)); display:flex; flex-direction:column;
  justify-content:center; padding-block:clamp(16px,3vh,40px)}

/* 20.3 with the helps block gone from screen one, the statement can breathe */
.s0 h1{font-size:clamp(1.55rem,3.15vw,3.05rem)!important; line-height:1.24!important;
  letter-spacing:-.016em!important}
.s0-sub{font-size:clamp(1.05rem,1.95vh,1.42rem)!important; line-height:1.72!important;
  margin-top:clamp(20px,3.4vh,40px)!important}
.s0-probs{margin-top:clamp(34px,6vh,74px)!important; padding-top:clamp(34px,6vh,74px)!important}
.s0-probs span{font-size:clamp(.95rem,1.62vh,1.1rem)!important; line-height:1.75!important}
.s0-probs svg{width:clamp(25px,3.2vh,33px)!important; height:clamp(25px,3.2vh,33px)!important}

/* 20.4 the second screen opens with the answer */
.s0-helps{margin-top:0!important; padding-top:clamp(30px,6vh,72px)!important;
  border-top:1px solid rgba(255,255,255,.15)}
.s0-label{font-size:clamp(.74rem,.95vw,.84rem)!important; margin-bottom:clamp(18px,3.2vh,34px)!important}
.s0-list b{font-size:clamp(.95rem,1.55vh,1.08rem)!important}
.s0-list svg{width:22px!important; height:22px!important}
.s0-close{margin-top:clamp(30px,5vh,58px)!important;
  font-size:clamp(1.15rem,2vh,1.45rem)!important}



/* ============================================================
   21) The four frictions type themselves in, one after another
   ============================================================ */
.s0-probs li{transition:opacity .45s ease}
/* only once JS has taken over — without it the list renders plainly */
.s0-probs.is-typing li{opacity:.18}
.s0-probs.is-typing li.typed,
.s0-probs.is-typing li.typing{opacity:1}
.s0-probs.is-typing li svg{opacity:0; transform:translateY(4px);
  transition:opacity .4s ease, transform .4s ease}
.s0-probs.is-typing li.typing svg,
.s0-probs.is-typing li.typed svg{opacity:1; transform:none}
/* the caret sits on the line currently being written */
.s0-probs.is-typing li.typing span::after{content:""; display:inline-block;
  width:1px; height:1.05em; margin-left:2px; vertical-align:-.16em;
  background:var(--gold-lt); animation:s0caret .9s steps(1,end) infinite}
@keyframes s0caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .s0-probs.is-typing li{opacity:1}
  .s0-probs.is-typing li svg{opacity:1; transform:none}
  .s0-probs.is-typing li.typing span::after{display:none}
}



/* ============================================================
   22) "Fix it with ALFAA" — closes the first screen, opens the answer
   ============================================================ */
.s0-fix{display:inline-flex; align-items:center; gap:11px;
  margin:clamp(26px,4.4vh,54px) auto 0;
  font:600 clamp(.74rem,1.15vh,.84rem)/1 var(--ff-sans); letter-spacing:.19em;
  text-transform:uppercase; color:#0A0C18; text-decoration:none;
  background:var(--gold-lt); border:1px solid var(--gold-lt); border-radius:100px;
  padding:clamp(14px,2vh,18px) clamp(24px,3vw,34px);
  box-shadow:0 14px 34px rgba(0,0,0,.34);
  transition:background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease}
.s0-fix:hover,.s0-fix:focus-visible{background:#F3C879; border-color:#F3C879;
  transform:translateY(-2px); box-shadow:0 18px 42px rgba(0,0,0,.42)}
.s0-fix:focus-visible{outline:2px solid #fff; outline-offset:3px}
.s0-fix svg{width:15px; height:15px; stroke:#0A0C18; fill:none}
@media(prefers-reduced-motion:no-preference){
  .s0-fix svg{animation:s0fixnudge 2.4s ease-in-out infinite}
  @keyframes s0fixnudge{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
  /* it arrives once the four statements have finished writing */
  .s0-probs.is-typing ~ .s0-fix{opacity:0; transform:translateY(8px);
    transition:opacity .5s ease, transform .5s ease}
  .s0-probs.is-typing.all-typed ~ .s0-fix{opacity:1; transform:none}
}



/* ============================================================
   23) THE FIX — one view: outcomes, the AM/PM routine and the
       compounding equation composed as a single page, not blocks.
       The equation sits physically between the two sachets,
       because that is what it describes.
   ============================================================ */
.fixview{position:relative; background:var(--cream); color:var(--ink);
  min-height:calc(100svh - var(--hdr));
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(22px,3.4vh,52px); overflow:hidden}
.anchor-alias{position:absolute; top:0; left:0; width:1px; height:1px}
.fv{display:flex; flex-direction:column; gap:clamp(16px,2.6vh,34px); width:100%}

/* --- the statement --- */
.fv-top{text-align:center}
.fv-def{margin:0 auto; max-width:56ch; color:var(--gold-dim); font-weight:500;
  font-size:clamp(.82rem,1.3vh,.98rem); line-height:1.55; letter-spacing:.01em}
.fv-top h2{margin:clamp(6px,1vh,12px) 0 0; letter-spacing:-.02em; line-height:1.12;
  font-size:clamp(1.5rem,3.3vh,2.7rem)}

/* --- the stage: AM · equation · PM --- */
.fv-stage{display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,.92fr) minmax(0,1fr);
  gap:clamp(14px,2.4vw,44px)}
.fv-side{display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0}
.fv-pk{display:block; width:100%; height:clamp(112px,21vh,236px);
  background-size:contain; background-position:center; background-repeat:no-repeat}
.fv-tod{display:block; margin-top:clamp(8px,1.3vh,16px);
  font-family:var(--ff-serif); font-size:clamp(1.1rem,2.1vh,1.7rem); line-height:1;
  letter-spacing:.06em; color:var(--gold-dim)}
.fv-side.pm .fv-tod{color:var(--navy)}
.fv-side h3{margin:clamp(6px,1vh,11px) 0 0; line-height:1.24; letter-spacing:-.012em;
  font-size:clamp(1rem,1.85vh,1.42rem)}
.fv-side p{margin:clamp(5px,.9vh,10px) auto 0; max-width:30ch; color:var(--ink-2);
  font-size:clamp(.82rem,1.3vh,.99rem); line-height:1.6}

/* the pivot — hairlines instead of a box */
.fv-core{position:relative; text-align:center; padding-inline:clamp(12px,2vw,30px)}
.fv-core::before,.fv-core::after{content:""; position:absolute; top:6%; bottom:6%; width:1px;
  background:linear-gradient(180deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent)}
.fv-core::before{left:0} .fv-core::after{right:0}
.fv-eq{display:flex; align-items:baseline; justify-content:center; gap:.16em;
  font-family:var(--ff-serif); line-height:.92; color:var(--navy);
  font-size:clamp(1.9rem,4.6vh,3.6rem)}
.fv-eq i{font-style:normal}
.fv-eq b{font-weight:400; color:var(--ink-3); font-size:.74em}
.fv-eq em{font-style:normal; color:var(--gold); font-size:1.42em; letter-spacing:-.02em;
  text-shadow:0 0 26px rgba(201,136,31,.28)}
.fv-call{margin:clamp(8px,1.5vh,18px) 0 0; font-family:var(--ff-serif); line-height:1.25;
  letter-spacing:-.014em; font-size:clamp(.98rem,2vh,1.5rem)}
.fv-call s{color:var(--ink-3); text-decoration-thickness:1.5px}
.fv-call strong{font-weight:400}
.fv-sub{margin:clamp(6px,1.1vh,12px) auto 0; max-width:34ch; color:var(--ink-2);
  font-size:clamp(.78rem,1.22vh,.94rem); line-height:1.6}
.fv-tag{display:inline-block; margin-top:clamp(8px,1.4vh,16px);
  padding:7px 14px; border-radius:100px;
  border:1px solid rgba(201,136,31,.42); background:rgba(201,136,31,.09);
  font:600 clamp(.58rem,.95vh,.67rem)/1 var(--ff-sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-dim)}

/* --- the outcomes, as a ruled line rather than four cards --- */
.fv-out{list-style:none; margin:0; padding:clamp(13px,2.2vh,26px) 0 0;
  border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.fv-out li{position:relative; text-align:center; padding:0 clamp(8px,1.4vw,22px);
  font-size:clamp(.84rem,1.38vh,1.04rem); line-height:1.4; color:var(--ink);
  letter-spacing:-.004em}
.fv-out li + li::before{content:""; position:absolute; left:0; top:.1em; bottom:.1em;
  width:1px; background:var(--line-2)}
.fv-out li::after{content:""; display:block; width:16px; height:1px; margin:9px auto 0;
  background:var(--gold); opacity:.72}

/* --- the promise --- */
.fv-close{margin:0; text-align:center; font-family:var(--ff-serif); font-style:italic;
  font-size:clamp(1rem,1.95vh,1.45rem); line-height:1.35; letter-spacing:-.006em; color:var(--ink)}

/* --- narrow: the stage folds, the view is allowed to breathe --- */
@media(max-width:900px){
  .fixview{min-height:0; padding-block:clamp(44px,7vh,80px)}
  .fv-stage{grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 18px}
  .fv-core{grid-column:1 / -1; order:3; padding:clamp(18px,3vh,26px) 0 0;
    border-top:1px solid var(--line)}
  .fv-core::before,.fv-core::after{display:none}
  .fv-pk{height:clamp(130px,20vh,180px)}
}
@media(max-width:620px){
  .fv-stage{grid-template-columns:1fr}
  .fv-out{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:16px}
  .fv-out li:nth-child(3)::before{display:none}
}


/* 23.1 the sticky header must not sit over the top of the view we jump to */
html{scroll-behavior:smooth}
#fix,#reviews,#faq,#buy,#founder,#better,#stackup{scroll-margin-top:var(--hdr)}
@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* 23.2 give the packs a little more presence now the view is settled */
.fv-pk{height:clamp(120px,24vh,268px)}


/* 23.3 the signature "11" sat at 2.7:1 on paper — a shade deeper clears AA */
.fv-eq em{color:#BC7C15}


/* 24.1 the opening statement, a shade smaller */
.s0 h1{font-size:clamp(1.42rem,2.78vw,2.7rem)!important; line-height:1.26!important}

/* 24.2 the CTA sits lower, closer to the foot of the first screen */
.s0-fix{margin-top:clamp(40px,7.4vh,98px)!important}

/* 24.3 while it is still fading in it must not be a hidden click target */
@media(prefers-reduced-motion:no-preference){
  .s0-probs.is-typing ~ .s0-fix{pointer-events:none}
  .s0-probs.is-typing.all-typed ~ .s0-fix{pointer-events:auto}
}


/* 24.4 when the viewer skips, the button snaps in rather than fading */
.s0-probs.skipped ~ .s0-fix{transition:none!important}



/* ============================================================
   25) THE FIX — a two-beat reveal.
       Beat 1: the statement and the two sachets, on their own.
       Beat 2 (after 5s): focus pulls off the sachets and the
       compounding result comes forward with the outcomes.
       Everything is visible by default; only .seq (added by JS)
       stages it, so no-JS and reduced-motion show the full view.
   ============================================================ */
.fixview.seq .fv-core,
.fixview.seq .fv-out,
.fixview.seq .fv-close{
  opacity:0; transform:translateY(16px);
  transition:opacity .72s ease, transform .72s cubic-bezier(.22,.7,.3,1)}
.fixview.seq.reveal .fv-core,
.fixview.seq.reveal .fv-out,
.fixview.seq.reveal .fv-close{opacity:1; transform:none}
.fixview.seq.reveal .fv-out{transition-delay:.14s}
.fixview.seq.reveal .fv-close{transition-delay:.28s}

/* the focus pull: the two parts go soft as the sum arrives, then resolve */
.fixview.seq .fv-side{transition:filter .8s ease, opacity .8s ease}
.fixview.seq.pull .fv-side{filter:blur(7px); opacity:.42}

/* nothing animates for a viewer who has asked for stillness */
@media(prefers-reduced-motion:reduce){
  .fixview.seq .fv-core,.fixview.seq .fv-out,.fixview.seq .fv-close{opacity:1; transform:none}
  .fixview.seq.pull .fv-side{filter:none; opacity:1}
}



/* ============================================================
   26) THE FIX — beat two arrives as a translucent blue panel
       over the whole view, carrying the compounding result.
   ============================================================ */
.fixview{position:relative}
.fv-stage{grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(20px,6vw,110px)}

/* the panel */
.fv-veil{position:absolute; inset:0; z-index:4; display:flex; align-items:center;
  justify-content:center; text-align:center;
  background:linear-gradient(180deg, rgba(29,33,73,.90) 0%, rgba(22,26,60,.94) 100%);
  -webkit-backdrop-filter:blur(7px) saturate(1.05); backdrop-filter:blur(7px) saturate(1.05);
  padding-block:clamp(20px,3vh,44px)}
.fvv{display:flex; flex-direction:column; align-items:center;
  gap:clamp(10px,1.8vh,20px); width:100%}

/* the equation */
.fv-veil .fv-eq{display:flex; align-items:baseline; justify-content:center; gap:.16em;
  font-family:var(--ff-serif); line-height:.92; color:#F3EEE2;
  font-size:clamp(2.2rem,5.6vh,4.6rem)}
.fv-veil .fv-eq i{font-style:normal}
.fv-veil .fv-eq b{font-weight:400; color:rgba(243,238,226,.5); font-size:.72em}
.fv-veil .fv-eq em{font-style:normal; color:var(--gold-lt); font-size:1.4em; letter-spacing:-.02em;
  text-shadow:0 0 34px rgba(233,180,92,.45)}

.fv-veil .fv-call{margin:0; font-family:var(--ff-serif); line-height:1.22; color:#F6F2E8;
  letter-spacing:-.016em; font-size:clamp(1.1rem,2.6vh,2rem); max-width:22ch}
.fv-veil .fv-call s{color:rgba(246,242,232,.45); text-decoration-thickness:1.6px}
.fv-veil .fv-call strong{font-weight:400}
.fv-veil .fv-call em{font-style:normal; color:var(--gold-lt)}
.fv-veil .fv-sub{margin:0; max-width:46ch; color:#C8C3B6;
  font-size:clamp(.84rem,1.4vh,1.02rem); line-height:1.65}
.fv-veil .fv-tag{display:inline-block; padding:8px 15px; border-radius:100px;
  border:1px solid rgba(233,180,92,.45); background:rgba(233,180,92,.12);
  font:600 clamp(.6rem,1vh,.7rem)/1 var(--ff-sans); letter-spacing:.17em;
  text-transform:uppercase; color:var(--gold-lt)}

/* the four outcomes, ruled across the panel */
.fv-veil .fv-out{list-style:none; margin:clamp(6px,1.4vh,16px) 0 0; padding:clamp(14px,2.4vh,26px) 0 0;
  border-top:1px solid rgba(255,255,255,.16); width:100%;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.fv-veil .fv-out li{position:relative; text-align:center; padding:0 clamp(8px,1.4vw,22px);
  font-size:clamp(.86rem,1.45vh,1.06rem); line-height:1.4; color:#F2EDE3; letter-spacing:-.004em}
.fv-veil .fv-out li + li::before{content:""; position:absolute; left:0; top:.1em; bottom:.1em;
  width:1px; background:rgba(255,255,255,.2)}
.fv-veil .fv-out li::after{content:""; display:block; width:18px; height:1px; margin:10px auto 0;
  background:var(--gold-lt); opacity:.85}

.fv-veil .fv-close{margin:clamp(6px,1.2vh,14px) 0 0; font-family:var(--ff-serif); font-style:italic;
  color:#F6F2E8; font-size:clamp(1.02rem,2.1vh,1.55rem); line-height:1.35; letter-spacing:-.006em}

/* --- the sequence: the panel is the second beat --- */
.fixview.seq .fv-veil{opacity:0; visibility:hidden;
  transition:opacity .75s ease, visibility .75s}
.fixview.seq.reveal .fv-veil{opacity:1; visibility:visible}
.fixview.seq .fvv > *{opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.7,.3,1)}
.fixview.seq.reveal .fvv > *{opacity:1; transform:none}
.fixview.seq.reveal .fvv > *:nth-child(1){transition-delay:.18s}
.fixview.seq.reveal .fvv > *:nth-child(2){transition-delay:.26s}
.fixview.seq.reveal .fvv > *:nth-child(3){transition-delay:.34s}
.fixview.seq.reveal .fvv > *:nth-child(4){transition-delay:.42s}
.fixview.seq.reveal .fvv > *:nth-child(5){transition-delay:.50s}
.fixview.seq.reveal .fvv > *:nth-child(6){transition-delay:.58s}
@media(prefers-reduced-motion:reduce){
  .fixview.seq .fv-veil,.fixview.seq .fvv > *{opacity:1; visibility:visible; transform:none}
}

@media(max-width:900px){
  .fv-veil{position:static; padding-block:clamp(30px,5vh,52px); margin-top:clamp(26px,4vh,40px)}
  .fv-veil .fv-out{grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:16px}
  .fv-veil .fv-out li:nth-child(3)::before{display:none}
}
@media(max-width:620px){
  .fv-stage{grid-template-columns:1fr; gap:30px}
}


/* 26.1 let the two sachets read through the panel, as drawn */
.fv-veil{background:linear-gradient(180deg, rgba(29,33,73,.82) 0%, rgba(24,28,64,.88) 100%)}
.fv-veil .fv-call{max-width:40ch; text-wrap:balance}


/* 26.2 the compounding tag sat at 4.3:1 on the panel — lift it clear */
.fv-veil .fv-tag{color:#F0CE8E; border-color:rgba(240,206,142,.5); background:rgba(233,180,92,.16)}



/* ============================================================
   27) THE FIX v2 — the statement carries across both beats,
       the panel reads larger, and the whole thing is set with
       more serif, more air and finer rules.
   ============================================================ */

/* 27.1 the statement sits above the panel and inverts when it arrives */
.fv{position:relative}   /* no z-index: only the statement rises above the panel */
.fv-stage{position:relative; z-index:1}
#fvTop{position:relative; z-index:7; transition:color .6s ease}
.fv-def{font-family:var(--ff-sans); font-weight:600;
  font-size:clamp(.64rem,1.08vh,.78rem); letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-dim); max-width:none; line-height:1.7;
  transition:color .6s ease}
.fv-top h2{font-family:var(--ff-serif); font-weight:400;
  font-size:clamp(1.62rem,3.7vh,3rem); letter-spacing:-.022em; line-height:1.1;
  margin-top:clamp(9px,1.5vh,16px); transition:color .6s ease}
.fixview.reveal #fvTop .fv-def{color:var(--gold-lt)}
.fixview.reveal #fvTop h2{color:#F6F2E8}
/* the panel starts under the statement so the two never collide */
.fv-veil{padding-top:clamp(96px,17vh,190px)}

/* 27.2 the two sachets, larger and set more richly */
.fv-pk{height:clamp(150px,29vh,330px)}
.fv-tod{font-family:var(--ff-serif); letter-spacing:.2em;
  font-size:clamp(1.24rem,2.5vh,2rem); margin-top:clamp(12px,1.9vh,22px)}
.fv-side h3{font-family:var(--ff-serif); font-weight:400;
  font-size:clamp(1.1rem,2.15vh,1.66rem); letter-spacing:-.014em; line-height:1.22;
  margin-top:clamp(8px,1.3vh,14px)}
.fv-side p{font-size:clamp(.88rem,1.42vh,1.08rem); line-height:1.7; max-width:32ch;
  margin-top:clamp(7px,1.15vh,13px); color:var(--ink-2)}
.fixview.reveal .fv-side{transition:opacity .6s ease}

/* 27.3 the panel, larger and quieter */
.fv-veil .fv-eq{font-size:clamp(2.6rem,6.6vh,5.4rem); letter-spacing:.01em}
.fv-veil .fv-eq b{font-size:.66em; color:rgba(243,238,226,.42)}
.fv-veil .fv-eq em{font-size:1.36em}
.fv-veil .fv-call{font-size:clamp(1.28rem,3vh,2.35rem); max-width:34ch; letter-spacing:-.018em}
.fv-veil .fv-sub{font-size:clamp(.95rem,1.6vh,1.18rem); max-width:52ch; line-height:1.7;
  color:#D2CCBE}
.fv-veil .fv-tag{font-size:clamp(.64rem,1.1vh,.76rem); letter-spacing:.2em; padding:10px 19px}

/* 27.4 the four outcomes: marks instead of rules */
.fv-veil .fv-out{border-top:1px solid rgba(255,255,255,.14);
  margin-top:clamp(10px,2vh,22px); padding-top:clamp(18px,3vh,32px)}
.fv-veil .fv-out li{display:flex; flex-direction:column; align-items:center;
  gap:clamp(7px,1.2vh,12px);
  font-family:var(--ff-serif); font-weight:400;
  font-size:clamp(.95rem,1.68vh,1.24rem); line-height:1.35; letter-spacing:-.006em}
.fv-veil .fv-out li::after{display:none}            /* the rule under each benefit goes */
.fv-veil .fv-out li svg{width:clamp(20px,2.7vh,26px); height:clamp(20px,2.7vh,26px);
  stroke:var(--gold-lt); fill:none; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto}
.fv-veil .fv-out li span{display:block}
.fv-veil .fv-close{font-size:clamp(1.1rem,2.3vh,1.72rem); margin-top:clamp(10px,1.8vh,20px)}

/* 27.5 a quiet hint that the view can be moved between */
.fixview{cursor:pointer}
.fixview a,.fixview button{cursor:auto}

@media(max-width:900px){
  .fv-veil{padding-top:clamp(30px,5vh,52px)}
  #fvTop{z-index:1}
  .fixview.reveal #fvTop .fv-def{color:var(--gold-dim)}
  .fixview.reveal #fvTop h2{color:var(--ink)}
  .fv-veil .fv-out li{gap:8px}
}


/* 27.6 behind the panel, keep the packs but quiet their labels right down,
   so nothing reads as two layers of type fighting each other */
.fixview .fv-side .fv-pk,
.fixview .fv-side .fv-tod,
.fixview .fv-side h3,
.fixview .fv-side p{transition:opacity .6s ease}
.fixview.reveal .fv-side .fv-pk{opacity:.55}
.fixview.reveal .fv-side .fv-tod,
.fixview.reveal .fv-side h3,
.fixview.reveal .fv-side p{opacity:.10}
@media(max-width:900px){
  .fixview.reveal .fv-side .fv-pk,
  .fixview.reveal .fv-side .fv-tod,
  .fixview.reveal .fv-side h3,
  .fixview.reveal .fv-side p{opacity:1}
}


/* ============================================================
   29) BUILT WITH PRAKHAR — the two figures count themselves in.
       The finished numbers sit in the markup, so with no JS or
       reduced motion they are simply there.
   ============================================================ */
.fq-creds .roll{display:inline-block; text-align:left;
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}

/* ============================================================
   30) BUILT WITH PRAKHAR — the credentials sit on one line, and
       the two figures roll up like an odometer: every digit
       spins, the left column settling first. The finished
       numbers are in the markup, so with no JS or reduced
       motion they simply read.
   ============================================================ */
.fq-creds{flex-wrap:nowrap!important; gap:clamp(6px,.72vw,11px)!important}
.fq-creds li{white-space:nowrap}
@media(max-width:700px){
  .fq-creds{flex-wrap:wrap!important}
  .fq-creds li{font-size:clamp(.66rem,2.9vw,.8rem)!important; padding:10px 11px!important}
}

/* each digit is a window one line tall; a hidden copy of the settled
   digit holds the width and the baseline, the strip slides behind it */
.fq-creds .roll .rsr{position:absolute; left:-9999px; top:auto}
.fq-creds .roll{position:relative; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.fq-creds .roll .rd{position:relative; display:inline-block;
  vertical-align:baseline; line-height:1}
.fq-creds .roll .rd > i{display:block; font-style:normal; line-height:1; visibility:hidden}
.fq-creds .roll .rw{position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden}
.fq-creds .roll .rs{position:absolute; left:0; top:0; width:100%; transform:translateY(0)}
.fq-creds .roll .rs > b{display:block; height:1em; line-height:1; font-weight:inherit}

/* ============================================================
   31) WHAT MAKES US BETTER — each cell is a single line now, so
       the type carries more of the block.
   ============================================================ */
#better .bcell h3{font-size:clamp(1.24rem,2.1vw,1.68rem)!important; margin-bottom:9px!important}
#better .bcell p{font-size:clamp(.98rem,1.62vh,1.18rem)!important; line-height:1.55!important}
#better .bcell{padding:clamp(22px,3vh,34px) clamp(20px,2.2vw,32px)!important}
#better .bgrid{gap:clamp(14px,2vh,22px)!important}

/* ============================================================
   32) CHANGES IN THE ORDER THEY ARRIVE — the journey walk.
       Everything is scoped to #journey so the page's own tokens
       and .btn / .card / .lede rules are left alone. Without JS
       every stage is simply listed instead.
   ============================================================ */
#journey{
  --jx-panel:#fff; --jx-ink:var(--ink); --jx-body:var(--ink-2); --jx-muted:#6B6759;
  --jx-amber:var(--gold); --jx-amber-lt:var(--gold-lt); --jx-indigo:var(--navy);
  --jx-line:var(--line); --jx-tint:var(--panel); --jx-moon:#B7BEEE;
  --c-feel:#9A6A14; --c-wear:#3A4695; --c-blood:#8E3E21;
  margin-top:clamp(22px,3.4vh,38px); color:var(--jx-body);
  font-size:15px; line-height:1.55}
#journey .jx-lede{margin:0 auto; max-width:64ch; text-align:center;
  font-size:clamp(.92rem,1.1vw,1.02rem); color:var(--jx-body)}
#journey .jx-lede b{font-weight:600; color:var(--jx-ink)}

/* the scene */
#journey .jx-scene{position:relative; overflow:hidden; margin-top:22px;
  border:1px solid var(--jx-line); border-radius:8px;
  background:linear-gradient(180deg,#fffdf8,#f6efe2); height:clamp(230px,30vh,280px)}
#journey #jxBg{position:absolute; inset:0; width:100%; height:100%; z-index:0}
#journey .jx-road{position:absolute; left:3%; right:3%; bottom:52px; height:3px;
  border-radius:3px; z-index:1;
  background:linear-gradient(90deg,var(--jx-amber) 0%,var(--jx-amber-lt) 22%,#8f79a0 55%,var(--jx-indigo) 100%)}
#journey .jx-wp{position:absolute; bottom:36px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:0;
  background:none; border:none; cursor:pointer; font:inherit; padding:0}
#journey .jx-wp .d{width:13px; height:13px; border-radius:999px; background:var(--jx-panel);
  border:2px solid var(--jx-muted); transition:.2s}
#journey .jx-wp .lb{margin-top:26px; font-size:10px; font-weight:600; letter-spacing:.02em;
  color:var(--jx-muted); white-space:nowrap; transition:.2s}
#journey .jx-wp[aria-pressed="true"] .d{background:var(--jx-amber); border-color:var(--jx-amber);
  transform:scale(1.25); box-shadow:0 0 0 5px rgba(201,136,31,.18)}
#journey .jx-wp[aria-pressed="true"] .lb{color:var(--jx-ink); font-weight:700}
#journey .jx-wp:hover .d{border-color:var(--jx-amber)}
#journey .jx-wp:focus-visible{outline:2px solid var(--jx-amber); outline-offset:3px; border-radius:4px}

#journey .jx-man{position:absolute; bottom:52px; left:7%; transform:translateX(-50%); z-index:3;
  width:52px; height:86px; color:var(--jx-ink); transition:left 1.3s cubic-bezier(.4,0,.3,1)}
#journey .jx-man.flip .jx-fig{transform:scaleX(-1)}
#journey .jx-fig{width:100%; height:100%; display:block; overflow:visible}
#journey .jx-fig .jx-seg{transform-box:fill-box; transform-origin:top center}
#journey .jx-man.walking .jx-fig{animation:jxbob .5s linear infinite}
#journey .jx-man.walking .legA,#journey .jx-man.walking .armB{animation:jxswingA .5s linear infinite}
#journey .jx-man.walking .legB,#journey .jx-man.walking .armA{animation:jxswingB .5s linear infinite}
@keyframes jxbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes jxswingA{0%,100%{transform:rotate(20deg)}50%{transform:rotate(-20deg)}}
@keyframes jxswingB{0%,100%{transform:rotate(-20deg)}50%{transform:rotate(20deg)}}
#journey .jx-sun{position:absolute; top:22px; left:8%; width:34px; height:34px; border-radius:999px;
  background:radial-gradient(circle,#F2C879,#E9B45C); z-index:1; opacity:.85; transition:.6s}
#journey .jx-moon{position:absolute; top:22px; right:8%; width:26px; height:26px; border-radius:999px;
  box-shadow:inset -7px 3px 0 0 var(--jx-moon); z-index:1; opacity:.5; transition:.6s}

/* controls */
#journey .jx-controls{display:flex; gap:9px; align-items:center; margin-top:14px; flex-wrap:wrap}
#journey .jx-btn{font:inherit; font-size:13px; font-weight:600; color:#F2ECE1; background:var(--ink-black,#0A0C18);
  border:none; border-radius:3px; padding:10px 17px; cursor:pointer; transition:.15s}
#journey .jx-btn:hover{background:var(--jx-indigo)}
#journey .jx-btn.amber{background:var(--jx-amber); color:#17140C}
#journey .jx-btn.amber:hover{background:var(--jx-amber-lt)}
#journey .jx-btn.ghost{background:transparent; color:var(--jx-muted); border:1px solid var(--jx-line); font-weight:500}
#journey .jx-btn.ghost:hover{color:var(--jx-ink); border-color:var(--jx-muted)}
#journey .jx-btn:disabled{opacity:.4; cursor:not-allowed}
#journey .jx-legend{display:flex; gap:15px; flex-wrap:wrap; font-size:11.5px;
  color:var(--jx-muted); margin-left:auto; align-items:center}
#journey .jx-legend span{display:inline-flex; align-items:center; gap:6px}
#journey .jx-lg{width:18px; height:18px; border-radius:999px; display:grid; place-items:center; color:#FBF8F2}
#journey .jx-lg svg{width:11px; height:11px}
#journey .jx-lg.feel{background:var(--c-feel)}
#journey .jx-lg.wear{background:var(--c-wear)}
#journey .jx-lg.blood{background:var(--c-blood)}

/* stage */
#journey .jx-stagehead{margin-top:22px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
#journey .jx-wkn{font-family:var(--ff-serif); font-weight:400; font-size:clamp(22px,2.4vw,30px);
  color:var(--jx-ink); line-height:1}
#journey .jx-phn{font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:#7A5310; font-weight:600}
#journey .jx-cnt{margin-left:auto; font-size:11px; color:var(--jx-muted)}

#journey .jx-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:13px; margin-top:14px}
#journey .jx-card{background:var(--jx-panel); border:1px solid var(--jx-line);
  border-left:3px solid var(--cc); border-radius:4px; padding:14px 15px; animation:jxrise .35s ease both}
#journey .jx-card.feel{--cc:var(--c-feel)}
#journey .jx-card.wear{--cc:var(--c-wear)}
#journey .jx-card.blood{--cc:var(--c-blood)}
@keyframes jxrise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
#journey .jx-top{display:flex; align-items:center; gap:8px; margin-bottom:8px}
#journey .jx-ci{flex:none; width:22px; height:22px; border-radius:999px; display:grid;
  place-items:center; background:var(--cc); color:#FBF8F2}
#journey .jx-ci svg{width:13px; height:13px}
#journey .jx-nm{font-size:12.5px; font-weight:600; color:var(--jx-ink); line-height:1.25}
#journey .jx-mag{font-family:var(--ff-serif); font-weight:400; font-size:30px;
  color:var(--jx-ink); line-height:1.05}
#journey .jx-mag.q{font-size:22px}
#journey .jx-mag small{font-family:var(--ff-sans); font-size:11px; font-weight:500; color:var(--jx-muted)}
#journey .jx-sub{font-size:11px; color:var(--jx-muted); margin-top:5px; line-height:1.45}

#journey .jx-note{background:var(--jx-tint); border:1px solid var(--jx-amber); border-radius:4px;
  padding:14px 16px; margin-top:20px; font-size:12.5px; color:var(--jx-body)}
#journey .jx-note b{color:var(--jx-ink)}
#journey .jx-foot{margin-top:18px; border-top:1px solid var(--jx-line); padding-top:14px;
  font-size:11px; color:var(--jx-muted)}

/* with no JS the whole journey is simply listed */
#journey .jx-live{display:none}
#journey.jx-on .jx-live{display:block}
#journey.jx-on .jx-fallback{display:none}
#journey .jx-fbstage + .jx-fbstage{margin-top:26px}
#journey .jx-fallback .jx-card{animation:none}

@media(max-width:560px){
  #journey .jx-man{width:42px; height:70px}
  #journey .jx-wp .lb{font-size:9px}
  #journey .jx-legend{width:100%; margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  #journey .jx-man{transition:none}
  #journey .jx-fig,#journey .jx-seg{animation:none!important}
  #journey .jx-card{animation:none}
}

/* ============================================================
   33) CHANGES IN THE ORDER THEY ARRIVE — the whole walk in one
       view. Every measure that decides the height is tied to vh,
       including the scene's own furniture, so the figure, the sun
       and the waypoints keep their spacing as the scene shrinks.
   ============================================================ */
/* the view is the whole screen, with the content centred below the
   sticky header rather than under it */
#expect{min-height:100svh!important; padding-top:var(--hdr,69px)!important;
  padding-bottom:clamp(10px,1.8vh,28px)!important; scroll-margin-top:0}
#expect > .wrap{padding-block:clamp(6px,1.2vh,20px)}
#expect .center{margin-bottom:0}
a.cartbtn{text-decoration:none}
#expect h2{margin-bottom:clamp(6px,1vh,14px)}

#journey{margin-top:clamp(10px,1.8vh,26px); font-size:clamp(13px,1.6vh,15px)}
#journey .jx-lede{max-width:80ch; font-size:clamp(.82rem,1.5vh,.97rem); line-height:1.5}

#journey .jx-scene{margin-top:clamp(10px,1.7vh,22px); height:clamp(176px,23vh,254px)}
#journey .jx-road{bottom:clamp(36px,5.2vh,52px)}
#journey .jx-wp{bottom:clamp(24px,3.7vh,36px)}
#journey .jx-wp .lb{margin-top:clamp(16px,2.5vh,26px); font-size:clamp(9px,1.15vh,10px)}
#journey .jx-wp .d{width:clamp(10px,1.35vh,13px); height:clamp(10px,1.35vh,13px)}
#journey .jx-man{bottom:clamp(36px,5.2vh,52px);
  width:clamp(36px,4.7vh,52px); height:clamp(60px,7.8vh,86px)}
#journey .jx-sun{top:clamp(12px,1.9vh,22px);
  width:clamp(24px,3.5vh,34px); height:clamp(24px,3.5vh,34px)}
#journey .jx-moon{top:clamp(12px,1.9vh,22px);
  width:clamp(18px,2.7vh,26px); height:clamp(18px,2.7vh,26px)}

#journey .jx-controls{margin-top:clamp(8px,1.3vh,14px); gap:clamp(6px,.9vh,9px)}
#journey .jx-btn{font-size:clamp(11.5px,1.4vh,13px); padding:clamp(7px,1.1vh,10px) clamp(12px,1.6vh,17px)}
#journey .jx-legend{font-size:clamp(10px,1.25vh,11.5px); gap:clamp(9px,1.5vh,15px)}
#journey .jx-lg{width:clamp(15px,1.95vh,18px); height:clamp(15px,1.95vh,18px)}

#journey .jx-stagehead{margin-top:clamp(10px,1.7vh,22px)}
#journey .jx-wkn{font-size:clamp(19px,3vh,30px)}
#journey .jx-phn{font-size:clamp(9.5px,1.2vh,11px)}
#journey .jx-cards{margin-top:clamp(8px,1.3vh,14px); gap:clamp(9px,1.4vh,13px)}
#journey .jx-card{padding:clamp(9px,1.4vh,15px) clamp(10px,1.5vh,15px)}
#journey .jx-top{margin-bottom:clamp(5px,.85vh,8px)}
#journey .jx-ci{width:clamp(18px,2.4vh,22px); height:clamp(18px,2.4vh,22px)}
#journey .jx-nm{font-size:clamp(11px,1.35vh,12.5px)}
#journey .jx-mag{font-size:clamp(20px,3.1vh,30px)}
#journey .jx-mag.q{font-size:clamp(16px,2.35vh,22px)}
#journey .jx-sub{font-size:clamp(9.5px,1.2vh,11px); margin-top:clamp(3px,.55vh,5px)}

#journey .jx-note{margin-top:clamp(9px,1.5vh,20px); padding:clamp(9px,1.35vh,14px) clamp(11px,1.6vh,16px);
  font-size:clamp(10.5px,1.32vh,12.5px)}
#journey .jx-foot{margin-top:clamp(8px,1.3vh,18px); padding-top:clamp(7px,1.2vh,14px);
  font-size:clamp(9.5px,1.15vh,11px)}

/* below the fitview breakpoint the section flows again */
@media(max-width:1080px){
  #journey .jx-scene{height:clamp(200px,30vh,270px)}
}

/* ============================================================
   35) HEADER at the narrowest phones — the logo, LOGIN, CART and
       the burger together ran 6px past the viewport, so the
       utilities tighten up rather than pushing the page sideways.
   ============================================================ */
@media(max-width:400px){
  .wrap.nav{padding-inline:16px!important}
  .navutil{gap:9px!important}
  .cartbtn{padding:9px 11px!important; gap:6px!important}
  .acctbtn{padding:9px 2px!important}
}

/* ============================================================
   34a) BUY PAGE — Choose your stack leads the page here rather
       than following another section, so it needs its own room
       under the header and no seam above it.
   ============================================================ */
#buy{padding-top:clamp(28px,5vh,72px)}
#buy .stackhead{margin-bottom:clamp(18px,3vh,34px)}

/* ============================================================
   36) THE SACHET PICKER — the dose card used to sit over the
       button, so taking a sachet back out meant guessing where
       to click. The button now rides above the dose card on its
       own solid ground, and a selected one offers "Remove".
   ============================================================ */
.pdsach .pdpick{position:relative; z-index:6; background:#161B33;
  border-color:rgba(255,255,255,.24); padding:12px 14px; font-size:.82rem}
.pdsach .pdpick:hover{background:#1C2242; border-color:rgba(255,255,255,.42)}
.pdpick[aria-checked="true"]{background:rgba(201,136,31,.22); border-color:var(--gold); color:#fff}
.pdpick[aria-checked="true"]:hover{background:rgba(201,136,31,.32); border-color:var(--gold-lt)}

/* the label turns into the way out once the sachet is in */
.pdpick .pdpick-t i{font-style:normal}
.pdpick .pk-off{display:none}
.pdpick[aria-checked="true"]:hover .pk-on,
.pdpick[aria-checked="true"]:focus-visible .pk-on{display:none}
.pdpick[aria-checked="true"]:hover .pk-off,
.pdpick[aria-checked="true"]:focus-visible .pk-off{display:inline}
/* and the tick becomes a cross in the same moment */
.pdpick[aria-checked="true"]:hover .tick::after,
.pdpick[aria-checked="true"]:focus-visible .tick::after{
  left:4.2px; top:6.5px; width:7px; height:0; border-left:0; border-bottom:1.8px solid #0B0D1A;
  transform:rotate(45deg)}
.pdpick[aria-checked="true"]:hover .tick::before,
.pdpick[aria-checked="true"]:focus-visible .tick::before{
  content:""; position:absolute; left:4.2px; top:6.5px; width:7px; height:0;
  border-bottom:1.8px solid #0B0D1A; transform:rotate(-45deg)}

/* the dose card stops short of the button instead of covering it */
.pdpop{bottom:62px; top:auto; transform:translateY(6px) scale(.985)}
.pdsach:hover .pdpop,.pdsach:focus .pdpop,.pdsach:focus-within .pdpop,.pdsach.is-open .pdpop{
  transform:translateY(0) scale(1)}
/* a long list spans both sachets and balances into two columns, so it
   never grows past the top of the window */
.pdpop.long{width:calc(200% + clamp(12px,1.8vw,20px)); padding:13px 16px}
.pdsach.am .pdpop.long{left:0; right:auto}
.pdsach.pm .pdpop.long{right:0; left:auto}
.pdpop.long ul{columns:2; column-gap:26px; column-rule:1px solid rgba(255,255,255,.08)}
.pdpop.long li{break-inside:avoid; padding:4px 0; font-size:.72rem; gap:12px}
@media(max-width:700px){
  /* the two sachets stack, so each dose list gets the card's full width,
     sits inside it, and scrolls when the formula is a long one */
  .pdsachets{grid-template-columns:1fr}
  .pdpop{width:auto; left:6px; right:6px; top:8px; bottom:62px;
    transform:none; overflow-y:auto; -webkit-overflow-scrolling:touch}
  .pdsach:hover .pdpop,.pdsach:focus .pdpop,.pdsach:focus-within .pdpop,
  .pdsach.is-open .pdpop{transform:none}
  .pdsach.is-open .pdpop{pointer-events:auto}
  .pdpop.long{width:auto; left:6px; right:6px; padding:12px 14px}
  .pdsach.am .pdpop.long,.pdsach.pm .pdpop.long{left:6px; right:6px}
  .pdpop.long ul{columns:1; column-rule:0}
  .pdpop.long li{padding:3px 0; font-size:.7rem; gap:10px}
  .pdpop.long .pdpop-h{margin-bottom:7px}
}



/* ============================================================
   37) ONE FILE, THREE PAGES — the landing page, the buy page and
       the questions live in the same document and the header
       moves between them. Nothing about any page's own design
       changes; only which one is on screen.
   ============================================================ */
.pg{display:none}
body[data-page="home"] #pg-home,
body[data-page="buy"]  #pg-buy,
body[data-page="faq"]  #pg-faq{display:block}
/* the mobile buy bar belongs to the buy page alone */
body:not([data-page="buy"]) .stickybar{display:none!important}
/* the questions page needs room under the header, as nothing precedes it */
#faqpage{padding-top:clamp(30px,6vh,80px)}
/* with no JavaScript every page is simply on the document, one after another */
html.no-js .pg{display:block!important}

/* ============================================================
   38) READABILITY — a floor under the smallest type, on the
       desktop and on the phone. Nothing moves in the layout or
       the palette; the small labels and captions simply stop
       being smaller than they can be read at.
   ============================================================ */

/* --- tracked labels and eyebrows: never under 11px --- */
.eyebrow{font-size:clamp(.75rem,.86vw,.82rem)!important}
.fq-role{font-size:clamp(.72rem,.8vw,.78rem)!important}
.paymarks span{font-size:.74rem!important}
footer h4{font-size:.78rem!important}
.h-s{font-size:.76rem!important}
.fq-tag{font-size:.7rem!important}
.pd-tier{font-size:.74rem!important}
.pd-freqh{font-size:.8rem!important}
.co .steps b{font-size:.78rem!important}
.co .demo-band{font-size:.8rem!important}

/* --- captions and fine print: never under 12.5px --- */
.fine,.freq-note,.lg-legal,.legal p{font-size:.8rem!important; line-height:1.65!important}
.sb-p{font-size:.8rem!important}
.p-d{font-size:.83rem!important}
.freqopt .fq-d{font-size:.84rem!important}
.field label,.lg-alt,.lg-meta span,label span{font-size:.84rem!important}
.pdhint{font-size:.84rem!important}
.pdsach span{font-size:.84rem!important}
.pdpop li,.pdpop-h,.pdpop-f,.pdpop-soon{font-size:.82rem!important}
.pdpop.long li{font-size:.8rem!important}
.pc-tier{font-size:.82rem!important}

/* --- the fix view's definition line --- */
.fv-def{font-size:clamp(.76rem,1.35vh,.92rem)!important}

/* --- the journey: the smallest type in the section --- */
#journey .jx-wp .lb{font-size:clamp(10.5px,1.32vh,11.5px)!important}
#journey .jx-phn{font-size:clamp(11.5px,1.45vh,12.5px)!important}
#journey .jx-cnt{font-size:clamp(11.5px,1.4vh,12.5px)!important}
#journey .jx-nm{font-size:clamp(12.6px,1.6vh,13.6px)!important}
#journey .jx-sub{font-size:clamp(11.6px,1.45vh,12.6px)!important; line-height:1.5!important}
#journey .jx-mag small{font-size:clamp(11.5px,1.4vh,12.5px)!important}
#journey .jx-btn{font-size:clamp(12.6px,1.6vh,13.6px)!important}
#journey .jx-legend{font-size:clamp(11.4px,1.45vh,12.4px)!important}
#journey .jx-foot{font-size:clamp(11.4px,1.4vh,12.4px)!important; line-height:1.6!important}
#journey .jx-lede{font-size:clamp(.88rem,1.6vh,1rem)!important}

/* --- the credential row keeps one line, a little larger --- */
.fq-creds li{font-size:clamp(.8rem,1.03vw,.95rem)!important}

/* --- on a phone, body copy and the accordion sit a step up --- */
@media(max-width:700px){
  .lede{font-size:1rem!important; line-height:1.65!important}
  .abody p{font-size:.95rem!important; line-height:1.72!important}
  .acc summary{font-size:1.06rem!important}
  .bcell p,.vs td,.hw-when{font-size:.97rem!important; line-height:1.66!important}
  .fq-sub{font-size:.95rem!important; line-height:1.72!important}
  .reassure span{font-size:.92rem!important}
  .pc-d{font-size:.95rem!important; line-height:1.6!important}
  .pdsach span{font-size:.88rem!important}
  .pdpop li,.pdpop.long li{font-size:.8rem!important}
}

/* ============================================================
   39) THE WORDMARK — one ALFAA everywhere. The comparison
       column head was set at a different size and a tighter
       track than the logo in the header, the footer and the
       checkout; it now uses the same face and the same letter
       spacing, at the same size wherever the column allows it.
   ============================================================ */
.vshead .h-b,
#stackup .vshead .h-b{
  font-family:var(--ff-serif)!important; font-weight:400!important;
  font-size:1.16rem!important; letter-spacing:.44em!important; padding-left:.44em!important}
@media(max-width:700px){
  /* the column is only 84px wide here, so the same wordmark is set
     smaller rather than tighter */
  .vshead .h-b,#stackup .vshead .h-b{font-size:14.4px!important}
}

/* ============================================================
   40) THE FIRST VIEW — the scene now moves. The film sits where
       the still sat, framed the same way, and the readability
       scrim over it is unchanged, so the type reads exactly as
       it did. With reduced motion the still shows instead.
   ============================================================ */
.s0-field > .s0-vid{position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:center 38%;
  pointer-events:none; border:0; background:transparent}
.hero .s0-field::after{z-index:1}
@media(prefers-reduced-motion:reduce){ .s0-field > .s0-vid{display:none} }

/* ============================================================
   41) GEO — page H1s. The Buy and FAQ pages had no <h1> (hurts
       AI/heading structure). Their new H1s are sized to match the
       section heading they sit in, so nothing looks oversized.
   ============================================================ */
#buy .stackhead h1{font-size:clamp(1.6rem,2.9vw,2.4rem); line-height:1.14; margin:0}
#faqpage .wrap h1{font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.16; margin:8px 0 0}

/* ============================================================
   42) Mobile nav dropdown hardening. The sticky header uses
       backdrop-filter, which on iOS Safari can clip an
       absolutely-positioned child so the open menu renders but
       hides behind the page. Pin it to the viewport with an
       explicit z-index (above the hero/video and sticky bar) and
       let it scroll if the list is tall.
   ============================================================ */
@media(max-width:1180px){
  .nav nav.open{position:fixed; top:60px; left:0; right:0; z-index:69;
    max-height:calc(100dvh - 60px); overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:0 18px 40px -22px rgba(10,11,18,.5)}
}

/* ============================================================
   43) Single-product buy page — one centred card (Pro removed).
   ============================================================ */
.prodpair-one{grid-template-columns:minmax(0,440px)!important; justify-content:center}
@media(max-width:700px){ .prodpair-one{grid-template-columns:1fr!important} }

/* ============================================================
   44) THE EVIDENCE — editorial article template. Reading-first
       layout in HEPS Paper: eyebrow-ruled headings, a key-facts
       panel, styled citations, tables, pull-quotes, CTA and
       related cards. Scoped to .ev-article so nothing else moves.
   ============================================================ */
.ev-article{padding:40px 0 64px; background:var(--cream)}
.ev-article .wrap.narrow{max-width:760px}

.ev-back{display:inline-flex; align-items:center; gap:8px; font:600 .8rem/1 var(--ff-sans);
  letter-spacing:.02em; text-transform:uppercase; color:var(--gold-dim); text-decoration:none; margin-bottom:26px}
.ev-back svg{width:16px; height:16px; stroke:currentColor}
.ev-back:hover{color:var(--ink)}

.ev-head{margin-bottom:26px}
.ev-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.ev-tag{font:600 .68rem/1 var(--ff-sans); letter-spacing:.12em; text-transform:uppercase; color:var(--gold-dim);
  background:var(--tint); border:1px solid var(--line); border-radius:100px; padding:6px 11px}
.ev-head h1{font-family:var(--ff-serif); font-weight:400; color:var(--ink);
  font-size:clamp(2rem,4.6vw,3rem); line-height:1.08; letter-spacing:-.015em; margin:12px 0 0; text-wrap:balance}
.ev-meta{font:500 .86rem/1 var(--ff-sans); color:var(--ink-3); margin:16px 0 0; display:flex; align-items:center; flex-wrap:wrap; gap:4px}
.ev-meta .ev-dot{margin:0 8px; opacity:.55}

.ev-hero{margin:4px 0 10px; border-radius:7px; overflow:hidden; border:1px solid var(--line)}
.ev-hero img{display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}

/* contents box */
.ev-toc{margin:30px 0 6px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:18px 22px}
.ev-toc-h{font:600 .72rem/1 var(--ff-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); margin:0 0 12px}
.ev-toc ol{margin:0; padding:0; list-style:none; counter-reset:toc}
.ev-toc li{counter-increment:toc; margin:0}
.ev-toc li + li{border-top:1px solid var(--line)}
.ev-toc a{display:flex; gap:12px; padding:10px 0; font:500 .95rem/1.4 var(--ff-sans); color:var(--ink-2); text-decoration:none}
.ev-toc a::before{content:counter(toc,decimal-leading-zero); color:var(--gold-dim); font-weight:600; font-size:.78rem; flex:0 0 auto; padding-top:2px}
.ev-toc a:hover{color:var(--gold-dim)}

/* body */
.ev-body{margin-top:34px; font-family:var(--ff-sans); font-size:1.075rem; line-height:1.76; color:var(--ink-2)}
.ev-body > p, .ev-body > ul, .ev-body > ol{margin:0 0 20px}
.ev-body p{margin:0 0 20px}
.ev-body strong{color:var(--ink); font-weight:600}
.ev-body a[href]{color:var(--navy); text-underline-offset:3px; text-decoration-thickness:1px}
/* lead / answer-first paragraph */
.ev-body .answer-first{font-size:1.24rem; line-height:1.6; color:var(--ink); margin:0 0 28px}
.ev-body .answer-first strong{font-weight:600}
/* headings with an amber eyebrow rule */
.ev-body h2{font-family:var(--ff-serif); font-weight:400; color:var(--ink); font-size:clamp(1.5rem,2.6vw,1.9rem);
  line-height:1.18; letter-spacing:-.01em; margin:48px 0 14px; padding-top:22px; position:relative; scroll-margin-top:84px}
.ev-body h2::before{content:""; position:absolute; top:0; left:0; width:40px; height:2px; background:var(--amber)}
.ev-body h3{font-family:var(--ff-serif); font-weight:400; color:var(--ink); font-size:1.24rem; margin:30px 0 10px}
/* key-facts / short-version panel */
.ev-body .keyfacts{background:var(--tint); border:1px solid var(--line); border-left:3px solid var(--amber);
  border-radius:6px; padding:22px 24px; margin:28px 0}
.ev-body .keyfacts h3{font-family:var(--ff-sans); font-weight:600; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold-dim); margin:0 0 14px}
.ev-body .keyfacts ul{list-style:none; margin:0; padding:0}
.ev-body .keyfacts li{position:relative; padding:0 0 0 28px; margin:0 0 11px; font-size:1rem; line-height:1.55; list-style:none}
.ev-body .keyfacts li:last-child{margin-bottom:0}
.ev-body .keyfacts li::before{content:"✓"; position:absolute; left:0; top:1px; width:17px; height:17px; border-radius:50%;
  background:var(--amber); color:#fff; font:700 10px/17px var(--ff-sans); text-align:center}
/* general lists */
.ev-body ul:not(.keyfacts ul){list-style:none; padding:0}
.ev-body ul:not(.keyfacts ul) > li{position:relative; padding-left:22px; margin:0 0 10px}
.ev-body ul:not(.keyfacts ul) > li::before{content:""; position:absolute; left:4px; top:11px; width:5px; height:5px; border-radius:50%; background:var(--amber)}
.ev-body ol{padding-left:22px} .ev-body ol li{margin:0 0 10px}
/* comparison tables (content ships .evtable; style here too so it holds up) */
.ev-body table, .ev-body .evtable{width:100%; border-collapse:collapse; margin:26px 0; font-size:.96rem; line-height:1.5}
.ev-body th, .ev-body td{border:1px solid var(--line); padding:11px 13px; text-align:left; vertical-align:top}
.ev-body th{background:var(--panel); font-weight:600; color:var(--ink); font-size:.82rem; letter-spacing:.02em}
.ev-body caption{caption-side:top; text-align:left; font:600 .72rem/1 var(--ff-sans); letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:10px}
/* citation links: small amber pill */
.ev-body a[target="_blank"]{display:inline-block; font:600 .62rem/1 var(--ff-sans); letter-spacing:.06em; text-transform:uppercase;
  color:var(--gold-dim); background:var(--tint); border:1px solid var(--line); border-radius:100px;
  padding:2px 7px; text-decoration:none; vertical-align:2px; margin-left:2px; transition:background .15s}
.ev-body a[target="_blank"]:hover{background:var(--tint-strong,#F6E9CF); color:var(--ink)}
/* pull quote */
.ev-body blockquote{margin:34px 0; padding:4px 0 4px 24px; border-left:3px solid var(--amber);
  font-family:var(--ff-serif); font-size:1.5rem; line-height:1.35; color:var(--ink); font-style:italic}
.ev-body blockquote p{margin:0}
/* disclaimer */
.ev-body .disclaimer{margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  font-size:.82rem; line-height:1.6; color:var(--ink-3)}
/* hide any raw JSON-LD that lives in the body */
.ev-body script{display:none}

/* end CTA */
.ev-cta{margin:50px 0 10px; background:var(--ink); color:var(--cream); border-radius:8px; padding:40px 36px; text-align:center}
.ev-cta .eyebrow{color:var(--gold-lt)}
.ev-cta h2{font-family:var(--ff-serif); font-weight:400; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.15; color:#fff; margin:10px 0 12px}
.ev-cta p{max-width:46ch; margin:0 auto 22px; color:rgba(250,247,241,.82); font-size:1rem; line-height:1.6}
.ev-cta .btn{background:var(--amber); color:var(--ink); border:0}
.ev-cta .btn:hover{background:var(--gold-lt)}

/* related */
.ev-related{margin:52px 0 0; border-top:1px solid var(--line); padding-top:34px}
.ev-rel-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px}
.ev-rel-card{display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--line); border-radius:7px; overflow:hidden; background:var(--panel); transition:transform .18s, box-shadow .18s}
.ev-rel-card:hover{transform:translateY(-3px); box-shadow:0 16px 36px -24px rgba(10,11,18,.4)}
.ev-rel-img{display:block; aspect-ratio:16/9; overflow:hidden}
.ev-rel-img img{width:100%; height:100%; object-fit:cover; display:block}
.ev-rel-body{padding:15px 16px 18px}
.ev-rel-k{display:block; font:600 .62rem/1 var(--ff-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dim); margin-bottom:8px}
.ev-rel-t{display:block; font-family:var(--ff-serif); font-size:1.08rem; line-height:1.25; color:var(--ink)}

@media(max-width:760px){
  .ev-rel-grid{grid-template-columns:1fr; gap:14px}
  .ev-rel-card{flex-direction:row; align-items:center}
  .ev-rel-img{flex:0 0 120px; aspect-ratio:1}
  .ev-cta{padding:32px 22px}
  .ev-body{font-size:1.04rem}
}

/* ========================================================================
   Block 45 — The Evidence blog index (editorial listing)
   ===================================================================== */
.ev-index{padding:clamp(40px,6vw,76px) 0 90px}
.ev-index .wrap{max-width:1080px}
.ev-index-head{max-width:720px; margin:0 0 clamp(30px,4vw,48px)}
.ev-index-head h1{font-family:var(--ff-serif); font-weight:400; color:var(--ink);
  font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.05; letter-spacing:-.02em; margin:10px 0 0}
.ev-index-intro{font-family:var(--ff-sans); font-size:1.12rem; line-height:1.6; color:var(--ink-3); margin:18px 0 0; max-width:62ch}

/* lead feature card */
.ev-feat{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(22px,3vw,40px); align-items:center;
  text-decoration:none; padding:0 0 clamp(34px,4vw,46px); margin:0 0 clamp(34px,4vw,46px);
  border-bottom:1px solid var(--line)}
.ev-feat-img{display:block; border-radius:9px; overflow:hidden; border:1px solid var(--line); background:var(--tint)}
.ev-feat-img img{display:block; width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .5s ease}
.ev-feat:hover .ev-feat-img img{transform:scale(1.03)}
.ev-feat-body{display:flex; flex-direction:column; align-items:flex-start}
.ev-feat .ev-tags{display:flex; gap:7px; margin:0 0 14px}
.ev-feat-k{font:600 .68rem/1 var(--ff-sans); letter-spacing:.18em; text-transform:uppercase; color:var(--gold-dim); margin:0 0 10px}
.ev-feat-t{font-family:var(--ff-serif); font-weight:400; color:var(--ink);
  font-size:clamp(1.6rem,2.8vw,2.1rem); line-height:1.14; letter-spacing:-.01em; margin:0 0 14px; text-wrap:balance}
.ev-feat:hover .ev-feat-t{color:var(--gold-dim)}
.ev-feat-x{font-family:var(--ff-sans); font-size:1.02rem; line-height:1.62; color:var(--ink-2); margin:0 0 18px; max-width:52ch}
.ev-feat-meta{display:flex; align-items:center; font:500 .86rem/1 var(--ff-sans); color:var(--ink-3)}
.ev-feat-go{color:var(--gold-dim); font-weight:600; margin-left:auto; padding-left:18px}

/* card grid */
.ev-index-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,28px)}
.ev-card{display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--line);
  border-radius:9px; overflow:hidden; background:var(--panel); transition:transform .2s ease, box-shadow .2s ease}
.ev-card:hover{transform:translateY(-4px); box-shadow:0 22px 46px -28px rgba(10,11,18,.45)}
.ev-card-img{display:block; aspect-ratio:8/5; overflow:hidden; background:var(--tint)}
.ev-card-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease}
.ev-card:hover .ev-card-img img{transform:scale(1.04)}
.ev-card-body{display:flex; flex-direction:column; flex:1; padding:18px 19px 20px}
.ev-card-k{font:600 .62rem/1 var(--ff-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--gold-dim); margin:0 0 10px}
.ev-card-t{font-family:var(--ff-serif); font-weight:400; color:var(--ink); font-size:1.24rem; line-height:1.2; letter-spacing:-.005em; margin:0 0 10px}
.ev-card:hover .ev-card-t{color:var(--gold-dim)}
.ev-card-x{font-family:var(--ff-sans); font-size:.95rem; line-height:1.55; color:var(--ink-3); margin:0 0 16px}
.ev-card-meta{margin-top:auto; font:500 .78rem/1 var(--ff-sans); letter-spacing:.02em; color:var(--ink-3)}
.ev-index-empty{font-family:var(--ff-serif); font-size:1.3rem; color:var(--ink-3)}

@media(max-width:860px){
  .ev-feat{grid-template-columns:1fr; gap:20px}
  .ev-feat-img img{aspect-ratio:16/9}
  .ev-index-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .ev-index-grid{grid-template-columns:1fr}
  .ev-feat-go{margin-left:14px}
}

/* waitlist mode — hide the mobile add-to-cart / sell bar site-wide */
#sticky{display:none!important}