/* WeRtheRobots — page chrome and layout.
 *
 * DUAL-TARGET FILE. Linked by every page and inlined into every Claude Design artboard, so
 * what a reviewer judges is what ships.
 *
 * The scene stylesheet is shared/scenes.css; this file is everything around the scenes.
 *
 * DESIGN LANGUAGE — LIN3S.
 *   Besley for display, Inter for everything functional. Left-aligned or centred, never right.
 *   An 8px grid. Pill buttons. And no colour: ds/tokens/colors.css quarantines the
 *   Communication palette to campaign panels and the Graphics palette to data visualisation,
 *   and its semantic aliases are those same hues — so weight, size and rule-work carry every
 *   distinction on this site.
 *
 * §19 asks the site to feel more like watching a process being transformed than reading a
 * corporate website. That is mostly the scenes' job, but it is also why the bands are tall,
 * why headlines are short and large, and why there is very little furniture between them.
 */

/* ---------------------------------------------------------------- reset and base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--lin3s-canvas);
  color: var(--lin3s-ink);
  font-family: var(--lin3s-font-body);
  font-size: var(--lin3s-body-size);
  line-height: var(--lin3s-body-lh);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 60; background: var(--lin3s-ink);
  color: var(--lin3s-on-primary); padding: 10px 16px; font-size: 13px; border-radius: 999px;
}
.skip:focus { top: 16px; }
:focus-visible { outline: 2px solid var(--lin3s-ink); outline-offset: 3px; }

/* ---------------------------------------------------------------- header, §16 */
/* THE HEADER IS OPAQUE, AND THAT IS DELIBERATE.
 *
 * It used to be 88% white with an 8px backdrop blur. Two problems, and the same fix for both.
 *
 * Legibility: every page has large type passing under it as you scroll — a 108px "74%" on /why/,
 * the step headings on /how/ — and at 88% those ghost through the nav. Measured, not guessed.
 *
 * Cost: a backdrop-filter forces the compositor to re-blur the region behind a sticky element on
 * every scrolled frame, which is the most expensive thing on a page that is also running an
 * animation. Removing it is the single biggest scrolling win on the site, and in a monochrome
 * design on white the blur was buying nothing.
 *
 * --hdr-h is the header's own height, published so that anything pinned beneath it can sit exactly
 * against it rather than guessing. The suite asserts the constant matches the real height. */
:root { --hdr-h: 68px; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 32px;
  padding: 14px 32px;
  background: var(--lin3s-canvas);
  border-bottom: 1px solid var(--lin3s-hairline);
}
.site-header__brand { display: block; margin-right: auto; }
.site-header__logo { height: 34px; width: auto; }
.site-nav { display: flex; gap: 26px; }
.site-nav a {
  font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lin3s-ink-muted); text-decoration: none; padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--lin3s-ink); }
/* the active word marks the current page, not a scroll position — see build_lib.chrome() */
.site-nav a[aria-current="page"] {
  color: var(--lin3s-ink); border-bottom-color: var(--lin3s-ink);
}
.site-header__cta {
  font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  border: 1px solid var(--lin3s-ink); border-radius: 999px; padding: 9px 18px;
}
.site-header__cta:hover { background: var(--lin3s-ink); color: var(--lin3s-on-primary); }

/* ---------------------------------------------------------------- bands */
.band { padding: 104px 32px; border-top: 1px solid var(--lin3s-hairline); }
.band:first-child { border-top: 0; }
.band__inner { max-width: 1240px; margin: 0 auto; }
.band--muted { background: var(--lin3s-canvas-muted); }
.band--dark, .band--cta {
  background: var(--lin3s-inverse-canvas); color: var(--lin3s-inverse-ink); border-top: 0;
}
.band--dark .band__lede, .band--cta .band__lede { color: var(--lin3s-inverse-ink-soft); }
.band--tight { padding: 72px 32px; }

