/* Design Fleet landing — composed on the shared SPEC SHEET tokens
   (site.css). Direction: the technical-paper register the client chose —
   near-white ruled paper, hairline blueprint frames with crosshair corners,
   mono bracket annotations carrying only real values, one hot signal-orange
   accent, ASCII debris as texture. Verdicts stay semantic: --pass green for
   exit 0, coral-red for violations — orange is brand and action, never a
   verdict. Dark mode is the blueprint at night.

   MOBILE-FIRST. Lint-clean by construction: spacing on the
   4/8/12/16/24/32/48/64 scale, OKLCH only, tinted shadows, no gradient
   text, no overshoot easing, reduced motion honored via site.css. */

/* ---- skip link: invisible until it matters ----------------------------------- */

.lp-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 13.5px;
  font-weight: 560;
  text-decoration: none;
  transform: translateY(-64px);
}
.lp-skip:focus-visible { transform: none; }

/* ---- the announcement rail --------------------------------------------------- */

.lp-banner {
  display: block;
  padding: 8px 16px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--on-signal);
  background: var(--signal);
  text-decoration: none;
}
.lp-banner strong { color: inherit; font-weight: 700; }
.lp-banner:hover { filter: brightness(1.06); }
.lp-banner .ic { stroke-width: 2.5; }

/* ---- buttons ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 14.5px;
  font-weight: 560;
  text-decoration: none;
  border: 0;
  border-radius: 10px;
  padding: 12px 24px;
  min-height: 44px;
  cursor: pointer;
  transition: filter 150ms ease, background-color 150ms ease, color 150ms ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  color: var(--on-signal);
  background: var(--signal);
  box-shadow: 0 1px 2px oklch(35% 0.1 42 / 0.2), 0 4px 12px oklch(35% 0.1 42 / 0.12);
}
.btn-primary:hover { filter: brightness(1.08); }

.btn-quiet {
  color: var(--ink);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--panel-edge-strong);
}
.btn-quiet:hover { box-shadow: inset 0 0 0 1px var(--ink); }

.btn-ghost {
  color: var(--muted);
  background: none;
  padding: 12px 8px;
}
.btn-ghost:hover { color: var(--ink); }

/* the header CTA slots into the shared chrome; hidden on small screens
   where the install row in the hero is one swipe away */
.btn-header { display: none; }
@media (min-width: 700px) {
  .btn-header { display: inline-flex; font-size: 13px; padding: 8px 16px; min-height: 40px; }
}

/* ---- shared annotation vocabulary --------------------------------------------- */

/* mono kickers — bracket labels carry real values only */
.lp-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}

/* hairline frame with crosshair corners — the blueprint grid made local */
.lp-frame {
  position: relative;
  border: 1px solid var(--grid-line);
  background: var(--panel);
}
.lp-frame::before,
.lp-frame::after {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1;
  color: var(--panel-edge-strong);
  pointer-events: none;
}
.lp-frame::before { content: "+"; top: -7px; left: -5px; }
.lp-frame::after { content: "+"; top: -7px; right: -5px; }

/* ASCII debris — decorative, faint, real characters. Desktop-only air:
   on small screens it crowds the CTAs instead of framing them. */
.lp-ascii {
  display: none;
  position: absolute;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--panel-edge-strong);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  white-space: pre;
  overflow: hidden;
  max-width: 100%;
}
@media (min-width: 700px) {
  .lp-ascii { display: block; }
}

/* mono margin tags pinned to the hero corners */
.lp-tag {
  display: none;
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--faint);
}
@media (min-width: 1024px) {
  .lp-tag { display: block; }
  .lp-tag-tl { top: 48px; left: 32px; }
  .lp-tag-tr { top: 48px; right: 32px; }
  .lp-tag-bl { bottom: 32px; left: 32px; }
  .lp-tag-br { bottom: 32px; right: 32px; }
}

/* ---- hero: centered, annotated ------------------------------------------------ */

.lp-hero {
  position: relative;
  padding-top: 48px;
  padding-bottom: 24px;
  overflow: hidden;
}
.lp-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.lp-ascii-hero { left: 50%; bottom: 8px; transform: translateX(-50%); }

.lp-hero h1 { margin-left: auto; margin-right: auto; }

.lp-chip { margin: 0 0 24px; }
.lp-chip a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  padding: 8px 16px;
  transition: color 150ms ease, border-color 150ms ease;
}
.lp-chip a:hover { color: var(--ink); border-color: var(--panel-edge-strong); }

.lp-sub {
  margin: 16px 0 32px;
  max-width: 56ch;
  font-size: clamp(1rem, 0.5vw + 0.85rem, 1.125rem);
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}
.lp-sub strong { color: var(--ink); }

.lp-hero .install { width: auto; max-width: 100%; }

