/* Graphe — the page.
   The palette and the face are the app's own, so the site reads as the same
   room with the lights down. Dark bands are where you watch it work; the two
   paper bands are where the argument gets made in words. */

@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Ground. Warm brown-black rather than neutral — the app's dark theme. */
  --night: #131110;
  --night-raised: #1b1817;
  --night-sunken: #0d0b0b;
  --edge: #2a2523;
  --edge-strong: #3b3330;

  /* Paper. The app's light theme, unchanged. */
  --paper: #fbfbfa;
  --paper-sunken: #f2f2f0;
  --paper-edge: #e4e4e1;
  --ink: #1a1a19;
  --ink-muted: #6e6e68;

  /* The one accent, in its two lights. */
  --coral: #e0764f;
  --coral-soft: rgba(224, 118, 79, 0.14);
  --brick: #b8492c;
  --haze: #a8a099;
  /* The quietest text on the page still has to clear AA — it carries the cells
     in "sixteen more things", which is body copy however small it looks. */
  --haze-dim: #948b83;

  --font: 'Satoshi', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* The system mono. IBM Plex was a render-blocking request to Google for a
     handful of small labels; the app draws its own labels in the platform's
     mono anyway, and this page should not wait on a third party to say
     "watch the loop". */
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* Motion — the app's own curves, so the two feel related. */
  --ease-out: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-move: cubic-bezier(0.645, 0.045, 0.355, 1);
  /* For the diagrams: leaves fast, lands almost without arriving. */
  --ease-settle: cubic-bezier(0.23, 1, 0.32, 1);

  --wide: 1240px;
  --full: 1480px;
  --measure: 62ch;

  --pad-x: clamp(20px, 5vw, 64px);
  --band-y: clamp(80px, 11vh, 160px);

  /* Nearly square. Everything here is a screenshot of an interface, a rule, or
     a block of text — none of it is a bubble, and rounding it all until it is
     one is the single loudest tell of a page nobody chose the shape of. */
  --r-sm: 3px;
  --r-md: 5px;
  --r-lg: 8px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;

  /* The bar down the side, in the page's own colours.
     Left alone, macOS draws a light grey classic bar over a near-black page —
     somebody else's furniture sitting on top of the work, and the one thing on
     here the palette does not reach. Standard properties first, because they
     win wherever they are understood; the webkit ones below are for the
     browsers that do not understand them yet, and are ignored where they do. */
  scrollbar-width: thin;
  scrollbar-color: var(--edge-strong) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--edge-strong);
  /* Held off the edge by its own transparent border, so it reads as floating
     down the side rather than welded to it. */
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: #574c48;
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

body {
  margin: 0;
  background: var(--night);
  color: #f0ece9;
  font-family: var(--font);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  line-height: 1.62;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

p {
  margin: 0;
}

em {
  font-style: normal;
  color: var(--coral);
}

a {
  color: inherit;
}

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

.mono {
  font-family: var(--mono);
  font-size: 0.8em;
  letter-spacing: 0;
}

.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 99;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--coral);
  color: var(--night);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 200ms var(--ease-out);
}

.skip:focus-visible {
  transform: translateY(0);
}

/* ─────────────────────────────────────────────────────────────── nav ── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 240ms ease, border-color 240ms ease;
}

.nav.is-stuck {
  background: rgba(19, 17, 16, 0.94);
  border-bottom-color: var(--edge);
}

.nav__inner {
  max-width: var(--full);
  margin: 0 auto;
  padding: 14px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 24px;
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-size: 1.0625rem;
}

.mark__glyph {
  width: 26px;
  height: 26px;
  flex: none;
}

.mark__version {
  margin-inline-start: 2px;
  padding: 3px 7px;
  border: 1px solid rgba(224, 118, 79, 0.4);
  border-radius: 2px;
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  font-weight: 500;
}

.mark__glyph rect {
  fill: var(--coral);
}

.mark__nodes circle {
  fill: var(--night);
}

.mark__nodes path {
  stroke: var(--night);
  fill: none;
}

.nav__links {
  display: flex;
  gap: 26px;
  margin-inline-start: auto;
  font-size: 0.9375rem;
  color: var(--haze);
}

.nav__links a {
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms ease;
}

.nav__links a:hover {
  color: #f0ece9;
}

.nav__end {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  height: 36px;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--haze);
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}

.chip:hover {
  border-color: var(--edge-strong);
  color: #f0ece9;
}

.chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
}

.chip__mark {
  flex: none;
  opacity: 0.85;
}

.chip--repo:hover .chip__mark {
  opacity: 1;
}

/* ───────────────────────────────────────────────────────────── buttons ── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms var(--ease-out), background-color 180ms ease, border-color 180ms ease,
    color 180ms ease;
}


.btn:active {
  transform: scale(0.97);
}

/* The mark sits with the word rather than against it, and a touch high: the
   apple's stem reads above its own box, so centring it by the numbers looks
   low. One class for all three buttons — two marks on one button is what
   happens when a second gets added beside a first nobody noticed. */
.btn__apple {
  flex: none;
  margin-inline-end: 8px;
  margin-block-start: -2px;
}

