/* WizeCore landing — section paints/spacing aligned to Figma node 725:407 (mobile frame, responsive) */

:root {
  --bg: #121212;
  --bg-soft: #121212;
  /** Features + team bands (Figma `756:227`, `756:148`) */
  --bg-elevated: #1b1b1b;
  /** Waitlist strip — unchanged */
  --tone-strip: #1b1b1b;
  /* Matches `.site-header--scroll` paint height once sync script runs */
  --hero-cta-sticky-top: 92px;
  --text: #dfdfdf;
  --border: #282828;
  --gradient-brand: linear-gradient(
    90deg,
    #fa494c 0%,
    #ffe38e 32.692%,
    #5ed5ef 66.827%,
    #7ee8cc 100%
  );
  --font: 'Barlow', system-ui, -apple-system, sans-serif;
  --content-max: 402px;
  --desktop-min: 960px;
  /** Tone3000 logo rail — caps `.tone__text-column` desktop & `.tone__brand-mask` width */
  --tone-brand-width: 297px;
  /** Desktop split bands — hero / Tone3000 / analog / specs column gutters */
  --desktop-split-column-gap: clamp(48px, 8vw, 116px);
  /** Major vertical padding on bands — Figma `py-[100px]` on features, tone, team, specs */
  --section-pad-y: 100px;
  --radii-btn: 10px;
  /* Wide seamless tile — fewer repeats on wide CTAs (was 200px). Anim shifts one tile per `--btn-waitlist-flow-duration`. */
  --btn-waitlist-flow-period: 720px;
  --btn-waitlist-flow-duration: 8s;
  /** Team wordmark: wider seamless tile than CTA so hues don’t repeat across the wordmark */
  --team-brand-mark-flow-period: 640px;
  --team-brand-mark-flow-duration: 4s;
  --btn-waitlist-glow-duration: 6.5s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1rem;
  background: var(--bg-soft);
  color: var(--text);
  text-decoration: underline;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

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

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

.frame {
  min-height: 100vh;
  overflow-x: clip;
}

.site-header {
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 32px 0;
  background: var(--bg);
  box-sizing: border-box;
}

/** Mobile / hero band — sticks until scrolled; desktop becomes normal flow (see `@media (min-width: 960px)`). */
.site-header--scroll {
  position: sticky;
  top: 0;
  z-index: 50;
}

/** Desktop-only fixed bar — slides in after `.features` begins scrolling past the top (script toggles visibility). */
.site-header--dock {
  display: none;
}

/** Same horizontal rail as `main` / `.features`: `--content-max` + section padding `39px`. */
.site-header__rail {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: 39px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.site-header__cta {
  display: inline-flex;
}

.site-header__logo {
  width: 178.85px;
  height: auto;
}

main {
  max-width: var(--content-max);
  margin: 0 auto;
}

/** Bounds mobile hero CTA `position: sticky` through all content before `#waitlist` (FAQ included). */
.sticky-cta-scope {
  overflow: visible;
}

/* ---------- Hero ---------- */

.hero {
  padding: 0 0 0;
  text-align: center;
  background: var(--bg);
  box-sizing: border-box;
  /** Never taller than the viewport; padding counts inside max (see desktop `padding-bottom`) */
  max-height: 100vh;
  max-height: 100dvh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hero__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.hero__copy-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex: 0 0 auto;
  min-height: 0;
}

.hero__cta-inline {
  display: none;
}

.hero__headline-line {
  display: inline;
}

.hero__headline-strong {
  font-weight: 700;
}

.hero__visual {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow-x: clip;
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  /** Figma `768:100`: 60px between device frame and headline stack */
  margin-bottom: 60px;
}

.hero__visual-inner {
  margin: 0 auto;
  width: 100%;
  max-width: min(560px, calc(100vw - 24px));
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
}

.hero__device {
  margin: 0 auto;
  transform: rotate(6deg);
  transform-origin: center center;
  width: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero__device img,
.hero__device video {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  vertical-align: middle;
}

.hero__device-video {
  display: block;
  background: transparent;
}

.hero__device-fallback {
  display: none;
}

/** Video missing or failed to decode — show poster image only (see index hero script) */
.hero__device--static .hero__device-video {
  display: none !important;
}

.hero__device--static .hero__device-fallback {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hero__device-video {
    display: none !important;
  }

  .hero__device-fallback {
    display: block;
  }
}

.hero__copy {
  width: min(308px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 29px;
}

.hero__brand {
  margin: 0;
  font-size: clamp(26px, 8vw, 32px);
  font-weight: 400;
}

.hero__brand-bold {
  font-weight: 700;
}

.hero__headline {
  margin: 0;
  /** Fixed below desktop; `@media (min-width: 960px)` sets 48px */
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.hero__headline-light {
  font-weight: 400;
}

/** Hero “open platform”: team wordmark shimmer stack; matte matches hero `--bg` (not `--bg-elevated`) */
.hero .team__brand-mark-matte {
  color: var(--bg);
}

/* Direct child of `.sticky-cta-scope` so sticky is bounded by whole pre-waitlist column, not short `.hero__copy`. */
.hero__cta-track {
  position: sticky;
  top: var(--hero-cta-sticky-top);
  z-index: 40;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100vw;
  margin-top: 29px;
  /** Bridge into `.features`; features band keeps `--section-pad-y` */
  margin-bottom: clamp(12px, 3vw, 24px);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 14px 24px 16px;
  /** `#121212` at 50% opacity top → transparent bottom (`--bg`) */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 50%, transparent) 0%,
    color-mix(in srgb, var(--bg) 0%, transparent) 100%
  );
  box-sizing: border-box;
}

/* Collapsed while #waitlist has entered viewport (or scrolled past); scroll synced in index.html. */
.hero__cta-track.hero__cta-track--concealed {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  min-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  background: transparent;
}

.btn-waitlist {
  display: inline-flex;
  text-decoration: none;
  border-radius: calc(var(--radii-btn) + 1px);
  padding: 1px;
  background-color: transparent;
  background-image: linear-gradient(
    90deg,
    #fa494c 0%,
    #ffe38e 20%,
    #5ed5ef 39%,
    #7ee8cc 50%,
    #5ed5ef 61%,
    #ffe38e 81%,
    #fa494c 100%
  );
  background-size: var(--btn-waitlist-flow-period) 100%;
  background-repeat: repeat-x;
  background-position: 0 center;
  animation:
    btn-waitlist-flow-shift var(--btn-waitlist-flow-duration) linear infinite,
    btn-waitlist-glow-behind-mobile var(--btn-waitlist-glow-duration) linear infinite;
  box-sizing: border-box;
}

.btn-waitlist:hover {
  filter: brightness(1.08) saturate(1.06);
}

.btn-waitlist:focus-visible {
  outline: 2px solid #ffe38e;
  outline-offset: 4px;
}

.btn-waitlist__inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 206px;
  padding: 0 18px;
  border-radius: var(--radii-btn);
  /** Solid fill — matches page `#121212`; waitlist strip overrides below */
  background: var(--bg);
}

.waitlist-section .btn-waitlist__inner {
  /** Matches waitlist strip (`--tone-strip` / `--bg-elevated`) */
  background: var(--bg-elevated);
}

.btn-waitlist__label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  background-image: linear-gradient(
    90deg,
    #fa494c 0%,
    #ffe38e 20%,
    #5ed5ef 39%,
    #7ee8cc 50%,
    #5ed5ef 61%,
    #ffe38e 81%,
    #fa494c 100%
  );
  background-size: var(--btn-waitlist-flow-period) 100%;
  background-repeat: repeat-x;
  background-position: 0 center;
  animation: btn-waitlist-flow-shift var(--btn-waitlist-flow-duration) linear infinite;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

button.btn-waitlist {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/** Team + hero wordmarks: brief lead-in (was ~3s idle), same fade/hold/out proportions as original, then tail idle */
@keyframes team-brand-mark-shimmer-opacity {
  0%,
  3% {
    opacity: 0;
  }

  13.5% {
    opacity: 1;
  }

  26.5% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  40.01%,
  100% {
    opacity: 0;
  }
}

@keyframes team-brand-mark-flow-shift {
  0% {
    background-position: 0 center;
  }

  100% {
    background-position: var(--team-brand-mark-flow-period) center;
  }
}

@keyframes btn-waitlist-flow-shift {
  0% {
    background-position: 0 center;
  }

  /*
   * Seamless tile: gradient starts/ends coral; repeat-x shifts one full `--btn-waitlist-flow-period`.
   */
  100% {
    background-position: var(--btn-waitlist-flow-period) center;
  }
}

@keyframes btn-waitlist-glow-behind-mobile {
  /** ~0–62% fade-in to peak; 62–87.5% fade-out; 87.5–100% pause (cycle length: `--btn-waitlist-glow-duration`) */
  0% {
    box-shadow: none;
  }

  12% {
    box-shadow: -12px 0 16px -4px rgba(250, 73, 76, 0.052);
  }

  28% {
    box-shadow: -4px 0 17px -4px rgba(250, 73, 76, 0.13);
  }

  42% {
    box-shadow: 5px 0 17px -4px rgba(255, 227, 142, 0.11);
  }

  52% {
    box-shadow: 9px 0 17px -4px rgba(94, 213, 239, 0.22);
  }

  62% {
    box-shadow: 11px 0 16px -4px rgba(94, 213, 239, 0.28);
  }

  74% {
    box-shadow: 10px 0 14px -4px rgba(94, 213, 239, 0.135);
  }

  82% {
    box-shadow: 9px 0 11px -4px rgba(126, 232, 204, 0.058);
  }

  87% {
    box-shadow: 8px 0 8px -4px rgba(126, 232, 204, 0.026);
  }

  87.5%,
  100% {
    box-shadow: none;
  }
}

@media (min-width: 960px) {
  .btn-waitlist {
    transition: filter 0.45s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-waitlist {
    box-shadow: none !important;
  }

  .btn-waitlist,
  .btn-waitlist__label {
    animation: none;
    background-position: 0 center;
  }

  .btn-waitlist {
    background-image: var(--gradient-brand);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .btn-waitlist__label {
    background-image: var(--gradient-brand);
    background-size: initial;
    background-position: center;
  }

  .team__brand-mark-shimmer,
  .team__brand-mark-matte {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ---------- Features ---------- */

.features {
  /** Figma `756:227`: py 100px, px 39px, `#1b1b1b`, column gap 60px */
  --feature-media-max: 324px;
  position: relative;
  z-index: 2;
  padding: var(--section-pad-y) 39px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  background: transparent;
}

.feature-card {
  width: 100%;
  max-width: var(--feature-media-max);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.feature-card__media {
  position: relative;
  width: 100%;
  max-width: var(--feature-media-max);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: transparent;
}

.feature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  border: 1px solid #dfdfdf;
  box-sizing: border-box;
}

.title-gradient {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
  background-image: var(--gradient-brand);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.feature-card__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: #dfdfdf;
  width: 100%;
  max-width: var(--feature-media-max);
  box-sizing: border-box;
}

.feature-card__text {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  width: 100%;
  max-width: var(--feature-media-max);
  box-sizing: border-box;
}

/* ---------- Tone / partners (Tone3000) ---------- */

.tone {
  /** Logo rail / desktop copy rail — `--tone-brand-width` */
  background-color: #1b1b1b;
  padding-block: 0;
  padding-inline: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.tone__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(1221px, 100%);
  margin-inline: auto;
}

.tone__text-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.tone__text-head,
.tone__text-tail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.tone__visual {
  width: 100%;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.tone__heading {
  margin: 0 auto 33px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  max-width: min(520px, 100%);
  color: var(--text);
}

.tone__brand-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.tone__brand-mask {
  width: min(var(--tone-brand-width), 100%);
  flex-shrink: 0;
}

.tone__brand-mask img {
  width: 100%;
  height: auto;
  display: block;
}

.tone__blurb {
  margin: 0 auto 0;
  font-size: 16px;
  max-width: min(520px, 100%);
  line-height: 1.45;
}

.tone__grid {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0;
  flex-shrink: 0;
  border: none;
  box-sizing: border-box;
  background-color: transparent;
}

.tone__pan {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.tone__pan-img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  pointer-events: none;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .tone__pan-img {
    left: 50%;
    transform: translate3d(-50%, 0, 0);
    will-change: auto;
  }
}

.tone__footnote {
  margin: 0 auto;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  max-width: min(520px, 100%);
}

.tone__link-wrap {
  margin: 1rem auto 0;
}

.tone__link {
  color: var(--text);
  font-size: 16px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(94, 213, 239, 0.55);
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.tone__link:hover {
  color: #5ed5ef;
  text-decoration-color: #7ee8cc;
}

.tone__link:focus-visible {
  outline: 2px solid #ffe38e;
  outline-offset: 2px;
}

/* ---------- Analog mini cards ---------- */

.analog-cards {
  background: #121212;
  padding: var(--section-pad-y) 39px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.analog-cards__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: min(1221px, 100%);
  margin-inline: auto;
}

.analog-cards__visual {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.analog-cards__visual img {
  width: 100%;
  max-width: min(260px, 100%);
  height: auto;
  display: block;
}

.analog-cards__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: min(520px, 100%);
  text-align: center;
}

.analog-cards__title {
  margin: 0;
  font-size: clamp(26px, 6vw, 32px);
  font-weight: 700;
  line-height: 1.2;
}

.analog-cards__title-plain {
  color: var(--text);
}

.analog-cards__title-accent {
  color: #fa494c;
}

.analog-cards__text {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}

.analog-cards__text strong {
  font-weight: 700;
}

@media (max-width: 959px) {
  .tone {
    padding-inline: 0;
  }

  .tone__inner {
    max-width: 100%;
  }

  .tone__text-column {
    display: contents;
  }

  .tone__text-head {
    order: 1;
    padding-top: var(--section-pad-y);
    padding-inline: 39px;
    box-sizing: border-box;
    width: 100%;
  }

  .tone__visual {
    order: 2;
    width: 100%;
  }

  .tone__text-tail {
    order: 3;
    padding-top: clamp(28px, 5vw, 48px);
    padding-bottom: var(--section-pad-y);
    padding-inline: 39px;
    box-sizing: border-box;
    width: 100%;
  }

  .tone__blurb {
    margin-bottom: 48px;
  }

  .tone__grid {
    width: 100%;
    max-width: none;
    margin-block: 0;
    margin-inline: auto;
    border-radius: 0;
    border: none;
  }
}

/* ---------- Team + accelerators ---------- */

.team {
  /** Figma `756:148`: `#1b1b1b`, py 100px, px 56px */
  /** Prev/next + gaps + avatar — bio copy rail matches carousel row width */
  --team-carousel-track: calc(32px + 26px + 130px + 26px + 32px);
  padding: var(--section-pad-y) 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: var(--bg-elevated);
}

.team__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  width: 100%;
}

.team__carousel-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.team__header {
  text-align: center;
  max-width: 218px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  overflow: visible;
}

.team__lead {
  margin: 0;
  font-size: 24px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.team__brand-mark {
  margin: 0;
  flex: none;
  order: 1;
  flex-grow: 0;
  align-self: center;
  box-sizing: border-box;
  font-family: inherit;
  font-size: clamp(36px, 11vw + 8px, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-align: center;
}

.team__brand-mark-stack {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: nowrap;
  /** Grayscale AA + own layer: cuts subpixel fringes where gradient clips to glyphs */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  isolation: isolate;
}

/** Gradient + matte apply only here — “?” stays solid `.team__brand-mark-q` */
.team__brand-mark-word-slot {
  position: relative;
  display: inline-block;
}

.team__brand-mark-base {
  color: var(--text);
  transform: translateZ(0);
}

.team__brand-mark-base,
.team__brand-mark-matte,
.team__brand-mark-shimmer {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/**
 * Gradient fringe composites against `.team__brand-mark-base` (#dfdfdf) → pale halo.
 * Matte copies glyphs in `--bg-elevated`, fades with the same opacity curve as the shimmer,
 * so AA fringe blends against the band color instead of the light base.
 */
.team__brand-mark-matte {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  color: var(--bg-elevated);
  opacity: 0;
  transform: translateZ(0);
  animation: team-brand-mark-shimmer-opacity 9.5s ease-in-out infinite;
}

.team__brand-mark-shimmer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
  transform: translateZ(0);
  backface-visibility: hidden;
  /** Same hue rhythm as CTA tile, stretched across `--team-brand-mark-flow-period` */
  background-image: linear-gradient(
    90deg,
    #fa494c 0%,
    #ffe38e 20%,
    #5ed5ef 39%,
    #7ee8cc 50%,
    #5ed5ef 61%,
    #ffe38e 81%,
    #fa494c 100%
  );
  background-size: var(--team-brand-mark-flow-period) 100%;
  background-repeat: repeat-x;
  background-position: 0 center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  animation:
    team-brand-mark-flow-shift var(--team-brand-mark-flow-duration) linear infinite,
    team-brand-mark-shimmer-opacity 9.5s ease-in-out infinite;
}

.team__brand-mark-wize {
  font-weight: 700;
}

.team__brand-mark-mice,
.team__brand-mark-q {
  font-weight: 400;
}

.team__card {
  width: min(294px, 100%);
  text-align: center;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.team__slides {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.team__avatar {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.team__portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 0.42s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 0.42s cubic-bezier(0.25, 0.1, 0.25, 1);
  pointer-events: none;
  will-change: opacity, transform;
}

.team__portrait--visible {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .team__portrait {
    transition: opacity 0.16s linear, transform none;
  }
}

.team__bio {
  text-align: center;
  width: 100%;
  max-width: var(--team-carousel-track);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  /** Reserve envelope for role + tagline; name uses natural height (1–2 lines when wrapping) */
  min-height: calc(1.18em + 1px + 2 * 1.35em + 8px + 4.25rem);
  contain: layout;
}

.team__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 100%;
}

.team__name {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.18;
  max-width: 100%;
}

.team__role {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  max-width: 100%;
  /** ~2 lines (CTO wrap); avoids a tall empty band under single-line titles */
  min-height: calc(2 * 1.35em);
}

.team__tagline {
  margin: 8px 0 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: rgba(223, 223, 223, 0.72);
}

.team__nav {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.team__nav:focus-visible {
  outline: 2px solid #ffe38e;
  outline-offset: 2px;
  border-radius: 4px;
}

.team__pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: -6px 0 0;
  padding: 0;
}

.team__dot {
  appearance: none;
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: #3f3f3f;
  cursor: pointer;
  box-sizing: content-box;
}

.team__dot--active {
  background: #1ecea1;
}

.team__dot:focus-visible {
  outline: 2px solid #ffe38e;
  outline-offset: 6px;
  border-radius: 50%;
}

.accelerators {
  /** Figma `793:406`: column, 19px gap, label + logo row centered */
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 19px;
  width: 100%;
}

.accelerators__label {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  color: var(--text);
  width: 100%;
  max-width: none;
}

.accelerators__logos {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 36px;
  width: auto;
  max-width: none;
}

.accelerators__logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
  color: inherit;
}

.accelerators__logo-link:focus-visible {
  outline: 2px solid #ffe38e;
  outline-offset: 4px;
  border-radius: 4px;
}

.accel-shd-logo {
  flex-shrink: 0;
  width: 82px;
  height: auto;
  display: block;
}

.accel-wavelab {
  flex-shrink: 0;
  width: 109px;
  height: auto;
  display: block;
}

/* ---------- Specifications ---------- */

.specs {
  /** Figma `756:190`: py 100px, px 33px */
  padding: var(--section-pad-y) 33px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  background: var(--bg);
}

.specs__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
}

.specs__art {
  width: 100%;
  max-width: 315px;
}

.specs__art img {
  width: 100%;
  border-radius: 4px;
}

.specs__intro {
  text-align: center;
  width: min(211px, 100%);
}

.specs__title {
  margin: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
}

.specs__title-wize {
  font-weight: 700;
}

.specs__title-core {
  font-weight: 400;
}

.specs__subtitle {
  margin: 7px 0 0;
  font-size: 16px;
  font-weight: 400;
}

.specs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 315px;
}

.specs__list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15em;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  min-height: 42px;
  padding: 7px 18px;
  font-size: 16px;
  line-height: 1.28;
  text-align: center;
  border: 2px solid var(--border);
  margin-top: -2px;
}

.specs__list li:first-child {
  margin-top: 0;
}

.specs__list .qty {
  font-weight: 700;
  margin-right: 0;
}



/* ---------- FAQ ---------- */

.faq {
  padding: var(--section-pad-y) 33px calc(var(--section-pad-y) + 12px);
  background: var(--bg);
}

.faq__inner {
  width: 100%;
  max-width: min(720px, 100%);
  margin-inline: auto;
}

.faq__head {
  margin-bottom: 28px;
  text-align: center;
}

.faq__title {
  margin: 0;
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

.faq__title-wize {
  font-weight: 700;
}

.faq__title-core {
  font-weight: 400;
}

.faq__title-tag {
  font-weight: 400;
}

.faq__accordion {
  display: flex;
  flex-direction: column;
}

.faq__stack {
  display: flex;
  flex-direction: column;
}

.faq__expand {
  margin: 0;
  padding: 0;
  border: none;
}

.faq__expand-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  text-align: left;
}

.faq__expand-summary::-webkit-details-marker {
  display: none;
}

.faq__expand-summary::after {
  content: '';
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 0.35em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.65;
  transition: transform 0.22s ease;
}

.faq__expand[open] .faq__expand-summary {
  display: none;
}

.faq__expand-summary:focus-visible {
  outline: 2px solid #ffe38e;
  outline-offset: 4px;
  border-radius: 4px;
}

.faq__expand[open] .faq__accordion--more {
  border-top: 1px solid var(--border);
}

.faq__expand[open] .faq__accordion--more > .faq__item:first-of-type {
  border-top: none;
}

.faq__show-less {
  width: 100%;
  margin: 0;
  padding: 18px 0;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
}

.faq__show-less:focus-visible {
  outline: 2px solid #ffe38e;
  outline-offset: 4px;
  border-radius: 4px;
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__item:first-of-type {
  border-top: 1px solid var(--border);
}

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
  cursor: pointer;
  list-style: none;
  text-align: left;
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question::after {
  content: '';
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin-top: 0.35em;
  border-right: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
  transform: rotate(45deg);
  opacity: 0.65;
  transition: transform 0.22s ease;
}

.faq__item[open] .faq__question::after {
  transform: rotate(-135deg);
  margin-top: 0.55em;
}

.faq__question:focus-visible {
  outline: 2px solid #ffe38e;
  outline-offset: 4px;
}

.faq__answer {
  padding: 0 0 22px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}

.faq__answer p {
  margin: 0 0 14px;
}

.faq__answer p:last-child {
  margin-bottom: 0;
}

.faq__bullets {
  margin: 0 0 14px;
  padding-left: 1.25em;
}

.faq__bullets li {
  margin-bottom: 6px;
}

.faq__bullets li:last-child {
  margin-bottom: 0;
}


/* ---------- Waitlist form ---------- */

.waitlist-section {
  padding: var(--section-pad-y) 24px var(--section-pad-y);
  text-align: center;
  background: var(--tone-strip);
  scroll-margin-top: calc(var(--hero-cta-sticky-top) + var(--section-pad-y));
  overflow: visible;
}

.waitlist-section__head {
  margin-bottom: 32px;
}

.waitlist-section__title {
  margin: 0 0 14px;
  font-size: clamp(26px, 6vw, 32px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--text);
}

.waitlist-section__lead {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: #c6c6c6;
}

.waitlist-form {
  margin: 0 auto;
  max-width: 315px;
  width: 100%;
  overflow: visible;
}

.waitlist-form__fields {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  overflow: visible;
}

.waitlist-form__label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  text-align: left;
  width: 100%;
}

.waitlist-form__label-text {
  font-size: 16px;
  font-weight: 400;
  color: #dcdcdc;
}

.waitlist-form__required,
.waitlist-form__optional {
  font-weight: 400;
  opacity: 0.65;
  font-size: 0.9em;
}

.waitlist-form__input {
  width: 100%;
  padding: 10px 0 12px;
  border: none;
  border-bottom: 2px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 18px;
}

.waitlist-form__input:focus {
  outline: none;
  border-bottom-color: #5ed5ef;
}

.waitlist-form__input::placeholder {
  opacity: 0.35;
}

.waitlist-form__error {
  margin: -8px 0 0;
  padding: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: #fa9496;
}

.waitlist-form__roles {
  width: 100%;
  position: relative;
}

.waitlist-form__roles-trigger {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 28px 12px 0;
  border: none;
  border-bottom: 2px solid var(--border);
  border-radius: 0;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239a9a9a' d='M6 8 .5 0h11z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px top 18px;
  color: var(--text);
  font-family: inherit;
  font-size: 18px;
  line-height: 1.35;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  min-height: 44px;
}

.waitlist-form__roles-trigger:focus {
  outline: none;
  border-bottom-color: #5ed5ef;
}

.waitlist-form__roles-trigger:focus-visible {
  outline: none;
  border-bottom-color: #5ed5ef;
}

.waitlist-form__roles-trigger-text {
  flex: 1;
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  white-space: normal;
}

.waitlist-form__roles-trigger--empty .waitlist-form__roles-trigger-text {
  opacity: 0.65;
}

.waitlist-form__roles-trigger--multiple .waitlist-form__roles-trigger-text {
  font-weight: 600;
}

.waitlist-form__roles-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 14px);
  bottom: auto;
  margin-top: 0;
  padding: 14px 14px 16px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(27, 27, 27, 0.95);
  box-sizing: border-box;
  z-index: 55;
}

.waitlist-form__roles-panel--flip-up {
  top: auto;
  bottom: calc(100% + 14px);
}

.waitlist-form__roles-fieldset {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.waitlist-form__roles-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text);
  cursor: pointer;
}

.waitlist-form__roles-option:last-of-type {
  margin-bottom: 0;
}

.waitlist-form__roles-option input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex-shrink: 0;
  accent-color: #5ed5ef;
  cursor: pointer;
}

.waitlist-form__roles-option span {
  flex: 1;
  min-width: 0;
}

.waitlist-form__roles-done {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 12px 16px;
  border: 2px solid var(--border);
  border-radius: var(--radii-btn);
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-sizing: border-box;
}

.waitlist-form__roles-done:hover {
  border-color: #5ed5ef;
  color: #e8e8e8;
}

.waitlist-form__roles-done:focus-visible {
  outline: 2px solid #ffe38e;
  outline-offset: 3px;
}

.waitlist-form__other-wrap .waitlist-form__label {
  gap: 8px;
}

.waitlist-form .btn-waitlist {
  align-self: center;
  margin-top: 22px;
}

.waitlist-section__success {
  max-width: 315px;
  margin: 0 auto;
  outline: none;
}

.waitlist-section__success:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(255, 227, 142, 0.35);
}

.waitlist-section__success-title {
  margin: 0 0 10px;
  font-size: clamp(26px, 6vw, 32px);
  font-weight: 700;
  color: var(--text);
}

.waitlist-section__success-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
  color: #bdbdbd;
}

.waitlist-form__consent {
  margin: -4px 0 2px;
  text-align: left;
}

.waitlist-form__consent-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: #a8a8a8;
}

