/* ==========================================================================
   Welavie — design system
   Plus Jakarta Sans + Inter · per-product theming · light/dark band rhythm
   ========================================================================== */

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}
img,svg,video{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

/* ---------- global tokens ---------- */
:root{
  --ink:#12171C; --ink-2:#3D4852; --muted:#66727E; --line:#E7EAEE;
  --paper:#FFFFFF; --paper-2:#F7F8FA;
  --r-xs:10px; --r-sm:14px; --r:20px; --r-lg:26px; --r-xl:34px; --r-pill:999px;
  --sh-1:0 2px 8px -3px rgba(14,22,30,.10), 0 12px 28px -18px rgba(14,22,30,.22);
  --sh-2:0 6px 18px -8px rgba(14,22,30,.14), 0 28px 60px -34px rgba(14,22,30,.30);
  --sh-3:0 40px 90px -50px rgba(6,12,18,.55);
  --sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Plus Jakarta Sans',var(--sans);
  --pad:clamp(20px,5vw,40px);
  --maxw:1140px;
  --sec-y:clamp(52px,6.6vw,96px);
}

/* ---------- product themes ---------- */
body{
  --b900:#0C1F1B; --b800:#12332C; --b700:#17463B; --b600:#1C6151; --b400:#2FA184;
  --accent:#F2A33C; --accent-ink:#26170A; --accent-2:#37C98F;
  --cream:#FBF6EE; --tint:#F2F7F5;
  --w1:#FFF1DE; --w2:#E7F6EF; --w3:#E7F0FE; --w4:#F4EBFE;
  --glow:rgba(47,161,132,.42);
}
body.t-yusleep{
  --b900:#08081C; --b800:#12123A; --b700:#1D1B55; --b600:#2C2878; --b400:#6E63D4;
  --accent:#F3C24C; --accent-ink:#2A1D02; --accent-2:#9C8BFF;
  --cream:#F7F5FC; --tint:#F1F0FA;
  --w1:#EDEAFB; --w2:#FBF2DE; --w3:#E9F1FC; --w4:#F6ECFA;
  --glow:rgba(140,124,255,.45);
}
body.t-prostavive{
  --b900:#032A21; --b800:#064A3A; --b700:#075C48; --b600:#0B7A5F; --b400:#17B189;
  --accent:#F5A524; --accent-ink:#2A1802; --accent-2:#34C759;
  --cream:#FDF6EA; --tint:#F0F7F4;
  --w1:#FFF0D9; --w2:#E6F6EE; --w3:#EAF1FD; --w4:#F3ECFD;
  --glow:rgba(23,177,137,.42);
}
body.t-visiflora{
  --b900:#150A30; --b800:#261356; --b700:#341C77; --b600:#4A2CAB; --b400:#7C5CFF;
  --accent:#14C6B4; --accent-ink:#032723; --accent-2:#FFB020;
  --cream:#F6F3FF; --tint:#F1EEFC;
  --w1:#EFE9FF; --w2:#DFF6F3; --w3:#FFF0DC; --w4:#EAF0FE;
  --glow:rgba(124,92,255,.45);
}
body.t-javaburn{
  --b900:#140A05; --b800:#26120A; --b700:#3C1D0D; --b600:#6A3115; --b400:#C0602A;
  --accent:#F0532B; --accent-ink:#2B0B03; --accent-2:#FFB020;
  --cream:#FBF2E8; --tint:#F7EFE7;
  --w1:#FCE9DC; --w2:#FFF2D9; --w3:#F3E6DC; --w4:#FBE3DB;
  --glow:rgba(240,83,43,.40);
}
body.t-prodentim{
  --b900:#032C26; --b800:#074E43; --b700:#0A6153; --b600:#0E7C66; --b400:#2FBFA0;
  --accent:#F0466B; --accent-ink:#2C0611; --accent-2:#FFC24B;
  --cream:#F1FAF6; --tint:#EDF7F3;
  --w1:#FFE7EC; --w2:#E2F7F0; --w3:#FFF3DC; --w4:#EAF2FE;
  --glow:rgba(47,191,160,.42);
}

/* ---------- base ---------- */
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  font-size:16px; line-height:1.75; letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{max-width:1280px}
.sec{padding-block:var(--sec-y);position:relative}

h1,h2,h3,h4,.display{font-family:var(--display);font-weight:800;letter-spacing:-.025em;line-height:1.04;color:var(--ink)}
h1,.h1{font-size:clamp(2.45rem,5.2vw,4rem)}
h2,.h2{font-size:clamp(2.05rem,4.2vw,3.6rem);line-height:1.04}
h3,.h3{font-size:clamp(1.12rem,1.5vw,1.32rem);line-height:1.24;letter-spacing:-.02em}
h4,.h4{font-size:1.03rem;font-weight:800;letter-spacing:-.018em;line-height:1.3}
.lead{font-size:clamp(.98rem,1.1vw,1.08rem);color:var(--ink-2);line-height:1.72;max-width:60ch}
.sub{color:var(--muted);font-size:.9rem;line-height:1.68}
.fine{font-size:.79rem;color:var(--muted);line-height:1.55}
.center{text-align:center}
.center .lead{margin-inline:auto}
.mw-sm{max-width:640px} .mw-md{max-width:760px} .mw-lg{max-width:880px}
.center.mw-sm,.center.mw-md,.center.mw-lg{margin-inline:auto}

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--display);font-weight:800;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:.9rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;border-radius:2px;flex:none}
.center .eyebrow{justify-content:center}

/* highlighted phrase inside a headline */
.hl{color:var(--accent)}
.hl-underline{position:relative;display:inline-block;color:var(--accent)}
.hl-underline::after{
  content:"";position:absolute;left:1%;right:-1%;bottom:-.22em;height:.20em;
  background:currentColor;opacity:.92;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 10C40 4 92 2 132 5c22 1.6 41 4 66 7' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 10C40 4 92 2 132 5c22 1.6 41 4 66 7' fill='none' stroke='%23000' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* ---------- bands ---------- */
.band--white{background:var(--paper)}
.band--tint{background:linear-gradient(180deg,var(--tint) 0%,#fff 100%)}
.band--cream{background:var(--cream)}
.band--soft{background:
  radial-gradient(900px 460px at 12% 0%, var(--w1) 0%, transparent 62%),
  radial-gradient(900px 520px at 92% 30%, var(--w2) 0%, transparent 60%),
  linear-gradient(180deg,#fff 0%, var(--tint) 100%);}
.band--dark{
  background:
    radial-gradient(1100px 620px at 82% 8%, color-mix(in srgb,var(--b400) 30%, transparent) 0%, transparent 62%),
    radial-gradient(760px 520px at 6% 92%, color-mix(in srgb,var(--b600) 45%, transparent) 0%, transparent 60%),
    linear-gradient(158deg,var(--b800) 0%, var(--b900) 78%);
  color:#EAF0F2;
}
.band--dark h1,.band--dark h2,.band--dark h3,.band--dark h4{color:#fff}
.band--dark .lead{color:rgba(233,240,242,.80)}
.band--dark .sub{color:rgba(233,240,242,.62)}
.band--dark .fine{color:rgba(233,240,242,.48)}
.band--ink{background:linear-gradient(160deg,#15181D 0%,#080A0D 100%);color:#E9EDF0}
.band--ink h1,.band--ink h2,.band--ink h3,.band--ink h4{color:#fff}
.band--ink .lead{color:rgba(233,240,242,.80)}
.band--ink .sub{color:rgba(233,240,242,.62)}
.band--ink .fine{color:rgba(233,240,242,.48)}
.band--ink .hero-meta{border-top-color:rgba(255,255,255,.14)}
.band--ink .card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.11);box-shadow:none}
.band--ink .card p{color:rgba(233,240,242,.72)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--display);font-weight:800;font-size:.97rem;letter-spacing:-.012em;
  padding:.92em 1.6em;border-radius:var(--r-pill);border:1.5px solid transparent;
  cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .22s,background .18s,color .18s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 26px -12px color-mix(in srgb,var(--accent) 80%, transparent)}
.btn-primary:hover{box-shadow:0 16px 34px -12px color-mix(in srgb,var(--accent) 85%, transparent)}
.btn-dark{background:var(--b800);color:#fff}
.btn-ghost{background:transparent;border-color:rgba(18,23,28,.16);color:var(--ink)}
.btn-ghost:hover{border-color:rgba(18,23,28,.34);background:rgba(18,23,28,.03)}
.band--dark .btn-ghost,.band--ink .btn-ghost,.hero--fullbleed .btn-ghost{border-color:rgba(255,255,255,.34);color:#fff}
.band--dark .btn-ghost:hover,.band--ink .btn-ghost:hover,.hero--fullbleed .btn-ghost:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.6)}
.btn-lg{font-size:1.06rem;padding:1.05em 1.9em}
.btn .ar{width:1.5em;height:1.5em;border-radius:50%;background:rgba(255,255,255,.28);display:grid;place-items:center;font-size:.72em}
.btn-primary .ar{background:rgba(0,0,0,.14)}

/* ---------- chips / pills ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.5em;
  font-size:.78rem;font-weight:700;letter-spacing:-.005em;
  padding:.42em .85em;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--line);color:var(--ink-2);
}
.chip-tint{background:color-mix(in srgb,var(--b400) 12%, #fff);border-color:color-mix(in srgb,var(--b400) 22%, #fff);color:var(--b700)}
.chip-accent{background:color-mix(in srgb,var(--accent) 16%, #fff);border-color:color-mix(in srgb,var(--accent) 30%, #fff);color:color-mix(in srgb,var(--accent) 62%, #000)}
.band--dark .chip,.band--ink .chip{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.88);backdrop-filter:blur(6px)}
.chips{display:flex;flex-wrap:wrap;gap:.55rem}

.tick{display:flex;align-items:flex-start;gap:.7em;line-height:1.5}
.tick .dot{flex:none;width:1.42em;height:1.42em;border-radius:50%;display:grid;place-items:center;margin-top:.06em;
  background:color-mix(in srgb,var(--accent-2) 20%, #fff);color:color-mix(in srgb,var(--accent-2) 70%, #000);font-size:.74em;font-weight:900}
.band--dark .tick .dot{background:color-mix(in srgb,var(--accent-2) 30%, transparent);color:#fff}
.ticks{display:grid;gap:.85rem}

/* ---------- top ticker ---------- */
.topbar{position:sticky;top:0;z-index:60}
.ticker{background:var(--b900);color:rgba(255,255,255,.82);font-size:.74rem;overflow:hidden;position:relative;
  border-bottom:1px solid rgba(255,255,255,.07)}
.ticker-track{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker-track span{display:inline-flex;align-items:center;gap:.55em;padding:.62em 1.4em;white-space:nowrap}
.ticker-track span i{font-style:normal;font-size:.95em;line-height:1}
@keyframes tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------- nav ---------- */
.nav{position:relative;z-index:50;background:color-mix(in srgb,var(--b900) 92%, transparent);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{display:flex;align-items:center;gap:1.4rem;height:62px}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:800;font-size:1.16rem;color:#fff;letter-spacing:-.03em}
.brand .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(140deg,var(--accent),var(--accent-2));display:grid;place-items:center;color:var(--accent-ink);font-size:.95rem;font-weight:900}
.nav-links{display:flex;align-items:center;gap:.1rem;margin-left:auto;flex-wrap:nowrap}
.nav-links a{padding:.5em .72em;border-radius:var(--r-pill);color:rgba(255,255,255,.76);font-size:.86rem;font-weight:600;transition:.16s;white-space:nowrap;display:inline-flex;align-items:center}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.09)}
.nav-cta{display:flex;align-items:center;gap:.9rem;margin-left:.6rem}
.nav-note{text-align:right;line-height:1.15;font-size:.68rem;color:rgba(255,255,255,.6)}
.nav-note b{display:block;font-family:var(--display);font-size:.84rem;color:var(--accent);letter-spacing:-.02em}
.nav .btn{padding:.66em 1.15em;font-size:.87rem}
.drop{position:relative}
.drop>a .chev{margin-left:.3em;opacity:.75;transition:transform .2s}
.drop:hover>a .chev{transform:rotate(180deg)}
.drop-menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:#fff;border-radius:var(--r);box-shadow:var(--sh-2);padding:.5rem;min-width:250px;
  opacity:0;visibility:hidden;transition:.2s;border:1px solid var(--line)}
.drop:hover .drop-menu,.drop:focus-within .drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-menu a{display:flex;align-items:center;gap:.7rem;color:var(--ink);padding:.6rem .7rem;border-radius:var(--r-xs);font-size:.9rem;font-weight:700}
.drop-menu a:hover{background:var(--paper-2);color:var(--ink)}
.drop-menu .sw{width:9px;height:9px;border-radius:3px;flex:none}
.drop-menu small{display:block;font-weight:500;color:var(--muted);font-size:.76rem;letter-spacing:0}
.burger{display:none;margin-left:auto;background:none;border:0;color:#fff;font-size:1.5rem;padding:.2em .4em;cursor:pointer}

/* ---------- hero shared ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(52px,7vw,96px) clamp(60px,8vw,110px)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,56px);align-items:center}
.hero h1{margin-bottom:1.1rem}
.hero .lead{margin-bottom:1.6rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.3rem;margin-top:1.7rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.14)}
.hero-meta .m{display:flex;align-items:center;gap:.5em;font-size:.83rem;color:rgba(255,255,255,.78)}
.hero-meta .m i{font-style:normal;font-size:1.05em}
.band--white .hero-meta,.band--cream .hero-meta,.band--soft .hero-meta{border-top-color:var(--line)}
.band--white .hero-meta .m,.band--cream .hero-meta .m,.band--soft .hero-meta .m{color:var(--ink-2)}
.hero-stage{position:relative;display:grid;place-items:center;min-height:280px}
.hero-stage::before{content:"";position:absolute;inset:-8% -6%;border-radius:50%;
  background:radial-gradient(closest-side,var(--glow),transparent 72%);filter:blur(14px)}
.hero-stage img{position:relative;filter:drop-shadow(0 40px 60px rgba(0,0,0,.42))}
.hero-botanical{position:absolute;inset:0;opacity:.20;pointer-events:none;
  background-image:radial-gradient(circle at 20% 30%, rgba(255,255,255,.5) 0 1.5px, transparent 2px),
                   radial-gradient(circle at 70% 60%, rgba(255,255,255,.35) 0 1.5px, transparent 2px);
  background-size:190px 190px,150px 150px}

/* hero variant: photo-led (Yu Sleep) */
.hero--photo .hero-grid{grid-template-columns:.98fr 1.02fr}
.photo-card{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3)}
.photo-card img{width:100%;display:block}
.photo-card .cap{position:absolute;left:14px;right:14px;bottom:14px;background:rgba(10,12,16,.72);backdrop-filter:blur(10px);
  color:#fff;border-radius:var(--r);padding:.85rem 1.05rem;display:flex;align-items:center;gap:.8rem}
.photo-card .cap b{font-family:var(--display);font-size:.95rem;display:block;letter-spacing:-.02em}
.photo-card .cap span{font-size:.78rem;color:rgba(255,255,255,.7)}
.photo-card .tag{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.94);color:var(--ink);
  border-radius:var(--r-pill);padding:.42em .9em;font-size:.76rem;font-weight:800;display:inline-flex;gap:.45em;align-items:center}
.photo-card .float-prod{position:absolute;right:-16px;bottom:-26px;width:min(30%,166px);height:auto;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.55));z-index:3}
.photo-card .tag{z-index:4}
.photo-card:has(.float-prod) .cap{right:32%}
.hero--photo .photo-card>img:not(.float-prod){aspect-ratio:1/1;object-fit:cover;object-position:50% 45%}

/* hero variant: full-bleed photo (Java Burn) */
.hero--fullbleed{color:#fff}
.hero--fullbleed .bg{position:absolute;inset:0;z-index:0}
.hero--fullbleed .bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero--fullbleed .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg, rgba(16,8,4,.93) 0%, rgba(16,8,4,.72) 46%, rgba(16,8,4,.22) 100%)}
.hero--fullbleed .wrap{position:relative;z-index:1}
.hero--fullbleed h1,.hero--fullbleed h2{color:#fff}
.hero--fullbleed .lead{color:rgba(255,255,255,.82)}

/* hero variant: system (VisiFlora) */
.hero--system .hero-grid{grid-template-columns:1.1fr .9fr}
.sys-ring{position:relative;display:grid;place-items:center;aspect-ratio:1/1;max-width:520px;margin-inline:auto}
.sys-ring .core{position:relative;z-index:2;width:min(52%,240px);filter:drop-shadow(0 30px 44px rgba(0,0,0,.5))}
.sys-ring .orb{position:absolute;width:74px;height:74px;border-radius:50%;overflow:hidden;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.6), 0 0 0 4px rgba(255,255,255,.10)}
.sys-ring .orb img{width:100%;height:100%;object-fit:cover}
.sys-ring .orb:nth-child(2){top:6%;left:8%}
.sys-ring .orb:nth-child(3){top:14%;right:4%}
.sys-ring .orb:nth-child(4){bottom:10%;left:2%}
.sys-ring .orb:nth-child(5){bottom:4%;right:12%}
.sys-ring::before{content:"";position:absolute;inset:14%;border-radius:50%;border:1px dashed rgba(255,255,255,.16)}

/* ---------- trust strip ---------- */
.trust{background:linear-gradient(90deg,var(--b900),var(--b800) 50%,var(--b900));
  border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);overflow:hidden}
.trust-track{display:flex;width:max-content;animation:tick 34s linear infinite;align-items:center}
.trust-track .t{display:inline-flex;align-items:center;gap:.7em;padding:1.05em 2.1em;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.80)}
.trust-track .t i{font-style:normal;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.10);font-size:.95rem}
@media (prefers-reduced-motion:reduce){.trust-track{animation:none}}