.btn--small .btn__apple {
  width: 13px;
  height: 15px;
  margin-inline-end: 6px;
  margin-block-start: -1px;
}



.btn--primary {
  background: var(--coral);
  color: #1a0f0a;
}

.btn--ghost {
  border-color: var(--edge-strong);
  color: #f0ece9;
}

.btn--small {
  padding: 0 18px;
  height: 36px;
  font-size: 0.9375rem;
  background: #f0ece9;
  color: var(--night);
}

.btn--tiny {
  padding: 7px 13px;
  font-size: 0.8125rem;
  background: var(--coral);
  color: #1a0f0a;
}

.btn--quiet {
  background: transparent;
  border-color: var(--edge-strong);
  color: var(--haze);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: #eb8863;
  }

  .btn--ghost:hover {
    border-color: var(--haze-dim);
    background: rgba(255, 255, 255, 0.04);
  }

  .btn--small:hover {
    background: #fff;
  }
}

/* ───────────────────────────────────────────────────────────── bands ── */

.band {
  position: relative;
  padding: var(--band-y) var(--pad-x);
}

.band > * {
  position: relative;
  z-index: 1;
}

.band--paper {
  background: var(--paper);
  color: var(--ink);
}

.band--paper em {
  color: var(--brick);
}

.band--away {
  background: var(--night-sunken);
}

.band--promises {
  border-top: 1px solid var(--edge);
}

/* ─────────────────────────────────────────────── measured proof ── */

/* This is deliberately an instrument, not a dashboard: two findings, their
   actual comparison rows, then the method. The barely-there scan lines make it
   feel like a recorded result without inventing another decorative object. */
.band--evidence {
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(224, 118, 79, 0.045) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(rgba(224, 118, 79, 0.035) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(70% 90% at 100% 0%, rgba(224, 118, 79, 0.12), transparent 64%),
    var(--night-sunken);
}

.evidence__head {
  margin-bottom: clamp(36px, 5vw, 62px);
}

.evidence__head .head__lead {
  max-width: 61ch;
}

.evidence-board {
  max-width: var(--full);
  margin: 0 auto;
  border: 1px solid var(--edge-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(27, 24, 23, 0.92);
  box-shadow: 0 40px 100px -55px #000;
}

.evidence-board__bar {
  min-height: 52px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--edge);
  background: rgba(13, 11, 11, 0.72);
  color: var(--haze-dim);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
}

.evidence-board__stamp {
  color: var(--coral);
  text-align: right;
}

.evidence-board__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--edge);
}

.proof-card {
  min-width: 0;
  padding: clamp(26px, 3vw, 42px);
  min-height: 416px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--night-raised);
}

.proof-card + .proof-card {
  border-top: 0;
}

.proof-card--safety {
  background: linear-gradient(135deg, rgba(224, 118, 79, 0.08), transparent 58%), var(--night-raised);
}

.proof-card--quality {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 56%), var(--night-raised);
}

.proof-card--boundary {
  background: linear-gradient(225deg, rgba(224, 118, 79, 0.06), transparent 54%), var(--night-raised);
}

.proof-card__kicker {
  margin-bottom: 16px;
  color: var(--coral);
  font-size: 0.6875rem;
  letter-spacing: 0.15em;
}

.proof-card h3 {
  max-width: 13ch;
  font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.5rem);
  line-height: 0.98;
}

.proof-card__intro > p:not(.proof-card__kicker):not(.proof-card__result) {
  max-width: 35ch;
  margin-top: 16px;
  color: var(--haze);
  font-size: 0.975rem;
  line-height: 1.55;
}

.proof-card__result {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin-top: auto;
  padding-top: 26px;
}

.proof-card__result strong {
  color: var(--coral);
  font-size: clamp(3.25rem, 2.25rem + 4vw, 5.25rem);
  font-weight: 850;
  letter-spacing: -0.075em;
  line-height: 0.75;
}

.proof-card__result span {
  color: var(--haze-dim);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.proof-card--quality .proof-card__result strong,
.proof-card--boundary .proof-card__result strong {
  font-size: clamp(2.75rem, 1.9rem + 3vw, 4.25rem);
}

.proof-card__direction {
  margin: 16px 0 13px;
  color: var(--haze-dim);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
}

.proof-chart,
.safety-chart {
  display: grid;
  gap: 15px;
  width: 100%;
}

.proof-chart__row {
  display: grid;
  grid-template-columns: minmax(106px, auto) minmax(80px, 1fr) 40px;
  align-items: center;
  gap: 12px;
  color: var(--haze);
  font-size: 0.875rem;
}

.proof-chart__row small {
  display: block;
  margin-top: 2px;
  color: var(--haze-dim);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
}

.proof-chart__row b,
.safety-chart__row b {
  color: var(--haze);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.proof-chart__row--graphe {
  color: #f7eae4;
  font-weight: 700;
}

.proof-chart__row--graphe b {
  color: var(--coral);
}

.proof-chart__track {
  position: relative;
  height: 9px;
  overflow: hidden;
  background: var(--edge);
  border-radius: 2px;
}

.proof-chart__track i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--haze-dim);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 740ms var(--ease-settle);
  transition-delay: 160ms;
}

