/* /how-it-works/ (28 Oct 2026): three how-to videos. Loaded after /css/site.css; same tokens, light theme only. */
.howto-list { list-style: none; margin: 0; padding: 0 0 8px; display: grid; gap: clamp(28px, 4vw, 44px); }
.howto { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; }
.howto-player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--navy); box-shadow: var(--shadow); }
.howto-video { width: 100%; height: 100%; object-fit: cover; background: var(--navy); }
.howto-soon { position: absolute; left: 16px; top: 16px; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--navy); font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
.howto.is-ready .howto-soon { display: none; }
.howto.is-ready .howto-video { object-fit: contain; background: #000; }
.howto-text { display: grid; gap: 10px; align-content: start; }
.howto-num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--grad); color: #fff; font-weight: 800; font-size: 12px; }
.howto-text h2 { font-size: clamp(18px, 2.2vw, 24px); }
.howto-text p { color: var(--ink-2); font-size: 12.75px; }
.howto-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(32px, 5vw, 56px) 0 clamp(40px, 6vw, 72px); }
@media (max-width: 820px) { .howto { grid-template-columns: minmax(0, 1fr); } }