/* ---------- cards ---------- */
.grid{display:grid;gap:clamp(14px,1.6vw,22px)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.2vw,28px);box-shadow:var(--sh-1)}
.band--dark .card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.11);box-shadow:none;backdrop-filter:blur(8px)}
.card h3,.card h4{margin-bottom:.5rem}
.card p{color:var(--ink-2);font-size:.9rem;line-height:1.68}
.band--dark .card p{color:rgba(233,240,242,.72)}
.icon-tile{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.15rem;margin-bottom:1rem;
  background:color-mix(in srgb,var(--b400) 14%, #fff);color:var(--b700)}
.icon-tile.warm{background:color-mix(in srgb,var(--accent) 18%, #fff);color:color-mix(in srgb,var(--accent) 66%, #000)}
.band--dark .icon-tile{background:rgba(255,255,255,.11);color:#fff}

.card-dark{background:linear-gradient(150deg,#1B1F26 0%,#0A0D11 100%);color:#EDF1F4;border:0;border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,32px);position:relative;overflow:hidden;box-shadow:var(--sh-2)}
.card-dark::after{content:"";position:absolute;width:280px;height:280px;right:-90px;top:-90px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%, transparent),transparent)}
.card-dark h3,.card-dark h4{color:#fff;position:relative}
.card-dark p{color:rgba(237,241,244,.76);position:relative}

/* ---------- media split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,3.6vw,60px);align-items:center}
.split.rev>*:first-child{order:2}

/* ---------- ingredient displays (one per product) ---------- */
/* A · gradient-wash card (default / Yu Sleep / ProDentim) */
.ing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.ing{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);
  display:flex;flex-direction:column;transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s}
.ing:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.ing .pic{height:168px;display:grid;place-items:center;padding:16px;position:relative}
.ing .pic img{max-height:128px;width:auto;object-fit:contain;filter:drop-shadow(0 12px 20px rgba(12,18,24,.16))}
.ing:nth-child(6n+1) .pic{background:linear-gradient(160deg,var(--w1),#fff)}
.ing:nth-child(6n+2) .pic{background:linear-gradient(160deg,var(--w2),#fff)}
.ing:nth-child(6n+3) .pic{background:linear-gradient(160deg,var(--w3),#fff)}
.ing:nth-child(6n+4) .pic{background:linear-gradient(160deg,var(--w4),#fff)}
.ing:nth-child(6n+5) .pic{background:linear-gradient(160deg,var(--w2),#fff)}
.ing:nth-child(6n+6) .pic{background:linear-gradient(160deg,var(--w1),#fff)}
.ing .body{padding:0 clamp(16px,1.6vw,20px) clamp(18px,1.8vw,22px)}
.ing .tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.04em;padding:.3em .7em;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--b400) 14%,#fff);color:var(--b700);margin-bottom:.6rem}
.ing h4{margin-bottom:.35rem}
.ing p{font-size:.86rem;color:var(--muted);line-height:1.55}

/* B · hexagon lattice (ProstaVive) */
.hex-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.5vw,20px)}
.hex{text-align:center}
.hex .pic{position:relative;padding:6px;margin-bottom:.9rem}
.hex .pic::before{content:"";position:absolute;inset:12%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 26%,transparent),transparent 72%);filter:blur(10px)}
.hex .pic img{position:relative;margin-inline:auto;filter:drop-shadow(0 16px 26px rgba(4,30,24,.30))}
.hex h4{font-size:.98rem;margin-bottom:.3rem}
.hex .tag{font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.35rem}
.hex p{font-size:.83rem;line-height:1.5}
.band--dark .hex p{color:rgba(233,240,242,.66)}

/* C · medallion columns (VisiFlora) */
.sys-col{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,2.2vw,26px);box-shadow:var(--sh-1)}
.sys-col>header{display:flex;align-items:center;gap:.8rem;padding-bottom:1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line)}
.sys-col>header .n{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;font-family:var(--display);
  font-weight:900;font-size:.9rem;background:color-mix(in srgb,var(--b400) 16%,#fff);color:var(--b700)}
.sys-col>header h3{font-size:1.02rem}
.med{display:flex;gap:.95rem;align-items:flex-start;padding:.62rem 0}
.med .m{width:60px;height:60px;flex:none;border-radius:50%;overflow:hidden;
  box-shadow:0 8px 18px -8px rgba(12,18,24,.35), 0 0 0 3px #fff, 0 0 0 4px var(--line)}
.med .m img{width:100%;height:100%;object-fit:cover}
.med b{display:block;font-family:var(--display);font-size:.92rem;letter-spacing:-.02em;margin-bottom:.14rem}
.med span{font-size:.83rem;color:var(--muted);line-height:1.5;display:block}

/* D · strain petri (ProDentim) */
.strain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.strain{text-align:center}
.strain .m{width:min(170px,62%);margin:0 auto 1.1rem;border-radius:50%;position:relative;padding:7px;
  background:conic-gradient(from 210deg,var(--b400),var(--accent-2),var(--b400));box-shadow:0 18px 36px -18px rgba(4,44,38,.55)}
.strain .m img{border-radius:50%;background:#fff}
.strain h4{margin-bottom:.4rem}
.strain ul{display:grid;gap:.4rem;margin-top:.6rem}
.strain li{font-size:.85rem;color:var(--muted);line-height:1.5}
.band--dark .strain li{color:rgba(233,240,242,.68)}

/* E · ritual steps (Java Burn) */
.steps{display:grid;gap:.85rem}
.step{display:flex;align-items:flex-start;gap:1.05rem;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:1.05rem 1.25rem;box-shadow:var(--sh-1)}
.band--dark .step{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none}
.step .n{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--display);
  font-weight:900;font-size:.95rem;background:var(--accent);color:var(--accent-ink)}
.step b{display:block;font-family:var(--display);font-size:1rem;letter-spacing:-.02em;margin-bottom:.15rem}
.step span{font-size:.89rem;color:var(--muted);line-height:1.55}
.band--dark .step span{color:rgba(233,240,242,.7)}

/* ---------- comparison table ---------- */
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:.92rem;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--paper)}
.band--dark .cmp{border-color:rgba(255,255,255,.14);background:transparent}
.cmp th,.cmp td{padding:.95rem 1.1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.band--dark .cmp th,.band--dark .cmp td{border-bottom-color:rgba(255,255,255,.10)}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp thead th{font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cmp .own{background:color-mix(in srgb,var(--b600) 10%, transparent)}
.band--dark .cmp .own{background:rgba(255,255,255,.07)}
.cmp thead .own{color:var(--accent)}
.cmp thead .own b{display:block;font-size:1.02rem;letter-spacing:-.02em;text-transform:none;color:var(--ink)}
.band--dark .cmp thead .own b{color:#fff}
.cmp .yes::before{content:"✓";display:inline-grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;
  background:color-mix(in srgb,var(--accent-2) 22%,#fff);color:color-mix(in srgb,var(--accent-2) 70%,#000);
  font-size:.78em;font-weight:900;margin-right:.55em}
.cmp .no{color:var(--muted)}
.cmp .no::before{content:"–";display:inline-grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;
  background:rgba(125,135,145,.14);font-size:.9em;margin-right:.55em}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,26px)}
.stat b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.4vw,2.7rem);
  letter-spacing:-.045em;line-height:1;color:var(--accent);margin-bottom:.35rem}
.stat span{font-size:.86rem;color:var(--muted);line-height:1.45;display:block}
.band--dark .stat span,.band--ink .stat span{color:rgba(233,240,242,.65)}

/* ---------- testimonials ---------- */
.testi{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,2.2vw,26px);box-shadow:var(--sh-1);
  display:flex;flex-direction:column;gap:.85rem}
.testi .who{display:flex;align-items:center;gap:.8rem}
.testi .who img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.testi .who b{display:block;font-family:var(--display);font-size:.92rem;letter-spacing:-.02em}
.testi .who span{font-size:.76rem;color:var(--muted)}
.stars{color:var(--accent);letter-spacing:.12em;font-size:.9rem}
.testi q{font-size:.93rem;color:var(--ink-2);line-height:1.62;quotes:none}
.testi .verified{margin-top:auto;padding-top:.85rem;border-top:1px solid var(--line);font-size:.74rem;color:var(--muted);display:flex;gap:.4em;align-items:center}

/* ---------- pricing ---------- */
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);align-items:end}
.price{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,2.2vw,28px);
  text-align:center;box-shadow:var(--sh-1);position:relative;display:flex;flex-direction:column;gap:.5rem}
.price .badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-size:.7rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;padding:.42em 1em;border-radius:var(--r-pill);
  background:var(--paper);border:1px solid var(--line);color:var(--muted)}
.price .supply{font-size:.79rem;color:var(--muted);font-weight:700;letter-spacing:.02em}
.price .pic{height:150px;display:grid;place-items:center;margin:.4rem 0}
.price .pic img{max-height:150px;width:auto;object-fit:contain}
.price .amt{font-family:var(--display);font-weight:800;letter-spacing:-.05em;line-height:1;display:flex;align-items:flex-start;justify-content:center;gap:.1em}
.price .amt .cur{font-size:1.15rem;margin-top:.42em}
.price .amt .num{font-size:clamp(2.6rem,4.4vw,3.5rem)}
.price .amt .per{font-size:.95rem;color:var(--muted);align-self:flex-end;margin-bottom:.6em;font-weight:700;letter-spacing:-.01em}
.price .was{font-size:.85rem;color:var(--muted);text-decoration:line-through}
.price .tot{font-size:.86rem;color:var(--ink-2)}
.price ul{display:grid;gap:.5rem;margin:.6rem 0 .3rem;text-align:left}
.price li{font-size:.85rem;color:var(--ink-2);display:flex;gap:.55em;align-items:flex-start;line-height:1.45}
.price li::before{content:"✓";color:var(--accent-2);font-weight:900;flex:none}
.price .btn{width:100%;margin-top:auto}
.price.feat{background:linear-gradient(158deg,var(--b700) 0%,var(--b900) 100%);color:#fff;border-color:transparent;
  box-shadow:var(--sh-3);transform:translateY(-14px);padding-block:clamp(28px,3vw,38px)}
.price.feat .badge{background:var(--accent);border-color:transparent;color:var(--accent-ink)}
.price.feat .supply,.price.feat .tot,.price.feat li{color:rgba(255,255,255,.82)}
.price.feat .was{color:rgba(255,255,255,.55)}
.price.feat .amt .per{color:rgba(255,255,255,.66)}
.price.feat li::before{color:var(--accent-2)}
.price.feat .best{color:var(--accent);font-weight:800;font-size:.84rem}

/* ---------- guarantee ---------- */
.guar{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);align-items:center;
  background:linear-gradient(150deg,#1C1F25 0%,#08090C 100%);color:#EDF1F4;border-radius:var(--r-xl);
  padding:clamp(26px,3.4vw,48px);position:relative;overflow:hidden;box-shadow:var(--sh-2)}
.guar::after{content:"";position:absolute;width:420px;height:420px;left:-140px;top:-120px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%,transparent),transparent)}
.guar .seal{position:relative;width:clamp(112px,13vw,150px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  text-align:center;border:3px solid var(--accent);color:var(--accent);font-family:var(--display);line-height:1;
  background:radial-gradient(closest-side,rgba(0,0,0,.3),transparent)}
.guar .seal b{display:block;font-size:clamp(1.8rem,3vw,2.5rem);font-weight:900;letter-spacing:-.04em}
.guar .seal span{font-size:.6rem;letter-spacing:.2em;font-weight:800;display:block;margin-top:.25em}
.guar .txt{position:relative}
.guar h2{color:#fff;margin-bottom:.8rem}
.guar p{color:rgba(237,241,244,.76);font-size:.98rem;line-height:1.68;max-width:62ch}
.guar .btn{margin-top:1.5rem}

/* ---------- bonuses ---------- */
.bonus{display:flex;gap:clamp(14px,1.8vw,22px);align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(16px,1.8vw,22px);box-shadow:var(--sh-1)}
.bonus .cover{width:clamp(84px,11vw,118px);flex:none}
.bonus .cover img{filter:drop-shadow(0 16px 26px rgba(12,18,24,.26))}
.bonus .lbl{font-size:.68rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.35rem}
.bonus h4{margin-bottom:.4rem}
.bonus p{font-size:.86rem;color:var(--muted);line-height:1.55}
.bonus .val{margin-top:.6rem;font-size:.84rem;font-weight:800;color:var(--b600)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.7rem;max-width:820px;margin-inline:auto}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;padding:1.1rem 1.35rem;display:flex;align-items:center;gap:1rem;
  font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.022em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-size:1.35rem;font-weight:400;color:var(--accent);transition:.25s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 1.35rem 1.25rem;color:var(--ink-2);font-size:.94rem;line-height:1.68}

/* ---------- final CTA ---------- */
.cta-card{border-radius:var(--r-xl);padding:clamp(28px,4vw,60px);position:relative;overflow:hidden;
  background:radial-gradient(760px 420px at 82% 12%, color-mix(in srgb,var(--b400) 34%,transparent), transparent 62%),
             linear-gradient(150deg,var(--b700) 0%,var(--b900) 82%);color:#fff;box-shadow:var(--sh-3)}
.cta-card .grid{grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(22px,3vw,44px)}
.cta-card h2{color:#fff;margin-bottom:1rem}
.cta-card p{color:rgba(255,255,255,.80);margin-bottom:1.6rem}

/* ---------- footer ---------- */
.foot{background:linear-gradient(168deg,var(--b800) 0%,var(--b900) 70%);color:rgba(255,255,255,.78);padding-block:clamp(44px,5vw,70px) 28px}
.foot-panel{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:var(--r-xl);
  padding:clamp(22px,2.8vw,38px);display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(22px,3vw,42px)}
.foot h5{font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-bottom:1rem}
.foot a:hover{color:#fff}
.foot ul{display:grid;gap:.6rem;font-size:.9rem}
.foot .brand{margin-bottom:1rem}
.disc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.disc{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:1.05rem 1.2rem}
.disc b{display:flex;align-items:center;gap:.5em;font-family:var(--display);font-size:.87rem;color:#fff;margin-bottom:.45rem;letter-spacing:-.02em}
.disc p{font-size:.78rem;line-height:1.6;color:rgba(255,255,255,.58)}
.foot-base{display:flex;flex-wrap:wrap;gap:1rem 1.6rem;align-items:center;margin-top:22px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.10);font-size:.79rem;color:rgba(255,255,255,.52)}
.foot-base nav{display:flex;flex-wrap:wrap;gap:1.2rem}

/* ---------- social proof toast ---------- */
.toast{position:fixed;left:18px;bottom:18px;z-index:70;display:flex;gap:.85rem;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);padding:.8rem .95rem;
  max-width:310px;transform:translateY(140%);transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.toast.on{transform:translateY(0)}
.toast .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:1.1rem;flex:none;
  background:color-mix(in srgb,var(--accent) 16%,#fff)}
.toast .t{font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:.4em}
.toast .t::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent-2);flex:none}
.toast .t{font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:.64rem;color:var(--b600)}
.toast b{display:block;font-family:var(--display);font-size:.86rem;letter-spacing:-.02em}
.toast span{font-size:.76rem;color:var(--muted)}
.toast .x{position:absolute;top:6px;right:8px;background:none;border:0;color:var(--muted);cursor:pointer;font-size:1rem;line-height:1}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;
  background:rgba(8,12,16,.62);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:.25s}
.modal.on{opacity:1;visibility:visible}
.modal .box{background:#fff;border-radius:var(--r-xl);max-width:480px;width:100%;padding:clamp(26px,3.4vw,40px);
  text-align:center;box-shadow:var(--sh-3);transform:translateY(14px);transition:.3s}
.modal.on .box{transform:none}
.modal .x{position:absolute;top:16px;right:20px;background:none;border:0;color:#fff;font-size:1.6rem;cursor:pointer}

/* ---------- scroll reveal ---------- */
[data-anim]{opacity:1;transform:none}
.anim-ready [data-anim]{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.8,.3,1),transform .7s cubic-bezier(.2,.8,.3,1)}
.anim-ready [data-anim].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.anim-ready [data-anim]{opacity:1!important;transform:none!important;transition:none}}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .hero-grid,.split,.cta-card .grid{grid-template-columns:1fr}
  .split.rev>*:first-child{order:0}
  .g-4,.hex-grid{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .foot-panel{grid-template-columns:1fr 1fr}
  .nav-links{display:none}
  .burger{display:block;margin-left:0;order:3}
  .nav-in{gap:.55rem}
  .brand{margin-right:auto;font-size:1.02rem}
  .nav-cta{order:2;margin-left:0;gap:.5rem}
  .nav-cta .nav-note{display:none}
  .nav-cta .btn{padding:.6em 1em;font-size:.8rem}
  .nav .btn .ar{display:none}
  .price.feat{transform:none}
  .pricing{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .hero-stage{min-height:auto;margin-top:1.4rem}
  .float-prod{width:130px;right:-6px;bottom:-10px}
}
@media (max-width:760px){
  body{font-size:16px}
  .g-2,.g-3,.ing-grid,.strain-grid,.disc-grid{grid-template-columns:1fr}
  .guar{grid-template-columns:1fr;text-align:center}
  .guar .seal{margin-inline:auto}
  .guar p{margin-inline:auto}
  .foot-panel{grid-template-columns:1fr}
  .bonus{flex-direction:column;text-align:center}
  .toast{left:12px;right:12px;max-width:none}
  .hero-meta{gap:.8rem 1.2rem}
}
@media (max-width:430px){
  .brand em,.brand>span:not(.mark){display:none}
  .nav-cta .btn{padding:.55em .85em;font-size:.75rem}
}
@media (max-width:520px){
  .hex-grid{grid-template-columns:repeat(2,1fr)}
  .ing .pic{height:150px}
}

/* ==========================================================================
   Page-signature components — each product owns one or two of these
   ========================================================================== */

/* Yu Sleep · 3 AM timeline */
.tl{position:relative;display:grid;gap:1.6rem;padding-left:2.4rem}
.tl::before{content:"";position:absolute;left:11px;top:.6rem;bottom:.6rem;width:2px;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent-2) 60%,transparent),transparent)}
.tl li{position:relative}
.tl li::before{content:"";position:absolute;left:-2.4rem;top:.32rem;width:24px;height:24px;border-radius:50%;
  border:2px solid var(--accent);background:var(--b900);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent)}
.tl .hr{font-family:var(--display);font-weight:800;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:.3rem}
.tl b{display:block;font-family:var(--display);font-size:1.08rem;letter-spacing:-.025em;margin-bottom:.28rem;color:#fff}
.tl p{font-size:.92rem;line-height:1.6;color:rgba(233,240,242,.72)}

/* Yu Sleep · reset roadmap stepper */
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);position:relative}
.road::before{content:"";position:absolute;left:8%;right:8%;top:38px;height:2px;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent) 0 8px,transparent 8px 16px)}
.road .r{position:relative;text-align:center;padding-top:0}
.road .r .k{width:76px;height:76px;margin:0 auto 1.1rem;border-radius:50%;display:grid;place-items:center;position:relative;
  background:linear-gradient(150deg,var(--b600),var(--b900));border:2px solid color-mix(in srgb,var(--accent) 60%,transparent);
  font-family:var(--display);font-weight:900;font-size:.9rem;color:var(--accent);line-height:1.05;text-align:center}
.road .r h4{color:#fff;margin-bottom:.4rem}
.road .r p{font-size:.88rem;color:rgba(233,240,242,.7);line-height:1.58}

/* Yu Sleep · face wall */
.wall{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px)}
.wall .w{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:var(--r-lg);
  padding:clamp(18px,2vw,24px);backdrop-filter:blur(8px);display:flex;flex-direction:column;gap:.8rem}
.wall .w .hd{display:flex;align-items:center;gap:.8rem}
.wall .w img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent)}
.wall .w b{display:block;font-family:var(--display);font-size:.92rem;color:#fff;letter-spacing:-.02em}
.wall .w .loc{font-size:.75rem;color:rgba(233,240,242,.55)}
.wall .w q{quotes:none;font-size:.9rem;line-height:1.62;color:rgba(233,240,242,.78)}

/* ProstaVive · supplement facts panel */
.facts{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(22px,3vw,44px);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(22px,2.8vw,38px);box-shadow:var(--sh-1)}
.facts .sheet{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#fff}
.facts dl{display:grid;grid-template-columns:1fr auto;gap:.1rem 1rem;margin-top:1.2rem}
.facts dt{font-size:.9rem;padding:.62rem 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.facts dd{margin:0;font-family:var(--display);font-weight:800;font-size:.9rem;padding:.62rem 0;border-bottom:1px solid var(--line);text-align:right}

/* VisiFlora · bonus book row */
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.2vw,28px)}
.book{text-align:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(20px,2.4vw,30px) clamp(18px,2vw,24px);box-shadow:var(--sh-1);position:relative;overflow:hidden}
.book::before{content:"";position:absolute;inset:0 0 62% 0;background:linear-gradient(160deg,var(--w1),transparent)}
.book img{position:relative;width:min(140px,58%);margin:0 auto 1.2rem;filter:drop-shadow(0 20px 32px rgba(12,18,24,.30))}
.book .val{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:color-mix(in srgb,var(--accent) 18%,#fff);color:color-mix(in srgb,var(--accent) 60%,#000);
  padding:.34em .8em;border-radius:var(--r-pill);margin-bottom:.7rem}
.book h4{margin-bottom:.45rem}
.book p{font-size:.86rem;color:var(--muted);line-height:1.55}

/* ProDentim · press logo band */
.press{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(20px,4vw,54px);
  padding:clamp(18px,2.2vw,28px) clamp(20px,3vw,40px);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-xl);box-shadow:var(--sh-1)}
.press img{max-height:34px;width:auto;opacity:.62;filter:grayscale(1)}
.press .lbl{font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);width:100%;text-align:center}

/* shared · pill row of small facts */
.pillrow{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.pillrow .p{display:inline-flex;align-items:center;gap:.5em;font-size:.83rem;font-weight:700;
  padding:.52em 1em;border-radius:var(--r-pill);background:var(--paper);border:1px solid var(--line);color:var(--ink-2);box-shadow:var(--sh-1)}
.band--dark .pillrow .p{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.85);box-shadow:none}

/* ==========================================================================
   Hub (homepage) — deliberately not a product page
   ========================================================================== */
body.t-hub{
  --b900:#0A0D12; --b800:#141920; --b700:#1E252E; --b600:#2B3542; --b400:#5B6B7E;
  --accent:#E8A33D; --accent-ink:#20140A; --accent-2:#43C08E;
  --cream:#F7F4EF; --tint:#F3F5F7;
  --w1:#FFF1DE; --w2:#E7F6EF; --w3:#E9F0FA; --w4:#F3EDFB;
  --glow:rgba(232,163,61,.34);
}
.idx{display:grid;gap:clamp(18px,2.4vw,28px)}
.pcard{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(20px,3vw,48px);align-items:center;
  border-radius:var(--r-xl);padding:clamp(22px,3vw,46px);overflow:hidden;color:#fff;box-shadow:var(--sh-2);
  transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
.pcard:nth-child(even){grid-template-columns:1.05fr .95fr}
.pcard:nth-child(even) .pc-media{order:-1}
.pcard .pc-media{position:relative;display:grid;place-items:center;min-height:200px}
.pcard .pc-media::before{content:"";position:absolute;inset:2%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.28),transparent 70%);filter:blur(12px)}
.pcard .pc-media img{position:relative;max-height:250px;width:auto;filter:drop-shadow(0 30px 44px rgba(0,0,0,.44))}
.pcard h3{font-size:clamp(1.5rem,2.6vw,2.05rem);color:#fff;margin-bottom:.6rem;letter-spacing:-.035em}
.pcard p{color:rgba(255,255,255,.80);font-size:.96rem;line-height:1.62;margin-bottom:1.2rem}
.pcard .kicker{display:inline-flex;align-items:center;gap:.55em;font-family:var(--display);font-weight:800;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:.9rem;opacity:.92}
.pcard .pc-facts{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.pcard .pc-facts span{font-size:.76rem;font-weight:700;padding:.38em .82em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.16)}
.pc-yusleep{background:radial-gradient(700px 420px at 88% 10%,rgba(140,124,255,.42),transparent 62%),linear-gradient(150deg,#1D1B55,#08081C)}
.pc-prostavive{background:radial-gradient(700px 420px at 88% 10%,rgba(23,177,137,.40),transparent 62%),linear-gradient(150deg,#075C48,#032A21)}
.pc-visiflora{background:radial-gradient(700px 420px at 88% 10%,rgba(124,92,255,.44),transparent 62%),linear-gradient(150deg,#341C77,#150A30)}
.pc-javaburn{background:radial-gradient(700px 420px at 88% 10%,rgba(240,83,43,.40),transparent 62%),linear-gradient(150deg,#3C1D0D,#140A05)}
.pc-prodentim{background:radial-gradient(700px 420px at 88% 10%,rgba(47,191,160,.40),transparent 62%),linear-gradient(150deg,#0A6153,#032C26)}
.pcard .btn-primary{background:#fff;color:#14181C}
.pc-yusleep .kicker{color:#F3C24C} .pc-prostavive .kicker{color:#F5A524}
.pc-visiflora .kicker{color:#14C6B4} .pc-javaburn .kicker{color:#F0532B} .pc-prodentim .kicker{color:#FF7C9C}

.howto{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px);counter-reset:h}
.howto .h{counter-increment:h;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,26px);box-shadow:var(--sh-1)}
.howto .h::before{content:counter(h,decimal-leading-zero);font-family:var(--display);font-weight:900;font-size:1.5rem;
  color:var(--accent);display:block;margin-bottom:.7rem;letter-spacing:-.04em}
.howto .h h4{margin-bottom:.4rem}
.howto .h p{font-size:.88rem;color:var(--muted);line-height:1.56}

/* legal / long-form pages */
.prose{max-width:760px;margin-inline:auto}
.prose h2{font-size:clamp(1.35rem,2.2vw,1.7rem);margin:2.4rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink-2);font-size:.97rem;line-height:1.75;margin-bottom:1rem}
.prose ul{list-style:disc;padding-left:1.3rem;margin-bottom:1.2rem}
.prose li{margin-bottom:.45rem}
.prose a{color:var(--b600);text-decoration:underline;text-underline-offset:3px}
.page-head{padding-block:clamp(52px,7vw,86px) clamp(30px,4vw,48px)}

@media (max-width:1024px){
  .road,.wall,.books,.howto{grid-template-columns:repeat(2,1fr)}
  .road::before{display:none}
  .facts{grid-template-columns:1fr}
  .pcard,.pcard:nth-child(even){grid-template-columns:1fr}
  .pcard .pc-media,.pcard:nth-child(even) .pc-media{order:-1}
}
@media (max-width:760px){
  .road,.wall,.books,.howto{grid-template-columns:1fr}
  .tl{padding-left:2rem}
}

/* numeral tile for ingredients without a photo */
.ing .pic .numeral{display:grid;place-items:center;width:112px;height:112px;border-radius:50%;
  background:linear-gradient(150deg,#fff,rgba(255,255,255,.4));box-shadow:0 12px 24px -12px rgba(12,18,24,.3), inset 0 0 0 1px rgba(0,0,0,.05);
  font-family:var(--display);font-weight:900;letter-spacing:-.045em;line-height:.95;text-align:center;color:var(--b700)}
.ing .pic .numeral b{display:block;font-size:1.9rem}
.ing .pic .numeral span{display:block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--muted);margin-top:.25em}
.figure-note{display:flex;gap:1.4rem;align-items:center;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(16px,2vw,22px);box-shadow:var(--sh-1);margin-top:clamp(20px,2.4vw,30px)}
.figure-note img{width:min(260px,42%);border-radius:var(--r-sm);border:1px solid var(--line)}
@media (max-width:600px){.figure-note{flex-direction:column;text-align:center}.figure-note img{width:72%}}

/* uniform hex sizing */
.hex .pic img{width:min(100%,190px)}
.hex-grid .hex{display:flex;flex-direction:column}

/* designed bonus cover for products with no vendor cover art */
.bcover{width:100%;aspect-ratio:3/4;border-radius:12px;display:grid;place-items:center;align-content:center;gap:.4rem;
  text-align:center;padding:14px 10px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--b600),var(--b900));box-shadow:0 16px 28px -14px rgba(6,20,16,.6)}
.bcover::after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.22);border-radius:8px}
.bcover i{font-style:normal;font-size:1.7rem;line-height:1}
.bcover b{font-family:var(--display);font-weight:800;font-size:.74rem;line-height:1.2;color:#fff;letter-spacing:-.01em}
.bcover span{font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-weight:800}

/* letter medallion for an ingredient with no distinct vendor image */
.med .m.letter{display:grid;place-items:center;background:linear-gradient(150deg,var(--w1),var(--w2));
  font-family:var(--display);font-weight:900;font-size:1.15rem;color:var(--b600);letter-spacing:-.04em}

/* card with a photo header */
.card.has-media{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card .card-media{height:158px;position:relative;overflow:hidden;flex:none;
  background:linear-gradient(150deg,var(--b600),var(--b900))}
.card .card-media img{width:100%;height:100%;object-fit:cover;display:block}
.card .card-media .tile{position:absolute;left:12px;top:12px;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;font-size:1rem;color:#fff;
  background:rgba(10,14,12,.62);backdrop-filter:blur(8px);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.18)}
.card.has-media .card-body{padding:clamp(22px,2.2vw,28px) clamp(20px,2.2vw,26px) clamp(20px,2.2vw,26px)}
.band--dark .card.has-media{background:rgba(255,255,255,.055)}

/* full-width clinical callout strip */
.insight{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,2.4vw,34px);align-items:center;
  background:linear-gradient(150deg,#191D22 0%,#0A0D11 100%);border-radius:var(--r-xl);
  padding:clamp(20px,2.4vw,30px) clamp(22px,2.6vw,34px);position:relative;overflow:hidden;box-shadow:var(--sh-2)}
.insight::after{content:"";position:absolute;width:320px;height:320px;right:-110px;top:-120px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 26%,transparent),transparent)}
.insight .fig{width:clamp(64px,7vw,92px);flex:none;position:relative}
.insight .txt{position:relative}
.insight h4{color:#fff;margin-bottom:.4rem}
.insight p{color:rgba(237,241,244,.74);font-size:.9rem;line-height:1.6;margin:0}
.insight .chip{position:relative;white-space:nowrap}
@media (max-width:860px),(max-height:500px) and (orientation:landscape){
  .insight{grid-template-columns:1fr;text-align:center;justify-items:center}
  .insight .fig{width:76px}
}


/* checkout trust notes under the pricing grid */
.checkout-note{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px);
  max-width:900px;margin:clamp(26px,3vw,38px) auto 0}
.checkout-note .cn{display:flex;gap:.9rem;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.15rem;box-shadow:var(--sh-1)}
.checkout-note .cn i{font-style:normal;font-size:1.1rem;line-height:1.2;flex:none}
.checkout-note .cn b{display:block;font-family:var(--display);font-size:.9rem;letter-spacing:-.02em;margin-bottom:.25rem}
.checkout-note .cn span{font-size:.82rem;color:var(--muted);line-height:1.55;display:block}
.band--dark .checkout-note .cn{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none}
.band--dark .checkout-note .cn span{color:rgba(233,240,242,.68)}
@media (max-width:760px){.checkout-note{grid-template-columns:1fr}}

/* topbar responsive */
@media (max-width:760px){
  .ticker{font-size:.68rem}
  .ticker-track span{padding:.55em 1.05em}
}

/* anchored sections must clear the sticky topbar */
[id]{scroll-margin-top:104px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:760px){[id]{scroll-margin-top:92px}}

/* ==========================================================================
   PER-PAGE LAYOUT SYSTEMS — each product page gets its own structural grammar
   ========================================================================== */

/* ---- A · ProstaVive: centred monolith hero (no split column) ---- */
.hero--stagecentre{text-align:center}
.hero--stagecentre .wrap{display:block}
.hero--stagecentre .lead{margin-inline:auto}
.hero--stagecentre .hero-actions{justify-content:center}
.hero--stagecentre .ticks{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;justify-content:center;margin-top:1.3rem}
.hero--stagecentre .monolith{position:relative;margin:clamp(26px,3.4vw,44px) auto 0;width:min(420px,72%)}
.hero--stagecentre .monolith::before{content:"";position:absolute;inset:-16% -22%;border-radius:50%;
  background:radial-gradient(closest-side,var(--glow),transparent 70%);filter:blur(16px)}
.hero--stagecentre .monolith img{position:relative;filter:drop-shadow(0 44px 60px rgba(0,0,0,.5))}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:clamp(28px,3.4vw,44px);
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);overflow:hidden}
.hero-stats div{background:var(--b900);padding:1.1rem .8rem;text-align:center}
.hero-stats b{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--accent);letter-spacing:-.03em}
.hero-stats span{font-size:.74rem;color:rgba(255,255,255,.62);display:block;margin-top:.2rem}
@media (max-width:760px){.hero-stats{grid-template-columns:repeat(2,1fr)}}

/* ---- B · VisiFlora: sticky index rail beside the system groups ---- */
.railed{display:grid;grid-template-columns:minmax(210px,262px) 1fr;gap:clamp(24px,3.4vw,54px);align-items:start}
.rail{position:sticky;top:124px}
.rail ol{counter-reset:r;display:grid;gap:.35rem}
.rail li{counter-increment:r}
.rail a{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem .9rem;border-radius:var(--r-sm);
  border:1px solid transparent;transition:.18s;color:inherit}
.rail a::before{content:counter(r,decimal-leading-zero);font-family:var(--display);font-weight:800;font-size:.72rem;
  color:var(--accent);flex:none;margin-top:.15em;letter-spacing:.02em}
.rail a b{display:block;font-family:var(--display);font-size:.92rem;letter-spacing:-.02em;margin-bottom:.1rem}
.rail a span{display:block;font-size:.76rem;color:var(--muted);line-height:1.45}
.rail a:hover,.rail a.on{background:var(--paper);border-color:var(--line);box-shadow:var(--sh-1)}
.rail .note{margin-top:1rem;padding:.85rem .9rem;border-radius:var(--r-sm);background:color-mix(in srgb,var(--b400) 10%,#fff);
  font-size:.78rem;line-height:1.5;color:var(--b700)}
.railed .groups{display:grid;gap:clamp(16px,2vw,24px)}
@media (max-width:1000px){.railed{grid-template-columns:1fr}.rail{position:static}.rail ol{grid-template-columns:repeat(2,1fr);display:grid}}

/* ---- C · Java Burn: single narrow editorial column ---- */
.longform{max-width:730px;margin-inline:auto}
.longform > * + *{margin-top:clamp(20px,2.4vw,30px)}
.longform p{font-size:1.02rem;line-height:1.8;color:var(--ink-2)}
.band--dark .longform p{color:rgba(233,240,242,.78)}
.pullquote{border-left:3px solid var(--accent);padding:.2rem 0 .2rem 1.4rem;margin-block:clamp(24px,3vw,38px)}
.pullquote p{font-family:var(--display);font-weight:800;font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.24;
  letter-spacing:-.025em;color:var(--ink)}
.band--dark .pullquote p{color:#fff}
.pullquote cite{display:block;margin-top:.6rem;font-style:normal;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.rule{height:1px;background:var(--line);border:0;margin-block:clamp(26px,3vw,40px)}
.band--dark .rule{background:rgba(255,255,255,.12)}
.lf-figure{margin-block:clamp(26px,3vw,40px)}
.lf-figure img{border-radius:var(--r-lg);width:100%}
.lf-figure figcaption{margin-top:.7rem;font-size:.8rem;color:var(--muted);text-align:center}

/* ---- D · ProDentim: bento grid of mixed-size tiles ---- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(12px,1.5vw,18px)}
.bento > *{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.2vw,28px);box-shadow:var(--sh-1);display:flex;flex-direction:column;justify-content:center}
.band--dark .bento > *{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.11);box-shadow:none}
.bento .b-wide{grid-column:span 4}
.bento .b-half{grid-column:span 3}
.bento .b-third{grid-column:span 2}
.bento .b-tall{grid-column:span 2;grid-row:span 2}
.bento .b-media{padding:0;overflow:hidden;position:relative;min-height:210px}
.bento .b-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bento .b-media .cap{position:relative;margin-top:auto;padding:clamp(16px,1.8vw,22px);
  background:linear-gradient(0deg,rgba(4,20,17,.92),rgba(4,20,17,0));color:#fff;width:100%}
.bento .b-media .cap b{display:block;font-family:var(--display);font-size:1rem;letter-spacing:-.02em}
.bento .b-media .cap span{font-size:.8rem;color:rgba(255,255,255,.75)}
.bento h4{margin-bottom:.4rem}
.bento p{font-size:.88rem;color:var(--muted);line-height:1.62;margin:0}
.band--dark .bento p{color:rgba(233,240,242,.7)}
.bento .big{font-family:var(--display);font-weight:800;font-size:clamp(2rem,3.4vw,2.9rem);letter-spacing:-.045em;
  line-height:1;color:var(--accent);margin-bottom:.4rem}
@media (max-width:1000px){.bento{grid-template-columns:repeat(4,1fr)}.bento .b-wide{grid-column:span 4}
  .bento .b-half,.bento .b-third,.bento .b-tall{grid-column:span 2}.bento .b-tall{grid-row:span 1}}
@media (max-width:640px){.bento{grid-template-columns:1fr}.bento > *{grid-column:span 1!important;grid-row:auto!important}}

/* multi-row press lockup: size by width, never squash by height */
.press .press-lockup{max-height:none;width:min(520px,88%);height:auto;opacity:.72;filter:grayscale(1)}

/* ---- Hub: horizontal product rail that simply extends as products are added ---- */
.rail-wrap{position:relative;margin-inline:calc(var(--pad) * -1)}
.prail{display:flex;gap:clamp(14px,1.8vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px var(--pad) 20px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.prail::-webkit-scrollbar{height:6px}
.prail::-webkit-scrollbar-thumb{background:rgba(18,23,28,.18);border-radius:99px}
.pslide{scroll-snap-align:center;flex:0 0 clamp(272px,25vw,336px);border-radius:var(--r-xl);overflow:hidden;
  color:#fff;position:relative;display:flex;flex-direction:column;box-shadow:var(--sh-2);
  transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s}
.pslide:hover{transform:translateY(-6px);box-shadow:var(--sh-3)}
.pslide .ps-media{height:210px;display:grid;place-items:center;position:relative}
.pslide .ps-media::before{content:"";position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.26),transparent 70%);filter:blur(12px)}
.pslide .ps-media img{position:relative;max-height:176px;width:auto;filter:drop-shadow(0 22px 34px rgba(0,0,0,.5))}
.pslide .ps-body{padding:0 clamp(18px,2vw,24px) clamp(20px,2.2vw,26px);display:flex;flex-direction:column;flex:1}
.pslide .kicker{font-family:var(--display);font-weight:800;font-size:.64rem;letter-spacing:.17em;text-transform:uppercase;
  margin-bottom:.5rem;opacity:.95}
.pslide h3{color:#fff;font-size:1.4rem;margin-bottom:.45rem}
.pslide p{color:rgba(255,255,255,.8);font-size:.86rem;line-height:1.6;margin-bottom:1rem}
.pslide .ps-facts{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.1rem}
.pslide .ps-facts span{font-size:.7rem;font-weight:700;padding:.32em .7em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.16)}
.pslide .go{margin-top:auto;display:inline-flex;align-items:center;gap:.5em;font-family:var(--display);
  font-weight:800;font-size:.86rem;padding:.7em 1.15em;border-radius:var(--r-pill);background:#fff;color:#14181C;align-self:flex-start}
.rail-hint{display:flex;align-items:center;gap:.6rem;justify-content:center;margin-top:.4rem;
  font-size:.78rem;color:var(--muted)}

/* ---- Hub: trust pillars ---- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px)}
.pillar{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px);box-shadow:var(--sh-1)}
.pillar .n{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:1.1rem;margin-bottom:1rem;
  background:color-mix(in srgb,var(--accent) 16%,#fff)}
.pillar h4{margin-bottom:.45rem}
.pillar p{font-size:.88rem;color:var(--muted);line-height:1.66}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.pillars{grid-template-columns:1fr}}

/* ---- Hub: problem router ---- */
.router{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.2vw,16px)}
.router a{display:flex;flex-direction:column;gap:.5rem;padding:clamp(16px,1.8vw,22px);border-radius:var(--r-lg);
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--sh-1);transition:.2s;color:inherit}
.router a:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.router .ic{font-size:1.4rem;line-height:1}
.router b{font-family:var(--display);font-size:.95rem;letter-spacing:-.02em}
.router span{font-size:.78rem;color:var(--muted);line-height:1.5}
.router .to{margin-top:auto;font-size:.74rem;font-weight:800;color:var(--accent);letter-spacing:.02em}
@media (max-width:1000px){.router{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.router{grid-template-columns:1fr}}

/* ProDentim: reversed hero — product leads, copy follows */
.hero--rev .hero-grid{grid-template-columns:.92fr 1.08fr}
.hero--rev .hero-copy{order:2}
.hero--rev .hero-visual{order:1}
@media (max-width:1024px){.hero--rev .hero-copy{order:1}.hero--rev .hero-visual{order:2}}

/* ═══════════════════════════════════════════════════════════════════════
   v3 — equal-height media, welavie-grade ingredient cards, premium CTA
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. IMAGE AND COPY ARE THE SAME HEIGHT ─────────────────────────────
   The media column is a panel, not a floating cut-out. It stretches to the
   copy column and centres its subject inside. Nothing bottoms out early. */
.hero-grid{align-items:stretch}
.hero-grid>*{min-width:0}
.hero-grid>.hero-stage,.hero-grid>.photo-card,.hero-grid>.hero-media{align-self:stretch}
.hero-copy{display:flex;flex-direction:column;justify-content:center}

.hero-stage{height:100%;min-height:clamp(320px,42vw,540px);align-content:center}
.hero-stage>img{max-height:min(52vh,460px);width:auto;max-width:100%;object-fit:contain}

.hero-media{position:relative;height:100%;min-height:clamp(320px,42vw,540px);
  border-radius:var(--r-xl);overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10)}
.hero-media>img{width:100%;height:100%;object-fit:cover;display:block}
.hero-media .inset{position:absolute;inset:auto 16px 16px;z-index:3}

.hero--photo .photo-card{height:100%;display:grid}
.hero--photo .photo-card>img:not(.float-prod){height:100%;width:100%;aspect-ratio:auto;
  object-fit:cover;object-position:50% 42%}

/* same rule for any in-page split: never centre a short column beside a tall one */
.split{align-items:stretch}
.split>*{min-width:0}
.split .split-copy{display:flex;flex-direction:column;justify-content:center}
.split .photo-card,.split .split-media{height:100%;min-height:clamp(260px,30vw,420px)}
.split .photo-card>img{height:100%;width:100%;object-fit:cover}

/* ── 2. PREMIUM CTA — shine sweep + lift ──────────────────────────────── */
.btn{position:relative;isolation:isolate;overflow:hidden;
  transition:transform .28s cubic-bezier(.22,.9,.3,1),box-shadow .28s,background .2s,border-color .2s}
.btn>*{position:relative;z-index:3}
.btn-primary::after,.btn-dark::after{content:"";position:absolute;z-index:2;pointer-events:none;
  top:-65%;bottom:-65%;left:-42%;width:24%;transform:skew(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.62),transparent);
  animation:ctaShine 4.6s ease-in-out infinite}
@keyframes ctaShine{0%,62%{opacity:0;left:-42%}68%{opacity:1}86%,100%{opacity:0;left:122%}}
.btn-primary:hover,.btn-dark:hover{transform:translateY(-2px)}
.btn-primary:hover{box-shadow:0 16px 34px -12px color-mix(in srgb,var(--accent) 62%,transparent)}
.btn-lg:hover .ar{transform:translate(3px,-3px)}
.btn .ar{display:inline-block;transition:transform .28s cubic-bezier(.22,.9,.3,1)}
@media (prefers-reduced-motion:reduce){
  .btn-primary::after,.btn-dark::after{animation:none;opacity:0}
  .btn:hover{transform:none}
}

/* ── 3. INGREDIENT CARDS — one anatomy everywhere ─────────────────────── */
.ings{display:grid;gap:clamp(14px,1.5vw,22px);grid-template-columns:repeat(3,1fr)}
.ings.c2{grid-template-columns:repeat(2,1fr)}
.ings.c4{grid-template-columns:repeat(4,1fr)}
.ing{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(20,20,25,.05);
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s,border-color .3s}
.ing:hover{transform:translateY(-6px);box-shadow:0 18px 50px -24px rgba(20,20,25,.34);
  border-color:color-mix(in srgb,var(--accent) 32%,var(--line))}
/* the fixed media band is what makes every card line up */
.ing-media{height:168px;display:grid;place-items:center;flex:0 0 auto;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 13%,var(--card)),var(--card))}
.ing:nth-child(even) .ing-media{background:linear-gradient(150deg,color-mix(in srgb,var(--accent2,var(--accent)) 11%,var(--card)),var(--card))}
.ing-media img{width:128px;height:128px;object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.16));transition:transform .35s cubic-bezier(.22,.9,.3,1)}
.ing:hover .ing-media img{transform:scale(1.06)}
.ing-body{padding:clamp(16px,1.5vw,22px);display:flex;flex-direction:column;gap:.42rem;flex:1 1 auto}
.ing-kind{align-self:flex-start;font-size:.685rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:.3em .72em;border-radius:99px;
  background:color-mix(in srgb,var(--accent) 15%,transparent);
  color:color-mix(in srgb,var(--accent) 78%,var(--ink))}
