/* Responsive: tablet layout + tokens at max-width 1136px; mobile at max-width 800px. */

/* Polymath Demo brand font (licensed; loaded locally) */
@font-face {
  font-family: "Polymath Demo";
  src: url("./PolymathDemo-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Polymath Demo";
  src: url("./PolymathDemo-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Figma file LrmTk… node 182:9473 — brand / foreground tokens */
  --color-orange: #ffb077;
  --color-purple: #ccaccc;
  --color-olive: #9e9a70;
  --color-cream: #f4f1f5;
  /* Slider step copy on low-contrast (Figma --cream #f4f6f4) */
  --color-cream-alt: #f4f6f4;
  --color-black: #29212c;
  --color-black-10: #382d3c;
  --color-black-20: #342f36;
  --color-black-30: #65516d;
  /* Narrative olive block (Figma purple naming) */
  --color-purple-20: #382d3c;
  /* purple-20 @ 80% — default headline colour before scroll completes */
  --color-purple-20-80: rgb(56 45 60 / 0.8);
  --color-black-65: #b5a5bc;
  --color-splitline: #4f4055;
  --color-fg-primary: #f4f1f5;
  /* Inverse (#29212c) at 50% — narrative default on olive */
  --color-fg-inverse-50: rgb(41 33 44 / 0.5);
  --color-fg-secondary: #b5a5bc;
  --color-fg-tertiary: #65516d;
  --color-fg-ghost: #4f4055;
  --color-fg-inverse: #29212c;
  --radius-medium: 24px;
  --radius-large: 36px;

  --space-1: 4px;
  --space-3: 12px;
  --space-4: 16px;

  --menu-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Hero chain (timings aligned to design; form delay set in JS to end with paragraph) */
  --hero-headline-anim-duration: 0.8s;
  --hero-headline-word1-delay: 0.2s;
  --hero-headline-word2-delay: 0.5s;
  --hero-headline-word3-delay: 0.8s;
  --hero-headline-word4-delay: 1.1s;
  --hero-headline-word5-delay: 1.4s;
  --hero-accent-delay: 1.9s;
  --hero-accent-line-ms: 300ms;
  --hero-copy-start-delay: 1.9s;
  --hero-copy-char-duration: 0.4s;
  --hero-copy-char-step: 20ms;
  --hero-form-fade-duration: 0.8s;
  --hero-form-fade-delay: 0ms;
  --hero-pointer-delay: 0ms;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-11: 160px;
  --space-12: 240px;
  --space-13: 360px;

  /* Page grid: 1008px max, 12 columns, 64px gutters (see .page-grid-inner) */
  --content-max: 1008px;
  --page-grid-columns: 12;
  --page-grid-gutter: var(--space-8);
  /* Fixed 64px left/right page gutters (whole page) */
  --page-margin-min: 20px;
  --page-padding-inline: var(--space-8);
  /* JS binary-search bounds for two-line hero title — Figma 148px cap */
  --hero-title-fit-min: 28;
  --hero-title-fit-max: 148;

  --page-margin: var(--space-8);

  /* Logo → “Own your proof”: 64px at ≥1728px viewport, scales as 64/1728 */
  --logo-headline-gap: clamp(18px, calc(100vw * 64 / 1728), 64px);

  /* Headline → accent → messaging / paragraph → email: 96px at ≥1728px, scales as 96/1728 */
  --hero-stack-gap: clamp(24px, calc(100vw * 96 / 1728), 96px);

  --font-brand: "Polymath Demo", system-ui, sans-serif;

  /* Type scale — design system (Desktop; tablet ≤1136px; mobile ≤800px in @media) */
  --display-xl-size: 224px;
  --display-xl-line-height: 224px;
  --display-xl-letter-spacing: -4px;

  --display-l-size: 107px;
  --display-l-line-height: 108px;
  --display-l-letter-spacing: -4px;

  --display-m-size: 85px;
  --display-m-line-height: 88px;
  --display-m-letter-spacing: -3px;

  --heading-l-size: 83px;
  --heading-l-line-height: 100px;
  --heading-l-letter-spacing: -2px;

  /* “Heading M” row — marquee / large subheads */
  --heading-xl-size: 69px;
  --heading-xl-line-height: 80px;
  --heading-xl-letter-spacing: -2px;

  --heading-m-size: 69px;
  --heading-m-line-height: 80px;
  --heading-m-letter-spacing: -2px;

  --body-bold-size: 48px;
  --body-bold-line-height: 68px;
  --body-bold-letter-spacing: -1px;

  --body-xl-size: 40px;
  --body-xl-line-height: 60px;
  --body-xl-letter-spacing: 0px;

  --body-l-size: 28px;
  --body-l-line-height: 44px;
  --body-l-letter-spacing: 0px;

  --body-m-size: 23px;
  --body-m-line-height: 36px;
  --body-m-letter-spacing: 0px;

  /* Body S — nav, placeholders, labels */
  --body-s-size: 16px;
  --body-s-line-height: 24px;
  --body-s-letter-spacing: 0px;

  /* UI text (footer nav, legal, small inputs): 16px */
  --ui-size: 16px;
  --ui-line-height: 24px;

  --button-l-size: 23px;
  --button-l-line-height: 24px;
  --button-l-letter-spacing: 0px;
  /* text-button-m: Bold 16 / 24 / -1 */
  --button-m-letter-spacing: -1px;
  --button-s-size: 16px;
  --button-s-line-height: 20px;
  --button-s-letter-spacing: 0px;

  /* Problem section — JS wheel total after scroll lock */
  --problem-wheel-total: 960;
}

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

html {
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--color-black-10);
  color: var(--color-cream);
  font-family: var(--font-brand);
}

.page {
  position: relative;
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  background: var(--color-black-10);
  /* Avoid browser scroll anchoring nudging scroll when layout above the viewport changes */
  overflow-anchor: none;
}

/* 12×64px grid inside 1008px — children default to full span */
.hero-inner,
.problem-inner,
.narrative-inner,
.how-it-works__inner,
.pre-footer-cards__inner,
.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(var(--page-grid-columns), minmax(0, 1fr));
  column-gap: var(--page-grid-gutter);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  box-sizing: border-box;
}

.hero-inner > *,
.problem-inner > *,
.narrative-inner > *,
.how-it-works__inner > *,
.pre-footer-cards__inner > *,
.site-footer__inner > * {
  grid-column: 1 / -1;
}

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

/* ─── Sticky site header — Figma 182:9475 (inset bar) ───────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1990;
  /* Figma 182:9475 — header band 96px */
  height: 96px;
  isolation: isolate;
  background: transparent;
  border-bottom: 0;
}

/* Shell: frosted bar; content gutters live on .site-header__inner */
.site-header__shell {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-inline: 0;
}

.site-header__bar {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  /* Same horizontal inset as page sections */
  padding-inline: var(--page-padding-inline);
  border-radius: 0;
  background: rgb(41 33 44 / 0.70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Same centering as .hero-inner */
.site-header__inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-8);
  min-height: 0;
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

/* Header actions cluster: Sign In + Join Waitlist, anchored right */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex-shrink: 0;
}

.site-header__cta {
  margin-left: 0;
  flex-shrink: 0;
}

