/* prereq.ca — Sky Light (baseline), Night Shift in dark mode, a Daybreak
   glow in the hero. Orange is for the arrow and the critical path only. */
@font-face { font-family: Outfit; font-weight: 400; font-display: swap; src: url(fonts/outfit-400.woff2) format('woff2'); }
@font-face { font-family: Outfit; font-weight: 500; font-display: swap; src: url(fonts/outfit-500.woff2) format('woff2'); }
@font-face { font-family: Outfit; font-weight: 600; font-display: swap; src: url(fonts/outfit-600.woff2) format('woff2'); }
@font-face { font-family: Outfit; font-weight: 700; font-display: swap; src: url(fonts/outfit-700.woff2) format('woff2'); }
@font-face { font-family: Outfit; font-weight: 800; font-display: swap; src: url(fonts/outfit-800.woff2) format('woff2'); }
/* Numbers (dates, durations, counts, step numbers) are in Inter Tabular, the app's number font:
   Inter with same-width digits, sized close to DM Mono's figures (brand, 17 Oct). Words stay in Outfit. */
@font-face { font-family: 'Inter Tabular'; font-weight: 400; font-display: swap; src: url(fonts/inter-tabular-400.890f5a6f.woff2) format('woff2'); }
@font-face { font-family: 'Inter Tabular'; font-weight: 500; font-display: swap; src: url(fonts/inter-tabular-500.2bf0e437.woff2) format('woff2'); }

:root {
  --canvas: #f4f9fd; --surface: #ffffff; --surface-2: #f7fbfe; --surface-3: #e9f2f9;
  --ink: #0f2236; --ink-2: #2f4a63; --muted: #557089;
  --line: #e3edf5; --line-strong: #c3d7e6;
  --sky: #0284c7; --sky-text: #0369a1; --sky-hover: #0369a1; --sky-btn: #0369a1; --sky-btn-hover: #075985; --sky-on: #ffffff; --sky-wash: #e0f2fe; --mark: #bae6fd; --quote-band: #fdba9c; --task-line: #7cc3ec; --edge: #8fb3cc;
  --crit: #e8541c; --crit-text: #c2410c; --crit-wash: #fdeee7;
  --arrow: #e8541c; --ok: #16a34a;
  --dawn: #fff8f4; --dawn-2: #ffeee4;
  --navy: #0b2545; --navy-2: #0b1622;
  --shadow: 0 1px 2px rgba(15, 34, 54, .06), 0 8px 24px rgba(15, 34, 54, .08);
  --shadow-lg: 0 2px 6px rgba(15, 34, 54, .06), 0 24px 60px rgba(15, 34, 54, .14);
  --radius: 14px;
  --wrap: 1180px;
  --mono: 'Inter Tabular', ui-monospace, Menlo, monospace;
  color-scheme: light;
}
/* Night Shift: follows the device, and an explicit data-theme wins either way. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0b1622; --surface: #122233; --surface-2: #0e1b28; --surface-3: #16293c;
    --ink: #e6f1fa; --ink-2: #c3d6e6; --muted: #8fa9c0;
    --line: #1f3448; --line-strong: #2d4a63;
    --sky: #38bdf8; --sky-text: #38bdf8; --sky-hover: #7dd3fc; --sky-btn: #38bdf8; --sky-btn-hover: #7dd3fc; --sky-on: #06121c; --sky-wash: #12324a; --mark: #1d5a80; --quote-band: #c2410c; --task-line: #3b8cc0; --edge: #4f7391;
    --crit: #ff7a45; --crit-text: #ff8a5c; --crit-wash: #3a2117;
    --arrow: #ff7a45; --ok: #4ade80;
    --dawn: #13202e; --dawn-2: #1a2531;
    --final-glow: #10283c; /* the closing glow: dawn-2's lightness with a sky hue, so it never reads grey */
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --canvas: #0b1622; --surface: #122233; --surface-2: #0e1b28; --surface-3: #16293c;
  --ink: #e6f1fa; --ink-2: #c3d6e6; --muted: #8fa9c0;
  --line: #1f3448; --line-strong: #2d4a63;
  --sky: #38bdf8; --sky-text: #38bdf8; --sky-hover: #7dd3fc; --sky-btn: #38bdf8; --sky-btn-hover: #7dd3fc; --sky-on: #06121c; --sky-wash: #12324a; --mark: #1d5a80; --quote-band: #c2410c; --task-line: #3b8cc0; --edge: #4f7391;
  --crit: #ff7a45; --crit-text: #ff8a5c; --crit-wash: #3a2117;
  --arrow: #ff7a45; --ok: #4ade80;
  --dawn: #13202e; --dawn-2: #1a2531;
  --final-glow: #10283c;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .3);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 24px 60px rgba(0, 0, 0, .45);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 17px/1.6 Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--sky-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sky-hover); }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0; font-weight: 700; }
/* No one-word last lines: headings balance, copy avoids orphans. */
h1, h2, h3, h4, .who-card q { text-wrap: balance; }
p, li, small, blockquote, .lede, .pilot-get span, .chain-steps li > div > span { text-wrap: pretty; }
.phrase { display: inline-block; } /* a heading of two sentences breaks between them first */
.pq { font-weight: bolder; } /* the name in running text: 400 and 500 set it in 700, a bold context in 800 */
p { margin: 0; }
.mono { font-family: var(--mono); font-weight: 500; letter-spacing: 0; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
/* The narrowest phones (under 360 px): a 16 px gutter, so the drawings and app close-ups get the room their text needs. */
@media (max-width: 359px) { .wrap { padding: 0 16px; } }
.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; }
/* The skip link opens 12 px left of the nav's content edge, over the whole wordmark. */
.skip { position: absolute; left: max(12px, calc(50% - 578px)); top: -60px; background: var(--sky-btn); color: var(--sky-on); padding: 10px 14px; border-radius: 8px; z-index: 100; font-weight: 600; }
.skip:focus { top: 12px; }
@media (max-width: 359px) { .skip { left: 10px; } } /* its focus ring stays on screen */
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

