/* InterGen client onboarding. Brand tokens match index.html: Inter body, Bodoni Moda numerals, ink on white, one blue. */

:root {
  color-scheme: light;

  --ink: #111114;
  --ink-soft: #2a2a30;
  --paper: #ffffff;
  --panel: #f5f5f7;
  --night: #1c1c20;
  --blue: #3b6fe0;
  --blue-wash: rgba(59, 111, 224, 0.07);
  --blue-ring: rgba(59, 111, 224, 0.16);
  --muted: rgba(17, 17, 20, 0.64);
  --faint: rgba(17, 17, 20, 0.42);
  --rule: rgba(17, 17, 20, 0.1);
  --rule-strong: rgba(17, 17, 20, 0.2);
  --on-night: rgba(255, 255, 255, 0.72);
  --on-night-rule: rgba(255, 255, 255, 0.12);
  --danger: #b3261e;
  --ok: #1f7a4d;

  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-h1: clamp(36px, 5.6vw, 68px);
  --text-h2: clamp(28px, 3.4vw, 42px);
  --text-num: clamp(58px, 9vw, 120px);

  --gutter: clamp(16px, 4vw, 48px);
  --shell-max: 1180px;
  --content-max: 760px;
  --radius-field: 2px;
  --radius-card: 12px;
  --radius-block: 16px;
  --radius-pill: 50px;

  --duration-fast: 150ms;
  --duration-normal: 280ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { background: var(--paper); -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font: 300 15px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--blue); }
strong { font-weight: 500; }
em { font-style: normal; font-weight: 500; color: var(--blue); }

.skip-link {
  position: absolute; left: var(--gutter); top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-pill);
  text-decoration: none; font-weight: 500; font-size: 13px;
}
.skip-link:focus { top: 12px; color: #fff; }

/* ── SAVE STATE (sits above the progress bar; the header is the homepage nav in site-nav.css) ── */
.save-state { font-size: 12px; color: var(--faint); text-align: right; min-height: 1em; margin-bottom: 6px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ''; width: 18px; height: 2px; background: var(--blue); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font: 500 14px/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--ink-soft); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }
.btn:disabled { cursor: progress; opacity: 0.72; }
.btn-lg { min-height: 56px; padding: 14px 30px; font-size: 15px; }
.arrow { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 220ms var(--ease-out-expo); }
.btn:hover .arrow { transform: translateX(3px); }

/* ── COVER: same padding and spacing as the homepage hero (.hero, .hero-eyebrow, .hero-title, .hero-sub, .hero-ctas in ../index.html) ── */
.cover-hero { min-height: 100vh; padding: 180px 0 170px; display: flex; align-items: flex-end; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(17, 17, 20, 0.45); margin-bottom: 36px;
}
.hero-eyebrow::before {
  content: ''; display: inline-block; width: 2px; height: 14px;
  background: #111114; border-radius: 2px; box-shadow: 0 0 8px rgba(17, 17, 20, 0.4);
}
.cover-title {
  font-size: clamp(24px, 5.8vw, 87px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.08;
  color: var(--ink); max-width: 1340px; margin-bottom: 28px; outline: none;
}
/* Same box as the homepage `.hero-title em`: inline-block with the taller line and bottom padding.
   The gradient reveal needs it (background-clip:text would crop descenders), and it gives the title the
   same height as the homepage one, so the eyebrow, title and Start button land where the homepage ones do.
   Default paint is solid ink, so the phrase shows without JS or with reduced motion. */
.cover-title em {
  font-style: normal; font-weight: 500;
  white-space: nowrap; display: inline-block; min-width: 1ch;
  line-height: 1.2; padding-bottom: 0.14em;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-repeat: no-repeat; background-size: 100% 100%;
  background-image: linear-gradient(90deg, #111114, #111114);
}
/* desktop: a fixed break after "everything" keeps the title at exactly two lines at every width.
   That first line measures 15.69em, so the size follows the homepage (5.8vw, max 87px) and only
   shrinks where the line would not fit the container (100vw minus the 64px side padding).
   From 1440 up it is identical to the homepage size; at 1280 it is under 1px smaller. */
.cover-title { white-space: nowrap; max-width: none; font-size: min(5.8vw, calc((100vw - 128px) / 15.7), 87px); }
/* Desktop lineup with the homepage hero (both bottom anchored, same bottom padding):
   homepage title = 3 lines + phrase box = 3.5 × its size; this title = 2 lines + phrase box = 2.42 × its size,
   plus this lead (2 lines × 21px = 42px). The gap below the lead makes the two stacks the same height,
   so the eyebrow, title and Start button sit exactly where the homepage ones do at every desktop width. */
.cover-lead {
  font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--muted); max-width: 580px;
  margin-bottom: max(12px, calc(clamp(24px, 5.8vw, 87px) * 3.5 - min(5.8vw, calc((100vw - 128px) / 15.7), 87px) * 2.42 - 42px));
}
.cover-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.flow-btn--ink { border-color: #111114; }
.cover-promise { padding-bottom: clamp(56px, 8vw, 110px); }
.cover-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; color: var(--muted); }
.cover-meta span { display: inline-flex; align-items: center; gap: 8px; }
.cover-meta span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }

.resume {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  margin-bottom: 36px; padding: 18px 20px; max-width: 760px;
  border: 1px solid var(--blue); border-radius: var(--radius-card); background: var(--blue-wash);
}
.resume-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.resume + .cover-actions { display: none; }
.resume[hidden] + .cover-actions { display: flex; }

/* ── PROMISE: built as the homepage blue card (.experiment-hero-card, .contact-rule, .contact-eyebrow,
   .contact-inner, .contact-title in ../index.html). Same box, padding, white rule, eyebrow and type,
   so the blue section reads as the same component on both pages. ── */
.promise {
  position: relative; z-index: 2;
  /* 40px past the container each side, pulled 100px up into the hero: identical spot to the homepage card */
  width: calc(100% + 80px); margin: -100px -40px 0;
  padding: 124px 40px; /* 124px top keeps the strip that peeks onto the first screen plain blue, like the homepage */
  background: var(--blue); color: #fff; border-radius: 0;
}
.promise-rule { height: 2px; background: #fff; margin-bottom: 18px; }
.promise-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; margin-bottom: 78px; }
.promise-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 64px; }
.promise-text { flex: 0 1 640px; min-width: 0; }
.promise-title {
  font-size: clamp(30px, 3.4vw, 48px); font-weight: 300; font-style: italic;
  letter-spacing: -0.025em; line-height: 1.12; color: #fff;
}
.promise-title .q-bold { font-weight: 400; color: #fff; }
.promise-title .q-thin { font-weight: 300; }
.promise-note { margin-top: 24px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, 0.72); max-width: 52ch; }
/* pulled in from the right edge like the homepage .contact-action (translateX(-150px)): the full 150px from 1440 up,
   easing to 0 by about 1190px so the tips column keeps its width on smaller laptops (the title shrinks instead) */
.promise-side { list-style: none; flex: 0 0 360px; margin-right: clamp(0px, calc((100vw - 1190px) * 0.6), 150px); }
.promise-side li { padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.28); font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
.promise-side li:first-child { padding-top: 0; border-top: 0; }
.promise-side li:last-child { padding-bottom: 0; }
.promise-side strong { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 500; color: #fff; }
@media (max-width: 880px) {
  .promise-inner { flex-direction: column; gap: 32px; }
  .promise-text { max-width: none; }
  .promise-side { flex: none; width: 100%; margin-right: 0; }
}

/* ── SHELL: one centred column ── */
.shell { max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 128px var(--gutter) 96px; }
.stage { min-width: 0; }
.stage-help { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--muted); }