.waitlist-form__consent-label input[type='checkbox'] {
  margin: 4px 0 0;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: #5ed5ef;
  cursor: pointer;
}

.waitlist-form__consent-label a {
  color: #8fd4e8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.waitlist-form__consent-label a:hover {
  color: #b8e8f5;
}

.waitlist-form__consent-label .waitlist-form__required {
  white-space: nowrap;
}

/* ---------- Legal / privacy page ---------- */

.legal-page__header .legal-page__logo-link {
  display: inline-flex;
  color: inherit;
  text-decoration: none;
}

.legal-page__header .legal-page__logo-link:focus-visible {
  outline: 2px solid rgba(255, 227, 142, 0.45);
  outline-offset: 6px;
  border-radius: 4px;
}

.legal-page {
  padding: 48px 24px 80px;
  max-width: min(640px, 100%);
  margin: 0 auto;
}

.legal-prose {
  color: var(--text);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 400;
}

.legal-prose__title {
  margin: 0 0 10px;
  font-size: clamp(28px, 5vw, 36px);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.legal-prose__meta {
  margin: 0 0 28px;
  font-size: 14px;
  color: #8a8a8a;
}

.legal-prose p {
  margin: 0 0 1em;
}

.legal-prose p:last-child {
  margin-bottom: 0;
}

.legal-prose ul {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

.legal-prose li {
  margin-bottom: 0.35em;
}

.legal-prose li:last-child {
  margin-bottom: 0;
}

.legal-prose__h2 {
  margin: 2em 0 0.65em;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
}

.legal-prose__h2:first-of-type {
  margin-top: 1.25em;
}

.legal-prose a {
  color: #8fd4e8;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-prose a:hover {
  color: #b8e8f5;
}

.legal-prose__back {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.legal-prose__back a {
  font-weight: 600;
}

.legal-page__footer.site-footer {
  margin-top: auto;
}

.frame:has(main.legal-page) {
  display: flex;
  flex-direction: column;
}

.frame:has(main.legal-page) main.legal-page {
  flex: 1 1 auto;
}

@media (min-width: 960px) {
  .legal-page {
    padding-top: 64px;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 0;
  padding: 72px 28px 56px;
  background: #0f0f0f;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-footer__inner {
  margin: 0 auto;
  max-width: min(402px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.site-footer__copyright {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #6e6e6e;
}

.site-footer__legal {
  margin: -4px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
}

.site-footer__legal a {
  font-size: 13px;
  line-height: 1.45;
  color: #6e6e6e;
  text-decoration: none;
}

.site-footer__legal a:hover {
  color: #9a9a9a;
  text-decoration: underline;
}

.site-footer__legal a:focus-visible {
  outline: 2px solid rgba(255, 227, 142, 0.45);
  outline-offset: 3px;
  border-radius: 4px;
}

.site-footer__legal a[aria-current='page'] {
  color: #8f8f8f;
  font-weight: 600;
}

.site-footer__contact-block {
  margin: 0;
}

.site-footer__contact-label {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5f5f5f;
}

.site-footer__email-line {
  margin: 0;
  font-size: 13px;
  color: #6e6e6e;
}

.site-footer__email-line a {
  color: #8f8f8f;
  text-decoration: none;
}

.site-footer__email-line a:hover {
  color: #b5b5b5;
  text-decoration: underline;
}

.site-footer__social {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

.site-footer__social-link {
  display: flex;
  color: #6e6e6e;
}

.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  color: #ababab;
}

.site-footer__social-link:focus-visible {
  outline: 2px solid rgba(255, 227, 142, 0.45);
  outline-offset: 4px;
  border-radius: 4px;
}

.site-footer__icon {
  width: 22px;
  height: 22px;
  display: block;
}

/** Mobile-only: dock hidden; hero bands centered in column; accelerators rhythm */
@media (max-width: 959px) {
  .accelerators {
    margin-top: 29px;
  }

  .site-header--dock {
    display: none !important;
  }

  .site-header--scroll {
    justify-content: center;
    align-items: stretch;
    min-height: 0;
    padding: 32px 0;
  }

  .site-header__logo {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    transition: none !important;
    width: 178.85px !important;
    margin: 0;
  }

  /** Hero image: stay in column + remove tilt so layout centers reliably */
  .hero__visual {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-inline: clamp(12px, 5vw, 28px);
    box-sizing: border-box;
  }

  .hero__visual-inner {
    width: 100%;
    max-width: min(400px, 100%);
    margin-inline: auto;
  }

  .hero__device {
    transform: none;
    width: 100%;
    max-width: min(340px, 90vw);
    margin-inline: auto;
  }

  .hero__device img,
  .hero__device video {
    width: 100%;
    height: auto;
    margin-inline: auto;
  }
}

/* ---------- Desktop — Figma node `762:432` ---------- */

@media (min-width: 960px) {
  main {
    max-width: none;
  }

  .sticky-cta-scope {
    max-width: min(1221px, calc(100vw - 48px));
    margin-inline: auto;
  }

  /** Sticky hero CTA hidden; inline hero CTA replaces sticky rail */
  .hero__cta-track {
    display: none !important;
  }

  .hero__cta-inline {
    display: block;
  }

  .hero__layout {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    /** Same inter-column rhythm as Tone3000 + specifications desktop */
    gap: var(--desktop-split-column-gap);
    max-width: min(1120px, calc(100vw - 48px));
    margin-inline: auto;
    padding-top: clamp(24px, 4vw, 57px);
  }

  .hero {
    padding-bottom: var(--section-pad-y);
  }

  .hero__headline-gap {
    display: none;
  }

  .hero__visual {
    width: auto;
    flex: 1 1 min(498px, 46vw);
    min-width: 0;
    margin-left: 0;
    margin-bottom: 0;
    padding-top: 0;
    max-height: 100%;
    justify-content: center;
    align-items: stretch;
  }

  .hero__visual-inner {
    max-width: none;
    width: 100%;
    height: 100%;
  }

  .hero__device {
    transform: none;
  }

  .hero__copy-block {
    flex: 0 1 454px;
    align-items: flex-start;
    gap: 44px;
    justify-content: center;
    min-width: 0;
    min-height: 0;
  }

  .hero__copy {
    margin: 0;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: 454px;
    gap: 44px;
  }

  .hero__brand {
    font-size: 32px;
  }

  .hero__headline {
    font-size: 48px;
    line-height: 1.08;
    text-align: left;
    width: 100%;
    letter-spacing: 0;
  }

  .hero__headline-line {
    display: block;
  }

  .hero__headline-line--2 {
    margin-top: 0.06em;
  }

  /* Desktop headers: scroll-away centered banner + fixed dock after features band scrolls up */
  .site-header--scroll {
    position: static;
    z-index: 0;
    justify-content: center;
    align-items: stretch;
    min-height: 131px;
    padding: 33px 0;
    box-sizing: border-box;
  }

  .site-header--scroll .site-header__rail {
    position: relative;
    width: 100%;
    max-width: min(1221px, calc(100vw - 48px));
    margin-inline: auto;
    padding-inline: 39px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0;
  }

  .site-header--scroll .site-header__logo {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    width: 178.85px;
    transition: none;
  }

  .site-header--dock {
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 131px;
    padding: 33px 0;
    box-sizing: border-box;
    z-index: 60;
    background: var(--bg);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 0.42s cubic-bezier(0.33, 1, 0.68, 1),
      opacity 0.35s ease;
  }

  .site-header--dock.site-header--dock-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-header--dock .site-header__rail {
    position: relative;
    flex: 0 1 auto;
    align-self: stretch;
    width: 100%;
    max-width: min(1221px, calc(100vw - 48px));
    margin-inline: auto;
    padding-inline: 0;
    display: block;
    min-height: 0;
  }

  .site-header--dock .site-header__cta {
    display: inline-flex;
    position: absolute;
    top: 50%;
    right: 39px;
    transform: translateY(-50%);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .site-header--dock .site-header__logo {
    position: absolute;
    left: 39px;
    top: 50%;
    transform: translateY(-50%);
    width: 178.85px;
    transition: none;
  }

  /* Desktop CTAs use default `.btn-waitlist__inner` / `__label` sizing (same as mobile). */

  .features {
    padding-top: clamp(48px, 6vw, 80px);
    padding-bottom: clamp(96px, 12vw, 160px);
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(24px, 3vw, 40px);
    max-width: min(1221px, calc(100vw - 48px));
    margin-inline: auto;
  }

  .feature-card {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
  }

  /* Tone3000 — Figma `862:72`: full-height image flush left, copy column padded & centered */
  .tone {
    align-items: stretch;
    padding-block: 0;
    padding-left: 0;
    padding-right: clamp(24px, 3vw, 39px);
  }

  .tone__inner {
    display: grid;
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
    grid-template-rows: minmax(0, 1fr);
    column-gap: 0;
    align-items: stretch;
    justify-items: stretch;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    min-height: 0;
  }

  .tone__visual {
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: none;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    overflow: hidden;
  }

  .tone__grid {
    position: relative;
    flex: 1 1 auto;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    aspect-ratio: unset;
    overflow: hidden;
    border-radius: 0;
    border: none;
    box-sizing: border-box;
    background-color: transparent;
  }

  .tone__text-column {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding-block: clamp(48px, 8vw, 112px);
    padding-inline: clamp(32px, 7vw, 112px);
    align-items: center;
    text-align: center;
    gap: clamp(36px, 5vw, 59px);
    justify-content: center;
  }

  .tone__text-head,
  .tone__text-tail {
    align-items: center;
    text-align: center;
  }

  .tone__brand-wrap {
    justify-content: center;
    margin-bottom: 28px;
  }

  .tone__heading {
    margin: 0 0 33px;
    max-width: min(349px, 100%);
    font-size: 24px;
    line-height: 1.35;
    font-weight: 400;
  }

  .tone__blurb {
    margin: 0;
    max-width: min(349px, 100%);
    margin-inline: auto;
  }

  .tone__footnote {
    margin: 0;
    max-width: min(349px, 100%);
    margin-inline: auto;
  }

  .tone__link-wrap {
    margin: 1rem auto 0;
  }

  .analog-cards {
    padding-top: clamp(88px, 11vw, 160px);
    padding-bottom: clamp(88px, 11vw, 160px);
    max-width: min(1221px, calc(100vw - 48px));
    margin-inline: auto;
  }

  .analog-cards__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--desktop-split-column-gap);
    max-width: none;
  }

  /** Illustration rail — Tone3000 left column is now fluid half-width */
  .analog-cards__visual {
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    width: min(460px, 100%);
  }

  .analog-cards__copy {
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    align-items: flex-start;
    align-self: center;
    text-align: left;
    /** Same max rail as `.tone__text-column` desktop */
    max-width: min(var(--tone-brand-width), 100%);
    gap: 18px;
  }

  .analog-cards__title {
    font-size: clamp(28px, 2.5vw, 36px);
    text-align: left;
  }

  .team__wrap {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: clamp(48px, 8vw, 125px);
    row-gap: 34px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: min(1100px, calc(100vw - 48px));
    margin-inline: auto;
  }

  .team__header {
    grid-column: 1;
    grid-row: 1;
    text-align: center;
    align-self: center;
    max-width: 292px;
    justify-self: center;
    align-items: center;
  }

  .accelerators {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    margin-top: 0;
    align-items: center;
    justify-self: center;
    width: auto;
  }

  .accelerators__label {
    text-align: center;
    max-width: none;
  }

  .accelerators__logos {
    justify-content: center;
    flex-wrap: nowrap;
  }

  .team__carousel-wrap {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: auto;
  }

  .team__brand-mark {
    font-size: clamp(40px, 4vw + 28px, 56px);
    width: auto;
    max-width: 100%;
    align-self: center;
  }

  .specs {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: var(--desktop-split-column-gap);
    max-width: min(1221px, calc(100vw - 48px));
    margin-inline: auto;
  }

  .specs__aside {
    gap: 32px;
    align-items: stretch;
    flex: 0 1 auto;
    width: auto;
    margin-top: 0;
  }

  .specs__intro {
    text-align: center;
    width: min(315px, 100%);
    align-self: center;
  }

  .specs__list {
    flex: 0 1 auto;
    align-self: center;
  }

  .specs__art {
    flex: 0 1 min(468px, 42vw);
    max-width: none;
    align-self: flex-start;
    display: flex;
    align-items: center;
    justify-content: center;
    /** Explicit height so `%`/contain sizing resolves; matches `.specs__aside` via `--specs-aside-height` */
    height: var(--specs-aside-height);
    min-height: 0;
    overflow: visible;
  }

  .specs__art img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    border-radius: 4px;
  }

  .faq {
    box-sizing: border-box;
    max-width: min(1221px, calc(100vw - 48px));
    margin-inline: auto;
    padding-block: clamp(48px, 6vw, 80px);
    padding-inline: 39px;
  }

  .faq__inner {
    max-width: min(760px, 100%);
  }

  /** Same inset rail + rhythm as `.features` / elevated bands */
  .waitlist-section {
    box-sizing: border-box;
    max-width: min(1221px, calc(100vw - 48px));
    margin-inline: auto;
    padding-block: clamp(48px, 6vw, 80px);
    padding-inline: 39px;
    background: var(--bg-elevated);
  }
}

@media (min-width: 960px) and (prefers-reduced-motion: reduce) {
  .site-header__logo,
  .site-header__cta {
    transition: none !important;
  }

  .site-header--dock {
    transition: none !important;
  }
}

@media (min-width: 480px) {
  :root {
    --content-max: min(422px, 100vw - 32px);
  }
}