:root{
  --void:      #08090c;
  --ash:       #11141b;
  --ash-2:     #181c26;
  --paper:     #f0ebe3;
  --paper-dim: #b7b2a8;
  --mute:      #7d7972;
  --line:      rgba(240,235,227,.12);
  --line-strong: rgba(240,235,227,.22);

  --ember:     #d25a28;
  --ember-soft:#e08a5c;
  --ice:       #8ec4d4;
  --ice-deep:  #4a8fa3;

  --cw-obsidian:#35383C;
  --cw-glacier: #A8D5E2;
  --cw-ember:   #E2542C;
  --cw-chalk:   #EDE8E0;

  --active:        #35383C;
  --active-ink:    #c9cccf;

  --pad:     clamp(20px, 4.6vw, 80px);
  --max:     1180px;
  --ease:    cubic-bezier(.16,1,.3,1);
  --head:    64px;
}

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--void);
  color:var(--paper);
  font-family:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-variation-settings:'opsz' 14,'wdth' 90,'wght' 400;
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(240,235,227,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240,235,227,.045) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 18%, #000 10%, transparent 72%);
}

a{ color:inherit; }
:focus-visible{ outline:2px solid var(--ice); outline-offset:3px; border-radius:4px; }

.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* type */
.display{
  font-family:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  font-variation-settings:'opsz' 96,'wdth' 100,'wght' 800;
  font-size:100px;
  line-height:.92;
  letter-spacing:-.035em;
  margin:0;
}
.display--mid{
  font-size:100px;
  line-height:.92;
}
/* a line break that only lands on phones */
.br-m{ display:none; }

.display--hero{
  font-size:100px;
  line-height:.94;
  letter-spacing:-.032em;
}
.lede{
  max-width:min(54ch, 92vw);
  color:var(--paper-dim);
  font-size:clamp(16px, 1.5vw, 18px);
  margin:0;
}
.mono{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--mute);
}
.fine{
  font-size:13px;
  line-height:1.55;
  color:var(--mute);
  margin:0;
}

/* wordmark */
.mark{
  display:inline-flex; align-items:center;
  flex:0 0 auto;
  text-decoration:none;
  color:var(--paper);
}
.mark img{
  display:block;
  height:28px;
  width:auto;
}
.mark img.mark-hero{ display:none; }
.mark img.mark-bar{ display:block; }
.mark--lg img{ height:clamp(88px, 14vw, 128px); display:block; }

/* nav */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:24px;
  padding:16px var(--pad);
  padding-top:max(16px, env(safe-area-inset-top));
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s ease, border-color .4s ease, padding .4s var(--ease);
}
.topbar .mark{ justify-self:start; }
.nav-tabs{ justify-self:center; }
.nav-right{ justify-self:end; }
.topbar.is-scrolled{
  padding-top:max(11px, env(safe-area-inset-top));
  padding-bottom:11px;
  background:rgba(8,9,12,.78);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border-bottom-color:var(--line);
}
.nav-tabs{
  display:flex; align-items:center; gap:clamp(16px, 2.4vw, 32px);
  list-style:none; margin:0; padding:0;
}
.nav-tabs a{
  font-size:13px; font-weight:400;
  text-decoration:none; color:var(--paper);
  opacity:.55; transition:opacity .25s ease;
  white-space:nowrap;
}
.nav-tabs a:hover,
.nav-tabs a.is-active,
.nav-tabs a[aria-current="page"]{ opacity:1; }
.nav-right{ display:flex; align-items:center; gap:14px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--ember); color:#fff;
  font-family:inherit; font-weight:500; font-size:14px; line-height:1;
  padding:12px 20px;
  border:0; border-radius:999px;
  text-decoration:none; cursor:pointer;
  transition:background .25s ease, transform .25s var(--ease), color .25s ease;
}
.btn:hover{ background:var(--ember-soft); color:#fff; }
.btn:active{ transform:scale(.98); }
.btn--sm{ font-size:12.5px; padding:9px 16px; }
.btn-short{ display:none; }
.btn--ghost{
  background:transparent; color:var(--paper);
  border:1px solid var(--line-strong);
}
.btn--ghost:hover{ background:rgba(240,235,227,.06); color:var(--paper); }

/* stage + product shot */
#stage{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; display:block;
}
.pshot{
  position:relative;
  flex:1 1 auto;
  width:100%;
  display:flex; align-items:center; justify-content:center;
}
.s-hero   .pshot{ min-height:clamp(320px, 46vh, 560px); }
.s-colors .pshot{ min-height:clamp(280px, 40vh, 480px); }

