/* The Fieldwork Project
   The Stage Tracker: white and graphite, one emerald accent, hairline rules, Geist.
   Tokens first; both themes follow the system setting. The system is described in DESIGN.md. */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin-wght.woff2") format("woff2-variations"),
       url("/assets/fonts/geist-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin-wght.woff2") format("woff2-variations"),
       url("/assets/fonts/geist-mono-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  --bg: #FFFFFF;
  --bg-2: #F6F7F8;
  --panel: #FFFFFF;
  --ink: #0B0D12;
  --ink-2: #3A404B;
  --ink-3: #5F6774;
  --rule: #E5E7EB;
  --rule-2: #D2D6DC;
  --accent: #0A7652;
  --accent-hover: #075E41;
  --accent-ink: #FFFFFF;
  --accent-soft: #E8F4EF;
  --accent-line: #12A272;
  --select: #CDEBDF;
  --chart-wait: #8A929D;
  --head-bg: rgba(255, 255, 255, .78);
  --placeholder-bg: #FFF3CF;
  --placeholder-ink: #5C4300;
  --shadow-panel:
    0 0 0 1px rgba(11, 13, 18, .06),
    0 1px 2px rgba(11, 13, 18, .04),
    0 12px 32px -12px rgba(11, 13, 18, .14),
    0 32px 64px -32px rgba(11, 13, 18, .12);
  --shadow-btn: 0 1px 2px rgba(11, 13, 18, .10), inset 0 1px 0 rgba(255, 255, 255, .14);

  --font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);

  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --measure: 66ch;
  --head-h: 64px;
  --radius-sm: 8px;
  --section: clamp(72px, 9vw, 128px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0A0C0F;
    --bg-2: #101317;
    --panel: #14171C;
    --ink: #F3F5F7;
    --ink-2: #C3C9D1;
    --ink-3: #8F98A4;
    --rule: #22262D;
    --rule-2: #323840;
    --accent: #3DD39B;
    --accent-hover: #6BE0B4;
    --accent-ink: #03140D;
    --accent-soft: rgba(61, 211, 155, .10);
    --accent-line: #3DD39B;
    --select: rgba(61, 211, 155, .28);
    --chart-wait: #646C78;
    --head-bg: rgba(10, 12, 15, .72);
    --placeholder-bg: #3A2F0E;
    --placeholder-ink: #FFE29A;
    --shadow-panel:
      0 0 0 1px rgba(255, 255, 255, .07),
      0 1px 2px rgba(0, 0, 0, .4),
      0 16px 40px -16px rgba(0, 0, 0, .7);
    --shadow-btn: 0 1px 2px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .18);
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-h) + 24px);
  scrollbar-color: var(--rule-2) transparent;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main { flex: 1 0 auto; }

::selection { background: var(--select); color: var(--ink); }

h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.1vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.032em;
}
h3 {
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: -0.012em;
}
p, ul, ol, dl { margin: 0; }
p { text-wrap: pretty; }
strong { color: var(--ink); font-weight: 600; }

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-2);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: text-decoration-color 160ms ease, color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: currentColor; }
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

svg.icon {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--bg);
  font-weight: 500;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ---------- Header ---------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--head-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--rule);
  transition: border-color 200ms ease;
  view-transition-name: site-head;
}
.js .site-head:not(.is-scrolled) { border-bottom-color: transparent; }

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--head-h);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.brand-mark {
  align-self: center;
  display: block;
  width: 36px;
  height: 36px;
  margin-right: -2px;
}
.brand-name {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  white-space: nowrap;
}
.brand-sub {
  font-size: .875rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav a {
  position: relative;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  font-size: .9375rem;
  font-weight: 450;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { background: var(--bg-2); color: var(--ink); }
}
.nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--rule);
}

@media (max-width: 879px) {
  .brand-sub { display: none; }
}
@media (max-width: 559px) {
  .site-head { position: relative; }
  .head-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-block: 14px 10px;
  }
  .nav { margin-left: -12px; }
  html { scroll-padding-top: 88px; }
}

/* ---------- Buttons: the email control ---------- */

.mail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: .9688rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }

.btn--mail {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-btn);
}
@media (hover: hover) and (pointer: fine) {
  .btn--mail:hover { background: var(--accent-hover); }
}

.btn--ghost {
  background: var(--panel);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule-2);
}
@media (hover: hover) and (pointer: fine) {
  .btn--ghost:hover { background: var(--bg-2); }
}

/* Copy: the label and icon swap through a short blur so the two states read as one. */
.copy[hidden] { display: none; }
.copy { min-width: 108px; padding: 0 16px; }
.copy-face {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: filter 200ms ease, opacity 200ms ease, transform 200ms var(--ease-out);
}
.copy-face--done { position: absolute; opacity: 0; filter: blur(4px); transform: scale(.96); color: var(--accent); }
.copy { position: relative; }
.copy.is-done .copy-face--idle { opacity: 0; filter: blur(4px); transform: scale(.96); }
.copy.is-done .copy-face--done { opacity: 1; filter: blur(0); transform: none; }

