/* ============================================================
   VI ENHANCE — round 2 polish
   Loaded LAST so these win over style.css.
   Sleep-leaning accents on the Abso base; cleaner nav; hero grid
   contained to the strip; animated How-it-works; video testimonial
   carousel; stronger credibility band; richer final CTA; shop hover.
   ============================================================ */

/* ---------- NAV: cleaner, less muddy over the dark hero ---------- */
.nav{
  background:rgba(255,247,233,.90);
  -webkit-backdrop-filter:saturate(1.08) blur(20px);
  backdrop-filter:saturate(1.08) blur(20px);
  border-bottom:1px solid var(--ink-08);
}
.announce{background:var(--sleep-deep,#1E2770)}   /* sleep-lean the top bar */

/* ---------- HERO: keep the full-width architectural grid; frame the copy ---------- */
/* The grid stays edge-to-edge. The strip (and its top/bottom rules) is sized a
   little taller than the trimmed copy, and both columns are centered, so the two
   horizontal rules bracket the headline/buttons instead of cutting through them. */
.hc-hline{ left:-300vw; right:-300vw; }
.hc-vline{ bottom:-120vh; }
.heroL-cine .hc-frame{ max-width:300px; }
/* tighten the trimmed hero copy so it reads as one framed block */
.heroL-cine .heroL-inner{ align-items:center; }
.heroL-cine h1{ margin-bottom:.22em; }
.heroL-cine .heroL-rating{ margin-bottom:20px; }
@media (min-width:881px){
  .heroL-cine .content-stack{ max-width:560px; }
}
/* warm-cool the ambient glow slightly toward sleep */
.hc-glow{ background:
  radial-gradient(60% 70% at 75% 50%, rgba(117,116,193,0.12) 0%, transparent 70%); }

/* ---------- Sleep-tinted section wash (Abso base, sleep lean) ---------- */
.section-sleep{ background:linear-gradient(180deg, var(--sleep-light) 0%, var(--cream) 72%); }

/* ---------- COMPARE: powder column removed -> 3 delivery columns ---------- */
.compare-row{ grid-template-columns:1.3fr repeat(3,1fr); }

/* ---------- SHOP: hover swaps pack -> open-strip 3D render ---------- */
.shop-card .sc-vis .sc-pack,
.shop-card .sc-vis .sc-open{
  grid-area:1/1; height:100%; width:auto; object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(31,26,18,.22));
  transition:opacity .5s var(--e-expo), transform .6s var(--e-expo);
}
.shop-card .sc-vis{ display:grid; place-items:center; }
.shop-card .sc-vis .sc-open{ opacity:0; transform:scale(.96); }
.shop-card:hover .sc-vis .sc-pack{ opacity:0; transform:scale(1.02); }
.shop-card:hover .sc-vis .sc-open{ opacity:1; transform:translateY(-4px) scale(1.04); }
.shop-card .sc-hint{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-44); opacity:0; transition:opacity .4s; white-space:nowrap;
}
.shop-card:hover .sc-hint{ opacity:1; }
.shop-card.s-sleep{ box-shadow:0 0 0 1px rgba(53,70,160,.18); }   /* gently flag the hero SKU */

/* ============================================================
   HOW IT WORKS — animated sublingual-absorption explainer
   ============================================================ */
.hiw{ padding:clamp(64px,9vh,120px) 0; }
.hiw-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.hiw-copy h2{ font-size:clamp(40px,5vw,76px); line-height:.95; margin:14px 0 14px; }
.hiw-steps{ display:flex; flex-direction:column; margin:26px 0 8px; }
.hiw-step{ display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:baseline; padding:16px 0; border-top:1px solid var(--ink-12); }
.hiw-step b{ font-family:var(--serif); font-size:28px; color:var(--sleep-a); line-height:1; }
.hiw-step h4{ font-family:var(--serif); font-size:20px; font-weight:400; margin:0 0 2px; }
.hiw-step p{ font-size:13px; color:var(--ink-64); margin:0; }
.hiw-step .hv{ font-family:var(--mono); font-size:11px; color:var(--ink-44); white-space:nowrap; }
.hiw-stats{ display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--ink-08); border-radius:10px; overflow:hidden; margin-top:18px; }
.hiw-stats > div{ padding:18px 16px; text-align:center; }
.hiw-stats > div + div{ border-left:1px solid var(--ink-08); }
.hiw-stats .v{ font-family:var(--serif); font-size:clamp(28px,3vw,40px); color:var(--sleep-a); display:block; line-height:1; }
.hiw-stats .l{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-44); margin-top:8px; display:block; }

/* The animated stage: vertical journey strip -> mucosa -> bloodstream */
.hiw-viz{ position:relative; }
.hiv-stage{
  position:relative; border-radius:18px; overflow:hidden;
  aspect-ratio:4/5; background:linear-gradient(180deg,#10163a 0%, #1E2770 55%, #3546A0 100%);
  box-shadow:0 40px 80px -30px rgba(30,39,112,.6); isolation:isolate;
}
.hiv-cap{ position:absolute; left:0; right:0; z-index:4; display:flex; justify-content:space-between;
  padding:14px 18px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-80); }
.hiv-cap.top{ top:0; } .hiv-cap.bot{ bottom:0; }
/* dissolving strip at the top */
.hiv-strip{ position:absolute; top:13%; left:50%; transform:translateX(-50%); width:42%; height:8%;
  border-radius:4px; background:linear-gradient(180deg,var(--sleep-b),var(--sleep-c));
  box-shadow:0 8px 24px rgba(0,0,0,.35); animation:hiv-dissolve 4s var(--e-micro) infinite; }
@keyframes hiv-dissolve{ 0%{opacity:1;filter:blur(0)} 70%{opacity:.85;filter:blur(.4px)} 88%{opacity:.35;filter:blur(1.2px)} 100%{opacity:1;filter:blur(0)} }
/* mucosa membrane */
.hiv-membrane{ position:absolute; top:30%; left:8%; right:8%; height:1px; background:rgba(255,247,233,.4);
  box-shadow:0 0 18px 2px rgba(189,184,220,.35); }
.hiv-membrane::after{ content:"mucosa"; position:absolute; right:0; top:-16px; font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-55); }
/* flowing particles */
.hiv-stream{ position:absolute; inset:30% 0 22%; z-index:2; }
.hiv-stream i{ position:absolute; top:0; width:8px; height:8px; border-radius:50%;
  background:var(--cream); box-shadow:0 0 10px 1px rgba(255,247,233,.7);
  animation:hiv-flow 3.2s cubic-bezier(.5,0,.5,1) infinite; opacity:0; }
@keyframes hiv-flow{ 0%{transform:translateY(0) scale(.7);opacity:0} 12%{opacity:1} 80%{opacity:1} 100%{transform:translateY(190px) scale(1);opacity:0} }
.hiv-stream i:nth-child(1){ left:20%; animation-delay:0s }
.hiv-stream i:nth-child(2){ left:32%; animation-delay:.5s }
.hiv-stream i:nth-child(3){ left:44%; animation-delay:1.0s }
.hiv-stream i:nth-child(4){ left:56%; animation-delay:.3s }
.hiv-stream i:nth-child(5){ left:68%; animation-delay:1.4s }
.hiv-stream i:nth-child(6){ left:26%; animation-delay:1.9s }
.hiv-stream i:nth-child(7){ left:50%; animation-delay:2.2s }
.hiv-stream i:nth-child(8){ left:62%; animation-delay:.8s }
.hiv-stream i:nth-child(9){ left:38%; animation-delay:2.6s }
.hiv-stream i:nth-child(10){ left:74%; animation-delay:1.6s }
/* bloodstream glow + headline number */
.hiv-blood{ position:absolute; left:0; right:0; bottom:0; height:24%; z-index:3;
  background:linear-gradient(180deg, transparent, rgba(207,5,19,.0) 0%, rgba(125,13,13,.0));
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.hiv-blood::before{ content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 120%, rgba(229,238,241,.22), transparent 70%); }
.hiv-num{ position:relative; font-family:var(--serif); font-size:clamp(40px,6vw,68px); color:var(--cream); line-height:1; }
.hiv-num small{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-80); margin-top:6px; }
@media (prefers-reduced-motion: reduce){ .hiv-strip,.hiv-stream i{ animation:none } .hiv-stream i{ opacity:.8 } }

/* ============================================================
   VIDEO TESTIMONIAL CAROUSEL
   ============================================================ */
