/* LinkFlowState v2, "Nocturne": the greenhouse at night.
   Tokens first; every visual value below comes from here. */

@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Italic is a subset: a-z, A-Z, 0-9 and . , ; : ! ? ' ( ) & / only. Italic runs in the copy use only those. */
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Fallbacks sized toward the web fonts to limit layout shift while they load. */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  size-adjust: 96%;
}

@font-face {
  font-family: "Hanken Fallback";
  src: local("Arial");
  size-adjust: 98%;
}

:root {
  --bg: #0b120e;
  --bg-deep: #070c09;
  --surface: #111a15;
  --surface-2: #16211b;
  --surface-3: #1d2b23;
  --ink: #ece7d8;
  --ink-muted: #a7b1a3;
  --ink-faint: #808c80;
  --line: #243129;
  --sage: #7d947a;
  --leaf: #3d5741;
  --accent: #d6b97b;
  --accent-hover: #e8d09c;
  --accent-ink: #0b120e;
  --error: #f2a48b;
  --glow: rgb(214 185 123 / 0.5);
  --hair: rgb(236 231 216 / 0.08);
  --hair-strong: rgb(236 231 216 / 0.16);

  --serif: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --sans: "Hanken Grotesk", "Hanken Fallback", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --step-display: clamp(3.1rem, 1.1rem + 7.2vw, 8.75rem);
  --step-xl: clamp(2.5rem, 1.2rem + 4.6vw, 6rem);
  --step-statement: clamp(1.85rem, 1.1rem + 2.5vw, 3.5rem);
  --step-h3: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  --step-panel: clamp(1.75rem, 1.15rem + 1.6vw, 2.75rem);
  --step-lede: clamp(1.125rem, 1.02rem + 0.35vw, 1.3125rem);
  --step-body: 1.0625rem;
  --step-mono: 0.75rem;

  --gutter: clamp(20px, 4vw, 64px);
  --wrap: 1360px;
  --gap: clamp(16px, 2vw, 28px);
  --section: clamp(112px, 13vw, 200px);

  --radius-shell: 30px;
  --radius-core: 24px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-breathe: cubic-bezier(0.45, 0, 0.55, 1);

  --z-nav: 70;
  --z-grain: 90;
  --z-skip: 100;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 104px;
  background: var(--bg);
  color-scheme: dark;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Film grain: one fixed overlay, never attached to a scrolling container. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

[hidden] {
  display: none !important;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

h1, h2, h3, p, figure, ol, ul, dl, dd, blockquote {
  margin: 0;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

em {
  font-style: italic;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

a {
  color: var(--ink);
  text-decoration-color: var(--hair-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.3s var(--ease-out), text-decoration-color 0.3s var(--ease-out);
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}

.svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

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

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: fixed;
  z-index: var(--z-skip);
  left: 16px;
  top: -120px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 0.875rem/1 var(--sans);
  text-decoration: none;
}

.skip:focus {
  top: 16px;
}

/* Mono labels: lowercase by writing, faint by token. */
.mono {
  font-family: var(--mono);
  font-size: var(--step-mono);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

.mono a {
  color: var(--ink-muted);
}

.mono a:hover {
  color: var(--accent);
}

/* Section index row: gold number, hairline filling to the right. */
.index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: clamp(32px, 4.4vw, 64px);
}

.index span {
  color: var(--accent);
}

.index::after {
  content: "";
  flex: 1;
  height: 1px;
  margin-left: 6px;
  background: linear-gradient(90deg, var(--hair-strong), transparent);
}

/* Type scale */
.display {
  font-size: var(--step-display);
  line-height: 0.94;
  letter-spacing: -0.035em;
}

.display-md {
  font-size: var(--step-xl);
  line-height: 0.98;
}

.display em,
.cta-title em,
.coda em {
  color: var(--accent);
}

.statement-xl {
  font-size: var(--step-xl);
  line-height: 1;
  letter-spacing: -0.032em;
}

.statement {
  font-size: var(--step-statement);
  line-height: 1.08;
  letter-spacing: -0.024em;
}

.lede {
  max-width: 54ch;
  font-size: var(--step-lede);
  line-height: 1.6;
  color: var(--ink-muted);
}

.intro {
  max-width: 46ch;
  font-size: var(--step-lede);
  line-height: 1.6;
  color: var(--ink-muted);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
  flex: none;
}

/* ===== Nav: floating glass pill, firmer once the page has moved ===== */
.nav-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 8px;
  pointer-events: none;
}

.nav-shell {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  justify-content: center;
  padding-inline: 12px;
  pointer-events: none;
}

.nav {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 6px 6px 6px 22px;
  border-radius: 999px;
  background: rgb(11 18 14 / 0.52);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--hair), inset 0 1px 0 rgb(236 231 216 / 0.06);
  transition: background-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.nav-shell.is-stuck .nav {
  background: rgb(11 18 14 / 0.84);
  box-shadow: inset 0 0 0 1px var(--hair-strong), inset 0 1px 0 rgb(236 231 216 / 0.08);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

.wordmark::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow);
}

.nav-links {
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font: 500 0.9rem/1 var(--sans);
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.3s var(--ease-out), background-color 0.4s var(--ease-out);
}

.nav-links a:hover {
  color: var(--ink);
  background: var(--hair);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 0.875rem/1 var(--sans);
  text-decoration: none;
  transition: background-color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.nav-cta:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
}

.nav-cta:active {
  transform: scale(0.97);
}

/* ===== Flow-state readout: a segment of the nav pill that reports which step of the page you are on ===== */
/* Lives inside the nav (G4 = A, 2026-10-28) so it never covers content; shown from 1100px, where the nav has room. */
.nav-state {
  display: none;
  align-items: center;
  gap: 10px;
  padding-left: 20px;
  box-shadow: inset 1px 0 0 var(--hair);
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  white-space: nowrap;
  pointer-events: none;
}

@media (min-width: 1100px) {
  .nav-state { display: inline-flex; }
}

.fs-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow);
  animation: dot-pulse 3.2s var(--ease-breathe) infinite;
}

.fs-step {
  color: var(--ink);
}

.fs-name {
  min-width: 14ch;
  color: var(--accent);
}

/* Gold progress line along the straight part of the nav pill's bottom edge (the rounded ends are 28px). */
.fs-progress {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {
  .fs-progress {
    animation: fs-fill linear both;
    animation-timeline: scroll(root);
  }
}

@keyframes fs-fill {
  to { transform: scaleX(1); }
}

@keyframes dot-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* ===== Buttons: gold island pill with a nested icon circle ===== */
.button {
  --tx: 0px;
  --ty: 0px;
  --s: 1;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 52px;
  padding: 6px 6px 6px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 600 0.95rem/1 var(--sans);
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), 0 12px 40px -14px var(--glow);
  transform: translate3d(var(--tx), var(--ty), 0) scale(var(--s));
  transition: background-color 0.4s var(--ease-out), box-shadow 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}

.button:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), 0 16px 48px -12px var(--glow);
}

.button:active {
  --s: 0.98;
  transition-duration: 0.15s;
}

.button[disabled],
.button.is-busy {
  opacity: 0.7;
  cursor: progress;
}

.button-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-ink);
  color: var(--accent);
  transition: transform 0.5s var(--ease-out);
}

.button-icon svg {
  width: 16px;
  height: 16px;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover .button-icon {
    transform: translateX(3px);
  }
}

/* Text links: an underline that grows, and a 30px circle that fills gold. */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  font: 500 0.95rem/1.2 var(--sans);
  color: var(--ink);
  text-decoration: none;
}

.text-link .label {
  padding-bottom: 4px;
  background-image: linear-gradient(var(--accent), var(--accent)), linear-gradient(var(--hair-strong), var(--hair-strong));
  background-repeat: no-repeat;
  background-position: 0 100%, 0 100%;
  background-size: 0% 1px, 100% 1px;
  transition: background-size 0.6s var(--ease-out), color 0.3s var(--ease-out);
}

.text-link:hover {
  color: var(--accent-hover);
}

.text-link:hover .label {
  background-size: 100% 1px, 100% 1px;
}

.link-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  transition: background-color 0.4s var(--ease-out), color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.link-icon svg {
  width: 14px;
  height: 14px;
}

.text-link:hover .link-icon {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* ===== Double bezel: outer shell around an inner core ===== */
.bezel {
  position: relative;
  padding: 6px;
  border-radius: var(--radius-shell);
  background: rgb(236 231 216 / 0.025);
  box-shadow: inset 0 0 0 1px var(--hair);
}

.bezel-core {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radius-core);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgb(236 231 216 / 0.09);
}

/* Fine-pointer spotlight: a gold glow that follows the cursor inside the core (vars set by JS). */
.bezel-core::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgb(214 185 123 / 0.12), transparent 62%);
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .bezel:hover > .bezel-core::before {
    opacity: 1;
  }
}