@media (max-width: 479px) {
  .mail { flex-wrap: nowrap; }
  .mail .btn--mail { flex: 1 1 auto; min-width: 0; padding-inline: 14px; font-size: .9063rem; }
  .copy { min-width: 48px; width: 48px; padding: 0; }
  .copy-face { font-size: 0; gap: 0; }
}

/* ---------- Home: hero ---------- */

.hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 96px) var(--section);
  overflow: clip;
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 56px;
  align-items: start;
}
.hero-copy {
  grid-column: 1 / span 7;
  padding-top: clamp(0px, 3vw, 40px);
}
.hero-copy h1 {
  font-size: clamp(2.5rem, 1.35rem + 3.9vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 13em;
}
.hero-copy .lede { margin-top: 28px; }
.hero-copy .mail { margin-top: 36px; }
.count {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  max-width: 52ch;
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-3);
}

.lede {
  max-width: 58ch;
  font-size: clamp(1.125rem, 1.02rem + .35vw, 1.3125rem);
  line-height: 1.55;
  color: var(--ink-2);
  letter-spacing: -0.008em;
}

.work-wrap {
  grid-column: 8 / span 5;
}

@media (max-width: 999px) {
  .hero-copy, .work-wrap { grid-column: 1 / -1; }
  .work-wrap { max-width: 560px; }
}

/* Entrance: the opening viewport assembles once, in order. Content is visible by default. */
@media (prefers-reduced-motion: no-preference) {
  .enter {
    animation: enter 900ms var(--ease-expo) both;
    animation-delay: calc(var(--i, 0) * 90ms + 60ms);
  }
  .enter--panel {
    animation-name: enter-panel;
    animation-duration: 1100ms;
  }
}
@keyframes enter {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes enter-panel {
  from { opacity: 0; transform: translateY(24px) scale(.985); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- Home: the piece-of-work panel ---------- */

.work {
  position: relative;
  margin: 0;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}

.work-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
}
.work-title {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.work-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-family: var(--mono);
  font-size: .75rem;
  line-height: 1.4;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.work-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-line);
}
.js .work.is-running:not(.is-paused):not(.is-complete) .work-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent-line);
  animation: ping 1.8s var(--ease-out) infinite;
}
@keyframes ping {
  from { transform: scale(1); opacity: .55; }
  to { transform: scale(3.2); opacity: 0; }
}
.work-status-text {
  display: inline-block;
  transition: opacity 180ms ease, filter 180ms ease;
}
.work-status-text.is-swapping { opacity: 0; filter: blur(3px); }

.work-body { position: relative; }
.work-stages {
  list-style: none;
  padding: 10px;
}
/* The track runs through the stage marks; the fill grows as stages complete. */
.work-track,
.work-fill {
  position: absolute;
  left: calc(10px + 10px + 14px - 1px);
  top: 35px;
  bottom: 52px;
  width: 2px;
  border-radius: 2px;
}
.work-track { background: var(--rule); }
.work-fill {
  background: var(--accent-line);
  transform-origin: top;
  transform: scaleY(1);
  transition: transform 700ms var(--ease-in-out);
}

/* A single highlight glides to the active stage. */
.work-cursor {
  position: absolute;
  inset: 0 10px;
  background: var(--accent-soft);
  clip-path: inset(0 0 100% 0 round 10px);
  opacity: 0;
  transition: clip-path 520ms var(--ease-in-out), opacity 300ms ease;
  pointer-events: none;
}
.work.is-running .work-cursor { opacity: 1; }

.work-stage { position: relative; }
.work-stage a {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  column-gap: 14px;
  align-items: start;
  padding: 11px 10px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  .work-stage a:hover .ws-name { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: .22em; }
}

.ws-mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-line);
  box-shadow: 0 0 0 4px var(--panel);
  color: var(--accent-ink);
  transition: background-color 300ms ease, box-shadow 300ms ease;
}
.ws-mark svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ws-mark path {
  stroke-dasharray: 20;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 380ms var(--ease-out) 120ms;
}
.ws-mark::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--accent-line);
  opacity: 0;
  transform: scale(.4);
  transition: opacity 200ms ease, transform 300ms var(--ease-out);
}

.ws-body { min-width: 0; padding-top: 3px; }
.ws-name {
  display: block;
  font-size: .9688rem;
  font-weight: 550;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color 300ms ease;
}
.ws-detail {
  display: block;
  margin-top: 2px;
  font-size: .8438rem;
  line-height: 1.5;
  color: var(--ink-3);
  transition: color 300ms ease;
}
.ws-num {
  padding-top: 5px;
  font-family: var(--mono);
  font-size: .75rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  transition: color 300ms ease;
}

/* States set by the script. Without it, every stage shows as complete. */
.work-stage[data-state="todo"] .ws-mark {
  background: var(--panel);
  box-shadow: 0 0 0 4px var(--panel), inset 0 0 0 1.5px var(--rule-2);
}
.work-stage[data-state="todo"] .ws-mark path,
.work-stage[data-state="active"] .ws-mark path { stroke-dashoffset: 20; transition-delay: 0ms; transition-duration: 120ms; }
.work-stage[data-state="todo"] .ws-name { color: var(--ink-2); }
.work-stage[data-state="todo"] .ws-detail { color: var(--ink-3); }