.band__eyebrow { display: block; margin-bottom: 22px; }
.wrr-eyebrow-plain {
  font-size: var(--lin3s-eyebrow-size); font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--lin3s-ink-muted);
}
.band__title {
  font-family: var(--lin3s-font-display); font-weight: 500;
  font-size: clamp(34px, 5.2vw, 62px); line-height: 1.04; letter-spacing: -.02em;
  margin: 0 0 24px; max-width: 22ch;
}
.band__title--wide { max-width: 34ch; }
.band__lede {
  font-size: var(--lin3s-body-lg-size); line-height: 1.5; color: var(--lin3s-ink-soft);
  margin: 0 0 48px; max-width: 62ch;
}
.band__note { font-size: 14px; color: var(--lin3s-ink-muted); margin: 24px 0 0; max-width: 66ch; }

/* ---------------------------------------------------------------- hero, §2 */
.hero { padding: 72px 32px 88px; }
.hero__inner { max-width: 1240px; margin: 0 auto; }
.hero__h1 {
  font-family: var(--lin3s-font-display); font-weight: 500;
  font-size: clamp(56px, 12vw, 152px); line-height: .96; letter-spacing: -.035em;
  margin: 18px 0 28px;
}
.hero__lede {
  font-size: clamp(18px, 2vw, 24px); line-height: 1.42; font-weight: 500;
  margin: 0 0 22px; max-width: 30ch;
}
.hero__path {
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--lin3s-ink-muted); margin: 0 0 32px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.hero__descriptor {
  font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lin3s-ink-muted); margin: 0;
}
.hero__stage { margin-top: 56px; }
/* §2 scene 4: everything goes except the workflow, and the message arrives */
.hero__msg {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
  margin: 28px 0 0; opacity: var(--he-msg, 1);
}
.hero__msg b {
  font-family: var(--lin3s-font-display); font-weight: 500;
  font-size: clamp(22px, 3vw, 34px); letter-spacing: -.01em;
}

/* ---------------------------------------------------------------- §18 legend */
.vocab { list-style: none; margin: 0; padding: 0;
         display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
         background: var(--lin3s-hairline); border: 1px solid var(--lin3s-hairline); }
.vocab li { background: var(--lin3s-canvas); padding: 18px 14px 14px; }
.vocab svg { width: 100%; height: 44px; display: block; }
.vocab__name {
  display: block; font-size: 10.5px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; margin-top: 12px;
}
.vocab__mean { display: block; font-size: 12px; color: var(--lin3s-ink-muted); margin-top: 2px; }

/* ---------------------------------------------------------------- generic layout */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.pair--wide { grid-template-columns: 1fr; gap: 72px; }
.item__title {
  font-family: var(--lin3s-font-display); font-weight: 500; font-size: 26px;
  letter-spacing: -.01em; margin: 0 0 10px;
}
.item__body { margin: 0; color: var(--lin3s-ink-soft); }
.item__label {
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lin3s-ink-muted); margin: 0 0 8px;
}
.chips { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  font-size: 12.5px; padding: 6px 12px; border: 1px solid var(--lin3s-hairline);
  border-radius: 999px; color: var(--lin3s-ink-soft);
}
.band--dark .chips li { border-color: rgba(255,255,255,.22); color: var(--lin3s-inverse-ink-soft); }

/* three big words, §3 */
.rta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.rta__word {
  font-family: var(--lin3s-font-display); font-weight: 500;
  font-size: clamp(34px, 5vw, 58px); line-height: 1; letter-spacing: -.02em; margin: 0 0 14px;
}

/* the numbered figure: a scene with its caption */
.figure { margin: 0; }
.figure__cap {
  font-size: 13px; color: var(--lin3s-ink-muted); margin: 14px 0 0; max-width: 70ch;
}
.figure__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.figure__num {
  font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--lin3s-ink-muted);
}
.figure__title {
  font-family: var(--lin3s-font-display); font-weight: 500; font-size: 22px; margin: 0;
}

