/* Scenario explanations extend the existing paper / ink / ribbon palette. */
.use-case{padding:100px 4.4%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px 7%;border-top:1px solid var(--line);scroll-margin-top:30px}
.use-copy{align-self:center;max-width:560px}.use-product{font-size:16px;color:var(--sub);margin:0 0 22px}.use-case h2{font-size:clamp(30px,3.2vw,52px);line-height:1.22;letter-spacing:-.03em;margin:0 0 24px}.use-lead{font-size:16px;line-height:1.9;color:var(--sub);margin:0 0 30px}
.use-steps{display:grid}.use-steps button{text-align:left;padding:20px 18px;border-bottom:1px solid var(--line);border-radius:0;transition:background .2s;color:var(--ink)}.use-steps button:first-child{border-top:1px solid var(--line)}.use-steps button[aria-pressed=true]{background:#e8f1dc}.use-steps button:hover{background:#edf2e6}.use-steps strong{display:block;font-size:17px;font-weight:600;margin-bottom:8px}.use-steps span{display:block;font-size:13px;line-height:1.8;color:var(--sub)}.use-note{font-size:12px;line-height:1.9;color:var(--sub);margin:24px 0 0}.use-demo{min-width:0;align-self:center}.use-demo-caption{font-size:14px;line-height:1.8;margin:20px 0 8px;min-height:50px}.use-disclaimer{font-size:11px;color:var(--sub);line-height:1.8}
.use-case-board{background:#eef2e8}.server-guide{grid-column:1/-1;border-top:1px solid var(--line);padding-top:42px;display:grid;grid-template-columns:1fr 1.15fr;gap:22px 7%}.server-guide h3{font-size:27px;line-height:1.4;letter-spacing:-.02em;margin:0 0 18px}.server-guide p{font-size:14px;color:var(--sub);line-height:1.9;margin:8px 0 20px}.server-guide ol{padding-left:24px;margin:0}.server-guide li{padding-left:6px;margin-bottom:18px}.server-guide li::marker{color:var(--sub)}.server-guide strong{font-size:16px;font-weight:600}.server-guide details{grid-column:1/-1;border-top:1px solid var(--line);padding-top:22px;font-size:14px}.server-guide summary{cursor:pointer}.server-prompt{max-width:880px}.copy-server-prompt{padding:10px 18px;border:1px solid var(--ink);border-radius:6px;font-size:13px}.copy-server-status{margin-left:12px;font-size:12px;color:var(--sub)}
@media(max-width:760px){.use-case{padding:62px 6%;grid-template-columns:minmax(0,1fr);gap:30px}.use-case h2{font-size:34px}.use-product{margin-bottom:16px}.use-lead{font-size:14px}.use-steps button{padding:16px 12px}.use-steps strong{font-size:15px}.use-copy{max-width:none}.use-demo-caption{min-height:0}.server-guide{grid-template-columns:minmax(0,1fr);gap:18px;padding-top:30px}.server-guide h3{font-size:25px}.server-guide details{grid-column:auto}}
@media(prefers-reduced-motion:reduce){.use-steps button{transition:none}}

/* Geometry from the existing 306×654 hardware asset: screen (12,11), 282×632.
   Both pages render at 390×874.04 logical pixels, then scale uniformly. */
.scenario-phone{position:relative;width:min(100%,380px);aspect-ratio:306/654;margin:0 auto;isolation:isolate}
.scenario-phone-hardware{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.scenario-phone-screen{position:absolute;left:3.9215686%;top:1.6819572%;width:92.1568627%;height:96.6360856%;clip-path:url(#scenario-screen-clip);overflow:clip;background:#ededed}
.scenario-phone-viewport{position:absolute;top:0;left:0;width:390px;height:874.042553px;transform-origin:top left;display:flex;flex-direction:column;background:#fff}
.scenario-phone-island{position:absolute;z-index:10;pointer-events:none;top:10px;left:145px;width:100px;height:27px;border-radius:18px;background:#090909}
.scenario-clawbot{display:block;border:0;width:100%;height:100%;flex:1;min-height:0;background:#ededed}
.scenario-relay{display:block;border:0;width:100%;flex:1;min-height:0;background:#fff}
.scenario-board-status{height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:8px 20px 0 24px;font:600 15px/1 -apple-system,sans-serif;color:rgba(0,0,0,.9);background:#fff}
.scenario-board-status>span:first-child{min-width:50px;text-align:center;letter-spacing:-.2px}
.scenario-board-indicators{display:flex;align-items:center;gap:6px}.scenario-board-indicators img{width:18px;height:13px}.scenario-board-battery{position:relative;display:inline-flex;width:25px;height:12px;padding:2px;border:1.5px solid currentColor;border-radius:3px}.scenario-board-battery::after{content:"";position:absolute;top:3px;right:-3.5px;width:2px;height:5px;border-radius:0 1px 1px 0;background:currentColor}.scenario-board-battery>i{width:82%;height:100%;border-radius:1px;background:currentColor}
.scenario-board-home{height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff}.scenario-board-home span{width:134px;height:5px;border-radius:3px;background:#111}

.scenario-claw-home{position:absolute;bottom:10px;left:128px;width:134px;height:5px;border-radius:3px;background:#111;pointer-events:none;z-index:8}

/* The native main-panel and composer use --page (not the outer body --canvas).
   Fill the aperture too: subpixel scaling must never expose gray device chrome. */
.scenario-phone-board .scenario-phone-screen,.scenario-phone-board .scenario-phone-viewport,.scenario-board-status,.scenario-board-home,.scenario-relay{background:var(--scenario-relay-page,#fff)}
@media(prefers-color-scheme:dark){
  .scenario-phone-board .scenario-phone-screen,.scenario-phone-board .scenario-phone-viewport,.scenario-board-status,.scenario-board-home,.scenario-relay{background:var(--scenario-relay-dark-page,#212121);color:#ececec}
  .scenario-board-indicators img{filter:invert(1)}
  .scenario-board-home span,.scenario-claw-home{background:#ececec}
}

.scenario-phone-board{transition:transform .35s cubic-bezier(.22,.8,.3,1),z-index 0s linear .35s}.scenario-phone-board.is-terminal-focus{transform:scale(1.18);transform-origin:center top;z-index:6}.scenario-phone-board.is-terminal-focus .scenario-phone-screen{box-shadow:0 18px 40px rgba(24,39,25,.16)}
@media(max-width:760px){.scenario-phone-board.is-terminal-focus{transform:scale(1.06)}}