.vtest{ background:var(--ink); color:var(--cream); padding:clamp(64px,9vh,120px) 0; }
.vtest .wrap{ position:relative; }
.vtest .section-head h2{ color:var(--cream); }
.vtest .section-head .lead{ color:var(--cream-80); }
.vtest-track{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 18px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.vtest-track::-webkit-scrollbar{ display:none; }
.vtest-card{ flex:0 0 clamp(240px,26vw,300px); scroll-snap-align:start; border-radius:14px; overflow:hidden;
  background:#15110b; border:1px solid var(--cream-22); position:relative; }
.vtest-card video{ width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:#15110b; }
.vtest-grad{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 45%, rgba(15,10,5,.86) 100%); }
.vtest-body{ position:absolute; left:0; right:0; bottom:0; padding:18px; z-index:2; }
.vtest-quote{ font-family:var(--serif); font-size:17px; line-height:1.3; color:var(--cream); margin:0 0 12px; }
.vtest-meta{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vtest-who{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-55); }
.vtest-tag{ font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:3px; background:var(--cream-14); color:var(--cream); }
.vtest-tag.sleep{ background:rgba(117,116,193,.5); } .vtest-tag.energy{ background:rgba(223,109,9,.55); } .vtest-tag.glow{ background:rgba(17,169,168,.45); }
.vtest-add{ position:absolute; top:12px; right:12px; z-index:3; width:34px; height:34px; border-radius:50%;
  background:var(--cream); color:var(--ink); font-size:20px; line-height:34px; text-align:center; opacity:.92; }
.vtest-nav{ display:flex; gap:10px; margin-top:8px; }
.vtest-nav button{ width:42px; height:42px; border-radius:50%; border:1px solid var(--cream-22); color:var(--cream); font-size:16px; transition:background .3s,color .3s; }
.vtest-nav button:hover{ background:var(--cream); color:var(--ink); }

/* ============================================================
   CREDIBILITY BAND (replaces text-heavy formulator)
   ============================================================ */
.cred{ background:var(--cream); }
.cred .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,72px); align-items:center; }
.cred-figs{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:26px; }
.cred-fig{ border:1px solid var(--ink-08); border-radius:12px; padding:22px 20px; background:var(--cream); }
.cred-fig .v{ font-family:var(--serif); font-size:clamp(34px,4vw,52px); line-height:1; color:var(--ink); }
.cred-fig .v .solar{ color:var(--solar); }
.cred-fig .l{ font-size:13px; color:var(--ink-64); margin-top:8px; line-height:1.4; }
.cred-figure{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 40px 80px -34px rgba(31,26,18,.45); }
.cred-figure img{ width:100%; height:100%; object-fit:cover; }
.cred-figure figcaption{ position:absolute; left:0; right:0; bottom:0; padding:22px; background:linear-gradient(180deg,transparent,rgba(31,26,18,.82)); color:var(--cream); }
.cred-figure .q{ font-family:var(--serif); font-size:19px; line-height:1.35; margin:0 0 10px; }
.cred-figure .n{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; color:var(--cream-80); }
.cred-verify{ display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:24px; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-64); }
.cred-verify span{ display:inline-flex; align-items:center; gap:7px; }
.cred-verify span::before{ content:"✓"; color:var(--sleep-a); font-size:12px; }

/* ============================================================
   FINALE — shop-all CTA with hero gradient grid, Sleep highlighted
   ============================================================ */
.finale{ position:relative; background:var(--ink); color:var(--cream); overflow:hidden; padding:clamp(80px,12vh,150px) var(--pad); isolation:isolate; }
.finale-grid-bg{ position:absolute; inset:0; z-index:0; opacity:.9; }
.finale-strip{ position:absolute; top:0; bottom:0; width:33.333%; }
.finale-strip.s1{ left:0; background:linear-gradient(180deg,var(--sleep-a),var(--sleep-b) 45%,var(--sleep-c)); }
.finale-strip.s2{ left:33.333%; background:linear-gradient(180deg,var(--energy-a),var(--energy-b) 45%,var(--energy-c)); }
.finale-strip.s3{ left:66.666%; background:linear-gradient(180deg,var(--glow-a),var(--glow-b) 50%,var(--glow-c)); }
.finale-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(15,10,5,.62), rgba(15,10,5,.82)); }
.finale-vline{ position:absolute; top:0; bottom:0; width:1px; background:rgba(255,247,233,.16); z-index:2; }
.finale-inner{ position:relative; z-index:3; max-width:var(--maxw); margin:0 auto; text-align:center; }
.finale-eye{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-80); }
.finale h2{ font-family:var(--serif); color:var(--cream); font-size:clamp(46px,8vw,118px); line-height:.92; margin:14px 0 8px; }
.finale-sub{ color:var(--cream-80); max-width:46ch; margin:0 auto 40px; }
.finale-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:880px; margin:0 auto; }
.finale-card{ background:rgba(255,247,233,.06); border:1px solid var(--cream-22); border-radius:14px; padding:22px 18px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; flex-direction:column; align-items:center; gap:6px; transition:transform .4s var(--e-expo),background .4s; }
.finale-card:hover{ transform:translateY(-6px); background:rgba(255,247,233,.1); }
.finale-card.hero{ border-color:var(--cream); background:rgba(255,247,233,.12); }
.finale-card .fc-badge{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:var(--cream); padding:3px 9px; border-radius:20px; min-height:18px; }
.finale-card .fc-badge.ghost{ background:transparent; color:transparent; }
.finale-card img{ height:120px; width:auto; object-fit:contain; filter:drop-shadow(0 16px 26px rgba(0,0,0,.4)); margin:4px 0; }
.finale-card .fc-name{ font-family:var(--serif); font-size:26px; color:var(--cream); }
.finale-card .fc-price{ font-family:var(--mono); font-size:12px; color:var(--cream-80); margin-bottom:8px; }
.finale-card .fc-add{ width:100%; }

/* ---------- responsive ---------- */
@media (max-width:880px){
  .hiw-grid{ grid-template-columns:1fr; gap:30px; }
  .hiv-stage{ max-width:360px; margin:0 auto; }
  .cred .wrap{ grid-template-columns:1fr; gap:30px; }
  .cred-figure{ max-width:420px; }
  .finale-cards{ grid-template-columns:1fr; max-width:420px; }
  .finale-card{ flex-direction:row; justify-content:space-between; text-align:left; }
  .finale-card img{ height:64px; order:-1; }
  .finale-card .fc-add{ width:auto; }
}

/* ============================================================
   ROUND 3
   ============================================================ */

/* ---- Square corners everywhere (brand: radius 0). Circles preserved. ---- */
.nav,.mobile-menu a,.shop-card,.shop-card .sc-vis,.sc-badge,.sc-hint,
.compare-table,.hiw2-panel,.hiw2-step,.hiw2-track,.cred-fig,.cred-figure,
.guar,.guar-seal,.vtest-card,.vtest-tag,.fc-badge,.finale-card,.tag,
.how-media,.gal-main,.gal-main img,.gal-thumb,.feel-image,.feel-frame,.band,
.band video,.review,.reviews-grid .review,.faq-item,.panel,.panel-item,
.panel-media,.panel-media img,.howto-media,.howto-media img,.xcard,.xcard img,
.atc-bar,.atc-bar .btn-add,.drawer,.buybox .opt,.btn,.btn-add,.btn-solar,.btn-light,
.footer-news input,.footer-news button,.dock,.dock-quick button,.dock-bag,
.wall-cell,.bento-cell,.range-col,.hiv-stage,.cred-verify span,.sci-visual,
.sci-visual img,.lab-layer,.lab-detail>div,.crumb,.opt,.qty,.q-opt,.stack-q,
.stack-result,.atlas-cell,.af{
  border-radius:0 !important;
}
.dot,.wall-cell .add,.vtest-add,.vtest-play,.scroll-cue i,
.guar-seal.round{ border-radius:50% !important; }
/* Bag dot is a square, matching the squared PDP title mark */
.cart-btn .dot{ border-radius:1.5px !important; }
.dock-quick .sw{ border-radius:0 !important; }

/* ---- Dock: rectangular sticky ATC bar ---- */
.dock{ bottom:0; left:0; right:0; transform:translateY(110%); width:100%; max-width:100%;
  border-radius:0 !important; border-top:1px solid var(--cream-22); padding:12px clamp(16px,4vw,40px);
  background:rgba(31,26,18,.92); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.dock.show{ transform:translateY(0); }
.dock-quick button{ border:1px solid var(--cream-22); padding:8px 14px; }
.dock-bag{ background:var(--solar); color:var(--cream); padding:10px 18px; font-weight:500; }

/* ============================================================
   HOW IT WORKS v2 — timed + clickable interactive explainer
   ============================================================ */
.hiw2{ padding:clamp(64px,9vh,120px) 0; }
.hiw2-stage{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; margin-top:34px; }
.hiw2-visual{ position:relative; }
.hiw2-panel{ position:relative; aspect-ratio:4/5; background:#10163a; overflow:hidden;
  display:flex; align-items:center; justify-content:center; box-shadow:0 40px 80px -30px rgba(30,39,112,.55); }
.hiw2-panel::before{ content:""; position:absolute; inset:0; background:radial-gradient(80% 60% at 50% 120%, rgba(117,116,193,.4), transparent 70%); opacity:0; transition:opacity 1s; }
.hiw2[data-stage="2"] .hiw2-panel::before{ opacity:1; }
/* ---------- Stage canvas — holds frame + overlays, shrinks on scroll ---------- */
.hiw-stage-canvas{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  transform-origin:center;
}
@supports (animation-timeline:scroll()){
  .hiw-stage-canvas{
    animation:hiw-stage-shrink linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
  @keyframes hiw-stage-shrink{
    0%   { transform:scale(.92); }
    35%  { transform:scale(1); }
    65%  { transform:scale(1); }
    100% { transform:scale(.86); }
  }
}

/* ---------- 3 videos inside a centered framed rectangle ---------- */
.hiw-frame{
  position:relative;
  width:46%;
  aspect-ratio:2/3;
  overflow:visible;        /* allow membrane line to extend out (it's inside frame now) */
  box-shadow:0 30px 60px -18px rgba(0,0,0,.6),
             inset 0 0 0 1px rgba(255,247,233,.18);
  background:linear-gradient(180deg,var(--sleep-a),var(--sleep-c));
  z-index:1;
}
/* Inner clip so the videos still respect the rectangle bounds */
.hiw-frame-clip{
  position:absolute; inset:0; overflow:hidden;
}
.hiw-vid{
  position:absolute; inset:0;
  opacity:0; pointer-events:none;
  transition:opacity .55s ease;
  overflow:hidden;
}
.hiw-vid video{
  width:100%; height:100%; object-fit:cover;
  display:block;
  /* Subtle grade so all 3 videos feel cohesive without going too dark */
  filter: saturate(.9) contrast(1.03);
}
/* Light Sleep-palette tint — unifies clips without darkening them */
.hiw-vid::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(53, 70, 160, 0.08) 0%,
    rgba(30, 39, 112, 0.14) 100%);
  mix-blend-mode:soft-light;
}
.hiw2[data-stage="0"] .hiw-vid-1,
.hiw2[data-stage="1"] .hiw-vid-2,
.hiw2[data-stage="2"] .hiw-vid-3{ opacity:1; }

