/* ============ Fonts (self-hosted, latin subset) ============ */
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face{ font-family:'IBM Plex Sans'; font-style:italic; font-weight:400; font-display:swap;
  src:url(/assets/fonts/ibm-plex-sans-latin-400-italic.woff2) format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/assets/fonts/space-grotesk-latin-500-normal.woff2) format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/assets/fonts/space-grotesk-latin-700-normal.woff2) format('woff2'); }
/* ============ Paper (light, default) ============ */
:root{
  --bg:#F5EFE9; --surface:#ECE2D8; --text:#1C120D; --muted:#6B5A50; --lines:#DFD1C4;
  --accent:#A8360E; --accent-ink:#A8360E; --btn-ink:#F5EFE9;
  --field:#FF6B3D; --field-ink:#210E06; --field-muted:#4A1F0C; --field-lines:#D9502A;
  --sand-alpha:.9; color-scheme:light;
}
/* ============ Twilight (dark) ============ */
html[data-mode="twilight"]{
  --bg:#150C09; --surface:#1D120D; --text:#F0E2DB; --muted:#B19B90; --lines:#33211A;
  --accent:#FF8A62; --accent-ink:#FF9A76; --btn-ink:#150C09;
  --field:#FF6B3D; --field-ink:#210E06; --field-muted:#4A1F0C; --field-lines:#D9502A;
  --sand-alpha:.8; color-scheme:dark;
}
/* System dark, until the visitor picks Paper. Keep identical to the Twilight block
   (npm run check enforces it). */
