/* Base reset (the preview host added these; your site needs them explicitly) */
html, body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
/* Layout: two-column scrollytelling. Each chapter puts its text on the left and its own animated graphic on the right,
   pinned beside that text while the chapter is on screen, so text and graphic can never drift apart. All blue. */
:root {
  color-scheme: dark;
  --bg: #16133b;
  --ink: #eef0ff;
  --muted: #a3a8d6;
  --accent: #8ea2ff;
  --accent-2: #d8deff;
  --rule: #2e2a63;
  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --font-body: "Hanken Grotesk", "Avenir Next", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
html, body { background: var(--bg); color: var(--ink); }
body { font-family: var(--font-body); font-size: 16px; overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.panel-bg { background: color-mix(in srgb, var(--ink) 4%, transparent); }

/* ---------- Per-chapter graphics ---------- */
.viz { --panel: color-mix(in srgb, var(--ink) 7%, var(--bg)); }
.viz text { font-family: var(--font-mono); font-size: 13px; letter-spacing: .05em; fill: var(--muted); }
.viz .pn { fill: var(--panel); stroke: var(--rule); stroke-width: 1.5; }
.viz .ln { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viz .ln.soft { stroke: var(--rule); }
.viz .ln.a2 { stroke: var(--accent-2); }
.viz .ln.mu { stroke: var(--muted); }
.viz .dash { stroke-dasharray: 5 7; }
.viz .fa { fill: var(--accent); } .viz .fa2 { fill: var(--accent-2); } .viz .fr { fill: var(--rule); }
.viz .fm { fill: var(--muted); } .viz .fb { fill: var(--bg); }
.viz text.ink { fill: var(--ink); } .viz text.ac { fill: var(--accent); } .viz text.onac { fill: var(--bg); }
.viz text.big { font-family: var(--font-display); fill: var(--ink); letter-spacing: -.01em; }
.viz text.sm { font-size: 11px; }

/* ---------- Buttons (site header lives in site-chrome.css) ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none; cursor: pointer;
  font: 600 .9rem/1 var(--font-body); padding: 11px 18px; border-radius: 999px;
  background: var(--accent); color: var(--bg); border: 1px solid var(--accent);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 24px -8px var(--accent); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--accent); box-shadow: none; }

/* ---------- Chapters ---------- */
.chapter { padding-block: 26vh 12vh; display: flex; flex-direction: column; gap: 8vh; }
.chapter.hero { padding-top: calc(110px + 10vh); gap: 6vh; }
.chapter.tight { padding-top: 14vh; }
.eyebrow { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin: 0 0 1.1rem; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: .98; }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.03; }
h3 { font-size: 1.3rem; letter-spacing: -.01em; }
h1 em, h2 em { font-style: normal; color: var(--accent); }
.lede { font-size: clamp(1.12rem, 1.8vw, 1.3rem); line-height: 1.6; margin: 1.5rem 0 0; text-wrap: pretty; }
p.body { font-size: clamp(1.06rem, 1.6vw, 1.2rem); line-height: 1.65; margin: 0; text-wrap: pretty; }
.dim { color: var(--muted); }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8rem; }
.fine { margin: 1rem 0 0; font-family: var(--font-mono); font-size: .74rem; letter-spacing: .06em; color: var(--muted); }
.mono-label { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.box { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.box-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 18px; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: .74rem; letter-spacing: .05em; color: var(--muted); }
.box-head strong { color: var(--ink); font-weight: 500; }

/* Hero demo: the 40-second look */
.demo-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.demo-tabs button { font: 500 .8rem/1 var(--font-mono); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--muted); cursor: pointer; }
.demo-tabs button[aria-selected="true"] { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.demo-body { padding: 16px 18px 6px; min-height: 15.5rem; }
.demo-title { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 12px; }
.demo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.demo-steps li { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 10px; align-items: baseline; font-family: var(--font-mono); font-size: .85rem; line-height: 1.5; padding: 4px 0; }
.status { font-size: .68rem; letter-spacing: .1em; color: var(--muted); }
.status.run { color: var(--accent); }
.status.run::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--accent); animation: blink .8s infinite; vertical-align: middle; }
.status.ok { color: var(--accent-2); }
.status.flag { color: var(--ink); }
@keyframes blink { 50% { opacity: .2; } }
.demo-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-top: 1px solid var(--rule); min-height: 3.6rem; }
.pill { font: 700 .8rem/1 var(--font-mono); letter-spacing: .14em; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--accent); }
.pill.PASS { background: var(--accent); color: var(--bg); }
.pill.WARN { background: transparent; color: var(--accent-2); border-style: dashed; }
.pill.BLOCK { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pill.RUNNING { color: var(--muted); border-color: var(--rule); }
.demo-note { font-size: .88rem; color: var(--muted); }
.demo-progress { height: 2px; background: var(--rule); }
.demo-progress i { display: block; height: 100%; width: 0; background: var(--accent); }

/* Studio */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button { font: 500 .82rem/1 var(--font-body); padding: 9px 13px; border-radius: 8px; border: 1px solid var(--rule); background: transparent; color: var(--muted); cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--accent); }
.tab-caption { margin: 14px 0 0; font-size: 1rem; line-height: 1.55; min-height: 3.1em; }
.pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
.pipeline div { padding: 14px 12px 0 0; min-width: 0; position: relative; }
.pipeline div::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.pipeline b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.02rem; }
.pipeline span { display: block; margin-top: 4px; font-size: .84rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 520px) { .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; } }