.is-lit {
  background: rgb(214 185 123 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(214 185 123 / 0.45);
}

.is-lit > .bezel-core {
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 1px 0 rgb(236 231 216 / 0.12);
}

/* Faint labels fall under 4.5:1 on the lighter surface, so lit panels use the muted ink. */
.is-lit .mono {
  color: var(--ink-muted);
}

/* ===== Entrances: headline words rise from a mask, the rest settles in ===== */
.words .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.1em 0.06em 0.24em;
  margin: -0.1em -0.06em -0.24em;
}

.words .w > span {
  display: inline-block;
  animation: word-rise 1.1s var(--ease-out) both;
}

.words .w:nth-child(1) > span { animation-delay: 80ms; }
.words .w:nth-child(2) > span { animation-delay: 150ms; }
.words .w:nth-child(3) > span { animation-delay: 220ms; }
.words .w:nth-child(4) > span { animation-delay: 290ms; }
.words .w:nth-child(5) > span { animation-delay: 360ms; }
.words .w:nth-child(6) > span { animation-delay: 430ms; }
.words .w:nth-child(7) > span { animation-delay: 500ms; }
.words .w:nth-child(8) > span { animation-delay: 570ms; }

@keyframes word-rise {
  from { transform: translateY(108%); }
  to { transform: none; }
}

.enter {
  animation: enter 1s var(--ease-out) both;
}

.enter-0 { animation-delay: 0ms; }
.enter-1 { animation-delay: 560ms; }
.enter-2 { animation-delay: 680ms; }
.enter-3 { animation-delay: 800ms; }

@keyframes enter {
  from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* Reveals: start low, soft and blurred; resolve over about a second. Only when JavaScript can finish the job. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out);
  transition-delay: var(--rd, 0ms);
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ===== 01 Hero ===== */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100dvh;
  padding: clamp(128px, 17vh, 184px) 0 clamp(72px, 9vw, 128px);
  overflow: clip;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 64% at 80% 42%, rgb(61 87 65 / 0.26), transparent 72%),
    radial-gradient(38% 46% at 8% 96%, rgb(214 185 123 / 0.06), transparent 70%);
  pointer-events: none;
}

.ambient {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: min(78vw, 1240px);
  aspect-ratio: 16 / 9;
  pointer-events: none;
  opacity: 0.2;
  mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 100% 0%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 90% at 100% 0%, #000 45%, transparent 100%);
}

.ambient-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: invert(1);
}

.fireflies {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fireflies i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent-hover);
  box-shadow: 0 0 6px 1px var(--glow), 0 0 18px 4px rgb(214 185 123 / 0.2);
  opacity: 0.2;
  animation:
    ff-drift var(--dur) var(--ease-breathe) var(--d) infinite alternate,
    ff-twinkle var(--tw) var(--ease-breathe) var(--d) infinite;
}

.fireflies i:nth-child(1) { --x: 6%; --y: 24%; --dx: 42px; --dy: -34px; --dur: 19s; --tw: 5.2s; --d: -3s; }
.fireflies i:nth-child(2) { --x: 17%; --y: 62%; --dx: -30px; --dy: -46px; --dur: 23s; --tw: 6.4s; --d: -9s; }
.fireflies i:nth-child(3) { --x: 29%; --y: 14%; --dx: 36px; --dy: 40px; --dur: 16s; --tw: 4.6s; --d: -5s; }
.fireflies i:nth-child(4) { --x: 41%; --y: 78%; --dx: -44px; --dy: -28px; --dur: 26s; --tw: 7.2s; --d: -14s; }
.fireflies i:nth-child(5) { --x: 52%; --y: 30%; --dx: 28px; --dy: 52px; --dur: 21s; --tw: 5.8s; --d: -2s; }
.fireflies i:nth-child(6) { --x: 63%; --y: 88%; --dx: -38px; --dy: -42px; --dur: 17s; --tw: 4.2s; --d: -11s; }
.fireflies i:nth-child(7) { --x: 71%; --y: 12%; --dx: -32px; --dy: 36px; --dur: 24s; --tw: 6.8s; --d: -7s; }
.fireflies i:nth-child(8) { --x: 79%; --y: 56%; --dx: 46px; --dy: -30px; --dur: 14s; --tw: 5s; --d: -1s; }
.fireflies i:nth-child(9) { --x: 87%; --y: 34%; --dx: -26px; --dy: 48px; --dur: 22s; --tw: 6s; --d: -16s; }
.fireflies i:nth-child(10) { --x: 93%; --y: 74%; --dx: -40px; --dy: -36px; --dur: 18s; --tw: 4.8s; --d: -6s; }
.fireflies i:nth-child(11) { --x: 12%; --y: 90%; --dx: 34px; --dy: -50px; --dur: 25s; --tw: 7s; --d: -12s; }
.fireflies i:nth-child(12) { --x: 58%; --y: 6%; --dx: -36px; --dy: 44px; --dur: 20s; --tw: 5.5s; --d: -8s; }

@keyframes ff-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(var(--dx), var(--dy), 0); }
}

@keyframes ff-twinkle {
  0%, 100% { opacity: 0.12; }
  45% { opacity: 0.95; }
  62% { opacity: 0.45; }
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
}

.hero-copy {
  grid-column: 1 / span 7;
  display: grid;
  gap: clamp(22px, 2.6vw, 34px);
  justify-items: start;
}

.hero-copy .display {
  margin-block: clamp(2px, 0.8vw, 12px) clamp(4px, 1.4vw, 20px);
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
  margin-top: 6px;
}

.note {
  max-width: 62ch;
}

.demo-line {
  color: var(--ink-muted);
}

.demo-line a {
  color: var(--accent);
  font-weight: 500;
}

/* Hero figure: positions the device stage in the right columns. */
.hero-shot {
  position: relative;
  grid-column: 8 / span 5;
  display: grid;
  gap: 18px;
  justify-items: center;
}

/* Backdrop: the vine SVG at reduced opacity; text labels hidden by selector. */
.is-backdrop {
  position: absolute;
  inset: -12% -24%;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
}

.is-backdrop svg {
  width: 100%;
  height: 100%;
}

/* Hide the old vine text labels that no longer serve a purpose. */
.is-backdrop .vine .node text,
.is-backdrop .vine .branch {
  display: none;
}

.hero-shot figcaption {
  position: relative;
  z-index: 2;
  max-width: 44ch;
  justify-self: start;
}

/* ===== Vines: data travels as light ===== */
.vine {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.vine .stem,
.vine .twig,
.vine .tendril {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.vine .twig {
  stroke-width: 1.1;
  stroke-opacity: 0.8;
}

.vine .tendril {
  stroke: var(--leaf);
  stroke-width: 1.5;
}

.vine .leaf {
  fill: var(--leaf);
  stroke: var(--sage);
  stroke-opacity: 0.7;
}

.vine .ring {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 1.3;
}

.vine .core {
  fill: var(--accent);
}

.vine .node text {
  font: 400 12.5px var(--mono);
  letter-spacing: 0.01em;
  fill: var(--ink);
}

.vine .branch {
  font: 400 12px var(--mono);
  letter-spacing: 0.03em;
  fill: var(--sage);
}

.vine .packet {
  fill: var(--accent-hover);
}

.vine .halo {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0.35;
  animation: halo-pulse 6s var(--ease-breathe) infinite;
}

.vine .n1 .halo { animation-delay: 0s; }
.vine .n2 .halo { animation-delay: 1s; }
.vine .n3 .halo { animation-delay: 2s; }
.vine .n4 .halo { animation-delay: 3s; }
.vine .n5 .halo { animation-delay: 3.6s; }
.vine .n6 .halo { animation-delay: 4.6s; }

@keyframes halo-pulse {
  0%, 100% { opacity: 0.3; }
  38% { opacity: 1; }
}

/* Timeline: one step is 100ms */
.t1 { --t: 0.1s; } .t2 { --t: 0.2s; } .t3 { --t: 0.3s; } .t4 { --t: 0.4s; } .t6 { --t: 0.6s; }
.t7 { --t: 0.7s; } .t8 { --t: 0.8s; } .t9 { --t: 0.9s; } .t10 { --t: 1s; } .t11 { --t: 1.1s; }
.t12 { --t: 1.2s; } .t13 { --t: 1.3s; } .t14 { --t: 1.4s; } .t15 { --t: 1.5s; } .t16 { --t: 1.6s; }
.t17 { --t: 1.7s; } .t18 { --t: 1.8s; } .t19 { --t: 1.9s; } .t20 { --t: 2s; } .t21 { --t: 2.1s; }
.t22 { --t: 2.2s; } .t23 { --t: 2.3s; } .t24 { --t: 2.4s; } .t25 { --t: 2.5s; } .t26 { --t: 2.6s; }

.vine .twig { --dur: 0.45s; }
.vine .slow { --dur: 2.6s; }

.vine.is-playing .stem,
.vine.is-playing .twig,
.vine.is-playing .tendril {
  animation: vine-draw var(--dur, 0.8s) var(--ease-out) var(--t, 0s) both;
}

.vine.is-playing .node,
.vine.is-playing .branch {
  animation: vine-appear 0.7s var(--ease-out) var(--t, 0s) both;
}

.vine.is-playing .leaf {
  transform-box: fill-box;
  transform-origin: left center;
  animation: vine-grow 0.8s var(--ease-out) var(--t, 0s) both;
}

/* Vines wait undrawn until they are on screen (only when JavaScript can start them). */
.js .vine:not(.is-playing) :is(.stem, .twig, .tendril) {
  stroke-dashoffset: 1;
}

.js .vine:not(.is-playing) :is(.node, .leaf, .branch) {
  opacity: 0;
}

@keyframes vine-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes vine-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes vine-grow {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: none; }
}

/* ===== 02 The leak ===== */
.leak,
.cost,
.system,
.proof,
.founding,
.how,
.faq,
.builder {
  padding-bottom: var(--section);
}

.leak {
  padding-top: clamp(24px, 4vw, 64px);
  padding-bottom: clamp(80px, 10vw, 150px);
}

.leak-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}

