/* ==========================================================================
   Landing composition
   --------------------------------------------------------------------------
   The page is built as a sequence of *different* things, not one card
   repeated twelve times: a hero that bleeds off the right edge, a ledger
   band, an editorial statement, a drawn mechanism, two product captures at
   different scales, a full-bleed status bar, a ruled spec sheet, numbered
   rows, printed tables, a full-bleed portrait, and a close.

   Everything here uses the tokens in style.css. The only new material is
   the display serif used for two phrases, and the wider measure.
   ========================================================================== */

:root {
  --wide: 1440px;
  --display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
}

/* The old page centred every section in a 1180px column. The new one lets
   several of them reach the viewport edge; the ones that stay contained
   say so explicitly below. */
.l-hero,
.l-proof,
.l-statement,
.l-show,
.l-package,
.l-steps,
.l-bench,
.l-matrix,
.l-mascot,
.l-quick,
.l-honest,
.l-cta {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* A shared measure for the contained sections. */
.l-show,
.l-package,
.l-steps,
.l-bench,
.l-matrix,
.l-quick,
.l-honest {
  padding-left: max(var(--gutter), calc((100% - var(--wide)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--wide)) / 2));
}

/* ── 1 · hero ─────────────────────────────────────────────────────────────
   Copy on the left, the live launcher running off the right edge. The
   machine is bigger than the page; that is the point. */

.l-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 4vw, 64px);
  padding-top: clamp(44px, 5.5vw, 76px);
  padding-bottom: clamp(56px, 7vw, 96px);
  padding-left: max(var(--gutter), calc((100% - var(--wide)) / 2));
  padding-right: 0;
  min-height: min(800px, calc(100svh - 68px));
  overflow: hidden;
  isolation: isolate;
}

/* The light in this page comes from the objects, not from the page. The
   launcher is gold, the replayed blocks are teal, the computed ones are
   amber, and each section is washed by the colour of the thing it is
   talking about. There is no violet, and nothing floats in the middle of
   the screen like a lantern. */

.l-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      transparent 36%,
      oklch(0.885 0.18 95 / 0.05) 68%,
      oklch(0.66 0.15 95 / 0.12) 100%
    ),
    linear-gradient(180deg, oklch(0.46 0.03 258 / 0.15) 0%, transparent 44%),
    linear-gradient(0deg, oklch(0.885 0.18 95 / 0.035) 0%, transparent 36%);
}

.l-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 660px;
  padding-bottom: 8px;
}

.l-hero .kicker {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--s5);
}

.l-hero h1 {
  font-size: clamp(2.35rem, 4.1vw, 3.75rem);
  line-height: 1.03;
  font-weight: 550;
  letter-spacing: -0.038em;
  text-wrap: balance;
  margin: 0;
}

.l-hero h1 .accent {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.055em;
  letter-spacing: -0.012em;
  color: var(--brand);
}

.l-hero .lede {
  max-width: 46ch;
  margin: var(--s5) 0 0;
  color: var(--fg-dim);
  font-size: clamp(1rem, 0.96rem + 0.24vw, 1.14rem);
  line-height: 1.62;
}

.l-hero .cta {
  margin-top: var(--s6);
}

/* The facts are a ledger with a rule above, not three mini cards. */
.l-hero-facts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
  margin: var(--s7) 0 0;
  padding: var(--s5) 0 0;
  border-top: 1px solid var(--line);
}

.l-hero-facts li {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  max-width: 24ch;
}

.l-hero-facts strong {
  display: block;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}

/* ── the live window ───────────────────────────────────────────────────── */

.l-hero-media {
  margin: 0;
  min-width: 0;
  align-self: center;
  justify-self: stretch;
}

.win {
  position: relative;
  border: 1px solid transparent;
  border-right: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  background-image:
    linear-gradient(#080b11, #080b11),
    linear-gradient(
      180deg,
      oklch(0.72 0.06 250 / 0.36),
      oklch(0.34 0.03 262 / 0.16) 24%,
      oklch(0.24 0.02 262 / 0.06)
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.06),
    0 42px 90px -50px oklch(0.06 0.05 280 / 0.98),
    0 0 130px -60px oklch(0.885 0.18 95 / 0.34);
  overflow: hidden;
}

.win-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 40px;
  padding: 0 14px 0 16px;
  border-bottom: 1px solid oklch(0.34 0.024 260 / 0.5);
  background: linear-gradient(180deg, oklch(0.23 0.022 258 / 0.95), oklch(0.18 0.02 262 / 0.85));
}