.proof-chart__row--graphe .proof-chart__track i {
  background: linear-gradient(90deg, var(--brick), var(--coral));
}

.evidence-board.is-in .proof-chart__track i {
  transform: scaleX(var(--fill));
}

.safety-chart__key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  color: var(--haze-dim);
  font-size: 0.625rem;
  letter-spacing: 0.03em;
}

.safety-chart__key span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.safety-chart__key i {
  width: 7px;
  height: 7px;
  border-radius: 1px;
}

.key--protected { background: var(--coral); }
.key--escaped { background: #5e5551; }
.key--quiet { background: var(--edge-strong); }

.safety-chart__row {
  display: grid;
  grid-template-columns: 75px minmax(120px, 1fr) 72px;
  align-items: center;
  gap: 12px;
  color: var(--haze);
  font-size: 0.875rem;
}

.safety-chart__row--graphe {
  color: #f7eae4;
  font-weight: 700;
}

.safety-chart__rail {
  display: grid;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  gap: 2px;
  height: 9px;
  background: var(--edge);
}

.safety-chart__rail--eight {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.safety-chart__rail i {
  grid-column: span var(--n);
  opacity: 0;
  transform: scaleX(0.7);
  transform-origin: left center;
  transition: opacity 360ms var(--ease-out), transform 520ms var(--ease-settle);
  transition-delay: 260ms;
}

.safety-chart__rail .protected { background: var(--coral); }
.safety-chart__rail .escaped { background: #5e5551; }
.safety-chart__rail .quiet { background: var(--edge-strong); }

.evidence-board.is-in .safety-chart__rail i {
  opacity: 1;
  transform: scaleX(1);
}

.evidence__floor {
  max-width: var(--full);
  margin: 18px auto 0;
  color: var(--haze);
  font-size: 0.9375rem;
}

.evidence__floor span {
  margin-right: 9px;
  color: var(--coral);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
}

.evidence__floor b {
  color: #f0ece9;
}

/* The method is part of the argument, but it should not compete with the two
   results above. It begins as a compact protocol and expands in the same place,
   so there is no detour between the chart and its qualification. */
.yours__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 40px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--paper-edge);
}

@media (max-width: 900px) {
  .yours__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

.yours__grid article p.mono {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}

.yours__grid h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.yours__grid article > p:last-child {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-muted);
}

.yours__foot {
  margin: 36px 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-muted);
}


.eyebrow {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 18px;
}

.band--paper .eyebrow {
  color: var(--brick);
}

/* Every band shares one left edge. The page had two container widths, so a
   heading and the grid beneath it began in different places — which is the kind
   of thing nobody names and everybody sees. */
.head {
  max-width: var(--full);
  margin: 0 auto clamp(48px, 6vw, 84px);
}

.head__title {
  font-size: clamp(2.125rem, 1.3rem + 3.4vw, 4rem);
  max-width: 20ch;
}

.head__lead {
  margin-top: 22px;
  max-width: 56ch;
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--haze);
}

.band--paper .head__lead {
  color: var(--ink-muted);
}

.lead {
  color: var(--haze);
  max-width: var(--measure);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}

/* ────────────────────────────────────────────────────────────── hero ── */

.band--hero {
  /* Tight enough that the window below is part of the first screen. The page
     argues in one sentence and then shows the thing; a first screen that ends
     before the thing is a page that has not shown anybody anything. */
  padding-top: clamp(28px, 4.5vh, 60px);
  padding-bottom: clamp(60px, 8vh, 110px);
  text-align: center;
  overflow: hidden;
}

.glow {
  position: absolute;
  inset-inline: -20%;
  top: -280px;
  height: 900px;
  z-index: 0;
  background: radial-gradient(
    46% 42% at 50% 42%,
    rgba(224, 118, 79, 0.2) 0%,
    rgba(224, 118, 79, 0.07) 42%,
    transparent 72%
  );
  animation: breathe 22s var(--ease-move) infinite;
  pointer-events: none;
}

/* Off the compositor entirely once it cannot be seen. A decorative glow has no
   business holding a frame budget while somebody reads the rest of the page. */
@media (prefers-reduced-motion: reduce) {
  .glow {
    animation: none;
  }
}

@keyframes breathe {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.hero {
  max-width: 960px;
  margin: 0 auto;
}

.hero__title {
  font-size: clamp(2.625rem, 1.1rem + 5.6vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.97;
}

/* The one bold thing: the second line is framed the way a picture is, with the
   corner marks that go round a photograph before it is cropped. */

.shot {
  position: relative;
  display: inline-block;
  padding: 0.06em 0.16em 0.1em;
}

.shot__c {
  position: absolute;
  width: 0.26em;
  height: 0.26em;
  border: 2px solid var(--coral);
  opacity: 0;
  transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-expo);
  transition-delay: 620ms;
}

.is-in .shot__c {
  opacity: 0.85;
  transform: none;
}

.shot__c--tl {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
  transform: translate(8px, 8px);
}

.shot__c--tr {
  top: 0;
  right: 0;
  border-left: 0;
  border-bottom: 0;
  transform: translate(-8px, 8px);
}

.shot__c--bl {
  bottom: 0;
  left: 0;
  border-right: 0;
  border-top: 0;
  transform: translate(8px, -8px);
}

.shot__c--br {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
  transform: translate(-8px, -8px);
}

.hero__lead {
  margin: 22px auto 0;
  max-width: 70ch;
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.3125rem);
  color: var(--haze);
}

