:root{--motion-depth:110px;--motion-tilt:3deg}
.product-showcase{padding:clamp(48px,7vw,100px) var(--pad);background:var(--bg-secondary);color:var(--text-primary);border-block:1px solid var(--border-strong)}
.showcase-heading{max-width:900px;margin-bottom:36px}
.showcase-heading h2,.depth-heading h2{font-size:clamp(42px,5.5vw,84px);line-height:1;letter-spacing:-.065em}
.showcase-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(240px,.65fr);gap:clamp(20px,4vw,60px);align-items:center}
.showcase-window{position:relative;min-width:0;min-height:430px;background:var(--graphite);overflow:hidden;border:1px solid var(--border-strong);border-radius:4px;perspective:1000px}
.showcase-window>img,.showcase-window>canvas{display:block;width:100%;height:430px;object-fit:contain;min-height:0}
.showcase-window>[hidden]{display:none}
.showcase-start{position:absolute;bottom:22px;left:22px}
.showcase-controls .tag{font-size:10px}
.showcase-note,.depth-note{font-size:12px;line-height:1.65;color:var(--text-secondary)}
.showcase-status{min-height:3.2em;font-size:16px;line-height:1.6}
.surface-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.surface-options[hidden],.showcase-finishes[hidden]{display:none}
.surface-options .button{justify-content:start;font-size:13px;padding:10px}
.surface-options small{font:10px monospace;color:var(--text-secondary)}
.showcase-navigation{margin-block:16px}
.showcase-finishes>p{font-size:13px}
.showcase-finishes>.tools>.swatch{width:36px;height:36px}
.surface-points{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.surface-points[hidden]{display:none}
.surface-points button{position:absolute;transform:translate(-50%,-50%);width:38px;height:38px;border:1px solid var(--text-primary);border-radius:50%;background:var(--bg-primary);color:var(--text-primary);display:grid;place-items:center;pointer-events:auto;box-shadow:0 0 0 5px rgb(11 13 15 / 20%);font:12px monospace;cursor:pointer}
.surface-points button[hidden]{display:none}
.surface-points button[aria-pressed=true]{background:var(--text-primary);color:var(--bg-primary)}
.surface-points button strong{position:absolute;left:46px;top:7px;padding:4px 7px;white-space:nowrap;background:var(--bg-primary);color:var(--text-primary);font-family:inherit;font-size:11px;line-height:1.3;opacity:0;pointer-events:none;border-radius:3px}
.surface-points button:hover strong,.surface-points button:focus-visible strong{opacity:1}
.surface-points button:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.studio-surface-options{display:flex;gap:5px;flex-wrap:wrap;padding:9px 14px 0}
.studio-surface-options[hidden]{display:none}
.studio-stage .surface-status{font-size:12px;color:var(--text-secondary);min-height:1.6em;padding:0 14px;margin:8px 0}
.studio-stage .surface-status:empty{display:none}
.controls fieldset.is-editing{border-color:var(--text-primary)}
[data-motion=full] .controls fieldset{transition:border-color var(--motion-panel)}
.depth-showcase{position:relative;padding:clamp(50px,7vw,105px) var(--pad);overflow:hidden;background:var(--bg-primary);color:var(--text-primary);border-block:1px solid var(--border-strong)}
.depth-heading{max-width:900px;margin-bottom:36px}
.depth-heading .lede{max-width:54ch}
.depth-layout{display:grid;grid-template-columns:minmax(230px,.56fr) minmax(0,1.44fr);align-items:center;gap:clamp(24px,4vw,70px)}
.depth-controls{display:grid;gap:0}
.depth-choice{display:flex;align-items:center;gap:20px;background:none;color:var(--text-secondary);border:0;border-top:1px solid var(--border-strong);padding:14px 10px;text-align:left;min-height:48px;cursor:pointer}
.depth-choice small{font:10px monospace}
.depth-choice span{font-size:clamp(17px,1.8vw,25px);letter-spacing:-.035em}
.depth-choice[aria-pressed=true]{color:var(--text-primary);box-shadow:inset 3px 0 currentColor;background:var(--bg-secondary)}
.depth-choice:hover{color:var(--text-primary)}
.depth-copy [role=status]{min-height:3.3em;font-size:15px;line-height:1.65;margin-block:20px}
.depth-copy>.button{font-size:13px;margin-bottom:10px}
.depth-visual{min-width:0;perspective:1300px;padding:18px 24px 32px 0}
.depth-stage{position:relative;height:clamp(340px,37vw,550px);perspective:1200px;isolation:isolate}
.depth-card{position:absolute;inset:0;margin:0;background:var(--bg-secondary);border:1px solid var(--border-strong);border-radius:5px;overflow:hidden;box-shadow:0 20px 45px var(--shadow-deep);transform-style:preserve-3d}
.depth-card[hidden]{display:none}
.depth-card>a{display:block;height:calc(100% - 42px);background:var(--graphite)}
.depth-card img{display:block;width:100%;height:100%;object-fit:contain}
.depth-card figcaption{display:flex;justify-content:space-between;gap:8px;align-items:center;height:42px;padding:10px 16px;font-size:13px}
.depth-card figcaption span{font:10px monospace;color:var(--text-secondary)}
.depth-card[data-position=active]{z-index:3;transform:translate3d(0,0,0);opacity:1}
.depth-card[data-position=next]{z-index:1;transform:translate3d(24px,18px,-110px) rotateY(-8deg);opacity:.38;pointer-events:none}
.flow-rail{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:3px;padding-top:30px;margin-top:26px;border-top:1px solid var(--border-strong);font:9px/1.5 monospace;color:var(--text-secondary);text-align:center}
.flow-packet{position:absolute;top:-6px;left:0;width:16.666%;height:12px;transform:translateX(calc(var(--active,0) * 100%));transition:transform var(--motion-reveal) var(--motion-ease)}
.flow-packet>span{display:block;width:10px;height:10px;border-radius:50%;background:var(--text-primary);margin:auto;box-shadow:0 0 0 5px rgb(243 241 234 / 8%)}
.flow-showcase[data-selected="4"] .depth-card[data-position=active]{border-color:var(--text-primary)}
[data-motion=full] .depth-card[data-position=next]{transition:transform var(--motion-reveal) var(--motion-ease),opacity var(--motion-panel)}
[data-motion=full] .depth-choice{transition:background-color var(--motion-panel),box-shadow var(--motion-panel),color var(--motion-fast)}
.film-window{overflow:hidden;border-radius:3px;background:var(--bg-primary)}
.film-window video{display:block;transform-origin:58% 62%;transition:transform var(--motion-reveal) var(--motion-ease);margin:0}
.sys-clip[data-framing=activity] video{transform:scale(1.14)}
.film-controls{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.film-controls[hidden]{display:none}
.film-controls .button{font-size:12px;padding:8px 10px;min-height:40px}
.film-status:empty{display:none}
.film-status{font-size:12px;color:var(--text-secondary)}
[data-motion=full] .button>span[aria-hidden]{transition:transform var(--motion-fast) var(--motion-ease)}
[data-motion=full] .button:hover>span[aria-hidden]{transform:translate(2px,-2px)}
[data-motion=full] .button{background-image:radial-gradient(circle at var(--pointer-x,50%) var(--pointer-y,50%),rgb(243 241 234 / 5%),transparent 72%)}
[data-motion=full] .model-option,[data-motion=full] .product-grid a{transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform var(--motion-panel) var(--motion-ease),border-color var(--motion-fast),background-color var(--motion-fast)}
.studio-steps a,.sys-index a{transition:box-shadow var(--motion-panel),color var(--motion-panel)}
.studio-steps a[aria-current=location],.sys-index a[aria-current=location]{box-shadow:inset 0 -2px currentColor}
[data-motion=full] #quote [aria-invalid=true]{animation:validation-focus var(--motion-panel) var(--motion-ease) both}
@keyframes validation-focus{from{box-shadow:0 0 0 4px color-mix(in srgb,var(--status-error) 20%,transparent)}to{box-shadow:0 0 0 1px var(--status-error)}}
[data-motion=full] .depth-visual{transform:perspective(1300px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform var(--motion-panel) var(--motion-ease)}
@media(max-width:900px){
 .showcase-layout,.depth-layout{grid-template-columns:1fr}
 .showcase-window,.showcase-window>img,.showcase-window>canvas{min-height:0;height:350px}
 .showcase-heading,.depth-heading{margin-bottom:24px}
 .showcase-controls{max-width:620px}
 .depth-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 9px}
 .depth-choice{gap:8px;padding:12px 4px}
 .depth-choice span{font-size:16px}
 .depth-copy [role=status]{margin-block:14px;min-height:3.3em}
 .depth-visual{order:-1;padding:0 12px 10px 0}
 .depth-stage{height:clamp(250px,65vw,440px)}
 .depth-layout{gap:24px}
 .depth-card[data-position=next]{transform:translate3d(14px,12px,-80px) rotateY(-4deg)}
 .flow-rail{margin-top:18px;padding-top:18px;font-size:8px}
 .showcase-status{min-height:2em}
 .surface-options{grid-template-columns:repeat(3,minmax(0,1fr))}
 .surface-options .button{font-size:12px}
}
@media(max-width:780px){
 .showcase-window,.showcase-window>img,.showcase-window>canvas{height:300px}
 .showcase-start{left:14px;bottom:14px;font-size:12px}
 .surface-points button{width:36px;height:36px}
 .surface-points button strong{display:none}
 .studio-surface-options{gap:4px;padding:6px 8px}
 .studio-stage .studio-surface-options .button{font-size:11px;min-height:36px;padding:6px 9px}
 .preview-pinned .studio-surface-options,.preview-pinned .surface-status{display:none}
 .depth-choice small{font-size:9px}
 .depth-heading h2,.showcase-heading h2{font-size:clamp(36px,10vw,60px)}
 .depth-card figcaption{font-size:12px;padding:8px}
 .depth-stage{height:280px}
}
[data-motion=reduced] .model-option,[data-motion=reduced] .product-grid a,[data-motion=reduced] .depth-visual{transform:none!important}
@media(prefers-reduced-motion:reduce){.model-option,.product-grid a,.depth-visual{transform:none!important}}

.surface-points button[aria-pressed=true]{background:transparent;color:var(--text-primary);border:2px solid currentColor;box-shadow:0 0 0 1px var(--bg-primary)}.surface-points button[aria-pressed=true]>span{position:absolute;left:-9px;top:-9px;border-radius:50%;background:var(--bg-primary);color:var(--text-primary);padding:3px 5px;font-size:10px;border:1px solid currentColor}

@supports(animation-timeline:view()){[data-motion=full] .product-showcase .showcase-window{animation:product-depth-entry linear both;animation-timeline:view();animation-range:entry 0% cover 35%}[data-motion=full] .depth-stage{animation:software-depth-entry linear both;animation-timeline:view();animation-range:entry 0% cover 30%}@keyframes product-depth-entry{from{transform:perspective(1200px) translateZ(-65px) rotateX(5deg);opacity:.9}to{transform:perspective(1200px) translateZ(0) rotateX(0);opacity:1}}@keyframes software-depth-entry{from{transform:perspective(1200px) rotateY(-4deg) translateZ(-35px)}to{transform:perspective(1200px) rotateY(0) translateZ(0)}}}@media(max-width:900px){.product-showcase .showcase-window,.depth-stage{animation:none!important}}

@media(max-width:780px){.depth-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.depth-choice{min-height:52px}.depth-choice span{font-size:15px;min-width:0;overflow-wrap:anywhere}.flow-rail>span{visibility:hidden}}

.depth-showcase,.product-showcase{--focus:var(--text-primary);--muted:var(--text-secondary);--line:var(--border-dark);--secondary-hover:var(--bg-elevated);--secondary-ink:var(--text-primary);--primary-bg:var(--text-primary);--primary-ink:var(--bg-primary)}.capture-index{margin-top:24px;font-size:12px;color:var(--text-secondary)}.capture-index summary{padding:10px 0}.capture-index nav{display:flex;flex-wrap:wrap;font-size:12px;padding-top:10px}.capture-index a{text-decoration:underline}.surface-points button strong{font-family:inherit;font-size:11px;line-height:1.3}

@media(max-width:780px){.depth-layout{display:flex;flex-direction:column;align-items:stretch}.depth-copy{display:contents}.depth-controls{order:0}.depth-copy>[data-deck-play]{order:1;align-self:start}.depth-visual{order:2;width:100%}.depth-copy>[role=status]{order:3}.depth-copy>.depth-note{order:4;margin:0}.depth-copy>[data-deck-link]{order:5;align-self:start}.depth-copy [role=status]{min-height:0;margin:0}}