.work-stage[data-state="active"] .ws-mark {
  background: var(--panel);
  box-shadow: 0 0 0 4px var(--accent-soft), inset 0 0 0 1.5px var(--accent-line);
}
.work-stage[data-state="active"] .ws-mark::after { opacity: 1; transform: scale(1); }
.work-stage[data-state="active"] .ws-num { color: var(--accent); }
.work-stage[data-state="active"] .ws-detail { color: var(--ink-2); }

/* Handover: the three things the organisation receives. */
.work-handover {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--rule);
  background: var(--bg-2);
}
.wh-title {
  font-size: .875rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wh-intro {
  margin-top: 2px;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.wh-list {
  list-style: none;
  display: grid;
  gap: 6px;
  margin-top: 12px;
  padding: 0;
}
.wh-item a {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 8px 10px 8px 8px;
  border-radius: 10px;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: inherit;
  text-decoration: none;
  transition: box-shadow 160ms ease, transform 160ms var(--ease-out);
}
.wh-item a:active { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
  .wh-item a:hover { box-shadow: inset 0 0 0 1px var(--rule-2), 0 2px 8px -4px rgba(11, 13, 18, .12); }
}
.wh-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
.wh-name {
  display: block;
  font-size: .9063rem;
  font-weight: 550;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.wh-desc {
  display: block;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--ink-3);
}

.js .work .wh-item {
  transition: transform 600ms var(--ease-expo);
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js .work .wh-icon {
  transition: background-color 400ms ease, color 400ms ease, box-shadow 400ms ease;
  transition-delay: calc(var(--i, 0) * 120ms);
}
.js .work .wh-icon .icon { transition: transform 500ms var(--ease-expo); transition-delay: calc(var(--i, 0) * 120ms); }
.js .work.is-pending .wh-item,
.js .work.is-pending .wh-icon,
.js .work.is-pending .wh-icon .icon { transition-delay: 0ms; transition-duration: 300ms; }
.js .work.is-pending .wh-icon {
  background: var(--panel);
  color: var(--ink-3);
  box-shadow: inset 0 0 0 1px var(--rule-2);
}
.js .work.is-pending .wh-icon .icon { transform: scale(.82); }
.js .work.is-pending .wh-name { color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .js .work.is-pending .wh-item { transform: translateY(3px); }
}

/* ---------- Sections ---------- */

.section {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}
.section--fog { background: var(--bg-2); }

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 28px;
}
.split-head { grid-column: 1 / span 4; }
.split-body { grid-column: 6 / span 7; }
@media (min-width: 1000px) {
  .split-head h2 { position: sticky; top: calc(var(--head-h) + 32px); }
}
@media (max-width: 999px) {
  .split-head, .split-body { grid-column: 1 / -1; }
}

.prose > * + * { margin-top: 1.1em; }
.prose { max-width: var(--measure); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .55em; }
.prose li::marker { color: var(--ink-3); }

.more { margin-top: 28px !important; }
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.arrow-link .icon { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .arrow-link:hover .icon { transform: translateX(3px); }
  .arrow-link:hover span { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: .22em; }
}

/* A numbered list of what the help involves: one rule per item. */
.involves {
  list-style: none;
  padding: 0 !important;
  border-top: 1px solid var(--rule);
}
.involves li {
  margin: 0 !important;
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
}

/* Terms: a definition table. */
.terms {
  border-top: 1px solid var(--rule);
  max-width: none;
}
.terms > div {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 2.6fr;
  column-gap: 24px;
  row-gap: 4px;
  padding-block: 18px;
  border-bottom: 1px solid var(--rule);
}
.terms dt {
  font-weight: 550;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.terms dd { margin: 0; }
@media (max-width: 559px) {
  .terms > div { grid-template-columns: 1fr; }
}

.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 64px;
}
.duo > * { max-width: 34rem; }
.duo h2 { margin-bottom: 20px; }
.duo .mail { margin-top: 28px; }
@media (max-width: 799px) {
  .duo { grid-template-columns: 1fr; }
}

/* ---------- Inner pages: heading block ---------- */

.page-head {
  padding-block: clamp(56px, 8vw, 104px) clamp(48px, 6vw, 80px);
}
.page-head h1 {
  font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
}
.page-head .lede { margin-top: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .page-head h1, .page-head .lede, .page-head .mail {
    animation: enter 800ms var(--ease-expo) both;
  }
  .page-head .lede { animation-delay: 80ms; }
  .page-head .mail { animation-delay: 150ms; }
}
.page-head .mail { margin-top: 32px; }

/* ---------- How it works: tracker and steps ---------- */

.steps-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  padding-bottom: var(--section);
  border-top: 1px solid var(--rule);
}

.tracker {
  grid-column: 1 / span 3;
  padding-top: 56px;
}
.tracker-inner {
  position: sticky;
  top: calc(var(--head-h) + 40px);
}
.tracker-title {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.tracker-list { position: relative; }
.tracker ol {
  list-style: none;
  padding: 0;
}
.tracker-line,
.tracker-fill {
  position: absolute;
  left: 9px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 2px;
}
.tracker-line { background: var(--rule); }
.tracker-fill {
  background: var(--accent-line);
  transform-origin: top;
  transform: scaleY(0);
  will-change: transform;
}
.tracker li { position: relative; }
.tracker a {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 14px;
  align-items: center;
  padding-block: 8px;
  color: var(--ink-3);
  font-size: .9375rem;
  font-weight: 450;
  text-decoration: none;
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .tracker a:hover { color: var(--ink); }
}
.t-dot {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px var(--rule-2), 0 0 0 4px var(--bg);
  transition: box-shadow 250ms ease, background-color 250ms ease;
}
.t-dot::after {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--accent-line);
  transform: scale(0);
  transition: transform 300ms var(--ease-out);
}
.tracker .is-past a { color: var(--ink-2); }
.tracker .is-past .t-dot { box-shadow: inset 0 0 0 1.5px var(--accent-line), 0 0 0 4px var(--bg); }
.tracker .is-past .t-dot::after { transform: scale(1); }
.tracker .is-current a { color: var(--ink); font-weight: 550; }
.tracker .is-current .t-dot {
  box-shadow: inset 0 0 0 1.5px var(--accent-line), 0 0 0 4px var(--accent-soft);
}
.tracker .is-current .t-dot::after { transform: scale(1); }

.steps {
  grid-column: 5 / span 8;
  list-style: none;
  padding: 0;
}
.step {
  padding-block: 56px;
  border-bottom: 1px solid var(--rule);
}
.step:last-child { border-bottom: 0; }
.step h2 { position: relative; }
.step-num {
  position: absolute;
  right: calc(100% + 20px);
  top: .55em;
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 999px) {
  .step-num { position: static; margin-right: 12px; vertical-align: .35em; }
}
.step h2 { margin-bottom: 20px; }
.step .prose { max-width: var(--measure); }

.asked {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  row-gap: 4px;
  align-items: baseline;
  max-width: var(--measure);
  margin-top: 28px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: .9688rem;
  line-height: 1.5;
}
.asked-label {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}
.asked-text { color: var(--ink); }
@media (max-width: 559px) {
  .asked { grid-template-columns: 1fr; }
}

.handed {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: var(--measure);
  margin-top: 28px !important;
  padding: 0 !important;
}
.handed li {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 !important;
  padding: 16px;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-panel);
  font-size: .9375rem;
  font-weight: 550;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.handed .wh-icon { width: 40px; height: 40px; }
/* The kit settles into place when the reader reaches the handover. */
@media (prefers-reduced-motion: no-preference) {
  .js .handed li {
    transition: opacity 600ms ease, transform 800ms var(--ease-expo);
    transition-delay: calc(var(--i, 0) * 120ms);
  }
  .js-ready .handed:not(.is-in) li { opacity: .6; transform: translateY(10px); }
}
@media (max-width: 559px) {
  .handed { grid-template-columns: 1fr; }
  .handed li { flex-direction: row; align-items: center; }
}

/* Mobile: the tracker becomes a slim progress bar pinned to the top. */
@media (max-width: 999px) {
  .steps-layout { display: block; border-top: 0; }
  .steps { border-top: 1px solid var(--rule); }
  .tracker { padding-top: 0; }
  html:not(.js-ready) .tracker { display: none; }
  .tracker-inner {
    position: static;
  }
  .js-ready .tracker {
    position: sticky;
    top: var(--head-h);
    z-index: 40;
    margin-inline: calc(var(--gutter) * -1);
    padding: 10px var(--gutter) 12px;
    background: var(--head-bg);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid var(--rule);
  }
  .tracker-title { display: none; }
  .tracker ol {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }
  .tracker-line, .tracker-fill { display: none; }
  .tracker a {
    display: block;
    padding: 0;
    font-size: 0;
  }
  .t-dot {
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background: var(--rule);
    box-shadow: none !important;
    overflow: hidden;
  }
  .t-dot::after {
    inset: 0;
    border-radius: 4px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms var(--ease-out);
  }
  .tracker .is-past .t-dot::after,
  .tracker .is-current .t-dot::after { transform: scaleX(1); }
  .tracker .is-current .t-dot::after { opacity: .55; }
  .t-label { display: none; }
  .tracker-now {
    display: flex !important;
    gap: 10px;
    align-items: baseline;
    margin-top: 8px;
    font-size: .875rem;
    font-weight: 550;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .tracker-now .mono { font-size: .75rem; color: var(--accent); font-weight: 400; }
  html { scroll-padding-top: calc(var(--head-h) + 80px); }
}
@media (max-width: 559px) {
  .js-ready .tracker { top: 0; }
  html { scroll-padding-top: 80px; }
}
.tracker-now { display: none; }

/* When AI is not the answer */
.not-ai-intro { margin-top: 16px; }
.reasons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 48px;
  margin-top: 40px;
  border-top: 1px solid var(--rule);
}
.reason {
  padding-block: 28px;
  border-bottom: 1px solid var(--rule);
}
.reason h3 { margin-bottom: 10px; }
.reason .tile { margin-bottom: 16px; }
.reason p { font-size: 1rem; }
@media (max-width: 799px) {
  .reasons { grid-template-columns: 1fr; }
}

.closing {
  padding-block: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--rule);
}
.closing-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}
.closing p { font-size: 1.125rem; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; }

