/* Hallmark · genre: editorial · macrostructure: Narrative Workflow · F4 step-sequence knobs: numbering=time markers on the rule, layout=vertical stack, connector=line
 * hero: H2 split diptych (ratio 7/5, right side = proof column: a demo Mac's files fading with age) · enrichment: Tier A CSS (staleness as opacity)
 * theme: custom · vibe: "stale data, cleared with care; honest indie Mac utility" · paper: oklch(29% 0.065 248) deep clean blue · accent: oklch(83% 0.110 190)
 * display: Newsreader 700 · body: IBM Plex Sans · outlier: JetBrains Mono (file ages, stage time markers) · axes: dark / roman-serif / chromatic-teal (palette kept at user request)
 * brand: docs/brand-guidelines.md (logo lockup, the Fade) · nav: N1a logo + 2 links (prev N9) · footer: Ft1 mast-headed (prev Ft4) · CTA: C1 rectangular + C3 typographic, one global CTA at the foot
 * revision: no divider rules; time chips, rounded screenshot frames with soft glow, panels, alternating stages (user: "make it modern")
 * motion: hero entrance · stages fade up once · CTA lift · studied: no · context: user brief ("cleaning old stale data")
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 · slop test: 58/58
 */
@import url("/tokens.css");

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html {
  color-scheme: dark;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-wrap: pretty;
  scroll-padding-block-start: var(--space-xl);
}
body {
  margin: 0;
  overflow-x: clip;
  min-height: 100svh;
  background: var(--color-paper);
  color: var(--color-ink);
  font: 400 var(--text-base) / var(--leading-body) var(--font-body);
  font-variant-numeric: oldstyle-nums;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; font-style: normal; text-wrap: balance; overflow-wrap: anywhere; }
img { display: block; max-inline-size: 100%; block-size: auto; }
a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a, button { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.92em; }
.visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wrap { inline-size: min(100% - var(--page-gutter) * 2, var(--page-max)); margin-inline: auto; }

/* ─── Nav · N1a wordmark + 2 links ──────────────────────────────────────── */
.nav-min { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); }
.nav-min ul { display: flex; align-items: center; gap: var(--space-lg); list-style: none; padding: 0; margin: 0; }
.nav-min ul a { color: var(--color-ink-2); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; line-height: 1;
  transition: color var(--dur-short) var(--ease-out); }
.nav-min ul a:hover { color: var(--color-ink); }
.nav-min ul a:active { color: var(--color-accent); }
.logo { display: inline-block; flex: none; line-height: 0; transition: opacity var(--dur-short) var(--ease-out); }
.logo img { block-size: 2.25rem; inline-size: auto; }   /* 10.8rem wide: above the 120px minimum */
.logo:active { opacity: 0.8; }
.foot-mast .logo img { block-size: 2.75rem; }

/* ─── Buttons · C1 rectangular, C3 typographic ──────────────────────────── */
.button {
  display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap;
  padding: var(--space-sm) var(--space-lg); min-block-size: 2.75rem;
  border: 1px solid var(--color-ink); border-radius: var(--radius-button);
  background: var(--color-ink); color: var(--color-paper);
  font: 600 var(--text-sm) / 1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.button.outline { background: transparent; color: var(--color-ink); }
.button.small { padding: var(--space-xs) var(--space-md); min-block-size: 2.25rem; }
.button svg { inline-size: 1em; block-size: 1em; flex: none; }
.button:active { transform: translateY(1px); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.button[data-state="loading"] { cursor: progress; opacity: 0.75; }
.button[data-state="error"] { background: var(--color-paper-2); color: var(--color-ink); }
.button[data-state="success"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-1.5px); background: var(--color-ink-2); }
  .button.outline:hover { background: var(--color-ink); color: var(--color-paper); }
  .button:active { transform: translateY(1px); }
}
@media (pointer: coarse) { .button { min-block-size: 3rem; } }

.text-link { color: var(--color-ink); font-weight: 600; line-height: 1; text-decoration: underline; text-decoration-color: var(--color-rule);
  text-decoration-thickness: 1px; text-underline-offset: 2px; white-space: nowrap;
  transition: text-decoration-color var(--dur-short) var(--ease-out); }
.text-link:hover { text-decoration-color: var(--color-accent); }
.text-link:active { text-decoration-color: var(--color-ink); }
.text-link[aria-disabled="true"] { color: var(--color-muted); text-decoration-color: var(--color-rule-2); pointer-events: none; }
.text-link .arrow { color: var(--color-accent); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); }

