/* ═══════════════════════════════════════════════════════════════════
   Wellnest Haven — landing system
   Warm editorial + technical precision.

   Two rules that hold the whole thing together:
   1. RED MEANS PHOTONS. --light appears only where the subject is actual
      light output — irradiance, wavelengths, dose. Never decoration.
   2. NUMBERS ARE MONO AND TABULAR. Every figure sits on the same rhythm,
      so specs read as measurements rather than marketing.

   No external fonts, scripts or images. Artifact CSP safe.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ground */
  --paper:      #ffffff;
  --paper-deep: #f7f6f3;
  --surface:    #fbfaf7;

  /* ink */
  --ink:        #14130f;
  --graphite:   #5e5a50;
  --hairline:   #e6e3dc;
  --hairline-2: #d3cec3;

  /* semantic */
  --light:      #d8402a;   /* photons only */
  --light-wash: #f6e3dd;
  --verify:     #2f6b4f;   /* passes-the-check only */

  --sans: system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace;

  /* type scale — 1.333, tuned by hand at the top end */
  --t-mega: clamp(2.9rem, 6.1vw, 5.4rem);
  --t-xl:   clamp(2.2rem, 4.4vw, 3.5rem);
  --t-lg:   clamp(1.55rem, 2.6vw, 2.1rem);
  --t-md:   1.28rem;
  --t-bd:   1.0625rem;
  --t-sm:   0.9375rem;
  --t-xs:   0.8125rem;

  --rail: 8.5rem;          /* left measurement rail */
  --gut:  2.5rem;
  --measure: 33rem;
}

@media (prefers-color-scheme: dark){
  :root{
    --paper:#15140f; --paper-deep:#1c1a14; --surface:#201e17;
    --ink:#f2efe6; --graphite:#a49e90; --hairline:#333026; --hairline-2:#474337;
    --light:#f0603f; --light-wash:#2e1a15; --verify:#5fa37f;
  }
}
:root[data-theme="dark"]{
  --paper:#15140f; --paper-deep:#1c1a14; --surface:#201e17;
  --ink:#f2efe6; --graphite:#a49e90; --hairline:#333026; --hairline-2:#474337;
  --light:#f0603f; --light-wash:#2e1a15; --verify:#5fa37f;
}
:root[data-theme="light"]{
  --paper:#ffffff; --paper-deep:#f7f6f3; --surface:#fbfaf7;
  --ink:#14130f; --graphite:#5e5a50; --hairline:#e6e3dc; --hairline-2:#d3cec3;
  --light:#d8402a; --light-wash:#f6e3dd; --verify:#2f6b4f;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:var(--t-bd); line-height:1.62;
  font-variant-numeric:tabular-nums;
}
img{max-width:100%;height:auto;display:block}

/* ── the rail ─────────────────────────────────────────────────────
   A measurement scale down the left edge. Section markers are ticks
   with a real value on them, not 01/02/03. */
.page{max-width:78rem;margin:0 auto;padding:0 var(--gut)}
.rail-layout{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0}
.rail{
  position:relative;border-right:1px solid var(--hairline);
  padding-top:.55rem;
}
.rail::after{
  content:"";position:absolute;top:.9rem;right:-1px;width:9px;height:1px;
  background:var(--ink);
}
.rail-k{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.06em;
  color:var(--light);text-transform:uppercase;line-height:1.35;
  padding-right:1.1rem;
}
.rail-k b{display:block;color:var(--ink);font-weight:600;letter-spacing:0}
.body-col{padding:0 0 0 var(--gut);min-width:0}

@media (max-width:860px){
  .rail-layout{grid-template-columns:1fr}
  .rail{border-right:none;border-top:1px solid var(--hairline);
        padding:.7rem 0 0;margin-bottom:1.4rem}
  .rail::after{top:-1px;left:0;right:auto;width:34px}
  .rail-k{padding-right:0}
  .rail-k b{display:inline;margin-left:.5rem}
  .body-col{padding-left:0}
}


/* ── nav ──────────────────────────────────────────────────────────
   Quiet and sticky. On a 16,000px page the reader needs a way back
   without scrolling to the top. */