.pshot-glow{
  position:absolute; inset:12% 15% 8%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 44% 38% at 50% 56%, var(--active-glow, rgba(232,210,180,.08)) 0%, transparent 72%),
    radial-gradient(ellipse 54% 46% at 50% 58%,
      rgba(232,210,180,.10)  0%,
      rgba(210,90,40,.055)  32%,
      rgba(142,196,212,.045) 58%,
      transparent 78%);
  transition:background .45s linear;
}

/* the box the renderer scissors into, and the frame the poster holds */
.stage-slot{
  position:relative;
  z-index:1;
  width:min(880px, 94%, 86vh);
  aspect-ratio:1200 / 760;
  cursor:grab;
  touch-action:pan-y;
}
.stage-slot:active{ cursor:grabbing; }
.s-colors .stage-slot{ width:min(720px, 86%, 70vh); }

/* the photograph keeps the frame until the mesh has downloaded */
.pshot-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  transition:opacity .6s ease;
}
.pshot.is-live .pshot-poster{ opacity:0; }

.hud{
  position:absolute; inset:8px 10%;
  pointer-events:none;
  z-index:1;
}
.hud-c{
  position:absolute; width:14px; height:14px;
  border-color:rgba(142,196,212,.55);
  border-style:solid;
}
.hud-c--tl{ top:0; left:0; border-width:1px 0 0 1px; }
.hud-c--tr{ top:0; right:0; border-width:1px 1px 0 0; }
.hud-c--bl{ bottom:0; left:0; border-width:0 0 1px 1px; }
.hud-c--br{ bottom:0; right:0; border-width:0 1px 1px 0; }


main{ position:relative; z-index:1; }

section, .s-foot, .s-page{
  position:relative;
  padding-left:var(--pad); padding-right:var(--pad);
  scroll-margin-top:calc(var(--head, 64px) + 12px);
}

/* temperature rail */
.rail{
  position:fixed; right:18px; top:50%;
  transform:translateY(-50%);
  z-index:25;
  display:flex; flex-direction:column; align-items:center;
  gap:10px;
  pointer-events:none;
}
.rail-deg{
  font-family:"IBM Plex Mono", monospace;
  font-size:10px; letter-spacing:.08em;
  color:var(--mute);
}
.rail-track{
  position:relative;
  width:1px; height:min(42vh, 320px);
  background:repeating-linear-gradient(
    180deg,
    var(--line-strong) 0 1px,
    transparent 1px 16px
  );
}
.rail-fill{
  position:absolute; left:0; right:0; top:0;
  height:0%;
  background:linear-gradient(180deg, var(--ember), var(--ice));
}
.rail-live{
  min-width:3.4em; text-align:center;
  color:var(--paper);
}

/* hero */
.s-hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding-top:calc(var(--head, 72px) + 2.4vh);
  padding-bottom:3.5vh;
  text-align:center;
}
.s-hero::before{
  content:"";
  position:absolute; inset:8% 10% auto; height:52%;
  background:
    radial-gradient(50% 70% at 28% 50%, rgba(210,90,40,.16), transparent 70%),
    radial-gradient(50% 70% at 74% 48%, rgba(142,196,212,.12), transparent 72%);
  pointer-events:none; z-index:-1;
}
.hero-kicker{
  margin:0 auto 20px;
  max-width:none;
  font-size:clamp(12.5px, 1.25vw, 17px);
  color:var(--ice);
}
.hero-sub{
  font-variation-settings:'opsz' 48,'wdth' 96,'wght' 600;
  font-size:clamp(1.15rem, 2.2vw, 1.55rem);
  letter-spacing:-.02em;
  color:var(--paper-dim);
  margin:20px 0 0;
}
.facts{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(12px, 2vw, 28px);
  width:100%; max-width:720px;
  margin:18px auto 0;
  list-style:none; padding:0;
}
.facts li{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.facts b{
  font-family:"IBM Plex Mono", monospace;
  font-size:13px; letter-spacing:.04em;
  font-weight:500; color:var(--paper);
}
.facts span{ font-size:12px; color:var(--mute); }

/* photo chapters */
.chapter{
  min-height:auto;
  padding:0;
}
.chapter-frame{
  position:relative;
  min-height:92svh;
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.chapter-frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 14%;
  transform:scale(1.14);
  transform-origin:center 18%;
  display:block;
}
.chapter--ice .chapter-frame img{
  object-position:center 42%;
  transform:scale(1.08);
  transform-origin:center 45%;
}
.chapter-frame::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,9,12,.12) 0%, rgba(8,9,12,.18) 40%, rgba(8,9,12,.78) 100%);
  pointer-events:none;
}
.chapter--heat .chapter-frame::after{
  background:linear-gradient(180deg, rgba(40,16,8,.08) 0%, rgba(8,9,12,.2) 45%, rgba(8,9,12,.82) 100%);
}
.chapter--cold .chapter-frame::after{
  background:linear-gradient(180deg, rgba(8,16,24,.1) 0%, rgba(8,9,12,.22) 45%, rgba(8,9,12,.84) 100%);
}
.chapter-copy{
  position:relative; z-index:1;
  padding:clamp(28px, 6vw, 72px) var(--pad);
  max-width:34rem;
}
.chapter-copy h2{
  margin:10px 0 14px;
  color:var(--paper);
}
.chapter-copy p{ color:var(--paper-dim); }
.deg-hot{ color:var(--ember-soft); }
.deg-cold{ color:var(--ice); }

