.system-page{padding:52px 0 64px}.system-page.wrap{width:min(1440px,calc(100% - 64px))}.system-head{max-width:970px;margin:0 auto 30px;text-align:center}.system-head h1{font-size:clamp(40px,4.8vw,68px);line-height:1.06;letter-spacing:var(--at-track-tight)}.system-head p{max-width:790px;margin:25px auto 0;font-size:18px;line-height:1.65;color:var(--at-text-muted);text-wrap:balance}
@media(max-width:1100px){.system-page.wrap{width:calc(100% - 32px)}.system-head{max-width:850px}}@media(max-width:720px){.system-page{padding-top:32px}.system-head{text-align:left;padding:0 8px}.system-head h1{font-size:39px}.system-title-break{display:none}.system-head p{font-size:16px;margin-top:20px}}

/* The page is one story: five stops on a line drawn by scrolling, three with a still drawing that completes as it comes
   into view, then the question and the form (Owner, 28 October 2026: nothing to watch, nothing plays on its own).
   Every headline is a claim, so the headlines alone tell the argument; they take the column's width. */
.system-story{max-width:1160px;margin:40px auto 0;padding-bottom:88px}
.story-track{position:relative}
.story-list{position:relative;list-style:none;margin:0;padding:0}
.story-stop{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start;min-height:392px;padding:88px 64px 56px}
.story-copy{position:relative;z-index:1;min-width:0}
.story-copy h3{font-size:28px;line-height:1.2;letter-spacing:var(--at-track-tight);max-width:24ch;margin-bottom:22px;text-wrap:balance}
.story-copy p{font-size:17.5px;line-height:1.7;color:var(--at-text-muted)}
.story-visual{position:relative;min-width:0;height:264px;margin-top:-8px}
.story-stop:nth-child(even) .story-copy{grid-column:2;grid-row:1}
.story-stop:nth-child(even) .story-visual{grid-column:1;grid-row:1}
/* The stops without a drawing: six short lines side by side, or one paragraph at reading width. */
.story-stop.story-wide{grid-template-columns:minmax(0,1fr);min-height:0}
.story-stop.story-wide .story-copy{grid-column:1;grid-row:auto}
.story-wide .story-copy h3{max-width:none}
.story-wide .story-copy p{max-width:640px}
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 40px;list-style:none;margin:0;padding:0;max-width:1000px}
.story-grid li{font-size:16.5px;line-height:1.6;color:var(--at-text-muted);padding-top:16px;border-top:1px solid var(--at-line)}
.story-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.story-route{stroke:var(--at-line);stroke-width:1;fill:none}
.story-ink{stroke:var(--at-accent);stroke-width:1.5;fill:none}
.story-marker circle{fill:var(--at-surface);stroke:var(--at-line-strong);stroke-width:1}
.story-marker .stop-number{fill:var(--at-text);font:12px var(--at-font-ui);stroke:none}
.story-marker[data-passed=true] circle{fill:var(--at-accent);stroke:var(--at-accent)}
.story-marker[data-passed=true] .stop-number{fill:var(--at-text-on-accent)}
.story-tip{fill:var(--at-accent);stroke:var(--at-surface);stroke-width:2}
.journey-scene{display:block;width:100%;height:264px;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.journey-scene text{fill:var(--at-text-muted);stroke:none;font:12.5px var(--at-font-ui)}
.journey-scene .scene-title{font-size:12px;fill:var(--at-text-muted)}
.journey-scene .scene-doc-title{font-weight:600;fill:var(--at-text)}
.journey-scene .scene-caption{stroke:var(--at-surface);stroke-width:6;paint-order:stroke fill}
.journey-scene .scene-label-left{text-anchor:start}.journey-scene .scene-label-right{text-anchor:end}
.journey-scene .scene-paper,.journey-scene .scene-person{fill:var(--at-surface);stroke:var(--at-line-strong);stroke-width:1}
.journey-scene .scene-selected{fill:var(--at-bg);stroke:var(--at-line-strong);stroke-width:1}
.journey-scene .scene-rule{stroke:var(--at-line-strong);stroke-width:1;fill:none}
.journey-scene .scene-detail{stroke:var(--at-text-muted);stroke-width:1.2;fill:none}
.journey-scene .scene-core{fill:var(--at-text-muted);stroke:none}
.journey-scene .scene-planned{fill:none;stroke:var(--at-line-strong);stroke-width:1;stroke-dasharray:4 4}
.journey-scene .scene-flow{stroke:var(--at-accent);stroke-width:1.6;fill:none}
/* The question the line ends at, and the form right under it, as on Business Agents. */
.story-end{position:relative;margin:76px auto 0;text-align:center;width:fit-content;max-width:100%;background:var(--at-surface);padding:14px 24px 0}
.story-kicker{display:block;font-size:11px;letter-spacing:.04em;color:var(--at-text-muted);margin-bottom:20px}
.story-end h2{font-size:clamp(32px,3.6vw,48px);line-height:1.15}
.story-end h2 em{font-family:var(--at-font-editorial);font-weight:400}
.system-story .site-contact.story-contact{position:relative;max-width:640px;margin:24px auto 0;padding-top:0;border-top:0}
.story-contact h2{font-size:30px;max-width:620px}
.story-contact .contact-eyebrow{display:none}
@media(max-width:1000px){.story-stop{gap:36px;padding-left:56px;padding-right:56px}.story-copy h3{font-size:27px}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.system-story{margin-top:24px}.story-stop{grid-template-columns:minmax(0,1fr);padding:80px 40px 48px;gap:28px;min-height:0}.story-copy{max-width:560px;margin:0 auto;width:100%}.story-copy h3{max-width:24ch;margin-bottom:20px}.story-copy p{font-size:16.5px}.story-visual{width:100%;max-width:460px;margin:0 auto;height:auto;min-height:264px}.story-stop:nth-child(even) .story-copy,.story-stop:nth-child(even) .story-visual{grid-column:1;grid-row:auto}.story-grid{grid-template-columns:minmax(0,1fr);gap:16px}.story-grid li{font-size:16px}.story-end{margin:30px 0 0 40px;text-align:left;padding:15px 0 0}.story-end h2{font-size:32px}.system-story .site-contact.story-contact{margin-top:14px}.story-contact h2{font-size:28px}}
@media(max-width:480px){.story-stop{padding-left:32px;padding-right:24px}.story-copy h3{font-size:26px}.story-end{margin-left:32px}.system-story .site-contact.story-contact{margin-left:8px;margin-right:8px}.journey-scene text{font-size:12px}}
@media(prefers-reduced-motion:reduce){.system-story *{transition:none!important;animation:none!important}}