.leak .statement {
  grid-column: 1 / span 5;
  position: sticky;
  top: 128px;
  max-width: 16ch;
}

.ledger {
  grid-column: 7 / span 6;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ledger-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--gap);
  padding: clamp(24px, 2.6vw, 38px) 0;
  border-top: 1px solid var(--hair-strong);
}

.ledger-row:last-child {
  border-bottom: 1px solid var(--hair-strong);
}

.ledger-row:nth-child(2) { --rd: 90ms; }
.ledger-row:nth-child(3) { --rd: 180ms; }
.ledger-row:nth-child(4) { --rd: 270ms; }

.ledger-k {
  padding-top: 0.55em;
  color: var(--accent);
}

.ledger-task {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem);
  font-weight: 300;
  line-height: 1.12;
  letter-spacing: -0.018em;
}

.ledger-note {
  margin-top: 10px;
  max-width: 44ch;
  color: var(--ink-muted);
}

.coda {
  width: min(100%, 66.7%);
  margin: clamp(72px, 9vw, 140px) 0 0 auto;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.1rem + 3.5vw, 4.5rem);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Full-bleed vein band: top and bottom dissolve into the ground; zooms in as it arrives. */
.band {
  position: relative;
  height: clamp(260px, 44vw, 600px);
  margin: 0 0 clamp(80px, 10vw, 150px);
  overflow: hidden;
  background: var(--bg-deep);
}

.band img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: invert(1) hue-rotate(180deg) saturate(0.55) brightness(0.7) contrast(1.15);
  opacity: 0.92;
  transition: transform 2.4s var(--ease-out);
}

.band::before,
.band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  height: 42%;
  pointer-events: none;
}

.band::before {
  top: 0;
  background: linear-gradient(var(--bg), rgb(11 18 14 / 0));
}

.band::after {
  bottom: 0;
  background: linear-gradient(rgb(11 18 14 / 0), var(--bg));
}

.band figcaption {
  position: absolute;
  z-index: 2;
  left: var(--gutter);
  bottom: 22px;
}

.js .band:not(.is-in) img {
  transform: scale(1.12);
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .band img {
      animation: band-zoom linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

@keyframes band-zoom {
  from { transform: scale(1.16); }
  to { transform: scale(1); }
}

/* ===== 03 The cost ===== */
.cost-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
}

.cost-copy {
  grid-column: 1 / span 5;
  display: grid;
  gap: 24px;
  justify-items: start;
}

.cost-copy .statement-xl {
  max-width: 9ch;
}

.formula {
  padding-top: 14px;
  border-top: 1px solid var(--hair-strong);
  color: var(--ink-muted);
}

.calc {
  grid-column: 7 / span 6;
}

.calc-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px var(--gap);
  padding: clamp(24px, 3vw, 44px);
}

.field {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.field label {
  font: 500 0.8125rem/1.35 var(--sans);
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

.opt {
  margin-left: 6px;
  color: var(--ink-faint);
}

input,
select,
textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 0;
  border-radius: 14px;
  background: rgb(7 12 9 / 0.6);
  box-shadow: inset 0 0 0 1px var(--hair-strong);
  font: 400 1rem/1.3 var(--sans);
  color: var(--ink);
  transition: box-shadow 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

input:hover,
select:hover,
textarea:hover {
  box-shadow: inset 0 0 0 1px rgb(236 231 216 / 0.3);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 14px;
}

.input-wrap {
  position: relative;
  display: block;
}

.input-wrap input {
  min-height: 68px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  -moz-appearance: textfield;
  appearance: textfield;
}

.input-wrap input::-webkit-outer-spin-button,
.input-wrap input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-wrap[data-unit]::after {
  content: attr(data-unit);
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  font: 400 0.9rem/1 var(--mono);
  color: var(--ink-faint);
  pointer-events: none;
}

.input-wrap[data-unit="$"]::after {
  right: auto;
  left: 18px;
}

.input-wrap[data-unit="$"] input {
  padding-left: 36px;
}

.calc-out {
  padding: clamp(24px, 3vw, 44px);
  border-top: 1px solid var(--hair);
  background: radial-gradient(90% 150% at 50% 130%, rgb(214 185 123 / 0.14), transparent 70%);
}

.out-label {
  color: var(--ink-muted);
}

.out-value {
  display: block;
  margin-top: 12px;
  font-family: var(--serif);
  font-size: clamp(3.5rem, 2rem + 5.4vw, 7rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  text-shadow: 0 0 64px rgb(214 185 123 / 0.3);
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
  transition: text-shadow 0.8s var(--ease-out);
}

.out-value.is-long {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
}

.out-value.is-updating {
  text-shadow: 0 0 90px rgb(214 185 123 / 0.6);
}

/* ===== 04 The system ===== */
.system-title {
  max-width: 17ch;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.panels {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}

.panel .bezel-core {
  height: 100%;
}

/* All three panels full-width for device compositions. */
.panel-a,
.panel-b,
.panel-c {
  grid-column: 1 / -1;
}

.panel h3 {
  margin-bottom: 18px;
  font-size: var(--step-h3);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.panel-a h3 {
  font-size: var(--step-panel);
  line-height: 1.04;
  max-width: 16ch;
}

.panel-text p:not(.tag) {
  max-width: 54ch;
  color: var(--ink-muted);
}

.tag {
  margin-bottom: 20px;
  color: var(--ink-faint);
}

.tag span {
  color: var(--accent);
}

/* Panel A: text left ~6 cols, phone right ~4 cols starting col 8. */
.panel-a .bezel-core {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(26px, 4vw, 56px);
}

.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.specs li,
.plan-list li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--hair);
}

.specs li::before,
.plan-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  margin-top: 0.62em;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}

.specs li {
  color: var(--ink-muted);
}

/* Panel A phone figure: right column, centered, no tilt. */
.pa-phone-fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  justify-self: center;
  width: 100%;
}

.pa-phone-fig .dv-stage {
  justify-content: center;
}

.pa-phone-fig figcaption {
  align-self: flex-start;
  max-width: 38ch;
}

/* Panel B: vine left, phone overlapping vine's right edge, text right. */
.panel-b .bezel-core {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.6fr) minmax(0, 1fr);
  grid-template-areas: "vine phone text";
  column-gap: 0;
  align-items: center;
  padding: clamp(24px, 3vw, 44px);
}

.panel-vine {
  grid-area: vine;
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  justify-content: center;
}

.panel-vine .vine {
  width: 100%;
  max-width: 380px;
}

.panel-vine figcaption {
  max-width: 34ch;
  margin-top: 18px;
}

/* Phone in panel B overlaps vine's right edge. */
.pb-phone-fig {
  grid-area: phone;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 2;
  margin-left: -18%;
}

.pb-phone-fig .dv-stage {
  justify-content: center;
}

.pb-phone-fig figcaption {
  align-self: flex-start;
  max-width: 30ch;
}

/* Text in panel B: right column. */
.pb-text {
  grid-area: text;
  padding-left: clamp(16px, 2.4vw, 40px);
  align-self: center;
}

/* Composer bar pinned to the bottom of the SMS screen; decorative. */
.dv-composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--app-line);
  flex-shrink: 0;
  margin-top: auto;
}

.dv-composer-pill {
  flex: 1;
  height: 28px;
  border-radius: 14px;
  background: #e8e4d8;
  box-shadow: inset 0 0 0 1px var(--app-line);
  display: block;
}

.dv-composer-send {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--app-accent);
  color: var(--app-on-accent);
  flex-shrink: 0;
}

.dv-composer-send svg {
  width: 14px;
  height: 14px;
}

/* Panel C desktop: text top-left, devices below spanning full width. */
.panel-c .bezel-core {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: clamp(24px, 3vw, 40px);
  padding: clamp(26px, 4vw, 56px);
  align-items: start;
}

