/* Landing sections — the visual half of the canonical grammar.
 *
 * The complaint this stylesheet answers is precise: every section on every
 * landing page looked the same. The entropy budget names that failure mode
 * exactly — "every section uses the same dark glass surface", "adjacent same
 * layout", "three consecutive card grids" — and the cause was that the previous
 * pages had one card component and used it for problems, value, offers,
 * results, proof and capabilities alike.
 *
 * So this file is organised around two axes declared in Python
 * (public_site/sections.py) and never in the template:
 *
 *   LAYOUT FAMILY   editorial · split · matrix · mosaic · graph · timeline
 *                   ledger · console · compare · canvas · form
 *                   Adjacent sections never share one.
 *
 *   SURFACE         hero · base · inset · raised · accent · accent-soft
 *                   Alternated so the page has a pulse instead of a wall.
 *
 * Density (micro / standard / expanded) modulates vertical rhythm and the
 * default column count. It never shrinks type: the density skill is explicit
 * that density is information depth, not visual cramming.
 *
 * Brand tokens come from the atomic-design taxonomy already bound in tokens.css
 * — Electric Violet as primary, Cyan reserved for data and verification state,
 * Cormorant Garamond for display, Inter for body. Nothing new is invented here;
 * what is added are the *roles* a landing section needs.
 *
 * (Named product identities stay out of every file under assets/: this sheet is
 * served publicly, and apps/tests/test_static_security.py enforces it.)
 */

/* --------------------------------------------------------------------------
   Landing-scoped tokens
   -------------------------------------------------------------------------- */

.lp-page {
  /* Rhythm. One scale, three densities, so two sections of the same density
     have identical vertical presence on every page of the site. */
  --lp-rhythm-micro: clamp(40px, 5vw, 62px);
  --lp-rhythm-standard: clamp(56px, 7vw, 92px);
  --lp-rhythm-expanded: clamp(68px, 8.5vw, 116px);

  --lp-gap: clamp(14px, 1.6vw, 22px);
  --lp-measure: 68ch;

  /* Surfaces. Distinct fills, not one glass repeated. */
  --lp-inset: color-mix(in srgb, var(--navy) 62%, transparent);
  --lp-raised: linear-gradient(155deg, var(--surface), var(--surface-2));
  --lp-accent: linear-gradient(
    140deg,
    color-mix(in srgb, var(--violet) 20%, transparent),
    color-mix(in srgb, var(--violet-2) 16%, transparent) 58%,
    transparent
  );
  --lp-accent-soft: linear-gradient(
    140deg,
    color-mix(in srgb, var(--violet) 9%, transparent),
    transparent 62%
  );

  --lp-hairline: 1px solid var(--line);
  --lp-hairline-strong: 1px solid var(--line-strong);
  --lp-radius: 18px;
  --lp-radius-lg: 24px;

  /* Semantic colours. Cyan is verification state, violet is decision, amber is
     a boundary, rose is a refusal. Used consistently across every section so a
     reader learns the code once. */
  --lp-yes: var(--cyan);
  --lp-no: var(--danger);
  --lp-neutral: var(--silver);
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */

.lp-section {
  position: relative;
  padding-block: var(--lp-rhythm-standard);
  /* An anchored section must not land under the sticky header. */
  scroll-margin-top: 88px;
}

.lp-density--micro { padding-block: var(--lp-rhythm-micro); }
.lp-density--expanded { padding-block: var(--lp-rhythm-expanded); }

.lp-inner { position: relative; }

/* --- Surfaces ------------------------------------------------------------- */

.lp-surface--base { background: transparent; }

.lp-surface--inset {
  background: var(--lp-inset);
  border-block: var(--lp-hairline);
}

/* Raised reads as a panel laid on the page rather than a band cut into it:
   it keeps the page background at the edges and floats its own container. */
.lp-surface--raised > .lp-inner {
  padding: clamp(24px, 3.4vw, 46px);
  background: var(--lp-raised);
  border: var(--lp-hairline);
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--shadow);
}

.lp-surface--accent { background-image: var(--lp-accent); }
.lp-surface--accent-soft { background-image: var(--lp-accent-soft); }

/* The proof-ring motif from the brand's signature set, used once per accent
   band as a quiet ground rather than as decoration on every card. */
.lp-surface--accent::before {
  content: "";
  position: absolute;
  inset-block: -10%;
  right: -6%;
  width: min(520px, 46%);
  background:
    radial-gradient(circle at 70% 40%, color-mix(in srgb, var(--violet) 26%, transparent), transparent 62%);
  pointer-events: none;
  z-index: 0;
}

/* The ring follows the flow onto the flank side rather than sitting behind the
   prose. All three accent bands land mirrored, so without this the one piece of
   decoration on the page would always be under the paragraph it lights. */
.lp-flow--mirrored.lp-surface--accent::before {
  right: auto;
  left: -6%;
  background:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--violet) 26%, transparent), transparent 62%);
}

.lp-surface--hero {
  padding-block: clamp(56px, 7vw, 96px) clamp(44px, 5vw, 72px);
  background-image: radial-gradient(
    ellipse at 78% 12%,
    color-mix(in srgb, var(--violet) 18%, transparent),
    transparent 58%
  );
}

/* --------------------------------------------------------------------------
   ZIGZAG — the side a section enters on
   -------------------------------------------------------------------------- */