/* Sign In: outlined button, secondary to the orange CTA */
.site-header__signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-cream);
  border-radius: var(--radius-medium);
  background: transparent;
  color: var(--color-cream);
  font-family: var(--font-brand);
  font-size: var(--button-s-size);
  font-weight: 700;
  line-height: var(--button-s-line-height);
  letter-spacing: var(--button-s-letter-spacing);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.site-header__signin:hover {
  background: var(--color-cream);
  color: var(--color-black);
}

.site-header__signin:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 2px;
}

/* Figma 182:9479 — wordmark ~75×16 in header */
.site-header__mobile-start {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.site-header__menu-btn {
  display: none; /* hidden on desktop; shown on mobile */
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-fg-primary);
  cursor: pointer;
}

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

.site-header__logo {
  flex-shrink: 0;
  width: auto;
  height: 16px;
  object-fit: contain;
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.site-header__nav a {
  color: var(--color-fg-secondary);
  font-family: var(--font-brand);
  /* Figma Body S on nav: 16px / 24 (matches --ui-size) */
  font-size: var(--ui-size);
  font-weight: 400;
  line-height: var(--ui-line-height);
  letter-spacing: var(--body-s-letter-spacing);
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
  color: var(--color-fg-primary);
}


/* ─── Mobile navigation drawer ────────────────────────────────────────────── */
.mobile-nav {
  display: none; /* only shown via JS open class on mobile */
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}

.mobile-nav--open {
  pointer-events: auto;
}

.mobile-nav__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-black);
  transform: translateX(-100%);
  transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  overflow-y: auto;
}

.mobile-nav--open .mobile-nav__panel {
  transform: translateX(0);
}

/* Top bar mirrors the site header */
.mobile-nav__top {
  display: flex;
  align-items: center;
  height: 96px;
  flex-shrink: 0;
  padding-inline: var(--page-padding-inline);
}

.mobile-nav__mobile-start {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-fg-primary);
  cursor: pointer;
}

.mobile-nav__logo {
  height: 16px;
  width: auto;
  object-fit: contain;
}

/* Nav list */
.mobile-nav__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding: var(--space-9) var(--page-padding-inline);
}

/* Each item: starts blurred + offset; animates in when panel opens */
.mobile-nav__item {
  display: block;
  color: var(--color-orange);
  font-family: var(--font-brand);
  font-size: var(--heading-l-size);
  font-weight: 700;
  line-height: var(--heading-l-line-height);
  letter-spacing: var(--heading-l-letter-spacing);
  text-decoration: none;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  transition:
    opacity 0.4s ease,
    filter 0.4s ease,
    transform 0.4s ease;
}

.mobile-nav--open .mobile-nav__item:nth-child(1) { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: 200ms; }
.mobile-nav--open .mobile-nav__item:nth-child(2) { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: 280ms; }
.mobile-nav--open .mobile-nav__item:nth-child(3) { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: 360ms; }
.mobile-nav--open .mobile-nav__item:nth-child(4) { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: 440ms; }
.mobile-nav--open .mobile-nav__item:nth-child(5) { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: 520ms; }
.mobile-nav--open .mobile-nav__item:nth-child(6) { opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: 600ms; }

/* Reset item state when closing so they can re-animate next open */
.mobile-nav:not(.mobile-nav--open) .mobile-nav__item {
  transition-delay: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav__panel { transition: none; }
  .mobile-nav__item { transition: none; opacity: 1; filter: none; transform: none; }
}

/* ─────────────────────────────────────────────────────────────────────────── */

/* Full first viewport; vertical padding via --hero-pad-* (set in JS) */
.hero {
  --header-height: 96px;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  background: var(--color-black);
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  /* Hero starts at the very top so its background fills behind the fixed header.
     Header height is folded into padding-top so content still clears the header. */
  margin-top: 0;
  padding-top: calc(var(--header-height) + var(--hero-pad-top, var(--space-8)));
  padding-bottom: var(--hero-pad-bottom, var(--space-11));
  padding-inline: var(--page-padding-inline);
}

/* Hero page title — two fixed lines; JS sets largest size that fits width (--hero-title-fit-max ceiling) */
#hero-title {
  display: block;
  margin: 0 0 var(--hero-stack-gap);
  color: var(--color-orange);
  font-size: 148px;
  font-weight: 700;
  line-height: 148px;
  /* Figma hero — tracking -5px @ 148px */
  letter-spacing: -5px;
  white-space: normal;
  width: 100%;
  overflow: visible;
}

.hero-title__line {
  display: block;
  white-space: nowrap;
}

/* Mobile lines hidden by default; desktop lines always visible */
.hero-title__line--mobile {
  display: none;
}

.hero-word {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  animation: hero-word-focus-in var(--hero-headline-anim-duration) ease-out forwards;
}

.hero-title__line:nth-child(1) .hero-word:nth-child(1) {
  animation-delay: var(--hero-headline-word1-delay);
}

.hero-title__line:nth-child(1) .hero-word:nth-child(2) {
  animation-delay: var(--hero-headline-word2-delay);
}

.hero-title__line:nth-child(1) .hero-word:nth-child(3) {
  animation-delay: var(--hero-headline-word3-delay);
}

.hero-title__line:nth-child(2) .hero-word:nth-child(1) {
  animation-delay: var(--hero-headline-word4-delay);
}

