/* OmniSuit - brand layer over the scrollcraft engine.
   Tokens are the OmniSkipX/Omnikom system verbatim: cream FAF7EF, ink 0D0D0D,
   neon lime E6FF00, Space Grotesk over Inter.

   The accent is ONE hue at TWO lightnesses, keyed to the ground, because this page
   hard cuts between a cream day and an ink night and a single stop cannot clear
   4.5:1 on both. Deep lime carries text on cream; neon lime carries it on ink.
   Wherever the token is redefined, `color` is restated with it, or the inherited
   computed colour survives and the section renders unreadable.

   MEASURE BELONGS TO THE CONTAINER, NEVER TO THE TEXT. A max-width in ch resolves
   to an absolute pixel value and does not participate in the layout, so the moment
   a grid collapses the container widens and the cap stays put. That is what put 20
   text blocks at a third of their column on a tablet. Text elements below get
   max-width: 100% or min(var(--measure), 100%); the columns carry the measure. */

:root {
  --sc-canvas:     #FAF7EF;
  --sc-surface:    #FFFDF7;
  --sc-ink:        #0D0D0D;
  --sc-ink-soft:   #58544B;   /* tinted to the canvas hue, never flat gray */
  --sc-accent:     #46620A;   /* deep lime: the readable stop, for cream grounds */
  --sc-accent-ink: #0D0D0D;

  --neon:          #E6FF00;   /* the same hue, light stop. Ink grounds only. */
  --ink-2:         #1A1A1A;

  --sc-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sc-font-text:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --sc-font-mono:    ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;

  /* measure, applied to columns */
  --measure-tight: 34ch;
  --measure:       48ch;
  --measure-wide:  64ch;

  /* Omnikom is smooth. One radius scale, held across the page, nothing under 8px. */
  --r-xs:   8px;
  --r-sm:  12px;
  --r:     18px;
  --r-lg:  26px;
  --r-xl:  34px;
  --r-pill: 999px;

  --line:      rgba(13, 13, 13, 0.13);
  --line-soft: rgba(13, 13, 13, 0.07);
  --edge:      rgba(255, 255, 255, 0.85);
  --lift:      0 1px 2px rgba(72, 62, 40, 0.05), 0 10px 26px -14px rgba(72, 62, 40, 0.26);
  --lift-2:    0 2px 5px rgba(72, 62, 40, 0.06), 0 30px 60px -26px rgba(72, 62, 40, 0.34);
  /* the floating cards: a contact shadow plus a long soft drop, so they read as
     held above the paper rather than printed on it */
  --lift-float: 0 1px 2px rgba(72, 62, 40, 0.06), 0 8px 16px -8px rgba(72, 62, 40, 0.16), 0 26px 48px -18px rgba(72, 62, 40, 0.4);

  /* a settle, not a snap */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d-hover: 160ms;
  --d-state: 280ms;

  --tap: 44px;                 /* the floor for anything you can hit */
  /* The fixed chrome is the bar PLUS the three lanes. Every pinned act pads its
     top with --chrome-h, so it has to be the whole thing: when it was the bar
     alone, every act started 55px under the lanes and the Cultivate heading was
     hidden behind them on a tablet. The lanes have a fixed height (3 x 13px, two
     3px gaps, 0.65rem of padding), so the sum is exact, not measured. */
  --chrome-row: 4.25rem;
  --lanes-h: calc(45px + 0.65rem);
  --chrome-h: calc(var(--chrome-row) + var(--lanes-h));
  --pad: clamp(1.25rem, 4vw, 3.5rem);
}

.ground-ink {
  --sc-accent: var(--neon);
  --sc-ink: #F5F2E9;
  --sc-ink-soft: #9C978A;
  --line: rgba(245, 242, 233, 0.16);
  --line-soft: rgba(245, 242, 233, 0.08);
  --edge: rgba(255, 255, 255, 0.09);
  color: var(--sc-ink);        /* restate, or inherited ink wins */
  background: #0D0D0D;
}

html { scroll-behavior: auto; }
body { background: var(--sc-canvas); color: var(--sc-ink); overflow-x: hidden; }
::selection { background: var(--neon); color: #0D0D0D; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: var(--r-xs); }
.ground-ink :focus-visible { outline-color: var(--neon); }

/* ------------------------------------------------------------------ type */
.sc-label {
  font-family: var(--sc-font-mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 0.9rem;
  max-width: 100%;
}
.title {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(2.1rem, 5.2vw, 4.4rem);
  line-height: 0.98; letter-spacing: -0.034em; text-wrap: balance;
  margin: 0 0 1rem; max-width: 100%;
}
.h2 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.55rem, 3vw, 2.25rem);
  line-height: 1.06; letter-spacing: -0.024em; text-wrap: balance;
  margin: 0 0 0.9rem; max-width: 100%;
}
.h3 {
  font-family: var(--sc-font-display); font-weight: 600;
  font-size: clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing: -0.018em;
  margin: 4rem 0 1.4rem; max-width: 100%;
}
.lede { font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.5; color: var(--sc-ink-soft); margin: 0 0 1.5rem; max-width: 100%; text-wrap: pretty; }
.body { font-size: 0.9375rem; line-height: 1.62; color: var(--sc-ink-soft); margin: 0 0 1rem; max-width: 100%; text-wrap: pretty; }
.body--soft { color: color-mix(in oklab, var(--sc-ink-soft) 74%, transparent); font-size: 0.8125rem; }
.body--wide { margin-top: 1.6rem; }
.micro {
  font-family: var(--sc-font-mono); font-size: 0.75rem; letter-spacing: 0.03em;
  color: var(--sc-ink-soft); margin: 1rem 0 0; max-width: 100%;
}