.lp-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin: 24px 0 0;
}

/* ---- the pipeline: screen → contract → verdict --------------------------------- */

.lp-tight { padding-top: 24px; }

.lp-pipe {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 24px 16px;
}
.lp-pipe-cell { margin: 0; min-width: 0; }
.lp-pipe-cell .lp-kicker { margin: 0 0 12px; }
.lp-pipe-arrow {
  font-family: var(--font-mono);
  color: var(--signal);
  font-size: 16px;
  align-self: center;
  justify-self: center;
  transform: rotate(90deg);
}

.lp-code {
  margin: 0;
  padding: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  overflow-x: auto;
  color: var(--muted);
  background: var(--stage-bg);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
}
.lp-h { color: var(--signal-strong); font-weight: 600; }
.lp-dim { color: var(--faint); }
.lp-bad { color: var(--danger); }
.lp-good { color: var(--pass); }

/* the schematic screen — placeholders labeled in mono, explicitly a wireframe */
.lp-wire {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 12px;
  background: var(--stage-bg);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  min-height: 176px;
  justify-content: center;
}
.lp-wire-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-wire-chip {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 4px;
  padding: 4px 8px;
  white-space: nowrap;
}
.lp-wire-bar {
  height: 10px;
  border-radius: 5px;
  background: var(--panel-raised);
  flex: none;
}
.lp-wire-bar.w1 { width: 32px; }
.lp-wire-bar.w2 { width: 64px; }
.lp-wire-bar.w3 { width: 128px; }
.lp-wire-btn {
  width: 48px;
  height: 16px;
  border-radius: 5px;
  background: var(--signal-soft);
  border: 1px solid var(--signal-dim);
  flex: none;
}

@media (min-width: 900px) {
  .lp-pipe {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 16px;
    padding: 24px;
  }
  .lp-pipe-arrow { transform: none; }
}

/* ---- the facts strip ------------------------------------------------------------ */

.lp-facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 16px 0 0;
  padding: 0;
}
.lp-facts li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--grid-line);
}
.lp-facts li:nth-child(-n+2) { border-top: 0; }
.lp-facts li:nth-child(2n) { border-left: 1px solid var(--grid-line); }
.lp-facts b {
  font-size: 24px;
  font-weight: 640;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 700px) {
  .lp-facts { grid-template-columns: repeat(4, 1fr); }
  .lp-facts li { border-top: 0; border-left: 1px solid var(--grid-line); justify-content: center; }
  .lp-facts li:first-child { border-left: 0; }
}

/* ---- statement sections: centered heads ----------------------------------------- */

.section .title { text-align: center; margin-left: auto; margin-right: auto; }
.section .title em { font-style: normal; color: var(--signal); }
.section .lede { text-align: center; margin-left: auto; margin-right: auto; }

/* ---- the comparison: one screen, two governments -------------------------------- */

.lp-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.lp-compare-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lp-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 999px;
  padding: 4px;
}
.lp-toggle button {
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 520;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 40px;
  cursor: pointer;
  transition: color 150ms ease-out, background-color 150ms ease-out;
}
.lp-toggle button:hover { color: var(--ink); }
.lp-toggle button.active { color: var(--signal-strong); background: var(--signal-soft); }

.lp-verdict {
  font-family: var(--font-mono);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}
.lp-verdict .code { padding: 4px 12px; border-radius: 6px; font-weight: 500; }
.lp-verdict.fail .code { color: var(--danger); background: var(--danger-soft); }
.lp-verdict.pass .code { color: var(--pass); background: var(--pass-soft); }

.lp-screen {
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow-pop);
}

.lp-window {
  margin: 0;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.lp-window-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--panel-edge);
  background: var(--panel-raised);
}
.lp-window-bar i { width: 8px; height: 8px; border-radius: 4px; background: var(--panel-edge-strong); }
.lp-window-bar span {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
}
.lp-window-body {
  margin: 0;
  padding: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  overflow-x: auto;
  color: var(--muted);
}

/* the governed screen overlays the autopilot one, clipped at --pos —
   dragging the divider is 1:1 (clip-path comparison pattern) */
.lp-view { display: grid; position: relative; --pos: 0%; }
.lp-view > .demo { grid-area: 1 / 1; pointer-events: none; }
.lp-view > .demo-after { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.lp-view.gliding { transition: --pos 300ms cubic-bezier(0.77, 0, 0.175, 1); }

.lp-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 48px; /* generous hit area; the visible line is the ::before */
  margin-left: -24px;
  cursor: ew-resize;
  touch-action: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
}
.lp-divider::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--signal);
}
.lp-grip {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--panel-pop);
  border: 1px solid var(--panel-edge-strong);
  box-shadow: var(--shadow-pop);
}
.lp-grip i { width: 2px; height: 12px; border-radius: 1px; background: var(--muted); }
.lp-divider:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* — the AFTER: the same screen, fleet-governed (lint-clean). The governed
   demo is its own little product with its own (green) brand — a screen the
   fleet built, not this site's palette. — */
