/* ══════════════════════════════════════════════════════════════════════
   §ED742 · THE LANDING SHEET, REBUILT. Replaces the §ED549–§ED736 sheet
   in place (same filename: every probe and the cache-bust injector address
   it by this path).

   WHAT THE PAGE NOW SAYS (§ED739 §6.2): culture is what the question is
   ABOUT; family is who the answer is FOR. The hero is a voice claim beside
   a phone showing a culture-specific question; the six sample questions
   come SECOND, because they are the one thing on the page nobody else
   sells; the recorder comes third, one scroll from the CTA that names it.

   THE GROUND IS DARK BY DEFAULT (Jake, §ED742 checkpoint decision). The
   :root ramp below is the dark one; html[data-theme="light"] is the
   alternate a reader picks with the masthead toggle. index.html's head
   script resolves an ABSENT 'culturily-theme' key to dark and never reads
   prefers-color-scheme; scripts/audit-ed549.js §14 asserts that and its
   --control=theme arm plants the fall-through. Two stamps, one decider —
   html[data-theme] for this sheet, html.theme-light for tokens.css and
   global.css (which the recorder and the consent banner read) — so the
   sheets cannot disagree.

   THE TYPE SCALE IS REBUILT AT THE SCALE, NOT PER ELEMENT. §ED718 measured
   a 1.5:1 ratio between the two largest sizes — one medium voice repeated —
   as the mechanical cause of "flat". Five rungs still (audit-ed549.js §11
   counts them), but the hero is now 2× the section head at every width:
   44/26/20/18/16 at 390 and 88/40/24/18/16 at 1440.

   THE ROOM LADDER IS KEPT (one step, four multiples, audit-ed549.js §10
   asserts whole multiples) but sections sit on --room-md, not --room-lg:
   §ED718 measured six of eleven sections as pure air, and 5 steps between
   two blocks reads as a hole, not rhythm (§ED736 found the same thing at
   the hero and fixed one instance; this fixes the class).

   §ED440 LAW, UNCHANGED: hue 72 locked; ONE large-area accent per view and
   it is the primary CTA — scripts/audit-ed742.js §3 now counts that per
   scrolled VIEWPORT, not per section; 16px floor; glass only on chrome;
   transform/opacity motion only.

   WHAT LEFT: §ED736's depth card behind .ln-h1 (bled off both viewport
   edges and split the hero into two materials — audit-ed549.js §18
   retired with it); §ED613/§ED735's hero wave image (no image, no gradient
   behind any hero text — §16 samples the composited pixels); §ED614's
   closing photograph (a photograph of people is out by ruling, and the
   page is dark by default so a dark band said nothing); #ln-why as a
   section (its two sentences now head WHAT IT BECOMES).
   ══════════════════════════════════════════════════════════════════════ */

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

