/* device frame (product screenshots) */
.device-frame { background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; }
.device-bar { display: flex; gap: 0.35rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--border); }
.device-bar span { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.device-screen { position: relative; width: 100%; aspect-ratio: 8 / 5; background: #15130F; }
.device-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
                      opacity: 0; transition: opacity 0.4s var(--ease); }
.device-screen img.active { opacity: 1; }

/* step tabs */
.steps { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.step-btn { font: inherit; text-align: left; background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radius); padding: 0.6rem 0.85rem; cursor: pointer; flex: 1 1 150px;
            transition: border-color 0.15s var(--ease), background 0.15s var(--ease); color: var(--fg-muted); }
.step-btn .n { font-family: var(--font-mono); font-size: 0.72rem; color: var(--accent); }
.step-btn .t { display: block; font-size: 0.88rem; color: var(--fg); font-weight: 500; margin-top: 0.15rem; }
.step-btn[aria-selected="true"] { border-color: var(--accent); background: var(--accent-soft); }