:host{font-family:var(--font-body),Inter,sans-serif;color:var(--color-text-secondary);font-size:12px;line-height:1.5;letter-spacing:0;font-weight:400;--pad:26px;container-type:inline-size}
*,*::before,*::after{box-sizing:border-box}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--color-primary-hover);outline-offset:3px;scroll-margin-top:112px;scroll-margin-bottom:8px}button:hover{color:var(--color-text-primary)}h2,.illustration-label,p,dl,dd,ol{margin:0}h2,.illustration-label{font:600 18px/1.3 var(--font-body),Inter,sans-serif;letter-spacing:-.02em;color:var(--color-text-primary)}strong{font-weight:550;color:var(--color-text-primary)}small{font-size:11px;color:var(--color-text-muted)}img{object-fit:contain;flex-shrink:0}svg{display:block;overflow:visible}button{background:none;border:0;padding:0;text-align:left}button[aria-pressed=true]{color:var(--color-text-accent)}
.frame{width:100%;height:100%;display:grid;grid-template-rows:46px minmax(0,1fr) 46px;background:var(--surface-technical);border:1px solid var(--technical-frame-border);border-radius:6px;box-shadow:none;overflow:hidden}
.chrome{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 var(--pad);min-width:0}.top{border-bottom:1px solid var(--technical-frame-border)}.top>span:first-child{font-size:12px;color:var(--color-text-accent);text-transform:uppercase;letter-spacing:.065em}.top .count{font-size:11px;color:var(--color-text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}.bottom{border-top:1px solid var(--technical-frame-border);background:var(--technical-bg-panel)}.bottom span{font-size:11px;color:var(--color-text-muted)}.bottom button{font-size:12px;white-space:nowrap;min-height:34px;color:var(--color-text-secondary)}
.canvas{padding:var(--pad);min-width:0;min-height:0;display:flex;flex-direction:column;gap:16px}.story{min-height:0;flex:1;display:flex;flex-direction:column;gap:16px}.caption{border-top:1px solid var(--technical-frame-border);padding-top:12px;display:flex;gap:12px;align-items:flex-start;min-height:53px}.caption small{padding-top:3px}.caption .illustration-label{font-size:16px}.caption p{margin-top:3px;font-size:12px}.kicker{display:block;font-size:11px;color:var(--color-text-muted);letter-spacing:.05em;text-transform:uppercase}.heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.heading p{font-size:12px;margin-top:3px}.value{font-size:24px;line-height:1.25;color:var(--color-text-primary);font-weight:550;letter-spacing:-.035em}.node{background:var(--technical-bg-panel);border:1px solid var(--technical-frame-border);border-radius:4px;padding:12px;transition:background-color var(--motion-text-swap) var(--motion-ease),border-color var(--motion-text-swap) var(--motion-ease),color var(--motion-text-swap) var(--motion-ease)}.node[data-active=true]{background:var(--color-primary-tint);border-color:var(--color-primary)}.node[data-active=true]>.kicker{color:var(--color-text-accent)}.connector{height:20px;flex:0 0 20px;align-self:center;width:1px;background:var(--technical-frame-border);position:relative;overflow:hidden}.connector[data-active=true]{background:var(--color-primary)}.connector::after{content:"";position:absolute;top:-8px;left:0;width:1px;height:8px;background:var(--color-primary);animation:packet 1800ms var(--motion-ease) infinite}.flow{fill:none;stroke:var(--technical-frame-border);stroke-width:1;vector-effect:non-scaling-stroke}.flow[data-active=true]{stroke:var(--color-primary)}.packet{stroke:var(--color-primary);stroke-width:2;stroke-dasharray:8 92;stroke-dashoffset:0;animation:flow 2300ms var(--motion-ease) infinite;fill:none;vector-effect:non-scaling-stroke}
.stage-nav{display:flex;gap:5px;min-height:20px}.stage-nav button{flex:1;border-top:2px solid var(--technical-frame-border);padding-top:5px;font-size:11px;color:var(--color-text-muted)}.stage-nav button[aria-pressed=true]{border-color:var(--color-primary);color:var(--color-text-accent)}.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.line{height:1px;background:var(--technical-frame-border)}.chip{border:1px solid var(--technical-frame-border);border-radius:3px;padding:5px 8px;font-size:12px;background:var(--technical-bg-panel)}.chips{display:flex;flex-wrap:wrap;gap:6px}.symbol{width:28px;height:28px;color:var(--color-text-muted);flex:none}.symbol svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.2}.node[data-active=true] .symbol{color:var(--color-primary)}
/* Service ecosystem: one workload, six different service boundaries. */
.ecosystem-core{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;flex:1;min-height:135px}.workload-document{width:100%;max-width:none;padding:14px 18px;position:relative}.workload-document .kicker{border-bottom:1px solid var(--technical-frame-border);padding-bottom:7px;margin-bottom:9px}.workload-document strong{font-size:18px}.ecosystem-bus{width:100%;height:26px}.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.services button{padding:12px 9px;min-height:62px;display:flex;flex-direction:column;gap:6px}.services .symbol{width:22px;height:22px}.services .symbol svg{width:22px;height:22px}.services strong{font-size:12px}
/* Hosting: keep the account boundary and every operational layer visible. */
.account{padding:16px;display:flex;flex-direction:column;gap:14px;flex:1}.site-line{display:flex;gap:14px;align-items:center;padding:10px 12px}.site-line strong{font-size:18px}.resource{padding:10px 8px}.resource strong{display:block;font-size:12px}.resource small{font-size:11px}.storage-line{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--technical-frame-border);padding-top:12px}.tool-rail{display:grid;grid-template-columns:1fr 1fr;gap:10px}.tool-rail .node{padding:10px 12px}.tool-rail small{display:block}
/* WordPress: a publication at the centre of a maintenance cycle. */
.wp-workspace{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:175px}.wp-workspace>svg{position:absolute;inset:0;width:100%;height:100%}.wp-site{z-index:1;width:68%;padding:18px;text-align:center}.wp-site img{width:42px;height:42px;margin:0 auto 9px}.wp-site strong{display:block;font-size:18px}.publication{display:flex;gap:6px;margin-top:12px;justify-content:center}.publication i{height:26px;flex:1;max-width:52px;border:1px solid var(--technical-frame-border);background:var(--technical-bg-panel)}.wp-modules .node{text-align:center;padding:12px 8px}.wp-modules strong{display:block;font-size:12px}.wp-checks{display:flex;gap:14px;justify-content:center;font-size:12px}.wp-checks span::before{content:'✓';color:var(--color-text-accent);margin-right:5px}
/* cPanel: a single control centre, seven named account tools. */
.control-hub{display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--technical-frame-border);padding:10px 0 20px}.control-hub img{width:102px;height:32px}.control-hub span{border-left:1px solid var(--technical-frame-border);padding-left:16px}.control-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:1}.control-tools .node{display:flex;gap:12px;align-items:center;padding:10px 12px}.control-tools .node:last-child{grid-column:1/-1}.control-tools strong{display:block;font-size:13px}.control-tools small{display:block}
/* LiteSpeed: a contained orbit, symmetrical intake and delivery. */
.delivery{position:relative;flex:1;min-height:185px;display:flex;align-items:center;justify-content:center}.delivery svg{position:absolute;inset:0;width:100%;height:100%}.delivery img{width:160px;max-width:42%;height:44px;z-index:1}.delivery-labels{display:flex;justify-content:space-between;font-size:12px}.delivery-core-note{position:absolute;top:67%;font-size:11px;color:var(--color-text-muted)}.environment{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--technical-frame-border);padding-top:15px}.environment strong{font-size:13px;display:block}.environment span{font-size:11px;color:var(--color-text-muted)}
/* Bitcoin: compact transaction-to-hosting sequence, official payment artwork. */
.payment-journey{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;flex:1}.payment-journey::before{content:'';position:absolute;top:20px;bottom:20px;left:17px;width:1px;background:var(--technical-frame-border)}.payment-step{position:relative;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:center}.step-marker{display:grid;place-items:center;width:35px;height:35px;border:1px solid var(--technical-frame-border);border-radius:50%;background:var(--surface-technical);font-size:12px;color:var(--color-text-muted)}.payment-step[data-active=true] .step-marker{border-color:var(--color-primary);color:var(--color-text-accent)}.payment-step .node{padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px}.payment-step strong{font-size:14px}.payment-step small{display:block}.coins{display:flex;gap:7px}.coins img{width:23px;height:23px}.mini-site{width:30px;height:25px;border:1px solid var(--technical-frame-border);padding:5px}.mini-site:before,.mini-site:after{content:'';display:block;height:2px;background:var(--color-text-muted);margin-bottom:4px}
/* Compare: allocation diagrams accompany six persistent resource models. */
.model-list{display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:8px;flex:1;min-height:0}.model{display:grid;grid-template-columns:24px 1fr 94px;gap:12px;align-items:center;padding:0 12px}.model strong{font-size:13px;display:block}.model small{font-size:11px}.allocation{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;height:26px}.allocation i{background:var(--technical-bg-panel);border:1px solid var(--technical-frame-border);transition:border-color var(--motion-text-swap) var(--motion-ease),background var(--motion-text-swap) var(--motion-ease)}.model[data-active=true] .allocation i[data-emphasis=true]{border-color:var(--color-primary);background:var(--color-primary-tint)}.model[data-model='2'] .allocation{gap:0}.model[data-model='3'] .allocation{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}.model[data-model='5'] .allocation{grid-template-columns:repeat(3,1fr)}
/* Migration: a two-column readiness map, not a tall application list. */
.migration-map{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:14px;flex:1;min-height:0}.migration-map .node{display:flex;flex-direction:column;gap:8px;position:relative}.migration-map .node:nth-child(odd)::after{content:'→';position:absolute;right:-13px;top:40%;color:var(--color-text-muted);font-size:12px}.migration-map .node strong{font-size:14px}.migration-map .node small{font-size:12px}.migration-assets{display:flex;gap:12px;justify-content:space-between;border-bottom:1px solid var(--technical-frame-border);padding-bottom:12px;font-size:12px}
/* Finder: a requirement funnel, with a separate result and product fit. */
.finder-stack{flex:1;display:flex;flex-direction:column;gap:8px;justify-content:center}.finder-input{display:flex;align-items:center;gap:14px}.finder-input strong{font-size:18px;display:block}.finder-signals{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding:8px 0}.fit-engine{display:flex;align-items:center;gap:12px;justify-content:center;padding:12px}.fit-engine::before,.fit-engine::after{content:'';width:32px;height:1px;background:var(--color-primary)}.finder-output{text-align:center;padding:14px}.finder-output .value{margin:5px 0}.finder-output small{display:block;margin-top:7px}.finder-result-link{height:16px;flex:0 0 16px}.product-fit{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--technical-frame-border);margin-top:10px;padding-top:10px;font-size:12px}
/* Dedicated retains its location selector, processor, resource row and price. */
.location-nav{display:flex;justify-content:space-between;gap:4px;min-height:24px}.location-nav button{font-size:11px;padding:1px 2px;border-bottom:1px solid transparent}.location-nav button[aria-pressed=true]{border-color:var(--color-primary)}.location-title{text-align:center;padding:5px 0}.location-title .value{margin-top:5px;font-size:26px}.dedicated-spec{display:flex;flex-direction:column;gap:20px;flex:1;justify-content:center}.processor{display:flex;align-items:center;gap:16px;padding:18px}.processor strong{display:block;font-size:18px;margin-top:4px}.resources{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:12px}.resources>div:not(:last-child){border-right:1px solid var(--technical-frame-border);padding-right:10px}.resources dt{font-size:11px;color:var(--color-text-muted);margin-bottom:7px}.resources dd{font-size:13px;color:var(--color-text-primary)}.resources small{display:block;margin-top:5px}.price{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--technical-frame-border);padding-top:18px}.price strong{font-size:26px}.price small{font-size:12px}.review{padding:24px;text-align:center}.review p{margin:10px 0}
.frame[data-running=false],.frame[data-running=false] *,.frame[data-running=false]::before,.frame[data-running=false]::after,.frame[data-running=false] *::before,.frame[data-running=false] *::after{animation-play-state:paused!important}.frame[data-reduced=true] *,.frame[data-reduced=true] *::before,.frame[data-reduced=true] *::after{animation:none!important;transition:none!important}
@keyframes packet{to{top:100%}}@keyframes flow{to{stroke-dashoffset:-100}}
@container(max-width:470px){.migration-map{gap:12px}.migration-map .node{padding-block:8px;gap:4px}:host{--pad:24px}.canvas,.story{gap:12px}.caption{min-height:50px}.caption p{font-size:12px}.ecosystem-core{min-height:100px;gap:8px}.workload-document{padding-block:8px}.workload-document .kicker{margin-bottom:5px;padding-bottom:5px}.ecosystem-core .service-sketch{height:36px;margin-top:0}.services button{min-height:56px;padding:10px 7px}.account{padding:12px;gap:10px}.wp-workspace{min-height:140px}.control-tools{gap:8px}.control-tools .node{padding:8px 10px}.control-hub{padding:0 0 12px}.model{grid-template-columns:20px 1fr 76px;gap:8px}.delivery{min-height:155px}.dedicated-spec{gap:14px}.processor{padding:14px}.resources{gap:8px}.resources dd{font-size:12px}}
@media(max-width:900px){:host{--pad:20px}.canvas,.story{gap:10px}.caption{padding-top:9px;min-height:46px}.caption .illustration-label{font-size:16px}.caption p{display:none}.ecosystem-core{min-height:80px;gap:8px}.workload-document{padding:9px 14px}.workload-document strong{font-size:16px}.services{gap:6px}.services button{padding:8px;min-height:53px}.services .symbol{display:none}.services strong{font-size:12px}.account{gap:8px;padding:12px}.site-line{padding:5px 12px}.site-line strong{font-size:16px}.resource{padding:7px 6px}.resource small{font-size:11px}.storage-line{padding-top:8px}.tool-rail .node{padding:8px}.tool-rail small{font-size:11px}.wp-workspace{min-height:120px}.wp-site{padding:12px}.wp-site img{width:32px;height:32px;margin-bottom:6px}.wp-site strong{font-size:16px}.publication{margin-top:8px}.publication i{height:18px}.wp-modules .node{padding:7px}.wp-checks{gap:10px}.control-hub img{width:86px;height:28px}.control-tools{gap:6px}.control-tools .node{padding:6px 9px;gap:8px}.control-tools small{font-size:11px}.control-tools strong{font-size:12px}.symbol,.symbol svg{width:24px;height:24px}.payment-journey{gap:8px}.payment-step .node{padding:8px 10px}.coins{gap:4px}.coins img{width:20px;height:20px}.model-list{gap:6px}.model{padding:0 8px;grid-template-columns:18px 1fr 66px}.model strong{font-size:12px}.model small{font-size:11px}.allocation{height:22px;gap:2px}.migration-map{gap:10px}.migration-map .node{padding:8px;gap:3px}.migration-map .node small{font-size:11px}.migration-map .node strong{font-size:13px}.migration-assets{gap:8px;padding-bottom:7px;font-size:12px}.finder-stack{gap:6px}.finder-input{padding:9px 12px}.finder-input strong{font-size:16px}.finder-signals{padding:3px 0;gap:5px}.chip{padding:3px 6px}.fit-engine{padding:8px}.finder-output{padding:10px}.finder-output .value{font-size:20px;margin:3px 0}.product-fit{padding-top:7px;margin-top:7px}.location-title{padding:0}.location-title .value{font-size:24px}.dedicated-spec{gap:12px}.processor{padding:12px;gap:12px}.processor strong{font-size:16px}.resources{grid-template-columns:1fr 1.2fr;gap:12px}.resources>div:nth-child(2){border:0;padding:0}.resources>div:last-child{grid-column:1/-1;display:flex;gap:10px;align-items:center}.resources>div:last-child dt{margin:0}.resources>div:last-child small{margin:0}.resources dt{margin-bottom:4px}.price{padding-top:10px}.price strong{font-size:24px}.location-nav button{font-size:11px}.review{padding:12px}}
.flow{transition:stroke var(--motion-structure) var(--motion-ease)}
.service-sketch{display:block;margin-top:0;height:56px}
.service-sketch>div{height:100%;display:flex;align-items:center;justify-content:space-between}
.service-sketch .symbol,.service-sketch .symbol svg{width:22px;height:22px;color:var(--color-text-accent)}
.service-sketch small{color:var(--color-text-secondary)}
.sketch-unit{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;height:100%}
.sketch-link{color:var(--color-primary)}
.sketch-environments .sketch-unit{width:30%;border:1px solid var(--technical-frame-border);border-radius:var(--radius-data)}
.sketch-browser{width:55%;height:100%;border:1px solid var(--technical-frame-border);border-radius:var(--radius-data);overflow:hidden}
.sketch-browser-bar{height:20%;display:flex;align-items:center;border-bottom:1px solid var(--technical-frame-border)}
.sketch-browser-bar b{width:3px;height:3px;background:var(--color-text-muted);border-radius:var(--radius-round);margin:0 1%}
.sketch-page{height:80%;display:flex;align-items:center;justify-content:space-around}
.sketch-media{width:42%;height:72%;display:grid;place-items:center;background:var(--color-primary-tint)}
.sketch-content{width:42%;height:70%;display:flex;flex-direction:column;justify-content:space-around}
.sketch-content span{height:2px;width:100%;background:var(--technical-frame-border)}
.sketch-content span:last-child{width:70%}
.sketch-site-tools{width:40%;display:flex;flex-wrap:wrap;justify-content:space-around}
.sketch-site-tools small:last-child{flex-basis:100%;text-align:center}
.sketch-allocation{border:1px solid var(--technical-frame-border);border-radius:var(--radius-data)}
.sketch-allocation>.symbol{width:16%;height:100%;display:grid;place-items:center;border-right:1px solid var(--technical-frame-border)}
.sketch-resources{width:80%;display:flex;justify-content:space-around}
.sketch-resources>div{width:22%}
.sketch-allocation-line{display:block;width:90%;height:3px;background:var(--color-text-accent)}
.sketch-stream>.sketch-unit{width:24%}
.sketch-outputs{width:25%;display:flex;flex-wrap:wrap;justify-content:space-around}
.sketch-outputs small:last-child{flex-basis:100%;text-align:center}
.sketch-volumes{width:70%;height:100%;display:flex;flex-direction:column;justify-content:space-between}
.sketch-volumes>div{display:flex;align-items:center;justify-content:space-between}
.sketch-volumes small{width:30%}
.sketch-volume{display:block;width:65%;height:4px;background:var(--technical-frame-border)}
.sketch-volume b{display:block;height:100%;background:var(--color-text-accent)}
.sketch-storage>.sketch-unit{width:20%}
.sketch-queue,.sketch-workers{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.sketch-queue{width:24%}.sketch-queue>span{color:var(--color-text-accent)}
.sketch-workers{width:42%}.sketch-workers>div{display:flex;justify-content:space-around;width:100%}
.sketch-compute>.sketch-unit{width:22%}
@container(max-width:470px){.service-sketch .symbol,.service-sketch .symbol svg{width:16px;height:16px}.sketch-volumes{flex-direction:row;align-items:center}.sketch-volumes>div{width:30%;display:block}.sketch-volumes small,.sketch-volume{width:100%}}
@media(min-width:901px) and (max-width:1279px){.ecosystem-core .service-sketch{height:36px;margin-top:0}.service-sketch .symbol,.service-sketch .symbol svg{width:16px;height:16px}.sketch-volumes{flex-direction:row;align-items:center}.sketch-volumes>div{width:30%;display:block}.sketch-volumes small,.sketch-volume{width:100%}}
@media(max-width:900px){.ecosystem-core .service-sketch{height:40px;margin-top:0}.service-sketch .symbol,.service-sketch .symbol svg{width:18px;height:18px}.sketch-volumes{flex-direction:row;align-items:center}.sketch-volumes>div{width:30%;display:block}.sketch-volumes small,.sketch-volume{width:100%}}
@media(max-width:900px){.service-sketch{margin-top:9px;height:28px}.workload-document .kicker{font-size:11px;margin-bottom:5px;padding-bottom:5px}.workload-document p{font-size:11px}}
.frame[data-running=true] .caption .illustration-label{animation:var(--swap-name) var(--motion-text-swap) var(--motion-ease) both}.frame[data-running=true] .dedicated-spec{animation:var(--swap-name) var(--motion-structure) var(--motion-ease) both}.frame[data-running=false] .caption .illustration-label,.frame[data-running=false] .dedicated-spec{opacity:1;transform:none}
@keyframes hmf-swap-a{from{opacity:.72;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@keyframes hmf-swap-b{from{opacity:.72;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.frame[data-running=false],.frame[data-running=false] *{transition:none!important}.frame[data-running=false] .caption .illustration-label,.frame[data-running=false] .dedicated-spec{animation:none!important;opacity:1;transform:none}
/* Compact composition preserves the safe area, including at the 500px role. */
@media(min-width:901px) and (max-width:1279px){:host{--pad:24px}.canvas,.story{gap:8px}.caption{min-height:36px;padding-top:8px}.caption p{display:none}.caption .illustration-label{font-size:16px}.account{padding:12px;gap:8px}.site-line{padding:6px 12px}.site-line strong{font-size:16px}.resource{padding:7px}.storage-line{padding-top:8px}.tool-rail .node{padding:8px}.control-tools{gap:7px}.control-tools .node{padding:7px 10px}.control-hub{padding-bottom:12px}.wp-workspace{min-height:115px}.wp-site{padding:12px}.wp-site img{width:32px;height:32px;margin-bottom:6px}.wp-site strong{font-size:16px}.publication{margin-top:8px}.publication i{height:18px}.wp-modules .node{padding:8px}.delivery{min-height:100px}.heading .illustration-label{font-size:16px}.environment{padding-top:10px}.environment strong{font-size:12px}.stage-nav{min-height:18px}.finder-stack{gap:4px}.finder-input{padding:9px 12px}.finder-signals{padding:2px 0}.finder-result-link{height:8px;flex-basis:8px}.fit-engine{padding:8px}.finder-output{padding:10px}.finder-output .value{font-size:22px;margin:3px 0}.product-fit{padding-top:7px;margin-top:7px}.dedicated-spec{gap:12px}.processor{padding:12px}.location-title{padding:0}.price{padding-top:12px}}
@media(max-width:900px){.caption{min-height:36px;padding-top:8px}.delivery{min-height:115px}.finder-stack{gap:4px}.finder-result-link{height:8px;flex-basis:8px}.finder-signals{padding:2px 0}.fit-engine{padding:8px}.chip{padding:2px 6px}.wp-workspace{min-height:120px}}

/* The intermediate desktop workload needs its existing 80% track for two-word titles. */
@container(max-width:500px){@media(min-width:901px){.workload-document{max-width:none}}}
/* Keep the Finder stage index clear of the footer in the intermediate frame. */
@container(max-width:470px){@media(min-width:1280px){.finder-stack{gap:6px}.finder-signals{padding-block:2px}.finder-output{padding-block:10px}}}

/* OPTIONAL-STATIC-HERO-STORY-01: opt-in only; original frame/chrome unchanged. */
.frame[data-static-story] .static-canvas{padding:var(--space-section-compact);overflow:hidden}
.static-story,.static-story>div{width:100%;height:100%;min-height:0;overflow:hidden}
.static-story svg{width:100%;height:100%;display:block;overflow:hidden}
.static-story .static-node{fill:var(--color-bg-surface);stroke:var(--color-border);stroke-width:1.5}
.static-story .static-core{fill:var(--color-primary-tint);stroke:var(--color-primary);stroke-width:1.5}
.static-story .static-line{fill:none;stroke:var(--color-primary);stroke-width:1.5}
.static-story .static-detail{fill:none;stroke:var(--color-border);stroke-width:1}
.static-story .static-label{fill:var(--color-text-primary);font:500 18px var(--font-body);letter-spacing:1px}
.static-story .static-secondary{fill:var(--color-text-accent);font:500 14px var(--font-body);letter-spacing:1px}
@media(max-width:1279px){.frame[data-static-story] .static-canvas{padding:var(--space-facts)}}
@media(max-width:900px){.frame[data-static-story] .static-canvas{padding:var(--page-gutter-mobile)}}

/* Explicit opt-in: retain host geometry, safe area and clipped story bounds. */
.frame[data-static-story][data-presentation="open"]{grid-template-rows:minmax(0,1fr);background:none;border:0;border-radius:0;box-shadow:none}

/* Existing Palette D neutral roles; opt-in paint only, no geometry changes. */
.static-story .static-line.static-neutral{stroke:var(--color-text-secondary)}
.static-story .static-secondary.static-neutral{fill:var(--color-text-secondary)}
.static-story .static-core.static-neutral{fill:var(--color-bg-surface)}

/* Page #26 approved static OPEN story: existing technical-figure paint roles only. */
.frame[data-static-story][data-presentation="open"] .static-core.static-neutral{fill:var(--color-bg-surface-2);stroke:var(--color-border)}
.frame[data-static-story][data-presentation="open"] .static-node.static-neutral{fill:var(--color-bg-surface-2)}
.frame[data-static-story][data-presentation="open"] .static-line.static-neutral{stroke:var(--color-text-muted)}
.frame[data-static-story][data-presentation="open"] .static-line.static-secondary{fill:none;stroke:var(--color-text-accent)}
.frame[data-static-story][data-presentation="open"] text.static-detail{fill:var(--color-text-muted);stroke:none}
.frame[data-static-story][data-presentation="open"] image{opacity:.7}

/* Hero-only alignment to Page #26's accepted body figure roles; geometry unchanged. */
.frame[data-static-story][data-presentation="open"] .static-story svg{background:var(--color-bg-surface);border-radius:var(--radius-technical)}
.frame[data-static-story][data-presentation="open"] .static-node{fill:var(--color-bg-surface-2)}
.frame[data-static-story][data-presentation="open"] .static-label{font:var(--type-product-h1-weight) var(--type-body) var(--font-body);letter-spacing:normal}
.frame[data-static-story][data-presentation="open"] .static-secondary{font:400 var(--type-small) var(--font-body);letter-spacing:normal}

/* Shared motion-control grammar; fixed native footer height retained. */
.bottom button[data-pause]{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px}.bottom button[data-pause] svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}

/* Horizontal region expansion only. The drawing keeps its native desktop canvas. */
@media(min-width:901px){
  .frame>.canvas{width:100%;max-width:calc(var(--hmf-width) - 2px);justify-self:center}
  .frame[data-single-tenant-open]>.canvas,.frame[data-static-story][data-presentation="open"]>.canvas{max-width:var(--hmf-width)}
}