/* the columns carry the measure */
.desk__copy { max-width: min(var(--measure-wide), 100%); }
.loop__copy, .recover__copy, .dbrail__lead, .join__inner { max-width: min(var(--measure-wide), 100%); }
.body--wide { max-width: min(var(--measure-wide), 100%); }
.wall__verdict, .wall__close, .msg--in { max-width: min(var(--measure-wide), 100%); }

/* ------------------------------------------------------------------ cta */
.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: var(--tap); text-decoration: none;
  font-family: var(--sc-font-display); font-weight: 600; font-size: 0.9375rem;
  background: var(--sc-ink); color: #FAF7EF;
  padding: 0 1.5rem; border: 0; border-radius: var(--r-pill); cursor: pointer;
  box-shadow: var(--lift);
  transition: background var(--d-hover) var(--ease), transform var(--d-hover) var(--ease), box-shadow var(--d-hover) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: var(--ink-2); box-shadow: var(--lift-2); transform: translateY(-1px); }
}
.cta:active { transform: translateY(1px); box-shadow: var(--lift); }
.cta:disabled { opacity: 0.45; cursor: default; transform: none; }
.ground-ink .cta { background: var(--neon); color: #0D0D0D; }
@media (hover: hover) and (pointer: fine) { .ground-ink .cta:hover { background: #EEFF4D; } }

/* ---------------------------------------------------------------- chrome */
.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome, 40);
  background: color-mix(in oklab, var(--sc-canvas) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.chrome__row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(0.6rem, 2vw, 1.5rem); height: var(--chrome-row); padding: 0 var(--pad);
}
.chrome__right { display: flex; align-items: center; justify-content: flex-end; gap: 0.8rem; }
.chrome__mark { display: flex; align-items: baseline; gap: 0.7rem; min-width: 0; }
.mark {
  font-family: var(--sc-font-display); font-weight: 700; font-size: 1rem;
  letter-spacing: -0.03em; border-bottom: 3px solid var(--neon); line-height: 1.05;
}
.mark--sm { font-size: 0.875rem; }
.chrome__crumb { font-family: var(--sc-font-mono); font-size: 0.6875rem; color: var(--sc-ink-soft); white-space: nowrap; }
.chrome__clock { display: flex; flex-direction: column; align-items: center; gap: 0.05rem; justify-self: center; }
.clock { font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; font-size: 1.25rem; font-weight: 500; letter-spacing: 0.03em; line-height: 1.1; }
.chrome__legend { display: flex; align-items: center; gap: 0.5rem; font-family: var(--sc-font-mono); font-size: 0.5625rem; color: var(--sc-ink-soft); letter-spacing: 0.06em; white-space: nowrap; }
.chrome__demo {
  font-family: var(--sc-font-mono); font-size: 0.5625rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--neon); color: #0D0D0D; padding: 0.22rem 0.5rem; border-radius: var(--r-pill); white-space: nowrap;
}
.chrome__acts { display: flex; gap: 0.15rem; }
/* the hit area is 44px tall without the button growing to 44px of paint: the
   ::before expands it invisibly, so the chrome keeps its proportions */
.jump {
  position: relative; font-family: var(--sc-font-mono); font-size: 0.6875rem;
  font-variant-numeric: tabular-nums; background: none; border: 0;
  color: var(--sc-ink-soft); min-width: var(--tap); height: var(--tap);
  padding: 0 0.5rem; border-radius: var(--r-pill); cursor: pointer;
  transition: color var(--d-hover) var(--ease), background var(--d-hover) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .jump:hover { color: var(--sc-ink); background: rgba(13,13,13,0.05); } }
.jump--peak { color: var(--sc-ink); font-weight: 600; }
.jump--peak::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: var(--r-pill); background: var(--sc-ink); }
.chrome__acts .jump { display: inline-flex; align-items: center; justify-content: center; }
.chrome__cta {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-family: var(--sc-font-display); font-weight: 600; font-size: 0.8125rem; text-decoration: none;
  background: var(--sc-ink); color: #FAF7EF; padding: 0 1.05rem; border-radius: var(--r-pill); white-space: nowrap;
  transition: background var(--d-hover) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .chrome__cta:hover { background: var(--ink-2); } }

/* THE THREE LANES. The rail is the page's spine: every event stamps into the loop
   it belongs to, so the three promises are the structure, not a section. */