@media (prefers-color-scheme: dark){
  html:not([data-mode="paper"]){
  --bg:#150C09; --surface:#1D120D; --text:#F0E2DB; --muted:#B19B90; --lines:#33211A;
  --accent:#FF8A62; --accent-ink:#FF9A76; --btn-ink:#150C09;
  --field:#FF6B3D; --field-ink:#210E06; --field-muted:#4A1F0C; --field-lines:#D9502A;
  --sand-alpha:.8; color-scheme:dark;
  }
}
/* ============ Base ============ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
a,.btn,.link,.mode-btn{ transition:color .15s ease, background-color .15s ease, border-color .15s ease; }
html{ scroll-behavior:smooth; scroll-padding-top:72px; background:var(--bg); }
body{ background:var(--bg); color:var(--text);
  font:400 17px/1.6 'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
main{ flex:1; display:flex; flex-direction:column; }
main > .page{ width:100%; }
a{ color:inherit; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
svg,canvas{ display:block; }
[hidden]{ display:none !important; }
::selection{ background:var(--accent-ink); color:var(--bg); }
:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:3px; }
.container{ max-width:1216px; margin-inline:auto; padding-inline:clamp(20px,4.5vw,48px); }
.grid{ display:grid; grid-template-columns:repeat(12,1fr); column-gap:28px; }
.tag{ font-family:'IBM Plex Mono',Menlo,monospace; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.tag b{ color:var(--accent-ink); font-weight:500; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.skip{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--text); color:var(--bg);
  font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.1em; padding:12px 18px; text-decoration:none; }
.skip:focus{ left:12px; top:12px; }
/* ============ Doc strip, header ============ */
.doc-strip{ display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding-block:7px; font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.site-header{ position:sticky; top:0; z-index:100; background:var(--bg); border-bottom:1px solid var(--lines); }
.header-inner{ display:flex; align-items:center; gap:32px; height:52px; }
.wordmark{ font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:14px;
  letter-spacing:.24em; text-decoration:none; color:var(--text); }
.wordmark:hover{ color:var(--accent-ink); }
.wordmark .wm-o{ position:relative; display:inline-block; }
.wordmark .wm-o::after{ content:""; position:absolute; top:-1px; left:50%;
  width:2px; height:4px; background:var(--accent-ink);
  transform:translateX(-50%) rotate(16deg); }
.site-nav{ display:flex; gap:28px; margin-left:auto; }
.site-nav a{ font-size:15px; color:var(--muted); text-decoration:none; padding:4px 0; }
.site-nav a:hover{ color:var(--text); }
.site-nav a.active{ color:var(--text); text-decoration:underline; text-underline-offset:6px;
  text-decoration-thickness:1px; text-decoration-color:var(--accent-ink); }
.site-nav .n{ display:none; }
.menu-toggle{ display:none; }
/* ============ Buttons, links ============ */
.btn{ display:inline-flex; align-items:center; justify-content:center; text-align:center;
  font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:16px 26px; border:1px solid var(--accent); background:var(--accent); color:var(--btn-ink); }
.btn:hover{ background:var(--text); border-color:var(--text); color:var(--bg); }
.btn:active{ transform:translateY(1px); }
.btn-small{ padding:11px 16px; font-size:11px; }
.link{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.link:hover{ color:var(--text); }
/* ============ Raked sand ============ */
.hero-band{ position:relative; overflow:hidden; background:var(--surface); border-bottom:1px solid var(--lines); }
.sand-strip{ position:relative; height:clamp(90px,12vw,140px); overflow:hidden;
  background:var(--surface); border-bottom:1px solid var(--lines); }
.sand path{ fill:none; stroke:var(--lines); stroke-width:1; }
.sand-fallback{ position:absolute; inset:0; width:100%; height:100%; }
.sand-fallback path{ stroke-opacity:var(--sand-alpha); }
.sand-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.has-canvas .sand-fallback{ display:none; }
/* ============ Business card (home) ============ */
.page-home{ flex:1; display:flex; flex-direction:column; }
.page-home .hero-band{ flex:1; display:flex; flex-direction:column; }
.kicker{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:20px; }
.kicker b{ color:var(--accent-ink); font-weight:500; }
/* The name, front and centre: the card's masthead */
.brand-mark{ font-family:'IBM Plex Mono',Menlo,monospace; font-weight:500;
  font-size:clamp(52px,10.5vw,112px); letter-spacing:.2em; line-height:1.1;
  color:var(--text); padding-top:.06em; }
.brand-mark .o-mark{ position:relative; display:inline-block; }
.brand-mark .o-mark::after{ content:""; position:absolute; top:-.02em; left:50%;
  width:.07em; height:.16em; background:var(--accent);
  transform:translateX(-50%) rotate(16deg); }
.hero-desc{ margin-top:20px; font-size:clamp(24px,3.2vw,38px); font-weight:500;
  letter-spacing:-.015em; line-height:1.15; max-width:24ch; }
.hero-sub{ margin-top:18px; font-size:19px; line-height:1.6; max-width:52ch; }
.hero-actions{ margin-top:34px; display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
/* ============ Page heads, sections ============ */
.page-head{ padding-block:clamp(56px,7vw,88px) 0; }
.page-head .kicker{ margin-bottom:24px; }
.page-title{ font-family:'Space Grotesk','IBM Plex Sans',sans-serif; font-size:clamp(36px,5vw,58px); font-weight:700; letter-spacing:-.022em; line-height:1.04; max-width:22ch; }
.page-lead{ margin-top:22px; font-size:19px; line-height:1.6; color:var(--muted); max-width:54ch; }
.page-rule{ margin-top:clamp(40px,5.5vw,60px); }
.page-rule .rule{ height:1px; background:var(--lines); }
.section{ padding-block:clamp(64px,8vw,100px) clamp(72px,9vw,112px); }
.sec-marker{ grid-column:1/4; align-self:start;
  font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; }
.sec-marker .num{ color:var(--accent-ink); margin-right:12px; }
.sec-marker .name{ color:var(--muted); }
.m-note{ margin-top:16px; max-width:21ch; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  font-weight:400; letter-spacing:.06em; line-height:1.8; color:var(--muted); }
.sec-body{ grid-column:4/13; min-width:0; }
/* ============ Rows ============ */
.rows{ margin-top:clamp(36px,4.5vw,52px); border-top:1px solid var(--lines); }
/* ============ Pull, exhibit, tables ============ */
.pull{ margin-top:clamp(44px,5.5vw,64px); }
.pull blockquote{ font-size:clamp(22px,2.6vw,28px); line-height:1.42; letter-spacing:-.012em;
  font-weight:500; max-width:38ch; }
.pull figcaption{ margin-top:16px; }
.exhibit{ --ex-pad:clamp(18px,4vw,44px); margin-top:clamp(44px,5.5vw,64px); background:var(--surface);
  border:1px solid var(--lines); padding:var(--ex-pad); }
.exhibit:first-child{ margin-top:0; }
.ex-head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap;
  border-bottom:1px solid var(--lines); padding-bottom:16px; }
.exhibit > p{ margin-top:20px; font-size:16px; line-height:1.65; color:var(--muted); max-width:64ch; }
.finding{ padding:24px 0 22px; border-bottom:1px solid var(--lines); }
.finding:last-of-type{ border-bottom:0; }
.finding h4{ font-size:19px; font-weight:500; letter-spacing:-.01em; }
.f-body{ margin-top:10px; font-size:16px; line-height:1.65; color:var(--muted); max-width:64ch; }
.f-fix{ margin-top:14px; display:grid; grid-template-columns:110px minmax(0,1fr); column-gap:20px; align-items:baseline; }
.f-fix .tag{ font-size:10px; }
.f-fix p{ font-size:15.5px; line-height:1.6; max-width:58ch; }
.trail{ list-style:none; margin-top:20px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0 14px; }
.trail li{ display:flex; flex-direction:column; gap:3px; padding-top:12px; border-top:2px solid var(--lines); }
.trail span{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); }
.trail b{ font-size:17px; font-weight:500; letter-spacing:-.01em; }
.trail small{ font-size:13px; line-height:1.45; color:var(--muted); }
.trail .trail-out{ border-top-color:var(--accent); }
.trail .trail-out b{ color:var(--accent-ink); font-family:'Space Grotesk','IBM Plex Sans',sans-serif; font-weight:700; }
.finding .f-fix{ margin-top:20px; }
.ex-foot{ margin-top:20px; border-top:1px solid var(--lines); padding-top:16px; }
.table-wrap{ overflow-x:auto; }
table.plan{ width:100%; min-width:560px; border-collapse:collapse; }
.plan caption{ text-align:left; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding-bottom:16px; }
.plan th{ text-align:left; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); padding:0 24px 12px 0;
  border-bottom:1px solid var(--text); }