/* ─── Hero · H2 split diptych ───────────────────────────────────────────── */
.hero { display: grid; gap: var(--space-2xl); padding-block: var(--space-xl) var(--space-3xl); }
.hero h1 { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); max-inline-size: 12ch; }
.lede { font-size: var(--text-md); line-height: 1.5; color: var(--color-ink-2); max-inline-size: 52ch; margin-block: var(--space-lg) var(--space-xl); }
.requirements { font-size: var(--text-xs); color: var(--color-muted); margin-block-start: var(--space-md); }
@media (min-width: 60rem) {
  .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-3xl); align-items: center; }
}

/* The proof column: a demo Mac's files, newest first; each row fades with the time since it was opened. */
.stale { padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2);
  box-shadow: 0 0 0 1px var(--color-ring), var(--shadow-float); }
.stale ol { list-style: none; padding: 0; }
.stale li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--space-md); align-items: baseline;
  padding-block: var(--space-xs);
  opacity: calc(1 - var(--age, 0) * 0.78);
}
.stale li + li { box-shadow: 0 -1px 0 var(--color-ring); }
.stale .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stale .when { grid-column: 1; font: 400 var(--text-xs) / 1.2 var(--font-mono); color: var(--color-muted); }
.stale .size { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-variant-numeric: lining-nums tabular-nums; color: var(--color-ink-2); font-size: var(--text-sm); }
.stale figcaption { font-size: var(--text-xs); color: var(--color-muted); margin-block: var(--space-sm) var(--space-xs); }

/* ─── The story · F4 step sequence, time marker as a chip, sides alternate ─ */
.stages { list-style: none; padding: 0; margin-block: 0; } /* keep .wrap's centring */
.stage { display: grid; gap: var(--space-xl); align-items: center; padding-block: var(--space-2xl); }
.chip { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill); background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-ring);
  font: 400 var(--text-xs) / 1.4 var(--font-mono); color: var(--color-accent); white-space: nowrap; }
.chip::before { content: ""; inline-size: 0.375rem; block-size: 0.375rem; border-radius: 50%; background: currentColor; }
.stage h2 { font-size: var(--text-xl); line-height: 1.1; letter-spacing: -0.015em; max-inline-size: 16ch; }
.stage .copy { display: grid; gap: var(--space-md); align-content: center; }
.stage .copy > p { color: var(--color-ink-2); max-inline-size: 48ch; }
.shot { position: relative; isolation: isolate; }
.shot::before { /* soft teal light behind each screenshot */
  content: ""; position: absolute; inset: -8% -6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--color-glow), transparent); filter: blur(24px); }
.shot img { inline-size: 100%; border-radius: var(--radius-shot); box-shadow: 0 0 0 1px var(--color-ring), var(--shadow-float); }
.arrivals { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.arrivals li { padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); background: var(--color-paper-2);
  box-shadow: 0 0 0 1px var(--color-ring); font: 700 var(--text-md) / 1.3 var(--font-display); }
@media (min-width: 60rem) {
  .stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-3xl); padding-block: var(--space-2xl); }
  .stage.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .stage.flip .copy { order: 2; }
}
@media (prefers-reduced-motion: no-preference) {
  .stage { transition: opacity var(--dur-long) var(--ease-out), translate var(--dur-long) var(--ease-out); }
  .stage.is-pending { opacity: 0; translate: 0 1.5rem; }
}

/* ─── Safety · three panels: clears / asks first / never touches ────────── */
.ledger { padding-block: var(--space-3xl) var(--space-2xl); }
.ledger h2 { font-size: var(--text-xl); line-height: 1.12; letter-spacing: -0.015em; max-inline-size: 20ch; margin-block-end: var(--space-sm); }
.ledger > p { color: var(--color-ink-2); max-inline-size: var(--measure); margin-block-end: var(--space-xl); }
.panels { display: grid; gap: var(--space-md); grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.panel { display: grid; align-content: start; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-card);
  background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-ring); }
