/* ------------------------------------------------------------------
   Tokens. Dark is the designed ground; light is a cold-blueprint
   treatment, not an inversion. Components read tokens only — never
   raw colors — so both themes and the viewer toggle stay in sync.
   ------------------------------------------------------------------ */
:root {
  --ink: #0b111c;
  --ink-raised: #111a29;
  --ink-sunken: #080d16;
  --canvas-bg: #0d1524;
  --rule: #1e2a3d;
  --rule-soft: #172232;
  --paper: #e8edf5;
  --fog: #8695ac;
  --fog-dim: #5d6b81;
  --ember: #ff8a3d;
  --ember-soft: rgba(255, 138, 61, 0.14);
  --ok: #5fd3a6;
  --gate: #ffc24b;
  --block: #e8646e;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 40px -24px rgba(0, 0, 0, 0.9);

  --mono:
    'JetBrains Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
    'Liberation Mono', monospace;
  --sans:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;

  --gutter: clamp(1.25rem, 4vw, 3rem);
  --band: clamp(3.5rem, 7vw, 6.5rem);
  --measure: 34rem;

  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --ink: #e9edf3;
    --ink-raised: #ffffff;
    --ink-sunken: #dde4ee;
    --canvas-bg: #f4f7fb;
    --rule: #c6d1e0;
    --rule-soft: #d8e0ea;
    --paper: #0f1926;
    --fog: #56677e;
    --fog-dim: #7b8ba1;
    --ember: #c1541a;
    --ember-soft: rgba(193, 84, 26, 0.1);
    --ok: #17886a;
    --gate: #a97400;
    --block: #c33b47;
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 16px 34px -26px rgba(15, 25, 38, 0.5);
    color-scheme: light;
  }
}

/* Viewer toggle must beat the media query in both directions. */
:root[data-theme='dark'] {
  --ink: #0b111c;
  --ink-raised: #111a29;
  --ink-sunken: #080d16;
  --canvas-bg: #0d1524;
  --rule: #1e2a3d;
  --rule-soft: #172232;
  --paper: #e8edf5;
  --fog: #8695ac;
  --fog-dim: #5d6b81;
  --ember: #ff8a3d;
  --ember-soft: rgba(255, 138, 61, 0.14);
  --ok: #5fd3a6;
  --gate: #ffc24b;
  --block: #e8646e;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03), 0 18px 40px -24px rgba(0, 0, 0, 0.9);
  color-scheme: dark;
}

:root[data-theme='light'] {
  --ink: #e9edf3;
  --ink-raised: #ffffff;
  --ink-sunken: #dde4ee;
  --canvas-bg: #f4f7fb;
  --rule: #c6d1e0;
  --rule-soft: #d8e0ea;
  --paper: #0f1926;
  --fog: #56677e;
  --fog-dim: #7b8ba1;
  --ember: #c1541a;
  --ember-soft: rgba(193, 84, 26, 0.1);
  --ok: #17886a;
  --gate: #a97400;
  --block: #c33b47;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 16px 34px -26px rgba(15, 25, 38, 0.5);
  color-scheme: light;
}

/* ---------------------------------------------------------------- base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

h1,
h2,
h3 {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
  margin: 0;
}

p {
  margin: 0;
}

/* --------------------------------------------------------- primitives */
.wrap {
  max-width: 78rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* The annotated-trace spine: mono margin label + content column. */
.band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 2.5rem;
  padding-block: var(--band);
  border-top: 1px solid var(--rule);
}

@media (min-width: 60rem) {
  .band {
    grid-template-columns: 11rem minmax(0, 1fr);
  }
}

.band__label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog-dim);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.band__label::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: var(--ember);
  flex: none;
  transform: translateY(-0.25em);
}

.band__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

.lede {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.lede h2 {
  font-size: clamp(1.5rem, 3.2vw, 2.15rem);
}

.lede p {
  color: var(--fog);
  max-width: var(--measure);
  font-size: 1.0625rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    color 0.18s ease,
    background 0.18s ease;
}

.btn:hover {
  border-color: var(--ember);
  color: var(--ember);
}

.btn--solid {
  background: var(--ember);
  border-color: var(--ember);
  color: #14100c;
}

.btn--solid:hover {
  background: transparent;
  color: var(--ember);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--ember);
  color: #14100c;
  padding: 0.75rem 1rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
}