.pc-text {
  grid-column: 1 / span 5;
  align-self: start;
}

/* Devices figure spans full width below the text. */
.pc-devices-fig {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pc-devices-fig figcaption {
  align-self: flex-start;
  max-width: 44ch;
}

/* Panel C stage: laptop dominates left, phone overlaps its right edge. */
.pc-stage {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  position: relative;
  overflow: visible;
}

/* Phone in panel C: no tilt, overlaps laptop right edge, bottom extends below base. */
.dv-phone-c {
  position: relative;
  flex-shrink: 0;
  z-index: 2;
  width: clamp(160px, 14vw, 230px);
  margin-left: clamp(-100px, -7vw, -80px);
  margin-bottom: clamp(-28px, -2vw, -20px);
  box-shadow: 0 8px 32px -8px rgb(4 8 6 / 0.6), 0 0 0 1px rgb(214 185 123 / 0.14);
}

/* Laptop site: richer two-column hero layout. */
.dv-ls-hero {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 10px;
  flex: 1;
  min-height: 0;
}

/* Two-column hero inside the laptop screen. */
.dv-ls-hero-inner {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.dv-ls-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

/* Forest-green illustration panel on the right side of the laptop hero. */
.dv-ls-illustration {
  flex-shrink: 0;
  width: 36%;
  border-radius: 8px;
  background: var(--app-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.dv-ls-illustration svg {
  width: 100%;
  height: auto;
  max-height: 80px;
}

/* Service cards row at the bottom of the laptop hero. */
.dv-ls-services-row {
  display: flex;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--app-line);
  flex-shrink: 0;
}

.dv-ls-service-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border-radius: 6px;
  background: rgb(30 58 47 / 0.07);
  font-family: var(--sans);
  font-size: 7.5px;
  font-weight: 500;
  color: var(--app-ink);
  text-align: center;
}

.dv-ls-service-card svg {
  width: 18px;
  height: 18px;
  color: var(--app-accent);
}

/* Mobile site top bar with brand and menu icon. */
.dv-ms-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 6px;
  border-bottom: 1px solid var(--app-line);
  flex-shrink: 0;
}

.dv-ms-brand-text {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  color: var(--app-ink);
  letter-spacing: -0.01em;
}

.dv-ms-menu {
  display: flex;
  align-items: center;
  color: var(--app-ink);
}

/* Mobile site main content area. */
.dv-ms-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 8px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Mobile site headline. */
.dv-ms-hero-text {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--app-ink);
  line-height: 1.22;
  letter-spacing: -0.02em;
}

/* Mobile site buttons stacked full-width. */
.dv-ms-btns {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dv-ms-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  border-radius: 11px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.dv-ms-btn-primary {
  background: var(--app-accent);
  color: var(--app-on-accent);
}

.dv-ms-btn-outline {
  background: transparent;
  color: var(--app-ink);
  box-shadow: inset 0 0 0 1px var(--app-line);
}

/* Mobile site services as compact icon-label rows. */
.dv-ms-services-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dv-ms-svc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 9px;
  color: var(--app-muted);
  padding: 3px 0;
  border-top: 1px solid var(--app-line);
}

.dv-ms-svc-row svg {
  color: var(--app-accent);
  flex-shrink: 0;
}

/* ===== Devices: product shots for Bramblewood Plumbing (spec 2b) ===== */

/* Stage: aria-hidden wrapper that holds all device layers. */
.dv-stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Phone shell: titanium-dark frame with gold rim glow. */
.dv-phone {
  position: relative;
  width: clamp(240px, 22vw, 300px);
  aspect-ratio: 9 / 19.5;
  border-radius: 46px;
  padding: 10px;
  background: #1a221d;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 0 0 1px rgb(214 185 123 / 0.18),
    0 0 40px rgb(214 185 123 / 0.10),
    0 40px 80px -20px rgb(4 8 6 / 0.8);
  flex-shrink: 0;
}

/* Screen: fills the bezel, light app background. */
.dv-screen {
  --app-bg: #f3efe4;
  --app-ink: #1b2a22;
  --app-muted: #5c6b61;
  --app-line: #dcd6c6;
  --app-accent: #1e3a2f;
  --app-on-accent: #f3efe4;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: var(--app-bg);
  display: flex;
  flex-direction: column;
}

/* Glass reflection across the screen surface. */
.dv-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 36px;
  background: linear-gradient(115deg, rgb(255 255 255 / 0.16) 0%, transparent 38%);
  pointer-events: none;
  z-index: 10;
}

/* Dynamic island pill centered at the top. */
.dv-island {
  width: 84px;
  height: 24px;
  background: #0b0f0d;
  border-radius: 12px;
  margin: 10px auto 0;
  flex-shrink: 0;
}

/* Status bar: time left, icons right. */
.dv-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 2px;
  flex-shrink: 0;
}

.dv-time {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  color: var(--app-ink);
  letter-spacing: 0.02em;
}

.dv-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--app-ink);
}

/* App header block: business name and role label. */
.dv-app-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--app-line);
  flex-shrink: 0;
}

.dv-app-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--app-ink);
  line-height: 1.2;
}

.dv-app-sub {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--app-muted);
  margin-top: 2px;
  letter-spacing: 0.03em;
}

/* Caller row: number on the left, timer on the right. */
.dv-caller-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 6px;
  flex-shrink: 0;
}

.dv-caller-num {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--app-ink);
}

.dv-caller-timer {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--app-muted);
  letter-spacing: 0.06em;
}

/* Waveform: 24 bars that animate with scaleY. */
.dv-wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 36px;
  padding: 0 16px;
  flex-shrink: 0;
}

.dv-wave span {
  display: block;
  width: 3px;
  border-radius: 2px;
  background: var(--app-accent);
  animation: wave-bar 1.1s var(--ease-breathe) infinite alternate;
  transform-origin: center;
}

.dv-wave span:nth-child(1)  { height: 6px;  animation-delay: 0ms; }
.dv-wave span:nth-child(2)  { height: 14px; animation-delay: 60ms; }
.dv-wave span:nth-child(3)  { height: 22px; animation-delay: 120ms; }
.dv-wave span:nth-child(4)  { height: 30px; animation-delay: 180ms; }
.dv-wave span:nth-child(5)  { height: 20px; animation-delay: 240ms; }
.dv-wave span:nth-child(6)  { height: 12px; animation-delay: 300ms; }
.dv-wave span:nth-child(7)  { height: 26px; animation-delay: 360ms; }
.dv-wave span:nth-child(8)  { height: 30px; animation-delay: 420ms; }
.dv-wave span:nth-child(9)  { height: 18px; animation-delay: 480ms; }
.dv-wave span:nth-child(10) { height: 8px;  animation-delay: 540ms; }
.dv-wave span:nth-child(11) { height: 28px; animation-delay: 600ms; }
.dv-wave span:nth-child(12) { height: 24px; animation-delay: 660ms; }
.dv-wave span:nth-child(13) { height: 24px; animation-delay: 720ms; }
.dv-wave span:nth-child(14) { height: 28px; animation-delay: 780ms; }
.dv-wave span:nth-child(15) { height: 8px;  animation-delay: 840ms; }
.dv-wave span:nth-child(16) { height: 18px; animation-delay: 900ms; }
.dv-wave span:nth-child(17) { height: 30px; animation-delay: 960ms; }
.dv-wave span:nth-child(18) { height: 26px; animation-delay: 1020ms; }
.dv-wave span:nth-child(19) { height: 12px; animation-delay: 1080ms; }
.dv-wave span:nth-child(20) { height: 20px; animation-delay: 1140ms; }
.dv-wave span:nth-child(21) { height: 30px; animation-delay: 1200ms; }
.dv-wave span:nth-child(22) { height: 22px; animation-delay: 1260ms; }
.dv-wave span:nth-child(23) { height: 14px; animation-delay: 1320ms; }
.dv-wave span:nth-child(24) { height: 6px;  animation-delay: 1380ms; }

@keyframes wave-bar {
  from { transform: scaleY(0.25); }
  to   { transform: scaleY(1); }
}

/* Transcript sequence container. */
.dv-seq {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 12px 10px;
  flex: 1;
  overflow: hidden;
}

.dv-transcript {
  border-top: 1px solid var(--app-line);
}

/* Typing indicator: three dots blink in sequence. */
.dv-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  align-self: flex-start;
}

.dv-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--app-muted);
  animation: typing-dot 1.4s var(--ease-breathe) infinite;
}

.dv-typing span:nth-child(1) { animation-delay: 0ms; }
.dv-typing span:nth-child(2) { animation-delay: 200ms; }
.dv-typing span:nth-child(3) { animation-delay: 400ms; }

@keyframes typing-dot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-4px); }
}

/* Hide typing indicator once its paired message has appeared. */
.dv-typing.is-gone {
  display: none;
}

/* Transcript lines: caller vs assistant layout. */
.dv-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 82%;
}

.dv-line-assist {
  align-self: flex-start;
}

