:root {
  color-scheme: light;
  --paper: #f1f0ec;
  --paper-bright: #faf9f6;
  --ink: #181818;
  --ink-soft: #5a5955;
  --inverse: #161514;
  --inverse-soft: #b8b8b3;
  --line: #cbc9c2;
  --line-dark: #3b3b39;
  --signal: #a7d8b3;
  --signal-ink: #477051;
  --red-sm: var(--ink-soft);
  --content: 76rem;
  --reading: 38rem;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --section: clamp(5rem, 11vw, 9rem);
  --space-1: .5rem;
  --space-2: .875rem;
  --space-3: 1.25rem;
  --space-4: 2rem;
  --space-5: clamp(2.5rem, 5vw, 4.5rem);
  --radius: .2rem;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

img { display: block; max-width: 100%; height: auto; }

figure { margin: 0; }

button, a { font: inherit; }

a { color: inherit; }

:focus-visible { outline: .16rem solid currentColor; outline-offset: .25rem; }

.site-header {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--space-4);
  padding: .8rem var(--gutter);
  background: var(--inverse);
  color: #f7f7f3;
}

.wordmark span { white-space: nowrap; }

.site-header nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 2rem);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--space-2);
}

.header-actions .header-manage {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-1);
  margin-right: var(--space-3);
  font-size: .88rem;
  text-decoration: none;
  white-space: nowrap;
}

.language-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--inverse-soft);
  border-radius: 999px;
  transition: color 180ms ease, background 180ms ease;
}

.language-control svg { width: 1.35rem; height: 1.35rem; flex: none; }

.language-picker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.language-control:focus-within:not([data-pointer]) { outline: .16rem solid currentColor; outline-offset: .15rem; }

.header-actions .header-discord svg { width: 1.2em; height: 1.2em; flex: none; fill: currentColor; }

.section-inner {
  width: min(100%, calc(var(--content) + (2 * var(--gutter))));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  margin: 0 0 var(--space-3);
  color: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 { text-wrap: balance; }

h1 {
  max-width: 12ch;
  margin-bottom: var(--space-4);
  font-size: clamp(3.2rem, 5.6vw, 5.8rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .92;
}

h2 {
  margin-bottom: var(--space-3);
  font-size: clamp(2.4rem, 5vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .98;
}

.lede {
  max-width: 34rem;
  margin-bottom: var(--space-4);
  color: inherit;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.45;
}

.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.15rem;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, color 180ms ease;
}

.button-primary { background: #f7f7f3; color: var(--inverse); }

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .hero-aurora,
  .offer-aurora { display: none; }
}

.proof-visual .proof-take[data-take="dry"] { opacity: 1; z-index: 1; }

.proof-visual .proof-take[data-take="wet"] {
  opacity: 0;
  z-index: 2;
  transition: opacity 220ms ease;
}

.proof-visual[data-active-track="wet"] .proof-take[data-take="wet"] { opacity: 1; }

.proof-visual.is-playing .proof-still { opacity: 0; }

.comparison-player[data-active-track="wet"] .audio-switch::before { transform: translateX(100%); }

html.js-walk .walk-stage {
  position: sticky;
  top: 3vh;
  height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

html.js-walk .walk-focus {
  display: block;
  position: absolute;
  inset: 0;
  clip-path: inset(6% 5% 86% 5%);
  transition: clip-path 260ms cubic-bezier(.32, .9, .3, 1);
}

html.js-walk .walk-count {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  width: fit-content;
  margin-bottom: .6rem;
  padding: .32rem .65rem;
  color: var(--inverse-soft);
  font-size: .72rem;
  letter-spacing: .1em;
  line-height: 1;
  background: rgba(17, 17, 17, .72);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  text-shadow: 0 1px .5rem #000;
}

html.js-walk .walk-count b { color: #f7f7f3; font-weight: 700; }

html.js-walk .walk-steps { display: grid; }

html.js-walk .walk-step {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(.6rem);
  transition: opacity 220ms ease, transform 260ms cubic-bezier(.22, .8, .28, 1);
}

html.js-walk .walk-step.on {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

html.js-walk .walk-marks { display: block; }

.offer .eyebrow { color: var(--inverse-soft); }

.offer .lede { max-width: 32rem; margin-inline: auto; color: var(--inverse-soft); }

.offer-buy {
  min-width: 15rem;
  min-height: 60px;
  padding-inline: 2rem;
  border-radius: 999px;
  font-size: 1rem;
}

.term-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-4);
  width: min(100%, 38rem);
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  padding: clamp(1.5rem, 3vw, 2rem) 0 0;
  border-top: 1px solid rgba(247, 247, 243, .14);
  list-style: none;
  text-align: left;
}

.term-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  color: var(--inverse-soft);
  line-height: 1.45;
}

.offer-license-note {
  width: min(100%, 38rem);
  margin: var(--space-3) auto 0;
  color: var(--inverse-soft);
  font-size: .88rem;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

.license-details summary {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  padding-block: .5rem;
  color: var(--inverse-soft);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(247, 247, 243, .35);
  text-underline-offset: .18em;
}

.license-details summary:focus { outline: none; }

.license-details summary:focus-visible {
  color: #f7f7f3;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.license-details[open] summary { color: #f7f7f3; }

.license-details p { margin: var(--space-2) auto 0; line-height: 1.5; }

footer {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--gutter);
  background: var(--inverse);
  color: #8e8e89;
  font-size: .78rem;
}

footer nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.footer-license a { font-size: .95rem; color: #f7f7f3; }

.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3); }

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(1.2rem); }
  to { opacity: 1; transform: none; }
}

