/* ==========================================================================
   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, welavyn-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 welavyn.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;                            /* welavyn'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;                            /* welavyn'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}
}

/* welavyn 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 —
   welavyn 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. */
/* Ramanathan 2026-09-03: "max 3 products in one row and make it better".
   Five across gave 219px cards 750px tall — cramped art, cramped type. */
@media (min-width:1200px) and (min-height:501px){.pgrid{grid-template-columns:repeat(3,1fr)}}
/* REMOVED 2026-09-03 — this block shrank the card to fit five across
   (media band 132px, art capped at 112px, 0.82rem body). At three across it
   is what made the products render at ~90px. The sizing now lives in the
   PRODUCTS PAGE block at the end of this file. */

/* .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 welavyn'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. WELAVYN'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}


/* ── PRODUCTS PAGE — three across, and given room ───────────────────────
   Only /products/ uses .pgrid / .pcard / .pfilter, so nothing else on the
   old stylesheet is touched by any of this. */
.pgrid{gap:clamp(18px,2vw,30px);align-items:stretch}
/* The two-column .pcard at the top of this file sets `padding` and
   `gap: clamp(20px,3vw,48px)`; the catalogue redefinition only changed
   `display`, so every card carried 43px of padding AND a 43px gap it was
   never meant to have — ~130px of dead height, and it starved the art band
   of 86px of width. Reset them explicitly. */
.pgrid .pcard{height:100%;padding:0;gap:0;grid-template-columns:none;
  align-items:stretch;position:relative}

/* the art band: absolute px on the band AND the image, because a
   percentage max-height does not resolve inside a place-items:center grid */
.pgrid .pcard .pcard-media{height:236px;padding:22px 22px 10px;overflow:hidden;
  display:grid;place-items:center}
.pgrid .pcard .pcard-media img{width:auto!important;height:auto!important;
  max-height:204px;max-width:min(92%,300px);object-fit:contain;
  transition:transform .38s cubic-bezier(.22,.9,.3,1)}
.pcard:hover .pcard-media img{transform:scale(1.05)}

#all .pgrid .pcard .pcard-body{padding:clamp(16px,1.5vw,22px) clamp(18px,1.7vw,24px) clamp(18px,1.7vw,24px);gap:.5rem}
.pcard-body h3{font-size:clamp(1.2rem,1.5vw,1.5rem);letter-spacing:-.025em;margin:0}
.pcard-body p{font-size:.92rem;line-height:1.6}
.pcard-body .cat{align-self:flex-start}
.pcard-body .meta{margin-top:.35rem;display:flex;flex-wrap:wrap;gap:.45rem}
.pcard-body .meta>span{min-height:0;font-size:.78rem;
  padding:.34em .74em;border-radius:var(--r-pill);
  background:var(--tint);border:1px solid var(--line);white-space:nowrap}
.pcard-body .go{margin-top:auto;padding-top:.9rem;font-size:.9rem}
.pcard{transition:transform .3s cubic-bezier(.34,1.3,.6,1),box-shadow .3s,border-color .3s}
.pcard:hover{transform:translateY(-8px);
  box-shadow:0 34px 68px -30px rgba(20,20,25,.36)}

/* the category filter reads as a real control set */
.pfilter{gap:.6rem;margin-bottom:clamp(20px,2.4vw,32px)}
.pfilter button{padding:.62em 1.15em;border-radius:var(--r-pill);
  transition:background .22s,color .22s,border-color .22s,transform .22s}
.pfilter button:hover{transform:translateY(-1px)}
.pfilter button[aria-pressed="true"]{box-shadow:0 10px 24px -12px rgba(20,20,25,.5)}

@media (max-width:1199px) and (min-width:1000px) and (min-height:501px){
  .pgrid .pcard .pcard-media{height:220px}
  .pgrid .pcard .pcard-media img{max-height:190px}
}
@media (max-width:999px){
  .pgrid .pcard .pcard-media{height:212px;padding:16px 16px 8px}
  .pgrid .pcard .pcard-media img{max-height:184px;max-width:90%}
}

/* ── Accessibility fixes ported from the v19 stylesheet ─────────────────
   /products/ had never been through the QA harness. These are the same
   three findings already fixed on the home and Yu Sleep pages.
   SCOPED TO body.t-brand — that class is unique to /products/, so the seven
   pages still awaiting client approval are byte-for-byte unaffected even
   though they share this stylesheet. */