/* mosaic intro */
.s-range{
  padding-top:16vh; padding-bottom:10vh;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.s-range .lede{ margin:22px auto 0; }
.plot{
  width:min(720px, 100%);
  margin:36px auto 0;
}
.plot svg{ width:100%; height:auto; display:block; }
.plot-cap{
  display:flex; justify-content:space-between;
  margin-top:8px;
}

/* contrast split */
.s-contrast{
  padding:0;
}
.contrast-frame{
  position:relative;
  min-height:78svh;
  overflow:hidden;
  display:flex; align-items:flex-end;
}
.contrast-frame img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 18%;
  transform:scale(1.12);
  transform-origin:center 22%;
}
.contrast-frame::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,9,12,.05), rgba(8,9,12,.72));
}
.contrast-copy{
  position:relative; z-index:1;
  width:100%;
  padding:clamp(28px, 6vw, 72px) var(--pad);
  display:flex; justify-content:space-between; align-items:flex-end; gap:24px;
}
.hot-word{ color:var(--ember-soft); }
.cold-word{ color:var(--ice); }

/* story */
.s-story{
  padding-top:10vh; padding-bottom:10vh;
  text-align:center;
}
.s-story .wrap{ max-width:var(--max); margin:0 auto; }
.story-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(14px, 2vw, 22px);
  margin-bottom:28px;
  padding-bottom:22px;
  border-bottom:1px dashed var(--line-strong);
}
.story-head .lede{ margin-top:14px; }
.turn{
  font-variation-settings:'opsz' 48,'wdth' 96,'wght' 700;
  font-size:clamp(1.35rem, 2.4vw, 1.85rem);
  line-height:1.16;
  letter-spacing:-.025em;
  margin:0 auto;
  max-width:20ch;
}
.turn em{
  font-style:normal;
  color:var(--void);
  background:var(--ember);
  padding:.02em .18em .04em;
}
.ico{
  width:22px; height:22px; flex:0 0 auto;
  stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.swap{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:0 clamp(20px, 2.4vw, 34px);
  border-bottom:1px solid var(--line);
}
.swap li{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:11px;
  padding:22px 0 26px;
  border-top:1px solid var(--line);
}
.swap-ico{ color:var(--ice); display:flex; align-items:center; }
.swap-deg{ color:var(--ice); }
.swap-p, .swap-a p{
  margin:0;
  font-size:15px;
  line-height:1.35;
  letter-spacing:-.012em;
}
.swap-p{ color:var(--mute); }
.swap-a{ margin-top:auto; padding-top:14px; }
.swap-a p{ color:var(--paper); margin-top:3px; }
.tag{
  display:inline-block;
  font-family:"IBM Plex Mono", monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ember-soft);
  padding-bottom:4px;
  border-bottom:1px solid rgba(210,90,40,.4);
}
.tag--ice{ color:var(--ice); border-bottom-color:rgba(142,196,212,.35); }

