/* Applied Will: the home page, and what every page shares. The other pages add pages.css.
   Black, white and one blue (the point of the Signature mark). Archivo for text, JetBrains Mono for
   numbers and hashes. No gradients, no photos: the imagery is run data. Mobile first.
   Contrast: ink and gray-600 on white are 17:1 and 5.9:1; blue on white is 5.2:1. Blue on ink is
   3.8:1, so on dark sections it is only ever a graphic, never small text. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/jbmono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/jbmono-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #0B0B0C;
  --paper: #FFFFFF;
  --blue: #2F5BFF;
  --gray-50: #F6F7F8;
  --gray-600: #62656B;
  --gray-700: #44474D;
  --line: #E3E4E8;
  --line-ink: #2A2B30;
  --muted-ink: #A3A5AC;
  --mid: #868A92;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gutter: clamp(20px, 5vw, 56px);
  --section-y: clamp(72px, 11vw, 152px);
  --header-h: 65px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
svg { display: block; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.nobr { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--paper); }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--paper); }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--gutter); }

/* Type */

h1, h2, h3 { font-family: var(--sans); font-weight: 600; word-spacing: 0.08em; }
h1 {
  font-size: clamp(38px, 7vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
h2 {
  max-width: 20ch;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }

.label {
  font: 600 12px/1.4 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-600);
  text-wrap: balance;
}
h2.label { max-width: none; font-size: 12px; letter-spacing: 0.12em; }
.lede { max-width: 46ch; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.5; color: var(--gray-700); text-wrap: pretty; }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.muted { color: var(--gray-600); }

/* Buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: 600 15px/1.2 var(--sans);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }
.btn-paper { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn-paper:hover { background: var(--blue); border-color: var(--blue); color: var(--paper); }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 16px; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn:disabled { opacity: .6; cursor: progress; }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; }
.link-arrow::after { content: "→" / ""; transition: transform .2s; }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.link-arrow:hover::after { transform: translateX(3px); }

/* Header: logo, one button, a menu. Wide screens show the links. */

.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.nav { position: relative; display: flex; align-items: center; gap: 8px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; min-height: 40px; margin-right: auto; color: var(--ink); text-decoration: none; }
/* overflow: at phone sizes the SVG viewport snaps to whole pixels and would clip the wordmark. */
.brand-lockup { height: 22px; width: auto; aspect-ratio: 422.62 / 77.32; overflow: visible; }
.nav-links a { display: block; padding-block: 12px; font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; }
.nav-links a[aria-current] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-cta { flex: none; white-space: nowrap; }
.nav-cta-li { display: none; }
.nav-toggle {
  display: inline-grid;
  place-content: center;
  gap: 6px;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 1.5px; background: var(--ink); transition: transform .2s; }
.nav.is-open .nav-toggle span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav.is-open .nav-toggle span:last-child { transform: translateY(-3.75px) rotate(-45deg); }

@media (max-width: 899px) {
  /* Without JS the links sit on a second row; with JS they open under the bar. */
  html:not(.js) .nav { flex-wrap: wrap; }
  html:not(.js) .nav-links { order: 3; flex-basis: 100%; }
  html:not(.js) .nav-links ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
  html:not(.js) .nav-toggle { display: none; }
  html.js .nav-links { display: none; }
  html.js .nav.is-open .nav-links {
    display: block;
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
    z-index: 49;
    padding: 4px var(--gutter) 12px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }
}
/* The smallest phones: the button moves into the menu so logo, button and toggle never crowd. */
@media (max-width: 899px) { .nav-cta { padding: 0 12px; } }
@media (max-width: 359px) {
  .nav-cta { display: none; }
  .nav-cta-li { display: block; }
  .nav-cta-li a { font-weight: 600; }
}
@media (min-width: 900px) {
  .brand-lockup { height: 26px; }
  .nav { gap: 40px; }
  .nav-links ul { display: flex; gap: 32px; }
  .nav-links a { padding-block: 8px; font-size: 15px; }
  .nav-toggle { display: none; }
  .nav-cta-li { display: none; }
}

/* Hero */

.hero { padding-block: clamp(40px, 7vw, 96px) clamp(64px, 9vw, 128px); }
.hero .wrap { display: grid; gap: 56px; align-items: center; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.hero-sub { max-width: 44ch; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.5; color: var(--gray-700); text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 8px; }
.hero-ctas .btn { max-width: 100%; }
.hero-trust { font-size: 14px; color: var(--gray-600); }
/* The home headline sits on three or four lines at desktop widths. */
.hero h1 { font-size: clamp(38px, 4.5vw, 64px); }
/* The evidence card: what a buyer gets for one task, from one accepted unit's record. */
.report-source { font-size: 12.5px; line-height: 1.5; color: var(--gray-600); }
@media (min-width: 980px) {
  .hero .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: 64px; }
  .hero .evidence { justify-self: end; }
}

/* The audit-report card: a real task from our first batch, drawn from content/sample-report.json. */

.report {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 520px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--ink);
  background: var(--paper);
}
.report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report-head .mono { font-size: 12.5px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 9px;
  border: 1px solid var(--ink);
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.report-title { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.12; letter-spacing: -0.025em; }
.report-id { font-size: 12.5px; line-height: 1.5; color: var(--gray-600); overflow-wrap: anywhere; }
.report-prompt { padding-left: 14px; border-left: 2px solid var(--ink); font-size: 15px; line-height: 1.5; color: var(--gray-700); }
.report-rows { margin-top: 4px; }
.report-rows > div { display: grid; gap: 4px; padding-block: 13px; border-top: 1px solid var(--line); }
.report-rows dt { font: 600 11px/1.6 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-600); }
.report-rows dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 15px; line-height: 1.45; }
.report-rows .val { font-size: 15px; font-weight: 600; }
.report-rows .note { flex-basis: 100%; font-size: 12.5px; color: var(--gray-600); }
@media (min-width: 480px) {
  .report-rows > div { grid-template-columns: 128px minmax(0, 1fr); gap: 16px; }
  .report-rows dt { padding-top: 3px; }
}

