:root { color-scheme: light; font-family: Helvetica, Arial, sans-serif; background: #000; color: #000; }
* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
.landing { position: relative; width: 100%; height: 100svh; min-height: 320px; overflow: hidden; }
.campaign-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.brand { position: absolute; top: max(20px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: clamp(130px, 14.7vw, 254px); pointer-events: none; }
h1 { margin: 0; line-height: 0; }
.brand img { display: block; width: 100%; height: auto; }
.signup { --padding-x: 16px; --padding-y: 12px; --icon-gap: 40px; --arrow-weight: 2.5px; --spinner-weight: 2px; --loading-duration: 1s; --transition-duration: 150ms; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 24px); }
.signup-row { display: flex; justify-content: center; position: relative; width: min(100%, var(--signup-width, 350px)); margin-inline: auto; min-height: max(44px, calc(24px + var(--padding-y) * 2)); overflow: hidden; background: #fff; transition: width var(--transition-duration) cubic-bezier(.22, 1, .36, 1); }
input { width: 100%; min-width: 0; padding: 0 var(--padding-x); border: 0; border-radius: 0; color: #000; background: transparent; font-size: 20px; font-weight: 700; outline: none; }
input::placeholder { color: rgb(0 0 0 / 50%); opacity: 1; }
input:autofill { box-shadow: inset 0 0 0 1000px #fff; -webkit-text-fill-color: #000; caret-color: #000; }
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-box-shadow: inset 0 0 0 1000px #fff; -webkit-text-fill-color: #000; caret-color: #000; }
.submit { position: absolute; right: calc(var(--padding-x) - 10px); top: 0; height: 100%; width: 44px; padding: 0; border: 0; background: #fff; color: #000; font-size: 24px; cursor: pointer; }
input { padding-right: calc(var(--padding-x) + 24px + var(--icon-gap)); text-transform: uppercase; }
.submit:disabled { cursor: wait; }
.signup-arrow { display: block; width: 24px; height: 24px; margin: auto; }
.signup-arrow path { stroke: #000; stroke-width: calc(var(--arrow-weight) - 2px); stroke-linejoin: miter; }
.signup.is-pending .signup-arrow { display: none; }
.signup-spinner { display: none; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; transform: translate(-50%, -50%); }
.signup.is-pending .signup-spinner { display: block; }
.signup-spinner i { position: absolute; top: 50%; left: 50%; width: var(--spinner-weight); height: 5px; margin: -2.5px calc(var(--spinner-weight) / -2); background: #000; opacity: .2; transform: rotate(calc(var(--bar) * 30deg)) translateY(-8px); animation: signup-pulse var(--loading-duration) linear infinite; animation-delay: calc(var(--bar) * var(--loading-duration) / 12 - var(--loading-duration)); }
@keyframes signup-pulse { 0% { opacity: 1; } 100% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .signup-spinner i { animation: none; opacity: calc(.2 + var(--bar) / 15); } }
.success { align-self: center; flex-shrink: 1; width: 100%; padding: var(--padding-y) var(--padding-x); font-size: 20px; line-height: 24px; font-weight: 700; white-space: normal; text-align: center; }
@media (prefers-reduced-motion: reduce) { .signup-row { transition: none; } }
[hidden] { display: none !important; }
#signup-status { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: min(100%, var(--signup-width, 350px)); margin: 12px 0 0; font: 700 20px/1.2 Helvetica, Arial, sans-serif; color: #000; text-align: left; text-transform: uppercase; border-radius: 0; }
#signup-status:not(:empty) { background: #fff; padding: 12px 16px; }
button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.submit:focus-visible { outline-color: #000; outline-offset: -4px; }
.no-script { position: absolute; top: 58%; width: 100%; color: #fff; text-align: center; }
@media (max-width: 600px) { .brand { top: max(24px, env(safe-area-inset-top)); width: 146px; } }
@media (max-height: 450px) { .brand { top: max(8px, env(safe-area-inset-top)); width: 100px; } }