/* Homepage motion: native scroll, independent planes, a shared result that stays. */
.hero-visual { position:relative; min-width:0; }
.hero-visual::before,.hero-visual::after { content:""; position:absolute; inset:130px 16px 30px; border:1px solid #8da7c326; border-radius:12px; pointer-events:none; }
.hero-visual::before { transform:translate(16px,16px); }
.hero-visual::after { transform:translate(29px,28px); }
.hero-visual .product-map { position:relative; z-index:1; }
.hero-visual .map-workspace { position:relative; }
.hero-sequence { position:relative; }
.workflow-heading { display:flex; justify-content:space-between; gap:64px; align-items:flex-end; padding-bottom:56px; }
.workflow-heading h2 { font-size:clamp(34px,3.5vw,48px); letter-spacing:-.045em; max-width:630px; }
.workflow-heading>p { max-width:330px; font-size:16px; line-height:1.8; color:#afbdd0; }
.workflow-stage { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:center; }
.workflow-narrative { min-width:0; }
.workflow-track .workflow-beats { display:block; margin:0; }
.workflow-track .workflow-beats li { padding-block:32px; }
.workflow-track .workflow-beats h3 { font-size:clamp(28px,3vw,40px); letter-spacing:-.045em; }
.workflow-track .workflow-beats p { font-size:16px; }
.motion-demo { position:relative; width:100%; min-width:0; padding:28px; border:1px solid #ffffff24; border-radius:12px; background:#14212d; box-shadow:0 24px 64px -24px #0005; overflow:hidden; }
.motion-demo .demo-topline { display:flex; justify-content:space-between; gap:12px; padding:0 0 20px; font-size:9px; letter-spacing:.08em; }
.scene-label { color:#8d9cae; font-size:8px; letter-spacing:.06em; }
.workspace-canvas { position:relative; height:360px; }
.motion-paths { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; stroke-width:1.4; }
.path-bed { stroke:#ffffff16; }
.path-a { stroke:#acc8ee; }
.path-b { stroke:#bdb2db; }
.file-packet { opacity:0; fill:#bbd4f5; stroke:#d7e5f8; stroke-width:1.3; }
.packet-b { fill:#c6b9e2; stroke:#e0d5f3; }
.packet-detail { stroke:#213249; fill:none; }
.conflict-stop { opacity:0; }
.conflict-stop circle { fill:#332b25; stroke:#d9ae75; }
.conflict-stop path { stroke:#eac68f; stroke-width:2; stroke-linecap:round; }
.shared-node { position:absolute; top:0; left:50%; transform:translateX(-50%); width:76%; border:1px solid #8ba9ce80; border-radius:8px; background:#203247; box-shadow:0 10px 24px #060e1829; }
.shared-node-heading { display:flex; align-items:center; gap:12px; padding:18px; }
.shared-node-heading>svg { width:28px; height:28px; fill:#b9d1f4; flex:none; }
.shared-node-heading>div { display:grid; gap:4px; }
.shared-node .tiny-label { font-size:8px; color:#b5c8df; letter-spacing:.1em; }
.shared-node code { font-size:13px; color:#edf3fb; }
.shared-node .revision { margin-left:auto; font-size:11px; }
.shared-file { display:flex; align-items:center; gap:10px; padding:13px 16px; border-top:1px solid #ffffff12; background:#182837; border-radius:0 0 8px 8px; }
.shared-file code { font-size:10px; }
.shared-file>span { margin-left:auto; font:10px/1.4 var(--mono); color:#b4c6dc; white-space:nowrap; }
.saved-check { display:none; width:16px; height:16px; flex:none; fill:none; stroke:#a8d9c1; stroke-width:1.5; }
.motion-agent { position:absolute; bottom:0; width:45%; border-radius:7px; background:#1b2b3c; }
.agent-a { left:0; }
.agent-b { right:0; }
.motion-agent .run-heading { flex-wrap:wrap; gap:8px; padding:12px; font-size:10px; }
.motion-agent .run-state { font-size:8px; }
.motion-agent .file-row { padding:12px; border-top:1px solid #ffffff0d; font-size:11px; }
.motion-agent .file-content { padding:8px 12px; font-size:10px; white-space:nowrap; }
.motion-agent .run-footer { padding:10px 12px; font-size:9px; }
.motion-demo .outcome { padding:20px 0 18px; min-height:88px; }
.motion-demo .outcome strong { font-size:13px; }
.motion-demo .outcome p { max-width:none; font-size:11px; }
.motion-demo .demo-controls { display:none; }
.motion-demo.is-interactive .demo-controls { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.motion-demo .demo-controls button { min-height:44px; font-size:12px; padding:8px 4px; }
.scene-progress { position:absolute; bottom:0; left:0; right:0; height:2px; background:#ffffff08; }
.scene-progress>span { display:block; height:100%; background:#b5cfef; transform-origin:left; transform:scaleX(var(--scene-progress,0)); }
.motion-demo[data-committed] .shared-node { border-color:#86c0a7; }
.motion-demo[data-committed] .shared-file>span { color:#b2dfc9; }
.motion-demo[data-committed] .saved-check { display:block; }
.motion-demo[data-committed] .agent-a { border-color:#86c0a7; }
.motion-demo[data-conflict] .agent-b { border-color:#cca273; }
.motion-demo[data-conflict] .agent-b .run-state { color:#eac68f; }
.motion-demo[data-discarded] .agent-b { border-color:#536071; }
.motion-demo[data-discarded] .agent-b .run-state { color:#b5bfce; }
.motion-demo[data-discarded] .agent-b .file-content { text-decoration:line-through; }
@media(prefers-reduced-motion:no-preference) {
  .motion-active { height:calc(var(--stage-height,600px) + 200svh); }
  .motion-active .workflow-stage { position:sticky; top:max(24px,calc((100svh - var(--stage-height,600px))/2)); }
  .motion-active .workflow-beats { display:grid; }
  .motion-active .workflow-beats li { grid-area:1 / 1; align-self:center; opacity:0; visibility:hidden; border-top:0; padding:0; }
  .motion-active .workflow-beats li[data-current] { opacity:1; visibility:visible; }
  .motion-active .workflow-beats h3 { margin-top:18px; }
}
@media(min-width:1000px) and (min-height:720px) and (prefers-reduced-motion:no-preference) {
  .hero-motion.hero-pinned { height:188svh; }
  .hero-pinned .hero { position:sticky; top:0; min-height:100svh; padding-block:70px; }
}
@media(max-width:1100px) {
  .workflow-stage { gap:32px; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); }
  .motion-demo { padding:22px; }
  .scene-label { display:none; }
}
@media(max-width:850px) {
  .workflow-heading { display:block; padding-bottom:40px; }
  .workflow-heading>p { max-width:460px; margin-top:24px; }
  .workflow-stage { display:flex; flex-direction:column; gap:28px; }
  .workflow-narrative,.motion-demo { width:100%; max-width:600px; }
  .motion-active .motion-demo { order:-1; }
  .workflow-track .workflow-beats h3 { font-size:30px; }
  .workflow-track .workflow-beats p { max-width:560px; font-size:15px; }
  .motion-active .workflow-beats li { min-height:162px; }
  .motion-active { height:calc(var(--stage-height,600px) + 170svh); }
}
@media(max-width:600px) {
  .hero-visual { margin-right:14px; }
  .hero-visual::before,.hero-visual::after { inset:100px 12px 26px; }
  .hero-visual .workspace-files { overflow:hidden; }
  .hero-visual .workspace-files>div>span:last-child { font-size:9px; }
  .workflow-heading h2 { font-size:34px; }
  .workflow-heading>p { font-size:15px; }
  .workflow-stage { gap:24px; }
  .motion-demo { padding:18px 14px 14px; border-radius:10px; }
  .motion-demo .demo-topline { padding-bottom:18px; font-size:8px; }
  .workspace-canvas { height:280px; }
  .shared-node { width:84%; }
  .shared-node-heading { padding:12px 10px; gap:8px; }
  .shared-node-heading>svg { width:22px; height:22px; }
  .shared-node code { font-size:10px; }
  .shared-node .tiny-label { font-size:7px; }
  .shared-node .revision { font-size:9px; padding:4px 6px; }
  .shared-file { padding:10px 9px; gap:5px; }
  .shared-file code,.shared-file>span { font-size:8px; }
  .saved-check { width:12px; height:12px; }
  .motion-agent { width:46%; }
  .motion-agent .run-heading { padding:9px 8px; font-size:9px; gap:5px; }
  .motion-agent .run-state { font-size:7px; }
  .motion-agent .file-row { display:none; }
  .motion-agent .file-content { padding:8px; font-size:10px; }
  .motion-agent .line-number { margin-right:6px; }
  .motion-agent .run-footer { padding:9px 8px; font-size:8px; white-space:nowrap; }
  .motion-demo .outcome { min-height:0; padding:16px 0; }
  .motion-demo .outcome p { display:none; }
  .motion-demo .outcome strong { font-size:11px; }
  .motion-demo .outcome-icon { font-size:18px; }
  .motion-active .outcome { position:absolute; width:1px; height:1px; min-height:0; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .motion-demo .demo-controls { padding-top:10px; gap:2px; }
  .motion-demo .demo-controls button { font-size:10px; }
  .workflow-track .workflow-beats h3 { font-size:28px; margin-top:12px; }
  .workflow-track .workflow-beats p { font-size:14px; line-height:1.7; margin-top:12px; }
  .workflow-kicker { font-size:8px; }
  .motion-active .workflow-beats li { min-height:154px; }
}
@media(max-width:360px) {
  .workspace-canvas { height:250px; }
  .motion-agent .run-heading { flex-direction:column; align-items:flex-start; gap:3px; }
  .motion-agent .run-footer { font-size:7px; }
  .motion-demo .demo-topline { font-size:7px; }
  .workflow-track .workflow-beats h3 { font-size:25px; }
  .workflow-track .workflow-beats p { font-size:13px; }
  .motion-active .workflow-beats li { min-height:156px; }
  .motion-demo .outcome strong { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-visual::before,.hero-visual::after { transform:none; }
  .file-packet,.conflict-stop { display:none; }
}

/* Whole-page choreography. Every chapter has an arrival, a reading hold, and an exit. */
.landing-page main { overflow-x:clip; }
.page-chapter { position:relative; padding:0; }
.chapter-surface { position:relative; padding-block:100px; }
.idea-section.page-chapter { background:var(--navy); }
.idea-section .chapter-surface { background:var(--paper); }
.prototype-section.page-chapter { padding:0; background:var(--paper); }
.prototype-section .chapter-surface { background:var(--navy); }
.waitlist-chapter { background:var(--navy); }
.waitlist-chapter .chapter-surface { background:var(--paper); overflow:clip; }
.waitlist-chapter .waitlist-section { position:relative; padding-block:30px; min-height:420px; align-items:center; }
.waitlist-chapter .waitlist-copy h2 { font-size:clamp(44px,5vw,68px); }
.closing-mark { position:absolute; width:540px; height:540px; right:-140px; top:30px; color:#18222f; opacity:.035; fill:currentColor; pointer-events:none; }
.writing-section.page-chapter { padding:0; background:var(--paper); }
.writing-section .chapter-surface { background:#edf1f5; }
.landing-page .principles { padding-bottom:36px; }
.landing-page .principle,.landing-page .principle+.principle {
  min-height:244px; padding:42px; margin-bottom:28px; border:1px solid #ccd5df;
  border-radius:18px; background:#f7f8fa; grid-template-columns:64px minmax(220px,.9fr) 1fr;
  gap:10px 32px; align-content:center; transform-origin:center top;
}
.landing-page .principle:nth-child(2) { background:#eef2f6; }
.landing-page .principle:nth-child(3) { background:#e5ecf3; margin-bottom:0; }
.landing-page .principle-symbol { width:54px; height:54px; align-self:center; }
.landing-page .principle-symbol svg { width:46px; height:46px; }
.landing-page .principle h3 { font-size:32px; max-width:360px; }
.landing-page .principle p { font-size:16px; }
.landing-page .principle::before { display:none; }
@media(max-width:1000px) {
  .landing-page .principle,.landing-page .principle+.principle { padding:32px; grid-template-columns:48px 1fr 1fr; gap:10px 24px; }
  .landing-page .principle h3 { font-size:28px; }
  .landing-page .principle p { font-size:14px; }
}
@media(max-width:850px) {
  .chapter-surface { padding-block:76px; }
  .landing-page .principle,.landing-page .principle+.principle { grid-template-columns:42px 1fr; padding:32px; min-height:256px; }
  .landing-page .principle p { grid-column:2; grid-row:3; margin-top:10px; }
  .landing-page .principle-symbol { grid-row:1 / 3; width:36px; height:36px; align-self:start; }
  .landing-page .principle-symbol svg { width:36px; height:36px; }
  .waitlist-chapter .waitlist-section { min-height:0; }
}
@media(max-width:600px) {
  .chapter-surface { padding-block:64px; }
  .landing-page .principles { margin-top:40px; padding-bottom:28px; }
  .landing-page .principle,.landing-page .principle+.principle { padding:28px 22px; min-height:278px; gap:10px 18px; grid-template-columns:28px 1fr; border-radius:12px; margin-bottom:24px; }
  .landing-page .principle h3 { font-size:26px; }
  .landing-page .principle p { font-size:14px; margin-top:8px; }
  .landing-page .principle-symbol,.landing-page .principle-symbol svg { width:28px; height:28px; }
  .waitlist-chapter .waitlist-section { padding-block:0; }
  .waitlist-chapter .waitlist-copy h2 { font-size:46px; }
  .closing-mark { width:360px; height:360px; right:-160px; top:60px; }
}

/* Compositions are driven directly on their elements by site.js. */
.hero-visual { transform-origin:center; }
.hero-visual .product-map { transform-origin:center; }
.hero-visual .workspace-files { overflow:visible; }
.hero-visual .workspace-files>div { background:#1c2b3a; border-radius:5px; padding-inline:12px; }
.hero-visual::before,.hero-visual::after { inset:136px 8px 30px; }
.hero-visual::after { border-color:#8da7c319; }
.hero-copy { position:relative; z-index:2; }
.hero { transform-origin:center; }
.landing-page .principle,.landing-page .principle+.principle {
  min-height:388px; padding:48px; margin-bottom:40px; border-radius:16px;
  grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:16px 72px;
}
.landing-page .principle-symbol { display:none; }
.landing-page .principle .tiny-label { grid-column:1; grid-row:1; align-self:end; }
.landing-page .principle h3 { grid-column:1; grid-row:2; max-width:350px; font-size:34px; align-self:start; }
.landing-page .principle p { grid-column:1; grid-row:3; align-self:start; max-width:350px; margin:0; }
.benefit-scene { grid-column:2; grid-row:1 / 4; width:100%; max-width:430px; justify-self:end; align-self:center; color:#243448; font:11px/1.4 var(--mono); }
.mini-window { border:1px solid #b9c6d7; border-radius:9px; background:#fff; box-shadow:0 18px 40px -24px #152c4d55; overflow:hidden; }
.mini-toolbar { display:flex; align-items:center; gap:10px; height:48px; padding-inline:17px; border-bottom:1px solid #dbe2ec; background:#f4f7fa; }
.mini-toolbar code { color:#40536a; }
.mini-mark { font:600 16px/1 var(--sans); color:#536e91; }
.mini-dot { width:5px; height:5px; background:#8dafa2; border-radius:50%; margin-left:auto; }
.retained-file,.scope-row { display:flex; align-items:center; gap:12px; margin-inline:16px; min-height:47px; border-bottom:1px solid #e9edf3; }
.retained-file:last-child,.scope-row:last-child { border-bottom:0; }
.retained-file>span:last-child,.parallel-source>span:last-child { margin-left:auto; font-size:8px; letter-spacing:.06em; color:#728096; }
.benefit-file-icon { display:block; width:11px; height:14px; border:1px solid #8ea2bb; border-radius:2px; flex:none; }
.session-switch { position:relative; overflow:hidden; margin:18px 12px 0; height:30px; color:#61728a; }
.session-switch>span { position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center; }
.session-before { opacity:0; }
.session-after>span { color:#345e4e; }
.parallel-source { display:flex; align-items:center; gap:12px; background:#fff; border:1px solid #b9c6d7; border-radius:7px; padding:17px; width:74%; margin:auto; }
.parallel-lines { display:block; width:100%; height:50px; fill:none; stroke:#aabbd0; stroke-width:1; }
.parallel-drafts { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.private-draft { border:1px solid #b5c5dc; background:#f8fbff; border-radius:7px; padding:17px; box-shadow:0 14px 24px -20px #22354c66; }
.private-draft:last-child { border-color:#c6bfd6; background:#fcfaff; }
.private-draft>div { display:flex; align-items:center; gap:6px; font-size:8px; margin-bottom:18px; }
.private-draft>code { display:block; margin-bottom:18px; }
.draft-line { display:block; height:4px; width:90%; background:#adc3e0; border-radius:1px; margin-bottom:8px; transform-origin:left; }
.private-draft:last-child .draft-line { background:#beb2d4; }
.draft-line.short { width:65%; }
.private-draft small { display:block; margin-top:18px; color:#6b7c91; font-size:8px; }
.scope-tag { margin-left:auto; padding:4px 6px; border-radius:4px; background:#edf2f8; color:#536a87; font-size:9px; white-space:nowrap; }
.write-tag { background:#e7f2ed; color:#426a58; }
.scope-note { display:flex; gap:8px; align-items:center; justify-content:center; margin-top:18px; color:#62758d; }
.scope-note svg { width:16px; height:18px; fill:none; stroke:#6b859e; stroke-width:1.3; }
@media(prefers-reduced-motion:no-preference) {
  .page-motion .hero-sequence { z-index:0; }
  .page-motion .idea-section { margin-top:-6svh; z-index:1; }
  .page-motion .stack-motion .principle { position:sticky; top:calc(var(--stack-top,90px) + var(--card-index,0)*var(--stack-step,18px)); z-index:var(--card-layer,1); box-shadow:0 -12px 36px -26px #18222f36; }
  .page-motion .page-chapter:focus-within .chapter-surface { clip-path:none !important; }
  .motion-active { height:calc(var(--stage-height,600px) + 130svh); }
}
@media(max-width:1100px) {
  .landing-page .principle,.landing-page .principle+.principle { padding:34px; gap:16px 36px; }
  .landing-page .principle h3 { font-size:30px; }
}
@media(max-width:850px) {
  .landing-page .principle,.landing-page .principle+.principle { padding:32px; grid-template-columns:1fr 1fr; min-height:370px; gap:14px 28px; }
  .landing-page .principle h3 { font-size:28px; }
  .private-draft { padding:12px; }
  .parallel-drafts { gap:12px; }
  .benefit-scene { font-size:10px; }
}
@media(max-width:600px) {
  .hero-visual { margin-right:0; }
  .hero-visual .workspace-files>div { padding-inline:8px; }
  .hero-visual::before { transform:translate(6px,12px); }
  .hero-visual::after { transform:translate(10px,20px); }
  .landing-page .principle,.landing-page .principle+.principle { min-height:478px; padding:26px 22px; grid-template-columns:1fr; gap:12px; margin-bottom:30px; }
  .landing-page .principle h3 { font-size:28px; max-width:290px; }
  .landing-page .principle p { font-size:14px; line-height:1.65; }
  .benefit-scene { grid-column:1; grid-row:4; max-width:360px; justify-self:center; margin-top:20px; }
  .mini-toolbar { height:38px; padding-inline:12px; }
  .retained-file,.scope-row { min-height:37px; margin-inline:12px; }
  .session-switch { margin-top:12px; height:24px; }
  .parallel-source { padding:12px; }
  .parallel-lines { height:30px; }
  .private-draft>div { margin-bottom:12px; }
  .private-draft>code { margin-bottom:12px; }
  .private-draft small { margin-top:12px; }
  .scope-note { margin-top:12px; }
}
@media(max-width:360px) {
  .landing-page .principle,.landing-page .principle+.principle { padding:22px 18px; min-height:466px; }
  .landing-page .principle h3 { font-size:25px; }
  .landing-page .principle p { font-size:13px; }
  .benefit-scene { font-size:9px; }
  .scope-tag { font-size:8px; }
}
@media(max-width:850px) and (prefers-reduced-motion:no-preference) {
  .motion-active { height:calc(var(--stage-height,600px) + 105svh); }
  .page-motion .idea-section { margin-top:0; }
}

/* CSS also honors the preference immediately, before a JS change event arrives. */
@media(prefers-reduced-motion:reduce) {
  .landing-page .motion-plane { transform:none !important; translate:none !important; clip-path:none !important; }
  .landing-page .hero-copy,.landing-page .session-after,.landing-page .scope-tag { opacity:1 !important; }
  .landing-page .session-before { opacity:0 !important; }
}