/* Landing page (public_demo.html), 2026-10-12 redesign from the Elasticity
   handoff (reference.html). Shared tokens/components live in tokens.css and
   components.css; this file only restyles the landing page.

   Theming: <html class="landing">. In dark mode the role tokens are
   retargeted to the handoff's true-black palette (the --ls-* tokens) and
   the hero/closer stage (.l-stage) shows the night-scene art with the
   moon as the CTA. In light mode (2026-10-16) the whole page, stage and
   header included, follows the shared light tokens (ocean blue accent),
   the stage shows the day-scene art and the setting sun is the CTA.
   --l-strong / --l-cta-hover are the two landing-only roles that differ
   by theme (white in dark, matching the handoff). */

/* ---- dark palette: stage + dark theme ------------------------------------- */
:root.landing[data-theme="dark"] {
  --bg: var(--ls-bg);
  --surface: var(--ls-card);
  --surface-2: var(--ls-wash);
  --line: var(--ls-line);
  --line-strong: var(--ls-line-strong);
  --fg: var(--ls-fg);
  --fg-muted: var(--ls-body);
  --fg-faint: var(--ls-muted);
  --accent: var(--ls-accent);
  --accent-text: var(--ls-accent);
  --accent-ink: var(--ls-accent-ink);
  --accent-wash: rgba(43, 255, 156, .12);
  --focus: var(--ls-accent);
  --link: var(--ls-accent);
  --l-strong: var(--ls-white);
  --l-cta-hover: var(--ls-white);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root.landing:not([data-theme="light"]) {
    --bg: var(--ls-bg);
    --surface: var(--ls-card);
    --surface-2: var(--ls-wash);
    --line: var(--ls-line);
    --line-strong: var(--ls-line-strong);
    --fg: var(--ls-fg);
    --fg-muted: var(--ls-body);
    --fg-faint: var(--ls-muted);
    --accent: var(--ls-accent);
    --accent-text: var(--ls-accent);
    --accent-ink: var(--ls-accent-ink);
    --accent-wash: rgba(43, 255, 156, .12);
    --focus: var(--ls-accent);
    --link: var(--ls-accent);
    --l-strong: var(--ls-white);
    --l-cta-hover: var(--ls-white);
  }
}
/* Display + label type: JetBrains Mono (Inter stays the UI/body face). */
:root.landing { --display: var(--mono-l); --mono: var(--mono-l); --l-strong: var(--fg); --l-cta-hover: var(--accent-hover); }
.landing body { background: var(--bg); }
.landing-page { background: var(--bg); }

.landing-sheet {
  max-width: 1360px; margin: 0 auto; padding: 0;
  border-inline: 1px solid var(--line); position: relative;
}
.landing-sheet a { text-underline-offset: 3px; }
.landing-sheet h1, .landing-sheet h2, .landing-sheet h3 { font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; }

/* ---- nav --------------------------------------------------------------- */
/* Follows the theme like the stage below it (the wordmark swap is
   components.css's .logo-img-dark/-light). */
.landing .topbar { background: var(--bg); color: var(--fg); }
.landing .topbar .theme-toggle { background: transparent; }
.landing .topbar .btn.primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.landing .topbar .btn.primary:hover { background: var(--l-cta-hover); }
.landing .topbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 28px; min-height: 72px; padding: 0 32px; margin: 0;
  border-bottom: 1px solid var(--line);
}
.landing .topbar .wordmark { display: inline-flex; align-items: center; }
.landing .topbar .wordmark .logo-img { height: 34px; }
.landing .topbar nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }
.landing .topbar nav a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 400; color: var(--fg-muted);
}
.landing .topbar nav a:not(.btn):hover { color: var(--l-strong); }
.landing .topbar .nav-cta { display: flex; align-items: center; gap: 12px; }
.landing .topbar .nav-cta .btn { min-height: 44px; padding: 0 20px; border-radius: 8px; font-size: 15px; font-weight: 500; }
.landing .theme-toggle { width: 44px; height: 44px; border-radius: 8px; border-color: var(--accent-text); color: var(--accent-text); }
.landing .theme-toggle:hover { background: var(--accent-wash); color: var(--accent-text); }
.landing .theme-toggle svg { width: 20px; height: 20px; }
@media (max-width: 860px) {
  .landing .topbar { padding: 12px 20px; }
  .landing .topbar nav { order: 3; width: 100%; gap: 0 20px; }
}
/* Phones: one header row (logo, key button, toggle). The section links are
   repeated in the footer, and the hero/closer already carry the CTA. */