.hero-title__line:nth-child(2) .hero-word:nth-child(2) {
  animation-delay: var(--hero-headline-word5-delay);
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes hero-word-focus-in {
  from {
    opacity: 0;
    filter: blur(12px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes hero-line-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes post-intro-pointer {
  to {
    pointer-events: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-intro-stack {
    animation: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .hero-copy--lead {
    animation: none;
    opacity: 1;
    filter: none;
    color: var(--color-fg-primary);
  }

  .waitlist-form {
    animation: none;
    opacity: 1;
    filter: none;
  }

  .hero-word {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
    pointer-events: auto;
  }

  .hero-accent__bar {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Hero body: 12-col grid — orange accent 4 cols, messaging (copy + form / email) 8 cols */
.hero-body {
  display: grid;
  grid-template-columns: repeat(var(--page-grid-columns), minmax(0, 1fr));
  column-gap: var(--page-grid-gutter);
  align-items: flex-start;
  width: 100%;
}

.hero-accent {
  grid-column: 1 / span 4;
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

@media (min-width: 801px) {
  .hero-accent {
    padding-bottom: 13px;
  }
}

.hero-accent__spacer {
  height: 16px;
}

.hero-accent__bar {
  height: 8px;
  width: 100%;
  background: var(--color-orange);
  opacity: 0;
  transform: translateY(20px);
  animation: hero-slide-in var(--hero-form-fade-duration) ease-out var(--hero-accent-delay) forwards;
}

/* Shared slide-up keyframe: accent bar + lead copy + form all use this */
@keyframes hero-slide-in {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

.hero-copy {
  width: min(100%, 860px);
  margin: 0;
  font-size: var(--body-l-size);
  font-weight: 400;
  line-height: var(--body-l-line-height);
  letter-spacing: var(--body-l-letter-spacing);
}

/* Body L; slides up + blur-to-sharp in sync with the accent bar */
.hero-copy--lead {
  width: 100%;
  max-width: none;
  margin: 0;
  color: var(--color-fg-primary);
  font-size: var(--body-l-size);
  font-weight: 400;
  line-height: var(--body-l-line-height);
  letter-spacing: var(--body-l-letter-spacing);
  opacity: 0;
  filter: blur(12px);
  transform: translateY(20px);
  animation: hero-slide-in var(--hero-form-fade-duration) ease-out var(--hero-form-fade-delay, 1900ms) forwards;
}


.hero-messaging-slot {
  grid-column: 5 / -1;
  min-width: 0;
  position: relative;
}

.post-intro-stack {
  position: relative;
  left: 0;
  top: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* 64px — lead paragraph to email / form */
  width: 100%;
  opacity: 1;
  transform: none;
  pointer-events: none;
  animation: post-intro-pointer 0ms linear var(--hero-pointer-delay) forwards;
}

.waitlist-form {
  width: 100%;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(20px);
  animation: hero-slide-in var(--hero-form-fade-duration) ease-out forwards;
  animation-delay: var(--hero-form-fade-delay);
}

.form-input-area {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--space-6);
  min-width: 0;
}

.form-underline {
  width: 100%;
  height: 1px;
  margin-top: var(--space-5);
  background-color: transparent;
  background-image: url("assets/hero-form-underline.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform-origin: left center;
}

.button-arrow {
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke-width: 3px;
}

.email-label {
  flex: 0 0 auto;
  color: var(--color-black-65);
  font-size: var(--body-s-size);
  font-weight: 400;
  line-height: var(--body-s-line-height);
  letter-spacing: var(--body-s-letter-spacing);
  white-space: nowrap;
}

.form-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6);
  width: 100%;
}

input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  color: var(--color-fg-primary);
  background: transparent;
  font: inherit;
}

#email {
  scroll-margin-top: 120px;
  font-size: var(--body-m-size);
  line-height: var(--body-m-line-height);
  letter-spacing: var(--body-m-letter-spacing);
}

#email::placeholder {
  color: var(--color-fg-secondary);
  font-family: var(--font-brand);
  font-size: var(--body-s-size);
  line-height: var(--body-s-line-height);
  letter-spacing: var(--body-s-letter-spacing);
}

/* Button L - Figma node 50:124 (default + hover) */
.waitlist-button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  height: 72px;
  border: 0;
  border-radius: 36px;
  color: var(--color-fg-inverse);
  background-color: var(--color-orange);
  font-family: var(--font-brand);
  font-size: var(--button-l-size);
  font-weight: 700;
  line-height: var(--button-l-line-height);
  letter-spacing: var(--button-l-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}

.waitlist-button:hover {
  background-color: var(--color-purple);
}

.waitlist-button:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 2px;
}

.waitlist-button .button-arrow {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  stroke: currentColor;
}

/* Header compact CTA — Figma 139:5620 (Button Small); after .waitlist-button so overrides win */
.site-header .waitlist-button--small {
  height: auto;
  min-height: 0;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-medium);
  font-size: var(--button-s-size);
  font-weight: 700;
  line-height: var(--button-s-line-height);
  letter-spacing: var(--button-s-letter-spacing);
}

.site-header .waitlist-button--small .button-arrow {
  width: 14px;
  height: 14px;
}

/* Hero waitlist — Button S; radius matches Figma 182:9487 (header pill stays 52px) */
.hero .waitlist-button--small {
  height: auto;
  min-height: 0;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-medium);
  font-size: var(--button-s-size);
  font-weight: 700;
  line-height: var(--button-s-line-height);
  letter-spacing: var(--button-s-letter-spacing);
}

.hero .waitlist-button--small .button-arrow {
  width: 14px;
  height: 14px;
}

/* One viewport band; avoid stacking 100vh+100dvh (taller than visible) which shows a dark strip */
.marquee-section {
  /* ~20% shorter band than full viewport */
  --marquee-band-height: calc(min(100dvh, 100svh) * 0.8);

  position: relative;
  z-index: 0;
  box-sizing: border-box;
  height: var(--marquee-band-height);
  min-height: var(--marquee-band-height);
  overflow: hidden;
  background-color: var(--color-black);
  background-image: url("https://www.figma.com/api/mcp/asset/b6cf8b45-d38d-4962-958d-e7937f35fd5d");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.marquee-media {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--color-black);
}

.marquee-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: grayscale(100%);
  /* Top trim only; band height is reduced via .marquee-section */
  clip-path: inset(7.5% 0 0 0);
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(32, 30, 32, 0.6);
}

.marquee-track {
  position: relative;
  z-index: 2;
  width: fit-content;
  display: flex;
  opacity: 0.8;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}

.marquee-segment {
  display: flex;
  gap: 0;
}

.marquee-segment span {
  margin-right: 100px;
}

.marquee-track span {
  font-size: clamp(42px, 4vw, var(--heading-xl-size));
  font-weight: 700;
  line-height: var(--heading-xl-line-height);
  letter-spacing: var(--heading-xl-letter-spacing);
}

/* ─── Problem section — min one viewport tall; inner vertically centered; proof: Body M, cols 5 / -1 ─ */
.problem-section {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 160px;
  padding-inline: var(--page-padding-inline);
  background: var(--color-black);
  position: relative;
}

.problem-inner {
  display: grid;
  grid-template-columns: repeat(var(--page-grid-columns), minmax(0, 1fr));
  column-gap: var(--page-grid-gutter);
  row-gap: var(--space-7);
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  box-sizing: border-box;
  flex-shrink: 0;
}

.problem-kicker,
.statements-headlines {
  grid-column: 1 / -1;
}

.problem-kicker {
  margin: 0;
  color: var(--color-fg-secondary);
  font-family: var(--font-brand);
  font-size: var(--body-s-size);
  font-weight: 400;
  line-height: var(--body-s-line-height);
  letter-spacing: var(--body-s-letter-spacing);
  text-transform: uppercase;
}

.statements-headlines {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-6);
  width: 100%;
}

.statement {
  width: 100%;
}

.statement__text {
  margin: 0;
  color: var(--color-orange);
  font-weight: 700;
  white-space: nowrap;
  /* font-size, line-height, and letter-spacing all set by JS fluid sizing */
}

/* Per-character reveal spans */
.statement-char {
  display: inline;
  opacity: 0;
  filter: blur(6px);
  transition: opacity 0.12s ease, filter 0.22s ease;
}

.statement-char--visible {
  opacity: 1;
  filter: blur(0px);
}

