* { box-sizing: border-box; }
:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; }
body { margin: 0; min-height: 100vh; background: linear-gradient(110deg, #fff8f5, #f8fafc 48%, #edf3fc); color: #101827; }
.page { width: min(960px, 100%); min-height: 100vh; margin: 0 auto; padding: 38px 28px 64px; background: rgba(255,255,255,.58); }
.brand { text-align: center; margin: 0 auto 24px; }
.brand-icon { width: 72px; height: 72px; margin: 0 auto 14px; display: grid; place-items: center; color: #fff; font-size: 35px; font-weight: 900; border-radius: 18px; background: linear-gradient(145deg, #ff7a35, #ef4e20); box-shadow: 0 12px 28px rgba(239,78,32,.25); }
h1 { margin: 0; font-size: clamp(38px, 7vw, 58px); line-height: 1; letter-spacing: -3px; font-weight: 900; }
h1 span { color: #f15a24; } h1 b { color: #126dc6; font-weight: 900; }
.brand p { margin: 12px 0 0; color: #657184; font-size: 12px; letter-spacing: 3px; font-weight: 800; }
.content { display: grid; grid-template-columns: minmax(260px, 380px) minmax(300px, 1fr); gap: 20px; align-items: start; max-width: 880px; margin: 0 auto; }
.video-wrap { min-width: 0; }

/* Video container — NO overlay elements on top of the video */
.video-container { width: 100%; aspect-ratio: 400 / 736; border-radius: 20px; overflow: hidden; background: #111; box-shadow: 0 10px 30px rgba(16,24,39,.15); }
.video-container video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Play button sits BELOW the video, never on top */
.play-btn { display: block; width: 100%; margin-top: 10px; padding: 14px; border: 0; border-radius: 12px; background: #f4511e; color: #fff; font: inherit; font-size: 15px; font-weight: 900; letter-spacing: 1px; cursor: pointer; transition: background .15s; }
.play-btn:hover { background: #dc4216; }
.play-btn.playing { background: #4b5563; }

.form { min-width: 0; padding-top: 2px; }
label { display: block; margin: 16px 0 7px; color: #4f5c6f; font-size: 11px; font-weight: 900; letter-spacing: 1.4px; }
.eyebrow { margin-top: 0; color: #ef5c27; }
.intro { margin: 0 0 14px; color: #657184; font-size: 14px; line-height: 1.55; }
input, textarea { width: 100%; border: 1px solid #d8dee7; border-radius: 12px; padding: 14px; background: #fff; color: #172033; font: inherit; font-size: 14px; outline: none; }
textarea { resize: vertical; min-height: 120px; }
input:focus, textarea:focus { border-color: #1875d1; box-shadow: 0 0 0 3px rgba(24,117,209,.12); }
.submit { width: 100%; margin-top: 14px; border: 0; border-radius: 12px; padding: 15px; background: #f4511e; color: white; font: inherit; font-size: 14px; font-weight: 900; cursor: pointer; }
.submit:hover { background: #dc4216; } .submit:disabled { opacity: .6; cursor: wait; }
.status { min-height: 18px; margin: 12px 0 0; font-size: 13px; font-weight: 700; } .status.error { color: #c62828; } .status.success { color: #16804a; }
@media (max-width: 680px) { .page { padding: 28px 16px 40px; } .content { grid-template-columns: 1fr; } .video-wrap { max-width: 360px; width: 100%; margin: 0 auto; } }