.ing-body h3{font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.02em;margin:0}
.ing-body p{font-size:.875rem;line-height:1.62;color:var(--muted);margin:0}

.band--dark .ing,.band--ink .ing{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.10)}
.band--dark .ing-media,.band--ink .ing-media{background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 20%,transparent),rgba(255,255,255,.02))}
.band--dark .ing-body h3,.band--ink .ing-body h3{color:#fff}
.band--dark .ing-body p,.band--ink .ing-body p{color:rgba(255,255,255,.68)}
.band--dark .ing-kind,.band--ink .ing-kind{background:rgba(255,255,255,.11);color:#fff}
.band--dark .ing:hover,.band--ink .ing:hover{box-shadow:0 22px 60px -26px rgba(0,0,0,.7)}

/* a featured row — bigger media, used where a few ingredients lead the rest */
.ings.lead-row .ing-media{height:210px}
.ings.lead-row .ing-media img{width:160px;height:160px}

/* ── 4. HORIZONTAL SECTION HEADING ────────────────────────────────────── */
.head-h{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(20px,3.4vw,58px);
  align-items:end;margin-bottom:clamp(28px,3.4vw,50px);
  padding-bottom:clamp(18px,2vw,28px);border-bottom:1px solid var(--line)}
.head-h h2{margin:0}
.head-h .lead{margin:0;font-size:1.0rem;line-height:1.72;padding-bottom:.3rem}
.band--dark .head-h,.band--ink .head-h{border-bottom-color:rgba(255,255,255,.14)}
.head-h.tight{align-items:center}

/* ── 5. HOW ORDERING WORKS — transparency at the CTA, not in the hero ─── */
.howorder{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  margin-top:clamp(26px,3vw,42px)}
.howorder .step{background:var(--card);padding:clamp(18px,1.8vw,26px);display:flex;
  flex-direction:column;gap:.5rem}
.howorder .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:.86rem;
  background:color-mix(in srgb,var(--accent) 17%,transparent);
  color:color-mix(in srgb,var(--accent) 80%,var(--ink))}
.howorder b{font-family:var(--display);font-size:.95rem;letter-spacing:-.015em}
.howorder span{font-size:.83rem;line-height:1.6;color:var(--muted)}
.band--dark .howorder,.band--ink .howorder{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.12)}
.band--dark .howorder .step,.band--ink .howorder .step{background:var(--b900)}
.band--dark .howorder b,.band--ink .howorder b{color:#fff}
.band--dark .howorder span,.band--ink .howorder span{color:rgba(255,255,255,.66)}
.band--dark .howorder .n,.band--ink .howorder .n{background:rgba(255,255,255,.13);color:#fff}

/* ── 6. CATALOGUE — product cards and filters ─────────────────────────── */
.pfilter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(24px,3vw,40px)}
.pfilter button{font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;
  padding:.6em 1.15em;border-radius:99px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);transition:all .2s}
.pfilter button:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
.pfilter button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,26px)}
.pcard{display:flex;flex-direction:column;border-radius:var(--r-lg);overflow:hidden;
  background:var(--card);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s,border-color .3s}
.pcard:hover{transform:translateY(-6px);box-shadow:0 22px 56px -26px rgba(20,20,25,.34)}
.pcard-media{height:210px;display:grid;place-items:center;position:relative;
  background:linear-gradient(160deg,color-mix(in srgb,var(--pc) 16%,var(--card)),var(--card))}
.pcard-media img{max-height:186px;width:auto;filter:drop-shadow(0 16px 26px rgba(0,0,0,.22))}
.pcard-body{padding:clamp(18px,1.7vw,24px);display:flex;flex-direction:column;gap:.5rem;flex:1 1 auto}
.pcard .cat{align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:.32em .8em;border-radius:99px;
  background:color-mix(in srgb,var(--pc) 16%,transparent);color:color-mix(in srgb,var(--pc) 74%,var(--ink))}
.pcard h3{font-family:var(--display);font-weight:800;font-size:1.24rem;letter-spacing:-.025em;margin:0}
.pcard p{font-size:.9rem;line-height:1.6;color:var(--muted);margin:0;flex:1 1 auto}
.pcard .meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:var(--muted);
  padding-top:.7rem;border-top:1px solid var(--line);margin-top:.3rem}
.pcard .meta b{color:var(--ink);font-weight:700}
.pcard .go{display:inline-flex;align-items:center;gap:.4em;font-weight:700;font-size:.9rem;
  color:color-mix(in srgb,var(--pc) 74%,var(--ink))}
.pcard:hover .go .ar{transform:translate(3px,-3px)}

@media (max-width:1000px){
  .ings,.ings.c4{grid-template-columns:repeat(2,1fr)}
  .pgrid{grid-template-columns:repeat(2,1fr)}
  .howorder{grid-template-columns:repeat(2,1fr)}
  .head-h{grid-template-columns:1fr;gap:1rem;align-items:start}
}
@media (max-width:640px){
  .ings,.ings.c2,.ings.c4{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
  .howorder{grid-template-columns:1fr}
  .ing-media{height:150px}
  .ing-media img{width:112px;height:112px}
  .hero-stage,.hero-media{min-height:260px}
}

/* catalogue card typography must not inherit the link colour */
.pcard h3{color:var(--ink)}
.band--cream .pcard h3,.band--soft .pcard h3,.band--white .pcard h3{color:var(--ink)}
.pcard .pcard-media img{max-width:88%;max-height:190px;object-fit:contain}

/* a product shot that overhangs its photo panel must sit OUTSIDE the clipped card */
.media-wrap{position:relative;height:100%;display:grid}
.media-wrap .photo-card{height:100%}
.media-wrap>.float-prod{position:absolute;right:-2.2%;bottom:-4%;width:min(34%,208px);height:auto;
  z-index:5;filter:drop-shadow(0 26px 40px rgba(0,0,0,.5));pointer-events:none}
.media-wrap:has(.float-prod) .cap{right:34%}
@media (max-width:640px){
  .media-wrap>.float-prod{width:32%;right:0;bottom:-3%}
  .media-wrap:has(.float-prod) .cap{right:36%}
}

/* wide tables scroll inside their own box — the page body never does */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-lg)}
.tablewrap .cmp{min-width:640px}
@media (max-width:700px){
  .tablewrap{box-shadow:inset -14px 0 14px -14px rgba(0,0,0,.28)}
}

/* ═══════════════════════════════════════════════════════════════════════
   v4 — client review 2026-08-28
   Mobile is the majority of traffic. Product shots are never cut.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. PRODUCT SHOTS ARE NEVER CLIPPED ────────────────────────────────
   A hero product is contained, never covered, and never lives inside a
   box with overflow:hidden. One treatment for all five products. */
.prod-shot{display:block;width:100%;height:100%;object-fit:contain;object-position:center;
  filter:drop-shadow(0 32px 46px rgba(0,0,0,.42))}
.prod-stage{position:relative;display:grid;place-items:center;height:100%;
  min-height:clamp(320px,40vw,520px);overflow:visible;padding:clamp(8px,1.4vw,20px)}
.prod-stage::before{content:"";position:absolute;inset:6% 2%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 26%,transparent),transparent 72%);
  filter:blur(6px)}
.prod-stage>img{position:relative;max-height:min(52vh,460px);max-width:100%;width:auto}
.band--soft .prod-shot,.band--cream .prod-shot,.band--white .prod-shot{
  filter:drop-shadow(0 26px 38px rgba(20,24,30,.24))}

/* ── 2. EVERY HERO VARIANT STACKS ON TABLET AND PHONE ──────────────────
   The variant selectors (.hero--photo .hero-grid etc.) outrank a bare
   .hero-grid rule, so Yu Sleep and VisiFlora never collapsed. Match the
   specificity inside the query instead. */
@media (max-width:1024px){
  .hero .hero-grid,
  .hero--photo .hero-grid,
  .hero--system .hero-grid,
  .hero--rev .hero-grid,
  .hero--split .hero-grid{grid-template-columns:1fr;gap:clamp(18px,3vw,28px)}

  /* copy first, product straight after it — you see what it is, then you act */
  .hero-copy{order:1}
  .hero-grid>.media-wrap,.hero-grid>.prod-stage,.hero-grid>.hero-stage,
  .hero-grid>.hero-visual,.hero-grid>.photo-card,.hero-grid>.sys-ring{order:2}

  .hero-stage,.hero-media,.prod-stage{min-height:0}
  .prod-stage>img{max-height:300px}
  .hero--rev .hero-copy{order:1}
  .hero--rev .hero-visual{order:2}
}

@media (max-width:760px){
  /* the headline was eating the whole first screen */
  .hero h1{font-size:clamp(1.95rem,8.4vw,2.65rem);line-height:1.08}
  .hero .lead{font-size:1rem;line-height:1.62}
  .hero{padding-block:clamp(26px,6vw,40px) clamp(30px,7vw,48px)}
  .hero-actions{gap:.6rem}
  .hero-actions .btn{flex:1 1 100%;justify-content:center}
  .hero-meta{gap:.6rem 1rem;padding-top:1rem;margin-top:1.2rem}
  .hero-meta .m{font-size:.78rem}
  .ticks{gap:.45rem}
  .prod-stage{min-height:0;padding:4px}
  .prod-stage>img{max-height:250px}
  .media-wrap>.float-prod{display:none}   /* no overhang on phones — it always crops */
  .toast{display:none}                    /* nothing competing with the sticky CTA */
}

/* ── 3. STICKY MOBILE CTA — the CTA is never more than a thumb away ──── */
.mcta{display:none}
@media (max-width:760px){
  .mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    align-items:center;gap:.7rem;padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--paper) 88%,transparent);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);box-shadow:0 -8px 30px rgba(10,12,16,.16)}
  .mcta img{width:38px;height:38px;object-fit:contain;flex:0 0 auto}
  .mcta .t{flex:1 1 auto;min-width:0;line-height:1.25}
  .mcta .t b{display:block;font-family:var(--display);font-size:.9rem;letter-spacing:-.02em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
  .mcta .t span{font-size:.72rem;color:var(--muted)}
  .mcta .btn{flex:0 0 auto;padding:.72em 1.15em;font-size:.86rem}
  body{padding-bottom:74px}
}

/* ── 4. TOUCH TARGETS + FLUID TYPE ─────────────────────────────────────── */
@media (max-width:760px){
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .nav-cta .btn{min-height:40px}
  .head-h h2,.head h2{font-size:clamp(1.7rem,7.2vw,2.3rem)}
  .sec{padding-block:clamp(38px,9vw,58px)}
  .ing-body h3{font-size:1rem}
  .wrap,.wrap-wide{padding-inline:18px}
}

/* ── Yu Sleep hero: a scene panel and a clean product card, side by side.
   The product is NEVER laid over the photo edge, so it can never be cut. */
.hero-visual{display:grid;grid-template-rows:1fr auto;gap:14px;height:100%}
.scene{position:relative;margin:0;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-3);min-height:clamp(240px,30vw,420px)}
.scene-photo{width:100%;height:100%;object-fit:cover;object-position:52% 42%;display:block}
.scene figcaption{position:absolute;left:14px;right:14px;bottom:14px;
  background:rgba(10,12,16,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:14px;padding:.7rem .9rem;color:#fff}
.scene figcaption b{font-family:var(--display);font-size:.95rem;display:block;letter-spacing:-.02em}
.scene figcaption span{font-size:.78rem;color:rgba(255,255,255,.72)}
.scene-prod{display:flex;align-items:center;gap:1rem;padding:.9rem 1.1rem;
  border-radius:var(--r-lg);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12)}
.scene-prod .prod-shot{width:120px;height:104px;flex:0 0 auto;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.45))}
.scene-prod .sp-note b{display:block;font-family:var(--display);font-size:1rem;color:#fff;letter-spacing:-.02em}
.scene-prod .sp-note span{font-size:.82rem;color:rgba(255,255,255,.68)}
.band--cream .scene-prod,.band--white .scene-prod,.band--soft .scene-prod{
  background:var(--card);border-color:var(--line)}
.band--cream .scene-prod .sp-note b,.band--white .scene-prod .sp-note b{color:var(--ink)}
@media (max-width:760px){
  .scene{min-height:210px}
  .scene-prod{padding:.75rem .9rem}
  .scene-prod .prod-shot{width:92px;height:82px}
}

/* Java Burn full-bleed hero: the product sits in its own glass card so the
   photograph never crops it. */
.hero--fullbleed .wrap-wide{display:grid;grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(20px,4vw,56px);align-items:center}
.fb-prod{display:flex;flex-direction:column;align-items:center;gap:.8rem;
  padding:clamp(16px,2vw,26px);border-radius:var(--r-xl);
  background:rgba(12,10,10,.42);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.16);width:clamp(190px,20vw,262px)}