.win-dots {
  display: flex;
  gap: 6px;
  flex: none;
}

.win-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.4 0.02 260);
}

.win-dots i:first-child { background: var(--brand); }

.win-title {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-chip {
  margin-left: auto;
  flex: none;
  padding: 3px 9px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  color: var(--brand);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.win .tui {
  height: clamp(450px, 58vh, 600px);
  border-radius: 0;
}

.win .tui:focus-visible {
  box-shadow: inset 0 0 0 2px var(--brand-line);
}

.l-hero-media figcaption {
  margin-top: var(--s3);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

/* ── 2 · the proof band ───────────────────────────────────────────────── */

.l-proof {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 1px solid oklch(0.4 0.024 262 / 0.34);
  border-bottom: 1px solid oklch(0.4 0.024 262 / 0.34);
  background: linear-gradient(180deg, oklch(0.19 0.021 264 / 0.92), oklch(0.16 0.018 268 / 0.92));
}

.l-proof-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(22px, 2.6vw, 34px) max(var(--gutter), calc((100% - var(--wide)) / 2)) 0;
  border-top: 0;
}

.l-proof-cell {
  min-width: 0;
  padding: 0 clamp(16px, 2.4vw, 34px) clamp(22px, 2.8vw, 34px) 0;
  border-right: 1px solid var(--line);
}

.l-proof-cell + .l-proof-cell {
  padding-left: clamp(16px, 2.4vw, 34px);
}

.l-proof-cell:last-child { border-right: 0; padding-right: 0; }

.l-proof-cell dt {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.l-proof-cell .num {
  margin: var(--s3) 0 0;
  color: var(--fg);
  font-size: clamp(1.65rem, 1.1rem + 1.7vw, 2.55rem);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.l-proof-cell:nth-child(3) .num { color: var(--brand); }

.l-proof-note {
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--s4) max(var(--gutter), calc((100% - var(--wide)) / 2)) var(--s5);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.l-proof-note a {
  color: var(--fg-dim);
  border-bottom: 1px solid var(--line-strong);
}

.l-proof-note a:hover { color: var(--brand); border-color: var(--brand-line); }

/* ── 3 · the statement ────────────────────────────────────────────────── */

.l-statement {
  position: relative;
  padding-top: clamp(76px, 8.5vw, 120px);
  padding-bottom: clamp(76px, 8.5vw, 120px);
  padding-left: max(var(--gutter), calc((100% - var(--wide)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--wide)) / 2));
}

.l-statement::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(var(--gutter), calc((100% - var(--wide)) / 2));
  right: max(var(--gutter), calc((100% - var(--wide)) / 2));
  height: 1px;
  background: linear-gradient(90deg, var(--brand-line), var(--line) 28%, transparent 78%);
}

.l-statement-line {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(2.15rem, 1.15rem + 4.1vw, 4.25rem);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.l-statement-line em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.07em;
  letter-spacing: -0.012em;
  color: var(--brand);
}

/* ── 4 · the mechanism ────────────────────────────────────────────────── */

/* style.css draws the matcher; the composition only needs a wider stage and
   a tighter relationship between the copy and the drawing. */
.mechanism {
  position: relative;
  isolation: isolate;
  max-width: none;
  margin: 0;
  padding-top: clamp(72px, 7.5vw, 108px);
  padding-bottom: clamp(72px, 7.5vw, 108px);
  padding-left: max(var(--gutter), calc((100% - var(--wide)) / 2));
  padding-right: max(var(--gutter), calc((100% - var(--wide)) / 2));
}

/* Graph paper for the drawing, and the colour of a replayed block coming
   in from the right, where the stage sits. */
.mechanism::before {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      100deg,
      transparent 44%,
      oklch(0.83 0.125 196 / 0.04) 78%,
      oklch(0.62 0.13 196 / 0.07) 100%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 70%),
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px;
}

.mech-grid {
  max-width: none;
  margin: 0;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 4.5vw, 80px);
  align-items: center;
}

