/* How it works dialog */
#video-modal { padding: 0; overflow: hidden; }
.hw-wrap { max-width: 34rem; }
.hw-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.5rem 1.6rem; color: #FFFFFF; background-image: radial-gradient(circle at 100% 0, rgba(243, 220, 167, 0.42) 0, transparent 52%), radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.3px), linear-gradient(135deg, #7040C8, #3A1B63); background-size: auto, 18px 18px, auto; }
.hw-eyebrow { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #F3DCA7; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(243, 220, 167, 0.35); }
.hw-head h2 { margin: 0.7rem 0 0.2rem; font-family: var(--nv-font-display); font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; color: #FFFFFF; }
.hw-head p { margin: 0; font-size: 0.84rem; color: rgba(244, 238, 251, 0.82); }
.hw-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border-radius: 0.7rem; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.12); color: #FFFFFF; cursor: pointer; transition: background 0.2s ease; }
.hw-close:hover { background: rgba(255, 255, 255, 0.24); }
.hw-body { padding: 1.4rem 1.5rem 1.5rem; }
.hw-steps { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.hw-steps::before { content: ""; position: absolute; left: 1.55rem; top: 1.6rem; bottom: 1.6rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--nv-accent), var(--nv-gold)); opacity: 0.45; }
.hw-step { position: relative; display: flex; align-items: stretch; gap: 1rem; margin: 0; list-style: none; }
.hw-node { position: relative; z-index: 1; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem; border-radius: 1rem; font-size: 1.45rem; color: #FFFFFF; background: linear-gradient(135deg, #8B5CE0, #5B2FA8); box-shadow: 0 12px 22px -10px rgba(112, 64, 200, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 4px var(--nv-card); }
.hw-step:nth-child(3) .hw-node { background: linear-gradient(135deg, #F3DCA7, #D6AD63); color: #3A1B63; box-shadow: 0 12px 22px -10px rgba(214, 173, 99, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 4px var(--nv-card); }
.hw-node b { position: absolute; top: -0.35rem; right: -0.35rem; width: 1.2rem; height: 1.2rem; border-radius: 999px; font-size: 0.65rem; font-weight: 800; line-height: 1.2rem; text-align: center; color: var(--nv-accent); background: var(--nv-card); border: 1.5px solid var(--nv-accent); }
.hw-card { flex: 1; min-width: 0; padding: 0.8rem 1rem; border-radius: 1rem; background: var(--nv-hover); border: 1px solid var(--nv-border-soft); transition: border-color 0.2s ease, transform 0.2s ease; }
.hw-step:hover .hw-card { border-color: color-mix(in srgb, var(--nv-accent) 45%, var(--nv-border)); transform: translateX(2px); }
.hw-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.hw-card h3 { margin: 0; font-family: var(--nv-font-display); font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; color: var(--nv-text); }
.hw-tag { flex-shrink: 0; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--nv-accent); background: color-mix(in srgb, var(--nv-accent) 12%, transparent); }
.hw-card p { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--nv-muted); }
.hw-foot { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--nv-border-soft); }
.hw-foot .nv-btn { flex: 1 1 9rem; padding: 0.6rem 1rem; font-size: 0.82rem; text-decoration: none; }
@media (max-width: 479px) { .hw-head, .hw-body { padding-inline: 1.1rem; } .hw-tag { display: none; } .hw-steps::before { left: 1.4rem; } .hw-node { width: 2.8rem; height: 2.8rem; } }
@media (prefers-reduced-motion: reduce) { .hw-step:hover .hw-card { transform: none; } }