/* ==========================================================================
   Studio site — one stylesheet, no build step.

   House rules (from website-playbook.md, applied here):
   - Every colour, size and radius comes from the tokens below.
   - One accent colour, used for the main call to action and very little else.
   - Spacing sticks to the 4px scale: 4 8 12 16 24 32 48 64 96 128.
   - Motion only ever animates transform and opacity, and all of it switches
     off under prefers-reduced-motion (site.js reads the same query).
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}

:root {
  /* Light pages: a warm off-white rather than pure white, so long stretches of
     pricing and process read like paper instead of a lit screen. */
  --paper: #f5f3ee;
  --paper-2: #ebe8e1;
  --card: #fbfaf7;
  --ink: #141414;
  --ink-2: #57544e;
  --ink-3: #8a867e;
  --line: rgba(20, 20, 20, 0.12);

  /* Dark scenes: near-black with a hint of warmth, so the device screens are the
     brightest thing on screen, the way a product page lights its product. */
  --night: #0b0b0c;
  --night-2: #151517;
  --night-3: #202023;
  --night-ink: #f2f0eb;
  --night-muted: #a5a29b;
  --night-line: rgba(255, 255, 255, 0.12);

  /* The one accent. A worksite orange, deep enough that white button text on it
     passes WCAG AA (4.6:1). The brighter variant is only used on dark
     backgrounds, where the deep one would sink. */
  --accent: #c2461a;
  --accent-hover: #a83b14;
  --accent-bright: #f07a4a;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 64px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
[data-tone="dark"] :focus-visible { outline-color: var(--accent-bright); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 8px 16px; border-radius: var(--radius-sm);
  background: var(--ink); color: var(--paper); text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

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

/* ── Tones and the backdrop ───────────────────────────────────────────────
   Without JS each section paints its own background. With JS the sections go
   transparent and the fixed backdrop carries the colour, blended by site.js as
   the boundary between a light and a dark section passes the middle of the
   screen. Text colour stays per section, and each dark section starts with
   enough padding that its text only arrives once the blend has finished. */

.backdrop {
  position: fixed; inset: 0; z-index: -1;
  background: var(--bg, var(--paper));
}
[data-tone="light"] { background: var(--paper); color: var(--ink); }
[data-tone="dark"] { background: var(--night); color: var(--night-ink); }
.js [data-tone] { background: transparent; }
.tone-marker { position: absolute; left: 0; width: 1px; height: 1px; top: 100%; }

/* ── Type ─────────────────────────────────────────────────────────────── */

.eyebrow, .scene-kicker, .when, .step-num, .index-num, .tier-flag, .ui-tag {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow { color: var(--ink-2); margin-bottom: 16px; }
[data-tone="dark"] .eyebrow { color: var(--night-muted); }

.section-title {
  font-size: clamp(34px, 4.8vw, 64px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.035em;
  max-width: 16ch;
  text-wrap: balance;
}
.sub-title {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.section-lede {
  margin-top: 16px;
  max-width: 56ch;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
[data-tone="dark"] .section-lede { color: var(--night-muted); }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent;
  font: 500 16px/1 var(--font);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out),
    border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-hover); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: #2a2a2a; }
.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }

/* ── Header ───────────────────────────────────────────────────────────── */

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--header-h);
  color: var(--ink);
}
.ready .site-header { transition: color 0.3s var(--ease-out); }
/* The bar is a separate layer so its fill can fade in after the hero without
   repainting the links on top of it. */
.site-header::before {
  content: ""; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--line);
  opacity: 0;
}
.ready .site-header::before { transition: opacity 0.3s var(--ease-out), background-color 0.3s var(--ease-out); }
.site-header.is-scrolled::before { opacity: 1; }
.site-header[data-tone-now="dark"] { color: var(--night-ink); }
.site-header[data-tone-now="dark"]::before {
  background: color-mix(in srgb, var(--night) 78%, transparent);
  border-bottom-color: var(--night-line);
}

.header-inner {
  position: relative;
  display: flex; align-items: center; gap: 32px;
  height: 100%;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 18px; letter-spacing: -0.02em;
  text-decoration: none;
}
/* A neutral placeholder mark: a square resting on a ground line, like a
   building on a lot. It stands in until the studio has a name and a logo. */
.wordmark-mark {
  width: 20px; height: 20px; position: relative;
  border-bottom: 2px solid currentColor;
}
.wordmark-mark::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 4px; bottom: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}

.nav { display: flex; gap: 32px; margin-left: auto; }
.nav a {
  font-size: 15px; text-decoration: none; opacity: 0.72;
  transition: opacity 0.2s var(--ease-out);
}
.nav a:hover, .nav a[aria-current="true"] { opacity: 1; }
.menu-toggle { display: none; }
.menu-sheet[hidden] { display: none; }

@media (max-width: 860px) {
  .nav { display: none; }
  .header-cta { margin-left: auto; }
  .menu-toggle {
    display: grid; place-items: center;
    width: 40px; height: 40px; margin-right: -8px;
    border: 0; background: none; color: inherit; cursor: pointer;
  }
  .menu-icon, .menu-icon::before {
    display: block; width: 18px; height: 1.5px; background: currentColor;
    transition: transform 0.25s var(--ease-out);
  }
  .menu-icon { position: relative; transform: translateY(-3px); }
  .menu-icon::before { content: ""; position: absolute; top: 6px; }
  [aria-expanded="true"] .menu-icon { transform: translateY(0) rotate(45deg); }
  [aria-expanded="true"] .menu-icon::before { transform: translateY(-6px) rotate(-90deg); }

  .menu-sheet {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    display: grid; gap: 4px;
    padding: 8px var(--gutter) 24px;
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08);
  }
  .menu-sheet a:not(.btn) {
    padding: 12px 0; font-size: 20px; font-weight: 500; text-decoration: none;
    border-bottom: 1px solid var(--line);
  }
  .menu-sheet .btn { margin-top: 16px; }
}
@media (max-width: 359px) {
  .header-cta { display: none; }
  .menu-toggle { margin-left: auto; }
}