/* Buttons: sky blue, verb first, same labels as every campaign. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: 12px; border: 1.5px solid transparent;
  font: 600 17px/1 Outfit, sans-serif; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
/* Filled sky is a shade deeper than the sky accent in light, so white button text clears 4.5:1, as in the app. */
.btn-primary { background: var(--sky-btn); color: var(--sky-on); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 18px rgba(3, 105, 161, .28); }
.btn-primary:hover { background: var(--sky-btn-hover); color: var(--sky-on); transform: translateY(-1px); box-shadow: 0 10px 26px rgba(3, 105, 161, .34); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--sky); color: var(--ink); transform: translateY(-1px); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
/* The → after a label: Outfit has no arrow glyph, so it is drawn at the label's weight in currentColor. */
.btn .go { --go: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h13M9 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  flex: none; width: 16px; height: 12px; font-size: 0; background: currentColor; -webkit-mask: var(--go) center / contain no-repeat; mask: var(--go) center / contain no-repeat; transition: transform .2s ease; }
.btn:hover .go { transform: translateX(3px); }
/* High Contrast forces the mask's fill away: draw the arrow in the link colour the label gets. */
@media (forced-colors: active) { .btn .go { forced-color-adjust: none; background: LinkText; } }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sky-text); }
.eyebrow.crit { color: var(--crit-text); }
.lede { font-size: 20px; line-height: 1.55; color: var(--ink-2); }
.section { padding: 112px 0; position: relative; }
.section-head { max-width: 760px; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(32px, 4.4vw, 50px); margin: 14px 0 18px; }
/* Phones: one step between sections (72 px under each, plus the next one's 40 px top), and the closing band to match. */
@media (max-width: 560px) { .section { padding-bottom: 72px; } section.final { padding: 72px 0 88px; } }
.center { text-align: center; margin-left: auto; margin-right: auto; }
@media (max-width: 560px) { .section-head.center { text-align: left; } }

/* ── Nav ─────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--canvas) 96%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease, background-color .2s ease; }
.nav.scrolled { border-bottom-color: var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 72px; }
.nav .brand { color: var(--ink); display: flex; flex: none; align-items: center; gap: 12px; min-height: 44px; text-decoration: none; }
/* prereq is in early testing: a small tag beside the logo on every page. It sits up with
   the letters, like a superscript, so the logo's arrow runs under it and never points at it. */
.beta { font: 600 11px/1 Outfit, system-ui, sans-serif; letter-spacing: .04em; color: var(--sky-text); border: 1px solid currentColor; border-radius: 999px; padding: 3px 7px 4px; white-space: nowrap; position: relative; top: -5px; }
.nav .brand svg { height: 30px; width: auto; flex: none; }
.nav-links { display: flex; gap: 26px; margin-left: 12px; }
.nav-links a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 16px; padding: 10px 0; white-space: nowrap; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav-cta .signin { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 16px; padding: 10px 0; white-space: nowrap; }
.nav-cta .signin:hover { color: var(--ink); }
/* Every nav target is 44 px tall. Tablets keep the three links that fit (they fit on one line from 731 px, all five from 905 px); phones keep Sign in down to 390 px. */
@media (max-width: 939px) { .nav-links { display: none; } .nav .btn-sm { min-height: 44px; } }
@media (min-width: 760px) and (max-width: 939px) { .nav-links { display: flex; gap: 22px; } .nav-links a[href="#who"], .nav-links a[href="#pilot"] { display: none; } }
@media (max-width: 520px) { .nav .wrap { gap: 12px; } .nav-cta { gap: 12px; } .nav-cta .signin { font-size: 15px; padding: 11px 2px; white-space: nowrap; } .nav .brand { gap: 8px; } .nav .brand svg { height: 24px; } .beta { padding: 2px 6px 3px; top: -8px; } .nav .btn-sm { padding-inline: 14px; } }
/* Below the common iPhone width, Sign in waits for the next screen: the logo, its beta tag and Join come first. */
@media (max-width: 389px) { .nav .wrap { gap: 8px; } .nav-cta .signin { display: none; } }
/* Touch screens wider than the phone and tablet rules: Join is a 44 px target too. */
@media (pointer: coarse) { .nav .btn-sm { min-height: 44px; } .nav-links a, .nav-cta .signin { min-width: 44px; text-align: center; } }
/* The wider touch targets take their room out of the gaps, so Join keeps the 24 px right gutter. */
@media (pointer: coarse) and (min-width: 940px) { .nav-links { gap: 22px; } }
@media (pointer: coarse) and (min-width: 760px) and (max-width: 939px) { .nav-links { gap: 18px; } }

/* ── Hero ────────────────────────────────────────── */
.hero { position: relative; padding: 56px 0 72px; overflow: hidden; isolation: isolate; }
.hero::before { /* Daybreak: warm light at the top left, fading into the sky canvas */
  content: ''; position: absolute; inset: -20% -10% 30% -10%; z-index: -1;
  background:
    radial-gradient(60% 70% at 12% 8%, var(--dawn-2) 0%, transparent 60%),
    radial-gradient(50% 60% at 88% 20%, var(--sky-wash) 0%, transparent 65%);
  opacity: .9;
}
.hero-grid-bg { position: absolute; inset: 0; z-index: -1; opacity: .55;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px; mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 75%); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 48px; align-items: center; }
/* The pilot badge: a filled PILOT tag on a sky-tinted pill, so it reads in both themes. */
.pill { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: 999px; background: color-mix(in srgb, var(--sky-wash) 85%, var(--surface)); border: 1px solid color-mix(in srgb, var(--sky) 65%, var(--line)); box-shadow: var(--shadow); font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; }
.pill::after { content: ''; position: absolute; inset: -5px 0; } /* a 44 px tap target */
.pill:hover { border-color: var(--sky); }
.pill .tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 9px; border-radius: 999px; background: var(--sky-btn); color: var(--sky-on); font: 600 12px/1 Outfit, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.pill .arw { color: var(--sky-text); transition: transform .2s ease; }
.pill:hover .arw { transform: translateX(3px); }
@media (max-width: 359px) { .pill { gap: 8px; padding-right: 12px; } } /* one line at 320 */
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: ping 2.4s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 8px transparent; } }
@media (forced-colors: active) { .pill .tag { border: 1px solid CanvasText; } .pill .dot { forced-color-adjust: none; background: CanvasText; } }
.hero h1 { font-size: clamp(46px, 3.7vw, 52px); font-weight: 800; letter-spacing: -0.035em; margin: 0 0 24px; }
.hero .pill { margin-bottom: 22px; } /* the badge sits under the slogan, before the lede */
.hero h1 .line2 { display: inline-block; position: relative; padding-bottom: 6px; white-space: nowrap; }
.hero h1 .underline { position: absolute; left: 0; bottom: -10px; width: 100%; height: auto; overflow: visible; }
.hero h1 .underline path { fill: none; stroke: var(--arrow); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hero h1 .underline path.head { fill: var(--arrow); stroke-width: 3; }
.hero .lede { max-width: 520px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 20px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--muted); }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note svg { width: 16px; height: 16px; color: var(--ok); flex: none; }
/* Phones: a stacked pair of buttons, both the full column width. */
@media (max-width: 520px) { .hero-ctas { flex-direction: column; align-items: stretch; } }
/* Up to small laptops the film goes under the copy at full width: beside it, it would be too narrow to read. */
@media (max-width: 1180px) { .hero .wrap { grid-template-columns: 1fr; gap: 44px; } .hero { padding-top: 36px; } .hero h1 { font-size: clamp(34px, 9.4vw, 56px); } }
/* Tablets and small laptops: the stacked copy is centred over the film, in a tighter stack so more of the film is on the first screen.
   The film stops at 880 px (its dates 14 px there): any wider and a landscape tablet shows only its top third. */