/* ---------- About ---------- */

.about-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 56px;
  padding-bottom: var(--section);
  border-top: 1px solid var(--rule);
}
.about-main { grid-column: 1 / span 7; }
.about-side { grid-column: 9 / span 4; padding-top: 56px; }
.about-main section {
  padding-block: 56px;
  border-bottom: 1px solid var(--rule);
}
.about-main section:last-child { border-bottom: 0; }
.about-main h2 { margin-bottom: 20px; }
@media (max-width: 999px) {
  .about-main, .about-side { grid-column: 1 / -1; }
  .about-side { padding-top: 0; }
}

.panel {
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow-panel);
  padding: 28px;
}
.panel + .panel { margin-top: 20px; }
.panel h2 {
  font-size: 1.375rem;
  letter-spacing: -0.024em;
  margin-bottom: 8px;
}
.panel > p { font-size: .9688rem; }
.panel .terms { margin-top: 18px; }
.panel .terms > div {
  grid-template-columns: 1fr;
  padding-block: 14px;
}
.panel .terms dd { font-size: .9375rem; line-height: 1.55; }
.panel .terms > div:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- Contact ---------- */

.contact-grid {
  padding-block: var(--section);
  border-top: 1px solid var(--rule);
}

/* ---------- Privacy ---------- */

