/* Havly landing — v3 art direction: astery DNA (near-black, sharp, hairlines,
   restraint) reworked to create DESIRE. Editorial hero, narrative scenarios,
   privacy manifesto, alternating panels for rhythm. Self-contained, no external
   requests. Radius 0, no gradients/glows. Dark only. */

:root {
  /* Brightness lift (v5): perceptibly more open, still near-black astery family. */
  --bg: #0a0a0a; /* panel A (was #050505) */
  --panel: #101014; /* panel B, alternating (was #0a0a0a) */
  --text: #ffffff;
  --body: #e5e2df; /* warm stone — primary reading color (was #d6d3d1) */
  --muted: #b3b3b3; /* true captions only (was #a3a3a3) */
  --faint: #8f8f8f; /* footer copy, placeholders — ≥4.5:1 on --bg */
  --line: #303030; /* hairlines (was #262626) */
  --ghost: #17171b; /* oversized background section numerals */
  --ghost-b: #1c1c20; /* ghost on the --panel sections */
  --accent: #2665fd;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  --font:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, 'Helvetica Neue',
    sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--body);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}

p {
  margin: 0;
}

a {
  color: var(--text);
  text-decoration: none;
}
a:hover {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
::selection {
  background: var(--accent);
  color: #fff;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Eyebrow — the ONLY place mono-uppercase is used */
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.site-header.scrolled {
  border-bottom-color: var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.brand:hover {
  color: var(--text);
}
.brand-mark {
  width: 26px;
  height: 26px;
  flex: none;
  display: block;
}
.nav-cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}
.nav-cta:hover {
  border-color: var(--accent);
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ---------- Section scaffolding + rhythm ---------- */
.section {
  position: relative;
  overflow: hidden; /* clips the ghost numeral; also guards horizontal overflow */
  border-top: 1px solid var(--line);
}
.section--b {
  background: var(--panel);
}
.section-inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(64px, 10vw, 128px);
}
.eyebrow-block {
  display: block;
  margin-bottom: 22px;
}
/* Oversized ghost numeral — texture, not a label. Decorative + aria-hidden. */
.ghost-num {
  position: absolute;
  top: -0.28em;
  right: clamp(-8px, 1vw, 24px);
  z-index: 0;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(120px, 20vw, 300px);
  line-height: 1;
  color: var(--ghost);
  pointer-events: none;
  user-select: none;
}
.section--b .ghost-num {
  color: var(--ghost-b);
}

.section-head {
  max-width: 780px;
}
.section-head .eyebrow {
  margin-bottom: 22px;
}
.section-head h2 {
  font-size: clamp(30px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.section-head p {
  margin-top: 22px;
  color: var(--body);
  font-size: clamp(17px, 1.7vw, 19px);
  max-width: 620px;
}

/* ---------- Hero — asymmetric, map-dominant, map bleeds to the right edge ---- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100svh - 68px); /* vertically center the ink, no void quadrant */
  display: flex;
  align-items: center;
  padding-block: clamp(28px, 4vw, 56px);
}
.hero-grid {
  position: relative;
  z-index: 1;
  width: 100%;
  display: grid;
  grid-template-columns: 0.37fr 0.63fr; /* copy ~40% / map ~60%, map ≥780@1440 ≥940@1920 */
  grid-template-areas:
    'title map'
    'copy map';
  gap: clamp(18px, 2.4vw, 36px) clamp(24px, 2vw, 44px);
  align-items: center;
  /* left column aligns to the .wrap content edge; right column keeps no gutter
     so the map bleeds to the viewport's right edge and grows past --maxw. */
  padding-left: max(var(--gutter), calc((100vw - var(--maxw)) / 2));
  padding-right: 0;
}
.hero-grid > * {
  min-width: 0;
}
.hero-title {
  grid-area: title;
}
.hero-copy {
  grid-area: copy;
}
.hero-map {
  grid-area: map;
  align-self: center;
}
.hero-copy > .hero-promise {
  margin-top: 0; /* h1 is now a separate grid item; spacing comes from row-gap */
}
.hero h1 {
  /* D4: cap so "Where are the" holds one line in the ~40% column from 980px up
     → exactly two rendered headline lines, each mask animates one visual line. */
  font-size: clamp(32px, 4.8vw, 76px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
}
/* Each headline line is a clip window; the inner span masks up on intro. */
.hero-title .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.02em; /* room for descenders inside the clip window */
}
.hero-promise {
  margin-top: 30px;
  max-width: 520px;
  font-size: clamp(18px, 2vw, 21px);
  color: var(--body);
  line-height: 1.5;
}
.hero-promise strong {
  color: var(--text);
  font-weight: 700;
}
.hero-form-wrap {
  margin-top: 36px;
  max-width: 520px;
}
.form-desire {
  margin-bottom: 14px;
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.form-desire::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  background: var(--accent);
  vertical-align: middle;
}

/* Trust — three short human sentences (not mono chips) */
.trust {
  margin: 34px 0 0;
  padding: 28px 0 0;
  display: grid;
  gap: 14px;
  max-width: 520px;
  border-top: 1px solid var(--line);
}
.trust li {
  list-style: none;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  color: var(--body);
  font-size: 15px;
  line-height: 1.45;
}
.trust svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: var(--accent);
}
.trust strong {
  color: var(--text);
  font-weight: 600;
}

/* ---------- Waitlist form ---------- */
.waitlist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.waitlist-row {
  display: flex;
  border: 1px solid var(--line);
  background: var(--panel);
}
.waitlist-row:focus-within {
  border-color: var(--accent);
}
.waitlist input[type='email'] {
  flex: 1;
  min-width: 0;
  height: 58px;
  padding: 0 20px;
  font-size: 17px;
  font-family: inherit;
  color: var(--text);
  background: transparent;
  border: none;
}
.waitlist input[type='email']:focus {
  outline: none;
}
.waitlist input[type='email']::placeholder {
  color: var(--faint);
}
.btn-submit {
  flex: none;
  height: 58px;
  padding: 0 28px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-family: inherit;
  color: #fff;
  background: var(--accent);
  border: none;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    transform 0.08s ease;
}
/* Hard color inversion on hover — crisp, not a mushy fade. */
.btn-submit:hover {
  background: var(--text);
  color: var(--accent);
}
.btn-submit:active {
  background: var(--accent);
  color: #fff;
  transform: translateY(1px);
}
.btn-submit:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.consent {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 520px;
}
.consent a {
  color: var(--body);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consent a:hover {
  color: var(--accent);
}
.form-status {
  min-height: 20px;
  font-family: var(--mono);
  font-size: 13px;
}
.form-status[data-state='error'] {
  color: #ff5c5c;
}
.form-status[data-state='success'] {
  color: var(--accent);
}
.form-status[data-state='pending'] {
  color: var(--muted);
}

/* ---------- Micro-interactions ---------- */
/* Input focus: an accent hairline sweeps across the field. */
.waitlist-row {
  position: relative;
}
.waitlist-row::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.waitlist-row:focus-within::after {
  transform: scaleX(1);
}
/* Footer links: underline sweeps in. */
.footer-links a {
  position: relative;
}
.footer-links a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.footer-links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- Hero centerpiece: exploded home-graph (Codex scene assets) ---------- */
.hero-map {
  width: 100%;
}
/* Desktop: three 1:1 layers (1200x900) stacked for parallax depth. */
.graph {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 900;
  isolation: isolate;
}
.graph-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.graph-layer svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* D6 mobile crop (garage quadrant) — hidden on desktop. */
.graph-clip {
  display: none;
}
@media (max-width: 620px) {
  .graph {
    display: none;
  }
  /* Chips are opaque caption rows stacked ABOVE and BELOW the map — never over
     it — so no chip box can overlap a room/label glyph. */
  .graph-clip {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 40vh;
    overflow: hidden;
    border: 1px solid var(--line);
  }
  .graph-mobile {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: block;
  }
  /* The two wide SVG readouts (font-size 24) are shown instead as the caption
     chips; the smaller "Winter tires" node label (16) stays in the crop. */
  .graph-mobile text[font-size='24'] {
    display: none;
  }
  .map-chip {
    flex: none;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.03em;
    color: #5b8cff; /* lighter accent tint: 6.4:1 on #050505 (WCAG AA); SVG/desktop accent #2665FD unchanged */
    background: var(--bg); /* fully opaque — no map text bleeds through */
    padding: 7px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .map-search {
    border-bottom: 1px solid var(--line);
  }
  .map-answer {
    border-top: 1px solid var(--line);
    text-align: right;
  }
}

/* ---------- Marquee — the things you own, drifting past ---------- */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  padding-block: 22px;
  will-change: transform;
}
/* Spacing lives on each icon (margin), NOT a flex gap — so the two identical
   strips tile exactly and translateX(-50%) wraps with no seam or half-gap jump. */
.marquee-track svg {
  width: 40px;
  height: 40px;
  flex: none;
  margin-right: clamp(28px, 5vw, 64px);
  color: var(--muted);
  opacity: 0.8;
}

/* ---------- Grain — the one allowed texture (feTurbulence, very low opacity) --- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url('/scene/grain.svg');
  background-size: 180px 180px;
}
body > * {
  position: relative;
  z-index: 1;
}

/* ==================== MOTION ==================== */
/* All animation is transform / opacity / stroke-dashoffset only (compositor or
   one-shot paint). Everything below is disabled under prefers-reduced-motion. */

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fade-in {
  to {
    opacity: 1;
  }
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes line-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes marquee-x {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes ghost-drift {
  from {
    transform: translateY(-9%);
  }
  to {
    transform: translateY(9%);
  }
}
@keyframes node-pop {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* Intro (beat 1): the house outline strokes itself in, then the accent node
     snaps on as the final step — a single hard cut, no fade/scale theatrics. */
  #logo-house {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 0.4s ease forwards;
    animation-delay: 0.04s;
  }
  #logo-node {
    opacity: 0;
    animation: node-pop 0.01s steps(1, end) forwards;
    animation-delay: 0.46s;
  }

  /* Intro: hero headline lines mask up, staggered; supporting copy fades up. */
  .hero-title .line span {
    display: inline-block;
    animation: line-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  /* Beat 2 (0.35–0.85): the question masks up over an already-visible house. */
  .hero-title .line:nth-child(1) span {
    animation-delay: 0.38s;
  }
  .hero-title .line:nth-child(2) span {
    animation-delay: 0.5s;
  }

  /* Beat 1 (0–0.45): the house (rooms) stroke-draws FIRST — first ink ≤150ms. */
  .graph-back #rooms path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 0.5s ease both;
  }
  .graph-back #rooms path:nth-child(odd) {
    animation-delay: 0.02s;
  }
  .graph-back #rooms path:nth-child(even) {
    animation-delay: 0.09s;
  }

  /* Beat 3 (0.75–1.30): links wire in, item nodes + labels appear. */
  .graph-mid #links path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 0.55s ease 0.8s forwards;
  }
  .graph-mid #items {
    opacity: 0;
    animation: fade-in 0.4s ease 1.1s forwards;
  }
  .graph-front #labels text {
    opacity: 0;
    animation: fade-in 0.4s ease 1.15s forwards;
  }

  /* Beat 4 (~1.20): SEARCH readout — the trigger of the climax. */
  #search-readout {
    animation-delay: 1.2s;
  }

  /* Beat 5 (1.30–2.05): accent route draws through the house, node lights,
     answer lands ~1.95. Route starts before ANY copy below the headline. */
  .graph-front #accent-path path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 0.75s ease 1.3s forwards;
  }
  .graph-front #accent-path rect:not(#node-ping) {
    opacity: 0;
    animation: fade-in 0.35s ease 1.4s forwards;
  }
  #node-label {
    animation-delay: 1.55s;
  }
  #answer-readout {
    animation-delay: 1.95s;
  }
  /* D7 — one accent heartbeat on the found node at the climax, then stillness. */
  #node-ping {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: ping 0.7s ease 2s 1 both;
  }
  /* Privacy cell: the wall draws closed, then the one node gives a single ping —
     the same node grammar as the hero, at rest by default (reveal-triggered). */
  .manifesto-visual.in #cell-wall {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: draw 0.9s ease 0.1s forwards;
  }
  .manifesto-visual.in #cell-ping {
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: ping 0.7s ease 1s 1 both;
  }

  /* Beat 6 (1.90–2.40): ONLY NOW the copy answers — "Havly knows.", form, trust. */
  .hero-copy .hero-promise {
    animation: fade-up 0.42s ease 1.9s both;
  }
  .hero-copy .hero-form-wrap {
    animation: fade-up 0.42s ease 2.02s both;
  }
  .hero-copy .trust {
    animation: fade-up 0.42s ease 2.14s both;
  }

  /* Mobile map — compressed beats via class fades (ids stripped to avoid dup). */
  .graph-mobile {
    opacity: 0;
    animation: fade-in 0.5s ease 0.3s forwards;
  }
  .map-search {
    opacity: 0;
    animation: fade-in 0.35s ease 1.2s forwards;
  }
  .map-answer {
    opacity: 0;
    animation: fade-in 0.4s ease 1.95s forwards;
  }

  /* 3-depth parallax on scroll (scroll-driven; no JS). Desktop only. */
  @supports (animation-timeline: view()) {
    @media (min-width: 981px) {
      .graph-back {
        animation: gp-back linear both;
        animation-timeline: view();
      }
      .graph-mid {
        animation: gp-mid linear both;
        animation-timeline: view();
      }
      .graph-front {
        animation: gp-front linear both;
        animation-timeline: view();
      }
    }
    .ghost-num {
      animation: ghost-drift linear both;
      animation-timeline: view();
    }
  }

  /* D8 — marquee enters as a coda after the story resolves (~2.2s). */
  .marquee {
    opacity: 0;
    animation: fade-in 0.6s ease 2.2s forwards;
  }
  .marquee-track {
    animation: marquee-x 34s linear infinite;
  }
  .marquee:hover .marquee-track {
    animation-play-state: paused;
  }
}
@keyframes ping {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  15% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: scale(1.85);
  }
}
@keyframes gp-back {
  from {
    transform: translateY(-16px);
  }
  to {
    transform: translateY(16px);
  }
}
@keyframes gp-mid {
  from {
    transform: translateY(-28px);
  }
  to {
    transform: translateY(28px);
  }
}
@keyframes gp-front {
  from {
    transform: translateY(-42px);
  }
  to {
    transform: translateY(42px);
  }
}