.lanes { position: relative; height: var(--lanes-h); box-sizing: border-box; padding: 0.15rem var(--pad) 0.5rem; display: grid; gap: 3px; }
.lane { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; gap: 0.6rem; height: 13px; }
.lane__k { font-family: var(--sc-font-mono); font-size: 0.5625rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--sc-ink); opacity: 0.72; }
.lane__track { position: relative; height: 100%; border-radius: var(--r-pill); background: linear-gradient(var(--line-soft), var(--line-soft)) center / 100% 3px no-repeat; }
.lane__track::before { content: ''; position: absolute; inset: 5px auto auto 0; height: 3px; width: 100%; border-radius: var(--r-pill); background: color-mix(in oklab, var(--sc-ink) 7%, transparent); }
.stamp {
  position: absolute; top: 2px; width: 4px; height: 9px; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--sc-ink) 20%, transparent);
  transform: translateX(-50%) scaleY(0.62); transform-origin: 50% 50%; z-index: 1;
  transition: background var(--d-state) var(--ease), transform var(--d-state) var(--ease);
}
.stamp.is-struck { background: var(--sc-accent); transform: translateX(-50%) scaleY(1); }
.stamp--suppress.is-struck { background: #B4402A; }
.stamp--wall.is-struck, .stamp--handoff.is-struck { background: #0D0D0D; }
.lanes__head {
  position: absolute; top: 0; bottom: 5px; width: 2px; border-radius: var(--r-pill);
  background: var(--sc-ink); left: var(--pad); opacity: 0.8; pointer-events: none; z-index: 2;
}

/* ------------------------------------------------------------------ acts */
.act { position: relative; }
.act--flow { padding: clamp(4rem, 9vh, 7.5rem) 0 clamp(1.5rem, 3vh, 2.75rem); background: var(--sc-canvas); }
.wrap { max-width: 78rem; margin: 0 auto; padding: 0 var(--pad); }

/* 1 · the hero. ONE column at every width, so there is no collapse to get wrong. */
.desk {
  height: 100%; display: flex; flex-direction: column; justify-content: center;
  gap: clamp(1.5rem, 4vh, 2.75rem);
  padding: calc(var(--chrome-h) + 2.5rem) var(--pad) 2.5rem;
  max-width: 78rem; margin: 0 auto; box-sizing: border-box;
  /* The BLOCK is centred, the TEXT inside it is not. Flush left, a 64ch column
     left 505px of air on one side at 1440 and 649px at 1728, which is what reads
     as unbalanced on a hero with few elements. Centring the column makes the air
     symmetric; centring the copy as well would make it a generic splash. */
  align-items: center;
}
.desk > * { width: 100%; }

.signup { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.9fr) auto; gap: 0.6rem; align-items: end; margin: 0; }
.field { display: grid; gap: 0.35rem; min-width: 0; }
.field label { font-family: var(--sc-font-mono); font-size: 0.5625rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.field input, .field select {
  font-family: var(--sc-font-text); font-size: 0.9375rem; color: var(--sc-ink);
  min-height: 48px; background: var(--sc-surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 0 1rem; width: 100%; box-sizing: border-box;
  transition: border-color var(--d-hover) var(--ease), box-shadow var(--d-hover) var(--ease);
}
.field input::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 62%, transparent); }
.field input:hover, .field select:hover { border-color: color-mix(in oklab, var(--sc-ink) 30%, transparent); }
.signup__status { grid-column: 1 / -1; margin: 0.15rem 0 0; font-size: 0.8125rem; min-height: 1.2em; }
/* an empty status line still took a row of the form, which read as a gap between
   the button and the line under it. It stays in the tree (the live region has to
   exist before it speaks) but takes no height until it has something to say. */
.signup__status:empty { min-height: 0; margin: 0; }
.signup__status.is-good { color: var(--sc-accent); }
.signup__status.is-bad { color: #A63A1E; }
.ground-ink .field input, .ground-ink .field select { background: #171717; border-color: rgba(245,242,233,0.2); color: #F5F2E9; }
.ground-ink .signup__status.is-good { color: var(--neon); }
.ground-ink .signup__status.is-bad { color: #FF9478; }

/* the hero's only live element. One row, three lanes, counts from the clock.
   It shares the copy's measure so the hero is ONE column with one edge: the strip
   used to run 1136px under a 727px headline, and a composition that gets wider as
   it goes down reads as unbalanced even when the block itself fills 85% of the
   usable width. That widening was the real defect, not the left anchor. */
.desk__live {
  display: grid; gap: 0.75rem;
  max-width: min(var(--measure-wide), 100%);
  border-top: 1px solid var(--line); padding-top: clamp(1rem, 2vh, 1.4rem);
}

/* THE CARDS. Three lane counters on their own planes in the air beside the copy.
   The layer is a three column grid laid over the desk: the middle column is the
   copy's own measure, so the flanks are exactly the air the column leaves, and
   the cards sit in those flanks at three heights. Under 1240px the flanks are
   narrower than a card, so the layer drops into the flow as a row under the form.
   Motion is split across properties so nothing fights: the engine writes
   `transform` on .hl (parallax), the manifest animates `opacity` and `scale`, the
   float animates `translate`. */
/* The layer is positioned against the STAGE (sticky, so it is the containing
   block), not the 78rem desk: at 1440 the desk leaves 96px of air outside itself
   on each side, and anchored to the desk the Capture card ended 3px from the
   headline. The column gap keeps a gutter between a card and the copy even where
   the flank is narrower than the card. */
.lanechips {
  position: absolute; inset: calc(var(--chrome-h) + 1.5rem) var(--pad) 2.5rem; width: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) min(var(--measure-wide), 100%) minmax(0, 1fr);
  grid-template-rows: 1fr 1fr 1fr; column-gap: 3rem; pointer-events: none;
}
.hl { min-width: 0; width: 13rem; border-radius: var(--r-lg); pointer-events: auto; }
.hl--capture   { grid-column: 1; grid-row: 1; justify-self: center; align-self: end; margin-bottom: 0.5rem; }
.hl--cultivate { grid-column: 3; grid-row: 2; justify-self: center; align-self: center; }
.hl--recover   { grid-column: 1; grid-row: 3; justify-self: center; align-self: start; margin-top: 0.5rem; }
.hl__card {
  display: grid; gap: 0.7rem;
  background: linear-gradient(180deg, #FFFEFA, var(--sc-surface));
  border: 1px solid var(--line); border-top-color: var(--edge);
  border-radius: var(--r-lg); padding: 1.05rem 1.2rem 1.05rem;
  box-shadow: var(--lift-float), inset 0 1px 0 var(--edge);
  animation: hl-enter 900ms var(--ease) both, hl-float 6.4s ease-in-out infinite;
  animation-delay: calc(380ms + var(--i, 0) * 170ms), calc(var(--i, 0) * -2.1s);
}
.hl__head {
  display: flex; align-items: center; gap: 0.5rem; min-width: 0;
  font-family: var(--sc-font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.hl__v { display: flex; align-items: baseline; gap: 0.5rem; min-width: 0; margin-top: 0.1rem; }
.hl__track { display: block; height: 3px; border-radius: var(--r-pill); background: var(--line-soft); overflow: hidden; }
.hl__fill { display: block; height: 100%; width: 0; border-radius: var(--r-pill); background: var(--sc-accent); transition: width var(--d-state) var(--ease); }
.hl--cultivate .hl__fill { background: #7C6A1E; }
.hl--recover .hl__fill { background: #2F6B4F; }
@keyframes hl-enter { from { opacity: 0; scale: 0.94; } to { opacity: 1; scale: 1; } }
@keyframes hl-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes hl-bump { 0% { scale: 1; } 40% { scale: 1.18; } 100% { scale: 1; } }
.hl__n.is-bump { animation: hl-bump 420ms var(--ease); }
/* the line that moves. It carries the decision the clock is on, and it changes
   colour when the answer is "do not contact this person", which is the moment the
   page is actually selling. */
.tick {
  margin: 0; font-family: var(--sc-font-mono); font-size: 0.75rem; letter-spacing: 0.02em;
  color: var(--sc-ink-soft); display: flex; align-items: center; gap: 0.6rem;
  min-height: 1.4em; transition: color var(--d-state) var(--ease);
}
.tick::before {
  content: ''; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: currentColor; flex: none;
  transition: background var(--d-state) var(--ease);
}
.tick--suppress { color: #8A3320; }
.tick--wall, .tick--handoff { color: var(--sc-ink); }
.tick--allow { color: var(--sc-accent); }
.hl__dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--sc-accent); flex: none; }
.hl--cultivate .hl__dot { background: #7C6A1E; }
.hl--recover .hl__dot { background: #2F6B4F; }
.hl__k { font: inherit; letter-spacing: inherit; color: var(--sc-ink); white-space: nowrap; }
.hl__n {
  display: inline-block; font-family: var(--sc-font-display); font-weight: 600;
  font-variant-numeric: tabular-nums; font-size: 2.25rem; line-height: 0.9; letter-spacing: -0.04em; color: var(--sc-ink);
  transform-origin: left center;
}
.hl__s { font-family: var(--sc-font-mono); font-size: 0.625rem; letter-spacing: 0.04em; color: var(--sc-ink-soft); white-space: nowrap; }

/* panels ------------------------------------------------------------------- */
.panel {
  background: var(--sc-surface); border: 1px solid var(--line); border-top-color: var(--edge);
  border-radius: var(--r-lg); box-shadow: var(--lift); overflow: hidden;
}
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 1.05rem; border-bottom: 1px solid var(--line-soft);
  background: color-mix(in oklab, var(--sc-canvas) 55%, var(--sc-surface));
}
.panel__title { font-family: var(--sc-font-display); font-size: 0.8125rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.panel__meta { font-family: var(--sc-font-mono); font-size: 0.625rem; color: var(--sc-ink-soft); letter-spacing: 0.04em; }

.queue, .thread, .strip { list-style: none; margin: 0; padding: 0; }
.q {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
  gap: 0.2rem 0.8rem; padding: 0.45rem 1.05rem; border-bottom: 1px solid var(--line-soft);
  font-size: 0.8125rem;
}
.q:last-child { border-bottom: 0; }
.q__name { font-weight: 500; }
.q__tag { grid-column: 1; font-size: 0.6875rem; color: var(--sc-ink-soft); }
.q__state {
  grid-row: 1 / span 2; grid-column: 2; align-self: center;
  font-family: var(--sc-font-mono); font-size: 0.625rem; letter-spacing: 0.03em;
  color: var(--sc-ink-soft); white-space: nowrap;
  padding: 0.2rem 0.55rem; border-radius: var(--r-pill); border: 1px solid var(--line-soft);
  transition: color var(--d-state) var(--ease), background var(--d-state) var(--ease),
              border-color var(--d-state) var(--ease), transform var(--d-state) var(--ease);
}
.q--live .q__state { color: #0D0D0D; background: var(--neon); border-color: var(--neon); }
.q--won .q__state { color: #FAF7EF; background: var(--sc-accent); border-color: var(--sc-accent); }
.q--human .q__state, .q--wall .q__state { color: #FAF7EF; background: var(--ink-2); border-color: var(--ink-2); }
.q--blocked { opacity: 0.52; }
.q--blocked .q__state { color: #8A3320; border-color: rgba(138, 51, 32, 0.35); }

.thread { padding: 0.5rem 0; }
.m {
  display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: 0.7rem;
  padding: 0.45rem 1.05rem; font-size: 0.8125rem; line-height: 1.5;
  opacity: 0.24; transition: opacity var(--d-state) var(--ease);
}
.m.is-in { opacity: 1; }
.m__t { font-family: var(--sc-font-mono); font-size: 0.625rem; color: var(--sc-ink-soft); padding-top: 0.28em; font-variant-numeric: tabular-nums; }
.m--in .m__x { color: var(--sc-ink); font-weight: 500; }
.m--out .m__x { color: var(--sc-ink-soft); }
.m--sys .m__x { font-family: var(--sc-font-mono); font-size: 0.6875rem; color: var(--sc-accent); }

/* 2 · capture -------------------------------------------------------------- */
.loop {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.88fr);
  grid-template-areas: "copy queue" "thread queue"; grid-template-rows: auto 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 5vw, 5rem); align-items: start;
}
.loop__copy { grid-area: copy; }
.panel--queue { grid-area: queue; }
.panel--thread { grid-area: thread; min-width: 0; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin: 1.4rem 0 1.5rem; }
.facts div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line-soft); }
.facts dt { font-family: var(--sc-font-mono); font-size: 0.6875rem; color: var(--sc-ink-soft); letter-spacing: 0.03em; }
.facts dd { margin: 0; font-size: 0.8125rem; font-weight: 500; font-variant-numeric: tabular-nums; }

/* 3 · the database rail ---------------------------------------------------- */
.act--pan { background: var(--sc-canvas); }
.dbrail {
  display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem);
  height: 100%; padding: calc(var(--chrome-h) + 2rem) var(--pad) 3rem; box-sizing: border-box;
}
.dbrail__lead { flex: 0 0 min(var(--measure), 62vw); }
.dbrail__cards { display: flex; gap: 0.85rem; align-items: stretch; }
.db {
  flex: 0 0 16rem; min-height: 18rem; background: var(--sc-surface);
  border: 1px solid var(--line); border-top-color: var(--edge);
  border-radius: var(--r-lg); padding: 1.05rem 1.15rem 1.1rem; box-shadow: var(--lift);
  display: flex; flex-direction: column;
  transition: box-shadow var(--d-state) var(--ease), transform var(--d-state) var(--ease), border-color var(--d-state) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .db:hover { box-shadow: var(--lift-2); transform: translateY(-3px); border-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); }
  .db:hover .db__verdict { color: var(--sc-ink); }
}
.db--blocked { background: color-mix(in oklab, var(--sc-canvas) 70%, var(--sc-surface)); }
.db--won { box-shadow: inset 3px 0 0 -1px var(--sc-accent), var(--lift); }
.db--wall, .db--human { box-shadow: inset 3px 0 0 -1px var(--sc-ink), var(--lift); }
.db__name { font-family: var(--sc-font-display); font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.15rem; letter-spacing: -0.015em; }
.db__tag { font-size: 0.75rem; color: var(--sc-ink-soft); margin: 0 0 0.75rem; }
.db__dl { margin: 0 0 0.8rem; padding-top: 0.65rem; border-top: 1px solid var(--line-soft); }
.db__dl div { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.16rem 0; }
.db__dl dt { font-family: var(--sc-font-mono); font-size: 0.625rem; color: var(--sc-ink-soft); letter-spacing: 0.03em; }
.db__dl dd { margin: 0; font-size: 0.6875rem; text-align: right; }
.db__verdict {
  margin: auto 0 0; font-size: 0.6875rem; line-height: 1.45;
  color: color-mix(in oklab, var(--sc-ink-soft) 82%, transparent);
  padding-top: 0.6rem; border-top: 1px solid var(--line-soft);
  transition: color var(--d-state) var(--ease);
}
.db--blocked .db__verdict { color: #8A3320; }

/* 4 · the wall. The peak. ---------------------------------------------------- */
.act--wall { background: #0D0D0D; }
.wall {
  height: 100%; display: flex; flex-direction: column; justify-content: space-between;
  gap: 1.4rem; padding: calc(var(--chrome-h) + 3.5rem) var(--pad) 4.5rem;
  max-width: 62rem; margin: 0 auto; box-sizing: border-box;
}
.wall .sc-label { color: #9C978A; }
.msg { margin: 0; }
.msg--in {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(1.7rem, 4.4vw, 3rem); line-height: 1.06; letter-spacing: -0.03em; color: #F5F2E9;
}
.msg--stop { font-family: var(--sc-font-mono); font-size: clamp(0.9rem, 1.3vw, 1.05rem); color: var(--neon); letter-spacing: 0.02em; }
.wall__verdict { border-left: 2px solid var(--neon); padding-left: 1.15rem; border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.verdict__code { font-family: var(--sc-font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; color: var(--neon); margin: 0 0 0.5rem; }
.verdict__why { margin: 0; font-size: clamp(0.95rem, 1.2vw, 1.08rem); line-height: 1.55; color: #D8D3C7; max-width: min(var(--measure-wide), 100%); }
.wall__close {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(1.05rem, 2vw, 1.5rem); line-height: 1.3; letter-spacing: -0.018em;
  color: #F5F2E9; border-top: 1px solid rgba(245,242,233,0.16); padding-top: 1.3rem;
}
.rules {
  list-style: none; margin: 0; padding: 1.1rem 0 0; border-top: 1px solid rgba(245,242,233,0.16);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem 2.5rem;
  font-family: var(--sc-font-mono); font-size: 0.6875rem; line-height: 1.5; color: #86817A;
}
.rules li { display: flex; gap: 0.9rem; }
.rules span { color: #5E5A53; flex: 0 0 7.5rem; }

/* 5 · recover -------------------------------------------------------------- */
.recover { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.recover__states { display: grid; gap: 0.85rem; min-width: 0; }
.state {
  margin: 0; padding: 1.15rem 1.25rem; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--sc-surface); box-shadow: var(--lift);
}
.state figcaption { font-family: var(--sc-font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: 0.55rem; }
.state__line { margin: 0 0 0.3rem; font-family: var(--sc-font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.018em; }
.state__out { margin: 0; font-size: 0.8125rem; color: var(--sc-ink-soft); line-height: 1.5; }
.state--lost { background: color-mix(in oklab, var(--sc-canvas) 60%, var(--sc-surface)); box-shadow: none; }
.state--lost .state__line, .state--lost .state__out { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.state--won { box-shadow: inset 3px 0 0 -1px var(--sc-accent), var(--lift-2); }

/* 6 · the count ------------------------------------------------------------ */
.ledger { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 2.2rem; border-top: 1px solid var(--sc-ink); }
.fig { padding: 1.5rem 1.2rem 1.6rem 0; border-right: 1px solid var(--line-soft); }
.fig:last-child { border-right: 0; }
.fig--accent { padding-left: 1.2rem; border-left: 2px solid var(--sc-accent); border-radius: var(--r-xs) 0 0 var(--r-xs); }
.fig__n { font-family: var(--sc-font-display); font-weight: 600; font-variant-numeric: tabular-nums; font-size: clamp(2.4rem, 4.2vw, 3.8rem); line-height: 0.94; letter-spacing: -0.04em; margin: 0 0 0.55rem; }
.fig--accent .fig__n { color: var(--sc-accent); }
.fig__k { margin: 0 0 0.35rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.005em; }
.fig__s { margin: 0; font-size: 0.75rem; line-height: 1.5; color: var(--sc-ink-soft); }

.verts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.vert { padding: 1.4rem 1.6rem 1.6rem 0; border-right: 1px solid var(--line-soft); }
.vert:last-child { border-right: 0; }
.vert:not(:first-child) { padding-left: 1.6rem; }
.vert__name { font-family: var(--sc-font-display); font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.25rem; letter-spacing: -0.018em; }
.vert__line { margin: 0 0 1rem; font-size: 0.8125rem; color: var(--sc-ink-soft); }
.vert__dl div { padding: 0.55rem 0; border-top: 1px solid var(--line-soft); }
.vert__dl dt { font-family: var(--sc-font-mono); font-size: 0.625rem; letter-spacing: 0.05em; color: var(--sc-ink-soft); margin-bottom: 0.25rem; }
.vert__dl dd { margin: 0; font-size: 0.8125rem; line-height: 1.5; }

/* 7 · the close ------------------------------------------------------------ */
.act--join { background: #0D0D0D; }
/* A flow section, the height of its content. It was a pin: a 115vh stage around
   a 300px ask, which is a room of empty ink on a desktop however the ask is
   aligned in it, and on a phone the ask was cropped once the footer rose under
   the stage. Now the air is the padding and nothing else. The BLOCK is centred
   and the copy inside stays flush left, like the hero. */
.join {
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(4rem, 10vh, 7rem) var(--pad) clamp(3.5rem, 9vh, 6rem);
  box-sizing: border-box; max-width: 78rem; margin: 0 auto; width: 100%;
}
.join__inner { width: 100%; }
.join .h2 { color: #F5F2E9; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 1.1rem; }
.join .body { font-size: clamp(0.9375rem, 1.15vw, 1.0625rem); margin-bottom: 1.6rem; }
.join .body { color: #A8A296; }
.join .sc-label { color: #9C978A; }
/* the integration strip: answers "do I have to replace my CRM" at the moment the
   question occurs, which is next to the field, not eleven screens earlier */
.strip { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.4rem; }
.strip li {
  font-family: var(--sc-font-mono); font-size: 0.6875rem; color: #B4AEA2;
  border: 1px solid rgba(245,242,233,0.18); border-radius: var(--r-pill);
  padding: 0.32rem 0.8rem; white-space: nowrap;
}
.strip li b { font-weight: 500; color: #F5F2E9; }
.foot {
  display: grid; grid-template-columns: 1.5fr 1.1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  background: #0D0D0D; color: #F5F2E9;
  padding: clamp(2rem, 5vh, 3.25rem) var(--pad) clamp(2rem, 5vh, 3rem);
  border-top: 1px solid rgba(245,242,233,0.16);
  max-width: 78rem; margin: 0 auto; box-sizing: border-box;
}
/* the band behind it, so the ink runs edge to edge under a centred column */
main { background: var(--sc-canvas); }
.foot-band { background: #0D0D0D; }
.foot__col { display: grid; gap: 0.5rem; align-content: start; }
.foot__col--id { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem; max-width: min(var(--measure), 100%); }
.foot__by { font-family: var(--sc-font-mono); font-size: 0.6875rem; color: #9C978A; letter-spacing: 0.04em; }
.foot__line { flex: 1 1 100%; margin: 0; font-size: 0.8125rem; line-height: 1.5; color: #A8A296; max-width: 100%; }
.foot__k {
  margin: 0 0 0.2rem; font-family: var(--sc-font-mono); font-size: 0.5625rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: #7E796F; font-weight: 400;
}
.foot__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.foot__list li { font-size: 0.75rem; line-height: 1.45; color: #8E897E; }
.foot__list b { font-weight: 500; color: #D8D3C7; }
.foot__note { margin: 0; font-size: 0.75rem; line-height: 1.45; color: #8E897E; max-width: 100%; }

/* ====================================================================== */
/* BREAKPOINTS. Designed, not inherited. The old build jumped straight from a
   desktop two-column grid to a phone one-column grid at 860px, which left 1024
   and 834 as the two worst viewports on the site. */

@media (max-width: 1399.98px) {
  /* under 1400 the flank beside a 64ch column cannot hold a card and a gutter:
     the cards leave the air and become a row under the form, still floating */
  .lanechips {
    position: static; inset: auto; width: 100%; display: flex; gap: 0.8rem;
    max-width: min(var(--measure-wide), 100%);
    border-top: 1px solid var(--line); padding-top: clamp(1.25rem, 2.5vh, 1.75rem);
  }
  .hl { width: auto; flex: 1 1 0; margin: 0; }
  .desk__live { border-top: 0; padding-top: 0; }
}

@media (max-width: 1180px) {
  .ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fig:nth-child(3) { border-right: 0; }
  .fig:nth-child(n+4) { border-top: 1px solid var(--line-soft); }
}

@media (max-width: 1024px) {
  /* the panel column stops competing with the copy and sits under it at a
     constrained measure, rather than stretching to a full 940px column */
  .loop, .recover { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .loop { grid-template-areas: "copy" "queue" "thread"; grid-template-rows: auto; }
  .loop .panel, .recover__states { max-width: min(38rem, 100%); }
  .loop .panel + .panel { margin-top: -1.15rem; }   /* the two panels read as one stack */
  .verts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vert:nth-child(2) { border-right: 0; }
  .vert:nth-child(3) { border-top: 1px solid var(--line-soft); padding-left: 0; }
  /* stacked, the lead and the rail are one group, centred in the stage rather
     than pinned to its top with the bottom half of the screen empty */
  .dbrail { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.4rem; padding-top: calc(var(--chrome-h) + 1.6rem); }
  .dbrail__lead { flex: 0 0 auto; max-width: min(var(--measure-wide), 100%); }
}

@media (max-width: 900px) {
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__col--id { grid-column: 1 / -1; }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig { border-right: 1px solid var(--line-soft); }
  .fig:nth-child(2n) { border-right: 0; }
  .fig:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
  /* stacked rules are 330px tall: with the top padded for the whole chrome the
     act ran 24px past a 780px stage, and a clipped stage cuts silently */
  .wall { padding-top: calc(var(--chrome-h) + 2rem); padding-bottom: 2.5rem; gap: 1.1rem; }
  .rules { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  .rules li { display: grid; gap: 0.1rem; }          /* label above value */
  .rules span { flex: none; }
  .signup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .signup .cta { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 900px) {
  .chrome__legend { display: none; }
}

@media (max-width: 768px) {
  .chrome__acts { display: none; }
  .desk { padding-top: calc(var(--chrome-h) + 2rem); gap: 1.4rem; align-items: stretch; }
  .lane { grid-template-columns: 3.9rem minmax(0, 1fr); }
  .verts { grid-template-columns: minmax(0, 1fr); }
  .vert { border-right: 0; border-top: 1px solid var(--line-soft); padding-left: 0 !important; padding-right: 0; }
  .facts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .act--flow { padding: clamp(2.5rem, 5vh, 3.75rem) 0 clamp(0.75rem, 1.5vh, 1.25rem); }
  .h3 { margin-top: 2.25rem; }
  .ledger { margin-top: 1.5rem; }
  .body--wide { margin-top: 1.1rem; }
  .fig { padding: 1rem 0; }
  .chrome__crumb { display: none; }
  .signup { grid-template-columns: minmax(0, 1fr); }
  .ledger { grid-template-columns: minmax(0, 1fr); }
  .fig { border-right: 0; border-top: 1px solid var(--line-soft); padding: 1.2rem 0; }
  .fig--accent { padding-left: 1rem; }
  .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1.25rem; padding-top: 1.5rem; }
  .foot__k { margin-bottom: 0.05rem; }
  .foot__col { gap: 0.35rem; }
  .foot__col--id { grid-column: 1 / -1; }
  .foot__line { font-size: 0.75rem; }
  .foot__list li, .foot__note { font-size: 0.6875rem; }
  .join { padding: 3rem var(--pad) 2.5rem; }
  .foot { padding-left: var(--pad); padding-right: var(--pad); }
  /* four pills wrap to four rows on a phone: 142px of the close act spent on a
     list of four names. One line says the same thing in 40. */
  .strip { display: block; margin-bottom: 1rem; }
  .strip li {
    display: inline; border: 0; padding: 0; white-space: normal;
    font-size: 0.6875rem; line-height: 1.5;
  }
  .strip li:not(:last-child)::after { content: '  ·  '; color: #5E5A53; }
  .db { flex-basis: 14rem; min-height: 17.5rem; }
  /* three cards stay on ONE row on a phone. Stacking them made the hero's live
     element 151px, which is 16% of a 844px fold, for information that fits in 76. */
  .lanechips { gap: 0.5rem; padding-top: 1.25rem; justify-content: center; }
  .desk__live { gap: 0.5rem; }
  .hl__card { padding: 0.7rem 0.75rem 0.65rem; gap: 0.45rem; border-radius: var(--r); }
  .hl { border-radius: var(--r); }
  .hl__head { font-size: 0.5625rem; letter-spacing: 0.1em; gap: 0.35rem; }
  .hl__s { display: none; }
  .hl__n { font-size: 1.5rem; }
  .hl__track { height: 2px; }

  /* PHONE COMPOSITION. One narrow column reads better on the centre line: the
     hero, the ask, every section head, the peak and the footer are centred.
     Data keeps its left edge (panels, the rail, the ledger, the facts), because
     a table is read from the left, and form labels stay over their field. */
  .desk__copy, .join__inner, .loop__copy, .recover__copy, .dbrail__lead,
  .act--count .wrap > .sc-label, .act--count .wrap > .h2, .act--count .wrap > .h3, .act--count .wrap > .body--wide,
  .wall { text-align: center; }
  .desk__copy, .join__inner, .loop__copy, .recover__copy, .dbrail__lead, .body--wide { margin-left: auto; margin-right: auto; }
  .field label, .facts, .signup__status { text-align: left; }
  .signup__status { text-align: center; }
  .tick { justify-content: center; }
  .wall__verdict { border-left: 0; padding-left: 0; border-radius: 0; border-top: 2px solid var(--neon); padding-top: 0.9rem; }
  .rules { text-align: left; }
  .strip { text-align: center; }

  /* the footer, one centred column */
  .foot { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; padding-top: 2rem; text-align: center; }
  .foot__col--id { justify-content: center; }
  .foot__line { max-width: 100%; }
}

/* Tooth. assets/paper.png is a single 900px plate of uncoated paper fibre,
   generated locally with Z-Image Turbo, set to cover rather than tile so there is
   no repeat seam. Multiplied, so it gives the cream grounds real grain and leaves
   the ink grounds alone. */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background: url("assets/paper.png") center / cover no-repeat;
  mix-blend-mode: multiply; opacity: 0.55;
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 61; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  .m { opacity: 1; }
  .db, .cta, .q__state, .stamp { transition: none; }
  .hl__card, .hl__n.is-bump { animation: none; }
}