.doc-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  padding-bottom: var(--section);
  border-top: 1px solid var(--rule);
}
.toc {
  grid-column: 1 / span 3;
  padding-top: 56px;
}
.toc-inner {
  position: sticky;
  top: calc(var(--head-h) + 40px);
}
.toc-title {
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.toc ul {
  list-style: none;
  padding: 0;
  border-left: 1px solid var(--rule);
}
.toc a {
  position: relative;
  display: block;
  padding: 6px 0 6px 16px;
  font-size: .9063rem;
  line-height: 1.4;
  color: var(--ink-3);
  text-decoration: none;
  transition: color 200ms ease;
}
.toc a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent-line);
  transform: scaleY(0);
  transition: transform 250ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .toc a:hover { color: var(--ink); }
}
.toc a.is-current { color: var(--ink); }
.toc a.is-current::before { transform: scaleY(1); }

.doc {
  grid-column: 5 / span 8;
  padding-top: 56px;
}
.reviewed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: .8125rem;
  color: var(--ink-2);
}
.doc section {
  padding-block: 40px;
  border-bottom: 1px solid var(--rule);
}
.doc section:last-child { border-bottom: 0; }
.doc h2 {
  font-size: clamp(1.375rem, 1.15rem + .6vw, 1.75rem);
  margin-bottom: 16px;
}
@media (max-width: 999px) {
  .toc, .doc { grid-column: 1 / -1; }
  .toc-inner { position: static; }
}

.tw {
  overflow-x: auto;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--rule);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9688rem;
  line-height: 1.5;
}
th, td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
th {
  background: var(--bg-2);
  color: var(--ink);
  font-weight: 550;
  font-size: .875rem;
}
tr:last-child td { border-bottom: 0; }

.placeholder {
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--placeholder-bg);
  color: var(--placeholder-ink);
  box-shadow: inset 0 0 0 1px currentColor;
  font-weight: 500;
}

/* ---------- 404 ---------- */

.page-head--404 { padding-bottom: var(--section); }
.links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 32px;
  padding: 0;
}

/* ---------- Footer ---------- */

.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--bg-2);
  padding-block: 56px 32px;
  font-size: .9375rem;
}
.foot-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px 48px;
}
.foot-brand { max-width: 26rem; }
.foot-brand .brand-name { color: var(--ink); }
.foot-brand p { margin-top: 8px; color: var(--ink-3); }
.foot-links ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 0;
}
.foot-links a { color: var(--ink-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .foot-links a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); }
}
.foot-mail { margin-top: 12px; }
.foot-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: .8438rem;
  line-height: 1.6;
  color: var(--ink-3);
}
.foot-legal p:first-child { max-width: 62ch; }

/* ---------- Reveal: illustrations settle once as they come into view ----------
   Content is visible by default; the hidden starting states apply only once the script has run. */

@media (prefers-reduced-motion: no-preference) {
  .js-ready .vg[data-reveal],
  .js-ready .compose[data-reveal] {
    transition: opacity 700ms ease, transform 900ms var(--ease-expo);
  }
  .js-ready .vg[data-reveal]:not(.is-in),
  .js-ready .compose[data-reveal]:not(.is-in) {
    opacity: 0;
    transform: translateY(20px);
  }
}

/* Small shared pieces */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip .icon { width: 15px; height: 15px; }
.tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink-2);
}
.section--fog .tile { background: var(--panel); }
.tile .icon { width: 19px; height: 19px; }

/* ---------- Home: the stage strip ---------- */

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 48px;
}
.sec-head h2 + p { margin-top: 16px; max-width: 54ch; }
.sec-head .lede { font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); }

