/**
 * The landing page — the "Monolith" direction.
 *
 * Graphite and warm paper, one electric orange, square shoulders. Syne for the
 * display lines, IBM Plex for everything read and everything typed. Every
 * colour is a token from docs.css, so the light theme, the dark theme and the
 * diagrams follow without a second palette here; the only fixed colours are
 * the recordings band, which is a terminal in both themes.
 *
 * Depth comes from two places: an isometric stack in the hero that separates
 * as the page scrolls, and solid offset shadows on what can be clicked. Both
 * are CSS. The scroll-linked motion sits behind `@supports (animation-timeline)`
 * — a browser without it shows the stack assembled and still — and every bit
 * of motion stops under reduced motion.
 *
 * Status colours mean one thing everywhere on the page: green is what the gate
 * passed, amber is what waits for an answer, red is what it refused, and
 * orange is the gate itself.
 */

.landing { background: var(--bg); }
.landing main { overflow-x: clip; }
.landing [id] { scroll-margin-top: calc(var(--top-h) + 1rem); }

.ed-wrap {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

/* ── Type ────────────────────────────────────────────────────────────────── */

.ed-eyebrow,
.mx__eyebrow {
  margin: 0 0 var(--space-4);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.ed-eyebrow::before { content: "[ "; }
.ed-eyebrow::after { content: " ]"; }

.ed-h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--fg);
}

.ed-display {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.ed-muted { color: var(--fg-soft); }
.ed-head { max-width: 60rem; margin-bottom: var(--space-12); }
.ed-head .ed-muted { max-width: 48rem; }
.ed-head .ed-muted { margin: var(--space-6) 0 0; font-size: 1.05rem; line-height: 1.65; }
.ed-note { margin: var(--space-8) 0 0; max-width: 52rem; line-height: 1.65; }

.ed-link { font-weight: 600; color: var(--accent); }
.ed-link:hover { color: var(--accent-hover); }

.landing code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.05em 0.35em;
}
.landing pre code,
.landing .code code { background: none; border: 0; padding: 0; font-size: inherit; }

/* ── Bands ───────────────────────────────────────────────────────────────── */

.ed-band { padding: clamp(4.5rem, 3rem + 6vw, 8.5rem) 0; position: relative; }
.ed-band--paper { background: var(--bg-soft); border-block: 1px solid var(--line); }
.ed-band--paper code { background: var(--bg-raised); }

.ed-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.ed-split--wide { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); }
.ed-split__head { position: sticky; top: calc(var(--top-h) + 2rem); }
.ed-split__head .ed-muted { margin: var(--space-6) 0; line-height: 1.65; }
.ed-prose p { margin: 0 0 var(--space-4); font-size: 1.1rem; line-height: 1.75; color: var(--fg-soft); }
.ed-prose strong { color: var(--fg); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.ed-actions { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); align-items: center; margin: var(--space-8) 0 0; }

.ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font-weight: 600;
  font-size: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.ed-btn:hover { text-decoration: none; border-color: var(--fg); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--fg); }
.ed-btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.ed-btn--primary::after { content: "→"; }
.ed-btn--primary:hover { color: var(--on-brand); border-color: var(--brand); }
.ed-btn--light { background: var(--inverse-fg); border-color: var(--inverse-fg); color: var(--inverse-bg); }
.ed-btn--light:hover { color: var(--inverse-bg); border-color: var(--inverse-fg); box-shadow: 4px 4px 0 var(--brand); }
.ed-btn--ghost { border-color: color-mix(in srgb, var(--inverse-fg) 40%, transparent); color: var(--inverse-fg); }
.ed-btn--ghost:hover { color: var(--inverse-fg); border-color: var(--inverse-fg); box-shadow: 4px 4px 0 var(--brand); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.55rem;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.chip--ok { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.chip--wait { background: color-mix(in srgb, var(--amber) 16%, transparent); color: var(--amber); }
.chip--no { background: color-mix(in srgb, var(--red) 16%, transparent); color: var(--red); }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.mx {
  position: relative;
  padding: clamp(3.5rem, 2rem + 6vw, 7.5rem) 0 clamp(3rem, 2rem + 4vw, 6rem);
  overflow: hidden;
}
/* A faint drafting grid and one orange glow: the only background the page has. */
.mx::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000 40%, transparent);
  pointer-events: none;
}
.mx::after {
  content: "";
  position: absolute;
  top: -10rem;
  right: -14rem;
  width: 52rem;
  height: 52rem;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 20%, transparent), transparent 62%);
  pointer-events: none;
}

.mx__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}

.mx__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4.2rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.mx__title span { color: var(--brand-text); }

.mx__lede {
  margin: var(--space-8) 0 0;
  max-width: 34rem;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--fg-soft);
}

.ed-install { max-width: 30rem; margin-top: var(--space-8); }

/* The isometric stack. Four slabs, each a top face and two visible sides,
 * stacked along Z. The scroll timeline pulls them apart; without it, or under
 * reduced motion, they sit assembled. */
.mx__art { display: grid; place-items: center; min-height: 32rem; }
.iso { perspective: 2200px; }
.iso__stack {
  position: relative;
  width: 21rem;
  height: 21rem;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-42deg);
}
.iso__slab { position: absolute; inset: 0; transform-style: preserve-3d; }
.iso__slab--2 { transform: translateZ(3.4rem); }
.iso__slab--3 { transform: translateZ(6.8rem); }
.iso__slab--4 { transform: translateZ(10.2rem); }