/* Re-enable the original abstract overlays as layered context on top of the video */
.hiw2-panel > .hiw2-strip,
.hiw2-panel > .hiw2-flow{ display:none !important; }     /* old in-panel placement disabled */

/* Membrane line on the FRAME — pinned to video's top edge.
   Extends out left/right past the frame to the panel edges (matches vertical line aesthetic). */
.hiw-frame .hiw2-membrane{
  position:absolute;
  top:0;
  /* Frame is 46% panel width; (100-46)/2 = 27% panel margin each side
     As % of frame width: 27/46 ≈ 58.7% → negative margin to reach panel edges */
  left:-58.7%;
  right:-58.7%;
  height:1px;
  background:rgba(255,247,233,.18);   /* matches .hiw2-vline alpha */
  box-shadow:none;                     /* no glow */
  z-index:10;
  opacity:1 !important;
  display:block !important;
  pointer-events:none;
}
/* Stage-specific label — anchored to the FRAME, nudged slightly inward so it doesn't kiss the vertical line */
.hiw-frame::after{
  content:"sachet";
  position:absolute;
  top:-16px;
  right:8px;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,247,233,.55);
  z-index:11;
  pointer-events:none;
}
.hiw2[data-stage="1"] .hiw-frame::after{ content:"mucosa"; }
.hiw2[data-stage="2"] .hiw-frame::after{ content:"bloodstream"; }
/* (duplicate membrane label removed — label now lives on .hiw-frame::after) */
.hiw-frame .hiw2-membrane::after{ display:none !important; }

.hiw-stage-canvas .hiw2-flow{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  display:block !important;
  opacity:0; transition:opacity .8s;
}
.hiw2[data-stage="1"] .hiw-stage-canvas .hiw2-flow{ opacity:1; }
.hiw-stage-canvas .hiw2-flow i{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:rgba(255,247,233,.75); box-shadow:0 0 8px 2px rgba(189,184,220,.6);
  animation:hiw-fall 2.6s ease-in infinite;
}
.hiw-stage-canvas .hiw2-flow i:nth-child(1){ left:18%; top:18%; animation-delay:0s; }
.hiw-stage-canvas .hiw2-flow i:nth-child(2){ left:82%; top:24%; animation-delay:.35s; }
.hiw-stage-canvas .hiw2-flow i:nth-child(3){ left:12%; top:48%; animation-delay:.7s; }
.hiw-stage-canvas .hiw2-flow i:nth-child(4){ left:88%; top:54%; animation-delay:.18s; }
.hiw-stage-canvas .hiw2-flow i:nth-child(5){ left:15%; top:72%; animation-delay:.55s; }
.hiw-stage-canvas .hiw2-flow i:nth-child(6){ left:85%; top:78%; animation-delay:.9s; }
.hiw-stage-canvas .hiw2-flow i:nth-child(7){ left:8%; top:30%; animation-delay:1.1s; }
.hiw-stage-canvas .hiw2-flow i:nth-child(8){ left:92%; top:62%; animation-delay:1.4s; }
@keyframes hiw-fall{
  0%   { transform:translateY(0) scale(.6); opacity:0; }
  20%  { opacity:1; }
  100% { transform:translateY(40px) scale(1); opacity:0; }
}

.hiw-stage-canvas .hiw2-blood{
  position:absolute; left:0; right:0; bottom:0; height:50%;
  background:radial-gradient(60% 80% at 50% 110%, rgba(223,109,9,.35), transparent 70%);
  opacity:0; transition:opacity 1s; pointer-events:none; z-index:2;
}
.hiw2[data-stage="2"] .hiw-stage-canvas .hiw2-blood{ opacity:1; }

.hiw-stage-canvas .hiw2-readout{
  position:absolute; left:0; right:0; bottom:3%;
  display:flex; flex-direction:column; align-items:center;
  z-index:4; pointer-events:none;
  opacity:0; transform:translateY(8px);
  transition:opacity .7s, transform .7s;
}
.hiw-stage-canvas .hiw2-readout .num{
  font-family:var(--serif); font-size:clamp(40px,5vw,64px);
  color:var(--cream); line-height:1;
}
.hiw-stage-canvas .hiw2-readout .cap{
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--cream-80); margin-top:8px;
}
.hiw2[data-stage="2"] .hiw-stage-canvas .hiw2-readout{ opacity:1; transform:none; }

/* ---------- (legacy abstract scene styles kept below for compatibility) ---------- */
.hiw-scene{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .55s ease;
  padding:7%;
}
.hiw2[data-stage="0"] .hiw-scene-1,
.hiw2[data-stage="1"] .hiw-scene-2,
.hiw2[data-stage="2"] .hiw-scene-3{ opacity:1; }

.hiw-scene-cap{
  position:absolute; left:0; right:0; bottom:7%;
  text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,247,233,.55);
}

/* --- SCENE 1: PLACE — strip floats above stylized tongue --- */
.hiw-scene-1 .hiw-place-strip{
  position:relative; width:44%; aspect-ratio:2/3;
  transform:translateY(-10%);
  animation:hiw-bob 2.4s ease-in-out infinite;
}
.hiw-scene-1 .hiw-place-strip .hiw2-strip{
  position:absolute; inset:0; width:100%; height:100%; transform:none;
}
.hiw-scene-1 .hiw-arrow{
  position:absolute; left:50%; top:calc(100% + 8px);
  transform:translateX(-50%);
  color:rgba(255,247,233,.65);
  font-family:var(--mono); font-size:22px; line-height:1;
}
.hiw-tongue{ position:absolute; left:8%; right:8%; bottom:18%; height:18%; }
.hiw-tongue svg{ width:100%; height:100%; display:block; }
.hiw-tongue-cap{
  position:absolute; right:0; top:-14px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,247,233,.55);
}
@keyframes hiw-bob{
  0%,100%{ transform:translateY(-10%); }
  50%   { transform:translateY(-14%); }
}

/* --- SCENE 2: DISSOLVE — strip melts, particles drop into mucosa line --- */
.hiw-scene-2 .hiw-dissolve-strip{
  position:absolute; left:50%; top:28%;
  width:32%; aspect-ratio:2/3; transform:translateX(-50%);
  opacity:.55; filter:blur(1.5px) brightness(1.1);
}
.hiw-scene-2 .hiw-dissolve-strip .hiw2-strip{ position:absolute; inset:0; width:100%; height:100%; transform:none; }
.hiw-membrane-line{
  position:absolute; left:8%; right:8%; top:62%;
  height:1px; background:rgba(255,247,233,.5);
  box-shadow:0 0 18px 2px rgba(189,184,220,.35);
}
.hiw-membrane-cap{
  position:absolute; right:0; top:-14px;
  font-family:var(--mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(255,247,233,.7);
}
.hiw-particles{ position:absolute; left:0; right:0; top:55%; bottom:30%; }
.hiw-particles i{
  position:absolute; width:5px; height:5px; border-radius:50%;
  background:rgba(255,247,233,.75); box-shadow:0 0 8px 1px rgba(189,184,220,.6);
  animation:hiw-fall 2.6s ease-in infinite;
}
.hiw-particles i:nth-child(1){ left:18%; animation-delay:0s; }
.hiw-particles i:nth-child(2){ left:30%; animation-delay:.35s; }
.hiw-particles i:nth-child(3){ left:42%; animation-delay:.7s; }
.hiw-particles i:nth-child(4){ left:54%; animation-delay:.18s; }
.hiw-particles i:nth-child(5){ left:66%; animation-delay:.55s; }
.hiw-particles i:nth-child(6){ left:78%; animation-delay:.9s; }
.hiw-particles i:nth-child(7){ left:24%; animation-delay:1.1s; }
.hiw-particles i:nth-child(8){ left:48%; animation-delay:1.4s; }
.hiw-particles i:nth-child(9){ left:72%; animation-delay:1.6s; }
.hiw-particles i:nth-child(10){ left:36%; animation-delay:1.85s; }
@keyframes hiw-fall{
  0%   { transform:translateY(0); opacity:0; }
  20%  { opacity:1; }
  100% { transform:translateY(160%); opacity:0; }
}

/* --- SCENE 3: FEEL — vessels + solar flow particles + readout --- */
.hiw-vessels{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.85; mix-blend-mode:screen;
}
.hiw-feel-flow{ position:absolute; inset:0; }
.hiw-feel-flow i{
  position:absolute; width:6px; height:6px; border-radius:50%;
  background:var(--solar); box-shadow:0 0 10px 2px rgba(223,109,9,.6);
  animation:hiw-flow 3s linear infinite;
}
.hiw-feel-flow i:nth-child(1){ left:18%; animation-delay:0s; }
.hiw-feel-flow i:nth-child(2){ left:18%; animation-delay:1.4s; }
.hiw-feel-flow i:nth-child(3){ left:48%; animation-delay:.5s; }
.hiw-feel-flow i:nth-child(4){ left:48%; animation-delay:1.9s; }
.hiw-feel-flow i:nth-child(5){ left:78%; animation-delay:.9s; }
.hiw-feel-flow i:nth-child(6){ left:78%; animation-delay:2.2s; }
@keyframes hiw-flow{
  0%   { top:0%;   opacity:0; }
  10%  { opacity:1; }
  90%  { opacity:1; }
  100% { top:100%; opacity:0; }
}
.hiw-scene-3 .hiw2-readout{ position:relative; z-index:2; }

/* Hide original abstract elements (replaced by scene-specific markup) */
.hiw2-panel > .hiw2-strip,
.hiw2-panel > .hiw2-membrane,
.hiw2-panel > .hiw2-flow,
.hiw2-panel > .hiw2-blood,
.hiw2-panel > .hiw2-readout{ display:none; }

/* Original .hiw2-strip definition (used INSIDE scenes via direct child of hiw-place-strip / hiw-dissolve-strip) */
.hiw2-strip{ position:relative; width:46%; height:62%; z-index:1;
  background:linear-gradient(180deg,var(--sleep-a),var(--sleep-b) 38%,var(--sleep-c) 72%,var(--sleep-d));
  background-size:140% 140%; background-position:80% 20%;
  box-shadow:0 30px 60px -18px rgba(0,0,0,.6);
  animation:hc-drift 16s ease-in-out infinite;
  transition:transform 1.1s var(--e-expo), filter 1.1s var(--e-expo), opacity 1.1s; }
.hiw2-vline{ position:absolute; top:0; bottom:0; width:1px; background:rgba(255,247,233,.18); z-index:0; }
.hiw2-vline.l{ left:27%; } .hiw2-vline.r{ right:27%; }
.hiw2-readout{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2; pointer-events:none; }
.hiw2-readout .num{ font-family:var(--serif); font-size:clamp(52px,7vw,88px); color:var(--cream); line-height:1; opacity:0; transform:translateY(8px); transition:opacity .7s,transform .7s; }
.hiw2-readout .cap{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream-80); margin-top:10px; opacity:0; transition:opacity .7s; }
.hiw2[data-stage="0"] .hiw2-strip{ transform:scale(1); }
.hiw2[data-stage="1"] .hiw2-strip{ transform:scale(.82) translateY(6%); filter:blur(1.5px) brightness(1.12); opacity:.65; }
.hiw2[data-stage="2"] .hiw2-strip{ transform:scale(1.18); filter:saturate(1.18); opacity:.9; }
.hiw2[data-stage="2"] .hiw2-readout .num,
.hiw2[data-stage="2"] .hiw2-readout .cap{ opacity:1; transform:none; }
.hiw2-steps{ display:flex; flex-direction:column; }
.hiw2-step{ width:100%; text-align:left; display:grid; grid-template-columns:auto 1fr auto; gap:18px;
  align-items:baseline; padding:22px 4px; border-top:1px solid var(--ink-12); opacity:.45; transition:opacity .4s; cursor:pointer; }