@media (max-width: 640px) {
  .landing .topbar { min-height: 64px; flex-wrap: nowrap; gap: 12px; padding: var(--s3) var(--s4); }
  .landing .topbar nav { display: none; }
  .landing .topbar .wordmark .logo-img { height: 28px; }
  .landing .topbar .nav-cta { gap: 8px; margin-left: auto; }
  .landing .topbar .nav-cta .btn { padding: 0 var(--s3); font-size: 14px; }
}

/* ---- shared section furniture ---------------------------------------------- */
.l-sec { padding: clamp(56px, 7vw, 96px) clamp(20px, 3vw, 32px); border-top: 1px solid var(--line); }
.l-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint);
}
.l-eyebrow .mark { display: inline-block; width: 24px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; }
.l-h2 { margin: 16px 0 0; font-size: clamp(24px, 3vw, 38px); line-height: 1.15; color: var(--fg); max-width: 900px; }
.l-lead { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--fg-muted); max-width: 660px; }
.l-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.l-mono-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.l-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px;
  border-radius: 8px; border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.l-btn.primary { background: var(--accent); color: var(--accent-ink); }
.l-btn.primary:hover { background: var(--action-hover); }
.l-btn.ghost { background: transparent; border-color: var(--line-strong); color: var(--fg); font-weight: 400; }
.l-btn.ghost:hover { border-color: var(--accent-text); color: var(--accent-text); }
.l-btn:disabled { opacity: .6; cursor: wait; }
.l-btn:focus-visible, .landing a:focus-visible, .landing button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---- stage (hero + closer): night art in dark, day art in light ------------- */
.l-stage { position: relative; overflow: hidden; background: var(--bg); color: var(--fg); }

.l-hero-head { position: relative; z-index: 3; text-align: center; padding: 72px 24px 0; }
.l-hero-head h1 {
  margin: 0; font-size: clamp(26px, 4.4vw, 60px); line-height: 1.12; color: var(--l-strong); max-width: none; text-wrap: balance;
}
.l-hero-head h1 .off {
  display: inline-block; margin-top: 8px; padding: 0 16px; background: var(--accent); color: var(--accent-ink);
}
.l-art { position: relative; max-width: 1172px; margin: 0 auto; }
.l-art > img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
/* One scene per theme: day (light) by default, night in dark. Both <img>s
   are loading="lazy", so the browser never fetches the hidden one. The
   day art is a downscaled render, not true pixel art -- smooth scaling. */
.l-stage img.art-night { display: none; }
.l-stage img.art-day { image-rendering: auto; }
@media (prefers-color-scheme: dark) {
  :root.landing:not([data-theme="light"]) .l-stage img.art-day { display: none; }
  :root.landing:not([data-theme="light"]) .l-stage img.art-night { display: block; }
}
:root.landing[data-theme="dark"] .l-stage img.art-day { display: none; }
:root.landing[data-theme="dark"] .l-stage img.art-night { display: block; }
/* Edges fade into the page background (black in dark, --bg in light). */
.l-feather { position: absolute; pointer-events: none; --l-fade: color-mix(in srgb, var(--bg) 85%, transparent); }
.l-feather.top { left: -2px; right: -2px; top: -2px; height: 140px; background: linear-gradient(to bottom, var(--bg) 0%, var(--l-fade) 35%, transparent 100%); }
.l-feather.bottom { left: -2px; right: -2px; bottom: -2px; height: 230px; background: linear-gradient(to top, var(--bg) 0%, var(--l-fade) 35%, transparent 100%); }
.l-feather.left { left: -2px; top: -2px; bottom: -2px; width: 180px; background: linear-gradient(to right, var(--bg) 0%, var(--l-fade) 35%, transparent 100%); }
.l-feather.right { right: -2px; top: -2px; bottom: -2px; width: 180px; background: linear-gradient(to left, var(--bg) 0%, var(--l-fade) 35%, transparent 100%); }

