/* Install steps. */

.install-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: start; }
.install-intro h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
.install-intro p { margin-top: 1.2rem; max-width: 30em; }
.warn { padding: 16px 18px; background: var(--surface); border-left: 6px solid var(--sun); border-radius: 4px var(--r-sm) var(--r-sm) 4px; }
.tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 2px solid var(--ink); border-radius: 999px; margin-bottom: 24px; flex-wrap: wrap; }
.tabs button { min-height: 44px; padding: .3rem 1.2rem; border: 0; background: transparent; border-radius: 999px; font-weight: 700; }
.tabs button[aria-selected="true"] { background: var(--btn-bg); color: var(--btn-fg); }
.tabs button:not([aria-selected="true"]):hover { background: var(--panel); }
.steps { counter-reset: s; display: grid; gap: 14px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 18px; background: var(--surface); border-radius: var(--r-md); }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); font-family: var(--display); font-weight: 700; font-size: 1.5rem; }
.steps li span { align-self: center; }
@media (min-width: 900px) { .install-grid { grid-template-columns: .9fr 1.1fr; } }