.device{overflow-x:clip}
.device-scene{--tilt-x:58deg;--tilt-z:-38deg;--spread:72px;--plate-w:min(320px,72%);--plate-ratio:16/10;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(2rem,5vw,5rem)}
.device-scene[data-device=iphone],.device-scene[data-device=android]{--plate-w:min(170px,40%);--plate-ratio:9/19}
.device-rail{display:grid;align-content:start;gap:1.5rem}
.layer-step{border-top:1px solid var(--hairline)}
.layer-step:last-child{border-bottom:1px solid var(--hairline)}
.layer-button{display:flex;align-items:center;gap:1rem;width:100%;min-height:52px;padding:0;border:0;background:none;color:var(--pewter);font-size:1.25rem;letter-spacing:-.01em;text-align:left;transition:color var(--duration-fast)}
.layer-button:hover,.layer-button[aria-pressed=true]{color:var(--silver)}
.layer-index{font:var(--text-label)/1 var(--font-mono);color:var(--pewter)}
.layer-button[aria-pressed=true] .layer-index{color:var(--ember)}
.layer-body{padding-bottom:1.5rem}
.layer-body h3{font-size:var(--text-h3);font-weight:300;letter-spacing:-.03em;line-height:1.05}
.layer-body p{max-width:30rem;margin-top:.75rem;color:var(--mist)}
.layer-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem;margin-top:1.25rem}
.layer-details div{padding:.55rem 0;border-top:1px solid var(--hairline)}
.layer-details dt{color:var(--pewter);font-size:var(--text-label);letter-spacing:.1em;text-transform:uppercase}
.layer-details dd{margin-top:.15rem;font-size:var(--text-small)}

.device-figure{display:grid;gap:1rem}
.device-visual{position:relative;height:clamp(380px,56vh,600px)}
.stack{position:absolute;inset:0;display:grid;place-items:center;perspective:1600px;translate:0 calc(var(--spread) * 1.5)}
.plate{--lift:0px;grid-area:1/1;position:relative;width:var(--plate-w);aspect-ratio:var(--plate-ratio);border:1px solid #5d5f68;border-radius:20px;background:linear-gradient(150deg,#36373d,#1d1e22);box-shadow:inset 0 1px 0 #ffffff1f,0 40px 60px -30px #000;opacity:.6;transform:translate3d(0,calc(var(--i) * var(--spread) * -1),0) rotateX(var(--tilt-x)) rotateZ(var(--tilt-z));translate:0 calc(var(--lift) * -1);transition:opacity var(--duration-normal),border-color var(--duration-normal),box-shadow var(--duration-normal),translate 450ms var(--ease)}
.plate[data-plate=hardware]{--i:0}
.plate[data-plate=browser]{--i:1}
.plate[data-plate=fingerprint]{--i:2}
.plate[data-plate=behavior]{--i:3}
.plate svg{position:absolute;inset:12%;width:76%;height:76%}
.device-scene[data-layer=hardware] [data-plate=hardware],
.device-scene[data-layer=browser] [data-plate=browser],
.device-scene[data-layer=fingerprint] [data-plate=fingerprint],
.device-scene[data-layer=behavior] [data-plate=behavior]{--lift:16px;opacity:1;border-color:var(--ember);box-shadow:inset 0 1px 0 #ffffff26,0 0 0 1px #ed978755,0 0 70px -12px #ed9787aa,0 40px 60px -30px #000}
.plate .p-line{fill:none;stroke:#ffffff40;stroke-width:1.5}
.plate .p-accent{fill:none;stroke:var(--ember);stroke-width:1.5}
.plate .p-fill{fill:#ffffff14;stroke:#ffffff40}
.plate text{fill:var(--mist);font:600 13px var(--font-mono);text-anchor:middle;dominant-baseline:middle}
.plate [data-fingerprint] path{fill:none;stroke:#ed9787aa;stroke-width:.8}
.device-id{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;color:var(--pewter);font-size:var(--text-small)}
.device-id b{color:var(--silver);font:500 var(--text-label)/1 var(--font-mono)}

/* Pinned (full motion, ≥1024×800): only the active layer's copy shows. */
.device-scene.is-pinned{min-height:calc(100svh - var(--header-h))}
.device-scene.is-pinned .layer-steps{position:relative;padding-bottom:var(--body-space)}
.device-scene.is-pinned .layer-body{position:absolute;left:0;right:0;top:calc(100% - var(--body-space) + 1.5rem);transition:opacity 400ms var(--ease),visibility 400ms}
.device-scene.is-pinned .layer-step[data-active=false] .layer-body{opacity:0;visibility:hidden}
.device-scene.is-pinned .plate{will-change:transform}

/* Two columns, not pinned (short laptops, static, reduced motion): the stack stays beside the copy. */
@media (min-width:1024px){
  .device-scene:not(.is-pinned){--spread:clamp(44px,7.5vh,72px)}
  .device-scene:not(.is-pinned) .device-figure{position:sticky;top:calc(var(--header-h) + 1.5rem);align-self:start}
}

@media (max-width:1023px){
  .device-scene{--spread:48px;grid-template-columns:1fr}
  .device-figure{order:-1}
  .device-visual{height:clamp(320px,70vw,460px)}
  .device-rail .segmented{justify-self:start}
}

/* One column with room: the stack becomes a compact band under the header. */
@media (max-width:1023px) and (min-height:640px){
  .device-scene{--spread:clamp(18px,3vh,26px);--plate-w:min(220px,60%,30vh);--band-visual:clamp(190px,30vh,260px)}
  .device-scene[data-device=iphone],.device-scene[data-device=android]{--plate-w:min(120px,30%,14vh)}
  .device-figure{position:sticky;top:var(--header-h);z-index:5;gap:.5rem;margin-inline:calc(var(--gutter) * -1);padding:0 var(--gutter) 1rem;background:linear-gradient(var(--obsidian) calc(100% - 1rem),transparent)}
  .device-visual{height:var(--band-visual)}
  .device-id{font-size:var(--text-label);gap:.35rem}
  .layer-step,.layer-button{scroll-margin-top:calc(var(--header-h) + var(--band-visual) + 3.5rem)}
}
@media (max-width:480px){.layer-details{grid-template-columns:1fr}}