/* The orb IS the primary CTA: a real link over the art (sun/moon baked out).
   Light: the setting sun, flat-bottomed where it meets the sea. Its bottom
   edge sits on the day art's horizon (48.43% down the image), the lower
   27% of the circle is clipped off (polygon reaches far outside the box on
   the other three sides so the glow and focus ring still show), and the
   text is centred in the visible 73%. Scaling on hover pivots on the
   horizon line so the flat edge never lifts off the water. */
.l-orb {
  position: absolute; left: 50%; bottom: 51.57%; transform: translate(-50%, 27%); transform-origin: 50% 73%;
  --orb-w: clamp(112px, 12vw, 148px);
  box-sizing: border-box; width: var(--orb-w); aspect-ratio: 1 / 1; border-radius: 50%; padding-bottom: calc(var(--orb-w) * .27);
  clip-path: polygon(-200% -200%, 300% -200%, 300% 73%, -200% 73%);
  background: var(--sun); color: var(--sun-ink); display: flex; align-items: center; justify-content: center;
  text-align: center; font-family: var(--mono); font-weight: 800; font-size: calc(var(--orb-w) * .165);
  line-height: 1.2; letter-spacing: -.02em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 0 36px 8px var(--sun-glow), 0 0 110px 36px var(--sun-glow-far);
  transition: transform .2s ease;
}
.l-orb:hover { transform: translate(-50%, 27%) scale(1.05); }
.l-orb:focus-visible { outline: 3px solid var(--l-strong); outline-offset: 6px; }
/* Dark: the moon, a full circle up in the night sky (the 2026-10-12 handoff). */
@media (prefers-color-scheme: dark) {
  :root.landing:not([data-theme="light"]) .l-orb {
    bottom: auto; top: max(22.8%, 64px); transform: translate(-50%, -50%); transform-origin: 50% 50%;
    --orb-w: clamp(96px, 11vw, 128px); width: var(--orb-w); font-size: calc(var(--orb-w) * .19); padding-bottom: 0; clip-path: none;
    background: var(--ls-accent); color: var(--ls-accent-ink);
    box-shadow: 0 0 0 1px rgba(43,255,156,.5), 0 0 36px 8px rgba(43,255,156,.38), 0 0 110px 36px rgba(43,255,156,.14);
  }
  :root.landing:not([data-theme="light"]) .l-orb:hover { transform: translate(-50%, -50%) scale(1.05); }
}
:root.landing[data-theme="dark"] .l-orb {
  bottom: auto; top: max(22.8%, 64px); transform: translate(-50%, -50%); transform-origin: 50% 50%;
  --orb-w: clamp(96px, 11vw, 128px); width: var(--orb-w); font-size: calc(var(--orb-w) * .19); padding-bottom: 0; clip-path: none;
  background: var(--ls-accent); color: var(--ls-accent-ink);
  box-shadow: 0 0 0 1px rgba(43,255,156,.5), 0 0 36px 8px rgba(43,255,156,.38), 0 0 110px 36px rgba(43,255,156,.14);
}
:root.landing[data-theme="dark"] .l-orb:hover { transform: translate(-50%, -50%) scale(1.05); }
.l-ghost-cta {
  position: absolute; left: 50%; bottom: clamp(24px, 6%, 56px); transform: translateX(-50%); white-space: nowrap;
  background: color-mix(in srgb, var(--bg) 78%, transparent); border-color: var(--line-strong); border-radius: 6px; font-family: var(--mono); font-size: 13px; color: var(--fg);
}
@media (max-width: 560px) { .l-art > img { min-height: 340px; object-fit: cover; object-position: 50% 0; } }
/* Phones, light only: the 180px side fades swallow most of a 390px screen
   and wash the bright day art out (on black the night art just recedes). */