/* ---------------------------------------------------------------- the stack, §4 */
.layer { border-top: 1px solid var(--lin3s-hairline); padding: 56px 0; }
.layer:first-of-type { border-top: 0; }
.layer__head { display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start; }
.layer__num {
  font-family: var(--lin3s-font-display); font-size: 40px; line-height: 1;
  color: var(--lin3s-ink-muted);
}
.layer__name {
  font-family: var(--lin3s-font-display); font-weight: 500; font-size: 30px;
  letter-spacing: -.01em; margin: 0 0 6px;
}
.layer__tech {
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lin3s-ink-muted); margin: 0 0 14px;
}
.layer__copy { margin: 0 0 8px; max-width: 62ch; font-size: 18px; }
.layer__note { margin: 8px 0 0; max-width: 66ch; font-size: 14px; color: var(--lin3s-ink-muted); }
.layer__stage { margin-top: 32px; }

/* ---------------------------------------------------------------- the explorer, §7 */
.explorer__tabs {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; padding: 0; border: 0;
}
.explorer__tabs legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.explorer__tab {
  appearance: none; background: none; cursor: pointer;
  font-family: var(--lin3s-font-body); font-size: 12.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--lin3s-ink-muted);
  border: 1px solid var(--lin3s-hairline); border-radius: 999px; padding: 9px 16px;
}
.explorer__tab:hover { color: var(--lin3s-ink); border-color: var(--lin3s-ink); }
.explorer__tab[aria-selected="true"] {
  background: var(--lin3s-ink); border-color: var(--lin3s-ink); color: var(--lin3s-on-primary);
}
.explorer__panel[hidden] { display: none; }
.explorer__title {
  font-family: var(--lin3s-font-display); font-weight: 500; font-size: 26px; margin: 0 0 6px;
}
.explorer__also { font-size: 13px; color: var(--lin3s-ink-muted); margin: 10px 0 0; }

/* ---------------------------------------------------------------- the six steps, §9 */
.steps { position: relative; }
/* Pinned flush against the header, with no gap.
 *
 * It used to be pinned at a hand-picked 88px while the header is 68px tall, leaving a 20px band
 * with no background at all — and the step headings scrolled up through it in full view, above the
 * stage and below the nav. That is the "text in the upper zone". Pinning to --hdr-h closes it by
 * construction, and the negative margin plus matching padding means the stage's own white
 * background covers the join even while the browser is settling a scroll. */
.steps__stage {
  position: sticky; top: var(--hdr-h);
  margin-top: calc(-1 * var(--hdr-h));
  padding: calc(var(--hdr-h) + 16px) 0 4px;
  background: var(--lin3s-canvas);
}
.steps__list { list-style: none; margin: 0; padding: 0; }
.step { padding: 96px 0; border-top: 1px solid var(--lin3s-hairline); }
.step__num {
  font-family: var(--lin3s-font-display); font-size: 13px; letter-spacing: .18em;
  color: var(--lin3s-ink-muted); margin: 0 0 10px;
}
.step__title {
  font-family: var(--lin3s-font-display); font-weight: 500;
  font-size: clamp(30px, 4vw, 46px); line-height: 1.02; letter-spacing: -.02em; margin: 0 0 16px;
}
.step__copy { font-size: 18px; margin: 0 0 8px; max-width: 56ch; }
.step__out {
  display: inline-block; margin-top: 18px; font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--lin3s-ink-muted);
  border: 1px solid var(--lin3s-hairline); border-radius: 999px; padding: 7px 14px;
}

/* ---------------------------------------------------------------- data stories, §11 */
.story { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 56px;
         align-items: start; padding: 88px 0; border-top: 1px solid var(--lin3s-hairline); }
.story:first-of-type { border-top: 0; padding-top: 0; }
.story__big {
  font-family: var(--lin3s-font-display); font-weight: 500;
  font-size: clamp(56px, 9vw, 108px); line-height: .94; letter-spacing: -.035em; margin: 0 0 18px;
}
.story__copy { font-size: 18px; margin: 0 0 10px; }
.story__extra { font-size: 15px; color: var(--lin3s-ink-muted); margin: 0 0 18px; }
.story__src {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lin3s-ink-muted); margin: 0;
}
.story__counter {
  font-family: var(--lin3s-font-display); font-size: 22px; margin: 18px 0 0;
}
.story__counter span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lin3s-ink-muted); font-family: var(--lin3s-font-body); margin-left: 10px; }

