:root { --navy:#04193c; --cyan:#04c4e2; --paper:#fbfbfc; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--navy); background:var(--paper); font-family:Manrope,Arial,sans-serif; }
.navbar { height:86px; padding:10px 24px; position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:center; background:var(--navy); border-bottom:1px solid #0b2d5b; box-shadow:0 3px 18px #00112642; }.logo-link { display:flex; align-items:center; }.logo-link img { display:block; width:clamp(170px,20vw,255px); height:62px; object-fit:contain; object-position:center; }
.page-shell { min-height:100vh; overflow:hidden; }
.hero { min-height:calc(100vh - 344px); padding:40px 24px 0; text-align:center; position:relative; background:radial-gradient(circle at 53% 64%,#fff 0,#fff 38%,#f7f8fa 85%); }
.eyebrow { display:flex; align-items:center; justify-content:center; gap:12px; font-size:16px; font-weight:800; letter-spacing:.8px; margin:0 0 34px; }
.eyebrow span { width:21px; height:2px; background:var(--cyan); }
h1 { font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif; text-transform:none; font-size:clamp(64px,9.6vw,112px); line-height:.98; letter-spacing:-1.7px; font-weight:900; margin:0; }
h1 em { font-style:normal; color:var(--cyan); white-space:nowrap; }
.intro { font-size:23px; line-height:1.72; font-weight:500; margin:27px 0 45px; letter-spacing:-.35px; }
.benefits { display:flex; justify-content:center; gap:57px; align-items:center; position:relative; z-index:2; }
.benefits div { display:flex; align-items:center; gap:12px; white-space:nowrap; font-size:16px; }
.benefits b { font-weight:800; }
.icon { display:inline-block; width:38px; height:38px; border:3px solid var(--navy); position:relative; flex:0 0 auto; }
.play,.target { border-radius:50%; }.play:after { content:''; position:absolute; left:13px; top:8px; border-left:12px solid var(--navy); border-top:8px solid transparent; border-bottom:8px solid transparent; }.clipboard { border-radius:3px; }.clipboard:before { content:''; position:absolute; width:12px; height:5px; border:3px solid var(--navy); border-bottom:0; border-radius:4px 4px 0 0; top:-7px; left:10px; }.clipboard:after { content:'☷'; position:absolute; font-size:25px; line-height:22px; top:5px; left:6px; }.target:before,.target:after { content:''; position:absolute; background:var(--navy); }.target:before { width:4px; height:46px; left:14px; top:-7px; }.target:after { width:46px; height:4px; top:14px; left:-7px; }.target { box-shadow:inset 0 0 0 8px var(--paper),inset 0 0 0 11px var(--navy); }
.photo-wrap { margin:25px auto -1px; height:min(44vw,570px); min-height:390px; max-width:860px; overflow:hidden; position:relative; isolation:isolate; mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 82%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 7%,#000 82%,transparent 100%); }
.photo-wrap:after { content:''; position:absolute; z-index:1; inset:auto 0 0; height:24%; background:linear-gradient(transparent,#f9fafb); pointer-events:none; }
.photo-wrap img { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:grayscale(1) contrast(1.14) drop-shadow(0 20px 22px #00183d2b); }
.signup { position:relative; z-index:4; min-height:258px; display:grid; place-items:center; padding:26px 24px 17px; color:white; background:radial-gradient(circle at 50% -40%,#093b70 0%,#041e48 48%,#02132e 100%); }
form { width:min(680px,100%); }.email-field { height:76px; display:flex; align-items:center; gap:20px; background:#fff; border-radius:11px; padding:0 24px; box-shadow:0 4px 10px #0002; }.email-field span { color:#68717a; font-size:34px; line-height:1; }.email-field input { width:100%; height:100%; border:0; outline:0; color:var(--navy); font:500 20px Manrope,sans-serif; }.email-field input::placeholder { color:#8b8b8b; }button { width:100%; margin-top:16px; border:0; border-radius:11px; height:73px; color:#001537; background:linear-gradient(105deg,#04bddd,#10cce1); font:800 26px 'Barlow Condensed',Impact,sans-serif; letter-spacing:.6px; cursor:pointer; transition:transform .2s,filter .2s; }button:hover { filter:brightness(1.07); transform:translateY(-2px); }button:disabled { cursor:wait; filter:saturate(.55); }.secure { margin:15px 0 0; font-size:16px; color:#fff; }.secure:first-letter { font-size:22px; }.consent { margin:7px 0 0; color:#b8c9dd; font-size:11px; }.form-message { min-height:18px; font-size:13px; margin:7px 0 0; color:#89edff; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:760px) { .navbar { height:66px; padding:5px 16px; }.logo-link img { width:160px; height:55px; }.hero { padding-top:28px; min-height:740px; }.eyebrow { font-size:13px; margin-bottom:23px; } h1 { font-size:clamp(59px,17vw,85px); letter-spacing:-1px; }.intro { font-size:16px; line-height:1.6; margin:23px auto 29px; max-width:400px; }.desktop-break { display:none; }.benefits { gap:20px; flex-wrap:wrap; }.benefits div { font-size:11px; gap:7px; }.icon { transform:scale(.7); margin:-5px; }.photo-wrap { height:365px; min-height:0; margin-top:22px; }.signup { min-height:236px; }.email-field { height:63px; padding:0 17px; }.email-field span { font-size:28px; }.email-field input { font-size:16px; } button { height:62px; font-size:23px; }.secure { font-size:13px; } }