:root {
  /* ── MOTION ─────────────────────────────────────────────────────── */
  --m-instant: 90ms;
  --m-fast:   160ms;
  --m-base:   300ms;
  --e-out:    cubic-bezier(.16, 1, .3, 1);
  --e-spring: cubic-bezier(.34, 1.4, .64, 1);
  --amp-sm:  4px;

  /* ── SHAPE ──────────────────────────────────────────────────────── */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 40px;
  --gutter: clamp(20px, 5vw, 72px);

  /* ── ROOM — §ED551's one step, §ED556's notch. Unchanged. ──────── */
  --room-notch: 0.8;
  --room-step: calc(clamp(36px, 5vh, 60px) * var(--room-notch));
  --room-sm: var(--room-step);
  --room-md: calc(var(--room-step) * 2);
  --room-lg: calc(var(--room-step) * 3);
  --room-xl: calc(var(--room-step) * 5);

  /* ── MEASURE ────────────────────────────────────────────────────── */
  --measure:        1080px;
  --measure-narrow:  820px;
  --glass-blur: 18px;

  /* ── COLOUR — DARK IS THE BASE RAMP (§ED742). Warm neutral, not navy;
     byte-identical to the §ED549 dark ramp except --ink-3, which measured
     4.16:1 on --bg and 3.86:1 on --surface — under AA for the fine print
     it carries. #8F897C measures 5.54:1 / 5.14:1 (audit-ed742.js §2). ── */
  --bg:        #100E0C;
  --bg-deep:   #080706;
  --surface:   #191714;
  --surface-2: #211E1A;
  --glass:     rgba(25, 23, 20, .72);
  --glass-line:rgba(255, 252, 245, .10);
  --ink:       #F5F2EC;
  --ink-2:     #ACA69C;
  --ink-3:     #8F897C;
  --line:      rgba(255, 252, 245, .13);
  --line-2:    rgba(255, 252, 245, .06);
  --lime:      #CCFF00;
  --lime-ink:  #CCFF00;
  --focus:     #CCFF00;
  --on-lime:   #0A0C00;
  --sheen:     rgba(255,255,255,.16);
  --danger:    #FF8A80;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.4);
  --shadow-2: 0 2px 8px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.55);
  --shadow-3: 0 6px 16px rgba(0,0,0,.55), 0 36px 80px rgba(0,0,0,.7);

  /* ── TYPE ──────────────────────────────────────────────────────── */
  --f-display: 'Nohemi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-edit:    'Fraunces', Georgia, 'Times New Roman', serif;
  --f-ui:      'Hanken Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

  /* THE FLOOR (§ED306, §ED440): 16px, in rem. Nothing on this page goes
     under it; the device status bar is the one declared exception. */
  --t-micro: 1rem;
  --t-body:  1.125rem;
  --lh-body: 1.7;

  /* THE RAMP — FIVE RUNGS, REBUILT (§ED742). The hero is 2× the head:
       390:  44 / 26 / 20 / 18 / 16
       1440: 88 / 40 / 24 / 18 / 16
     §ED551 had 36→76 / 24→36 / 20→22, a 1.5:1 top ratio at 390. */
  --t-lead: clamp(1.25rem, 1.9vw, 1.5rem);      /* 20 → 24 */
  --t-head: clamp(1.625rem, 3.4vw, 2.5rem);     /* 26 → 40 */
  --t-hero: clamp(2.75rem, 11vw, 5.5rem);       /* 44 → 88 */

  /* ── SPACE INSIDE A BLOCK — multiples of 4 (§ED551). ───────────── */
  --s-xs:  8px;
  --s-sm: 12px;
  --s-md: 16px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-2xl: 40px;
}

