/* Cerenovus — new site. Register: catalogue, deixis-free. Design: "the reading room" —
 * bond paper, graphite ink, silver rules, one indigo accent; Newsreader display, IBM Plex text.
 * Signature: the swarm sweep in the hero (many threads reading in parallel into one ranked list). */

@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/newsreader-latin-opsz-normal.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/newsreader-latin-opsz-italic.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; 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-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-weight: 600; font-display: swap; src: url('/assets/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; 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-weight: 500; font-display: swap; src: url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

:root {
  --paper: #f6f5f1; --chalk: #ffffff; --steel: #e9ecee; --steel-2: #f0f2f3;
  --ink: #17191d; --ink-2: #2a2e34; --slate: #5f6975; --silver: #a7b0b8;
  --rule: #dcdfe2; --rule-strong: #c3c9ce; --accent: #24304a; --accent-soft: #e4e8ef;
  --serif: 'Newsreader', Georgia, 'Iowan Old Style', serif;
  --sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shell: 73.75rem;
}
* { box-sizing: border-box; }
/* Grow the layout on wide displays; text and SVGs render at native resolution. */
html { font-size: clamp(100%, 1.111111vw, 250%); background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; font: 1rem/1.6 var(--sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
h1, h2, h3, .serif { font-family: var(--serif); font-optical-sizing: auto; font-weight: 500; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
.shell { width: min(100% - 3rem, var(--shell)); margin: 0 auto; }
.k { font: 500 0.71875rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); }
.k::before { content: ''; display: inline-block; width: 1.375rem; height: 1px; background: var(--silver); vertical-align: middle; margin-right: 0.625rem; }
.k.bare::before { display: none; }
.lede { font-size: 1.09375rem; line-height: 1.6; color: var(--slate); max-width: 58ch; }
.btn { display: inline-flex; align-items: center; gap: 0.625rem; min-height: 3rem; padding: 0 1.5rem; border-radius: 0.1875rem; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 500 0.9375rem/1 var(--sans); transition: background 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 0.75rem 1.75rem -1.125rem rgba(23, 25, 29, 0.6); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--steel); border-color: var(--ink); color: var(--ink); box-shadow: none; }
.tl { font-weight: 500; color: var(--ink); background: linear-gradient(var(--silver), var(--silver)) no-repeat 0 100% / 100% 1px; padding-bottom: 0.1875rem; transition: background-size 0.3s var(--ease); }
.tl:hover { background-size: 100% 0.125rem; background-image: linear-gradient(var(--accent), var(--accent)); }
:is(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 0.125rem solid var(--accent); outline-offset: 0.1875rem; }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 4.125rem; display: flex; align-items: center; background: rgba(246, 245, 241, 0.86); backdrop-filter: blur(0.875rem) saturate(140%); -webkit-backdrop-filter: blur(0.875rem) saturate(140%); border-bottom: 1px solid var(--rule); }
.nav .shell { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6875rem; font: 500 1.4375rem/1 var(--serif); letter-spacing: -0.012em; }
.brand img { width: 1.625rem; height: 1.625rem; filter: brightness(0) saturate(0); }
.nav .brand { min-height: 2.5rem; }
.nav .brand img { display: block; flex: none; }
/* Newsreader sits high in its line box; optically center the wordmark with the icon and navigation. */
.nav .brand-wordmark { display: block; transform: translateY(0.1em); }
.nav-links { display: flex; align-items: center; gap: 0.375rem; }
.nav-links > a, .nav-links > .dd > button { position: relative; display: inline-flex; align-items: center; gap: 0.375rem; height: 2.5rem; padding: 0 0.75rem; border: 0; background: transparent; color: var(--ink); font: 500 0.90625rem/1 var(--sans); cursor: pointer; border-radius: 0.1875rem; transition: background 0.3s var(--ease); }
.nav-links > a:hover, .nav-links > .dd > button:hover, .dd.is-open > button { background: var(--steel); }
.nav-links > a[aria-current='page'] { color: var(--accent); }
.dd > button svg { width: 0.75rem; height: 0.75rem; transition: transform 0.3s var(--ease); }
.dd.is-open > button svg { transform: rotate(180deg); }
.nav-links > a.btn.cta { min-height: 2.5rem; padding: 0 1rem; font-size: 0.875rem; margin-left: 0.625rem; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); }
.nav-links > a.btn.cta:hover { background: var(--accent); border-color: var(--accent); }
.progress { position: absolute; left: 0; bottom: -1px; height: 0.125rem; width: 0; background: var(--accent); transition: width 0.15s linear; }
.panel { position: absolute; top: calc(100% + 0.625rem); left: 50%; transform: translateX(-50%) translateY(-0.375rem); width: min(67.5rem, calc(100vw - 3rem)); background: var(--chalk); border: 1px solid var(--rule); border-radius: 0.375rem; box-shadow: 0 1.875rem 4.375rem -1.875rem rgba(23, 25, 29, 0.35); padding: 1.625rem 1.875rem 1.75rem; display: grid; grid-template-columns: 18.75rem 1fr; gap: 0 3rem; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.35s var(--ease); }
.dd.is-open .panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.panel-intro { border-right: 1px solid var(--rule); padding-right: 1.875rem; display: grid; gap: 0.625rem; align-content: start; }
.panel-intro h2 { font-size: 1.45rem; line-height: 1.22; max-width: 16ch; }
.dd-cap .panel { width: min(47.5rem, calc(100vw - 3rem)); left: 50%; transform: translateX(-62%) translateY(-0.375rem); }
.dd-cap.is-open .panel { transform: translateX(-62%) translateY(0); }
.panel-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); gap: 0 2.5rem; align-items: start; }
.panel-group h3 { font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); margin: 0.25rem 0 0.625rem; }
.panel-group h3 a:hover { color: var(--ink); }
.panel-group a.row { position: relative; display: block; padding: 0.5625rem 0.75rem; margin: 0 -0.75rem; border-radius: 0.1875rem; font: 500 1.05rem/1.3 var(--serif); letter-spacing: -0.005em; transition: background 0.35s var(--ease), transform 0.35s var(--ease); }
.panel-group a.row::before { content: ''; position: absolute; left: 0; top: 0.5rem; bottom: 0.5rem; width: 0.125rem; background: var(--accent); transform: scaleY(0); transition: transform 0.35s var(--ease); }
.panel-group a.row:hover { background: var(--steel-2); transform: translateX(0.375rem); }
.panel-group a.row:hover::before { transform: scaleY(1); }
.burger { display: none; width: 2.5rem; height: 2.5rem; border: 1px solid var(--rule-strong); border-radius: 0.1875rem; background: transparent; color: var(--ink); }
.mobile { display: none; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .burger { display: inline-flex; align-items: center; justify-content: center; }
  .mobile.is-open { display: grid; position: fixed; inset: 4.125rem 0 auto 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 1rem 1.5rem 1.5rem; gap: 0.25rem; z-index: 59; }
  .mobile a { padding: 0.625rem 0; font: 500 1.0625rem/1.3 var(--serif); border-bottom: 1px solid var(--rule); }
  .mobile .k { margin-top: 0.75rem; }
}

