/* IND4AI Research — colour chapters. Night → register → ice → paper, then highlighter fields.
   Type: Red Hat Display 900 (uppercase display) and Red Hat Text 400/500. One radius: square.
   Motion: Emil Kowalski's curves and timings; taste-skill's visual bans (no glass, glows, rest shadows). */

:root {
  --night: #06080b;
  --deep: #0b2230;
  --ice: #bfe3ee;
  --paper: #f4f4f1;
  --paper-2: #e8e8e2;
  --paper-3: #dcddd5;
  --ink: #0a0b0d;
  --soft: #4b4f55;
  --frost: #eaf3f6;            /* ink on the dark fields */
  --frost-soft: #a9bcc4;
  --amber: #ffd23f;            /* highlighter yellow */
  --lime: #c8f53c;             /* highlighter green: the one accent */
  --accent: var(--lime);
  --on-bright: #0a0b0d;          /* ink on lime, amber and frost chips, in either theme */
  --accent-ink: var(--ink);

  --font-display: "Red Hat Display", "Segoe UI", system-ui, sans-serif;
  --font-text: "Red Hat Text", "Segoe UI", system-ui, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.25rem, 1.1rem + 4.6vw, 5.5rem);
  --step-display: clamp(2.5rem, 0.4rem + 8.6vw, 9rem);

  --m: clamp(1.25rem, 3.2vw, 3rem);
  --gutter: clamp(1rem, 2vw, 1.75rem);
  --col: calc((100vw - 2 * var(--m) - 11 * var(--gutter)) / 12);
  --header: 76px;

  /* Emil Kowalski's curves */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 160ms;
  --t-hover: 180ms;
  --t-ui: 220ms;
  --t-reveal: 720ms;
  --stagger: 60ms;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--step-body)/1.5 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--lime); color: var(--on-bright); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 900; letter-spacing: -0.03em; line-height: 0.92; text-transform: uppercase; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.display { font-size: var(--step-display); }
.head { font-size: var(--step-head); }
.lead { font-size: var(--step-lead); line-height: 1.35; }
.small { font-size: var(--step-small); line-height: 1.45; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- fields ---------- */
.field { position: relative; }
.night { background: var(--night); color: var(--frost); }
.deep { background: var(--deep); color: var(--frost); }
.ice { background: var(--ice); color: var(--ink); }
.paper { background: var(--paper); color: var(--ink); }
.amber { background: var(--amber); color: var(--ink); }
.lime { background: var(--lime); color: var(--ink); }
.wrap { padding-inline: var(--m); }
.above { position: relative; z-index: 2; }

/* ---------- buttons: flat, square, one fill ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  min-height: 52px; padding: 0 1.35em;
  background: var(--accent); color: var(--accent-ink);
  font: 500 var(--step-body)/1 var(--font-text);
  text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.btn:active { transform: scale(0.97); }
.btn.ink { background: var(--ink); color: var(--paper); }
.btn.frost { background: var(--frost); color: var(--on-bright); }
.btn .arrow { display: inline-block; transition: transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arrow { transform: translateX(4px); }
  .btn:hover { background: #d6ff52; }
  .btn.ink:hover { background: #1c1e22; }
  .btn.frost:hover { background: #ffffff; }
}
.textlink {
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) { .textlink:hover { text-decoration-color: currentColor; } }

/* ---------- header: wordmark, four links, sound, one action; ink follows the chapter ---------- */
.site-head {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: clamp(12px, 2vw, 28px);
  height: var(--header); padding: env(safe-area-inset-top, 0px) var(--m) 0;
  color: var(--hr-ink, var(--frost));
  transition: color 300ms ease;
  pointer-events: none;
}
.site-head > * { pointer-events: auto; }
/* a plain bar in the flat colour of whatever is under each half of it */
.site-head::before, .site-head::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; transition: background-color 300ms ease; }
/* the bar splits where the links begin, so every link takes the ink of the ground it sits on */
.site-head::before { left: 0; width: var(--split, 50%); background: var(--hl, var(--night)); }
.site-head::after { left: var(--split, 50%); right: 0; background: var(--hr, var(--night)); }
.site-head .wordmark { color: var(--hl-ink, var(--frost)); transition: color 300ms ease; }
.wordmark { font: 900 1.125rem/1 var(--font-display); letter-spacing: -0.01em; text-transform: uppercase; text-decoration: none; margin-right: auto; white-space: nowrap; }
.site-nav { display: flex; gap: clamp(14px, 1.8vw, 26px); font-size: var(--step-small); font-weight: 500; }
.site-nav a { text-decoration: none; padding: 6px 0; }
.head-cta { min-height: 44px; font-size: var(--step-small); padding: 0 1.1em; }
.menu-btn { display: none; height: 40px; padding: 0 12px; border: 0; background: color-mix(in srgb, currentColor 12%, transparent); cursor: pointer; font-size: var(--step-small); font-weight: 500; transition: transform var(--t-press) var(--ease-out); }
.menu-btn:active { transform: scale(0.97); }

/* ---------- the 3D world: fixed behind the run, above the field colours, below the words ---------- */
#world { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: block; transition: opacity 400ms ease; }
.no-gl #world { display: none; }

/* ---------- hero: fragment on a shaped stage ---------- */
.hero { min-height: max(100svh, 760px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); padding: 0 var(--m); }
.hero-copy { grid-column: 1 / span 8; padding-top: max(150px, 17vh); position: relative; z-index: 2; }
@media (min-width: 1081px) { .hero h1 { max-width: calc(8 * var(--col) + 7 * var(--gutter)); } }
.hero-sub { margin-top: 36px; max-width: 34ch; font-size: var(--step-lead); line-height: 1.35; color: var(--frost); }
.hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.cohort { margin-top: 18px; color: var(--frost-soft); font-size: var(--step-small); }
.stage {
  position: absolute; z-index: 2; left: calc(var(--m) + 6 * (var(--col) + var(--gutter))); right: 0; bottom: 0; top: 56%;
  background: var(--ice); color: var(--ink);
  clip-path: polygon(0 56px, calc(2 * var(--col) + var(--gutter)) 56px, calc(2 * var(--col) + var(--gutter) + 40px) 0, 100% 0, 100% 100%, 0 100%);
  overflow: hidden;
}
.stage-inner { position: absolute; left: 56px; top: 104px; width: min(620px, calc(100% - 72px)); }