@media (max-width: 560px) and (prefers-color-scheme: light) {
  :root.landing:not([data-theme="dark"]) .l-art .l-feather.left,
  :root.landing:not([data-theme="dark"]) .l-art .l-feather.right { width: 40px; }
  :root.landing:not([data-theme="dark"]) .l-art .l-feather.top { height: 72px; }
  :root.landing:not([data-theme="dark"]) .l-art .l-feather.bottom { height: 120px; }
}
@media (max-width: 560px) {
  :root.landing[data-theme="light"] .l-art .l-feather.left,
  :root.landing[data-theme="light"] .l-art .l-feather.right { width: 40px; }
  :root.landing[data-theme="light"] .l-art .l-feather.top { height: 72px; }
  :root.landing[data-theme="light"] .l-art .l-feather.bottom { height: 120px; }
}

/* ---- stats strip ------------------------------------------------------------- */
.l-stats { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); }
.l-stat { flex: 1 1 280px; padding: 36px 32px 40px; border-right: 1px solid var(--line); }
.l-stat:last-child { border-right: 0; }
.l-stat .v { font-family: var(--mono); font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--accent-text); }
.l-stat .l { margin-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.l-stat .d { margin-top: 8px; font-size: 14px; line-height: 1.5; color: var(--fg-faint); }

/* ---- 01 drop-in ------------------------------------------------------------- */
.l-split { display: flex; flex-wrap: wrap; gap: 48px 56px; align-items: flex-start; }
.l-split > .copy { flex: 1 1 360px; min-width: 0; }
.l-split > .code { flex: 1.4 1 480px; min-width: 0; overflow: hidden; }
.l-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.l-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 14px; color: var(--fg); }
.l-tabs { display: flex; align-items: stretch; padding: 0 8px; border-bottom: 1px solid var(--line); }
.l-tab {
  min-height: 48px; padding: 0 16px; background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--fg-faint); font-family: var(--mono); font-size: 13px; cursor: pointer;
}
.l-tab[aria-pressed="true"] { color: var(--accent-text); border-bottom-color: var(--accent-text); }
.l-tab:hover { color: var(--fg); }
.l-code { margin: 0; padding: 24px; overflow-x: auto; font-family: var(--mono); font-size: 14px; line-height: 1.7; color: var(--fg); white-space: pre; }
.l-code-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
  padding: 16px 24px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--fg-faint);
}
.l-code-foot s { color: var(--fg-faint); }
.l-code-foot .now { color: var(--accent-text); }

/* ---- 02 redaction ------------------------------------------------------------ */
.excerpt { margin-top: 40px; padding: clamp(20px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-family: var(--mono); font-size: 16px; line-height: 2; color: var(--fg); }
.excerpt .stamp-line { display: block; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); line-height: 1.5; }
.l-note { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--fg-faint); max-width: 720px; }