/* TWO SPELLINGS OF ONE DECISION. The head script stamps html[data-theme]
   (this sheet) and html.theme-light (tokens.css/global.css) from ONE read of
   'culturily-theme'; the dark block restates :root so an explicit stamp and
   the absent-key default paint the same bytes. No prefers-color-scheme block
   anywhere: the page ignores the OS on purpose (§ED192 ruling 2's mechanism,
   §ED742's default). */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] {
  --bg:#100E0C; --bg-deep:#080706; --surface:#191714; --surface-2:#211E1A;
  --glass:rgba(25,23,20,.72); --glass-line:rgba(255,252,245,.10);
  --ink:#F5F2EC; --ink-2:#ACA69C; --ink-3:#8F897C;
  --line:rgba(255,252,245,.13); --line-2:rgba(255,252,245,.06);
  --lime-ink:#CCFF00; --focus:#CCFF00; --sheen:rgba(255,255,255,.16); --danger:#FF8A80;
  --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.4);
  --shadow-2:0 2px 8px rgba(0,0,0,.5), 0 18px 44px rgba(0,0,0,.55);
  --shadow-3:0 6px 16px rgba(0,0,0,.55), 0 36px 80px rgba(0,0,0,.7);
}
/* THE LIGHT ALTERNATE — §ED549's warm light ramp, --ink-3 raised for the
   same reason as dark (was #8B857B, 3.30:1 on --bg; #6F6960 is 4.90:1). */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="light"] {
  --bg:#F5F3EE; --bg-deep:#EAE6DE; --surface:#FFFDFA; --surface-2:#F0EDE6;
  --glass:rgba(255,253,250,.72); --glass-line:rgba(255,253,250,.9);
  --ink:#14120E; --ink-2:#56514A; --ink-3:#6F6960;
  --line:rgba(20,18,14,.13); --line-2:rgba(20,18,14,.06);
  --lime-ink:#3D4D00; --focus:#14120E; --sheen:rgba(255,255,255,.26); --danger:#B3241C;
  --shadow-1:0 1px 2px rgba(20,18,14,.05), 0 4px 12px rgba(20,18,14,.05);
  --shadow-2:0 2px 6px rgba(20,18,14,.06), 0 14px 40px rgba(20,18,14,.10);
  --shadow-3:0 4px 12px rgba(20,18,14,.08), 0 30px 70px rgba(20,18,14,.16);
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: -0.008em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:where(a, button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The page column. Bottom margin clears js/consent.js's fixed bar, whose
   real height index.html measures into --consent-h (0px with no banner).
   Declared inside the shorthand — a separate margin-bottom above `margin: 0`
   is reset by it (§ED440 defect class). */
.ln-page {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 0 var(--consent-h, 0px);
  padding: 0 var(--gutter);
}

/* ══════════════════════════════════════════════════════════════════
   MASTHEAD — the mark and one door. Glass lives here and nowhere else.
   ══════════════════════════════════════════════════════════════════ */
.ln-masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--s-md) var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color var(--m-base) var(--e-out),
              border-color var(--m-base) var(--e-out);
}
.ln-masthead.is-stuck {
  background: var(--glass);
  border-bottom-color: var(--line-2);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
.ln-wordmark {
  font-family: var(--f-edit);
  font-weight: 500;
  font-size: var(--t-lead);
  letter-spacing: -0.014em;
  text-decoration: none;
  color: var(--ink);
}
.ln-login {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink-2);
  transition: color var(--m-fast) var(--e-out);
}
.ln-login:hover { color: var(--ink); }

/* ── THE APPEARANCE TOGGLE (§ED551, track form §ED563, inline glyphs
   §ED565). Unchanged: aria-pressed is the whole state; sun left, moon
   right; the thumb moves on transform only. audit-ed549.js §14 and
   audit-ed563.js §4 exercise it. ── */
.ln-mast-r { display: flex; align-items: center; gap: var(--s-md); }
.ln-theme {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 0;
  cursor: pointer;
}
.ln-theme-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 58px;
  height: 30px;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  transition: border-color var(--m-fast) var(--e-out);
}
.ln-theme:hover .ln-theme-track { border-color: var(--ink-3); }
.ln-theme:focus-visible { outline: none; }
.ln-theme:focus-visible .ln-theme-track { outline: 2px solid var(--ink); outline-offset: 3px; }
.ln-theme-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--ink);
  transition: transform var(--m-base) var(--e-out);
}
.ln-theme[aria-pressed="true"] .ln-theme-thumb { transform: translateX(28px); }
.ln-theme-i {
  position: relative;
  z-index: 1;
  display: block;
  width: 16px;
  height: 15px;
  line-height: 1;
  color: var(--ink-3);
  fill: currentColor;
  transition: color var(--m-base) var(--e-out);
}
.ln-theme[aria-pressed="false"] .ln-theme-i--sun,
.ln-theme[aria-pressed="true"]  .ln-theme-i--moon { color: var(--surface); }
@media (prefers-reduced-motion: reduce) {
  .ln-theme-thumb, .ln-theme-i { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════
   SHARED TYPE ROLES
   ══════════════════════════════════════════════════════════════════ */
.ln-h1 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;                /* §ED428 · all-caps Nohemi ships at 400 */
  text-transform: uppercase;
  letter-spacing: 0.004em;
  line-height: 0.94;
  font-size: var(--t-hero);
  color: var(--ink);
  text-wrap: balance;
}
/* THE HIGHLIGHT IS AN OUTLINE, NOT A COLOUR (§ED742, Jake's pick from the
   C render): the marked words are drawn as a stroke in the page's own ink
   with no fill — never lime, never filled — so the hero's one accent stays
   the button. paint-order keeps the stroke outside the glyph so thin
   strokes do not eat counters at 44px. */
.ln-hl {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  paint-order: stroke fill;
}
@media (min-width: 900px) { .ln-hl { -webkit-text-stroke-width: 2px; } }

.ln-h2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  line-height: 1.04;
  font-size: var(--t-head);
  color: var(--ink);
  text-wrap: balance;
}
.ln-eyebrow {
  margin: 0 0 var(--s-md);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}