.mech-copy h2 {
  max-width: 15ch;
  font-size: clamp(1.95rem, 1.2rem + 2.6vw, 3.45rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}

.mech-copy .section-sub {
  margin: var(--s5) 0 0;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.68;
}

.mech-stage {
  padding: clamp(22px, 2.4vw, 34px);
}

.mech-cell { height: clamp(56px, 5.6vw, 84px); }

.mech-facts {
  margin-top: clamp(40px, 5vw, 64px);
}

.mech-facts dd { font-size: 1.02rem; }

.mech-stage {
  transform: rotate(0.35deg);
}

.mech-stage:hover { transform: rotate(0); }

.mech-stage { transition: transform 0.6s var(--ease); }

/* ── 5 · the product, at three scales ─────────────────────────────────── */

.l-show {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(36px, 5.5vw, 88px);
  align-items: center;
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(56px, 7vw, 96px);
}

.l-show + .l-show { padding-top: 0; }

.l-show--reverse {
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
}

.l-show--reverse .l-show-copy { order: 2; }

.l-show-copy h2 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(1.9rem, 1.25rem + 2.3vw, 3.15rem);
  font-weight: 550;
  line-height: 1.06;
  letter-spacing: -0.036em;
}

.l-show .section-sub {
  margin: var(--s5) 0 0;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.68;
}

.l-show-note {
  margin: var(--s6) 0 0;
  padding-left: var(--s4);
  border-left: 2px solid var(--brand-line);
  max-width: 38ch;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

/* The web UI gets the full measure: a screenshot that is scaled down to
   fit a column is a diagram of a product, not the product. */
.l-show--stack { display: block; }

.l-show-copy--duo {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--s5) clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(28px, 3.6vw, 44px);
}

.l-show-copy--duo .section-sub { margin-top: 0; max-width: 50ch; }
.l-show-copy--duo .l-show-note { margin-top: var(--s5); }

.l-launcher-scroll:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* The launcher capture is a terminal at native pixel size: no device frame,
   no padding pretending it is a phone. */
.l-show.l-show--launcher {
  display: block;
  padding-top: clamp(56px, 6vw, 84px);
  padding-bottom: clamp(56px, 6vw, 84px);
}

.l-launcher-row {
  display: grid;
  grid-template-columns: minmax(0, 948px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: stretch;
}

.l-launcher {
  margin: 0;
  min-width: 0;
}

.l-launcher-scroll { min-width: 0; }

.l-launcher img {
  display: block;
  width: 100%;
  max-width: 948px;
  height: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: #08090b;
  box-shadow:
    0 46px 100px -56px rgba(0, 0, 0, 0.95),
    0 0 130px -70px oklch(0.885 0.18 95 / 0.3);
}

.l-launcher figcaption {
  margin-top: var(--s3);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.03em;
}

/* The keys, at reading size. The capture prints them at eleven pixels; this
   is the same legend, in the page's voice. */
.l-launcher-keys {
  margin: 0;
  padding-left: clamp(20px, 2.4vw, 32px);
  border-left: 1px solid var(--line);
  display: grid;
  align-content: center;
  gap: var(--s4);
}

.l-launcher-keys dt {
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
}

.l-launcher-keys kbd {
  display: inline-block;
  min-width: 22px;
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--bg-2);
  color: var(--fg-dim);
  font-family: var(--mono);
  font-size: 0.7rem;
  text-align: center;
}

.l-launcher-keys dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.l-pan-hint {
  display: none;
}

/* ── 7 · the spec sheet ───────────────────────────────────────────────── */

.l-package {
  padding-top: clamp(64px, 7vw, 92px);
  padding-bottom: clamp(64px, 7vw, 92px);
}

.l-package-head {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(28px, 3.6vw, 46px);
}

.l-package-head h2 {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2rem, 1.3rem + 2.5vw, 3.3rem);
  font-weight: 550;
  line-height: 1.04;
  letter-spacing: -0.038em;
}

.l-package-head .section-sub {
  margin: 0;
  max-width: 48ch;
  font-size: 1rem;
}

/* A ruled sheet, not six floating cards: one surface, hairline rules
   between the cells, and a rhythm that is not three in a row. */
.l-package-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.l-panel {
  position: relative;
  grid-column: span 6;
  padding: clamp(18px, 1.9vw, 26px);
  background: var(--bg-2);
  overflow: hidden;
}

.l-panel:nth-child(1),
.l-panel:nth-child(2) { grid-column: span 6; }

.l-panel:nth-child(3),
.l-panel:nth-child(4),
.l-panel:nth-child(5) { grid-column: span 4; }

/* The last cell closes the sheet: the drawing beside the words, the way
   the rest of the page lays things out. */