.fb-prod .prod-shot{width:100%;height:auto;max-height:300px}
.fb-note{text-align:center}
.fb-note b{display:block;font-family:var(--display);font-size:1rem;color:#fff;letter-spacing:-.02em}
.fb-note span{font-size:.78rem;color:rgba(255,255,255,.72)}
@media (max-width:1024px){
  .hero--fullbleed .wrap-wide{grid-template-columns:1fr;justify-items:start}
  .fb-prod{flex-direction:row;align-items:center;width:100%;max-width:420px;gap:1rem;text-align:left}
  .fb-prod .prod-shot{width:110px;max-height:150px}
  .fb-note{text-align:left}
}

/* ── v4 refinements after the 2026-08-28 review ───────────────────────── */

/* Long headlines in a half-width column were wrapping to five lines. */
/* superseded by the v5 type scale — hero h1 now uses the measured 60.5px */

/* VisiFlora: the two-bottle shot is wider than the old single bottle, so the
   ring needs to recentre around it and give it more room. */
.sys-ring .core{width:min(64%,300px);height:auto;object-fit:contain}
.sys-ring::before{inset:8%}
.sys-ring .orb{width:78px;height:78px}
.sys-ring .orb:nth-child(2){top:2%;left:4%}
.sys-ring .orb:nth-child(3){top:10%;right:0}
.sys-ring .orb:nth-child(4){bottom:8%;left:0}
.sys-ring .orb:nth-child(5){bottom:0;right:8%}

/* Light-band heroes get a real, visible product glow rather than a hint. */
.band--soft .prod-stage::before,.band--cream .prod-stage::before,
.band--white .prod-stage::before{
  inset:4%;background:radial-gradient(closest-side,
    color-mix(in srgb,var(--accent) 22%,transparent),transparent 74%);filter:blur(14px)}
.band--soft .hero,.hero.band--soft{position:relative}
.hero.band--soft::after{content:"";position:absolute;inset:auto 0 0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* ProDentim: a soft tinted field behind the product so the light hero has depth */
.hero.band--soft .prod-stage{border-radius:var(--r-xl);
  background:radial-gradient(120% 90% at 62% 44%,
    color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%)}

@media (max-width:1024px){
  .sys-ring{max-width:400px}
  .sys-ring .orb{width:62px;height:62px}
}
@media (max-width:760px){
  .sys-ring{max-width:320px}
  .sys-ring .orb{width:52px;height:52px}
  .sys-ring .core{width:min(66%,220px)}
}
.hero--fullbleed h1{line-height:1.06}
.hero--fullbleed .wrap-wide>div:first-child{max-width:640px}

/* The product rail bleeds past its container by design, but the wrapper itself
   must never exceed the viewport or the whole page scrolls sideways. */
.rail-wrap{max-width:100vw;overflow:hidden}
.prail{padding-inline:var(--pad)}

/* ═══════════════════════════════════════════════════════════════════════
   v5 — TYPE SCALE, measured off welavie.com rather than guessed at.
   Measured on the client's own site at 1440px:
     h1               60.5px / 64.1 lh / 3 lines max / 626px column / 192px block
     h2  (standard)   43.2px / 54   lh / 2 lines max / 672px column / 108px block
     h2  (statement)  57.6px / 59.9 lh / 3 lines max / 1136px column / 180px block
     h3  (card)       16-20px        h3 (feature) 24-30px
   The mistake being corrected: we used the 57.6px STATEMENT size as the
   default and put it in a 760px column, so section headings ran to 3-4 lines
   and 180-240px tall. Every heading now has a size, a column width and a
   line ceiling.
   ═══════════════════════════════════════════════════════════════════════ */

h1,.h1{
  font-size:clamp(2.05rem,4.05vw,3.78rem);   /* -> 60.5px */
  line-height:1.06;letter-spacing:-.028em;
  max-width:640px;                            /* welavie's measured h1 column */
}
.hero h1{max-width:640px}
.hero--stagecentre h1,.hero--fullbleed h1{max-width:700px}

h2,.h2{
  font-size:clamp(1.72rem,2.85vw,2.7rem);    /* -> 43.2px, the DEFAULT */
  line-height:1.25;letter-spacing:-.022em;
  max-width:680px;                            /* welavie's measured h2 column */
}
.head h2,.center h2{margin-inline:auto}       /* centred section heading */
.head-h h2{max-width:100%}                    /* already inside a ~600px column */
.split h2,.longform h2,.guar h2,.cta-card h2{max-width:100%}

/* The wide statement heading. Used at most ONCE per page, always centred at
   full container width, never inside a half-width column. */
.h2--statement{
  font-size:clamp(2.05rem,4.05vw,3.6rem);    /* -> 57.6px */
  line-height:1.04;letter-spacing:-.026em;
  max-width:1140px;margin-inline:auto;
}

h3,.h3{font-size:1.125rem;line-height:1.55;letter-spacing:-.015em}   /* 18px card */
.h3--feature{font-size:1.5rem;line-height:1.375}                     /* 24px feature */
h4{font-size:1.06rem;line-height:1.5;letter-spacing:-.015em}

.lead{font-size:1.06rem;line-height:1.68;max-width:62ch}
.head .lead,.head .sub{margin-inline:auto;max-width:60ch}

@media (max-width:1024px){
  h1,.h1{max-width:none}
  h2,.h2,.head h2,.head-h h2{max-width:none}
}
@media (max-width:760px){
  h1,.h1{font-size:clamp(1.9rem,7.6vw,2.5rem);line-height:1.1}
  h2,.h2{font-size:clamp(1.5rem,5.9vw,1.95rem);line-height:1.24}
  .h2--statement{font-size:clamp(1.65rem,6.6vw,2.2rem);line-height:1.12}
  .lead{font-size:1rem;line-height:1.62}
}

/* welavie steps the heading down in a narrower column rather than letting it
   wrap — their guarantee h2 runs 36px. Same rule for our half-width splits. */
.split h2,.split .h2{font-size:clamp(1.55rem,2.4vw,2.25rem);line-height:1.2}
.longform h2{font-size:clamp(1.6rem,2.5vw,2.35rem);line-height:1.22}

/* ═══════════════════════════════════════════════════════════════════════
   v6 — LINE-BREAK CONTROL + MOTION
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. NO ORPHAN LINES ───────────────────────────────────────────────
   "Feeling well shouldn't / need a / chemistry degree." — a two-word middle
   line in a centred heading. text-wrap:balance evens the line lengths so a
   heading never strands a fragment on its own row. */
h1,.h1,h2,.h2,h3,.h3,h4,.h2--statement{text-wrap:balance}
p,.lead,.sub,figcaption,blockquote{text-wrap:pretty}

/* A centred headline needs more room than a left-aligned one: rag that reads
   fine flush-left looks broken on centre. */
.center h1,.hero--stagecentre h1,.hero.band--ink .center h1{max-width:15ch;margin-inline:auto}
.center .lead,.hero--stagecentre .lead{max-width:56ch;margin-inline:auto}

/* ── 2. MOTION ────────────────────────────────────────────────────────
   Purposeful only: entrance on the hero, a staggered reveal on scroll, a
   drawn underline, counting stats, and an idle float on the product. The
   client's brief asks for premium, not busy — everything is short, once,
   and off entirely under prefers-reduced-motion. */

/* hero entrance — runs on load, top to bottom */
.anim-ready .hero-copy>*,
.anim-ready .hero .center>*,
.anim-ready .hero--fullbleed .wrap-wide>div:first-child>*{
  opacity:0;transform:translateY(14px);
  animation:heroIn .72s cubic-bezier(.22,.9,.3,1) forwards}
.anim-ready .hero-copy>*:nth-child(1),.anim-ready .hero .center>*:nth-child(1){animation-delay:.05s}
.anim-ready .hero-copy>*:nth-child(2),.anim-ready .hero .center>*:nth-child(2){animation-delay:.13s}
.anim-ready .hero-copy>*:nth-child(3),.anim-ready .hero .center>*:nth-child(3){animation-delay:.21s}
.anim-ready .hero-copy>*:nth-child(4),.anim-ready .hero .center>*:nth-child(4){animation-delay:.29s}
.anim-ready .hero-copy>*:nth-child(5),.anim-ready .hero .center>*:nth-child(5){animation-delay:.37s}
.anim-ready .hero-copy>*:nth-child(6),.anim-ready .hero .center>*:nth-child(6){animation-delay:.45s}
@keyframes heroIn{to{opacity:1;transform:none}}

/* the product arrives a beat after the copy, and then breathes */
.anim-ready .prod-stage>img,.anim-ready .sys-ring .core,
.anim-ready .hero-visual,.anim-ready .fb-prod{
  opacity:0;animation:prodIn .9s cubic-bezier(.22,.9,.3,1) .3s forwards}
@keyframes prodIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.prod-stage>img,.sys-ring .core{animation-name:prodIn,float}
.prod-stage>img{animation:prodIn .9s cubic-bezier(.22,.9,.3,1) .3s forwards,
                          float 7s ease-in-out 1.2s infinite}
.sys-ring .core{animation:prodIn .9s cubic-bezier(.22,.9,.3,1) .3s forwards,
                          float 8s ease-in-out 1.4s infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* the accent underline draws itself in */
.hl-underline{background-size:0% .20em;animation:drawLine .85s cubic-bezier(.22,.9,.3,1) .55s forwards}
@keyframes drawLine{to{background-size:100% .20em}}

/* scroll reveal — children of a grid arrive in sequence, not all at once */
.anim-ready [data-anim]{opacity:0;transform:translateY(18px);
  transition:opacity .65s cubic-bezier(.22,.9,.3,1),transform .65s cubic-bezier(.22,.9,.3,1)}
.anim-ready [data-anim].in{opacity:1;transform:none}
.anim-ready [data-anim][style*="--d"]{transition-delay:var(--d)}

/* soft lift on anything interactive */
.card,.ing,.pcard,.price,.testi,.bonus{transition:transform .32s cubic-bezier(.22,.9,.3,1),
  box-shadow .32s,border-color .32s}
.card:hover,.testi:hover,.bonus:hover{transform:translateY(-4px)}

/* the nav condenses once you start reading */
.topbar{transition:transform .35s cubic-bezier(.22,.9,.3,1)}
.topbar.shrunk .ticker{height:0;opacity:0;overflow:hidden;transition:height .3s,opacity .25s}
.nav{transition:padding .3s,box-shadow .3s,background .3s}
.topbar.shrunk .nav{box-shadow:0 8px 26px rgba(8,10,14,.28)}

@media (prefers-reduced-motion:reduce){
  .anim-ready .hero-copy>*,.anim-ready .hero .center>*,
  .anim-ready .hero--fullbleed .wrap-wide>div:first-child>*,
  .anim-ready .prod-stage>img,.anim-ready .sys-ring .core,
  .anim-ready .hero-visual,.anim-ready .fb-prod{animation:none;opacity:1;transform:none}
  .hl-underline{animation:none;background-size:100% .20em}
  .card:hover,.testi:hover,.bonus:hover{transform:none}
  .topbar.shrunk .ticker{height:auto;opacity:1}
}

/* ═══════════════════════════════════════════════════════════════════════
   v7 — ONE SECTION = ONE SCREEN
   Client spec: "1 section in one scroll completed."
   Measured before this pass: VisiFlora ingredients 3731px, Yu Sleep 1884px,
   ProstaVive 1743px, every pricing section ~1420px, ProstaVive hero carrying
   353px of dead air. Target 520-1150px per section.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. KILL THE HERO DEAD AIR ────────────────────────────────────────
   The media column was setting the row height (photo panel 420px + product
   card 130px) while the copy centred inside it, leaving ~180px above and
   below. Cap the media so the copy drives the height. */
.hero{padding-block:clamp(30px,3.6vw,54px) clamp(34px,4vw,62px)}
.hero-grid{align-items:center;gap:clamp(24px,3.2vw,52px)}
.hero-copy{justify-content:center}
.hero-stage,.prod-stage,.hero-media{min-height:0;max-height:min(60vh,520px)}
.prod-stage>img,.hero-stage>img{max-height:min(56vh,470px)}
.hero-visual{max-height:min(66vh,560px);gap:12px}
.scene{min-height:0;flex:1 1 auto}
.hero-visual .scene{height:100%}
.sys-ring{max-width:min(46vh,470px)}
.hero-meta{margin-top:1.2rem;padding-top:1rem}
.ticks{margin-top:1.1rem!important}
.hero-actions{margin-top:1.4rem}

/* ── 2. INGREDIENTS AS A RAIL, NOT A WALL ─────────────────────────────
   8 to 14 cards stacked in a grid is 2-4 screens. The same cards on a
   scroll-snap rail are one screen, and the horizontal move is a nicer
   interaction than a long vertical crawl. */
.ings--rail{display:flex;gap:clamp(14px,1.5vw,20px);overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
  padding-block:6px 18px;margin-inline:calc(var(--pad) * -1);
  padding-inline:var(--pad);scrollbar-width:thin}
.ings--rail>.ing{flex:0 0 clamp(240px,25vw,300px);scroll-snap-align:start}
.ings--rail::-webkit-scrollbar{height:6px}
.ings--rail::-webkit-scrollbar-track{background:transparent}
.ings--rail::-webkit-scrollbar-thumb{border-radius:99px;
  background:color-mix(in srgb,var(--accent) 45%,transparent)}
.band--dark .ings--rail::-webkit-scrollbar-thumb,
.band--ink .ings--rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28)}

.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.4rem}
.rail-nav{display:flex;gap:.5rem;flex:0 0 auto}
.rail-nav button{width:42px;height:42px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;font-size:1.05rem;line-height:1;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  transition:transform .2s,background .2s,border-color .2s,opacity .2s}
.rail-nav button:hover{transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.rail-nav button[disabled]{opacity:.32;cursor:default;transform:none}
.band--dark .rail-nav button,.band--ink .rail-nav button{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff}
.rail-count{font-size:.82rem;color:var(--muted);white-space:nowrap}
.band--dark .rail-count,.band--ink .rail-count{color:rgba(255,255,255,.62)}
@media (max-width:760px){.rail-nav{display:none}
  .ings--rail>.ing{flex:0 0 78vw}}

/* ── 3. TIGHTEN THE SECTION RHYTHM ────────────────────────────────────── */
.sec{padding-block:clamp(44px,5vw,74px)}
.head{margin-bottom:clamp(24px,2.8vw,38px)}
.head-h{margin-bottom:clamp(22px,2.6vw,36px);padding-bottom:clamp(14px,1.6vw,22px)}

/* pricing was ~1420px because the ordering panel sat under the cards */
.pricing{gap:clamp(14px,1.5vw,20px)}
.price{padding:clamp(18px,1.8vw,26px)}
.price .pic img{max-height:132px;width:auto}

/* VisiFlora system legend — four labels above one rail, replacing four stacked
   card columns that ran 3731px on their own. */
.syslegend{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,18px);
  margin-bottom:clamp(20px,2.2vw,30px)}
.sysbit{display:flex;gap:.7rem;align-items:flex-start;padding:.85rem 1rem;
  border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line)}
.sysbit .n{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;
  place-items:center;font-family:var(--display);font-weight:800;font-size:.8rem;
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  color:color-mix(in srgb,var(--accent) 80%,var(--ink))}
.sysbit b{display:block;font-family:var(--display);font-size:.94rem;letter-spacing:-.015em}
.sysbit span{font-size:.79rem;color:var(--muted);line-height:1.45}
@media (max-width:1000px){.syslegend{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.syslegend{grid-template-columns:1fr}}

/* the guarantee and the ordering steps now share one section */
.guar+.howorder{margin-top:clamp(26px,3vw,40px)}

/* the serum comparison table and the strain lead-row were each ~50-200px over
   one screen; tighten the row rhythm rather than cutting content */
.cmp th,.cmp td{padding:.72rem .95rem}
.cmp{font-size:.88rem}
.ings.lead-row .ing-media{height:180px}
.ings.lead-row .ing-media img{width:138px;height:138px}
/* the hero stat strip sits outside the grid; pull it tighter to the hero */
.hero-stats{margin-top:clamp(18px,2vw,28px)}
.hero-stats div{padding:.9rem .8rem}

/* a trust strip belongs to the section above it, not to a section of its own —
   welavie hangs theirs off the foot of the hero */
.trustbar{display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,30px);
  flex-wrap:wrap;margin-top:clamp(20px,2.4vw,32px);padding-top:clamp(16px,1.8vw,24px);
  border-top:1px solid var(--line)}
.trustbar .lbl{font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted)}
.trustbar img{max-height:52px;width:auto}
.band--dark .trustbar,.band--ink .trustbar{border-top-color:rgba(255,255,255,.14)}
.band--dark .trustbar .lbl,.band--ink .trustbar .lbl{color:rgba(255,255,255,.6)}

/* the catalogue grid ran 1632px as 3-up over two rows. Five compact cards on
   one row is one screen, and it still wraps cleanly as the shelf grows. */
@media (min-width:1200px) and (min-height:501px){.pgrid{grid-template-columns:repeat(5,1fr)}}
.pcard-media{height:150px}
.pcard-media img,.pcard .pcard-media img{max-height:130px}
.pcard-body{padding:clamp(14px,1.3vw,18px);gap:.42rem}
.pcard h3{font-size:1.08rem}
.pcard p{font-size:.84rem;line-height:1.5}
.pcard .meta{font-size:.72rem;gap:.5rem 1rem;padding-top:.6rem}
.pcard .go{font-size:.83rem}
/* last 75px: the catalogue cards can lose a little more chrome */
.pcard-media{height:132px}
.pcard-media img,.pcard .pcard-media img{max-height:112px}
.pcard p{font-size:.82rem}

/* .rail-head is display:flex, which overrode .head-h's mobile stack and
   squeezed every rail heading into a narrow column on phones. */
@media (max-width:1000px){
  .rail-head{flex-direction:column;align-items:flex-start;gap:.9rem}
  .rail-head>div:last-child{align-items:flex-start!important;flex-direction:row!important;
    justify-content:space-between;width:100%}
}
@media (max-width:760px){
  .rail-head .rail-count{font-size:.76rem;white-space:normal}
}
/* catalogue: last 60px */
.pfilter{margin-bottom:clamp(16px,1.8vw,24px)}
#all .fine{margin-top:clamp(18px,2vw,26px)!important}
#all .pcard-body{padding:13px 15px}

/* ═══════════════════════════════════════════════════════════════════════
   v8 — the BOTTOM half of every page was identical.
   Same five components in the same order on all five products: bonuses ->
   packages -> guarantee -> FAQ -> CTA. Differentiating the hero was never
   going to fix that. Each product now gets a different pricing
   presentation, a different FAQ presentation and a different guarantee.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── PRICING AS ROWS (Yu Sleep) ──────────────────────────────────────── */
.prows{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)}
.prow{display:grid;grid-template-columns:120px 1fr auto auto;gap:clamp(16px,2vw,32px);
  align-items:center;padding:clamp(16px,1.7vw,24px) clamp(18px,2vw,28px);
  border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s,border-color .3s}
.prow:hover{transform:translateY(-3px);box-shadow:0 18px 42px -24px rgba(20,20,25,.34)}
.prow.feat{border-color:color-mix(in srgb,var(--accent) 58%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 34%,transparent)}
.prow .rpic{display:grid;place-items:center;height:96px}
.prow .rpic img{max-height:96px;width:auto}
.prow .rsup{font-family:var(--display);font-weight:800;font-size:1.14rem;
  letter-spacing:-.02em;display:flex;align-items:center;gap:.6rem;margin-bottom:.45rem}
.rbadge{font-size:.66rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:.28em .7em;border-radius:99px;background:var(--accent);color:var(--accent-ink,#12100a)}
.prow ul{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;list-style:none;padding:0;margin:0}
.prow ul li{font-size:.84rem;color:var(--muted);position:relative;padding-left:1rem}
.prow ul li::before{content:"\2713";position:absolute;left:0;
  color:color-mix(in srgb,var(--accent) 80%,var(--ink));font-weight:700}
.prow .ramt{font-family:var(--display);font-weight:800;letter-spacing:-.03em;
  display:flex;align-items:baseline;gap:.05em}
.prow .ramt .cur{font-size:1rem;opacity:.65}
.prow .ramt .num{font-size:2.15rem}
.prow .ramt .per{font-size:.82rem;opacity:.6;font-weight:600}
.prow .rtot{font-size:.79rem;color:var(--muted);text-align:right}
.rwas{text-decoration:line-through;opacity:.6;margin-left:.3em}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  .prow{grid-template-columns:84px 1fr;gap:14px 16px}
  .prow .rpic{height:76px}.prow .rpic img{max-height:76px}
  .prow .rprice{grid-column:1/-1;display:flex;align-items:baseline;gap:.8rem}
  .prow .rtot{text-align:left}
  .prow>.btn{grid-column:1/-1;justify-content:center}
}

/* ── PRICING AS A TABLE (VisiFlora) ──────────────────────────────────── */
.ptable{width:100%;border-collapse:separate;border-spacing:0;min-width:640px}
.ptable th,.ptable td{padding:.85rem 1rem;text-align:center;border-bottom:1px solid var(--line)}
.ptable thead th{font-family:var(--display);font-weight:800;font-size:1.05rem;
  letter-spacing:-.02em;padding-block:1.1rem;vertical-align:bottom}
.ptable thead th span{display:block;font-size:.64rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;margin-top:.35rem;
  color:color-mix(in srgb,var(--accent) 82%,var(--ink))}
.ptable tbody th{text-align:left;font-weight:600;font-size:.85rem;color:var(--muted);
  white-space:nowrap;width:150px}
.ptable td{font-size:.86rem;color:var(--muted)}
.ptable td b{font-family:var(--display);font-size:1.7rem;letter-spacing:-.03em;color:var(--ink)}
.ptable td b+span{font-size:.78rem;opacity:.6}
.ptable .feat{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.ptable thead .feat{border-radius:var(--r-md) var(--r-md) 0 0}
.ptable .ctarow td{padding-top:1.2rem;border-bottom:0}
.ptable .ctarow .btn{width:100%;justify-content:center}

/* ── GUARANTEE AS A BAND (Yu Sleep, Java Burn) ───────────────────────── */
.guarband{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,44px);
  align-items:center;padding:clamp(24px,3vw,42px) clamp(24px,3.4vw,48px);
  border-radius:var(--r-xl);
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 16%,var(--card)),var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
.gb-num{text-align:center;flex:0 0 auto}
.gb-num b{display:block;font-family:var(--display);font-weight:800;font-size:3.4rem;
  line-height:.9;letter-spacing:-.04em;color:color-mix(in srgb,var(--accent) 88%,var(--ink))}
.gb-num span{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted)}
.gb-txt h2{font-size:clamp(1.35rem,2.2vw,1.9rem);margin:0 0 .5rem;max-width:none}
.gb-txt p{margin:0;font-size:.94rem;line-height:1.62;color:var(--muted);max-width:62ch}
@media (max-width:860px),(max-height:500px) and (orientation:landscape){.guarband{grid-template-columns:1fr;text-align:center}
  .gb-txt p{margin-inline:auto}.guarband .btn{justify-self:center}}

/* ── GUARANTEE AS A SPLIT (VisiFlora, ProDentim) ─────────────────────── */
.guarsplit{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(22px,3.2vw,52px);
  align-items:center}
.gs-pic{position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:var(--card);border:1px solid var(--line);display:grid;place-items:center;
  padding:clamp(18px,2.4vw,34px);min-height:230px}
.gs-pic img{max-height:230px;width:auto}
.gs-chip{position:absolute;left:16px;bottom:16px;font-size:.72rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:.42em .9em;border-radius:99px;
  background:var(--accent);color:var(--accent-ink,#12100a)}
.gs-txt h2{max-width:none}
@media (max-width:860px),(max-height:500px) and (orientation:landscape){.guarsplit{grid-template-columns:1fr}}

/* ── FAQ, TWO COLUMNS, ALWAYS OPEN (VisiFlora, ProDentim) ────────────── */
.faq-twocol{columns:2;column-gap:clamp(22px,3vw,48px)}
.faq-twocol .qa{break-inside:avoid;margin-bottom:clamp(16px,1.8vw,26px);
  padding:clamp(15px,1.6vw,22px);border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line)}
.faq-twocol .qa b{display:block;font-family:var(--display);font-size:1rem;
  letter-spacing:-.018em;margin-bottom:.4rem}
.faq-twocol .qa p{margin:0;font-size:.88rem;line-height:1.62;color:var(--muted)}
@media (max-width:860px),(max-height:500px) and (orientation:landscape){.faq-twocol{columns:1}}

/* ── FAQ AS A NUMBERED LIST (Yu Sleep) ───────────────────────────────── */
.faq-numbered{display:flex;flex-direction:column}
.qn{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,30px);
  padding-block:clamp(16px,1.8vw,24px);border-top:1px solid var(--line)}
.qn:first-child{border-top:0;padding-top:0}
.qn .n{font-family:var(--display);font-weight:800;font-size:1.1rem;letter-spacing:-.02em;
  color:color-mix(in srgb,var(--accent) 78%,var(--ink));padding-top:.1rem}
.qn b{display:block;font-family:var(--display);font-size:1.06rem;letter-spacing:-.018em;
  margin-bottom:.35rem}
.qn p{margin:0;font-size:.9rem;line-height:1.66;color:var(--muted);max-width:74ch}
.band--dark .qn,.band--ink .qn{border-top-color:rgba(255,255,255,.13)}

/* the label figure had a 400px image beside two lines of text and a wall of
   white to its right */
.figure-note{align-items:flex-start;gap:clamp(20px,2.4vw,34px);
  padding:clamp(18px,2vw,28px)}
.figure-note img{width:min(300px,38%)}
.figure-note>div{flex:1 1 auto}
.figure-note h4{margin-bottom:.5rem}
.figure-note .sub{max-width:64ch}

/* the numbered FAQ shows every answer, so single-column it ran 1323px.
   Two columns at desktop keeps the numbered-rule styling and halves the height
   — still visibly different from the card-based two-column variant. */
@media (min-width:900px) and (min-height:501px){
  .faq-numbered{display:grid;grid-template-columns:1fr 1fr;
    column-gap:clamp(28px,3.4vw,56px);row-gap:0}
  .qn:nth-child(2){border-top:0;padding-top:0}
}
.qn{padding-block:clamp(13px,1.4vw,19px)}
.qn p{font-size:.87rem;line-height:1.6}
/* Yu Sleep ingredients crept back over: the label figure is the tallest thing
   in that section, so cap it. */
.figure-note{margin-top:clamp(20px,2.2vw,30px)}
.figure-note img{max-height:230px;object-fit:contain}

/* ═══════════════════════════════════════════════════════════════════════
   v9 — back to welavie's ACTUAL formats.
   Two corrections to things I got wrong by applying my own rules over theirs:
   1. Their #ingredients section is a 3-column grid of 363x363 cards and runs
      1898px. I turned it into a rail chasing a one-screen rule that is mine,
      not theirs. Reverted.
   2. Their hero is the product centre-stage inside a drifting constellation
      of its own ingredient sprites. Same treatment now on all five products.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. WELAVIE'S INGREDIENT GRID, MEASURED ──────────────────────────── */
.ings{grid-template-columns:repeat(3,1fr);gap:24px}
.ings .ing{min-height:363px}
.ing-media{height:172px}
.ing-media img{width:130px;height:130px}
.ings.c2{grid-template-columns:repeat(2,1fr)}
.ings.c4{grid-template-columns:repeat(3,1fr)}   /* their max is 3 across */
@media (max-width:1000px){.ings,.ings.c4{grid-template-columns:repeat(2,1fr)}
  .ings .ing{min-height:0}}
@media (max-width:640px){.ings,.ings.c2,.ings.c4{grid-template-columns:1fr}}

/* ── 2. HERO CONSTELLATION ───────────────────────────────────────────── */
.constellation{position:relative;display:grid;place-items:center;
  height:100%;min-height:clamp(330px,38vw,470px);padding:clamp(10px,1.6vw,24px)}
.constellation::before{content:"";position:absolute;inset:12% 8%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 26%,transparent),transparent 72%);
  filter:blur(8px)}
.con-core{position:relative;z-index:2;max-height:min(50vh,430px);width:auto;max-width:78%}
.hero-drop{position:absolute;width:var(--isize);z-index:1;opacity:0;
  animation:heroDrop 1.1s cubic-bezier(.16,.76,.22,1) var(--idelay) forwards}
.hero-drop img{display:block;width:100%;height:auto;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.24)) saturate(.9);
  animation:heroDrift var(--idur) ease-in-out var(--idelay) infinite alternate}