.panel h3 { font-size: var(--text-md); line-height: 1.2; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.panel h3 span { font: 400 var(--text-xs) / 1.4 var(--font-body); color: var(--color-muted); white-space: nowrap; }
.panel ul { list-style: none; padding: 0; display: grid; gap: var(--space-sm); }
.panel li { display: grid; gap: var(--space-3xs); font-size: var(--text-sm); color: var(--color-muted); }
.panel li b { color: var(--color-ink); font-weight: 600; font-size: var(--text-base); }
.panel.clears h3 { color: var(--color-accent); }

/* Rule tables, kept for the brand page */
.spec { inline-size: 100%; border-collapse: collapse; }
.spec tbody + tbody th[scope="rowgroup"] { padding-block-start: var(--space-xl); }
.spec th[scope="rowgroup"] { text-align: start; padding-block-end: var(--space-xs); font: 700 var(--text-md) / 1.2 var(--font-display); }
.spec th[scope="rowgroup"] span { font: 400 var(--text-sm) / 1.4 var(--font-body); color: var(--color-muted); margin-inline-start: var(--space-xs); }
.spec td { padding-block: var(--space-sm); border-block-start: 1px solid var(--color-ring); vertical-align: baseline; }
.spec td:first-child { font-weight: 600; padding-inline-end: var(--space-lg); }
.spec td:last-child { color: var(--color-muted); text-align: end; }
@media (max-width: 40rem) {
  .spec td { display: block; text-align: start !important; padding-block: var(--space-2xs); border: 0; }
  .spec tr { display: block; padding-block: var(--space-sm); border-block-start: 1px solid var(--color-ring); }
  .spec tr:has(th) { padding-block: 0; border: 0; }
  .spec th[scope="rowgroup"] { display: block; }
}

/* ─── Price ─────────────────────────────────────────────────────────────── */
.price { position: relative; isolation: isolate; display: grid; gap: var(--space-lg); margin-block: var(--space-2xl);
  padding: var(--space-2xl) clamp(var(--space-lg), 5vw, var(--space-3xl)); border-radius: var(--radius-card);
  background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-ring), var(--shadow-float); overflow: hidden; }
.price::before { content: ""; position: absolute; inset: -40% 40% 30% -20%; z-index: -1;
  background: radial-gradient(closest-side, var(--color-glow), transparent); filter: blur(30px); }
.price .figure { font: 700 var(--text-price) / 0.95 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; }
.price .figure small { font: 400 var(--text-md) / 1 var(--font-body); letter-spacing: 0; color: var(--color-muted); margin-inline-start: var(--space-xs); }
.price p { color: var(--color-ink-2); max-inline-size: 52ch; margin-block-end: var(--space-lg); }
@media (min-width: 60rem) { .price { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--space-2xl); align-items: end; } }

/* ─── Questions ─────────────────────────────────────────────────────────── */
.questions { padding-block: var(--space-2xl) var(--space-xl); }
.questions h2 { font-size: var(--text-xl); letter-spacing: -0.015em; margin-block-end: var(--space-xl); }
.questions dl { display: grid; gap: var(--space-xl); }
.questions dt { font-weight: 600; margin-block-end: var(--space-xs); }
.questions dd { color: var(--color-ink-2); max-inline-size: var(--measure); }
@media (min-width: 60rem) { .questions dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); } }

/* ─── The one global CTA at the foot of the story ───────────────────────── */
.start { display: grid; gap: var(--space-lg); justify-items: start; padding-block: var(--space-3xl); }
.start h2 { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); max-inline-size: 14ch; }
.start p { color: var(--color-ink-2); max-inline-size: 48ch; }

/* ─── Footer · Ft1 mast-headed ──────────────────────────────────────────── */
.foot-mast { border-block-start: 1px solid var(--color-ring); padding-block: var(--space-xl) calc(var(--space-2xl) + env(safe-area-inset-bottom, 0px));
  display: grid; gap: var(--space-xs) var(--space-xl); }
.foot-mast .tagline { color: var(--color-ink-2); }
.foot-mast .links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); list-style: none; padding: 0; margin-block-start: var(--space-sm); }
.foot-mast .links a { color: var(--color-ink-2); font-size: var(--text-sm); white-space: nowrap; }
.foot-mast .legal { font-size: var(--text-xs); color: var(--color-muted); max-inline-size: 75ch; margin-block-start: var(--space-sm); }
@media (min-width: 60rem) { .foot-mast { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; } .foot-mast .links, .foot-mast .legal { grid-column: 2; } }
.todo { background: var(--color-paper-3); color: var(--color-ink); padding-inline: var(--space-2xs); }

/* ─── One orchestrated entrance (hero only) ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .enter { opacity: 0; translate: 0 8px; animation: enter var(--dur-long) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
  @keyframes enter { to { opacity: 1; translate: 0 0; } }
  .stale li.enter { animation-name: enter-stale; }
  @keyframes enter-stale { to { opacity: calc(1 - var(--age, 0) * 0.78); translate: 0 0; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 150ms !important; animation-duration: 150ms !important; }
  .button:hover, .button:active { transform: none; }
}

/* ─── Inner pages (thank-you, lost key, legal, 404) ─────────────────────── */
.page { padding-block: var(--space-2xl) var(--space-3xl); display: grid; gap: var(--space-lg); max-inline-size: 46rem; }
.page h1 { font-size: var(--text-xl); line-height: 1.1; letter-spacing: -0.015em; }
.page h2 { font-size: var(--text-lg); margin-block-start: var(--space-lg); }
.page p, .page li { color: var(--color-ink-2); max-inline-size: var(--measure); }
.key { font: 400 var(--text-sm) / 1.6 var(--font-mono); word-break: break-all; background: var(--color-paper-2); color: var(--color-ink);
  padding: var(--space-md); border: var(--rule); border-radius: var(--radius-frame); }