/* ------------------------------------------------------------- header */
.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--ink) 86%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.85rem;
  /* The positioning context for the features panel, so the panel spans the
     header's content width instead of being centred on its small trigger. */
  position: relative;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

.mark svg {
  display: block;
  overflow: visible;
}

.mark__suffix {
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog);
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid var(--rule);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav a {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--fog);
  text-decoration: none;
}

.nav a:hover {
  color: var(--paper);
}

.nav .btn {
  padding: 0.45rem 0.85rem;
  color: var(--paper);
}

@media (max-width: 46rem) {
  .nav__hide {
    display: none;
  }

  /* The Features trigger costs about 70px the header did not have to spend
     before. Reclaim it from the wordmark's suffix and the nav gap, rather
     than dropping a destination — Features is the only way into the surface
     pages on a phone. */
  .mark__suffix {
    display: none;
  }

  .nav {
    gap: 1rem;
  }
}

@media (max-width: 25rem) {
  /* Measured: wordmark + nav + gutters need 397px, so a 390px-wide phone
     overflows by a hair and a 400px one does not. Docs is the last thing to
     go — it is still one tap away in the Features rail and in the footer,
     while Features and GitHub are reachable from nowhere else. */
  .nav__hide--tight {
    display: none;
  }
}

/* ----------------------------------------------------------- features menu
   Openness is driven by three independent signals — :hover, :focus-within,
   and [data-open='true'] — so the panel is reachable by pointer and by
   keyboard even when site.js is absent. The script adds click, Escape, and
   the aria-expanded bookkeeping on top; it is never the only way in.
   -------------------------------------------------------------------- */
.menu {
  /* Static on purpose — .masthead__inner is the panel's containing block.
     :hover and :focus-within still reach here through the DOM tree. */
  position: static;
}

.menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--fog);
}

.menu:hover .menu__trigger,
.menu:focus-within .menu__trigger,
.menu[data-open='true'] .menu__trigger {
  color: var(--paper);
}

.menu__chev {
  transition: transform 0.18s ease;
}

.menu:hover .menu__chev,
.menu:focus-within .menu__chev,
.menu[data-open='true'] .menu__chev {
  transform: rotate(180deg);
}

.menu__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  /* Right edge flush with the nav, so the panel reads as hanging off the
     trigger rather than floating loose in the header. */
  left: auto;
  /* .wrap's gutter is padding on this same element, and an absolutely
     positioned box resolves against the padding box — so right: 0 would hang
     a full gutter past the nav. Inset by the gutter to sit flush with it. */
  right: var(--gutter);
  max-width: min(62rem, calc(100% - 2 * var(--gutter)));
  z-index: 30;
  padding: 1.75rem 2rem;
  background: var(--ink-raised);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow);
  /* Closed state. visibility (not display) keeps the panel focusable-after-
     transition and lets the fade actually run. */
  opacity: 0;
  visibility: hidden;
  translate: 0 -0.35rem;
  transition:
    opacity 0.16s ease,
    translate 0.16s ease,
    visibility 0s linear 0.16s;
}

.menu:hover .menu__panel,
.menu:focus-within .menu__panel,
.menu[data-open='true'] .menu__panel {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}

/* A hover-bridge across the gap between trigger and panel, so the panel does
   not snap shut while the pointer travels to it. */
.menu__panel::before {
  content: '';
  position: absolute;
  inset: -0.85rem 0 100% 0;
}

.menu__cols {
  display: grid;
  grid-template-columns: 1fr 16rem;
  gap: 2.25rem;
}

.menu__label {
  margin: 0 0 0.9rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fog-dim);
}

.menu__main,
.menu__text {
  min-width: 0;
}

.menu__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  padding: 0.6rem;
  margin: -0.6rem 0 0 -0.6rem;
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
}

a.menu__item:hover,
a.menu__item:focus-visible {
  background: color-mix(in srgb, var(--ember) 7%, transparent);
}

.menu__icon {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--ink-sunken);
  color: var(--fog);
}

a.menu__item:hover .menu__icon {
  border-color: var(--ember);
}