@keyframes heroDrop{from{opacity:0;transform:translateY(-16px) scale(.86)}
  to{opacity:.92;transform:none}}
@keyframes heroDrift{from{transform:translate(-3px,-5px) rotate(calc(var(--irot) * -.4))}
  to{transform:translate(4px,var(--idrift)) rotate(var(--irot))}}
@media (max-width:1024px){.constellation{min-height:300px}
  .hero-drop{width:calc(var(--isize) * .78)}}
@media (max-width:760px){.constellation{min-height:250px}
  .con-core{max-height:250px;max-width:66%}
  .hero-drop{width:calc(var(--isize) * .62)}}
@media (prefers-reduced-motion:reduce){
  .hero-drop{animation:none;opacity:.9}
  .hero-drop img{animation:none}}

/* ═══════════════════════════════════════════════════════════════════════
   v10 — the six alignment defects from the client's 15:50-15:53 thread.
   Measured before this pass: pricing cards 488 / 599 / 552px tall with their
   buttons on three different baselines.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. "Boxes are not properly done" — PRICING ───────────────────────
   Every card the same height, every internal row on the same baseline, and
   all three buttons on one line. The featured card is emphasised with
   colour and a ring, never by being a different size. */
.pricing{align-items:stretch}
.price{display:flex;flex-direction:column;height:100%;transform:none!important;
  padding:clamp(20px,2vw,28px)}
.price>.badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  white-space:nowrap}
.price .supply{min-height:2.6em;display:flex;align-items:center;justify-content:center;
  text-align:center;margin-top:.4rem}
.price .pic{height:150px;display:grid;place-items:center;margin-block:.5rem}
.price .pic img{max-height:150px;width:auto;object-fit:contain}
.price .amt{min-height:3.1rem;display:flex;align-items:baseline;justify-content:center}
.price .was,.price .tot{min-height:1.5em;text-align:center}
.price .best{min-height:1.7em;display:flex;align-items:center;justify-content:center;
  text-align:center}
.price ul{flex:1 1 auto;margin-block:.9rem}
.price .btn{margin-top:auto;width:100%;justify-content:center}
.price.feat{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent),
  0 26px 60px -30px rgba(10,14,20,.5)}

/* ── 2. "Need to align the boxes correctly" — COMPARISON TABLE ───────── */
.cmp{table-layout:fixed;width:100%}
.cmp th:first-child{width:34%}
.cmp th:not(:first-child),.cmp td{width:33%;text-align:left;vertical-align:middle}
.cmp th,.cmp td{padding:.85rem 1.1rem;height:56px}
.cmp thead th{vertical-align:bottom;padding-bottom:.9rem}
.cmp tbody tr>*{border-bottom:1px solid var(--line)}
.cmp .own{background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* ── 3. "Images need to be full" — CARD MEDIA FILLS ITS TILE ─────────── */
.card .cardmedia,.card>.pic,.pillars .pic,.router .pic{overflow:hidden;border-radius:var(--r-md)}
.card img:not(.icon):not(.prod-shot),
.grid .card img:not(.icon):not(.prod-shot){width:100%;height:100%;object-fit:cover;display:block}
.card figure,.card .media{margin:0;height:clamp(150px,15vw,196px);overflow:hidden;
  border-radius:var(--r-md)}
.card .media img{width:100%;height:100%;object-fit:cover}

/* ── 4. "Unreadable" — THE SUPPLEMENT LABEL ──────────────────────────── */
.figure-note{align-items:stretch}
.figure-note img{width:min(46%,440px);max-height:none;object-fit:contain;
  background:#fff;padding:10px;border-radius:var(--r-md);border:1px solid var(--line)}
.facts .sheet img{width:100%;max-height:none}
@media (max-width:760px){.figure-note img{width:100%}}

/* ── 5. "Streach the sentence" — CENTRED HEADINGS USE THE WIDTH ──────── */
.center.mw-md,.head{max-width:900px;margin-inline:auto}
.center.mw-md h2,.head h2{max-width:880px;margin-inline:auto}
.center.mw-md .lead,.center.mw-md .sub,.head .lead,.head .sub{max-width:78ch;margin-inline:auto}
.mw-lg{max-width:1000px}

/* ── 6. "The size of the boxes need to be consistent" — BONUSES ──────── */
.bonus{display:grid;grid-template-columns:clamp(96px,10vw,132px) 1fr;gap:clamp(14px,1.6vw,22px);
  align-items:center;min-height:150px;padding:clamp(16px,1.7vw,22px)}
.bonus>img,.bonus .pic{width:100%;height:118px;object-fit:contain;align-self:center}
.bonus .txt,.bonus>div:last-child{display:flex;flex-direction:column;justify-content:center;gap:.3rem}
.bonuses,.bonus-list{display:grid;gap:clamp(12px,1.4vw,18px);align-items:stretch}
.bonuses>*,.bonus-list>*{height:100%}

/* "Unreadable" — the label needs to be genuinely legible, not just bigger.
   Half the card, white ground, and it opens full-size in a new tab. */
.figure-note{gap:clamp(22px,2.6vw,38px);padding:clamp(20px,2.2vw,32px)}
.figure-note img{width:min(52%,520px)}
.figure-note a.label-zoom{display:block;width:min(52%,520px);flex:0 0 auto}
.figure-note a.label-zoom img{width:100%}
.facts .sheet{background:#fff;padding:14px;border-radius:var(--r-md);border:1px solid var(--line)}
.facts .sheet img{width:100%;height:auto;display:block}
@media (max-width:760px){.figure-note img,.figure-note a.label-zoom{width:100%}}

/* ══════════════════════════════════════════════════════════════════════
   v18 · CONSISTENCY PASS
   Everything below fixes a defect the site-wide auditor found, not a
   defect someone spotted in a screenshot. Each block names what it fixes.
   ══════════════════════════════════════════════════════════════════════ */

/* 1 · "The size of the boxes need to be consistent"
   The ingredient grid sized every ROW to its own tallest card, so rows came
   out 363px and 373px on the same page. One height for the whole grid. */
.ings{grid-auto-rows:1fr}
.ings>.ing{height:100%}

/* 2 · Buttons on one baseline.
   The featured package carried padding-block:38px against 28px on its
   neighbours, which lifted its button 10px above the other two. */
.pricing>.price,.pricing>.price.feat{padding-block:clamp(20px,2.2vw,28px)}
.price .best{min-height:1.7em}

/* 3 · Any card sitting in a row fills that row. Bonus cards were coming out
   193/193/171, the contact cards 302/276. */
.grid>.card,.grid>.card-dark,.grid>.bonus,.grid>.pcard,.grid>.testi,
.grid>.price,.g-2>.card,.g-2>.card-dark,.g-3>.card,.g-3>.testi,
.bonuses>*,.pillars>*,.router>*{height:100%}
.bonus,.card-dark{height:100%}

/* 4 · A lead paragraph should use the column it is given. Two were running
   at half the width of the heading above them. */
.head p.lead,.center>p.lead{max-width:76ch}
.hero .lead{max-width:60ch}

/* 5 · Product photography is now rendered at 2x its display size, so the
   browser has detail to work with. Ask it to use that detail. */
img{image-rendering:auto}
.price .pic img,.ing-media img,.prod-shot,.hero-stage>img{
  -webkit-backface-visibility:hidden;backface-visibility:hidden}

/* 6 · A stacked list of bonus cards: one height for all of them, whatever
   the copy length. (Single-column grid, so rows — not items — are equalised.) */
.grid.bonus-list{grid-auto-rows:1fr}
.grid.bonus-list>.bonus{height:100%}

/* 8 · "Bottles images should not be cut."
   The package thumbnail was height-constrained with width:auto, so a wide
   three-bottle render grew past its column and lost the outer bottles to the
   card's rounded clip. Constrain both axes. */
.price .pic img{max-width:100%;max-height:150px;width:auto;height:auto;object-fit:contain}

/* ═══════════════════════════════════════════════════════════════════════
   v19 — client review round, Zoom call 31 Aug 2026 (Ramanathan V)
   Reference for every value below: welavie.com, the client's own site.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. VIBRANT COLOUR MODE ─────────────────────────────────────────────
   His words: "vibrant gray color, blackish, it's not good".
   Cause: .t-hub was a desaturated slate ramp (#0A0D12 → #5B6B7E) with no
   brand hue in it at all. Re-themed to the emerald measured off
   welavie.com (#02201A / #064A3A / #0C7D64 / #10B981 + amber #F59E0B),
   purple kept as the secondary so it still ties to Yu Sleep / VisiFlora. */
body.t-hub{
  --b900:#02201A; --b800:#03362B; --b700:#064A3A; --b600:#0C7D64; --b400:#10B981;
  --accent:#F59E0B; --accent-ink:#3D2600; --accent-2:#7C5CFF;
  --cream:#FFFAF2; --tint:#F3FAF7;
  --w1:#E7F7F0; --w2:#FDF1DC; --w3:#E9F1FC; --w4:#F4EBFE;
  --glow:rgba(16,185,129,.46);
}

/* Dark grounds are never a flat near-black fill. Bright brand core +
   two colour radials + deep gradient — the recipe welavie.com uses on
   .hero-dark and .premium-benefits-section. */
.band--ink{
  background:
    radial-gradient(1200px 700px at 50% 36%, color-mix(in srgb,var(--b600) 94%, transparent) 0%, transparent 58%),
    radial-gradient(900px 560px at 10% 90%, color-mix(in srgb,var(--b400) 36%, transparent) 0%, transparent 58%),
    radial-gradient(780px 520px at 92% 10%, color-mix(in srgb,var(--accent) 18%, transparent) 0%, transparent 54%),
    linear-gradient(158deg, var(--b800) 0%, var(--b900) 100%);
  color:#EAF2EF;
}
.band--dark{
  background:
    radial-gradient(1100px 640px at 82% 6%, color-mix(in srgb,var(--b400) 48%, transparent) 0%, transparent 58%),
    radial-gradient(940px 580px at 6% 94%, color-mix(in srgb,var(--b600) 78%, transparent) 0%, transparent 58%),
    radial-gradient(720px 470px at 48% 48%, color-mix(in srgb,var(--accent) 13%, transparent) 0%, transparent 60%),
    linear-gradient(158deg, var(--b800) 0%, var(--b900) 100%);
}

/* Light grounds get faint tinted radials so they read as brand surface
   rather than flat paper (welavie tints every light section the same way). */
.band--white{
  background:
    radial-gradient(860px 470px at 6% 12%, color-mix(in srgb,var(--b400) 10%, transparent) 0%, transparent 30%),
    radial-gradient(780px 490px at 94% 84%, color-mix(in srgb,var(--accent) 11%, transparent) 0%, transparent 28%),
    var(--paper);
}
.band--cream{
  background:
    radial-gradient(800px 470px at 10% 16%, color-mix(in srgb,var(--accent) 14%, transparent) 0%, transparent 28%),
    radial-gradient(840px 510px at 90% 86%, color-mix(in srgb,var(--b400) 12%, transparent) 0%, transparent 27%),
    var(--cream);
}

/* "Black boxes, poor visibility" — cards on dark grounds were 5.5% white. */
.band--dark .card,.band--ink .card,.band--dark .pillar,.band--ink .pillar{
  background:color-mix(in srgb,#fff 9%, transparent);
  border-color:color-mix(in srgb,#fff 21%, transparent);
  backdrop-filter:blur(6px);
}

/* ── 2. THE MENU BAR SHOULD NOT BLEND IN ────────────────────────────── */
.ticker{
  background:linear-gradient(90deg,var(--b700) 0%,var(--b600) 50%,var(--b700) 100%);
  color:#fff;font-weight:600;
  border-bottom:1px solid color-mix(in srgb,var(--b400) 42%, transparent);
}
.ticker-track span i{color:var(--accent);font-style:normal}
.nav{
  background:color-mix(in srgb,var(--b800) 95%, transparent);
  border-bottom:1px solid color-mix(in srgb,var(--b400) 36%, transparent);
  box-shadow:0 12px 34px -24px rgba(0,0,0,.95);
}
.nav-links a{color:rgba(255,255,255,.87)}
.nav-links a:hover{background:color-mix(in srgb,var(--b400) 28%, transparent);color:#fff}

/* ── 3. TRUST MARKERS, FOUR CRITERIA BACK-TO-BACK, ROLLING ──────────────
   His ask, verbatim: "four metrics, four criteria, back-to-back … FDA,
   GPMC, GMP, made in USA … worldwide shipment". welavie.com runs the same
   strip under its own hero. */
.tmark{
  margin-top:clamp(26px,3vw,42px);
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
  overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.tmark-track{display:flex;width:max-content;animation:tmarkroll 34s linear infinite}
.tmark-track span{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.9em 1.75em;white-space:nowrap;
  font-size:.79rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.93);
}
.tmark-track span::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 24%, transparent);
}
@keyframes tmarkroll{to{transform:translateX(-50%)}}
.tmark:hover .tmark-track{animation-play-state:paused}
.tmark-note{
  font-size:.72rem;line-height:1.5;color:rgba(255,255,255,.52);
  margin-top:.85rem;max-width:62ch;
}
.band--white .tmark,.band--cream .tmark,.band--soft .tmark{border-color:var(--line)}
.band--white .tmark-track span,.band--cream .tmark-track span,.band--soft .tmark-track span{color:var(--ink-2)}
.band--white .tmark-note,.band--cream .tmark-note,.band--soft .tmark-note{color:var(--muted)}

/* ── 4. GUARANTEE + SHIPPING AT THE CTA MOMENT ──────────────────────── */
.cta-assure{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.15rem}
.hero-actions+.cta-assure,.center .cta-assure{justify-content:center}
.cta-assure b{
  display:inline-flex;align-items:center;gap:.5em;
  padding:.52em .95em;border-radius:var(--r-pill);
  font-size:.78rem;font-weight:700;letter-spacing:.005em;
  background:color-mix(in srgb,var(--accent) 17%, transparent);
  border:1px solid color-mix(in srgb,var(--accent) 40%, transparent);
  color:#fff;
}
.cta-assure b i{font-style:normal;font-size:.95em}
.band--white .cta-assure b,.band--cream .cta-assure b,.band--soft .cta-assure b,.band--tint .cta-assure b{
  color:var(--ink);
  background:color-mix(in srgb,var(--accent) 15%, #fff);
  border-color:color-mix(in srgb,var(--accent) 45%, transparent);
}
/* the guarantee is the one he wanted "highlighted" */
.cta-assure b.hi{
  background:var(--accent);color:var(--accent-ink);
  border-color:transparent;
  box-shadow:0 10px 24px -12px color-mix(in srgb,var(--accent) 85%, transparent);
}
.band--white .cta-assure b.hi,.band--cream .cta-assure b.hi,.band--soft .cta-assure b.hi,.band--tint .cta-assure b.hi{
  background:var(--accent);color:var(--accent-ink);
}

/* ── 5. SOCIAL PROOF BAND ───────────────────────────────────────────── */
.sproof{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(20px,3.4vw,46px);flex-wrap:wrap;
  padding:clamp(16px,2vw,24px) clamp(18px,2.4vw,30px);
  border-radius:var(--r-lg);
  background:color-mix(in srgb,#fff 8%, transparent);
  border:1px solid color-mix(in srgb,#fff 18%, transparent);
}
.band--white .sproof,.band--cream .sproof,.band--soft .sproof,.band--tint .sproof{
  background:var(--paper);border-color:var(--line);box-shadow:var(--sh-1);
}
.sproof .sp{text-align:center;min-width:118px}
.sproof .sp b{
  display:block;font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(1.45rem,2.5vw,2rem);letter-spacing:-.035em;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.sproof .sp span{display:block;font-size:.79rem;margin-top:.42rem;color:rgba(255,255,255,.68);line-height:1.4}
.band--white .sproof .sp span,.band--cream .sproof .sp span,.band--soft .sproof .sp span,.band--tint .sproof .sp span{color:var(--muted)}
.sproof .stars{color:#FFC24B;letter-spacing:.14em;font-size:1rem;line-height:1;display:block;margin-bottom:.3rem}

/* ── 6. MOTION: one section per scroll ──────────────────────────────────
   Proximity snap, not mandatory: a section taller than the viewport must
   never trap the reader. main.js also strips snap-align off any section
   that measures taller than the window. */
@media (min-width:1025px) and (min-height:501px){
  html.snap{scroll-snap-type:y proximity;scroll-padding-top:104px}
  html.snap section{scroll-snap-align:start}
  html.snap section.no-snap{scroll-snap-align:none}
}
@media (prefers-reduced-motion:reduce){
  html.snap{scroll-snap-type:none}
}

/* number rolling */
.stat b,.sproof .sp b{font-variant-numeric:tabular-nums}

/* hover pop — "mouse gaya toh pop hoke bhar aaya" */
.router a,.pillar,.pcard{transition:transform .24s cubic-bezier(.22,.9,.3,1),box-shadow .24s,border-color .24s}
.router a:hover,.pillar:hover,.pcard:hover{transform:translateY(-6px)}
.pop{position:relative}
.pop .pop-in{
  position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px) scale(.94);
  opacity:0;pointer-events:none;transition:.2s cubic-bezier(.22,.9,.3,1);
  background:var(--b800);color:#fff;border:1px solid color-mix(in srgb,var(--b400) 45%,transparent);
  padding:.55em .85em;border-radius:var(--r-sm);font-size:.76rem;font-weight:600;
  white-space:nowrap;box-shadow:var(--sh-2);z-index:5;
}
.pop:hover .pop-in{opacity:1;transform:translate(-50%,0) scale(1)}

/* ── 7. ALIGNMENT ───────────────────────────────────────────────────────
   "ye properly align nahi hai, koi right side, koi left side" */
.router a,.pillar,.pcard{height:100%}
.stats{align-items:start}
.sec>.wrap>.center,.hero>.wrap>.center{margin-inline:auto}
.sproof .stars{font-size:1.15rem;letter-spacing:.16em;margin-bottom:.42rem;text-shadow:0 1px 2px rgba(0,0,0,.12)}
.pillar.pop .pop-in{white-space:normal;max-width:min(260px,74vw);text-align:center;line-height:1.4}
.hero-meta .stars-i{color:#FFC24B;font-style:normal;letter-spacing:.09em}
.hero-meta .m b{color:inherit;font-weight:800}

/* ── v19b · HERO MODEL PANEL ────────────────────────────────────────────
   Client, 31 Aug: "human model photos", "imagery, thoda models rakhe",
   "model of product", "wo image wo es products related", "throw a sharp
   image". Every hero gets a real person AND the product, in one panel. */
.hero-model{
  position:relative;
  border-radius:var(--r-xl);
  overflow:hidden;
  aspect-ratio:4/5;
  width:100%;
  box-shadow:var(--sh-3);
  border:1px solid color-mix(in srgb,#fff 16%, transparent);
  background:var(--b800);
}
.hero-model>img.model{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);
  transition:transform 1.1s cubic-bezier(.22,.9,.3,1);
}
.hero-model:hover>img.model{transform:scale(1.055)}
/* brand-tinted veil so a stock photo reads as ours, never as a stock photo */
.hero-model::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, transparent 34%, color-mix(in srgb,var(--b900) 88%, transparent) 100%),
    linear-gradient(118deg, color-mix(in srgb,var(--b700) 46%, transparent) 0%, transparent 52%);
}
.band--white .hero-model::after,.band--cream .hero-model::after,.band--soft .hero-model::after{
  background:
    linear-gradient(180deg, transparent 44%, color-mix(in srgb,var(--b900) 62%, transparent) 100%),
    linear-gradient(118deg, color-mix(in srgb,var(--b600) 22%, transparent) 0%, transparent 48%);
}
/* the product shot, sitting over the lower corner — desktop only, never
   cropped, never over the model's face */
.hero-model .hm-prod{
  position:absolute;right:4.5%;bottom:3.5%;width:39%;z-index:3;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.55));
  animation:hmfloat 6.4s ease-in-out infinite;
}
.hero-model .hm-prod img{width:100%;height:auto;display:block}
@keyframes hmfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
/* caption strip over the veil */
.hero-model .hm-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:clamp(16px,2vw,26px) clamp(18px,2.2vw,28px);
  display:flex;flex-direction:column;gap:.34rem;
}
.hero-model .hm-cap b{
  font-family:var(--display);font-weight:800;color:#fff;
  font-size:clamp(1rem,1.4vw,1.22rem);letter-spacing:-.02em;line-height:1.2;
  max-width:56%;
}
.hero-model .hm-cap span{
  font-size:.8rem;color:rgba(255,255,255,.76);line-height:1.45;max-width:54%;
}
.hero-model .hm-badge{
  position:absolute;top:4.2%;left:4.2%;z-index:3;
  display:inline-flex;align-items:center;gap:.45em;
  padding:.44em .82em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.93);color:#12171C;
  font-size:.73rem;font-weight:800;letter-spacing:.01em;
  box-shadow:0 8px 22px -10px rgba(0,0,0,.55);
}
.hero-model .hm-badge i{font-style:normal;color:#F59E0B}

/* homepage: centred hero becomes copy-left / model-right, stretched */
.hero--model .hero-grid{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,4vw,58px);align-items:stretch;
}
.hero--model .hero-copy{display:flex;flex-direction:column;justify-content:center;text-align:left}
.hero--model .hero-copy .hero-actions{justify-content:flex-start}
.hero--model .hero-copy .cta-assure{justify-content:flex-start}
.hero--model .hero-media{display:flex;align-items:stretch}

/* MOBILE — repeat the variant selector at matching specificity so the
   stack rule wins (the v4 bug: a bare .hero-grid rule loses to
   .hero--model .hero-grid at every width). */
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  .hero--model .hero-grid{grid-template-columns:1fr;gap:clamp(24px,5vw,34px)}
  .hero--model .hero-copy{text-align:center}
  .hero--model .hero-copy .hero-actions,
  .hero--model .hero-copy .cta-assure{justify-content:center}
  .hero-model{aspect-ratio:1/1;max-width:520px;margin-inline:auto}
  .hero-model .hm-prod{width:33%;right:3.5%;bottom:3%}
  .hero-model .hm-cap b,.hero-model .hm-cap span{max-width:60%}
}
@media (max-width:520px){
  .hero-model .hm-prod{display:none}
  .hero-model .hm-cap b,.hero-model .hm-cap span{max-width:100%}
}
.hero--model .hero-copy .hero-actions{flex-wrap:wrap;gap:.7rem}
.hero--model .hero-copy .hero-actions .btn{flex:0 0 auto}
/* the media panel fills its column rather than being sized by ratio alone */
@media (min-width:901px) and (min-height:501px){
  .hero--model .hero-media{align-items:stretch}
  .hero--model .hero-model{aspect-ratio:auto;height:100%;min-height:min(72vh,600px)}
}
/* fullbleed hero already paints its own photo — dim it so the panel reads */
.hero--fullbleed.hero--model .bg{opacity:.42}
.hero--fullbleed.hero--model .hero-copy{position:relative;z-index:2}
/* the row, not the panel, carries the minimum height — a min-height on the
   panel made it 600px inside a 520px column, so the caption fell outside
   the overflow:hidden box and got sliced. */
@media (min-width:901px) and (min-height:501px){
  .hero--model .hero-grid{align-items:stretch}
  .hero--model .hero-media{align-items:stretch;min-height:min(72vh,600px)}
  .hero--model .hero-media>.hero-model{height:100%;min-height:0;aspect-ratio:auto}
}

/* ── v19c · NO TRUNCATION ANYWHERE ──────────────────────────────────────
   Deepak, 2026-09-01: "text should not truncate anywhere on image or
   website". Every ellipsis, clamp and fixed-width nowrap is removed; text
   wraps instead of being cut. */
.mcta .t b{
  white-space:normal;overflow:visible;text-overflow:clip;
  line-height:1.2;
}
.mcta .t span{white-space:normal;line-height:1.3;display:block}
.mcta{align-items:center;padding-block:.55rem}
.ptable tbody th{white-space:normal;width:auto;min-width:132px}
/* hero-model caption: wrap, never clip, and step down rather than overflow */
.hero-model .hm-cap b,.hero-model .hm-cap span{
  max-width:min(62%,34ch);overflow-wrap:anywhere;hyphens:auto;
}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  .hero-model .hm-cap b,.hero-model .hm-cap span{max-width:72%}
}
@media (max-width:520px){
  .hero-model .hm-cap b,.hero-model .hm-cap span{max-width:100%}
}
/* long unbroken strings (URLs, compound words) wrap rather than push a box wide */
.hm-cap,.cta-assure b,.sproof .sp span,.pillar p,.router a span,.tmark-note{overflow-wrap:break-word}

/* ── v19d · PHOTOGRAPHY IN THE BODY SECTIONS + PREMIUM CARD SYSTEM ──────
   "use images on other sections of websites too. make it premium." */
.router a,.pillar{padding:0;overflow:hidden;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(16,24,32,.05),0 12px 30px -20px rgba(16,24,32,.30);
  transition:transform .3s cubic-bezier(.22,.9,.3,1),box-shadow .3s,border-color .3s}
.router a:hover,.pillar:hover{
  transform:translateY(-7px);
  box-shadow:0 2px 5px rgba(16,24,32,.06),0 30px 60px -28px rgba(16,24,32,.45);
  border-color:color-mix(in srgb,var(--accent) 46%,var(--line))}
.band--dark .router a,.band--ink .router a,.band--dark .pillar,.band--ink .pillar{
  background:color-mix(in srgb,#fff 9%,transparent);
  border-color:color-mix(in srgb,#fff 21%,transparent)}

/* fixed-pixel media band — every card's image lines up across the row */
.rc-media{display:block;position:relative;height:158px;overflow:hidden;background:var(--tint)}
.rc-media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.01);transition:transform .55s cubic-bezier(.22,.9,.3,1)}
.router a:hover .rc-media img,.pillar:hover .rc-media img{transform:scale(1.075)}
.rc-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--b900) 26%,transparent) 0%,transparent 42%,
             color-mix(in srgb,var(--b900) 30%,transparent) 100%)}