.hero__actions {
  /* The sentence above is four lines and does the arguing; the buttons are the
     answer to it. They were close enough to read as part of the paragraph. */
  margin-top: clamp(34px, 4vw, 52px);
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero__fine {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--haze-dim);
}

/* The window. One frame, four real screens. */

.stage {
  margin: clamp(26px, 3.2vw, 42px) auto 0;
  max-width: var(--full);
}

.stage__tabs {
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.tab {
  padding: 8px 15px;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--haze);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 150ms var(--ease-out), color 180ms ease, background-color 180ms ease,
    border-color 180ms ease;
}

.tab:active {
  transform: scale(0.97);
}

.tab.is-on {
  background: var(--coral-soft);
  border-color: rgba(224, 118, 79, 0.45);
  color: var(--coral);
}

@media (hover: hover) and (pointer: fine) {
  .tab:hover:not(.is-on) {
    color: #f0ece9;
    border-color: var(--edge-strong);
  }
}

.frame {
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--night-raised);
  overflow: hidden;
  box-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--edge);
  background: var(--night-sunken);
}

.frame__dots {
  display: inline-flex;
  gap: 7px;
}

.frame__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--edge-strong);
}

.frame__name {
  color: var(--haze-dim);
  font-size: 0.75rem;
}

.frame__screens {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--night-sunken);
}

.screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transform: scale(1.012);
  /* Fade and scale only. A blur here kept a blurred copy of all four screens
     alive at once — three of them never visible — and re-ran the filter over a
     full-size photograph for the whole of every switch. */
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out);
}

.screen.is-on {
  opacity: 1;
  transform: scale(1);
}

.stage__cap {
  margin-top: 16px;
  text-align: center;
  color: var(--haze-dim);
  font-size: 0.75rem;
}

/* ──────────────────────────────────────────────────────────── pillars ── */

.pillars {
  max-width: var(--full);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

/* Two rows of two, rather than a row of four cards too thin to read. */
@media (min-width: 900px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

.pillar {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--night-raised), var(--night));
  overflow: hidden;
  transition: border-color 220ms ease, transform 220ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .pillar:hover {
    border-color: var(--edge-strong);
    transform: translateY(-3px);
  }
}

.pillar__no {
  color: var(--coral);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

.pillar h3 {
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  margin-bottom: 14px;
}

.pillar p {
  color: var(--haze);
  font-size: 1rem;
  margin-bottom: 26px;
}

/* How it compares. A table because it is one; the wrapper scrolls so the
   narrow end of the page never pushes the whole layout sideways. */
.vs {
  max-width: var(--full);
  margin: 0 auto;
  overflow-x: auto;
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--night);
}

.vs__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  text-align: left;
}

.vs__table th,
.vs__table td {
  padding: 16px 20px;
  border-bottom: 1px solid var(--edge);
}

.vs__table tbody tr:last-child th,
.vs__table tbody tr:last-child td {
  border-bottom: 0;
}

.vs__table thead th {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--haze-dim);
  vertical-align: bottom;
}

.vs__table tbody th {
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

.vs__table td {
  color: var(--haze-dim);
  font-size: 1.125rem;
  text-align: center;
  width: 15%;
}

.vs__table thead th + th {
  text-align: center;
}

.vs__us {
  background: var(--coral-soft);
}

.vs__us th {
  color: var(--coral);
}

.vs__table td.vs__yes {
  color: var(--coral);
  font-size: 1.25rem;
}

/* Named for the reader who is not looking at it. */
.vs__off {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vs__foot {
  max-width: var(--full);
  margin: 20px auto 0;
}

.vs__note {
  max-width: var(--measure);
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.7;
  color: var(--haze-dim);
}

/* A peek at the real thing, framed rather than bled. These are crops of an
   interface that already has its own edges and padding; running them to the
   card's edge put one of their margins against nothing and the other against
   the card, which reads as a picture that slipped. */
.pillar__shot {
  margin-top: auto;
  width: 100%;
  height: 240px;
  object-fit: cover;
  object-position: top left;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--night-sunken);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}

/* ─────────────────────────────────────────────────────────────── steps ── */

/* A numbered sequence, set as one. The number is a figure in the margin, not a
   badge on a rail — a step is a line in a list of instructions, and drawing it
   as a station on a track is decoration standing in for structure. */
.steps {
  max-width: var(--full);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--paper-edge);
}

.step {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 clamp(16px, 2vw, 28px);
  padding: 26px 0;
  border-bottom: 1px solid var(--paper-edge);
}

.step__no {
  font-size: 0.8125rem;
  line-height: 1.7;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  transition: color 260ms ease;
}

.step.is-here .step__no {
  color: var(--brick);
}

.step__body h3 {
  font-size: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  margin-bottom: 7px;
}

.step__body p {
  color: var(--ink-muted);
  max-width: 52ch;
}