.nav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--hairline);
}
.nav-in{
  max-width:78rem;margin:0 auto;padding:0 var(--gut);
  height:3.5rem;display:flex;align-items:center;gap:2rem;
}
.nav-brand{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--ink);text-decoration:none;
  white-space:nowrap;
}
.nav-link{
  font-size:var(--t-sm);color:var(--graphite);text-decoration:none;
  white-space:nowrap;padding:.35rem 0;border-bottom:2px solid transparent;
}
.nav-link:hover{color:var(--ink)}
.nav-link[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.nav-cta{
  margin-left:auto;font-size:var(--t-sm);font-weight:620;color:var(--ink);
  text-decoration:none;border-bottom:2px solid var(--ink);padding-bottom:1px;
  white-space:nowrap;
}
@media (max-width:560px){
  .nav-in{gap:1.1rem;padding:0 1.25rem}
  .nav-brand{font-size:.68rem;letter-spacing:.14em}
  .nav-link,.nav-cta{font-size:.82rem}
}

/* ── collection page: the two models, side by side ──────────────── */
.models{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);margin-top:2.5rem}
@media (max-width:860px){.models{grid-template-columns:1fr;gap:3.5rem}}
.model{display:flex;flex-direction:column}
.model > a{text-decoration:none;color:inherit;display:block}
.model img{border-radius:3px}
.model .tag{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.15em;
  text-transform:uppercase;color:var(--light);margin-top:1.4rem;
}
.model h3{margin-top:.6rem;font-size:var(--t-lg);max-width:22ch}
.model .who{color:var(--graphite);margin-top:.7rem;font-size:var(--t-sm);max-width:34ch}
.model .figs{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--ink);margin-top:1.4rem;
}
.model .figs div{padding:.9rem 1rem .9rem 0;border-bottom:1px solid var(--hairline)}
.model .figs dt{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--graphite);
}
.model .figs dd{font-family:var(--mono);font-size:1.05rem;font-weight:640;margin-top:.25rem}
.model .price{
  display:flex;align-items:baseline;gap:.6rem;margin-top:1.3rem;
}
.model .price b{font-family:var(--mono);font-size:1.9rem;font-weight:640;letter-spacing:-.03em}
.model .price span{font-size:var(--t-xs);color:var(--graphite)}
.model .go{
  margin-top:1.3rem;font-weight:620;color:var(--ink);
  border-bottom:2px solid var(--ink);display:inline-block;padding-bottom:1px;
}
.router{
  border-top:1px solid var(--ink);margin-top:1rem;padding-top:1.6rem;
  display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);
}
@media (max-width:860px){.router{grid-template-columns:1fr;gap:1.6rem}}
.router p{font-size:var(--t-sm);max-width:38ch}

/* nav lockup — wordmark on desktop, WH monogram below the wordmark's 180px
   minimum. Both inherit nav colour via currentColor, so they theme for free. */
.nav-brand{display:flex;align-items:center;line-height:0}
.nav-brand .wm{width:180px;height:auto;display:block}
.nav-brand .wm-sm{display:none;height:19px;width:auto}
@media (max-width:640px){
  .nav-brand .wm{display:none}
  .nav-brand .wm-sm{display:block}
}

/* ── sections ───────────────────────────────────────────────────── */
.sec{padding:5.5rem 0;border-top:1px solid var(--hairline)}
.sec:first-of-type{border-top:none}
.sec--band{background:var(--paper-deep);border-top:1px solid var(--hairline-2)}
.sec--tight{padding:3.25rem 0}

h1,h2,h3{font-weight:650;letter-spacing:-.028em;line-height:1.02;text-wrap:balance}
h1{font-size:var(--t-mega);letter-spacing:-.038em;max-width:17ch}
h2{font-size:var(--t-xl);max-width:24ch}
h3{font-size:var(--t-lg);letter-spacing:-.02em;line-height:1.14}
h4{font-size:var(--t-md);font-weight:640;letter-spacing:-.012em}

p{max-width:var(--measure)}
p + p{margin-top:1rem}
.lede{font-size:var(--t-md);line-height:1.5;color:var(--graphite);max-width:38ch}
.eyebrow{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.15em;
  text-transform:uppercase;color:var(--graphite);
}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.photons{color:var(--light)}
.pass{color:var(--verify);font-weight:640}
.fail{color:var(--light);font-weight:640}
.stack-sm > * + *{margin-top:.7rem}
.stack   > * + *{margin-top:1.5rem}
.stack-lg> * + *{margin-top:3rem}