.rc-media .ic{position:absolute;left:12px;bottom:12px;z-index:2;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-size:1.15rem;line-height:1;background:rgba(255,255,255,.94);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.rc-body{display:flex;flex-direction:column;gap:.5rem;
  padding:clamp(15px,1.7vw,20px);flex:1 1 auto}

/* the pillar keeps its numeral badge over the photo */
.pillar .rc-media .n{position:absolute;left:12px;bottom:12px;z-index:2;margin:0;
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-size:1.15rem;background:rgba(255,255,255,.94);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.pillar .rc-body h4{margin:0 0 .1rem}
.pillar .rc-body p{margin:0}

/* premium section headers: a hairline rule under the eyebrow, more air */
.sec>.wrap>.center .eyebrow,.sec>.wrap-wide>.center .eyebrow{margin-bottom:.55rem}
.sec .center.mw-md,.sec .center.mw-lg{margin-bottom:clamp(24px,2.8vw,38px)}

/* ── v19e · GUARANTEE BAND WITH PHOTOGRAPHY ───────────────────────────── */
.guarband.gb--photo{
  display:grid;grid-template-columns:.86fr 1.14fr;gap:0;align-items:stretch;
  padding:0;overflow:hidden;border-radius:var(--r-xl);
  box-shadow:0 2px 6px rgba(16,24,32,.06),0 34px 70px -34px rgba(16,24,32,.42)}
.gb--photo .gb-media{position:relative;overflow:hidden;min-height:300px;background:var(--tint)}
.gb--photo .gb-media img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform .7s cubic-bezier(.22,.9,.3,1)}
.guarband.gb--photo:hover .gb-media img{transform:scale(1.06)}
.gb--photo .gb-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 54%,color-mix(in srgb,var(--cream) 80%,transparent) 100%)}
.gb--photo .gb-num{position:absolute;left:clamp(16px,2vw,26px);top:clamp(16px,2vw,26px);z-index:2;
  margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:auto;min-width:96px;padding:.7rem 1rem;border-radius:var(--r-lg);
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 14px 32px -14px rgba(0,0,0,.6)}
.gb--photo .gb-num b{font-family:var(--display);font-weight:900;font-size:2.1rem;line-height:1;letter-spacing:-.04em}
.gb--photo .gb-num span{font-size:.74rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-top:.15rem}
.gb--photo .gb-body{display:flex;flex-direction:column;justify-content:center;gap:.9rem;
  padding:clamp(24px,3vw,44px)}
.gb--photo .gb-body h2{margin:0;font-size:clamp(1.55rem,2.4vw,2.1rem);line-height:1.12}
.gb--photo .gb-body p{margin:0}
.gb--photo .gb-body .btn{align-self:flex-start;margin-top:.35rem}
@media (max-width:860px),(max-height:500px) and (orientation:landscape){
  .guarband.gb--photo{grid-template-columns:1fr}
  .gb--photo .gb-media{min-height:230px}
  .gb--photo .gb-media::after{background:linear-gradient(180deg,transparent 48%,color-mix(in srgb,var(--cream) 82%,transparent) 100%)}
  .gb--photo .gb-body .btn{align-self:stretch;text-align:center;justify-content:center}
}
/* the badge sits ON the accent, so its text must be the accent's ink —
   an earlier .guarband rule was colouring the numeral accent-on-accent. */
.guarband.gb--photo .gb-num b,
.guarband.gb--photo .gb-num span{color:var(--accent-ink)}
.guarband.gb--photo .gb-num span{opacity:.82}
/* the hover tip lives above the card, so the card must not clip it —
   clip the media band instead and keep the card's corners from it. */
.pillar{overflow:visible}
.pillar>.rc-media{border-radius:var(--r-lg) var(--r-lg) 0 0}
.router a>.rc-media{border-radius:var(--r-lg) var(--r-lg) 0 0}
.pillar.pop .pop-in{z-index:20}

/* ── v19f · STAT BAND ALIGNMENT ─────────────────────────────────────────
   Only the rating had a stars row, so its number and label sat a line
   below the other three. Every .sp now reserves the row (empty span on
   the three without a rating) and the band is a real grid. */
.sproof{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;justify-items:center;gap:clamp(14px,2vw,30px)}
.sproof .sp{display:flex;flex-direction:column;align-items:center;width:100%}
.sproof .sp .stars{min-height:1.35rem;line-height:1.35rem;display:block;margin-bottom:.34rem}
.sproof .sp b{margin:0}
.sproof .sp span:not(.stars){margin-top:.42rem}
@media (max-width:820px){.sproof{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(18px,3vw,26px)}}
@media (max-width:420px){.sproof{grid-template-columns:1fr}}

/* ── v19g · ALIGNMENT PASS ──────────────────────────────────────────────
   Deepak, 2026-09-03: the stat band was ragged. Audited every row on every
   page; these are the real misalignments. */

/* 1 · the hero panel must reach the bottom of the copy column.
      `.hero-stage,.prod-stage,.hero-media{max-height:min(60vh,520px)}`
      (line ~1447) was capping it, so `align-self:stretch` could never win. */
@media (min-width:901px) and (min-height:501px){
  .hero--model .hero-media{max-height:none}
}

/* 2 · rows of equivalent cards: equal height, and every body copy starts
      on the same line so the row reads as one band, not a staircase. */
.pillars,.router,.books,.bento,.howto,.grid.g-3,.stats,.sproof{align-items:stretch}
.pillars>*,.router>*,.books>*,.bento>*,.howto>*,.grid.g-3>*{height:100%}
.pillars>*,.books>*,.bento>*,.howto>*,.grid.g-3>*{display:flex;flex-direction:column}
.pillars .rc-body,.books .bk-body,.bento .b-body{flex:1 1 auto}

/* headings in a card row reserve two lines, so the paragraph under each
   one starts at the same y whether the title wraps or not */
.pillars .rc-body h4,.books h4,.bento h4,.howto h4,
.grid.g-3 .card h3,.grid.g-3 .card h4{
  min-height:3.05em;      /* fallback: about two lines */
  min-height:2lh;         /* exact two lines of this heading's leading */
  margin-bottom:.15rem}

/* 3 · stat labels reserve two lines so the tiles stay the same height */
.sproof .sp span:not(.stars),.stats .stat span{min-height:2.55em}
/* bento stat tiles: fixed row structure so the number, heading and body
   line up tile to tile (they were centring against unequal content) */
.bento .b-third:not(.b-media){
  display:grid;grid-template-rows:auto auto 1fr;
  align-content:start;justify-items:start;gap:.34rem}
.bento .b-third:not(.b-media) .big{display:block;line-height:1;margin:0}
.bento .b-third:not(.b-media) h4{margin:0}
.bento .b-third:not(.b-media) p{margin:0}
/* catalogue cards: the three facts wrapped to a different number of rows
   per card, so the fact line and the CTA sat at different heights across
   the row. Fixed stack = identical structure in every card. */
.pcard .meta{display:flex;flex-direction:column;gap:.3rem;flex-wrap:nowrap}
.pcard .go{margin-top:.55rem}
/* at the 5-across catalogue width "Chewable tablet" wrapped where the
   other four formats did not, pushing that card's facts 20px out of line.
   Tighten the fact type here rather than shortening the copy. */
@media (min-width:1200px) and (min-height:501px){
  .pgrid .pcard .meta{font-size:.735rem;letter-spacing:-.004em}
}
/* the 5-across card body is only ~131px, so some facts wrap and some do
   not. Give every fact the same two-line slot: identical meta block in
   every card, so the facts and the CTA line up across the row. */
@media (min-width:1200px) and (min-height:501px){
  .pgrid .pcard .meta>span{min-height:2lh;display:block}
}

/* ═══════════════════════════════════════════════════════════════════════
   v20 — flicker, continuity, hero-in-one-frame   (Deepak, 2026-09-03)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · NO WHITE FLASH ─────────────────────────────────────────────────
   <body> was white. On a dark page any region the browser has not yet
   painted (fast scroll, gradient rasterising, snap transition) flashed
   white — the "flickering" and the white band in the screenshots.
   Paint the document itself in brand dark, and give every gradient band a
   solid background-COLOR underneath so the colour lands on the first
   frame and the gradient layers over it. */
html{background:var(--b900)}
body{background:var(--b900)}
.band--ink,.band--dark{background-color:var(--b900)}
.band--white{background-color:var(--paper)}
.band--cream{background-color:var(--cream)}
.band--soft,.band--tint{background-color:var(--tint)}
.band--ink,.band--dark,.band--white,.band--cream,.band--soft,.band--tint{
  background-repeat:no-repeat}

/* ── 2 · NEVER BLANK ON LOAD ────────────────────────────────────────────
   `.anim-ready [data-anim]{opacity:0}` hid the hero until the observer
   fired — measured at ~450-900ms, and up to 3.5s if the observer missed,
   which is the "goes blank and after sometime starts". The hero is above
   the fold and must never be gated; it keeps its own CSS entrance. */
.anim-ready .hero [data-anim],
.anim-ready .hero-copy,
.anim-ready .hero-media,
.anim-ready .hero .tmark,
.anim-ready .topbar [data-anim]{opacity:1!important;transform:none!important}

/* ── 3 · CONTINUITY — no scroll hijack ──────────────────────────────────
   scroll-snap fought the reader and forced repaints mid-gesture. Sections
   still read one-per-screen because the hero fills the frame; the scroll
   itself is now plain and smooth. */
html.snap{scroll-snap-type:none}
html.snap section{scroll-snap-align:none}

/* ── 4 · THE WHOLE HERO IN ONE FRAME, TRUST MARKERS INCLUDED ──────────── */
.hero--model{
  min-height:calc(100svh - var(--barh,104px));
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(14px,2.2vh,30px);
}
.hero--model>.wrap:first-of-type,
.hero--model>.wrap-wide:first-of-type{flex:0 0 auto}
.hero--model .hero-grid{align-items:center}
@media (min-width:901px) and (min-height:501px){
  .hero--model .hero-media{min-height:0}
  .hero--model .hero-media>.hero-model{min-height:min(58vh,520px)}
  .hero--model .hero-copy h1{font-size:clamp(2rem,3.5vw,3.15rem);line-height:1.06;margin-bottom:.75rem}
  .hero--model .hero-copy .lead{font-size:clamp(.92rem,1.05vw,1.02rem);line-height:1.55;margin-bottom:1rem}
  .hero--model .hero-copy .ticks{margin-top:.9rem!important;gap:.4rem}
  .hero--model .hero-copy .tick{font-size:.9rem}
  .hero--model .hero-actions{margin-top:1.05rem;gap:.6rem}
  .hero--model .hero-actions .btn{padding:.82em 1.3em;font-size:.95rem}
  .hero--model .cta-assure{margin-top:.7rem}
  .hero--model .hero-meta{margin-top:.85rem;padding-top:.7rem;gap:.5rem 1.2rem}
  .hero--model .tmark{margin-top:clamp(10px,1.6vh,20px)}
  .hero--model .tmark-track span{padding:.62em 1.5em;font-size:.73rem}
  .hero--model .tmark-note{margin-top:.5rem;font-size:.68rem;line-height:1.45;max-width:none}
}
/* short laptops: give the copy column priority, shrink the panel */
@media (min-width:901px) and (max-height:820px) and (min-height:501px){
  .hero--model .hero-media>.hero-model{min-height:min(52vh,430px)}
  .hero--model .hero-copy h1{font-size:clamp(1.8rem,2.9vw,2.5rem)}
  .hero--model .hero-copy .lead{font-size:.9rem;line-height:1.5}
}
/* one compact proof row replaces the old badge row + hero-meta */
.proofrow{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .95rem;
  margin-top:.95rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.14);
  font-size:.82rem;line-height:1.35}
.proofrow span{display:inline-flex;align-items:center;gap:.45em;color:rgba(233,240,242,.82)}
.proofrow i{font-style:normal}
.proofrow b{color:#fff;font-weight:800}
.proofrow .pr-rate .stars-i{color:#FFC24B;letter-spacing:.06em}
.band--white .proofrow,.band--cream .proofrow,.band--soft .proofrow{border-top-color:var(--line)}
.band--white .proofrow span,.band--cream .proofrow span,.band--soft .proofrow span{color:var(--ink-2)}
.band--white .proofrow b,.band--cream .proofrow b,.band--soft .proofrow b{color:var(--ink)}
/* the panel's 4:5 aspect-ratio was setting the row height (560w -> 700h),
   so the hero could never fit a frame. Drive the row from the frame
   instead and let the panel fill whatever that leaves. */
@media (min-width:901px) and (min-height:501px){
  .hero--model .hero-grid{
    height:calc(100svh - var(--barh,104px) - 132px);
    min-height:360px;
  }
  .hero--model .hero-media{min-height:0;max-height:none;height:100%}
  .hero--model .hero-media>.hero-model{
    aspect-ratio:auto!important;height:100%;min-height:0;max-height:none}
  .hero--model .hero-copy{min-height:0}
}

/* ── v20 · THREE-WAY COMPARISON ─────────────────────────────────────────
   "more is the obvious answer" — Yu Sleep / a stronger dose / doing
   nothing, in three columns that stay row-aligned. */
.cmp3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);align-items:stretch}
.cmp3 .cmp-col{display:flex;flex-direction:column;height:100%;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(18px,2vw,26px);
  box-shadow:0 1px 2px rgba(16,24,32,.05),0 14px 34px -22px rgba(16,24,32,.30)}
.cmp3 .cmp-col.cmp-feat{
  border-color:color-mix(in srgb,var(--accent) 52%,var(--line));
  box-shadow:0 2px 6px rgba(16,24,32,.07),0 26px 56px -26px color-mix(in srgb,var(--accent) 55%,transparent)}
.cmp3 .cmp-head{margin-bottom:.9rem;padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.cmp3 .cmp-tag{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;padding:.3em .72em;border-radius:99px;margin-bottom:.5rem;
  background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-2)}
.cmp3 .cmp-feat .cmp-tag{background:var(--accent);color:var(--accent-ink)}
.cmp3 .cmp-head b{display:block;font-family:var(--display);font-weight:800;
  font-size:clamp(1.02rem,1.25vw,1.18rem);letter-spacing:-.02em;line-height:1.25;
  min-height:2.5em;min-height:2lh}
.cmp3 ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-rows:repeat(4,auto);gap:.85rem;flex:1 1 auto}
.cmp3 li{display:grid;gap:.16rem}
.cmp3 li b{font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cmp3 li span{font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.cmp3 .cmp-feat li span{color:var(--ink)}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.cmp3{grid-template-columns:1fr;gap:14px}
  .cmp3 .cmp-head b{min-height:0}}
/* the stakes note under the card row */
.fine.center{text-align:center}

/* ── v20 · THE HERO IS NEVER INVISIBLE ──────────────────────────────────
   The entrance started every hero line at opacity 0 with delays running
   to .45s, so the headline was blank for ~300ms and the last line for
   nearly a second. It now starts readable and only settles into place —
   the movement is the same, the blank is gone. */
.anim-ready .hero-copy>*,
.anim-ready .hero .center>*,
.anim-ready .hero--fullbleed .wrap-wide>div:first-child>*{
  opacity:.55;transform:translateY(7px);
  animation:heroIn .34s cubic-bezier(.22,.9,.3,1) forwards}
.anim-ready .hero-copy>*:nth-child(1),.anim-ready .hero .center>*:nth-child(1){animation-delay:0s}
.anim-ready .hero-copy>*:nth-child(2),.anim-ready .hero .center>*:nth-child(2){animation-delay:.04s}
.anim-ready .hero-copy>*:nth-child(3),.anim-ready .hero .center>*:nth-child(3){animation-delay:.08s}
.anim-ready .hero-copy>*:nth-child(4),.anim-ready .hero .center>*:nth-child(4){animation-delay:.12s}
.anim-ready .hero-copy>*:nth-child(5),.anim-ready .hero .center>*:nth-child(5){animation-delay:.16s}
.anim-ready .hero-copy>*:nth-child(6),.anim-ready .hero .center>*:nth-child(6){animation-delay:.20s}
.anim-ready .prod-stage>img,.anim-ready .sys-ring .core,
.anim-ready .hero-visual,.anim-ready .fb-prod{opacity:.6;animation-delay:.06s;animation-duration:.45s}

/* ═══════════════════════════════════════════════════════════════════════
   v21 — vertical sections, pop-in, one screen per section
   Deepak, 2026-09-03: "client want vertical sections. not horizontal.
   fix for complete page. and they should have popup animations. and
   evrything should be visble in 1 section as mentioned earlier."
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · THE THREE FULL-WIDTH ROW LISTS BECOME VERTICAL CARDS ─────────── */

/* the plan: 3 stacked rows -> 3 columns */
.steps{grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,20px);align-items:stretch}
.steps>.step{flex-direction:column;align-items:flex-start;height:100%;
  gap:.7rem;padding:clamp(18px,2vw,26px)}
.steps>.step .n{margin-bottom:.1rem}
.steps>.step>div{display:flex;flex-direction:column;gap:.3rem}
.steps>.step b{min-height:2.4em;min-height:2lh}

/* bonuses: cover-left rows -> cover-on-top cards */
.bonuses,.bonus-list{grid-template-columns:repeat(3,minmax(0,1fr))}
.bonuses>.bonus,.bonus-list>.bonus{flex-direction:column;align-items:stretch;
  height:100%;padding:clamp(18px,2vw,26px);gap:clamp(12px,1.4vw,18px)}
.bonus .cover{width:100%;max-width:none;display:grid;place-items:center;
  height:clamp(132px,15vw,176px)}
.bonus .cover img{max-height:100%;width:auto;object-fit:contain}
.bonus>div:last-child{display:flex;flex-direction:column;gap:.35rem;flex:1 1 auto}
.bonus h4{min-height:2.4em;min-height:2lh;margin:0}
.bonus .val{margin-top:auto;padding-top:.5rem}

/* packages: full-width rows -> three price columns */
.prows{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,22px);align-items:stretch}
.prows>.prow{grid-template-columns:1fr!important;height:100%;
  text-align:center;gap:.75rem;padding:clamp(20px,2.2vw,30px) clamp(16px,1.8vw,24px);
  align-content:start}
.prows>.prow .rpic{height:clamp(104px,12vw,140px)}
.prows>.prow .rpic img{max-height:100%}
.prows>.prow .rmain{display:flex;flex-direction:column;gap:.5rem;align-items:center}
.prows>.prow .rsup{display:flex;flex-direction:column;align-items:center;gap:.4rem;
  min-height:3.4em}
.prows>.prow .rmain ul{list-style:none;margin:0;padding:0;display:grid;gap:.34rem;
  justify-items:center}
.prows>.prow .rprice{grid-column:auto!important;flex-direction:column;
  align-items:center!important;gap:.15rem;margin-top:.2rem}
.prows>.prow .rtot{display:block}
.prows>.prow>.btn{margin-top:auto;width:100%;justify-content:center}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  .steps,.bonuses,.bonus-list,.prows{grid-template-columns:1fr}
  .steps>.step b,.bonus h4{min-height:0}
  .prows>.prow .rsup{min-height:0}
}

/* ── 2 · POP-IN ─────────────────────────────────────────────────────────
   A real pop: scale up through a slight overshoot rather than a plain
   fade-and-slide. The hero stays ungated (v20) so nothing ever blanks. */
.anim-ready [data-anim]{
  transform:translateY(16px) scale(.965);
  transition:opacity .42s ease-out,
             transform .62s cubic-bezier(.34,1.56,.64,1)}
.anim-ready [data-anim].in{transform:none}
@media (prefers-reduced-motion:reduce){
  .anim-ready [data-anim]{transform:none!important;transition:none!important}
}

/* ── 3 · ONE SCREEN PER SECTION (desktop) ───────────────────────────────
   Each section is its own frame, content centred in it. Mobile keeps
   flowing normally — a phone screen cannot hold a nine-card grid. */
@media (min-width:901px) and (min-height:501px){
  .sec{
    min-height:calc(100svh - var(--barh,104px));
    display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(22px,3.4vh,52px);
  }
  .sec>.wrap,.sec>.wrap-wide{width:100%}
  /* section headers give back the space they were taking */
  .sec .center.mw-md,.sec .center.mw-lg{margin-bottom:clamp(16px,2vh,26px)}
  .sec .center .lead{margin-top:.7rem!important}
  .sec h2{margin-bottom:0}

  /* ingredients: 9 cards fit as 5+4 with a shorter media band */
  #inside .ings{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1vw,14px)}
  #inside .ing-media{height:clamp(84px,8.4vh,112px)}
  #inside .ing-media img{max-height:78%;width:auto}
  #inside .ing-body{padding:clamp(10px,1vw,14px)}
  #inside .ing-body h3{font-size:.92rem;margin-bottom:.15rem}
  #inside .ing-body p{font-size:.78rem;line-height:1.45}
  #inside .ing-kind{font-size:.6rem}

  /* packages: the three columns lose their padding, not their content */
  #packages .prows>.prow{padding:clamp(14px,1.6vw,20px) clamp(12px,1.4vw,18px);gap:.5rem}
  #packages .prows>.prow .rpic{height:clamp(76px,8vh,108px)}
  #packages .prows>.prow .rsup{min-height:3em}
  #packages .cta-assure{margin-top:.7rem!important}

  /* the reviews, the FAQ, the comparison and the plan tighten a notch */
  #reviews .revs,#reviews .grid{gap:clamp(10px,1.1vw,16px)}
  #compare .cmp3 li{gap:.1rem}
  #compare .cmp3 ul{gap:.62rem}
  #compare .cmp3 .cmp-col{padding:clamp(14px,1.6vw,20px)}
  #how .steps>.step{padding:clamp(14px,1.6vw,20px)}
  .faq details{padding-block:.62rem}
  .bonus .cover{height:clamp(112px,12vh,150px)}
}
/* second pass: the six sections that still ran past one screen. Media
   panels scale with the viewport so this holds at any laptop height. */
@media (min-width:901px) and (min-height:501px){
  /* the hour-by-hour night */
  #why .photo-card{max-height:min(44vh,380px);overflow:hidden}
  #why .photo-card img{height:100%;object-fit:cover}
  #why .tl,#why .hours{gap:.5rem}
  #why .hour,#why .tl-item{padding-block:.45rem}
  #why p{margin-bottom:.5rem}
  #why .split{align-items:center;gap:clamp(20px,2.4vw,38px)}

  /* nine ingredients */
  #inside .ing-media{height:clamp(70px,7vh,92px)}
  #inside .ing-body p{font-size:.75rem;line-height:1.4}
  #inside .ings{gap:clamp(8px,.8vw,12px)}

  /* reviews */
  #reviews .testi,#reviews .card{padding:clamp(13px,1.4vw,18px)}
  #reviews p{font-size:.86rem;line-height:1.5}

  /* packages */
  #packages .prows>.prow .rpic{height:clamp(64px,7vh,92px)}
  #packages .prows>.prow{padding:clamp(12px,1.4vw,18px)}
  #packages .prows>.prow .rmain ul{gap:.26rem;font-size:.84rem}

  /* the comparison just needs a hair */
  #compare .cmp3 ul{gap:.55rem}

  /* the FAQ accordion */
  .faq details{padding-block:.5rem}
  .faq details summary{font-size:.96rem}
  .faq{gap:.3rem}
}

/* ── v21 · HUB CTA IMAGE ────────────────────────────────────────────────
   The closing CTA on a five-product hub was showing one product's bottle.
   A person belongs there, not an arbitrary pack shot. */
.cta-pic{border-radius:var(--r-lg);overflow:hidden;height:100%;min-height:clamp(200px,26vh,300px)}
.cta-pic img{width:100%;height:100%;object-fit:cover;display:block}
.cta-card .grid{align-items:stretch}

/* ── v21 · THE PRODUCT RAIL AUTO-SCROLLS ──────────────────────────────── */
.prail{scroll-snap-type:x proximity;scroll-behavior:smooth}
.prail>.pslide{scroll-snap-align:start}
.rail-wrap::after{content:"";position:absolute;top:0;bottom:0;right:0;width:56px;
  pointer-events:none;z-index:2;transition:opacity .3s;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--tint) 92%,transparent))}
.rail-wrap.at-end::after{opacity:0}
/* ── v21 · FINAL FIT PASS — every section inside one screen ─────────── */
@media (min-width:901px) and (min-height:501px){
  /* the hub hero also carries a stats row, so its grid gets less room */
  body.t-hub .hero--model .hero-grid{height:calc(100svh - var(--barh,104px) - 250px)}
  body.t-hub .hero--model .stats{margin-top:clamp(12px,1.6vh,22px)!important}
  body.t-hub .hero--model .stat b{font-size:clamp(1.4rem,2.3vw,2rem)}
  body.t-hub .hero--model .stat span{font-size:.78rem;min-height:2.3em}

  /* trust pillars */
  #trust .pillars .rc-media{height:clamp(96px,11vh,136px)}
  #trust .pillars .rc-body{padding:clamp(12px,1.2vw,16px)}
  #trust .pillars p{font-size:.83rem;line-height:1.5}
  #trust .sproof{padding:clamp(10px,1.2vw,16px)}
  #trust .sproof .sp b{font-size:clamp(1.25rem,2vw,1.7rem)}

  /* the product rail */
  #products .pslide .ps-media{height:clamp(120px,14vh,178px)}
  #products .pslide .ps-body{padding:clamp(12px,1.3vw,18px)}
  #products .pslide p{font-size:.84rem;line-height:1.5}

  /* the at-a-glance table */
  #compare .ptable th,#compare .ptable td{padding:.5rem .7rem}
  #compare .ptable td b{font-size:1.25rem}
  /* was: max-height + overflow:auto — that clipped the last row. Never cap
     a content box to make a section fit; make the content actually fit. */

  /* yu-sleep: the night, the actives, the reviews, the packages, the FAQ */
  #why .split>*{min-width:0}
  #why .photo-card{max-height:min(38vh,320px)}
  #why .split{gap:clamp(18px,2vw,32px)}
  #inside .ings{grid-template-columns:repeat(5,minmax(0,1fr))}
  #inside .ing-media{height:clamp(58px,6vh,78px)}
  #inside .ing-body{padding:9px 10px}
  #inside .ing-body h3{font-size:.86rem}
  #inside .ing-body p{font-size:.72rem;line-height:1.35}
  #reviews .wall{gap:clamp(9px,1vw,13px)}
  #reviews .testi{padding:clamp(11px,1.2vw,15px)}
  #reviews .testi p{font-size:.83rem;line-height:1.45}
  #packages .prows>.prow .rpic{height:clamp(56px,6vh,80px)}
  #packages .center.mw-md{margin-bottom:clamp(10px,1.4vh,18px)}
  .faq details{padding-block:.42rem}
  .faq details summary{font-size:.92rem;line-height:1.35}
  .faq .a{font-size:.87rem;line-height:1.5}
}
/* bonus cards: the label and heading each reserve a fixed number of lines
   so the body copy starts on the same line in all three */