.l-panel--wide {
  grid-column: span 12;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 52px);
  align-items: center;
}

.l-panel--wide .dg { margin-bottom: 0; }

.l-panel .dg {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 0 clamp(18px, 2vw, 26px);
  overflow: visible;
}

.l-panel h3 {
  position: relative;
  margin: 0 0 var(--s3);
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.l-panel p {
  position: relative;
  margin: 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.66;
}

/* ── 8 · the three commands ───────────────────────────────────────────── */

.l-steps {
  padding-top: clamp(64px, 7vw, 104px);
  padding-bottom: clamp(64px, 7vw, 104px);
  border-top: 1px solid var(--line);
  background:
    linear-gradient(180deg, oklch(0.17 0.019 266 / 0.55), transparent 55%),
    transparent;
}

.l-steps-head {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.l-steps-head h2 {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(1.9rem, 1.25rem + 2.3vw, 3.15rem);
  font-weight: 550;
  line-height: 1.06;
  letter-spacing: -0.036em;
}

.l-steps-head .section-sub { margin: 0; max-width: 46ch; font-size: 1rem; }

.l-steps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}

.l-steps-row {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.l-steps-row > li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s5);
  padding: clamp(22px, 2.6vw, 32px) 0;
  border-top: 1px solid var(--line);
  color: var(--fg-dim);
  font-size: 0.97rem;
  line-height: 1.68;
}

.l-steps-row > li:last-child {
  border-bottom: 1px solid var(--line);
}

.l-steps-row > li::before {
  content: attr(data-n);
  color: var(--brand);
  font-family: var(--mono);
  font-size: 1.45rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  padding-top: 3px;
}

.l-steps-row strong {
  color: var(--fg);
  font-weight: 600;
}

.l-steps-row code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: 5px;
  padding: 1px 5px;
  white-space: nowrap;
}

.l-loop {
  position: sticky;
  top: 104px;
  margin: 0;
  padding: var(--s6) var(--s6) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, oklch(0.205 0.021 260 / 0.9), oklch(0.17 0.019 266 / 0.9));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.04);
}

.l-loop svg { width: 100%; height: auto; overflow: visible; }

.l-loop figcaption {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

/* ── 9 · benchmarks ───────────────────────────────────────────────────── */

.l-bench {
  position: relative;
  isolation: isolate;
  padding-top: clamp(72px, 8vw, 112px);
  padding-bottom: clamp(72px, 8vw, 112px);
  border-top: 1px solid var(--line);
}

/* The bench is lit by the colour of a computed block: amber, from the
   left, where the first column of the table starts. */
.l-bench::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    262deg,
    transparent 56%,
    oklch(0.78 0.15 58 / 0.05) 84%,
    oklch(0.78 0.15 58 / 0.085) 100%
  );
}

.l-bench-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--s4) clamp(24px, 5vw, 80px);
  align-items: end;
}

.l-bench-head .overline { grid-column: 1 / -1; }

.l-bench-head h2 {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(2rem, 1.3rem + 2.5vw, 3.3rem);
  font-weight: 550;
  line-height: 1.04;
  letter-spacing: -0.038em;
}

.l-bench-head .section-sub { margin: 0; max-width: 50ch; font-size: 1rem; }

.l-bench .bench-picker { margin-top: clamp(32px, 4vw, 52px); }

.l-bench .table-wrap {
  margin-top: var(--s5);
  border-radius: var(--radius);
}

.l-bench tbody td { padding: 17px 22px; }
.l-bench thead th { padding: 16px 22px; }

.l-bench .note {
  margin-top: var(--s5);
  max-width: 88ch;
  font-size: 0.82rem;
  line-height: 1.72;
}

.l-bench .note strong { color: var(--fg); }

/* ── 10 · platforms ───────────────────────────────────────────────────── */

.l-matrix {
  padding-top: clamp(52px, 6.4vw, 94px);
  padding-bottom: clamp(52px, 6.4vw, 94px);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, oklch(0.168 0.018 268 / 0.8), transparent 60%);
}

.l-matrix-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--s4) clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.l-matrix-head .overline { grid-column: 1 / -1; }

.l-matrix-head h2 {
  margin: 0;
  font-size: clamp(1.9rem, 1.25rem + 2.3vw, 3.15rem);
  font-weight: 550;
  line-height: 1.06;
  letter-spacing: -0.036em;
}

