@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/anton-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jbm-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/jbm-700.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:700;font-display:swap;src:url('../fonts/pfd-700i.woff2') format('woff2')}
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/pinyon-400.woff2') format('woff2')}
@font-face{font-family:'ChopinScript';src:url('../fonts/ChopinScript.ttf') format('truetype');font-display:swap}
:root{--k:#070707;--f:#ff2fa6;--l:#c8ff2e;--w:#f4f1ea;--mut:#a9a49b;--disp:'Anton',Impact,sans-serif;--ser:'Playfair Display',serif;--mono:'JetBrains Mono',monospace;--scr:'ChopinScript','Pinyon Script',cursive;--dots:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14'><circle cx='7' cy='7' r='1.3' fill='%23f4f1ea' fill-opacity='.12'/></svg>")}
*{box-sizing:border-box}body{margin:0;background:var(--k);color:var(--w);font-family:'Inter',sans-serif;line-height:1.6;background-image:var(--dots)}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase}
.wrap{max-width:820px;margin:0 auto;padding:56px 22px 80px}
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:52px}
@media (max-width:520px){.top{gap:10px}.top form{margin-left:auto}}
.top img{height:34px}
.kick{color:var(--l)}
h1{font-family:var(--disp);font-size:clamp(52px,9vw,96px);line-height:.95;margin:10px 0 6px;text-transform:uppercase;letter-spacing:.01em}
h1 .scr{font-family:var(--scr);text-transform:none;color:var(--f);font-size:.9em;letter-spacing:0}
.lede{font-size:19px;color:var(--w);max-width:560px}
.mut{color:var(--mut)}
.card{background:#101010;border:1px solid #222;border-radius:14px;padding:26px;margin:18px 0;position:relative}
.card h3{font-family:var(--disp);font-size:26px;margin:0 0 8px;text-transform:uppercase;letter-spacing:.02em}
.card h3 .n{color:var(--l)}
.tape{position:absolute;top:-12px;left:34px;width:110px;height:24px;background:rgba(200,255,46,.85);transform:rotate(-2.5deg)}
.tilt1{transform:rotate(-.5deg)}.tilt2{transform:rotate(.6deg)}
.btn{display:inline-block;background:var(--l);color:#0a0a0a;font-family:var(--disp);font-size:20px;text-transform:uppercase;letter-spacing:.04em;padding:16px 30px;border-radius:10px;text-decoration:none;margin-top:14px}
.btn:hover{background:#d8ff55}
.shot{border:2px solid var(--w);border-radius:12px;margin:14px 0;width:100%;max-width:520px;height:auto;display:block}
.video{border:2px solid var(--w);border-radius:14px;overflow:hidden;margin:16px 0;background:#000}
.video video{width:100%;display:block}
.note{border-left:4px solid var(--f);padding:12px 16px;background:#140a10;border-radius:0 10px 10px 0;margin:18px 0}
.emailrow{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.emailrow input{flex:1;min-width:220px;background:#000;border:1px solid #333;border-radius:10px;padding:14px 16px;color:var(--w);font-size:16px;font-family:'Inter',sans-serif}
.emailrow .btn{margin:0}
.lock{display:flex;align-items:center;gap:10px;color:var(--l)}
.steps{counter-reset:s}
footer{margin-top:60px;border-top:1px solid #222;padding-top:22px}
body.signed-out .content{display:none}
body:not(.signed-out) .signin{display:none}

/* hero with magazine cutout */
.hero{display:flex;align-items:flex-end;gap:28px}
.hero-txt{flex:1;min-width:0}
.cutout{width:min(300px,38vw);height:auto;flex-shrink:0;margin-bottom:-8px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.55))}
@media (max-width:640px){.hero{flex-direction:column;align-items:flex-start;gap:6px}.cutout{width:min(240px,64vw);align-self:center;margin:-6px 0 4px}}
/* mobile: give the player room - slimmer page/card padding, full-bleed video inside the card */
@media (max-width:600px){.wrap{padding:40px 16px 64px}.card{padding:22px 18px}.video{margin:16px -18px;border-left:0;border-right:0;border-radius:0}}