.bonus .lbl{display:block;min-height:1.3em;min-height:1lh}
.bonus h4{min-height:3.6em;min-height:3lh}   /* the third title runs to 3 lines */
.bonus p{margin:0}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){.bonus h4{min-height:0}}
/* force the three-line reserve — an earlier .bonus h4 rule was tying it to two */
/* The heading's wrapped line box is 34px while `lh` computes 25.4px, so a
   line-unit reserve under-shoots. Reserve the real three lines instead. */
@media (min-width:901px) and (min-height:501px){
  .bonuses>.bonus h4,.bonus-list>.bonus h4{min-height:102px}
}

/* ── v21 · THE ACTIVES BECOME TILES WITH A POP-UP ───────────────────────
   Deepak: "this section is too big. how can we fix this."
   Nine detailed cards cannot fit one screen by shrinking — they stop being
   readable. So the component changes: a compact tile carries the image,
   the category and the name, and the description pops up on hover or
   keyboard focus. Nothing is lost, and it uses the pop-up he asked for.
   Below 901px every tile shows its description inline, as before. */
@media (min-width:901px) and (min-height:501px){
  #inside .ings{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1vw,15px)}
  #inside .ings .ing{min-height:0}
  #inside .ing{position:relative;overflow:visible;cursor:default}
  #inside .ing-media{height:clamp(88px,10vh,124px)}
  #inside .ing-media img{max-height:84%;width:auto}
  #inside .ing-body{padding:10px 12px 14px;display:flex;flex-direction:column;gap:.25rem}
  #inside .ing-kind{font-size:.58rem;letter-spacing:.07em}
  #inside .ing-body h3{font-size:.9rem;line-height:1.25;margin:0}

  /* the description lifts out into a pop-over */
  #inside .ing-body p{
    position:absolute;left:50%;bottom:calc(100% + 10px);z-index:30;
    width:max(228px,104%);margin:0;padding:.72rem .85rem;
    background:var(--b800);color:rgba(255,255,255,.9);
    border:1px solid color-mix(in srgb,var(--b400) 46%,transparent);
    border-radius:var(--r-md);box-shadow:0 22px 46px -18px rgba(0,0,0,.65);
    font-size:.8rem;line-height:1.5;text-align:left;
    opacity:0;pointer-events:none;
    transform:translate(-50%,8px) scale(.94);
    transition:opacity .18s ease-out,transform .3s cubic-bezier(.34,1.56,.64,1);
  }
  #inside .ing-body p::after{
    content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
    border:7px solid transparent;border-top-color:var(--b800)}
  #inside .ing:hover .ing-body p,
  #inside .ing:focus-within .ing-body p{opacity:1;transform:translate(-50%,0) scale(1)}
  #inside .ing:hover{z-index:40}
  /* the tile lifts a little so the pop-up reads as attached to it */
  #inside .ing{transition:transform .22s cubic-bezier(.22,.9,.3,1),box-shadow .22s}
  #inside .ing:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
  /* first row's pop-up opens downward so it is never cut by the section top */
  #inside .ings>.ing:nth-child(-n+5) .ing-body p{bottom:auto;top:calc(100% + 10px);
    transform:translate(-50%,-8px) scale(.94)}
  #inside .ings>.ing:nth-child(-n+5) .ing-body p::after{top:auto;bottom:100%;
    border-top-color:transparent;border-bottom-color:var(--b800)}
  #inside .ings>.ing:nth-child(-n+5):hover .ing-body p,
  #inside .ings>.ing:nth-child(-n+5):focus-within .ing-body p{transform:translate(-50%,0) scale(1)}
  /* a quiet hint that there is more to read */
  #inside .ing-body h3::after{content:" ⓘ";font-size:.78em;opacity:.45}
}

/* ── v21 · #why — the aim card moves under the photo ────────────────────
   The copy column ran 706px while the photo column ran 421px, and the aim
   card sat below both, adding 234px the section could not afford. It now
   lives in the photo column's dead space: same content, 234px shorter. */
.why-aim{margin-top:clamp(16px,1.8vw,24px)}
.why-aim h4{margin-bottom:.45rem}
@media (min-width:901px) and (min-height:501px){
  #why .split>div:first-child{display:flex;flex-direction:column}
  #why .why-aim{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
    padding-block:clamp(18px,2vw,26px)}
  #why .why-aim p{font-size:.875rem;line-height:1.6}
  #why .lead{margin-bottom:clamp(14px,1.6vw,22px)!important}
}

/* ── v21 · THE LAST THREE OVER-HEIGHT SECTIONS ─────────────────────────
   Packages ran 864 against a 757 budget, reviews 795, the FAQ 803. None
   of them needed less content — they needed less air between it. */
@media (min-width:901px) and (min-height:501px){
  /* PACKAGES −107 */
  #packages .center.mw-md{margin-bottom:clamp(18px,2.2vh,28px)!important}
  #packages h2{font-size:clamp(1.7rem,2.5vw,2.15rem);line-height:1.14}
  #packages .prow{padding-block:clamp(12px,1.4vh,16px)}
  #packages .rpic{height:clamp(40px,4.6vh,52px)}
  #packages .rmain ul{gap:.18rem}
  #packages .rmain ul li{font-size:.83rem;line-height:1.45}
  #packages .rsup{font-size:.8rem}
  #packages .rprice .ramt .num{font-size:clamp(2.1rem,3vw,2.6rem)}
  #packages .cta-assure{margin-top:clamp(6px,.8vh,11px)}
  #packages .fine{margin-top:clamp(8px,1.2vh,14px)!important;font-size:.72rem}

  /* REVIEWS −38 */
  #reviews .center.mw-md{margin-bottom:clamp(18px,2.2vh,26px)!important}
  #reviews .wall .w{padding-block:clamp(16px,2vh,20px)}
  #reviews .fine{margin-top:clamp(10px,1.4vh,16px)!important}

  /* FAQ −97 · seven rows stacked one-per-line cannot fit a screen without
     squeezing the type. Two columns keeps the padding readable instead. */
  .sec:has(.faq) .center.mw-md{margin-bottom:clamp(16px,2vh,24px)!important}
  .faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(20px,2.4vw,34px);align-items:start;
    border-top:0;border-bottom:0}
  .faq details{border-top:1px solid var(--line)}
  .faq details:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .faq summary{font-size:.98rem}
  .faq .a{font-size:.875rem;line-height:1.6}
}

/* ── v21 · HOMEPAGE — trust and products to one screen ─────────────────
   Trust ran 815 and products 785 against 757. Both were carrying a
   three-line display heading and a 42–44px gap above their content. */
@media (min-width:901px) and (min-height:501px){
  #trust .center.mw-md h2,
  #products .center.mw-md h2{font-size:clamp(1.7rem,2.5vw,2.15rem);line-height:1.14}
  #trust .sproof{margin-bottom:clamp(16px,2.2vh,26px)!important}
  #trust .pillars{margin-top:clamp(16px,2.4vh,26px)!important}
  #trust .rc-body{padding-block:clamp(11px,1.4vh,15px)}
  #products .rail-wrap{margin-top:clamp(16px,2.4vh,26px)!important}
}

/* ── v21 · SHORT LAPTOPS (720–800px tall) ──────────────────────────────
   Every clamp on this page scales with viewport WIDTH, so a 1280×720
   laptop gets desktop type in a 657px budget. These scale the shared
   rhythm with HEIGHT instead — nothing is removed, only tightened. */
@media (min-width:901px) and (max-height:800px) and (min-height:501px){
  .sec{padding-block:clamp(16px,2.2vh,26px)}
  .sec .center.mw-md{margin-bottom:clamp(12px,2vh,20px)!important}
  .sec .center.mw-md h2,.sec .head h2{font-size:clamp(1.5rem,2vw,1.85rem);line-height:1.15}
  .sec .lead,.sec .sub{font-size:.93rem;line-height:1.55}
  .sec .eyebrow{margin-bottom:6px}
  .card,.card-dark,.step,.bonus,.prow,.w,.cmp3>*{padding-block:clamp(11px,1.6vh,16px)}
  .tl li{padding-bottom:clamp(10px,1.5vh,16px)}
  .tl li p{font-size:.85rem;line-height:1.5}
  .faq details{padding-block:clamp(9px,1.3vh,13px)}
  #why .why-aim p{font-size:.85rem;line-height:1.55}
  #packages .rpic{height:clamp(34px,4.4vh,46px)}
  #products .prail{padding-bottom:12px}
  #trust .rc-media{height:clamp(70px,9vh,92px)}
}

/* ── v21 · the last three at 1280×720 ───────────────────────────────── */
@media (min-width:901px) and (max-height:800px) and (min-height:501px){
  /* #formula — the label photo was setting a 579px row */
  #formula .figure-note{align-items:center}
  #formula .label-zoom{display:block;max-height:calc(100svh - 260px)}
  #formula .label-zoom img{max-height:calc(100svh - 260px);width:auto;object-fit:contain;margin-inline:auto}
  #formula .sub{font-size:.88rem;line-height:1.55}

  /* #packages — four assurance badges were wrapping to two rows */
  #packages .cta-assure{gap:8px}
  #packages .cta-assure b{font-size:.72rem;padding-block:5px;white-space:nowrap}
  #packages .fine{font-size:.7rem;line-height:1.4}
  #packages .prow{padding-block:clamp(9px,1.2vh,13px)}

  /* #why — the copy column is the tall one; the photo column has slack */
  #why .tl li{padding-bottom:clamp(7px,1.1vh,12px)}
  #why .tl li p{font-size:.81rem;line-height:1.45}
  #why .tl li b{font-size:.95rem}
  #why .lead{font-size:.9rem;line-height:1.5}
  #why .why-aim p{font-size:.81rem;line-height:1.5}
}
@media (min-width:901px) and (max-height:800px) and (min-height:501px){
  #why h2{font-size:clamp(1.42rem,1.9vw,1.72rem);line-height:1.16}
  #why .eyebrow{margin-bottom:4px}
  #why .tl li{padding-bottom:clamp(6px,1vh,11px)}
}

/* ── v21 · #inside tile corrections ────────────────────────────────────
   The base rule sizes ingredient art at 128–130px square. Inside an 82px
   tile head that overflowed 32px and sat on top of the category pill.
   Also: nine tiles across five columns left the last row hanging left,
   so the grid is ten half-columns and row two starts one in. */
@media (min-width:901px) and (min-height:501px){
  /* percentage heights would not resolve against the grid area here, so the
     art is sized in absolute px — the only value that cannot be ambiguous */
  #inside .ing-media{height:92px;padding:6px 6px 2px;overflow:hidden}
  #inside .ing-media img{width:74px!important;height:74px!important;
    max-width:none;max-height:none;object-fit:contain}
  /* ten half-columns so the four-tile second row sits centred under the five */
  #inside .ings{grid-template-columns:repeat(10,minmax(0,1fr))}
  #inside .ings>.ing{grid-column:auto / span 2}
  #inside .ings>.ing:nth-child(6){grid-column:2 / span 2}
  #inside .head{text-align:center}
  #inside .head .sub{margin-inline:auto;max-width:62ch}
}
@media (min-width:901px) and (max-height:800px) and (min-height:501px){
  #inside .ing-media{height:76px}
  #inside .ing-media img{width:62px!important;height:62px!important}
}

/* ── v21 · COMPARISON TABLE — fit it, do not clip it ───────────────────
   The table was capped at 470px with overflow:auto, which hid the last
   row behind an inner scrollbar. The real cause was table-layout:fixed
   handing all six columns ~equal width, so "What it's built for" wrapped
   to three lines. Given a proper column ration it wraps to two and the
   whole table fits with room to spare. */
@media (min-width:901px) and (min-height:501px){
  #compare .tbl-scroll{max-height:none;overflow-x:auto;overflow-y:visible}
  #compare .center.mw-md{margin-bottom:clamp(14px,2.2vh,24px)!important}
  #compare .fine{margin-top:clamp(8px,1.4vh,16px)!important}
  #compare .cmp{table-layout:fixed;font-size:.87rem}
  #compare .cmp th,#compare .cmp td{width:auto;height:auto;padding:.62rem .9rem}
  #compare .cmp thead th:nth-child(1){width:14%}
  #compare .cmp thead th:nth-child(2){width:34%}
  #compare .cmp thead th:nth-child(3){width:14%}
  #compare .cmp thead th:nth-child(4){width:13%}
  #compare .cmp thead th:nth-child(5){width:14%}
  #compare .cmp thead th:nth-child(6){width:11%}
}

/* ── FIX · dropdown product names were white on a white panel ───────────
   `.nav-links a{color:rgba(255,255,255,.87)}` is declared after
   `.drop-menu a{color:var(--ink)}` at equal specificity, so it won and the
   product name vanished; only the `<small>` category, which carries its own
   colour rule, stayed visible. */
.nav-links .drop-menu a{color:var(--ink)}
.nav-links .drop-menu a:hover,
.nav-links .drop-menu a:focus-visible{color:var(--ink);background:var(--paper-2)}
.nav-links .drop-menu small{color:var(--muted)}

/* ═══════════════════════════════════════════════════════════════════════
   FIX ROUND — three live defects, all the same root cause:
   an image with no absolute size constraint, and an override written
   against the wrong property.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1 · PRICING CARDS — the bottles were covering the whole card ───────
   `.rpic{overflow:visible}` + `img{max-height:100%}` against a clamp'd
   height: until the lazy image loads it measures 0×0 (which is why every
   headless check passed), and once it loads it takes natural size and
   paints over the price, the list and the button. Absolute px + clip. */
.prows>.prow .rpic{
  height:132px;display:grid;place-items:center;overflow:hidden;flex:0 0 auto}
.prows>.prow .rpic img{
  width:auto!important;height:auto!important;
  max-width:min(100%,250px);max-height:124px;object-fit:contain;
  transition:transform .32s cubic-bezier(.22,.9,.3,1)}
@media (min-width:901px) and (max-height:900px) and (min-height:501px){
  .prows>.prow .rpic{height:104px}
  .prows>.prow .rpic img{max-height:98px}}
@media (min-width:901px) and (max-height:800px) and (min-height:501px){
  .prows>.prow .rpic{height:86px}
  .prows>.prow .rpic img{max-height:80px}}

/* the pop-up he asked for, on the pricing cards */
.prows>.prow{
  transition:transform .3s cubic-bezier(.34,1.4,.6,1),
             box-shadow .3s ease-out, border-color .3s ease-out;
  will-change:transform}
.prows>.prow:hover,.prows>.prow:focus-within{
  transform:translateY(-8px);
  box-shadow:0 30px 60px -26px rgba(12,18,24,.42);
  border-color:color-mix(in srgb,var(--accent) 62%,transparent);
  z-index:3}
.prows>.prow:hover .rpic img{transform:scale(1.07)}
.prows>.prow .btn{transition:transform .3s cubic-bezier(.34,1.4,.6,1),filter .3s}
.prows>.prow:hover .btn{transform:translateY(-2px);filter:brightness(1.05)}

/* ── 2 · BONUS CARDS — they never went vertical ────────────────────────
   `.bonus` is `display:grid`, so the `flex-direction:column` written to
   turn it into a vertical card did nothing at all: it stayed a two-column
   image|text card, and `height:100%` + `margin-top:auto` on the value
   line then spread the content into two large holes. */
.bonuses>.bonus,.bonus-list>.bonus{
  display:flex!important;flex-direction:column;align-items:stretch;
  grid-template-columns:none;gap:0;padding:0;overflow:hidden;height:100%}
.bonuses>.bonus .cover,.bonus-list>.bonus .cover{
  width:100%;max-width:none;flex:0 0 auto;
  height:186px;display:grid;place-items:center;padding:16px 16px 8px;
  background:linear-gradient(162deg,
    color-mix(in srgb,var(--accent-2,var(--accent)) 12%,var(--card,#fff)),
    var(--card,#fff))}
.bonuses>.bonus .cover img,.bonus-list>.bonus .cover img{
  width:auto!important;height:auto!important;
  max-width:min(92%,200px);max-height:168px;object-fit:contain}
.bonuses>.bonus>div:last-child,.bonus-list>.bonus>div:last-child{
  display:flex;flex-direction:column;gap:.32rem;
  padding:clamp(14px,1.5vw,20px) clamp(16px,1.7vw,22px) clamp(16px,1.8vw,22px);
  flex:1 1 auto}
.bonuses>.bonus h4,.bonus-list>.bonus h4{margin:0;line-height:1.25}
.bonuses>.bonus p,.bonus-list>.bonus p{margin:0}
.bonuses>.bonus .val,.bonus-list>.bonus .val{margin-top:auto;padding-top:.7rem}
.bonuses>.bonus,.bonus-list>.bonus{
  transition:transform .3s cubic-bezier(.34,1.4,.6,1),box-shadow .3s}
.bonuses>.bonus:hover,.bonus-list>.bonus:hover{
  transform:translateY(-8px);box-shadow:0 30px 60px -26px rgba(12,18,24,.4)}
.bonuses>.bonus:hover .cover img,.bonus-list>.bonus:hover .cover img{
  transform:scale(1.05);transition:transform .32s cubic-bezier(.22,.9,.3,1)}
@media (min-width:901px) and (max-height:800px) and (min-height:501px){
  .bonuses>.bonus .cover,.bonus-list>.bonus .cover{height:150px}
  .bonuses>.bonus .cover img,.bonus-list>.bonus .cover img{max-height:134px}}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  .bonuses>.bonus,.bonus-list>.bonus{height:auto}
  .bonuses>.bonus .cover,.bonus-list>.bonus .cover{height:170px}
  .bonuses>.bonus .cover img,.bonus-list>.bonus .cover img{max-height:152px}}

/* ── PACKAGES · give the product shot real presence ─────────────────────
   The bottles are portrait (820×1220), so a short art band renders them
   ~80px wide and the card reads as empty at the top. Space is reclaimed
   from the assurance row (was wrapping to two lines), the fine print and
   the section head, and handed to the art. */
@media (min-width:901px) and (min-height:501px){
  #packages .cta-assure{flex-wrap:nowrap;gap:10px}
  #packages .cta-assure b{font-size:.71rem;padding-block:5px;white-space:nowrap}
  #packages .fine{white-space:nowrap;font-size:.71rem}
  #packages .center.mw-md{margin-bottom:clamp(10px,1.4vh,16px)!important}
  #packages .center.mw-md .lead{font-size:.9rem;margin-top:.5rem!important}

  #packages .prows>.prow .rpic{height:196px}
  #packages .prows>.prow .rpic img{max-height:188px;max-width:min(100%,168px)}
}
@media (min-width:901px) and (max-height:900px) and (min-height:501px){
  #packages .prows>.prow .rpic{height:150px}
  #packages .prows>.prow .rpic img{max-height:142px}
}
@media (min-width:901px) and (max-height:800px) and (min-height:501px){
  #packages .prows>.prow .rpic{height:96px}
  #packages .prows>.prow .rpic img{max-height:90px}
}

/* ── SCROLL FLICKER — the two remaining causes ──────────────────────────
   1. The ticker collapsed by animating HEIGHT, and the class toggled on a
      6px scroll reversal. Every small wheel wobble relaid out the page and
      shoved everything up and down. It is now a compositor-only transform
      on the whole bar, with real hysteresis in the JS.
   2. `backdrop-filter` on every dark card made the browser re-rasterise
      what is behind each one on every scrolled frame, for no visible gain
      on an opaque gradient band. Removed; the cards get a slightly more
      solid fill instead. The nav keeps its blur — that one is over moving
      content and actually reads. */
.topbar{will-change:transform;transition:transform .3s cubic-bezier(.22,.9,.3,1)}
.topbar.shrunk{transform:translateY(calc(-1 * var(--tickerh,34px)))}
.topbar.shrunk .ticker{height:auto;opacity:1;overflow:hidden;transition:none}
.topbar .ticker{transition:none}

.band--dark .card,.band--ink .card{
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:rgba(255,255,255,.075)}

/* the blurred bar gets its own layer so the page behind it is not
   re-rasterised on every frame */
.nav{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  /* translateZ alone gives the bar its own compositor layer. `contain:paint`
     was here too and CLIPPED the Products drop-menu to the bar's own box. */
  transform:translateZ(0)}

/* ═══════════════════════════════════════════════════════════════════════
   HOME · THE ROUTER BECOMES THE PAGE'S SIGNATURE SECTION
   It was five small photos on white cards — the same shape as every other
   grid on the page, and the same shape the client's own site uses. It is
   now a tall photo tile with the copy over a scrim, and the formula that
   answers the problem slides up on hover or keyboard focus. Big imagery,
   a real pop-up, and it does the page's actual job: routing.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:901px) and (min-height:501px){
  #problem .router{gap:clamp(12px,1.3vw,18px)}
  #problem .router a{
    position:relative;overflow:hidden;isolation:isolate;
    min-height:clamp(300px,42vh,420px);
    border:1px solid var(--line);
    box-shadow:0 18px 44px -30px rgba(12,18,24,.5)}

  /* the photo fills the tile */
  #problem .router a .rc-media{
    position:absolute;inset:0;height:auto;z-index:0;border-radius:inherit}
  #problem .router a .rc-media img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .7s cubic-bezier(.22,.9,.3,1)}
  #problem .router a:hover .rc-media img,
  #problem .router a:focus-visible .rc-media img{transform:scale(1.07)}
  /* a scrim strong enough that the copy is always readable */
  #problem .router a .rc-media::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,
      rgba(2,20,16,.00) 0%, rgba(2,20,16,.06) 30%,
      rgba(2,20,16,.52) 62%, rgba(2,20,16,.90) 86%, rgba(2,20,16,.96) 100%)}
  #problem .router a .rc-media .ic{
    left:14px;top:14px;bottom:auto;font-size:1.15rem;
    background:rgba(255,255,255,.16);backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.24)}

  /* the copy sits over the photo */
  #problem .router a .rc-body{
    position:relative;z-index:2;
    flex:1 1 auto;justify-content:flex-end;   /* copy sits on the scrim */
    display:flex;flex-direction:column;gap:.34rem;
    padding:clamp(14px,1.5vw,20px);
    transition:transform .34s cubic-bezier(.22,.9,.3,1)}
  #problem .router a .rc-body .to{margin-top:.15rem}
  #problem .router a .rc-body b{
    color:#fff;font-size:clamp(1rem,1.15vw,1.16rem);letter-spacing:-.02em;
    text-shadow:0 2px 14px rgba(0,0,0,.5)}
  #problem .router a .rc-body>span{
    color:rgba(255,255,255,.84);font-size:.79rem;line-height:1.5}
  #problem .router a .rc-body .to{
    margin-top:.2rem;color:var(--accent);font-weight:800}
  #problem .router a:hover .rc-body,
  #problem .router a:focus-within .rc-body{transform:translateY(-2px)}
  #problem .router a .rc-body .to{transition:opacity .2s ease-out}
  #problem .router a:hover .rc-body .to,
  #problem .router a:focus-within .rc-body .to{opacity:0}

  /* the formula that answers the problem, revealed */
  #problem .rc-pop{
    position:absolute;left:0;right:0;bottom:0;z-index:3;
    display:flex;flex-direction:column;gap:.4rem;
    padding:clamp(13px,1.4vw,18px);
    background:linear-gradient(180deg,var(--b800) 0%,var(--b900) 100%);
    border-top:1px solid color-mix(in srgb,var(--b400) 52%,transparent);
    /* parked INSIDE the card: a panel held below the fold with
       translateY(101%) still extends the card's scroll box, which reads as
       clipped content to the truncation audit. Rise-and-fade instead. */
    opacity:0;visibility:hidden;
    transform:scale(.955);transform-origin:50% 100%;
    transition:opacity .24s ease-out,
               transform .42s cubic-bezier(.28,1.3,.42,1),
               visibility 0s linear .42s;
    will-change:transform,opacity}
  #problem .router a:hover .rc-pop,
  #problem .router a:focus-within .rc-pop{
    opacity:1;visibility:visible;transform:scale(1);
    transition:opacity .2s ease-out,
               transform .42s cubic-bezier(.28,1.3,.42,1),visibility 0s}
  #problem .rc-pop b{
    font-family:var(--display);font-weight:800;color:#fff;
    font-size:clamp(1.02rem,1.2vw,1.2rem);letter-spacing:-.02em}
  #problem .rc-meta{display:flex;flex-wrap:wrap;gap:5px}
  #problem .rc-meta i{
    font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.01em;
    color:rgba(255,255,255,.9);
    background:rgba(255,255,255,.11);
    border:1px solid color-mix(in srgb,var(--b400) 40%,transparent);
    border-radius:var(--r-pill);padding:.3em .66em;white-space:nowrap}
  #problem .rc-meta i:last-child{
    background:color-mix(in srgb,var(--accent) 92%,transparent);
    color:var(--accent-ink);border-color:transparent}
}
/* below 901px the reveal panel is always shown, stacked, no hover needed */
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  #problem .rc-pop{
    display:flex;flex-direction:column;gap:.4rem;
    padding:12px 14px 14px;border-top:1px solid var(--line)}
  #problem .rc-pop b{font-family:var(--display);font-weight:800}
  #problem .rc-meta{display:flex;flex-wrap:wrap;gap:5px}
  #problem .rc-meta i{font-style:normal;font-size:.68rem;font-weight:700;
    background:var(--tint);border-radius:var(--r-pill);padding:.3em .66em;color:var(--ink-2)}
}

/* ── HOME · CUSTOMER VOICES — a whole screen was holding three small cards
   floating in white. Same words, given the weight they deserve: a dark
   band, a large opening quote, bigger faces, and cards that fill it. */