/* ── Page rhythm ────────────────────────────────────────────────────────── */
main { padding-top: 4.125rem; }
.sec { padding: clamp(4rem, 7vw, 6.5rem) 0; }
.sec.tint { background: var(--steel-2); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: 2.75rem; }
.head h2 { font-size: clamp(2rem, 3.3vw, 2.9rem); line-height: 1.06; max-width: 20ch; text-wrap: balance; margin-top: 0.75rem; }
.rule-top { border-top: 1px solid var(--ink); }
.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity 0.9s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-d='1'] { transition-delay: 0.08s; } .reveal[data-d='2'] { transition-delay: 0.16s; } .reveal[data-d='3'] { transition-delay: 0.24s; } .reveal[data-d='4'] { transition-delay: 0.32s; } .reveal[data-d='5'] { transition-delay: 0.4s; }
@keyframes page-in { from { opacity: 0; transform: translateY(0.625rem); } to { opacity: 1; transform: none; } }
main { animation: page-in 0.6s var(--ease) both; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(5.5rem, 9vw, 7.5rem) 0 clamp(3rem, 5vw, 4rem); overflow: hidden; }
.hero::before { content: ''; position: absolute; right: -18vw; top: -45vh; width: 64vw; height: 100vh; opacity: 0.75; pointer-events: none; background: radial-gradient(closest-side, var(--steel) 0%, rgba(233, 236, 238, 0.5) 45%, transparent 100%); }
.hero .shell { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(22.5rem, 0.95fr); gap: 2.5rem 3.5rem; align-items: center; }
.hero .for { font: 500 0.875rem/1.5 var(--sans); color: var(--slate); max-width: 40ch; margin-bottom: 1.125rem; }
.hero h1 .by { display: block; font: 400 clamp(1.05rem, 1.4vw, 1.3rem)/1.2 var(--serif); font-style: italic; letter-spacing: 0; color: var(--slate); margin-top: 0.75rem; }
.hero h1 { font-weight: 400; font-size: clamp(3rem, 6.2vw, 5.6rem); line-height: 0.94; letter-spacing: -0.03em; text-wrap: balance; }
.hero .sub { margin-top: 1.125rem; font: 500 0.9375rem/1.5 var(--sans); color: var(--slate); max-width: 44ch; }
.hero .lede { margin-top: 1.25rem; max-width: 46ch; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 0.875rem 1.375rem; align-items: center; margin-top: 1.875rem; }
.hero .copy > * { opacity: 0; transform: translateY(1.125rem); transition: opacity 0.8s var(--ease), transform 0.9s var(--ease); }
.hero.ready .copy > * { opacity: 1; transform: none; }
.hero.ready .copy > *:nth-child(2) { transition-delay: 0.1s; } .hero.ready .copy > *:nth-child(3) { transition-delay: 0.2s; } .hero.ready .copy > *:nth-child(4) { transition-delay: 0.3s; } .hero.ready .copy > *:nth-child(5) { transition-delay: 0.4s; }

/* the swarm sweep */
.swarm { position: relative; aspect-ratio: 640 / 440; width: 100%; opacity: 0; transition: opacity 1s var(--ease) 0.3s; }
.hero.ready .swarm { opacity: 1; }
.swarm svg { width: 100%; height: 100%; overflow: visible; }
.swarm .src { font: 500 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--slate); }
.swarm .thread { fill: none; stroke: var(--silver); stroke-width: 1; stroke-linecap: round; opacity: 0.85; stroke-dasharray: 900; stroke-dashoffset: 900; }
.swarm.run .thread { animation: draw 4.6s var(--ease) forwards; animation-delay: var(--d); }
.swarm.settled .thread { stroke-dashoffset: 0; animation: none; }
.swarm .thread.hot { stroke: var(--accent); stroke-width: 1.4; opacity: 1; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.swarm .find { opacity: 0; transform: translateX(0.5rem); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.swarm.run .find { opacity: 1; transform: none; }
.swarm .find rect.bar { fill: var(--chalk); stroke: var(--rule); }
.swarm .find text { font: 500 11.5px var(--sans); fill: var(--ink); }
.swarm .find text.n { font: 500 10px var(--mono); fill: var(--slate); }
.swarm .find rect.mag { fill: var(--silver); }
.swarm .find.hot rect.mag { fill: var(--accent); }
.swarm .find.hot rect.bar { stroke: var(--accent); }
.swarm .lab { font: 500 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--slate); }
.swarm .caption { position: absolute; left: 0; bottom: -2.125rem; max-width: 60ch; font: 500 0.65625rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--silver); }
@media (prefers-reduced-motion: reduce) { .swarm .thread { stroke-dashoffset: 0 !important; animation: none !important; } .swarm .find { opacity: 1 !important; transform: none !important; } .reveal, .hero .copy > *, .swarm { opacity: 1 !important; transform: none !important; transition: none !important; } main { animation: none; } }