.note { color: var(--color-muted); font-size: var(--text-sm); }
.warn { color: var(--color-ink); font-weight: 600; }
.row-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); }
.field { inline-size: 100%; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-button);
  background: var(--color-paper); color: var(--color-ink); font: 400 max(16px, 1rem) / 1.4 var(--font-body);
  transition: border-color var(--dur-short) var(--ease-out); }
.field:focus-visible { border-color: var(--color-ink); }
.field:user-invalid { border-color: var(--color-ink); background: var(--color-paper-2); }
.field:disabled { background: var(--color-paper-2); color: var(--color-muted); cursor: not-allowed; }
.field::placeholder { color: var(--color-muted); }

/* ─── Brand page ────────────────────────────────────────────────────────── */
.brand-intro { display: grid; gap: var(--space-lg); padding-block: var(--space-2xl) var(--space-3xl); }
.brand-intro h1 { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); max-inline-size: 12ch; }
.brand-intro .lede { margin: 0; }
.brand-block { display: grid; gap: var(--space-xl); padding-block: var(--space-2xl); }
.brand-head { display: grid; gap: var(--space-sm); }
.brand-head h2 { font-size: var(--text-xl); line-height: 1.1; letter-spacing: -0.015em; }
.brand-head p { color: var(--color-ink-2); max-inline-size: 58ch; }
@media (min-width: 60rem) { .brand-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: baseline; } }

.plates { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.plate.wide { grid-column: 1 / -1; }
@media (min-width: 60rem) { .plates { grid-template-columns: repeat(6, minmax(0, 1fr)); } .plate { grid-column: span 2; } .plate.wide { grid-column: span 3; } }
.plate > div { display: grid; place-items: center; padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-card); aspect-ratio: 16 / 7; }
.plate > div.tall { aspect-ratio: 4 / 3; }
.plate img { inline-size: min(100%, 17rem); block-size: auto; }
.plate .tall img { inline-size: auto; block-size: 5.5rem; max-inline-size: 100%; }
.plate .tall img.mark { block-size: 4.5rem; }
.plate .tall img.lockup { block-size: auto; inline-size: min(100%, 13rem); }
.field-dark { background: var(--color-paper-2); box-shadow: 0 0 0 1px var(--color-ring); }
.field-light { background: var(--color-ink); }
.plate figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-md); margin-block-start: var(--space-sm);
  font-size: var(--text-sm); color: var(--color-ink-2); }
.plate .files { display: flex; gap: var(--space-md); }
.plate .files a { font-weight: 600; }
.rules { margin-block-start: var(--space-md); }

.swatches { list-style: none; padding: 0; display: grid; gap: var(--space-lg) var(--space-md); grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); }
@media (min-width: 60rem) { .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.swatches li { display: grid; gap: var(--space-3xs); font-size: var(--text-sm); color: var(--color-muted); }
.swatches li::before { content: ""; display: block; aspect-ratio: 3 / 2; margin-block-end: var(--space-xs); border-radius: var(--radius-frame);
  background: var(--swatch); outline: 1px solid var(--color-rule); outline-offset: -1px; }
.swatches b { color: var(--color-ink); font-weight: 600; font-size: var(--text-base); }
.swatches .mono { color: var(--color-ink-2); }

.specimens { display: grid; gap: var(--space-xl); }
.specimens dt { font-size: var(--text-sm); color: var(--color-muted); margin-block-end: var(--space-xs); }
.spec-display { font: 700 var(--text-display) / var(--leading-display) var(--font-display); letter-spacing: var(--tracking-display); max-inline-size: 16ch; text-wrap: balance; }
.spec-text { font-size: var(--text-lg); line-height: 1.45; color: var(--color-ink-2); max-inline-size: 40ch; }
.spec-mono { font: 400 var(--text-lg) / 1.3 var(--font-mono); color: var(--color-muted); }

.fade-demo { max-inline-size: 34rem; }

.lines { display: grid; gap: var(--space-lg); }
.lines div { display: grid; gap: var(--space-2xs); padding-block-end: var(--space-lg); }
.lines dt { font-size: var(--text-sm); color: var(--color-muted); }
.lines dd { font: 700 var(--text-lg) / 1.3 var(--font-display); max-inline-size: 60ch; }
.lines div:last-child dd { font: 400 var(--text-base) / var(--leading-body) var(--font-body); color: var(--color-ink-2); }
@media (min-width: 60rem) { .lines div { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: baseline; } }