.demo-after {
  background: oklch(98% 0.004 80);
  color: oklch(25% 0.01 80);
  font-family: var(--font-ui);
  padding: 24px;
  min-height: 360px;
}
.demo-after h4 { margin: 0 0 4px; font-size: 22px; letter-spacing: -0.01em; }
.demo-after p.tag { margin: 0 0 24px; color: oklch(46% 0.01 80); font-size: 14px; }
.demo-after .cards { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.demo-after .card {
  background: oklch(99.5% 0.002 80);
  border: 1px solid oklch(90% 0.005 80 / 0.8);
  border-radius: 12px;
  padding: 16px;
  box-shadow:
    0 1px 2px oklch(30% 0.01 80 / 0.05),
    0 6px 16px oklch(30% 0.01 80 / 0.07);
}
.demo-after .card.hot {
  border-color: oklch(52% 0.135 152 / 0.5);
  box-shadow:
    0 1px 2px oklch(30% 0.01 80 / 0.06),
    0 12px 28px oklch(30% 0.01 80 / 0.12);
}
.demo-after .card .flag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(40% 0.12 152);
  background: oklch(52% 0.135 152 / 0.12);
  border-radius: 6px;
  padding: 4px 8px;
  margin: 0 0 8px;
}
.demo-after .card h5 { margin: 0 0 4px; font-size: 15px; }
.demo-after .card p { margin: 0 0 12px; font-size: 12px; color: oklch(46% 0.01 80); }
.demo-after .card .price {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 12px;
  font-variant-numeric: tabular-nums;
}
.demo-after .card .price small { font-size: 12px; font-weight: 400; color: oklch(46% 0.01 80); }
.demo-after .card button {
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 520;
  color: oklch(98.5% 0.01 152);
  background: oklch(48% 0.13 152);
  cursor: pointer;
}
.demo-after .card button.quiet {
  color: oklch(30% 0.01 80);
  background: oklch(94% 0.005 80);
}
.demo-after .fine { margin: 24px 0 0; font-size: 11px; color: oklch(52% 0.01 80); text-align: center; }

@media (min-width: 700px) {
  .demo-after .cards { grid-template-columns: repeat(3, 1fr); }
  .demo-after .card.hot { position: relative; top: -4px; }
}

/* the lint readout beside the screen */
.lp-lint {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  padding: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  overflow: auto;
  box-shadow: var(--shadow);
}
.lp-lint h3 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.lp-lint h3::before { content: "$ "; color: var(--signal); }
.lp-lint ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
/* author display:flex would override the hidden attribute's UA rule */
.lp-lint ul[hidden] { display: none; }
.lp-lint li { display: flex; gap: 8px; line-height: 1.5; }
.lp-lint li.judg { opacity: 0.92; }
.lp-lint .vid { flex: none; width: 24px; font-weight: 500; }
.lp-lint li.viol .vid { color: var(--danger); }
.lp-lint li.pass .vid { color: var(--pass); }
.lp-lint li span { color: var(--muted); }
.lp-lint .lint-legend { margin: 12px 0 0; font-size: 10px; color: var(--faint); }
.lp-lint .lint-legend .vid { color: var(--faint); width: auto; }
.lp-lint .verdict-line { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--panel-edge); }
.lp-lint .verdict-line.fail { color: var(--danger); }
.lp-lint .verdict-line.pass { color: var(--pass); }

/* lint lines cascade in on each flip */
.lp-lint.fresh li {
  animation: lp-lint-line 200ms ease-out both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
@keyframes lp-lint-line {
  from { opacity: 0; transform: translateY(4px); }
}

.lp-more { margin: 24px 0 0; font-size: 14px; color: var(--muted); max-width: 68ch; text-wrap: pretty; }

@media (min-width: 1024px) {
  .lp-compare { grid-template-columns: minmax(0, 1fr) 320px; }
  .lp-compare-head { grid-column: 1 / -1; }
}

/* ---- the proof bento -------------------------------------------------------------- */

.lp-bento {
  display: grid;
  grid-template-columns: 1fr;
  border: 1px solid var(--grid-line);
  background: var(--panel);
}
/* hairline seams are borders, not gaps — the spacing scale stays clean */
.lp-cell {
  padding: 24px;
  min-width: 0;
  border-top: 1px solid var(--grid-line);
}
.lp-cell:first-child { border-top: 0; }
.lp-cell .lp-kicker { margin: 0 0 16px; }

.lp-lead {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--muted);
  max-width: 64ch;
  text-wrap: pretty;
}
.lp-lead strong { color: var(--ink); font-weight: 620; }