@media (max-width: 800px) {
  .proof-copy-text {
    grid-column: 1 / -1;
  }

  /* Mobile: use fixed Heading L size and let statements wrap naturally */
  .statement__text {
    white-space: normal;
    font-size: var(--heading-l-size);
    line-height: var(--heading-l-line-height);
    letter-spacing: var(--heading-l-letter-spacing);
  }

  /* Tighten the gap between statements to match Figma mobile spacing */
  .statements-headlines {
    row-gap: var(--space-7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .statement-char {
    opacity: 1;
    filter: none;
    transition: none;
  }
}

.proof-copy-text {
  grid-column: 5 / -1;
  min-width: 0;
  margin-top: calc(var(--space-9) - var(--space-7)); /* 96px total below headlines vs row-gap alone */
  color: var(--color-fg-primary);
  font-family: var(--font-brand);
  font-size: var(--body-m-size);
  font-weight: 400;
  line-height: var(--body-m-line-height);
  letter-spacing: var(--body-m-letter-spacing);
  /* Default hidden; scroll-driven JS sets opacity / blur / translate each frame */
  opacity: 0;
  filter: blur(12px);
  transform: translateY(20px);
}

/* Settled state after scroll-in completes (JS clears inlines and adds class) */
.proof-copy-text--visible {
  opacity: 1;
  filter: none;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .proof-copy-text {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
}

.proof-copy-text p {
  margin: 0;
}

/* Second paragraph has a blank-line gap (one line-height) above it */
.proof-copy-text p + p {
  margin-top: var(--body-m-line-height);
}

/* ─── Narrative (“If you don’t own…”) — Figma background/low-contrast ─────── */
.narrative-section {
  box-sizing: border-box;
  padding-top: var(--space-11);
  /* Sole vertical gap before “How it works” (how-it has padding-top: 0) */
  padding-bottom: var(--space-11);
  padding-inline: var(--page-padding-inline);
  background: var(--color-black-10);
}

.narrative-text {
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: var(--display-l-size);
  line-height: var(--display-l-line-height);
  letter-spacing: var(--display-l-letter-spacing);
}

/* Figma 182:9518 — foreground/tertiary default, maturing to orange */
.narrative-char {
  display: inline;
  color: var(--color-fg-tertiary);
  -webkit-text-fill-color: currentColor;
  transition: color 0.45s ease, -webkit-text-fill-color 0.45s ease;
}

.narrative-char--matured {
  color: var(--color-orange);
  -webkit-text-fill-color: var(--color-orange);
}

@media (prefers-reduced-motion: reduce) {
  .narrative-char {
    color: var(--color-orange);
    -webkit-text-fill-color: var(--color-orange);
    transition: none;
  }
}

/* How it works — Figma 182:9521 (kicker + slider), 182:9526 (step column) */
.how-it-works {
  /* Step titles — Body L (desktop); tablet/mobile override below */
  --how-it-step-title-size: var(--body-l-size);
  --how-it-step-title-line-height: var(--body-l-line-height);
  --how-it-step-title-tracking: var(--body-l-letter-spacing);
  /* Rail (8px) → steps: exactly 32px — Figma spacing; frees width for step titles */
  --how-it-rail-text-gap: 32px;
  box-sizing: border-box;
  /* 160px space from narrative copy lives on .narrative-section padding-bottom */
  padding-top: 0;
  padding-bottom: var(--space-11);
  padding-inline: var(--page-padding-inline);
  background: var(--color-black-10);
  color: var(--color-cream);
}

.how-it-works__inner {
  row-gap: var(--space-7);
  margin: 0 auto;
}

/* Visible section label — same role as “THE PROBLEM” (Body S, foreground/secondary, uppercase) */
h2.how-it-works__heading {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--color-fg-secondary);
  font-family: var(--font-brand);
  font-size: var(--body-s-size);
  font-weight: 400;
  line-height: var(--body-s-line-height);
  letter-spacing: var(--body-s-letter-spacing);
  text-transform: uppercase;
}

/* 12-col row: rail + steps = tracks 1–7, slide panel = tracks 8–12 (explicit lines match 7+5 split) */
.how-it-works__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--page-grid-gutter);
  row-gap: var(--space-7);
  align-items: stretch;
  width: 100%;
}

.how-it-works__left {
  grid-column: 1 / 8;
  display: flex;
  align-items: stretch;
  gap: var(--how-it-rail-text-gap);
  min-width: 0;
  max-width: none;
}

.how-it-works__rail {
  position: relative;
  flex-shrink: 0;
  width: 8px;
  align-self: stretch;
  overflow: hidden;
  border-radius: 0;
  background: var(--color-black-30);
}

.how-it-works__rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 33.333%;
  border-radius: 0;
  background: var(--color-orange);
  transition: top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.how-it-works__steps {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-8); /* 64px between steps */
  min-width: 0;
  align-self: stretch;
  justify-content: space-between;
}

.how-it-works__step {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-5); /* Figma 182:9527 — 24px between num / title / copy */
  color: var(--color-fg-tertiary);
}

.how-it-works__step--active {
  color: var(--color-orange);
}

.how-it-works__step-num {
  margin: 0;
  font-size: var(--body-m-size);
  font-weight: 400;
  line-height: var(--body-m-line-height);
  letter-spacing: var(--body-m-letter-spacing);
  color: inherit;
  transition: color 0.35s ease;
}

.how-it-works__step--active .how-it-works__step-num {
  color: var(--color-orange);
}

/* Figma 182:9521 — inactive num/title foreground/tertiary; active orange */
.how-it-works__step:not(.how-it-works__step--active) .how-it-works__step-num,
.how-it-works__step:not(.how-it-works__step--active) .how-it-works__step-title {
  color: var(--color-fg-tertiary);
}

/* Inactive steps are clickable: signal interactivity on hover. Hover
   state gated on (hover: hover) so taps on touch devices don't leave
   a sticky highlight. */
.how-it-works__step:not(.how-it-works__step--active) {
  cursor: pointer;
}

@media (hover: hover) {
  .how-it-works__step:not(.how-it-works__step--active):hover .how-it-works__step-num,
  .how-it-works__step:not(.how-it-works__step--active):hover .how-it-works__step-title {
    color: var(--color-fg-secondary);
  }
}

.how-it-works__step-title {
  margin: 0;
  font-size: var(--how-it-step-title-size);
  font-weight: 700;
  line-height: var(--how-it-step-title-line-height);
  letter-spacing: var(--how-it-step-title-tracking);
  color: inherit;
  transition: color 0.35s ease;
}

.how-it-works__step--active .how-it-works__step-title {
  color: var(--color-orange);
}

/* Keep “it up” on one line so “it” never sits alone on a third wrap */
.how-it-works__step-title-join {
  white-space: nowrap;
}

.how-it-works__step-copy {
  display: none;
  margin: 0;
  font-size: var(--body-m-size);
  font-weight: 400;
  line-height: var(--body-m-line-height);
  letter-spacing: var(--body-m-letter-spacing);
  color: var(--color-fg-primary);
}

/* Per-step images: desktop/tablet — hidden (shared slide panel used instead) */
.how-it-works__step-img {
  display: none;
}

.how-it-works__step--active .how-it-works__step-copy {
  display: block;
}

/* Right column: exported slides — cols 8–12 (5 tracks); aligns with page grid */
.how-it-works__visual {
  grid-column: 8 / -1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  min-height: 0;
}

/* Slide frame moves within the column by step (extra space from row stretch) */
.how-it-works[data-how-step="1"] .how-it-works__visual {
  justify-content: center;
}

.how-it-works[data-how-step="2"] .how-it-works__visual {
  justify-content: flex-end;
}

.how-it-works__slides {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 1602 / 1716;
}

.how-it-works__slide {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0;
  object-fit: contain;
  object-position: center top;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  box-shadow: none;
}

/* Capture: top of frame */
.how-it-works[data-how-step="0"] .how-it-works__slide:nth-child(1) {
  object-position: center top;
}

/* Validate: centred in the slide frame */
.how-it-works[data-how-step="1"] .how-it-works__slide:nth-child(2) {
  object-position: center center;
}

/* Keep: bottom of the slide frame */
.how-it-works[data-how-step="2"] .how-it-works__slide:nth-child(3) {
  object-position: center bottom;
}