.plan td{ padding:16px 24px 16px 0; border-bottom:1px solid var(--lines); font-size:16px;
  line-height:1.55; vertical-align:top; }
.plan td:first-child{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.08em;
  white-space:nowrap; padding-top:18px; }
.plan td:last-child{ color:var(--muted); padding-right:0; }
/* ============ Services (approach) ============ */
.svc-index{ list-style:none; margin-top:28px; display:flex; flex-wrap:wrap; gap:10px 28px; }
.svc-index a{ font-size:16px; color:var(--text); text-decoration:underline; text-underline-offset:5px;
  text-decoration-thickness:1px; text-decoration-color:var(--lines); }
.svc-index a:hover{ color:var(--accent-ink); text-decoration-color:var(--accent-ink); }
.svc-index .n{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--accent-ink);
  letter-spacing:.08em; margin-right:10px; }
.svc-title{ font-family:'Space Grotesk','IBM Plex Sans',sans-serif; font-size:clamp(26px,3vw,34px);
  font-weight:700; letter-spacing:-.018em; line-height:1.1; }
.svc .svc-title::after{ content:""; display:inline-block; width:.5em; height:.82em; margin-left:.14em;
  vertical-align:-.04em; background:var(--accent); animation:caret 1.1s steps(1) infinite; }
@keyframes caret{ 0%,55%{ opacity:1; } 56%,100%{ opacity:0; } }
.svc-lead{ margin-top:16px; font-size:17px; line-height:1.65; color:var(--muted); max-width:64ch; }
.proof{ margin-top:14px; display:flex; gap:6px 14px; flex-wrap:wrap; align-items:baseline;
  font-size:15px; line-height:1.55; max-width:64ch; }
.proof .tag{ color:var(--accent-ink); flex:none; }
.proof-ssvc{ display:block; }
.proof-ssvc .tag{ margin-right:14px; }
.ssvc{ list-style:none; margin-top:12px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 6px; }
.ssvc li{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.02em; line-height:1.3; }
.ssvc li:not(:last-child)::after{ content:"→"; margin-left:8px; color:var(--muted); }
.ssvc .ssvc-out{ padding:6px 10px; border:1px solid var(--accent-ink); }
.ssvc .ssvc-out b{ color:var(--accent-ink); font-weight:500; }
.built{ list-style:none; }
.built li{ position:relative; padding-left:22px; max-width:56ch; }
.built li + li{ margin-top:10px; }
.built li::before{ content:""; position:absolute; left:0; top:.8em; width:12px; height:1px; background:var(--accent-ink); }
.svc .rows{ margin-top:clamp(28px,3.5vw,40px); }
.stats{ margin-top:clamp(28px,3.5vw,40px); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 28px; }
.stat{ border-top:2px solid var(--text); padding-top:14px; }
.stat-n{ font-family:'Space Grotesk','IBM Plex Sans',sans-serif; font-size:clamp(40px,5vw,56px); font-weight:700;
  letter-spacing:-.025em; line-height:1; color:var(--accent-ink); }
.stat figcaption{ margin-top:10px; font-size:15.5px; line-height:1.55; color:var(--muted); max-width:40ch; }
.stat figcaption .tag{ display:block; margin-top:10px; font-size:10px; }
.versus td:nth-child(2){ color:var(--text); }
.versus td:last-child{ color:var(--muted); }
.terms{ list-style:none; margin-top:24px; border-top:1px solid var(--lines); }
.terms li{ padding:16px 0 16px 30px; border-bottom:1px solid var(--lines); position:relative;
  font-size:16px; line-height:1.6; color:var(--muted); max-width:72ch; }