/* Layout, surface and rhythm vary the shape of a section; none of them varied
 * where the eye enters it. Every one of the twenty-three opened on the left, so
 * a page deliberately built out of eleven information geometries still scanned
 * as one straight column of left-anchored headings.
 *
 * ``lp-flow--forward`` puts the copy column on the left, ``lp-flow--mirrored``
 * on the right, and public_site/sections.py alternates them by canonical rank —
 * which is what guarantees two adjacent sections never enter on the same side.
 *
 * A grid opts in by carrying ``lp-zig`` and naming its two tracks by role:
 * ``--lp-zig-copy`` is the column that holds the prose, ``--lp-zig-flank`` the
 * one beside it. Its two children carry the matching roles, and both are placed
 * explicitly rather than reordered — two of the five blocks are authored
 * flank-first, and an ``order`` rule would have quietly mirrored those two the
 * wrong way round. Placement leaves the DOM untouched, so reading and focus
 * order are identical in both flows and a narrow viewport stacks each block in
 * the order it was written.
 *
 * Five blocks carry it, and the list is closed on purpose:
 *
 *   .lp-hero              hero copy      | blueprint aside
 *   .lp-editorial         proposition    | boundary aside     (two columns only)
 *   .lp-canvas            intersection   | ring figure
 *   .lp-console--benchmark  market facts | median readout
 *   .lp-close             engagement     | protocol
 *
 * plus .lp-head, which zigzags the heading block itself and is what makes the
 * alternation legible on the eighteen sections whose body is a single column.
 *
 * What is deliberately absent is every grid whose columns carry an order:
 * .lp-shift (from -> to), .lp-axis (before | after), .lp-compare (fit |
 * non-fit), .lp-scope-col (in | out of scope). Mirroring one of those does not
 * restyle a claim, it reverses it — a before/after table read right to left
 * says the mandate made things worse. apps/tests/test_landing_sections.py
 * asserts none of them ever acquires a flow rule. */

.lp-zig {
  display: grid;
  grid-template-columns: var(--lp-zig-copy) var(--lp-zig-flank);
  gap: var(--lp-zig-gap, clamp(24px, 3.6vw, 52px));
  align-items: var(--lp-zig-align, start);
}

.lp-flow--mirrored .lp-zig {
  grid-template-columns: var(--lp-zig-flank) var(--lp-zig-copy);
}

.lp-flow--forward .lp-zig > .lp-copy,
.lp-flow--mirrored .lp-zig > .lp-flank { grid-column: 1; grid-row: 1; }

.lp-flow--forward .lp-zig > .lp-flank,
.lp-flow--mirrored .lp-zig > .lp-copy { grid-column: 2; grid-row: 1; }

/* Grid items default to min-width:auto, so one long unbroken token — a stack
   string, a URL in a proof card — would push a column past the viewport and
   give the page a horizontal scrollbar. */
.lp-zig > * { min-width: 0; }

/* --------------------------------------------------------------------------
   Section head — identical anatomy in all 23 sections
   -------------------------------------------------------------------------- */

.lp-head {
  display: grid;
  --lp-zig-copy: minmax(0, 1.05fr);
  --lp-zig-flank: minmax(0, 0.95fr);
  align-items: end;
  gap: clamp(16px, 2.6vw, 40px);
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* A head with no lead has nothing to trade places with, so it does not carry
   ``lp-zig`` at all and stays anchored left — a lone heading sliding to the
   right column would read as an indent, not as a mirror. */

.lp-head-main { min-width: 0; }

.lp-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  color: var(--cyan);
  font-size: 0.76rem;
  font-weight: 780;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.lp-mark {
  flex: 0 0 auto;
  color: var(--lavender);
  opacity: 0.92;
}

.lp-mark-accent { color: var(--cyan); stroke: var(--cyan); }

.lp-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.lp-lead {
  margin: 0;
  max-width: var(--lp-measure);
  color: color-mix(in srgb, var(--paper) 78%, var(--silver));
  font-size: clamp(0.98rem, 1.3vw, 1.1rem);
}

.lp-prose {
  max-width: var(--lp-measure);
  color: color-mix(in srgb, var(--paper) 84%, var(--silver));
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1.68;
}

.lp-prose--centered { margin-inline: auto; text-align: center; }

.lp-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  padding-top: 16px;
  border-top: var(--lp-hairline);
  color: var(--silver);
  font-size: 0.86rem;
}

.lp-note a { color: var(--cyan); font-weight: 700; text-decoration: none; }
.lp-note a:hover { text-decoration: underline; }
.lp-note a::after { content: " →"; }

.lp-note-label,
.lp-boundary-label {
  color: var(--paper);
  font-weight: 760;
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lp-note--question {
  border-top-color: color-mix(in srgb, var(--cyan) 34%, transparent);
  color: color-mix(in srgb, var(--paper) 76%, var(--silver));
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Buttons — one family, three weights, 48px minimum target
   -------------------------------------------------------------------------- */

.lp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.lp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 13px;
  font: inherit;
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.lp-button--primary { background: var(--paper); color: var(--ink); }
.lp-button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--violet) 34%, transparent);
}

.lp-button--ghost {
  border-color: color-mix(in srgb, var(--cyan) 40%, transparent);
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
  color: var(--cyan);
}
.lp-button--ghost:hover { border-color: var(--cyan); }

/* --------------------------------------------------------------------------
   LAYOUT — split (hero, engagement)
   -------------------------------------------------------------------------- */