.dv-line-caller {
  align-self: flex-end;
  align-items: flex-end;
}

.dv-who {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--app-muted);
  letter-spacing: 0.03em;
}

.dv-line p {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  border-radius: 14px;
  padding: 7px 11px;
}

.dv-line-assist p {
  background: var(--app-accent);
  color: var(--app-on-accent);
  border-bottom-left-radius: 4px;
}

.dv-line-caller p {
  background: #ffffff;
  color: var(--app-ink);
  box-shadow: inset 0 0 0 1px var(--app-line);
  border-bottom-right-radius: 4px;
}

/* Booking chip: pill in accent with a gold ring dot. */
.dv-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: center;
  padding: 5px 14px 5px 10px;
  border-radius: 999px;
  background: var(--app-accent);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--app-on-accent);
  margin-top: 4px;
}

.dv-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent), 0 0 0 2px rgb(214 185 123 / 0.3);
  flex-shrink: 0;
}

/* Floating glass notification card. */
.dv-note {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 18px;
  background: rgb(17 26 21 / 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--hair);
  z-index: 4;
  min-width: 180px;
  max-width: 252px;
}

.dv-note-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow);
  flex-shrink: 0;
}

.dv-note-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dv-note-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
}

.dv-note-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Hero note positions: A mid-left, B lower-right. Both stay clear of the headline and inside the wrap. */
.dv-note-a {
  top: 40%;
  left: -4%;
}

.dv-note-b {
  top: 70%;
  right: -2%;
}

/* Call controls: three round buttons at the foot of the call screen (decorative). */
.dv-controls {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: auto;
  padding: 12px 0 22px;
  flex-shrink: 0;
}

.dv-ctl {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e4ddcc;
  color: var(--app-ink);
}

.dv-ctl svg {
  width: 18px;
  height: 18px;
}

.dv-ctl-end {
  background: var(--app-accent);
  color: var(--app-on-accent);
}

/* On the call screen the waveform owns the open middle; the transcript sits above the controls. */
.hero-shot .dv-wave {
  flex: 1 1 auto;
  height: auto;
  min-height: 56px;
}

.hero-shot .dv-transcript {
  flex: 0 0 auto;
}

/* Bubble: generic message bubble used in panel B. */
.dv-bubble {
  border-radius: 18px;
  padding: 8px 13px;
  max-width: 78%;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
}

.dv-bubble-biz {
  background: var(--app-accent);
  color: var(--app-on-accent);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.dv-bubble-cust {
  background: #ffffff;
  color: var(--app-ink);
  box-shadow: inset 0 0 0 1px var(--app-line);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

/* Sequence state: children hidden until .is-playing (only when JS loaded). */
.js .dv-seq > * {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s var(--ease-out) calc(var(--i, 0) * 350ms),
    transform 0.5s var(--ease-out) calc(var(--i, 0) * 350ms);
}

.js .dv-seq.is-playing > * {
  opacity: 1;
  transform: none;
}

/* Tilt: only from 900px up. */
.dv-tilt {
  /* default: no tilt below 900px */
}

/* Laptop: thin bezel, 16:10 screen. */
.dv-laptop {
  position: relative;
  width: clamp(320px, 40vw, 520px);
}

.dv-laptop-screen {
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  padding: 10px;
  background: #1a221d;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.08),
    0 0 0 1px rgb(214 185 123 / 0.18),
    0 0 24px rgb(214 185 123 / 0.08);
}

.dv-laptop-screen .dv-screen {
  border-radius: 8px;
}

.dv-laptop-screen .dv-screen::after {
  border-radius: 8px;
}

.dv-laptop-base {
  width: 112%;
  height: 13px;
  margin: 0 -6%;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #1a221d 0%, #0f1612 100%);
  box-shadow: 0 4px 24px -4px rgb(4 8 6 / 0.7);
}

/* Hero stage layout: phone centered with room for overlapping notes. */
.hero-shot .dv-stage {
  position: relative;
  padding: 28px 0;
}

/* Transcript phone in panel A: number label above the sequence. */
.dv-tr-num {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--app-muted);
  text-align: center;
  padding: 4px 16px 6px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* Transcript sequence: each line is timestamp + bubble row. */
.dv-seq-transcript {
  border-top: 1px solid var(--app-line);
  gap: 6px;
  padding: 8px 10px 10px;
}

.dv-tr-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 86%;
}

.dv-tr-assist {
  align-self: flex-start;
}

.dv-tr-caller {
  align-self: flex-end;
  align-items: flex-end;
}

/* Timestamp label: mono, faint, above each bubble. */
.dv-tr-ts {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--app-muted);
  letter-spacing: 0.04em;
  margin-bottom: 1px;
}

/* Transcript bubbles inherit .dv-line p styles, just use p tag. */
.dv-tr-assist p {
  margin: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.42;
  border-radius: 12px;
  padding: 6px 10px;
  background: var(--app-accent);
  color: var(--app-on-accent);
  border-bottom-left-radius: 3px;
}

.dv-tr-caller p {
  margin: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.42;
  border-radius: 12px;
  padding: 6px 10px;
  background: #ffffff;
  color: var(--app-ink);
  box-shadow: inset 0 0 0 1px var(--app-line);
  border-bottom-right-radius: 3px;
}

/* Summary row: small check icon + text at foot of transcript. */
.dv-summary-row {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--app-muted);
}

/* SMS header in panel B phone. */
.dv-sms-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px 6px;
  border-bottom: 1px solid var(--app-line);
  flex-shrink: 0;
}

/* SMS sequence. */
.dv-seq-sms {
  padding: 8px 10px 10px;
  gap: 6px;
}

/* System row: centered mono label for "Missed call". */
.dv-sms-system {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--app-muted);
  text-align: center;
  padding: 2px 0 4px;
  letter-spacing: 0.03em;
}

/* Laptop site screen: overrides dv-screen flex flow for site layout. */
.dv-laptop-site {
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Laptop top nav bar. */
.dv-ls-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-bottom: 1px solid var(--app-line);
  flex-shrink: 0;
}

