/* Sleep & Recover. Concept: a night-sky header band with the hypnogram as the recurring signature; daylight paper for reading. */
@font-face{font-family:"Bricolage";src:url(/assets/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Source Serif";src:url(/assets/fonts/sourceserif.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif";src:url(/assets/fonts/sourceserif-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
:root{
  --night:#101a2b;      /* header band */
  --night-2:#18263d;
  --paper:#f6f5f1;      /* reading ground, faint warm */
  --card:#ffffff;
  --ink:#16202e;
  --mute:#5a6474;
  --line:#dfe2e6;
  --deep:#3557c9;       /* deep sleep */
  --rem:#c8892b;        /* REM / dawn */
  --dawn:#e9b25c;
  --moon:#dfe6f2;
  --ok:#2f7a4f; --warn:#a4651b; --bad:#a2402f;
  --f-display:"Bricolage","Segoe UI",system-ui,sans-serif;
  --f-body:"Source Serif",Georgia,"Times New Roman",serif;
  --f-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:6px;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#0d141f; --card:#141d2b; --ink:#e4e8ee; --mute:#9aa5b5; --line:#263244;
  --deep:#7f9cff; --rem:#e6ab52; --moon:#dfe6f2; --ok:#5fc68a; --warn:#e0a24f; --bad:#f0897a; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.65 var(--f-body)}
img{max-width:100%;height:auto}
a{color:var(--deep);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--rem);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:8px;z-index:20;background:var(--card);padding:8px 12px}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
.narrow{max-width:780px}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.12;text-wrap:balance;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(34px,5.2vw,56px);font-weight:700}
h2{font-size:clamp(24px,3vw,32px);font-weight:700}
h3{font-size:21px;font-weight:650}
p{margin:0}
.muted{color:var(--mute)}
.label{font:600 13px/1.3 var(--f-ui);letter-spacing:.04em;color:var(--mute);margin-bottom:6px}

/* header */
.site-head{background:var(--night);color:var(--moon);position:sticky;top:0;z-index:10}
.head-in{display:flex;align-items:center;gap:18px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font:700 20px/1 var(--f-display);white-space:nowrap}
.brand i{font-style:normal;color:var(--dawn)}
.mark{width:30px;height:30px}
.mk-ring{fill:none;stroke:currentColor;stroke-opacity:.35;stroke-width:1.5}
.mk-line{fill:none;stroke:var(--dawn);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mk-moon{fill:currentColor}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--moon);text-decoration:none;font:500 15px var(--f-ui);padding:8px 10px;border-radius:var(--r);opacity:.85}
.nav a:hover,.nav a[aria-current=page]{opacity:1;background:var(--night-2)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid #ffffff40;color:var(--moon);font:500 15px var(--f-ui);padding:7px 12px;border-radius:var(--r)}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:62px;background:var(--night);flex-direction:column;padding:8px 18px 16px}
  .nav.open{display:flex}
}

/* hypnogram */
.hyp{display:block;width:100%;height:auto}
.hyp-grid line{stroke:#ffffff;stroke-opacity:.07;stroke-width:1}
.hyp-line{fill:none;stroke:var(--moon);stroke-opacity:.55;stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hyp-deep{fill:var(--deep)}.hyp-rem{fill:var(--rem)}
.hyp-head{height:70px;margin-top:22px;opacity:.9}
@media (prefers-color-scheme:dark){.hyp-deep{fill:#5f7fe8}}

/* night bands */
.hero,.art-head,.hub-head{background:linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%);color:var(--moon)}
.hero a,.art-head a,.hub-head a{color:var(--moon)}
.hero{padding-block:56px 40px}
.hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
@media (max-width:860px){.hero-in{grid-template-columns:minmax(0,1fr)}}
.kicker{font:600 14px var(--f-ui);color:var(--dawn);margin-bottom:12px}
.kicker a{color:var(--dawn)!important;text-decoration:none}
.hero h1{max-width:13ch}
.lede{font-size:20px;line-height:1.55;color:#c9d2e0;margin-top:16px;max-width:60ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-block;font:600 16px var(--f-ui);padding:12px 18px;border-radius:var(--r);background:var(--dawn);color:#1a1205!important;text-decoration:none}
.btn.ghost{background:transparent;border:1px solid #ffffff4d;color:var(--moon)!important}
.hero-night{margin:0;background:#0b1320;border:1px solid #ffffff14;border-radius:10px;padding:18px 16px 12px}
.hyp-hero{height:150px}
.hero-night figcaption{display:flex;flex-wrap:wrap;gap:16px;font:13px var(--f-ui);color:#aab6c8;margin-top:10px}
.sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.sw-deep{background:var(--deep)}.sw-rem{background:var(--rem)}
.art-head,.hub-head{padding-top:26px;overflow:hidden}
.hub-head .wrap{padding-bottom:6px}
.byline{font:15px var(--f-ui);color:#aab6c8;margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dot{width:3px;height:3px;border-radius:50%;background:#aab6c8;display:inline-block}
.crumbs ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:6px;font:14px var(--f-ui);color:#aab6c8}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.5}
.crumbs a{text-decoration:none}

/* article */
.art-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:48px;padding-block:40px 20px}
@media (max-width:1000px){.art-grid{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
.toc{position:sticky;top:84px;align-self:start;font:14px/1.45 var(--f-ui)}
.toc-h{font-weight:600;color:var(--mute);margin-bottom:8px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:7px;border-left:2px solid var(--line)}
.toc a{display:block;padding-left:12px;color:var(--mute);text-decoration:none}
.toc a:hover{color:var(--ink)}
.prose{max-width:720px;min-width:0}
.prose>*+*{margin-top:1.05em}
.prose h2{margin-top:1.9em;scroll-margin-top:84px}
.prose h3{margin-top:1.5em;scroll-margin-top:84px}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:.35em}
.cite{font:600 12px var(--f-ui);margin-left:1px}
.cite a{text-decoration:none}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table{border-collapse:collapse;width:100%;font:15px/1.45 var(--f-ui)}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:color-mix(in srgb,var(--line) 45%,var(--card));font-weight:600}
.answer,.athlete,.medical{padding:18px 20px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.answer{border-left:4px solid var(--deep)}
.answer p:last-child{font-size:19px}
.athlete{border-left:4px solid var(--rem)}
.medical{border-left:4px solid var(--bad)}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font:600 18px/1.4 var(--f-display)}
.faq details p{margin-top:8px}
.sources ol{font:14px/1.5 var(--f-ui);color:var(--mute);padding-left:1.4em}
.sources a{word-break:break-word}
.author-box{border-top:1px solid var(--line);padding-top:18px;font-size:16px}
.related{padding-block:28px 56px;border-top:1px solid var(--line);margin-top:30px}
.related h2{margin-bottom:16px}

/* cards & lists */
.sec-h{margin:44px 0 16px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card,.tool-card,.topic{display:flex;flex-direction:column;gap:8px;padding:18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--ink);transition:border-color .15s}
.card:hover,.tool-card:hover,.topic:hover{border-color:var(--deep)}
.card-k{font:600 13px var(--f-ui);color:var(--rem)}
.card-t{font:650 19px/1.25 var(--f-display)}
.card-d{font:15px/1.5 var(--f-ui);color:var(--mute)}
.tool-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.tool-card{border-top:3px solid var(--deep)}
.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.guide-list{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:1px solid var(--line)}
.guide-list a{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.gl-t{font:650 22px/1.25 var(--f-display)}
.gl-d{color:var(--mute);font-size:17px}
.gl-m{font:13px var(--f-ui);color:var(--mute)}
.hub-body{padding-bottom:60px;max-width:900px}
.home-body{padding-bottom:70px}

/* ritual */
.ritual{list-style:none;padding:0;margin:18px 0 0;display:grid;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.ritual li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:14px 18px;border-bottom:1px solid var(--line)}
.ritual li:last-child{border-bottom:0}
.ritual time{font:600 15px var(--f-ui);color:var(--deep);font-variant-numeric:tabular-nums;padding-top:2px}
.ritual b{font:650 17px var(--f-display)}
.ritual p{font-size:16px;color:var(--mute)}

/* tools */
.tool-wrap{padding-block:30px 60px}
.tool{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:22px;font-family:var(--f-ui)}
.tool .row{display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin-bottom:16px}
.tool label{display:grid;gap:6px;font:600 14px var(--f-ui);color:var(--mute)}
.tool input,.tool select{font:500 17px var(--f-ui);padding:9px 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper);color:var(--ink);min-width:140px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.seg button{font:600 15px var(--f-ui);padding:9px 14px;border:0;background:var(--paper);color:var(--ink);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--deep);color:#fff}
.results{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:6px}
.res{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--paper)}
.res b{display:block;font:700 26px/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.res span{font-size:13px;color:var(--mute)}
.res.best{border-color:var(--deep);box-shadow:inset 0 0 0 1px var(--deep)}
.tool-msg{margin-top:12px;font-size:15px;color:var(--mute)}
.tool-msg.warn{color:var(--warn)}
.tool-note{font:15px/1.55 var(--f-ui);color:var(--mute);margin-top:16px}
.page-prose{padding-block:30px 60px}

/* footer */
.site-foot{background:var(--night);color:#b6c1d1;padding-block:44px 30px;font:15px/1.5 var(--f-ui)}
.site-foot a{color:#d9e1ec;text-decoration:none}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid h2{font:600 14px var(--f-ui);color:var(--dawn);margin-bottom:10px}
.foot-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.site-foot .brand{color:var(--moon);margin-bottom:10px}
.fine{border-top:1px solid #ffffff1a;margin-top:28px;padding-top:16px;font-size:13px;color:#8e9bb0}
@media (prefers-reduced-motion:no-preference){.card,.tool-card,.topic{transition:border-color .15s}}

/* ================= v2: modern layer ================= */
:root{--r:14px;--r-sm:10px;--glass:rgba(11,18,32,.62);--hero-h:clamp(600px,92vh,940px)}
body{font-size:18px}
h1{letter-spacing:-.025em;font-weight:720}
h2{letter-spacing:-.02em}
.wrap{max-width:1220px}

/* header: glass */
.site-head{background:rgba(11,18,32,.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid #ffffff12;transition:background .3s,border-color .3s}
.has-hero .site-head{position:fixed;left:0;right:0;top:0;background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.has-hero .site-head.solid{background:rgba(11,18,32,.82);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-color:#ffffff12}
.nav a{border-radius:999px;padding:8px 14px}
.nav a:hover,.nav a[aria-current=page]{background:#ffffff14}
@media (max-width:900px){.has-hero .nav{background:rgba(11,18,32,.96)}}

/* video hero */
.hero-v{position:relative;height:var(--hero-h);min-height:600px;overflow:hidden;background:#070d18;color:var(--moon);isolation:isolate}
.hero-stage{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,calc(var(--hero-h) * 16 / 9));aspect-ratio:16/9;z-index:-2}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-shade{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(7,13,24,.94) 0%,rgba(7,13,24,.78) 30%,rgba(7,13,24,.15) 58%,rgba(7,13,24,0) 75%),
  linear-gradient(180deg,rgba(7,13,24,.55) 0%,rgba(7,13,24,0) 22%,rgba(7,13,24,0) 62%,rgba(7,13,24,.96) 100%)}
.hero-copy{position:relative;padding-top:clamp(130px,20vh,210px);max-width:1220px}
.hero-copy h1{font-size:clamp(42px,6.4vw,84px);line-height:1.02;max-width:11.5ch}
.hero-copy h1 em{font-style:normal;background:linear-gradient(90deg,#f1c47a,#e9b25c 40%,#9db4ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy .lede{max-width:44ch;color:#c6d0df;font-size:clamp(18px,1.6vw,21px)}
.pill{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 var(--f-ui);letter-spacing:.02em;color:#f1d39d;background:#e9b25c1f;border:1px solid #e9b25c40;padding:8px 12px;border-radius:999px;margin-bottom:22px}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dawn);box-shadow:0 0 0 4px #e9b25c33;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px #e9b25c00}}
.btn{border-radius:999px;padding:13px 22px;box-shadow:0 8px 30px -10px #e9b25c99;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 34px -10px #e9b25ccc}
.btn.ghost{box-shadow:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff0d}
.hero-labels .hl{position:absolute;transform:translate(0,-50%);display:flex;align-items:center;gap:8px;font:500 12px/1.2 var(--f-ui);letter-spacing:.01em;color:#dbe4f3;background:rgba(10,17,30,.55);border:1px solid #9db4ff33;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:6px 10px;border-radius:999px;white-space:nowrap;animation:float 6s ease-in-out infinite}
.hero-labels .hl:nth-child(2){animation-delay:-2s}.hero-labels .hl:nth-child(3){animation-delay:-4s}
.hero-labels .hl i{width:7px;height:7px;border-radius:50%;background:#7f9cff;box-shadow:0 0 12px #7f9cff}
.hero-labels .hl-amber i{background:var(--dawn);box-shadow:0 0 12px var(--dawn)}
@keyframes float{50%{transform:translate(0,calc(-50% - 5px))}}
@media (max-width:1100px){.hero-labels{display:none}}
.hero-night{position:absolute;left:0;right:0;bottom:22px;background:none;border:0;padding:0}
.hero-night .hyp-hero{height:64px;opacity:.75}
.hn-legend{display:flex;flex-wrap:wrap;gap:18px;font:12px var(--f-ui);color:#8f9db3;margin-top:6px}
.hn-t{margin-left:auto}
@media (max-width:700px){.hero-shade{background:linear-gradient(180deg,rgba(7,13,24,.85) 0%,rgba(7,13,24,.55) 45%,rgba(7,13,24,.96) 100%)}.hero-copy{padding-top:110px}.hn-t{display:none}}

/* night bands on inner pages */
.art-head,.hub-head{background:radial-gradient(120% 140% at 85% 0%,#1d2f55 0%,#101a2b 45%,#0b1220 100%)}
.art-head h1,.hub-head h1{font-size:clamp(34px,4.6vw,58px);line-height:1.05}
.hub-head .lede{color:#c6d0df}
.art-head{padding-top:96px}.hub-head{padding-top:96px}

/* cards */
.card,.tool-card,.topic{border-radius:var(--r);border-color:color-mix(in srgb,var(--line) 80%,transparent);box-shadow:0 1px 0 #0000000a,0 10px 30px -22px #10203a66;transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover,.tool-card:hover,.topic:hover{transform:translateY(-3px);border-color:var(--deep);box-shadow:0 18px 40px -24px #2b4fb899}
.card-t{font-size:20px}
.tool-card{border-top:0;background:linear-gradient(160deg,var(--card) 60%,color-mix(in srgb,var(--deep) 10%,var(--card)))}
.tool-card .card-t::after{content:" \2197";color:var(--deep);font-weight:500}
.sec-h{margin:70px 0 20px;font-size:clamp(28px,3.4vw,40px)}
.answer,.athlete,.medical{border-radius:var(--r)}
.ritual{border-radius:var(--r);overflow:hidden}
.ritual li{transition:background .2s}
.ritual li:hover{background:color-mix(in srgb,var(--deep) 5%,var(--card))}
.tool{border-radius:18px;box-shadow:0 20px 50px -30px #10203a88}
.res{border-radius:var(--r-sm)}
.table-wrap{border-radius:var(--r)}

/* reveal on scroll */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
  .js .reveal.in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.hero-labels .hl,.pill::before{animation:none}}

/* formula overlay (v3 side-view hero) */
.hero-labels .fx{position:absolute;transform:translate(-50%,-50%);display:grid;gap:3px;justify-items:center;text-align:center;padding:8px 12px 7px;border-radius:12px;background:rgba(8,14,26,.58);border:1px solid #9db4ff38;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#e4ebf7;opacity:0;animation:fxin .9s ease forwards,fxfloat 7s ease-in-out 1s infinite}
.hero-labels .fx:nth-child(1){animation-delay:.4s,1.4s}.hero-labels .fx:nth-child(2){animation-delay:.9s,2.4s}.hero-labels .fx:nth-child(3){animation-delay:1.4s,3.4s}.hero-labels .fx:nth-child(4){animation-delay:1.9s,4.4s}
.fx .eq{font:500 22px/1.1 var(--f-body);letter-spacing:.01em;white-space:nowrap}
.fx .eq i{font-style:italic}
.fx .eq sub{font-size:.55em;font-style:normal;color:#9fb0cc}
.fx small{font:500 11px/1.2 var(--f-ui);color:#9fb0cc;letter-spacing:.02em;white-space:nowrap}
.fx-amber{border-color:#e9b25c55}.fx-amber .eq{color:#f6d6a0}
.fx-line{background:transparent;border-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.fx-line .eq{font-size:17px;color:#cfdaf0}
@keyframes fxin{from{opacity:0;transform:translate(-50%,-40%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes fxfloat{50%{transform:translate(-50%,calc(-50% - 4px))}}
.fx-row{display:none;flex-wrap:wrap;gap:8px;margin-top:20px}
.fx-row span{font:italic 500 17px var(--f-body);padding:6px 12px;border-radius:999px;background:#ffffff10;border:1px solid #9db4ff33;color:#dfe7f5}
.fx-row i{font-style:italic}
@media (max-width:1100px){.fx-row{display:flex}}
@media (prefers-reduced-motion:reduce){.hero-labels .fx{animation:none;opacity:1}}

/* hero layer labels */
.hero-labels .ly{position:absolute;transform:translate(0,-50%);display:flex;align-items:center;gap:8px;font:600 12.5px/1.2 var(--f-ui);color:#eef3fb;background:rgba(8,14,26,.62);border:1px solid #ffffff22;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:5px 11px 5px 6px;border-radius:999px;white-space:nowrap;opacity:0;animation:lyin .8s ease forwards}
.hero-labels .ly i{width:16px;height:16px;border-radius:50%;border:2px solid #0b1220;box-shadow:0 0 0 1px #ffffff40}
.hero-labels .ly em{font-style:normal;font-weight:400;color:#a9b7cd}
.hero-labels .ly:nth-child(1){animation-delay:.3s}.hero-labels .ly:nth-child(2){animation-delay:.55s}.hero-labels .ly:nth-child(3){animation-delay:.8s}.hero-labels .ly:nth-child(4){animation-delay:1.05s}.hero-labels .ly:nth-child(5){animation-delay:1.3s}
@keyframes lyin{from{opacity:0;transform:translate(-10px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@media (prefers-reduced-motion:reduce){.hero-labels .ly{animation:none;opacity:1}}

/* mattress simulator */
.msim-sec{background:radial-gradient(120% 120% at 80% 0%,#16264a 0%,#0d1627 55%,#0a111e 100%);color:var(--moon);padding-block:64px 70px}
.msim-h{font-size:clamp(30px,4vw,48px);color:#f2f5fa;max-width:20ch}
.msim-lede{color:#b8c4d6;max-width:62ch;margin-top:12px}
.pill-light{margin-bottom:16px}
.msim{margin-top:28px;display:grid;gap:18px;font-family:var(--f-ui)}
.msim-controls{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center}
.msim-controls label{display:grid;gap:6px;font:600 14px var(--f-ui);color:#b8c4d6;min-width:240px}
.msim-controls output{color:#f1d39d;font-weight:700;margin-left:6px}
.msim-controls input[type=range]{accent-color:#e9b25c;width:100%}
.msim .seg{border-color:#ffffff26}
.msim .seg button{background:#ffffff0a;color:#dfe7f3}
.msim .seg button[aria-pressed=true]{background:#3557c9;color:#fff}
.msim-stage{background:#070d18;border:1px solid #ffffff14;border-radius:18px;padding:10px;overflow:hidden}
.msim-stage svg{display:block;width:100%;height:auto}
.ms-lab{font:600 12px var(--f-ui);fill:#0b1220;opacity:.75}
.msim-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:760px){.msim-out{grid-template-columns:minmax(0,1fr)}}
.ms-card{background:#ffffff08;border:1px solid #ffffff1a;border-radius:14px;padding:14px 16px;display:grid;gap:4px}
.ms-card span{font:600 13px var(--f-ui);color:#9fb0cc}
.ms-card b{font:700 30px/1.1 var(--f-display);color:#f2f5fa;font-variant-numeric:tabular-nums}
.ms-card small{font-size:13.5px;color:#b8c4d6;line-height:1.4}
.ms-card.good{border-color:#5fc68a66}.ms-card.good b{color:#8fe0b0}
.ms-card.bad{border-color:#f0897a66}.ms-card.bad b{color:#f6b0a3}
.ms-eq{grid-column:1/-1;background:#ffffff06;border:1px dashed #9db4ff33;border-radius:14px;padding:12px 16px;display:grid;gap:6px}
.ms-eq p{font:400 18px/1.4 var(--f-body);color:#e4ebf7}
.ms-eq i{font-style:italic}
.ms-eq small{font:13px var(--f-ui);color:#9fb0cc;margin-left:6px}
.msim-layers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.msim-layers li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:4px 10px;align-items:start;font-size:14px;color:#b8c4d6;background:#ffffff06;border:1px solid #ffffff12;border-radius:12px;padding:10px 12px}
.msim-layers i{width:18px;height:18px;border-radius:5px;grid-row:span 2;margin-top:2px}
.msim-layers b{color:#eef3fb;font-size:14.5px}
.msim-note{font:13.5px/1.55 var(--f-ui);color:#8f9db3;margin-top:18px;max-width:90ch}
.msim-note a{color:#c9d6ff}

/* centered hero (v5) */
.hero-v.centered{--hero-h:clamp(640px,96vh,980px)}
.hero-v.centered .hero-shade{background:linear-gradient(180deg,rgba(7,13,24,.9) 0%,rgba(7,13,24,.55) 30%,rgba(7,13,24,0) 48%,rgba(7,13,24,0) 90%,rgba(7,13,24,.85) 100%)}
.hero-v.centered .hero-copy{text-align:center;margin:0 auto;padding-top:clamp(92px,12vh,132px)}
.hero-v.centered .hero-copy h1{max-width:none;font-size:clamp(38px,4.8vw,66px)}
.hero-v.centered .hero-copy .lede{margin-left:auto;margin-right:auto;max-width:56ch;font-size:clamp(17px,1.4vw,19px)}
.hero-v.centered .hero-cta{justify-content:center;margin-top:20px}
.hero-v.centered .pill{margin-bottom:16px}
.hero-labels .ly{font-size:11.5px;padding:4px 10px 4px 5px}
.hero-labels .ly i{width:13px;height:13px}
@media (max-width:820px){
  .hero-v.centered{height:auto;min-height:0;display:flex;flex-direction:column;padding-bottom:10px}
  .hero-v.centered .hero-copy{order:1;padding-top:96px;padding-bottom:6px}
  .hero-v.centered .hero-stage{order:2;position:relative;top:auto;left:auto;transform:none;width:100%;z-index:0}
  .hero-v.centered .hero-shade{display:none}
}

/* coded physiology animation */
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.breath-cue{display:inline-flex;align-items:center;gap:12px;margin-top:22px;font-family:var(--f-ui);color:#cfdaf0;--b:0}
.breath-cue .ring{width:30px;height:30px;border-radius:50%;border:2px solid #9db4ff88;box-shadow:0 0 calc(6px + var(--b) * 22px) #7f9cff88,inset 0 0 calc(var(--b) * 14px) #7f9cff66;transform:scale(calc(.7 + var(--b) * .45))}
.breath-cue b{font:650 16px var(--f-display);color:#eef3fb;min-width:96px;text-align:left}
.breath-cue small{font-size:13px;color:#8f9db3}
@media (max-width:820px){.breath-cue small{display:none}}

/* cinematic slow drift + vignette (v7) */
@media (prefers-reduced-motion:no-preference){
  .hero-v.centered .hero-stage{animation:drift 48s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50.6%,-50.4%) scale(1.045)}}
}
@media (max-width:820px){.hero-v.centered .hero-stage{animation:none}}
.hero-v.centered::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(120% 90% at 50% 62%,transparent 55%,rgba(5,9,18,.55) 100%)}
.breath-cue b{transition:opacity .6s}

/* smaller centered scene (v8) */
@media (min-width:821px){
  .hero-v.centered{background:#070d18}
  .hero-v.centered .hero-stage{width:min(80vw,1460px,calc(var(--hero-h) * 1.22));top:auto;bottom:1%;transform:translate(-50%,0);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%)}
  .hero-v.centered .hero-shade{background:linear-gradient(180deg,rgba(7,13,24,.6) 0%,rgba(7,13,24,0) 40%,rgba(7,13,24,0) 92%,rgba(7,13,24,.7) 100%)}
}
@media (min-width:821px) and (prefers-reduced-motion:no-preference){
  .hero-v.centered .hero-stage{animation:drift2 48s ease-in-out infinite alternate}
  @keyframes drift2{from{transform:translate(-50%,0) scale(1)}to{transform:translate(-50.4%,-0.6%) scale(1.035)}}
}

/* ===== hero picker ===== */
.hero-pick{margin:24px auto 0;display:grid;gap:12px;justify-items:center;max-width:760px;padding:16px 18px;border-radius:20px;background:rgba(12,20,36,.55);border:1px solid #ffffff1c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-family:var(--f-ui)}
.hp-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px}
.hp-l{font:500 16px var(--f-ui);color:#b8c4d6}
.hp-seg{display:inline-flex;flex-wrap:wrap;gap:6px}
.hp-seg button,.hero-pick select,.hp-kg{font:600 15px var(--f-ui);color:#eef3fb;background:#ffffff0f;border:1px solid #ffffff26;border-radius:999px;padding:8px 14px;cursor:pointer}
.hp-seg button[aria-pressed=true]{background:#e9b25c;border-color:#e9b25c;color:#1a1205}
.hp-kg{display:inline-flex;align-items:center;gap:4px;cursor:default}
.hp-kg input{width:56px;background:transparent;border:0;color:#fff;font:600 15px var(--f-ui);text-align:right}
.hero-pick select{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,#cfdaf0 50%),linear-gradient(135deg,#cfdaf0 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.hero-pick select option{color:#111}
.hero-pick .btn{margin-top:2px}
.hero-v.centered .breath-cue{margin-top:14px}

/* ===== 3D Mattress Lab ===== */
.lab-sec{background:radial-gradient(110% 120% at 70% 0%,#17284c 0%,#0d1627 50%,#090f1b 100%);color:var(--moon);padding-block:72px 76px;scroll-margin-top:60px}
.lab-head{max-width:760px}
.lab{margin-top:30px;font-family:var(--f-ui)}
.lab-loading,.lab-fallback{color:#9fb0cc;padding:40px 0}
.lab-grid{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:980px){.lab-grid{grid-template-columns:minmax(0,1fr)}}
.lab-ctl{display:grid;gap:16px;background:#ffffff07;border:1px solid #ffffff14;border-radius:20px;padding:18px}
.lab-ctl fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
.lab-ctl legend{font:600 14px var(--f-ui);color:#cfdaf0;margin-bottom:8px;padding:0}
.lab-ctl output{color:#f1d39d;margin-left:6px}
.lab-ctl input[type=range]{width:100%;accent-color:#e9b25c}
.seg-wrap{display:flex;flex-wrap:wrap;gap:6px;border:0;overflow:visible}
.lab .seg button,.chips button{font:600 13.5px var(--f-ui);color:#dfe7f3;background:#ffffff0b;border:1px solid #ffffff22;border-radius:999px;padding:7px 12px;cursor:pointer}
.lab .seg button[aria-pressed=true],.chips button[aria-pressed=true]{background:#3557c9;border-color:#5d7ff0;color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.lab-adv summary{cursor:pointer;font:600 14px var(--f-ui);color:#f1d39d}
.lab-adv[open] summary{margin-bottom:14px}
.lab-adv fieldset+fieldset{margin-top:14px}
.lab-hint{font-size:12.5px;color:#8f9db3}
.lab-view{position:relative;min-width:0}
.lab-canvas{position:relative;width:100%;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:radial-gradient(90% 90% at 50% 40%,#1a2a4d 0%,#0b1322 70%);border:1px solid #ffffff14;touch-action:pan-y;cursor:grab}
.lab-canvas canvas{display:block;width:100%;height:100%}
.lab-hud{position:absolute;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;pointer-events:none}
.lab-hud span{display:inline-flex;align-items:center;gap:8px;font:600 12.5px var(--f-ui);color:#e4ebf7;background:rgba(8,14,26,.66);border:1px solid #ffffff20;border-radius:999px;padding:6px 12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lab-spine i{width:10px;height:10px;border-radius:50%;background:#f08a6f;box-shadow:0 0 10px #f08a6f}
.lab-spine.ok i{background:#5fd68f;box-shadow:0 0 10px #5fd68f}
.lab-spine em{font-style:normal;color:#b8c4d6;font-weight:500}
.lab-heat i{width:60px;height:8px;border-radius:4px;background:linear-gradient(90deg,#eef1f4,#5d82f0,#f0a43c)}
.lab-drag{font-size:12.5px;color:#8f9db3;margin-top:8px}
.lab-layers{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:#b8c4d6}
.lab-layers i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.lab-layers em{font-style:normal;color:#7f8ea5}
.lab-out{margin-top:22px;display:grid;gap:18px}
.res-main{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.r-card{background:#ffffff08;border:1px solid #ffffff18;border-radius:16px;padding:14px 16px;display:grid;gap:5px;align-content:start}
.r-card span{font:600 12.5px var(--f-ui);color:#9fb0cc}
.r-card b{font:700 34px/1.05 var(--f-display);color:#f2f5fa}
.r-card b small{font-size:16px;color:#9fb0cc}
.r-card b.r-mid{font-size:19px;line-height:1.25}
.r-card em{font-style:normal;font-size:13.5px;line-height:1.45;color:#b8c4d6}
.r-big{border-color:#e9b25c66;background:linear-gradient(160deg,#e9b25c14,#ffffff06)}
.r-live{border-color:#5d82f066}
.res-notes{background:#ffffff06;border:1px solid #ffffff14;border-radius:16px;padding:16px 18px}
.res-notes h3{font-size:19px;color:#f2f5fa;margin-bottom:8px}
.res-notes ul{margin:0;padding-left:18px;display:grid;gap:7px;font-size:15px;line-height:1.5;color:#cfd8e6}
.res-notes details{margin-top:12px}.res-notes summary{cursor:pointer;color:#f1d39d;font-weight:600;font-size:14px}
.res-notes details ul{margin-top:8px}
.lab-explode{position:absolute;right:12px;bottom:60px;font:600 13px var(--f-ui);color:#1a1205;background:#e9b25c;border:0;border-radius:999px;padding:9px 14px;cursor:pointer;box-shadow:0 8px 24px -10px #e9b25c}
.lab-explode[aria-pressed=true]{background:#eef3fb;color:#0b1220}
@media (max-width:980px){.lab-explode{bottom:auto;top:52px}}
.ev{display:inline-block;font:700 10.5px/1 var(--f-ui);letter-spacing:.04em;text-transform:uppercase;padding:4px 7px;border-radius:999px;margin-right:6px;vertical-align:1px}
.ev-strong{background:#2f7a4f;color:#eafff2}.ev-moderate{background:#3557c9;color:#fff}.ev-weak{background:#6b5a2e;color:#ffe9bf}.ev-convention{background:#3a4458;color:#cfd8e6}
.res-more{margin-top:12px;font-size:13px;color:#8f9db3}.res-more a{color:#c9d6ff}
/* hero v9: room for the picker, cue at the bottom */
.hero-v.centered{--hero-h:clamp(820px,100vh,1100px)}
@media (min-width:821px){
  .hero-v.centered .hero-stage{width:min(76vw,1380px,calc(var(--hero-h) * 1.02))}
  .hero-v.centered .breath-cue{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;z-index:2;white-space:nowrap}
}
.hero-v.centered .hero-copy h1{font-size:clamp(36px,4.4vw,60px)}

/* ===== lab v2 ===== */
.lab-tags{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lab-tag{position:absolute;left:0;top:0;white-space:nowrap;font:600 12px var(--f-ui);color:#0b1220;background:#f1d39d;border-radius:999px;padding:5px 10px;box-shadow:0 6px 18px -8px #000;transition:opacity .3s}
.lab-tag::after{content:"";position:absolute;left:50%;bottom:-5px;width:2px;height:6px;background:#f1d39d;transform:translateX(-50%)}
.lab-temp i{width:10px;height:10px;border-radius:50%;background:#7fb5ff}
.lab-temp.t-memory i{background:#f0a43c;box-shadow:0 0 10px #f0a43c}
.lab-temp.t-hybrid i,.lab-temp.t-latex i,.lab-temp.t-innerspring i{background:#6fd3ff;box-shadow:0 0 10px #6fd3ff}
.lab-temp em{font-style:normal;color:#dfe7f3}
.lab-changes{margin-top:22px;background:#ffffff07;border:1px solid #ffffff16;border-radius:16px;padding:16px 18px}
.lab-changes h3{font-size:19px;color:#f2f5fa;margin-bottom:10px}
.lab-changes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.lab-changes li{display:grid;gap:3px;padding:10px 12px;border-radius:12px;background:#ffffff06;border-left:3px solid #5d82f0}
.lab-changes li.ch-ext{border-left-color:#e9b25c}.lab-changes li.ch-mot{border-left-color:#d2553b}.lab-changes li.ch-par{border-left-color:#ffb38a}
.lab-changes b{font:650 14.5px var(--f-ui);color:#f2f5fa}.lab-changes span{font:600 13px var(--f-ui);color:#f1d39d}
.lab-changes em{font-style:normal;font-size:13.5px;line-height:1.45;color:#b8c4d6}
.lab-rank{margin-top:26px}
.rk-head h3{font-size:24px;color:#f2f5fa}.rk-head p{color:#b8c4d6;font-size:15px;margin-top:4px}
.rk-cols{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;margin-top:14px}
@media (max-width:900px){.rk-cols{grid-template-columns:minmax(0,1fr)}}
.rk-cols h4{font:700 13px var(--f-ui);letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}
.rk-h-good{color:#8fe0b0}.rk-h-bad{color:#f6b0a3}
.rk-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.rk{display:grid;gap:6px;align-content:start;padding:14px;border-radius:14px;background:#ffffff07;border:1px solid #ffffff16;font-family:var(--f-ui)}
.rk-good{border-color:#5fd68f55}.rk-ok{border-color:#e9b25c55}.rk-bad{border-color:#f08a6f40;opacity:.92}
.rk-on{box-shadow:0 0 0 2px #e9b25c inset}
.rk-top{display:flex;justify-content:space-between;align-items:center}
.rk-badge{font:700 11px var(--f-ui);letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px}
.rk-good .rk-badge{background:#2f7a4f;color:#eafff2}.rk-ok .rk-badge{background:#6b5a2e;color:#ffe9bf}.rk-bad .rk-badge{background:#7a3324;color:#ffe1da}
.rk-score{font:700 22px var(--f-display);color:#f2f5fa}.rk-score small{font:500 11px var(--f-ui);color:#9fb0cc;margin-left:3px}
.rk b{font:650 15.5px var(--f-ui);color:#f2f5fa}.rk-meta{font-size:12.5px;color:#9fb0cc}
.rk-bar{display:block;height:5px;border-radius:3px;background:#ffffff14;overflow:hidden}.rk-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#f08a6f,#e9b25c,#5fd68f)}
.rk ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:4px;font-size:13px;line-height:1.4;color:#cfd8e6}
.rk li.p::before{content:"+ ";color:#8fe0b0;font-weight:700}.rk li.c::before{content:"− ";color:#f6b0a3;font-weight:700}
.rk button{justify-self:start;margin-top:4px;font:600 12.5px var(--f-ui);color:#0b1220;background:#e9b25c;border:0;border-radius:999px;padding:7px 12px;cursor:pointer}
.rk-bad button{background:#ffffff1a;color:#eef3fb}
.rk-none{color:#9fb0cc;font-size:14px}
.rk-note{margin-top:10px;font-size:12.5px;color:#8f9db3}
.r-scales{grid-column:span 2}
@media (max-width:700px){.r-scales{grid-column:auto}}
.r-desc{font:600 15px var(--f-ui);font-style:normal;color:#f1d39d;margin-left:8px}
.fs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:6px 0 4px}
@media (max-width:1100px){.fs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fs div{background:#ffffff0a;border:1px solid #ffffff14;border-radius:10px;padding:8px 10px}
.fs dt{font:600 11.5px var(--f-ui);color:#9fb0cc}.fs dd{margin:2px 0 0;font:700 16px var(--f-ui);color:#f2f5fa}
.res-main .r-scales{grid-column:1/-1}
.r-scales em{max-width:none}

/* ===== lab v3: near full-screen stage with controls inside ===== */
.lab-stage{position:relative;width:min(96vw,1760px);margin-left:50%;transform:translateX(-50%)}
.lab-stage .lab-view{position:relative}
.lab-stage .lab-canvas{aspect-ratio:auto;height:min(86vh,940px);min-height:560px;border-radius:26px}
.lab-ctl{position:absolute;top:64px;left:18px;bottom:18px;width:340px;overflow:auto;z-index:3;background:rgba(9,15,28,.72);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid #ffffff1c;border-radius:20px;padding:16px;box-shadow:0 20px 50px -30px #000;scrollbar-width:thin}
.lab-ctl[hidden]{display:none!important}
.ctl-head{display:flex;justify-content:space-between;align-items:center}
.ctl-head b{font:650 15px var(--f-ui);color:#f2f5fa}
.ctl-hide,.ctl-show{font:600 12.5px var(--f-ui);color:#dfe7f3;background:#ffffff12;border:1px solid #ffffff26;border-radius:999px;padding:6px 12px;cursor:pointer}
.ctl-show{position:absolute;top:64px;left:18px;z-index:3;background:rgba(9,15,28,.72)}
.lab-stage .lab-hud{top:16px;left:18px;right:18px;z-index:4}
.lab-stage .lab-explode{right:18px;bottom:auto;top:64px;z-index:3}
.lab-foot{position:absolute;right:18px;bottom:14px;left:376px;z-index:2;display:grid;justify-items:end;gap:4px;pointer-events:none}
.lab-foot .lab-layers{justify-content:flex-end;background:rgba(9,15,28,.55);border-radius:12px;padding:6px 10px;margin:0}
.lab-foot .lab-drag{margin:0;font-size:12px}
@media (max-width:900px){
  .lab-stage{width:100%;margin-left:0;transform:none}
  .lab-stage .lab-canvas{height:68vh;min-height:420px}
  .lab-ctl{position:static;width:auto;margin-top:12px;max-height:none;background:#ffffff07}
  .ctl-hide,.ctl-show{display:none}
  .lab-foot{position:static;justify-items:start;margin-top:8px}
  .lab-foot .lab-layers{background:none;padding:0;justify-content:flex-start}
  .lab-stage .lab-explode{top:auto;bottom:14px}
}

/* hero play/pause */
.hero-play{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:8px;font:600 12.5px var(--f-ui);color:#dfe7f3;background:rgba(9,15,28,.6);border:1px solid #ffffff26;border-radius:999px;padding:7px 12px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero-play i{width:10px;height:10px;border-left:3px solid #dfe7f3;border-right:3px solid #dfe7f3}
.hero-play.is-paused{background:#e9b25c;color:#1a1205;border-color:#e9b25c;font-size:14px;padding:10px 16px}
.hero-play.is-paused i{width:0;height:0;border:0;border-left:10px solid #1a1205;border-top:6px solid transparent;border-bottom:6px solid transparent}
@media (max-width:820px){.hero-play{bottom:auto;top:76px}}
/* smaller lab window */
.lab-stage{width:min(92vw,1480px)}
.lab-stage .lab-canvas{height:min(74vh,780px);min-height:520px}
.lab-ctl{width:320px}
.lab-foot{left:356px}
/* lab panel sections + times */
.lab-ctl details.sec{border-top:1px solid #ffffff14;padding-top:10px}
.lab-ctl details.sec>summary{font:650 13px var(--f-ui);letter-spacing:.06em;text-transform:uppercase;color:#9fb3d6;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:2px 0 10px}
.lab-ctl details.sec>summary::after{content:"+";font-size:16px;color:#7f93b8}
.lab-ctl details.sec[open]>summary::after{content:"–"}
.lab-ctl details.sec>summary::-webkit-details-marker{display:none}
.lab-ctl details.sec>fieldset{margin-bottom:14px}
.lab-ctl .times{grid-template-columns:1fr 1fr;gap:10px}
.lab-ctl .times label{display:grid;gap:6px;font:600 13px var(--f-ui);color:#cfdaf0}
.lab-ctl .times input{font:600 16px var(--f-ui);color:#f2f5fa;background:#ffffff0d;border:1px solid #ffffff26;border-radius:10px;padding:8px 10px;color-scheme:dark;min-width:0}
/* room + clock HUD */
.lab-hud2{position:absolute;top:64px;left:356px;right:150px;z-index:3;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;pointer-events:none}
.lab-hud2 span{display:inline-flex;align-items:center;gap:8px;font:600 12.5px var(--f-ui);color:#e4ebf7;background:rgba(8,14,26,.66);border:1px solid #ffffff20;border-radius:999px;padding:6px 12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lab-hud2 em{font-style:normal}
.lab-room i{width:10px;height:10px;border-radius:50%;background:#6fd39b;box-shadow:0 0 8px #6fd39b}
.lab-room.warm i{background:#ff9a5c;box-shadow:0 0 10px #ff9a5c}
.lab-room.cold i{background:#7fc4ff;box-shadow:0 0 10px #7fc4ff}
.lab-clock b{font:700 15px var(--f-ui);font-variant-numeric:tabular-nums;color:#fff}
.lab-clock em{color:#b9c6dd}
.lab-clock[data-s="3"] em{color:#9fb4ff}.lab-clock[data-s="1"] em{color:#f0be6c}.lab-clock[data-s="0"] em{color:#ff9d8a}
/* night simulation */
.lab-night{margin-top:22px;background:#ffffff07;border:1px solid #ffffff16;border-radius:18px;padding:18px 20px;color:#dfe7f3;font-family:var(--f-ui)}
.lab-night:empty{display:none}
.nt-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:flex-end}
.nt-head h3{font-size:22px;color:#f2f5fa}
.nt-head p{margin:4px 0 0;font-size:14px;color:#9fb0c9;max-width:60ch}
.nt-leg{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:#b9c6dd}
.nt-leg span{display:inline-flex;align-items:center;gap:6px}
.nt-leg i{width:14px;height:8px;border-radius:3px}
.lg-deep{background:#5d7ff0}.lg-rem{background:#e6ab52}.lg-wake{background:#ff8a76;border-radius:50%!important;width:9px!important;height:9px!important}
.nt-chart{margin:14px 0 6px;overflow-x:auto}
.hg{width:100%;min-width:560px;height:auto;display:block}
.hg-grid{stroke:#ffffff12;stroke-width:1}
.hg-t{fill:#8b9ab3;font:11px var(--f-ui);text-anchor:middle}
.hg-l{fill:#b9c6dd;font:600 12px var(--f-ui)}
.hg-deep{fill:#5d7ff0;opacity:.85}
.hg-rem{fill:#e6ab52;opacity:.85}
.hg-line{fill:none;stroke:#dfe7f3;stroke-width:2;stroke-linejoin:round;opacity:.9}
.hg-wake circle{fill:#ff8a76;stroke:#0d141f;stroke-width:2;cursor:help}
.hg-play{stroke:#fff;stroke-width:2;opacity:.7}
.nt-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:14px 0}
.nt-stats div{background:#ffffff08;border:1px solid #ffffff12;border-radius:12px;padding:10px 12px;display:grid;gap:2px}
.nt-stats span{font-size:12px;color:#9fb0c9}
.nt-stats b{font:700 20px var(--f-ui);color:#f2f5fa;font-variant-numeric:tabular-nums}
.nt-stats b.ok{color:#6fd39b}.nt-stats b.mid{color:#f0be6c}.nt-stats b.bad{color:#ff8a76}
.nt-cols{display:grid;grid-template-columns:1fr 1.3fr;gap:18px}
@media (max-width:820px){.nt-cols{grid-template-columns:1fr}.lab-hud2{position:static;justify-content:flex-start;margin-top:8px}}
.nt-cols h4{font-size:15px;color:#f2f5fa;margin-bottom:8px}
.nt-causes ul,.nt-tips ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.nt-causes li{display:grid;grid-template-columns:1fr 110px;gap:10px;align-items:center;font-size:14px}
.nt-causes li>i{height:8px;background:#ffffff10;border-radius:4px;overflow:hidden}
.nt-causes li>i>i{display:block;height:100%;background:#ff8a76;border-radius:4px}
.nt-causes p{font-size:14px;color:#9fb0c9;margin:0}
.nt-tips li{font-size:14px;line-height:1.5;padding:8px 12px;background:#ffffff06;border-left:3px solid #e6ab52;border-radius:8px}
.nt-src{font-size:12px;color:#7f8ea8;margin:14px 0 0}
/* ---------- home mattress selector ---------- */
.quiz{margin:26px auto 0;max-width:640px;min-height:250px;text-align:left;padding:18px 20px 16px;border-radius:22px;background:rgba(10,17,31,.66);border:1px solid #ffffff1f;-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 30px 60px -30px #000;font-family:var(--f-ui);color:#e8eef8}
.q-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.q-n{font:600 13px var(--f-ui);color:#9fb0c9;white-space:nowrap;margin:0}.q-n b{color:#f1d39d}
.q-bar{flex:1;height:4px;background:#ffffff14;border-radius:4px;overflow:hidden}.q-bar i{display:block;height:100%;background:#e9b25c;border-radius:4px;transition:width .35s ease}
.q-step{border:0;margin:0;padding:0;min-width:0}
.q-q{font:700 21px/1.25 var(--f-display);color:#fff;padding:0;margin:0}
.q-hint{margin:4px 0 14px;font-size:14px;color:#9fb0c9}
.q-opts{display:grid;gap:8px}
.q-opts button{font:inherit;color:#e8eef8;background:#ffffff0a;border:1px solid #ffffff22;border-radius:14px;cursor:pointer;text-align:left;transition:border-color .15s,background .15s}
.q-opts button:hover{border-color:#e9b25c88;background:#ffffff12}
.q-opts button[aria-pressed=true]{border-color:#e9b25c;background:#e9b25c1f}
.q-cards{grid-template-columns:repeat(4,1fr)}
.q-cards button{display:grid;justify-items:center;text-align:center;gap:2px;padding:10px 8px 12px}
.q-cards svg{width:64px;height:40px;fill:none;stroke:#cfdaf0;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.q-cards svg circle{fill:#cfdaf0;stroke:none}.q-cards .q-bed{stroke:#ffffff40}.q-cards .q-turn{stroke:#e9b25c;stroke-width:1.8}
.q-cards button[aria-pressed=true] svg{stroke:#f1d39d}.q-cards button[aria-pressed=true] svg circle{fill:#f1d39d}
.q-l{font:650 15px var(--f-ui)}.q-d{font-size:12.5px;color:#9fb0c9}
.q-list{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.q-list button{display:grid;gap:2px;padding:12px 14px}
.q-chips{display:flex;flex-wrap:wrap;gap:8px}
.q-chips button{border-radius:999px;padding:8px 14px}
.q-chips button[aria-pressed=true]::before{content:"✓ ";color:#f1d39d}
.q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:10px}
.q-back,.q-again{font:600 14px var(--f-ui);color:#b9c6dd;background:none;border:0;cursor:pointer;padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.quiz .btn[disabled]{opacity:.4;cursor:not-allowed}
.q-done{display:grid;gap:6px;align-content:center;min-height:200px;text-align:center}
.q-done .q-nav{justify-content:center;gap:22px}
.q-sum{margin:0;display:grid;gap:2px}.q-sum b{font:700 30px var(--f-display);color:#fff}.q-sum span{color:#f1d39d;font-weight:600}
@media (max-width:620px){.q-cards{grid-template-columns:repeat(2,1fr)}.quiz{padding:16px 14px}.q-q{font-size:19px}}
/* match result */
.match{background:radial-gradient(110% 120% at 70% 0%,#17284c 0%,#0d1627 55%,#090f1b 100%);color:#e4ebf7;padding-block:64px 70px;scroll-margin-top:60px;font-family:var(--f-ui)}
.m-head h2{font-size:clamp(26px,3.2vw,38px);color:#fff;margin:10px 0 8px;max-width:22ch}
.m-head .muted{color:#9fb0c9;max-width:68ch;margin:0}
.m-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:26px 0}
.m-spec div{display:grid;gap:2px;padding:14px 16px;background:#ffffff08;border:1px solid #ffffff14;border-radius:14px}
.m-spec span{font-size:12.5px;color:#9fb0c9}.m-spec b{font:700 22px var(--f-ui);color:#fff}.m-spec em{font-style:normal;font-size:13px;color:#b9c6dd}
.m-sub{font-size:19px;color:#f2f5fa;margin:8px 0 12px}
.m-top{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.m-top>li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px;background:#ffffff07;border:1px solid #ffffff16;border-radius:16px}
.m-top>li.is-best{border-color:#e9b25c;background:#e9b25c12}
.m-score{display:grid;justify-items:center;align-content:start}.m-score b{font:800 30px var(--f-ui);color:#fff;line-height:1}.m-score span{font-size:11.5px;color:#9fb0c9}
.m-name{margin:0 0 6px;font-weight:650;color:#fff;font-size:16px}
.m-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:#e9b25c;color:#1a1205;border-radius:999px;padding:2px 8px;margin-right:8px;vertical-align:2px}
.m-top ul{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:13.5px;color:#c9d4e6}
.m-top ul li::before{content:"+ ";color:#6fd39b;font-weight:700}.m-top ul li.con::before{content:"– ";color:#ff8a76}
.m-avoid{margin:14px 0 0;font-size:14px;color:#b9c6dd}.m-avoid b{color:#ff9d8a}
.m-notes{margin-top:14px;font-size:14px;color:#c9d4e6}.m-notes summary{cursor:pointer;font-weight:650;color:#f2f5fa}.m-notes ul{margin:10px 0 0;padding-left:18px;display:grid;gap:6px}
.m-cta{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-top:26px}
.m-cta a{display:grid;gap:4px;align-content:start;padding:18px 20px;border-radius:16px;text-decoration:none;color:#c9d4e6;font-size:14px;border:1px solid #ffffff1c;background:#ffffff08}
.m-cta b{font:700 19px var(--f-display);color:#fff}
.m-lab{background:linear-gradient(120deg,#22407e,#162a52)!important;border-color:#5d7ff0!important}
.m-lab-k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#f1d39d}
.m-cta a:hover{border-color:#e9b25c!important}
.m-note{margin:16px 0 0;font-size:12.5px;color:#7f8ea8}
@media (max-width:720px){.m-cta{grid-template-columns:1fr}}
/* lab teaser (home + hub) */
.lab-teaser{display:grid;gap:6px;margin:34px 0 8px;padding:22px 24px;border-radius:18px;text-decoration:none;color:#c9d4e6;font-family:var(--f-ui);background:radial-gradient(120% 140% at 85% 0%,#22407e 0%,#101a2b 60%);border:1px solid #2c4170}
.lab-teaser .lt-k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#f1d39d}
.lab-teaser b{font:700 22px var(--f-display);color:#fff}
.lab-teaser .lt-go{justify-self:start;margin-top:6px;font-weight:650;color:#1a1205;background:#e9b25c;border-radius:999px;padding:8px 16px}
.lab-teaser:hover{border-color:#e9b25c}
.lab-crumbs{padding-top:18px}
.quiz{min-height:0;margin-top:20px;padding:14px 18px 12px}
.q-cards button{padding:8px 6px 10px}.q-cards svg{height:32px}
.q-hint{margin-bottom:10px}.q-nav{margin-top:10px;min-height:36px}
.q-tap{font-size:13px;color:#7f8ea8;margin-left:auto}
.lab-teaser[hidden]{display:none}
@media (max-width:620px){.breath-cue{display:none}}