.lp-hero {
  display: grid;
  --lp-zig-copy: minmax(0, 1.12fr);
  --lp-zig-flank: minmax(300px, 0.88fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.lp-hero-copy { min-width: 0; }

.lp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--cyan);
  font-size: 0.75rem;
  font-weight: 780;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.lp-eyebrow-code {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 26px;
  padding-inline: 8px;
  border: 1px solid color-mix(in srgb, var(--cyan) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--cyan) 8%, transparent);
  font-variant-numeric: tabular-nums;
}

.lp-hero-name {
  margin: 18px 0 6px;
  color: color-mix(in srgb, var(--paper) 74%, var(--silver));
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lp-hero-hook {
  margin: 0 0 18px;
  max-width: 20ch;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.lp-hero-promise {
  margin: 0;
  max-width: 58ch;
  color: color-mix(in srgb, var(--paper) 80%, var(--silver));
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
}

.lp-hero-note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 22px 0 0;
  color: var(--silver);
  font-size: 0.84rem;
}
.lp-hero-note a { color: var(--cyan); font-weight: 700; text-decoration: none; }
.lp-hero-note a:hover { text-decoration: underline; }

.lp-hero-tertiary { margin: 14px 0 0; font-size: 0.88rem; }
.lp-hero-tertiary a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--cyan);
  font-weight: 700;
  text-decoration: none;
}
.lp-hero-tertiary a::after { content: " ↓"; }
.lp-hero-tertiary a:hover { text-decoration: underline; }

/* The blueprint aside — a spec sheet, deliberately not a card grid. */
.lp-blueprint {
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--lp-raised);
  border: var(--lp-hairline);
  border-radius: var(--lp-radius-lg);
  box-shadow: var(--shadow);
}

.lp-blueprint-title {
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: var(--lp-hairline);
  color: var(--cyan);
  font-size: 0.74rem;
  font-weight: 780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-blueprint-list { margin: 0; display: grid; gap: 14px; }

.lp-blueprint-row { display: grid; gap: 4px; }

.lp-blueprint-row dt {
  color: var(--silver);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lp-blueprint-row dd {
  margin: 0;
  color: color-mix(in srgb, var(--paper) 92%, var(--silver));
  font-size: 0.94rem;
  line-height: 1.5;
}

.lp-blueprint-stack {
  display: grid;
  gap: 5px;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: var(--lp-hairline);
  color: var(--silver);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.lp-blueprint-stack-label {
  color: var(--cyan);
  font-size: 0.7rem;
  font-weight: 780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Engagement reuses the split family with the weights reversed. */
.lp-close {
  display: grid;
  --lp-zig-copy: minmax(0, 1.05fr);
  --lp-zig-flank: minmax(280px, 0.95fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
}

.lp-close-copy .lp-title { margin-bottom: 14px; }
.lp-close-copy .lp-lead { margin-bottom: 24px; }

.lp-protocol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.lp-protocol-step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border: var(--lp-hairline);
  border-radius: 14px;
  background: color-mix(in srgb, var(--ink) 32%, transparent);
  color: color-mix(in srgb, var(--paper) 84%, var(--silver));
  font-size: 0.92rem;
}

.lp-close-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: var(--lp-hairline);
  list-style: none;
}
.lp-close-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--cyan);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}
.lp-close-links a::after { content: " →"; }
.lp-close-links a:hover { text-decoration: underline; }

.lp-protocol-index,
.lp-step-index {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--violet) 24%, transparent);
  color: var(--paper);
  font-weight: 820;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   LAYOUT — ledger (triggers, offers, results, faq)
   -------------------------------------------------------------------------- */

.lp-ledger {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--lp-hairline);
}

.lp-ledger-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: clamp(12px, 2vw, 26px);
  align-items: baseline;
  padding: clamp(16px, 2vw, 22px) 0;
  border-bottom: var(--lp-hairline);
}

.lp-ledger-row p {
  margin: 0;
  max-width: var(--lp-measure);
  color: color-mix(in srgb, var(--paper) 88%, var(--silver));
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.55;
}

.lp-ledger-index {
  color: var(--lavender);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Commercial routes — the buying modes, above the configuration ladder.
   One may be recommended; it is marked by a border and a label, never by
   shrinking the others. Suppressing an option visually to steer the choice is
   the decoy pattern the ethical-choice gate rejects. */

.lp-routes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--lp-gap);
  margin-bottom: clamp(28px, 3.4vw, 44px);
}

.lp-route {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(20px, 2.4vw, 28px);
  border: var(--lp-hairline);
  border-radius: var(--lp-radius);
  background: color-mix(in srgb, var(--ink) 32%, transparent);
}

.lp-route--recommended {
  border-color: color-mix(in srgb, var(--cyan) 46%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyan) 20%, transparent);
}

.lp-route-head { display: grid; gap: 8px; }

.lp-route-code {
  margin: 0;
  color: var(--lavender);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  font-weight: 700;
}

.lp-route-flag {
  justify-self: start;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent);
  border-radius: 999px;
  color: var(--cyan);
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.lp-route-name { margin: 0; font-size: 1.14rem; font-weight: 780; line-height: 1.28; }
.lp-route-hook { margin: 0; color: color-mix(in srgb, var(--paper) 82%, var(--silver)); font-size: 0.93rem; }