.menu__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--paper);
}

.menu__what {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--fog);
  text-wrap: pretty;
}

.menu__arrow {
  color: var(--ember);
  transition: translate 0.16s ease;
}

a.menu__item:hover .menu__arrow,
.menu__rail a:hover .menu__arrow {
  translate: 0.2rem 0;
}

/* Surfaces whose page is not written yet: shown, described, not linked —
   a dead link would be worse than an honest "not yet". */
.menu__item--soon {
  opacity: 0.62;
}

.menu__soon {
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fog-dim);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.05rem 0.3rem;
}

.menu__rail {
  padding-left: 1.5rem;
  border-left: 1px solid var(--rule-soft);
}

.menu__label--spaced {
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-soft);
}

.menu__rail ul {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__rail a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--fog);
  text-decoration: none;
}

.menu__rail a:hover {
  color: var(--paper);
}

.menu__rail-foot {
  margin: 1.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--fog-dim);
  text-wrap: pretty;
}

@media (max-width: 60rem) {
  .menu__cols {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .menu__rail {
    padding-left: 0;
    padding-top: 1.25rem;
    border-left: 0;
    border-top: 1px solid var(--rule-soft);
  }
}

@media (max-width: 46rem) {
  .menu__panel {
    /* Anchored to the viewport rather than the trigger — at this width the
       trigger sits too close to the right edge to center a panel under it.
       Sized in vw rather than %, so the width is the screen's and not some
       ancestor's: .masthead's backdrop-filter already makes it the containing
       block for fixed descendants, and a percentage would follow it there. */
    position: fixed;
    top: auto;
    left: var(--gutter);
    right: auto;
    width: calc(100vw - 2 * var(--gutter));
    max-width: none;
    translate: 0 -0.35rem;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
  }

  .menu:hover .menu__panel,
  .menu:focus-within .menu__panel,
  .menu[data-open='true'] .menu__panel {
    translate: 0 0;
  }

  .menu__list {
    grid-template-columns: 1fr;
  }
}

/* Touch devices fire :hover on tap and then keep it latched, which leaves the
   panel stuck open. There, only the script's explicit state opens it. */
@media (hover: none) {
  .menu:hover .menu__panel,
  .menu:focus-within .menu__panel {
    opacity: 0;
    visibility: hidden;
  }

  .menu[data-open='true'] .menu__panel {
    opacity: 1;
    visibility: visible;
  }
}

/* ------------------------------------------------------- feature pages
   A surface page opens narrower and quieter than the home page: no canvas,
   no second column, because the argument here is the detail rather than the
   demo. Everything below the fold reuses .band / .lede / .card / .ledger.
   -------------------------------------------------------------------- */
.fhero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 3vw, 2rem);
  max-width: 44rem;
}

.fhero h1 {
  font-size: clamp(1.9rem, 4.6vw, 3rem);
  letter-spacing: -0.045em;
}

.fhero h1 em {
  font-style: normal;
  color: var(--ember);
}

.fhero__sub {
  color: var(--fog);
  font-size: 1.0625rem;
  max-width: var(--measure);
}

.fhero__trail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fog-dim);
}

.fhero__trail a {
  color: var(--fog);
  text-decoration: none;
}

.fhero__trail a:hover {
  color: var(--ember);
}

.fhero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.25rem;
  margin-top: 0.35rem;
}

/* An aside that qualifies the block above it — the "and here's the catch"
   voice. Same role as .panel__note, but at body size and outside a panel. */
.note {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fog-dim);
  max-width: var(--measure);
  border-left: 2px solid var(--rule);
  padding-left: 0.9rem;
}

.note b {
  color: var(--paper);
  font-weight: 600;
}

/* Half-width cards give a code block roughly 50 monospace columns. Dropping a
   step keeps request/response samples from clipping at their own right edge —
   they still scroll, but a sample you have to scroll is a sample nobody reads. */
.card .wire {
  font-size: 0.75rem;
}

/* Auto table layout sizes columns from content, which lets one long cell push
   a table past its container. Feature-page tables declare their own widths
   through a <colgroup> and opt into honouring them. */
.ledger--fixed {
  table-layout: fixed;
}