/* the run panel: a real piece of the portal's generate card */
.runpanel { background: var(--paper); color: var(--ink); padding: 22px 24px 26px; font-size: 14px; }
.rp-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.rp-title { font-weight: 500; font-size: 14px; }
.rp-state { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; background: var(--paper-2); font-size: 13px; font-weight: 500; transition: background-color 220ms ease; }
.rp-state.done { background: var(--lime); }
.rp-field { margin-top: 14px; padding: 12px 14px; background: var(--paper-2); display: grid; gap: 2px; }
.rp-label { font-size: 13px; color: var(--soft); }
.rp-value { font-weight: 500; font-size: 14px; }
.rp-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 4px; }
.rp-steps li { display: grid; grid-template-columns: 22px 150px 1fr; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; background: var(--paper); transition: background-color 220ms ease; }
.rp-steps li.on { background: var(--paper-2); }
.rp-name { font-weight: 500; }
.rp-detail { color: var(--soft); font-size: 14px; transition: opacity 200ms ease; }
.rp-steps li.done .rp-detail { color: var(--ink); }
.rp-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--paper-3); position: relative; transition: background-color 200ms ease, transform 200ms var(--ease-out); }
.rp-steps li.on .rp-dot { background: transparent; border: 2.5px solid var(--paper-3); border-left-color: var(--ink); animation: spin 620ms linear infinite; }
.rp-steps li.done .rp-dot { background: var(--ink); transform: scale(1); }
.rp-steps li.done .rp-dot::before { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid var(--lime); border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.rp-bar { margin-top: 16px; height: 6px; background: var(--paper-2); overflow: hidden; }
.rp-bar span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); transition: transform 500ms var(--ease-out); }
.rp-foot { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; color: var(--soft); }
.rp-again { border: 0; background: none; padding: 6px 0; font-size: 13px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- the run: four chapters held behind sticky words ---------- */
.chapter { min-height: 135svh; padding: 0 var(--m); }
.ch-copy { position: sticky; top: 24vh; max-width: min(46rem, calc(6 * var(--col) + 5 * var(--gutter))); padding-block: 16vh 24vh; z-index: 2; }
.ch-copy h2 { font-size: var(--step-display); width: max-content; max-width: min(calc(9 * var(--col) + 8 * var(--gutter)), 92vw); }
.ch-copy p { margin-top: 36px; max-width: 34ch; }
.ch-copy h2.long { font-size: var(--step-head); }
.night .ch-copy p, .deep .ch-copy p { color: var(--frost); }
.gl-fallback { display: none; }
.no-gl .gl-fallback { display: block; margin-top: 40px; width: min(420px, 80vw); }

/* ---------- how it works: the Hairline belt on amber, then one figure through four fields ---------- */
.how-belt { min-height: 100svh; padding: 120px var(--m) 96px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
.how-belt .copy { grid-column: 1 / span 5; position: sticky; top: 120px; }
.how-belt .copy p { margin-top: 32px; max-width: 30ch; }
.belt-figure { grid-column: 6 / span 7; }
#line-stage {
  --hairline-plate: var(--amber);
  --hairline-hi: var(--ink);
  --hairline-edge: color-mix(in srgb, var(--ink) 66%, var(--amber));
  --hairline-mid: color-mix(in srgb, var(--ink) 40%, var(--amber));
  --hairline-lo: color-mix(in srgb, var(--ink) 24%, var(--amber));
  --hairline-stroke: 1.15;
  width: 100%;
}
.belt-read { margin-top: 8px; display: flex; gap: 18px; align-items: baseline; min-height: 3.2em; }
.belt-read strong { font: 900 var(--step-lead)/1 var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; min-width: 5.5ch; }
.belt-read span { max-width: 46ch; }

.strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip .cell { min-height: 84svh; position: relative; padding: calc(var(--header) + 24px) 28px 28px; display: flex; flex-direction: column; }
.strip .cell h3 { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1; max-width: 14ch; margin-bottom: 24px; }
.strip .card-slot { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); width: min(260px, calc(100% - 40px)); }
.strip .clause { margin-top: auto; font: 500 var(--step-lead)/1.15 var(--font-text); max-width: 14ch; letter-spacing: -0.01em; }
.fig-card { position: relative; background: var(--paper); color: var(--ink); padding: 16px 16px 18px; font-size: 14px; line-height: 1.45; transition: transform 150ms var(--ease-out); }
.fig-card .k { font-size: 13px; color: var(--soft); }
.fig-card .v { font: 900 var(--step-lead)/1.05 var(--font-display); letter-spacing: -0.02em; margin-top: 4px; }
.fig-card .raw { color: var(--soft); }
.fig-card .raw mark { background: var(--amber); color: var(--on-bright); padding: 0 2px; }
.fig-card .meta { margin-top: 10px; display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--soft); }
.fig-card .ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; }
.fig-card .ok::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); }
.fig-card table { width: 100%; border-collapse: collapse; margin-top: 6px; font-size: 13px; }
.fig-card td { padding: 6px 0; border-top: 1px solid var(--paper-3); vertical-align: top; }
.fig-card td + td { padding-left: 8px; text-align: right; }