/* colorways */
.s-colors{
  min-height:100svh;
  padding-top:12vh; padding-bottom:11vh;
  display:flex; flex-direction:column; justify-content:space-between;
  align-items:center; text-align:center;
}
.cw-readout{ min-height:108px; }
.cw-name{
  font-variation-settings:'opsz' 72,'wdth' 94,'wght' 700;
  font-size:clamp(2rem, 5vw, 3.4rem);
  letter-spacing:-.03em;
  margin:0;
  color:var(--active-ink);
  transition:color .4s linear;
}
.cw-hex{
  font-family:"IBM Plex Mono", monospace;
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--mute); margin:10px 0 0;
}
.cw-note{ color:var(--paper-dim); margin:8px 0 0; font-weight:300; }
.cw-fade{ transition:opacity .18s ease; }
.cw-fade.out{ opacity:0; }
.swatches{
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px;
  margin:52px 0 0; padding:0; list-style:none;
}
.swatch{
  width:38px; height:38px; padding:0;
  border-radius:50%; border:0; cursor:pointer;
  background:var(--sw);
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
  transition:transform .3s var(--ease), box-shadow .3s ease;
}
.swatch:hover{ transform:translateY(-3px) scale(1.06); }
.swatch[aria-checked="true"]{
  box-shadow:0 0 0 1px rgba(255,255,255,.3), 0 0 0 5px rgba(142,196,212,.32);
  transform:translateY(-3px) scale(1.08);
}

/* anatomy + specs */
.s-build{
  padding-top:16vh; padding-bottom:8vh;
  text-align:center;
}
.s-build .wrap{ max-width:var(--max); margin:0 auto; }
.build-head{ margin:0 auto 56px; }
.build-head .lede{ max-width:min(54ch, 92vw); margin:18px auto 0; }

.anatomy{ position:relative; width:100%; max-width:1180px; margin:0 auto 72px; }
.anatomy svg{ width:100%; height:auto; display:block; }
.a-call{ position:absolute; width:19.5%; transform:translateY(-50%); }
.a-call--l{ left:0; text-align:right; }   /* aimed inward at the leader lines */
.a-call--r{ left:80.5%; text-align:left; }
.a-title{
  margin:0 0 5px;
  font-size:14px; font-weight:500; letter-spacing:-.01em;
}
.a-num{
  display:inline-block; min-width:1.2em;
  font-family:"IBM Plex Mono", monospace;
  font-size:12px; color:var(--ice);
}
.a-desc{ margin:0; font-size:12.5px; line-height:1.45; color:var(--mute); }

.s-specs{ padding-top:4vh; padding-bottom:16vh; text-align:center; }
.specs{
  display:grid; grid-template-columns:1fr 1fr;
  column-gap:clamp(32px, 6vw, 90px);
  margin:0 auto; width:100%; max-width:1060px;
  padding:8px 22px 4px;
  border:1px solid var(--line);
  background-image:linear-gradient(180deg, rgba(240,235,227,.03), transparent 48px);
}
.spec{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  text-align:left;
  padding:13px 0;
  border-top:1px dashed var(--line);
}
.spec dt{
  font-family:"IBM Plex Mono", monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute); flex:0 0 auto;
}
.spec dd{
  margin:0; text-align:right;
  font-size:15px; font-weight:400; color:var(--paper);
}