/* accent gold measures ~1.9:1 on a light band; muted grey sat at 4.07:1 */
body.t-brand .band--white,body.t-brand .band--cream,
body.t-brand .band--soft, body.t-brand .band--tint{--muted:#5C6774}
body.t-brand .band--white .eyebrow,body.t-brand .band--cream .eyebrow,
body.t-brand .band--soft  .eyebrow,body.t-brand .band--tint  .eyebrow,
body.t-brand .band--white .lbl,body.t-brand .band--cream .lbl,
body.t-brand .band--soft  .lbl,body.t-brand .band--tint  .lbl{color:#A2570A}

/* an opaque bar: a translucent one lets a light page bleed through behind
   white nav text, and re-rasterises the page under it on every scroll */
body.t-brand .nav{background:var(--b900);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  /* no `contain:paint` here: it clipped the drop-menu to the bar */
  transform:translateZ(0)}

/* tap targets: the comparison table's product links were 68x16 */
@media (max-width:900px),(max-height:500px) and (orientation:landscape){
  body.t-brand .tablewrap .cmp th a,body.t-brand .tablewrap .cmp td a{
    display:inline-flex;align-items:center;min-height:44px;padding-inline:.3rem}
  body.t-brand .nav .brand{min-height:44px;display:inline-flex;align-items:center}
  body.t-brand .nav .btn,body.t-brand .nav-cta .btn{min-height:44px}
  body.t-brand .burger{min-width:44px;min-height:44px}
}

/* --- product grid: align the meta row + CTA across a row --------------------
   .pcard p carried flex:1 1 auto, so each paragraph GREW BY THE SAME AMOUNT
   rather than ENDING AT THE SAME PLACE: a 1-line blurb and a 2-line blurb
   stayed ~40px apart, which pushed .meta/.go out of line across the row.
   Let the paragraph size to its content and bottom-anchor the meta block. */
.pgrid .pcard .pcard-body{justify-content:flex-start}
.pgrid .pcard .pcard-body p{flex:0 0 auto}
.pgrid .pcard .pcard-body .meta{margin-top:auto;padding-top:.55rem}
.pgrid .pcard .pcard-body .go{margin-top:0;padding-top:.65rem}
/* chip row: a hair tighter so three chips hold one line at every grid width */
.pgrid .pcard .pcard-body .meta{gap:.4rem}
.pgrid .pcard .pcard-body .meta>span{padding:.32em .64em}
@media (min-width:701px) and (max-width:1010px){
  /* two-column grid: the widest chip trio was 10px over the card width */
  .pgrid .pcard .pcard-body .meta{gap:.34rem}
  .pgrid .pcard .pcard-body .meta>span{font-size:.73rem;padding:.32em .58em}
}
@media (min-width:901px) and (min-height:501px){
  /* the numbered "how ordering works" strip: step 4 wrapped to three lines
     and pushed its blurb ~27px below the other three */
  .howorder b{display:block;min-height:2.4em;min-height:2lh}
}

/* ═══════════════════════════════════════════════════════════════════════
   Client, 3 Sep: the top and bottom rolling banners must carry different
   information — offers up top, trust markers at the END of the page.
   This page loads the older main.js, which has no marquee builder, so the
   track is authored long enough that each half already exceeds any
   viewport and translateX(-50%) never runs out of content.
   ═══════════════════════════════════════════════════════════════════════ */
.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-inline:calc(-1 * (50vw - 50%));
  padding-inline:clamp(16px,3vw,44px);
  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)}
.trustmark-band .tmark-track{
  display:flex;width:max-content;animation:tmarkroll18 44s linear infinite}
@keyframes tmarkroll18{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.trustmark-band .tmark:hover .tmark-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.trustmark-band .tmark-track{animation:none}}
.trustmark-band .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)}
.trustmark-band .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)}
.trustmark-band .tmark-note{
  font-size:.72rem;line-height:1.5;color:rgba(255,255,255,.5);
  margin-top:.85rem;text-align:center}
@media (min-width:1000px) and (min-height:501px){
  /* client: "Please put this in one line" */
  .trustmark-band .tmark-note{white-space:nowrap;font-size:clamp(.6rem,.72vw,.72rem)}
}

/* ── Welavie logo lock-up (12 Sep) ──────────────────────────────────────
   /products/ and the four support pages load THIS stylesheet, not
   main-v19.css, so the lock-up rules have to exist here too or the logo
   renders at its natural 381x96 and blows the nav open.                 */
.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}
}
/* same stacked section head as main-v19.css, so /products/ matches the rest */
.head-h{grid-template-columns:1fr;align-items:start;gap:clamp(10px,1.2vw,16px)}
.head-h .lead{max-width:78ch;padding-bottom:0}

/* Hero assurance row — see main-v19.css; kept in sync for the pages that
   load this stylesheet. */
@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}
}

/* 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}
}