/* ─────────────────────────────────────────────────────────────── pi ── */

.split {
  max-width: var(--full);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.split .head__title {
  margin-bottom: 26px;
}

.split .lead + .lead {
  margin-top: 18px;
}

.facts {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px 28px;
  border-top: 1px solid var(--edge);
  padding-top: 26px;
  color: var(--haze);
  font-size: 0.9375rem;
}

.facts .mono {
  color: var(--coral);
  font-size: 0.875rem;
  margin-inline-end: 6px;
}

/* What comes from where, said as a list rather than drawn as rings. The rings
   looked like an architecture diagram and carried no information; this is the
   argument itself — pi is a serious harness, and this is the size of the layer
   above it. */
.from {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  overflow: hidden;
}

.from__side {
  background: var(--night);
  padding: 24px 24px 28px;
}

.from__side--ours {
  background: linear-gradient(180deg, rgba(224, 118, 79, 0.06), transparent 55%), var(--night);
}

.from__who {
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--haze-dim);
  margin-bottom: 16px;
}

.from__side--ours .from__who {
  color: var(--coral);
}

.from__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--haze);
}

.from__list li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
}

.from__list li::before {
  content: '';
  width: 5px;
  height: 5px;
  margin-top: 0.55em;
  background: var(--edge-strong);
}

.from__side--ours .from__list {
  color: #e6e0db;
}

.from__side--ours .from__list li::before {
  background: var(--coral);
}

/* ─────────────────────────────────────────────────────── the board ── */

.away {
  max-width: var(--full);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.board {
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: var(--night-raised);
  padding: 22px;
  display: grid;
  gap: 14px;
}

.board__head {
  color: var(--haze-dim);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.piece {
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--night);
  padding: 18px 20px;
  display: grid;
  gap: 10px;
}

.piece--waiting {
  border-color: rgba(224, 118, 79, 0.5);
  background: linear-gradient(180deg, var(--coral-soft), var(--night) 60%);
}

.piece__top {
  display: flex;
  gap: 16px;
  align-items: baseline;
  justify-content: space-between;
}

.piece h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.piece__state {
  flex: none;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--haze-dim);
}

.piece--waiting .piece__state {
  color: var(--coral);
}

.piece--done .piece__state {
  color: #7fae86;
}