/* Screenshots from testneo.ai (fall back to a labelled frame when they can't load) */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--rule); }
.shot .ph { display: none; aspect-ratio: 16 / 10; max-width: 100%; border-radius: 12px; border: 1px dashed var(--rule); place-items: center; text-align: center; padding: 24px; font-family: var(--font-mono); font-size: .78rem; line-height: 1.6; color: var(--muted); }
.shot.missing img { display: none; }
.shot.missing .ph { display: grid; }
.shot figcaption { margin-top: 10px; font-size: .86rem; color: var(--muted); }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 24px; border-top: 1px solid var(--rule); padding-top: 22px; }
.stat b { display: block; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 5vw, 3.3rem); line-height: 1; letter-spacing: -.03em; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.stat span { display: block; margin-top: 10px; font-size: .9rem; line-height: 1.45; color: var(--muted); }
.source { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .05em; color: var(--muted); margin-top: 14px; }

/* Sources, ways, lists */
.lines { border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.lines > div { padding: 13px 0; border-bottom: 1px solid var(--rule); min-width: 0; }
.lines b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; }
.lines span { display: block; margin-top: 4px; font-size: .87rem; color: var(--muted); line-height: 1.4; }
.lines.one { grid-template-columns: 1fr; }
@media (max-width: 480px) { .lines { grid-template-columns: 1fr; } }
.step-no { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; color: var(--accent); }

/* Check block */
.check ol { list-style: none; margin: 0; padding: 10px 0; counter-reset: step; }
.check li { counter-increment: step; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); padding: 9px 18px; font-family: var(--font-mono); font-size: .88rem; line-height: 1.5; }
.check li::before { content: counter(step, decimal-leading-zero); color: var(--accent); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); font-family: var(--font-mono); font-size: .74rem; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); transition: background .4s, box-shadow .4s; }
.chip .on { display: none; }
.chip.approved { border-color: var(--accent); color: var(--accent-2); }
.chip.approved::before { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.chip.approved .on { display: inline; } .chip.approved .off { display: none; }
.box-foot { padding: 12px 18px; border-top: 1px solid var(--rule); display: flex; justify-content: flex-end; }

/* Compare */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compare > div { padding: 16px 18px; min-width: 0; }
.compare > div + div { border-left: 1px solid var(--rule); }
.compare ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.compare li { font-size: .95rem; line-height: 1.45; }
.compare .without li { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--rule); }
.compare .with li::before { content: "→ "; color: var(--accent); }
@media (max-width: 480px) { .compare { grid-template-columns: 1fr; } .compare > div + div { border-left: 0; border-top: 1px solid var(--rule); } }