.strip {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 32px;
  margin-top: 56px;
  padding: 0;
}
.strip::before,
.strip::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 0;
  top: 7px;
  height: 2px;
  border-radius: 2px;
  background: var(--rule);
}
.strip::after {
  background: var(--accent-line);
  transform-origin: left;
  transform: scaleX(1);
}
.strip li { position: relative; padding-top: 36px; font-size: 1rem; line-height: 1.6; }
.strip li strong { display: block; margin-bottom: 4px; font-size: 1.0625rem; letter-spacing: -0.012em; }
.strip-node {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--accent-line), 0 0 0 5px var(--bg);
}
.strip-node::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--accent-line);
}
@media (prefers-reduced-motion: no-preference) {
  .js-ready .strip::after { transition: transform 1400ms var(--ease-in-out) 200ms; }
  .js-ready .strip:not(.is-in)::after { transform: scaleX(0); }
  .js-ready .strip li > * { transition: opacity 600ms ease, transform 800ms var(--ease-expo); transition-delay: calc(var(--i) * 300ms + 300ms); }
  .js-ready .strip:not(.is-in) li > * { opacity: 0; transform: translateY(10px); }
  .js-ready .strip .strip-node { transition: transform 500ms var(--ease-expo), opacity 300ms ease; transition-delay: calc(var(--i) * 300ms + 200ms); }
  .js-ready .strip:not(.is-in) .strip-node { transform: scale(.4); opacity: 0; }
}
@media (max-width: 899px) {
  .strip { grid-template-columns: 1fr; row-gap: 28px; }
  .strip::before, .strip::after { left: 7px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .strip::after { transform-origin: top; }
  .js-ready .strip:not(.is-in)::after { transform: scaleY(0); }
  .strip li { padding: 0 0 0 40px; }
}

/* ---------- Home: the system band ---------- */

.band {
  --band-bg: #0B0D12;
  --band-panel: #14171D;
  --band-ink: #F3F5F7;
  --band-ink-2: #BCC3CC;
  --band-ink-3: #8C95A1;
  --band-rule: #262B33;
  --band-rule-2: #363C46;
  --band-accent: #3DD39B;
  --band-accent-soft: rgba(61, 211, 155, .12);
  position: relative;
  padding-block: var(--section);
  background: var(--band-bg);
  color: var(--band-ink-2);
  overflow: clip;
}
@media (prefers-color-scheme: dark) {
  .band {
    --band-bg: #0F1216;
    --band-panel: #161A20;
    border-block: 1px solid var(--rule);
  }
}
.band h2 { color: var(--band-ink); }
.band .lede { color: var(--band-ink-2); }
.band ::selection { background: rgba(61, 211, 155, .3); color: #fff; }
.band :focus-visible { outline-color: var(--band-accent); }

.schematic { margin: 56px 0 0; }
.sx-row {
  display: flex;
  align-items: stretch;
}
.sx-node {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 12px;
  background: var(--band-panel);
  box-shadow: inset 0 0 0 1px var(--band-rule-2), 0 16px 32px -20px rgba(0, 0, 0, .6);
}
.sx-node .tile {
  background: rgba(255, 255, 255, .05);
  color: var(--band-ink-2);
  box-shadow: inset 0 0 0 1px var(--band-rule-2);
}
.sx-name {
  display: block;
  font-size: .9688rem;
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--band-ink);
}
.sx-tool {
  display: block;
  margin-top: 2px;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--band-ink-3);
}

/* The organisation's accounts: a dashed boundary round the parts that are set up. */
.sx-accounts {
  position: relative;
  flex: 3.4 1 0;
  display: flex;
  align-items: stretch;
  padding: 44px 14px 14px;
  border-radius: 18px;
  border: 1.5px dashed var(--band-rule-2);
  background: rgba(61, 211, 155, .025);
}
.sx-accounts-label {
  position: absolute;
  top: 12px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--band-accent);
}
.sx-accounts-label .icon { width: 16px; height: 16px; }
.sx-row > .sx-node { margin-block: 46px 16px; }

/* Wires between nodes, with a signal that travels along them. */
.sx-wire {
  position: relative;
  flex: 0 0 44px;
  align-self: center;
  height: 2px;
  margin-top: 30px;
  background: var(--band-rule-2);
  overflow: hidden;
}
.sx-accounts .sx-wire { margin-top: 0; flex-basis: 28px; }
.sx-wire::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0 30%, var(--band-accent) 50%, transparent 70% 100%);
  transform: translateX(-100%);
}

.schematic figcaption {
  margin-top: 20px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--band-ink-3);
}