.piece__says {
  color: var(--haze);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.bar {
  height: 4px;
  border-radius: 2px;
  background: var(--edge);
  overflow: hidden;
}

/* Four of nine, which is what the line above it says. It used to drift a few
   percent forward and then the same few percent back — a progress bar going
   backwards, which is the one thing a progress bar must never do and why it
   read as broken rather than as busy. Then it swept end to end like a bar that
   knows nothing, next to a sentence that names the step. It fills to where the
   work actually is.

   Once, as the board arrives, and never again: a thing that moves forever in
   the corner of the eye is a thing you end up reading past. `transform` only,
   from the left, so it costs a compositor and not a layout. */
.bar__fill {
  display: block;
  height: 100%;
  width: 44%;
  border-radius: inherit;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 820ms var(--ease-expo);
  transition-delay: 220ms;
}

.reveal.is-in .bar__fill {
  transform: scaleX(1);
}

.piece__asks {
  display: flex;
  gap: 8px;
}

.away__points {
  display: grid;
  gap: 28px;
}

.point h3 {
  font-size: 1.1875rem;
  margin-bottom: 8px;
}

.point p {
  color: var(--haze);
  font-size: 0.9375rem;
}

.wide {
  max-width: var(--full);
  margin: clamp(48px, 6vw, 84px) auto 0;
}

.wide img {
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  box-shadow: 0 40px 100px -50px rgba(0, 0, 0, 0.9);
}

.wide figcaption {
  margin-top: 14px;
  text-align: center;
  color: var(--haze-dim);
  font-size: 0.75rem;
}

/* ───────────────────────────────────────────────────── the canvas ── */

/* The blocks, named as the app names them. A row of them rather than a
   sentence: the list is the point, and a sentence buries it. */
.blocks {
  max-width: var(--full);
  margin: clamp(40px, 5vw, 64px) auto clamp(32px, 4vw, 48px);
}

/* ────────────────────────────────────────────────── both audiences ── */

/* Two columns, one row per event: the left is what anybody reads, the right is
   what actually ran. Reading across a row is the whole argument. */
.both {
  max-width: var(--full);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(24px, 4vw, 64px);
  border-top: 1px solid var(--paper-edge);
}

.both__head {
  padding: 18px 0 14px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.both__plain,
.both__real {
  padding: 16px 0;
  border-top: 1px solid var(--paper-edge);
  align-self: stretch;
}

.both__plain {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Wraps rather than scrolls. A row that hides its own end behind a scrollbar is
   a row nobody reads. */
.both__real {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--brick);
  overflow-wrap: anywhere;
}

.both__note {
  max-width: 60ch;
  margin: clamp(32px, 4vw, 52px) 0 0;
  color: var(--ink-muted);
}

/* ─────────────────────────────────────────────────────── the sheet ── */

.sheet {
  counter-reset: cell;
  max-width: var(--full);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Four of them, so they are told to be four across rather than left to fill
   whatever the auto grid works out — which at this width was five slots and one
   of them empty. */
.sheet--four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1080px) {
  .sheet--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .sheet--four {
    grid-template-columns: minmax(0, 1fr);
  }
}

.cell {
  position: relative;
  /* Wrapped rather than laid on a grid: a last row short of a full set grows to
     fill instead of leaving empty slots showing through. */
  flex: 1 1 268px;
  min-width: 0;
  background: var(--night);
  padding: 30px 24px 30px;
  transition: background-color 200ms ease;
}

/* Its place on the sheet, in the corner. The grid is a contact sheet of what
   the app does, and a frame number is what a contact sheet carries. */
.cell::before {
  content: counter(cell, decimal-leading-zero);
  counter-increment: cell;
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  color: var(--edge-strong);
  transition: color 200ms ease;
}

.cell h3 {
  font-size: 1.0625rem;
  margin-bottom: 8px;
  padding-right: 2.5rem;
}

.cell p {
  color: var(--haze-dim);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.cell .mono {
  color: var(--coral);
}

@media (hover: hover) and (pointer: fine) {
  .cell:hover {
    background: var(--night-raised);
  }

  .cell:hover h3 {
    color: var(--coral);
  }

  .cell:hover::before {
    color: var(--coral);
  }
}

.cell h3 {
  transition: color 200ms ease;
}

/* The complete catalogue belongs on the desktop contact sheet. On a phone, six
   entries are enough to establish its breadth; the remainder stays one calm
   press away instead of turning this stop in the page into a long catalog. */
.sheet__more {
  display: none;
}

/* ────────────────────────────────────────────────────── promises ── */

.promises {
  max-width: var(--full);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(36px, 5vw, 72px);
}

.promise h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  margin-bottom: 16px;
}

.promise p {
  color: var(--haze);
}

.promise__fine {
  margin-top: 18px;
  color: var(--haze-dim);
  font-size: 0.75rem;
  line-height: 1.7;
}

/* ────────────────────────────────────────────────────── where it is ── */

.band--where {
  border-top: 1px solid var(--edge);
  background: var(--night-sunken);
  padding-block: clamp(56px, 7vh, 96px);
}

.where {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.where__title {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  margin-bottom: 18px;
}

.where__says {
  color: var(--haze);
  max-width: 60ch;
  margin-inline: auto;
}

.where__row {
  margin-top: 26px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.where__row .btn--small {
  background: transparent;
  color: #f0ece9;
}

@media (hover: hover) and (pointer: fine) {
  .where__row .btn--small:hover {
    background: rgba(255, 255, 255, 0.05);
  }
}

/* ─────────────────────────────────────────────────────────── the ask ── */

.band--cta {
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--edge);
}

.glow--cta {
  top: auto;
  bottom: -420px;
  height: 760px;
}

.cta {
  max-width: 820px;
  margin: 0 auto;
}

.cta__title {
  font-size: clamp(2.25rem, 1.2rem + 4.4vw, 4.5rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  margin-bottom: 38px;
}

.cta__fine {
  margin-top: 26px;
  color: var(--haze-dim);
  font-size: 0.75rem;
}

/* Sits under the download, not adrift from it. */
.cta__note {
  margin: 10px auto 0;
  max-width: 54ch;
  color: var(--haze-dim);
  font-size: 0.75rem;
  line-height: 1.6;
}

.copy {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px 12px 18px;
  border: 1px solid var(--edge);
  border-radius: var(--r-sm);
  background: var(--night-raised);
  color: var(--haze);
  font: inherit;
  cursor: pointer;
  max-width: 100%;
  overflow-x: auto;
  transition: transform 150ms var(--ease-out), border-color 180ms ease;
}

.copy:active {
  transform: scale(0.98);
}

.copy .mono {
  font-size: 0.8125rem;
  white-space: nowrap;
}

.copy__say {
  flex: none;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
}

@media (hover: hover) and (pointer: fine) {
  .copy:hover {
    border-color: var(--edge-strong);
  }
}

/* ───────────────────────────────────────────────────────────── foot ── */

.foot {
  border-top: 1px solid var(--edge);
  padding: 48px var(--pad-x);
  background: var(--night-sunken);
}

.foot__inner {
  max-width: var(--full);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.foot__says {
  color: var(--haze-dim);
  font-size: 0.9375rem;
}

.foot__links {
  margin-inline-start: auto;
  display: flex;
  gap: 22px;
  font-size: 0.9375rem;
  color: var(--haze);
}

.foot__links a {
  text-decoration: none;
  transition: color 160ms ease;
}

.foot__links a:hover {
  color: var(--coral);
}

/* ──────────────────────────────────────────── diagrams that move ── */

/* Pictures of a mechanism, drawn in the page's own parts. Each one moves once,
   when it is scrolled to, and then stops: `transform` and `opacity` only, so a
   diagram costs a compositor and never a layout. Under reduce they are simply
   drawn finished — the end state is the explanation, the movement only makes
   the order of it legible. */

.dia {
  margin: 0;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--night-raised), var(--night));
}

.dia__cap {
  margin-top: clamp(18px, 2.4vw, 26px);
  padding-top: 15px;
  border-top: 1px solid var(--edge);
  color: var(--haze-dim);
  font-size: 0.75rem;
  line-height: 1.65;
}

/* ── one conversation, a different model answering it ── */

.swap {
  max-width: var(--full);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
}

.swap__points {
  display: grid;
  gap: 26px;
}

.carry__top {
  display: flex;
  align-items: center;
  gap: 16px 20px;
  flex-wrap: wrap;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--edge);
}

.carry__what {
  color: var(--haze-dim);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.carry__swap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.pill {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr);
  align-items: center;
  gap: 3px 9px;
  padding: 8px 13px;
  border: 1px solid var(--edge-strong);
  border-radius: var(--r-sm);
  background: var(--night-sunken);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--haze);
}

.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--edge-strong);
}