/* Rollout segments (blue = passed) and exploit-attempt squares (blue = got through) */
.segs, .dots { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.segs i { width: 18px; height: 10px; box-shadow: inset 0 0 0 1px var(--ink); }
.segs i.on { background: var(--blue); box-shadow: none; }
.dots i { width: 8px; height: 8px; background: var(--ink); }
.dots i.through { background: var(--blue); }
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.status i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink); }
.status.done i { background: var(--blue); box-shadow: none; }

/* Sections */

.section { padding-block: var(--section-y); }
.section + .section { border-top: 1px solid var(--line); }
.band { background: var(--gray-50); }
.dark { background: var(--ink); color: var(--paper); border-top-color: var(--ink) !important; }
.dark .label, .dark .lede { color: var(--muted-ink); }
.dark :focus-visible { outline-color: var(--paper); }

.section-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: clamp(40px, 6vw, 80px); }
.section-head > div { display: flex; flex-direction: column; gap: 16px; }
.section-head:last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .section-head.split { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 64px; }
  .section-head.split .lede { flex: 0 1 40ch; }
}

/* Booking: on a page with [data-booking], a click on a cal.com link opens Cal.com's calendar inline (main.js). */
.cal-inline { display: none; }
.is-booking .cal-inline { display: block; min-height: 600px; }
.booking.is-booking { padding-block: 8px clamp(48px, 7vw, 96px); }

/* Proof strip: three facts we can show, each with its source. */

.proof { border-block: 1px solid var(--line); }
.proof-list { display: grid; }
.proof-list li { display: grid; gap: 8px; align-content: start; padding-block: 24px; }
.proof-list li + li { border-top: 1px solid var(--line); }
.proof-fact { font-size: 16px; line-height: 1.4; color: var(--gray-700); }
/* inline-block on its own line: the figure reads as a headline, and the fact stays one line of text. */
.proof-fact strong { display: inline-block; width: 100%; margin-bottom: 6px; font: 600 clamp(28px, 2.8vw, 36px)/1.05 var(--sans); letter-spacing: -0.035em; word-spacing: 0.04em; color: var(--ink); }
.proof .source { font-size: 13px; }
@media (min-width: 900px) {
  .proof-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof-list li { padding: 32px 32px 34px 0; }
  .proof-list li + li { padding-left: 32px; border-top: 0; border-left: 1px solid var(--line); }
}

/* The problem: one claim, one sourced stat. */