.how-it-works[data-how-step="0"] .how-it-works__slide:nth-child(1),
.how-it-works[data-how-step="1"] .how-it-works__slide:nth-child(2),
.how-it-works[data-how-step="2"] .how-it-works__slide:nth-child(3) {
  opacity: 1;
  z-index: 2;
  pointer-events: auto;
}

/* Hidden per Hannah feedback (2026-05-12). Buttons remain in DOM so the scroll-lock JS
   that flips aria-selected and --active state stays a no-op rather than throwing. */
.how-it-works__stepper {
  display: none;
}

.how-it-works__stepper-dot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 8px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-fg-tertiary);
  font-family: var(--font-brand);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}

.how-it-works__stepper-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.how-it-works__stepper-marker {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid var(--color-black-30);
  border-radius: 50%;
  background: transparent;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

/* Hover state — only on devices that genuinely hover, so taps on touch
   devices don't leave a sticky highlight after the first contact. */
@media (hover: hover) {
  .how-it-works__stepper-dot:hover {
    color: var(--color-cream);
  }

  .how-it-works__stepper-dot:hover .how-it-works__stepper-marker {
    border-color: var(--color-orange);
  }
}

.how-it-works__stepper-dot[aria-selected="true"] {
  color: var(--color-orange);
}

.how-it-works__stepper-dot[aria-selected="true"] .how-it-works__stepper-marker {
  border-color: var(--color-orange);
  background: var(--color-orange);
}

.how-it-works__stepper-dot:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 3px;
  border-radius: 6px;
}

@media (max-width: 800px) {
  /* Section: independent padding on mobile (narrative has no bottom padding) */
  .how-it-works {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
    padding-inline: var(--page-padding-inline);
    /* Step titles — Body Bold row (mobile) */
    --how-it-step-title-size: var(--body-bold-size);
    --how-it-step-title-line-height: var(--body-bold-line-height);
    --how-it-step-title-tracking: var(--body-bold-letter-spacing);
  }

  /* Row becomes a single column; visual panel hidden */
  .how-it-works__row {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 0;
  }

  .how-it-works__left {
    grid-column: 1 / -1;
  }

  .how-it-works__visual {
    grid-column: 1 / -1;
  }

  .how-it-works__visual {
    display: none;
  }

  /* Left column: full width, no rail gap needed */
  .how-it-works__left {
    flex: 1 1 100%;
    max-width: none;
    gap: 0;
  }

  /* Rail: hidden on mobile */
  .how-it-works__rail {
    display: none;
  }

  /* Steps: 96px between each step */
  .how-it-works__steps {
    gap: var(--space-9);
  }

  .how-it-works__step {
    gap: var(--space-6);
  }

  /* Step number: Body M */
  .how-it-works__step-num {
    font-size: var(--body-m-size);
    line-height: var(--body-m-line-height);
    letter-spacing: var(--body-m-letter-spacing);
  }

  .how-it-works__step-title {
    font-size: var(--how-it-step-title-size);
    line-height: var(--how-it-step-title-line-height);
    letter-spacing: var(--how-it-step-title-tracking);
  }

  /* Step copy: Body M / foreground primary */
  .how-it-works__step-copy,
  .how-it-works__step--active .how-it-works__step-copy {
    display: block;
    font-size: var(--body-m-size);
    line-height: var(--body-m-line-height);
    letter-spacing: var(--body-m-letter-spacing);
    color: var(--color-fg-primary);
  }

  /* Per-step image: 80% width, centred, with 32px gap above from copy text */
  .how-it-works__step-img {
    display: block;
    width: 80%;
    max-width: 80%;
    height: auto;
    object-fit: contain;
    margin-top: 0;
    margin-inline: auto;
  }

  /* Stepper dots: hidden */
  .how-it-works__stepper {
    display: none;
  }
}

.closing-section {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  padding-top: var(--space-11);
  padding-bottom: var(--space-11);
  padding-inline: var(--page-padding-inline);
  background: var(--color-black-20);
}

h2 {
  width: min(var(--content-max), 100%);
  margin: 0;
  color: var(--color-cream);
  font-size: var(--display-l-size);
  font-weight: 700;
  line-height: var(--display-l-line-height);
  letter-spacing: var(--display-l-letter-spacing);
}

.closing-headline {
  box-sizing: border-box;
  width: min(var(--content-max), 100%);
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: var(--display-l-size);
  line-height: var(--display-l-line-height);
  letter-spacing: var(--display-l-letter-spacing);
  color: var(--color-fg-tertiary);
}

.closing-headline__visual {
  display: block;
}

.closing-line {
  display: inline;
}

/* Figma foreground/tertiary → brand orange as scroll/wheel reveal advances */
.closing-char {
  color: var(--color-fg-tertiary);
  -webkit-text-fill-color: currentColor;
  transition: color 0.35s ease-out, -webkit-text-fill-color 0.35s ease-out;
}

.closing-char--orange {
  color: var(--color-orange);
  -webkit-text-fill-color: var(--color-orange);
}

@media (prefers-reduced-motion: reduce) {
  .closing-char {
    transition: none;
  }
}

.accent {
  color: var(--color-orange);
}

/* Figma 179:9254 — three stacked proof cards (static) above footer */
.pre-footer-cards {
  box-sizing: border-box;
  padding-top: var(--space-8);
  padding-bottom: var(--space-9);
  padding-inline: var(--page-padding-inline);
  background: var(--color-black-10);
}

.pre-footer-cards__inner {
  row-gap: var(--space-6);
  align-items: stretch;
  margin: 0 auto;
}

/* Cards sit in normal flow; scroll JS scrubs blur / opacity / translateY until --visible */
.pre-footer-cards__card {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-8);
  border-radius: var(--radius-large);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  opacity: 0;
  filter: blur(12px);
  transform: translateY(36px);
  transition: none;
  will-change: opacity, filter, transform;
}

.pre-footer-cards__card--visible {
  opacity: 1;
  filter: none;
  transform: translateY(0);
  transition: opacity 0.45s ease-out, filter 0.45s ease-out, transform 0.45s ease-out;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .pre-footer-cards__card {
    transition: none;
    will-change: auto;
  }
}

.pre-footer-cards__card--orange {
  background: var(--color-orange);
}

.pre-footer-cards__card--olive {
  background: var(--color-olive);
}

.pre-footer-cards__card--purple {
  background: var(--color-purple);
}

.pre-footer-cards__content {
  display: flex;
  max-width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.pre-footer-cards__label {
  margin: 0;
  color: var(--color-fg-inverse);
  font-size: var(--body-m-size);
  font-weight: 400;
  line-height: var(--body-m-line-height);
  letter-spacing: var(--body-m-letter-spacing);
}

.pre-footer-cards__text {
  margin: 0;
  max-width: 100%;
  color: var(--color-fg-inverse);
  font-size: var(--body-l-size);
  font-weight: 700;
  line-height: var(--body-l-line-height);
  letter-spacing: var(--body-l-letter-spacing);
}

/* Figma 133:5083 — subtle edge between proof (black) and footer (orange) */
.site-footer-splitline {
  height: 1px;
  background: rgb(41 33 44 / 0.15);
}

/* Figma 182:9557 — peach block: pt space-9, pb space-8, horizontal page margin; Display L + signup row */
/* Figma 170:7701 — bar row below (nav + legal) */
.site-footer {
  margin-top: 0;
  box-sizing: border-box;
  padding: var(--space-9) var(--page-padding-inline) var(--space-8);
  background: var(--color-orange);
  color: var(--color-fg-inverse);
}

.site-footer__inner {
  row-gap: var(--space-9);
  align-items: start;
  margin: 0 auto;
}

.site-footer__logo {
  display: block;
  flex-shrink: 0;
  width: auto;
  height: 16px;
  object-fit: contain;
}

/* Logo → headline → signup: 96px (space-9) between each — Figma 182:9559 */
.site-footer__body {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-9);
  min-width: 0;
}