.lp-route-facts {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px 0;
  border-block: var(--lp-hairline);
}
.lp-route-facts dt {
  color: var(--silver);
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.lp-route-facts dd { margin: 4px 0 0; font-size: 0.88rem; color: color-mix(in srgb, var(--paper) 84%, var(--silver)); }

.lp-route-attributes { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.lp-route-attribute { display: grid; gap: 4px; font-size: 0.87rem; color: var(--silver); }
.lp-route-attribute-title { color: var(--paper); font-weight: 740; }
.lp-route-attribute .lp-tag { margin: 0; }

.lp-route-cta { margin-top: auto; align-self: stretch; }

/* --------------------------------------------------------------------------
   LAYOUT — graph (problems chain, capabilities)
   -------------------------------------------------------------------------- */

.lp-chain { display: grid; gap: clamp(14px, 1.8vw, 20px); }

.lp-chain-node {
  position: relative;
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px) clamp(20px, 2.4vw, 28px)
    clamp(28px, 3vw, 40px);
  border: var(--lp-hairline);
  border-radius: var(--lp-radius);
  background: color-mix(in srgb, var(--ink) 34%, transparent);
}

/* The chain rule: a vertical accent that ties consecutive nodes into a
   sequence rather than three unrelated cards. */
.lp-chain-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--violet), var(--cyan));
}

.lp-chain-title {
  margin: 0 0 10px;
  font-size: 1.16rem;
  font-weight: 760;
  letter-spacing: -0.015em;
}

.lp-chain-consequence {
  margin: 0;
  max-width: var(--lp-measure);
  color: color-mix(in srgb, var(--paper) 84%, var(--silver));
}

.lp-chain-workaround {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--warning) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 22%, transparent);
}

.lp-chain-workaround p { margin: 0; color: var(--silver); font-size: 0.9rem; }

.lp-chain-workaround-label {
  margin: 0 0 6px !important;
  color: var(--warning) !important;
  font-size: 0.71rem !important;
  font-weight: 780;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.lp-graph {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--lp-gap);
}

.lp-node {
  display: grid;
  gap: 7px;
  padding: 20px;
  border: var(--lp-hairline);
  border-radius: var(--lp-radius);
  background: color-mix(in srgb, var(--ink) 30%, transparent);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.lp-node:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--violet) 50%, transparent);
}

.lp-node-rank { color: var(--lavender); font-weight: 820; font-size: 0.82rem; }
.lp-node-score { color: var(--cyan); font-size: 0.78rem; font-weight: 760; }
.lp-node-family {
  color: var(--silver);
  font-size: 0.7rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.lp-node-title { font-size: 1.06rem; font-weight: 760; line-height: 1.3; }
.lp-node-summary { color: var(--silver); font-size: 0.88rem; }
.lp-node-cta { color: var(--cyan); font-weight: 740; font-size: 0.85rem; }
.lp-node-cta::after { content: " →"; }

.lp-proof-index {
  margin-top: clamp(22px, 2.6vw, 30px);
  padding: clamp(18px, 2.2vw, 24px);
  border: var(--lp-hairline);
  border-radius: var(--lp-radius);
  background: color-mix(in srgb, var(--navy) 46%, transparent);
}

.lp-proof-index-title { margin: 0 0 14px; font-weight: 740; }
.lp-proof-index ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.lp-proof-index li a {
  display: grid;
  gap: 3px;
  padding: 11px 0;
  border-top: var(--lp-hairline);
  color: inherit;
  text-decoration: none;
}
.lp-proof-index li a:hover { color: var(--cyan); }
.lp-proof-index small { color: var(--silver); font-size: 0.78rem; }

/* --------------------------------------------------------------------------
   LAYOUT — mosaic (audience, proof, modules)
   -------------------------------------------------------------------------- */

.lp-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--lp-gap);
}

/* Proof cards carry a badge, a title, a paragraph and a link, so they need more
   horizontal room before they start to read as a column of fragments. */
.lp-mosaic--proof { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.lp-mosaic--modules { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.lp-persona {
  display: grid;
  gap: 12px;
  padding: clamp(20px, 2.2vw, 26px);
  border: var(--lp-hairline);
  border-radius: var(--lp-radius);
  background: var(--lp-raised);
}

.lp-persona-head { display: grid; gap: 3px; }
.lp-persona-role { margin: 0; font-size: 1.02rem; font-weight: 760; line-height: 1.3; }
.lp-persona-name { margin: 0; color: var(--silver); font-size: 0.82rem; }

.lp-persona-state {
  padding: 14px 15px;
  border: var(--lp-hairline);
  border-radius: 13px;
  background: color-mix(in srgb, var(--ink) 26%, transparent);
}
.lp-persona-state p { margin: 0; color: var(--silver); font-size: 0.89rem; }
.lp-persona-state-label {
  margin: 0 0 6px !important;
  font-size: 0.7rem !important;
  font-weight: 780;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.lp-persona-state--before { border-color: color-mix(in srgb, var(--lp-no) 26%, transparent); }
.lp-persona-state--before .lp-persona-state-label { color: var(--lp-no) !important; }
.lp-persona-state--after { border-color: color-mix(in srgb, var(--lp-yes) 30%, transparent); }
.lp-persona-state--after .lp-persona-state-label { color: var(--lp-yes) !important; }

.lp-proof-card {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: clamp(20px, 2.2vw, 26px);
  border: var(--lp-hairline);
  border-radius: var(--lp-radius);
  background: color-mix(in srgb, var(--ink) 30%, transparent);
}
.lp-proof-title { margin: 0; font-size: 1.05rem; font-weight: 760; line-height: 1.32; }
.lp-proof-card p { margin: 0; color: var(--silver); font-size: 0.89rem; }
.lp-proof-link {
  justify-self: start;
  margin-top: 4px;
  color: var(--cyan);
  font-weight: 740;
  font-size: 0.86rem;
  text-decoration: none;
}
.lp-proof-link::after { content: " →"; }

.lp-proof-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: clamp(22px, 2.6vw, 32px);
  padding-top: 20px;
  border-top: var(--lp-hairline);
}
.lp-proof-foot p { margin: 0; max-width: 62ch; color: var(--silver); font-size: 0.88rem; }
.lp-proof-foot a { color: var(--cyan); font-weight: 700; text-decoration: none; }
.lp-proof-foot a:hover { text-decoration: underline; }
.lp-proof-foot .lp-button--ghost { text-decoration: none; }
.lp-proof-foot .lp-button--ghost:hover { text-decoration: none; }

.lp-module {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: clamp(18px, 2vw, 24px);
  border-top: 2px solid color-mix(in srgb, var(--violet) 46%, transparent);
  background: color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: 0 0 var(--lp-radius) var(--lp-radius);
}
.lp-module h3 { margin: 0; font-size: 1.04rem; font-weight: 760; }
.lp-module p { margin: 0; color: var(--silver); font-size: 0.89rem; }

/* --------------------------------------------------------------------------
   LAYOUT — compare (qualification, before/after)
   -------------------------------------------------------------------------- */

.lp-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--lp-gap);
}

