/* Forma DJR, as a single variable file: weight 1-900 plus an optical-size axis,
   161 KB for the lot. font-optical-sizing:auto lets the browser pick the right
   cut for the size, which is why the big headings hold their tight fit while
   small labels stay open enough to read. */
/* Headlines are set in the genuine Display Regular rather than a heavy instance
   of the variable font. It is not about synthesis — the weight axis works — but
   the dot of the i grows with weight until it sits 7 units under the cap line
   instead of 31, and almost-aligned reads as a mistake where clearly-lower
   reads as design. */
@font-face{
  font-family:"Forma DJR Display";
  src:url("../fonts/forma-djr-display-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Forma DJR";
  src:url("../fonts/forma-djr-display.woff2") format("woff2-variations"),
      url("../fonts/forma-djr-display.woff2") format("woff2");
  font-weight:1 900;
  font-stretch:100%;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Three flat layers: canvas, a warmer panel, and near-black ink. */
  --ground:#FFFFFF; --canvas:#FAF8F3; --surface:#FFFFFF; --surface-2:#F2EEE5; --panel:#F2EEE5;
  --ink:#1B1A17; --ink-2:#6A655C; --ink-3:#9B958A;
  --line:#E8E3D8; --line-2:#D7D0C2; --tint:12%;
  --gold:#B8924B; --gold-deep:#8A6A2F; --gold-lift:#D8B26A; --gold-lift-2:#E5C489; --gold-soft:#F6F1E6; --gold-line:#E3D3B2;
  --glass:rgba(255,255,255,.62); --glass-line:rgba(23,20,14,.12);
  --c-build:#FF5A2A; --c-recover:#13B39F; --c-longevity:#E8AC37; --c-mind:#7B5DFF; --c-detox:#98D13A; --c-cellular:#EF4799;
  --f-display:"Forma DJR Display",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Forma DJR",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"Martian Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r-s:10px; --r-m:14px; --r-l:18px; --r-pill:999px;
  --gutter:clamp(18px,4vw,56px); --max:1400px;
  --shadow:0 1px 2px rgba(27,26,23,.04),0 18px 40px -26px rgba(27,26,23,.28);
  --shadow-lift:0 2px 4px rgba(27,26,23,.05),0 26px 52px -24px rgba(27,26,23,.3);
  /* One motion contract for the whole site. */
  --ease:cubic-bezier(.4,0,.2,1);
  --t:.3s; --t-slow:.5s;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--f-body);font-optical-sizing:auto;font-synthesis-weight:none;font-size:16px;line-height:1.55;letter-spacing:-.003em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:6px}
/* Medium weight, tight tracking, tight leading. The scale does the shouting,
   not the weight. */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;font-synthesis-weight:none;letter-spacing:-.012em;line-height:1.06;margin:0;text-wrap:balance}
h1{font-weight:400;letter-spacing:-.016em}
h3,h4{letter-spacing:-.012em}
p{margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.mono{font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;line-height:1.4}
.muted{color:var(--ink-2)}
.lede{font-size:1.14rem;line-height:1.55;color:var(--ink-2);max-width:54ch;text-wrap:pretty}
.dot{display:inline-block;width:.62em;height:.62em;border-radius:50%;background:var(--c);flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;border-radius:999px;padding:.82em 1.35em;font-weight:600;font-size:.94rem;line-height:1.1;text-decoration:none;white-space:nowrap;transition:transform .25s var(--ease),background .2s,color .2s,box-shadow .2s}
.btn .arr{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--gold-deep);color:#fff}
.btn-primary:hover{background:#6F5320}
.btn-ghost{box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);background:var(--glass)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--gold-deep);color:var(--gold-deep)}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn-lg{padding:1em 1.6em;font-size:1rem}
.btn-block{width:100%}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:20px;height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-body);font-weight:700;letter-spacing:.2em;font-size:.98rem}
.logo svg{width:26px;height:26px}
/* A third turn maps the molecule onto itself, so the gold atom simply moves
   to the next vertex and the shape never looks tilted. */
.logo .mark-g{transition:transform .9s var(--ease);transform-origin:13px 13px}
.logo:hover .mark-g{transform:rotate(120deg)}
.nav{display:flex;gap:2px}
.nav a{padding:.5em .85em;border-radius:999px;text-decoration:none;font-weight:500;font-size:.93rem;color:var(--ink-2);transition:color .2s,background .2s}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--gold-deep);background:var(--gold-soft)}
.head-tools{display:flex;align-items:center;gap:6px;margin-left:auto}
.icon-btn{display:inline-flex;align-items:center;gap:8px;height:40px;min-width:40px;justify-content:center;padding-inline:10px;border-radius:999px;color:var(--ink);transition:background .2s}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn svg{width:19px;height:19px}
.kbd{font-family:var(--f-mono);font-size:.62rem;border:1px solid var(--line-2);border-radius:5px;padding:2px 5px;color:var(--ink-2)}
.cart-count{min-width:20px;height:20px;border-radius:999px;background:var(--gold-deep);color:#fff;font-size:.72rem;font-weight:700;display:inline-grid;place-items:center;padding-inline:5px}
.cart-count.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.35)}}
.menu-btn{display:none}
.mnav{border-top:1px solid var(--line);padding-block:8px 16px}
.mnav a{display:block;padding:12px 0;font-family:var(--f-body);font-size:1.6rem;font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
@media (max-width:820px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .head-tools{margin-left:auto}
  .search-trigger .kbd,.search-trigger .lbl{display:none}
}
body.immersive .site-head,body.immersive .site-foot{display:none}

/* sections */
.sec{padding-block:clamp(56px,8vw,112px)}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(24px,4vw,44px)}
.sec-head h2{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:400;max-width:16ch}
.sec-head .lede{max-width:42ch}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--gold-deep);margin-bottom:14px}
.rule{border:0;border-top:1px solid var(--line);margin:0}