.swap { position: relative; display: inline-grid; vertical-align: baseline; }
.swap > * { grid-area: 1 / 1; white-space: nowrap; }
.swap.done { display: inline; }
.swap.done > .real { display: none; }
.swap.done > .fake, .swap.done > .redact { grid-area: auto; }
.swap .real { animation: swap-out .01s ease forwards var(--d, 0s); }
.swap .fake {
  background: var(--accent-wash); color: var(--accent-text); border-bottom: 1px dotted var(--accent-text);
  padding: 0 4px; font-style: italic; opacity: 0; animation: swap-in .3s ease forwards var(--d, 0s);
}
.swap .redact {
  background: var(--redact); color: var(--redact-text); border-radius: 4px; padding: 1px 8px; opacity: 0;
  animation: swap-in .3s ease forwards var(--d, 0s);
}
@keyframes swap-out { to { opacity: 0; visibility: hidden; } }
@keyframes swap-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .swap { display: inline; }
  .swap .real { display: none; }
  .swap .fake, .swap .redact { opacity: 1; animation: none; }
}

.l-passes { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 56px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.l-pass { flex: 1 1 280px; padding: 32px; background: var(--bg); }
.l-pass .n { font-family: var(--mono); font-size: 13px; color: var(--accent-text); }
.l-pass h3 { margin: 16px 0 0; font-size: 17px; letter-spacing: -.01em; color: var(--fg); }
.l-pass p { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: var(--fg-muted); }

.l-twocol { display: flex; flex-wrap: wrap; gap: 40px 56px; margin-top: 72px; align-items: flex-start; }
.l-twocol > .a { flex: 1.2 1 420px; min-width: 0; }
.l-twocol > .b { flex: 1 1 340px; min-width: 0; padding: 28px; }
.l-twocol h3 { margin: 0; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.2; letter-spacing: -.02em; color: var(--fg); }
.l-cover { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.l-cover .l-card { flex: 1 1 100%; padding: 20px; }
.l-cover p { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--fg); }
.l-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 32px; margin-top: 16px; }
.l-groups p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fg-muted); }
.l-groups strong { display: block; margin-bottom: 4px; font-size: 15px; color: var(--fg); }
.l-body { margin: 20px 0 0; font-size: 15px; line-height: 1.6; color: var(--fg-muted); }
.l-twocol > .b p { margin: 16px 0 0; font-size: 15px; line-height: 1.7; color: var(--fg); }
.l-twocol > .b p + p { margin-top: 16px; color: var(--fg-muted); }

