/* OfferSheet landing — dark cinematic language, rebuilt originally.
   Near-black surfaces, white text, monochrome + photographic accents only.
   Giant rounded display face for titles, grotesk sans for body/labels.
   Vanilla CSS, no build step. Reduced-motion kills all motion (see end). */
:root {
  --bg: #0A0A0A;
  --bg-2: #111111;
  --surface: #1A1A1A;
  --text: #FFFFFF;
  --body: #D4D4D4;
  --muted: #AAAAAA;
  --faint: #8A8A8A;
  --hair: #2A2A2A;
  --hair-soft: #1E1E1E;
  --teal: #2E8F9E;
  --amber: #F59E0B;
  --display: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --color-paper-2: #D4D4D4;
  --color-paper-hi: #FFFFFF;
}
* { box-sizing: border-box; }
html { background: var(--bg); overflow-x: clip; scroll-behavior: smooth; scroll-padding-bottom: 110px; }
body { margin: 0; background: var(--bg); color: var(--body); font-family: var(--sans); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; padding-bottom: 110px; }
h1, h2, h3 { color: var(--text); line-height: 1.05; margin: 0; }
p { margin: 0 0 16px; max-width: 68ch; }
a { color: var(--text); text-underline-offset: 3px; }
a:hover { color: var(--muted); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
main { display: block; }
section { padding: 96px 24px; }
section > * { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* Skip link: first Tab stop, visible on focus. */
.skip-link { position: absolute; left: -9999px; top: 0; background: #FFFFFF; color: #0A0A0A; padding: 12px 20px; z-index: 200; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip-link:focus { position: fixed; left: 16px; top: 16px; }

/* Top appbar (wordmark row, not a nav) + display type. */
.appbar { border-bottom: 1px solid var(--hair); padding-top: env(safe-area-inset-top); }
.appbar-inner { max-width: 1200px; margin: 0 auto; padding: 20px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.wordmark { font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; }
.app-kicker { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.nav-cta { margin-left: auto; }

/* Buttons: pill-shaped. Primary = white fill, black text, soft glow. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 999px; border: 1px solid var(--hair); background: transparent; color: var(--text); font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn--primary { background: #FFFFFF; border-color: #FFFFFF; color: #0A0A0A; }
.btn--primary:hover { background: #E5E5E5; border-color: #E5E5E5; color: #0A0A0A; }
.btn--ghost { border-color: #3A3A3A; }
.btn--ghost:hover { border-color: #FFFFFF; color: #FFFFFF; }
.btn--glow { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 0 28px rgba(255, 255, 255, .14); }
.btn--glow:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .4), 0 0 40px rgba(255, 255, 255, .22); }

/* Floating glass pill nav, bottom-center. The page's ONE <nav>. */
.nav-links {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 90;
  display: flex; gap: 4px; align-items: center; padding: 8px 10px;
  max-width: calc(100vw - 32px); overflow-x: auto;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(17, 17, 17, .82); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.nav-links a { flex: none; min-height: 48px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 600; color: #FFFFFF; white-space: nowrap; }
.nav-links a:hover { background: rgba(255, 255, 255, .12); }
.nav-links-cta { background: #FFFFFF !important; color: #0A0A0A !important; }
.nav-links .glass-nav-cta { background: #FFFFFF; color: #0A0A0A; }
.nav-links .glass-nav-cta:hover { background: #E5E5E5; color: #0A0A0A; }

/* Type scale: giant display + wide-tracked micro-labels. */
.display { font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; }
/* Hero h1 size: see the HERO REBUILD block below (single source of truth). */
.display--section { font-size: clamp(40px, 10vw, 96px); margin-bottom: 24px; }
.display--giant { font-size: clamp(56px, 14vw, 180px); }
.micro-label { font-size: 13px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
/* HERO REBUILD (d-hero, filing day): dark cinematic, theatrical rhythm.
   The old hero failed on three measurable counts, all visible in the
   localhost before-renders: (1) the copy sat in the bare <section>, so
   the section > * auto-margin rule centred the 60ch sub-copy away from
   the headline's left edge; (2) the max-height:950px shrink capped the
   headline at 110px on a normal laptop and at 44px at 390px, so the
   "giant display" never arrived; (3) the figure kept its natural 3:2
   aspect inside the 1200px column, so at 1440x900 the whole image sat
   below the first viewport and the first glance was text on black
   with only a sliver of light blueprint at the bottom edge.
   Rebuild: copy wrapped in .hero-inner (left-aligned, widened past
   1400px so the giant headline holds 3 lines),
   giant Baloo 2 headline at full size, and the figure as a full-bleed,
   sharp-cornered, cover-cropped photographic frame with a dark
   gradient caption scrim — so the slot reads dark cinematic under
   EITHER the current file or the photographic swap the images agent
   drops into the same src. No hero copy changed; no nav target, href,
   or label changed. */
.hero { position: relative; padding: clamp(72px, 9vh, 120px) 0 80px; overflow: hidden; background: #0A0A0A; color: #FFFFFF; }
.hero-beam { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(46, 143, 158, .18), transparent 70%); }
.hero-inner { padding: 0 24px; }
.hero .micro-label { margin-bottom: 20px; }
.hero h1.display { font-size: clamp(56px, 9vw, 128px); line-height: .98; letter-spacing: -0.02em; margin-bottom: 28px; }
.hero-sub { font-size: 20px; line-height: 1.6; color: #D4D4D4; max-width: 56ch; margin-bottom: 0; }
/* Hero settle: one short transform/opacity settle on the hero heading
   and sub-copy (600ms, once). Killed by the reduced-motion block below
   (its * rule sets animation: none); without the animation the final
   frame is the natural style, so no-JS still renders the full hero. */
@keyframes hero-settle { from { opacity: 0; transform: translateY(12px) scale(1.015); } to { opacity: 1; transform: translateY(0) scale(1); } }
.hero h1.display, .hero-sub { animation: hero-settle 600ms ease-out both; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0 40px; }
/* Short viewports: tighten the stack's voids only — the headline stays
   giant (cap 120px, never the old 110px/44px shrink). The CTAs sit near
   the top of the page, so the fixed bottom pill nav never covers them
   at first paint on a normal laptop viewport. */
@media (max-height: 800px) {
  .hero { padding-top: 32px; }
  .hero h1.display { font-size: clamp(52px, 11vw, 120px); margin-bottom: 20px; }
  .hero-sub { font-size: 19px; }
  .hero-ctas { margin: 20px 0 28px; }
}
/* Wide viewports: the hero copy column widens to 1360px so the giant
   headline keeps its 3-line break ("How many tickets" / "must sell
   before" / "you sign?") instead of collapsing to 4 lines and
   pushing the CTAs under the fixed pill nav. */
@media (min-width: 1400px) {
  .hero-inner { max-width: 1360px; }
}
/* Full-bleed frame: breaks out of the section > * 1200px column
   (max-width:none + margin 0), spans the viewport width as a plain
   100% width (never 100vw, so no scrollbar-driven horizontal scroll),
   and cover-crops to a theatrical band. Sharp corners (radius 0) per
   the dark cinematic language. */
.hero-figure { position: relative; max-width: none; margin: 0; width: 100%; }
.hero-figure img { border-radius: 0; width: 100%; height: clamp(440px, 56vh, 680px); object-fit: cover; object-position: center 40%; }
/* Caption rides the image on a dark gradient scrim, so it stays
   legible over the current light blueprint AND over any photographic
   swap. Colour lifted to #D4D4D4 (was #AAAAAA) for the contrast floor
   on the scrim; wording unchanged and generic — it names no artist
   and claims no live data. */
.hero-figure figcaption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 28px 24px 20px; color: #D4D4D4; font-size: 15px; line-height: 1.6; max-width: none; background: linear-gradient(to top, rgba(10, 10, 10, .88) 0%, rgba(10, 10, 10, .55) 55%, transparent 100%); }
/* Hero figure scroll reveal: JS-gated (see landing.js). No-JS and
   reduced-motion never get the .js-hero class, so the figure renders
   at full opacity by default; the reduced-motion block below also
   forces it visible if the class ever lands. */
.hero-figure.js-hero { opacity: 0; transform: translateY(16px); transition: opacity 600ms ease-out, transform 600ms ease-out; }
.hero-figure.js-hero.revealed { opacity: 1; transform: none; }
/* Rotating badge: parked top-right of the hero. Shown only at
   >=1700px, where the wide copy column still leaves a clear right
   margin; below that it would sit on the headline, so it hides.
   Decorative (aria-hidden). */
.rotating-badge { position: absolute; right: 48px; top: 96px; width: 120px; height: 120px; opacity: .85; z-index: 2; }
.rotating-badge svg { width: 100%; height: 100%; animation: spin 24s linear infinite; }
.rotating-badge text { fill: var(--muted); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; font-family: var(--sans); }
.rotating-badge circle { fill: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1699px) {
  .rotating-badge { display: none; }
}

/* Marquee: tagline + section labels ONLY, never numbers. */
.marquee { overflow: hidden; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding: 20px 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee-track span { font-family: var(--display); font-size: 28px; font-weight: 800; color: var(--text); white-space: nowrap; padding-right: 8px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Collage: sharp-cornered photography, tilted/overlapping fan. */
.collage { padding-top: 120px; padding-bottom: 120px; }
.fan { display: flex; gap: 24px; margin-top: 48px; }
.fan-card { flex: 1; margin: 0; transform: rotate(var(--rot)) translateY(var(--py, 0px)); }
.fan-card:nth-child(1) { --rot: -4deg; }
.fan-card:nth-child(2) { --rot: 2deg; margin-top: 40px; }
.fan-card:nth-child(3) { --rot: -2deg; margin-top: 16px; }
.fan-card img { border-radius: 0; width: 100%; }
.fan-card figcaption { color: #AAAAAA; font-size: 15px; margin-top: 12px; }

/* Statement: one line, then the receipts behind it. The giant line is
   capped so it no longer swallows the section, and the recorded-trial
   receipt cards below it make the section substantive content, not a
   theatrical void. Dark cinematic language, same as the rest of the page. */
.statement { padding-top: 96px; padding-bottom: 96px; }
.statement p { font-size: 20px; max-width: 60ch; }
.statement .display--giant { font-size: clamp(48px, 8vw, 96px); }
.statement-receipts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 40px 0 24px; }
.statement-receipt { border: 1px solid var(--hair); padding: 28px; background: var(--bg-2); }
.statement .statement-receipt-trial { color: var(--muted); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.statement .statement-receipt-num { font-family: var(--display); font-size: clamp(48px, 5vw, 72px); font-weight: 800; color: var(--text); line-height: 1; margin: 12px 0; }
.statement .statement-receipt-offer { font-size: 18px; }
.statement-picks { list-style: none; padding: 0; margin: 16px 0; }
.statement .statement-picks li { padding: 8px 0; border-top: 1px solid var(--hair); font-size: 17px; }
.statement .statement-picks li strong { color: var(--text); }
.statement .statement-receipt-note { font-size: 16px; color: var(--muted); }
.statement .statement-receipt-hash { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.statement .statement-receipt-hash code { color: var(--body); }
.statement .statement-tally { font-size: 20px; color: var(--text); }

/* How it works: three plain steps. */
.steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.steps li { border-top: 1px solid var(--hair); padding-top: 20px; font-size: 18px; }
.steps li strong { display: block; color: var(--text); font-size: 20px; margin-bottom: 8px; }

/* Evidence: arms grid + recorded labels + how-made note. */
.arms-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0; }
.arm-card { border: 1px solid var(--hair); padding: 28px; background: var(--bg-2); }
.arm-name { color: var(--muted); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.arm-pick { font-family: var(--display); font-size: 32px; font-weight: 800; color: var(--text); margin: 8px 0; }
.recorded-label { border: 1px solid var(--hair); border-left: 4px solid var(--text); padding: 16px 20px; color: var(--body); background: var(--bg-2); max-width: 72ch; }
.how-made { max-width: 72ch; }

/* Formula strip: static labeled breakdown + worked text. No JS, no
   animation: the previous scroll-drawn SVG was invisible until its
   observer fired (dashoffset 100, then a 1.2s draw) and, once drawn,
   was an unlabeled step line that explained nothing — so the section
   read as an empty near-black slab. The breakdown below renders at
   first paint, in plain labeled parts, and needs no motion at all. */
.formula-strip { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); padding-top: 64px; padding-bottom: 64px; }
.formula-breakdown { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin: 8px 0 20px; }
.formula-part { display: flex; flex-direction: column; gap: 2px; }
.formula-role { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.formula-value { font-family: var(--display); font-size: clamp(32px, 5vw, 56px); font-weight: 800; color: var(--text); line-height: 1.05; overflow-wrap: anywhere; }
.formula-op { font-family: var(--display); font-size: clamp(28px, 4vw, 44px); font-weight: 800; color: var(--muted); padding-bottom: 4px; }
.formula-text { font-size: 22px; color: var(--text); }

/* Stats band: recorded trials only. */
.stats { padding-top: 120px; padding-bottom: 120px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 40px 0; }
.stat { border-top: 1px solid var(--hair); padding-top: 24px; }
.stat-number { font-family: var(--display); font-size: clamp(56px, 8vw, 96px); font-weight: 800; color: var(--text); line-height: 1; margin: 0 0 12px; }
.stat-tally { font-size: 20px; color: var(--text); }

/* Ledger: quiet tabular rows, full width, inner scroll only. */
.table-wrap { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; margin: 32px 0; }
.table-wrap:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { text-align: left; padding: 16px 12px; border-bottom: 1px solid var(--hair); font-size: 17px; vertical-align: top; }
th { color: var(--muted); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
td { color: var(--body); }

/* Refuses: five clear cards. */
.refuse-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 32px; }
.refuse-card { border: 1px solid var(--hair); padding: 28px; background: var(--bg-2); }
.refuse-card h3 { font-size: 22px; margin-bottom: 8px; }

/* CTA band. */
.cta-band { border-top: 1px solid var(--hair); text-align: left; }
.cta-band .btn { margin-top: 8px; }

/* Letter reveals + clip-mask reveals: JS-gated (see landing.js).
   No-JS renders full text; reduced-motion CSS (below) forces visible. */
[data-reveal] .rl { display: inline-block; opacity: 0; transform: translateY(.35em); transition: opacity 500ms ease-out, transform 500ms ease-out; transition-delay: var(--d, 0ms); }
/* Word wrapper for the letter-reveal splitter: keeps each word intact
   so the headline never breaks mid-word at narrow widths. */
[data-reveal] .rl-word { display: inline-block; white-space: nowrap; }
[data-reveal].revealed .rl { opacity: 1; transform: none; }
[data-clip].js-clip { clip-path: inset(0 100% 0 0); }
[data-clip].js-clip.revealed { clip-path: inset(0 0 0 0); transition: clip-path 900ms ease-out; }

/* Preloader (JS-created only; never traps the page — see landing.js). */
.preloader { position: fixed; inset: 0; z-index: 300; background: #0A0A0A; display: flex; align-items: center; justify-content: center; }
.preloader-num { font-family: var(--display); font-size: clamp(64px, 14vw, 160px); font-weight: 800; color: #FFFFFF; }
.preloader.done { opacity: 0; transition: opacity 300ms ease-out; }

/* Footer: dark band, 3-column links, giant wordmark, bottom bar. */
.footer.band--deep { background: #0A0A0A; border-top: 1px solid var(--hair); padding: 80px 24px 120px; }
.footer.band--deep p { color: var(--color-paper-2); max-width: 100%; }
.footer.band--deep a { color: var(--color-paper-hi); }
/* The rule above (specificity: two classes + element) beats .btn--primary
   (one class), so the footer CTA inherited white text on its white pill
   — invisible at 1:1. This override restores the button's dark text.
   Same defect pattern exists in dashboard.css for the app footer (see
   the second hunk); both must land together. */
.footer.band--deep .footer-cta a.btn--primary { color: #0A0A0A; }
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-cta { margin-bottom: 40px; }
.footer-cta p { font-family: var(--display); font-size: clamp(32px, 5vw, 56px); font-weight: 800; color: #FFFFFF; max-width: none; }
.footer-disclaimer { max-width: 72ch; }
.footer-meta { display: grid; gap: 0; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 20px; }
.footer-meta p { margin: 0; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); overflow-wrap: anywhere; }
.footer-wordmark { font-family: var(--display); font-size: clamp(64px, 18vw, 220px); font-weight: 800; color: #FFFFFF; line-height: .9; margin: 48px 0 8px; max-width: none; will-change: transform; }
/* The wordmark is one unbreakable word; at 1440px it can exceed the
   1200px footer-inner and clip at the right edge (webfont-dependent).
   Break only if it must, never reflow the layout otherwise. */
.footer-wordmark { max-width: 100%; overflow-wrap: anywhere; }
.footer-bottom { color: #AAAAAA; font-size: 14px; }

/* Shared aid styles (defined here per suite pins; used by the app's
   injected aids and by landing notes alike). */
.step-lead { color: var(--muted); font-size: 15px; }
.verdict-jump { display: inline-flex; min-height: 48px; align-items: center; font-weight: 600; }
.export-rail { display: flex; gap: 12px; flex-wrap: wrap; }
.share-note { color: var(--muted); font-size: 15px; }
.headliner-image { max-width: 420px; border-radius: 0; }
.headliner-image figcaption { color: #AAAAAA; font-size: 14px; }
.leg-progress { list-style: none; padding: 0; }
.leg-progress li { padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }

@media (min-width: 720px) {
  .footer-meta { grid-template-columns: 1fr 1.4fr 1fr; gap: 24px; }
  .footer-meta p { border-bottom: 0; padding: 0 0 0 24px; border-left: 1px solid rgba(255, 255, 255, .12); }
  .footer-meta p:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 820px) {
  section { padding: 64px 20px; }
  .rotating-badge { display: none; }
  .fan { flex-direction: column; }
  .fan-card:nth-child(2), .fan-card:nth-child(3) { margin-top: 0; }
  .arms-grid, .stat-grid, .steps { grid-template-columns: 1fr; }
  .statement-receipts { grid-template-columns: 1fr; }
  .refuse-grid { grid-template-columns: 1fr; }
  .nav-links { gap: 2px; }
  .nav-links a { padding: 0 12px; font-size: 14px; }
}
/* Hero at narrow widths: generous but usable at 390px. Headline floor
   52px (never the old 44px shrink); image band 300px floor, full-bleed;
   CTAs stack at full 48px targets; caption stays on its scrim. */
@media (max-width: 820px) {
  .hero { padding-top: 48px; padding-bottom: 48px; }
  .hero-inner { padding: 0 20px; }
  .hero h1.display { font-size: clamp(52px, 13.5vw, 84px); margin-bottom: 24px; }
  .hero-sub { font-size: 19px; }
  .hero-ctas { margin: 28px 0 36px; }
  .hero-ctas .btn { width: 100%; }
  .hero-figure img { height: clamp(300px, 72vw, 440px); }
  .hero-figure figcaption { padding: 24px 20px 16px; }
}
/* LANDING-WIDE DARK (d-hero scope update, filing day).
   Why this block exists: styles.css loads FIRST; landing-mobile.css and
   mobile-section.css load after it and still
   carry the light Studio tokens (paper #f1f7f8, ink #030e1a, cadmium
   orange, Hedvig serif). The phone section's chrome was already
   patched dark inside mobile-section.css, but the phone SCREEN still
   inherited the light variables, the get-the-app kicker tick still
   used the orange accent, the recorded-demo verdict number still set
   Hedvig serif, and the footer focus outline still used orange.
   This block redefines those inherited variables on .ms-section at
   higher specificity (body.landing-page .ms-section beats a bare
   .ms-section rule in any sheet, regardless of load order) and
   overrides the handful of hardcoded Studio values, so hero through
   phone section render one dark language WITHOUT editing the later
   sheets — their pinned structure (device shell, island, keys,
   aspect, reduced-motion handling) is untouched.
   This SUPERSEDES the old "lit phone in a dark room" note in
   mobile-section.css: the screen is now dark like everything else.
   Revert: delete this block and the screen returns to light paper.
   Contrast floor on the flipped surfaces: #FFFFFF / #D4D4D4 on
   #0A0A0A and on #111111 all clear 4.5:1 (white-on-black ~21:1,
   #D4D4D4-on-black ~13.6:1, #AAAAAA-on-black ~9.3:1). */
body.landing-page .ms-section {
  --color-paper: #0A0A0A;
  --color-paper-hi: #111111;
  --color-ink: #FFFFFF;
  --color-ink-2: #D4D4D4;
  --color-muted: #AAAAAA;
  --color-rule: rgba(255, 255, 255, .14);
  --color-accent: #FFFFFF;
  --color-focus: #FFFFFF;
  --color-mark: rgba(255, 255, 255, .35);
  --font-display: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --radius-card: 0;
  --radius-pill: 999px;
  background: #0A0A0A;
  color: #D4D4D4;
}
/* Hardcoded Studio values the variable flip cannot reach: the
   recorded verdict number (serif in mobile-section.css) joins
   the rounded display face; the recorded label becomes a pill,
   matching the landing's pill buttons and sharp photography.
   The device shell keeps its 48px hardware corners (documented
   exception, still dark). */
body.landing-page .record-verdict-num { font-family: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif; font-weight: 800; }
body.landing-page .record-label { border-radius: 999px; }
/* Footer focus outline: landing-mobile.css still sets cadmium
   orange; on the dark footer the outline is white. */
body.landing-page .footer-meta a:focus-visible { outline-color: #FFFFFF; }
/* Dead-rule hardening: .story-section has NO element in the current
   index.html, but its sheet still defines light paper. If that
   section ever returns, it must not return light. Zero render
   effect on the current page. */
body.landing-page .story-section { background: #0A0A0A; color: #D4D4D4; }
body.landing-page .story-section h2 { font-family: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif; color: #FFFFFF; }
body.landing-page .story-section .beat, body.landing-page .story-section .same-method-strip { background: #111111; border-color: #2A2A2A; }
body.landing-page .story-section .beat h3, body.landing-page .story-section .same-method-strip h3 { font-family: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif; color: #FFFFFF; }
body.landing-page .story-section .persona-label { border-color: rgba(255, 255, 255, .32); }

/* Narrow appbar: at <=480px the wordmark + CTA wrap to two rows and
   steal ~50px of first-paint height, pushing the second hero CTA under
   the fixed pill nav. Hiding the LANDING kicker (wordmark stays) keeps
   the appbar to one row, so both CTAs clear the nav at 390px. The
   .app-kicker rule itself stays defined (pinned by landing-split). */
@media (max-width: 480px) {
  .app-kicker { display: none; }
  .appbar-inner { padding: 16px 20px; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] .rl { opacity: 1; transform: none; }
  .hero-figure.js-hero { opacity: 1; transform: none; }
  [data-clip].js-clip { clip-path: none; }
  .btn--glow, .btn--glow:hover { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
}

/* T5 mobile surface (coordinator fix): landing footer links are real
   targets (48px), and the footer respects the bottom safe-area inset
   on notched phones. The 120px bottom room (glass-nav clearance) is
   kept as the floor. */
.footer-meta a { min-height: 48px; display: inline-flex; align-items: center; }
.footer.band--deep { padding-bottom: max(120px, calc(120px + env(safe-area-inset-bottom))); }