/* Reading copy. 34rem = 544px = 62 average characters at --t-body (§ED551
   measured; audit-ed549.js §15 holds it in the 60–75 band). */
.ln-lede { margin: var(--s-lg) 0 0; max-width: 34rem; color: var(--ink); line-height: 1.6; }
.ln-body { margin: var(--s-lg) 0 0; max-width: 34rem; color: var(--ink-2); line-height: 1.6; }

/* ── SECTION RHYTHM — --room-md, two steps each side (§ED742). ─────── */
.ln-sec {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: var(--room-md);
}
.ln-sec--narrow { max-width: var(--measure-narrow); }

/* ══════════════════════════════════════════════════════════════════
   BUTTONS — one filled variant, so a second lime field has to be typed.
   ══════════════════════════════════════════════════════════════════ */
.ln-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-sm);
  padding: var(--s-md) 28px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.004em;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--m-fast) var(--e-spring),
              opacity var(--m-fast) var(--e-out);
}
.ln-btn:hover { transform: translateY(calc(var(--amp-sm) * -1)); }
.ln-btn:active { transform: translateY(0); }
.ln-btn-accent {
  border-color: transparent;
  background: var(--lime);
  color: var(--on-lime);
  box-shadow: var(--shadow-2);
}

/* ══════════════════════════════════════════════════════════════════
   1 · HERO — headline, sub, CTA, note on the left; the phone on the
   right (below, on a phone). Accent: the CTA. The phone's record button
   is lime by Jake's ruling, drawn under the 4,000px² census floor
   (audit-ed549.js §4 asserts lime and ≥60px; audit-ed742.js §3 counts).
   NO background-image and no gradient on this section or on anything
   inside it — audit-ed549.js §16 hides the hero text and samples the
   composited pixels behind .ln-hero-sub and .ln-hero-note for anything
   that is not the flat ground.
   ══════════════════════════════════════════════════════════════════ */
.ln-hero {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: var(--room-sm) var(--room-md);
}
.ln-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--room-sm);
  align-items: center;
}
/* THE SUB IS RAISED (§ED742): it carries §ED739's ruling — "for the
   people who come after you" — and sat at --ink-2/--t-lead as the
   quietest thing on screen. Full ink now, one rung under the head. The
   gap above it is --room-sm, the ladder's base step (§ED563; audit-ed556.js
   §5b and audit-ed563.js §6 measure it as a whole step). */
.ln-hero-sub {
  margin: var(--room-sm) 0 0;
  max-width: 34ch;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}
.ln-hero-ctas { margin-top: var(--s-xl); }
/* §ED736's clearance, KEPT INCLUDING THE SPECIFICITY. .ln-answer-trust's
   own `margin: 0` (below) is (0,1,0) and later in the file; this (0,2,0)
   wins regardless of order. Drop the second class and the gap is 0px —
   audit-ed549.js §17 measures the rendered gap, not this declaration. */
.ln-hero-note.ln-answer-trust { margin-top: var(--s-xl); }