.ledger--states th:nth-child(1) {
  width: 18%;
}
.ledger--states th:nth-child(3) {
  width: 16%;
}

.ledger--refusals th:nth-child(1) {
  width: 27%;
}
.ledger--refusals th:nth-child(2) {
  width: 19%;
}

.ledger--tiers th:nth-child(2) {
  width: 22%;
}

/* A head-to-head matrix: a narrow dimension column, then equal columns for the
   two products, so neither side gets more room to argue in than the other. */
.ledger--vs th:nth-child(2),
.ledger--vs th:nth-child(3) {
  width: 37%;
}

/* The "pick them if / pick us if" lists that open every comparison page. */
.picks {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fog);
}

.picks li {
  padding-left: 1.1rem;
  position: relative;
  text-wrap: pretty;
}

.picks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.45rem;
  height: 1px;
  background: var(--ember);
}

.picks b {
  color: var(--paper);
  font-weight: 600;
}

/* The category claim. Deliberately the most assertive type on the site — it is
   the one statement we make that no competitor can currently match, and it
   carries its own proof immediately underneath rather than asking to be
   believed. Ambition is only earned when the working is one click away. */
.claim {
  border-left: 2px solid var(--ember);
  padding-left: clamp(1rem, 2.5vw, 1.75rem);
}

.claim__line {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: var(--paper);
  text-wrap: balance;
}

.claim__line em {
  font-style: normal;
  color: var(--ember);
}

.claim__proof {
  margin-top: 0.9rem;
  max-width: var(--measure);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--fog);
  text-wrap: pretty;
}

.claim__proof a,
.claim--slim a {
  color: var(--fog);
  text-underline-offset: 0.2em;
}

.claim__proof a:hover {
  color: var(--ember);
}

/* On a comparison page the page itself is the evidence, so the claim shrinks
   to a single line and gets out of the way. */
.claim--slim {
  margin-block: clamp(1rem, 3vw, 2rem);
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(0.9375rem, 1.6vw, 1.0625rem);
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: var(--paper);
  max-width: 46rem;
  text-wrap: pretty;
}

.claim--slim em {
  font-style: normal;
  color: var(--ember);
}

.note a {
  color: var(--fog);
  text-underline-offset: 0.2em;
}

.note a:hover {
  color: var(--ember);
}

@media (max-width: 46rem) {
  /* Below this the columns cannot hold their share without shredding the text
     one word per line, so the table keeps a usable width and .scroll-x pans. */
  .ledger--fixed {
    min-width: 40rem;
  }
}

code {
  font-family: var(--mono);
  font-size: 0.875em;
  color: var(--paper);
  background: var(--ink-sunken);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  padding: 0.05em 0.3em;
}

.ledger code {
  background: none;
  border: 0;
  padding: 0;
  color: var(--fog);
}

/* --------------------------------------------------------------- hero */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hero h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.4rem);
  letter-spacing: -0.045em;
}

.hero h1 em {
  font-style: normal;
  color: var(--ember);
}

.hero__sub {
  color: var(--fog);
  font-size: 1.0625rem;
  max-width: 30rem;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.hero__fine {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--fog-dim);
  letter-spacing: 0.02em;
}

/* --------------------------------------------------- code chip / copy */
.chip {
  border: 1px solid var(--rule);
  background: var(--ink-sunken);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0.5rem;
  max-width: 32rem;
}

.chip pre {
  margin: 0;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--paper);
  flex: 1 1 auto;
  min-width: 0;
}

.chip pre .p {
  color: var(--ember);
  user-select: none;
}

.copy {
  flex: none;
  border: 0;
  border-left: 1px solid var(--rule);
  background: transparent;
  color: var(--fog);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-inline: 0.9rem;
  cursor: pointer;
  transition: color 0.18s ease;
}

.copy:hover {
  color: var(--ember);
}

.copy[data-state='done'] {
  color: var(--ok);
}

/* ------------------------------------------------------------- canvas */
.scope {
  border: 1px solid var(--rule);
  background: var(--canvas-bg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.scope__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog-dim);
}

.scope canvas {
  display: block;
  width: 100%;
  height: clamp(230px, 34vw, 330px);
}

.scope__tally {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--fog);
}