/* rails */
.rails { border-top: 1px solid var(--ink); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rails > div { padding: 1.375rem 1.5rem 1.625rem 0; border-right: 1px solid var(--rule); margin-right: 1.5rem; }
.rails > div:last-child { border-right: 0; margin-right: 0; }
.rails h3 { font-size: 1.35rem; line-height: 1.15; margin-bottom: 0.5rem; }
.rails p { font-size: 0.9375rem; color: var(--slate); }

/* metrics */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.metrics > div { padding: 1.625rem 1.5rem 1.625rem 0; border-right: 1px solid var(--rule); margin-right: 1.5rem; }
.metrics > div:last-child { border-right: 0; }
.metrics b { display: block; font: 400 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--serif); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.metrics span { display: block; margin-top: 0.625rem; font-size: 0.84375rem; color: var(--slate); line-height: 1.5; }
.fn { margin-top: 1.25rem; font-size: 0.78125rem; color: var(--slate); max-width: 70ch; }

/* register: number | heading | prose */
.reg { border-top: 1px solid var(--ink); }
.reg > div { display: grid; grid-template-columns: 3.5rem minmax(0, 0.9fr) minmax(0, 1.4fr); gap: 0.5rem 2.5rem; align-items: start; padding: 1.5rem 0 1.625rem; border-bottom: 1px solid var(--rule); }
.reg .n { font: 500 0.71875rem var(--mono); letter-spacing: 0.09em; color: var(--silver); padding-top: 0.4375rem; }
.reg h3 { font-size: 1.5rem; line-height: 1.15; }
.reg p { font-size: 1rem; line-height: 1.62; color: var(--ink-2); }
.reg a.row { display: contents; }
.reg a.row h3 { transition: color 0.3s var(--ease); }
.reg a.row:hover h3 { color: var(--accent); }

/* catalogue lists */
.cat { border-top: 1px solid var(--ink); }
.cat a { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.1fr) 1.5rem; gap: 0.5rem 2rem; align-items: baseline; padding: 1.25rem 0 1.375rem; border-bottom: 1px solid var(--rule); transition: transform 0.4s var(--ease); }
.cat a:hover { transform: translateX(0.75rem); }
.cat .n { font: 500 1.15rem/1 var(--serif); color: var(--silver); }
.cat h3 { font-size: 1.45rem; line-height: 1.15; }
.cat p { font-size: 0.9375rem; color: var(--slate); }
.cat .arr { color: var(--silver); font-family: var(--serif); font-size: 1.3rem; transition: transform 0.35s var(--ease), color 0.35s var(--ease); justify-self: end; }
.cat a:hover .arr { transform: translateX(0.375rem); color: var(--accent); }
.cat.sub a { padding-left: 3.5rem; }
.cat.sub a:hover { transform: translateX(0.75rem); }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 4rem; }

/* pipeline (numbered bubbles with arrows) */
.pipe { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 1.75rem; border-top: 1px solid var(--rule); padding-top: 2.25rem; position: relative; }
.pipe > div { position: relative; }
.pipe .bub { width: 2.25rem; height: 2.25rem; border: 1px solid var(--ink); border-radius: 50%; display: grid; place-items: center; font: 500 0.6875rem var(--mono); }
.pipe > div:not(:last-of-type)::after { content: '→'; position: absolute; top: 0.25rem; right: -1.375rem; font-family: var(--serif); font-size: 1.3rem; color: var(--silver); }
.pipe h3 { font-size: 1.3rem; margin: 1.125rem 0 0.5rem; line-height: 1.15; }
.pipe p { font-size: 0.90625rem; color: var(--slate); }
.loop { margin-top: 2.25rem; display: grid; grid-template-columns: 13.75rem 1fr; gap: 1.5rem; align-items: start; padding-top: 1.375rem; border-top: 1px solid var(--rule); }
.loop p { font-size: 0.96875rem; color: var(--ink-2); max-width: 70ch; }

/* controls accordion */
.acc { border-top: 1px solid var(--ink); max-width: 76ch; }
.acc details { border-bottom: 1px solid var(--rule); }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 3rem 1fr 1.5rem; align-items: baseline; gap: 1rem; padding: 1.25rem 0; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary .n { font: 500 0.71875rem var(--mono); letter-spacing: 0.09em; color: var(--silver); }
.acc summary h3 { font-size: 1.4rem; line-height: 1.15; transition: color 0.3s var(--ease); }
.acc summary:hover h3 { color: var(--accent); }
.acc summary .pm { font-family: var(--serif); color: var(--silver); font-size: 1.4rem; line-height: 1; transition: transform 0.35s var(--ease); }
.acc details[open] summary .pm { transform: rotate(45deg); }
.acc .body { padding: 0 0 1.5rem 3rem; display: grid; gap: 0.625rem; }
.acc .body p { font-size: 1rem; line-height: 1.62; color: var(--ink-2); max-width: 66ch; }
.acc .body .kept { font-size: 0.90625rem; color: var(--slate); }
.acc .body .kept b { font-weight: 500; color: var(--slate); }