/* ---------- Scenarios (narrative moments) ---------- */
.scenarios {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.scenario {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(32px, 5vw, 52px) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.scenario-mark {
  padding-top: 4px;
}
.scenario-mark svg {
  width: 30px;
  height: 30px;
  color: var(--accent);
  display: block;
}
.scenario-body {
  max-width: 760px;
}
.scenario h3 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.03em;
}
.scenario p {
  margin-top: 16px;
  color: var(--body);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
}

/* ---------- Secondary spec strip (astery hairline table) ---------- */
.specs {
  margin-top: clamp(48px, 6vw, 72px);
  border-top: 1px solid var(--line);
}
.spec {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 3vw, 40px);
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.spec .spec-k {
  flex: none;
  width: clamp(96px, 16vw, 190px);
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
}
.spec .spec-k svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--accent);
}
.spec .spec-v {
  color: var(--muted);
  font-size: 15px;
}

/* ---------- Privacy manifesto — two columns: argument + private cell ---------- */
.manifesto-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.manifesto h2 {
  font-size: clamp(32px, 4.6vw, 58px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.03;
  text-wrap: balance;
}
.manifesto h2 .mline {
  display: block;
}
.manifesto-lead {
  margin-top: 24px;
  max-width: 46ch;
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--body);
}
.proofs {
  margin-top: clamp(30px, 4vw, 46px);
  list-style: none;
  border-top: 1px solid var(--line);
}
.proof {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.proof-node {
  width: 9px;
  height: 9px;
  margin-top: 8px;
  background: var(--accent);
}
.proof-body strong {
  display: block;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.proof-body > span {
  display: block;
  margin-top: 6px;
  color: var(--body);
  font-size: 16px;
}
.manifesto-visual {
  align-self: center;
}
.cell-graph {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Final CTA ---------- */
.cta-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.cta-inner h2 {
  font-size: clamp(32px, 5.5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.cta-inner .hero-promise {
  margin-inline: auto;
}
.cta-inner .hero-form-wrap {
  margin-inline: auto;
  text-align: left;
}
.cta-inner .form-desire {
  text-align: left;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: 40px;
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.footer-inner .copy {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.footer-links {
  display: flex;
  gap: 28px;
}
.footer-links a {
  color: var(--muted);
  font-size: 14px;
}
.footer-links a:hover {
  color: var(--accent);
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  /* Full static fallback — no exceptions. Kills every animation/transition,
     the marquee, and any transform drift. Intro/parallax rules live inside a
     no-preference block so they never apply here; this neutralizes the rest. */
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  /* D6: stack headline → map → copy so the map sits directly under the question. */
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      'title'
      'map'
      'copy';
    /* Reset the desktop right-bleed (padding-right:0) so stacked content keeps
       symmetric side gutters — otherwise copy/form run flush to the right edge. */
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .hero {
    min-height: 0;
    display: block;
    padding-block: clamp(32px, 8vw, 72px);
  }
  /* Privacy: stack argument over the private cell, cell capped so it stays a
     supporting motif rather than dominating the column. */
  .manifesto-grid {
    grid-template-columns: 1fr;
    gap: clamp(36px, 7vw, 56px);
  }
  .manifesto-visual {
    max-width: 440px;
  }
}
@media (max-width: 620px) {
  body {
    font-size: 16px;
  }
  .scenario {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .scenario-num {
    padding-top: 0;
  }
  .spec {
    flex-direction: column;
    gap: 6px;
  }
  .spec .spec-k {
    width: auto;
  }
  /* Stacked form: real gap + own borders → separate ≥44px tap targets */
  .waitlist-row {
    flex-direction: column;
    gap: 10px;
    border: none;
    background: transparent;
  }
  .waitlist input[type='email'] {
    height: 54px;
    border: 1px solid var(--line);
    background: var(--panel);
  }
  .waitlist input[type='email']:focus {
    border-color: var(--accent);
  }
  .btn-submit {
    width: 100%;
  }
  .nav-cta {
    height: 38px;
    padding: 0 14px;
  }
}

/* ---------- Legal / prose pages ---------- */
.legal {
  max-width: 780px;
  margin: 0 auto;
  padding-block: clamp(48px, 8vw, 96px);
}
.legal .lede {
  color: var(--body);
  font-size: 18px;
  margin-top: 20px;
}
.legal h1 {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.legal h2 {
  font-size: 20px;
  margin-top: 44px;
  letter-spacing: -0.02em;
}
.legal p,
.legal li {
  color: var(--body);
  font-size: 16px;
  margin-top: 14px;
  line-height: 1.7;
}
.legal strong {
  color: var(--text);
}
.legal ul {
  margin: 10px 0 0;
  padding-left: 20px;
}
.legal a {
  color: var(--body);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal a:hover {
  color: var(--accent);
}
.legal .meta {
  font-family: var(--mono);
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-top: 10px;
}
.legal .todo {
  font-family: var(--mono);
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 13px;
}
.legal .back {
  display: inline-block;
  margin-top: 52px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.legal .back:hover {
  color: var(--accent);
}