/* THE PHONE IN THE HERO. Uncropped at every width — no overflow box, no
   clipped words (Jake, §ED742). On a phone it sits under the copy at its
   full height; at ≥900 it stands in the right column with a slight tilt. */
.ln-hero-figure { justify-self: center; }
.ln-hero-figure .ln-device { width: min(280px, 72vw); }
@media (min-width: 900px) {
  .ln-hero { padding-block: var(--room-md) var(--room-md); }
  .ln-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 96px); }
  .ln-hero-figure { justify-self: end; }
  .ln-hero-figure .ln-device { width: 300px; transform: rotate(-4deg); }
}

/* ══════════════════════════════════════════════════════════════════
   2 · WHAT WE ASK — the six ruled questions (§ED590/§ED707/§ED720).
   Scroll-snap row below 768px, 3-across grid above. Default state is
   VISIBLE; html.js + the observer only animate the entrance.
   ══════════════════════════════════════════════════════════════════ */
.ln-asks-note {
  margin: var(--s-xs) 0 0;
  max-width: 44ch;
  font-family: var(--f-ui);
  font-size: var(--t-body);
  color: var(--ink-2);
}
.ln-asks-list {
  display: flex;
  gap: var(--s-md);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 0;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin: var(--s-xl) 0 0;
  padding: 0 0 var(--s-xs);
  list-style: none;
}
@media (min-width: 768px) {
  .ln-asks-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--room-sm) clamp(var(--s-xl), 4vw, 64px);
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
  }
}
.ln-ask-q {
  flex: 0 0 84%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  margin: 0;
  max-width: 34rem;
  padding: var(--s-lg);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line-2);
  font-family: var(--f-ui);
  font-weight: 500;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.006em;
}
.ln-ask-tag {
  display: block;
  margin: 0 0 var(--s-xs);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (min-width: 768px) {
  .ln-ask-q { flex: none; scroll-snap-align: none; }
}
@media (prefers-reduced-motion: no-preference) {
  html.js .ln-ask-q {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--m-base) var(--e-out), transform var(--m-base) var(--e-out);
  }
  html.js .ln-ask-q.ln-ask-q--in { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   3 · THE RECORDER — placement only; css/recorder.css styles it.
   ══════════════════════════════════════════════════════════════════ */
.ln-seam {
  display: block;
  width: 100%;
  max-width: var(--measure-narrow);
  margin: var(--room-sm) 0 0;
}
.ln-answer-trust {
  margin: 0;
  max-width: var(--measure-narrow);
  color: var(--ink-3);
  font-size: var(--t-micro);
  line-height: 1.6;
}
/* THE ACCOUNT ASK — hidden until a server-confirmed save (§ED548 ruling 3,
   §ED706). [hidden] restated because .ln-ask sets display. */
.ln-ask[hidden] { display: none; }
.ln-ask {
  display: grid;
  justify-items: start;
  gap: var(--s-xs);
  width: 100%;
  max-width: var(--measure-narrow);
  margin: var(--s-xl) 0 0;
  padding: var(--s-lg) 0 0;
  border-top: 1px solid var(--line-2);
}
.ln-ask-h {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  font-size: var(--t-lead);
  line-height: 1.2;
  color: var(--ink);
}
.ln-ask-sub { margin: 0; font-size: var(--t-body); line-height: 1.5; color: var(--ink-2); }
.ln-ask-terms { margin: 0; font-size: var(--t-micro); line-height: 1.5; color: var(--ink-3); }
.ln-ask-cta { display: flex; width: 100%; margin: var(--s-sm) 0 0; }

/* ══════════════════════════════════════════════════════════════════
   4 · WHAT IT BECOMES — copy beside the vault card. No accent: the
   card's waveforms are --lime-ink line work under the 4000px² threshold.
   ══════════════════════════════════════════════════════════════════ */
.ln-becomes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--room-sm);
  align-items: center;
}
@media (min-width: 900px) {
  .ln-becomes { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(var(--s-xl), 4vw, 64px); }
}
.ln-vault {
  padding: var(--s-lg);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
}
.ln-vault-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-md);
  margin: 0 0 var(--s-md);
}
.ln-vault-cap {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ln-vault-count {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-2);
  white-space: nowrap;
}
.ln-vault-span { margin: 0 0 var(--s-lg); }
.ln-span { display: block; width: 100%; height: 40px; }
.ln-day { fill: var(--lime-ink); }
.ln-day--off { fill: var(--line); }
.ln-vault-span-x {
  display: flex;
  justify-content: space-between;
  gap: var(--s-md);
  margin-top: var(--s-xs);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  line-height: 1.2;
  color: var(--ink-3);
}
.ln-vault-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ln-vault-row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--s-md);
  padding: var(--s-sm) 0;
  border-top: 1px solid var(--line-2);
}
.ln-vault-d { font-family: var(--f-mono); font-size: var(--t-micro); line-height: 1.2; color: var(--ink-3); }
@media (max-width: 479.98px) {
  .ln-vault-row { grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: var(--s-sm); }
  .ln-vault-row .ln-wave { display: none; }
}
.ln-vault-row:first-child { border-top: 0; }
.ln-vault-q {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: break-word;
  font-family: var(--f-edit);
  font-size: var(--t-micro);
  line-height: 1.4;
  color: var(--ink);
}
.ln-vault-dur {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-3);
}
.ln-vault-row--open .ln-vault-q { color: var(--ink-3); font-style: italic; }