@media (min-width: 721px) and (max-width: 1180px) {
  .hero { padding-top: 12px; } .hero .wrap { gap: 22px; }
  .hero-copy { max-width: 760px; margin-inline: auto; text-align: center; }
  .hero h1 { font-size: 52px; margin: 0 0 20px; } .hero .pill { margin-bottom: 12px; } .hero .lede { max-width: 680px; margin-inline: auto; text-wrap: balance; }
  .hero .hero-ctas { justify-content: center; margin: 20px 0 10px; } .hero .hero-note { justify-content: center; }
  .hero .film { width: 100%; max-width: 880px; margin-inline: auto; }
}
/* Landscape tablets (1024 × 768, 1180 × 820): the lede takes two lines, so half the film or more is on the first screen. */
@media (min-width: 1000px) and (max-width: 1180px) { .hero .lede { max-width: 760px; font-size: 18px; } }
@media (max-width: 370px) { .hero h1 .line2 { white-space: normal; } }

/* ── The film (the mini ad) ─────────────────────── */
.film { position: relative; margin: 0; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid var(--line); overflow: hidden; }
/* The stage is Sky Light in every theme, so in Night Shift the whole card (bar, caption, buttons, focus rings) keeps the Sky Light tokens too. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .film { --surface: #ffffff; --ink: #0f2236; --muted: #557089; --line: #e3edf5; --line-strong: #c3d7e6; --sky: #0284c7; color-scheme: light; } }
:root[data-theme="dark"] .film { --surface: #ffffff; --ink: #0f2236; --muted: #557089; --line: #e3edf5; --line-strong: #c3d7e6; --sky: #0284c7; color-scheme: light; }
/* It fades in on load, not on scroll: on a phone it is the bottom of the first screen. */
@media (prefers-reduced-motion: no-preference) { .js .film { animation: film-in .8s cubic-bezier(.2,.7,.2,1) .12s both; } }
@keyframes film-in { from { opacity: 0; transform: translateY(26px); } }
.film-stage { position: relative; aspect-ratio: 16 / 10; background: #f4f9fd; }
.film-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* out of flow: a layout elsewhere on the page no longer repaints the film in Safari */
.film-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px 12px; background: var(--surface); border-top: 1px solid var(--line); }
.film-play { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; }
.film-play:hover { border-color: var(--sky); color: var(--sky); }
.film-play svg { width: 14px; height: 14px; }
.film-chapters { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.film-chapters button { all: unset; cursor: pointer; display: grid; align-content: center; gap: 6px; padding: 6px 0; font-size: 12px; font-weight: 500; color: var(--muted); min-width: 0; }
.film-chapters button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.film-chapters button i { display: block; height: 4px; border-radius: 4px; background: var(--line-strong); overflow: hidden; position: relative; }
.film-chapters button i b { position: absolute; inset: 0; width: 0%; background: var(--sky); border-radius: 4px; }
.film-chapters button.on { color: var(--ink); }
.film-chapters button:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }
/* The caption is aria-hidden page text that slides up 6 px as it fades in; it never takes taps meant for the bar under it. */
.film-cap { display: none; pointer-events: none; }
/* Phones: the labels go, and each chapter and the play button keep a 44 px tap target. */
@media (max-width: 560px) {
  .film-chapters button span { display: none; }
  .film-chapters { gap: 0; }
  .film-chapters button { padding: 20px 4px; }
  .film-chapters button:focus-visible { outline-offset: -2px; }
  .film-bar { padding-block: 0; }
  .film-play { width: 44px; height: 44px; }
}
/* Under 360 px the film is the whole 16 px-gutter column, and the play button and five chapters are each 44 px wide. */
@media (max-width: 359px) { .film-bar { padding-inline: 6px; gap: 4px; } }
/* The compact cut (phones and small tablets, up to 767 px): the film's words leave
   the picture (drawn at a third to three quarters of its size there) and run under
   it as page text; film.js fills it in time with the film. The opening and end
   lines stay in the picture, under the logo. The strip is the same canvas as the picture, its
   dots drawn at the picture's scale (--fk, set by film.js), so the two read as one. */