.dv-ls-brand {
  font-size: 9px;
  font-weight: 700;
  color: var(--app-ink);
  letter-spacing: -0.01em;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dv-ls-num {
  font-size: 8px;
  color: var(--app-muted);
  white-space: nowrap;
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* "Book a visit" button in the nav bar. */
.dv-ls-book-btn {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 8px;
  font-weight: 600;
  color: var(--app-on-accent);
  background: var(--app-accent);
  white-space: nowrap;
  flex-shrink: 0;
}

.dv-ls-headline {
  font-size: 13px;
  font-weight: 700;
  color: var(--app-ink);
  line-height: 1.22;
  letter-spacing: -0.02em;
  max-width: 22ch;
}

.dv-ls-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.dv-ls-btn {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 11px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
  white-space: nowrap;
}

.dv-ls-btn-primary {
  background: var(--app-accent);
  color: var(--app-on-accent);
}

.dv-ls-btn-outline {
  background: transparent;
  color: var(--app-ink);
  box-shadow: inset 0 0 0 1px var(--app-line);
}

/* Stagger --i on transcript lines so the seq animation works. */
.dv-seq-transcript > *:nth-child(1)  { --i: 0; }
.dv-seq-transcript > *:nth-child(2)  { --i: 1; }
.dv-seq-transcript > *:nth-child(3)  { --i: 2; }
.dv-seq-transcript > *:nth-child(4)  { --i: 3; }
.dv-seq-transcript > *:nth-child(5)  { --i: 4; }
.dv-seq-transcript > *:nth-child(6)  { --i: 5; }
.dv-seq-transcript > *:nth-child(7)  { --i: 6; }

/* Stagger --i on SMS rows. */
.dv-seq-sms > *:nth-child(1)  { --i: 0; }
.dv-seq-sms > *:nth-child(2)  { --i: 1; }
.dv-seq-sms > *:nth-child(3)  { --i: 2; }
.dv-seq-sms > *:nth-child(4)  { --i: 3; }
.dv-seq-sms > *:nth-child(5)  { --i: 4; }
.dv-seq-sms > *:nth-child(6)  { --i: 5; }
.dv-seq-sms > *:nth-child(7)  { --i: 6; }
.dv-seq-sms > *:nth-child(8)  { --i: 7; }
.dv-seq-sms > *:nth-child(9)  { --i: 8; }
.dv-seq-sms > *:nth-child(10) { --i: 9; }

/* Panel C review fixes (2026-10-26; made fully proportional 2026-10-28). The laptop site scales with its own width
   (container units) like a screenshot of a real site: no pixel floors, so a small laptop shrinks instead of piling
   its rows on top of each other. The declaration before each cqw line is the fallback. */
.dv-laptop-site { container-type: inline-size; }

.dv-ls-bar { gap: 10px; gap: 1.4cqw; padding: 9px 14px; padding: min(1.7cqw, 14px) min(2cqw, 18px); }
.dv-ls-brand { font-size: 10px; font-size: min(1.8cqw, 14px); }
.dv-ls-num { font-size: 9px; font-size: min(1.4cqw, 12px); }
.dv-ls-book-btn { height: 20px; height: min(3.2cqw, 28px); padding: 0 10px; padding: 0 min(1.6cqw, 14px); font-size: 9px; font-size: min(1.4cqw, 12px); border-radius: 999px; }

.dv-ls-hero { padding: 12px; padding: min(2.4cqw, 22px); gap: 10px; gap: min(2cqw, 18px); }
.dv-ls-hero-inner { gap: 12px; gap: min(2.4cqw, 22px); }
.dv-ls-hero-copy { justify-content: center; gap: 12px; gap: min(2.2cqw, 20px); }
.dv-ls-headline { font-size: 14px; font-size: min(3.6cqw, 28px); max-width: 15ch; }
.dv-ls-btns { gap: 6px; gap: 0.8cqw; }
.dv-ls-btn { height: 26px; height: min(4.2cqw, 36px); padding: 0 12px; padding: 0 min(2cqw, 18px); border-radius: 999px; font-size: 10px; font-size: min(1.6cqw, 14px); }
.dv-ls-illustration { width: 40%; padding: 12px; padding: min(2.6cqw, 24px); border-radius: 8px; border-radius: 1.1cqw; }
.dv-ls-illustration svg { width: 100%; max-height: 100%; height: auto; }
.dv-ls-services-row { gap: 8px; gap: min(1.6cqw, 14px); padding-top: 12px; padding-top: min(2cqw, 18px); }
.dv-ls-service-card { font-size: 9px; font-size: min(1.6cqw, 13px); gap: 6px; gap: 0.8cqw; padding: 8px 4px; padding: min(1.8cqw, 16px) 4px; border-radius: 10px; border-radius: 1.4cqw; }
.dv-ls-service-card svg { width: 20px; height: 20px; width: min(3.4cqw, 30px); height: min(3.4cqw, 30px); }

/* Hinge: lighter than the page so the laptop reads as a laptop, with the small thumb notch. */
.dv-laptop-base {
  height: 14px;
  background: linear-gradient(180deg, #2b362f 0%, #131b16 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 0 1px rgb(214 185 123 / 0.12), 0 18px 34px -12px rgb(4 8 6 / 0.85);
}

.dv-laptop-base::before {
  content: "";
  display: block;
  width: 16%;
  height: 4px;
  margin: 0 auto;
  border-radius: 0 0 6px 6px;
  background: #0b100d;
}

/* Phone site screen: bigger type and a real sticky bar (its rules went missing in the rebuild, so the labels
   inherited cream text on a cream screen). */
.dv-ms-content { gap: 14px; padding: 14px 14px 10px; }
.dv-ms-hero-text { font-size: 16px; line-height: 1.2; }
.dv-ms-btn { height: 36px; border-radius: 999px; font-size: 12px; }
.dv-ms-services-list { gap: 0; }
.dv-ms-svc-row { gap: 10px; font-size: 12px; padding: 12px 0; }
.dv-ms-svc-row svg { width: 20px; height: 20px; }

.dv-ms-sticky {
  display: flex;
  margin-top: auto;
  border-top: 1px solid var(--app-line);
  background: var(--app-bg);
  flex-shrink: 0;
}

.dv-ms-tab {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 13px 4px 18px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--app-muted);
}

.dv-ms-tab-primary {
  background: var(--app-accent);
  color: var(--app-on-accent);
  font-weight: 600;
}

/* Desktop: keep the laptop's top bar and content clear of the strip the phone overlaps. */
@media (min-width: 900px) {
  .pc-stage .dv-ls-bar,
  .pc-stage .dv-ls-hero { padding-right: calc(clamp(80px, 8vw, 110px) + 14px); }
}

/* ===== 05 Proof ===== */
.proof-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 88px);
}

.proof-head h2 {
  grid-column: 1 / span 7;
}

.proof-head .intro {
  grid-column: 9 / span 4;
  margin-bottom: 0.7em;
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
}

.case-demo { grid-column: 1 / -1; }
.case-1 { grid-column: span 7; }
.case-2 { grid-column: span 5; }
.case-3 { grid-column: span 5; }
.case-4 { grid-column: span 7; }

.case:nth-child(even) { --rd: 110ms; }

.case .bezel-core {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 280px;
  padding: clamp(26px, 3vw, 44px);
}

.case h3 {
  max-width: 20ch;
  font-size: var(--step-h3);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.case p:not(.tag):not(.note) {
  max-width: 52ch;
  color: var(--ink-muted);
}

.case .tag {
  margin-bottom: 6px;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin-top: auto;
  padding-top: 10px;
}

.case-n {
  position: absolute;
  top: 6px;
  right: clamp(18px, 2.4vw, 36px);
  font-family: var(--serif);
  font-size: clamp(5.5rem, 3rem + 6.4vw, 10rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgb(236 231 216 / 0.12);
  pointer-events: none;
  user-select: none;
}

.case-demo .bezel-core {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-height: 0;
}

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--glow);
  animation: dot-pulse 3.2s var(--ease-breathe) infinite;
}

.demo-number {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1.4rem + 3.8vw, 5rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  text-decoration: none;
}

.case-demo-call {
  display: grid;
  gap: 14px;
}

.check-line {
  max-width: 64ch;
  margin: clamp(48px, 6vw, 88px) auto 0;
  text-align: center;
}

/* ===== 06 Founding spots ===== */
.founding-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 80px);
}

.founding-head h2 {
  grid-column: 1 / span 6;
  max-width: 10ch;
}

.founding-head .intro {
  grid-column: 8 / span 5;
  margin-bottom: 0.7em;
}

.plans {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: end;
}

.plan-1 { grid-column: span 3; }
.plan-2 { grid-column: span 5; --rd: 100ms; }
.plan-3 { grid-column: span 4; --rd: 200ms; }

.plan .bezel-core {
  display: grid;
  gap: 24px;
  padding: clamp(24px, 2.6vw, 40px);
}

.plan-2 .bezel-core {
  padding-block: clamp(34px, 3.6vw, 60px);
}

.plan-name {
  font-size: var(--step-h3);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.plan-price {
  display: grid;
  gap: 8px;
}

.plan-price .amount {
  font-family: var(--serif);
  font-size: clamp(3.25rem, 2rem + 3.6vw, 5.75rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.is-lit .plan-price .amount {
  color: var(--accent);
}

.plan-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-list li {
  color: var(--ink-muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

.terms {
  columns: 2;
  column-gap: clamp(32px, 5vw, 96px);
  margin: clamp(48px, 6vw, 88px) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair-strong);
}

.terms li {
  break-inside: avoid;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair-strong);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.founding-cta {
  margin-top: clamp(36px, 4vw, 56px);
}

/* ===== 07 How it works: four steps joined by a thin vine line ===== */
.how .statement-xl {
  max-width: 13ch;
}

.steps-wrap {
  position: relative;
  margin-top: clamp(48px, 6vw, 88px);
}

.steps-vine {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  overflow: visible;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent);
  mask-image: linear-gradient(90deg, #000 70%, transparent);
}

.steps-line {
  fill: none;
  stroke: var(--sage);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.js .steps-wrap:not(.is-in) .steps-line {
  stroke-dashoffset: 1;
}

.steps-wrap.is-in .steps-line {
  transition: stroke-dashoffset 2.6s var(--ease-out) 0.3s;
}

.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  padding: 76px clamp(16px, 2.4vw, 40px) 0 0;
}

.step:nth-child(1) { --k: 0; }
.step:nth-child(2) { --k: 1; }
.step:nth-child(3) { --k: 2; }
.step:nth-child(4) { --k: 3; }

.step-node {
  position: absolute;
  top: 20px;
  left: 0;
  width: 13px;
  height: 13px;
  margin-top: -6.5px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.step-node::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--accent);
}

.step-node i {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(214 185 123 / 0.5), transparent 68%);
  opacity: 0.3;
  animation: halo-pulse 6s var(--ease-breathe) infinite;
  animation-delay: calc(var(--k) * 1.1s);
}

.step-n {
  display: block;
  margin-bottom: 14px;
  color: var(--accent);
}

.step h3 {
  margin-bottom: 14px;
  font-size: var(--step-h3);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.step p {
  max-width: 32ch;
  color: var(--ink-muted);
}

/* ===== 08 Questions ===== */
.qa {
  margin: clamp(40px, 5vw, 72px) 0 0;
  border-top: 1px solid var(--hair-strong);
}

.qa-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: baseline;
  padding: clamp(24px, 2.8vw, 38px) 0;
  border-bottom: 1px solid var(--hair-strong);
}

.qa dt {
  grid-column: 1 / span 5;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  font-weight: 300;
  line-height: 1.16;
  letter-spacing: -0.018em;
}

.qa dd {
  grid-column: 7 / span 6;
  max-width: 58ch;
  color: var(--ink-muted);
}

/* ===== 09 Who builds it ===== */
.builder-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
}

.portrait {
  grid-column: 1 / span 4;
}

.portrait .bezel-core::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(11 18 14 / 0) 52%, rgb(11 18 14 / 0.55)),
    linear-gradient(0deg, rgb(61 87 65 / 0.22), rgb(61 87 65 / 0.22));
  mix-blend-mode: multiply;
  pointer-events: none;
}