/* waitlist */
.s-list{
  min-height:88svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
  padding-top:14vh; padding-bottom:14vh;
}
.s-list::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(8,9,12,.55), rgba(8,9,12,.78)),
    url("/images/v3-sauna.jpg") center 20% / cover no-repeat;
  filter:saturate(.7) brightness(.55);
}
.form-wrap{ width:100%; max-width:540px; margin:36px auto 0; }
form{
  display:flex; gap:10px; align-items:stretch;
  transition:opacity .35s ease, transform .45s var(--ease);
}
form.gone{ opacity:0; transform:translateY(-10px); pointer-events:none; height:0; overflow:hidden; margin:0; }
input[type=email]{
  flex:1; min-width:0;
  background:rgba(8,9,12,.55);
  border:1px solid var(--line-strong);
  border-radius:999px;
  color:var(--paper);
  font-family:inherit; font-size:16px; font-weight:300;
  padding:16px 22px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
input[type=email]::placeholder{ color:var(--mute); }
input[type=email]:hover{ border-color:rgba(240,235,227,.4); }
input[type=email]:focus{
  border-color:var(--ice);
  box-shadow:0 0 0 4px rgba(142,196,212,.16);
  outline:none;
}
form.invalid input[type=email]{ border-color:#e06a5c; background:rgba(60,16,14,.5); }
button[type=submit][disabled]{ opacity:.55; cursor:default; transform:none; }
.err{
  margin:14px 2px 0; min-height:20px;
  font-size:13.5px; color:#e06a5c; opacity:0;
  transition:opacity .25s ease;
}
.err.show{ opacity:1; }
.done{
  margin:0; opacity:0; transform:translateY(14px);
  transition:opacity .5s ease .12s, transform .6s var(--ease) .12s;
  font-variation-settings:'opsz' 32,'wdth' 90,'wght' 500;
  font-size:clamp(1.15rem, 2.4vw, 1.55rem);
  color:var(--paper);
  height:0; overflow:hidden;
}
.done.show{ opacity:1; transform:none; height:auto; overflow:visible; }
.done .glc{ color:var(--ice); }

/* footer */
.s-foot{
  padding-top:8vh; padding-bottom:40px;
  background:var(--void);
}
.foot-row{
  display:flex; flex-direction:column; align-items:center;
  gap:14px; padding-top:28px; border-top:1px solid var(--line);
  width:100%; max-width:var(--max); margin:0 auto;
  text-align:center;
}
.safety{
  margin:18px auto 0; max-width:var(--max); width:100%;
  text-align:center;
}

/* reveal */
.rv{
  opacity:0; transform:translateY(24px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.in .rv{ opacity:1; transform:none; }

/* mobile */
@media (max-width:900px){
  .rail{ display:none; }
  .anatomy .leaders{ display:none; }
  .anatomy{ margin-bottom:36px; }
  .a-call{
    position:static; width:auto; transform:none;
    text-align:center !important; padding:16px 0;
    border-top:1px solid var(--line);
  }
  .a-call--l, .a-call--r{ left:auto; }
  .a-desc{ font-size:14px; }
}
@media (max-width:900px){
  .btn-full{ display:none; }
  .btn-short{ display:inline; }
  .topbar{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:10px 12px;
    background:transparent;
    border-bottom-color:transparent;
  }
  .topbar .mark{
    grid-column:2;
    grid-row:1;
    justify-self:center;
  }
  .nav-right{
    grid-column:3;
    grid-row:1;
    justify-self:end;
  }
  .nav-tabs{
    grid-column:1 / -1;
    grid-row:2;
    justify-content:center;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .nav-tabs::-webkit-scrollbar{ display:none; }
  .nav-tabs li{ flex:0 0 auto; }
  .nav-tabs a{ opacity:.85; font-size:12px; padding:0; }
  .topbar img.mark-bar{ height:20px; }
  .topbar img.mark-hero{ display:none; }
  .btn--sm{ font-size:12px; padding:8px 12px; }
  .topbar:not(.is-scrolled){
    grid-template-columns:1fr;
    justify-items:center;
    padding-top:max(20px, env(safe-area-inset-top));
    padding-bottom:12px;
  }
  .topbar:not(.is-scrolled) .mark{
    grid-column:1;
    grid-row:1;
  }
  .topbar:not(.is-scrolled) .nav-tabs,
  .topbar:not(.is-scrolled) .nav-right{ display:none; }
  .topbar:not(.is-scrolled) img.mark-hero{
    display:block;
    height:clamp(72px, 18vw, 104px);
    width:auto;
  }
  .topbar:not(.is-scrolled) img.mark-bar{ display:none; }
  .topbar.is-scrolled img.mark-hero{ display:none; }
  .topbar.is-scrolled img.mark-bar{ display:block; height:20px; }
}
@media (max-width:820px){
  .story-head{ grid-template-columns:1fr; gap:16px; }
  .swap{
    grid-template-columns:1fr;
    gap:14px;
    border-bottom:0;
  }
  .swap li{
    gap:9px;
    padding:22px 18px 24px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(240,235,227,.02);
  }
  .swap-a{ padding-top:10px; }
}
@media (max-width:520px){
  .topbar img.mark-bar{ height:20px; }
}
@media (max-width:360px){
  .topbar img.mark-bar{ height:16px; }
}
@media (max-width:768px){
  .facts{ grid-template-columns:1fr 1fr; gap:8px 16px; }
  .specs{ grid-template-columns:1fr; }
  .chapter-frame{ min-height:78svh; }
  .contrast-frame{ min-height:64svh; }
  .contrast-copy{ flex-direction:column; align-items:flex-start; }
  form{ flex-direction:column; }
  .s-hero{ padding-top:calc(var(--head, 64px) + 6vh); }
  .s-hero .pshot{ min-height:240px; }
  .stage-slot{ width:min(880px, 96%, 58vh); }
  /* let the section space the blocks out, so the brackets hug the product */
  .s-colors .pshot{ flex:0 1 auto; min-height:0; }
  .s-colors .stage-slot{ width:min(720px, 92%, 52vh); }
}
@media (max-width:768px){
  /* every display heading shares the hero's scale down here */
  .display,
  .display--mid,
  .display--hero{
    font-size:clamp(3rem, 15vw, 4.32rem);
    line-height:.96;
  }
  .br-m{ display:inline; }
  /* 37 characters of mono is a lot for 375px: ease the tracking */
  .hero-kicker{ letter-spacing:.1em; line-height:1.5; }
}

/* linked teaser cards on the homepage */
.swap--links{
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
.swap--links li{ padding:0; }
.swap--links li > a{
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:11px;
  padding:22px 0 26px;
  color:inherit; text-decoration:none; height:100%; width:100%;
}
.swap--links li > a:hover .swap-a p{ color:var(--ice); }

/* learn hub: clickable guide cards */
.guide-cards{
  list-style:none; margin:34px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(16px, 2vw, 26px);
}
.guide-cards > li{ margin:0; padding:0; border:0; }
.guide-cards a{
  display:flex; flex-direction:column; height:100%;
  color:inherit; text-decoration:none;
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:rgba(240,235,227,.015);
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
.guide-cards a:hover,
.guide-cards a:focus-visible{
  border-color:rgba(142,196,212,.42);
  background:rgba(240,235,227,.035);
  transform:translateY(-3px);
}
.gc-media{ display:block; aspect-ratio:16 / 10; overflow:hidden; background:#11141b; }
.gc-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.guide-cards a:hover .gc-media img{ transform:scale(1.05); }
.gc-body{ display:flex; flex-direction:column; gap:9px; padding:20px 22px 22px; flex:1; }
.gc-kicker{ color:var(--ice); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }
.gc-title{
  margin:0; color:var(--paper);
  font-size:clamp(19px, 1.9vw, 23px); line-height:1.2; letter-spacing:-.02em;
}
.gc-desc{ color:var(--mute); font-size:15px; line-height:1.45; }
.gc-cta{
  margin-top:auto; padding-top:8px;
  color:var(--ice); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.guide-cards a:hover .gc-cta{ text-decoration:underline; text-underline-offset:3px; }
@media (max-width:720px){ .guide-cards{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  .guide-cards a, .gc-media img{ transition:none; }
  .guide-cards a:hover{ transform:none; }
}

/* product: compact page intro so the colourway stage reads as the hero */
.s-list--intro{
  min-height:0;
  padding-top:clamp(104px, 13vh, 150px);
  padding-bottom:10px;
}
.s-list--intro::before{ display:none; }
.s-list--intro + .s-colors--hero{ padding-top:4px; }
.s-colors--hero .pshot--cw{ margin-top:0; }

/* home: four headaches — texture imagery, label on top */
.swap--hx li > a{ padding:22px 14px 26px; gap:12px; }
.swap--hx .hx-media{
  display:block; width:100%;
  aspect-ratio:4 / 5;
  overflow:hidden;
  border-radius:10px;
  border:1px solid var(--line);
  background:#11141b;
}
.swap--hx .hx-media img{
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform .55s cubic-bezier(.22,.61,.36,1);
}
.swap--hx li > a:hover .hx-media img{ transform:scale(1.05); }
.swap--hx .swap-a{ margin-top:0; }
@media (max-width:900px){
  .swap--hx{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce){
  .swap--hx .hx-media img{ transition:none; }
}

/* inner pages */
.s-page{
  padding-top:calc(var(--head, 72px) + 8vh);
  padding-bottom:4vh;
}
.page-head{
  max-width:min(52rem, 92vw);
  margin:0 auto;
  text-align:center;
}
.page-head .display--page{
  font-size:clamp(2.4rem, 5.6vw, 3.8rem);
  line-height:.96;
  letter-spacing:-.03em;
  max-width:13ch;
  margin:0 auto;
}
.page-head .lede{
  margin:22px auto 0;
  text-align:center;
}
.page-shot{
  position:relative;
  width:min(720px, 100%);
  margin:48px auto 0;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:var(--ash);
}
.page-shot img{
  width:100%; height:100%;
  object-fit:cover; display:block;
}
.page-shot figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:14px 16px;
  background:linear-gradient(180deg, transparent, rgba(8,9,12,.72));
  color:var(--paper-dim);
  font-size:12px;
}
.prose{
  width:100%;
  max-width:min(46rem, 92vw);
  margin:56px auto 0;
  color:var(--paper-dim);
  font-size:clamp(16px, 1.5vw, 18px);
  line-height:1.65;
  overflow-wrap:break-word;
}
.prose h2{
  font-variation-settings:'opsz' 48,'wdth' 96,'wght' 700;
  font-size:clamp(1.35rem, 2.4vw, 1.85rem);
  line-height:1.16;
  letter-spacing:-.025em;
  color:var(--paper);
  margin:2.6em 0 .7em;
}
.prose h3{
  font-variation-settings:'opsz' 32,'wdth' 94,'wght' 600;
  font-size:1.05rem;
  letter-spacing:-.02em;
  color:var(--paper);
  margin:1.8em 0 .45em;
}
.prose p{ margin:0 0 1em; }
.prose a{
  color:var(--ice);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.prose a:hover{ color:var(--paper); }
.prose ul, .prose ol{
  margin:0 0 1.2em; padding-left:1.15em;
}
.prose li{ margin:0 0 .45em; }
.prose li::marker{ color:var(--mute); }
.note{
  margin:2em 0;
  padding:20px 0;
  border-top:1px dashed var(--line-strong);
  border-bottom:1px dashed var(--line-strong);
}
.note p{ margin:0; }
.note p + p{ margin-top:.8em; }
.faq{
  margin:0;
  border-top:1px solid var(--line);
}
.faq dt{
  font-variation-settings:'opsz' 32,'wdth' 94,'wght' 600;
  font-size:1.05rem;
  letter-spacing:-.02em;
  color:var(--paper);
  margin:0;
  padding:18px 0 6px;
  border-top:1px solid var(--line);
}
.faq dt:first-child{ border-top:0; }
.faq dd{
  margin:0 0 8px;
  color:var(--paper-dim);
}
.also{
  max-width:42rem;
  margin:64px auto 0;
  padding-top:28px;
  border-top:1px dashed var(--line-strong);
}
.also .mono{ margin:0 0 8px; }
.also ul{ list-style:none; margin:0; padding:0; }
.also li{
  border-top:1px solid var(--line);
  padding:16px 0;
}
.also a{
  color:var(--paper);
  text-decoration:none;
  font-variation-settings:'opsz' 32,'wdth' 94,'wght' 600;
  font-size:1.12rem;
  letter-spacing:-.02em;
}
.also a:hover{ color:var(--ice); }
.also p{
  margin:6px 0 0;
  font-size:14px;
  color:var(--mute);
}
.page-bridge{
  padding-top:8vh;
  padding-bottom:4vh;
  background:var(--void);
}
.foot-nav{
  display:grid;
  grid-template-columns:repeat(4, auto);
  justify-content:center;
  align-items:start;
  column-gap:clamp(28px, 5vw, 56px);
  list-style:none;
  width:auto;
  max-width:100%;
  margin:28px auto 0;
  padding:0 8px;
  text-align:center;
}
.foot-nav > li{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.foot-nav a{
  font-size:13px;
  color:var(--mute);
  text-decoration:none;
}
.foot-nav a:hover,
.foot-nav a[aria-current="page"]{ color:var(--paper); }
.foot-learn > a{
  color:var(--paper-dim);
}
.foot-sub{
  list-style:none;
  margin:0;
  padding:8px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  border-top:1px solid var(--line);
  width:100%;
  max-width:16rem;
}
.foot-sub a{
  font-size:12px;
  color:var(--mute);
  line-height:1.35;
  white-space:nowrap;
}
.foot-legal{
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:8px 18px;
  list-style:none;
  max-width:var(--max); width:100%;
  margin:28px auto 0; padding:16px 0 0;
  border-top:1px solid var(--line);
}
.foot-legal a{
  font-size:12px;
  color:var(--mute);
  text-decoration:none;
}
.foot-legal a:hover,
.foot-legal a[aria-current="page"]{ color:var(--paper); }
@media (max-width:700px){
  .foot-nav{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    width:100%;
  }
  .foot-nav > li{ width:auto; }
  .foot-learn{
    width:min(16rem, 100%);
    gap:12px;
    padding-top:6px;
  }
  .foot-sub{
    padding-top:12px;
    gap:8px;
  }
}
.page-head--legal .display--page{
  max-width:16ch;
}
.prose .when{
  margin:0 0 1.6em;
  font-size:13px;
  color:var(--mute);
}
.s-specs .more{
  margin:28px auto 0;
  text-align:center;
}
.s-specs .more a{ color:var(--ice); text-decoration:none; }
.s-specs .more a:hover{ text-decoration:underline; text-underline-offset:3px; }

.a-desc a{
  color:var(--ice);
  text-decoration:none;
}
.a-desc a:hover{ text-decoration:underline; text-underline-offset:2px; }

/* science diagrams */
.legend{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 22px;
  max-width:42rem; margin:28px auto 0;
  list-style:none; padding:0;
}
.legend li{
  display:flex; align-items:center; gap:8px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mute);
}
.legend i{
  display:block; width:22px; height:2px; border-radius:1px;
  background:currentColor;
}
.legend .air{ color:var(--ember-soft); }
.legend .bone{ color:var(--ice); }
.legend .dim i{
  height:0;
  background:transparent;
  border-top:1.5px dashed var(--mute);
}

.diag-pair{
  display:grid; grid-template-columns:1fr 1fr;
  gap:16px;
  width:min(920px, 100%);
  margin:40px auto 0;
}
.diag{
  margin:40px auto 0;
  width:min(720px, 100%);
  background:var(--ash);
  border:1px solid var(--line);
}
.diag-pair .diag{ margin:0; width:auto; }
.diag svg{ width:100%; height:auto; display:block; }
/* keep diagram labels legible where they cross the head outline */
.diag text.lbl{
  paint-order:stroke fill;
  stroke:#11141b;
  stroke-width:3px;
  stroke-linejoin:round;
}
.diag figcaption{
  padding:12px 16px 14px;
  border-top:1px solid var(--line);
  color:var(--mute);
  font-size:13px; line-height:1.45;
}
.diag figcaption .mono{
  display:block;
  margin:0 0 6px;
  color:var(--ice);
}
.diag--heat{ width:min(720px, 100%); }

.compare-wrap{
  width:100%; max-width:52rem;
  margin:36px auto 0;
  overflow-x:auto;
  border:1px solid var(--line);
  background-image:linear-gradient(180deg, rgba(240,235,227,.03), transparent 48px);
}
.compare{
  width:100%; min-width:32rem;
  border-collapse:collapse;
  font-size:15px;
}
.compare th, .compare td{
  text-align:left; vertical-align:top;
  padding:13px 16px;
  border-top:1px dashed var(--line);
  color:var(--paper-dim);
}
.compare thead th{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:500; color:var(--mute);
  border-top:0; border-bottom:1px solid var(--line);
  padding-top:16px;
}
.compare tbody th{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  font-weight:500; color:var(--mute);
  white-space:nowrap; padding-left:16px;
}
.compare tbody tr:first-child th,
.compare tbody tr:first-child td{ border-top:0; }

@media (prefers-reduced-motion:no-preference){
  .diag-flow{
    stroke-dasharray:7 9;
    animation:diag-dash 2.8s linear infinite;
  }
}
@keyframes diag-dash{
  to{ stroke-dashoffset:-32; }
}

@media (max-width:820px){
  .swap--links{ grid-template-columns:1fr; }
  .swap--hx{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .swap--links li > a{ padding:22px 18px 24px; }
}
@media (max-width:768px){
  .s-page{ padding-top:calc(var(--head, 64px) + 6vh); }
  .page-head .display--page{
    font-size:clamp(2.15rem, 10vw, 3rem);
    max-width:11ch;
  }
  .page-head--legal .display--page{ max-width:14ch; }
  .page-shot{ aspect-ratio:4 / 3; margin-top:32px; }
  .diag-pair{ grid-template-columns:1fr; }
  .diag text.lbl{ font-size:15px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rv{ opacity:1 !important; transform:none !important; transition:none !important; }
  .swatch, .swatch:hover, .swatch[aria-checked="true"]{ transition:box-shadow .2s linear; transform:none; }
  form, .done, .err, .cw-fade, .btn, .diag-flow{ transition:none; animation:none !important; }
  *{ scroll-behavior:auto !important; }
}