/* four verbs */
.verbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; border-top: 1px solid var(--ink); }
.verbs > div { padding: 1.375rem 0 0.5rem; }
.verbs h3 { font: 500 0.71875rem var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.625rem; }
.verbs p { font-size: 0.9375rem; color: var(--slate); }

/* questions (pull lines) */
.qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; border-top: 1px solid var(--ink); }
.qs a { display: grid; gap: 0.625rem; padding: 1.625rem 0 1.75rem; border-bottom: 1px solid var(--rule); transition: transform 0.4s var(--ease); }
.qs a:hover { transform: translateX(0.75rem); }
.qs .q { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.2; color: var(--ink); }
.qs .a { font-size: 0.9375rem; color: var(--slate); }
.qs .k { margin-top: 0.25rem; }

/* closing */
.close { background: var(--paper); border-top: 1px solid var(--rule); }
.close .frame { background: var(--chalk); border: 1px solid var(--rule); border-radius: 0.375rem; padding: clamp(2.5rem, 4vw, 3.5rem); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2rem 3.5rem; align-items: center; }
.close h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.04; max-width: 18ch; }
.close .side { border-left: 1px solid var(--rule); padding-left: 2rem; }
.close .side p { color: var(--slate); margin-bottom: 1.375rem; }

/* footer */
footer { background: var(--steel-2); border-top: 1px solid var(--rule); padding: 3.5rem 0 1.75rem; color: var(--ink); }
.fgrid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--rule); }
.fgrid h4 { font: 500 0.71875rem var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); margin: 0 0 0.875rem; }
.fgrid a { display: block; font-size: 0.90625rem; color: var(--slate); padding: 0.25rem 0; transition: color 0.3s ease; }
.fgrid a:hover { color: var(--ink); }
.fgrid .tag { font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; margin: 0.875rem 0 0.75rem; max-width: 26ch; }
.fgrid .about { font-size: 0.875rem; color: var(--slate); max-width: 34ch; }
.fbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; padding-top: 1.125rem; font-size: 0.8125rem; color: var(--slate); }
.fbar a { color: var(--slate); }
.fbar a:hover { color: var(--ink); }

/* inner page header */
.ph { padding: clamp(4.5rem, 7vw, 6rem) 0 clamp(2.5rem, 4vw, 3.5rem); }
.ph .crumb { font: 500 0.71875rem var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); }
.ph h1 { font-weight: 400; font-size: clamp(2.8rem, 5.4vw, 4.6rem); line-height: 0.98; letter-spacing: -0.028em; margin-top: 1.125rem; max-width: 18ch; text-wrap: balance; }
.ph .grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.5rem 4rem; margin-top: 2.125rem; padding-top: 1.75rem; border-top: 1px solid var(--rule); align-items: start; }
.ph .lede { font-size: clamp(1.15rem, 1.5vw, 1.35rem); line-height: 1.5; color: var(--ink); max-width: 44ch; }
.ph .aside .k { margin-bottom: 0.625rem; }
.ph .aside p { font-size: 0.96875rem; color: var(--slate); }
.ph .aside .one { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: 1.35rem; line-height: 1.3; color: var(--ink); }

/* steps */
.steps { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: start; }
.steps h2 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.1; margin-top: 0.75rem; }
.steps .lede { margin-top: 1.125rem; font-size: 1rem; }
.steps ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.steps li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--rule); transition: transform 0.4s var(--ease); }
.steps li:hover { transform: translateX(0.625rem); }
.steps li .n { font: 500 0.71875rem var(--mono); letter-spacing: 0.09em; color: var(--silver); }
.steps li span:last-child { font: 500 1.2rem/1.25 var(--serif); }