/* ---------------------------------------------------------------- metric table, §12 */
.metrics { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.metrics th, .metrics td {
  text-align: left; padding: 15px 16px 15px 0; border-bottom: 1px solid var(--lin3s-hairline);
  vertical-align: baseline;
}
.metrics thead th {
  font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lin3s-ink-muted); border-bottom-color: var(--lin3s-ink);
}
/* the metric name is the row's heading, so it carries the weight and the second column explains */
.metrics tbody th {
  font-weight: 500; width: 30%; padding-right: 40px; color: var(--lin3s-ink);
}
.metrics tbody td { color: var(--lin3s-ink-soft); max-width: 62ch; }
@media (max-width: 700px) {
  .metrics, .metrics tbody, .metrics tr, .metrics th, .metrics td { display: block; }
  .metrics thead { display: none; }
  .metrics tr { border-bottom: 1px solid var(--lin3s-hairline); padding: 14px 0; }
  .metrics th, .metrics td { border: 0; padding: 0; width: auto; }
  .metrics tbody td { margin-top: 4px; }
}

/* ---------------------------------------------------------------- stats, §14 */
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.stat__label {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lin3s-inverse-ink-soft); margin: 6px 0 0;
}

/* ---------------------------------------------------------------- the CTA, §15 */
.cta { max-width: 780px; }
.cta__title {
  font-family: var(--lin3s-font-display); font-weight: 500;
  font-size: clamp(36px, 6vw, 72px); line-height: 1.02; letter-spacing: -.03em;
  margin: 20px 0 20px;
}
.cta__lede { font-size: 19px; color: var(--lin3s-inverse-ink-soft); margin: 0 0 36px; max-width: 52ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ctafield { margin: 0 0 36px; }
.ctafield__label {
  display: block; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lin3s-inverse-ink-soft); margin-bottom: 12px;
}
.ctafield__input {
  width: 100%; max-width: 620px; background: transparent; color: var(--lin3s-inverse-ink);
  border: 0; border-bottom: 1px solid rgba(255,255,255,.32); padding: 10px 0;
  font-family: var(--lin3s-font-display); font-size: clamp(22px, 3.4vw, 34px);
}
.ctafield__input::placeholder { color: rgba(255,255,255,.42); }
.ctafield__note { font-size: 12.5px; color: var(--lin3s-inverse-ink-soft); margin: 12px 0 0; }
.ctafield__wf { margin-top: 22px; min-height: 44px; }
.ctafield__wf svg { width: 100%; max-width: 620px; height: 44px; display: block; }
.ctawf-line { fill: none; stroke: rgba(255,255,255,.34); stroke-width: 1.25; }
.ctawf-node { fill: none; stroke: var(--lin3s-inverse-ink); stroke-width: 1.25; }
.ctawf-dot { fill: var(--lin3s-inverse-ink); }

/* ---------------------------------------------------------------- sources */
.ledger { margin: 40px 0 0; border-top: 1px solid var(--lin3s-hairline); padding-top: 18px; }
.band--dark .ledger, .band--cta .ledger { border-top-color: rgba(255,255,255,.18); }
.ledger summary {
  cursor: pointer; font-size: 13px; letter-spacing: .04em; color: var(--lin3s-ink-muted);
}
.band--dark .ledger summary, .band--cta .ledger summary { color: var(--lin3s-inverse-ink-soft); }
.ledger__list { margin: 16px 0 0; padding-left: 22px; font-size: 13.5px; line-height: 1.6;
                color: var(--lin3s-ink-soft); }
.band--dark .ledger__list, .band--cta .ledger__list { color: var(--lin3s-inverse-ink-soft); }

/* ---------------------------------------------------------------- footer */
.site-footer {
  background: var(--lin3s-inverse-canvas); color: var(--lin3s-inverse-ink);
  padding: 56px 32px; }