.grain{z-index:-1}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.08;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* search */
.search{position:relative}
.search-box{display:flex;align-items:center;gap:10px;background:var(--ground);border:1px solid var(--line-2);border-radius:14px;padding:0 14px;height:56px;transition:border-color .2s,box-shadow .2s}
.search-box:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}
.search-box svg{width:18px;height:18px;color:var(--ink-3);flex:none}
.search-box input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:1.02rem;height:100%}
.search-box input::placeholder{color:var(--ink-3)}
.results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--shadow);z-index:30;max-height:400px;overflow:auto;padding:6px}
.results .grp{padding:10px 10px 4px;color:var(--ink-3)}
.results a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;border-radius:10px;text-decoration:none}
.results a[aria-selected="true"],.results a:hover{background:var(--surface-2)}
.results a b{font-weight:600;display:block}
.results a small{color:var(--ink-2);display:block;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.results .empty{padding:16px 10px;color:var(--ink-2)}
.results mark{background:color-mix(in oklab,var(--c,#E8AC37) 40%,transparent);color:inherit;border-radius:3px}
.quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.quick .mono{color:var(--ink-3);margin-right:4px}
.qchip{border:1px solid var(--line-2);border-radius:999px;padding:.35em .8em;font-size:.84rem;transition:border-color .2s,background .2s}
.qchip:hover{border-color:var(--ink);background:var(--ground)}


.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kv div{padding:12px 12px 12px 0;display:grid;gap:3px}
.kv div + div{padding-left:12px;border-left:1px solid var(--line)}
.kv b{font-weight:600}
.kv .mono{color:var(--ink-3)}
.ings{display:flex;flex-wrap:wrap;gap:6px}
.ing{font-size:.82rem;padding:.3em .7em;border-radius:999px;background:color-mix(in oklab,var(--c) var(--tint),var(--surface));border:1px solid color-mix(in oklab,var(--c) 30%,transparent)}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.fade-swap{animation:swap .5s var(--ease)}
@keyframes swap{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}

/* product cards */
.grid-p{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pcard{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.pcard-vis{aspect-ratio:5/4;max-width:100%;background:#fff;display:grid;place-items:center;position:relative;overflow:hidden}
.pcard-vis::after{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in oklab,var(--c) 45%,transparent),transparent);opacity:.7;z-index:0}
.pcard-vis .bottle{height:78%;width:auto;position:relative;z-index:1;transition:transform .5s var(--ease)}
.pcard:hover .pcard-vis .bottle{transform:translateY(-6px) rotate(-3deg)}
.pcard-vis .corner{position:absolute;top:14px;left:16px;z-index:2;color:var(--ink-2)}
.pcard-vis .corner-r{left:auto;right:16px}
.pcard-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.pcard h3{font-family:var(--f-body);font-size:1.9rem;font-weight:500;letter-spacing:-.008em;line-height:1.12}
.pcard h3 a{text-decoration:none}
.pcard h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.pcard .cat{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.pcard .tag{color:var(--ink-2);font-size:.95rem}
.pcard-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;padding-top:14px}
.price{font-weight:600;font-variant-numeric:tabular-nums}
.price s{color:var(--ink-3);font-weight:400;margin-right:6px}
.add-mini{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;background:var(--gold-deep);color:#fff;border-radius:999px;padding:.55em 1em;font-weight:600;font-size:.84rem;transition:transform .2s}
.add-mini:hover{transform:translateY(-1px)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:s}
.step{padding:22px 0 0;border-top:1px solid var(--ink);display:grid;gap:10px;align-content:start}
.step .mono{color:var(--ink-3)}
.step h3{font-size:1.5rem;font-weight:400}
.step p{color:var(--ink-2);max-width:36ch}
.step-vis{height:120px;border-radius:var(--r-m);background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;margin-top:6px}

/* standards */
.standards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-block:1px solid var(--gold-line)}
.standards div{padding:24px 20px 26px 0;display:grid;gap:8px;align-content:start}
.standards div + div{padding-left:20px;border-left:1px solid var(--line)}
.standards b{font-family:var(--f-body);font-size:1.25rem;font-weight:600;letter-spacing:-.015em;line-height:1.1}
.standards p{color:var(--ink-2);font-size:.94rem}

/* stacks */
.grid-s{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.scard{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:18px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.scard-vis{height:150px;border-radius:16px;background:linear-gradient(120deg,color-mix(in oklab,var(--c1) var(--tint),var(--surface)),color-mix(in oklab,var(--c2) var(--tint),var(--surface)));display:flex;justify-content:center;align-items:end;padding-top:14px}
.scard-vis .bottle{height:118px;width:auto;margin-inline:-10px}
.scard-vis .bottle:first-child{transform:rotate(-6deg) translateY(4px)}
.scard-vis .bottle:last-child{transform:rotate(5deg) translateY(2px)}
.scard h3{font-size:1.35rem;font-weight:400}
.scard p{color:var(--ink-2);font-size:.92rem}
.scard .pair{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.scard-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;gap:10px}

/* footer */
.site-foot{background:var(--surface);border-top:1px solid var(--gold-line);padding-block:56px 32px;margin-top:clamp(24px,3vw,40px)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px}
.foot-grid h4{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-weight:500;margin-bottom:12px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot-grid a{text-decoration:none;color:var(--ink-2)}
.foot-grid a:hover{color:var(--ink)}
.news{display:flex;gap:8px;margin-top:16px;max-width:420px}
.news input{flex:1;min-width:0;height:46px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);padding:0 16px}
.news input:focus{outline:none;border-color:var(--ink)}
.fine{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--ink-3);font-size:.8rem}
.fine p{max-width:80ch}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(7,10,9,.45);z-index:80;opacity:0;transition:opacity .3s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--surface);z-index:81;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .45s var(--ease);box-shadow:-30px 0 60px -30px rgba(0,0,0,.4);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.open .scrim,.scrim.open{opacity:1}
.drawer.open{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.drawer-head h2{font-size:1.5rem}
.drawer-body{flex:1;overflow:auto;padding:8px 20px}
.drawer-foot{border-top:1px solid var(--line);padding:18px 20px;display:grid;gap:12px}
.ship{display:grid;gap:8px;padding:14px 0 6px}
.ship .bar{height:4px;border-radius:4px;background:var(--surface-2);overflow:hidden}
.ship .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--c-build),var(--c-longevity),var(--c-detox),var(--c-recover),var(--c-mind),var(--c-cellular));transition:width .5s var(--ease)}
.line{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.line-vis{width:64px;height:64px;border-radius:12px;display:flex;align-items:end;justify-content:center;overflow:hidden;background:color-mix(in oklab,var(--c) var(--tint),var(--ground))}
.line-vis .bottle{height:54px;width:auto;margin-inline:-7px}
.line h4{font-family:var(--f-body);font-size:1rem;font-weight:600;letter-spacing:0}
.line small{color:var(--ink-2);display:block}
.line-ctrl{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;height:34px}
.stepper button{width:32px;height:100%;display:grid;place-items:center;border-radius:999px}
.stepper button:hover{background:var(--surface-2)}
.stepper span{min-width:22px;text-align:center;font-variant-numeric:tabular-nums;font-weight:600}
.linkish{font-size:.82rem;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.linkish:hover{color:var(--ink)}
.toggle{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;cursor:pointer}
.toggle input{appearance:none;width:30px;height:18px;border-radius:999px;background:var(--line-2);position:relative;transition:background .2s;cursor:pointer;margin:0}
.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.toggle input:checked{background:var(--gold-deep)}
.toggle input:checked::after{transform:translateX(12px);background:#fff}
.sum-row{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums}
.sum-row.total{font-weight:700;font-size:1.1rem}
.empty-state{padding:40px 0;display:grid;gap:14px;justify-items:start}
.empty-state h3{font-size:1.6rem}

/* palette */
.palette{position:fixed;inset:0;z-index:90;display:grid;justify-items:center;align-items:start;padding:12vh 16px 16px;background:rgba(7,10,9,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.palette-card{width:min(640px,100%);background:var(--surface);border-radius:20px;padding:12px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);animation:pop .3s var(--ease)}
.palette-card .results{position:static;box-shadow:none;border:0;margin-top:6px;padding:0;max-height:52vh}
.palette-card .hint{display:flex;gap:14px;color:var(--ink-3);padding:10px 8px 2px;flex-wrap:wrap}
@keyframes pop{from{transform:translateY(10px) scale(.98);opacity:.4}}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);background:var(--ink);color:var(--ground);padding:12px 18px;border-radius:999px;font-weight:500;font-size:.92rem;z-index:100;opacity:0;pointer-events:none;transition:opacity .3s,transform .35s var(--ease);display:flex;gap:10px;align-items:center;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* page headers */
.phead{padding-block:clamp(32px,6vw,72px) clamp(20px,3vw,32px)}
.phead h1{font-size:clamp(2.6rem,6.8vw,5.6rem);font-weight:400;letter-spacing:-.014em;line-height:1}
.phead .lede{margin-top:18px}
.crumbs{display:flex;gap:8px;align-items:center;color:var(--ink-3);margin-bottom:18px;flex-wrap:wrap}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{color:var(--ink)}

/* shop toolbar */
.toolbar{display:grid;gap:12px;padding-block:18px 16px;border-bottom:1px solid var(--line);margin-bottom:26px}
.tb-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tb-row .search-box{height:44px;flex:1 1 260px;border-radius:999px;background:var(--surface)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:.45em .9em;border-radius:999px;border:1px solid var(--line-2);font-size:.86rem;font-weight:500;transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--c,var(--gold-deep));border-color:var(--c,var(--gold-deep));color:var(--on,#fff)}
.chip[aria-pressed="true"] .dot{background:var(--on,#fff)}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:999px;padding:3px;gap:2px}
.seg button{padding:.35em .85em;border-radius:999px;font-size:.84rem;font-weight:500;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--gold-deep);color:#fff}
.select{height:40px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);padding:0 34px 0 14px;font-size:.86rem;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237A8681' stroke-width='1.5'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
.count-note{color:var(--ink-3);margin-left:auto}
.no-res{padding:48px 0;display:grid;gap:12px;justify-items:start}
.guide-inline{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;border:1px dashed var(--line-2);border-radius:var(--r-l);padding:18px 22px;margin-top:22px}
.mini-aur{opacity:.8;width:56px;height:56px;border-radius:50%;background:conic-gradient(from 0deg,var(--c-build),var(--c-recover),var(--c-longevity),var(--c-mind),var(--c-detox),var(--c-cellular),var(--c-build));filter:blur(5px);animation:spin 9s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}

/* product page */
.pdp{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:start;padding-block:clamp(16px,3vw,32px)}
.pdp-vis{position:sticky;top:calc(84px + env(safe-area-inset-top,0px));border-radius:var(--r-l);background:#fff;aspect-ratio:1/1.02;max-width:100%;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.pdp-vis .bottle{height:66%;width:auto;filter:drop-shadow(0 30px 30px rgba(0,0,0,.18));animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-10px) rotate(-1.5deg)}}
.pdp-vis .orbit{position:absolute;width:88%;aspect-ratio:1;border-radius:50%;border:1px dashed color-mix(in oklab,var(--c) 70%,var(--ink));opacity:.35;z-index:-1}
.pdp-vis .glow{position:absolute;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);opacity:.5;z-index:-1;filter:blur(10px)}
.pdp-vis .corner{position:absolute;left:20px;top:18px;color:var(--ink-2)}
.pdp-vis .corner-r{left:auto;right:20px}
.pdp-vis .corner-b{top:auto;bottom:18px}
.pdp-info{display:grid;gap:20px}
.pdp-info h1{font-size:clamp(3.4rem,7.4vw,6rem);font-weight:400;letter-spacing:-.014em;line-height:.98}
.pdp-info .tagline{font-family:var(--f-display);font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:400;letter-spacing:-.012em;line-height:1.15;max-width:22ch}
.catpill{display:inline-flex;align-items:center;gap:8px;padding:.35em .8em;border-radius:999px;background:var(--c);color:var(--on);font-size:.82rem;font-weight:600;text-decoration:none;width:fit-content}
.catpill .dot{background:var(--on)}
.buy{display:grid;gap:10px}
.opt-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r-m);border:1px solid var(--line-2);cursor:pointer;transition:border-color .2s,background .2s}
.opt-card:has(input:checked){border-color:var(--gold-deep);background:var(--gold-soft)}
.opt-card input{accent-color:var(--gold-deep);width:18px;height:18px;margin:0}
.opt-card small{display:block;color:var(--ink-2)}
.save{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;background:var(--c);color:var(--on);border-radius:999px;padding:3px 8px;margin-left:6px;vertical-align:2px}
.buy-row{display:flex;gap:10px;align-items:stretch}
.buy-row .stepper{height:auto}
.buy-row .btn{flex:1}
.assure{display:flex;flex-wrap:wrap;gap:6px 18px;color:var(--ink-2);font-size:.86rem}
.assure span{display:inline-flex;gap:6px;align-items:center}
.assure svg{width:15px;height:15px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{padding:12px 4px;margin-right:18px;font-weight:600;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--c)}
.tabpanel{padding-top:18px;display:grid;gap:14px}
.benefits{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.benefits li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;align-items:start}
.benefits li::before{content:"";width:10px;height:10px;margin-top:7px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px color-mix(in oklab,var(--c) 22%,transparent)}
.table-wrap{overflow-x:auto;max-width:100%}
table.facts{width:100%;border-collapse:collapse;font-size:.94rem}
table.facts th{text-align:left;font-family:var(--f-mono);font-size:.64rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px 10px 0;border-bottom:1px solid var(--gold)}
table.facts td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.facts td.dose{font-family:var(--f-mono);font-size:.8rem;white-space:nowrap;text-align:right;padding-right:0}
table.facts th.dose{text-align:right;padding-right:0}
.dosebar{height:3px;border-radius:3px;background:var(--surface-2);margin-top:8px;overflow:hidden;max-width:220px}
.dosebar i{display:block;height:100%;background:var(--c)}
.timing{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.timing div{border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:6px;color:var(--ink-3)}
.timing div.on{border-color:var(--c);background:color-mix(in oklab,var(--c) var(--tint),var(--surface));color:var(--ink)}
.timing b{font-weight:600;font-size:.9rem}
.disclaimer{font-size:.8rem;color:var(--ink-3);border-top:1px solid var(--line);padding-top:14px;max-width:70ch}
details.faq{border-bottom:1px solid var(--line)}
details.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;padding:18px 0;font-weight:600;font-size:1.05rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-family:var(--f-mono);font-weight:400;transition:transform .3s var(--ease);flex:none}
details.faq[open] summary::after{transform:rotate(45deg)}
details.faq p{padding-bottom:18px;color:var(--ink-2);max-width:66ch}

/* library */
.lib-table td:first-child b{font-weight:600}
.lib-table .for{color:var(--ink-2);max-width:46ch}
.lib-table a.fchip{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.05em;padding:4px 10px;border-radius:999px;border:1px solid var(--line-2);white-space:nowrap}
.lib-table a.fchip:hover{border-color:var(--c);background:color-mix(in oklab,var(--c) var(--tint),transparent)}
.lib-table tr{transition:background .2s}
.lib-table tbody tr:hover{background:var(--surface)}

/* about */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,5vw,80px);align-items:start}
.prose{display:grid;gap:18px;font-size:1.08rem;max-width:62ch}
.prose p{text-wrap:pretty}
.big-quote{font-family:var(--f-display);font-size:clamp(1.8rem,3.6vw,2.8rem);font-weight:400;letter-spacing:-.008em;line-height:1.08}
.form{display:grid;gap:12px;max-width:520px}
.form label{display:grid;gap:6px;font-weight:500;font-size:.92rem}
.form input,.form textarea,.form select{border:1px solid var(--line-2);border-radius:12px;background:var(--surface);padding:12px 14px}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--ink)}

/* assessment */
.assess{position:fixed;inset:0;background:#fff;color:var(--ink);z-index:60;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;overflow:hidden;overflow:clip;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
/* The network is the point here, so it is drawn crisply rather than smeared
   the way the old colour wash was. A touch of blur only softens the glow. */
.assess .neurons{position:absolute;inset:0;width:100%;height:100%;z-index:0;filter:blur(.3px)}
.assess .grain{z-index:1}
.assess .vignette{position:absolute;inset:0;z-index:1;background:radial-gradient(76% 70% at 30% 50%,rgba(255,255,255,.86),rgba(255,255,255,.3) 62%,rgba(255,255,255,0) 100%);pointer-events:none}
.assess > :not(.neurons):not(.grain):not(.vignette){position:relative;z-index:2}
.a-top{display:flex;align-items:center;gap:20px;padding:16px var(--gutter)}
.a-top .logo{color:var(--ink)}
.a-progress{flex:1;display:flex;align-items:center;gap:14px;max-width:560px;margin-inline:auto}
.a-progress .mono{color:var(--ink-2);min-width:62px}
.a-bar{flex:1;height:2px;background:rgba(23,20,14,.12);border-radius:2px;overflow:hidden}
.a-bar i{display:block;height:100%;width:0;background:var(--gold-deep);transition:width .6s var(--ease)}
.a-exit{color:var(--ink-2);text-decoration:none;font-size:.9rem;display:inline-flex;gap:8px;align-items:center}
.a-exit:hover{color:var(--ink)}
.sig-strip{display:none;height:3px;margin:0 var(--gutter);gap:3px}
.sig-strip i{display:block;height:100%;border-radius:3px;flex:1 1 0;transition:none}
.a-body{overflow-y:auto;display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:clamp(24px,4vw,64px);padding:8px var(--gutter) 24px;align-items:center;max-width:1400px;width:100%;margin-inline:auto}
.a-stage{max-width:820px;width:100%}
.a-q{display:grid;gap:14px}
.a-q.enter{animation:qin .6s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateY(18px);filter:blur(4px)}}
.a-q .mono{color:var(--gold-deep)}
.a-q h2{font-size:clamp(2rem,4.6vw,3.9rem);font-weight:400;letter-spacing:-.012em;line-height:1.06}
.a-q .hint{color:var(--ink-2);font-size:1.02rem;max-width:52ch}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.opt{display:flex;align-items:center;gap:14px;text-align:left;padding:15px 16px;border-radius:16px;border:1px solid var(--glass-line);background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ink);transition:border-color .2s,background .25s,color .25s,transform .25s var(--ease);font-size:1rem;line-height:1.3}
.opt:hover,.opt:focus-visible{border-color:var(--gold);background:rgba(255,255,255,.9)}
.opt[aria-pressed="true"]{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep)}
.opt .key{font-family:var(--f-mono);font-size:.64rem;width:24px;height:24px;border-radius:7px;border:1px solid currentColor;display:grid;place-items:center;opacity:.5;flex:none}
.opt small{display:block;opacity:.75;font-size:.84rem;margin-top:2px}
.opt.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.chips-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chips-opts .opt{border-radius:999px;padding:11px 16px;gap:10px}
.chips-opts .opt .tick{width:16px;height:16px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;flex:none;opacity:.6}
.chips-opts .opt[aria-pressed="true"] .tick{background:#fff;border-color:#fff;opacity:1}
.chips-opts .opt[aria-pressed="true"] .tick::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold-deep)}
.pick-note{color:var(--ink-2)}
.scale{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:22px;align-items:end}
.scale .opt{flex-direction:column;align-items:stretch;justify-content:flex-end;gap:10px;padding:12px;min-height:170px;text-align:left}
.scale .opt .lvl{border-radius:8px;background:rgba(23,20,14,.1);transition:background .25s}
.scale .opt[aria-pressed="true"] .lvl{background:#fff}
.scale .opt .sl{font-size:.9rem;font-weight:600}
.binary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:22px;position:relative}
.binary .opt{flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:230px;padding:22px;border-radius:22px}
.binary .opt .big{font-family:var(--f-body);font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:600;letter-spacing:-.012em;line-height:1.02}
.binary .or{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#fff;color:var(--gold-deep);border:1px solid var(--gold-line);display:grid;place-items:center;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.06em;z-index:2;pointer-events:none}
.signal{border:1px solid var(--glass-line);border-radius:22px;padding:18px;background:rgba(255,255,255,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:grid;gap:12px}
.signal .mono{color:var(--gold-deep)}
.signal svg{width:100%;height:auto;display:block}
.signal .lean{font-size:.95rem}
.signal .lean b{font-weight:600}
.sig-rows{display:grid;gap:7px}
.sig-row{display:grid;grid-template-columns:10px 74px minmax(0,1fr);align-items:center;gap:8px;font-size:.78rem;color:var(--ink-2)}
.sig-row .b{height:3px;border-radius:3px;background:rgba(23,20,14,.08);overflow:hidden}
.sig-row .b i{display:block;height:100%;width:30%;border-radius:3px}
.a-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px var(--gutter) 22px}
.a-intro{display:grid;gap:22px;max-width:760px}
.a-intro h1{font-size:clamp(2.8rem,7.4vw,6rem);font-weight:400;letter-spacing:-.014em;line-height:1}
.a-intro p{color:var(--ink-2);font-size:1.12rem;max-width:50ch}
.legend{display:flex;flex-wrap:wrap;gap:6px}
.legend span{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--glass-line);border-radius:999px;padding:.35em .8em;font-size:.82rem;background:var(--glass)}
.calc{display:grid;gap:10px;justify-items:start}
.calc .deg{font-family:var(--f-display);font-size:clamp(5rem,16vw,12rem);font-weight:400;letter-spacing:-.018em;line-height:.88;font-variant-numeric:tabular-nums}
.calc p{color:var(--ink-2)}