.hiw2-step:last-of-type{ border-bottom:1px solid var(--ink-12); }
.hiw2-step.on{ opacity:1; }
.hiw2-step .t{ font-family:var(--mono); font-size:12px; color:var(--sleep-a); letter-spacing:.08em; }
.hiw2-step h4{ font-family:var(--serif); font-size:clamp(22px,2.4vw,30px); font-weight:400; margin:0; }
.hiw2-step p{ grid-column:2; font-size:13.5px; color:var(--ink-64); margin:5px 0 0; max-width:42ch; }
.hiw2-step .meta{ font-family:var(--mono); font-size:12px; color:var(--ink-44); white-space:nowrap; }
.hiw2-track{ height:2px; background:var(--ink-08); margin-top:18px; position:relative; }
.hiw2-track i{ position:absolute; left:0; top:0; height:100%; background:var(--solar); width:33.33%; transition:width .6s var(--e-expo); }

/* ============================================================
   WHY A STRIP — Abso first, stronger visual
   ============================================================ */
.compare-cell.win{ background:linear-gradient(180deg, rgba(53,70,160,.12), rgba(53,70,160,.05)); position:relative; }
.compare-row.head .compare-cell.win{ background:linear-gradient(135deg,var(--sleep-a),var(--sleep-b)); color:var(--cream); }
.compare-row.head .compare-cell.win .sub{ color:var(--cream-80); }
.compare-cell.win .v{ color:var(--sleep-a); font-weight:600; }
.compare-table{ box-shadow:0 30px 70px -40px rgba(30,39,112,.5); }
.compare-cell{ transition:background .3s; }
.compare-cell .row-label{ font-weight:500; }

/* ============================================================
   VIDEO TESTIMONIALS — play button + spacing
   ============================================================ */
.vtest-play{ position:absolute; inset:0; margin:auto; width:62px; height:62px;
  background:rgba(255,247,233,.94); color:var(--ink); font-size:20px; z-index:4;
  display:flex; align-items:center; justify-content:center; transition:transform .3s,opacity .3s; }
.vtest-play::before{ content:"▶"; margin-left:3px; }
.vtest-play:hover{ transform:scale(1.08); }
.vtest-card.playing .vtest-play{ opacity:0; pointer-events:none; }

/* ============================================================
   REVIEWS — larger, more spacing
   ============================================================ */
.reviews-wall{ margin-top:clamp(40px,7vh,90px); }
.wall-grid{ grid-template-columns:repeat(4,1fr); gap:16px; }
.wall-cell{ aspect-ratio:4/5; }
.wall-cell .meta{ font-size:13px; }
.wall-cell .meta span:last-child{ font-size:12px; line-height:1.35; color:var(--cream-80); display:block; margin-top:2px; }
@media (max-width:900px){ .wall-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   CREDIBILITY — visual upgrade
   ============================================================ */
.cred-fig{ position:relative; overflow:hidden; padding-top:26px; }
.cred-fig::before{ content:""; position:absolute; top:0; left:0; width:46px; height:3px; background:var(--sleep-a); }
.cred-fig:nth-child(2)::before{ background:var(--solar); }
.cred-fig:nth-child(3)::before{ background:var(--glow-a); }
.cred-fig:nth-child(4)::before{ background:var(--sleep-b); }
.cred-fig .v{ font-weight:500; }
.cred-verify span{ background:var(--cream-warm); padding:7px 12px; }

/* ============================================================
   100-DAY GUARANTEE — shout-out band
   ============================================================ */
.guar{ background:var(--ink); color:var(--cream); }
.guar-in{ display:flex; align-items:center; gap:clamp(24px,5vw,64px); padding:clamp(40px,6vh,72px) 0; flex-wrap:wrap; }
.guar-seal{ flex-shrink:0; width:clamp(120px,16vw,168px); aspect-ratio:1; border:1px solid var(--cream-22);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; }
.guar-seal .n{ font-family:var(--serif); font-size:clamp(48px,6vw,72px); line-height:.9; color:var(--cream); }
.guar-seal .u{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--solar); margin-top:6px; }
.guar-copy{ flex:1; min-width:260px; }
.guar-copy h3{ font-family:var(--serif); font-size:clamp(28px,3.4vw,46px); color:var(--cream); margin:0 0 10px; font-weight:400; }
.guar-copy p{ color:var(--cream-80); font-size:clamp(15px,1.4vw,18px); line-height:1.55; max-width:52ch; margin:0; }

/* ============================================================
   FINALE v2 — single strip motif, clean product row, Sleep highlighted
   ============================================================ */
.finale2{ position:relative; background:var(--ink); color:var(--cream); overflow:hidden; isolation:isolate;
  padding:clamp(80px,13vh,160px) var(--pad); }
.finale2-motif{ position:absolute; top:-12%; bottom:-12%; left:50%; transform:translateX(-50%); width:min(40vw,460px); z-index:0; }
.finale2-strip{ position:absolute; inset:0; background:linear-gradient(180deg,var(--sleep-a),var(--sleep-b) 40%,var(--sleep-c) 74%,var(--sleep-d));
  background-size:140% 140%; background-position:80% 20%; animation:hc-drift 16s ease-in-out infinite; opacity:.5; }
.finale2-vline{ position:absolute; top:0; bottom:0; width:1px; background:rgba(255,247,233,.16); z-index:1; }
.finale2-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(15,10,5,.55), rgba(15,10,5,.8)); }
.finale2-inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; text-align:center; }
.finale2-eye{ font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-80); }
.finale2 h2{ font-family:var(--serif); color:var(--cream); font-size:clamp(46px,8vw,116px); line-height:.92; margin:14px 0 10px; }
.finale2-sub{ color:var(--cream-80); max-width:46ch; margin:0 auto 40px; }
.finale2-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:760px; margin:0 auto; }
.finale2-card{ background:rgba(255,247,233,.05); border:1px solid var(--cream-22); padding:20px 16px;
  display:flex; flex-direction:column; align-items:center; gap:7px; transition:transform .4s var(--e-expo),background .4s; }
.finale2-card:hover{ transform:translateY(-5px); background:rgba(255,247,233,.1); }
.finale2-card.hero{ border-color:var(--cream); background:rgba(255,247,233,.12); }
.finale2-card .fn{ font-family:var(--serif); font-size:23px; color:var(--cream); }
.finale2-card .fp{ font-family:var(--mono); font-size:11px; color:var(--cream-80); }
.finale2-card .ftag{ font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:var(--cream); padding:3px 8px; min-height:16px; }
.finale2-card .ftag.ghost{ background:transparent; color:transparent; }
.finale2-card .btn{ width:100%; margin-top:6px; }
@media (max-width:820px){
  .finale2-cards{ grid-template-columns:1fr; max-width:380px; }
  .finale2-card{ flex-direction:row; justify-content:space-between; text-align:left; }
  .finale2-card .btn{ width:auto; margin-top:0; }
  .finale2-card .ftag{ display:none; }
  .hiw2-stage{ grid-template-columns:1fr; gap:28px; }
  .hiw2-panel{ max-width:360px; margin:0 auto; }
  .guar-in{ flex-direction:column; text-align:center; }
  .guar-copy p{ margin:0 auto; }
}