.site-footer__bar {
  max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 24px; flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,.16); padding-bottom: 28px;
}
.site-footer__logo { height: 32px; width: auto; filter: invert(1); }
.site-footer__line { font-size: 14px; color: var(--lin3s-inverse-ink-soft); margin: 0; }
.site-footer__nav {
  max-width: 1240px; margin: 24px auto 0; display: flex; gap: 24px; flex-wrap: wrap;
}
.site-footer__nav a {
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--lin3s-inverse-ink-soft); text-decoration: none;
}
.site-footer__nav a:hover { color: var(--lin3s-inverse-ink); }

/* ===================== cross-page view transitions =====================
 * Declared here because site.css is linked by every document, and a cross-document transition
 * only pairs an element when BOTH sides declare the same name.
 *
 * Support, honestly: Chromium 126+ and Safari 18.2+. Firefox has same-document view transitions
 * but not cross-document, so it simply navigates normally — an unknown at-rule is ignored, so the
 * fallback costs no code. It also does nothing over file://, where an opaque origin cannot be
 * same-origin with itself. Serve the site to see it.
 *
 * NAMES MUST BE UNIQUE PER DOCUMENT OR THE WHOLE TRANSITION SILENTLY ABORTS.
 *
 * This is not a subtle degradation — one duplicate name and nothing animates at all, with no
 * console error. It happened here: `.band__title` was named, and every page has three of them, so
 * the transitions were dead across the entire site. There is now a live check asserting that every
 * name in the document is unique, and another that the transition actually fires.
 *
 * So the named elements are only ever things there is exactly one of, on every page:
 */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 260ms; }

.site-header { view-transition-name: page-header; }
.site-header__logo { view-transition-name: brand-logo; }
/* The headline morphs across the navigation. `main h1` and not `.band__title`: every page has
 * exactly one h1 and the suite already asserts it, so uniqueness is guaranteed by something that
 * is checked rather than by a class that happens to be used once. */
main h1 { view-transition-name: page-title; }

/* Mandatory: view-transition animations are covered by no other reduced-motion handling on the
 * page. Zeroing them gives an instant swap, which is the correct behaviour — not no transition. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------------------------------------------------------------- narrow */
@media (max-width: 900px) {
  .site-header { gap: 16px; padding: 12px 20px; flex-wrap: wrap; }
  .site-header__cta { display: none; }
  .site-nav { gap: 16px; }
  .band, .hero { padding-left: 20px; padding-right: 20px; }
  .band { padding-top: 72px; padding-bottom: 72px; }
  .trio, .pair, .rta { grid-template-columns: 1fr; gap: 32px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story { grid-template-columns: 1fr; gap: 28px; padding: 56px 0; }
  .vocab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layer__head { grid-template-columns: 1fr; gap: 8px; }
  .steps__stage { position: static; }
  .step { padding: 56px 0; }
}
@media (max-width: 560px) {
  .vocab { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- wayfinding, home */
.ways { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lin3s-hairline); }
.way a {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) 40px; gap: 24px;
  align-items: start; padding: 26px 0; text-decoration: none;
  border-bottom: 1px solid var(--lin3s-hairline);
}
/* Three columns, so exactly three children: the title and the blurb share the middle cell. */
.way__main { display: block; min-width: 0; }
.way a:hover .way__go { transform: translateX(6px); }
.way a:hover .way__title { text-decoration: underline; text-underline-offset: 4px; }
.way__word {
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--lin3s-ink-muted); padding-top: 10px;
}
.way__title {
  font-family: var(--lin3s-font-display); font-weight: 500; font-size: 24px;
  letter-spacing: -.01em; display: block;
}
.way__body { display: block; font-size: 15px; color: var(--lin3s-ink-soft); margin-top: 6px; }
.way__go { font-size: 20px; color: var(--lin3s-ink-muted); justify-self: end; padding-top: 2px; }
@media (prefers-reduced-motion: no-preference) { .way__go { transition: transform .18s ease; } }
@media (max-width: 900px) {
  .way a { grid-template-columns: 1fr; gap: 6px; }
  .way__word { padding-top: 0; }
  .way__go { display: none; }
}