.terms li::before{ content:""; position:absolute; left:0; top:1.55em; width:16px; height:1px; background:var(--accent-ink); }
.terms b{ color:var(--text); font-weight:500; }
.steps{ list-style:none; margin-top:clamp(24px,3vw,32px); display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--lines); }
.steps-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.steps li{ display:flex; flex-direction:column; gap:4px; padding:16px 18px 4px; border-left:1px solid var(--lines); }
.steps li:first-child{ border-left:0; padding-left:0; }
.steps .n{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.08em; color:var(--accent-ink); }
.steps b{ font-size:17px; font-weight:500; letter-spacing:-.01em; line-height:1.3; }
.steps li > span:last-child{ font-size:14px; line-height:1.5; color:var(--muted); }
/* Roadmap timeline: lanes render server-side in the default order; roadmap.js reveals
   the inputs, reorders, and replays the draw-in. Without JS or with reduced motion it is static. */
.roadmap .rm-intro{ margin-top:16px; }
.rm-controls{ margin-top:20px; display:flex; flex-direction:column; gap:16px; }
.rm-controls fieldset{ border:0; min-width:0; display:flex; flex-wrap:wrap; gap:8px; }
.rm-controls legend{ width:100%; margin-bottom:8px; }
.pill, .chip{ position:relative; cursor:pointer; }
.pill input, .chip input{ position:absolute; opacity:0; width:1px; height:1px; }
.pill span, .chip span{ display:inline-block; border:1px solid var(--lines); background:var(--bg);
  transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.pill span{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; padding:9px 16px; }
.chip span{ font-size:13.5px; line-height:1.3; padding:6px 12px; color:var(--muted); }
.pill:hover span, .chip:hover span{ border-color:var(--muted); }
.pill input:checked + span{ background:var(--accent); border-color:var(--accent); color:var(--btn-ink); }
.chip input:checked + span{ border-color:var(--accent-ink); color:var(--text); text-decoration:line-through;
  text-decoration-color:var(--accent-ink); }
.pill input:focus-visible + span, .chip input:focus-visible + span{ outline:2px solid var(--accent-ink); outline-offset:2px; }
.rm-have-wrap > summary{ display:inline-flex; gap:8px; align-items:baseline; cursor:pointer; list-style:none; margin-bottom:10px; }
.rm-have-wrap > summary::-webkit-details-marker{ display:none; }
.rm-have-wrap > summary::before{ content:"+"; color:var(--accent-ink); }
.rm-have-wrap[open] > summary::before{ content:"\2212"; }
.rm-have-wrap > summary:hover{ color:var(--text); }
.rm-have-count{ color:var(--accent-ink); }
.roadmap .rm-status{ margin-top:22px; font-size:11px; line-height:1.6; color:var(--text); } /* beats .exhibit > p */
.rm-status:empty{ display:none; }
.rm-lanes{ margin-top:22px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); counter-reset:rm; }
.rm-lane{ padding-right:16px; }
.rm-lane:last-child{ padding-right:0; }
/* The track: a grey rail per lane with an accent fill and a node at the start of each phase */
.rm-lane-head{ position:relative; display:flex; align-items:baseline; gap:10px; padding:26px 0 14px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); }
.rm-lane-head::before, .rm-lane-head::after{ content:""; position:absolute; top:7px; left:0; right:-16px; height:2px; }
.rm-lane:last-child .rm-lane-head::before, .rm-lane:last-child .rm-lane-head::after{ right:0; }
.rm-lane-head::before{ background:var(--lines); }
.rm-lane-head::after{ background:var(--accent); transform-origin:left; }
.rm-lane-head b{ font-family:'Space Grotesk','IBM Plex Sans',sans-serif; font-size:20px; font-weight:700;
  letter-spacing:-.01em; text-transform:none; color:var(--text); }
.rm-lane-head b::before{ content:""; position:absolute; z-index:1; top:1px; left:0; width:14px; height:14px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--surface); }
.rm-list{ list-style:none; }
.rm-item{ counter-increment:rm; position:relative; margin-bottom:8px; padding:10px 12px 10px 42px;
  background:var(--bg); border:1px solid var(--lines); }
.rm-item::before{ content:counter(rm, decimal-leading-zero); position:absolute; left:12px; top:12px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; color:var(--accent-ink); }
.rm-item summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:10px;
  font-size:14.5px; font-weight:500; line-height:1.4; }
.rm-item summary::-webkit-details-marker{ display:none; }
.rm-item summary::after{ content:"+"; font-family:'IBM Plex Mono',monospace; color:var(--muted);
  transition:transform .2s ease; }
.rm-item details[open] summary::after{ transform:rotate(45deg); }
.rm-item summary:hover{ color:var(--accent-ink); }
.rm-why{ margin-top:6px; font-size:13.5px; line-height:1.55; color:var(--muted); }
.rm-after{ margin-top:6px; font-size:10px; }
.rm-custom{ margin-bottom:8px; padding:10px 12px; border:1px dashed var(--muted);
  font-size:14px; line-height:1.4; color:var(--muted); }
.rm-custom .tag{ display:block; margin-bottom:4px; font-size:10px; color:var(--accent-ink); }
/* Armed: waiting to scroll into view. Playing: rails draw left to right, items drop in behind them. */
.is-armed .rm-lane-head::after{ transform:scaleX(0); }
.is-armed .rm-lane-head b::before{ transform:scale(0); }
.is-armed .rm-item, .is-armed .rm-custom{ opacity:0; }
.is-playing .rm-lane-head::after{ animation:rm-draw .55s cubic-bezier(.6,0,.3,1) forwards; }
.is-playing .rm-lane-head b::before{ animation:rm-node .3s cubic-bezier(.3,1.6,.5,1) forwards; }
.is-playing .rm-lane:nth-child(2) .rm-lane-head::after, .is-playing .rm-lane:nth-child(2) .rm-lane-head b::before{ animation-delay:.55s; }
.is-playing .rm-lane:nth-child(3) .rm-lane-head::after, .is-playing .rm-lane:nth-child(3) .rm-lane-head b::before{ animation-delay:1.1s; }
.is-playing .rm-item, .is-playing .rm-custom{ animation:rm-drop .45s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes rm-draw{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes rm-node{ from{ transform:scale(0); } to{ transform:scale(1); } }
@keyframes rm-drop{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
.rm-done{ margin-top:22px; border-top:1px solid var(--lines); padding-top:14px; }
.rm-done-list{ list-style:none; margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; }
.rm-done .rm-item{ counter-increment:none; margin:0; padding:5px 10px; opacity:1; animation:none; }
.rm-done .rm-item::before, .rm-done .rm-why, .rm-done .rm-after, .rm-done summary::after{ display:none; }
.rm-done summary{ pointer-events:none; font-size:13px; font-weight:400; color:var(--muted);
  text-decoration:line-through; text-decoration-color:var(--accent-ink); }
/* ============ Writing entries ============ */
.entry{ border-bottom:1px solid var(--lines); }
.entry:last-of-type{ border-bottom:0; }
.entry-head{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto 28px; column-gap:28px;
  align-items:baseline; text-align:left; padding:24px 0; text-decoration:none; }
.entry-title{ font-size:19px; font-weight:500; letter-spacing:-.01em; color:var(--text); }
.entry-head:hover .entry-title{ color:var(--accent-ink); }
.entry-meta{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; padding-top:5px; }
.entry-x{ font-family:'IBM Plex Mono',monospace; font-size:17px; color:var(--muted); justify-self:end;
  line-height:1; }
.eb{ padding-bottom:26px; }
.eb p{ max-width:64ch; font-size:16px; line-height:1.65; color:var(--muted); }
/* ============ CTA, facts, form ============ */
.cta-strip{ border-top:1px solid var(--lines); }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:28px;
  flex-wrap:wrap; padding-block:clamp(44px,5.5vw,64px); }
.cta-inner h2{ font-family:'Space Grotesk','IBM Plex Sans',sans-serif; font-size:clamp(22px,2.6vw,28px); font-weight:700; letter-spacing:-.015em; max-width:24ch; }
.cta-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.mail-alt{ font-size:15px; color:var(--muted); }
.mail-alt a{ color:var(--text); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px;
  text-decoration-color:var(--accent-ink); }
.mail-alt a:hover{ color:var(--accent-ink); }
.mar-actions .mail-alt{ flex-basis:100%; color:var(--field-muted); }
.mar-actions .mail-alt a{ color:var(--field-ink); text-decoration-color:var(--field-ink); }
.mar-actions .mail-alt a:hover{ color:var(--field-muted); }
.book-mail{ margin-top:18px; }
.header-mail{ font-size:15px; color:var(--muted); text-decoration:none; }
.header-mail:hover{ color:var(--accent-ink); }
.cta-inner p{ margin-top:8px; color:var(--muted); font-size:15.5px; max-width:44ch; }
.two-col{ margin-top:clamp(32px,4.5vw,48px); display:grid; grid-template-columns:minmax(0,1fr) 300px;
  column-gap:64px; row-gap:48px; }
.about-text p{ max-width:60ch; }
.about-text p + p{ margin-top:18px; }
.founder-note{ margin-top:36px; border-left:2px solid var(--text); padding-left:22px; }
.founder-note .tag{ display:block; margin-bottom:12px; }
.founder-note p{ max-width:56ch; }
.founder-note .sig{ margin-top:14px; color:var(--text); }
.definition{ margin-top:36px; border-left:2px solid var(--text); padding-left:22px; }
.def-word{ font-size:22px; font-style:italic; font-weight:400; }
.def-word .ipa{ font-family:'IBM Plex Mono',monospace; font-style:normal; font-size:12px;
  color:var(--muted); letter-spacing:.04em; margin-left:10px; }
.def-sense{ margin-top:10px; font-style:italic; font-size:15.5px; line-height:1.6; color:var(--muted); max-width:44ch; }
.facts{ border-top:1px solid var(--lines); }
.fact{ padding:16px 0; border-bottom:1px solid var(--lines); }
.fact dt{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
.fact dd{ font-size:15.5px; line-height:1.55; }
.fact dd .link{ font-size:11px; }
/* Booking panel (contact): replaces the enquiry form, sized to lead the page */
.book-panel{ border:1px solid var(--lines); background:var(--surface);
  padding:clamp(28px,5vw,56px); min-height:clamp(300px,34vw,400px);
  display:flex; flex-direction:column; justify-content:center; }
.book-panel .tag{ display:block; }
.book-q{ margin-top:18px; font-family:'Space Grotesk','IBM Plex Sans',sans-serif; font-size:clamp(26px,3.2vw,36px); font-weight:700;
  letter-spacing:-.018em; line-height:1.15; max-width:20ch; }
.book-sub{ margin-top:12px; font-size:19px; line-height:1.6; color:var(--muted); max-width:44ch; }
.book-actions{ margin-top:34px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.book-actions .btn{ padding:20px 30px; font-size:13px; }
/* ============ Footer ============ */
.site-footer{ background:var(--surface); border-top:1px solid var(--lines); }
.foot-top{ display:flex; align-items:center; justify-content:space-between; gap:10px 28px;
  flex-wrap:wrap; padding-block:18px; }
.f-left{ display:flex; align-items:baseline; gap:22px; flex-wrap:wrap; }
.f-left .wordmark{ font-size:12px; }
.f-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.mode-btn{ display:inline-flex; align-items:center; gap:10px; border:1px solid var(--lines); padding:9px 14px; }
.mode-btn:hover{ border-color:var(--muted); }
.mode-dot{ width:10px; height:10px; border-radius:50%; border:1px solid var(--muted); }
.mode-btn .m-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.mode-btn .m-label b{ color:var(--text); font-weight:500; }
html[data-mode="twilight"] .mode-dot{ background:var(--text); border-color:var(--text); }
.f-top{ text-decoration:none; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.14em; color:var(--muted); }
.f-top:hover{ color:var(--text); }
/* ============ Utilities (replace the export's inline styles) ============ */
.flush{ margin-top:0; }
.table-wrap{ margin-top:24px; }
/* ============ Articles ============ */
.entry-empty{ padding:24px 0; color:var(--muted); }
.draft-flag{ color:var(--accent-ink); }
.article-meta{ margin-top:22px; }
.prose{ max-width:66ch; }
.prose > * + *{ margin-top:1.1em; }
.prose h2{ margin-top:2em; font-family:'Space Grotesk','IBM Plex Sans',sans-serif; font-size:24px; font-weight:700; letter-spacing:-.015em; line-height:1.25; }
.prose h3{ margin-top:1.6em; font-size:19px; font-weight:500; letter-spacing:-.01em; }
.prose a{ color:var(--accent-ink); text-underline-offset:3px; }
.prose ul,.prose ol{ padding-left:1.4em; }
.prose li + li{ margin-top:.4em; }
.prose blockquote{ border-left:2px solid var(--text); padding-left:22px; color:var(--muted); }
.prose code{ font-family:'IBM Plex Mono',Menlo,monospace; font-size:.88em; background:var(--surface);
  padding:.1em .3em; }
.prose pre{ background:var(--surface); border:1px solid var(--lines); padding:18px 20px; overflow-x:auto; }
.prose pre code{ background:none; padding:0; }
/* ============ Responsive ============ */
@media (max-width:1020px){
  .header-mail{ display:none; }
  .two-col{ grid-template-columns:minmax(0,1fr) 260px; column-gap:44px; }
}
@media (max-width:880px){
  .header-inner{ gap:16px; }
  .header-cta{ margin-left:auto; }
  .menu-toggle{ display:block; font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
    letter-spacing:.16em; color:var(--text); padding:8px 0; }
  /* With JS: collapsible menu. Without JS: nav wraps onto its own row. */
  .js .site-nav{ position:absolute; top:100%; left:0; right:0; background:var(--bg);
    border-bottom:1px solid var(--lines); display:none; flex-direction:column; gap:0; padding:6px 0 14px; }
  .js .site-header.nav-open .site-nav{ display:flex; }
  .js .site-nav a{ padding:12px clamp(20px,4.5vw,48px); font-size:16px; }
  html:not(.js) .menu-toggle{ display:none; }
  html:not(.js) .header-inner{ flex-wrap:wrap; height:auto; padding-block:12px; row-gap:6px; }
  html:not(.js) .site-nav{ order:3; width:100%; margin-left:0; gap:20px; flex-wrap:wrap; }
  .site-nav a.active{ text-decoration:none; }
  .site-nav .n{ display:inline; font-family:'IBM Plex Mono',monospace; font-size:11px;
    color:var(--accent-ink); margin-right:14px; letter-spacing:.08em; }
  .grid{ display:block; }
  .sec-marker{ margin-bottom:28px; }
  .m-note{ display:none; }
  .two-col{ grid-template-columns:1fr; }
  /* Timeline swipes sideways on narrow screens; the next lane peeks in */
  .rm-lanes{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:84%;
    overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--ex-pad)); padding-inline:var(--ex-pad); scroll-padding-inline:var(--ex-pad);
    scrollbar-width:none; }
  .rm-lanes::-webkit-scrollbar{ display:none; }
  .rm-lane{ scroll-snap-align:start; }
  .trail{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .trail .trail-out{ grid-column:1/-1; }
  .steps-4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .steps-4 li:nth-child(3){ border-left:0; padding-left:0; }
  .doc-strip{ gap:12px; }
}
@media (max-width:640px){
  /* Tighter rhythm between sections on phones */
  .section{ padding-block:44px 52px; }
  .page-head{ padding-top:40px; }
  .page-rule{ margin-top:32px; }
  /* Retainer comparison stays a real table: three narrow columns read faster than stacked cards */
  .table-wrap:has(.versus){ overflow:visible; }
  table.plan.versus{ display:table; }
  table.plan.versus caption{ display:table-caption; }
  table.plan.versus thead{ display:table-header-group; }
  table.plan.versus tbody{ display:table-row-group; }
  table.plan.versus tr{ display:table-row; border:0; margin:0; }
  table.plan.versus th{ display:table-cell; padding:0 10px 10px 0; font-size:10px; letter-spacing:.1em; }
  table.plan.versus td, table.plan.versus td:first-child, table.plan.versus td:last-child{ display:table-cell; width:auto;
    padding:12px 10px 12px 0; border-bottom:1px solid var(--lines); font-size:14px; line-height:1.45; }
  table.plan.versus td:first-child{ font-size:10.5px; padding-top:14px; }
  table.plan.versus td[data-label]::before{ content:none; }
  .header-cta{ display:none; }
  .menu-toggle{ margin-left:auto; } /* the hidden CTA no longer pushes it right */
  .f-fix{ grid-template-columns:1fr; row-gap:6px; }
  .stats{ grid-template-columns:1fr; }
  .steps li, .steps-4 li:nth-child(3){ border-left:0; padding:14px 12px 0 0; }
  .entry-head{ grid-template-columns:minmax(0,1fr) 24px; }
  .entry-title{ grid-column:1; }
  .entry-x{ grid-column:2; }
  .entry-meta{ grid-column:1 / -1; order:3; margin-top:6px; padding-top:0; white-space:normal; }
  .brand-mark{ letter-spacing:.14em; }
  /* Phase table stacks as cards; no horizontal scroll */
  .table-wrap{ overflow:visible; }
  table.plan{ min-width:0; } /* must match the base rule's specificity */
  .plan thead{ display:none; }
  .plan, .plan tbody, .plan tr, .plan td{ display:block; width:100%; }
  .plan caption{ display:block; padding-bottom:12px; }
  .plan tr{ border:1px solid var(--lines); margin-bottom:14px; }
  .plan tr:last-child{ margin-bottom:0; }
  .plan td{ border-bottom:0; padding:4px 18px 12px; }
  .plan td:first-child{ padding:14px 18px 12px; border-bottom:1px solid var(--lines); }
  .plan td[data-label]::before{ content:attr(data-label); display:block;
    font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500;
    letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
  .plan td:last-child{ padding-bottom:16px; }
}
@media (max-width:480px){
  .doc-date{ display:none; } /* keep the strip on one line */
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

/* ============ Marathon home (promoted from the design lab) ============ */
.sig-o{ position:relative; display:inline-block; animation:sig-flicker 9s linear infinite; }
.sig-o::after{ content:""; position:absolute; top:-.02em; left:50%; width:.07em; height:.16em;
  background:var(--accent); transform:translateX(-50%) rotate(16deg); }
.sig-surge .sig-o{ animation:sig-blink .4s linear 2; }
@keyframes sig-flicker{
  0%,41.9%{ opacity:1 } 42%,42.5%{ opacity:.25 } 42.6%,43.3%{ opacity:1 } 43.4%,43.7%{ opacity:.5 }
  43.8%,78.9%{ opacity:1 } 79%,79.6%{ opacity:.15 } 79.7%,100%{ opacity:1 } }
@keyframes sig-blink{ 0%,100%{ opacity:1 } 50%{ opacity:.2 } }

.mar-hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--lines);
  padding-block:clamp(40px,7vh,84px) clamp(32px,5vh,64px); }
.tension-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.mar-hero .container{ position:relative; }
.mar-marks i{ position:absolute; width:17px; height:17px; }
.mar-marks i::before, .mar-marks i::after{ content:""; position:absolute; background:var(--muted); }
.mar-marks i::before{ left:8px; top:0; width:1px; height:17px; }
.mar-marks i::after{ left:0; top:8px; width:17px; height:1px; }
.mar-marks i:nth-child(1){ top:14px; left:14px; }
.mar-marks i:nth-child(2){ top:14px; right:14px; }
.mar-marks i:nth-child(3){ bottom:14px; left:14px; }
.mar-marks i:nth-child(4){ bottom:14px; right:14px; }
.mar-spec{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.18em; color:var(--muted); }
.mar-mark{ margin-top:clamp(20px,4vh,40px); font-family:'Space Grotesk','IBM Plex Sans',sans-serif;
  font-weight:700; font-size:clamp(72px,14.5vw,196px); line-height:.94; letter-spacing:-.025em; color:var(--text); }
.mar-title{ margin-top:clamp(22px,4vh,40px); font-family:'Space Grotesk','IBM Plex Sans',sans-serif;
  font-size:clamp(26px,3.4vw,44px); font-weight:500; letter-spacing:-.02em; line-height:1.08;
  max-width:22ch; text-wrap:balance; }

.mar-slab{ background:var(--field); color:var(--field-ink); }
.mar-slab-inner{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px 48px;
  flex-wrap:wrap; padding-block:clamp(36px,6vh,64px); }
.mar-slab-text{ font-size:clamp(19px,2vw,24px); font-weight:500; line-height:1.45; max-width:44ch;
  letter-spacing:-.012em; }
.mar-actions{ display:flex; align-items:center; gap:14px 28px; flex-wrap:wrap; }
.btn-mar{ background:var(--field-ink); border-color:var(--field-ink); color:var(--field); }
.btn-mar:hover{ background:transparent; color:var(--field-ink); }
.mar-more{ font-size:16px; color:var(--text); text-decoration:underline; text-underline-offset:5px;
  text-decoration-thickness:1px; }
.mar-more:hover{ color:var(--accent-ink); }
.mar-more-slab{ color:var(--field-ink); }
.mar-more-slab:hover{ color:var(--field-muted); }

.mar-chevrons{ height:10px; border-bottom:1px solid var(--lines);
  background:repeating-linear-gradient(135deg, var(--field) 0 14px, transparent 14px 28px); }

.mar-principles{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,4vw,56px);
  padding-block:clamp(56px,8vw,88px) clamp(48px,7vw,72px); }
.mpr{ border-top:2px solid var(--text); padding-top:18px; }
.mpr-code{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:500;
  letter-spacing:.14em; color:var(--accent-ink); margin-bottom:10px; }
.mpr h2{ font-family:'Space Grotesk','IBM Plex Sans',sans-serif; font-size:21px; font-weight:700;
  letter-spacing:-.012em; }
.mpr p{ margin-top:12px; font-size:15.5px; line-height:1.65; color:var(--muted); max-width:40ch; }

.mar-now{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,4vw,56px); border-top:1px solid var(--lines);
  padding-block:clamp(32px,5vw,48px) clamp(56px,8vw,88px); }
.now-label{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text); margin-bottom:8px; }
.mar-now p{ font-size:15.5px; line-height:1.6; color:var(--muted); max-width:40ch; }
.mar-now .mar-more{ font-size:15.5px; }
.mar-barcode{ position:absolute; right:0; bottom:clamp(20px,3vw,32px); width:120px; height:26px; opacity:.75;
  background:repeating-linear-gradient(90deg,
    var(--muted) 0 2px, transparent 2px 5px, var(--muted) 5px 6px, transparent 6px 11px,
    var(--muted) 11px 14px, transparent 14px 17px, var(--muted) 17px 18px, transparent 18px 24px); }

@media (max-width:880px){
  .mar-principles, .mar-now{ grid-template-columns:1fr; row-gap:28px; }
  .mar-slab-inner{ align-items:flex-start; flex-direction:column; }
  .mar-barcode{ position:static; margin-top:8px; }
}