.iso__top {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--fg-soft);
}
.iso__top span { color: var(--accent); font-weight: 600; }
/* Seen from above and to the right, two walls of each slab face the reader:
 * the front, which carries the layer's name, and the left. */
.iso__front,
.iso__side { position: absolute; }
.iso__front {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 1.1rem;
  transform-origin: 50% 100%;
  transform: rotateX(-90deg);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--fg);
  white-space: nowrap;
}
.iso__front span { color: var(--accent); font-weight: 600; }
.iso__side { left: 0; top: 0; width: 2.2rem; height: 100%; transform-origin: 0 50%; transform: rotateY(90deg); }

.iso__slab--1 .iso__top { background: var(--bg-soft); }
.iso__slab--1 .iso__front { background: color-mix(in srgb, var(--bg-soft) 86%, var(--fg)); }
.iso__slab--1 .iso__side { background: color-mix(in srgb, var(--bg-soft) 82%, #000); }
.iso__slab--2 .iso__top { background: var(--bg-raised); }
.iso__slab--2 .iso__front { background: color-mix(in srgb, var(--bg-raised) 86%, var(--fg)); }
.iso__slab--2 .iso__side { background: color-mix(in srgb, var(--bg-raised) 82%, #000); }
.iso__slab--3 .iso__top { background: color-mix(in srgb, var(--bg-raised) 88%, var(--fg)); color: var(--fg); }
.iso__slab--3 .iso__front { background: color-mix(in srgb, var(--bg-raised) 80%, var(--fg)); }
.iso__slab--3 .iso__side { background: color-mix(in srgb, var(--bg-raised) 76%, #000); }
.iso__slab--4 .iso__top { align-items: center; justify-content: center; background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-size: 1.15rem; font-weight: 600; }
.iso__slab--4 .iso__top span,
.iso__slab--4 .iso__front,
.iso__slab--4 .iso__front span { color: var(--on-brand); }
.iso__slab--4 .iso__front { background: color-mix(in srgb, var(--brand) 86%, #000); }
.iso__slab--4 .iso__side { background: color-mix(in srgb, var(--brand) 66%, #000); }

/* The stack answers the pointer, calmly: it leans a few degrees toward it
 * (eased in home.js) and its layers open a little while the pointer is over
 * the art. The legend below names each layer; pointing at an entry, or
 * focusing it, lights that layer and lifts it clear of the others. The
 * layers themselves never move under the pointer, so nothing flickers.
 * `translate` composes with the scroll animation's `transform`. */
.mx__art { grid-template-rows: 1fr auto; gap: var(--space-6); }
.iso__stack { transform: rotateX(calc(58deg + var(--tilt-x, 0deg))) rotateZ(calc(-42deg + var(--tilt-z, 0deg))); }
.iso__slab { translate: 0 0 0; transition: translate 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.iso__top { transition: box-shadow 0.4s, border-color 0.4s, filter 0.4s; }

.iso__keys { list-style: none; margin: 0; padding: 0; width: min(30rem, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.iso__key { position: relative; padding: 0.7rem 0.75rem; background: var(--bg); font-size: 0.8rem; font-weight: 600; color: var(--fg); cursor: default; outline-offset: -2px; transition: background 0.25s; }
.iso__key b { display: block; font-family: var(--mono); font-size: 0.7rem; color: var(--accent); }
.iso__key span {
  position: absolute; left: 0; right: 0; top: calc(100% + 0.6rem);
  width: min(30rem, 92vw); padding: 0.6rem 0.75rem;
  background: var(--bg-raised); border: 1px solid var(--line-strong); border-left: 3px solid var(--brand);
  font-size: var(--text-sm); font-weight: 400; line-height: 1.5; color: var(--fg-soft);
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  z-index: 2; pointer-events: none;
}
.iso__key--2 span { left: -100%; } .iso__key--3 span { left: -200%; } .iso__key--4 span { left: -300%; }
.iso__key:is(:hover, :focus) { background: var(--accent-soft); }
.iso__key:is(:hover, :focus) span { opacity: 1; visibility: visible; transform: none; }

@media (prefers-reduced-motion: no-preference) {
  .mx__art:hover .iso__slab--2 { translate: 0 0 0.8rem; }
  .mx__art:hover .iso__slab--3 { translate: 0 0 1.6rem; }
  .mx__art:hover .iso__slab--4 { translate: 0 0 2.4rem; }
  /* Pointing at a layer in the legend spreads the stack wide, in order, so
   * every layer is clear of the next; the named one lights up. */
  .mx__art:has(.iso__key:is(:hover, :focus)) .iso__slab--2 { translate: 0 0 2.2rem; }
  .mx__art:has(.iso__key:is(:hover, :focus)) .iso__slab--3 { translate: 0 0 4.4rem; }
  .mx__art:has(.iso__key:is(:hover, :focus)) .iso__slab--4 { translate: 0 0 6.6rem; }
}
.mx__art:has(.iso__key--1:is(:hover, :focus)) .iso__slab--1 .iso__top,
.mx__art:has(.iso__key--2:is(:hover, :focus)) .iso__slab--2 .iso__top,
.mx__art:has(.iso__key--3:is(:hover, :focus)) .iso__slab--3 .iso__top,
.mx__art:has(.iso__key--4:is(:hover, :focus)) .iso__slab--4 .iso__top {
  border-color: var(--brand);
  box-shadow: 0 0 0 1px var(--brand), 0 0 56px color-mix(in srgb, var(--brand) 40%, transparent);
}
.mx__art:has(.iso__key:is(:hover, :focus)) .iso__slab .iso__top { filter: brightness(0.7); }
.mx__art:has(.iso__key--1:is(:hover, :focus)) .iso__slab--1 .iso__top,
.mx__art:has(.iso__key--2:is(:hover, :focus)) .iso__slab--2 .iso__top,
.mx__art:has(.iso__key--3:is(:hover, :focus)) .iso__slab--3 .iso__top,
.mx__art:has(.iso__key--4:is(:hover, :focus)) .iso__slab--4 .iso__top { filter: none; }

/* The scrolling band of the pipeline's words. */
.band { overflow: hidden; border-block: 1px solid var(--line); padding: 1.1rem 0; }
.band__words {
  margin: 0;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 3.2rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: color-mix(in srgb, var(--fg) 12%, var(--bg));
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .iso__slab--2 { animation: iso-2 linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    .iso__slab--3 { animation: iso-3 linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    .iso__slab--4 { animation: iso-4 linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    .band__words { animation: band-slide linear both; animation-timeline: view(); }
    .mx::before { animation: grid-drift linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes iso-2 { from { transform: translateZ(2.2rem); } to { transform: translateZ(5rem); } }
@keyframes iso-3 { from { transform: translateZ(4.4rem); } to { transform: translateZ(10rem); } }
@keyframes iso-4 { from { transform: translateZ(6.6rem); } to { transform: translateZ(15rem); } }
@keyframes band-slide { from { transform: translateX(0); } to { transform: translateX(-38%); } }
@keyframes grid-drift { to { background-position: 0 240px; } }

/* ── Proof band ──────────────────────────────────────────────────────────── */

.pb { padding: clamp(3rem, 2rem + 3vw, 4.5rem) 0; }
.pb__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 3px solid var(--fg);
}
.pb__stats > div { padding: var(--space-6) var(--space-6) var(--space-6) 0; border-right: 1px solid var(--line); }
.pb__stats > div + div { padding-left: var(--space-6); }
.pb__stats > div:last-child { border-right: 0; }
.pb__stats dt {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.4rem, 1.7rem + 2.2vw, 3.5rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--fg);
}
.pb__stats > div:nth-child(3) dt { color: var(--brand-text); }
.pb__stats dd { margin: var(--space-3) 0 0; color: var(--fg-soft); line-height: 1.45; }

.pb__tool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-12);
  margin: var(--space-8) 0 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}
.pb__tool > div { display: flex; align-items: baseline; gap: var(--space-3); }
.pb__tool dt { font-family: var(--mono); font-weight: 600; font-size: 1.4rem; color: var(--accent); }
.pb__tool dd { margin: 0; color: var(--fg-soft); }

.pb__claims {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin: var(--space-6) 0 0;
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--fg-faint);
}
.pb__claims span::before { content: "■ "; color: var(--brand); }

/* ── The pipeline ────────────────────────────────────────────────────────── */

.pl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.pl__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 21rem;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.pl__n {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.8rem;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--line-strong);
}
.pl__card:nth-child(2) .pl__n { color: var(--fg-faint); }
.pl__card:nth-child(3) .pl__n { color: var(--fg-soft); }
.pl__card h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -0.02em; }
.pl__card p { margin: 0; flex: 1; color: var(--fg-soft); line-height: 1.6; }
.pl__card > code { align-self: flex-start; color: var(--accent); }
.pl__card--gate { border-top: 3px solid var(--brand); }
.pl__card--gate .pl__n { color: var(--brand-text); }

/* ── Journey: rising pillars ─────────────────────────────────────────────── */

.jn__switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 var(--space-12);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
}
.jn__switch button {
  display: grid;
  gap: 0.1rem;
  min-height: 3.5rem;
  padding: var(--space-3) var(--space-6);
  border: 0;
  background: transparent;
  color: var(--fg-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.jn__switch button + button { border-left: 1px solid var(--line-strong); }
.jn__switch button:hover { color: var(--fg); background: var(--bg-soft); }
.jn__switch button[aria-selected="true"] { background: var(--fg); color: var(--bg); }
.jn__switch-k { font-weight: 600; }
.jn__switch-s { font-size: var(--text-sm); opacity: 0.8; }
html:not(.js) .jn__switch { display: none; }
html:not(.js) .jn__panel + .jn__panel { margin-top: var(--space-16); }
.jn__panel[hidden] { display: none; }

.jn__track { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.jn__phase { margin: 0; }

.jn__pillar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius);
  overflow: hidden;
}
.jn__n { margin: 0; font-family: var(--mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.jn__n span { display: block; margin-top: 0.15rem; color: var(--fg-faint); letter-spacing: 0.02em; text-transform: none; font-weight: 400; }
.jn__title { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.02em; }
.jn__pick { all: unset; cursor: pointer; color: var(--fg); }
/* The button stretches over the whole pillar, so the pillar is the target. */
.jn__pick::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.jn__pick:focus-visible { outline: none; }
.jn__pillar:has(.jn__pick:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.jn__whos { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.jn__who { font-family: var(--mono); font-size: 0.68rem; font-weight: 600; padding: 0.12rem 0.45rem; border-radius: 2px; border: 1px solid var(--line-strong); color: var(--fg-soft); }
.jn__who--gate { border-color: var(--brand); color: var(--accent); }
.jn__big {
  position: absolute;
  right: 0.9rem;
  bottom: 0.4rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1;
  letter-spacing: -0.05em;
  color: color-mix(in srgb, var(--fg) 7%, transparent);
  pointer-events: none;
}

.jn__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-6) 0 0;
}
.jn__what { margin: 0; color: var(--fg-soft); line-height: 1.7; }
.jn__have {
  margin: 0;
  padding: var(--space-4);
  border-left: 3px solid var(--green);
  background: var(--bg-raised);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--fg-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.jn__have strong { display: block; margin-bottom: 0.15rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); }
.jn__after { display: grid; gap: var(--space-3); align-content: start; }
.jn__more { font-weight: 600; font-size: var(--text-sm); color: var(--accent); }

.jn__term {
  margin: 0;
  padding: var(--space-6);
  overflow-x: auto;
  border-radius: var(--radius);
  border-left: 3px solid var(--brand);
  background: #08090b;
  color: #c9c3ba;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.75;
  box-shadow: var(--shadow-block);
}
.jn__term code { font: inherit; color: inherit; white-space: pre; }
.jn__c { color: #f3efe8; font-weight: 600; }
.jn__x { color: #8f897f; }
.jn__term .t-yes { color: #8fd4a8; }
.jn__term .t-no { color: #ff8f7a; }
.jn__foot { margin: var(--space-12) 0 0; color: var(--fg-soft); }

/* Wide screens with JavaScript: five pillars rising left to right, and the
 * chosen one opens below them. `display: contents` lets each phase hand its
 * pillar to row one and its body to row two of the same grid. */
@media (min-width: 1000px) {
  .js .jn__track {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--space-4);
    row-gap: var(--space-8);
    align-items: end;
  }
  .js .jn__phase { display: contents; }
  .js .jn__pillar {
    grid-row: 1;
    grid-column: var(--i);
    min-height: calc(13rem + var(--i) * 2.4rem);
    border-top-width: 1px;
    border-top-color: var(--line);
    box-shadow: 10px 10px 0 color-mix(in srgb, var(--fg) 10%, transparent);
    transition: transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s ease, background 0.3s ease;
  }
  .js .jn__pillar:hover { transform: translateY(-8px); }
  .js .jn__phase.is-active .jn__pillar { background: var(--brand); border-color: var(--brand); box-shadow: 10px 10px 0 var(--fg); }
  .js .jn__phase.is-active .jn__pick,
  .js .jn__phase.is-active .jn__n,
  .js .jn__phase.is-active .jn__n span { color: var(--on-brand); }
  .js .jn__phase.is-active .jn__who { border-color: var(--on-brand); color: var(--on-brand); }
  .js .jn__phase.is-active .jn__big { color: color-mix(in srgb, var(--on-brand) 20%, transparent); }
  .js .jn__body {
    grid-row: 2;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr);
    grid-template-areas: "text term" "after term";
    column-gap: var(--space-8);
    padding: var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--bg-soft);
  }
  .js .jn__text { grid-area: text; }
  .js .jn__body .jn__term { grid-area: term; align-self: start; }
  .js .jn__after { grid-area: after; }
  .js .jn__phase:not(.is-active) .jn__body { display: none; }
}

/* ── Strengths ───────────────────────────────────────────────────────────── */

.sx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 3px solid var(--fg); }
.sx__card { padding: var(--space-8) var(--space-6) var(--space-8) 0; border-bottom: 1px solid var(--line); }
.sx__card:not(:nth-child(3n + 1)) { padding-left: var(--space-6); border-left: 1px solid var(--line); }
.sx__icon { width: 2.6rem; height: 2.6rem; fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.sx__icon .sx__no { stroke: var(--brand); }
.sx__icon .sx__dot { fill: var(--brand); stroke: none; }
.sx__card h3 { margin: var(--space-6) 0 var(--space-3); font-family: var(--display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.2; }
.sx__card p { margin: 0; color: var(--fg-soft); line-height: 1.65; }

/* ── Watch it: the recordings band ───────────────────────────────────────── */

/* A terminal in both themes: its palette is fixed here, on purpose. */
.ed-band--ink {
  background: #0b0c0e;
  color: #e9e4dc;
  border-block: 1px solid #1f2126;
  --bg-code: #08090b; --bg-soft: #15171b; --bg-raised: #15171b; --bg: #0b0c0e; --line: #26282e; --line-strong: #383b42;
  --fg: #e9e4dc; --fg-soft: #b9b3a9; --fg-faint: #8f897f; --accent: #ff6a2b; --accent-hover: #ff9466;
  --green: #8fd4a8; --amber: #e9bb5f; --red: #ff8f7a;
}
.ed-band--ink .ed-h2 { color: #f3efe8; }
.demo__tabs { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: var(--space-6); border: 1px solid #383b42; border-radius: var(--radius); width: fit-content; max-width: 100%; overflow: hidden; }
.demo__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: 0 var(--space-6);
  border: 0;
  background: transparent;
  color: #b9b3a9;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.demo__tab + .demo__tab { border-left: 1px solid #383b42; }
.demo__tab:hover { color: #f3efe8; background: #15171b; }
.demo__tab[aria-selected="true"] { background: #ff5b1f; color: #160600; }
.demo__tab:focus-visible { outline: 2px solid #ff6a2b; outline-offset: 2px; }
.demo__tab-n { font-family: var(--mono); font-size: 0.75rem; opacity: 0.8; }
.demo__lede { margin: 0 0 var(--space-6); color: #b9b3a9; max-width: 52rem; line-height: 1.65; }
.ed-band--ink .term { margin-top: 0; border-left: 3px solid #ff5b1f; box-shadow: 16px 16px 0 rgb(255 91 31 / 14%); }
.ed-band--ink .term__meta { color: #8f897f; }
.ed-band--ink .term__meta a { color: #ff6a2b; }
.term__progress { height: 2px; background: #26282e; position: relative; }
.term__progress::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p, 0%);
  background: #ff5b1f; transition: width 0.25s linear;
}

/* ── Projects: the bento ─────────────────────────────────────────────────── */

.px { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }

.px__tile {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-4);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-lg);
}
.px__tile-k { margin: 0; font-family: var(--mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.px__big {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(5rem, 2.6rem + 7vw, 8.5rem);
  line-height: 0.82;
  letter-spacing: -0.06em;
}
.px__tile-s { margin: 0; max-width: 30rem; font-size: 1.02rem; line-height: 1.55; }

.px__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.px__card:hover { text-decoration: none; transform: translate(-4px, -4px); box-shadow: 8px 8px 0 var(--fg); border-color: var(--fg); }
.px__kind { margin: 0; font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.px__card h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.45rem; line-height: 1.1; letter-spacing: -0.02em; }
.px__card > .ed-muted { margin: 0; font-size: var(--text-sm); }
.px__stack { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.px__stack li { font-family: var(--mono); font-size: 0.68rem; padding: 0.1rem 0.45rem; border-radius: 2px; background: var(--bg-soft); color: var(--fg-soft); border: 1px solid var(--line); }
.px__meter { margin: var(--space-1) 0 0; }
.px__meter-bar { height: 5px; background: var(--bg-soft); overflow: hidden; display: flex; }
.px__meter-bar i { display: block; height: 100%; background: var(--green); }
.px__meter-bar i + i { background: var(--amber); }
.px__meter p { margin: 0.45rem 0 0; font-size: var(--text-sm); color: var(--fg-soft); }
.px__meter .chip { margin-top: 0.4rem; }
.px__meter strong { color: var(--fg); font-weight: 600; font-family: var(--mono); }
.px__found { margin: 0; flex: 1; padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--text-sm); line-height: 1.55; color: var(--fg-soft); }
.px__found::before { content: "Found: "; font-weight: 600; color: var(--fg); }
.px__more { margin-top: auto; font-size: var(--text-sm); font-weight: 600; color: var(--accent); }

.px__shot {
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-1);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--bg-soft);
}
.px__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform 0.6s ease; }
.px__card:hover .px__shot img { transform: scale(1.04); }
.px__shot--spec { display: flex; align-items: center; background: #08090b; }
.px__shot--spec pre { margin: 0; padding: var(--space-4) var(--space-4); font-family: var(--mono); font-size: 0.64rem; line-height: 1.55; color: #b9b3a9; white-space: pre; overflow: hidden; }
.px__shot--spec .g-k { color: #ff6a2b; font-weight: 600; }

/* The gallery: what the agents built, as the products look. */
.gal { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-4); align-items: center; margin: var(--space-12) 0 var(--space-3); }
.gal .shot img { aspect-ratio: auto; }
.gal figcaption { padding: 0.7rem 1rem; font-size: var(--text-sm); color: var(--fg-soft); border-top: 1px solid var(--line); }
.gal figcaption strong { color: var(--fg); font-weight: 600; }
.gal__side { display: grid; gap: var(--space-4); }
.gal__phone { justify-self: center; width: min(15rem, 100%); border-radius: 26px; padding: 8px; background: #0b0c0e; border: 1px solid #383b42; box-shadow: 14px 14px 0 rgb(255 91 31 / 16%); margin: 0; }
.gal__phone img { display: block; width: 100%; height: auto; border-radius: 19px; }
.gal__phone figcaption { color: #b9b3a9; border: 0; text-align: center; font-size: var(--text-xs); }
.gal__note { margin: 0 0 var(--space-8); font-size: var(--text-sm); }

/* ── Screenshot frame ────────────────────────────────────────────────────── */

.shot { margin: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-strong); background: var(--bg-raised); box-shadow: 14px 14px 0 color-mix(in srgb, var(--fg) 10%, transparent); }
.shot__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.8rem; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.shot__dots { display: inline-flex; gap: 0.35rem; }
.shot__dots::before, .shot__dots::after { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--line-strong); }
.shot__dots::before { box-shadow: 0.95rem 0 0 var(--line-strong); margin-right: 0.95rem; }
.shot__url { font-family: var(--mono); font-size: 0.72rem; color: var(--fg-faint); background: var(--bg); padding: 0.1rem 0.7rem; border-radius: 2px; }
.shot img { display: block; width: 100%; height: auto; }

/* ── The harness ─────────────────────────────────────────────────────────── */

.ed-agents { max-width: 52rem; }
.ed-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-6) 0 0; }
.ed-tools span { margin-right: var(--space-2); font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }

/* ── Status ladder ───────────────────────────────────────────────────────── */

.st { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: end; }
.st__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  border-radius: var(--radius);
}
.st__item:nth-child(1) { min-height: 13rem; }
.st__item:nth-child(2) { min-height: 15rem; }
.st__item:nth-child(3) { min-height: 17rem; }
.st__item:nth-child(4) { min-height: 19rem; }
.st__item--wait { border-top-color: var(--amber); }
.st__item--deep { border-top-color: var(--brand); box-shadow: 10px 10px 0 color-mix(in srgb, var(--brand) 18%, transparent); }
.st__tag { margin: 0; font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.st__item--wait .st__tag { color: var(--amber); }
.st__item--deep .st__tag { color: var(--accent); }
.st__item h3 { margin: var(--space-2) 0 0; font-family: var(--display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; }
.st__item p:last-child { margin: 0; color: var(--fg-soft); line-height: 1.6; }

/* ── Evidence ────────────────────────────────────────────────────────────── */

.ed-scars { list-style: none; margin: 0; padding: 0; counter-reset: scar; border-top: 3px solid var(--fg); }
.ed-scars li {
  position: relative;
  padding: var(--space-6) 0 var(--space-6) 3.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--fg-soft);
  counter-increment: scar;
}
.ed-scars li::before {
  content: counter(scar, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--space-6);
  font-family: var(--mono);
  font-weight: 600;
  color: var(--accent);
}
.ed-scars strong { color: var(--fg); }

/* ── If you know OpenSpec ────────────────────────────────────────────────── */

.vs { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-raised); }
.vs__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6) var(--space-8);
}
.vs__row + .vs__row { border-top: 1px solid var(--line); }
.vs__row p { margin: 0; font-size: var(--text-sm); line-height: 1.6; }
.vs__q { font-family: var(--display); font-weight: 700; font-size: 1.15rem !important; line-height: 1.25 !important; letter-spacing: -0.015em; color: var(--fg); }
.vs__them { color: var(--fg-faint); }
.vs__us { color: var(--fg); padding-left: var(--space-4); border-left: 3px solid var(--brand); }
.vs__them span, .vs__us span { display: block; margin-bottom: 0.25rem; font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.vs__us span { color: var(--accent); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.ed-faq { border-top: 3px solid var(--fg); }
.ed-faq details { border-bottom: 1px solid var(--line); }
.ed-faq summary {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  min-height: 3.5rem;
  padding: var(--space-4) 0;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  list-style: none;
}
.ed-faq summary::-webkit-details-marker { display: none; }
.ed-faq summary::after { content: "+"; flex: none; font-family: var(--mono); font-weight: 400; color: var(--accent); font-size: 1.4rem; }
.ed-faq details[open] summary::after { content: "–"; }
.ed-faq p { margin: 0 0 var(--space-6); color: var(--fg-soft); line-height: 1.7; max-width: 42rem; }

/* ── Close: the block that inverts the page ──────────────────────────────── */

.ed-close { padding: 0 0 clamp(4rem, 3rem + 4vw, 7rem); }
.ed-close__box {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: end;
  padding: clamp(2rem, 1rem + 4vw, 5rem);
  background: var(--inverse-bg);
  color: var(--inverse-fg);
  border-radius: var(--radius-lg);
}
.ed-display--close { color: var(--inverse-fg); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); }
/* The command inside the inverted block is a terminal in both themes. */
.ed-close__code {
  margin: 0;
  --bg-code: #08090b; --bg-soft: #15171b; --bg-raised: #15171b; --line: #26282e; --line-strong: #383b42;
  --fg: #e9e4dc; --fg-soft: #b9b3a9; --fg-faint: #8f897f;
  color: #e9e4dc;
}
.ed-close .ed-actions { margin-top: var(--space-6); }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.ed-foot { border-top: 3px solid var(--fg); padding: var(--space-12) 0 var(--space-8); }
.ed-foot__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); }
.ed-foot__brand { margin: 0 0 var(--space-2); font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; }
.ed-foot__brand span { color: var(--brand); }
.ed-foot nav { display: flex; flex-direction: column; gap: var(--space-1); }
.ed-foot nav a { color: var(--fg-soft); min-height: 2rem; display: inline-flex; align-items: center; }
.ed-foot nav a:hover { color: var(--fg); }
.ed-foot__h { margin: 0 0 var(--space-2); font-family: var(--mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); }
.ed-foot__note { margin-top: var(--space-12); font-family: var(--mono); font-size: 0.75rem; color: var(--fg-faint); }

/* ── Motion ──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ed-btn, .px__card, .px__shot img, .jn__pillar, .card, .pager a { transition: none !important; }
  .ed-btn:hover, .px__card:hover, .js .jn__pillar:hover { transform: none; }
}

/* ── Narrow screens ──────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .pl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st__item { min-height: 0 !important; }
}

@media (max-width: 900px) {
  .mx__grid { grid-template-columns: minmax(0, 1fr); }
  .mx__art { min-height: 27rem; overflow: hidden; }
  .iso { transform: translateY(3rem); }
  .iso__stack { width: 15rem; height: 15rem; }
  .iso__front { font-size: 0.66rem; height: 1.8rem; padding: 0 0.7rem; }
  .iso__side { width: 1.8rem; }
  .iso__slab--4 .iso__top { font-size: 0.85rem; }
  .ed-split, .ed-split--wide { grid-template-columns: minmax(0, 1fr); }
  .ed-split__head { position: static; }
  .sx { grid-template-columns: minmax(0, 1fr); }
  .sx__card, .sx__card:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .vs__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-6); }
  .gal { grid-template-columns: minmax(0, 1fr); }
  .ed-close__box { grid-template-columns: minmax(0, 1fr); }
  .ed-foot__grid { grid-template-columns: 1fr 1fr; }
  .pb__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pb__stats > div { padding: var(--space-6) var(--space-4) var(--space-6) 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .pb__stats > div + div { padding-left: 0; }
  .pb__stats > div:nth-child(even) { padding-left: var(--space-4); border-left: 1px solid var(--line); }
}

@media (max-width: 600px) {
  .pl, .px, .st { grid-template-columns: minmax(0, 1fr); }
  .px__tile { grid-column: auto; }
  .jn__switch { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .jn__switch button + button { border-left: 0; border-top: 1px solid var(--line-strong); }
  .demo__tabs { width: 100%; }
  .demo__tab { flex: 1 1 100%; }
  .demo__tab + .demo__tab { border-left: 0; border-top: 1px solid #383b42; }
  .ed-foot__grid { grid-template-columns: minmax(0, 1fr); }
  .mx__art { min-height: 23rem; }
  .iso { transform: translateY(3.5rem) scale(0.9); }
  .iso__stack { width: 12rem; height: 12rem; }
  .iso__front { font-size: 0.56rem; height: 1.5rem; }
  .iso__side { width: 1.5rem; }
  .iso__slab--4 .iso__top { font-size: 0.72rem; }
}

/* ── The harness ─────────────────────────────────────────────────────────── */
/* The page's showpiece: one run, played step by step. Each cell carries the
 * step it appears at (`data-at`); home.js lights them in order while the board
 * is on screen. Without JavaScript, or under reduced motion, every cell shows. */
.hz { position: relative; overflow: hidden; }
.hz::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42rem 28rem at 85% 10%, rgb(255 91 31 / 16%), transparent 70%),
    linear-gradient(rgb(255 255 255 / 3%) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgb(255 255 255 / 3%) 1px, transparent 1px) 0 0 / 48px 48px;
}
.hz .ed-wrap { position: relative; }
.hz__head { max-width: 46rem; }
.hz__head .ed-h2 span { color: #ff6a2b; }
.hz__head .ed-muted { color: #b9b3a9; }
.hz__head code { color: #f3efe8; }

.hz__board {
  margin: var(--space-12) 0 0;
  background: #08090b;
  border: 1px solid #2a2c31;
  border-left: 3px solid #ff5b1f;
  box-shadow: 20px 20px 0 rgb(255 91 31 / 14%), 0 40px 80px -40px #000;
  font-family: var(--mono);
}
.hz__bar { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 1.1rem; border-bottom: 1px solid #22242a; color: #e9e4dc; font-size: 0.82rem; flex-wrap: wrap; }
.hz__bar code { color: #e9e4dc; background: none; border: 0; padding: 0; }
.hz__dots { display: inline-flex; gap: 0.35rem; }
.hz__dots::before, .hz__dots::after { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #3a3d44; box-shadow: 0.9rem 0 0 #3a3d44; }
.hz__dots::after { margin-left: 0.9rem; background: #ff5b1f; box-shadow: none; }
.hz__live { margin-left: auto; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #ff6a2b; }
.hz__live::before { content: "● "; animation: hz-blink 1.2s steps(2) infinite; }
.hz.is-done .hz__live { color: #9ce0b4; }
.hz.is-done .hz__live::before { content: "✔ "; animation: none; }

.hz__grid { overflow-x: auto; }
.hz__row {
  display: grid;
  grid-template-columns: minmax(15rem, 1.3fr) minmax(9rem, 0.8fr) minmax(16rem, 1.6fr) minmax(14rem, 1.2fr);
  gap: 1rem;
  align-items: center;
  min-width: 52rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid #1a1c20;
  font-size: 0.8rem;
  color: #c9c3ba;
}
.hz__row--head { color: #8f897f; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; }
.hz__req { color: #e9e4dc; font-family: var(--sans); font-size: 0.88rem; }
.hz__req b { margin-right: 0.5rem; font-family: var(--mono); font-weight: 600; color: #ff6a2b; }
.hz__row code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }
.hz__att { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.hz__att i { font-style: normal; padding: 0.15rem 0.5rem; border: 1px solid #2a2c31; }
.hz__ok { color: #9ce0b4; border-color: rgb(156 224 180 / 35%) !important; }
.hz__no { color: #ff8f7a; border-color: rgb(255 143 122 / 35%) !important; }
.hz__wait { color: #e6b85c; border-color: rgb(230 184 92 / 35%) !important; }
.hz__arrow { border: 0 !important; color: #8f897f; }
.hz__muted { color: #5e5a54; }
.hz__res--ok { color: #9ce0b4; }
.hz__res--no { color: #ff8f7a; }
.hz__res--wait { color: #e6b85c; }
.hz__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 1.5rem; padding: 0.95rem 1.1rem; font-size: 0.8rem; color: #e9e4dc; }
.hz__foot strong { color: #ff6a2b; font-weight: 600; }
.hz__note { color: #8f897f; font-family: var(--sans); }

/* The step-by-step reveal, only once home.js has taken the board over. */
.hz--live .hz__c { opacity: 0; transform: translateY(4px); transition: opacity 0.35s, transform 0.35s; }
.hz--live .hz__c.is-on { opacity: 1; transform: none; }
.hz--live .hz__row.is-now { background: rgb(255 91 31 / 6%); box-shadow: inset 3px 0 0 #ff5b1f; }
@keyframes hz-blink { 50% { opacity: 0; } }

.hz__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: var(--space-12) 0 0; background: #22242a; border: 1px solid #22242a; }
.hz__stats div { padding: var(--space-6); background: #0d0e11; }
.hz__stats dt { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); letter-spacing: -0.03em; color: #f3efe8; line-height: 1; }
.hz__stats div:first-child dt { color: #ff6a2b; }
.hz__stats dd { margin: 0.6rem 0 0; font-size: var(--text-sm); line-height: 1.55; color: #b9b3a9; }
.hz__stats a { color: #ff6a2b; }

.hz__feats { list-style: none; margin: var(--space-8) 0 var(--space-12); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.hz__feats li { padding: var(--space-6) var(--space-4) var(--space-4); border-top: 3px solid #ff5b1f; background: #15171b; }
.hz__feats h3 { margin: 0 0 var(--space-2); font-family: var(--display); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.015em; color: #f3efe8; }
.hz__feats p { margin: 0; font-size: var(--text-sm); line-height: 1.55; color: #b9b3a9; }
.hz__feats code { color: #e9e4dc; }
.hz .dia { margin-top: 0; }

@media (max-width: 899px) {
  .hz__stats, .hz__feats { grid-template-columns: minmax(0, 1fr); }
  /* On a phone each requirement is a card: name, branch, attempts, result. */
  .hz__row { grid-template-columns: minmax(0, 1fr); gap: 0.45rem; min-width: 0; }
  .hz__row--head { display: none; }
  .hz__row .hz__muted { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hz__live::before { animation: none; }
}

/* ── Where it fits: the DevOps loop ──────────────────────────────────────── */
/*
 * Two rings drawn as eight quarter arcs (pathLength 100, one dash each). The
 * state of a stage is its colour: the brand orange for Specgate, ink for
 * forja, a dashed orange for what is only partly covered, and the border tone
 * for what stays with the reader's platform. Tokens only, so both themes work.
 */
.lp__lede { max-width: 46rem; margin-top: var(--space-4); line-height: 1.65; }
.lp { margin: var(--space-8) 0 0; }
.lp__svg { display: block; width: 100%; max-width: 62rem; height: auto; margin: 0 auto; overflow: visible; }
.lp__seg { fill: none; stroke-width: 26; }
.lp__seg--sg { stroke: var(--brand); }
.lp__seg--fj { stroke: var(--fg); }
.lp__seg--part { stroke: var(--brand); opacity: 0.45; }
.lp__seg--out { stroke: var(--line-strong); }
.lp__cross { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 4 6; }
.lp__label { font-family: var(--mono); font-size: 17px; font-weight: 600; letter-spacing: 0.12em; text-anchor: middle; fill: var(--fg-soft); }
.lp__label--sg { fill: var(--accent); }
.lp__label--fj { fill: var(--fg); }
.lp__label--out { fill: var(--fg-faint); }
.lp__core { font-family: var(--display); font-weight: 800; font-size: 64px; letter-spacing: -0.03em; text-anchor: middle; fill: var(--fg); }
.lp__core--ops { fill: var(--fg-faint); }
.lp__sub { font-family: var(--mono); font-size: 15px; text-anchor: middle; fill: var(--fg-faint); }

.lp__key { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-6); margin-top: var(--space-4); font-family: var(--mono); font-size: 0.8rem; color: var(--fg-soft); }
.lp__k { display: inline-flex; align-items: center; gap: 0.5em; }
.lp__k::before { content: ""; width: 1.6em; height: 0.55em; background: var(--brand); }
.lp__k--fj::before { background: var(--fg); }
.lp__k--part::before { background: var(--brand); opacity: 0.45; }
.lp__k--out::before { background: var(--line-strong); }

.lp__stages {
  list-style: none;
  margin: var(--space-8) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}
.lp__stage {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5, 1.25rem);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
}
.lp__stage--fj { border-top-color: var(--fg); }
.lp__stage--part { border-top-style: dashed; }
.lp__stage--out { border-top-color: var(--line-strong); background: transparent; }
.lp__stage h3 { margin: 0; font-family: var(--display); font-size: 1.25rem; letter-spacing: -0.02em; color: var(--fg); }
.lp__stage p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--fg-soft); }
.lp__stage .lp__who { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-faint); }
.lp__stage code { margin-top: auto; padding-top: var(--space-2); font-size: 0.78rem; color: var(--accent); overflow-wrap: anywhere; }
.lp__stage--out code { color: var(--fg-faint); }
.lp__chip { align-self: flex-start; font-family: var(--mono); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.15em 0.55em; background: var(--brand); color: var(--on-brand); }
.lp__stage--fj .lp__chip { background: var(--fg); color: var(--bg); }
.lp__stage--part .lp__chip { background: var(--accent-soft); color: var(--accent); }
.lp__stage--out .lp__chip { background: transparent; color: var(--fg-faint); border: 1px solid var(--line-strong); }

@media (max-width: 1000px) { .lp__stages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lp__stages { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  /* The drawing shrinks to a third: its labels grow to stay readable. */
  .lp__label { font-size: 30px; letter-spacing: 0.06em; }
  .lp__sub { display: none; }
}