/*
 * Platform demo pages (demo-video/gate and demo-video/watch). Builds on core.css (.field, .phone-row, buttons) and
 * home.css (nav, footer, kicker).
 */

.dv-hero { position: relative; overflow: hidden; padding: 7.5rem 0 4rem; }
.dv-hero-bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(46rem 30rem at 80% 20%, rgba(61, 220, 151, .1), transparent 70%),
        radial-gradient(40rem 28rem at 0% 0%, rgba(41, 92, 81, .35), transparent 70%);
}
@media (min-width: 1000px) { .dv-hero { padding: 9rem 0 5rem; } }
.dv-grid { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1000px) { .dv-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 4rem; } }
.dv-title { margin-top: 1rem; font-size: clamp(2.3rem, 5vw, 3.8rem); font-weight: 800; line-height: 1.05; letter-spacing: -.04em; color: var(--text); }
.dv-title em { font-style: normal; color: var(--mint); }
.dv-lede { margin-top: 1.2rem; max-width: 34rem; font-size: 1.05rem; line-height: 1.7; color: var(--text-2); }
.center .dv-lede { margin-left: auto; margin-right: auto; }
.dv-points { display: grid; gap: .55rem; margin-top: 1.5rem; padding: 0; list-style: none; font-size: .92rem; color: var(--text-2); }
.dv-points li { display: flex; align-items: center; gap: .55rem; }
.dv-points svg { width: 1rem; height: 1rem; flex: none; color: var(--mint); }

/* A video "poster" that shows what unlocks */
.dv-poster {
    position: relative; display: grid; place-items: center; max-width: 30rem; aspect-ratio: 16 / 9; margin-top: 2rem; border-radius: 1.4rem;
    background: radial-gradient(70% 90% at 30% 20%, rgba(61, 220, 151, .22), transparent 60%), linear-gradient(135deg, #0f2a22, #0b1512);
    box-shadow: inset 0 0 0 1px var(--line-2);
}
.dv-poster-play { display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; color: #04140e; background: var(--mint); box-shadow: 0 0 0 10px rgba(61, 220, 151, .15), 0 20px 40px -10px rgba(61, 220, 151, .5); }
.dv-poster-play svg { width: 1.6rem; height: 1.6rem; margin-left: .2rem; }
.dv-poster-lock { position: absolute; bottom: .9rem; left: 50%; transform: translateX(-50%); padding: .3rem .8rem; border-radius: 9999px; font-size: .74rem; font-weight: 600; white-space: nowrap; color: var(--text-2); background: rgba(5, 11, 9, .7); }

/* Gate form */
.dv-card { padding: 1.75rem; border-radius: 1.75rem; background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025)); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px -40px rgba(0, 0, 0, .8); }
@media (min-width: 640px) { .dv-card { padding: 2.25rem; } }
.dv-card h2 { font-size: 1.35rem; font-weight: 700; letter-spacing: -.025em; color: var(--text); }
.dv-card-sub { margin-top: .35rem; font-size: .88rem; color: var(--text-3); }
.dv-card .btn-block { margin-top: 1.5rem; }
.dv-card button[type="submit"]:disabled { opacity: .7; cursor: progress; }
.dv-fine { margin-top: .9rem; text-align: center; font-size: .76rem; color: var(--text-3); }
.dv-alert { margin-top: 1rem; padding: .75rem .9rem; border-radius: .85rem; font-size: .84rem; color: #fecaca; background: rgba(239, 68, 68, .1); box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .35); }
.dv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Watch page */
.dv-player { max-width: 60rem; margin: 2.5rem auto 0; overflow: hidden; border-radius: 1.75rem; background: #000; box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 90px -40px rgba(0, 0, 0, .9), 0 0 120px -40px rgba(61, 220, 151, .3); }
.dv-player video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.dv-soon { display: grid; place-items: center; align-content: center; gap: .6rem; aspect-ratio: 16 / 9; padding: 2rem; text-align: center; background: linear-gradient(135deg, #0f2a22, #0b1512); }
.dv-soon b { margin-top: .75rem; font-size: 1.1rem; color: var(--text); }
.dv-soon p { max-width: 26rem; font-size: .9rem; line-height: 1.6; color: var(--text-3); }
.dv-next { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }