/* Camera setup guide */
.page { max-width: 760px; margin: 0 auto; padding: clamp(24px, 5vw, 56px) var(--gutter) 64px; display: flex; flex-direction: column; gap: 16px; }
.intro { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.lead { max-width: 56ch; }
.small { font-size: 13px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card h2 { margin-bottom: 16px; }
.section-head h2 { margin-bottom: 0; }

.creds-card { border-color: rgba(212, 175, 55, .35); background: linear-gradient(180deg, rgba(212, 175, 55, .06), rgba(10, 10, 10, .9) 60%); }
.creds-card .creds { margin-bottom: 12px; }

.brands { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.brand-btn { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font: 500 13px var(--font-body); cursor: pointer; transition: all var(--fast); }
.brand-btn:hover { color: var(--text); border-color: #3a3a3a; }
.brand-btn[aria-checked="true"] { color: var(--accent-ink); background: var(--text); border-color: var(--text); }

.status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; border: 1px solid; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.success { color: var(--success); border-color: rgba(74, 222, 128, .35); background: rgba(74, 222, 128, .07); }
.status.warning { color: var(--warning); border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .07); }
.status.danger { color: var(--danger); border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .07); }
.status.muted { color: var(--muted); border-color: var(--border); }

.note { margin-top: 14px; padding: 12px 14px; border-left: 2px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; font-size: 14px; }

.steps { list-style: none; counter-reset: step; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; }
.steps li { counter-increment: step; position: relative; padding: 14px 0 14px 48px; border-top: 1px solid var(--border); line-height: 1.6; }
.steps li:first-child { border-top: 0; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 14px; font: 500 13px var(--font-mono); color: var(--accent); }
.steps code.val { color: var(--accent); border-color: rgba(212, 175, 55, .35); background: rgba(212, 175, 55, .08); font-size: 1em; }
.steps code.placeholder { color: var(--muted); }

.tips ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; color: var(--muted); font-size: 14px; }