/* ---- 03 ledger --------------------------------------------------------------- */
.l-ledger-card { margin-top: 24px; overflow: hidden; }
.exhibit-label { display: block; }
.chart-wrap { margin: 40px 0 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.chart-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.chart-controls { display: contents; }
.chart-controls .ctl { display: flex; align-items: center; gap: 8px; }
.chart-controls .ctl-label { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); }
.chart-controls .seg { display: inline-flex; gap: 0; padding: 0; border: 0; background: transparent; }
.chart-controls .seg button {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; color: var(--fg-muted); font-family: var(--mono); font-size: 12px; cursor: pointer; box-shadow: none;
}
.chart-controls .seg button + button { border-left: 0; }
.chart-controls .seg button:first-child { border-radius: 6px 0 0 6px; }
.chart-controls .seg button:last-child { border-radius: 0 6px 6px 0; }
.chart-controls .seg button:hover { color: var(--accent-text); }
/* Selected state uses the page accent (mint in dark, ocean blue in light), same token as every other accent. */
.chart-controls .seg button[aria-checked="true"] { background: var(--accent-wash); border-color: var(--accent-text); color: var(--accent-text); }
.chart-controls .seg button[aria-checked="true"] + button { border-left: 1px solid var(--accent-text); }
.chart-takeaway { margin: 0; padding: 16px 20px 0; font-size: 15px; line-height: 1.5; color: var(--fg-muted); }
.chart-takeaway b { color: var(--fg); font-weight: 600; }
.chart-takeaway .hl { color: var(--accent-text); }
.plot-grid { padding: 16px 12px 4px 56px; }
.plot { width: 100%; height: auto; display: block; overflow: visible; }
.chart-wrap figcaption { padding: 16px 20px; border-top: 1px solid var(--line); }
.plot .grid line { stroke: var(--line); stroke-width: 1; }
.plot .axis text { font-family: var(--mono); font-size: 10.5px; fill: var(--fg-faint); }
.plot .axis-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--fg-faint); }
.plot .frontier-lift { fill: var(--chart-mark); opacity: .08; }
/* Curves are ink, not mint: mint belongs to the subsidized marks and the lift band, so lines never read as points. */
.plot .frontier { stroke: var(--fg); stroke-width: 2; opacity: .8; stroke-linejoin: round; }
.plot .frontier-market { stroke: var(--chart-ref); stroke-width: 1.5; opacity: .7; stroke-dasharray: 5 4; }
.plot .frontier-lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; stroke-linejoin: round; }
.plot .frontier-lbl.is-elasticity { fill: var(--fg); }
.plot .frontier-lbl.is-market { fill: var(--fg-faint); }
.plot .takeaway-arrow { stroke: var(--chart-mark); stroke-width: 1.5; }
.plot .takeaway-head { fill: var(--chart-mark); }
.plot .retail-dot { fill: var(--surface); stroke: var(--chart-ref); stroke-width: 1.5; }
.plot .takeaway-lbl { font-family: var(--mono); font-size: 11px; font-weight: 600; fill: var(--chart-mark); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.plot .badge-bg { fill: var(--surface); }
.plot .badge-ring { fill: none; stroke-width: 2; }
.plot .badge-ring.is-sub { stroke: var(--chart-mark); }
.plot .badge-ring.is-ref { stroke: var(--chart-ref); }
.plot .badge-init { font-family: var(--sans); font-weight: 700; fill: #fff; pointer-events: none; text-anchor: middle; dominant-baseline: central; }
.plot .mark-dark { display: none; }
.plot .sub-dot { fill: var(--chart-mark); stroke: var(--surface); stroke-width: 2; }
.plot .ref-dot { fill: var(--chart-ref); stroke: var(--surface); stroke-width: 2; }
.plot .hit { fill: transparent; cursor: pointer; }
.chart-legend { display: flex; gap: 8px 24px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--fg-faint); }
.chart-legend .k { display: inline-flex; align-items: center; gap: 8px; }
.chart-legend .sw { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }
.chart-legend .sw.sub { background: none; border: 2px solid var(--chart-mark); }
.chart-legend .sw.ref { background: none; border: 2px solid var(--chart-ref); }
.chart-legend .sw.line { width: 20px; height: 0; border-radius: 0; border-top: 2px solid var(--chart-mark); opacity: .5; }
.chart-legend .sw.line-market { border-top: 2px dashed var(--chart-ref); opacity: .7; }
.chart-legend .sw.retail { width: 8px; height: 8px; margin: 0 4px; border: 1.5px solid var(--chart-ref); }
.chart-legend .sw.lift { width: 16px; height: 11px; border-radius: 2px; background: var(--accent-wash); }
#chartCaveat { margin: 8px 0 0; max-width: 88ch; font-size: 12px; line-height: 1.6; color: var(--fg-faint); }
#chartCaveat details { margin-top: 8px; }
#chartCaveat summary { cursor: pointer; color: var(--fg-muted); }
#chartTip {
  position: absolute; z-index: 20; pointer-events: none; min-width: 200px; max-width: 280px;
  background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong);
  border-radius: 10px; box-shadow: var(--shadow-pop); padding: 12px; font-size: 12px;
}
#chartTip[hidden] { display: none; }
#chartTip .t { font-weight: 600; margin-bottom: 4px; }
#chartTip .r { display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 12px; color: var(--fg-muted); }
#chartTip .r b { color: var(--fg); font-weight: 500; }
#chartTip .cav { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; color: var(--fg-faint); }
@media (max-width: 640px) { .chart-wrap { display: none; } }

