/* 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;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, 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);

  --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%;
}

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, backdrop-filter 240ms ease;
}

.nav.is-stuck {
  background: rgba(19, 17, 16, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  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__beta {
  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;
  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);
}

/* ───────────────────────────────────────────────────────────── 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);
}

.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%
  );
  filter: blur(12px);
  animation: breathe 22s var(--ease-move) infinite;
  pointer-events: 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);
  filter: blur(6px);
  transition: opacity 380ms var(--ease-out), transform 380ms var(--ease-out), filter 380ms var(--ease-out);
}

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

.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;
}

.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;
}

/* 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;
}

.piece__thumbs {
  display: flex;
  gap: 6px;
}

.piece__thumbs span {
  width: 46px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid var(--edge-strong);
  background: linear-gradient(150deg, var(--night-raised), var(--night-sunken));
}

.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;
}

/* ────────────────────────────────────────────────── 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: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  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 {
  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;
  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;
}

/* ────────────────────────────────────────────────────── 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;
}

.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);
}

/* ───────────────────────────────────────────────────────── 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) * 60ms);
}

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

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

  .nav__links {
    display: none;
  }

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

@media (max-width: 640px) {
  .step {
    gap: 18px;
  }

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

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

  .chip {
    display: none;
  }

  .frame__screens {
    aspect-ratio: 4 / 3;
  }

  .pillar {
    padding-inline: 22px;
  }

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

/* ─────────────────────────────────────────────────── 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;
  }

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

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

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