@font-face { font-family:Roabla; src:url('../fonts/Roabla-DemoVersion-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
:root { color-scheme:dark; font-family:Arial,Helvetica,sans-serif; color:#f3f1ed; background:#0b0b0b; }
* { box-sizing:border-box; }
body { margin:0; }
.signup-page { width:min(100%,480px); margin:0 auto; padding-bottom:env(safe-area-inset-bottom); }
.band-photo { display:block; width:100%; height:clamp(170px,28svh,260px); object-fit:cover; object-position:center 40%; mask-image:linear-gradient(#000 65%,transparent); }
.signup-content { position:relative; padding:0 28px; margin-top:-12px; }
.band-name { margin:0 0 16px; font-family:Roabla,Arial,sans-serif; font-size:clamp(24px,7vw,32px); font-weight:400; line-height:1.3; }
h1 { margin:0 0 16px; font-size:clamp(44px,12vw,64px); line-height:.98; letter-spacing:-.055em; }
.intro { max-width:340px; margin:0 0 26px; color:#b7b5b1; font-size:16px; line-height:1.6; }
form { display:grid; gap:10px; }
label { font-size:13px; color:#ddd; }
input,button { width:100%; min-height:52px; border-radius:8px; font:inherit; padding:14px 16px; }
input { min-width:0; border:1px solid #444; background:#171717; color:#fff; font-size:16px; }
button { border:1px solid #eee; background:#eee; color:#111; font-weight:700; cursor:pointer; }
button:disabled { opacity:.55; cursor:default; }
button:hover:not(:disabled) { background:#fff; }
:is(input,button,a):focus-visible { outline:2px solid #fff; outline-offset:4px; }
#signup-status { margin:0; font-size:14px; line-height:1.5; overflow-wrap:anywhere; }
#signup-status:empty { display:none; }
#signup-status.is-error { color:#ffb4b4; }
.consent { margin:14px 0 0; color:#919191; font-size:12px; line-height:1.7; }
a { color:inherit; text-underline-offset:3px; }
footer { padding:28px; display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; color:#999; font-size:12px; }
footer a { display:inline-flex; align-items:center; min-height:44px; color:#ccc; }
footer > span { align-self:center; }
@media(min-width:700px) { .signup-page { margin:36px auto; } }
@media(max-width:350px) { .signup-content { padding-inline:20px; } footer { padding:20px; } }