.progress { padding-block: 4px 18px; }
.progress-meta { display: none; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.progress-title { color: var(--ink); }
.progress-ruler {
  position: relative; height: 12px; margin-top: 10px;
  background:
    repeating-linear-gradient(to right, var(--rule-strong) 0 1px, transparent 1px 12.5%) left bottom / calc(100% + 1px) 12px no-repeat,
    repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 2.5%) left bottom / 100% 6px no-repeat;
  border-bottom: 1px solid var(--rule-strong);
}
.progress-fill {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px;
  background: var(--blue); transform-origin: left center; transform: scaleX(0.125);
  transition: transform 520ms var(--ease-out-expo);
}

/* ── STEPS ── */
.step-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(14px, 3vw, 34px); align-items: start;
  padding-bottom: clamp(22px, 3vw, 34px); border-bottom: 2px solid var(--ink);
}
.step-num { font-family: var(--font-display); font-weight: 400; font-size: var(--text-num); line-height: 0.78; letter-spacing: -0.03em; }
.step-count { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.step-title { font-size: var(--text-h2); font-weight: 300; letter-spacing: -0.03em; line-height: 1.08; margin-top: 8px; outline: none; }
.step-why { color: var(--muted); max-width: 54ch; margin-top: 12px; }
.req { color: var(--blue); font-weight: 500; }

.q { border: 0; min-width: 0; padding-block: 22px; border-bottom: 1px solid var(--rule); }
.q-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.q-label { display: block; width: 100%; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--ink); }
/* A floated legend sits inside the fieldset padding like any other label, instead of on the border. */
legend.q-label { float: left; }
legend.q-label + * { clear: both; }
/* Clearance swallows the top margin of whatever follows a floated legend, so that gap is set with padding. */
legend.q-label + .chips { margin-top: 0; padding-top: 16px; }
legend.q-label + .q-hint { margin-top: 0; padding-top: 4px; }
.q-hint { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-top: 4px; max-width: 62ch; }
.q-hint-after { margin-top: 14px; }
.q-hint-block { padding-block: 14px 0; }
.q-error { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; font-weight: 500; color: var(--danger); }
.q-error::before { content: '!'; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); color: #fff; font-size: 11px; font-weight: 500; }