@media (max-width: 767px) {
  .film-cap { display: block; min-height: 92px; padding: 12px 16px 6px;
    background: #f4f9fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='1.5' cy='1.5' r='1.2' fill='%23c3d7e6' fill-opacity='.55'/%3E%3C/svg%3E") 0 0 / calc(24px * var(--fk, .4)) calc(24px * var(--fk, .4)); }
  .film-cap b { display: block; font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
  .film-cap span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.4; color: var(--muted); text-wrap: balance; }
}
/* High contrast: the chapter bars are the only playback and current-chapter cue, so they keep system colours. */
@media (forced-colors: active) {
  .film-chapters button i { forced-color-adjust: none; background: GrayText; }
  .film-chapters button i b { forced-color-adjust: none; background: Highlight; }
}
/* Touch screens above phone width: the play button keeps its look with a 44 px tap target, and the chapters are 44 px tall. */
@media (pointer: coarse) and (min-width: 561px) {
  .film-play { position: relative; }
  .film-play::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; }
  .film-chapters button { box-sizing: border-box; min-height: 44px; }
}
.film-tag { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #557089; background: rgba(255,255,255,.85); border: 1px solid #e3edf5; padding: 3px 8px; border-radius: 6px; }

/* Film elements (SVG). The film keeps the Sky Light palette in every theme.
   Its smallest text is 15.3 units: 11 px or more wherever the desktop cut is at least 691 px wide
   (from 1181 px). From 768 to 940 px it is drawn at 16.1-16.3 units, 12 px or more. */
.wm-l { fill: #0f2236; }
.wm-bar, .wm-head { fill: #e8541c; stroke: #e8541c; stroke-linejoin: round; }
.f-cap { font: 700 34px Outfit, sans-serif; fill: #0f2236; letter-spacing: -0.02em; }
.f-sub { font: 500 21px Outfit, sans-serif; fill: #557089; }
.f-cap.f-lead { fill: #557089; font-weight: 500; letter-spacing: -0.01em; } /* the line under the big logo, sized and placed by film.js */
.f-card-t { font: 600 16px Outfit, sans-serif; fill: #0f2236; }
.f-date { font: 500 15.3px var(--mono); fill: #2f4a63; paint-order: stroke; stroke: #f4f9fd; stroke-width: 4px; stroke-linejoin: round; }
.f-note-t { font: 500 15px Outfit, sans-serif; fill: #0f2236; }
.f-axis { font: 600 15.5px Outfit, sans-serif; fill: #557089; letter-spacing: .01em; }
.f-chip { font: 600 15.5px Outfit, sans-serif; }
.f-mono { font: 500 16px var(--mono); }
.f-tag { font: 600 15.5px Outfit, sans-serif; }
.f-file-note { font-weight: 500; }
#f-fin .f-card-t { paint-order: stroke; stroke: #f4f9fd; stroke-width: 4px; stroke-linejoin: round; } /* clear of the grid lines behind it */
.f-ln { display: none; }
/* The compact cut: the picture keeps only what reads at 11 px there. Names become plain
   lines, the dates and labels go, the HUD chips and file tags are drawn bigger
   (the file tags at half the chips' size: the files are drawn twice the size). */
@media (max-width: 767px) {
  #f-sub, #f-dates, #f-fin text, .f-scale, #f-end .end-btn, #f-end .end-url, #f-cards .f-card-t, #f-files .f-card-t, .f-file-note { display: none; }
  .f-ln { display: inline; }
  #f-hud .f-chip, #f-hud .f-mono { font-size: 33px; }
  .f-tag { font-size: 16.5px; }
}
/* Its HUD and tags at 11 px or more on the narrowest phones; on small tablets the HUD at about the size of the caption under it. */
@media (max-width: 374px) { #f-hud .f-chip, #f-hud .f-mono { font-size: 38px; } .f-tag { font-size: 19px; } }
@media (min-width: 561px) and (max-width: 767px) { #f-hud .f-chip, #f-hud .f-mono { font-size: 22px; } }
/* The desktop cut from 768 to 940 px: its small labels are drawn at 16.3 units, 12 px or more.
   The dates a touch tighter, so they stay clear of the links beside them. */
@media (min-width: 768px) and (max-width: 940px) {
  .f-axis, .f-tag, .f-chip, .f-mono, .f-card-t { font-size: 16.3px; }
  .f-date { font-size: 16.1px; letter-spacing: -0.02em; }
}

/* ── Marquee of lines ───────────────────────────── */
.marquee { position: relative; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); overflow: hidden; padding: 18px 0; }
.marquee-track { display: flex; width: max-content; gap: 0; animation: marquee 58s linear infinite; } /* six lines: 58 s keeps the pace five had at 48 s */
.marquee:hover .marquee-track, .marquee.paused .marquee-track { animation-play-state: paused; }
.marquee-item { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; color: var(--ink); }
/* Each line ends on the buttons' arrow, in sky: orange stays for the logo, the critical path and the campaign arrow. */
.marquee-item::after { --go: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1 6h13M9 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  content: ''; flex: none; width: 24px; height: 18px; background: var(--sky); -webkit-mask: var(--go) center / contain no-repeat; mask: var(--go) center / contain no-repeat; }
@keyframes marquee { to { transform: translateX(-50%); } }
/* Pause / play: a quiet round control at the strip's right edge (WCAG 2.2.2). Only with JS and motion. */
.marquee-toggle { display: none; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--muted); cursor: pointer; place-items: center; }
.js .marquee::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 128px; background: linear-gradient(90deg, transparent, var(--surface) 50%); pointer-events: none; } /* the lines fade out under the control */
.js .marquee-toggle { display: grid; }
.marquee-toggle:hover { color: var(--ink); border-color: var(--edge); }
.marquee-toggle svg { width: 14px; height: 14px; }
.marquee-toggle .i-play, .marquee-toggle[aria-pressed="true"] .i-pause { display: none; }
.marquee-toggle[aria-pressed="true"] .i-play { display: block; }
@media (pointer: coarse) { .marquee-toggle { width: 44px; height: 44px; right: 10px; } }
@media (forced-colors: active) { .marquee-item::after { forced-color-adjust: none; background: CanvasText; } .js .marquee::after { width: 68px; forced-color-adjust: none; background: Canvas; } }
/* Reduce Motion: the lines stand still in centred rows, each arrow leading into its own line.
   Below 900 px they stack one per line, where the arrows would separate nothing. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { gap: 10px 40px; padding: 0 24px; max-width: var(--wrap); margin: 0 auto; } /* the rows keep to the page's content column */
  .marquee-item { padding-right: 0; gap: 12px; white-space: normal; text-align: center; text-wrap: balance; }
  .marquee-item::after { order: -1; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) { .marquee-item { flex-basis: 100%; justify-content: center; } .marquee-item::after { display: none; } }
@media (prefers-reduced-motion: reduce) and (max-width: 560px) { .marquee-item { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) and (max-width: 359px) { .marquee-track { padding: 0 16px; } }

/* ── Formats strip ──────────────────────────────── */
.formats { padding: 40px 0 0; }
.formats .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 14px; }
.formats .label { font-size: 14px; color: var(--muted); font-weight: 500; margin-right: 6px; }
/* Flat tags, not buttons: nothing here is tappable. */
.fmt { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 6px; background: var(--surface-3); font-size: 15px; font-weight: 500; color: var(--ink-2); }
.fmt .ext { font-size: 13px; color: var(--muted); }
@media (max-width: 1000px) { .formats .label { flex-basis: 100%; text-align: center; margin-right: 0; } }
@media (max-width: 560px) { .formats .wrap { gap: 10px; } .fmt { padding: 6px 10px; font-size: 14px; } .fmt .ext { font-size: 12px; } }

/* ── Panels (the problem section, problem.css, and the pilot) ── */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.panel h3 { font-size: 22px; margin-bottom: 6px; }
.panel .k { font-size: 15px; font-weight: 600; color: var(--muted); }
.panel .k.good { color: var(--sky-text); }
/* Links in the drawings draw fast, so each line meets its arrowhead as the head fades in (.tip, below). */
.js .in :is(.migrate, .final-chain) .draw { animation-duration: .35s; animation-timing-function: ease-out; }
/* Under 360 px the cards keep 22 px each side, as the pilot cards do. */
@media (max-width: 359px) { .who .who-card { padding-inline: 22px; } }

/* ── How it works (sticky product story) ────────── */
/* The app's own colours in the screenshots (light and dark), for the callout keys. */
:root { --shot-float-edge: #7ac2ea; --shot-bad: #dc2626; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shot-float-edge: #3c8cc0; --shot-bad: #f87171; } }
:root[data-theme="dark"] { --shot-float-edge: #3c8cc0; --shot-bad: #f87171; }
.story { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.5fr); gap: 40px; align-items: start; } /* the frame as wide as the copy allows, so the app's own text reads */
.story-steps { display: grid; gap: 0; }
.step { min-height: 50vh; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
/* Beside the frame, the steps that aren't on screen step back, still at AA contrast; the number keeps its own colours, which already mark the current step. */
.step > * { transition: opacity .4s ease; }
@media (min-width: 1181px) { .step:not(.on) > :not(.num) { opacity: .8; } }
.step .num { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--sky-wash); color: var(--sky-text); font-family: var(--mono); font-weight: 500; margin-bottom: 18px; transition: background-color .3s ease, color .3s ease; }
.step.on .num { background: var(--sky-btn); color: var(--sky-on); }
.step h3 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 14px; }
.step p { color: var(--ink-2); font-size: 18px; max-width: 440px; }
.step ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--ink-2); font-size: 16px; }
.step li { display: flex; gap: 10px; align-items: baseline; }
.step li::before { content: ''; flex: none; width: 14px; height: 2px; background: var(--sky); transform: translateY(-4px); border-radius: 2px; }
.step .step-shot, .step .shot-note { display: none; }
.story-frame { position: sticky; top: max(96px, calc(50vh - 240px)); } /* level with the step in the middle of the screen */
.browser { border-radius: 16px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.browser-top { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.browser-top i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.browser-top .url { margin-left: 12px; flex: 1; min-width: 0; max-width: 300px; font-size: 12.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 374px) { .browser-top .url { margin-left: 4px; } } /* one line, like a real address bar: whole from 360px, cut with an ellipsis below */
/* The screenshot sits inset in the frame, so the corners never cut the app's edges. */
.shots { position: relative; aspect-ratio: 2400 / 1265; overflow: hidden; background: var(--surface-2); margin: 0 6px 6px; border-radius: 0 0 10px 10px; container-type: inline-size; }
/* Each screen is drawn --s times the frame and offset to the part its step talks about (from --x, --y
   of the screen), so the app's own 13px text shows at 9px or more. Box and offsets, not a transform,
   so it holds under reduced motion. */
.shots picture:nth-child(1) { --s: 1.4; --x: 13.5%; --y: 14.5%; } /* Project Start to Project End */
.shots picture:nth-child(2) { --s: 1.4; --x: 0%; --y: 20.08%; } /* the first 14 rows */
.shots picture:nth-child(3) { --s: 1.3; --x: .5%; --y: 15%; } /* ID to Float */
.shots picture:nth-child(4) { --s: 1.3; --x: 11.5%; --y: 23%; } /* the report, title to milestones */
.shots img { position: absolute; left: calc(var(--x) * var(--s) * -1); top: calc(var(--y) * var(--s) * -1); width: calc(var(--s) * 100%); height: calc(var(--s) * 100%); max-width: none; object-fit: cover; object-position: top left; opacity: 0; transition: opacity .6s ease; }
.shots img.on { opacity: 1; }
/* Callouts sit beside what they name, with a caret toward it, and scale with
   the screenshot so they keep clear of it at every width. The old step's leave
   at once; the new step's wait until their screen has faded in. */
.callout { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: .5em; padding: .5em .8em; border-radius: 9px; background: var(--ink); color: var(--canvas); font-size: 12px; font-size: clamp(11.5px, 2.1cqi, 13px); line-height: 1.25; font-weight: 600; box-shadow: 0 8px 22px rgba(15,34,54,.28); opacity: 0; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease; pointer-events: none; white-space: nowrap; }
.callout.on { opacity: 1; transform: none; transition: opacity .4s ease .4s, transform .4s ease .4s; }
.callout::after { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 2px; background: inherit; transform: rotate(45deg); }
.callout.up::after { top: -4px; left: var(--at, 20px); }
.callout.left::after { left: -4px; top: calc(50% - 4.5px); }
.callout.right::after { right: -4px; top: calc(50% - 4.5px); }
.callout .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--crit); }
.callout .sw.float { height: 3px; width: 14px; border-radius: 2px; background: var(--shot-float-edge); } /* the Gantt draws float as a thin line */
.callout .sw.task { background: var(--sky-wash); box-shadow: inset 0 0 0 1.5px var(--task-line); }
.frame-caption { margin-top: 14px; font-size: 14px; color: var(--muted); text-align: center; }
@media (max-width: 1180px) {
  .story, .story-steps { grid-template-columns: minmax(0, 1fr); } .story { gap: 0; } /* the Table's scroller stays inside the column */
  .story-frame { display: none; }
  .step { min-height: 0; opacity: 1; padding: 0 0 56px; }
  .step:last-child { padding-bottom: 0; }
  .step.on .num { background: var(--sky-wash); color: var(--sky-text); } /* no current step without the frame */
  /* A close-up of each screen, inset so the frame's corners don't cut it, and no
     larger than its own pixels (3x) can fill. */
  .step .step-shot { display: block; margin-top: 22px; padding: 6px; max-width: 540px; }
  .step .step-shot img { border-radius: 10px; }
  /* The Table is wide: it keeps its text readable (at least 698px, the frame at 760) and
     scrolls sideways in its frame where the screen is narrower, like the sheet itself. */
  .step .step-shot.wide { max-width: 760px; }
  .step .shot-scroll { overflow-x: auto; border-radius: 10px; overscroll-behavior-x: contain; }
  .step .shot-scroll:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
  .step .shot-scroll img { min-width: 698px; border-radius: 0; }
  .step .shot-note { display: block; margin-top: 10px; font-size: 14px; color: var(--muted); }
}
/* Below the tablet column the Table's frame is as wide as the other three, and scrolls. */
@media (max-width: 760px) { .step .step-shot.wide { max-width: 540px; } }
/* Under 360 px the close-ups are the whole column, inset 4 px (the corners still clear), so the app's text shows as large as it can. */
@media (max-width: 359px) { .step .step-shot { padding: 4px; } .step .step-shot > picture img, .step .shot-scroll { border-radius: 11px; } .step .shot-scroll:focus-visible { outline-offset: 0; } }
@media (min-width: 761px) { .step .shot-note.scroll-hint { display: none; } } /* the Table fits its frame from here */
/* Tablets and small laptops: the steps in one centred column under a centred head, and every
   close-up the column's width, the one the Table needs (about 700px) for its text to read. The
   canvas, Gantt and report show a wider cut of the same part there (name-tablet.webp), so their
   text stays near the app's own size. */
@media (min-width: 721px) and (max-width: 1180px) {
  #how .section-head, .story-steps { width: 100%; max-width: 760px; margin-inline: auto; }
  #how .section-head { text-align: center; }
}
@media (min-width: 761px) and (max-width: 1180px) { .step .step-shot, .step .step-shot.wide { max-width: none; } }
@media (min-width: 721px) and (max-width: 760px) { .story-steps { max-width: 540px; } } /* the 540 px frames' column, centred under the head */

/* ── Audience ───────────────────────────────────── */
.who { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.who-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; position: relative; }
.who-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.who-card .role { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.who-card .role svg { width: 22px; height: 22px; }
.who-card q { display: block; margin-top: 14px; font-size: 21px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; quotes: none; }
.who-card p { margin-top: 12px; color: var(--ink-2); font-size: 16px; }
.who-card.lead { grid-column: span 1; }
@media (max-width: 1000px) { .who { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .who { grid-template-columns: 1fr; } }

/* ── Schedule check ─────────────────────────────── */
.check { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.check-list { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 12px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); }
.check-list svg { width: 22px; height: 22px; flex: none; color: var(--ok); margin-top: 2px; }
.check-visual { position: relative; }
.check-note { margin-top: 16px; font-size: 15px; color: var(--muted); }
/* The sample's score, drawn like the checker draws it: a full ring in the verdict colour. */
.score-chip { position: absolute; left: -22px; bottom: -64px; display: flex; align-items: center; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow-lg); }
.score-chip .ring { width: 58px; height: 58px; }
.score-chip .ring circle { fill: none; stroke-width: 6; }
.score-chip b { display: block; font-size: 15px; }
.score-chip span { font-size: 13px; color: var(--muted); }
/* Up to the hero's breakpoint: copy above, the screenshot below at a readable size. */
@media (max-width: 1180px) { .check { grid-template-columns: minmax(0, 1fr); } .score-chip { display: none; } } /* the screenshot shows the score itself */
@media (min-width: 721px) and (max-width: 1180px) { .check > div:first-child, .check-visual { width: 100%; max-width: 760px; margin-inline: auto; } } /* one centred column, like the steps above: a readable measure, the screenshot near its own size */
/* Centred in that column like the hero's copy at these widths, so the column reads as deliberate; the list stays a left-aligned block. */
@media (min-width: 721px) and (max-width: 1180px) { .check > div:first-child { text-align: center; } .check .lede { text-wrap: balance; } .check-list { width: fit-content; margin-inline: auto; text-align: left; } .check .hero-ctas { justify-content: center; } }

/* ── Project Online band (dark navy campaign layer) ─ */
.band { background: radial-gradient(80% 120% at 85% 0%, #12324a 0%, transparent 60%), linear-gradient(160deg, #0b2545 0%, #0b1622 100%); color: #e6f1fa; border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); padding: 64px; position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.band::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; }
.band > * { position: relative; z-index: 1; }
.band h2 { font-size: clamp(32px, 4vw, 48px); margin: 14px 0 18px; color: #fff; }
.band p { color: #c3d6e6; font-size: 18px; }
.band .eyebrow { color: #7dd3fc; }
.band .btn-primary { background: #38bdf8; color: #06121c; box-shadow: 0 8px 24px rgba(56, 189, 248, .25); }
.band .btn-primary:hover { background: #7dd3fc; color: #06121c; }
.band :focus-visible { outline-color: #38bdf8; }
.band small { display: block; margin-top: 16px; color: #8fa9c0; font-size: 13px; }
.band small a { color: #8fa9c0; }
.migrate { width: 100%; height: auto; }
.migrate text:not([font-family]) { font-family: Outfit, sans-serif; }
.migrate-sm { display: none; }
@media (max-width: 1180px) { .band { grid-template-columns: 1fr; padding: 40px 26px; border-radius: 22px; } .band > div { max-width: 560px; } .migrate { max-width: 440px; margin: 0 auto; } }
/* 961-1180: copy beside the drawing, which keeps its 440 px cap (labels stay at 12 px and up; the month tier at the app's 10.5, index.css .gantt-month) */
@media (min-width: 961px) and (max-width: 1180px) { .band { grid-template-columns: minmax(0, 1fr) 440px; gap: 28px; } .migrate { margin: 0; } }
/* 721-960: one column, the copy centred over the drawing like the hero's and the check's. */
@media (min-width: 721px) and (max-width: 960px) { .band > div { margin-inline: auto; text-align: center; } .band p, .band small { text-wrap: balance; } .band .hero-ctas { justify-content: center; } }
/* Two columns: the heading sized from its own column (about 12 times the font size for
   'Your plans don't have to be.'), so each sentence keeps to one line beside the drawing. */
@media (min-width: 961px) { .band > div { container-type: inline-size; } }
@media (min-width: 961px) and (max-width: 1180px) { .band h2 { font-size: clamp(31px, calc((100vw - 580px) / 12.2), 46px); font-size: clamp(31px, calc(100cqi / 12.2), 46px); } }
@media (min-width: 1181px) { .band h2 { font-size: 41px; font-size: clamp(32px, calc(100cqi / 12.2), 41px); } }
@media (max-width: 560px) { .migrate:not(.migrate-sm) { display: none; } .migrate-sm { display: block; max-width: 340px; } }
/* 360-389: the phone drawing is cut to 0.87-0.96 scale, which took the month tier (11 units) to 9.5 px;
   at 12.5 units it reads at 10.8-12 px, about the app's 10.5 (index.css .gantt-month). From 390 the 11 units are 10.6 px and up. */
@media (min-width: 360px) and (max-width: 389px) { .migrate-sm .months text { font-size: 12.5px; } }
/* Under 360 px: 22 px each side, like the cards, and the drawing's small labels at 14 units, 11 px or more. */
@media (max-width: 359px) { .band { padding-inline: 22px; } .migrate-sm text:not([font-size="18"]) { font-size: 14px; } }

/* ── Founder ────────────────────────────────────── */
.founder { max-width: 860px; margin: 0 auto; text-align: center; }
.founder blockquote { margin: 26px 0 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); }
/* The highlight: a thin orange underline in light, an orange marker band in dark. */
.founder blockquote em { font-style: normal; font-weight: 600; color: var(--ink); background: linear-gradient(transparent 84%, var(--crit) 84%, var(--crit) 96%, transparent 96%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .founder blockquote em { background-image: linear-gradient(transparent 56%, var(--quote-band) 56%, var(--quote-band) 92%, transparent 92%); } }
:root[data-theme="dark"] .founder blockquote em { background-image: linear-gradient(transparent 56%, var(--quote-band) 56%, var(--quote-band) 92%, transparent 92%); }
.founder cite { display: block; margin-top: 22px; font-style: normal; color: var(--muted); font-size: 16px; text-wrap: balance; }
/* The logo in the credit sits in the sentence: its letters (499 of its 902) as tall as the line's lowercase (0.49em in Outfit), its baseline on the line's (389/902 up from its foot). */
.founder cite .wm-inline { display: inline-block; height: .886em; width: auto; vertical-align: -.382em; color: var(--ink); }
.founder .mark { width: 54px; height: 54px; margin: 0 auto; }
/* Phones: a ten-line quote reads easier from a straight left edge. */
@media (max-width: 560px) { .founder { text-align: left; } .founder .mark { margin: 0; } }

/* ── Pilot ──────────────────────────────────────── */
.pilot { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.pilot .panel { padding: 34px; }
/* "What you get" is a column, so its seats line sits on the card's foot, level with the Join button beside it. */
.pilot .panel:first-child { display: flex; flex-direction: column; }
.pilot .k { display: block; } /* both panel labels on the same line box, so the two lists start level */
.pilot h3 { font-size: 26px; margin: 10px 0 12px; }
.pilot-get { list-style: none; padding: 0; margin: 22px 0 22px; display: grid; gap: 18px; }
.pilot-get li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.pilot-get .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--sky-wash); color: var(--sky-text); display: grid; place-items: center; }
.pilot-get .ic svg { width: 18px; height: 18px; }
.pilot-get li > div > b { display: block; font-size: 17px; }
.pilot-get li > div > span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.chain-steps { list-style: none; padding: 0; margin: 22px 0 28px; position: relative; display: grid; gap: 18px; }
.chain-steps li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; position: relative; }
/* Each title's line centres on its 46 px number. */
.chain-steps li > div { padding-top: 9px; min-width: 0; }
/* The link between steps: from the bottom of one number to the top of the next. */
.chain-steps li:not(:last-child)::after { content: ''; position: absolute; left: 22px; top: 46px; bottom: -18px; width: 2px; background: var(--edge); }
.chain-steps .n { width: 46px; height: 46px; font-size: 15px; border-radius: 12px; border: 1.5px solid var(--task-line); background: var(--sky-wash); display: grid; place-items: center; font-family: var(--mono); font-weight: 500; color: var(--sky-text); }
.chain-steps b { display: block; }
.chain-steps li > div > span { display: block; margin-top: 2px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.seats { font-size: 14px; color: var(--muted); margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .pilot { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .pilot .panel { padding: 28px 22px; } }
@media (max-width: 520px) { .pilot .panel > .btn { width: 100%; } } /* full width, like every primary button on a phone */

/* ── FAQ ────────────────────────────────────────── */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
/* The question's box reaches 12 px past the text on each side, so its focus ring sits inside the dividers. */
.faq summary { list-style: none; cursor: pointer; padding: 22px 56px 22px 12px; margin-inline: -12px; border-radius: 10px; font-size: 20px; font-weight: 600; position: relative; text-wrap: balance; }
.faq summary:focus-visible { outline-offset: -3px; border-radius: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 15px; top: 50%; width: 12px; height: 12px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .25s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
@media (max-width: 359px) { .faq summary { margin-inline: -8px; padding-left: 8px; padding-right: 52px; } .faq summary::after { right: 11px; } } /* the focus ring 8 px in from the screen edge */
.faq .a { padding: 0 0 24px; color: var(--ink-2); font-size: 17px; max-width: 720px; }
.faq .a p + p { margin-top: 10px; }

/* ── Final CTA ──────────────────────────────────── */
.final { text-align: center; padding: 120px 0 128px; position: relative; overflow: hidden; isolation: isolate; }
/* The glows fade out before both edges, so the footer's line never cuts one. */
.final::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(560px 36% at 50% 68%, var(--final-glow, var(--dawn-2)) 0%, transparent 70%), radial-gradient(40% 60% at 15% 20%, var(--sky-wash) 0%, transparent 70%); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 120px, #000 calc(100% - 112px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 120px, #000 calc(100% - 112px), transparent); }
.final h2 { font-size: clamp(40px, 6vw, 76px); font-weight: 800; letter-spacing: -0.035em; }
.final p { margin: 18px auto 34px; max-width: 560px; }
.final .hero-ctas { justify-content: center; margin: 0; }
.final-chain { width: min(760px, 100%); height: auto; margin: 0 auto 28px; }
.final-chain-sm { display: none; }
@media (max-width: 560px) { .final-chain:not(.final-chain-sm) { display: none; } .final-chain-sm { display: block; max-width: 360px; } }

/* ── Footer ─────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding: 48px 0 56px; font-size: 15px; color: var(--muted); background: var(--surface-2); }
.foot .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
/* The footer's logo and line lock up as the film's opening does, in units of the
   logo's height (--wm, its viewBox 902 tall): the p's stem (63/902 in) sits on the
   column's edge, the line runs from it to the q's at Outfit 500, and its capitals stand 0.23 x-height under
   the descenders, which with line-height 1.2 puts its box 0.16 --wm up into the logo's. */
/* The link sits over the line's box, so its whole 47 px takes taps; its focus ring goes round the lockup, clear of the line. */
.foot .lockup { --wm: 47px; justify-self: start; align-self: start; border-radius: 6px; }
.foot .brand { position: relative; z-index: 1; color: var(--ink); display: flex; width: fit-content; margin-left: calc(var(--wm) * -.0698); }
@supports selector(:has(a)) { .foot .brand:focus-visible { outline: none; } .foot .lockup:has(.brand:focus-visible) { outline: 3px solid var(--sky); outline-offset: 3px; } }
.foot .brand svg { height: var(--wm); width: auto; }
.foot .tagline { position: relative; margin-top: calc(var(--wm) * -.16); font-size: calc(var(--wm) * .3164); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; }
.foot h3 { margin: 0 0 12px; line-height: inherit; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--ink); }
/* The support promise reads as a sentence, so its address is underlined like any link in running text. */
.foot .support { margin: 0; max-width: 30ch; line-height: 1.55; }
.foot .support a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.foot .legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 14px; }
/* Tablets: the three link groups share one row. Touch widths: every link is a 44 px row. */
@media (max-width: 800px) { .foot .wrap { grid-template-columns: repeat(3, 1fr); } .foot .wrap > :first-child { grid-column: 1 / -1; } .foot ul { gap: 0; } .foot li a { display: inline-flex; align-items: center; min-height: 44px; } .foot h3 { margin-bottom: 2px; } }
@media (max-width: 560px) { .foot .wrap { grid-template-columns: 1fr 1fr; } .foot .wrap > :nth-child(4) { grid-column: 1 / -1; } }
@media (pointer: coarse) { .foot ul { gap: 0; } .foot li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } .foot h3 { margin-bottom: 2px; } }

/* ── Reveal on scroll ───────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* Draw-in strokes (hero underline, final chain) */
.js .draw { stroke-dasharray: var(--len, 1000); stroke-dashoffset: var(--len, 1000); }
.js .draw.in, .js .in .draw { animation: draw 1.1s cubic-bezier(.6,.05,.25,1) forwards; animation-delay: var(--dd, .2s); }
@keyframes draw { to { stroke-dashoffset: 0; } }
.js .pop { opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; }
.js .in .pop { animation: pop .5s cubic-bezier(.2,1.4,.4,1) forwards; animation-delay: var(--dd, .2s); }
@keyframes pop { to { opacity: 1; transform: none; } }
/* Arrowheads fade in once their line has drawn, with no scale, so a head never sits off its line. */
.js .tip { opacity: 0; }
.js .in .tip { animation: tip .15s ease-out forwards; animation-delay: var(--dd, .2s); }
@keyframes tip { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; transition-property: none !important; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee-track .dup { display: none; }
  .js .marquee-toggle, .js .marquee::after { display: none; }
  .shots img { transform: none !important; }
}

/* ── 404 ────────────────────────────────────────── */
.nf { min-height: calc(100vh - 73px); min-height: calc(100svh - 73px); display: grid; place-items: center; padding: 40px 0 80px; text-align: center; position: relative; isolation: isolate; }
.nf::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 40% at 50% 30%, var(--sky-wash) 0%, transparent 70%); }
.nf h1 { font-size: clamp(38px, 6vw, 64px); font-weight: 800; letter-spacing: -0.03em; margin: 14px 0 16px; }
.nf .lede { max-width: 560px; margin: 0 auto; }
.nf .hero-ctas { justify-content: center; }
.nf-svg { width: min(532px, 100%); height: auto; margin: 0 auto 26px; }
@media (max-width: 520px) { .nf-svg .nf-lbl text, .nf-svg .dangle text { font-size: 20px; } .nf-svg .nf-note { font-size: 19px; } }
/* Under 360 px they are drawn at 21 units, 11 px or more, and the wider note moves 5 units right to keep clear of the box. */
@media (max-width: 359px) { .nf-svg .nf-lbl text, .nf-svg .dangle text, .nf-svg .nf-note { font-size: 21px; } .nf-svg .nf-note { transform: translateX(5px); } }
.nf-links { margin-top: 16px; font-size: 15px; color: var(--muted); display: flex; gap: 0 20px; justify-content: center; flex-wrap: wrap; }
.nf-links a { display: inline-flex; align-items: center; min-height: 44px; }
.dangle { animation: dangle 2.8s ease-in-out 1; transform-origin: 0 0; transform-box: fill-box; }
@keyframes dangle { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(5deg); } }