.lp-compare-col {
  padding: clamp(20px, 2.4vw, 28px);
  border: var(--lp-hairline);
  border-radius: var(--lp-radius);
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}

/* Both columns carry equal weight. A greyed-out "not for you" column would be
   status theatre, which the ethical-choice gate rejects. */
.lp-compare-col--yes { border-color: color-mix(in srgb, var(--lp-yes) 32%, transparent); }
.lp-compare-col--no { border-color: color-mix(in srgb, var(--lp-no) 30%, transparent); }

.lp-compare-title { margin: 0 0 16px; font-size: 1.08rem; font-weight: 780; }
.lp-compare-col--yes .lp-compare-title { color: var(--lp-yes); }
.lp-compare-col--no .lp-compare-title { color: var(--lp-no); }

.lp-criteria { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.lp-criteria li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  color: color-mix(in srgb, var(--paper) 82%, var(--silver));
  font-size: 0.92rem;
  line-height: 1.5;
}
.lp-criteria-glyph {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--paper) 8%, transparent);
  font-size: 0.72rem;
  font-weight: 800;
}
.lp-compare-col--yes .lp-criteria-glyph,
.lp-scope-col--in .lp-criteria-glyph {
  color: var(--lp-yes);
  background: color-mix(in srgb, var(--lp-yes) 13%, transparent);
}
.lp-compare-col--no .lp-criteria-glyph,
.lp-scope-col--out .lp-criteria-glyph {
  color: var(--lp-no);
  background: color-mix(in srgb, var(--lp-no) 13%, transparent);
}
.lp-scope-col--dep .lp-criteria-glyph {
  color: var(--lavender);
  background: color-mix(in srgb, var(--violet) 18%, transparent);
}

/* Before/after axes — a real table on wide screens, stacked pairs on narrow.
   The axis name owns both cells, which is what makes it a comparison. */
.lp-axes { display: grid; gap: 2px; background: var(--line); border: var(--lp-hairline); border-radius: var(--lp-radius); overflow: hidden; }

.lp-axes-legend {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2px;
  background: var(--line);
}
.lp-axes-legend span {
  padding: 12px 18px;
  background: color-mix(in srgb, var(--navy) 72%, transparent);
  color: var(--silver);
  font-size: 0.72rem;
  font-weight: 780;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.lp-axes-legend span:first-child { grid-column: 2; }

.lp-axis {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 2px;
  background: var(--line);
}

.lp-axis-name,
.lp-axis-cell {
  margin: 0;
  padding: clamp(14px, 1.8vw, 20px) clamp(14px, 1.8vw, 20px);
  background: color-mix(in srgb, var(--ink) 40%, transparent);
}

.lp-axis-name {
  color: var(--paper);
  font-weight: 760;
  font-size: 0.92rem;
  background: color-mix(in srgb, var(--navy) 60%, transparent);
}

.lp-axis-cell p { margin: 0; font-size: 0.9rem; line-height: 1.5; }
.lp-axis-cell--before p { color: var(--silver); }
.lp-axis-cell--after p { color: color-mix(in srgb, var(--paper) 90%, var(--cyan)); }
.lp-axis-cell-label { display: none; }

/* --------------------------------------------------------------------------
   LAYOUT — editorial (proposition, transformation)
   -------------------------------------------------------------------------- */

.lp-editorial {
  display: grid;
  --lp-zig-copy: minmax(0, 1.25fr);
  --lp-zig-flank: minmax(260px, 0.75fr);
  gap: clamp(24px, 3.6vw, 52px);
  align-items: start;
}

/* One column when the page declares no boundary and no mechanism steps: an
   editorial grid with an empty gutter reads as broken, not as sparse. Such a
   page also drops ``lp-zig`` — there is no flank to trade places with, so the
   section keeps the flow flag and mirrors only its heading block. */
.lp-editorial--single { grid-template-columns: minmax(0, 1fr); }

.lp-editorial-body { min-width: 0; }
.lp-editorial-body .lp-prose { font-size: clamp(1.04rem, 1.5vw, 1.22rem); }

.lp-editorial-aside { display: grid; gap: 16px; min-width: 0; }

.lp-boundary {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 18px 20px;
  border-left: 3px solid var(--cyan);
  border-radius: 0 var(--lp-radius) var(--lp-radius) 0;
  background: color-mix(in srgb, var(--cyan) 7%, transparent);
  color: color-mix(in srgb, var(--paper) 80%, var(--silver));
  font-size: 0.92rem;
  line-height: 1.6;
}

.lp-boundary p { margin: 0; }

.lp-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lp-step {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 13px;
  align-items: center;
  padding: 13px 15px;
  border: var(--lp-hairline);
  border-radius: 13px;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--paper) 86%, var(--silver));
}

