/* Live 3D Studio page: walkthrough doc links, real Studio captures, control grid.
   Extends product-pages.css; same registers, no new tone. */

/* Doc links on walkthrough tiles and detail sections. */
.st-doc {display:inline-flex;align-items:center;gap:7px;margin-top:16px;color:#6b6c71;font-size:12.5px;font-weight:500;text-decoration:none}
.st-doc:hover {color:var(--ink)}
.st-doc svg {width:13px;height:13px;flex:none}
.st-doc small {color:#9a9ba0;font-size:inherit;font-weight:400}
.pp-step .st-doc {margin-top:14px}
.pp-list+.st-doc {margin-top:18px}

/* Real app captures framed as the browser window they were recorded in. */
.pp-detail-visual.st-app {display:block;min-height:0;place-items:initial;padding:clamp(16px,2vw,26px);border-radius:5px;background:#fbfbfc;box-shadow:0 24px 52px -46px rgba(16,16,18,.48);overflow:visible}
.st-app-window {border:1px solid var(--line);border-radius:6px;overflow:hidden;box-shadow:0 18px 40px -32px rgba(16,16,18,.4)}
.st-app-bar {display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-bottom:1px solid var(--line);background:#fbfbfc}
.st-app-bar>i {width:8px;height:8px;border-radius:50%;background:#e0e1e4}
.st-app-bar>span {display:inline-flex;align-items:center;height:24px;margin-left:10px;padding:0 10px;border:1px solid var(--line);border-radius:4px;background:#f4f4f5;color:#85868b;font-size:10px}
.st-app-bar>strong {display:flex;align-items:center;gap:6px;margin-left:auto;color:#55565b;font-size:10px;font-weight:500}
.st-app-bar>strong i {width:6px;height:6px;border-radius:50%;background:var(--accent)}
.pp-detail-visual.st-app video {width:100%;height:auto;min-height:0;display:block;background:#101012}

/* Flipped detail sections keep the wide column on the capture, not the copy. */
.pp-detail.st-flip .pp-detail-grid {grid-template-columns:minmax(0,7.5fr) minmax(340px,4.5fr)}
@media(max-width:1000px){
  .pp-detail.st-flip .pp-detail-grid {grid-template-columns:1fr}
}

/* Control grid: compact, distinct surfaces instead of oversized table cells. */
.st-controls {display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px;border:1px solid var(--line);border-radius:5px;background:#f5f5f6}
.st-control {min-height:88px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:13px 15px;border:1px solid rgba(24,24,27,.08);border-radius:5px;background:rgba(255,255,255,.86)}
.st-control strong {display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:500;letter-spacing:-.005em}
.st-control-icon {box-sizing:content-box;width:16px;height:16px;flex:none;padding:6px;border:1px solid rgba(255,82,58,.16);border-radius:5px;background:#fff8f6;color:var(--accent)}
.st-control span {padding-left:39px;color:#77787d;font-size:11.5px;line-height:1.4}

@media(max-width:900px){
  .st-controls {grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .st-controls {gap:6px;padding:6px}
  .st-control {min-height:0;padding:12px}
  .st-control-icon {width:15px;height:15px;padding:5px}
  .st-control span {padding-left:36px}
}