.problem { display: grid; gap: 40px; }
.problem-copy { display: grid; gap: 20px; align-content: start; }
@media (min-width: 900px) { .problem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: end; } }
.bars { display: grid; gap: 22px; padding-top: 20px; border-top: 1px solid var(--ink); }
.bar-row { display: grid; gap: 10px; }
.bar-label { max-width: 40ch; color: var(--gray-700); }
.bar-label strong { color: var(--ink); }
.bar { display: block; height: 18px; background: var(--line); }
.bar .fill { display: block; width: var(--w); min-width: 4px; height: 100%; background: var(--ink); transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.bar-row + .bar-row .fill { background: var(--blue); }
.bars.is-waiting .fill { width: 0; }
.stat { display: grid; gap: 12px; align-content: start; padding-top: 20px; border-top: 1px solid var(--ink); }
.stat .num { color: var(--ink); font-size: clamp(48px, 8vw, 88px); line-height: 1; font-weight: 600; letter-spacing: -0.05em; }
.stat .unit { font-size: 0.32em; letter-spacing: 0; }
.stat p { max-width: 38ch; color: var(--gray-700); }
.stat .detail { font: 400 13px/1.5 var(--mono); color: var(--gray-600); }
.source { max-width: 70ch; font-size: 14px; line-height: 1.5; color: var(--gray-600); }
.source a { color: var(--ink); }

/* Solution: four cards, each with its scene on top. */

.cards { display: grid; gap: 16px; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--ink); background: var(--paper); }
.card .plate { height: clamp(128px, 11vw, 152px); border-bottom: 1px solid var(--ink); }
.card-body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: clamp(20px, 2vw, 26px); }
.card h3 { font-size: 21px; line-height: 1.2; text-wrap: balance; }
.card-body > p:not(.label, .card-meta) { font-size: 16px; line-height: 1.55; color: var(--gray-700); }
.card-meta { font-size: 14px; line-height: 1.5; font-weight: 500; }
.card .card-body > p.card-num, .tile-num { font-size: clamp(34px, 3.4vw, 44px); line-height: 1; font-weight: 600; letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; }
.card .card-body > p.card-num { font-size: clamp(26px, 2.1vw, 30px); }
.card-links { display: grid; margin-top: auto; padding-top: 4px; }
.card-links .link-arrow { min-height: 40px; font-size: 15px; }

/* How it works: the five steps in one strip */

.steps { display: grid; gap: 0; }
.steps > li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px 12px; align-content: start; padding-block: 16px 20px; border-top: 1px solid #4A4C53; }
.steps > li > * { grid-column: 2; }
.steps .step-no { grid-column: 1; grid-row: 1 / span 3; padding-top: 2px; }
.steps > li:last-child { padding-top: 14px; border-top: 3px solid var(--blue); }
.step-no { font-size: 13px; color: var(--muted-ink); }
.who {
  justify-self: start;
  padding: 4px 8px;
  border: 1px solid #4A4C53;
  font: 600 11px/1 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-ink);
}
.who.expert { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.steps h3 { font-size: 19px; }
.steps p:not(.step-no) { font-size: 15px; line-height: 1.5; color: var(--muted-ink); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 20px; }
  .steps > li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 20px 0; }
  .steps > li > *, .steps .step-no { grid-column: auto; grid-row: auto; }
  .steps > li:last-child { padding-top: 18px; }
  .steps h3 { min-height: 2.5em; margin-top: 4px; }
}

/* Research: the latest posts, title first. */

.posts { display: grid; }
.post-card { position: relative; display: grid; gap: 10px; align-content: start; padding-block: 22px 26px; border-top: 1px solid var(--ink); }
.post-card:last-child { border-bottom: 1px solid var(--ink); }
.post-card h3 { font-size: clamp(20px, 1.9vw, 24px); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.post-card h3 a { text-decoration: none; }
.post-card h3 a::after { content: ""; position: absolute; inset: 0; }
.post-card:hover h3 a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.post-card p:not(.post-meta) { font-size: 16px; line-height: 1.55; color: var(--gray-700); }
.post-meta { font: 400 12.5px/1.4 var(--mono); color: var(--gray-600); }
@media (min-width: 900px) {
  .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
  .post-card:last-child { border-bottom: 0; }
}

/* Research tiles: a scene, one big number, one line and a date; the whole tile is the link. */
.tiles { display: grid; gap: 16px; }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { position: relative; display: flex; flex-direction: column; border: 1px solid var(--ink); background: var(--paper); }
.tile .plate { height: clamp(120px, 10vw, 144px); border-bottom: 1px solid var(--ink); }
.tile-body { display: grid; gap: 10px; padding: clamp(20px, 2vw, 26px); }
.tile h3 { font-size: 17px; line-height: 1.4; font-weight: 500; }
.tile h3 a { text-decoration: none; }
.tile h3 a::after { content: ""; position: absolute; inset: 0; }
.tile-body::after { content: "→" / ""; font-weight: 600; color: var(--blue); }
.tile:hover h3 a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* Trust: one compact band above the footer */
.trust-row { padding-block: 28px; border-top: 1px solid var(--line); }
.trust-band { display: grid; gap: 8px 48px; font-size: 15px; line-height: 1.5; color: var(--gray-700); }
@media (min-width: 900px) { .trust-band { grid-template-columns: auto auto; justify-content: space-between; align-items: baseline; } }
.trust-band .link-arrow { display: inline; min-height: 0; font-size: 15px; white-space: nowrap; }
.trust-band .link-arrow::after { margin-left: 8px; }

/* For experts: a full-width band with its scene */

.banner { display: grid; gap: 32px; }
.banner-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.banner-copy p:not(.label) { max-width: 44ch; font-size: clamp(17px, 1.5vw, 19px); color: var(--gray-700); }
.banner .plate { height: clamp(180px, 26vw, 300px); border: 1px solid var(--ink); background: var(--paper); }
@media (min-width: 900px) { .banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; align-items: center; } }