/* One signal per cycle: each wire carries it in turn, and each node lights as it arrives. */
@media (prefers-reduced-motion: no-preference) {
  .sx-wire::after { animation: sx-pulse 6s linear infinite; animation-delay: calc(var(--n) * 1.1s + .5s); }
  .sx-node { animation: sx-node 6s ease infinite; animation-delay: calc(var(--n) * 1.1s); }
  .sx-node .tile { animation: sx-tile 6s ease infinite; animation-delay: calc(var(--n) * 1.1s); }
  .js-ready .schematic:not(.is-playing) .sx-wire::after,
  .js-ready .schematic:not(.is-playing) .sx-node,
  .js-ready .schematic:not(.is-playing) .sx-node .tile { animation-play-state: paused; }
}
@keyframes sx-pulse {
  0% { transform: translateX(-100%); }
  12% { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@keyframes sx-pulse-v {
  0% { transform: translateY(-100%); }
  12% { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
@keyframes sx-node {
  0%, 22%, 100% { box-shadow: inset 0 0 0 1px var(--band-rule-2), 0 16px 32px -20px rgba(0, 0, 0, .6); }
  4%, 14% { box-shadow: inset 0 0 0 1px var(--band-accent), 0 0 0 4px rgba(61, 211, 155, .12), 0 16px 32px -20px rgba(0, 0, 0, .6); }
}
@keyframes sx-tile {
  0%, 22%, 100% { background: rgba(255, 255, 255, .05); color: var(--band-ink-2); }
  4%, 14% { background: rgba(61, 211, 155, .16); color: var(--band-accent); }
}

@media (max-width: 999px) {
  .sx-row, .sx-accounts { flex-direction: column; }
  .sx-row > .sx-node { margin: 0; }
  .sx-accounts { padding: 48px 14px 14px; }
  .sx-wire {
    flex: 0 0 28px;
    width: 2px;
    height: auto;
    margin: 0 0 0 35px;
    align-self: flex-start;
  }
  .sx-accounts .sx-wire { margin-left: 35px; flex-basis: 20px; }
  .sx-row > .sx-wire { margin-left: 35px; }
  .sx-wire::after {
    background: linear-gradient(180deg, transparent 0 30%, var(--band-accent) 50%, transparent 70% 100%);
    transform: translateY(-100%);
  }
  .sx-node { flex-direction: row; align-items: center; }
}
@media (max-width: 999px) and (prefers-reduced-motion: no-preference) {
  .sx-wire::after { animation-name: sx-pulse-v; }
}

/* ---------- Home: terms with icons ---------- */

.terms--icons dt {
  display: flex;
  align-items: center;
  gap: 12px;
}
.terms--icons > div { align-items: center; }
.terms--icons dd { padding-left: 0; }
@media (max-width: 559px) {
  .terms--icons dd { padding-left: 48px; }
}

/* ---------- The first email ---------- */

.ask-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 56px;
  align-items: start;
}
.ask-text { grid-column: 1 / span 5; }
.ask-text section + section { margin-top: 56px; }
.ask-text h2 { margin-bottom: 20px; }
.ask-text .mail { margin-top: 28px; }
.ask-grid > .compose { grid-column: 7 / span 6; }
@media (max-width: 999px) {
  .ask-text, .ask-grid > .compose { grid-column: 1 / -1; }
  .ask-grid > .compose { max-width: 560px; }
}

.compose {
  margin: 0;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.cmp-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
}
.cmp-bar .icon { width: 18px; height: 18px; color: var(--ink-3); }
.cmp-fields { margin: 0; }
.cmp-fields > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  padding: 11px 18px;
  border-bottom: 1px solid var(--rule);
  font-size: .9063rem;
}
.cmp-fields dt { color: var(--ink-3); }
.cmp-fields dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.cmp-body {
  display: grid;
  gap: 10px;
  padding: 18px;
}
.cmp-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.cmp-slot {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.cmp-foot {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--rule);
  background: var(--bg-2);
  font-size: .8438rem;
  line-height: 1.5;
  color: var(--ink-3);
}
.cmp-foot .icon { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.cmp-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.1em;
  margin-top: .2em;
  background: var(--accent-line);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .js-ready .compose .cmp-line .cmp-slot {
    transition: clip-path 900ms var(--ease-out), opacity 300ms ease;
    transition-delay: calc(var(--i) * 650ms + 250ms);
  }
  .js-ready .compose:not(.is-in) .cmp-line .cmp-slot { clip-path: inset(0 100% 0 0 round 8px); opacity: 0; }
  .js-ready .compose.is-in .cmp-line:last-child .cmp-caret {
    animation: caret 1s steps(1) 4 both;
    animation-delay: 3.1s;
  }
}
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.page-head--split .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 48px;
  align-items: start;
}
.page-head--split .ph-text { grid-column: 1 / span 6; }
.page-head--split .compose { grid-column: 8 / span 5; }
@media (max-width: 999px) {
  .page-head--split .ph-text, .page-head--split .compose { grid-column: 1 / -1; }
  .page-head--split .compose { max-width: 560px; }
}

/* ---------- How it works: illustrations ---------- */

.vg {
  max-width: var(--measure);
  margin: 32px 0 0;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
}
.vg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
}
.vg-title {
  font-size: .9063rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.vg-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vg-chips .or { font-size: .8125rem; color: var(--ink-3); }
.vg .vg-body { padding: 6px 18px 10px; }
.vg-cap {
  padding: 12px 18px;
  border-top: 1px solid var(--rule);
  background: var(--bg-2);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* A list whose marks fill in, in order */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 10px;
  border-bottom: 1px solid var(--rule);
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--ink);
}
.ticks li:last-child { border-bottom: 0; }
.tick {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-line);
  color: var(--accent-ink);
}
.tick svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tick path { stroke-dasharray: 20; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js-ready [data-reveal] .tick { transition: background-color 300ms ease, box-shadow 300ms ease; transition-delay: calc(var(--i) * 380ms + 500ms); }
  .js-ready [data-reveal] .tick path { transition: stroke-dashoffset 360ms var(--ease-out); transition-delay: calc(var(--i) * 380ms + 620ms); }
  .js-ready [data-reveal]:not(.is-in) .tick { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule-2); }
  .js-ready [data-reveal]:not(.is-in) .tick path { stroke-dashoffset: 20; }
}