/* Record */
.record .row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 18px; border-bottom: 1px solid var(--rule); font-size: .95rem; }
.record dl { margin: 0; }
.record dt { color: var(--muted); }
.record dd { margin: 0; font-family: var(--font-mono); font-size: .88rem; font-variant-numeric: tabular-nums; text-align: right; }
.record .verdict { padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.record .verdict span { font-size: .9rem; color: var(--muted); }

/* Lanes (integrations) */
.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.lanes h3 { font-family: var(--font-mono); font-weight: 500; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.lanes ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lanes li { font-size: .88rem; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 6px; }

/* Cards (model section) */
.trio { display: grid; gap: 12px; }
.trio > div { border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; }
.trio b { font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; }
.trio p { margin: 6px 0 0; font-size: .92rem; line-height: 1.5; color: var(--muted); }

/* Quote */
/* Chapter 04 · Connect context */
.ctx-block { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ctx-block .mono-label { margin: 0; }
.ctx-in { margin: 0; border-top: 1px solid var(--rule); }
.ctx-in > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.ctx-in dt { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; }
.ctx-in dd { margin: 0; text-align: right; font-size: .9rem; color: var(--muted); }
.ctx-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ctx-two > div { min-width: 0; padding: 16px 18px; border: 1px solid var(--accent); border-radius: 14px; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.ctx-two b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; }
.ctx-two span { display: block; margin-top: 6px; font-size: .88rem; line-height: 1.45; color: var(--muted); }
@media (max-width: 480px) { .ctx-two { grid-template-columns: 1fr; } }

/* Client voices carousel */
.voices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4vh; padding-block: 9vh; border-top: 1px solid var(--rule); }
@media (min-width: 1024px) { .voices { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 4vw; align-items: center; } }
.carousel { min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.slides { position: relative; display: grid; }
.slide { grid-area: 1 / 1; min-width: 0; border: 1px solid var(--rule); border-radius: 20px; padding: clamp(24px, 4vw, 44px); background: color-mix(in srgb, var(--ink) 4%, var(--bg)); display: flex; flex-direction: column; gap: 26px; }
.slide[aria-hidden="true"] { visibility: hidden; }
.slide .mark { font-family: var(--font-display); font-size: 4.5rem; line-height: .6; color: var(--accent); height: 2.2rem; }
.slide blockquote { margin: 0; }
.slide blockquote p { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.25; letter-spacing: -.015em; text-wrap: pretty; }
.who-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--bg); font: 600 .95rem/1 var(--font-body); }
.who-row b { display: block; font-size: 1rem; }
.who-row span { display: block; font-size: .88rem; color: var(--muted); margin-top: 2px; }
.ctx { margin-left: auto; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--rule); border-radius: 999px; padding: 7px 12px; }
.car-ctrl { display: flex; align-items: center; gap: 14px; }
.car-ctrl[hidden] { display: none; }
.car-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--ink); font-size: 1.1rem; cursor: pointer; }
.car-btn:hover { border-color: var(--accent); }
.car-dots { display: flex; gap: 8px; }
.car-dots button { width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; background: var(--rule); cursor: pointer; transition: width .3s, background .3s; }
.car-dots button[aria-current="true"] { width: 26px; background: var(--accent); }

