/* One product family. The OSS long structure keeps its existing visual control. */
html[data-product=cloud]{--paper:#f8fafc;--surface:#eef3f8;--ink:#0f172a;--muted:#485a70;--line:#cad5e2;--accent:#ad452b;--navy:#203a4b;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html[data-product=cloud][data-theme=dark]{--paper:#0f172a;--surface:#18243a;--ink:#f8fafc;--muted:#b0bdd0;--line:#314057;--accent:#f3a686;--navy:#0c1425}
@media(prefers-color-scheme:dark){html[data-product=cloud]:not([data-theme=light]){--paper:#0f172a;--surface:#18243a;--ink:#f8fafc;--muted:#b0bdd0;--line:#314057;--accent:#f3a686;--navy:#0c1425}}
html[data-product=cloud] h1,html[data-product=cloud] h2,html[data-product=cloud] .research h2{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:650;letter-spacing:-.045em;line-height:1.12}
html[data-product=cloud] :is(header,main,footer){max-width:1280px;margin-left:auto;margin-right:auto}
html[data-product=cloud] header{min-height:76px;padding:16px 40px;gap:28px}
html[data-product=cloud] header nav{gap:22px}
html[data-product=cloud] .brand>span{font-size:25px}
html[data-product=cloud] .button{border-radius:7px;background:var(--accent);border-color:var(--accent);color:#fff}
html[data-product=cloud][data-theme=dark] .button{color:#0f172a}
html[data-product=cloud] .button:hover{filter:brightness(.94)}
html[data-product=cloud] .eyebrow{font:700 11px/1.5 system-ui,sans-serif;letter-spacing:.12em;margin-bottom:20px;color:var(--accent)}
html[data-product=cloud] .theme{border-radius:7px;font-size:16px;width:36px;height:36px}
html[data-product=cloud] body[data-page=home] .hero{padding:52px 40px;gap:48px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
html[data-product=cloud] body[data-page=home] .hero h1{font-size:clamp(40px,4.4vw,58px);max-width:11em;line-height:1.08}
html[data-product=cloud] .hero .intro{font-size:18px!important;line-height:1.6;margin-top:22px;max-width:32em}
html[data-product=cloud] .hero-actions{flex-wrap:wrap;gap:16px;margin-top:24px}
html[data-product=cloud] .hero .understated{font-size:12px!important;max-width:35em;margin-top:20px}
html[data-product=cloud] .proposition{padding:54px 40px;gap:60px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);align-items:center}
html[data-product=cloud] .proposition h2{font-size:clamp(28px,3vw,39px)}
html[data-product=cloud] .proposition p{font-size:17px;line-height:1.7}
html[data-product=cloud] .section{padding:58px 40px;gap:28px 48px}
html[data-product=cloud] .section h2{font-size:clamp(28px,3.1vw,40px);margin-bottom:18px}
html[data-product=cloud] .lead{font-size:17px;line-height:1.7}
html[data-product=cloud] .section-number{font:11px/1.5 ui-monospace,monospace;color:var(--muted);letter-spacing:.07em}
html[data-product=cloud] .research{padding:48px 40px;border-top:1px solid var(--line);background:var(--surface)}
html[data-product=cloud] .research h2{font-size:32px;margin-bottom:18px}
html[data-product=cloud] .research p{font-size:16px;max-width:65ch}
html[data-product=cloud] .research .text-link{margin-top:20px;margin-right:26px}
html[data-product=cloud] .access{margin:48px 40px;padding:40px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px}
html[data-product=cloud] .access .lead{color:var(--muted)}
html[data-product=cloud] .access .eyebrow{color:var(--accent)}
html[data-product=cloud] footer{padding:36px 40px;font-size:13px;border-top:1px solid var(--line)}
/* Short OSS: a starting point, a visible edit, one proof, and the local boundary. */
body[data-structure=short] main{max-width:1200px}
body[data-structure=short] nav{max-width:1280px;padding-left:40px;padding-right:40px}
body[data-structure=short] section{padding:52px 40px}
body[data-structure=short] .hero{max-width:none;padding:52px 40px}
body[data-structure=short] .hero-grid{gap:48px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
body[data-structure=short] .hero h1{font-size:clamp(40px,4.1vw,56px);max-width:12em;line-height:1.08}
body[data-structure=short] .hero .lede{font-size:18px;line-height:1.6;max-width:32em}
body[data-structure=short] .eyebrow{font-size:11px;letter-spacing:.12em;margin-bottom:20px}
body[data-structure=short] h2{font-size:clamp(28px,3.2vw,39px);line-height:1.15;max-width:16em}
body[data-structure=short] .trust-note{border:0;padding:0;font-size:12px;margin-top:20px}
body[data-structure=short] :is(.working-start,.customize-summary){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;align-items:center}
body[data-structure=short] .working-start p,body[data-structure=short] .customize-summary p{font-size:16px}
.start-steps{list-style:none;margin:0;padding:0;min-width:0}
.start-steps li{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.start-steps li:first-child{padding-top:0}
.start-steps li:last-child{border-bottom:0;padding-bottom:0}
.start-steps li>span{font:12px/1.8 ui-monospace,monospace;color:var(--muted);flex:0 0 24px}
.start-steps h3{font:600 17px/1.5 system-ui,sans-serif;margin:0 0 5px}
.start-steps p{font-size:14px!important;line-height:1.7;margin:0;color:var(--muted)}
.customize-summary .workflow-tuning{padding:26px;border-radius:8px;box-shadow:none}
.customize-summary .workflow-engine strong{font-size:17px}
.customize-summary .workflow-chips li{font-size:12px}
.customize-summary .architecture-note{font-size:13px!important}
body[data-structure=short] .homepage-example{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:48px}
body[data-structure=short] .local-summary{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px}
body[data-structure=short] .local-summary p{font-size:15px}
body[data-structure=short] #signup{background:var(--panel);border-radius:10px;margin:32px 40px 48px;padding:36px;max-width:none}
body[data-structure=short] footer{max-width:1200px;margin:auto}
/* Compact demonstration: one visual event per beat, a quiet common controller. */
.product-demo{display:grid;grid-template-columns:minmax(0,1fr);padding:24px;border-radius:10px;border-top-width:1px;box-shadow:0 16px 44px color-mix(in srgb,var(--d-ink) 5%,transparent);min-height:0!important;align-self:center}
.product-demo>.demo-top{grid-row:1;font-size:10px}
.product-demo>.demo-request{grid-row:2;margin:20px 0 16px}
.product-demo .demo-request>strong{font:600 clamp(21px,2vw,26px)/1.25 system-ui,sans-serif;white-space:normal;letter-spacing:-.035em}
.product-demo .demo-request-line,.product-demo .demo-you{display:none}
.product-demo>.demo-agent{grid-row:3;border:0;padding:0;gap:10px}
.product-demo .demo-agent strong{font-size:12px;min-height:1.4em;line-height:1.5}
.product-demo .demo-agent small{font-size:10px}
.product-demo .demo-spark{font-size:24px}
.product-demo>.demo-workflow{grid-row:4;padding:12px 0 8px;font-size:10px;margin-top:8px}
.product-demo>.demo-branches{grid-row:5;height:18px}
.product-demo>.demo-lanes{grid-row:6;gap:8px}
.product-demo .demo-lane{padding:12px 10px;border-radius:5px;min-height:93px}
.product-demo .demo-lane-icon{font-size:16px;margin-bottom:7px}
.product-demo .demo-lane>strong{font-size:12px;line-height:1.5;min-height:3em}
.product-demo .demo-lane-status{font-size:10px;margin:3px 0 8px}
.product-demo>.demo-outcome{grid-area:7/1;min-height:108px!important;padding:18px 0;gap:0;align-self:center}
.product-demo .demo-outcome-icon{display:none}
.product-demo .demo-outcome strong{font-size:19px;line-height:1.3;letter-spacing:-.025em}
.product-demo .demo-outcome p{font-size:13px;line-height:1.55;margin-top:6px}
.product-demo>.demo-memory{grid-row:8;padding:10px 12px;gap:10px;border-radius:5px;min-height:67px}
.product-demo .demo-memory strong{font-size:12px;line-height:1.5;min-height:3em}
.product-demo .demo-memory small{font-size:10px;line-height:1.5}
.product-demo .demo-memory-icon{font-size:22px}
.product-demo .demo-label{display:none}
.product-demo>.demo-response{grid-area:7/1;min-height:0!important;align-self:center;z-index:1}
.product-demo:is([data-phase=question],[data-phase=record],[data-phase=recall]) .demo-outcome{visibility:hidden}
.product-demo .demo-question{padding:0;margin:0;border:0}
.product-demo .demo-question p{font:600 21px/1.3 system-ui,sans-serif;margin:0;letter-spacing:-.025em}
.product-demo .demo-question small{font:10px/1.5 ui-monospace,monospace;margin-bottom:8px}
.product-demo .demo-answer{border-left:2px solid var(--d-accent);padding-left:16px}
.product-demo .demo-return{padding:0;align-items:center}
.product-demo .demo-return strong{font:600 18px/1.4 system-ui,sans-serif}
.product-demo .demo-return small{font-size:10px;line-height:1.5;margin-bottom:5px}
.product-demo>.demo-controls{grid-row:9;margin-top:14px;padding-top:8px;gap:16px}
.product-demo .demo-controls button{font:11px/1.5 system-ui,sans-serif;min-height:30px}
.product-demo>.demo-transcript{grid-row:10;margin-top:0;font-size:11px}
.product-demo .demo-transcript summary{font:11px/1.6 system-ui,sans-serif}
.product-demo>figcaption{grid-row:11;font:10px/1.6 system-ui,sans-serif;padding-top:5px}
.product-demo[data-product=cloud] .demo-lane:nth-child(2){background:color-mix(in srgb,var(--d-accent) 7%,var(--d-paper));border-color:var(--d-accent)}
.product-demo[data-product=cloud] .demo-branches{margin-left:16%;margin-right:16%}
.product-demo[data-product=cloud] .demo-top{color:var(--d-accent)}
@media(min-width:440px){.product-demo .demo-lane>strong{min-height:1.5em}.product-demo .demo-memory strong{min-height:1.5em}}
@media(max-width:980px){
 html[data-product=cloud] body[data-page=home] .hero,body[data-structure=short] .hero-grid{grid-template-columns:1fr;gap:30px}
 html[data-product=cloud] body[data-page=home] .hero h1,body[data-structure=short] .hero h1{max-width:15em}
 .hero .product-demo{max-width:600px!important;width:100%;justify-self:start}
 body[data-structure=short] :is(.working-start,.customize-summary,.homepage-example){gap:32px}
 html[data-product=cloud] header{gap:20px;padding-left:24px;padding-right:24px}
 html[data-product=cloud] header nav{gap:14px}
}
@media(max-width:720px){
 html[data-product=cloud] header{padding:14px 20px;flex-wrap:wrap;gap:12px}
 html[data-product=cloud] header nav{order:3;width:100%;justify-content:flex-start;gap:22px;margin:0}
 html[data-product=cloud] .header-actions{margin-left:auto;gap:12px}
 html[data-product=cloud] body[data-page=home] .hero{padding:32px 20px;gap:26px}
 html[data-product=cloud] body[data-page=home] .hero h1,body[data-structure=short] .hero h1{font-size:38px}
 html[data-product=cloud] .proposition,html[data-product=cloud] .section{padding:34px 20px;grid-template-columns:1fr;gap:24px}
 html[data-product=cloud] .continuity .terminal-replay{grid-column:auto}
 html[data-product=cloud] .section-number{grid-column:1}
 html[data-product=cloud] .review-section .section-copy{grid-row:2}
 html[data-product=cloud] .review-section .terminal-replay{grid-row:3}
 html[data-product=cloud] .research{padding:34px 20px}
 html[data-product=cloud] .access{margin:24px 20px;padding:24px}
 html[data-product=cloud] footer{padding:30px 20px}
 body[data-structure=short] nav{padding-left:20px;padding-right:20px}
 body[data-structure=short] section{padding:34px 20px}
 body[data-structure=short] .hero{padding:32px 20px}
 body[data-structure=short] :is(.working-start,.customize-summary,.homepage-example,.local-summary){grid-template-columns:minmax(0,1fr);gap:28px}
 body[data-structure=short] #signup{margin:24px 20px 36px;padding:24px}
 .product-demo{padding:18px;box-shadow:none}
 .product-demo .demo-top{font-size:9px;letter-spacing:.05em}
 .product-demo .demo-outcome strong{font-size:18px}
 .product-demo .demo-outcome p{font-size:12px}
 .product-demo .demo-workflow{font-size:9px}
 .product-demo .demo-state{font-size:9px;flex-basis:8ch}
 .customize-summary .workflow-tuning{padding:20px}
}
@media(max-width:380px){
 .product-demo{padding:14px}
 .product-demo .demo-lanes{gap:6px}
 .product-demo .demo-lane{padding:9px 7px}
 .product-demo .demo-lane>strong{font-size:11px}
 .product-demo .demo-memory strong{font-size:11px}
 .product-demo .demo-outcome{min-height:126px!important}
 .product-demo .demo-outcome p{font-size:11px}
 html[data-product=cloud] .button.small{font-size:11px;padding:8px}
}
@media(prefers-reduced-motion:reduce){.product-demo *{animation:none!important;transition:none!important}}

/* Hosted coordination has two endpoints, rather than three local work lanes. */
.product-demo[data-product=cloud] .demo-lane-icon svg{width:24px;height:23px;fill:none;stroke:var(--d-accent);stroke-width:1.4}
.product-demo .demo-machine{font:9px/1.5 ui-monospace,monospace;display:block;color:var(--muted);margin-bottom:4px}
.product-demo[data-product=cloud] .demo-lane{min-height:126px;z-index:1;background:var(--d-paper);display:flex;flex-direction:column}
.product-demo[data-product=cloud] .demo-lane:nth-child(2){border-radius:14px;align-self:stretch;min-height:112px;background:color-mix(in srgb,var(--d-accent) 7%,var(--d-paper))}
/* Align status and progress footers despite the optional machine labels. */
.product-demo[data-product=cloud] .demo-lane-status{margin-top:auto}
.product-demo[data-product=cloud] .demo-lane:nth-child(2) .demo-lane-icon{font-size:26px}
.product-demo[data-product=cloud] .demo-branches{visibility:hidden;height:14px}
.product-demo[data-product=cloud] .demo-lanes::before{content:'';height:1px;background:var(--d-accent);position:absolute;top:50%;left:0;right:0}
/* Reserve actual line boxes so a finding never moves the surrounding page. */
.product-demo .demo-lane-icon{height:24px;line-height:24px}
.product-demo .demo-agent{height:40px}
.product-demo .demo-outcome{height:140px;min-height:140px!important}
.product-demo .demo-memory{height:74px}
@media(max-width:440px){.product-demo .demo-agent{height:60px}.product-demo .demo-outcome{height:168px;min-height:168px!important}.product-demo .demo-memory{height:96px}}

@media(prefers-color-scheme:dark){html[data-product=cloud]:not([data-theme=light]) .button{color:#0f172a}}