.l-matrix-head .section-sub { margin: 0; max-width: 56ch; font-size: 1rem; }

.l-matrix-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
}

.l-matrix-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }

.l-matrix-scroll table { min-width: 760px; }

.l-matrix-scroll td { padding: 18px 22px; }
.l-matrix-scroll th { padding: 16px 22px; }

.l-matrix-note {
  margin: var(--s5) 0 0;
  max-width: 78ch;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.7;
}

.l-matrix-note code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--fg-dim);
}

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pill--ok {
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
}

.pill--beta {
  color: var(--compute);
  background: oklch(0.78 0.15 58 / 0.12);
  border: 1px solid oklch(0.78 0.15 58 / 0.32);
}

/* ── 11 · the mascot, full bleed ──────────────────────────────────────── */

.l-mascot {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: stretch;
  padding-top: 0;
  padding-bottom: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, oklch(0.18 0.019 266 / 0.65), oklch(0.155 0.017 270 / 0.65));
}

.l-mascot-media {
  position: relative;
  display: grid;
  place-items: center;
  margin: 0;
  min-height: clamp(400px, 42vw, 600px);
  padding: clamp(16px, 3vw, 36px);
  overflow: hidden;
  isolation: isolate;
}

/* A stage light: the pool on the floor under the bear, not a halo
   floating around it. */
.l-mascot-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(62% 38% at 50% 106%, oklch(0.62 0.11 78 / 0.3), transparent 72%),
    linear-gradient(180deg, transparent 54%, oklch(0.58 0.09 74 / 0.1) 100%);
  filter: blur(2px);
}

.l-mascot-media img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(320px, 38vw, 528px);
  object-fit: contain;
  filter: saturate(0.98) contrast(1.02) drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
}

.l-mascot-copy {
  align-self: center;
  padding: clamp(48px, 6vw, 96px) max(var(--gutter), calc((100% - var(--wide)) / 2)) clamp(48px, 6vw, 96px) clamp(32px, 5vw, 80px);
  max-width: 660px;
}

.toke-tag {
  display: inline-block;
  margin-bottom: var(--s4);
  padding: 3px 10px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  color: var(--brand);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.l-mascot h2 {
  margin: 0 0 var(--s5);
  font-size: clamp(2rem, 1.3rem + 2.5vw, 3.3rem);
  font-weight: 550;
  line-height: 1.04;
  letter-spacing: -0.038em;
}

.l-mascot p {
  margin: 0 0 var(--s4);
  max-width: 52ch;
  color: var(--fg-dim);
  font-size: 0.98rem;
  line-height: 1.72;
}

.l-mascot em {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.06em;
  color: var(--brand);
}

/* ── 12 · quick start ─────────────────────────────────────────────────── */

.l-quick {
  padding-top: clamp(64px, 7vw, 104px);
  padding-bottom: clamp(64px, 7vw, 104px);
}

.l-quick-head {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 52px);
}

.l-quick-head h2 {
  margin: 0;
  font-size: clamp(2rem, 1.3rem + 2.5vw, 3.3rem);
  font-weight: 550;
  line-height: 1.04;
  letter-spacing: -0.038em;
}

.l-quick-head .section-sub { margin: 0; max-width: 52ch; font-size: 1rem; }

.l-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

.l-quick-grid .code-label { margin-top: 0; }

.l-quick-grid .code {
  margin-top: var(--s2);
  min-height: 196px;
  font-size: 0.86rem;
  line-height: 1.95;
  padding-right: 60px;
}

.l-quick .note {
  max-width: 82ch;
  margin-top: var(--s6);
  font-size: 0.84rem;
}

/* ── 13 · the honest note ─────────────────────────────────────────────── */

.l-honest {
  padding-top: clamp(52px, 6.4vw, 94px);
  padding-bottom: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--line);
}

.l-honest h2 {
  margin: 0 0 clamp(32px, 4vw, 52px);
  max-width: 26ch;
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.6rem);
  font-weight: 550;
  line-height: 1.1;
  letter-spacing: -0.032em;
}

.l-honest-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}

.l-honest-body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.74;
}

.l-honest-body p:first-child { color: var(--fg-dim); }

.l-honest code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--fg-dim);
}

/* ── 14 · the close ───────────────────────────────────────────────────── */

.l-cta {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(68px, 7.6vw, 116px) var(--gutter);
  border-top: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}