/* ══════════════════════════════════════════════════════════════════
   THE WAVEFORM — the page's one motif, drawn once as inline SVG rects
   on a 0–100 scale; colour travels as `color` (fill: currentColor).
   ══════════════════════════════════════════════════════════════════ */
.ln-wave { display: block; width: 72px; height: 22px; color: var(--ink-3); flex: none; }
.ln-wave rect { fill: currentColor; }
.ln-wave--lime { color: var(--lime-ink); }
.ln-vault .ln-wave { color: var(--lime-ink); }
.ln-vault .ln-wave--open { color: var(--line); }
/* THE BARS RISE ONCE (§ED742) — the hero phone's wave and the closing
   mark grow from the baseline on first paint. Transform only, runs once,
   never loops, and under reduced motion the rule does not exist: the bars
   are simply there. The CTA never waits on it — it is a decoration on a
   sibling, not a reveal. */
@media (prefers-reduced-motion: no-preference) {
  .ln-wave--rise rect {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: ln-rise 900ms var(--e-out) both;
    animation-delay: calc(var(--i, 0) * 28ms);
  }
  @keyframes ln-rise { from { transform: scaleY(.08); } to { transform: scaleY(1); } }
}

/* ══════════════════════════════════════════════════════════════════
   5 · HOW IT WORKS — three beats. No accent.
   ══════════════════════════════════════════════════════════════════ */
.ln-steps {
  display: grid;
  gap: 0;
  margin: var(--s-xl) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-2);
}
.ln-step {
  display: grid;
  grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
  gap: var(--s-xs) var(--s-xl);
  align-items: baseline;
  padding: var(--s-lg) 0;
  border-bottom: 1px solid var(--line-2);
}
.ln-step-k {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.004em;
  font-size: var(--t-lead);
  color: var(--ink);
}
.ln-step-v { margin: 0; max-width: 36rem; font-size: var(--t-body); line-height: 1.55; color: var(--ink-2); }
@media (max-width: 639.98px) {
  .ln-step { grid-template-columns: 1fr; gap: 4px; }
}
/* Declared AFTER .ln-body on purpose: same specificity, source order wins
   (audit-ed556.js §5b caught the other order at 0.67× step). */
.ln-how-close { margin-top: var(--room-sm); }