/* ---- PDP key-actives highlight ---- */
.actives{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:6px 0 24px; }
.active-card{ border:1px solid var(--ink-08); padding:18px 16px; background:var(--cream); }
.active-card .ad{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--solar); }
.active-card .an{ font-family:var(--serif); font-size:19px; margin:6px 0 7px; line-height:1.1; }
.active-card .ab{ font-size:12.5px; color:var(--ink-64); line-height:1.5; }
@media(max-width:760px){ .actives{ grid-template-columns:1fr; } }

/* ============================================================
   ROUND 4
   ============================================================ */

/* ---- Centered, prominent section headings (was left headline / right lead) ---- */
.section-head{ grid-template-columns:1fr !important; text-align:center; justify-items:center; gap:14px; max-width:820px; margin-left:auto; margin-right:auto; align-items:center; }
.section-head > div{ display:flex; flex-direction:column; align-items:center; }
.section-head .eye{ justify-content:center; }
.section-head h2{ font-size:clamp(40px,5.6vw,86px); line-height:.95; margin-top:8px; }
.section-head .lead{ max-width:58ch; margin:6px auto 0; color:var(--ink-64); }

/* ---- Shop: drop hover hint; emphasise pack size ---- */
.sc-hint{ display:none !important; }
.shop-card .sc-price .sub{ color:var(--ink-64); }

/* ============================================================
   WHY A STRIP v2 — scannable ✓ / ✗ matrix, Abso highlighted
   ============================================================ */
.cmp{ max-width:900px; margin:0 auto; border:1px solid var(--ink-08); }
.cmp-row{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; align-items:center; }
.cmp-row + .cmp-row{ border-top:1px solid var(--ink-08); }
.cmp-feat{ font-size:15px; color:var(--ink); padding:18px 20px; font-weight:450; }
.cmp-col{ text-align:center; padding:16px 8px; }
.cmp-win{ background:linear-gradient(180deg, rgba(223,109,9,.07), rgba(223,109,9,.03)); }
.cmp-head{ }
.cmp-head .cmp-col{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-44); padding:18px 8px; }
.cmp-head .cmp-win{ background:var(--solar); color:var(--cream); }
.cmp-head .cmp-win .cmp-brand{ font-family:var(--serif); font-size:20px; letter-spacing:0; text-transform:none; color:var(--cream); }
.cmp i{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; }
.cmp i.yes{ border-radius:50%; background:var(--solar); color:var(--cream); font-size:14px; }
.cmp i.yes::before{ content:"✓"; }
.cmp i.no{ color:var(--ink-22); font-size:18px; }
.cmp i.no::before{ content:"✕"; }
.cmp-foot{ font-family:var(--mono); font-size:11px; color:var(--ink-44); text-align:center; margin-top:16px; letter-spacing:.04em; }
@media(max-width:620px){ .cmp-feat{ font-size:13px; padding:14px 12px; } .cmp-head .cmp-win .cmp-brand{ font-size:16px; } }

/* ============================================================
   DOCK — floating, squared "island" near the bottom (not full width)
   ============================================================ */