.lp-big {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 1.5vw + 1rem, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin: 0 0 16px;
}

.lp-note { margin: 12px 0 0; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--faint); }

@media (min-width: 900px) {
  .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-cell-wide { grid-column: 1 / -1; }
  /* the cell order is wide, B, C, D, E, wide — C and E sit right of a seam */
  .lp-cell:nth-child(3),
  .lp-cell:nth-child(5) { border-left: 1px solid var(--grid-line); }
}

/* the benchmark bars — the fleet's pill carries its value, Firecrawl-style */
.lp-bars { display: flex; flex-direction: column; gap: 8px; }
.lp-bar { display: flex; align-items: center; gap: 8px; }
.lp-bar-label {
  flex: none;
  width: 64px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
}
.lp-bar-track {
  flex: 1;
  position: relative;
  height: 24px;
  border-radius: 12px;
  background: var(--stage-bg);
  display: block;
}
.lp-bar-fill {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  width: var(--w, 0%);
  min-width: 40px;
  border-radius: 12px;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 450ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
.lp-bar:nth-child(2) .lp-bar-fill { transition-delay: 140ms; }
.lp-bar:nth-child(3) .lp-bar-fill { transition-delay: 280ms; }
.lp-bar-fill i {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
}
.lp-bar-fill.good { background: var(--signal); }
.lp-bar-fill.good i { color: var(--on-signal); }
.lp-bar-fill.neutral { background: none; box-shadow: inset 0 0 0 1px var(--panel-edge-strong); }
.lp-bar-fill.neutral i { color: var(--muted); }
.js .lp-proof:not(.in) .lp-bar-fill { transform: scaleX(0); }

/* the admission ledger, as a latency-table register */
.lp-tabwrap { overflow-x: auto; }
.lp-ledgertab {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.lp-ledgertab th {
  text-align: left;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 8px 12px;
  border-bottom: 1px solid var(--panel-edge-strong);
}
.lp-ledgertab td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--panel-edge);
  color: var(--muted);
}
.lp-ledgertab tbody tr:last-child td { border-bottom: 0; }
.lp-ledgertab td:first-child { color: var(--ink); font-family: var(--font-ui); font-size: 13.5px; }
.lp-ledgertab .num { text-align: right; white-space: nowrap; }
.lp-ledgertab .delta { color: var(--signal-strong); font-weight: 600; }
.lp-ledgertab .lp-adm { color: var(--pass); }
.lp-ledgertab .lp-ret { color: var(--faint); }
.lp-ledgertab tr.retired td:first-child { text-decoration: line-through; text-decoration-color: var(--faint); color: var(--muted); }

/* ---- the fleet: a numbered loop inside one frame ---------------------------------- */

.lp-fleet {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
.lp-role {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
}
.lp-role + .lp-role { border-top: 1px solid var(--grid-line); }
.lp-role-side { background: var(--stage-bg); }

.lp-step {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--signal-strong);
}
.lp-role-body h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.01em; }
.lp-role-body h3 code { font-size: 15px; }
.lp-role-body p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 64ch; text-wrap: pretty; }

.lp-delta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lp-delta i {
  flex: none;
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--signal) calc(var(--w, 50%)), var(--panel-raised) calc(var(--w, 50%)));
}

@media (min-width: 900px) {
  .lp-role {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr) 176px;
    gap: 24px;
    align-items: center;
  }
  .lp-delta { justify-self: end; }
}

.lp-precedence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
.lp-precedence .tier {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
  padding: 8px 16px;
}
.lp-precedence .tier.top { color: var(--signal-strong); background: var(--signal-soft); border-color: transparent; }
.lp-precedence .gt { color: var(--faint); }
.lp-precedence .note { color: var(--faint); }

/* ---- edit-time hook ----------------------------------------------------------------- */

.lp-hook {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
.lp-hook > * { min-width: 0; }
.lp-hook-term .lp-window-body { background: var(--stage-bg); }
.lp-hook-points p { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 48ch; text-wrap: pretty; }
.lp-hook-points p strong { color: var(--ink); }
.lp-mono-line { font-family: var(--font-mono); font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }

@media (min-width: 1024px) {
  .lp-hook { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ---- end-cap -------------------------------------------------------------------------- */

.lp-end {
  position: relative;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid var(--grid-line);
}
.lp-ascii-end { left: 50%; top: 24px; transform: translateX(-50%); }
.lp-end-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
.lp-end .install { width: auto; max-width: 100%; padding-right: 16px; }
.lp-end .section-inner::before { display: none; }

/* the landing headline's accent phrase owns its line; the shared shell keeps
   em inline so "Docs." and "live." stay on one line on the other pages */
.lp-hero h1 em { display: block; }