#voices .wall-big{align-items:stretch}
#voices .testi{
  position:relative;height:100%;display:flex;flex-direction:column;gap:.9rem;
  padding:clamp(22px,2.4vw,34px) clamp(22px,2.4vw,32px) clamp(24px,2.6vw,34px);
  background:rgba(255,255,255,.062);
  border:1px solid color-mix(in srgb,var(--b400) 30%,transparent);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.8);
  transition:transform .3s cubic-bezier(.34,1.3,.6,1),
             box-shadow .3s, border-color .3s, background .3s}
#voices .testi::before{
  content:"\201C";position:absolute;right:.22em;top:-.1em;
  font-family:var(--display);font-weight:800;font-size:5.6rem;line-height:1;
  color:color-mix(in srgb,var(--b400) 20%,transparent);pointer-events:none}
#voices .testi:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,.09);
  border-color:color-mix(in srgb,var(--accent) 52%,transparent);
  box-shadow:0 38px 76px -34px rgba(0,0,0,.9)}
#voices .testi .who{display:flex;align-items:center;gap:.75rem}
#voices .testi .who img{
  width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid color-mix(in srgb,var(--b400) 62%,transparent);
  box-shadow:0 8px 20px -8px rgba(0,0,0,.7)}
#voices .testi .who b{
  display:block;color:#fff;font-family:var(--display);font-weight:800;
  font-size:1rem;letter-spacing:-.01em}
#voices .testi .who span{
  display:block;color:var(--accent);font-size:.74rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;margin-top:.1rem}
#voices .testi .stars{color:var(--accent);font-size:1rem;letter-spacing:.14em}
#voices .testi q{
  position:relative;z-index:1;display:block;quotes:none;
  color:rgba(255,255,255,.9);
  font-size:clamp(.94rem,1.05vw,1.06rem);line-height:1.66;margin-top:auto}
#voices .fine{color:rgba(255,255,255,.5)}
@media (min-width:901px) and (max-height:800px) and (min-height:501px){
  #voices .testi{padding:clamp(16px,1.8vw,24px);gap:.6rem}
  #voices .testi .who img{width:46px;height:46px}
  #voices .testi q{font-size:.9rem;line-height:1.58}
  #voices .testi::before{font-size:4.4rem}
}

/* ── HOME · "WORTH CHECKING" — four flat cards with a small numeral.
   Same content, given a real visual system: an oversized outlined numeral
   as a watermark, an accent rule that draws across on hover, and a lift. */
#choose .howto{gap:clamp(14px,1.6vw,20px)}
#choose .howto .h{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(22px,2.2vw,30px) clamp(20px,2vw,26px) clamp(22px,2.2vw,28px);
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 2px 4px rgba(16,24,32,.04);
  transition:transform .3s cubic-bezier(.34,1.3,.6,1),
             box-shadow .3s, border-color .3s}
/* the small counter badge is replaced by an oversized watermark */
#choose .howto .h::before{
  position:static;display:block;z-index:1;
  font-size:clamp(2.1rem,2.9vw,3.1rem);line-height:1;font-weight:900;
  margin:0 0 .55rem;letter-spacing:-.03em;
  color:transparent;
  -webkit-text-stroke:2px color-mix(in srgb,var(--b400) 46%,transparent);
  transition:color .34s ease-out,-webkit-text-stroke-color .34s ease-out,
             transform .4s cubic-bezier(.34,1.3,.6,1);
  pointer-events:none}
#choose .howto .h::after{
  content:"";position:absolute;left:0;top:0;height:3px;width:0;z-index:2;
  background:linear-gradient(90deg,var(--accent),var(--b400));
  transition:width .45s cubic-bezier(.22,.9,.3,1)}
#choose .howto .h:hover,#choose .howto .h:focus-within{
  transform:translateY(-8px);
  border-color:color-mix(in srgb,var(--accent) 44%,var(--line));
  box-shadow:0 30px 62px -30px rgba(16,24,32,.36)}
#choose .howto .h:hover::after{width:100%}
#choose .howto .h:hover::before{
  color:color-mix(in srgb,var(--accent) 88%,transparent);
  -webkit-text-stroke-color:transparent;
  transform:translateY(-2px)}
#choose .howto .h h4{position:relative;z-index:1;
  font-size:clamp(1rem,1.15vw,1.14rem);line-height:1.3;margin-bottom:.5rem}
#choose .howto .h p{position:relative;z-index:1}
@media (min-width:901px) and (max-height:800px) and (min-height:501px){
  #choose .howto .h{padding:clamp(15px,1.7vw,21px)}
  #choose .howto .h::before{font-size:clamp(1.8rem,2.4vw,2.4rem);margin-bottom:.4rem}
  #choose .howto .h p{font-size:.83rem;line-height:1.5}
}

/* ── ROUTER / VOICES · row alignment ────────────────────────────────────
   The router copy is bottom-anchored, so a two-line description put its
   title one line higher than a three-line one (measured Δ19px). Reserve
   the description at three lines in px — `lh` under-shoots when the
   rendered line box differs from the computed line-height. */
@media (min-width:901px) and (min-height:501px){
  #problem .router a .rc-body>span:not(.to){min-height:57px;display:block}
}
/* top-align the name block so a label that wraps in a narrow column cannot
   shift the name off the row's shared baseline */
#voices .testi .who{align-items:flex-start}
#voices .testi .who>div{display:block;padding-top:2px}
#voices .testi .who b{line-height:1.25}

/* ═══════════════════════════════════════════════════════════════════════
   CLIENT ROUND — Ramanathan, WhatsApp 2026-09-03
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 8 · "can we have the rolling banner complete page" ─────────────────
   The trust marquee sat inside .wrap, so it stopped short of both edges
   and left the empty band he circled. Full-bleed, with overflow-x:clip on
   the section so the 50vw trick can never create a horizontal scrollbar. */
.hero--model{overflow-x:clip}
.hero--model .tmark{
  margin-inline:calc(-1 * (50vw - 50%));
  padding-inline:clamp(16px,3vw,44px);
  border-radius:0;border-left:0;border-right:0;
  width:auto;max-width:none}

/* ── 9 · "can we allign Tabs properly" ─────────────────────────────────
   Two buttons on one row and two assurance chips on the next, in two
   different colour treatments and two different heights, read as ragged.
   One left edge, one chip style, one rhythm. */
.hero-copy .hero-actions{
  display:flex;flex-wrap:wrap;align-items:stretch;
  gap:clamp(10px,1vw,14px)}
.hero-copy .hero-actions .btn{
  min-height:52px;display:inline-flex;align-items:center;justify-content:center}
.hero-copy .cta-assure{
  display:flex;flex-wrap:wrap;align-items:stretch;
  gap:clamp(10px,1vw,14px);
  margin-top:clamp(10px,1vw,14px);
  justify-content:flex-start}
.hero-copy .cta-assure b,
.hero-copy .cta-assure b.hi{
  display:inline-flex;align-items:center;gap:.5em;
  min-height:38px;margin:0;
  padding:.4em .95em;
  font-size:.78rem;font-weight:700;line-height:1.25;
  background:rgba(255,255,255,.09);
  border:1px solid color-mix(in srgb,var(--b400) 40%,transparent);
  color:rgba(255,255,255,.92);
  border-radius:var(--r-pill)}
.hero-copy .cta-assure b i{font-style:normal;line-height:1}

/* ── 10 · "increase the size, too much of empty space" ─────────────────
   The comparison table was trimmed to 316px to make the section fit and
   then sat marooned in it. It now fills the section — bigger type, more
   row height. Nothing is scaled up, so nothing goes soft. */
@media (min-width:901px) and (min-height:501px){
  #compare .wrap{max-width:min(1280px,100%)}
  #compare .cmp{font-size:clamp(.92rem,1.02vw,1.02rem)}
  #compare .cmp th,#compare .cmp td{
    padding-block:clamp(.8rem,2vh,1.65rem);
    padding-inline:clamp(.9rem,1.1vw,1.25rem)}
  #compare .cmp thead th{font-size:.74rem}
  #compare .cmp tbody th{font-size:1.04em;font-weight:800}
  #compare .center.mw-md{margin-bottom:clamp(18px,2.6vh,30px)!important}
}

/* ── 1·2·3 · PRODUCT RAIL — one product, one size, nothing cropped ──────
   "Change the postate image keep just the product and all images same
   size and the other one crop the image correctly."
   The ProstaVive card was using the hero render with floating Zn/Mg/D
   sprites and a glow instead of the product; ProDentim was on a hero
   shot too. Both now use the same three-unit pack shot as the others.
   Sizes differed because the art ranged from 0.75 to 1.15 aspect inside
   a band whose img max-height (176px) was TALLER than the band itself
   (120–178px), so each one overflowed by a different amount. Absolute
   px on both, contained, so all five read at the same visual size. */
@media (min-width:901px) and (min-height:501px){
  #products .pslide .ps-media{height:196px;overflow:hidden;padding:10px}
  #products .pslide .ps-media img{
    width:auto!important;height:auto!important;
    max-height:172px;max-width:min(84%,190px);object-fit:contain}
}
@media (min-width:901px) and (max-height:800px) and (min-height:501px){
  #products .pslide .ps-media{height:158px}
  #products .pslide .ps-media img{max-height:138px}
}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  .pslide .ps-media{height:190px;overflow:hidden;padding:10px}
  .pslide .ps-media img{width:auto;height:auto;max-height:166px;max-width:84%;object-fit:contain}
}

/* ── 3 · "the other one crop the image correctly" ───────────────────────
   Java Burn was sliced by the rail's right edge. On a desktop the whole
   shelf fits without a scroller, so nothing needs cropping at all: five
   equal columns, no scroll, no fade, no hint. The rail (and its
   auto-advance) stays for narrower screens where it is genuinely needed. */
@media (min-width:1200px) and (min-height:501px){
  #products .prail{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:clamp(10px,1vw,16px);
    overflow:visible;padding-bottom:0;scroll-snap-type:none}
  #products .prail>.pslide{flex:none;width:auto;min-width:0}
  #products .rail-wrap::after{display:none}
  #products .rail-hint{display:none}
  #products .pslide h3{font-size:clamp(1.05rem,1.25vw,1.3rem)}
  #products .pslide p{font-size:.8rem;line-height:1.5}
  #products .pslide .ps-facts span{font-size:.66rem}
  #products .pslide .go{font-size:.78rem;padding-inline:clamp(12px,1.1vw,16px)}
  #products .pslide .ps-body{padding:clamp(12px,1.1vw,16px)}
}

/* ── VOICES · quotes must share a top baseline ──────────────────────────
   `margin-top:auto` bottom-anchored each quote, so a shorter quote started
   22–50px lower than its neighbours. The cards still stretch to equal
   height; the slack now sits at the bottom where nobody reads it. */
#voices .testi q{margin-top:0}
#voices .testi{gap:.75rem}
#voices .testi .stars{margin-bottom:.1rem}
/* the avatar is 56px; hold the name block to the same height so a label that
   wraps in a two-column tablet layout cannot push the quote off the row */
#voices .testi .who{min-height:56px}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){#voices .testi .who img{width:52px;height:52px}
  #voices .testi .who{min-height:52px}}

/* ── #why · the aim card must not inherit height:100% ───────────────────
   `.card-dark{height:100%}` made the aim card exactly as tall as its
   column, so on mobile it rendered 605px BELOW the photo it sits under and
   overlapped the timeline in the next column. Nothing was clipped, so the
   truncation and fit checks both passed — only looking at the page caught
   it. Height is content-driven everywhere; the desktop rule below restores
   the fill-the-column behaviour where the column is a flex context. */
#why .why-aim{height:auto}
@media (min-width:901px) and (min-height:501px){
  #why .split>div:first-child{display:flex;flex-direction:column}
  #why .why-aim{flex:1 1 auto;height:auto}
}

/* `.split .photo-card{height:100%}` pinned the column to the photo's height,
   so the aim card below it rendered outside the column entirely. Make the
   column a flex column at EVERY width and let the photo size to content. */
#why .split>div:first-child{display:flex;flex-direction:column;height:auto}
#why .split>div:first-child .photo-card{height:auto;flex:0 0 auto}
@media (min-width:901px) and (min-height:501px){
  #why .split>div:first-child .photo-card{flex:0 0 auto}
  #why .why-aim{flex:1 1 auto}
}

/* ── Yu Sleep hero · the bottle is gone, so the caption gets the width back.
   `:has()` keeps this correct on any page that still carries a product
   shot in the hero panel. */
.hero-model:not(:has(.hm-prod)) .hm-cap b,
.hero-model:not(:has(.hm-prod)) .hm-cap span{max-width:100%}

/* ═══════════════════════════════════════════════════════════════════════
   DEEPER QA PASS — contrast, tap targets, and one robustness fix
   ═══════════════════════════════════════════════════════════════════════ */

/* ── The router tiles carried a WHITE card background under a photo laid
   over it, while the copy on top is white. Visually fine — until the photo
   is slow or fails, at which point the whole card is white on white. The
   card's own background is now the dark it looks like. */
@media (min-width:901px) and (min-height:501px){ #problem .router a{background:var(--b900)} }

/* ── Accent gold on a light band measures 2.15:1 — under the 3:1 a large
   figure needs. A deeper amber on light bands, gold kept on dark ones. */
.band--white .sproof .sp b,.band--cream .sproof .sp b,
.band--soft  .sproof .sp b,.band--tint  .sproof .sp b{color:#A2570A}
.band--white .sproof .stars,.band--cream .sproof .stars,
.band--soft  .sproof .stars,.band--tint  .sproof .stars{color:#B4770F}

/* ── Tap targets. The comparison table's "View" link was 54×16 — far under
   the 44px a finger needs. The brand mark and the nav button were both
   short of it too on a phone. */
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  #compare .cmp td a{display:inline-flex;align-items:center;
    min-height:44px;padding-inline:.35rem}
  .nav .brand{min-height:44px;display:inline-flex;align-items:center}
  .nav-links .btn,.nav .btn{min-height:44px}
  .burger{min-width:44px;min-height:44px}
}

/* ── Contrast on light bands ────────────────────────────────────────────
   Accent gold measures 1.66:1 on paper — unreadable for an 11–12px label —
   and the muted grey sat at 4.07:1, just under the 4.5 small text needs.
   Both are scoped to light bands so the dark bands keep the real accent. */
.band--white,.band--cream,.band--soft,.band--tint{--muted:#5C6774}
.band--white .eyebrow,.band--cream .eyebrow,
.band--soft  .eyebrow,.band--tint  .eyebrow,
.band--white .lbl,.band--cream .lbl,
.band--soft  .lbl,.band--tint  .lbl{color:#A2570A}

/* below 901px the router card is a light card, so the link colour needs the
   deeper amber — on desktop it sits on the dark scrim and stays gold */
@media (max-width:900px),(max-height:500px) and (orientation:landscape){ #problem .router .to{color:#A2570A} }

/* ── The sticky mobile CTA was 88% opaque with a backdrop blur, so a dark
   band scrolling under it bled through and dragged its dark text down to
   ~1.1:1. Solid now — and one less backdrop-filter repainting on scroll. */
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  .mcta{background:var(--paper);
    -webkit-backdrop-filter:none;backdrop-filter:none}
}
/* ── The toast dismiss button was a 25×18 hit area. */
.toast .x{display:grid;place-items:center;width:44px;height:44px;
  top:0;right:0;font-size:1.15rem}

/* ── Seamless marquee — one set width, measured in JS ───────────────────
   translateX(-50%) only loops cleanly while one half of the track is at
   least as wide as the strip. It is not, on a wide screen, so the loop ran
   out of content and jumped. The track is now filled to at least twice the
   container and shifted by exactly one set width. */
.ticker-track.marq-ready,
.tmark-track.marq-ready{
  animation-name:marqroll;
  animation-duration:var(--marq-dur,34s);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform}
@keyframes marqroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--marq-w,50%)))}}
@media (prefers-reduced-motion:reduce){
  .ticker-track.marq-ready,.tmark-track.marq-ready{animation:none}}

/* --- row alignment, lower half -------------------------------------------
   Headings and eyebrows aligned fine because they are top-anchored; what sat
   underneath them did not, because each blurb wraps to its own line count.
   Reserve the tallest line count so every row in a strip starts level. */
@media (min-width:901px) and (min-height:501px){
  /* the four labelled rows inside the three comparison cards */
  .cmp3 li span{min-height:3.1em;min-height:2lh}
  /* the numbered "how ordering works" strip */
  .howorder b{display:block;min-height:2.4em;min-height:2lh}
}

/* the hero portrait in a short landscape frame: at 50% 42% the crop took the
   top of the subject's head off on phones. Favour the top of the frame where
   the frame is wider than the photo. */
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  .hero--photo .photo-card>img:not(.float-prod){object-position:50% 20%}
}
/* the router photos ship a wide crop for phones and a tall one for the
   desktop tiles, so the <img> now sits inside a <picture>. Take the wrapper
   out of layout or the img's height:100% has nothing to resolve against. */
.rc-media picture{display:contents}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  /* Size the phone band to the wide crop's own aspect so object-fit:cover has
     nothing left to cut. Any other height re-crops the photo and takes hair
     off the top or the smile off the bottom. */
  #problem .router .rc-media{height:auto;aspect-ratio:760/430}
}

/* The home hero frame is never the photo's own 4:5 -- it is 1.0 on phones and
   as wide as 1.52 on a short desktop, so 21-48% of the height is cropped and a
   centred crop took the top of her hair off at every size. Anchor near the top;
   where the frame does match the photo this has no effect. */
.hero-model>img.model[src*="m-hub"]{object-position:50% 14%}

/* ═══════════════════════════════════════════════════════════════════════
   Client, 3 Sep: "Rolling Banner on the top and bottom have same info.
   Top one should have product related info ... The bottom one should have
   FDA, GMP, made in USA and other trust markers" and "Please put the
   rolling banner at the end of the page."
   The trust marquee is now its own full-bleed band directly above the
   footer, and reads as the bottom edge of the page rather than a stray
   strip under the hero.
   ═══════════════════════════════════════════════════════════════════════ */
.trustmark-band{
  background:linear-gradient(180deg,var(--b800) 0%,var(--b900) 100%);
  overflow-x:clip;
  padding-block:clamp(20px,2.6vw,32px);
  border-top:1px solid rgba(255,255,255,.08)}
.trustmark-band .tmark{
  margin-top:0;
  margin-inline:calc(-1 * (50vw - 50%));
  padding-inline:clamp(16px,3vw,44px);
  border-radius:0;border-left:0;border-right:0;
  width:auto;max-width:none}
.trustmark-band .tmark-note{
  margin-top:.85rem;max-width:none;text-align:center;
  color:rgba(255,255,255,.5)}
/* client: "Please put this in one line" — it wrapped to two under the strip */
@media (min-width:1000px) and (min-height:501px){
  .trustmark-band .tmark-note{white-space:nowrap;font-size:clamp(.6rem,.72vw,.72rem)}
}

/* ═══════════════════════════════════════════════════════════════════════
   Client, 3 Sep 14:59: "Can you increase the size too much of empty space"
   + "Without breaking the pixel" on the closing CTA card. The photo was
   467x350 from a 1000x750 source — less than half its native width, with
   a wide band of empty green around it. Give the picture an equal column
   and more height; at ~530px it is still barely half of native, so it
   stays sharp on a 2x screen.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:901px) and (min-height:501px){
  .cta-card{--ctap:clamp(24px,3.2vw,46px);padding:var(--ctap)}
  .cta-card .grid{grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,46px);align-items:center}
  /* the photo bleeds to the card's own edges, so the band of empty green
     around it disappears and the picture is as large as the card allows */
  .cta-card .cta-pic{
    margin:calc(-1 * var(--ctap)) calc(-1 * var(--ctap)) calc(-1 * var(--ctap)) 0;
    border-radius:0;align-self:stretch;
    /* .cta-pic carries height:100%, which resolves against the GRID AREA --
       the negative margins alone left a green band under the photo. Add the
       two bleeds back so the picture is exactly as tall as the card. */
    height:calc(100% + 2 * var(--ctap));
    min-height:calc(clamp(300px,40vh,470px) + 2 * var(--ctap))}
}

/* Client, 5 Sep: "keep the bottle but it should be clean" — the Yu Sleep
   dropper is a slender 60 ml bottle (roughly 1:3.5), so sizing it by WIDTH
   the way the wider tubs are sized made it overflow the hero panel. Size
   this one by height instead. */
.hero-model .hm-prod--tall{width:auto;height:56%;right:4%;bottom:5%}
.hero-model .hm-prod--tall img{height:100%;width:auto}
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  .hero-model .hm-prod--tall{height:48%;right:3.5%;bottom:4.5%}
}

/* ── v7.2 · client round 11 Sep ─────────────────────────────────────────
   "Try to put this in one line or move difference in the 2 line only."
   Headings and short labels that cannot fit one line now split evenly
   instead of leaving one orphan word on the second line. Progressive:
   browsers without text-wrap simply keep the old greedy wrap.          */
h1,h2,h3,h4,h5,
.eyebrow,.x-hd,.rail-head h2,.hm-cap b,.stat span,
.router a b,.pcard b,.cta-assure b,.proofrow span,
summary,figcaption,.x-jb-facts b{
  text-wrap:balance;
}
p.lead,.prose p,.a,.rc-body{ text-wrap:pretty; }

/* ── v7.3 · client round 11 Sep ─────────────────────────────────────────
   "the marked need to go below ... in one or two line" — the horizontal
   section head put its intro paragraph in a column to the RIGHT of the
   heading. Stack it: heading first at full width (which is also what puts
   it on one line), intro directly underneath.                          */
.head-h{grid-template-columns:1fr;align-items:start;gap:clamp(10px,1.2vw,16px)}
.head-h .lead{max-width:78ch;padding-bottom:0}

/* Yu Sleep packages — "Price display info is confusing and need to move in
   the center above order tab": the amount was left-aligned and the total
   right-aligned inside an otherwise centred card. Stack them, centred,
   directly above the order button.                                      */
.prows>.prow .rprice{display:flex;flex-direction:column;align-items:center;gap:.1rem}
.prows>.prow .ramt{justify-content:center}
.prows>.prow .rtot{text-align:center}

/* ── Welavie logo lock-up (12 Sep) ──────────────────────────────────────
   Replaces the old "W" chip + text wordmark. The mark is white + green, so
   it needs a dark surface — the nav and footer are dark on every theme
   (--b900 is overridden per product but always dark), so one asset serves
   the whole site. Height is pinned to 32px in the nav so --barh, and with it
   the one-frame hero, is unchanged.                                      */
.brand{gap:.5rem}
.brand-logo{height:34px;width:auto;display:block}
.nav .brand{gap:0}
.foot .brand{flex-direction:column;align-items:flex-start;gap:.45rem}
.foot .brand-logo{height:42px}
.brand-tag{font-family:var(--display);font-weight:700;font-size:.63rem;
  letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.48)}
@media (max-width:600px){
  .brand-logo{height:29px}
  .foot .brand-logo{height:36px}
  .brand-tag{font-size:.58rem;letter-spacing:.14em}
}

/* Hero assurance row — same bug the #packages badges had: a longer label
   wraps the row to two lines, which grew .hero-copy past its grid row and
   collided with the stat band (measured -12px at 1470x694). Keep the row on
   one line at short heights, and never let the stat band sit tighter than
   20px under the copy.                                                   */
@media (min-width:901px) and (max-height:800px) and (min-height:501px){
  .hero .cta-assure{gap:8px}
  .hero .cta-assure b{font-size:.72rem;padding-block:5px;white-space:nowrap}
  .hero .stats{margin-top:max(32px,1.6vh)!important}
}
.hero .stats{margin-top:max(20px,var(--stats-gap,clamp(24px,4.4vw,64px)))}

/* Home hero at short viewport heights: the copy column was overflowing its
   fixed grid row (462px of content in a 419px row at 1024x768), which is what
   collided with the stat band. The stat gap could not absorb it - the one-frame
   design pins that gap via `body.t-hub .hero--model .stats`. So reclaim the
   height where it is actually spent: the action row and the assurance row were
   each wrapping to two lines. Specificity matches the existing t-hub rules or
   it does not apply. */
@media (min-width:901px) and (max-height:800px) and (min-height:501px){
  body.t-hub .hero--model .hero-actions{gap:.55rem;margin-top:.8rem}
  body.t-hub .hero--model .hero-actions .btn{font-size:.85rem;padding:.66rem 1.05rem}
  body.t-hub .hero--model .cta-assure{gap:7px;margin-top:.5rem}
  body.t-hub .hero--model .cta-assure b{font-size:.68rem;padding:4px 9px;white-space:nowrap}
}

/* Logo sizing, round 3 (client 14 Sep: "Logo need to be little bigger. You can
   copy the Welavyn.com size"). welavyn.com uses a 2.7rem / 43px logo - but in a
   TALLER header. Matching 43px in our 62px bar would fill 69% of it and look
   worse than the 32px that was rejected. So: logo up to 34px AND the bar up to
   72px, which lands the ratio at 47% - lighter than the rejected 32px-in-62px
   (51%) while the logo itself is 42% bigger than it was. */
.nav-in{height:72px}
@media (max-width:600px){ .nav-in{height:64px} }

/* Logo matched to welavyn.com, measured 14 Sep in his own browser at 1470px:
     welavyn.com  header 70px · logo 154x43 · 62% of the bar · nav links 15px
     ours         header 72px · logo now 43px · 60% of the bar · nav links 13.76px
   Same proportions as the site he asked us to copy. Bar height is unchanged
   from the previous round, so --barh and the one-frame hero are unaffected. */
.brand-logo{height:43px}
.foot .brand-logo{height:50px}
@media (max-width:600px){
  .brand-logo{height:34px}
  .foot .brand-logo{height:40px}
}

/* ── v7.9 · .figure-note sideways scroll on small landscape phones ──────────
   At <=760px both children were set to width:100%, but the row only became a
   column at <=600px — so between 601 and 760px (which is every small phone held
   sideways) the two 100% items sat side by side and pushed the page ~100px wide.
   Stack at the same breakpoint the widths change, and let the copy column
   shrink instead of holding its min-content width. */
@media (max-width:760px){
  .figure-note{flex-direction:column;text-align:center}
  .figure-note>div{min-width:0}
}