/* results */
.r-hero{position:relative;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;overflow:clip;isolation:isolate;margin-top:16px}
.r-hero canvas{position:absolute;inset:-8%;width:116%;height:116%;z-index:-2;filter:blur(28px) saturate(1.25)}
.r-hero .grain{z-index:-1}
.r-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,.65),rgba(255,255,255,.05) 60%)}
.r-hero-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(24px,5vw,60px)}
.r-hero .mono{color:var(--gold-deep)}
.r-deg{font-family:var(--f-display);font-size:clamp(5.4rem,15vw,11.5rem);font-weight:400;letter-spacing:-.018em;line-height:.88;font-variant-numeric:tabular-nums;margin-block:10px 18px}
.r-deg sup{font-size:.4em;vertical-align:.95em;margin-left:.02em}
.r-sum{font-family:var(--f-display);font-size:clamp(1.3rem,2.5vw,1.9rem);font-weight:400;letter-spacing:-.012em;line-height:1.18;max-width:28ch}
.r-sum b{font-family:var(--f-body);font-weight:650;background:linear-gradient(transparent 62%,color-mix(in oklab,var(--c) 70%,transparent) 62%);padding-inline:2px}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.badge{border:1px solid var(--glass-line);border-radius:999px;padding:.35em .85em;font-size:.82rem;background:var(--glass)}
.r-radar{max-width:440px;width:100%;justify-self:center}
.r-radar svg{width:100%;height:auto;display:block;overflow:visible}
.example-note{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border:1px dashed var(--line-2);border-radius:var(--r-m);padding:12px 16px;margin-top:16px}
.recs{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;margin-top:14px}
.rec{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;display:grid}
.rec-primary{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
.rec-vis{background:#fff;display:grid;place-items:center;min-height:260px;position:relative;isolation:isolate}
.rec-vis::before{content:"";position:absolute;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);opacity:.45;z-index:-1}
.rec-vis .bottle{height:220px;width:auto;max-width:80%}
.rec-secondary .rec-vis{min-height:180px}
.rec-secondary .rec-vis .bottle{height:150px}
.rec-body{padding:clamp(20px,3vw,32px);display:grid;gap:14px;align-content:start}
.rec-body h3{font-size:clamp(2.4rem,5vw,3.8rem);font-weight:400;letter-spacing:-.012em;line-height:1}
.rec-secondary h3{font-size:2.2rem}
.why{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.why li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;font-size:.92rem;padding-bottom:8px;border-bottom:1px solid var(--line)}
.why li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c);transform:translateY(-2px)}
.why .pts{font-family:var(--f-mono);font-size:.68rem;color:var(--ink-3)}
.focused-note{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(20px,3vw,32px);display:grid;gap:12px;align-content:start}
.focused-note h3{font-size:1.7rem}
.stack-offer{margin-top:14px;border-radius:var(--r-l);padding:20px 24px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;background:linear-gradient(100deg,color-mix(in oklab,var(--c1) var(--tint),var(--surface)),color-mix(in oklab,var(--c2) var(--tint),var(--surface)));border:1px solid var(--line)}
.stack-offer .duo{display:flex}
.stack-offer .duo .bottle{height:70px;width:auto;margin-right:-12px}
.stack-offer h3{font-size:1.4rem}
.ranked{display:grid;border-top:1px solid var(--gold)}
.rank{display:grid;grid-template-columns:36px minmax(0,1.3fr) minmax(0,2fr) 56px 88px;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.rank .pos{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3)}
.rank .nm{display:flex;align-items:center;gap:10px;font-weight:600;min-width:0}
.rank .nm small{color:var(--ink-3);font-weight:400;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.05em}
.rank .track{height:8px;border-radius:8px;background:var(--surface-2);overflow:hidden}
.rank .track i{display:block;height:100%;border-radius:8px;background:var(--c);transform-origin:left;animation:grow 1.2s var(--ease) both}
@keyframes grow{from{transform:scaleX(.15)}}
.rank .pct{font-family:var(--f-mono);font-size:.8rem;text-align:right}
.rank a{font-size:.86rem;font-weight:600;text-decoration:none;white-space:nowrap;text-align:right}
.rank a:hover{text-decoration:underline}