.scope__tally b {
  font-weight: 700;
  color: var(--paper);
}

.swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 0.45rem;
  vertical-align: 0.02em;
}

.swatch--ok {
  background: var(--ok);
}
.swatch--gate {
  background: var(--gate);
}
.swatch--block {
  background: var(--block);
}

/* ----------------------------------------------------------- pipeline */
.pipe {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 54rem) {
  .pipe {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: 2rem;
  }
}

.pipe__rail {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-left: 1px solid var(--rule);
}

.step {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  padding: 0.85rem 0.9rem;
  color: var(--fog);
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    color 0.18s ease,
    background 0.18s ease;
}

.step::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 0.18s ease;
}

.step:hover {
  color: var(--paper);
  background: var(--ember-soft);
}

.step[aria-selected='true'] {
  color: var(--paper);
  background: var(--ember-soft);
}

.step[aria-selected='true']::before {
  background: var(--ember);
}

.step__n {
  font-size: 0.6875rem;
  color: var(--fog-dim);
  font-variant-numeric: tabular-nums;
}

.step[aria-selected='true'] .step__n {
  color: var(--ember);
}

.step__code {
  margin-left: auto;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--fog-dim);
}

.panel {
  border: 1px solid var(--rule);
  background: var(--ink-raised);
  box-shadow: var(--shadow);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: 0;
}

.panel h3 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.panel p {
  color: var(--fog);
  max-width: var(--measure);
}

.panel__note {
  font-size: 0.9375rem;
  color: var(--fog-dim);
  border-left: 2px solid var(--rule);
  padding-left: 0.9rem;
}

.wire {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.8;
  background: var(--ink-sunken);
  border: 1px solid var(--rule-soft);
  padding: 0.9rem 1rem;
  overflow-x: auto;
  margin: 0;
  color: var(--fog);
}

.wire b {
  font-weight: 700;
  color: var(--paper);
}

.wire .s-ok {
  color: var(--ok);
}
.wire .s-gate {
  color: var(--gate);
}
.wire .s-block {
  color: var(--block);
}
.wire .s-em {
  color: var(--ember);
}
/* An aside inside a sample. Deliberately not .s-block — red there reads as a
   failure, and these annotations sit inside successful responses. */
.wire .s-dim {
  color: var(--fog-dim);
}

/* -------------------------------------------------------- sovereignty */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 54rem) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.card {
  border: 1px solid var(--rule);
  background: var(--ink-raised);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  min-width: 0;
}

.card h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

.card p {
  color: var(--fog);
  font-size: 0.9375rem;
}

.card__kicker {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ember);
}

.keyroom {
  border: 1px solid var(--rule);
  background: var(--ink-sunken);
  display: flex;
  flex-direction: column;
}

.keyroom__switch {
  display: flex;
  border-bottom: 1px solid var(--rule);
}

.keyroom__switch button {
  flex: 1;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule);
  padding: 0.7rem 0.9rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--fog);
  cursor: pointer;
}

.keyroom__switch button:last-child {
  border-right: 0;
}

.keyroom__switch button[aria-selected='true'] {
  color: var(--paper);
  background: var(--ember-soft);
  box-shadow: inset 0 -2px 0 var(--ember);
}

.keyroom__stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 1.6rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--fog);
}

.zone {
  border: 1px dashed var(--rule);
  padding: 0.9rem 0.75rem;
  text-align: center;
  min-height: 5.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  transition: border-color 0.3s ease;
}

.zone--yours {
  border-color: var(--ember);
}

.zone__name {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.625rem;
  color: var(--fog-dim);
}

.key {
  font-size: 1.1rem;
  line-height: 1;
  transition: opacity 0.35s ease;
}

.key--live {
  color: var(--ember);
}

.key--gone {
  opacity: 0.18;
}

.arrow {
  color: var(--fog-dim);
  font-size: 1rem;
}

.keyroom__caption {
  border-top: 1px solid var(--rule);
  padding: 0.8rem 1.1rem;
  font-size: 0.875rem;
  color: var(--fog);
}

.keyroom__caption b {
  color: var(--paper);
  font-weight: 600;
}

/* ----------------------------------------------------------- 402 gate */
.gate {
  border: 1px solid var(--rule);
  background: var(--ink-raised);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.gate__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 1.1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--gate);
}

