@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/SF-Pro-Display-Regular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "SF Pro Display";
    src: url("../fonts/SF-Pro-Display-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --blue: #001698;
    --cream: #e3e4db;
    --paper: #f2f2ed;
    color-scheme: light;
}

* { box-sizing: border-box; }

html {
    background: var(--paper);
    color: var(--blue);
    font-family: "SF Pro Display", sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    margin: 0;
    min-width: 280px;
    min-height: 100vh;
    min-height: 100svh;
    isolation: isolate;
}

::selection { background: var(--blue); color: var(--paper); }

.bg {
    position: fixed;
    inset: -160px;
    z-index: -2;
    pointer-events: none;
    background: url("../LOGO_white.svg") repeat center / 180px auto;
    opacity: 0.8;
    transform: translate3d(var(--drift-x, 0px), var(--drift-y, 0px), 0) rotate(-9deg);
    -webkit-mask-image: radial-gradient(ellipse 50% 28% at 50% 50%, transparent 4%, #000 100%);
    mask-image: radial-gradient(ellipse 50% 28% at 50% 50%, transparent 4%, #000 100%);
}

.stage {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

.brand {
    position: absolute;
    top: clamp(54px, 7vh, 88px);
    left: 50%;
    width: clamp(98px, 10vw, 132px);
    transform: translateX(-50%) rotate(-4deg);
}

.brand img { display: block; width: 100%; height: auto; }

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 180px max(28px, 6vw) 112px;
}

.headline { position: relative; max-width: 100%; }

.star {
    position: absolute;
    top: -49px;
    right: -19px;
    width: clamp(28px, 3.2vw, 46px);
    height: auto;
    transform: rotate(14deg);
}

h1 {
    margin: 0;
    font-weight: 700;
    font-size: clamp(38px, 9.2vw, 144px);
    letter-spacing: -0.065em;
    line-height: 1.04;
    text-align: center;
    white-space: nowrap;
}

.domain { -webkit-text-stroke: 1.5px var(--blue); color: transparent; }

form {
    position: relative;
    width: min(440px, 100%);
    margin-top: 36px;
}

.signup-intro {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.signup {
    display: flex;
    min-height: 58px;
    padding: 5px;
    border: 1px solid rgb(0 22 152 / 30%);
    background: var(--paper);
    transition: border-color 180ms ease;
}

.signup:focus-within {
    border-color: var(--blue);
}

.email-field {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 14px;
    transition: opacity 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

form[data-state="pending"] .email-field,
form[data-state="complete"] .email-field { opacity: 0.4; }

.email-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
    stroke: var(--blue);
    stroke-width: 1.4;
    opacity: 0.55;
}

input[type="email"] {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    margin: 0;
    padding: 12px 10px 12px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--blue);
    font: 400 16px/1.3 "SF Pro Display", sans-serif;
    appearance: none;
}

input[type="email"]::placeholder { color: rgb(0 22 152 / 58%); opacity: 1; }

input[type="email"]:disabled {
    -webkit-text-fill-color: var(--blue);
    opacity: 1;
    cursor: default;
}

button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    min-height: 46px;
    margin: 0;
    padding: 12px 17px;
    border: 1px solid var(--blue);
    border-radius: 0;
    background: var(--blue);
    color: var(--paper);
    font: 700 14px/1.3 "SF Pro Display", sans-serif;
    cursor: pointer;
    transition: background-color 180ms ease, color 180ms ease, opacity 160ms ease;
}

button:disabled { opacity: 0.65; cursor: default; }

button svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.5;
    transition: transform 180ms ease;
}

@media (hover: hover) {
    button:hover:not(:disabled) { background: var(--cream); color: var(--blue); }
    button:hover:not(:disabled) svg { transform: translateX(3px); }
}

button:active:not(:disabled) svg { transform: translateX(3px); }

input[type="email"]:focus-visible,
button:focus-visible,
.footer-links a:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.note {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin: 16px 0 0;
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
}

.note.error { text-decoration: underline; text-underline-offset: 4px; }

.footer {
    flex: 0 0 auto;
    padding: 0 24px max(24px, env(safe-area-inset-bottom));
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: clamp(20px, 3vw, 44px);
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--blue);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    text-underline-offset: 5px;
}

.footer-links a:hover { text-decoration: underline; }

.sr, .hp {
    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: 640px) {
    .bg {
        background-size: 148px auto;
        opacity: 0.7;
        -webkit-mask-image: radial-gradient(ellipse 65% 24% at 50% 50%, transparent 4%, #000 100%);
        mask-image: radial-gradient(ellipse 65% 24% at 50% 50%, transparent 4%, #000 100%);
    }
    .brand { top: 54px; width: 102px; }
    main { padding: 180px 30px 64px; }
    h1 { font-size: clamp(30px, 10.4vw, 64px); letter-spacing: -0.06em; }
    .domain { -webkit-text-stroke-width: 1px; }
    .star { top: -42px; right: 0; }
    form { width: min(360px, 100%); margin-top: 28px; }
    .email-field { gap: 9px; padding-left: 10px; }
    button { gap: 14px; padding-inline: 13px; }
}

@media (max-width: 340px) {
    main { padding-inline: 25px; }
    .email-icon { display: none; }
    button { gap: 8px; padding-inline: 10px; }
}

@media (max-height: 540px) and (min-width: 641px) {
    .brand { top: 35px; width: 85px; }
    main { padding-block: 120px 50px; }
    h1 { font-size: min(8vw, 72px); }
    form { margin-top: 24px; }
    .star { top: -25px; width: 25px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .bg { transform: rotate(-9deg); }
}