@media (max-width:1060px){
  .grid-s{grid-template-columns:repeat(2,minmax(0,1fr))}
  .standards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .standards div:nth-child(3){padding-left:0;border-left:0}
  .standards div:nth-child(n+3){border-top:1px solid var(--line)}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-grid > :first-child{grid-column:1/-1}
}
@media (max-width:960px){
  .pdp,.about-grid,.r-hero-in,.recs,.rec-primary{grid-template-columns:minmax(0,1fr)}
  .grid-p{grid-template-columns:repeat(2,minmax(0,1fr))}
      .pdp-vis{position:relative;top:0;aspect-ratio:4/3}
  .a-body{grid-template-columns:minmax(0,1fr);align-items:start;padding-top:20px}
  .signal{display:none}
  .sig-strip{display:flex}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step-vis{display:none}
  .pathways{gap:12px}
}
@media (max-width:640px){
  .grid-p,.grid-s,.standards{grid-template-columns:minmax(0,1fr)}
  .standards div + div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .opts{grid-template-columns:minmax(0,1fr)}
  .scale{grid-template-columns:minmax(0,1fr);gap:6px}
  .scale .opt{min-height:0;flex-direction:row;align-items:center;justify-content:flex-start;padding:12px 14px}
  .scale .opt .lvl{height:10px!important;width:var(--lw);flex:none}
  .binary{grid-template-columns:minmax(0,1fr)}
  .binary .opt{min-height:130px}
  .kv{grid-template-columns:minmax(0,1fr)}
  .kv div + div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .rank{grid-template-columns:28px minmax(0,1fr) 52px;row-gap:8px}
  .rank .track{grid-column:2/4;grid-row:2}
  .rank a{grid-column:2/4;grid-row:3}
  .stack-offer{grid-template-columns:minmax(0,1fr)}
  .guide-inline{grid-template-columns:minmax(0,1fr)}
  .mini-aur{display:none}
  .timing{grid-template-columns:repeat(2,minmax(0,1fr))}
    .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a-top .logo span{display:none}
  .a-foot .kh{display:none}
  .rank a{text-align:left}
  .count-note{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- Quantity stepper on product cards ---------- */
.pcard-foot{flex-wrap:wrap;row-gap:10px}
.qstep{position:relative;z-index:2;display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line-2);border-radius:999px;padding:2px;background:var(--surface)}
.qstep button{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.95rem;line-height:1;color:var(--ink-2);transition:background .2s,color .2s}
.qstep button:hover{background:color-mix(in oklab,var(--c) 22%,transparent);color:var(--ink)}
.qstep button:focus-visible{outline:2px solid var(--c);outline-offset:1px}
.qstep output{min-width:22px;text-align:center;font-variant-numeric:tabular-nums;font-size:.86rem;font-weight:600}
.pcard-foot .price{flex:1 1 auto}
.pcard-foot .add-mini{flex:0 0 auto}

/* ---------- Shop list view ---------- */
.list-p{display:grid;gap:10px}
.list-p .pcard{flex-direction:row;align-items:stretch}
.list-p .pcard:hover{transform:none;box-shadow:var(--shadow)}
.list-p .pcard-vis{flex:0 0 140px;width:140px;aspect-ratio:auto}
.list-p .pcard-vis .corner{display:none}
.list-p .pcard-vis .bottle{height:86%}
.list-p .pcard-body{padding:16px 20px;gap:5px;justify-content:center}
.list-p .pcard h3{font-size:1.4rem}
.list-p .pcard .tag{font-size:.9rem;max-width:64ch}
.list-p .pcard-foot{padding-top:12px}
@media (max-width:640px){
  .list-p .pcard-vis{flex-basis:92px;width:92px}
  .list-p .pcard h3{font-size:1.1rem}
  .list-p .pcard .tag{display:none}
}

/* ---------- Results: compounds inside a direction card ---------- */
.rec .ings{margin-top:2px}
.rec .ings .ing{text-decoration:none;color:inherit;transition:background .2s}
.rec .ings .ing:hover{background:color-mix(in oklab,var(--c) 32%,var(--surface))}

/* ---------- Real product photography ---------- */
/* Product visuals are untinted, so the photo's own white backdrop sits flush
   with no blending or masking needed. */
img.bottle{object-fit:contain;display:block}
.pcard-vis img.bottle{height:90%;width:90%}
.pdp-vis img.bottle{max-height:88%;width:auto;max-width:88%}
.list-p .pcard-vis img.bottle{height:88%;width:88%}
.scard-vis img.bottle,.duo img.bottle,.rec-vis img.bottle,.line-vis img.bottle{width:100%;height:100%}
/* The radial glow behind the bottle fights the photo's own backdrop. */
.pcard-vis:has(img.bottle)::after,.pdp-vis:has(img.bottle) .glow{display:none}

/* ---------- Format and size selection ---------- */
.vpick{display:grid;gap:8px;margin-bottom:6px}
.vopts{display:flex;flex-wrap:wrap;gap:8px}
.vopts button{border:1px solid var(--line-2);background:var(--surface);border-radius:12px;padding:.6em 1.1em;font-weight:600;font-size:.92rem;color:var(--ink-2);transition:border-color .2s,background .2s,color .2s}
.vopts button:hover{border-color:var(--c)}
.vopts button[aria-checked="true"]{border-color:var(--c);background:color-mix(in oklab,var(--c) 14%,var(--surface));color:var(--ink)}
.vopts-size button{display:grid;gap:2px;justify-items:start;padding:.55em 1em;min-width:104px}
.vopts-size button small{font-family:var(--f-mono,ui-monospace,monospace);font-size:.76rem;color:var(--ink-2);font-weight:500}
.vopts-size button[aria-checked="true"] small{color:var(--ink)}

/* ---------- Calculator shortcut on a product page ---------- */
.calc-cta{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line-2);border-radius:var(--r-m,14px);text-decoration:none;color:inherit;background:var(--surface);transition:border-color .2s,transform .2s}
.calc-cta:hover{border-color:var(--c);transform:translateY(-1px)}
.calc-cta > span:first-child{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;background:color-mix(in oklab,var(--c) 18%,var(--surface))}
.calc-cta > span:first-child svg{width:17px;height:17px}
.calc-cta b{display:block;font-size:.98rem}
.calc-cta small{display:block;color:var(--ink-2);font-size:.85rem;margin-top:1px}
.calc-cta .arr{margin-left:auto;color:var(--ink-2)}