/* Transformation — the page's pivot, set large and alone. */
.lp-shift {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(14px, 2.4vw, 32px);
  margin-bottom: clamp(22px, 2.6vw, 32px);
}

.lp-shift-state {
  margin: 0;
  padding: clamp(18px, 2.2vw, 26px);
  border-radius: var(--lp-radius);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  line-height: 1.22;
  text-wrap: balance;
}

.lp-shift-state--from {
  border: 1px solid color-mix(in srgb, var(--lp-no) 26%, transparent);
  background: color-mix(in srgb, var(--lp-no) 6%, transparent);
  color: color-mix(in srgb, var(--paper) 72%, var(--silver));
  text-align: right;
}

.lp-shift-state--to {
  border: 1px solid color-mix(in srgb, var(--lp-yes) 32%, transparent);
  background: color-mix(in srgb, var(--lp-yes) 7%, transparent);
  color: var(--paper);
}

.lp-shift-arrow { margin: 0; color: var(--cyan); font-size: clamp(1.5rem, 3vw, 2.4rem); }

/* --------------------------------------------------------------------------
   LAYOUT — matrix (value, scope, guarantee)
   -------------------------------------------------------------------------- */

.lp-matrix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  background: var(--line);
  border: var(--lp-hairline);
  border-radius: var(--lp-radius);
  overflow: hidden;
}

.lp-matrix-cell,
.lp-pledge,
.lp-scope-col {
  padding: clamp(20px, 2.4vw, 28px);
  background: color-mix(in srgb, var(--ink) 38%, transparent);
}

.lp-matrix-cell h3,
.lp-pledge h3 { margin: 0 0 9px; font-size: 1.05rem; font-weight: 760; line-height: 1.32; }
.lp-matrix-cell p,
.lp-pledge p { margin: 0; color: var(--silver); font-size: 0.9rem; }

.lp-tag {
  margin: 0 0 10px;
  color: var(--cyan);
  font-size: 0.7rem;
  font-weight: 780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-matrix--scope,
.lp-matrix--guarantee { border-radius: var(--lp-radius); }

.lp-scope-title { margin: 0 0 15px; font-size: 1.02rem; font-weight: 780; }
.lp-scope-col--in .lp-scope-title { color: var(--lp-yes); }
.lp-scope-col--out .lp-scope-title { color: var(--lp-no); }
.lp-scope-col--dep .lp-scope-title { color: var(--lavender); }

.lp-exclusions {
  margin-top: clamp(18px, 2.2vw, 26px);
  padding: clamp(18px, 2.2vw, 24px);
  border: 1px solid color-mix(in srgb, var(--warning) 26%, transparent);
  border-radius: var(--lp-radius);
  background: color-mix(in srgb, var(--warning) 5%, transparent);
}

.lp-exclusions-title {
  margin: 0 0 12px;
  color: var(--warning);
  font-size: 0.74rem;
  font-weight: 780;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.lp-exclusions ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.lp-exclusions li { color: var(--silver); font-size: 0.9rem; }

.lp-exclusions-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--warning) 20%, transparent);
  color: var(--silver);
  font-size: 0.84rem;
}
.lp-exclusions-foot a { color: var(--cyan); font-weight: 700; text-decoration: none; }
.lp-exclusions-foot a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   LAYOUT — console (product manifest, benchmark readout)
   -------------------------------------------------------------------------- */

.lp-console {
  border: var(--lp-hairline-strong);
  border-radius: var(--lp-radius);
  background: color-mix(in srgb, var(--ink) 52%, transparent);
  overflow: hidden;
}

.lp-manifest { margin: 0; padding: 0; list-style: none; }

.lp-manifest-row {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2.2vw, 26px);
  border-bottom: var(--lp-hairline);
}
.lp-manifest-row:last-child { border-bottom: 0; }

.lp-manifest-index {
  color: var(--cyan);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  font-weight: 700;
}

.lp-manifest-name { margin: 0 0 5px; font-size: 1.02rem; font-weight: 760; }
.lp-manifest-body { margin: 0; color: var(--silver); font-size: 0.9rem; }