/* Footer */

.site-footer { background: var(--ink); color: var(--paper); padding-block: 56px 32px; overflow: hidden; }
.site-footer .brand { color: var(--paper); }
.site-footer :focus-visible { outline-color: var(--paper); }
.footer-top { display: grid; gap: 28px; }
.footer-tag { max-width: 34ch; color: var(--muted-ink); }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.footer-links a { display: inline-block; padding-block: 10px; font-weight: 500; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-legal { padding-top: 24px; border-top: 1px solid var(--line-ink); font-size: 14px; color: var(--muted-ink); }
@media (min-width: 900px) {
  .footer-top { grid-template-columns: 1fr auto; align-items: end; }
}

.more { margin-top: clamp(28px, 4vw, 44px); }

/* The Signature field (field.js): a dithered contour map with one blue point, behind content.
   Text never sits on it: each field keeps clear of its copy (data-clear). */

.has-field { position: relative; isolation: isolate; }
.field { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.field canvas { display: block; image-rendering: pixelated; opacity: 0; transition: opacity 1.2s; }
.field canvas.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .field canvas { transition: none; } }
/* The backup: without JavaScript or WebGL, wide screens get a still of the same field
   (tools/render-field.mjs) in the right-hand column only, where no copy ever sits
   (the copy columns end before 58% of the page, and page-hero copy is at most 700px wide).
   Phones keep the plain page. */
@media (min-width: 980px) {
  html:not(.js) :is(.field-hero, .field-page)::before,
  :is(.field-hero, .field-page).is-still::before {
    content: "";
    position: absolute;
    inset: 0 0 0 max(58%, 790px);
    background: url(/assets/field/still.png) 0 0 / 960px 960px repeat-x;
    image-rendering: pixelated;
  }
}
@media (max-width: 979px) { .hero .wrap { gap: 96px; } }

/* Scenes (scenes.js). Text sits beside or below a plate, never on it; the globe keeps clear of the footer line. */

.plate { position: relative; overflow: hidden; isolation: isolate; }
.plate canvas { position: absolute; top: 0; left: 0; image-rendering: pixelated; opacity: 0; transition: opacity 1.2s; }
.plate canvas.is-live { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .plate canvas { transition: none; } }
/* No WebGL: the still. No JS: the still on wide screens only, as the hero. */
.plate.is-still { background-image: url(/assets/field/still.png); background-size: 960px; image-rendering: pixelated; }
.plate.is-still[data-tone=ink] { background-image: url(/assets/field/still-ink.png); }
@media (min-width: 980px) {
  html:not(.js) .plate { background-image: url(/assets/field/still.png); background-size: 960px; image-rendering: pixelated; }
  html:not(.js) .plate[data-tone=ink] { background-image: url(/assets/field/still-ink.png); }
}

.pipeline { height: clamp(96px, 12vw, 156px); margin-bottom: clamp(24px, 4vw, 44px); }
/* Stacked steps: the strip stays in view, so the point travels as you read. */
@media (max-width: 899px) { .pipeline { position: sticky; top: var(--header-h); z-index: 1; background: var(--ink); } }
.steps > li, .step-no { transition: border-color .5s, color .5s; }
.steps > li.is-done:not(:last-child) { border-top-color: var(--muted-ink); }
.steps > li.is-now:not(:last-child) { border-top-color: var(--paper); }
.steps > .is-done .step-no { color: var(--paper); }


.footer-horizon { position: relative; isolation: isolate; margin-top: clamp(40px, 6vw, 72px); padding: 8px 0 clamp(168px, 22vw, 300px); }
.footer-horizon .plate { position: absolute; inset: 0; z-index: -1; }
.footer-close { font: 600 clamp(32px, 5.2vw, 72px)/1.02 var(--sans); letter-spacing: -0.045em; word-spacing: 0.08em; text-wrap: balance; }