/* ---------- Reconstitution calculator ---------- */
.calc-from{display:inline-flex;align-items:center;gap:9px;padding:.5em 1em;border:1px solid var(--line-2);border-radius:999px;margin-bottom:18px;font-size:.9rem}
.calc-from a{color:inherit}
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
.calc-in,.calc-out{border:1px solid var(--line);border-radius:var(--r-l);padding:22px;background:var(--surface)}
.calc-in{display:grid;gap:12px;align-content:start}
.fld{display:grid;gap:7px;font-size:.93rem;font-weight:500}
.fld-in{display:flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:12px;padding:.15em .6em .15em .9em;background:var(--ground,#fff);transition:border-color .2s}
.fld-in:focus-within{border-color:var(--gold-deep,#8a6a2f)}
.fld-in input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1.28rem;font-weight:600;font-variant-numeric:tabular-nums;padding:.5em 0;outline:none;color:var(--ink)}
.fld-in input::-webkit-outer-spin-button,.fld-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.fld-in input[type=number]{-moz-appearance:textfield;appearance:textfield}
.fld-in .suffix{color:var(--ink-2);font-size:.9rem}
.unit-seg{display:inline-flex;gap:2px;background:var(--surface);border:1px solid var(--line-2);border-radius:999px;padding:2px}
.unit-seg button{padding:.3em .8em;border-radius:999px;font-size:.82rem;font-weight:600;color:var(--ink-2)}
.unit-seg button[aria-pressed="true"]{background:var(--gold-deep,#8a6a2f);color:#fff}
.seg-syr{flex-wrap:wrap}
.seg-syr button[aria-checked="true"]{background:var(--gold-deep,#8a6a2f);color:#fff}

.calc-figures{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.calc-figures > div{display:grid;gap:3px;align-content:start}
.calc-figures .num{font-family:var(--f-body);font-weight:650;font-size:2rem;line-height:1.05;letter-spacing:-.014em;font-variant-numeric:tabular-nums}
.calc-figures .num small{font-size:.9rem;font-weight:500;letter-spacing:0;color:var(--ink-2)}
.calc-figures .sub{font-size:.78rem;color:var(--ink-2);text-transform:none;letter-spacing:.02em}
.calc-figures .hero-fig{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px}
.calc-figures .hero-fig .num{font-size:3.1rem;color:var(--gold-deep,#8a6a2f)}
.calc-figures .hero-fig.bad .num{color:#C0392B}
.calc-warn{margin-top:14px;padding:12px 14px;border-radius:12px;background:color-mix(in oklab,#C0392B 10%,var(--surface));border:1px solid color-mix(in oklab,#C0392B 30%,transparent);font-size:.9rem}
.calc-empty{display:grid;gap:6px;place-content:center;text-align:center;min-height:220px}
.syr{margin-top:20px;display:grid;gap:8px;justify-items:center}
.syr svg{width:100%;max-width:420px;height:auto}
.syr .barrel{fill:var(--ground,#fff);stroke:var(--line-2);stroke-width:1.5}
.syr .fill{fill:color-mix(in oklab,var(--gold-deep,#8a6a2f) 26%,transparent)}
.syr .tick{stroke:var(--ink-3,#a9a49c);stroke-width:1}
.syr .tick.maj{stroke:var(--ink-2);stroke-width:1.5}
.syr .tl{font-family:var(--f-mono,ui-monospace,monospace);font-size:11px;fill:var(--ink-2)}
.syr .plunger{fill:var(--gold-deep,#8a6a2f)}
.syr .needle{stroke:var(--ink-3,#a9a49c);stroke-width:2.5;stroke-linecap:round}
.calc-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.calc-steps > div{display:grid;gap:4px;align-content:start;padding-top:14px;border-top:1px solid var(--line)}
.calc-steps b{font-size:1.05rem}
.calc-steps p{color:var(--ink-2);font-size:.9rem}

@media (max-width:900px){
  .calc-grid{grid-template-columns:1fr}
  .calc-steps{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .calc-figures{grid-template-columns:1fr}
  .calc-steps{grid-template-columns:1fr}
  .calc-figures .hero-fig .num{font-size:2.4rem}
}

/* =======================================================================
   Design pass: flat warm layers, tight-tracked medium-weight type,
   pill controls, and one shared motion contract.
   ======================================================================= */

/* ---------- Type scale ---------- */
h1{font-size:clamp(2.6rem,6.4vw,5.2rem)}
h2{font-size:clamp(2rem,4vw,3.4rem)}
h3{font-size:clamp(1.15rem,1.6vw,1.5rem)}
.lede{font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.5;letter-spacing:-.018em;color:var(--ink-2);max-width:62ch}
.eyebrow{color:var(--gold-deep)}
.mono{font-size:.66rem;letter-spacing:.09em}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:var(--r-pill);
  padding:.92em 1.6em;font-size:.94rem;font-weight:550;letter-spacing:-.012em;line-height:1;text-decoration:none;
  border:1px solid transparent;transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.btn-lg{padding:1.06em 1.9em;font-size:1rem}
.btn-primary{background:var(--ink);color:var(--canvas);border-color:var(--ink)}
.btn-primary:hover{background:var(--gold-deep);border-color:var(--gold-deep);transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{background:var(--panel);border-color:var(--ink-3);transform:translateY(-1px)}
.btn .arr{transition:transform var(--t) var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.add-mini{background:var(--ink);color:var(--canvas);border-radius:var(--r-pill);padding:.62em 1.15em;font-weight:550;font-size:.85rem;letter-spacing:-.012em;transition:background var(--t) var(--ease),transform var(--t) var(--ease)}
.add-mini:hover{background:var(--gold-deep);transform:translateY(-1px)}

/* ---------- Pill controls ---------- */
.chip,.seg button,.vopts button,.unit-seg button{transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}
.chip{border-radius:var(--r-pill);font-weight:500;letter-spacing:-.012em}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.chip[aria-pressed="true"] .dot{background:var(--c,var(--canvas))}
.seg{border-radius:var(--r-pill)}
.seg button[aria-pressed="true"],.seg button[aria-checked="true"]{background:var(--ink);color:var(--canvas)}
.vopts button{border-radius:var(--r-pill)}
.vopts-size button{border-radius:var(--r-m)}

/* ---------- Surfaces ---------- */
.pcard,.scard,.calc-in,.calc-out,.rec,.opt-card,.guide-inline{border-radius:var(--r-l)}
.pcard{border-color:var(--line);background:var(--surface);transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),border-color var(--t) var(--ease)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--line-2)}
.pcard-vis,.pdp-vis{background:var(--ground)}
/* The real size of a product name. The tracking here was tuned for Inter and
   was squeezing Forma, which already sets tight. */
.pcard h3{font-size:1.3rem;letter-spacing:-.008em}
.pcard .tag{font-size:.92rem;letter-spacing:-.004em}
.toolbar{background:color-mix(in oklab,var(--canvas) 88%,transparent)}

/* ---------- Section rhythm ---------- */
.sec{padding-block:clamp(52px,7vw,104px)}
.sec-head{margin-bottom:clamp(24px,3vw,40px)}
.phead{padding-block:clamp(40px,6vw,88px) clamp(20px,2.5vw,34px)}

/* ---------- Header ---------- */
.site-head{position:sticky;top:0;z-index:60;background:color-mix(in oklab,var(--canvas) 82%,transparent);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.site-head.stuck{border-bottom-color:var(--line);background:color-mix(in oklab,var(--canvas) 94%,transparent)}
.nav a{font-size:.94rem;font-weight:500;letter-spacing:-.012em;border-radius:var(--r-pill);padding:.5em .9em;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
.nav a:hover{background:var(--panel)}
.nav a[aria-current="page"]{background:var(--panel);color:var(--ink)}

/* ---------- Motion contract ----------
   Everything enters the same way: a short rise and fade, staggered by position
   in its group. Anything that opts out of motion gets the end state instantly. */
.reveal{opacity:0;transform:translateY(16px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.06s}
.reveal[data-d="2"]{transition-delay:.12s}
.reveal[data-d="3"]{transition-delay:.18s}
.reveal[data-d="4"]{transition-delay:.24s}
.reveal[data-d="5"]{transition-delay:.3s}

/* Opacity only, deliberately. Animating transform here would leave a transform
   on #view, which makes it the containing block for position:fixed children and
   collapses the immersive assessment view to zero height. The rise comes from
   the per-section reveals instead. */
#view{animation:viewIn .34s var(--ease) both}
@keyframes viewIn{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  #view{animation:none}
  .btn:hover,.pcard:hover,.add-mini:hover{transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Header fit ----------
   Six nav items plus tools needs tighter horizontal rhythm, and items must
   never wrap onto a second line. */
.head-row{gap:14px;height:68px}
.nav{gap:0}
.nav a{padding:.5em .68em;font-size:.9rem;white-space:nowrap}
.nav a[aria-current="page"]{color:var(--ink);background:var(--panel)}
.head-tools{gap:6px}
@media (max-width:1180px){
  .nav a{padding:.5em .5em;font-size:.86rem}
}


/* ---------- Product card footer ----------
   Price on its own line, controls beneath, so cards line up regardless of how
   long the name, price or size label happens to be. */
.pcard-foot{display:grid;grid-template-columns:1fr auto;grid-template-areas:"price price" "qty add";gap:12px;align-items:center;padding-top:16px;border-top:1px solid var(--line);margin-top:auto}
.pcard-foot .price{grid-area:price;flex:none;font-size:1.05rem;font-weight:560;letter-spacing:-.025em}
.pcard-foot .price .mono{font-size:.62rem;color:var(--ink-3)}
.pcard-foot .qstep{grid-area:qty;justify-self:start}
.pcard-foot .add-mini{grid-area:add;justify-self:end}
.list-p .pcard-foot{grid-template-columns:1fr auto auto;grid-template-areas:"price qty add";border-top:0;margin-top:auto;padding-top:10px}

/* Cards share a baseline so the footers align across a row. */
.pcard-body{gap:7px}

/* ---------- Narrow-viewport safety ----------
   Flex and grid children default to min-width:auto, so a non-wrapping row of
   segment buttons sets a min-content floor its container cannot shrink below.
   That floor is what pushed the shop toolbar and the calculator wider than the
   viewport. Let the control rows wrap, and allow every child to shrink. */
.seg{flex-wrap:wrap}
.tb-row,.tb-row > *,.search-box,.chips{min-width:0}
.calc-grid,.calc-in,.calc-out,.calc-in > *,.fld,.fld-in,.calc-figures > *{min-width:0}
.fld-in{flex-wrap:wrap;row-gap:0}
.fld-in input{min-width:6ch}
.toolbar{max-width:100%}

@media (max-width:560px){
  .fld-in{padding-inline:.7em}
  .unit-seg{margin-left:auto}
  .calc-in,.calc-out{padding:16px}
  .seg button{padding:.35em .7em;font-size:.8rem}
  .vopts button{padding:.55em .9em}
}

/* ================================================================
   The gate, the media hero, and the glass header
   ================================================================ */

/* Fallback only. app.js measures the real bar and overwrites this, so the
   offset can never drift away from the header height. */
:root{--head-h:68px;--deep:#0B1A2A}

/* ---------- Header: glass, and out of the way ----------
   Fixed rather than sticky so the hero can run under it, which is what lets
   the bar read as glass instead of as a lid. #view carries the offset on every
   page that isn't the hero. */
.site-head{position:fixed;top:0;left:0;right:0;z-index:60;
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.58));
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 14px 34px -30px rgba(10,24,40,.7);
  transition:transform .45s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
/* The specular pass. Real glass is brightest along its top edge and picks up a
   little colour from whatever sits behind it; overlay does both at once. */
.site-head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.06) 46%,rgba(255,255,255,0) 100%);
  mix-blend-mode:overlay}
.site-head.stuck{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.78));
  border-bottom-color:var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 18px 40px -32px rgba(10,24,40,.55)}
.site-head.hid{transform:translateY(-102%)}
.head-row,.mnav{position:relative;z-index:1}

#view{padding-top:var(--head-h)}
body.over-head #view,body.immersive #view{padding-top:0}
body.gated{overflow:hidden}
body.gated .site-head,body.gated .site-foot,body.gated main{display:none}

/* ---------- The gate ----------
   First visit only. One question, two answers, and nothing else on screen. */
.gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:var(--deep);overflow:hidden;opacity:0;transition:opacity .8s var(--ease)}
.gate.in{opacity:1}
.gate.out{opacity:0;transition:opacity .5s var(--ease)}
.gate-media{position:absolute;inset:0;background:var(--deep) url("../video/hero-poster.jpg") center/cover no-repeat}
/* The footage swings from near-black to pale lilac across the loop, so the
   copy cannot rely on the veil alone. Knocking the base down here means the
   text holds on the brightest frame instead of only the average one. */
.gate-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s var(--ease);filter:brightness(.68) saturate(1.12) contrast(1.04)}
.gate-video.on{opacity:1}
/* A pool of shadow under the copy, then a vignette to close the frame. */
.gate-veil{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  radial-gradient(64% 52% at 50% 54%,rgba(5,13,23,.66) 0%,rgba(5,13,23,.4) 58%,rgba(5,13,23,0) 100%),
  radial-gradient(130% 100% at 50% 40%,rgba(5,13,23,0) 30%,rgba(5,13,23,.5) 76%,rgba(5,13,23,.88) 100%)}

.gate-in{position:relative;z-index:3;width:min(1080px,100%);padding:clamp(26px,5vw,56px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(20px,4.2vh,40px);text-align:center;color:#fff}
.gate-mark{display:flex;align-items:center;gap:11px;font-family:var(--f-body);
  font-size:.86rem;font-weight:600;letter-spacing:.2em;color:rgba(255,255,255,.92)}
.gate-h{color:#fff;font-size:clamp(1.9rem,4.6vw,3.1rem);font-weight:400;letter-spacing:-.012em;max-width:18ch;
  text-shadow:0 2px 30px rgba(5,14,24,.5)}
.gate-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(13px,1.8vw,20px);width:100%}

/* Glass that sits on moving footage: a bright top edge, a hairline all round,
   and a long soft shadow so the card looks lifted off the video. */
.gate-opt{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;
  gap:9px;text-align:left;padding:clamp(20px,2.7vw,30px);border-radius:20px;color:#fff;
  background:linear-gradient(158deg,rgba(255,255,255,.17),rgba(255,255,255,.055));
  -webkit-backdrop-filter:blur(20px) saturate(165%);backdrop-filter:blur(20px) saturate(165%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.16),
    0 30px 64px -34px rgba(0,0,0,.9);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease)}
.gate-opt::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(160deg,rgba(255,255,255,.28),rgba(255,255,255,0) 40%);mix-blend-mode:overlay}
.gate-opt .go-k{color:rgba(255,255,255,.7)}
.gate-opt .go-t{font-family:var(--f-display);font-size:clamp(1.3rem,2.3vw,1.8rem);
  font-weight:400;letter-spacing:-.012em;line-height:1.12}
.gate-opt .arr{transition:transform .35s var(--ease)}
.gate-opt:hover,.gate-opt:focus-visible{transform:translateY(-5px);
  background:linear-gradient(158deg,rgba(255,255,255,.26),rgba(255,255,255,.1))}
.gate-opt:hover .arr{transform:translateX(4px)}
.gate-opt:active{transform:translateY(-2px)}
.gate-opt[data-tone="gold"]:hover,.gate-opt[data-tone="gold"]:focus-visible{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(216,178,106,.62),0 30px 64px -30px rgba(120,82,20,.7)}
.gate-opt[data-tone="violet"]:hover,.gate-opt[data-tone="violet"]:focus-visible{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(139,134,232,.66),0 30px 64px -30px rgba(52,44,140,.7)}

/* Entrance sits on the groups, never on .gate-opt itself: an animation with a
   fill would win against the hover transform and kill the lift. */
@keyframes gateRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.gate .gate-mark,.gate .gate-h,.gate .gate-choices{opacity:0}
.gate.in .gate-mark{animation:gateRise .8s var(--ease) .15s both}
.gate.in .gate-h{animation:gateRise .8s var(--ease) .3s both}
.gate.in .gate-choices{animation:gateRise .9s var(--ease) .46s both}

@media (max-width:720px){
  .gate-choices{grid-template-columns:minmax(0,1fr)}
  .gate-in{gap:24px}
}

/* ---------- Hero: full-bleed footage, copy on the floor ---------- */
.hero-band{position:relative;isolation:isolate;overflow:hidden;background:var(--deep);
  border-bottom:0;min-height:100svh;display:flex;align-items:flex-end}
.hero-media{position:absolute;inset:0;z-index:0;
  background:var(--deep) url("../video/hero-poster.jpg") center/cover no-repeat}
.hero-band .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s var(--ease);filter:brightness(.74) saturate(1.1)}
.hero-band .hero-video.on{opacity:1}
.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(180deg,rgba(6,15,26,.55) 0%,rgba(6,15,26,.12) 26%,rgba(6,15,26,.5) 68%,rgba(6,15,26,.9) 100%),
  linear-gradient(90deg,rgba(6,15,26,.6) 0%,rgba(6,15,26,0) 58%)}
.hero-band .hero-in{position:relative;z-index:3;width:100%;display:block;min-height:0;
  padding-block:calc(var(--head-h) + 32px) clamp(46px,8vh,92px)}
.hero-band .hero-copy{display:grid;gap:0;max-width:none}
.hero-band h1{color:#fff;font-size:clamp(2.7rem,6.6vw,5.4rem);font-weight:400;line-height:1.02;
  letter-spacing:-.016em;max-width:15ch;text-shadow:0 2px 40px rgba(5,14,24,.45)}
.hero-band .lede{color:rgba(255,255,255,.84);font-size:clamp(1.02rem,1.5vw,1.22rem);
  max-width:44ch;margin-top:20px}
.hero-band .hero-actions{margin-top:clamp(26px,3.4vw,38px);display:flex;flex-wrap:wrap;gap:11px}
.hero-band .hero-note{margin-top:clamp(28px,4vh,44px);color:rgba(255,255,255,.6);
  display:flex;align-items:center;gap:.7em;flex-wrap:wrap}
.hero-band .hero-note .dot{background:rgba(255,255,255,.4);width:.4em;height:.4em}

/* A ghost button has to survive moving footage, so it carries its own glass. */
.btn-onmedia{color:#fff;background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(12px) saturate(160%);backdrop-filter:blur(12px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 0 1px rgba(255,255,255,.4)}
.btn-onmedia:hover{background:rgba(255,255,255,.22);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.75)}
.hero-band .btn-primary{background:var(--gold);color:#1B1A17}
.hero-band .btn-primary:hover{background:#D8B26A}

@media (prefers-reduced-motion:reduce){
  .gate-video,.hero-band .hero-video{transition:none}
  .gate .gate-mark,.gate .gate-h,.gate .gate-choices{opacity:1;animation:none}
  .site-head{transition:none}
}

/* ---------- Header type ----------
   Nav sits hard against the wordmark and carries real weight, so the bar reads
   as one unit instead of a logo marooned from its links. */
.head-row{gap:clamp(14px,2vw,30px)}
.nav{gap:clamp(2px,.6vw,10px)}
.nav a{font-weight:700;font-size:.95rem;letter-spacing:-.01em;color:var(--ink);padding:.5em .7em}
.nav a:hover{background:var(--panel);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--panel);color:var(--ink)}
.mnav a{font-weight:700}

/* A solid gold that survives moving footage. The deep brand gold turns muddy
   against the video; this is the tone the wordmark needle already uses. */
.hero-band .btn-primary{background:var(--gold-lift);color:#1B1A17;font-weight:700}
.hero-band .btn-primary:hover{background:var(--gold-lift-2);color:#1B1A17}
.btn-onmedia{font-weight:700}

/* ---------- Pathways ----------
   The compass is gone. What replaces it takes its cue from the footage: each
   category is a small lit sphere, the way the render treats a molecule. Three
   stacked gradients do the work — a specular hotspot up and left, a warmer
   bounce low and right, and a body that darkens toward the rim — so the shape
   reads as lit rather than as a flat coloured circle. */
.pathways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,20px)}
.pway{position:relative;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;
  padding:clamp(18px,2vw,26px);border-radius:var(--r-l);background:var(--surface);
  border:1px solid var(--line);overflow:hidden;
  transition:transform .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease)}
.pway::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in oklab,var(--c) 14%,transparent),transparent 70%);
  transition:opacity .4s var(--ease)}
.pway:hover,.pway:focus-visible{transform:translateY(-4px);border-color:color-mix(in oklab,var(--c) 42%,var(--line));
  box-shadow:0 24px 44px -28px color-mix(in oklab,var(--c) 70%,transparent)}
.pway:hover::after,.pway:focus-visible::after{opacity:1}

.pway-orb{position:relative;width:clamp(52px,5vw,68px);height:clamp(52px,5vw,68px);border-radius:50%;flex:none;
  background:
    radial-gradient(38% 34% at 32% 26%,rgba(255,255,255,.95),rgba(255,255,255,0) 62%),
    radial-gradient(64% 60% at 72% 78%,color-mix(in oklab,var(--c) 62%,#fff),transparent 72%),
    radial-gradient(100% 100% at 50% 44%,var(--c),color-mix(in oklab,var(--c) 58%,#241B33) 100%);
  box-shadow:inset 0 -6px 16px color-mix(in oklab,var(--c) 40%,#1a1030),
    0 14px 26px -14px color-mix(in oklab,var(--c) 80%,transparent);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.pway:hover .pway-orb{transform:translateY(-2px) scale(1.06);
  box-shadow:inset 0 -6px 16px color-mix(in oklab,var(--c) 40%,#1a1030),
    0 20px 34px -14px color-mix(in oklab,var(--c) 90%,transparent)}

.pway-body{display:grid;gap:6px}
.pway-t{font-family:var(--f-body);font-size:1.12rem;font-weight:700;letter-spacing:-.012em;line-height:1.15}
.pway-s{color:var(--ink-2);font-size:.92rem;line-height:1.45;text-wrap:pretty}
/* The count is what hugs the floor, not the copy: that keeps every title on
   the same baseline across a row whatever length the blurb runs to. */
.pway-n{color:var(--ink-3);display:flex;align-items:center;gap:.5em;margin-top:auto;padding-top:12px}
.pway:hover .pway-n{color:color-mix(in oklab,var(--c) 62%,var(--ink-2))}
.pway:hover .arr{transform:translateX(3px)}
.pway .arr{transition:transform .3s var(--ease)}

@media (max-width:1100px){ .pathways{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* One per row on a phone, and laid out as a grid rather than a flex row: the
   count is a bare text node beside the arrow, so it needs a cell of its own
   instead of being floated on top of the copy. */
@media (max-width:520px){
  .pathways{grid-template-columns:minmax(0,1fr)}
  .pway{display:grid;grid-template-columns:46px minmax(0,1fr);
    grid-template-areas:"orb body" ". count";column-gap:14px;row-gap:8px;align-items:start}
  .pway-orb{grid-area:orb;width:46px;height:46px;margin-top:3px}
  .pway-body{grid-area:body}
  .pway-n{grid-area:count;margin-top:0;padding-top:0}
}

/* Forma DJR Display draws a narrow word space, and at headline sizes with the
   optical-size axis engaged the words start to run together. Opening the word
   space (not the letter space) separates them without loosening the fit. */
h1,h2,.gate-h,.hero-band h1{word-spacing:.09em}
h3,h4,.lede,.gate-opt .go-t,.pcard h3,.pway-t{word-spacing:.05em}

/* ---------- Filter bar ----------
   One line of controls, one line of pathways, and it scrolls away with the
   page. Format used to be eight buttons and the pathways used their full
   names, which wrapped the bar onto four lines on a laptop — most of the
   viewport, permanently, because the bar was sticky. */
.toolbar .tb-row:first-child{gap:10px}
.toolbar .search-box{flex:1 1 320px}
.toolbar .select{height:44px;flex:0 0 auto}
.toolbar .seg-view{margin-left:auto;padding:4px}
.toolbar .seg-view button{padding:.4em .95em}

.tb-cats{gap:8px;align-items:baseline}
.tb-cats .chips{flex:1 1 auto;gap:6px}
.tb-cats .chip{font-size:.85rem;padding:.42em .85em}
.tb-cats .count-note{flex:none;white-space:nowrap}

@media (max-width:760px){
  /* The pathway row becomes a single swipeable line rather than four stacked
     rows of chips. No gutter bleed: the negative margin widened the row past
     the viewport and put a horizontal scrollbar on the whole page. */
  .tb-cats .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:2px}
  .tb-cats .chips::-webkit-scrollbar{display:none}
  /* nowrap matters: a column flex container that wraps starts a second
     column rather than constraining its child, so .chips sized itself to
     its content and pushed the whole page sideways. */
  .tb-cats{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px}
  .tb-cats .count-note{margin-left:0}
  .toolbar .seg-view{margin-left:0}
  .toolbar .select{flex:1 1 auto}
}

/* ---------- The profile step ---------- */
.a-me .hint{max-width:56ch}
.me-grid{display:grid;gap:clamp(16px,2.4vw,26px);margin-top:clamp(20px,3vh,32px);max-width:720px}
.me-field{display:grid;gap:9px}
.me-field > .mono{color:var(--ink-3)}
.me-seg{display:flex;gap:8px;flex-wrap:wrap}
.me-seg button{padding:.6em 1.1em;border-radius:var(--r-pill);border:1px solid var(--line-2);
  font-size:.92rem;font-weight:500;background:var(--surface);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),color var(--t) var(--ease)}
.me-seg button:hover{border-color:var(--ink)}
.me-seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.me-head{display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:wrap}
.me-units button{padding:.4em .8em;font-size:.8rem}
.me-inputs{display:flex;gap:10px;flex-wrap:wrap}
.me-input{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-pill);padding:0 16px;height:52px;flex:1 1 120px;max-width:180px;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.me-input:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}
.me-input input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:1.05rem;
  font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.me-input input::-webkit-outer-spin-button,.me-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.me-input .unit{color:var(--ink-3);flex:none}
.me-bmi{color:var(--ink-2);margin-top:2px}

/* ---------- The protocol ---------- */
.proto{padding-block:clamp(30px,4vw,54px)}
.proto-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);
  gap:clamp(20px,3vw,44px);align-items:start;margin-bottom:clamp(22px,3vw,36px)}
.proto-head h2{font-size:clamp(2rem,4.2vw,3.2rem);margin-top:6px}
.proto-head .lede{margin-top:12px}

.me-card{border:1px solid var(--line);border-radius:var(--r-l);padding:20px;background:var(--surface);display:grid;gap:10px}
.me-card > .mono{color:var(--ink-3)}
.me-card ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.me-card li{border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.3em .75em;font-size:.86rem}
.me-flag{color:var(--gold-deep);line-height:1.45;font-size:.86rem;margin:0}
.me-card-empty p{color:var(--ink-2);font-size:.92rem;line-height:1.5;margin:0}
.me-card-empty .btn{justify-self:start}

.proto-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(14px,2vw,22px)}
.pick{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(14px,2vw,22px);
  border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);
  padding:clamp(16px,2vw,22px);position:relative;overflow:hidden}
.pick::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--c)}
.pick-vis{position:relative;background:var(--ground);border-radius:var(--r-m);display:grid;place-items:center;
  aspect-ratio:1;overflow:hidden}
.pick-vis .bottle,.pick-vis img{width:82%;height:auto}
.pick-vis .corner{position:absolute;top:10px;left:10px;color:var(--ink-3);font-size:.6rem}
.pick-body{display:grid;gap:8px;align-content:start}
.pick-rank{color:var(--c)}
.pick-body h3{font-size:1.5rem}
.pick-body h3 a{text-decoration:none}
.pick-tag{color:var(--ink-2);font-size:.95rem;line-height:1.45}
.pick-why{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:5px}
.pick-why li{position:relative;padding-left:16px;font-size:.9rem;color:var(--ink-2);line-height:1.45}
.pick-why li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--c)}
.pick-meta{display:flex;flex-wrap:wrap;gap:12px;color:var(--ink-3);margin-top:4px}
.pick-meta .dot{margin-right:.5em}
.pick-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:10px;padding-top:14px;border-top:1px solid var(--line)}
.pick-foot .price{font-size:1.1rem;font-weight:560;letter-spacing:-.02em}
.proto-both{grid-column:1/-1;justify-self:center;margin-top:4px}

.proto-more{margin-top:clamp(20px,3vw,32px);border-top:1px solid var(--line);padding-top:18px}
.proto-more summary{cursor:pointer;font-weight:500;color:var(--ink-2);list-style:none}
.proto-more summary::-webkit-details-marker{display:none}
.proto-more summary::before{content:"+ ";color:var(--ink-3)}
.proto-more[open] summary::before{content:"– "}
.proto-more summary:hover{color:var(--ink)}
.proto-alts{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin-top:16px}
.alt{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--line);
  border-radius:var(--r-m);text-decoration:none;transition:border-color var(--t) var(--ease),background var(--t) var(--ease)}
.alt:hover{border-color:var(--c);background:var(--canvas)}
.alt-n{flex:1;min-width:0;font-weight:500;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.alt-c,.alt-p{color:var(--ink-3);flex:none}
.proto-note{margin-top:22px;color:var(--ink-3);font-size:.84rem;line-height:1.55;max-width:80ch}

@media (max-width:860px){
  .proto-head{grid-template-columns:minmax(0,1fr)}
  .pick{grid-template-columns:minmax(0,1fr)}
  .pick-vis{aspect-ratio:16/10;max-height:220px}
}

/* ---------- Nav panels ---------- */
.nav-i{position:relative;display:inline-flex}
.nav-i > a{display:inline-flex;align-items:center;gap:.4em}
.nav-i .caret{width:9px;height:6px;opacity:.5;transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.nav-i.on > a{background:var(--panel);color:var(--ink)}
.nav-i.on .caret{transform:rotate(180deg);opacity:1}

.mega{position:absolute;left:0;right:0;top:100%;z-index:59;
  /* Solid, not frosted: at this size the page behind reads straight through a
     translucent panel and the headline collides with the cards. */
  background:var(--canvas);
  border-bottom:1px solid var(--line);box-shadow:0 30px 60px -34px rgba(10,24,40,.32);
  animation:megaIn .26s var(--ease) both}
@keyframes megaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mg-in{padding-block:clamp(22px,3vw,34px)}
/* The page dims so the panel reads as a layer, the way the reference does it. */
body.mega-open #view,body.mega-open .site-foot{filter:brightness(.97)}

.mg-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(250px,.9fr);gap:clamp(18px,2.6vw,36px);align-items:start}
.mg-label{color:var(--ink-3);display:block;margin-bottom:12px}
.mg-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

.mg-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;
  padding:14px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);
  text-decoration:none;color:inherit;
  transition:border-color var(--t) var(--ease),transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.mg-card:hover{transform:translateY(-3px);border-color:color-mix(in oklab,var(--c) 45%,var(--line));
  box-shadow:0 20px 38px -26px color-mix(in oklab,var(--c) 70%,transparent)}
.mg-vis{background:var(--ground);border-radius:var(--r-m);aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.mg-vis .bottle,.mg-vis img{width:78%;height:auto}
.mg-body{display:grid;gap:4px;min-width:0}
.mg-cat{color:var(--ink-3)}
.mg-cat .dot{margin-right:.5em}
.mg-t{font-family:var(--f-body);font-size:1.05rem;font-weight:600;letter-spacing:-.012em;line-height:1.2}
.mg-s{color:var(--ink-2);font-size:.88rem;line-height:1.4}
.mg-p{color:var(--ink-3);margin-top:2px}

.mg-side{display:grid;gap:12px;align-content:start}
.mg-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
.mg-links a{display:flex;align-items:center;gap:8px;padding:.42em .6em;border-radius:var(--r-s);
  text-decoration:none;font-size:.9rem;transition:background var(--t) var(--ease)}
.mg-links a:hover{background:var(--panel)}
.mg-links em{margin-left:auto;font-style:normal;color:var(--ink-3);font-size:.68rem}
.mg-all{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.92rem;
  text-decoration:none;color:var(--gold-deep);margin-top:2px}
.mg-all .arr{transition:transform var(--t) var(--ease)}
.mg-all:hover .arr,.mg-card:hover .arr{transform:translateX(3px)}

.mg-hero{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(16px,2vw,26px);
  align-items:center;padding:clamp(16px,2vw,22px);border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--surface);text-decoration:none;color:inherit;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.mg-hero:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.mg-hero-vis{display:grid;place-items:center}
.mg-hero-vis svg{width:100%;height:auto;max-height:150px}
.mg-hero .mg-t{font-size:1.5rem;font-weight:400;font-family:var(--f-display)}
.mg-hero .mg-s{max-width:48ch;margin-top:2px}

.mg-result{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:var(--r-l);
  background:var(--surface);text-decoration:none;color:inherit;
  transition:border-color var(--t) var(--ease)}
a.mg-result:hover{border-color:color-mix(in oklab,var(--c) 45%,var(--line))}
.mg-res-top{display:flex;align-items:center;gap:8px;font-weight:600;font-size:1rem}
.mg-res-top em{margin-left:auto;font-style:normal;color:var(--ink-3);font-size:.8rem}
.mg-res-pick{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;align-items:center;
  padding-top:10px;border-top:1px solid var(--line)}
.mg-res-pick .bottle,.mg-res-pick img{width:100%;height:auto}
.mg-res-pick > span{display:grid;gap:2px;min-width:0}
.mg-result-empty p{color:var(--ink-2);font-size:.9rem;line-height:1.5;margin:0}

@media (max-width:1000px){
  .mg-grid{grid-template-columns:minmax(0,1fr)}
  .mg-hero{grid-template-columns:minmax(0,1fr)}
  .mg-hero-vis{display:none}
}
/* No hover on a touch screen, and the mobile menu already lists everything. */
@media (max-width:900px){ .mega{display:none} .nav-i .caret{display:none} }