/* Headline max 770px — Figma 182:9560 */
.site-footer__headline {
  flex: none;
  max-width: 770px;
  min-width: 0;
  margin: 0;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: var(--display-l-size);
  line-height: var(--display-l-line-height);
  letter-spacing: var(--display-l-letter-spacing);
  color: var(--color-fg-inverse);
}

.site-footer__headline-line {
  display: block;
  margin: 0;
  color: inherit;
}

/* Figma 205:9975 — spacer (293) + 10px + form column */
.site-footer__signup-row {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.site-footer__signup-spacer {
  flex: 0 0 min(293px, 29.07%);
  min-width: 0;
  align-self: stretch;
  pointer-events: none;
}

.site-footer__signup {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
}

.site-footer__form {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
}

.site-footer__field-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-footer__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  outline: none;
  background: transparent;
  color: var(--color-fg-inverse);
  font-family: var(--font-brand);
  font-size: var(--body-m-size);
  font-weight: 400;
  line-height: var(--body-m-line-height);
  letter-spacing: var(--body-m-letter-spacing);
}

.site-footer__input::placeholder {
  color: var(--color-fg-ghost);
}

/* Same chrome as .hero .waitlist-button--small; bg purple-20, label + icon orange */
.site-footer__waitlist {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-medium);
  background-color: var(--color-purple-20);
  color: var(--color-orange);
  font-family: var(--font-brand);
  font-size: var(--button-s-size);
  font-weight: 700;
  line-height: var(--button-s-line-height);
  letter-spacing: var(--button-s-letter-spacing);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 200ms ease;
}

.site-footer__waitlist .button-arrow {
  display: block;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 3px;
}

.site-footer__waitlist:hover {
  background-color: var(--color-black);
  color: var(--color-orange);
}

.site-footer__waitlist:focus-visible {
  outline: 2px solid var(--color-fg-inverse);
  outline-offset: 2px;
}

/* Figma 182:9565 — hairline under field row (inverse / splitline tone) */
.site-footer__rule {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid rgb(41 33 44 / 0.25);
}

.site-footer__bar {
  display: flex;
  width: 100%;
  max-width: var(--content-max);
  flex-direction: column;
  gap: var(--space-5); /* 24px between links row and copyright */
  box-sizing: border-box;
  /* Figma 182:9566 — pt space-6, pb space-7 */
  padding-top: var(--space-6);
  padding-bottom: var(--space-7);
}

.site-footer__bar-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-7);
}

.site-footer__nav a {
  font-size: var(--ui-size);
  font-weight: 400;
  line-height: var(--ui-line-height);
  letter-spacing: 0;
  color: var(--color-fg-inverse);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 160ms ease;
}

.site-footer__nav a:hover {
  opacity: 0.72;
}

.site-footer__nav a:focus-visible {
  outline: 2px solid var(--color-fg-inverse);
  outline-offset: 3px;
  opacity: 1;
}

.site-footer__bar-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-7);
}

.site-footer__copyright {
  margin: 0;
  font-size: var(--ui-size);
  font-weight: 400;
  line-height: var(--ui-line-height);
  letter-spacing: 0;
  color: var(--color-fg-inverse);
  white-space: nowrap;
}

/* Hidden on mobile; replaced by .site-footer__mobile-copyright */
.site-footer__mobile-copyright {
  display: none;
}

.site-footer__legal-link {
  font-size: var(--ui-size);
  font-weight: 400;
  line-height: var(--ui-line-height);
  letter-spacing: 0;
  color: var(--color-fg-inverse);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 160ms ease;
}

.site-footer__legal-link:hover {
  opacity: 0.72;
}

.site-footer__legal-link:focus-visible {
  outline: 2px solid var(--color-fg-inverse);
  outline-offset: 3px;
  opacity: 1;
}

/* Tablet: layout, type, spacing, and low-contrast tweaks — max width 1136px */
@media (max-width: 1136px) {
  :root {
    --page-grid-gutter: var(--space-7);
    --display-xl-size: 224px;
    --display-xl-line-height: 224px;
    --display-xl-letter-spacing: -4px;
    --display-l-size: 76px;
    --display-l-line-height: 76px;
    --display-l-letter-spacing: -2px;
    --heading-l-size: 69px;
    --heading-l-line-height: 80px;
    --heading-l-letter-spacing: -1px;
    --heading-xl-size: 57px;
    --heading-xl-line-height: 68px;
    --heading-xl-letter-spacing: -1px;
    --heading-m-size: 57px;
    --heading-m-line-height: 68px;
    --heading-m-letter-spacing: -1px;
    --body-bold-size: 40px;
    --body-bold-line-height: 56px;
    --body-bold-letter-spacing: 0px;
    --body-xl-size: 33px;
    --body-xl-line-height: 48px;
    --body-xl-letter-spacing: 0px;
    --body-l-size: 23px;
    --body-l-line-height: 36px;
    --body-l-letter-spacing: 0px;
    --body-m-size: 16px;
    --body-m-line-height: 24px;
    --body-m-letter-spacing: 0px;
    --body-s-size: 16px;
    --body-s-line-height: 24px;
    --body-s-letter-spacing: 0px;
    --button-l-size: 23px;
    --button-l-line-height: 24px;
    --button-l-letter-spacing: 0px;
    --button-s-size: 16px;
    --button-s-line-height: 20px;
    --button-s-letter-spacing: 0px;
    --page-margin: var(--space-7);
    --hero-stack-gap: var(--space-7);
  }

  .hero {
    padding-inline: var(--page-padding-inline);
  }

  .site-header__inner {
    gap: var(--space-6);
  }

  .site-header__nav {
    gap: 24px;
  }

  .post-intro-stack {
    gap: var(--space-7);
  }

  .narrative-section {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }

  .how-it-works {
    padding-bottom: var(--space-9);
    /* Step titles — tablet spec: 23 / 36 / 0 bold */
    --how-it-step-title-size: 23px;
    --how-it-step-title-line-height: 36px;
    --how-it-step-title-tracking: 0px;
  }

  .how-it-works__inner {
    row-gap: var(--space-6);
  }

  .how-it-works__step {
    gap: var(--space-4);
  }

  .how-it-works__row {
    column-gap: var(--page-grid-gutter);
    row-gap: var(--space-6);
  }

  .how-it-works__visual {
    max-width: none;
  }

  .closing-section {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }

  .pre-footer-cards {
    padding-bottom: var(--space-9);
  }

  .pre-footer-cards__inner {
    row-gap: var(--space-6);
  }

  .email-label {
    font-size: var(--body-s-size);
    line-height: var(--body-s-line-height);
  }

  /* ── Footer tablet ── */
  .site-footer {
    padding: var(--space-9) var(--page-padding-inline) var(--space-8);
  }

  .site-footer__nav {
    gap: var(--space-7);
  }

  .site-footer__bar-end {
    flex-direction: row;
    gap: var(--space-7);
  }

  .site-footer__copyright {
    color: var(--color-fg-ghost);
  }
}