.pill__who {
  grid-column: 2;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--haze-dim);
}

.pill--now {
  border-color: rgba(224, 118, 79, 0.5);
  background: var(--coral-soft);
  color: var(--coral);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 240ms var(--ease-settle), transform 240ms var(--ease-settle);
  transition-delay: 420ms;
}

.pill--now .pill__dot {
  background: var(--coral);
}

.pill--now .pill__who {
  color: rgba(224, 118, 79, 0.72);
}

.pill--was {
  transition: opacity 240ms var(--ease-settle);
  transition-delay: 420ms;
}

.carry__arrow {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--edge-strong);
  opacity: 0;
  transition: opacity 200ms var(--ease-settle);
  transition-delay: 300ms;
}

.is-in .pill--now,
.is-in .carry__arrow {
  opacity: 1;
  transform: none;
}

.is-in .pill--was {
  opacity: 0.45;
}

.carry__body {
  position: relative;
  padding-inline-start: 20px;
  padding-block-start: 20px;
}

/* The one coral thing in the picture: everything to the right of this line came
   through the change untouched. */
.carry__rail {
  position: absolute;
  inset-block: 24px 4px;
  inset-inline-start: 0;
  width: 2px;
  border-radius: 1px;
  background: var(--coral);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 620ms var(--ease-settle);
  transition-delay: 560ms;
}

.is-in .carry__rail {
  transform: scaleY(1);
}

.carry__held {
  margin: 0 0 14px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral);
}

.carry__rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}

.carry__rows li {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 4px 16px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--haze);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 300ms var(--ease-settle), transform 300ms var(--ease-settle);
  transition-delay: calc(180ms + var(--n, 0) * 40ms);
}

.is-in .carry__rows li {
  opacity: 1;
  transform: none;
}

.carry__rows .mono {
  color: var(--haze-dim);
  font-size: 0.75rem;
  line-height: 1.75;
}

/* ── every tool call goes through the same two things ── */

.dias {
  max-width: var(--full);
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.gate {
  --link: clamp(14px, 2.4vw, 38px);
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) var(--link) minmax(0, 1fr) var(--link) minmax(0, 1fr) var(--link)
    minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.gate__step {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 16px 18px;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--night-sunken);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms var(--ease-settle), transform 280ms var(--ease-settle);
  transition-delay: calc(var(--n, 0) * 90ms);
}

.is-in .gate__step {
  opacity: 1;
  transform: none;
}

.gate__step--judged {
  border-color: rgba(224, 118, 79, 0.5);
  background: linear-gradient(180deg, var(--coral-soft), var(--night-sunken) 70%);
}