.gate__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.gate__status .dot {
  background: var(--gate);
}

.gate__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

@media (min-width: 54rem) {
  .gate__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.75rem;
  }
}

.gate__challenge {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.trace {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  color: var(--fog);
  min-height: 6.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.trace span {
  opacity: 0;
  transform: translateY(2px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.trace span.on {
  opacity: 1;
  transform: none;
}

.trace .ok {
  color: var(--ok);
}

.vault {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: relative;
}

.vault__locked {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
  justify-content: center;
  min-height: 100%;
  padding: 1.1rem;
  border: 1px dashed var(--rule);
  color: var(--fog-dim);
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.vault__open {
  display: none;
  flex-direction: column;
  gap: 0.9rem;
}

.vault__hint {
  opacity: 0.55;
}

.scroll-x {
  overflow-x: auto;
}

.gate.is-open .vault__locked {
  display: none;
}

.gate.is-open .vault__open {
  display: flex;
  animation: rise 0.5s ease both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.ledger th,
.ledger td {
  text-align: left;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}

.ledger th {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fog-dim);
  font-weight: 500;
}

.ledger td:first-child {
  color: var(--paper);
}

/* A comparison matrix labels its rows as well as its columns. Those cells are
   headers semantically, but they read as content — so they keep the body
   type rather than the column headers' small-caps mono. */
.ledger th[scope='row'] {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--paper);
}

/* Written for the home page's two-column table, whose last cell is a short
   tier pill. Feature tables put prose in the last column, where mono + nowrap
   would push the table past its own container — so they opt out. */
.ledger:not(.ledger--fixed) td:last-child {
  font-family: var(--mono);
  font-size: 0.75rem;
  white-space: nowrap;
}

.pill {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border: 1px solid currentColor;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.625rem;
}

.pill--oss {
  color: var(--ok);
}

.pill--com {
  color: var(--ember);
}

.gate__line {
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--paper);
  letter-spacing: -0.01em;
}

.gate__foot {
  border-top: 1px solid var(--rule);
  padding: 0.8rem 1.1rem;
  font-size: 0.8125rem;
  color: var(--fog-dim);
}

/* ------------------------------------------------------------- run it */
.tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--rule);
  border-bottom: 0;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}

.tabs button {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule);
  padding: 0.6rem 1rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--fog);
  cursor: pointer;
  white-space: nowrap;
}

.tabs button:last-child {
  border-right: 0;
}

.tabs button[aria-selected='true'] {
  color: var(--paper);
  background: var(--ember-soft);
  box-shadow: inset 0 -2px 0 var(--ember);
}

.runner {
  border: 1px solid var(--rule);
  background: var(--ink-sunken);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.runner pre {
  margin: 0;
  padding: 1.1rem 1.2rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.85;
  flex: 1 1 auto;
  min-width: 0;
}

.runner .p {
  color: var(--ember);
  user-select: none;
}

.runner .c {
  color: var(--fog-dim);
}

.runner .v {
  color: var(--ok);
}

/* ------------------------------------------------------------- footer */
.stack-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .stack-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.stack-card {
  border: 1px solid var(--rule);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  transition: border-color 0.18s ease;
}

.stack-card:hover {
  border-color: var(--ember);
}

.stack-card__name {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.9375rem;
}

.stack-card__what {
  color: var(--fog);
  font-size: 0.875rem;
}

.stack-card--self {
  background: var(--ember-soft);
  border-color: var(--ember);
}

.colophon {
  border-top: 1px solid var(--rule);
  padding-block: 2.5rem 3.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--fog-dim);
}

.colophon nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.colophon a {
  text-decoration: none;
}

.colophon a:hover {
  color: var(--ember);
}

/* --------------------------------------------------------- reveal fx
   The hidden state is scoped to (scripting: enabled), because .in is added by
   script. Unscoped, a browser with JS off would render every band below the
   hero at opacity 0 — the whole page, blank, with no way to recover. Here the
   effect simply does not exist unless something can undo it. */
@media (scripting: enabled) {
  .rise {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
  }

  .rise.in {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rise,
  .trace span,
  .gate.is-open .vault__open {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
}