/* ── Devices ──────────────────────────────────────────────────────────────
   Drawn in CSS rather than as images, so they stay sharp at any size and cost
   nothing to load. Screens are a fixed 16:10 (laptop) and the iPhone's
   390×844 (phone), which match the capture viewports exactly, so one screen
   height of the screenshot fills one screen of the device. */

.laptop { position: relative; width: 100%; }
.laptop-lid {
  padding: 2.4% 2.4% 3.2%;
  border-radius: clamp(10px, 1.6vw, 20px) clamp(10px, 1.6vw, 20px) 4px 4px;
  background: linear-gradient(#2a2a2d, #19191b);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 80px -24px rgba(0, 0, 0, 0.55);
}
.laptop-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
  background: #000;
}
.laptop-screen img, .phone-screen > img { width: 100%; will-change: transform; }
.laptop-base {
  position: relative;
  width: 112%; margin-left: -6%;
  height: clamp(8px, 1.2vw, 16px);
  border-radius: 2px 2px 14px 14px / 2px 2px 100% 100%;
  background: linear-gradient(#d6d6d9, #a9a9ad 55%, #7c7c80);
}
.laptop-base::before {
  content: ""; position: absolute; left: 50%; top: 0;
  width: 14%; height: 40%;
  transform: translateX(-50%);
  border-radius: 0 0 8px 8px;
  background: rgba(0, 0, 0, 0.18);
}

.phone {
  position: relative;
  width: 100%;
  padding: 3.4%;
  border-radius: 15% / 7%;
  background: #111113;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.phone-screen {
  position: relative;
  aspect-ratio: 390 / 844;
  overflow: hidden;
  border-radius: 12% / 5.6%;
  background: #000;
}
.phone-screen::after {
  /* The Dynamic Island, sized as a share of the screen so it scales. */
  content: ""; position: absolute; z-index: 3;
  top: 1.8%; left: 50%; width: 30%; height: 3.6%;
  transform: translateX(-50%);
  border-radius: 999px; background: #000;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.hero { position: relative; }
.hero-stage {
  position: relative;
  display: flex; flex-direction: column;
  padding-top: calc(var(--header-h) + clamp(48px, 9vh, 112px));
}
.hero-copy { position: relative; z-index: 1; }
.hero-title {
  font-size: clamp(44px, 7.4vw, 108px);
  line-height: 0.98;
  font-weight: 600;
  letter-spacing: -0.045em;
  max-width: 13ch;
  text-wrap: balance;
}
.hero-lede {
  margin-top: 24px;
  max-width: 50ch;
  font-size: clamp(18px, 1.6vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-facts {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  margin-top: 32px;
  font-size: 14px; color: var(--ink-2);
}
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.hero-facts li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
/* The laptop's base is drawn 12% wider than its lid, so the last term keeps
   that overhang on screen when the side gutter is narrower than it. */
.hero-device {
  width: min(1040px, calc(100% - var(--gutter) * 2), calc((100% - 16px) / 1.12));
  margin: clamp(48px, 8vh, 96px) auto 0;
  transform-origin: 50% 100%;
}

/* With motion, on wider screens: the hero is a tall track and the stage pins to
   the screen while the laptop rises from below the fold and settles at full
   size. The tone marker sits 60% down the track, so the page darkens only once
   the copy has faded, while the laptop holds at full size. */
@media (min-width: 861px) {
  .js.motion .hero { height: 170vh; }
  .js.motion .tone-marker { top: 60%; }
  .js.motion .hero-stage {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    overflow: hidden;
  }
  .js.motion .hero-device {
    position: absolute; left: 50%; bottom: 3vh; margin: 0;
    width: min(1040px, calc(100% - var(--gutter) * 2), calc((100% - 16px) / 1.12), 128vh);
    transform: translate3d(-50%, calc(var(--rise, 1) * var(--rise-px, 60vh)), 0) scale(calc(0.9 + 0.1 * (1 - var(--rise, 1))));
    will-change: transform;
  }
  .js.motion .hero-copy {
    opacity: calc(1 - var(--fade, 0));
    transform: translate3d(0, calc(var(--fade, 0) * -64px), 0);
    will-change: opacity, transform;
  }
}
@media (max-width: 860px) {
  .hero-device { margin-top: 48px; margin-bottom: 0; }
}

/* ── Work ─────────────────────────────────────────────────────────────── */

.work { position: relative; padding-top: clamp(96px, 16vh, 160px); }
.work-intro { padding-bottom: 24px; }

/* Project tabs. Each has its own progress line, so the row reads as a chapter
   bar: which site is playing, how far through it you are, and what's next. */
.showcase-tabs { display: flex; gap: 16px; }
.showcase-tab {
  flex: 1;
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 10px;
  padding: 12px 0 0;
  border: 0; background: none;
  color: var(--night-muted);
  font: 500 15px/1.3 var(--font);
  letter-spacing: -0.01em;
  text-align: left;
  cursor: pointer;
  transition: color 0.25s var(--ease-out);
}
.showcase-tab:hover, .showcase-tab.is-active { color: var(--night-ink); }
.tab-num { font-family: var(--mono); font-size: 12px; transition: color 0.25s var(--ease-out); }
.showcase-tab.is-active .tab-num { color: var(--accent-bright); }
.tab-bar {
  grid-column: 1 / -1;
  height: 2px; margin-top: 12px; border-radius: 2px;
  background: var(--night-line);
  overflow: hidden;
}
.tab-bar i {
  display: block; height: 100%;
  background: var(--night-ink);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}
/* Without scroll-driving the bars simply mark the chosen tab. */
html:not(.motion) .showcase-tab.is-active .tab-bar i { transform: none; }
html:not(.js) .showcase-tabs { display: none; }

.showcase-stage { position: relative; padding: 24px 0 64px; }
.scene-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  margin-top: 40px;
}

/* The write-ups share one grid cell and cross-fade. The outgoing one
   leaves fast and the incoming one waits a beat, so they never overlap
   half-faded. visibility keeps the hidden ones out of the tab order. Without
   JS they simply stack. */
.showcase-copy { display: grid; gap: 64px; }
.js .site-copy {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
}
.js .site-copy.is-active {
  opacity: 1; visibility: visible;
  transition: opacity 0.45s var(--ease-out) 0.12s, visibility 0s;
}

.scene-kicker { color: var(--night-muted); }
.scene-title {
  margin-top: 12px;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.scene-notes { margin-top: 32px; display: grid; gap: 16px; }
.scene-notes li {
  position: relative;
  padding-left: 20px;
  font-size: 16px; line-height: 1.5;
  color: var(--night-muted);
}
.scene-notes li::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px;
  border-radius: 2px; background: var(--night-line);
  transition: background-color 0.3s var(--ease-out);
}
/* The accent line walks down the notes as the site scrolls by, a quiet cue
   for which part of the site is on screen. The text itself never dims. */
.js.motion .scene-notes li.is-active::before { background: var(--accent-bright); }
.scene-notes strong { display: block; color: var(--night-ink); font-weight: 600; font-size: 17px; margin-bottom: 2px; }
.scene-stats {
  display: flex; gap: 32px;
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--night-line);
}
.scene-stats dt { font-size: 13px; color: var(--night-muted); }
.scene-stats dd { font-size: 28px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.scene-stats small { font-size: 14px; font-weight: 500; color: var(--night-muted); margin-left: 2px; letter-spacing: 0; }
.scene-link {
  display: inline-flex; gap: 8px; align-items: center;
  margin-top: 24px;
  font-weight: 500; text-decoration: none;
  border-bottom: 1px solid var(--night-line);
  padding-bottom: 2px;
  transition: border-color 0.2s var(--ease-out);
}
.scene-link:hover { border-color: var(--night-ink); }

.scene-devices { position: relative; padding: 0 6% 7% 0; }
.scene-devices .phone { position: absolute; right: 0; bottom: 0; width: 25%; }

/* Each screen holds both captures, stacked; the current one fades in. */
.scene-devices [data-screen] img {
  position: absolute; top: 0; left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.scene-devices [data-screen] img.is-active { opacity: 1; }
html:not(.js) .scene-devices [data-screen] img:first-child { opacity: 1; }

/* Without motion the current capture sits in normal flow and its screen can be
   scrolled by hand, so the whole site is still there to look through. */
html:not(.motion) .scene-devices [data-screen] { overflow-y: auto; scrollbar-width: none; }
html:not(.motion) .scene-devices [data-screen]::-webkit-scrollbar { display: none; }
.js:not(.motion) .scene-devices [data-screen] img:not(.is-active) { display: none; }
.js:not(.motion) .scene-devices [data-screen] img.is-active { position: static; }

/* With motion: the showcase is a tall track (about one screen of scrolling per
   site), the stage pins, and site.js moves the current capture with the
   scroll and swaps sites halfway. */
.js.motion .showcase { height: 260vh; }
.js.motion .showcase-stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--header-h) 0 24px;
}

/* Room for the backdrop to turn light after the stage. The stage itself fades
   out in step (data-tone-fade), so its light text never sits on a light
   background. */
.work { padding-bottom: 20vh; }
.showcase-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.work-cta { font-size: 17px; color: var(--night-muted); }
.work-cta a {
  color: var(--night-ink); font-weight: 500;
  text-decoration: underline; text-decoration-color: var(--accent-bright);
  text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  white-space: nowrap;
}
.work-cta a:hover { color: var(--accent-bright); }
.work-footnote { font-size: 13px; color: var(--night-muted); }

/* Phones and small tablets: the phone frame alone tells the story (a laptop
   drawn 300px wide shows nothing legible). In the pinned stage the notes share
   one spot and step through with the scroll, so the stage fits one screen. */
@media (max-width: 860px) {
  .showcase-tabs { gap: 12px; }
  .showcase-tab { font-size: 14px; gap: 0 6px; }
  .scene-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .scene-devices { padding: 0; order: -1; }
  .scene-devices .laptop { display: none; }
  .scene-devices .phone { position: relative; width: min(240px, 62vw); margin: 0 auto; }
  .scene-stats { gap: 24px; margin-top: 16px; padding-top: 16px; }
  .scene-stats dd { font-size: 22px; }
  .scene-link { margin-top: 16px; }

  .js.motion .showcase { height: 250vh; }
  .js.motion .showcase-stage { justify-content: flex-start; padding-top: calc(var(--header-h) + 8px); }
  .js.motion .scene-grid { gap: 16px; margin-top: 16px; }
  .js.motion .scene-devices { order: 2; }
  .js.motion .scene-devices .phone { width: auto; height: 42svh; aspect-ratio: 390 / 844; max-width: 62vw; padding: 1.6svh; }
  .js.motion .scene-devices .phone-screen { height: 100%; width: auto; }
  .js.motion .scene-title { font-size: 28px; margin-top: 8px; }
  .js.motion .scene-notes { display: grid; margin-top: 12px; }
  .js.motion .scene-notes li { grid-area: 1 / 1; opacity: 0; font-size: 15px; transition: opacity 0.15s ease-out; }
  .js.motion .scene-notes li.is-active { opacity: 1; transition: opacity 0.35s var(--ease-out) 0.15s; }
  .js.motion .scene-stats { display: none; }
  .js.motion .showcase-foot { margin-top: 16px; }
  .js.motion .work-cta { font-size: 15px; }
  .js.motion .work-footnote { display: none; }
}
@media (max-width: 560px) {
  .tab-long { display: none; }
}

/* Shorter screens. The pinned stage has to fit in one screen with nothing
   tucked under the header or off the bottom, so on laptops under ~860px tall
   the copy column widens (fewer wrapped lines) and the spacing tightens; on
   short phones the phone frame shrinks and the bottom line gives way, since
   the header's audit button is always there. */
@media (min-width: 861px) and (max-height: 860px) {
  .js.motion .showcase-stage { padding-bottom: 12px; }
  .js.motion .scene-grid { margin-top: 24px; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); }
  .js.motion .scene-title { font-size: clamp(30px, 3vw, 40px); }
  .js.motion .scene-notes { margin-top: 20px; gap: 10px; }
  .js.motion .scene-notes li { font-size: 15px; line-height: 1.45; }
  .js.motion .scene-notes strong { font-size: 16px; }
  .js.motion .scene-stats { margin-top: 20px; padding-top: 16px; }
  .js.motion .scene-stats dd { font-size: 24px; }
  .js.motion .scene-link { margin-top: 12px; }
  .js.motion .showcase-foot { margin-top: 20px; }
}
@media (min-width: 861px) and (max-height: 760px) {
  .js.motion .scene-stats { display: none; }
  .js.motion .scene-devices { padding-bottom: 4%; }
}
@media (max-width: 860px) {
  .js.motion .scene-devices .phone { height: 38svh; }
}
/* Portrait tablets have the room for the laptop again (it's drawn ~750px
   wide), so they get the same laptop-and-phone pair as desktop, stacked under
   the copy. */
@media (min-width: 640px) and (max-width: 860px) and (min-height: 900px) {
  .scene-devices { padding: 0 6% 7% 0; }
  .scene-devices .laptop { display: block; }
  .scene-devices .phone,
  .js.motion .scene-devices .phone {
    position: absolute; right: 0; bottom: 0;
    width: 22%; height: auto; max-width: none; margin: 0; padding: 3.4%;
  }
  .js.motion .scene-devices .phone-screen { height: auto; width: 100%; }
}
@media (max-width: 860px) and (max-height: 640px) {
  .js.motion .scene-devices .phone { height: 33svh; }
  .js.motion .scene-title { font-size: 24px; }
  .js.motion .scene-notes li { font-size: 14px; }
  .js.motion .showcase-foot { display: none; }
}

/* ── Also built ─────────────────────────────────────────────────────────
   SF Media sits outside the scrolling stage. Its button shares the tab row
   but is drawn as a pill, so it reads as an extra rather than a third chapter,
   and it opens the site in a modal panel instead of adding scroll. */

/* Set apart from the two chapter tabs by a hairline, with a thumbnail of the
   site, so it reads as "one more, if you're curious" rather than a third
   chapter. The arrow nudges on hover, the same cue as the other text links. */
.also-trigger {
  flex: none; align-self: stretch;
  display: flex; align-items: center; gap: 12px;
  margin-left: 8px; padding: 6px 0 6px 24px;
  border: 0; border-left: 1px solid var(--night-line);
  background: none; color: var(--night-ink);
  font: inherit; text-align: left;
  cursor: pointer;
}
.also-thumb {
  position: relative; flex: none;
  width: 52px; aspect-ratio: 16 / 10;
  border-radius: 4px; overflow: hidden;
  background: var(--night-3);
}
.also-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--ease-out); }
.also-thumb::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.also-text { display: grid; gap: 2px; }
.also-label { font-size: 12px; line-height: 1.3; color: var(--night-muted); }
.also-name { font-size: 15px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; }
.also-arrow {
  display: inline-block; margin-left: 2px;
  color: var(--night-muted);
  transition: transform 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.also-trigger:hover .also-arrow { transform: translateX(3px); color: var(--accent-bright); }
.also-trigger:hover .also-thumb img { transform: scale(1.06); }

/* The close button's cross, drawn from two bars. */
.also-close::before, .also-close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 1.5px; border-radius: 1px;
  background: currentColor;
}