.ledger-wrap { margin-top: 24px; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
table.ledger { width: 100%; min-width: 1200px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.ledger th {
  padding: 16px 24px; text-align: left; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-faint); border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.ledger td { padding: 20px 24px; border-bottom: 1px solid var(--ls-line-row); vertical-align: middle; white-space: nowrap; color: var(--fg-muted); }
table.ledger tbody tr:last-child td { border-bottom: 0; }
table.ledger tbody tr:hover td { background: var(--surface-2); }
/* the six score columns sit tighter so all of them fit beside price, context and license */
table.ledger th, table.ledger td { padding-left: 12px; padding-right: 12px; }
table.ledger th:first-child, table.ledger td:first-child { padding-left: 24px; }
table.ledger th.sc, table.ledger td.sc { padding-left: 8px; padding-right: 8px; text-align: center; }
table.ledger th.sc { letter-spacing: .06em; }
table.ledger .num { text-align: left; font-family: var(--sans); }
.ledger-model { display: flex; align-items: center; gap: 16px; }
.ledger-tile {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--surface); overflow: hidden;
}
.ledger-tile .lab-logo { width: 24px; height: 24px; object-fit: contain; }
.ledger-tile .lab-logo-fallback { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; background: var(--vendor-color, var(--fg-faint)); }
.ledger-tile .mark-dark { display: none; }
.ledger-name { font-size: 16px; font-weight: 600; color: var(--fg); }
.ledger-sub { margin-top: 2px; font-size: 13px; color: var(--fg-faint); white-space: normal; max-width: 34ch; }
.ledger-sub sup a { color: var(--fg-faint); }
table.ledger .was { display: block; font-size: 13px; color: var(--fg-faint); text-decoration: line-through; }
table.ledger .now { display: block; margin-top: 3px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--fg); }
table.ledger .was + .now { margin-top: 3px; }
table.ledger .now.solo { margin: 0; }
.l-pill { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 14px; font-weight: 600; white-space: nowrap; }
.l-pill.ref { background: transparent; border: 1px solid var(--line-strong); color: var(--fg-faint); font-weight: 500; }
.ledger-score { font-size: 15px; font-weight: 600; color: var(--fg); }
.ledger-score.none { color: var(--fg-faint); }
.ledger-ctx { font-size: 15px; font-weight: 600; color: var(--fg-muted); }
table.ledger tr.row-closed td { background: var(--ls-wash); }
table.ledger tr.row-closed .ledger-name { color: var(--fg-muted); }
table.ledger tr.row-closed .now { color: var(--fg-faint); }
table.ledger tr.row-closed .ledger-score, table.ledger tr.row-closed .ledger-ctx { color: var(--fg-faint); }

table.ledger th[data-sort] { cursor: pointer; user-select: none; }
table.ledger th[data-sort]:hover { color: var(--fg-muted); }
table.ledger th[data-sort]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
table.ledger th .sort-arrow { display: inline-block; margin-left: 4px; font-size: 9px; opacity: 0; transition: opacity .1s, transform .1s; }
table.ledger th[data-sort]:hover .sort-arrow { opacity: .5; }
table.ledger th.sort-active { color: var(--fg); }
table.ledger th.sort-active .sort-arrow { opacity: 1; }
table.ledger th.sort-active.sort-desc .sort-arrow { transform: rotate(180deg); }

@keyframes skel-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
.skel-bar { display: inline-block; height: 10px; border-radius: 2px; background: var(--line-strong); animation: skel-pulse 1.3s ease-in-out infinite; }
.skel-row:nth-child(2) .skel-bar { animation-delay: .12s; }
.skel-row:nth-child(3) .skel-bar { animation-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .skel-bar { animation: none; opacity: .6; } }
.ledger-status-block { margin-top: 24px; padding: 32px 12px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: var(--fg-muted); font-size: 13px; }
.ledger-mobile-note { display: none; }
@media (max-width: 720px) { .ledger-mobile-note { display: block; margin: 12px 0 0; } }
.l-fine { margin: 16px 0 0; font-size: 13px; line-height: 1.6; color: var(--fg-faint); max-width: 820px; }
.model-footnotes { margin: 12px 0 0; padding: 0 0 0 20px; font-size: 12px; color: var(--fg-faint); display: grid; gap: 4px; }