.motion-reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 700ms cubic-bezier(.22, .8, .28, 1),
              transform 700ms cubic-bezier(.22, .8, .28, 1);
}

html.js-reveal .motion-reveal { will-change: opacity, transform; }

.motion-reveal.motion-visible { opacity: 1; transform: none; }

@media (forced-colors: active) {
  * { box-shadow: none !important; }
  .hero,
  .proof,
  .latency,
  .walkthrough,
  .ear,
  .fit,
  .offer,
  footer {
    background: Canvas;
    color: CanvasText;
  }
  .button,
  .chip,
  .walk-frame { border-color: CanvasText; }
  .walk-base { filter: none !important; }
  .lane { border-color: CanvasText; }
  .wire::before, .wire::after, .tip-dot { background: CanvasText !important; }
  .wire-label { background: Canvas; color: CanvasText; }
  .mode-bar i { background: CanvasText; }
}

@media print {
  html { scroll-behavior: auto; }
  body { background: #fff; color: #000; }
  .site-header { position: static; background: #fff; color: #000; }
  .site-header nav,
  .header-actions,
  .walk-focus,
  .walk-box,
  .walk-count,
  .walk-marks { display: none !important; }
  .hero,
  .proof,
  .latency,
  .walkthrough,
  .ear,
  .fit,
  .offer,
  footer { background: #fff; color: #000; }
  .walk-stage { position: static; height: auto; }
  .motion-reveal { opacity: 1; transform: none; }
}

/* =========================================================
   STATE 6 PROTOTYPE — LOW-NOISE FLOW
   Rules under test:
   1) Product gets the cleanest, quietest field.
   2) Human photography appears as an immersive lived moment,
      not as wallpaper behind the product.
   3) Technical sections return to strict graphic restraint.
   4) One locus of attention per viewport.
   ========================================================= */

:root {
  --flow-black: #121110;
  --flow-charcoal: #181716;
  --flow-paper: #f3f2ee;
  --flow-paper-bright: #faf9f6;
}

body { background: var(--flow-paper); }

html.js-walk .walk-base { filter: blur(.1rem) brightness(.42) saturate(.8); }

/* The fold only exists under js-fold, so without the script -- or with
   reduced motion, where it never attaches -- the disclosures keep their
   native open and close. The track carries no padding; the inner element
   clips, so a closed fold collapses to zero. */
html.js-fold .fold-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 250ms cubic-bezier(.22, 1, .36, 1); }

html.js-fold .fold.is-shown .fold-body { grid-template-rows: 1fr; }

html.js-fold .fold-inner { overflow: hidden; opacity: 0; filter: blur(2px); transition: opacity 250ms cubic-bezier(.22, 1, .36, 1), filter 250ms cubic-bezier(.22, 1, .36, 1); }

html.js-fold .fold.is-shown .fold-inner { opacity: 1; filter: blur(0); }