/* Canonical branding: docs/marketing/BRAND-WORDMARK.md. */
.logo .wordmark { color: var(--color-ink); }
.logo .wordmark > span { color: var(--color-tangerine); }
.howto-page { max-width: 760px; margin: 0 auto; padding: 36px 24px 56px; }
.howto-page h1 { margin: 8px 0 12px; font-size: clamp(28px, 5vw, 40px); line-height: 1.12; letter-spacing: -.04em; }
.howto-eyebrow { margin: 0; font-size: 11px; letter-spacing: .13em; font-weight: 600; color: var(--color-muted); }
.howto-summary { margin: 0; max-width: 580px; font-size: 16px; line-height: 1.55; color: var(--color-muted); }
.howto-player { width: min(100%, 360px); aspect-ratio: 9/16; margin: 24px auto 16px; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface); }
.howto-player iframe { display: block; width: 100%; height: 100%; border: 0; }
.howto-chapters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0; }
.howto-chapters button { border: 1px solid var(--color-hairline); border-radius: var(--radius-pill); background: var(--color-surface); padding: 9px 14px; font: inherit; font-size: 13px; color: var(--color-ink); cursor: pointer; }
.howto-chapters button:hover, .howto-page a { color: var(--color-tangerine); }
.howto-youtube { text-align: center; font-size: 14px; margin: 16px 0; }
.howto-page ol { padding-left: 23px; margin: 32px 0; font-size: 16px; line-height: 1.6; }
.howto-steps-heading { margin: 32px 0 8px; font-size: 20px; }
.howto-page .howto-steps-heading + ol { margin-top: 8px; }
.howto-help { margin: 32px 0 0; font-size: 14px; }
.howto-page li { padding-left: 4px; margin: 12px 0; }
.howto-more { margin-top: 48px; }
.howto-more h2 { font-size: 20px; letter-spacing: -.025em; }
.howto-more nav { display: grid; gap: 8px; }
.howto-more a { padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-surface); display: flex; gap: 12px; align-items: center; color: var(--color-ink); }
.howto-more small { margin-left: auto; color: var(--color-muted); white-space: nowrap; }
.howto-page :focus-visible { outline: 2px solid var(--color-tangerine); outline-offset: 4px; }
@media (max-width: 600px) { .howto-page { padding: 24px 20px 40px; } .howto-player { width: min(100%, 310px); } .howto-more a { font-size: 14px; } }