/* Pricing */
.tiers { border-top: 1px solid var(--ink); }
.tier { padding: 18px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; }
.tier b { font-family: var(--font-display); font-weight: 500; font-size: 1.22rem; }
.tier .price { font-family: var(--font-display); font-weight: 300; font-size: 1.9rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tier .price small { font-family: var(--font-body); font-size: .8rem; color: var(--muted); letter-spacing: 0; }
.tier ul { grid-column: 1 / -1; list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tier li { font-size: .86rem; color: var(--muted); }
.tier li::before { content: "· "; color: var(--accent); }
.tier.pop b::after { content: "Most popular"; margin-left: 10px; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); vertical-align: middle; }

/* Pricing band: full width, vertical cards */
.band { position: relative; z-index: 12; background: var(--bg); padding-block: 10vh 10vh;
  padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.band-in { max-width: 1240px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; }
.band-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; }
.band-head > div { max-width: 40rem; }
.band-note { margin: 0; max-width: 26rem; font-size: .98rem; line-height: 1.55; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }
.card { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 20px; padding: 28px 24px 26px;
  border: 1px solid var(--rule); border-radius: 18px; background: color-mix(in srgb, var(--ink) 3%, var(--bg)); }
.card.pop { border-color: var(--accent); box-shadow: 0 28px 70px -36px var(--accent); }
.card .badge { position: absolute; top: -12px; left: 24px; padding: 6px 10px; border-radius: 999px; background: var(--accent); color: var(--bg);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.card h3 { font-size: 1.35rem; }
.card .who { margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.card .amount { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: 3.2rem; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.card .amount small { display: block; margin-top: 8px; font-family: var(--font-body); font-size: .82rem; letter-spacing: 0; color: var(--muted); }
.card .btn { justify-content: center; width: 100%; box-sizing: border-box; }
.card .feat { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--rule); display: grid; gap: 11px; }
.card .feat li { position: relative; padding-left: 24px; font-size: .9rem; line-height: 1.4; }
.card .feat li::before { content: ""; position: absolute; left: 2px; top: .3em; width: 10px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

/* FAQ */
.faq details { border-bottom: 1px solid var(--rule); }
.faq details:first-child { border-top: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 15px 30px 15px 0; position: relative; font-family: var(--font-display); font-weight: 500; font-size: 1.06rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-family: var(--font-mono); color: var(--accent); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 16px; font-size: .95rem; line-height: 1.6; color: var(--muted); }

/* Featured marquee */
.marquee { overflow: hidden; border-block: 1px solid var(--rule); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee .track { display: flex; gap: 34px; width: max-content; padding-block: 14px; animation: slide 38s linear infinite; }
.marquee span { font-family: var(--font-display); font-size: 1.05rem; white-space: nowrap; color: var(--muted); }
@keyframes slide { to { transform: translateX(-50%); } }

/* Contact form */
form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: .84rem; color: var(--muted); }
.field input, .field select, .field textarea { font: 400 1rem/1.4 var(--font-body); color: var(--ink); background: transparent; border: 1px solid var(--rule); border-radius: 10px; padding: 11px 12px; width: 100%; box-sizing: border-box; }
.field select option { color: #0d1b3d; }
.field textarea { min-height: 6.5rem; resize: vertical; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 480px) { .row2 { grid-template-columns: 1fr; } }
.form-note { font-size: .88rem; color: var(--muted); min-height: 1.3em; margin: 0; }

/* Footer */
.foot { padding-block: 10vh 10vh; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; border-top: 1px solid var(--rule); }
.foot h4 { margin: 0 0 10px; font-family: var(--font-mono); font-weight: 500; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.foot a { text-decoration: none; font-size: .9rem; color: var(--muted); }
.foot a:hover { color: var(--ink); }
.copyright { grid-column: 1 / -1; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); letter-spacing: .05em; }

/* ---------- Two-column chapters ---------- */
main.page { position: relative; max-width: 1480px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
.chapter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4vh; padding-block: 8vh; }
.chapter > .text { display: flex; flex-direction: column; gap: 7vh; min-width: 0; }
.chapter.hero { padding-top: calc(96px + 6vh); }
.chapter.hero > .text { gap: 5vh; }
.viz { width: 100%; max-width: 32rem; aspect-ratio: 680 / 668; margin: 0 auto; }
.viz svg { width: 100%; height: 100%; display: block; }
@media (min-width: 1024px) {
  .chapter { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 4vw; align-items: start; padding-block: 9vh; }
  .chapter.hero {
    grid-template-columns: minmax(0, 1fr);
    padding-top: calc(84px + 4vh);
    gap: 5vh;
    justify-items: center;
    text-align: center;
  }
  .chapter.hero > .text {
    max-width: 46rem;
    width: 100%;
    align-items: center;
  }
  .chapter.hero .ctas { justify-content: center; }
  .chapter > .text { gap: 5vh; }
  .chapter > .viz { position: sticky; top: 96px; max-width: none; max-height: calc(100vh - 130px); justify-self: center; }
  .chapter.hero > .viz {
    position: relative;
    top: auto;
    max-height: none;
    max-width: 64rem;
    justify-self: center;
    margin: 0;
  }
}
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4vh; padding-block: 8vh; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 2vh 5vw; align-items: start; }
  .split > :first-child { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 14vh; align-self: start; }
  .split > :not(:first-child) { grid-column: 2; }
}
#contact.split { gap: 1.25rem 5vw; }
#contact.split #contactForm { margin: 0; }
.featured { display: flex; flex-direction: column; gap: 16px; padding-block: 4vh; }
@media (min-width: 900px) { .foot { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .marquee .track { animation: none; flex-wrap: wrap; width: auto; }
  .status.run::after { animation: none; }
}