.l-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(52% 64% at 50% 122%, oklch(0.885 0.18 95 / 0.13), transparent 72%),
    linear-gradient(180deg, oklch(0.42 0.03 258 / 0.12) 0%, transparent 34%);
}

.l-cta h2 {
  margin: 0 0 var(--s6);
  max-width: 20ch;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 3.8rem);
  font-weight: 550;
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.l-cta .cta { justify-content: center; margin: 0; }

/* ── responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1399px) {
  .l-launcher-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
  }

  .l-launcher-keys {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: var(--s5) 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 1180px) {
  .l-show,
  .l-show--reverse {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }

  .l-show--reverse { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

@media (max-width: 980px) {
  .l-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s7);
    min-height: 0;
    padding-right: max(var(--gutter), calc((100% - var(--wide)) / 2));
  }

  .l-hero-copy { max-width: 720px; }

  .win {
    border-right: 1px solid transparent;
    border-radius: var(--radius-lg);
  }

  .win .tui { height: clamp(420px, 58vh, 560px); }

  .l-hero-facts { max-width: 640px; }

  .l-show,
  .l-show--reverse {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
  }

  .l-show--reverse .l-show-copy { order: 0; }

  .l-show-copy h2 { max-width: 22ch; }

  .l-show-copy--duo { grid-template-columns: minmax(0, 1fr); }

  .l-show--launcher {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .l-launcher-keys {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: var(--s5) 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .l-package-head,
  .l-steps-head,
  .l-bench-head,
  .l-matrix-head,
  .l-quick-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }

  .l-package-head h2,
  .l-bench-head h2 { max-width: 18ch; }

  .l-steps-grid { grid-template-columns: minmax(0, 1fr); }

  .mech-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s6);
  }

  .mech-copy h2 { max-width: 22ch; }

  .l-loop { position: static; max-width: 520px; }

  .l-mascot {
    grid-template-columns: minmax(0, 1fr);
  }

  .l-mascot-media { min-height: clamp(300px, 58vw, 460px); }

  .l-mascot-copy {
    padding: clamp(36px, 6vw, 64px) max(var(--gutter), calc((100% - var(--wide)) / 2));
    max-width: none;
  }

  .l-quick-grid { grid-template-columns: minmax(0, 1fr); }

  .l-honest-body { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}

@media (max-width: 760px) {
  .l-launcher-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }

  .l-launcher-scroll img {
    width: 948px;
    max-width: none;
  }

  .l-pan-hint {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
  }

  .l-launcher-keys { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .l-proof-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: var(--s4);
  }

  .l-proof-cell {
    padding: var(--s5) var(--s5) var(--s5) 0;
  }

  .l-proof-cell:nth-child(2) { border-right: 0; }
  .l-proof-cell:nth-child(3) { padding-left: 0; border-top: 1px solid var(--line); }
  .l-proof-cell:nth-child(4) { border-top: 1px solid var(--line); }
  .l-proof-cell:nth-child(3),
  .l-proof-cell:nth-child(4) { padding-top: var(--s5); }

  .l-hero-facts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }

  .l-hero-facts li { max-width: 34ch; }

  .l-package-grid { grid-template-columns: minmax(0, 1fr); }
  .l-panel,
  .l-panel:nth-child(n),
  .l-panel--wide { grid-column: span 1; }

  .l-panel--wide {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s5);
  }

  .l-panel .dg { max-width: 300px; }

  .l-steps-row > li { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s4); }

  .l-cta .cta { flex-direction: column; align-items: stretch; }
  .l-cta .btn { justify-content: center; }
}

@media (max-width: 520px) {
  .l-hero { padding-top: var(--s7); }
  .l-hero .kicker { font-size: 0.7rem; }
  .l-hero .cta { display: grid; gap: var(--s3); }
  .l-hero .btn { justify-content: center; }
  .win-bar { height: 36px; }
  .win-chip { display: none; }
  .win .tui { height: 430px; }
  .l-quick-grid .code { font-size: 0.78rem; }
  .l-quick-grid .code { padding-left: var(--s4); padding-right: var(--s4); }
}

/* ── motion, and its absence ──────────────────────────────────────────── */

.mech-stage { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .mech-stage { transform: none; transition: none; }
  .l-loop { position: static; }
  .js-ready .l-panel.reveal { transition-delay: 0ms; }
}

@media (prefers-reduced-transparency: reduce) {
  .l-hero::before,
  .l-cta::before { display: none; }
}