.gate__step h4 {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.gate__step--judged h4 {
  color: var(--coral);
}

.gate__step p {
  color: var(--haze-dim);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.gate__step .mono {
  color: var(--haze-dim);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gate__link {
  align-self: center;
  justify-self: center;
  position: relative;
  width: 100%;
  height: 1px;
  background: var(--edge-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 240ms var(--ease-settle);
  transition-delay: calc(60ms + var(--n, 0) * 90ms);
}

.is-in .gate__link {
  transform: scaleX(1);
}

/* ── the spec sheet ── */

.spec {
  max-width: var(--full);
  margin: clamp(40px, 5vw, 68px) auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.spec li {
  flex: 1 1 268px;
  min-width: 0;
  background: var(--night);
  padding: 22px 24px;
}

.spec b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--coral);
}

.spec span {
  color: var(--haze-dim);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* ───────────────────────────────────────────────────────── reveals ── */

.reveal {
  opacity: 0;
  transform: translateY(14px);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 40ms);
}

/* ──────────────────────────────────────────────────────── narrower ── */

/* Seven section names want a wide window to sit on one line. Below that the
   strip goes, rather than folding into two rows of half a name each. */
@media (max-width: 1200px) {
  .nav__links {
    display: none;
  }

  .nav__end {
    margin-inline-start: auto;
  }
}

/* Four steps side by side need room for a sentence each; below that they are
   the same four steps read downwards. */
@media (max-width: 1080px) {
  .gate {
    grid-template-columns: minmax(0, 1fr);
  }

  .gate__link {
    width: 1px;
    height: var(--link);
    justify-self: start;
    margin-inline-start: 22px;
    transform: scaleY(0);
    transform-origin: top center;
  }

  .is-in .gate__link {
    transform: scaleY(1);
  }
}

@media (max-width: 1000px) {
  .split,
  .away,
  .swap {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 640px) {
  .nav__inner {
    padding: 12px 12px;
    gap: 10px;
  }

  .nav__end {
    gap: 8px;
  }

  .btn--small {
    padding-inline: 12px;
    font-size: 0.875rem;
  }

  .btn--small .btn__apple {
    margin-inline-end: 4px;
  }

  .evidence-board__bar {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .evidence-board__stamp {
    text-align: left;
  }

  .proof-card {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 28px 20px;
    min-height: 0;
  }

  .evidence-board__cards {
    grid-template-columns: 1fr;
  }

  .proof-card h3 {
    max-width: 17ch;
  }

  .proof-chart__row {
    grid-template-columns: minmax(92px, auto) minmax(50px, 1fr) 34px;
    gap: 9px;
    font-size: 0.8125rem;
  }

  .safety-chart__row {
    grid-template-columns: 68px minmax(72px, 1fr) 66px;
    gap: 8px;
    font-size: 0.8125rem;
  }

  .safety-chart__row b {
    font-size: 0.625rem;
  }

  .evidence__floor {
    font-size: 0.875rem;
  }


  .step {
    gap: 18px;
  }

  .step__no {
    width: 42px;
    height: 42px;
    font-size: 0.6875rem;
  }

  .steps::before {
    left: 21px;
  }

  .chip {
    display: none;
  }

  /* Where the source is, is not decoration, so it stays when the rest of the
     strip goes — as the mark on its own, which is all a narrow header has room
     for. */
  .chip--repo {
    display: inline-flex;
    padding: 0 10px;
  }

  .chip--repo .chip__label {
    display: none;
  }

  .frame__screens {
    /* All four supplied screens are 8:5. Keeping that proportion means the
       file rail and right-hand panel remain whole rather than being cropped by
       the old 4:3 phone window. */
    aspect-ratio: 8 / 5;
  }

  .pillar__shot {
    height: auto;
    object-fit: contain;
    /* A screenshot is evidence, not a decorative crop. */
    -webkit-mask-image: none;
    mask-image: none;
  }

  .sheet--mobile-more:not(.is-expanded) .cell:nth-child(n + 7) {
    display: none;
  }

  #page .sheet--mobile-more:not(.is-expanded) .cell:nth-child(n + 4) {
    display: none;
  }

  .sheet__more {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
    padding: 15px 18px 15px 20px;
    border: 1px solid var(--edge);
    border-radius: var(--r-sm);
    background: var(--night-raised);
    color: var(--haze);
    font: 500 0.8125rem/1 var(--mono);
    letter-spacing: 0.02em;
    text-align: left;
  }

  .sheet__more-mark {
    flex: 0 0 auto;
    color: var(--coral);
    font-size: 1.25rem;
    line-height: 1;
  }

  .sheet__more[aria-expanded="true"] .sheet__more-mark {
    font-size: 0;
  }

  .sheet__more[aria-expanded="true"] .sheet__more-mark::before {
    content: "−";
    font-size: 1rem;
  }

  .sheet__more:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 3px;
  }

  .pillar {
    padding-inline: 22px;
  }

  .foot__links {
    margin-inline-start: 0;
    flex-wrap: wrap;
    gap: 16px;
  }

  .carry__rows li {
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
  }

  .carry__swap {
    margin-inline-start: 0;
  }
}

@media (max-width: 360px) {
  .mark__version {
    margin-inline-start: 0;
    padding: 2px 5px;
    font-size: 0.5625rem;
  }

  .nav__inner {
    padding-inline: 8px;
    gap: 6px;
  }

  .mark {
    gap: 6px;
    font-size: 1rem;
  }

  .mark__glyph {
    width: 24px;
    height: 24px;
  }

  .nav__end {
    gap: 6px;
  }

  .chip--repo {
    padding-inline: 8px;
    height: 34px;
  }

  .btn--small {
    height: 34px;
    padding-inline: 10px;
    font-size: 0.8125rem;
  }

  .btn--small .btn__apple {
    display: none;
  }

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

/* ─────────────────────────────────────────────────── less movement ── */

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

  .reveal {
    opacity: 1;
    transform: none;
  }

  .glow {
    animation: none;
  }

  /* No growing. It is simply at four of nine, which is all it ever said. */
  .bar__fill {
    transform: none;
    transition: none;
  }

  .proof-chart__track i {
    transform: scaleX(var(--fill));
    transition: none;
  }

  .safety-chart__rail i {
    opacity: 1;
    transform: scaleX(1);
    transition: none;
  }

  .screen {
    transform: none;
    filter: none;
    transition: opacity 200ms ease;
  }

  .btn:active,
  .tab:active,
  .copy:active {
    transform: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 120ms !important;
  }

  /* The diagrams, drawn finished. The end state is the explanation; the
     movement only ever made the order of it legible, and there is no order to
     read when nothing moves. */
  .pill--now,
.carry__arrow,
.carry__rail,
.carry__rows li,
.gate__step,
.gate__link {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .pill--was {
    opacity: 0.45 !important;
  }
}