.lp-manifest-foot {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2.2vw, 26px);
  border-top: var(--lp-hairline-strong);
  background: color-mix(in srgb, var(--navy) 56%, transparent);
  color: color-mix(in srgb, var(--paper) 84%, var(--silver));
  font-size: 0.9rem;
}
.lp-manifest-foot-label {
  color: var(--cyan);
  font-size: 0.7rem;
  font-weight: 780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Authored flank-first, like the canvas: the median readout is the figure and
   the facts beside it are the copy. */
.lp-console--benchmark {
  display: grid;
  --lp-zig-copy: minmax(0, 1fr);
  --lp-zig-flank: minmax(200px, 0.6fr);
  align-items: center;
  gap: 1px;
  background: var(--line);
}

.lp-readout {
  padding: clamp(20px, 2.6vw, 30px);
  background: color-mix(in srgb, var(--ink) 56%, transparent);
  text-align: center;
}
.lp-readout-value {
  margin: 0;
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lp-readout-unit { font-size: 0.42em; letter-spacing: 0.02em; }
.lp-readout-label {
  margin: 8px 0 0;
  color: var(--silver);
  font-size: 0.74rem;
  font-weight: 760;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.lp-readout-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
}
.lp-readout-facts > div { padding: 18px 20px; background: color-mix(in srgb, var(--ink) 44%, transparent); }
.lp-readout-facts dt {
  color: var(--silver);
  font-size: 0.7rem;
  font-weight: 760;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.lp-readout-facts dd {
  margin: 6px 0 0;
  font-size: 1.02rem;
  font-weight: 740;
  font-variant-numeric: tabular-nums;
}

.lp-reservation {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--warning);
  background: color-mix(in srgb, var(--warning) 6%, transparent);
  color: var(--silver);
  font-size: 0.88rem;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   LAYOUT — results ledger with typed status
   Each status has its own colour AND its own label. The evidence rule is that
   they must never share an identical treatment, because a target rendered like
   an observation is a false claim made in CSS.
   -------------------------------------------------------------------------- */

.lp-results { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--lp-gap); }

.lp-result {
  display: grid;
  grid-template-columns: minmax(160px, 0.32fr) minmax(0, 1fr);
  gap: 6px clamp(16px, 2.4vw, 30px);
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 24px);
  border: var(--lp-hairline);
  border-left-width: 3px;
  border-radius: var(--lp-radius);
  background: color-mix(in srgb, var(--ink) 30%, transparent);
}

.lp-result-status {
  grid-row: span 2;
  align-self: start;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.lp-result-label { margin: 0; font-size: 1.02rem; font-weight: 740; line-height: 1.4; }
.lp-result-basis { margin: 0; color: var(--silver); font-size: 0.86rem; }

.lp-result--observed { border-left-color: var(--cyan); }
.lp-result--observed .lp-result-status { color: var(--cyan); }
.lp-result--target { border-left-color: var(--lavender); }
.lp-result--target .lp-result-status { color: var(--lavender); }
.lp-result--estimate { border-left-color: var(--warning); }
.lp-result--estimate .lp-result-status { color: var(--warning); }
.lp-result--example { border-left-color: var(--silver); }
.lp-result--example .lp-result-status { color: var(--silver); }

/* --------------------------------------------------------------------------
   LAYOUT — timeline (phases)
   -------------------------------------------------------------------------- */

.lp-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 8px;
  list-style: none;
  display: grid;
  gap: clamp(16px, 2vw, 24px);
}

.lp-timeline::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(var(--violet), var(--cyan));
}

.lp-phase {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: clamp(14px, 2vw, 24px);
  align-items: start;
}

.lp-phase-marker {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: 0;
  border-radius: 50%;
  border: 2px solid var(--violet);
  background: var(--ink);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--violet) 12%, transparent);
}

.lp-phase-index { color: var(--paper); font-size: 0.82rem; font-weight: 820; }

.lp-phase-body {
  padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 24px);
  border: var(--lp-hairline);
  border-radius: var(--lp-radius);
  background: color-mix(in srgb, var(--ink) 28%, transparent);
}

.lp-phase-name { margin: 0 0 8px; font-size: 1.06rem; font-weight: 760; }
.lp-phase-body > p { margin: 0; color: var(--silver); font-size: 0.92rem; }

