/* Help modal: a topic switcher, a play button that turns into the tutorial video, and the steps. */
.help-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.1rem; }
.help-tab { border: 1px solid var(--bs-border-color); background: transparent; color: inherit; border-radius: 99px; padding: .3rem .85rem; font-size: .85rem; font-weight: 600; }
.help-tab:hover { border-color: #ff6b5b; }
.help-tab.active { background: linear-gradient(135deg, #ff6b5b, #ffb341); border-color: transparent; color: #fff; }
.help-kicker { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #ff6b5b; }
.help-video { position: relative; aspect-ratio: 16 / 9; border-radius: .9rem; overflow: hidden; background: #1d1a45; margin-bottom: 1.1rem; }
.help-video video { width: 100%; height: 100%; display: block; background: #000; }
.help-play { position: absolute; inset: 0; width: 100%; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; color: #fff; background: linear-gradient(160deg, #3a3380, #1d1a45) center / cover; }
.help-play::before { content: ""; position: absolute; inset: 0; background: rgba(29, 26, 69, .45); transition: background .15s; }
.help-play:hover::before { background: rgba(29, 26, 69, .25); }
.help-play-icon, .help-play-label { position: relative; }
.help-play-icon { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; font-size: 2.6rem; background: linear-gradient(135deg, #ff6b5b, #ffb341); box-shadow: 0 10px 30px -10px rgba(255, 107, 91, .9); transition: transform .15s; }
.help-play:hover .help-play-icon { transform: scale(1.08); }
.help-play-label { font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.help-steps { padding-left: 1.3rem; margin-bottom: .75rem; }
.help-steps li { margin-bottom: .4rem; }
.help-steps li::marker { color: #ff6b5b; font-weight: 800; }
.help-body p:last-child { margin-bottom: 0; }
.help-fab { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1040; display: inline-flex; align-items: center; gap: .35rem; border: 0; border-radius: 99px; padding: .6rem 1.1rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #ff6b5b, #ffb341); box-shadow: 0 10px 24px -8px rgba(255, 107, 91, .9); }
.help-fab:hover { filter: brightness(1.06); }
.nav-link[data-help] { cursor: help; }
.nav-link[data-help="page"] { cursor: pointer; }