/* ══════════════════════════════════════════════════════════════════
   6 · WHAT'S COMING — one heading, one admission, one capture. The phone
   render is NOT here any more: a phone frame beside "not yet" is a claim
   the product cannot keep, so the frame lives in the hero and this block
   is copy and a form. The submit is an OUTLINE button — no accent here.
   ══════════════════════════════════════════════════════════════════ */
.ln-coming-note {
  margin: var(--s-lg) 0 0;
  max-width: 34rem;
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--ink-3);
}
.ln-form { margin: var(--s-lg) 0 0; max-width: 30rem; width: 100%; }
.ln-form-row { display: flex; gap: var(--s-sm); flex-wrap: wrap; }
.ln-input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: var(--s-md) 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: var(--t-body);
  line-height: 1.2;
}
.ln-input::placeholder { color: var(--ink-3); }
.ln-error { margin: var(--s-sm) 0 0; min-height: 0; color: var(--danger); font-size: var(--t-micro); }
.ln-error:empty { margin: 0; }
.ln-form-sub { margin: var(--s-sm) 0 0; max-width: 34rem; color: var(--ink-3); font-size: var(--t-micro); line-height: 1.6; }
.ln-form-sub a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
}
.ln-form-sub a:hover { color: var(--ink); text-decoration-color: currentColor; }
@media (max-width: 479.98px) {
  .ln-form-row .ln-btn { width: 100%; }
}
/* The success state js/waitlist.js swaps in for the form. */
.wl-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: var(--s-md);
  padding: var(--s-md) 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.wl-callout-ico {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--lime);
}
.wl-callout-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wl-callout-h { font-family: var(--f-ui); font-weight: 500; font-size: var(--t-body); color: var(--ink); }
.wl-callout-p { color: var(--ink-2); font-size: var(--t-micro); line-height: 1.6; }
.wl-callout-p strong { color: var(--ink); font-weight: 500; }
/* The pick — a native checkbox, inked --ink not lime (§ED565). */
.ln-picks { margin: var(--s-xl) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-sm); }
.ln-pick {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  min-height: 44px;
  padding: 6px 0;
  cursor: pointer;
}
.ln-pick-box { width: 20px; height: 20px; margin: 3.5px 0 0; flex-shrink: 0; accent-color: var(--ink); cursor: pointer; }
.ln-pick:focus-within .ln-pick-k { text-decoration: underline; text-underline-offset: 3px; }
.ln-pick-t { display: grid; gap: 2px; min-width: 0; }
.ln-pick-k { font-family: var(--f-ui); font-weight: 500; font-size: var(--t-body); line-height: 1.5; color: var(--ink); }
.ln-pick-v { font-size: var(--t-micro); line-height: 1.6; color: var(--ink-2); }
.ln-form--coming { margin-top: 0; max-width: 34rem; }
.ln-form--coming .ln-form-row { margin-top: var(--s-lg); }
.ln-app { display: grid; grid-template-columns: 1fr; gap: var(--room-sm); }
@media (min-width: 900px) {
  .ln-app { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
}

/* ══════════════════════════════════════════════════════════════════
   THE DEVICE — drawn in CSS, no raster. 393:852 is the iPhone 15/16
   logical viewport. Used once, in the hero.
   ══════════════════════════════════════════════════════════════════ */
.ln-device {
  position: relative;
  width: min(300px, 76vw);
  aspect-ratio: 393 / 852;
  padding: 10px;
  border-radius: 46px;
  background: var(--bg-deep);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3);
}
.ln-device::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--sheen), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
}
/* The screen is --surface-2, two notches above the page ground, so the
   lit screen reads as lit on the dark default (audit-ed549.js §4 asserts
   screen ≠ page ground in both themes). */