/* Task map: handling and waiting, as bars */
.tm-legend { display: flex; gap: 14px; font-size: .8125rem; color: var(--ink-3); }
.tm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tm-key { width: 14px; height: 8px; border-radius: 2px; }
.tm-key--h, .tm-bar .h { background: var(--ink-2); }
.tm-key--w, .tm-bar .w { background: var(--chart-wait); }
.tm-rows { list-style: none; margin: 0; padding: 0; }
.tm-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  column-gap: 18px;
  align-items: center;
  padding-block: 11px;
  border-bottom: 1px solid var(--rule);
}
.tm-row:last-child { border-bottom: 0; }
.tm-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: .9063rem;
  line-height: 1.4;
  color: var(--ink);
}
.tm-label .chip { padding: 1px 8px 1px 6px; font-size: .75rem; }
.tm-bar {
  display: flex;
  gap: 3px;
  height: 10px;
}
.tm-bar span { height: 100%; border-radius: 3px; transform-origin: left; }
.tm-bar .h { width: var(--h); }
.tm-bar .w { width: var(--w); }
@media (prefers-reduced-motion: no-preference) {
  .js-ready .taskmap .tm-bar span { transition: transform 900ms var(--ease-expo); transition-delay: calc(var(--i) * 140ms + 400ms); }
  .js-ready .taskmap:not(.is-in) .tm-bar span { transform: scaleX(0); }
}
@media (max-width: 559px) {
  .tm-row { grid-template-columns: 1fr; row-gap: 8px; }
}

/* Recommendations sheet */
.recs .ticks li { color: var(--ink); }
.opts {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--rule);
}
.opts-title { font-size: .8125rem; font-weight: 500; color: var(--ink-3); }
.opts ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
}
.opts li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--rule);
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ink);
}
.opts li .icon { width: 16px; height: 16px; margin-top: 1px; color: var(--ink-3); }
@media (max-width: 559px) {
  .opts ul { grid-template-columns: 1fr; }
}

/* Accounts: each part lands in the organisation's name, one at a time */
.acc-rows { list-style: none; margin: 0; padding: 0; }
.acc-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  column-gap: 14px;
  align-items: center;
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
}
.acc-row:last-child { border-bottom: 0; }
.acc-kind { display: block; font-size: .9375rem; font-weight: 550; color: var(--ink); letter-spacing: -0.01em; line-height: 1.35; }
.acc-tool { display: block; font-size: .8438rem; color: var(--ink-3); line-height: 1.4; }
.acc-state {
  position: relative;
  display: grid;
  justify-items: end;
  font-size: .8125rem;
  white-space: nowrap;
}
.acc-state > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.acc-done { color: var(--accent); font-weight: 500; }
.acc-done .icon { width: 15px; height: 15px; stroke-width: 2; }
.acc-wait { color: var(--ink-3); opacity: 0; }
.spin {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--rule-2);
  border-top-color: var(--ink-2);
}
@media (prefers-reduced-motion: no-preference) {
  .js-ready .accounts .acc-state > span { transition: opacity 260ms ease, filter 260ms ease; }
  .js-ready .accounts .acc-done { transition-delay: calc(var(--i) * 900ms + 1100ms); }
  .js-ready .accounts .acc-wait { transition-delay: calc(var(--i) * 900ms + 1100ms); }
  .js-ready .accounts:not(.is-in) .acc-done { opacity: 0; filter: blur(3px); }
  .js-ready .accounts:not(.is-in) .acc-wait { opacity: 1; }
  .js-ready .accounts .spin { animation: spin 800ms linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 479px) {
  .acc-row { grid-template-columns: 36px minmax(0, 1fr); row-gap: 6px; }
  .acc-state { grid-column: 2; justify-items: start; }
}

/* ---------- About: kinds of task ---------- */

.kinds {
  list-style: none;
  padding: 0 !important;
  border-top: 1px solid var(--rule);
}
.kinds li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 !important;
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  line-height: 1.45;
}

/* ---------- Footer wordmark ---------- */

.foot-mark {
  margin: 48px 0 0;
  font-size: min(calc((100vw - var(--gutter) * 2) / 9.7), 7.75rem);
  font-weight: 600;
  line-height: .8;
  letter-spacing: -0.04em;
  color: var(--rule);
  white-space: nowrap;
  user-select: none;
  margin-bottom: -.12em;
}
.site-foot { overflow: hidden; padding-bottom: 0; }
.foot-legal { padding-bottom: 8px; }


/* ---------- Page transitions between pages (where supported) ---------- */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 160ms ease both; }
  ::view-transition-new(root) { animation: vt-in 380ms var(--ease-expo) both; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .copy-face, .work-status-text { transition-duration: 150ms !important; }
}

@media print {
  .site-head, .tracker, .toc, .copy, .site-foot nav { display: none; }
  body { color: #000; }
}