.lp-phase-gate {
  display: grid;
  gap: 4px;
  margin: 14px 0 0 !important;
  padding-top: 13px;
  border-top: 1px dashed var(--line-strong);
  color: color-mix(in srgb, var(--paper) 86%, var(--silver)) !important;
  font-size: 0.88rem !important;
}
.lp-phase-gate-label {
  color: var(--cyan);
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   LAYOUT — canvas (intersection)
   -------------------------------------------------------------------------- */

/* The figure is the flank here and the seams are the copy, so this block is
   authored flank-first — the mirror moves the figure, not the prose, and the
   flow flag still means "the text sits on this side". */
.lp-canvas {
  display: grid;
  --lp-zig-copy: minmax(0, 1.15fr);
  --lp-zig-flank: minmax(260px, 0.85fr);
  gap: clamp(24px, 3.6vw, 48px);
  align-items: center;
}

.lp-canvas-figure { margin: 0; display: grid; gap: 18px; justify-items: center; }

.lp-rings { width: min(100%, 340px); height: auto; }

.lp-ring { fill: none; stroke-width: 1.4; opacity: 0.85; }
.lp-ring--1 { stroke: var(--violet); }
.lp-ring--2 { stroke: var(--cyan); }
.lp-ring--3 { stroke: var(--lavender); }
.lp-ring--4 { stroke: color-mix(in srgb, var(--paper) 60%, transparent); }
.lp-ring-core { fill: var(--cyan); stroke: none; }

.lp-axis-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.lp-axis-chip {
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}
.lp-axis-chip--1 { border-color: color-mix(in srgb, var(--violet) 52%, transparent); }
.lp-axis-chip--2 { border-color: color-mix(in srgb, var(--cyan) 52%, transparent); }
.lp-axis-chip--3 { border-color: color-mix(in srgb, var(--lavender) 52%, transparent); }
.lp-axis-chip--4 { border-color: color-mix(in srgb, var(--paper) 42%, transparent); }

.lp-seams { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }

.lp-seam {
  display: grid;
  gap: 6px;
  padding: clamp(16px, 2vw, 20px);
  border: var(--lp-hairline);
  border-radius: var(--lp-radius);
  background: color-mix(in srgb, var(--ink) 34%, transparent);
  color: color-mix(in srgb, var(--paper) 86%, var(--silver));
  font-size: 0.93rem;
  line-height: 1.55;
}

.lp-seam-label {
  color: var(--cyan);
  font-size: 0.68rem;
  font-weight: 780;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   LAYOUT — form
   -------------------------------------------------------------------------- */

.lp-form-shell { max-width: 860px; margin-inline: auto; }

/* --------------------------------------------------------------------------
   Sticky in-page navigation
   -------------------------------------------------------------------------- */

.lp-nav {
  position: sticky;
  top: 72px;
  z-index: 20;
  border-bottom: var(--lp-hairline);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  backdrop-filter: blur(14px);
}

.lp-nav-scroll {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-block: 8px;
}
.lp-nav-scroll::-webkit-scrollbar { display: none; }

.lp-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 10px;
  color: var(--silver);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.lp-nav a:hover { color: var(--paper); background: color-mix(in srgb, var(--paper) 8%, transparent); }
.lp-nav a[aria-current="true"] { color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); }

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.lp-page :focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .lp-page *,
  .lp-page *::before,
  .lp-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .lp-button:hover,
  .lp-node:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Light theme — the surfaces need real values, not inherited transparency
   -------------------------------------------------------------------------- */

html[data-theme="light"] .lp-page {
  --lp-inset: color-mix(in srgb, var(--navy) 58%, transparent);
  --lp-accent: linear-gradient(
    140deg,
    color-mix(in srgb, var(--violet) 12%, transparent),
    color-mix(in srgb, var(--violet-2) 8%, transparent) 58%,
    transparent
  );
}

html[data-theme="light"] .lp-route,
html[data-theme="light"] .lp-chain-node,
html[data-theme="light"] .lp-node,
html[data-theme="light"] .lp-proof-card,
html[data-theme="light"] .lp-compare-col,
html[data-theme="light"] .lp-step,
html[data-theme="light"] .lp-protocol-step,
html[data-theme="light"] .lp-phase-body,
html[data-theme="light"] .lp-seam,
html[data-theme="light"] .lp-module,
html[data-theme="light"] .lp-persona-state {
  background: color-mix(in srgb, var(--glass) 72%, transparent);
}

html[data-theme="light"] .lp-matrix-cell,
html[data-theme="light"] .lp-pledge,
html[data-theme="light"] .lp-scope-col,
html[data-theme="light"] .lp-axis-name,
html[data-theme="light"] .lp-axis-cell,
html[data-theme="light"] .lp-console,
html[data-theme="light"] .lp-readout,
html[data-theme="light"] .lp-readout-facts > div,
html[data-theme="light"] .lp-manifest-foot,
html[data-theme="light"] .lp-result {
  background: var(--glass);
}

html[data-theme="light"] .lp-phase-marker { background: var(--glass); }
html[data-theme="light"] .lp-axes-legend span { background: color-mix(in srgb, var(--navy) 70%, transparent); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  /* One column, and the zigzag stops existing rather than becoming a vertical
     one: both roles return to auto placement, so every block stacks in the
     order it was authored — copy first everywhere except the two figure-led
     ones, which keep the figure above their facts as they always did. */
  .lp-zig,
  .lp-flow--mirrored .lp-zig { grid-template-columns: 1fr; }

  .lp-flow--forward .lp-zig > .lp-copy,
  .lp-flow--forward .lp-zig > .lp-flank,
  .lp-flow--mirrored .lp-zig > .lp-copy,
  .lp-flow--mirrored .lp-zig > .lp-flank { grid-column: auto; grid-row: auto; }

  .lp-hero-hook { max-width: none; }
  .lp-head { align-items: start; }
  .lp-shift { grid-template-columns: 1fr; }
  .lp-shift-state--from { text-align: left; }
  .lp-shift-arrow { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 760px) {
  .lp-nav { top: 64px; }

  /* The axis table reflows into stacked pairs. A two-column comparison table at
     360px is unreadable, and horizontal scrolling breaks the pairing that makes
     it a comparison at all. */
  .lp-axes-legend { display: none; }
  .lp-axis { grid-template-columns: 1fr; }
  .lp-axis-cell-label {
    display: block;
    margin: 0 0 5px;
    color: var(--silver);
    font-size: 0.68rem;
    font-weight: 780;
    letter-spacing: 0.055em;
    text-transform: uppercase;
  }
  .lp-axis-cell--after .lp-axis-cell-label { color: var(--cyan); }

  .lp-result { grid-template-columns: 1fr; }
  .lp-result-status { grid-row: auto; }

  .lp-ledger-row { grid-template-columns: 38px 1fr; }
  .lp-manifest-row { grid-template-columns: 40px 1fr; }
  .lp-phase { grid-template-columns: 34px 1fr; }
  .lp-timeline::before { left: 17px; }
  .lp-phase-marker { width: 26px; height: 26px; }
}

@media print {
  .lp-nav { display: none; }
  .lp-section { padding-block: 24px; break-inside: avoid; }
  .lp-surface--raised > .lp-inner { box-shadow: none; }
}