/* holds */
.holds { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem 4rem; align-items: start; }
.holds h2 { font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1.1; margin-top: 0.75rem; }
.holds ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.holds li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 1.5rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.holds li .n { font: 500 0.71875rem var(--mono); letter-spacing: 0.09em; color: var(--silver); }
.holds li b { font: 500 1.2rem/1.25 var(--serif); }
.holds li span:last-child { font-size: 0.875rem; color: var(--slate); }
.judg { display: grid; grid-template-columns: 18.75rem 1fr; gap: 1.5rem 3rem; padding: 1.625rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.judg p { font-size: 1.03125rem; color: var(--ink-2); max-width: 70ch; }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.related a { display: grid; grid-template-rows: auto 1fr auto; min-height: 9.375rem; background: var(--chalk); border: 1px solid var(--rule); border-radius: 0.375rem; padding: 1.25rem 1.375rem; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.related a:hover { transform: translateY(-0.1875rem); box-shadow: 0 1.625rem 3.125rem -2rem rgba(23, 25, 29, 0.35); }
.related a b { font: 500 1.3rem/1.2 var(--serif); margin-top: 0.625rem; }
.related a .arr { justify-self: end; font-family: var(--serif); color: var(--silver); font-size: 1.4rem; }

/* faq / prose pages */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.6rem; line-height: 1.2; margin: 2.125rem 0 0.75rem; padding-top: 1.625rem; border-top: 1px solid var(--rule); }
.prose h2:first-of-type { border-top: 1px solid var(--ink); }
.prose p, .prose li { font-size: 1rem; line-height: 1.65; color: var(--ink-2); }
.prose p + p { margin-top: 0.75rem; }
.prose ul { padding-left: 1.2em; margin: 0.75rem 0 0; }
.demo { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.5rem 4rem; align-items: start; }
.demo .cal { background: var(--chalk); border: 1px solid var(--rule); border-radius: 0.375rem; overflow: hidden; min-height: 42.5rem; }
.demo iframe { width: 100%; height: 45rem; border: 0; }
.demo .mail { margin-top: 0.875rem; font-size: 0.875rem; color: var(--slate); }

@media (max-width: 1040px) { .metrics, .verbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pipe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1.75rem; } .pipe > div::after { display: none; } .related { grid-template-columns: 1fr; } }
@media (max-width: 880px) {
  .hero .shell, .head, .two, .steps, .holds, .judg, .close .frame, .ph .grid, .demo, .qs, .loop { grid-template-columns: 1fr; }
  .rails, .metrics { grid-template-columns: 1fr; } .rails > div, .metrics > div { border-right: 0; margin-right: 0; border-bottom: 1px solid var(--rule); }
  .reg > div { grid-template-columns: 3rem 1fr; } .reg p { grid-column: 2; }
  .cat a { grid-template-columns: 3rem 1fr 1.5rem; } .cat p { grid-column: 2; }
  .holds li { grid-template-columns: 3rem 1fr; } .holds li span:last-child { grid-column: 2; }
  .close .side { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
  .fgrid { grid-template-columns: 1fr 1fr; }
  .swarm .caption { position: static; margin-top: 0.625rem; }
}

/* the swarm as a link */
.swarm.is-link { cursor: pointer; border-radius: 0.375rem; transition: transform 0.4s var(--ease); }
.swarm.is-link:hover { transform: translateY(-0.125rem); }
.swarm.is-link.hovering .thread:not(.near) { opacity: 0.35; stroke: var(--silver); stroke-width: 1; }
.swarm.is-link.hovering .find.hot:not(.near) rect.bar { stroke: var(--rule); }
.swarm.is-link.hovering .find.hot:not(.near) rect.mag { fill: var(--silver); }
.swarm .thread.near { stroke: var(--accent); stroke-width: 1.6; opacity: 1; }
.swarm .find.near rect.bar { stroke: var(--accent); }
.swarm .find.near rect.mag { fill: var(--accent); }
.swarm.is-link .caption { color: var(--accent); }
.swarm.is-link:focus-visible { outline: 0.125rem solid var(--accent); outline-offset: 0.5rem; }
.swarm.is-link:hover .caption, .swarm.is-link:focus-visible .caption { text-decoration: underline; text-underline-offset: 0.25rem; }
.swarm .caption:empty::after { content: ''; }
#who-we-serve { scroll-margin-top: 5.375rem; }

/* ── page motifs (one per team, group, capability, directory) ───────────── */
.motif { margin: 0 0 1.375rem; }
.motif svg { width: 100%; height: auto; overflow: visible; display: block; }
.motif figcaption { margin-top: 0.75rem; font: 500 0.65625rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--silver); max-width: 52ch; line-height: 1.5; }
.motif .lab { font: 500 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; fill: var(--slate); }
.motif .src { font: 500 10.5px var(--mono); letter-spacing: 0.06em; fill: var(--slate); }
.motif .txt { font: 500 12px var(--sans); fill: var(--ink); }
.motif .n { font: 500 10px var(--mono); fill: var(--slate); }
.motif .big { font: 400 26px var(--serif); fill: var(--ink); }
.motif .hotxt { fill: var(--accent); }
.motif .box { fill: var(--chalk); stroke: var(--rule); stroke-width: 1; }
.motif .box.hot { stroke: var(--accent); }
.motif .box.q { fill: var(--paper); stroke: var(--ink); }
.motif .scope { fill: none; stroke: var(--rule-strong); stroke-dasharray: 4 4; }
.motif .ring { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.motif .ring.hot { stroke: var(--accent); }
.motif .bar { fill: var(--steel); stroke: var(--rule); }
.motif .bar.hot { fill: var(--accent-soft); stroke: var(--accent); }
.motif .meter { fill: var(--chalk); stroke: var(--rule); }
.motif .meterfill { fill: var(--silver); }
.motif .hotline { stroke: var(--accent); stroke-width: 1.4; }
.motif .pipe { fill: none; stroke: var(--ink); stroke-width: 1; }
.motif .tick { fill: var(--silver); }
.motif .dot { fill: var(--silver); }
.motif .dot.hot { fill: var(--accent); }
.motif .mk { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.motif .mk.hot { stroke: var(--accent); }
.motif .mk.open { stroke: var(--silver); }
.motif .thread { fill: none; stroke: var(--silver); stroke-width: 1; stroke-linecap: round; opacity: 0.9; }
.motif .thread.hot { stroke: var(--accent); stroke-width: 1.4; opacity: 1; }
.motif .thread.dashed { stroke-dasharray: 4 4 !important; stroke-dashoffset: 0; }
.reveal.in .motif .thread { animation: draw 2.6s var(--ease) forwards; animation-delay: var(--d); }
.reveal.in .motif .thread.dashed { animation: none; }
.motif .box, .motif .bar, .motif .mk, .motif .dot, .motif .ring, .motif .txt, .motif .src, .motif .n, .motif .big, .motif .tick { opacity: 0; transition: opacity 0.9s var(--ease) 0.5s; }
.reveal.in .motif .box, .reveal.in .motif .bar, .reveal.in .motif .mk, .reveal.in .motif .dot, .reveal.in .motif .ring, .reveal.in .motif .txt, .reveal.in .motif .src, .reveal.in .motif .n, .reveal.in .motif .big, .reveal.in .motif .tick { opacity: 1; }
.ph .aside .motif { margin-top: 0.25rem; }
@media (prefers-reduced-motion: reduce) { .motif .thread { stroke-dashoffset: 0 !important; animation: none !important; } .motif * { opacity: 1 !important; transition: none !important; } }
@media (max-width: 880px) { .ph .aside .motif { max-width: 32.5rem; } }

/* ── motif v2: page-specific forms (paper, bridge, dashboard, tree, table, curve, gantt, sheet, funnel, waterfall, roadmap, shelf) ── */
.motif .paper { fill: var(--chalk); stroke: var(--rule); }
.motif .paperhead { fill: var(--ink); }
.motif .h { font: 500 15px var(--serif); fill: var(--ink); }
.motif .cite { font: 500 9.5px var(--mono); fill: var(--slate); }
.motif .card { fill: var(--chalk); stroke: var(--rule); }
.motif .card.hot { stroke: var(--accent); }
.motif .card.open { fill: var(--paper); stroke: var(--rule-strong); }
.motif .mag { fill: var(--silver); }
.motif .mag.hot { fill: var(--accent); }
.motif .src2 { font: 400 10px var(--mono); fill: var(--silver); }
.motif .num { font: 500 11px var(--mono); fill: var(--ink); }
.motif .kpi { font: 400 20px var(--serif); fill: var(--ink); }
.motif .spark { fill: none; stroke: var(--silver); stroke-width: 1; }
.motif .rule { stroke: var(--rule); stroke-width: 1; }
.motif .axis { stroke: var(--ink); stroke-width: 1; }
.motif .grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }
.motif .conn { stroke: var(--rule-strong); stroke-width: 1; }
.motif .barfill { fill: var(--steel); stroke: var(--rule-strong); }
.motif .barfill.plan { fill: var(--accent-soft); stroke: var(--accent); }
.motif .curve { fill: none; stroke-width: 1.2; }
.motif .curve.plan { stroke: var(--silver); }
.motif .curve.hot { stroke: var(--accent); stroke-width: 1.6; }
.reveal.in .motif .curve { animation: draw 2.4s var(--ease) forwards; animation-delay: var(--d); }
.motif .cell { fill: var(--chalk); stroke: var(--rule); }
.motif .cell.head { fill: var(--steel-2); }
.motif .cell.hot { fill: var(--accent-soft); stroke: var(--accent); }
.motif .row { fill: var(--chalk); stroke: var(--rule); }
.motif .row.hot { stroke: var(--accent); }
.motif .funnel { fill: var(--chalk); stroke: var(--rule-strong); }
.motif .funnel.hot { fill: var(--accent-soft); stroke: var(--accent); }
.motif .folder { fill: var(--steel); stroke: var(--rule-strong); stroke-width: 0.8; }
.motif .zoom { fill: none; stroke: var(--accent); stroke-width: 1.2; rx: 3; }
.motif .dep { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; }
.motif .flag { fill: var(--accent); }
.motif .table { fill: var(--chalk); stroke: var(--ink); stroke-width: 1; }
.motif .table.inner { fill: var(--paper); stroke: var(--rule-strong); }
.motif .seat { fill: var(--steel); stroke: var(--rule-strong); }
.motif .seat.hot { fill: var(--accent-soft); stroke: var(--accent); }
.motif .shelf { stroke: var(--ink); stroke-width: 1.4; }
.motif .spine { fill: var(--chalk); stroke: var(--rule-strong); }
.motif .spine.hot { stroke: var(--accent); fill: var(--accent-soft); }
.motif .spinetxt { font: 500 11px var(--sans); fill: var(--ink); }
.motif .paper, .motif .paperhead, .motif .card, .motif .cell, .motif .row, .motif .funnel, .motif .folder, .motif .zoom, .motif .flag, .motif .table, .motif .seat, .motif .spine, .motif .spinetxt, .motif .barfill, .motif .cite, .motif .h, .motif .kpi, .motif .num, .motif .src2, .motif .spark, .motif .mag, .motif .dep, .motif .rule, .motif .axis, .motif .grid, .motif .conn, .motif .shelf { opacity: 0; transition: opacity 0.9s var(--ease) 0.35s; }
.reveal.in .motif .paper, .reveal.in .motif .paperhead, .reveal.in .motif .card, .reveal.in .motif .cell, .reveal.in .motif .row, .reveal.in .motif .funnel, .reveal.in .motif .folder, .reveal.in .motif .zoom, .reveal.in .motif .flag, .reveal.in .motif .table, .reveal.in .motif .seat, .reveal.in .motif .spine, .reveal.in .motif .spinetxt, .reveal.in .motif .barfill, .reveal.in .motif .cite, .reveal.in .motif .h, .reveal.in .motif .kpi, .reveal.in .motif .num, .reveal.in .motif .src2, .reveal.in .motif .spark, .reveal.in .motif .mag, .reveal.in .motif .dep, .reveal.in .motif .rule, .reveal.in .motif .axis, .reveal.in .motif .grid, .reveal.in .motif .conn, .reveal.in .motif .shelf { opacity: 1; }

/* ── motif v3: animated, SMIL-driven ── */
.motif.anim .agent { fill: var(--accent); }
.motif.anim .agent.faint { fill: var(--silver); }
.motif.anim .flow { fill: var(--silver); }
.motif.anim .flow.leak { fill: var(--accent); }
.motif.anim .person { fill: var(--steel); stroke: var(--ink); stroke-width: 1; }
.motif.anim .doc { fill: var(--chalk); stroke: var(--rule); stroke-width: 0.8; }
.motif.anim .doc.read { fill: var(--accent-soft); stroke: var(--accent); }
.motif.anim .doc.faint { fill: var(--paper); stroke: var(--rule); }
.motif.anim .sweep { stroke: var(--accent); stroke-width: 1.4; }
.motif.anim .box.q { fill: var(--paper); stroke: var(--ink); }
.motif.anim .box.lit { fill: var(--accent-soft); stroke: var(--accent); }
.motif.anim .cell.scan { fill: var(--accent-soft); stroke: var(--accent); }
.motif.anim .cell.lit { fill: var(--chalk); stroke: var(--rule-strong); }
.motif.anim .ring { stroke: var(--accent); stroke-width: 1; fill: none !important; }
.motif.anim .flow.leak { r: 2.6px; }
.motif.anim .thread.faint { stroke: var(--rule); }
/* v3 animates itself: neutralise the v1/v2 reveal-driven opacity rules */
.motif.anim .box, .motif.anim .bar, .motif.anim .mk, .motif.anim .dot, .motif.anim .ring, .motif.anim .txt, .motif.anim .src, .motif.anim .n, .motif.anim .big, .motif.anim .tick,
.motif.anim .paper, .motif.anim .paperhead, .motif.anim .card, .motif.anim .cell, .motif.anim .row, .motif.anim .funnel, .motif.anim .folder, .motif.anim .zoom, .motif.anim .flag, .motif.anim .table, .motif.anim .seat, .motif.anim .spine, .motif.anim .spinetxt, .motif.anim .barfill, .motif.anim .cite, .motif.anim .h, .motif.anim .kpi, .motif.anim .num, .motif.anim .src2, .motif.anim .spark, .motif.anim .mag, .motif.anim .dep, .motif.anim .rule, .motif.anim .axis, .motif.anim .grid, .motif.anim .conn, .motif.anim .shelf { opacity: 1; transition: none; }
.motif.anim .thread, .motif.anim .curve { animation: none !important; }

/* ── v4: colour, layouts, larger motifs, faster motion ─────────────────────── */
:root { --gold: #b8862b; --gold-soft: #f3e7cf; }
.motif.anim .gold, .motif.anim .dot.gold, .motif.anim .agent.gold { fill: var(--gold); }
.motif.anim .goldtxt { fill: var(--gold); }
.motif.anim .ring { stroke: var(--accent); stroke-width: 1.2; fill: none !important; }
.motif.anim .ring.gold { stroke: var(--gold); }
.motif.anim .ring2 { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.motif.anim .curve.gold { stroke: var(--gold); stroke-width: 1.8; fill: none; }
.motif.anim .area { fill: var(--accent-soft); stroke: none; opacity: 0.9; }
.motif.anim .area.gold { fill: var(--gold-soft); }
.motif.anim .bar.gold { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .mag.gold { fill: var(--gold); }
.motif.anim .doc.flag { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .scope.out { stroke: var(--rule); }
.motif.anim .orbitpath { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.motif.anim .chip { fill: var(--chalk); stroke: var(--rule-strong); }
.motif.anim .chip.gold { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .funnel { stroke: var(--rule-strong); }
.motif.anim .funnel.f1 { fill: var(--chalk); } .motif.anim .funnel.f2 { fill: var(--steel-2); } .motif.anim .funnel.f3 { fill: var(--accent-soft); } .motif.anim .funnel.f4 { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .cell.lit { fill: var(--steel-2); stroke: var(--rule-strong); }
.motif.anim .txt { font-size: 12.5px; }
.motif figcaption { font-size: 0.6875rem; color: var(--slate); }

/* page-header compositions: the motif is the centrepiece and varies by page */
.ph .grid.has-motif { display: grid; gap: 1.75rem 3.5rem; align-items: start; }
.ph .grid.has-motif.layout-right { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr); }
.ph .grid.has-motif.layout-left { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr); }
.ph .grid.has-motif.layout-left .ph-text { order: 2; }
.ph .grid.has-motif.layout-wide { grid-template-columns: 1fr; }
.ph .grid.has-motif.layout-wide .ph-text { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.5rem 4rem; }
.ph .grid.has-motif .ph-text .aside { margin-top: 1.375rem; padding-top: 1.125rem; border-top: 1px solid var(--rule); }
.ph .grid.has-motif.layout-wide .ph-text .aside { margin-top: 0; padding-top: 0; border-top: 0; }
.ph .grid.has-motif .motif { margin: 0; }
.ph .grid.has-motif .motif svg { width: 100%; height: auto; }
.ph .grid.has-motif.layout-wide .motif { max-width: 61.25rem; margin: 0 auto; }
.ph .grid.has-motif.layout-wide .motif svg { max-height: 37.5rem; }
/* type inside a motif shrinks as the canvas grows, so labels stay label-sized */
.motif.layout-wide .lab { font-size: 7px; } .motif.layout-wide .txt { font-size: 8.5px; } .motif.layout-wide .src { font-size: 7.5px; } .motif.layout-wide .src2 { font-size: 7px; }
.motif.layout-left .lab, .motif.layout-right .lab { font-size: 8.5px; } .motif.layout-left .txt, .motif.layout-right .txt { font-size: 10.5px; } .motif.layout-left .src, .motif.layout-right .src { font-size: 9px; } .motif.layout-left .src2, .motif.layout-right .src2 { font-size: 8.5px; }
.ph .grid.has-motif .motif figcaption { margin-top: 0.875rem; }
@media (max-width: 880px) { .ph .grid.has-motif.layout-right, .ph .grid.has-motif.layout-left, .ph .grid.has-motif.layout-wide .ph-text { grid-template-columns: 1fr; } .ph .grid.has-motif.layout-left .ph-text { order: 0; } }

/* ── v5: function colours, hover-to-gold, cleaner motion ─────────────────────── */
:root { --teal: #3f8f8a; --teal-soft: #dff0ee; --plum: #7a5c8e; --plum-soft: #ebe3f1; --moss: #6f8f3f; --moss-soft: #e7eedc; }
.motif.anim .doc.read.c1 { fill: var(--accent-soft); stroke: var(--accent); }
.motif.anim .doc.read.c2 { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .doc.read.c3 { fill: var(--teal-soft); stroke: var(--teal); }
.motif.anim .doc.read.c4 { fill: var(--plum-soft); stroke: var(--plum); }
.motif.anim .doc.read.c5 { fill: var(--moss-soft); stroke: var(--moss); }
.motif.anim .doc.glow.g1 { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .doc.glow.g2 { fill: var(--accent-soft); stroke: var(--accent); }
.motif.anim .doc.glow.g3 { fill: var(--teal-soft); stroke: var(--teal); }
.motif.anim .flag-hidden { display: none; }
.motif.anim .funnel:hover, .motif.anim .chip:hover { fill: var(--gold-soft); stroke: var(--gold); cursor: default; }
.motif.anim .funnel:hover + text, .motif.anim .chip:hover + text { fill: var(--gold); }
.motif.anim .curve.plan { stroke: var(--silver); stroke-width: 1.4; }
.motif.anim .lane { fill: none; stroke: var(--rule-strong); stroke-width: 1; }
.motif.anim .lane.gold { stroke: var(--gold); }
.motif.anim .station { fill: var(--chalk); stroke: var(--rule-strong); }
.motif.anim .station.hot { stroke: var(--accent); fill: var(--accent-soft); }
.motif.anim .station.gold { stroke: var(--gold); fill: var(--gold-soft); }
.motif.anim .work { fill: var(--slate); }
.motif.anim .work.gold { fill: var(--gold); }
.motif.anim .dep { stroke: var(--accent); }
.motif.anim .dep.gold { stroke: var(--gold); }
.motif.anim .bar.win { fill: var(--gold-soft); stroke: var(--gold); }
.motif.anim .legend { font: 400 8.5px var(--mono); fill: var(--slate); }

/* Retain the original grid and mini arrows, with the return loop beneath the steps. */
div.pipe.has-flow { padding-bottom: 6.625rem; }
div.pipe .pipe-flow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--accent); }
.pipe-route { fill: none; stroke: none; }
.pipe-route.pipe-return { stroke: var(--accent); stroke-width: 1.5; }
.pipe-dot { fill: var(--slate); }
.pipe-return-dot { fill: var(--accent); }
.pipe-loop-label { font: 500 11px var(--sans); fill: var(--slate); }
@media (prefers-reduced-motion: reduce) { .pipe-dot { display: none; } }

/* Homepage "MRI for Business" line and the due diligence comparison. */
.hero .mri { margin-top: 0.875rem; font: 400 clamp(1.35rem, 1.9vw, 1.75rem)/1.2 var(--serif); font-style: italic; color: var(--accent); }
.compare { --stag: 0.11s; border-top: 1px solid var(--ink); }
.compare .row { display: grid; grid-template-columns: 12.25rem minmax(0, 1fr) minmax(0, 1.3fr); align-items: stretch; }
.compare .row > h3, .compare .row > .was { padding: 1rem 2.25rem 1rem 0; border-bottom: 1px solid var(--rule); }
.compare .headrow > span { padding: 0.875rem 0; font: 500 0.71875rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--slate); }
.compare .headrow > span:last-child { padding-left: 1.5rem; color: var(--accent); }
.compare h3 { font-size: 1.2rem; line-height: 1.25; }
.compare .was { font-size: 0.9375rem; line-height: 1.55; color: var(--slate); transition: color 0.9s var(--ease); transition-delay: calc(var(--i) * var(--stag) + 0.55s); }
.compare .now { position: relative; margin: 0; padding: 1rem 1.5rem; font-size: 1rem; line-height: 1.55; color: var(--ink-2); background: var(--chalk); border-inline: 1px solid var(--rule); border-bottom: 1px solid var(--steel); }
.compare .row:nth-child(2) .now { border-top: 1px solid var(--rule); border-radius: 3px 3px 0 0; }
.compare .row:last-child .now { border-bottom-color: var(--rule); border-radius: 0 0 3px 3px; }
.compare .now::before { content: ''; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform 0.5s var(--ease); transition-delay: calc(var(--i) * var(--stag) + 0.2s); }
.compare .row:not(.headrow) > * { opacity: 0; transform: translateY(0.5rem); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease), color 0.9s var(--ease); transition-delay: calc(var(--i) * var(--stag) + 0.15s); }
.compare .row .now { transform: translateX(-0.5rem); }
.compare.in .row > * { opacity: 1; transform: none; }
.compare.in .now::before { transform: scaleY(1); }
.compare.in .was { color: #7d8792; transition-delay: calc(var(--i) * var(--stag) + 0.15s), calc(var(--i) * var(--stag) + 0.15s), calc(var(--i) * var(--stag) + 0.9s); }
@media (max-width: 880px) { .compare .row { grid-template-columns: 1fr; } .compare .headrow { display: none; } .compare .row > h3 { padding: 1rem 0 0.25rem; border-bottom: 0; font-size: 1.125rem; } .compare .row > .was { padding: 0 0 0.5rem; border-bottom: 0; font-size: 0.875rem; } .compare .row .now, .compare .row:nth-child(2) .now, .compare .row:last-child .now { border: 1px solid var(--rule); border-radius: 3px; padding: 0.75rem 1rem; font-size: 0.9375rem; } .compare .was::before { content: 'Today: '; font-weight: 500; } }
@media (prefers-reduced-motion: reduce) { .compare .row > *, .compare .now::before { opacity: 1 !important; transform: none !important; transition: none !important; } }