@media (max-width: 800px) {
  :root {
    --display-xl-size: 224px;
    --display-xl-line-height: 224px;
    --display-xl-letter-spacing: -4px;
    --display-l-size: 52px;
    --display-l-line-height: 53px;
    --display-l-letter-spacing: -2px;
    --heading-l-size: 48px;
    --heading-l-line-height: 56px;
    --heading-l-letter-spacing: 0px;
    --heading-xl-size: 36px;
    --heading-xl-line-height: 44px;
    --heading-xl-letter-spacing: 0px;
    --heading-m-size: 36px;
    --heading-m-line-height: 44px;
    --heading-m-letter-spacing: 0px;
    --body-bold-size: 24px;
    --body-bold-line-height: 36px;
    --body-bold-letter-spacing: 0px;
    --body-xl-size: 24px;
    --body-xl-line-height: 36px;
    --body-xl-letter-spacing: 0px;
    --body-l-size: 23px;
    --body-l-line-height: 36px;
    --body-l-letter-spacing: 0px;
    --body-m-size: 16px;
    --body-m-line-height: 24px;
    --body-m-letter-spacing: 0px;
    --body-s-size: 16px;
    --body-s-line-height: 24px;
    --body-s-letter-spacing: 0px;
    --button-l-size: 23px;
    --button-l-line-height: 24px;
    --button-l-letter-spacing: 0px;
    --button-s-size: 16px;
    --button-s-line-height: 20px;
    --button-s-letter-spacing: 0px;
    --hero-stack-gap: var(--space-7);
    --page-margin: max(var(--page-margin-min), var(--space-6));
    --page-padding-inline: var(--space-5);
    /* Collapse 12-col grid to 1 column with no gap — prevents gutter overflow */
    --page-grid-columns: 1;
    --page-grid-gutter: 0px;
  }

  .post-intro-stack {
    gap: var(--space-8);
  }

  .email-label {
    font-size: var(--body-s-size);
    line-height: var(--body-s-line-height);
  }

  .site-header__bar {
    padding-inline: var(--page-padding-inline);
    border-radius: 0;
  }

  .site-header__inner {
    gap: var(--space-3);
  }

  /* Mobile: show hamburger, hide nav; hero in-form CTA is the only waitlist button */
  .site-header__menu-btn {
    display: flex;
  }

  .site-header__nav {
    display: none;
  }

  /* Hide header actions on mobile — drawer holds Sign In; in-hero form is the waitlist CTA */
  .site-header__actions {
    display: none;
  }

  .mobile-nav {
    display: block;
  }

  /* Switch hero title to 3-line mobile layout */
  .hero-title__line--desktop {
    display: none;
  }

  .hero-title__line--mobile {
    display: block;
  }

  /* Stagger delays for mobile lines (nth-child 3/4/5 in the h1) */
  #hero-title .hero-title__line:nth-child(3) .hero-word:nth-child(1) { animation-delay: var(--hero-headline-word1-delay); }
  #hero-title .hero-title__line:nth-child(3) .hero-word:nth-child(2) { animation-delay: var(--hero-headline-word2-delay); }
  #hero-title .hero-title__line:nth-child(4) .hero-word:nth-child(1) { animation-delay: var(--hero-headline-word3-delay); }
  #hero-title .hero-title__line:nth-child(4) .hero-word:nth-child(2) { animation-delay: var(--hero-headline-word4-delay); }
  #hero-title .hero-title__line:nth-child(5) .hero-word:nth-child(1) { animation-delay: var(--hero-headline-word5-delay); }

  .hero {
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: calc(var(--header-height) + var(--space-6));
    padding-bottom: var(--space-9);
    padding-inline: var(--page-padding-inline);
    gap: 0;
  }

  /* Collapse hero to single column on mobile; tighter row-gap so JOIN WAITLIST sits above the fold */
  .hero-body {
    grid-template-columns: 1fr;
    row-gap: var(--space-6);
    column-gap: 0;
  }

  .hero-accent {
    grid-column: 1 / -1;
    width: 100%;
  }

  .hero-messaging-slot {
    grid-column: 1 / -1;
  }

  .hero-accent__spacer {
    display: none;
  }

  .hero-accent__bar {
    width: 80px;
  }

  .button-arrow {
    width: 16px;
    height: 16px;
    stroke-width: 2px;
  }

  /* Horizontal layout; input area hidden by default */
  .form-row {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  /* Input area: no gap since label is visually hidden */
  .form-input-area {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    gap: 0;
    transition:
      max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease 0.12s;
  }

  /* Underline: full width always (no layout change), invisible via scaleX.
     transform never affects layout so Y position is locked and page never jumps. */
  .form-underline {
    transform: scaleX(0);
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Hero form button: full-width pill → narrow pill; only width animates.
     Scoped to .hero so the header CTA keeps its natural width on mobile. */
  .hero .waitlist-button {
    align-self: auto;
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    height: 48px;
    border-radius: 24px;
    font-size: var(--button-s-size);
    line-height: var(--button-s-line-height);
    transition:
      width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.3s ease;
  }

  /* Header CTA: natural content width, smaller pill on mobile */
  .site-header .waitlist-button--small {
    width: auto;
    height: auto;
    border-radius: var(--radius-medium);
    font-size: var(--button-s-size);
    line-height: var(--button-s-line-height);
    letter-spacing: var(--button-s-letter-spacing);
  }

  .hero .waitlist-button--small {
    height: 48px;
    min-height: 48px;
    border-radius: 24px;
  }

  .button-label {
    overflow: hidden;
    white-space: nowrap;
    max-width: 200px;
    transition: opacity 0.15s ease, max-width 0.3s ease;
  }

  /* Open state */
  .waitlist-form--open .form-input-area {
    max-width: 1000px;
    opacity: 1;
  }

  .waitlist-form--open .form-underline {
    transform: scaleX(1);
  }

  .hero .waitlist-form--open .waitlist-button {
    width: 48px;
    padding: 0;
    position: relative;
    flex-shrink: 0;
    margin-left: var(--space-5);
  }

  /* Arrow: absolutely centred inside the 48×48 button,
     completely independent of the (hidden) label's flex presence */
  .hero .waitlist-form--open .button-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .hero .waitlist-form--open .button-label {
    opacity: 0;
    max-width: 0;
  }

  .marquee-track {
    width: fit-content;
  }

  .marquee-segment {
    gap: 0;
  }

  .marquee-segment span {
    margin-right: 48px;
  }

  .marquee-track span {
    line-height: 1.1;
  }

  .pre-footer-cards__inner {
    row-gap: var(--space-5); /* 24px on mobile */
  }

  /* ── Problem section mobile ── */
  .problem-section {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
    justify-content: flex-start;
  }

  .proof-copy-text {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  /* ── Narrative section mobile ── */
  .narrative-section {
    padding-top: var(--space-9);
    padding-bottom: 0;
  }

  .closing-section {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
    padding-inline: var(--page-padding-inline);
  }

  /* ── Pre-footer cards mobile ── */
  .pre-footer-cards {
    padding-bottom: var(--space-9);
  }

  .pre-footer-cards__card {
    padding: var(--space-6) var(--space-5);
  }

  .pre-footer-cards__text {
    font-size: 28px;
    line-height: 44px;
  }

  /* ── Footer mobile ── */
  .site-footer {
    /* Bar handles its own bottom padding */
    padding: var(--space-9) var(--page-padding-inline) 0;
  }

  /* Flex column: logo → body → bar, 96px between each */
  .site-footer__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
  }

  .site-footer__logo {
    width: auto;
    height: 16px;
    object-fit: contain;
  }

  /* 96px between headline and button */
  .site-footer__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
  }

  .site-footer__signup-spacer {
    display: none;
  }

  .site-footer__signup-row {
    gap: 0;
  }

  .site-footer__signup {
    max-width: none;
    width: 100%;
  }

  .site-footer__field-row {
    gap: 0;
    justify-content: flex-start;
  }

  /* Input wrapper: collapsed by default; slides open on click */
  .site-footer__input-wrap {
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    transition:
      max-width 0.45s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease 0.12s;
  }

  .site-footer__input {
    width: 100%;
    min-width: 0;
  }

  .site-footer__rule {
    display: block;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Button label: hides when form opens */
  .site-footer__waitlist-label {
    overflow: hidden;
    white-space: nowrap;
    max-width: 200px;
    transition: opacity 0.15s ease, max-width 0.3s ease;
  }

  /* Full-width dark pill button with orange text */
  .site-footer__waitlist {
    width: 100%;
    flex-shrink: 0;
    justify-content: center;
    padding: var(--space-3) var(--space-5);
    font-size: var(--button-s-size);
    line-height: var(--button-s-line-height);
    letter-spacing: var(--button-s-letter-spacing);
    transition:
      width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      padding 0.3s ease;
  }

  /* ── Open state ── */
  .site-footer__form--open .site-footer__input-wrap {
    max-width: 1000px;
    opacity: 1;
  }

  .site-footer__form--open .site-footer__rule {
    transform: scaleX(1);
  }

  .site-footer__form--open .site-footer__waitlist {
    width: 48px;
    padding: 0;
    position: relative;
    flex-shrink: 0;
    margin-left: var(--space-5);
  }

  .site-footer__form--open .button-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .site-footer__form--open .site-footer__waitlist-label {
    opacity: 0;
    max-width: 0;
  }

  /* Bar: flex column — row of nav columns on top, copyright below */
  .site-footer__bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    padding-top: var(--space-6);
    padding-bottom: var(--space-7);
  }

  /* Row: nav (left) + legal links (right) */
  .site-footer__bar-row {
    align-items: flex-start;
    gap: var(--space-5);
  }

  /* Left column: all nav links stacked */
  .site-footer__nav {
    flex: 1 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }

  /* Right column: Privacy + Terms only (copyright hidden here) */
  .site-footer__bar-end {
    flex: 1 0 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-5);
  }

  /* Hide copyright from bar-end on mobile */
  .site-footer__copyright {
    display: none;
  }

  /* Mobile copyright below nav columns */
  .site-footer__mobile-copyright {
    display: block;
    margin: 0;
    font-family: var(--font-brand);
    font-size: var(--body-m-size);
    font-weight: 400;
    line-height: var(--body-m-line-height);
    letter-spacing: var(--body-m-letter-spacing);
    color: var(--color-fg-ghost);
    white-space: normal;
  }
}