/* ---- 04 demo ----------------------------------------------------------------- */
.example-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.example-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 44px; padding: 12px 16px;
  border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; color: var(--fg);
  font: inherit; font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.example-chip:hover { border-color: var(--accent-text); }
.example-chip .sub { display: block; margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--fg-faint); }
.example-chip.active { border-color: var(--accent-text); background: var(--accent-wash); }
.example-chip.active .sub { color: var(--fg-muted); opacity: 1; }
.l-demo { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; align-items: stretch; }
.l-demo > .in { flex: 1 1 420px; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.l-demo > .legend { flex: 1 1 360px; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.doc-input {
  flex: 1; min-height: 220px; width: 100%; resize: vertical; padding: 16px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--fg); font-family: var(--mono); font-size: 14px; line-height: 1.7;
}
.doc-input::placeholder { color: var(--ls-faint); }
.doc-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-wash); }
.l-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.error-text { color: var(--flag); font-size: 13px; min-height: 1.4em; }
.l-demo .hint, .l-demo p.small { margin: 0; font-size: 13px; line-height: 1.6; color: var(--fg-faint); }
.l-demo .legend-copy { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fg-muted); }
.l-demo .legend-keys { display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.5; color: var(--fg-muted); }
.chip-tok { background: var(--accent-wash); color: var(--accent-text); font-style: italic; padding: 0 4px; border-bottom: 1px dotted var(--accent-text); }
.pl-tok { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--redact); color: var(--redact-text); }
.l-results { margin-top: 32px; }

/* ---- closer ------------------------------------------------------------------ */
.l-closer { border-top: 1px solid var(--line); }
.l-closer-body { position: relative; z-index: 2; text-align: center; padding: clamp(72px, 9vw, 120px) 24px 0; }
.l-closer-body h2 { margin: 0 auto; font-size: clamp(26px, 4vw, 52px); line-height: 1.15; color: var(--l-strong); max-width: 900px; }
.l-closer-body .l-lead { margin: 20px auto 0; color: var(--fg-muted); }
.l-closer-body .l-btn { margin-top: 32px; min-height: 52px; padding: 0 28px; font-size: 17px; }
.l-closer-body .meta { margin-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }
.l-closer-art { position: relative; height: clamp(240px, 34vw, 460px); margin-top: 40px; }
.l-closer-art > img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; image-rendering: pixelated; opacity: .55; }
.l-closer-art .l-feather.top { height: 60%; }
.l-closer-art .l-feather.left, .l-closer-art .l-feather.right { width: 160px; }

footer.colophon {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
  margin: 0; padding: 28px 32px; border-top: 1px solid var(--line);
}
footer.colophon .wordmark .logo-img { height: 28px; }
footer.colophon nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; }
footer.colophon nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-muted); text-decoration: none; }
footer.colophon nav a:hover { color: var(--l-strong); }

/* Dark-mode lab marks (white-on-dark variants) for the plot and the ledger tiles. */
@media (prefers-color-scheme: dark) {
  :root.landing:not([data-theme="light"]) .plot .mark-dark,
  :root.landing:not([data-theme="light"]) .ledger-tile .mark-dark { display: inline; }
  :root.landing:not([data-theme="light"]) .plot .mark-light,
  :root.landing:not([data-theme="light"]) .ledger-tile .mark-light { display: none; }
}
:root.landing[data-theme="dark"] .plot .mark-dark,
:root.landing[data-theme="dark"] .ledger-tile .mark-dark { display: inline; }
:root.landing[data-theme="dark"] .plot .mark-light,
:root.landing[data-theme="dark"] .ledger-tile .mark-light { display: none; }