.portrait img {
  width: 100%;
  height: auto;
  filter: saturate(0.88) brightness(0.94) contrast(1.03);
}

.portrait figcaption {
  margin-top: 16px;
  padding-left: 8px;
}

.builder-text {
  grid-column: 6 / span 7;
  display: grid;
  gap: 24px;
  align-content: center;
}

.builder-text .statement-xl {
  max-width: 11ch;
  margin-bottom: 8px;
}

.builder-text p:not(.index) {
  max-width: 52ch;
  font-size: var(--step-lede);
  line-height: 1.6;
  color: var(--ink-muted);
}

/* ===== 10 Start ===== */
.start {
  position: relative;
  padding: clamp(24px, 4vw, 64px) 0 var(--section);
  overflow: clip;
}

.start::before {
  content: "";
  position: absolute;
  left: -12%;
  top: 4%;
  width: 72%;
  height: 80%;
  background: radial-gradient(closest-side, rgb(214 185 123 / 0.09), transparent);
  pointer-events: none;
}

.start-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}

.start-copy {
  grid-column: 1 / span 6;
  display: grid;
  gap: 28px;
  justify-items: start;
  position: sticky;
  top: 120px;
}

.alt-contact {
  display: grid;
  gap: 6px;
  color: var(--ink-muted);
}

.alt-contact a {
  color: var(--ink);
}

.alt-contact a:hover {
  color: var(--accent);
}

.form-shell {
  grid-column: 7 / span 6;
}

.lead-form {
  display: grid;
  gap: 28px;
  padding: clamp(24px, 3vw, 44px);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px var(--gap);
}

.field-wide {
  grid-column: 1 / -1;
}

textarea {
  min-height: 116px;
  resize: vertical;
}

select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 46px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' fill='none' stroke='%23d6b97b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
}

select:required:invalid {
  color: var(--ink-faint);
}

select option {
  background: var(--surface-2);
  color: var(--ink);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--error);
}

.field-error {
  font: 500 0.8125rem/1.4 var(--sans);
  color: var(--error);
}

.field-error:empty,
.form-status:empty {
  display: none;
}

.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-foot {
  display: grid;
  gap: 18px;
  justify-items: start;
}

.form-foot .button {
  width: 100%;
  justify-content: space-between;
}

.form-status {
  font: 500 0.875rem/1.45 var(--sans);
  color: var(--ink-muted);
}

.form-status.is-error {
  color: var(--error);
}

/* ===== Footer ===== */
.footer {
  padding-top: 36px;
  padding-bottom: 44px;
  border-top: 1px solid var(--hair);
}

/* ===== Inner pages: /audit/, /thanks/, /privacy/, 404 ===== */
.page-hero {
  position: relative;
  display: grid;
  justify-items: start;
  gap: clamp(22px, 2.6vw, 34px);
  padding-top: clamp(148px, 19vh, 208px);
  padding-bottom: clamp(48px, 7vw, 96px);
}

.page-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 78%;
  height: 100%;
  background: radial-gradient(closest-side at 28% 34%, rgb(61 87 65 / 0.3), transparent 78%);
  pointer-events: none;
  z-index: -1;
}

.page-hero .display-md {
  max-width: 17ch;
}

.audit-body {
  padding-bottom: var(--section);
}

.audit-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}

.audit-report {
  grid-column: 1 / span 5;
  position: sticky;
  top: 120px;
}

.audit-grid .form-shell {
  grid-column: 7 / span 6;
}

.report-list {
  margin: clamp(24px, 3vw, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.report-list li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--gap);
  padding: 22px 0;
  border-top: 1px solid var(--hair-strong);
}

.report-list li:last-child {
  border-bottom: 1px solid var(--hair-strong);
}

.report-list p {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.014em;
}

.audit-faq {
  padding-bottom: var(--section);
}

.back-link {
  margin-top: 36px;
}

.thanks .lede {
  max-width: 56ch;
}

.next-title {
  margin-top: clamp(16px, 3vw, 40px);
}

.next-list {
  width: min(100%, 720px);
  margin-top: 0;
}

.fallback {
  max-width: 62ch;
  margin-top: 12px;
}

.err-only {
  display: none;
}

.is-error .ok-only {
  display: none;
}

.is-error .err-only {
  display: revert;
}

.thanks .lede a {
  color: var(--accent);
}

.legal {
  padding-bottom: var(--section);
}

.legal-block {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding: clamp(24px, 2.8vw, 36px) 0;
  border-top: 1px solid var(--hair-strong);
}

.legal-block h2 {
  grid-column: 1 / span 4;
  font-size: var(--step-h3);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.legal-block p {
  grid-column: 5 / span 7;
  max-width: 62ch;
  color: var(--ink-muted);
}

.updated {
  padding-top: 24px;
  border-top: 1px solid var(--hair-strong);
}

/* ===== Stagger for sibling reveals ===== */
.qa-row:nth-child(2) { --rd: 60ms; }
.qa-row:nth-child(3) { --rd: 120ms; }
.qa-row:nth-child(4) { --rd: 180ms; }
.legal-block:nth-child(2) { --rd: 60ms; }
.legal-block:nth-child(3) { --rd: 120ms; }

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .hero-copy { grid-column: 1 / span 7; }
  .hero-shot { grid-column: 8 / span 5; }
  .plan .bezel-core { padding: 24px; }
  .case-demo .bezel-core { grid-template-columns: 1fr; }

  /* Pull notes in so they do not leave the column. */
  .dv-note-a { left: 0; }
  .dv-note-b { right: 0; }

  /* Panel B: tighten the three-column layout. */
  .panel-b .bezel-core {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr) minmax(0, 0.9fr);
  }
}

/* Panel C desktop: laptop large, phone overlapping right edge without tilt. */
@media (min-width: 900px) {
  /* Tilt only from 900px and up. */
  .dv-tilt {
    transform: rotate(-5deg);
  }

  /* Panel C laptop: about 64% of the composition, anchored left. */
  .pc-stage .dv-laptop {
    width: clamp(480px, 52vw, 760px);
    flex-shrink: 0;
  }

  /* Panel C phone: 220-240px, no tilt, overlaps laptop right edge. */
  .dv-phone-c {
    width: clamp(200px, 16vw, 240px);
    margin-left: clamp(-110px, -8vw, -80px);
    margin-bottom: clamp(-32px, -2.5vw, -20px);
    transform: none;
  }
}