.field {
  display: block; width: 100%; margin-top: 10px; padding: 13px 15px;
  font: 300 16px/1.5 var(--font-body); color: var(--ink);
  background: var(--panel); border: 1px solid transparent; border-radius: var(--radius-field);
  transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
  appearance: none; -webkit-appearance: none;
}
.field::placeholder { color: var(--faint); }
.field:hover { border-color: var(--rule-strong); }
.field:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px var(--blue-ring); }
.field[aria-invalid="true"] { border-color: var(--danger); background: #fff; }
textarea.field { min-height: 88px; resize: vertical; }

/* Chips: real radios and checkboxes, restyled. Square marker = pick many, round = pick one. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { position: relative; display: inline-flex; max-width: 100%; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--rule-strong); border-radius: var(--radius-pill); background: #fff;
  font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); cursor: pointer; user-select: none;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}
.chip span::before {
  content: ''; flex: none; width: 12px; height: 12px; border: 1.5px solid var(--rule-strong);
  background: #fff center / 9px no-repeat;
  transition: background-color var(--duration-fast), border-color var(--duration-fast);
}
.chip input[type="radio"] + span::before { border-radius: 50%; }
.chip input[type="checkbox"] + span::before { border-radius: 3px; }
.chip span:hover { border-color: var(--ink); }
.chip span:active { transform: scale(0.97); }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input[type="radio"]:checked + span::before { border-color: #fff; background-color: var(--blue); box-shadow: inset 0 0 0 2px var(--ink); }
.chip input[type="checkbox"]:checked + span::before {
  border-color: var(--blue); background-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E");
}
.chip input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }

.reveal { margin-top: 16px; padding: 4px 0 4px 18px; border-left: 2px solid var(--blue); }
.reveal .q-label { font-size: 14px; }
.reveal-note { font-size: 14px; color: var(--ink-soft); margin-top: 10px; max-width: 60ch; }
.reveal > .reveal-note:first-child { margin-top: 0; }
.q-nested { padding-block: 18px 4px; border-bottom: 0; }

.sub-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  margin-top: 40px; padding-top: 14px; border-top: 2px solid var(--ink);
  font-size: 19px; font-weight: 500; letter-spacing: -0.01em;
}
.sub-head span { font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.sub-head + .q, .sub-head + .q-grid .q { padding-top: 14px; }


.howto { margin-top: 18px; padding: clamp(18px, 3vw, 24px); background: var(--panel); border-radius: var(--radius-card); }
.reveal > .howto:first-child { margin-top: 0; }
.howto-title { font-weight: 500; }
.howto-steps { list-style: none; counter-reset: how; display: grid; gap: 12px; margin-top: 16px; }
.howto-steps li { counter-increment: how; position: relative; min-height: 30px; padding: 4px 0 0 42px; font-size: 14.5px; }
.howto-steps li::before {
  content: counter(how, decimal-leading-zero); position: absolute; left: 0; top: 0;
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; background: rgba(59, 111, 224, 0.1); color: var(--blue); font-size: 11px; font-weight: 500;
}
.howto-foot { margin-top: 16px; font-size: 13px; color: var(--muted); }
.copy-chip {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; max-width: 100%; margin-top: 6px; padding: 3px 3px 3px 9px;
  border: 1px solid var(--rule-strong); border-radius: 8px; background: #fff; vertical-align: middle;
}
.copy-chip code { font: 500 13.5px/1.5 var(--font-mono); overflow-wrap: anywhere; }
.copy-btn {
  min-height: 32px; padding: 6px 12px; border: 0; border-radius: 6px; background: var(--ink); color: #fff;
  font: 500 12px var(--font-body); cursor: pointer; transition: background var(--duration-fast);
}
.copy-btn:hover { background: var(--ink-soft); }
.copy-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.copy-btn.is-copied { background: var(--ok); }

.step-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 30px 8px; }
.step-nav [data-action="next"], .step-nav [type="submit"] { margin-left: auto; }
.fine-print { font-size: 12.5px; color: var(--muted); text-align: right; margin-top: 10px; }

.send-error { margin-top: 24px; padding: 20px; border: 1px solid var(--danger); border-left-width: 3px; border-radius: var(--radius-card); background: #fff; }
.send-error-title { font-weight: 500; color: var(--danger); margin-bottom: 6px; }
.send-error-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.copy-status { margin-top: 10px; font-size: 13px; color: var(--ink-soft); }

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

/* ── DONE ── */
.done { padding-block: clamp(20px, 4vw, 48px) 40px; }
/* Same type as the cover title (and the homepage hero title). The "Sent" eyebrow above is .hero-eyebrow, whose 36px bottom margin is the gap. */
.done-title { font-size: clamp(24px, 5.8vw, 87px); font-weight: 300; letter-spacing: -0.03em; line-height: 1.08; outline: none; }
.done-title em {
  font-style: normal; font-weight: 500;
  white-space: nowrap; display: inline-block; min-width: 1ch;
  line-height: 1.2; padding-bottom: 0.14em;
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-repeat: no-repeat; background-size: 100% 100%;
  background-image: linear-gradient(90deg, #111114, #111114);
}
.timeline { list-style: none; margin-top: 40px; border-top: 2px solid var(--ink); }
.timeline li { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 8px 28px; padding-block: 22px; border-bottom: 1px solid var(--rule); }
.timeline-when { font-family: var(--font-display); font-size: 21px; line-height: 1.25; }
.timeline-what { color: var(--ink-soft); }
/* Mini version of the blue promise card: white rule, small spaced eyebrow, light italic title, soft white copy */
.habit { margin-top: 40px; padding: clamp(24px, 3vw, 36px); background: var(--blue); color: #fff; border-radius: 0; }
.habit-rule { height: 2px; background: #fff; margin-bottom: 14px; }
.habit-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #fff; margin-bottom: clamp(24px, 3vw, 36px); }
.habit-title { font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; font-style: italic; letter-spacing: -0.025em; line-height: 1.12; color: #fff; }
.habit-copy { margin-top: 12px; font-size: 14px; font-weight: 300; line-height: 1.55; color: rgba(255, 255, 255, 0.72); max-width: 52ch; }
.done-contact { margin-top: 28px; font-size: 13.5px; color: var(--muted); }

/* ── JS MODE: one step at a time ── */
.js .shell { display: none; }
.js.is-started .shell { display: block; }
.js.is-started .cover { display: none; }
.js .step { display: none; }
.js .step.is-active { display: block; animation: step-in var(--duration-normal) var(--ease-out-expo) both; }
.js .step.is-active .q { animation: q-in 440ms var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 32ms); }
.js.is-done form, .js.is-done .progress, .js.is-done .stage-help { display: none; }
.no-js .js-only, .no-js .progress, .no-js .save-state { display: none !important; }
.no-js .step + .step { margin-top: 72px; }

@keyframes step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes q-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── RESPONSIVE ── */
@media (max-width: 960px) {
  .progress-meta { display: flex; }
  .js .step-count { display: none; }
  .progress {
    position: sticky; top: 0; z-index: 20;
    margin-inline: calc(var(--gutter) * -1); padding: 12px var(--gutter) 14px;
    background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
}

@media (max-width: 760px) {
  /* homepage card on phones: full bleed, 64px 24px padding, pulled 40px into the hero, 40px under the eyebrow */
  .promise { width: calc(100% + 48px); margin: -40px -24px 0; padding: 64px 24px; }
  .promise-eyebrow { margin-bottom: 40px; }
  /* Phones: the homepage hero is vertically centred in 90vh (104px top, 96px bottom padding), so its eyebrow
     top depends on how tall its content is. That height only changes where its title rewraps (measured with
     "month after month"): 356px under 325px wide, 318px to 398px, 280px to 503px, 242px to 689px, 204px to 760px.
     This hero has more text, so instead of centring it starts at the homepage eyebrow position.
     The small bottom padding keeps the hero at 90vh so the blue block below still lines up. */
  .cover-hero {
    --home-hero-content: 318px;
    align-items: flex-start; min-height: 90vh;
    padding: max(104px, calc(104px + (90vh - 200px - var(--home-hero-content)) / 2)) 0 40px;
  }
  .cover-lead { margin-bottom: 48px; }
  .hero-eyebrow { font-size: 8px; letter-spacing: 0.04em; gap: 8px; margin-bottom: 24px; white-space: nowrap; }
  .hero-eyebrow::before { height: 10px; }
  .cover-title { font-size: 34px; line-height: 1.12; margin-bottom: 34px; }
  .done-title { font-size: 34px; line-height: 1.12; }
  .cover-title { white-space: normal; }
  .cover-break { display: none; }
  .q-grid { grid-template-columns: minmax(0, 1fr); }
  .timeline li { grid-template-columns: minmax(0, 1fr); }
  .js .step-nav {
    position: sticky; bottom: 0; z-index: 10;
    margin-inline: calc(var(--gutter) * -1); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--rule);
  }
  .fine-print { text-align: left; }
}

@media (max-width: 420px) {
  .step-head { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .step-num { font-size: 52px; line-height: 0.9; }
  .chip span { padding: 9px 14px; font-size: 13.5px; }
  .btn-lg { width: 100%; }
  .reveal { padding-left: 14px; }
  .howto { padding: 16px; }
  .howto-steps li { padding-left: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Homepage hero content heights by phone width (see the 760px cover-hero note) */
@media (max-width: 324px) { .cover-hero { --home-hero-content: 356px; } }
@media (min-width: 399px) and (max-width: 503px) { .cover-hero { --home-hero-content: 280px; } }
@media (min-width: 504px) and (max-width: 689px) { .cover-hero { --home-hero-content: 242px; } }
@media (min-width: 690px) and (max-width: 760px) { .cover-hero { --home-hero-content: 204px; } }