.dock{ left:50% !important; right:auto !important; bottom:20px !important; top:auto; width:auto !important; max-width:calc(100% - 28px);
  transform:translateX(-50%) translateY(160%); border:1px solid var(--cream-22); border-radius:0 !important;
  padding:10px 12px; gap:14px; background:rgba(31,26,18,.94); box-shadow:0 24px 50px -18px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
.dock.show{ transform:translateX(-50%) translateY(0); }

/* ============================================================
   CREDIBILITY v2 — higher impact (oversized stats, sleep wash)
   ============================================================ */
.cred{ background:linear-gradient(180deg,var(--cream) 0%, var(--sleep-light) 100%); }
.cred-fig{ background:var(--cream); padding:26px 22px 24px; }
.cred-fig .v{ font-size:clamp(40px,4.6vw,62px); font-weight:500; letter-spacing:-.02em; }
.cred-fig .l{ font-size:13.5px; margin-top:10px; }
.cred-figure{ box-shadow:0 50px 90px -36px rgba(30,39,112,.5); }
.cred-figure .q{ font-size:clamp(19px,1.7vw,23px); }

/* ============================================================
   100-DAY GUARANTEE v2 — bold gradient band
   ============================================================ */
.guar{ background:linear-gradient(120deg,var(--sleep-deep,#1E2770),var(--sleep-a) 55%,var(--sleep-b)); color:var(--cream); position:relative; overflow:hidden; }
.guar-in{ position:relative; z-index:1; align-items:center; }
.guar-seal{ border:2px solid rgba(255,247,233,.5); background:rgba(255,247,233,.06); }
.guar-seal .n{ font-size:clamp(52px,7vw,88px); }
.guar-seal .u{ color:var(--cream); }
.guar-copy h3{ font-size:clamp(32px,4vw,58px); }
.guar-copy p{ color:var(--cream-80); }

/* ============================================================
   REVIEWS — horizontal carousel (1 row)
   ============================================================ */
.reviews-wall .wall-grid{ display:flex; grid-template-columns:none; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px 16px; scrollbar-width:none; }
.reviews-wall .wall-grid::-webkit-scrollbar{ display:none; }
.reviews-wall .wall-cell{ flex:0 0 clamp(240px,24vw,300px); aspect-ratio:4/5; scroll-snap-align:start; }
.reviews-nav{ display:flex; gap:10px; justify-content:center; margin-top:8px; }
.reviews-nav button{ width:44px; height:44px; border:1px solid var(--ink-12); color:var(--ink); font-size:16px; transition:.3s; }
.reviews-nav button:hover{ background:var(--ink); color:var(--cream); }

/* ============================================================
   HOW v2 — richer animated panel (membrane + particle flow + blood glow)
   ============================================================ */
.hiw2-strip{ top:13%; }
.hiw2[data-stage="0"] .hiw2-strip{ transform:scale(1); }
.hiw2[data-stage="1"] .hiw2-strip{ transform:scale(.9) translateY(-12%); filter:blur(1.2px) brightness(1.12); opacity:.7; }
.hiw2[data-stage="2"] .hiw2-strip{ transform:scale(.78) translateY(-22%); filter:saturate(1.15); opacity:.5; }
.hiw2-membrane{ position:absolute; left:12%; right:12%; top:50%; height:1px; background:rgba(255,247,233,.4); box-shadow:0 0 18px 2px rgba(189,184,220,.35); z-index:1; opacity:0; transition:opacity .8s; }
.hiw2-membrane::after{ content:"mucosa"; position:absolute; right:0; top:-15px; font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream-55); }
.hiw2[data-stage="1"] .hiw2-membrane,.hiw2[data-stage="2"] .hiw2-membrane{ opacity:1; }
.hiw2-flow{ position:absolute; left:0; right:0; top:34%; bottom:16%; z-index:1; opacity:0; transition:opacity .6s; }
.hiw2[data-stage="1"] .hiw2-flow,.hiw2[data-stage="2"] .hiw2-flow{ opacity:1; }
.hiw2-flow i{ position:absolute; top:0; width:7px; height:7px; border-radius:50%; background:var(--cream); box-shadow:0 0 9px 1px rgba(255,247,233,.7); animation:hiv-flow 2.8s cubic-bezier(.5,0,.5,1) infinite; opacity:0; }
.hiw2-flow i:nth-child(1){left:24%;animation-delay:0s}.hiw2-flow i:nth-child(2){left:38%;animation-delay:.5s}
.hiw2-flow i:nth-child(3){left:50%;animation-delay:1s}.hiw2-flow i:nth-child(4){left:62%;animation-delay:.3s}
.hiw2-flow i:nth-child(5){left:76%;animation-delay:1.4s}.hiw2-flow i:nth-child(6){left:44%;animation-delay:1.9s}
.hiw2-flow i:nth-child(7){left:58%;animation-delay:2.3s}.hiw2-flow i:nth-child(8){left:32%;animation-delay:1.6s}
.hiw2-blood{ position:absolute; left:0; right:0; bottom:0; height:24%; z-index:1; opacity:0; transition:opacity .9s;
  background:radial-gradient(130% 90% at 50% 135%, rgba(229,238,241,.32), transparent 70%); }
.hiw2[data-stage="2"] .hiw2-blood{ opacity:1; }
.hiw2-readout{ justify-content:flex-end; padding-bottom:7%; }

/* ============================================================
   CLOSE — clean product-led ending (replaces finale)
   ============================================================ */
.close{ background:linear-gradient(180deg,var(--cream) 0%, var(--sleep-light) 100%); }
.close-in{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; padding:clamp(64px,10vh,130px) 0; }
.close-copy .eye{ color:var(--ink-44); }
.close-copy h2{ font-family:var(--serif); font-size:clamp(48px,7vw,104px); line-height:.92; margin:14px 0 16px; }
.close-copy p{ font-size:clamp(16px,1.4vw,19px); color:var(--ink-64); line-height:1.55; max-width:44ch; margin:0 0 28px; }
.close-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.close-art{ position:relative; }
.close-art img{ width:100%; height:auto; display:block; filter:drop-shadow(0 50px 80px rgba(31,26,18,.22)); }
@media(max-width:820px){
  .close-in{ grid-template-columns:1fr; gap:30px; text-align:center; padding:64px 0; }
  .close-copy p{ margin-left:auto; margin-right:auto; }
  .close-cta{ justify-content:center; }
  .close-art{ order:-1; max-width:420px; margin:0 auto; }
}

/* ---- Explore (replaces stack): Lookbook / Grid / Alt-home ---- */
.explore-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.explore-card{ position:relative; aspect-ratio:4/3; display:flex; flex-direction:column; justify-content:flex-end; padding:26px; color:var(--cream); overflow:hidden; isolation:isolate; transition:transform .45s var(--e-expo); }
.explore-card::before{ content:""; position:absolute; inset:0; z-index:-1; transition:transform .6s var(--e-expo); }
.explore-card:hover{ transform:translateY(-6px); }
.explore-card:hover::before{ transform:scale(1.06); }
.explore-card.s-sleep::before{ background:linear-gradient(165deg,var(--sleep-b),var(--sleep-deep,#1E2770)); }
.explore-card.s-energy::before{ background:linear-gradient(165deg,var(--energy-b),var(--energy-deep,#7D0D0D)); }
.explore-card.s-glow::before{ background:linear-gradient(165deg,var(--glow-a),var(--glow-deep,#0A4F4E)); }
.explore-card .ek{ font-family:var(--serif); font-size:30px; line-height:1; }
.explore-card .et{ font-size:13.5px; color:var(--cream-80); margin-top:6px; max-width:24ch; }
.explore-card .ea{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--cream); margin-top:16px; }
@media(max-width:760px){ .explore-grid{ grid-template-columns:1fr; } .explore-card{ aspect-ratio:16/9; } }

/* ============================================================
   ROUND 5 — PDP: formulation explorer, SKU colour lean, band
   ============================================================ */

/* ---- PDP lean into the product colour (light sections only; brand base kept) ---- */
.pdp .eye .num{ color:var(--pa); }
.pdp .benefit h3 .solar,.pdp .feel-copy h2 .solar,.pdp .howto h2 .solar,.pdp .formula h2 .solar,.pdp .panel h2 .solar{ color:var(--pa); }
.pdp .benefit .n{ color:var(--pa); }
.pdp .feel-row .it{ color:var(--pa); }
.pdp .buy-trust .ico{ color:var(--pa); }
.pdp .gal-thumb.on{ outline:2px solid var(--pa); outline-offset:-2px; }
.pdp .crumb{ } 
.pdp .opt.on{ border-color:var(--pa) !important; box-shadow:inset 0 0 0 1px var(--pa); }

/* ---- PDP video band: bigger, fully full-bleed ---- */
.band{ width:100%; height:clamp(420px,66vh,720px); }
.band video{ width:100%; height:100%; object-fit:cover; }

/* ============================================================
   FORMULATION EXPLORER — "Inside the formula"
   ============================================================ */
.formula{ background:linear-gradient(180deg,var(--cream) 0%, var(--plight) 100%); }
.formula-row{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding:10px 2px 20px; scrollbar-width:none; }
.formula-row::-webkit-scrollbar{ display:none; }
.formula-card{ flex:0 0 clamp(238px,27vw,310px); scroll-snap-align:start; border:1px solid var(--ink-08); background:var(--cream);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .45s var(--e-expo), box-shadow .45s; }
.formula-card:hover{ transform:translateY(-7px); box-shadow:0 34px 64px -34px rgba(31,26,18,.4); }
.formula-card .fc-img{ aspect-ratio:4/3; overflow:hidden; position:relative; }
.formula-card .fc-img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--e-expo); }
.formula-card:hover .fc-img img{ transform:scale(1.07); }
.formula-card .fc-img .fc-dose{ position:absolute; top:12px; left:12px; font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  background:var(--pa); color:var(--cream); padding:4px 9px; }
.formula-card .fc-meta{ padding:18px 18px 22px; }
.formula-card .fc-name{ font-family:var(--serif); font-size:22px; line-height:1.05; }
.formula-card .fc-ben{ font-size:13px; color:var(--ink-64); line-height:1.5; margin-top:8px; }
.formula-panel{ max-width:780px; margin:34px auto 0; border-top:1px solid var(--ink-12); }
.formula-panel .fp-row{ display:grid; grid-template-columns:1fr auto 120px; gap:16px; align-items:baseline; padding:13px 2px; border-bottom:1px solid var(--ink-08); }
.formula-panel .fp-n{ font-size:15px; color:var(--ink); }
.formula-panel .fp-d{ font-family:var(--serif); font-size:18px; color:var(--pa); text-align:right; }
.formula-panel .fp-v{ font-family:var(--mono); font-size:10.5px; color:var(--ink-44); text-transform:uppercase; letter-spacing:.08em; text-align:right; }
.formula-note{ font-family:var(--mono); font-size:11px; color:var(--ink-44); text-align:center; max-width:70ch; margin:20px auto 0; line-height:1.7; }
@media(max-width:600px){ .formula-panel .fp-row{ grid-template-columns:1fr auto; } .formula-panel .fp-v{ display:none; } }

/* ============================================================
   ROUND 6
   ============================================================ */

/* ---- Dock: 4px rounded bar, sharp inner boxes ---- */
.dock{ border-radius:4px !important; }
.dock-quick button,.dock-bag,.dock-mark img{ border-radius:0 !important; }

/* ---- Formula: compound/vitamin cards (gradient + glyph) so the carousel holds ALL actives ---- */
.formula-card.compound .fc-img{ background:linear-gradient(150deg,var(--pa),var(--pb)); display:grid; place-items:center; }
.formula-card.compound .fc-glyph{ font-family:var(--serif); font-size:clamp(40px,5vw,58px); color:var(--cream); letter-spacing:-.02em; line-height:1; }
.formula-card.compound .fc-glyph sub{ font-size:.5em; }

/* ---- Footer: prominent lead-capture band ---- */
.footer-cta{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,4vw,56px); align-items:center;
  padding-bottom:clamp(36px,5vh,52px); margin-bottom:clamp(36px,5vh,52px); border-bottom:1px solid var(--cream-22); }
.footer-cta h3{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,3.6vw,50px); line-height:1.0; color:var(--cream); margin:0; }
.footer-cta .sub{ color:var(--cream-55); font-size:14.5px; margin:12px 0 0; max-width:42ch; }
.footer-cta-form{ display:flex; border:1px solid var(--cream-22); background:rgba(255,247,233,.04); }
.footer-cta-form input{ flex:1; min-width:0; background:transparent; border:0; padding:17px 18px; color:var(--cream); font-size:15px; }
.footer-cta-form input::placeholder{ color:var(--cream-55); }
.footer-cta-form input:focus{ outline:none; }
.footer-cta-form button{ background:var(--solar); color:var(--cream); border:0; padding:0 24px; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; transition:background .3s; }
.footer-cta-form button:hover{ background:var(--solar-soft); }
.footer-cta .fine{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--cream-55); margin-top:11px; }
@media(max-width:760px){ .footer-cta{ grid-template-columns:1fr; gap:18px; } }

/* ---- Explore moved below footer: dev/reference only ---- */
.explore-ref{ border-top:1px dashed var(--ink-12); margin-top:0; opacity:.96; }
.ref-banner{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-44);
  text-align:center; padding:10px; border:1px dashed var(--ink-12); margin-bottom:28px; background:var(--cream-warm); }

/* ---- Band: guarantee full viewport width (break out of any container) ---- */
.band{ width:100vw; max-width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }

/* ============================================================
   ROUND 7 — band: bulletproof full width (body-level, no 100vw
   scrollbar overflow) + taller so the video reads as full-bleed
   ============================================================ */
.band{ width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important;
  height:clamp(460px,80vh,880px) !important; }
.band video,.band img{ width:100% !important; height:100% !important; object-fit:cover; object-position:center; }

/* Hide vtest text overlay + buttons when video is playing */
.vtest-card .vtest-body,
.vtest-card .vtest-grad,
.vtest-card .vtest-play,
.vtest-card .vtest-add{ transition:opacity .25s ease; }
.vtest-card.is-playing .vtest-body,
.vtest-card.is-playing .vtest-grad,
.vtest-card.is-playing .vtest-play,
.vtest-card.is-playing .vtest-add{
  opacity:0;
  pointer-events:none;
}

/* Ensure video sits BELOW the ghost play button (poster can otherwise mask it on first paint) */
.vtest-card-clean{ isolation:isolate; }
.vtest-card-clean > video{ position:relative; z-index:0; }

/* 4 cards fit in row — no horizontal scroll needed */
.vtest-track{
  display:grid !important;
  grid-template-columns:repeat(4, 1fr) !important;
  gap:14px !important;
  overflow:visible !important;
}
.vtest-track .vtest-card{
  flex:none !important;
  width:auto !important;
  min-width:0;
}
/* Hide prev/next arrows since no scrolling needed */
.vtest-nav{ display:none !important; }

/* Mobile fallback — stack to 2 cols */
@media (max-width:720px){
  .vtest-track{ grid-template-columns:repeat(2, 1fr) !important; }
}

/* ============================================================
   SCIENCE/CRED SECTION — batch proof + accordion
   ============================================================ */

/* Latest batch — real data, real proof */
.cred-batch{
  margin:24px 0 18px;
  padding:14px 18px;
  background:rgba(28,22,15,.04);
  border:1px solid rgba(28,22,15,.1);
  border-left:3px solid var(--solar, #e8642a);
  border-radius:4px;
}
.cred-batch .cb-eye{
  display:block;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(28,22,15,.55);
  margin-bottom:8px;
}
.cred-batch .cb-row{
  display:flex; flex-wrap:wrap;
  align-items:baseline; gap:8px 18px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink);
}
.cred-batch .cb-row b{ font-weight:600; }
.cred-batch .cb-row i{ color:rgba(28,22,15,.55); font-style:normal; font-size:11px; }
.cred-batch .cb-link{
  margin-left:auto;
  color:var(--solar, #e8642a);
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
  white-space:nowrap;
}
.cred-batch .cb-link:hover{ opacity:.7; }

/* Accordion — let skeptics dig, let believers scroll past */
.cred-acc{
  margin:18px 0 16px;
  border-top:1px solid rgba(28,22,15,.12);
}
.cred-acc details{
  border-bottom:1px solid rgba(28,22,15,.12);
}
.cred-acc summary{
  list-style:none;
  cursor:pointer;
  padding:18px 0;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  font-family:var(--sans);
  font-size:15px; font-weight:500;
  color:var(--ink);
  transition:color .2s;
}
.cred-acc summary::-webkit-details-marker{ display:none; }
.cred-acc summary:hover{ color:var(--solar, #e8642a); }
.cred-acc .ca-plus{
  position:relative;
  width:14px; height:14px;
  flex-shrink:0;
}
.cred-acc .ca-plus::before,
.cred-acc .ca-plus::after{
  content:"";
  position:absolute;
  background:rgba(28,22,15,.6);
  transition:transform .25s;
}
.cred-acc .ca-plus::before{
  top:50%; left:0; right:0;
  height:1.5px; transform:translateY(-50%);
}
.cred-acc .ca-plus::after{
  left:50%; top:0; bottom:0;
  width:1.5px; transform:translateX(-50%);
}
.cred-acc details[open] .ca-plus::after{
  transform:translateX(-50%) rotate(90deg);
  opacity:0;
}
.cred-acc details[open] summary{ color:var(--solar, #e8642a); }
.cred-acc .ca-body{
  padding:0 0 20px;
  font-family:var(--sans);
  font-size:14px; line-height:1.55;
  color:rgba(28,22,15,.72);
  max-width:62ch;
}

/* Slimmer badge row — was competing with stat cards, now sits quietly under */
.cred-verify-slim{
  margin-top:14px;
  gap:8px !important;
}
.cred-verify-slim span{
  font-size:10px !important;
  padding:5px 9px !important;
  background:transparent !important;
  border:1px solid rgba(28,22,15,.18) !important;
  color:rgba(28,22,15,.6) !important;
}

/* ============================================================
   CRED — stats in orange + cert logos + science link
   ============================================================ */
/* Big number AND unit both orange */
.cred-fig .v,
.cred-fig .v .solar{ color:var(--solar) !important; }

/* Tighten the stat tiles — was feeling crowded */
.cred-figs{ gap:10px !important; margin-top:22px !important; }
.cred-fig{ padding:18px 18px 16px !important; padding-top:20px !important; border-radius:8px !important; }
.cred-fig::before{ width:32px !important; height:2px !important; }
.cred-fig .v{ font-size:clamp(26px, 3vw, 36px) !important; letter-spacing:-.01em !important; }
.cred-fig .l{ font-size:12px !important; margin-top:6px !important; line-height:1.45 !important; }

/* Certification logo row replacing the old badge pills */
.cred-certs{
  margin-top:28px;
  padding:18px 0 18px;
  border-top:1px solid rgba(28,22,15,.12);
  border-bottom:1px solid rgba(28,22,15,.12);
}
.cred-certs-eye{
  display:block;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(28,22,15,.55);
  margin-bottom:14px;
}
.cred-cert-row{
  display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.cred-cert{
  display:flex; align-items:center; gap:9px;
  color:rgba(28,22,15,.72);
}
.cred-cert .cm{
  width:38px; height:38px;
  border:1.5px solid rgba(28,22,15,.22);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-size:13px; font-weight:600;
  color:var(--ink);
  flex-shrink:0;
  background:rgba(255,247,233,.5);
}
.cred-cert .cm.sq{
  border-radius:4px;
  font-family:var(--mono);
  font-size:8.5px; font-weight:600;
  letter-spacing:.04em;
  line-height:1.05;
  padding:3px;
  text-align:center;
}
/* SVG cert seals — monochrome ink, sized to fit row */
.cred-cert .cm-svg{
  width:54px; height:54px;
  color:var(--ink);
  flex-shrink:0;
  display:block;
}
.cred-cert:has(.cm-svg){ gap:0; }
.cred-cert:has(.cm-svg) .cl{ display:none; }
.cred-certs .cred-cert-row{ gap:18px; }
/* Shrink lead text in cred section so it reads lighter */
.cred .lead{ font-size:14px !important; line-height:1.55 !important; max-width:46ch; }
.cred-cert .cl{ display:flex; flex-direction:column; line-height:1.15; }
.cred-cert .cl b{
  font-family:var(--sans);
  font-size:12px; font-weight:600;
  color:var(--ink);
}
.cred-cert .cl span{
  font-family:var(--mono);
  font-size:9.5px; letter-spacing:.04em;
  color:rgba(28,22,15,.55);
  margin-top:1px;
}

/* See-the-science link */
.cred-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:22px;
  font-family:var(--sans);
  font-size:14px; font-weight:500;
  color:var(--ink);
  border-bottom:1px solid var(--ink);
  padding-bottom:2px;
  text-decoration:none;
  transition:color .2s, border-color .2s;
}
.cred-link:hover{
  color:var(--solar);
  border-color:var(--solar);
}

@media (max-width:640px){
  .cred-cert-row{ gap:14px 18px; }
}
/* Ghost play button — minimal transparent circle with thin outline (overrides default .vtest-play) */
.vtest-card .vtest-play-ghost{
  position:absolute !important;
  inset:auto !important;
  top:50% !important;
  left:50% !important;
  margin:0 !important;
  transform:translate(-50%, -50%) !important;
  width:72px !important; height:72px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(255,255,255,.7) !important;
  background:rgba(255,255,255,.08) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:rgba(255,255,255,.95) !important;
  display:flex !important; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:5;
  opacity:1;
  transition:background .2s, transform .2s, opacity .25s;
}
/* Suppress the default ▶ character from .vtest-play::before */
.vtest-card .vtest-play-ghost::before{ content:none !important; }
.vtest-card .vtest-play-ghost:hover{
  background:rgba(255,255,255,.18) !important;
  transform:translate(-50%, -50%) scale(1.06) !important;
}
.vtest-card .vtest-play-ghost svg{
  width:28px; height:28px;
  margin-left:3px;
}
/* Hide when video plays */
.vtest-card.is-playing .vtest-play-ghost{
  opacity:0;
  pointer-events:none;
}

/* ============================================================
   REVIEWS — natural review-site cards (white pop off cream)
   ============================================================ */
.reviews-wall .rev-grid{
  display:flex; gap:16px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:14px 2px 18px;
  scrollbar-width:none;
  margin-top:clamp(24px,5vh,56px);
}
.reviews-wall .rev-grid::-webkit-scrollbar{ display:none; }

.reviews-wall .rev-card{
  flex:0 0 clamp(280px,28vw,340px);
  scroll-snap-align:start;
  position:relative;
  background:#fffdfa;
  border:1px solid rgba(28,22,15,.08);
  border-radius:8px;
  padding:20px 22px 18px;
  text-align:left;
  display:flex; flex-direction:column;
  min-height:280px;
  box-shadow:0 1px 2px rgba(28,22,15,.04), 0 2px 8px rgba(28,22,15,.03);
  transition:transform .2s ease, box-shadow .2s ease;
  cursor:pointer;
}
.reviews-wall .rev-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(28,22,15,.08), 0 2px 6px rgba(28,22,15,.04);
}

/* Top row — stars + date, like Trustpilot/Amazon */
.reviews-wall .rev-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.reviews-wall .rev-stars{
  font-size:15px;
  letter-spacing:1px;
  color:var(--solar, #e8642a);
  line-height:1;
}
.reviews-wall .rev-stars .rev-star-off{ color:rgba(28,22,15,.18); }
.reviews-wall .rev-date{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.06em;
  color:rgba(28,22,15,.45);
}

/* Review title — bold, short, like an Amazon review headline */
.reviews-wall .rev-title{
  font-family:var(--sans);
  font-size:15px; font-weight:600;
  color:var(--ink);
  margin:0 0 8px;
  line-height:1.3;
}

/* Body text — flowing customer voice */
.reviews-wall .rev-text{
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.55;
  color:rgba(28,22,15,.78);
  margin:0 0 18px;
  flex:1;
}

/* Footer row — avatar + name + verified + product */
.reviews-wall .rev-foot{
  display:flex; align-items:center; gap:10px;
  padding-top:14px;
  border-top:1px solid rgba(28,22,15,.08);
}
.reviews-wall .rev-avatar{
  width:36px; height:36px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  background:rgba(28,22,15,.08);
}
.reviews-wall .rev-who{
  display:flex; flex-direction:column; gap:1px;
  min-width:0;
}
.reviews-wall .rev-name{
  font-family:var(--sans);
  font-size:13px; font-weight:600;
  color:var(--ink);
  line-height:1.2;
  display:flex; align-items:center; gap:6px;
  flex-wrap:wrap;
}
.reviews-wall .rev-verified{
  font-family:var(--sans);
  font-size:10px; font-weight:500;
  color:#3a8f5e;
  background:rgba(58,143,94,.1);
  padding:2px 6px;
  border-radius:3px;
  letter-spacing:0;
}
.reviews-wall .rev-meta{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.06em;
  color:rgba(28,22,15,.5);
  text-transform:none;
}

/* Nav arrows — quieter on white-card section */
.reviews-wall .reviews-nav button{
  background:transparent;
  border:1px solid rgba(28,22,15,.2);
  color:var(--ink);
}
.reviews-wall .reviews-nav button:hover{
  background:var(--ink);
  color:var(--cream);
  border-color:var(--ink);
}

@media (max-width:640px){
  .reviews-wall .rev-card{ flex-basis:84vw; min-height:240px; }
}

/* ===== Mobile fixes (2026-06-15): hide video testimonials + useful sticky add-to-cart dock ===== */
@media (max-width: 620px) {
  /* Niclas: hide video testimonials on mobile */
  .vtest { display: none !important; }

  /* Redesign the bottom dock into a full-width, tappable quick-add bar */
  .dock {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    transform: translateY(220%) !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 16px !important;
  }
  .dock.show { transform: none !important; }
  .dock-mark { display: none !important; }            /* drop the logo on mobile, reclaim space */
  .dock-quick {
    display: flex !important;                          /* was hidden on mobile — bring it back */
    flex: 1 1 auto !important;
    gap: 6px !important;
  }
  .dock-quick button {
    flex: 1 1 0 !important;
    justify-content: center !important;
    min-height: 46px !important;
    padding: 6px 4px !important;
    font-size: 11.5px !important;
    color: var(--cream) !important;
    background: rgba(255, 247, 233, 0.08) !important;
    border-radius: 11px !important;
  }
  .dock-bag {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    padding: 0 16px !important;
    border-radius: 11px !important;
    white-space: nowrap !important;
  }
}

/* Guard against minor horizontal overflow (announce marquee / hero video) on small screens */
html, body { overflow-x: hidden; }

/* Shop-card visual is now a link to the PDP (Niclas: click anywhere on the product) */
a.sc-vis { display: block; }

/* Real Abso logo in the comparison-table winner header (was the word "Abso") */
.cmp-brand-logo { height: 19px; width: auto; display: inline-block; vertical-align: middle; }
@media (max-width: 600px){ .cmp-brand-logo { height: 14px; } }

/* M3 — on mobile, hide the "Build your kit" quiz and show the single-CTA close instead */
.mobile-close{ display:none; }
@media (max-width: 860px){
  .mobile-close{ display:block; }
  .stack{ display:none !important; }
}

/* MO pricing: struck RSP + Save% badge (ecommerce format) */
.sc-compare { text-decoration: line-through; opacity: .5; margin-left: 7px; font-weight: 400; }
.sc-save { display: inline-block; margin-left: 8px; background: var(--solar); color: var(--cream);
  font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 3px; vertical-align: middle; }
.pdp-save { display: inline-block; margin-top: 10px; background: var(--solar); color: var(--cream);
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 3px; }

/* ===== Reviews as a dark band (2026-06-15): moved up into the old video-testimonials slot, MBG follows ===== */
.reviews-wall.reviews-dark{
  background:var(--ink);
  color:var(--cream);
  padding:clamp(64px,9vh,120px) 0;
  margin-top:0;
}
.reviews-wall.reviews-dark .wrap{ position:relative; }
.reviews-wall.reviews-dark .eye{ color:var(--cream-55); }
.reviews-wall.reviews-dark .section-head h2{ color:var(--cream); }
.reviews-wall.reviews-dark .section-head .lead{ color:var(--cream-80); }
.reviews-wall.reviews-dark .rev-grid{ margin-top:clamp(20px,4vh,44px); }
/* nav arrows readable on the dark ground */
.reviews-wall.reviews-dark .reviews-nav button{
  background:transparent;
  border:1px solid var(--cream-22);
  color:var(--cream);
}
.reviews-wall.reviews-dark .reviews-nav button:hover{
  background:var(--cream);
  color:var(--ink);
  border-color:var(--cream);
}
/* larger customer photos in the review cards (Niclas: make them a bit bigger) */
.reviews-wall .rev-avatar{
  width:54px; height:54px;
  border:2px solid rgba(28,22,15,.06);
}
.reviews-wall .rev-foot{ gap:13px; padding-top:16px; }

/* ===== PDP feel-section contrast (2026-06-15) =====
   The feel-section sits on the deep SKU ground (--sleep/energy/glow-deep). The
   round-5 rules coloured the h2 accent + italic ladder text with --pa, which is
   a DARK tone — dark-on-dark, poor contrast (Niclas flagged the blue text).
   Brighten both to the light tint (--plight) per SKU for a clean, legible read. */
/* Per-SKU light-but-coloured accent on the deep ground — readable AND clearly on-brand
   (drawn from each SKU's own gradient family). --plight read almost white (Niclas). */
[data-pdp=sleep] .feel-copy h2 .solar, [data-pdp=sleep] .feel-row .it{ color:#B9B4E4; }
[data-pdp=energy] .feel-copy h2 .solar, [data-pdp=energy] .feel-row .it{ color:#ECCB6A; }
[data-pdp=glow] .feel-copy h2 .solar, [data-pdp=glow] .feel-row .it{ color:#6FCDC4; }
.pdp .feel-copy .feel-lead{ color:var(--cream-80); }

/* ============================================================
   BRAND PASS 2026-07-03 — visual direction v1 alignment
   Signature 02: Grid & Sharp Corners — zero radius on every
   surface, frame and tile (circles like dots/seal stay circles).
   ============================================================ */
.shop-card, .sc-badge, .stack-q, .q-opt, .stack-result, .stack-result .pick, .stack-result .pick .sw,
.heroL-motif, .heroL-visual .hv-photo, .inday-card, .how-media, .atlas-filter .af, .atlas-cell,
.bento-cell, .feel-image, .range-grid, .vch-rec, .tag, .format-media, .sku-visual, .lab-layer,
.lab-layer .sw, .compare-table, .doctor-photo, .wall-cell, .footer-news input, .footer-news button,
.cart-item .ci-pack, .cart-item .ci-qty button, .drawer-cta, .abars .abar .track, .pdf-track,
.gal-main, .gal-thumbs, .gal-thumb, .opt, .opt .badge, .qty, .btn-add, .panel-media, .howto-media,
.review, .xcard, .sci-visual, .demo-strip, .demo-strip::after, .cursor-label,
.hiv-stage, .hiw-stats, .cred-fig, .cred-figure, .finale-card, .finale-card .fc-badge,
.cred-cert .cm.sq, .dock, .dock-quick button, .dock-bag, .sc-save, .pdp-save, .btn{
  border-radius:0 !important;
}
@media (max-width:860px){
  .dock, .dock-quick button, .dock-bag{ border-radius:0 !important; }
}

/* R1 — larger, square review imagery (sharp corners per brand) */
.reviews-wall .rev-avatar{
  width:72px; height:72px;
  border-radius:0;
  border:1px solid rgba(255,247,233,.14);
}

/* H2 — feel-ladder times slightly bigger */
.feel-row .t{ font-size:13.5px; }

/* Shop cards — deal-forward price display (S1) */
.sc-price .sc-rsp{ font-size:.7em; font-weight:400; opacity:.5; margin-left:4px; }
.xp .xp-rsp{ font-size:.78em; font-weight:400; opacity:.5; margin-left:4px; }

/* Absorption asterisk footnote (compliance: define the 90% once per page) */
.cmp-foot .asterisk-note{ display:block; font-family:var(--mono); font-size:11px; opacity:.6; margin-top:8px; letter-spacing:.02em; }

/* M2 — mobile shop cards: pack centered; strip swap only while pressed,
   reverts on release (hover swap sticks after tap on touch screens) */
@media (hover:none){
  .shop-card:hover .sc-vis .sc-pack{ opacity:1; transform:none; }
  .shop-card:hover .sc-vis .sc-open{ opacity:0; }
  .shop-card:active .sc-vis .sc-pack{ opacity:0; }
  .shop-card:active .sc-vis .sc-open{ opacity:1; transform:translateY(-4px) scale(1.04); }
  .sc-hint{ display:none; }
}
@media (max-width:860px){
  .shop-card .sc-vis{ padding:8%; place-items:center; }
}

/* Cert marks reused on the PDP supplement-facts panel + science page (PD17) */
.fp-certs{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(31,26,18,.1); }
.fp-certs .cred-cert-row{ display:flex; flex-wrap:wrap; gap:14px 16px; }
.fp-certs .cm-svg, .sci-certs .cm-svg{ width:56px; height:56px; color:var(--ink); display:block; }
.sci-certs .cred-cert-row{ display:flex; flex-wrap:wrap; gap:16px 20px; }
.fp-certs .cred-cert, .sci-certs .cred-cert{ opacity:.85; }

/* Drift closer slide in the PDP gallery — real 16s Drift render, lazy mp4 */
.gal-drift{ position:absolute; inset:0; z-index:2; opacity:0; pointer-events:none; transition:opacity .4s var(--e-expo, ease); }
.gal-drift.show{ opacity:1; }
.gal-drift video{ width:100%; height:100%; object-fit:cover; display:block; }
.gal-thumb-drift img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ============================================================
   LARGE-FORMAT SCREENS (added 2026-07-21)
   The base container caps at --maxw:1320px, so past ~1440px the
   layout only gains side margin (39% dead cream at 1920px). Step
   the container up on wide displays. Text blocks keep their own
   ch-based max-widths, so only grids/hero/nav actually widen —
   line length stays readable. Nothing below 1600px changes.
   ============================================================ */
@media (min-width:1600px){
  :root{ --maxw:1480px; }
  .shop-grid{ gap:22px; }
}
@media (min-width:1920px){
  :root{ --maxw:1640px; }
  .shop-grid{ gap:26px; }
}
@media (min-width:2560px){
  :root{ --maxw:1840px; }
  .shop-grid{ gap:30px; }
}