.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .48em;
  min-height: 44px;
  font-weight: 700;
  letter-spacing: -.04em;
  text-decoration: none;
}

.wordmark svg {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
}

.site-header nav a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  color: var(--inverse-soft);
  font-size: .88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease;
}

.header-actions a {
  color: var(--inverse-soft);
  font-size: .88rem;
  text-decoration: none;
  white-space: nowrap;
}

.header-actions .header-buy {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-1);
  margin-right: var(--space-3);
}

.header-actions .header-discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
  background: #5865f2;
  border-radius: 999px;
  transition: background 180ms ease;
}

.transport-play[data-playing="true"] { background: transparent; color: var(--ink); }

html.js-walk .walk-box {
  display: block;
  position: absolute;
  left: 5%;
  top: 6%;
  width: 90%;
  height: 8%;
  border: 1px solid #f7f7f3;
  border-radius: calc(var(--walk-radius) * .65);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 1rem 2.5rem rgba(0, 0, 0, .48);
  transition: left 260ms cubic-bezier(.32, .9, .3, 1),
              top 260ms cubic-bezier(.32, .9, .3, 1),
              width 260ms cubic-bezier(.32, .9, .3, 1),
              height 260ms cubic-bezier(.32, .9, .3, 1);
  pointer-events: none;
}

html.js-walk .walk-copy {
  --walk-copy-inset: clamp(.75rem, 2.4vw, 1.5rem);
  --walk-copy-width: min(28rem, calc(100% - var(--walk-copy-inset) - var(--walk-copy-inset)));
  position: absolute;
  z-index: 1;
  left: clamp(
    var(--walk-copy-inset),
    var(--copy-left, var(--walk-copy-inset)),
    calc(100% - var(--walk-copy-width) - var(--walk-copy-inset))
  );
  top: var(--copy-y, 18%);
  width: var(--walk-copy-width);
  max-width: 100%;
  padding: 0;
  transform: translateY(var(--copy-shift, 0%));
  transition: left 260ms cubic-bezier(.32, .9, .3, 1),
              top 260ms cubic-bezier(.32, .9, .3, 1),
              transform 260ms cubic-bezier(.32, .9, .3, 1);
}

footer a { display: inline-flex; align-items: center; min-height: 44px; }

@media (hover: hover) {
  .button:hover { transform: translateY(-.12rem); box-shadow: 0 .7rem 1.8rem rgba(0, 0, 0, .18); }
  .header-discord:hover { background: #4752c4; color: #fff; }
  .site-header nav a:hover { color: #f7f7f3; }
  .language-control:hover { color: #f7f7f3; background: rgba(247, 247, 243, .08); }
  .button-secondary:hover { border-color: #f7f7f3; background: rgba(247, 247, 243, .1); }
  .button:active { transform: scale(.98); }
  .transport-play:hover { transform: scale(1.07); box-shadow: 0 .65rem 1.5rem rgba(0, 0, 0, .18); }
  .transport-play:active { transform: scale(.96); }
  .audio-switch button:hover:not([aria-pressed="true"]) { color: var(--ink); transform: scale(.985); }
}

@media (max-width: 66rem) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; }
  .site-header nav,
  .header-actions .header-manage { display: none; }
}

@media (max-width: 58rem) {
  .site-header { grid-template-columns: minmax(0, 1fr) auto; }
  .site-header nav { display: none; }
  .hero-grid,
  .proof-heading,
  .audio-stage,
  .latency-head,
  .ear-intro,
  .fit-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid { min-height: auto; }
  .proof-heading, .latency-head { align-items: start; }
  .walk-run { padding-top: var(--space-4); }
  html.js-walk .walk-stage { position: static; height: auto; display: block; }
  .walk-visual { width: 100%; }
  html.js-walk .walk-focus,
  html.js-walk .walk-box,
  html.js-walk .walk-count,
  html.js-walk .walk-marks { display: none; }
  html.js-walk .walk-copy {
    position: static;
    width: 100%;
    max-width: none;
    padding: var(--space-4) 0 0;
    background: transparent;
    transform: none;
  }
  .walk-copy-panel {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  html.js-walk .walk-steps { display: block; }
  html.js-walk .walk-step {
    margin-bottom: var(--space-4);
    padding-block: var(--space-3);
    opacity: 1;
    pointer-events: auto;
    transform: none;
    border-bottom: 1px solid var(--line-dark);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy h1,
  .hero-actions,
  .hero-download-meta,
  .hero-demo-details { animation: none !important; }
  .motion-reveal { opacity: 1 !important; transform: none !important; }
  .button,
  .transport-play,
  .audio-switch button,
  .walk-focus,
  .walk-box,
  .walk-copy,
  .walk-step { transition: none !important; }
}

@media (max-width: 58rem) {
  .proof-visual {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 85vh;
    margin: 0 0 clamp(4rem, 12vw, 6rem);
    border-radius: 0;
    box-shadow: none;
  }
  .proof-visual img,
  .proof-visual video {
    object-position: 50% 30%;
  }
  .comparison-player { padding: 1.5rem; }
  .interlude-visual {
    width: 100%;
    aspect-ratio: 4 / 5;
    margin-top: clamp(2rem, 8vw, 3rem);
    border-radius: 0;
  }
  .ear-photo {
    aspect-ratio: 4 / 5;
    border-radius: 0;
    margin: 0 calc(-1 * var(--gutter));
    width: calc(100% + (2 * var(--gutter)));
  }
  .ear-intro { row-gap: clamp(1.5rem, 5vw, 2.5rem); }
  .ear-photo img { object-position: 68% 30%; }
  .interlude-visual img { object-position: 50% 22%; }
  .finale-visual { height: min(64vh, 30rem); }
  .finale-visual img { object-position: 52% 28%; }
  /* Narrow drops the spotlight, so the dimming that made it readable has
     nothing left to point at. Declared after the filter above, never
     before it, or specificity ties and source order undo this. */
  html.js-walk .walk-base { filter: none; }
}

/* about page only -- long-form text column, nothing else on the page needs it */
.about-hero { padding-block: clamp(4rem, 9vw, 7rem) clamp(2rem, 4vw, 3rem); }

.about-hero h1 { max-width: 16ch; margin: 0 0 1rem;
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -.02em; }

.about-hero .lede { max-width: 46ch; margin: 0; color: var(--ink-soft); font-size: 1.15rem; }

/* 404 page only -- short page, so the main block stretches to keep the
   footer at the bottom, and the primary button needs the dark fill that
   the dark hero supplies on the home page. */
body.not-found { min-height: 100vh; display: flex; flex-direction: column; }

body.not-found main { flex: 1; }

body.not-found .button-primary { background: var(--ink); color: #f7f7f3; }

body.not-found .hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

.about-body { padding-bottom: clamp(4rem, 8vw, 6rem); }