/* a button variant the CSS port does not carry: a ghost on the dark CTA band */
.lin3s-btn--ghost-inverse {
  background: transparent; color: var(--lin3s-inverse-ink);
  border: 1px solid rgba(255,255,255,.4);
}
.lin3s-btn--ghost-inverse:hover:not(:disabled) { border-color: var(--lin3s-inverse-ink); }

/* the thirteen steps of §10, kept as a list because how ordinary and how many they are is
   the whole argument */
.today { margin: 0; padding-left: 24px; font-size: 15.5px; line-height: 1.9;
         color: var(--lin3s-ink-soft); }
.today li::marker { color: var(--lin3s-ink-muted); font-size: 13px; }

/* Each of the six blocks is sized to FIT the reading band below the pinned stage, so that while
   a step is the current one, the whole of it — number, heading, copy, chips, output — is on screen
   at once. Taller blocks scrolled their own heading out of view halfway through. */
.step { padding: 44px 0; min-height: 0; }
@media (max-width: 900px) { .step { padding: 40px 0; } }

/* §9's pinned stage.
 *
 * The stage is HEIGHT-constrained, not width-constrained. Left to fill the width it grew to 498px
 * of a 900px viewport, leaving the six steps' words 314px to live in at the bottom of the screen —
 * so the picture crowded out the thing it was illustrating. Every stage SVG carries
 * preserveAspectRatio="xMidYMid meet", so capping the height scales the drawing down and centres
 * it rather than cropping anything. */
.steps__stage .stage { height: min(33vh, 310px); width: 100%; }


/* Keeps the stage pinned while the last step is still being read. The sticky container is
   .band__inner, so once its bottom is within one stage-height of the viewport top the stage gets
   pushed away — which used to happen while step 06's words were still on screen. This spacer
   extends the container without changing .steps__list, which is what progress is measured
   against. */
.steps__tail { height: 48vh; }
@media (max-width: 900px) { .steps__tail { display: none; } }

/* ===================== the home page's mark, shrinking as you go =====================
 *
 * On the home page the logo starts large and settles to its normal size over the first stretch of
 * scrolling. Pure CSS: a scroll-driven animation on the document's own scroll timeline, so nothing
 * here needs a scroll listener — which also keeps intact the rule that core.js is the only thing on
 * this site that watches time or scroll.
 *
 * FALLBACK IS THE NORMAL HEADER. The base rules above give the logo its small size on every page,
 * including this one; the large start exists only inside @supports. A browser without scroll-driven
 * animations (Firefox at the time of writing) shows the ordinary header and loses nothing else — far
 * better than being stuck with a 92px logo on every screen of the page.
 *
 * And it is off entirely under reduced motion, where a header that resizes as you scroll is exactly
 * the kind of thing that setting is asking not to happen.
 */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .is-home .site-header {
      animation: hdr-settle linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 300px;
    }
    .is-home .site-header__logo {
      animation: logo-settle linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 300px;
    }
    /* the nav and the CTA hold still while the mark moves: two things resizing at once reads as
       the page struggling to load rather than as a deliberate settle */
    @keyframes hdr-settle {
      from { padding-top: 26px; padding-bottom: 26px; }
      to   { padding-top: 14px; padding-bottom: 14px; }
    }
    @keyframes logo-settle {
      from { height: 92px; }
      to   { height: 34px; }
    }
  }
}

/* ===================== the first screen =====================
 *
 * Everything a visitor needs in order to act — the headline, the line under it, both buttons and
 * the descriptor — fits the first screen, with no scrolling, at laptop heights. The animation
 * below it is the reward for scrolling, not a precondition for finding the CTA.
 *
 * The headline is therefore constrained by the VIEWPORT'S HEIGHT as well as its width. A 152px
 * headline is right on a large screen and impossible on a 640px-tall laptop, where it would push
 * the buttons under the fold on its own — and the home page's header starts tall, which takes
 * another 145px out of that budget. `min(12vw, 17vh)` keeps the type as large as the screen can
 * actually afford. The logo's starting height is height-aware for the same reason.
 *
 * Checked, not hoped: tools/modes.mjs asserts the descriptor's bottom edge is above the fold at a
 * range of viewport heights.
 */
