/* Customers page. Tokens only. */
.feature-list.one { grid-template-columns: 1fr; }

.window-grid { display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .window-grid { grid-template-columns: 1.1fr .9fr; } }
.window-states { display: grid; gap: 16px; margin: 28px 0; }
.window-states .w { display: grid; grid-template-columns: 128px 1fr; gap: 6px 16px; align-items: start; padding: 16px 0; border-top: 1px solid color-mix(in oklab, var(--canvas) 25%, transparent); }
.window-states .w p { margin: 0; color: color-mix(in oklab, var(--canvas) 78%, transparent); }
:root[data-theme="dark"] .window-states .w { border-top-color: var(--line); }
:root[data-theme="dark"] .window-states .w p { color: var(--ink-2); }
.band-ink .chip { background: color-mix(in oklab, var(--canvas) 16%, transparent); color: var(--canvas); }
:root[data-theme="dark"] .band-ink .chip { color: var(--ink); background: var(--surface-2); }
.band-ink .checks li { color: color-mix(in oklab, var(--canvas) 80%, transparent); }
:root[data-theme="dark"] .band-ink .checks li { color: var(--ink-2); }

.online-grid { display: grid; gap: clamp(28px, 5vw, 64px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .online-grid { grid-template-columns: 1fr 1fr; } }
.device-pair { display: flex; gap: 20px; justify-content: center; align-items: flex-start; }
.device-pair .device:last-child { margin-top: 48px; }
@media (max-width: 480px) { .device-pair { gap: 12px; } .device-pair .device.sm { width: 46%; } }
.status-flow { list-style: none; margin: 0; padding: 0; display: grid; }
.status-flow li { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px dashed var(--line); color: var(--ink-2); }
.status-flow li:last-child { border-bottom: 0; }

.kinds { display: grid; gap: 0; grid-template-columns: 1fr; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-1); overflow: hidden; }
@media (min-width: 900px) { .kinds { grid-template-columns: 240px 1fr; } }
.kind-tabs { display: flex; overflow-x: auto; gap: 6px; padding: 12px; background: var(--surface-2); scrollbar-width: none; }
@media (min-width: 900px) { .kind-tabs { flex-direction: column; overflow: visible; padding: 16px; } }
.kind-tabs button { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: var(--r); border: 0; background: transparent; color: var(--ink-2); font: 600 .9688rem/1 var(--font-body); cursor: pointer; text-align: left; }
.kind-tabs button:hover { background: var(--surface); }
.kind-tabs button[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); }
.kind-panel { padding: clamp(20px, 3vw, 36px); display: grid; gap: 24px 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 700px) { .kind-panel { grid-template-columns: 1fr auto; } }
.kind-panel[hidden] { display: none; }
.kind-panel .eg { font: 650 1.25rem/1.3 var(--font-display); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 18px; }
.kind-panel .handles { margin-top: 8px; }
.kind-panel .device { justify-self: center; }

.deals-grid .device.sm { width: min(100%, 260px); }
.deals-grid { display: grid; gap: clamp(28px, 5vw, 72px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .deals-grid { grid-template-columns: 300px 1fr; } .deals-grid .device { margin-inline: auto; } }
.stage-row { display: grid; grid-template-columns: 1fr; gap: 0; }

.helpers { display: grid; gap: 0; border-top: 1px solid var(--line); }
.helpers .h { display: grid; gap: 8px 32px; padding: 28px 0; border-bottom: 1px solid var(--line); grid-template-columns: 1fr; }
@media (min-width: 768px) { .helpers .h { grid-template-columns: 56px 220px 1fr; align-items: start; } }
.helpers .h p { margin: 0; color: var(--ink-2); max-width: 60ch; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-ink .checks li { color: var(--ink-2); }
  :root:not([data-theme="light"]) .band-ink .chip { color: var(--ink); background: var(--surface-2); }
  :root:not([data-theme="light"]) .window-states .w { border-top-color: var(--line); }
  :root:not([data-theme="light"]) .window-states .w p { color: var(--ink-2); }
}

/* System dark without data-theme: site.css flips --ink to light, which would make .band-ink a light band. Keep it a dark band. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-ink { background: var(--surface-2); color: var(--ink); }
  :root:not([data-theme="light"]) .band-ink h1, :root:not([data-theme="light"]) .band-ink h2, :root:not([data-theme="light"]) .band-ink h3 { color: var(--ink); }
  :root:not([data-theme="light"]) .band-ink .lede, :root:not([data-theme="light"]) .band-ink .body { color: var(--ink-2); }
}