/* ── hero ───────────────────────────────────────────────────────── */
.hero{padding:4.5rem 0 0}
.hero .brand{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink);
}
.hero h1{margin-top:2.2rem}
.hero .lede{margin-top:1.7rem;max-width:44ch;color:var(--ink)}
.hero-figure{margin-top:3rem}

/* readings strip — the hero's factual footing */
.readings{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--ink);margin-top:3rem;
}
.readings > div{padding:1.5rem 1.25rem 1.5rem 0;border-right:1px solid var(--hairline)}
.readings > div:last-child{border-right:none}
.readings dt{
  font-family:var(--mono);font-size:var(--t-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--graphite);
}
.readings dd{
  font-family:var(--mono);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:600;
  letter-spacing:-.03em;line-height:1.05;margin-top:.6rem;
}
.readings dd small{
  display:block;font-family:var(--sans);font-size:var(--t-xs);font-weight:400;
  letter-spacing:0;color:var(--graphite);margin-top:.4rem;line-height:1.35;
}
@media (max-width:760px){
  .readings{grid-template-columns:1fr 1fr}
  .readings > div{padding-right:1rem}
  .readings > div:nth-child(2n){border-right:none}
  .readings > div:nth-child(-n+2){border-bottom:1px solid var(--hairline)}
}

/* ── buttons ────────────────────────────────────────────────────── */
.actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-top:2rem}
.btn{
  font:inherit;font-weight:620;text-decoration:none;display:inline-block;
  padding:.85rem 1.5rem;background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);border-radius:2px;
  transition:transform .12s ease, background .12s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn-aside{font-size:var(--t-sm);color:var(--graphite)}

/* ── figures & diagrams ─────────────────────────────────────────── */
figure{margin:0}
.fig{margin-top:2rem}
.fig svg{width:100%;height:auto;display:block}

/* Wide technical diagrams stay legible on a phone by scrolling inside their
   own container rather than shrinking their labels to 5px. */
@media (max-width:820px){
  .fig:has(> svg){
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding-bottom:.5rem;
    scrollbar-width:thin;
  }
  .fig:has(> svg) > svg{min-width:660px}
  .fig:has(> svg) > figcaption{position:sticky;left:0;max-width:32ch}
  .fig:has(> svg)::after{
    content:"scroll to see the full figure \2192";
    display:block;position:sticky;left:0;
    font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
    text-transform:uppercase;color:var(--light);margin-top:.6rem;
  }
}

/* Photographs should never be small on a phone — full bleed of the column. */
@media (max-width:820px){
  .fig img, figure > img{width:100%}
  .trio figure img, .duo figure img{min-height:0}
}
.fig img{border-radius:3px}
figcaption{
  font-size:var(--t-sm);color:var(--graphite);margin-top:.9rem;max-width:46ch;
  padding-left:.9rem;border-left:2px solid var(--hairline-2);
}
.bleed{margin-left:calc(var(--rail) * -1 - var(--gut))}
@media (max-width:860px){.bleed{margin-left:0}}

/* two-up */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-items:start}
.duo--wide{grid-template-columns:1.15fr .85fr}
.duo--flip > :first-child{order:2}
@media (max-width:860px){
  .duo,.duo--wide{grid-template-columns:1fr;gap:1.8rem}
  .duo--flip > :first-child{order:0}
}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gut)}
@media (max-width:820px){.trio{grid-template-columns:1fr;gap:2.2rem}}

/* ── spec list ──────────────────────────────────────────────────── */
.spec{border-top:1px solid var(--ink);max-width:44rem}
.spec > div{
  display:grid;grid-template-columns:16rem 1fr;gap:1rem;
  padding:.85rem 0;border-bottom:1px solid var(--hairline);
}
.spec dt{color:var(--graphite);font-size:var(--t-sm)}
.spec dd{font-family:var(--mono);font-weight:600;font-size:var(--t-sm)}
@media (max-width:640px){
  .spec > div{grid-template-columns:1fr;gap:.15rem}
}