/* ---------- the dossiers: stacking colour sheets ---------- */
.sheets-head { padding: 160px var(--m) 48px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: end; }
.sheets-head h2 { grid-column: 1 / span 7; }
.sheets-head p { grid-column: 1 / span 6; margin-top: 28px; max-width: 46ch; }
.sheet-index { grid-column: 8 / -1; grid-row: 1 / span 2; align-self: end; list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sheet-index li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 18px; background: var(--paper-2); }
.sheet-index li:nth-child(even) { background: var(--paper-3); }
.sheet-index a { font-weight: 500; text-decoration: none; }
.sheet-index span { font-size: var(--step-small); color: var(--soft); }
@media (hover: hover) and (pointer: fine) { .sheet-index a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.sheet {
  position: sticky; top: calc(var(--header) + var(--i) * 72px);
  min-height: calc(100svh - var(--header) - var(--i) * 72px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter);
  padding: 0 var(--m); overflow: hidden;
}
.sheet .band { grid-column: 1 / -1; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sheet .band h3 { font-size: var(--step-lead); letter-spacing: -0.02em; line-height: 1; }
.sheet .band .files { font-size: var(--step-small); font-weight: 500; }
/* the words sit in the middle of the sheet and rise ahead of the next one (app.js followSheets) */
.sheet .body { grid-column: 1 / span 5; align-self: center; padding-block: 24px 40px; will-change: transform; }
.sheet .body p { max-width: 40ch; }
.sheet .body ul { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.sheet .body li { padding: 7px 12px; background: color-mix(in srgb, currentColor 10%, transparent); font-size: var(--step-small); font-weight: 500; }
.sheet figure { position: relative; grid-column: 7 / -1; margin: 0 calc(-1 * var(--m)) 0 0; height: calc(100svh - var(--header) - var(--i) * 72px - 72px); overflow: hidden; background: var(--paper); cursor: zoom-in; }
.sheet figure img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transform: scale(1.06); transform-origin: 50% 0; will-change: transform; }
.sheet:last-of-type { margin-bottom: 0; }

/* ---------- live: your firm on the cover ---------- */
.live { display: grid; grid-template-columns: 1fr 1fr; }
.live .half { min-height: 92svh; position: relative; padding: 0 var(--m); }
.live .in-half { padding-top: 30%; }
.live .in-half label { display: block; font-size: var(--step-lead); font-weight: 500; max-width: 24ch; }
.firm {
  display: block; width: min(34ch, 100%); margin-top: 18px; height: 72px; padding: 0 18px;
  background: color-mix(in srgb, var(--frost) 10%, transparent); color: var(--frost);
  border: 0; border-radius: 0; font: 500 var(--step-lead)/1 var(--font-text);
  caret-color: var(--lime);
  transition: background-color var(--t-hover) ease;
}
.firm::placeholder { color: var(--frost-soft); }
.firm:focus { outline: none; background: color-mix(in srgb, var(--frost) 16%, transparent); }
.firm:focus-visible { outline: 2px solid var(--lime); outline-offset: 0; }
.live .note { margin-top: 18px; max-width: 40ch; color: var(--frost-soft); font-size: var(--step-small); }
.live .split { position: absolute; bottom: 32px; font-size: var(--step-head); }
.live .split.l { left: var(--m); }
.live .split.r { right: var(--m); text-align: right; }
.split-word { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.92; }
.live .out-half { padding-top: 12%; display: grid; justify-items: center; align-content: start; padding-bottom: 180px; }
.hint { margin-top: 14px; width: min(500px, 100%); font-size: var(--step-small); color: var(--soft); }

/* the cover: a fragment of the dossier itself */
.cover { width: min(500px, 100%); background: #ffffff; color: #1d1b17; padding: 28px 30px 24px; font-size: 14px; }
.cv-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; padding-bottom: 10px; border-bottom: 1.5px solid #1d1b17; }
.cv-brand { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; }
.cv-kind { margin-top: 36px; font-size: 13px; font-weight: 500; color: #8f2a2a; }
.cv-title { margin-top: 8px; font: 900 var(--step-lead)/1 var(--font-display); letter-spacing: -0.02em; }
.cv-sub { margin-top: 10px; color: #5d5a52; }
.cv-grid { margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.cv-grid > div { padding: 10px 10px 10px 0; border-top: 1px solid #d9d5c9; } /* taste-skill-ignore: the dossier's own table rule, inside data-ui */
.cv-grid dt { font-size: 13px; color: #6f6b61; }
.cv-grid dd { margin: 2px 0 0; font-weight: 500; font-size: 14px; }
.cv-foot { margin-top: 18px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; padding-top: 12px; border-top: 1.5px solid #1d1b17; }
.cv-foot span { display: block; font-size: 13px; color: #6f6b61; }
.cv-foot strong { display: block; font-weight: 500; font-size: 14px; overflow-wrap: anywhere; }
#cv-firm { transition: opacity 160ms ease; }
.cv-flag { margin-top: 16px; padding: 8px 10px; background: var(--paper-2); color: #8f2a2a; font-size: 13px; font-weight: 500; }
.ref {
  font: inherit; color: inherit; padding: 0 2px; margin: 0 -2px; border: 0; cursor: help;
  background: none;
  text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  transition: background-color var(--t-hover) ease;
}
.ref[aria-expanded="true"] { background: var(--lime); text-decoration-color: transparent; }

/* the Reference Link popover floats over the page */
.pop {
  position: fixed; z-index: 70; max-width: 300px; padding: 12px 14px;
  background: var(--ink); color: var(--paper); font-size: 14px; line-height: 1.4;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.3); /* taste-skill-ignore: a popover floats */
  transform-origin: var(--origin, 50% 100%);
  transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out);
  pointer-events: none;
}
.pop[data-open="false"] { opacity: 0; transform: scale(0.97); }
.pop .pk { display: block; font-size: 13px; color: var(--lime); font-weight: 500; }
.pop .pn { display: block; margin-top: 3px; font-weight: 500; }
.pop .pd { display: block; margin-top: 3px; color: #c9ccd1; }
.pop.instant { transition-duration: 0ms; }

/* ---------- who it's for: names running off the edges, then the banded list ---------- */
.names { height: 34vh; min-height: 220px; display: flex; align-items: center; overflow: hidden; background: var(--lime); color: var(--ink); }
.names-track { display: flex; white-space: nowrap; will-change: transform; }
.names-track span { font: 900 var(--step-display)/1 var(--font-display); letter-spacing: -0.03em; text-transform: uppercase; display: inline-flex; align-items: center; }
.names-track span::after { content: ""; width: 0.22em; height: 0.22em; border-radius: 50%; background: currentColor; margin: 0 0.42em; }
@media (prefers-reduced-motion: no-preference) {
  .names-track { animation: names 46s linear infinite; }
  .names:hover .names-track, .names:focus-within .names-track { animation-play-state: paused; }
}
@keyframes names { to { transform: translateX(-50%); } }
.names-note { padding: 22px var(--m) 0; max-width: calc(var(--m) * 2 + 60ch); }
.desks-row { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: end; padding: 40px var(--m) 0; }
.desks-row .names-note { grid-column: 1 / span 5; padding: 0; max-width: 46ch; }
.desks-row figure { grid-column: 7 / -1; margin: 0; }
.desks-row img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; }
.desks-row figcaption { margin-top: 10px; font-size: var(--step-small); color: var(--soft); }
@media (max-width: 720px) { .desks-row { display: block; padding-top: 24px; } .desks-row figure { margin-top: 24px; } }

.who { padding: 160px var(--m) 200px; }
.who-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.who-top h2 { font-size: var(--step-head); }
.who-top h2 .soft { color: #8b8e93; display: block; }
.who-body { margin-top: 56px; display: grid; grid-template-columns: 220px 1fr; gap: 40px; }
.tabs { display: grid; gap: 6px; align-content: start; }
.tab {
  display: grid; align-content: center; gap: 2px; min-height: 64px; padding: 10px 16px; text-align: left;
  background: var(--paper-2); color: var(--ink); border: 0; border-radius: 0; cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.tab:active { transform: scale(0.98); }
.tab b { font-weight: 500; font-size: var(--step-small); line-height: 1.25; }
.tab small { font-size: 13px; color: var(--soft); }
.tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tab[aria-selected="true"] small { color: #b9bcc1; }
.bands { display: grid; gap: 4px; align-content: start; }
.band-row {
  display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 24px;
  min-height: 92px; padding: 16px 24px; background: var(--paper-2);
}
.band-row:nth-child(even) { background: var(--paper-3); }
.band-row .which { font: 900 var(--step-body)/1 var(--font-display); text-transform: uppercase; letter-spacing: -0.02em; }
.band-row .need { font-weight: 500; font-size: var(--step-body); line-height: 1.3; }
.band-row .gives { display: block; margin-top: 4px; font-weight: 400; font-size: var(--step-small); color: var(--soft); max-width: 62ch; }
.band-row .out { font-size: var(--step-small); font-weight: 500; text-align: right; white-space: nowrap; }

/* ---------- what we never do: inset panel, shaped picture ---------- */
.never-wrap { padding: 20px; background: var(--paper); }
.never {
  position: relative; min-height: 104svh; overflow: hidden; background: var(--deep); color: var(--frost);
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); padding: 56px;
}
.never h2 { grid-column: 1 / span 7; font-size: var(--step-head); }
.never .blocks { grid-column: 8 / -1; grid-row: 1 / span 2; display: grid; gap: 64px; align-content: start; }
.never h3 { font-family: var(--font-text); font-weight: 500; text-transform: none; letter-spacing: -0.01em; font-size: var(--step-lead); line-height: 1.25; }
.never .blocks p { margin-top: 10px; max-width: 36ch; color: var(--frost); }
.never figure { grid-column: 1 / -1; margin: 72px 0 0; position: relative; align-self: end; display: grid; grid-template-columns: minmax(0, min(52vw, 760px)) minmax(0, 28ch); gap: 32px; align-items: end; }
.never .stamp img { width: 100%; height: auto; aspect-ratio: 1500 / 911; object-fit: cover; }
.never figcaption { padding: 0 0 14px; font-size: var(--step-small); color: var(--frost-soft); }

/* ---------- book a demo: a sentence with a blank ---------- */
.demo { padding: 200px var(--m) 180px; }
.demo-form h2 { font-size: var(--step-head); line-height: 1.04; max-width: 20ch; }
.blank {
  display: inline-block; vertical-align: baseline; width: 7.2em; height: 1em; padding: 0 0.2em; margin: 0 0.12em;
  background: color-mix(in srgb, var(--frost) 12%, transparent); color: var(--frost); border: 0; border-radius: 0;
  font: inherit; letter-spacing: inherit; text-transform: uppercase; line-height: 1;
}
.blank::placeholder { color: color-mix(in srgb, var(--frost) 45%, transparent); }
.blank:focus { outline: none; background: color-mix(in srgb, var(--frost) 18%, transparent); }
.blank:focus-visible { outline: 3px solid var(--lime); }
.send {
  display: inline-block; vertical-align: baseline; height: 1em; padding: 0 0.22em; margin-left: 0.08em; line-height: 1;
  background: var(--lime); color: var(--ink); border: 0; border-radius: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: uppercase;
  transition: transform var(--t-press) var(--ease-out);
}
.send:active { transform: scale(0.97); }
.demo-note { margin-top: 32px; max-width: 58ch; color: var(--frost); }
.demo-note a { color: var(--lime); }

/* ---------- footer: the name first, then where to reach us ---------- */
.foot { padding: 72px var(--m) 32px; overflow: hidden; }
.foot-name { font: 900 var(--step-display)/0.86 var(--font-display); letter-spacing: -0.045em; text-transform: uppercase; white-space: nowrap; }
.foot-row { margin-top: 72px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 40px; }
.places { grid-column: 1 / span 5; display: grid; gap: 8px; align-content: start; }
.places a { font: 500 var(--step-lead)/1.2 var(--font-text); color: var(--lime); text-decoration: none; overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) { .places a:hover { text-decoration: underline; text-underline-offset: 6px; } }
.places .small { color: var(--frost-soft); margin-top: 6px; }
.foot-cols { grid-column: 7 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; font-size: var(--step-small); }
.foot-cols h3 { font: 500 var(--step-small)/1.3 var(--font-text); text-transform: none; letter-spacing: 0; color: var(--frost-soft); }
.foot-cols ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.foot-cols a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot-cols a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.credits { margin-top: 64px; font-size: var(--step-small); color: var(--frost-soft); max-width: 75ch; }
.credits a { color: var(--frost); }
.legal { margin-top: 32px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--frost-soft); }

/* ---------- the reading lens: a spring-led highlighter that follows the pointer ---------- */
.lens { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; display: none; }
.has-lens .lens { display: block; }
.lens-dot { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: var(--ink); opacity: 0.92; transition: background-color 200ms ease, opacity 180ms ease; will-change: transform; }
.lens.on-dark .lens-dot { background: var(--lime); }
.lens.snap .lens-dot, .lens.hide .lens-dot { opacity: 0; }

/* ---------- entrances (Emil: ease-out, small rise, 60ms stagger, once) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: calc(var(--d, 0) * var(--stagger)); }
  .js [data-reveal].in { opacity: 1; transform: none; }
  .js .shutter { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out); }
  .js .shutter img { transform: scale(1.12); transition: transform 1500ms var(--ease-out); }
  .js .shutter.in { clip-path: inset(0); }
  .js .shutter.in img { transform: none; }
  .js .hero [data-load] { opacity: 0; transform: translateY(18px); animation: load 760ms var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 90ms + 80ms); }
}
@keyframes load { to { opacity: 1; transform: none; } }

/* ---------- tablet ---------- */
@media (max-width: 1080px) {
  .site-nav { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
  .hero { min-height: auto; display: block; padding: 0; }
  .hero-copy { padding: 132px var(--m) 0; }
  .stage { position: relative; inset: auto; margin: 56px 0 0 var(--m); min-height: 480px; }
  .ch-copy { top: calc(var(--header) + 20px); padding-block: 4vh 56vh; max-width: 44rem; }
  .ch-copy h2 { max-width: 100%; }
  .how-belt .copy { grid-column: 1 / -1; position: static; }
  .belt-figure { grid-column: 1 / -1; margin-top: 24px; }
  .who-body { grid-template-columns: 1fr; }
  .tabs { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .never .blocks { grid-column: 1 / -1; grid-row: auto; margin-top: 48px; }
  .never h2 { grid-column: 1 / -1; }
  .never figure { grid-column: 1 / -1; grid-template-columns: 1fr; gap: 14px; }
  .never .stamp { width: min(76vw, 640px); }
  .foot-cols { grid-column: 1 / -1; }
  .places { grid-column: 1 / -1; }
}

/* ---------- phone: its own composition ---------- */
@media (max-width: 720px) {
  :root { --header: 64px; }
  .site-head .head-cta { display: none; }
  .hero { min-height: auto; display: block; padding: 0; }
  .hero-copy { padding: 108px var(--m) 0; }
  .hero-sub { margin-top: 24px; font-size: var(--step-body); }
  .stage { margin: 44px 0 0; min-height: 520px; clip-path: polygon(0 40px, 72px 40px, 104px 0, 100% 0, 100% 100%, 0 100%); }
  .stage-inner { left: 16px; top: 72px; width: calc(100% - 16px); }
  .runpanel { padding: 18px 16px 20px; }
  .rp-steps li { grid-template-columns: 22px 1fr; padding: 10px 12px; }
  .rp-detail { grid-column: 2; }
  .chapter { min-height: 125svh; }
  .ch-copy { top: 84px; padding-block: 6vh 50vh; max-width: none; }
  .ch-copy p { margin-top: 20px; font-size: var(--step-body); }
  .how-belt { padding: 96px var(--m) 72px; min-height: auto; }
  .strip { grid-template-columns: 1fr; }
  .strip .cell { min-height: 64svh; padding: 20px; }
  .strip .card-slot { position: static; transform: none; width: 100%; max-width: 320px; margin: 32px 0 28px; }
  .strip .clause { margin-top: 0; font-size: var(--step-lead); order: -1; max-width: 18ch; }
  .strip .cell h3 { order: -2; }
  .sheets-head { padding: 112px var(--m) 32px; }
  .sheet { top: calc(var(--header) + var(--i) * 52px); grid-template-columns: 1fr; min-height: 70svh; }
  .sheet .band { height: 52px; }
  .sheet .band h3 { font-size: var(--step-lead); }
  .sheet .band .files { display: none; }
  /* on a phone the words come first, under the band, so the rising sheet covers the picture before them */
  .sheet .body { grid-column: 1; grid-row: 2; align-self: start; padding: 16px 0 22px; }
  .sheet figure { grid-column: 1; grid-row: 3; margin: 0 calc(-1 * var(--m)); height: auto; aspect-ratio: 4 / 3; }
  .live { grid-template-columns: 1fr; }
  .live .half { min-height: 62svh; }
  .live .in-half { padding-top: 64px; padding-bottom: 96px; }
  .live .split { bottom: 20px; font-size: var(--step-head); }
  .live .split.r { top: 20px; bottom: auto; right: auto; left: var(--m); text-align: left; }
  .live .out-half { padding-top: 96px; padding-bottom: 48px; }
  .cover { padding: 20px 18px; }
  .cv-title { font-size: 1.7rem; }
  .cv-grid { grid-template-columns: 1fr 1fr; }
  .cv-foot { grid-template-columns: 1fr 1fr; }
  .names { height: 22vh; min-height: 150px; }
  .names-track span { font-size: var(--step-display); }
  .who { padding: 112px var(--m) 120px; }
  .who-top .btn { width: 100%; justify-content: center; }
  .band-row { grid-template-columns: 1fr; gap: 8px; padding: 16px; }
  .band-row .out { text-align: left; }
  .never-wrap { padding: 10px; }
  .never { padding: 28px 22px; min-height: auto; }
  .never h2 { font-size: var(--step-head); }
  .never .stamp { width: 100%; }
  .demo { padding: 120px var(--m) 112px; }
  .demo-form h2 { font-size: var(--step-head); }
  .blank { width: calc(100% - 6.3em); margin: 0.12em 0.08em 0 0.12em; }
  .sheets-head { display: block; }
  .sheet-index { margin-top: 32px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .places a { font-size: var(--step-lead); }
}

/* =====================================================================================================
   Round two: the engine and the book chapters, the run clock, the workbook, hours back, the cover switch,
   heading tilt and the partner-colour swap.
   ===================================================================================================== */

/* the chapter that opens the book holds longer, so the sector's pages can come out one by one */
.chapter.book { min-height: 340svh; }

/* the engine's flow: sources, then the checks every run goes through; they light as the chapter scrolls */
.flow { list-style: none; margin: 40px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 40rem; }
.flow li { padding: 9px 14px; background: color-mix(in srgb, var(--frost) 10%, transparent); color: var(--frost-soft); font-size: var(--step-small); font-weight: 500; transition: background-color 240ms ease, color 240ms ease; }
.flow li.step { background: color-mix(in srgb, var(--frost) 5%, transparent); }
.flow li.on { background: var(--frost); color: var(--on-bright); }
.flow li.step.on { background: var(--lime); color: var(--on-bright); }

/* the run clock: an illustrative run, inside fifteen minutes */
.run-clock {
  position: fixed; z-index: 40; right: var(--m); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 12px; row-gap: 2px;
  padding: 12px 16px 14px; background: var(--ink); color: var(--paper);
  opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s 220ms;
}
.run-clock.on { opacity: 1; transform: none; visibility: visible; transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s; }
.run-clock .k { grid-column: 1 / -1; font-size: 13px; color: #b9bcc1; }
.run-clock .t { font: 900 var(--step-lead)/1 var(--font-display); letter-spacing: -0.02em; }
.run-clock .s { font-size: 13px; color: var(--lime); font-weight: 500; }
.no-gl .run-clock { display: none; }

/* the workbook: a working piece of the sector Excel, inside data-ui so its gridlines are its own */
.excel { padding: 160px var(--m) 180px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 48px; align-items: start; }
.excel h2 { grid-column: 1 / -1; }
.excel-copy { grid-column: 1 / span 4; }
.excel-copy .saves { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
.excel-copy .saves li { padding: 14px 16px; background: color-mix(in srgb, var(--frost) 8%, transparent); }
.soft-note { margin-top: 24px; color: var(--frost-soft); }
.book-xl { grid-column: 5 / -1; background: #ffffff; color: #1f2328; font: 400 14px/1.4 var(--font-text); overflow: hidden; }
.xl-title { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #1e6b45; color: #ffffff; font-size: 13px; font-weight: 500; }
.xl-formula { display: grid; grid-template-columns: 64px 28px 1fr; align-items: center; min-height: 36px; border-bottom: 1px solid #d0d4d9; font-size: 13px; } /* taste-skill-ignore: the spreadsheet's own formula bar */
.xl-ref { padding: 0 10px; border-right: 1px solid #d0d4d9; color: #57606a; } /* taste-skill-ignore: spreadsheet chrome */
.xl-fx { text-align: center; color: #57606a; font-style: italic; }
.xl-f { padding: 0 10px; color: #1f2328; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.xl-sheet { overflow-x: auto; min-height: 380px; }
.xl-sheet table { border-collapse: collapse; width: 100%; min-width: 560px; font-variant-numeric: tabular-nums; }
.xl-sheet th, .xl-sheet td { border: 1px solid #e3e6ea; padding: 6px 8px; text-align: right; white-space: nowrap; height: 30px; } /* taste-skill-ignore: spreadsheet gridlines */
.xl-sheet th { background: #f3f5f7; color: #57606a; font-weight: 500; font-size: 13px; }
.xl-sheet td:nth-child(2) { text-align: left; }
.xl-sheet tbody th { width: 32px; text-align: center; }
.xl-sheet td.h { background: #f3f5f7; font-weight: 500; text-align: left; }
.xl-sheet td.link { color: #1f6f3f; }
.xl-sheet td.calc { background: #f6fbf2; font-weight: 500; }
.xl-sheet td.pass { color: #1f6f3f; }
.xl-sheet td.miss { color: #8f2a2a; }
.xl-sheet td.sel { outline: 2px solid #1e6b45; outline-offset: -2px; }
.xl-sheet td[data-f] { cursor: cell; }
.xl-in { width: 76px; height: 26px; padding: 0 6px; text-align: right; background: #fff2a8; color: #0b5394; border: 0; border-radius: 0; font: 500 14px/1 var(--font-text); font-variant-numeric: tabular-nums; }
.xl-in:focus-visible { outline: 2px solid #1e6b45; outline-offset: 0; }
.xl-tabs { display: flex; gap: 2px; padding: 6px 8px 0; background: #e9ecef; overflow-x: auto; }
.xl-tab { padding: 8px 14px; border: 0; background: transparent; color: #57606a; font: 500 13px/1 var(--font-text); cursor: pointer; white-space: nowrap; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.xl-tab[aria-selected="true"] { background: #ffffff; color: #1e6b45; }
.xl-tab:active { transform: scale(0.97); }
.xl-note { padding: 10px 14px; background: #f3f5f7; color: #57606a; font-size: 13px; }
.xl-list { padding: 18px 20px; display: grid; gap: 10px; min-height: 380px; align-content: start; }

/* hours back: the firm's own numbers, the answer at poster size */
.timeback { padding: 160px var(--m) 180px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: end; min-height: 100svh; }
.time-controls { grid-column: 1 / span 6; }
.sliders { margin-top: 48px; display: grid; gap: 22px; max-width: 34rem; }
.slide { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 16px; font-weight: 500; }
.slide output { font: 900 var(--step-lead)/1 var(--font-display); letter-spacing: -0.02em; }
.slide input { grid-column: 1 / -1; width: 100%; height: 32px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.slide input::-webkit-slider-runnable-track { height: 6px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.slide input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; background: var(--ink); border: 0; transition: transform var(--t-press) var(--ease-out); }
.slide input:active::-webkit-slider-thumb { transform: scale(0.9); }
.slide input::-moz-range-track { height: 6px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.slide input::-moz-range-thumb { width: 22px; height: 22px; background: var(--ink); border: 0; border-radius: 0; }
.slide input:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.time-out { grid-column: 7 / -1; }
.time-out .big { font: 900 var(--step-display)/0.86 var(--font-display); letter-spacing: -0.045em; }
.time-out .lead { margin-top: 18px; }
.time-out .small { margin-top: 24px; max-width: 40ch; color: var(--soft); }

/* the cover switch */
.cover-switch { display: flex; gap: 4px; margin-bottom: 16px; width: min(500px, 100%); }
.cs { flex: 1; min-height: 44px; border: 0; border-radius: 0; background: var(--paper-2); color: var(--ink); font: 500 var(--step-small)/1 var(--font-text); cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.cs[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.cs:active { transform: scale(0.97); }

/* main headings lean toward the pointer (the transform properties are their own, so reveals keep theirs) */
.hero-copy, .ch-copy, .how-belt .copy, .sheets-head, .excel, .time-controls, .who-top, .never, .demo-form { perspective: 900px; }

/* the partner colour: when the pointer comes within 2 cm of a main heading, its section changes field */
[data-swap] { transition: background-color 450ms ease; }
.night.is-swapped { background: var(--deep); }
.deep.is-swapped { background: var(--night); }
.ice.is-swapped { background: var(--lime); }
.paper.is-swapped { background: var(--ice); }
.amber.is-swapped { background: var(--lime); }
.lime.is-swapped { background: var(--amber); }
.never.is-swapped { background: var(--night); }

@media (max-width: 1080px) {
  .excel-copy, .book-xl { grid-column: 1 / -1; }
  .time-controls, .time-out { grid-column: 1 / -1; }
  .time-out { margin-top: 56px; }
}
@media (max-width: 720px) {
  .chapter.book { min-height: 290svh; }
  .excel, .timeback { padding: 112px var(--m) 120px; min-height: auto; }
  .run-clock { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 8px 12px 10px; }
  .flow { margin-top: 24px; }
}

/* =====================================================================================================
   Round four: the header's acting links, the jump palette, the score's turntable, the check monitor,
   the plant's stop buttons, the strip's working cards, pick-up objects, stamps and postmarks, the sample
   download and the workbook's new tabs.
   ===================================================================================================== */

/* the header's links: each small drawing acts out what its link is for */
.nv { display: inline-flex; align-items: center; gap: 7px; transition: transform var(--t-press) var(--ease-out); }
.nv:active { transform: scale(0.97); }
.nv-g { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.nv-run .hand { transform-origin: 8px 9px; transition: transform 700ms var(--ease-in-out); }
.nv-doc .pg { transform-origin: 8.5px 13.5px; transition: transform 360ms var(--ease-out); }
.nv-xl .c { fill: currentColor; stroke: none; opacity: 0; transition: opacity 120ms ease; }
.nv-try .typed { stroke-dasharray: 7; stroke-dashoffset: 7; transition: stroke-dashoffset 520ms var(--ease-out); }
.nv-try .caret { transition: transform 520ms var(--ease-out); }
.nv-key .shackle { transition: transform 280ms var(--ease-out); }
.nv-auto .cog { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 700ms var(--ease-in-out); }
@media (hover: hover) and (pointer: fine) {
  .nv-run:hover .hand, .nv-run:focus-visible .hand { transform: rotate(360deg); }
  .nv-doc:hover .p1, .nv-doc:focus-visible .p1 { transform: rotate(16deg) translateX(1px); }
  .nv-doc:hover .p3, .nv-doc:focus-visible .p3 { transform: rotate(-16deg) translateX(-1px); }
  .nv-xl:hover .c, .nv-xl:focus-visible .c { opacity: 1; }
  .nv-xl:hover .c2 { transition-delay: 40ms; } .nv-xl:hover .c3 { transition-delay: 80ms; }
  .nv-xl:hover .c4 { transition-delay: 120ms; } .nv-xl:hover .c5 { transition-delay: 160ms; } .nv-xl:hover .c6 { transition-delay: 200ms; }
  .nv-xl:hover .c7 { transition-delay: 240ms; } .nv-xl:hover .c8 { transition-delay: 280ms; } .nv-xl:hover .c9 { transition-delay: 320ms; }
  .nv-try:hover .typed, .nv-try:focus-visible .typed { stroke-dashoffset: 0; }
  .nv-try:hover .caret, .nv-try:focus-visible .caret { transform: translateX(7px); animation: blink 800ms steps(1) 520ms infinite; }
  .nv-key:hover .shackle, .nv-key:focus-visible .shackle { transform: translateY(-2px); }
  .nv-auto:hover .c1, .nv-auto:focus-visible .c1 { transform: rotate(180deg); }
  .nv-auto:hover .c2, .nv-auto:focus-visible .c2 { transform: rotate(-240deg); }
}
@keyframes blink { 50% { opacity: 0; } }

/* the jump button and its keys */
.jump-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 12px;
  border: 0; background: color-mix(in srgb, currentColor 12%, transparent); cursor: pointer;
  font-size: var(--step-small); font-weight: 500;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.jump-btn:active { transform: scale(0.97); }
.kbd { display: inline-flex; align-items: center; height: 24px; padding: 0 7px; background: color-mix(in srgb, currentColor 14%, transparent); font: 500 12px/1 var(--font-text); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .jump-btn:hover { background: color-mix(in srgb, currentColor 20%, transparent); } }

/* the palette */
.jump { position: fixed; inset: 0; z-index: 85; display: grid; justify-items: center; align-items: start; padding: 12vh 16px 16px; }
.jump-scrim { position: absolute; inset: 0; background: rgba(6, 8, 11, 0.6); opacity: 0; transition: opacity 200ms ease; }
.jump[data-open="true"] .jump-scrim { opacity: 1; }
.jump-box {
  position: relative; width: min(620px, 100%); max-height: min(72vh, 640px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4); /* taste-skill-ignore: the palette floats over the page */
  opacity: 0; transform: scale(0.97) translateY(-6px); transform-origin: 50% 0;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.jump[data-open="true"] .jump-box { opacity: 1; transform: none; }
.jump-field { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 12px 0 18px; background: var(--paper-2); }
.jump-field svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--soft); stroke-width: 1.8; stroke-linecap: round; }
.jump-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 500 var(--step-body)/1 var(--font-text); outline: none; }
.jump-x { height: 36px; padding: 0 12px; border: 0; background: var(--paper-3); font-size: 13px; font-weight: 500; cursor: pointer; transition: transform var(--t-press) var(--ease-out); }
.jump-x:active { transform: scale(0.97); }
.jump-list { list-style: none; margin: 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain; }
.jump-list li[role="option"] { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n a" "d a"; column-gap: 16px; row-gap: 2px; padding: 10px 14px; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; }
.jump-list .jn { grid-area: n; font-weight: 500; }
.jump-list .jd { grid-area: d; font-size: var(--step-small); color: var(--soft); }
.jump-list .ja { grid-area: a; align-self: center; font-size: var(--step-small); font-weight: 500; color: var(--soft); transition: transform 180ms var(--ease-out); }
.jump-list li[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.jump-list li[aria-selected="true"] .jd { color: #b9bcc1; }
.jump-list li[aria-selected="true"] .ja { color: var(--lime); transform: translateX(3px); }
.jump-list .empty { padding: 18px 14px; color: var(--soft); }
.jump-foot { padding: 10px 18px; background: var(--paper-2); font-size: 13px; color: var(--soft); }
@media (pointer: coarse) { .jump-foot { display: none; } .jump { padding-top: calc(var(--header) + 8px); } .jump-list li[role="option"] { padding-block: 13px; } }

/* the score's turntable, in the header: a small record that spins while the sound plays, its arm on the groove */
.disc {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 4px;
  background: color-mix(in srgb, currentColor 12%, transparent); color: inherit; border: 0; border-radius: 0; cursor: pointer; text-align: left;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.disc:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .disc:hover { background: color-mix(in srgb, currentColor 20%, transparent); } }
.disc-deck { position: relative; width: 32px; height: 32px; flex: none; }
.disc-rec, .disc-arm { position: absolute; inset: 0; width: 32px; height: 32px; }
.disc-rec .vinyl { fill: #1b1f24; }
.disc-rec .groove { fill: none; stroke: #3a4048; stroke-width: 1.2; }
.disc-rec .lbl { fill: var(--lime); }
.disc-rec .lbl-mark { stroke: var(--on-bright); stroke-width: 1.8; stroke-linecap: round; }
.disc-rec .spindle { fill: var(--on-bright); }
.disc-arm { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform-origin: 89.6% 12.5%; transform: rotate(-30deg); transition: transform 520ms var(--ease-out); }
.disc-arm circle { fill: currentColor; stroke: none; }
.disc-arm .head { stroke-width: 3.4; }
.disc[aria-pressed="true"] .disc-arm { transform: rotate(0deg); }
.disc-text { display: grid; gap: 1px; min-width: 0; line-height: 1.15; }
.disc-k { font-size: 12px; opacity: 0.72; }
.disc-t { max-width: 15ch; font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
  .disc[aria-pressed="true"] .disc-rec { animation: discspin 1.8s linear infinite; }
}
@keyframes discspin { to { transform: rotate(360deg); } }

/* the engine's last source chip: the rest of the open web */
.flow li.more { background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--frost); }
.flow li.more.on { background: var(--amber); color: var(--on-bright); }

/* figures checked: the monitor of an illustrative run */
.chapter.check { min-height: 175svh; }
@media (min-width: 1081px) { .chapter.check .ch-copy { top: calc(var(--header) + 3vh); padding-block: 8vh 16vh; } .chapter.check .ch-copy p { margin-top: 24px; } }
.monitor { margin-top: 32px; max-width: 30rem; background: var(--paper); color: var(--ink); padding: 16px 18px 14px; font-size: 14px; line-height: 1.3; }
.mo-head { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; margin-bottom: 10px; }
.mo-pct { font: 900 var(--step-body)/1 var(--font-display); letter-spacing: -0.02em; }
.mo-row { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr) 3.6rem; align-items: center; gap: 12px; min-height: 27px; }
.mo-name { color: var(--soft); }
.mo-bar { height: 8px; background: var(--paper-2); overflow: hidden; }
.mo-bar i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.mo-row.out .mo-bar i { background: #8f2a2a; }
.mo-row.out .mo-n { color: #8f2a2a; }
.mo-n { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.mo-foot { margin-top: 10px; font-size: 13px; color: var(--soft); }
.monitor.done .mo-foot { color: var(--ink); font-weight: 500; }

/* the plant's stops as buttons: touch and keyboard run them too */
.belt-hint { margin-top: 20px; font-size: var(--step-small); font-weight: 500; }
.belt-stops { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 4px; }
.stop {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 0; cursor: pointer;
  background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); font: 500 var(--step-small)/1 var(--font-text);
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.stop:active { transform: scale(0.97); }
.stop[aria-pressed="true"] { background: var(--ink); color: var(--amber); }
.how-belt.is-swapped .stop[aria-pressed="true"] { color: var(--lime); }

/* one figure, end to end: each cell changes field under the pointer, each card acts out its step */
@media (hover: hover) and (pointer: fine) {
  .strip .cell { transition: background-color 320ms ease, color 320ms ease; }
  .strip .c1:hover { background: var(--amber); color: var(--ink); }
  .strip .c2:hover { background: var(--lime); }
  .strip .c3:hover { background: var(--ice); color: var(--ink); }
  .strip .c4:hover { background: var(--amber); }
}
.fig-card[data-lift] { cursor: grab; touch-action: pan-y; }
.fig-card.dragging { cursor: grabbing; z-index: 5; }
.fig-card:focus-visible, .sheet figure:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.picked { opacity: 0; }
.f-fetch { overflow: hidden; }
.f-fetch .scan { position: absolute; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; transform: translateY(-100%); }
.f-fetch .scan::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: var(--lime); opacity: 0.55; mix-blend-mode: multiply; }
.f-fetch.go .scan { animation: scan 1500ms var(--ease-in-out) 2 both; }
.f-fetch.go mark { animation: mark 300ms ease 900ms both; }
@keyframes scan { from { transform: translateY(-100%); } to { transform: translateY(14%); } }
@keyframes mark { from { background: transparent; } to { background: var(--amber); } }
.f-check .ring { position: absolute; right: 14px; top: 14px; width: 40px; height: 40px; }
.ring .trk { fill: none; stroke: var(--paper-3); stroke-width: 4; }
.ring .fil { fill: none; stroke: var(--ink); stroke-width: 4; stroke-dasharray: 113.1; transform: rotate(-90deg); transform-origin: 22px 22px; }
.ring .tk { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; }
.f-check.go .fil { animation: ring 900ms var(--ease-out) both; }
.f-check.go .tk { animation: tick 320ms var(--ease-out) 820ms both; }
@keyframes ring { from { stroke-dashoffset: 113.1; } to { stroke-dashoffset: 0; } }
@keyframes tick { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.typed.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: currentColor; animation: blink 800ms steps(1) infinite; }
.f-bind.go tr { animation: rowin 420ms var(--ease-out) both; }
.f-bind.go tr:nth-child(2) { animation-delay: 140ms; }
.f-bind.go tr:nth-child(3) { animation-delay: 280ms; }
@keyframes rowin { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

/* pick-up objects: the picked card or page comes forward, the page dims behind it */
.lift { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 72px 20px 96px; }
.lift-scrim { position: absolute; inset: 0; background: rgba(6, 8, 11, 0.74); opacity: 0; transition: opacity 260ms ease; }
.lift[data-open="true"] .lift-scrim { opacity: 1; }
.lift-obj { position: relative; z-index: 1; display: grid; place-items: center; }
.lift-obj > * { position: relative; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); } /* taste-skill-ignore: a picked-up object floats */
.lift-obj .fig-card { width: min(420px, 86vw); padding: 22px 22px 26px; font-size: 16px; }
.lift-obj .fig-card .k, .lift-obj .fig-card .meta { font-size: 14px; }
.lift-obj .fig-card table { font-size: 15px; }
.lift-page { background: #ffffff; }
.lift-page img { width: auto; height: auto; max-width: min(86vw, 640px); max-height: calc(100svh - 190px); }
.lift-x {
  position: absolute; z-index: 2; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); translate: -50% 0;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 0; background: var(--paper); color: var(--ink); font-weight: 500; cursor: pointer;
  opacity: 0; transition: opacity 200ms ease 160ms, transform var(--t-press) var(--ease-out);
}
.lift[data-open="true"] .lift-x { opacity: 1; }
.lift-x:active { transform: scale(0.97); }
.lift-obj .clip { position: absolute; z-index: 3; left: 26px; top: -26px; width: 24px; height: 64px; fill: none; stroke: #a3a8ae; stroke-width: 2.4; stroke-linecap: round; }
.lift-obj .postmark { right: -22px; bottom: -18px; width: 150px; color: #8f2a2a; }

/* stamps and postmarks */
.stamp-fig { position: relative; }
.stamp { position: relative; padding: 12px; background: #fbfaf6; --stamp-ground: var(--paper); }
.stamp img { width: 100%; display: block; }
.stamp .perf { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.stamp .perf circle { fill: var(--stamp-ground); transition: fill 450ms ease; }
.never .stamp { --stamp-ground: var(--deep); }
.never.is-swapped .stamp { --stamp-ground: var(--night); }
.stamp-fig > .clip { position: absolute; z-index: 3; left: 30px; top: -24px; width: 22px; height: 60px; fill: none; stroke: #8b9097; stroke-width: 2.2; stroke-linecap: round; }
.postmark { position: absolute; z-index: 2; right: 5%; bottom: 7%; width: clamp(120px, 15vw, 180px); height: auto; overflow: visible; pointer-events: none; color: #17232c; opacity: 0; transform: scale(1.45) rotate(-26deg); }
.stamped .postmark, .stamped.postmark { opacity: 0.8; transform: rotate(-12deg); transition: opacity 90ms ease, transform 240ms var(--ease-out); }
.postmark .pm-ring { fill: none; stroke: currentColor; stroke-width: 2.6; }
.postmark .pm-ring.thin { stroke-width: 1.4; }
.postmark .pm-words { font: 500 11px var(--font-text); fill: currentColor; }
.postmark .pm-mid { font: 900 13px var(--font-display); fill: currentColor; }
.postmark .pm-wave { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.sheet figure .postmark { color: #8f2a2a; right: 7%; bottom: 9%; }
.sheet.stamped figure .postmark { opacity: 0.86; }
.desks-row .stamp img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; }

/* the dossier sheets land: the band's name settles, the chips stagger in */
@media (prefers-reduced-motion: no-preference) {
  .js .sheet .band h3 { transition: transform 600ms var(--ease-out); }
  .js .sheet:not(.landed) .band h3 { transform: translateX(12px); }
  .js .sheet .body li { opacity: 0; transform: translateY(10px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(var(--k, 0) * 60ms + 140ms); }
  .js .sheet.landed .body li { opacity: 1; transform: none; }
}

/* take the samples home */
.sample { padding: 160px var(--m); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 40px; align-items: end; }
.sample-copy { grid-column: 1 / span 6; }
.sample-copy p { margin-top: 28px; max-width: 40ch; }
.sample-form { grid-column: 7 / -1; position: relative; }
.sample-form > label { display: block; font-weight: 500; margin-bottom: 10px; }
.sf-row { display: flex; gap: 4px; }
.sf-row input { flex: 1; min-width: 0; height: 56px; padding: 0 16px; border: 0; border-radius: 0; background: var(--paper-2); font: 500 var(--step-body)/1 var(--font-text); }
.sf-row input:focus { outline: none; background: var(--paper-3); }
.sf-row input:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
.sf-row .btn { min-height: 56px; white-space: nowrap; }
.sf-row .btn:disabled { opacity: 0.6; cursor: progress; }
.sample-form.bad input { outline: 2px solid #8f2a2a; outline-offset: 0; }
.sf-note { margin-top: 14px; max-width: 52ch; font-size: var(--step-small); color: var(--soft); }
.sf-note a { color: var(--ink); }
.sample-form.bad .sf-note { color: #8f2a2a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* the workbook's labels, notes and inputs */
.xl-sheet td.lab { text-align: left; }
.xl-sheet td.note { white-space: normal; min-width: 220px; text-align: left; font-size: 13px; color: #57606a; }
.xl-sheet td.in-cell { padding: 2px 4px; }
.xl-note strong { font-weight: 500; color: #1f2328; }

/* the header makes room for its six tabs: the turntable's words go first, then the jump button's, then the tabs move into Menu */
#head .site-nav a, .jump-btn, .head-cta { white-space: nowrap; }
@media (max-width: 1680px) { .disc-text { display: none; } .disc { padding: 0 4px; } }
@media (max-width: 1500px) { .jb-word { display: none; } .jump-btn { padding: 0 8px; } }
@media (max-width: 1360px) { #head .site-nav { display: none; } #head .menu-btn { display: inline-flex; align-items: center; } .jump-btn { display: none; } }
@media (max-width: 1080px) {
  .jump-btn { display: none; }
  .sample-copy, .sample-form { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .disc { padding: 0 4px; }
  .chapter.check { min-height: 165svh; }
  .monitor { padding: 14px 14px 12px; font-size: 13px; }
  .mo-row { grid-template-columns: 8.6rem minmax(0, 1fr) 3rem; gap: 8px; }
  .sample { display: block; padding: 112px var(--m); }
  .sample-form { margin-top: 36px; }
  .sf-row { flex-direction: column; }
  .sf-row .btn { justify-content: center; }
  .belt-stops .stop { flex: 1 1 40%; }
  .stamp { padding: 9px; }
  .stamp-fig > .clip { left: 20px; top: -18px; width: 18px; height: 48px; }
  .lift-page img { max-width: 88vw; max-height: calc(100svh - 170px); }
  .lift-obj .postmark { right: -8px; bottom: -14px; width: 120px; }
}
.desks-row .postmark { left: 7%; top: 8%; right: auto; bottom: auto; }

/* any sector, any company: the chapter's words change with its three parts (app.js sets data-beat) */
.ch-copy .beats { margin-top: 36px; max-width: 34ch; }
.ch-copy .beats .beat { margin-top: 0; }
.js .beats { display: grid; }
.js .beats .beat { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); visibility: hidden; transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out), visibility 0s 360ms; }
.js .book[data-beat="0"] .beat:nth-child(1), .js .book[data-beat="1"] .beat:nth-child(2), .js .book[data-beat="2"] .beat:nth-child(3) { opacity: 1; transform: none; visibility: visible; transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out), visibility 0s; }
@media (max-width: 720px) { .ch-copy .beats { margin-top: 20px; max-width: none; } }

/* =====================================================================================================
   The theme (round five): html[data-theme="dark"], set by the header's sun / moon and saved for the whole
   site under 'ind4ai-theme'. Paper and ice become dark grounds and ink becomes frost; amber and lime stay
   bright accent fields, so inside them (and inside the objects that are light or dark by nature: the dossier
   cover, the run clock, the tooltip) the light theme's tokens come back. The 3D run, the workbook and the
   photographs are unchanged.
   ===================================================================================================== */
.theme-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0;
  border: 0; background: color-mix(in srgb, currentColor 12%, transparent); cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.theme-btn:active { transform: scale(0.97); }
.theme-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; overflow: visible; }
.theme-btn .rays, .theme-btn .sun, .theme-btn .moon { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 360ms var(--ease-out), opacity 240ms ease; }
.theme-btn .moon { fill: currentColor; stroke: none; opacity: 0; transform: scale(0.4) rotate(-40deg); }
.theme-btn[aria-pressed="true"] .rays { opacity: 0; transform: rotate(90deg) scale(0.3); }
.theme-btn[aria-pressed="true"] .sun { opacity: 0; transform: scale(0.4); }
.theme-btn[aria-pressed="true"] .moon { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .theme-btn:hover { background: color-mix(in srgb, currentColor 20%, transparent); } }

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f1418;
  --paper-2: #182027;
  --paper-3: #232c33;
  --ice: #12313f;
  --ink: #eaf3f6;
  --soft: #a9bcc4;
  --accent-ink: #0a0b0d;
}
/* the bright fields keep the light tokens for everything inside them */
:root[data-theme="dark"] :is(.amber, .lime, .names, .cover, .run-clock, .pop, .ice.is-swapped) {
  color-scheme: light;
  --paper: #f4f4f1;
  --paper-2: #e8e8e2;
  --paper-3: #dcddd5;
  --ice: #bfe3ee;
  --ink: #0a0b0d;
  --soft: #4b4f55;
}
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .strip .c1:hover { --paper: #f4f4f1; --paper-2: #e8e8e2; --paper-3: #dcddd5; --ink: #0a0b0d; --soft: #4b4f55; color: var(--ink); }
  :root[data-theme="dark"] .btn.ink:hover { background: #ffffff; }
}
/* chips that flip to frost in the dark keep readable second lines */
:root[data-theme="dark"] .tab[aria-selected="true"] small,
:root[data-theme="dark"] .jump-list li[aria-selected="true"] .jd { color: #4b4f55; }
:root[data-theme="dark"] .jump-list li[aria-selected="true"] .ja { color: var(--on-bright); }
/* the warning red, lifted for dark grounds */
:root[data-theme="dark"] .mo-row.out .mo-n { color: #ff8f80; }
:root[data-theme="dark"] .mo-row.out .mo-bar i { background: #ff8f80; }
:root[data-theme="dark"] .sample-form.bad .sf-note { color: #ff8f80; }
:root[data-theme="dark"] .sample-form.bad input { outline-color: #ff8f80; }

/* =====================================================================================================
   Round seven (2026-10-24): quick links on narrow screens, the demo's blank that fits any name, touch that
   moves the page, the loading screen, the ink field, the glyph decode, the flood into the plant, the side-by-
   side comparison. Effects live in src/fx.js, each behind one switch in its FX object.
   ===================================================================================================== */

/* quick links: Automation projects and Client login stay one tap away once the six links fold into Menu */
.head-quick { display: none; }
.head-quick a { text-decoration: none; white-space: nowrap; }
.hq-cta { display: none; }
@media (max-width: 1360px) {
  #head .head-quick { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 26px); font-size: var(--step-small); font-weight: 500; }
}
@media (max-width: 1080px) {
  :root { --head-row: 76px; --head-quick: 44px; --header: calc(var(--head-row) + var(--head-quick)); }
  .site-head { height: var(--head-row); }
  /* a second row in the colour of the bar's left half, so it reads as part of the same bar */
  #head .head-quick {
    position: absolute; left: 0; right: 0; top: 100%; height: var(--head-quick); padding: 0 var(--m); gap: 22px;
    background: var(--hl, var(--night)); color: var(--hl-ink, var(--frost)); transition: background-color 300ms ease, color 300ms ease;
  }
  #head .head-quick .nv { height: 100%; }
  .hero-copy { padding-top: calc(var(--header) + 56px); }
  .ch-copy { top: calc(var(--header) + 20px); }
}
@media (max-width: 720px) {
  :root { --head-row: 64px; --head-quick: 44px; }
  #head .head-quick { gap: 18px; }
  #head .head-quick .hq-cta { display: inline-flex; align-items: center; height: 32px; margin-left: auto; padding: 0 12px; background: var(--lime); color: var(--on-bright); transition: transform var(--t-press) var(--ease-out); }
  #head .head-quick .hq-cta:active { transform: scale(0.97); }
  .hero-copy { padding-top: calc(var(--header) + 40px); }
}
@media (max-width: 400px) { #head .head-quick { gap: 14px; } #head .head-quick .nv-g { display: none; } }

/* the run panel, once bound: its three files are one click from the sample download */
.rp-acts { display: inline-flex; align-items: center; gap: 14px; }
.rp-get { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out); }
.rp-get:active { transform: scale(0.97); }
.rp-again[hidden] ~ .rp-get { visibility: hidden; }
@media (max-width: 720px) { .rp-foot { flex-wrap: wrap; } }

/* book a demo: the blank is as wide as the name in it; a long name gets smaller type rather than being cut */
.blank { width: var(--fit, 7.2em); max-width: 100%; font-size: var(--blank-size, 1em); vertical-align: 0.06em; transition: width 160ms var(--ease-out); }
@media (max-width: 720px) {
  .demo-form h2 { max-width: none; }
  .blank { display: block; width: 100%; height: 1.25em; margin: 0.16em 0 0.18em; padding: 0 0.25em; }
}

/* the same format every quarter: one company today and three months on, the changes highlighted */
.compare { padding: 168px var(--m) 152px; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
.compare > h2 { grid-column: 1 / -1; margin-bottom: 56px; }
.cmp-copy { grid-column: 1 / span 4; position: sticky; top: calc(var(--header) + 40px); }
.cmp-copy .lead { max-width: 32ch; }
.cmp-same { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 4px; max-width: 30rem; }
.cmp-same li { padding: 13px 16px; background: color-mix(in srgb, var(--paper) 62%, var(--ice)); font-weight: 500; }
.cmp-switch { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 4px; max-width: 30rem; }
.cs-k { min-height: 44px; padding: 0 16px; border: 0; border-radius: 0; background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); font: 500 var(--step-small)/1 var(--font-text); cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.cs-k:active { transform: scale(0.97); }
.cs-k[aria-pressed="true"], .cs-k[aria-selected="true"] { background: var(--ink); color: var(--ice); }
.cmp-phone { display: none; }
.cmp-pages { grid-column: 5 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); align-items: start; }
.cmp-page { background: #ffffff; color: #1d1b17; padding: 26px 28px 22px; font-size: 14px; }
.cmp-page.b { margin-top: 56px; }
.cp-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 500; padding-bottom: 10px; border-bottom: 1.5px solid #1d1b17; } /* taste-skill-ignore: the dossier's own rule, inside data-ui */
.cp-brand { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; }
.cp-kind { margin-top: 28px; font-size: 13px; font-weight: 500; color: #8f2a2a; }
.cp-title { margin-top: 6px; font: 900 var(--step-lead)/1 var(--font-display); letter-spacing: -0.02em; text-transform: uppercase; }
.cp-when { margin-top: 10px; font-size: 13px; color: #6f6b61; }
.cp-when strong { color: #1d1b17; font-weight: 500; }
.cp-table { width: 100%; margin-top: 18px; border-collapse: collapse; }
.cp-table th, .cp-table td { padding: 9px 0; border-top: 1px solid #e3dfd4; text-align: left; font-weight: 400; vertical-align: baseline; } /* taste-skill-ignore: a real table inside data-ui */
.cp-table th { color: #6f6b61; font-size: 13px; padding-right: 10px; }
.cp-table td { text-align: right; font-weight: 500; white-space: nowrap; }
.cp-table mark, .cp-foot mark { background: transparent; color: inherit; padding: 1px 4px; margin-right: -4px; transition: background-color 420ms var(--ease-out); }
.cp-table small { display: block; font-size: 12px; font-weight: 500; color: #6f6b61; height: 0; overflow: hidden; opacity: 0; transition: opacity 300ms ease, height 300ms var(--ease-out); }
.cmp-pages[data-mark="true"] mark { background: var(--lime); color: #0a0b0d; }
.cmp-pages[data-mark="true"] .cp-table small { height: 1.4em; opacity: 1; }
.cmp-pages[data-mark="true"] .cmp-page.b tr:not(.chg) td { color: #9a9588; }
.cmp-pages[data-mark="true"] .cmp-page.b .chg mark { transition-delay: calc(var(--k, 0) * 70ms); }
.cp-foot { margin-top: 14px; padding-top: 12px; border-top: 1.5px solid #1d1b17; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; } /* taste-skill-ignore: the dossier's own rule, inside data-ui */
.cp-foot span { color: #6f6b61; }
.cp-foot strong { font-weight: 500; }
.cmp-note { grid-column: 1 / -1; margin-top: 8px; font-size: var(--step-small); color: var(--soft); max-width: 62ch; }
@media (max-width: 1080px) {
  .cmp-copy { grid-column: 1 / -1; position: static; }
  .cmp-pages { grid-column: 1 / -1; margin-top: 48px; }
}
@media (max-width: 720px) {
  .compare { display: block; padding: 112px var(--m) 104px; }
  .compare > h2 { margin-bottom: 24px; }
  /* on a phone one page shows at a time and the two dates switch it: only the numbers change, the layout never does */
  .cmp-phone { display: contents; }
  .cmp-pages { grid-template-columns: 1fr; margin-top: 28px; }
  .cmp-page.b { margin-top: 0; }
  .cmp-pages[data-show="a"] .cmp-page.b, .cmp-pages[data-show="b"] .cmp-page.a { display: none; }
  .cmp-page { padding: 20px 18px 18px; }
}
:root[data-theme="dark"] .compare { --ice: #12313f; }
:root[data-theme="dark"] .cs-k { background: color-mix(in srgb, var(--ink) 14%, transparent); }
:root[data-theme="dark"] .cs-k[aria-pressed="true"], :root[data-theme="dark"] .cs-k[aria-selected="true"] { background: var(--ink); color: #0a0b0d; }
:root[data-theme="dark"] .cmp-same li { background: color-mix(in srgb, var(--paper) 40%, var(--ice)); }

/* the loading screen: ice, the name decoding out of glyphs, a real percentage; fx.js draws the ice and the currents
   on its canvas and drains them away. Without fx.js it hides itself after a few seconds (the failsafe animation). */
.loader { display: none; }
.js:not(.ld-skip) .loader {
  display: grid; align-items: center; position: fixed; inset: 0; z-index: 120; padding: 0 var(--m);
  background: #bfe3ee; color: #0a0b0d; animation: ld-safe 0.3s linear 5.5s forwards;
}
.loader.live { background: transparent; }
.loader.leaving { pointer-events: none; }
@keyframes ld-safe { to { opacity: 0; visibility: hidden; } }
.loader canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ld-mark { position: relative; transition: opacity 260ms ease, transform 360ms var(--ease-out); }
.loader.leaving .ld-mark { opacity: 0; transform: translateY(-14px); }
.ld-word { font: 900 clamp(2.1rem, 0.2rem + 7.4vw, 8rem)/0.9 var(--font-display); letter-spacing: -0.04em; text-transform: uppercase; white-space: nowrap; }
.ld-word span { display: inline-block; text-align: center; }
.ld-line { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font: 500 var(--step-lead)/1.2 var(--font-text); }
.ld-pct { min-width: 4ch; font-variant-numeric: tabular-nums; }
.ld-hold .hero [data-load] { animation-play-state: paused; }

/* the ink field: the open web's characters behind the hero; the pointer or a finger traces figures out of them */
.ink-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* the glyph decode: a veil of characters over a heading or panel, cleared by fx.js in one wave */
.decode-veil { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .fx-decode [data-decode][data-reveal] { transform: none; transition: opacity 80ms linear; }
}

/* the floods: a section's colour rises into the one above with a liquid edge (fx.js draws it) */
.flood { position: absolute; left: 0; width: 100%; display: block; pointer-events: none; }

/* touch: a drop of ink where a finger lands, a trail of smaller drops while it drags */
.drop { position: fixed; left: 0; top: 0; z-index: 89; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--lime); opacity: 0; pointer-events: none; will-change: transform, opacity; }
.drop.on-light { background: var(--ink); }
@media (hover: none), (pointer: coarse) {
  .strip .cell { transition: background-color 320ms ease, color 320ms ease; }
  .strip .c1.touched { background: var(--amber); color: var(--ink); }
  .strip .c2.touched { background: var(--lime); }
  .strip .c3.touched { background: var(--ice); color: var(--ink); }
  .strip .c4.touched { background: var(--amber); }
  :root[data-theme="dark"] .strip .c1.touched { --paper: #f4f4f1; --paper-2: #e8e8e2; --paper-3: #dcddd5; --ink: #0a0b0d; --soft: #4b4f55; color: var(--ink); }
  .nv:active .cog.c1 { transform: rotate(180deg); }
  .nv:active .cog.c2 { transform: rotate(-240deg); }
  .nv-key:active .shackle { transform: translateY(-2px); }
}