/* ─── Portrait orientation (non-mobile) ─────────────────────────────────────
   On portrait tablet/desktop the hero JS already centres content; removing
   the viewport-height floor lets it shrink to content + padding rather than
   forcing a full-screen stretch that creates a dead zone before the next
   section. The problem-section scroll-lock triggers on centre-alignment and
   doesn't need min-height: 100vh — removing it eliminates the matching
   dead zone at the top of that section.
─────────────────────────────────────────────────────────────────────────── */
@media (orientation: portrait) and (min-width: 801px) {
  .hero {
    min-height: auto;
  }

  .problem-section {
    min-height: auto;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Redesign overrides — Hannah's homepage flow (May 2026)

   1. Tighten vertical spacing between problem-section and closing-section.
      The original problem-section was a full-viewport scroll-locked stage;
      with the static layout we don't need 160px of padding under it.
   2. Make the footer waitlist hairline more visible against orange.
   3. Force the footer bottom bar onto two clearly-distinct lines:
      Line 1: nav (left) + Privacy/Terms (right)
      Line 2: copyright (full width, left)
   ───────────────────────────────────────────────────────────────────────── */

/* 1. Section spacing — generous breathing room above and below the
      problem section, matching Hannah's design */
.problem-section {
  min-height: auto;
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
}

@media (min-width: 801px) {
  .closing-section {
    padding-top: var(--space-9);
  }
}

@media (max-width: 800px) {
  .problem-section {
    padding-top: var(--space-9);
    padding-bottom: var(--space-9);
  }
}

/* 2. Footer waitlist underline (and hero form underline) — more visible */
.site-footer__rule {
  border-top-color: rgb(41 33 44 / 0.55);
  border-top-width: 1.5px;
}

/* 3. Footer bar — two clear lines */
.site-footer__bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);
}

.site-footer__bar-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
}

.site-footer__copyright {
  display: block;
  width: 100%;
  margin: 0;
  text-align: left;
  white-space: normal;
}

@media (max-width: 800px) {
  .site-footer__copyright {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Force-visible overrides — JS connectors hide the narrative/closing
   sections at page load and slide them in via wheel events. With the
   reduced=true reorder we want these sections to render statically,
   ignoring any inline styles the connectors set.
   ───────────────────────────────────────────────────────────────────────── */

.narrative-section,
.problem-section,
.closing-section,
.pre-footer-cards {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* Hero form underline — replace SVG-image dependency with a solid border so
   the line is reliable and visible against the dark hero background. */
.form-underline {
  width: 100%;
  height: 0;
  margin-top: var(--space-5);
  background: none;
  background-image: none;
  border: 0;
  border-top: 1.5px solid rgb(244 241 245 / 0.55);
}

/* Problem section statements — restore the design's intended font size.
   The fluid auto-sizing JS shrinks all three to fit the longest line on one
   row; with Hannah's longer copy ("Social networks are performative.") that
   produced too-small text. Use Heading L tokens and allow wrapping so the
   longer statement can break to two lines on narrow viewports. */
.problem-section .statement__text {
  font-size: var(--heading-l-size) !important;
  line-height: var(--heading-l-line-height) !important;
  letter-spacing: var(--heading-l-letter-spacing) !important;
  white-space: normal !important;
}

@media (max-width: 800px) {
  .problem-section .statement__text {
    font-size: var(--heading-m-size) !important;
    line-height: var(--heading-m-line-height) !important;
    letter-spacing: var(--heading-m-letter-spacing) !important;
  }
}

/* Footer headline — keep each line on a single visual row.
   Removes the 770px max-width cap so "Own your narrative." doesn't wrap. */
.site-footer__headline {
  max-width: none;
}
.site-footer__headline-line {
  white-space: nowrap;
}