/* ── comparison table ──────────────────────────────────────────── */
.tw{overflow-x:auto;margin-top:2rem}
table{border-collapse:collapse;width:100%;min-width:40rem;font-size:var(--t-sm)}
thead th{
  text-align:left;font-family:var(--mono);font-size:var(--t-xs);
  letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);
  font-weight:500;padding:0 1rem .9rem 0;vertical-align:bottom;
}
thead th.mine{color:var(--ink);font-weight:700}
tbody td{padding:.9rem 1rem .9rem 0;border-top:1px solid var(--hairline)}
tbody tr:first-child td{border-top:1px solid var(--ink)}
td.k{color:var(--graphite);width:13rem}
td.mine{font-family:var(--mono);font-weight:640}

/* ── candid block: where we say the unflattering thing ─────────── */
.candid{
  background:var(--surface);border:1px solid var(--hairline-2);
  border-left:3px solid var(--light);padding:1.7rem 1.9rem;border-radius:0 3px 3px 0;
  max-width:46rem;
}
.candid h3{font-size:var(--t-md);margin-bottom:.6rem}
.note{
  border:1px dashed var(--hairline-2);padding:1.5rem 1.7rem;
  border-radius:3px;max-width:46rem;background:var(--surface);
}

/* ── faq ───────────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--ink);max-width:48rem}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;
  font-weight:620;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.55rem;width:11px;height:11px;
  border-right:2px solid var(--light);border-bottom:2px solid var(--light);
  transform:rotate(45deg);transition:transform .16s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);top:1.75rem}
.faq .ans{padding:0 0 1.4rem;color:var(--graphite)}
.faq .ans p{max-width:44ch}
.faq .ans strong{color:var(--ink)}

/* ── price ─────────────────────────────────────────────────────── */
.price{display:flex;align-items:baseline;gap:.9rem;flex-wrap:wrap}
.price b{
  font-family:var(--mono);font-size:clamp(2.6rem,6vw,4.2rem);font-weight:640;
  letter-spacing:-.045em;line-height:1;
}
.price span{font-size:var(--t-sm);color:var(--graphite)}

/* ── guarantee ─────────────────────────────────────────────────── */
.guarantee{border:2px solid var(--ink);padding:2rem 2.2rem;max-width:44rem;border-radius:3px}
.guarantee .t{font-size:var(--t-lg);font-weight:650;letter-spacing:-.02em;margin-bottom:.9rem}

/* ── review slots: empty until real ones exist ─────────────────── */
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
.slot{
  border:1px dashed var(--hairline-2);border-radius:3px;padding:1.4rem;
  min-height:9rem;display:flex;flex-direction:column;justify-content:space-between;
}
.slot .q{font-family:var(--mono);font-size:var(--t-xs);color:var(--graphite);
  letter-spacing:.08em;text-transform:uppercase}
.slot .w{font-size:var(--t-sm);color:var(--graphite);line-height:1.45}
@media (max-width:820px){.slots{grid-template-columns:1fr}}

/* ── cta ───────────────────────────────────────────────────────── */
.cta{
  background:var(--ink);color:var(--paper);padding:3rem 2.6rem;border-radius:3px;
}
.cta h2{color:var(--paper);max-width:22ch}
.cta p{color:color-mix(in srgb, var(--paper) 72%, transparent);max-width:42ch}
.cta .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.tbd{
  font-family:var(--mono);font-size:.86em;background:var(--light-wash);
  color:var(--light);padding:.1rem .45rem;border-radius:2px;
}
.cta .tbd{background:rgba(255,255,255,.14);color:var(--paper)}

footer{padding:3rem 0 5rem;font-size:var(--t-xs);color:var(--graphite)}
footer p{max-width:62ch}
footer a{color:var(--graphite);text-decoration:none;border-bottom:1px solid var(--hairline-2)}
footer a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.legal a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline-2)}

/* ── quality floor ─────────────────────────────────────────────── */
a:focus-visible,summary:focus-visible,.btn:focus-visible{
  outline:2px solid var(--light);outline-offset:3px;border-radius:2px;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

@media print{
  body{background:#fff;color:#000}
  .rail{border-right:1px solid #999}
  .sec{border-top:1px solid #bbb;padding:1.5rem 0;break-inside:avoid}
  .sec--band{background:#fff}
  .cta{background:#fff;color:#000;border:2px solid #000}
  .cta h2,.cta p{color:#000}
  .faq details{border-color:#bbb}
  .faq .ans{display:block!important}
  .faq summary::after{display:none}
  .slot{display:none}
}