@media (max-width: 899px) {
  .hero { min-height: 0; padding-top: 124px; }
  .hero-copy { grid-column: 1 / -1; }
  .hero-shot {
    grid-column: 1 / -1;
    width: min(100%, 340px);
    margin: clamp(48px, 9vw, 72px) auto 0;
  }
  .ambient { width: 100vw; opacity: 0.16; }

  /* Stack the device, no tilt, notes stay inside the stage. */
  .dv-tilt {
    transform: none;
    width: clamp(220px, 68vw, 280px);
  }

  /* Below 900px the cards leave the screen alone: they sit in a row under the phone, overlapping only its foot. */
  .hero-shot .dv-stage {
    flex-wrap: wrap;
    column-gap: 10px;
  }

  .hero-shot .dv-note {
    position: relative;
    inset: auto;
    margin-top: -40px;
  }

  /* Constrain notes to fit within 340px max-width. */
  .dv-note {
    max-width: 46%;
    min-width: 0;
  }

  .dv-note-title {
    font-size: 12px;
    white-space: normal;
  }

  .dv-note-sub {
    font-size: 10px;
    white-space: normal;
  }

  /* Backdrop vine fills its container. */
  .is-backdrop {
    inset: -8% -8%;
  }

  .leak .statement,
  .ledger,
  .cost-copy,
  .calc,
  .proof-head h2,
  .proof-head .intro,
  .founding-head h2,
  .founding-head .intro,
  .portrait,
  .builder-text,
  .start-copy,
  .form-shell,
  .audit-report,
  .audit-grid .form-shell { grid-column: 1 / -1; }

  .leak .statement { position: static; max-width: 18ch; margin-bottom: 40px; }
  .coda { width: 100%; }
  .cost-grid { row-gap: 48px; }
  .cost-copy .statement-xl { max-width: 12ch; }
  .proof-head,
  .founding-head { row-gap: 24px; }
  .founding-head h2 { max-width: 12ch; }

  /* All panels full-width (already), collapse to single column. */
  .panel-a,
  .panel-b,
  .panel-c,
  .case-1,
  .case-2,
  .case-3,
  .case-4,
  .plan-1,
  .plan-2,
  .plan-3 { grid-column: 1 / -1; }

  /* Panel A: stack text then phone. */
  .panel-a .bezel-core {
    grid-template-columns: 1fr;
    gap: clamp(24px, 4vw, 40px);
    justify-items: center;
  }

  .pa-phone-fig {
    width: min(100%, 300px);
  }

  /* The phone fills the figure: at its 240px default the transcript lost its last line, chip and summary. */
  .pa-phone-fig .dv-phone {
    width: 100%;
  }

  /* Panel B: text first, then phone, then vine; single column. */
  .panel-b .bezel-core {
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 32px);
    padding: clamp(20px, 3vw, 36px);
    align-items: stretch;
  }

  /* Reorder: text on top, phone in middle, vine at bottom. */
  .pb-text { order: -2; }
  .pb-phone-fig { order: -1; }
  .panel-vine { order: 0; }

  .pb-phone-fig {
    margin-left: 0;
    align-items: center;
  }

  .pb-phone-fig .dv-stage {
    justify-content: center;
  }

  /* Smaller bubbles at narrow widths so last bubble is not clipped. */
  .pb-phone-fig .dv-bubble {
    font-size: 12px;
    line-height: 1.35;
    padding: 7px 11px;
  }

  .pb-phone-fig .dv-seq-sms {
    gap: 5px;
  }

  .panel-vine .vine {
    max-width: 360px;
    justify-self: start;
  }

  .panel-vine figcaption {
    margin-top: 12px;
  }

  .pb-text {
    padding-left: 0;
  }

  /* Panel C below 900px: text, then the devices, then the caption. Stretch, or the figure shrinks to its content
     and the laptop falls back to its 320px minimum. */
  .panel-c .bezel-core {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(16px, 3vw, 28px);
    padding: clamp(20px, 3vw, 36px);
  }

  .pc-text {
    grid-column: unset;
  }

  /* Stack: laptop full width, then phone centered overlapping laptop bottom. */
  .pc-stage {
    flex-direction: column;
    align-items: center;
    gap: 0;
    overflow: visible;
  }

  .pc-stage .dv-laptop {
    width: 100%;
    max-width: 500px;
    flex-shrink: 0;
  }

  /* Phone centered under the laptop, clear of it, so neither screen is covered. */
  .dv-phone-c {
    transform: none !important;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 16px;
    width: clamp(200px, 55vw, 240px);
    position: relative;
    z-index: 2;
  }

  .plans { align-items: stretch; }
  .terms { columns: 1; }

  .steps { grid-template-columns: 1fr; row-gap: 44px; padding-left: 44px; }
  .steps::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(var(--sage), transparent);
  }
  .steps-vine { display: none; }
  .step { padding: 0; }
  .step-node { top: 7px; left: -44px; }

  .qa-row { grid-template-columns: 1fr; row-gap: 12px; }
  .qa dt,
  .qa dd { grid-column: 1 / -1; }

  .builder-grid { row-gap: 40px; }
  .portrait { width: min(100%, 360px); }
  .builder-text .statement-xl { max-width: 13ch; }

  .start-copy { position: static; }
  .start-grid { row-gap: 48px; }

  .audit-report { position: static; margin-bottom: 40px; }

  .legal-block { grid-template-columns: 1fr; row-gap: 12px; }
  .legal-block h2,
  .legal-block p { grid-column: 1 / -1; }

  .footer { padding-bottom: 36px; }
}

/* Panel C from 700 to 899px: laptop and phone side by side as on desktop, sized from the stage width. */
@media (min-width: 700px) and (max-width: 899px) {
  .pc-stage {
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
  }

  .pc-stage .dv-laptop {
    width: 78%;
    max-width: 560px;
  }

  .dv-phone-c {
    width: clamp(200px, 26%, 230px);
    margin-top: 0;
    margin-left: -14%;
    margin-bottom: -24px;
  }

  /* Keep the laptop's bar and hero clear of the strip the phone covers. */
  .pc-stage .dv-ls-bar,
  .pc-stage .dv-ls-hero { padding-right: 90px; padding-right: 20cqw; }
}

/* Panels A and B from 900 to 1279px: the call transcript needs a screen about 262px wide to show every line, and
   the text thread uses the tighter bubbles it already has below 900px (its last bubble was cut at 1024). */
@media (min-width: 900px) and (max-width: 1279px) {
  .pa-phone-fig .dv-phone {
    width: clamp(282px, 22vw, 300px);
  }

  .pb-phone-fig .dv-bubble {
    font-size: 12px;
    line-height: 1.35;
    padding: 7px 11px;
  }

  .pb-phone-fig .dv-seq-sms {
    gap: 5px;
  }
}

/* Panel B from 900 to 1399px: the phone sits beside a slightly smaller vine, not over it, or it covers the
   "reply in minutes" and "job booked" labels (the phone is wider than its column at these widths). */
@media (min-width: 900px) and (max-width: 1399px) {
  .pb-phone-fig {
    margin-left: 0;
  }

  .panel-vine .vine {
    width: 88%;
  }
}

@media (max-width: 700px) {
  .fireflies i:nth-child(n + 7) { display: none; }
}

@media (max-width: 640px) {
  .nav { gap: 8px; padding-left: 18px; }
  .nav-links,
  .nav > nav { display: none; }
  .vine .node text { font-size: 14px; }
  .vine .branch { font-size: 13px; }
}

@media (max-width: 560px) {
  .calc-fields,
  .form-grid,
  .specs { grid-template-columns: 1fr; }
  .cta { gap: 16px; }
  .button-hero { width: 100%; justify-content: space-between; }
  .case-n { font-size: 5rem; }
}

/* Narrow phones (360px Android): the call transcript drops its timestamps so the booking chip and summary still fit. */
@media (max-width: 380px) {
  .pa-phone-fig .dv-tr-ts { display: none; }
}

/* Clamp note width on very small screens to prevent overflow. */
@media (max-width: 375px) {
  .dv-note {
    max-width: 42%;
    padding: 8px 10px;
  }

  .dv-note-a {
    left: 2px;
  }

  .dv-note-b {
    right: 2px;
  }

  .dv-laptop {
    width: 100%;
  }

  .dv-phone-c {
    width: min(100%, 200px);
  }

  /* Tightest bubble sizing at 375px to keep all bubbles visible. */
  .pb-phone-fig .dv-bubble {
    font-size: 12px;
    line-height: 1.35;
    padding: 7px 10px;
    max-width: 85%;
  }

  .pb-phone-fig .dv-seq-sms {
    gap: 4px;
    padding: 6px 8px 8px;
  }
}

/* ===== Reduced motion: keep it light. Opacity and glow stay; translate, blur, zoom, drift and travelling dots stop. ===== */
@media (prefers-reduced-motion: reduce) {
  .words .w > span,
  .enter {
    animation: fade-in 0.7s var(--ease-out) both;
  }

  .js [data-reveal] {
    transform: none;
    filter: none;
    transition: opacity 0.7s var(--ease-out);
    transition-delay: var(--rd, 0ms);
  }

  .vine.is-playing .stem,
  .vine.is-playing .twig,
  .vine.is-playing .tendril {
    animation: none;
  }

  .js .vine:not(.is-playing) :is(.stem, .twig, .tendril) {
    stroke-dashoffset: 0;
  }

  .vine.is-playing .node,
  .vine.is-playing .branch,
  .vine.is-playing .leaf {
    animation: vine-appear 0.7s var(--ease-out) var(--t, 0s) both;
  }

  .vine .packet {
    display: none;
  }

  .js .steps-wrap:not(.is-in) .steps-line {
    stroke-dashoffset: 0;
  }

  .steps-wrap.is-in .steps-line {
    transition: none;
  }

  .fireflies i {
    animation: ff-twinkle var(--tw) var(--ease-breathe) var(--d) infinite;
  }

  .js .band:not(.is-in) img,
  .band img {
    animation: none;
    transform: none;
    transition: none;
  }

  .button {
    --tx: 0px;
    --ty: 0px;
    transition: background-color 0.4s var(--ease-out), box-shadow 0.5s var(--ease-out);
  }

  .button-icon {
    transform: none !important;
    transition: none;
  }

  /* Waveform: static bars at varied heights, no animation. */
  .dv-wave span {
    animation: none;
    transform: none;
  }

  .dv-wave span:nth-child(odd)  { transform: scaleY(0.6); }
  .dv-wave span:nth-child(even) { transform: scaleY(1); }

  /* Typing dots: no bounce, just a short fade. */
  .dv-typing span {
    animation: fade-in 0.5s var(--ease-out) both;
  }

  /* Sequence items: no translate, short opacity fade only. */
  .js .dv-seq > * {
    transform: none;
    transition: opacity 0.4s var(--ease-out) calc(var(--i, 0) * 80ms);
  }

  /* Panel C phone: no tilt under reduced motion. */
  .dv-phone-c {
    transform: none !important;
  }
}

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