/* The dialog is the panel's frame; the panel inside it scrolls, so the close
   button stays put however far a phone has scrolled. */
.also {
  width: min(1120px, calc(100vw - 2 * var(--gutter)));
  max-width: none; max-height: calc(100svh - 48px);
  margin: auto; padding: 0; border: 0;
  border-radius: var(--radius-lg);
  background: var(--night-2); color: var(--night-ink);
  box-shadow: inset 0 0 0 1px var(--night-line), 0 40px 120px -24px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(0.98);
  transition: opacity 0.2s ease-out, transform 0.25s ease-out;
}
.also.is-open {
  opacity: 1; transform: none;
  transition: opacity 0.35s var(--ease-out), transform 0.5s var(--ease-out);
}
.also::backdrop { background: rgba(5, 5, 6, 0); transition: background-color 0.25s ease-out; }
.also.is-open::backdrop { background: rgba(5, 5, 6, 0.72); }
html:has(.also[open]) { overflow: hidden; }

.also-panel {
  max-height: inherit; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(32px, 4.5vw, 64px);
}
.also-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 4.5vw, 64px);
  align-items: center;
}
.also-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  background: var(--night-3); color: var(--night-ink);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out);
}
.also-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.also-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.also-close:hover { background: #2c2c30; }

.also-devices { position: relative; padding: 0 6% 7% 0; }
.also-devices .phone { position: absolute; right: 0; bottom: 0; width: 25%; }
/* The screens scroll for real: site.js plays them through once on opening,
   and any touch, wheel or drag hands them over to the visitor. */
.also-screen { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.also-screen::-webkit-scrollbar { display: none; }
.also-screen img { display: block; height: auto; }
.also-note { margin-top: 24px; }

/* Phones: a full-screen sheet with the phone frame on top, then the notes. */
@media (max-width: 860px) {
  .also { width: 100vw; max-height: 100svh; height: 100svh; border-radius: 0; box-shadow: none; }
  .also-panel { padding: 64px var(--gutter) 48px; }
  .also-grid { grid-template-columns: 1fr; gap: 32px; }
  .also-devices { padding: 0; }
  .also-devices .laptop { display: none; }
  .also-devices .phone { position: relative; width: auto; height: 46svh; aspect-ratio: 390 / 844; max-width: 70vw; margin: 0 auto; padding: 1.8svh; }
  .also-devices .phone-screen { height: 100%; width: auto; }
  .also .scene-title { font-size: 32px; }
  .also .scene-notes { margin-top: 20px; }
  .also .scene-stats { gap: 24px; }
  .also .scene-stats dd { font-size: 22px; }
}

@media (max-width: 560px) {
  .also-trigger { gap: 10px; padding-left: 16px; margin-left: 4px; }
  .also-thumb { width: 40px; }
  .also-name { font-size: 14px; }
}
/* The narrowest phones (320px) can't fit two numbered tabs and the pill, so
   the tab numbers go; the progress lines still say which site is playing. */
@media (max-width: 380px) {
  .showcase-tabs { gap: 8px; }
  .showcase-tab .tab-num { display: none; }
  .also-trigger { padding-left: 12px; margin-left: 0; }
  .also-thumb { display: none; }
}

/* Without JS there's nothing to open it, so the panel shows under the stage. */
html:not(.js) .also { display: block; position: static; opacity: 1; transform: none; margin: 96px auto 0; }
html:not(.js) .also-close { display: none; }

/* ── How it works ─────────────────────────────────────────────────────── */

.how { padding: clamp(64px, 10vh, 128px) 0; }
.build { margin-top: 64px; }
/* The build chart. Each bar sits on a 14-day track, a short gap, then three
   columns for what comes after launch; --from/--to on each row place its bar.
   The pale rail in every row is the two weeks, so the eye sees where each step
   falls without reading. */
.build {
  --gantt-row: 140px minmax(0, 320px) minmax(0, 1fr);
  --gantt-days: repeat(14, minmax(0, 1fr)) minmax(0, 0.75fr) repeat(3, minmax(0, 1fr));
}
.gantt-scale, .gantt li {
  display: grid; grid-template-columns: var(--gantt-row); gap: 24px; align-items: center;
}
.gantt-scale { margin-top: 32px; padding-bottom: 12px; }
/* The scale sits over the bar column on the same day grid as the bars. */
.gantt-days { grid-column: 3; display: grid; grid-template-columns: var(--gantt-days); }
.gantt-days span {
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.gantt-days span:nth-child(1) { grid-column: 1 / 8; }
.gantt-days span:nth-child(2) { grid-column: 8 / 15; }
.gantt-days span:nth-child(3) { grid-column: 16 / 19; }
.gantt li { padding: 16px 0; border-top: 1px solid var(--line); }
.gantt li:last-child { border-bottom: 1px solid var(--line); }
.gantt .when { color: var(--ink-2); }
.gantt strong { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.gantt p { font-size: 15px; color: var(--ink-2); }
.gantt-bar { display: grid; grid-template-columns: var(--gantt-days); height: 12px; }
.gantt-bar::before {
  content: ""; grid-row: 1; grid-column: 1 / 15;
  border-radius: 999px; background: var(--paper-2);
}
.gantt-bar i {
  grid-row: 1; grid-column: var(--from) / var(--to);
  border-radius: 999px; background: var(--ink);
}
.gantt-launch .gantt-bar i { background: var(--accent); }
.gantt-launch strong { color: var(--accent); }
.gantt-after .gantt-bar i { background: transparent; border: 1.5px dashed var(--ink-3); }

@media (max-width: 760px) {
  .build { --gantt-row: minmax(0, 1fr); }
  .gantt-days { grid-column: 1; }
  .gantt li { gap: 4px 0; padding: 14px 0; }
  .gantt-bar { margin-top: 8px; }
}

.engine { margin-top: clamp(96px, 14vh, 160px); scroll-margin-top: 32px; }
.engine-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  margin-top: 48px;
}
.engine-steps li {
  position: relative;
  min-height: 44vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 56px;
  opacity: 0.4;
  transition: opacity 0.4s var(--ease-out);
}
.engine-steps li:first-child { min-height: 32vh; justify-content: flex-start; padding-top: 8vh; }
.engine-steps li:last-child { min-height: 58vh; }
.engine-steps li.is-active { opacity: 1; }
.engine-steps .step-num {
  position: absolute; left: 0;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  margin-top: -4px;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.engine-steps li.is-active .step-num { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.engine-steps h4 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; font-weight: 600; letter-spacing: -0.03em; }
.engine-steps p { margin-top: 8px; max-width: 40ch; font-size: 17px; color: var(--ink-2); }
.engine-visual { position: relative; }
.engine-visual .phone {
  position: sticky; top: calc(50vh - min(34vh, 300px) - 8px + var(--header-h) / 2);
  width: auto; height: min(68vh, 600px); aspect-ratio: 390 / 844;
  margin-inline: auto;
  padding: 12px;
}
.engine-visual .phone-screen { height: 100%; background: var(--card); }

.engine-always {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  margin-top: 64px; padding-top: 32px;
  border-top: 1px solid var(--line);
}
.engine-always li { font-size: 15px; color: var(--ink-2); }
.engine-always strong { display: block; color: var(--ink); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 4px; }

/* Without JS the steps are a plain list: the pinned phone only makes sense when
   something keeps it in step with the text. */
html:not(.js) .engine-visual { display: none; }
html:not(.js) .engine-body { grid-template-columns: 1fr; }
html:not(.js) .engine-steps li { opacity: 1; min-height: 0; padding-block: 16px; }

@media (max-width: 860px) {
  .engine-body { grid-template-columns: 1fr; gap: 0; }
  /* The phone pins near the top and the steps scroll up underneath it. Each
     step gets a solid card so it stays readable as it slides in below. */
  .engine-visual { order: -1; position: sticky; top: var(--header-h); z-index: 2; height: 0; }
  .engine-visual .phone { position: relative; top: 8px; height: 44svh; padding: 8px; }
  /* A solid band behind the pinned phone, full width and fading out at its
     lower edge, so the steps disappear under it cleanly instead of showing
     on either side of the phone. */
  .engine-visual::before {
    content: ""; position: absolute; z-index: -1;
    top: 0; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1);
    height: calc(44svh + 40px);
    background: linear-gradient(var(--paper) calc(100% - 24px), transparent);
  }
  .engine-steps { padding-top: calc(44svh + 48px); }
  /* The pinned box is 0px tall but draws the phone and band below itself, so it
     only lets go once the container ends. This padding makes the container end
     a phone's height later, so the phone leaves before the next block arrives
     instead of sliding over it. */
  .engine-body { padding-bottom: calc(44svh + 40px); }
  .engine-steps li, .engine-steps li:first-child, .engine-steps li:last-child {
    min-height: 0; padding: 24px 24px 24px 72px; margin-bottom: 22svh;
    justify-content: flex-start;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--line);
  }
  .engine-steps li:last-child { margin-bottom: 8svh; }
  .engine-steps .step-num { left: 24px; top: 24px; margin: 0; }
  .engine-steps h4 { font-size: 22px; }
  .engine-steps p { font-size: 16px; }
  .engine-always { grid-template-columns: 1fr; gap: 24px; }
}

/* The mock phone screens in the proof engine. They're small product
   illustrations, not real UI, so they use fixed px type scaled to the phone. */
.ui-canvas {
  position: absolute; top: 0; left: 0;
  width: 250px; height: 541px; /* 250 × 844/390, the phone screen's shape */
  transform: scale(var(--ui-scale, 1));
  transform-origin: 0 0;
}
.ui-tag {
  position: absolute; z-index: 4; top: 9%; right: 6%;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(20, 20, 20, 0.7); color: #fff;
  font-size: 10px;
}
.ui-screen {
  position: absolute; inset: 0;
  padding-top: 15%;
  display: flex; flex-direction: column;
  font-size: 13px; line-height: 1.4; color: var(--ink);
  background: var(--card);
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.ui-screen.is-active { opacity: 1; transform: none; }
.ui-screen-soft { background: #efede8; }
.ui-bar { padding: 8px 16px 12px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.ui-url {
  margin: 0 12px 8px; padding: 6px 10px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-2);
  font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ui-pad { padding: 12px 16px; display: grid; gap: 8px; }
.ui-photos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 0 16px; }
.ui-photos img, .ui-add { aspect-ratio: 1; object-fit: cover; border-radius: 8px; width: 100%; }
.ui-add { display: grid; place-items: center; border: 1px dashed var(--ink-3); color: var(--ink-3); font-size: 20px; }
.ui-field {
  display: block; margin: 12px 16px 0; padding: 8px 12px;
  border-radius: 10px; border: 1px solid var(--line); background: #fff;
}
.ui-field span { display: block; font-size: 10px; color: var(--ink-2); }
.ui-button {
  align-self: start; margin: 16px 16px 0;
  padding: 8px 16px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 500; font-size: 12px;
}
.ui-pad .ui-button { margin: 4px 0 0; }
.ui-hero { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ui-meta { font-size: 10px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.ui-h { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.ui-p { font-size: 12px; color: var(--ink-2); }
.ui-card { margin: 0 12px; padding: 12px; border-radius: 14px; background: #fff; display: grid; gap: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }
.ui-card img { border-radius: 8px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.ui-card-head { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.ui-card-head small { display: block; color: var(--ink-2); font-size: 10px; }
.ui-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); }
.ui-link { font-size: 12px; font-weight: 600; color: var(--accent); }
.ui-thread { display: grid; gap: 8px; padding: 8px 12px; }
.ui-bubble { max-width: 86%; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #fff; font-size: 12px; }
.ui-bubble-me { justify-self: end; background: var(--ink); color: #fff; border-radius: 16px 16px 4px 16px; }
.ui-review {
  margin-top: 8px; padding: 12px; border-radius: 12px;
  background: #fff; display: grid; gap: 2px; font-size: 12px; font-weight: 500;
}
.ui-stars { color: var(--accent); letter-spacing: 2px; font-size: 14px; }
.ui-big { font-size: 44px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.ui-bars { display: grid; gap: 8px; margin-top: 4px; }
.ui-bars span { display: grid; grid-template-columns: 52px 1fr 20px; align-items: center; gap: 8px; font-size: 11px; }
.ui-bars span::after {
  content: ""; grid-column: 2; grid-row: 1; height: 8px; border-radius: 4px;
  background: var(--ink);
  width: calc(var(--v) * 100% / 0.57);
}
.ui-bars i { font-style: normal; color: var(--ink-2); }
.ui-bars b { grid-column: 3; text-align: right; }
.ui-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ui-split p { padding: 10px; border-radius: 10px; background: var(--paper-2); }
.ui-split b { display: block; font-size: 20px; letter-spacing: -0.02em; }

/* ── Pricing ──────────────────────────────────────────────────────────── */

.pricing { padding: clamp(96px, 14vh, 160px) 0; }
.pay-toggle {
  display: inline-flex; gap: 4px;
  margin-top: 40px; padding: 4px;
  border-radius: 999px;
  background: var(--paper-2);
}
.pay-toggle button {
  min-height: 40px; padding: 0 20px;
  border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font: 500 15px/1 var(--font);
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.pay-toggle button[aria-pressed="true"] {
  background: var(--card); color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--line);
}
.pay-note { margin-top: 12px; font-size: 14px; color: var(--ink-2); min-height: 1.55em; }

[data-pay="once"] .when-monthly, [data-pay="monthly"] .when-once { display: none; }

.tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 32px;
}
.tier {
  position: relative;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--card);
  border: 1px solid var(--line);
}
.tier-featured { border-color: var(--ink); box-shadow: 0 24px 48px -32px rgba(0, 0, 0, 0.35); }
.tier-flag {
  position: absolute; top: -11px; left: 32px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: 11px;
}
.tier h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.tier-for { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.price { margin-top: 24px; display: flex; align-items: baseline; min-height: 56px; }
.price b { font-size: 48px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.price small { font-size: 15px; color: var(--ink-2); margin: 0 6px; }
.price .when-once small:first-child { margin-left: 0; }
.price .price-word { font-size: 32px; letter-spacing: -0.03em; }
.price-sub { margin-top: 8px; font-size: 14px; color: var(--ink-2); min-height: 3em; }
/* Signature's pay-monthly ledger: one row per plan, the site share and plan
   share in mono so the figures line up, the monthly total set like a price. */
.split {
  margin-top: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--paper);
}
.split-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: 12px; padding: 12px 14px;
}
.split-row + .split-row { border-top: 1px solid var(--line); }
.split dt { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.split-math {
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  white-space: nowrap;
}
.split-total {
  font-size: 18px; font-weight: 600; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.split-total small { font-size: 12px; font-weight: 400; color: var(--ink-2); letter-spacing: 0; margin-left: 1px; }
@media (max-width: 380px) {
  .split-row { grid-template-columns: 1fr auto; }
  .split-math { grid-column: 1 / -1; grid-row: 2; }
}
.ticks { margin-top: 24px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; font-size: 15px; }
.ticks li::before {
  /* A drawn check rather than an emoji or icon font: crisp, and the colour
     follows the text. */
  content: ""; position: absolute; left: 2px; top: 0.42em;
  width: 11px; height: 6px;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.55;
}
.inline-link { text-decoration-color: var(--ink-3); text-underline-offset: 3px; }

.plans-head { margin-top: 96px; }
.plans {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  margin-top: 32px;
}
.plan { padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--line); }
.plan-featured { background: var(--card); border-color: var(--ink); }
.plan h4 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.plan-price { margin-top: 12px; font-size: 15px; color: var(--ink-2); }
.plan-price b { font-size: 36px; font-weight: 600; letter-spacing: -0.04em; color: var(--ink); }
.plan-term { font-family: var(--mono); font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.fine { margin-top: 32px; max-width: 72ch; font-size: 14px; color: var(--ink-2); }

.promise-list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin-top: 96px; padding-top: 32px;
  border-top: 1px solid var(--line);
}
.promise-list h4 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 8px; }
.promise-list p { font-size: 15px; color: var(--ink-2); }
@media (max-width: 960px) { .promise-list { grid-template-columns: 1fr 1fr; gap: 32px 24px; margin-top: 64px; } }
@media (max-width: 520px) { .promise-list { grid-template-columns: 1fr; } }

@media (max-width: 960px) {
  .tiers, .plans { grid-template-columns: 1fr; max-width: 560px; }
  .price-sub { min-height: 0; }
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */

/* Room for the backdrop to turn dark ahead of the audit; the FAQ fades out in
   step, as the showcase does. */
.faq { padding: clamp(64px, 10vh, 128px) 0 20vh; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 20px 40px 20px 0;
  font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 14px; height: 1.5px; background: currentColor;
  transition: transform 0.25s var(--ease-out);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq details p { padding: 0 40px 24px 0; color: var(--ink-2); max-width: 64ch; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }

/* ── Free audit ───────────────────────────────────────────────────────── */

.audit { padding: clamp(128px, 20vh, 200px) 0 clamp(96px, 14vh, 160px); }
.audit-head .section-title { max-width: 18ch; }
.audit-steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 48px; padding-top: 32px;
  border-top: 1px solid var(--night-line);
}
.audit-steps li { position: relative; padding-left: 52px; }
.audit-steps .step-num {
  position: absolute; left: 0; top: -4px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--night-line);
  color: var(--accent-bright);
}
.audit-steps strong { display: block; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.audit-steps p { margin-top: 2px; font-size: 15px; color: var(--night-muted); }

.audit-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
  margin-top: 64px;
}

/* The sample report is drawn as a sheet of paper on the dark page: the one
   physical object a builder walks away with, so it's styled like one. */
.report { margin: 0; }
.report-paper {
  position: relative;
  padding: clamp(20px, 3vw, 36px);
  border-radius: 20px;
  background: var(--card);
  color: var(--ink);
  font-size: 14px; line-height: 1.5;
  box-shadow: 0 40px 80px -32px rgba(0, 0, 0, 0.7);
}
.report-tag {
  position: absolute; top: 16px; right: 16px;
  padding: 3px 10px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.report-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.report-kicker, .report-sub, .report-row-head {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-2);
}
.report-title { margin-top: 4px; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.report-meta { font-size: 13px; color: var(--ink-2); text-align: right; }

.report-scores { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 20px 0; }
.report-scores p { font-size: 13px; color: var(--ink-2); }
.report-scores b { display: block; margin-top: 2px; font-size: 36px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; color: var(--accent); }
.report-scores small { font-size: 18px; letter-spacing: 0; margin-left: 1px; }
.report-scores span { font-size: 12px; color: var(--ink-2); }

.report-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.report-row p:first-child { position: relative; padding-left: 26px; }
.report-row p:last-child { color: var(--ink-2); }
.report-row-head { padding-bottom: 8px; }
.report-row-head span:first-child { padding-left: 26px; }

/* Problem and fine marks, drawn in CSS: a cross in the accent for something to
   fix, a quiet check for something to keep. */
.mark { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; }
.mark-bad { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mark-bad::before, .mark-bad::after {
  content: ""; position: absolute; left: 4px; top: 7.25px; width: 8px; height: 1.5px;
  background: var(--accent); transform: rotate(45deg);
}
.mark-bad::after { transform: rotate(-45deg); }
.mark-ok { background: var(--paper-2); }
.mark-ok::before {
  content: ""; position: absolute; left: 4.5px; top: 4.5px; width: 7px; height: 4px;
  border-left: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink);
  transform: rotate(-45deg);
}

.report-compare { margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.compare-bars {
  display: grid; grid-template-columns: 110px 1fr; gap: 8px 16px; align-items: center;
  margin-top: 12px;
}
.compare-label { grid-row: span 2; font-size: 13px; color: var(--ink-2); }
.compare-bar { position: relative; height: 24px; border-radius: 6px; background: var(--paper-2); overflow: hidden; }
.compare-bar i {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--v) * 100%);
  background: var(--accent);
  border-radius: 6px;
}
.compare-them i { background: var(--ink-3); }
.compare-bar b { position: relative; padding-left: 10px; font-size: 12px; font-weight: 600; line-height: 24px; color: #fff; }
.compare-checks { margin-top: 12px; display: grid; gap: 4px; }
.compare-checks li { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 16px; font-size: 13px; }
.compare-checks li span:first-child { color: var(--ink-2); }

.report-first {
  margin-top: 20px; padding: 12px 16px;
  border-radius: 12px;
  background: var(--paper-2);
}
.report figcaption { margin-top: 12px; font-size: 13px; color: var(--night-muted); }

.book-form {
  display: grid; gap: 16px;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-lg);
  background: var(--night-2);
  border: 1px solid var(--night-line);
}
/* Side by side, the form is drawn as tall as the report sheet so the two read
   as one block: the figure spans both rows through a subgrid, its caption
   drops to the second row, and the message box takes up the extra height. */
@media (min-width: 961px) {
  .audit-grid { grid-template-rows: auto auto; row-gap: 0; align-items: stretch; }
  .report { grid-row: span 2; display: grid; grid-template-rows: subgrid; }
  .book-form { grid-template-rows: auto auto auto auto auto 1fr auto; }
  .book-form .field:has(textarea) { grid-template-rows: auto 1fr; }
  .book-form.is-sent { grid-template-rows: none; align-content: start; }
}
.form-head h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.form-head p { margin-top: 4px; font-size: 15px; color: var(--night-muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 14px; font-weight: 500; }
.field em { font-style: normal; font-weight: 400; color: var(--night-muted); margin-left: 4px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--night-line);
  background: var(--night);
  color: var(--night-ink);
  font: 16px/1.4 var(--font);
  transition: border-color 0.2s var(--ease-out);
}
.field textarea { resize: vertical; min-height: 96px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--night-muted) 50%), linear-gradient(135deg, var(--night-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field select:invalid { color: #8d8a83; }
.field option { color: var(--night-ink); background: var(--night-2); }
.field input::placeholder { color: #6d6a64; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255, 255, 255, 0.24); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-bright); }
.field.is-invalid input, .field.is-invalid select { border-color: #ff8a7a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.book-form .btn { margin-top: 8px; min-height: 52px; }
.book-form .btn[disabled] { opacity: 0.6; cursor: progress; }
.form-status { font-size: 14px; color: var(--night-muted); min-height: 1.4em; }
.form-status:empty { display: none; }
.form-status.is-error { color: #ff9d8f; }
.form-status.is-done { color: var(--night-ink); }
.book-form.is-sent .field, .book-form.is-sent .field-row, .book-form.is-sent .btn { display: none; }
.book-form.is-sent .form-status { font-size: 18px; line-height: 1.5; }

@media (max-width: 960px) {
  .audit-grid { grid-template-columns: 1fr; }
  .audit-steps { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
  .report-scores { gap: 8px; }
  .report-scores b { font-size: 28px; }
  /* The two columns become one: each fix sits under its problem, labelled. */
  .report-row { grid-template-columns: 1fr; gap: 4px; }
  .report-row-head { display: none; }
  .report-row p:last-child { padding-left: 26px; }
  .report-row p:last-child::before { content: "What I'd do: "; color: var(--ink); font-weight: 500; }
  .compare-bars { grid-template-columns: 1fr; }
  .compare-label { grid-row: auto; }
  .compare-checks li { grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
  .report-head { flex-direction: column; align-items: flex-start; gap: 4px; }
  .report-meta { text-align: left; }
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.site-footer { padding: 48px 0 64px; border-top: 1px solid var(--night-line); }
.footer-inner { display: grid; grid-template-columns: auto 1fr; gap: 24px 48px; align-items: center; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: flex-end; }
.footer-nav a { font-size: 14px; text-decoration: none; color: var(--night-muted); }
.footer-nav a:hover { color: var(--night-ink); }
.footer-note { grid-column: 1 / -1; font-size: 13px; color: var(--night-muted); }
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-nav { justify-content: flex-start; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}