.is-home { --hdr-rest: 68px; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .is-home { --hdr-rest: calc(min(92px, 11vh) + 52px); }
    @keyframes logo-settle {
      from { height: min(92px, 11vh); }
      to   { height: 34px; }
    }
  }
}
.hero { padding-top: 40px; }
.hero__top {
  min-height: calc(100dvh - var(--hdr-rest, 68px) - 96px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__h1 { font-size: clamp(40px, min(12vw, 17vh), 152px); margin: 14px 0 24px; }
.hero__lede { font-size: clamp(17px, min(2vw, 2.6vh), 24px); margin-bottom: 18px; }
.hero__path { margin-bottom: 26px; }
.hero__descriptor { margin: 0; }
@media (max-width: 900px) {
  .hero__top { min-height: 0; }
  .hero__h1 { font-size: clamp(40px, 12vw, 152px); }
}

/* ---------------------------------------------------------------- §9's step rail
 *
 * Where am I in six steps, and how much is left. A scroll-driven sequence needs this: without it the
 * visitor watches a picture change with no idea whether they are two steps in or five. Driven by the
 * same scroll variable as the drawing, so it cannot disagree with it.
 */
.rail { display: flex; align-items: center; gap: 24px; margin: 0 0 18px; }
.rail__bar {
  position: relative; flex: 1; height: 2px; background: var(--lin3s-hairline);
}
.rail__fill {
  position: absolute; inset: 0 auto 0 0; background: var(--lin3s-ink);
  width: calc(var(--bd-t, 0) * 100%);
}
.rail__tick {
  position: absolute; top: -3px; width: 1px; height: 8px; background: var(--lin3s-hairline);
  left: calc(var(--i) * 100% / 6);
}
.rail__tick:first-child { background: transparent; }
.rail__now { margin: 0; display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.rail__num {
  font-size: 11px; font-weight: 500; letter-spacing: .16em; color: var(--lin3s-ink-muted);
}
.rail__title {
  font-family: var(--lin3s-font-display); font-weight: 500; font-size: 19px;
  letter-spacing: -.01em;
}
@media (max-width: 700px) {
  .rail { gap: 14px; }
  .rail__title { font-size: 16px; }
}

/* ---------------------------------------------------------------- clients, §14
 *
 * Names set as TYPE, not logo artwork. Accurate brand marks are not something to approximate — a
 * redrawn logo is wrong, is a trademark problem, and damages the client it names. Typeset names are
 * true and carry the same information. The markup accepts a real SVG the moment one is dropped into
 * assets/clients/, and this rule sizes it when that happens.
 *
 * Deliberately restrained. §17 bans logo walls, and while that instruction is about the technology
 * section, the spirit applies here: this is a quiet list of work, not a trophy cabinet.
 */
.clients {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px; background: var(--lin3s-hairline);
  border: 1px solid var(--lin3s-hairline);
}
.client {
  background: var(--lin3s-canvas); padding: 22px 18px;
  display: flex; align-items: center; min-height: 82px;
  font-family: var(--lin3s-font-display); font-weight: 500; font-size: 17px;
  line-height: 1.2; letter-spacing: -.01em; color: var(--lin3s-ink);
}
.client--mark { justify-content: center; }
.client--mark img { max-height: 34px; width: auto; filter: grayscale(1); opacity: .82; }
@media (max-width: 560px) {
  .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client { font-size: 15px; padding: 16px 14px; min-height: 68px; }
}

/* ===================== "Talk to the robots" =====================
 *
 * The panel is the site, not a widget bolted onto it: monochrome, Besley for what it says and Inter
 * for everything functional, square corners on the transcript and a pill on the send button, the same
 * hairlines as every band. The assistant's mark is §18's agent ring — the glyph that means "an AI
 * decision or action" everywhere else on the site, so a visitor who scrolled the home page already
 * knows what that circle is before it says anything.
 *
 * A real <dialog>, so ::backdrop and the top layer come from the browser rather than from a z-index
 * argument.
 */
.chat {
  width: min(560px, calc(100vw - 32px));
  max-height: min(680px, calc(100dvh - 48px));
  margin: auto; padding: 0; border: 1px solid var(--lin3s-ink); border-radius: 4px;
  background: var(--lin3s-canvas); color: var(--lin3s-ink);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat::backdrop { background: rgba(5, 10, 14, .42); }
.chat:not([open]) { display: none; }

.chat__head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start;
  padding: 20px 20px 16px; border-bottom: 1px solid var(--lin3s-hairline);
}
.chat__avatar { display: block; padding-top: 2px; }
.chat__mark-ring { fill: var(--lin3s-canvas); stroke: var(--lin3s-ink); stroke-width: 1.5; }
.chat__mark-core { fill: var(--lin3s-ink); }
.chat__title {
  font-family: var(--lin3s-font-display); font-weight: 500; font-size: 21px;
  letter-spacing: -.01em; margin: 0;
}
.chat__sub { font-size: 12.5px; color: var(--lin3s-ink-muted); margin: 3px 0 0; }
.chat__close {
  appearance: none; background: none; border: 0; cursor: pointer; line-height: 1;
  font-size: 26px; color: var(--lin3s-ink-muted); padding: 0 2px;
}
.chat__close:hover { color: var(--lin3s-ink); }

.chat__log {
  flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px;
  overscroll-behavior: contain;
}
.chat__row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.chat__row--user { grid-template-columns: 1fr; justify-items: end; }
.chat__bubble { margin: 0; font-size: 15.5px; line-height: 1.5; max-width: 42ch; }
.chat__row--assistant .chat__bubble { color: var(--lin3s-ink); }
.chat__row--user .chat__bubble {
  background: var(--lin3s-ink); color: var(--lin3s-on-primary);
  padding: 10px 14px; border-radius: 14px 14px 2px 14px;
}
.chat__row--assistant .chat__mark { margin-top: 3px; flex: none; }
/* a caret while the answer is arriving, in the site's ink */
.chat__row.is-streaming .chat__bubble::after {
  content: ''; display: inline-block; width: 7px; height: 1.05em; margin-left: 3px;
  background: var(--lin3s-ink); vertical-align: -2px;
}
@media (prefers-reduced-motion: no-preference) {
  .chat__row.is-streaming .chat__bubble::after { animation: chat-caret 1s steps(2) infinite; }
  @keyframes chat-caret { 50% { opacity: 0; } }
}
.chat__row.is-error .chat__bubble { color: var(--lin3s-ink-soft); }

.chat__form {
  display: flex; gap: 10px; padding: 14px 20px;
  border-top: 1px solid var(--lin3s-hairline);
}
.chat__input {
  flex: 1; min-width: 0; font-family: var(--lin3s-font-body); font-size: 15.5px;
  padding: 11px 14px; color: var(--lin3s-ink);
  background: var(--lin3s-canvas);
  border: 1px solid var(--lin3s-hairline); border-radius: 999px;
}
.chat__input:focus-visible { outline: 2px solid var(--lin3s-ink); outline-offset: 1px; }
.chat__input::placeholder { color: var(--lin3s-ink-muted); }
.chat__input:disabled { color: var(--lin3s-ink-muted); }
.chat__send {
  appearance: none; cursor: pointer; font-family: var(--lin3s-font-body); font-size: 14px;
  font-weight: 500; padding: 11px 20px; border-radius: 999px;
  background: var(--lin3s-ink); color: var(--lin3s-on-primary); border: 1px solid var(--lin3s-ink);
}
.chat__send:disabled { background: var(--lin3s-ink-muted); border-color: var(--lin3s-ink-muted); cursor: default; }
.chat__note {
  margin: 0; padding: 0 20px 16px; font-size: 12px; line-height: 1.45;
  color: var(--lin3s-ink-muted);
}
.chat__note a { color: var(--lin3s-ink); }

.chat__cta {
  display: inline-block; font-size: 13px; font-weight: 500; letter-spacing: .04em;
  color: var(--lin3s-ink); text-decoration: none;
  border-bottom: 1px solid var(--lin3s-ink); padding-bottom: 2px;
}