.ln-screen {
  position: relative;
  height: 100%;
  border-radius: 37px;
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  padding: 14px 18px 20px;
}
.ln-island {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 33%;
  height: 22px;
  border-radius: 999px;
  background: #0A0908;
}
.ln-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 22px;
  font-family: var(--f-mono);
  font-size: 10px;              /* device chrome, aria-hidden — the one declared exception to the floor */
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  letter-spacing: 0;
}
.ln-status-r { display: flex; align-items: flex-end; gap: 4px; }
.ln-bars { display: flex; align-items: flex-end; gap: 1.5px; height: 9px; }
.ln-bars > i { display: block; width: 2px; border-radius: .5px; background: var(--ink-2); }
.ln-bars > i:nth-child(1) { height: 40%; }
.ln-bars > i:nth-child(2) { height: 60%; }
.ln-bars > i:nth-child(3) { height: 80%; }
.ln-bars > i:nth-child(4) { height: 100%; }
.ln-batt { width: 20px; height: 10px; border: 1px solid var(--ink-3); border-radius: 3px; padding: 1.5px; }
.ln-batt > i { display: block; height: 100%; width: 68%; border-radius: 1px; background: var(--ink-2); }
.ln-screen-head {
  margin: 20px 0 0;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ln-screen-q {
  margin: 14px 0 0;
  font-family: var(--f-edit);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--ink);
}
.ln-screen-wave { margin: auto 0 0; }
.ln-screen-wave .ln-wave { width: 100%; height: 42px; }
/* THE RECORD AFFORDANCE — LIME IN BOTH THEMES, BY RULING (Jake,
   2026-09-03: "light green" in light mode and in dark). §ED742 first drew
   it in --ink so the hero carried one lime field; that is reversed. It is
   drawn at 58px — 3,364px² flat, 3,832px² as the rotated frame's bounding
   box at ≥900px — under the 4,000px² floor audit-ed549.js §5 and
   audit-ed742.js §3 count as a large-area accent — so the CTA remains the
   hero's one counted accent. Stated, not hidden: this IS a second lime
   object in viewport one, and it is there because Jake asked for it. */
.ln-record { display: flex; flex-direction: column; align-items: center; gap: var(--s-sm); margin: var(--s-lg) 0 0; }
.ln-record-dot {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: var(--shadow-2);
  position: relative;
}
.ln-record-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 58%);
}
.ln-record-cap { font-family: var(--f-mono); font-size: var(--t-micro); color: var(--ink-3); }

/* ══════════════════════════════════════════════════════════════════
   7 · CLOSING — the mission line and the primary CTA, on the page's own
   ground. No band, no photograph (§ED742 constraint 1). The mark under it
   is the waveform at page width, in --ink-3 — the page's last object is
   the motif, not a picture of a person. Accent: the CTA.
   ══════════════════════════════════════════════════════════════════ */
.ln-closing {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: var(--room-lg) var(--room-md);
  text-align: center;
}
.ln-closing .ln-h1 { max-width: 14ch; margin-inline: auto; }
.ln-closing-cta { margin-top: var(--s-2xl); }
.ln-closing-mark { display: block; width: min(560px, 100%); height: 48px; margin: var(--room-sm) auto 0; color: var(--ink-3); }

/* ── FOOTER ────────────────────────────────────────────────────────── */
.ln-footer {
  max-width: var(--measure);
  margin-inline: auto;
  padding: var(--room-sm) 0 calc(var(--room-sm) + var(--s-sm));
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-sm) var(--s-lg);
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
}
.ln-footer a { color: var(--ink-3); text-decoration: none; }
.ln-footer a:hover { color: var(--ink); }
.ln-footer-links { display: flex; gap: var(--s-lg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ln-btn, .ln-masthead, .ln-login { transition: none; }
  .ln-btn:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   NOHEMI — THE ONLY DECLARATION OF THIS FAMILY IN THE REPO (§ED437 closed;
   audit-ed549.js §1 asks the rasteriser, not the cascade). Fraunces and
   Hanken are declared once, in css/global.css, which loads before this.
   ══════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'Nohemi'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/Nohemi-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Nohemi'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/Nohemi-Medium.woff2) format('woff2'); }
@font-face { font-family: 'Nohemi'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/Nohemi-Light.woff2) format('woff2'); }