:root { --orange:#f45b0b; --orange-dark:#c94305; --ink:#172033; --muted:#60708a; --line:#dde3ec; --soft:#f5f7fa; --cream:#fff8f1; --green:#20855b; }
html { scroll-behavior:smooth; }
body.landing-page { margin:0; background:#f3f5f8; color:var(--ink); }
button,input,select { font:inherit; }
.skip-link { position:fixed; left:16px; top:-60px; z-index:20; padding:12px 16px; color:#fff; background:var(--ink); border-radius:8px; }
.skip-link:focus { top:16px; }
.landing-shell { min-height:calc(100vh - 74px); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr); }
.welcome-panel { position:relative; overflow:hidden; display:flex; flex-direction:column; padding:clamp(34px,5vw,76px); background:radial-gradient(circle at 15% 85%,rgba(244,91,11,.15),transparent 34%),linear-gradient(145deg,#fff 0%,#fffaf5 100%); }
.welcome-panel::after { content:""; position:absolute; width:420px; height:420px; right:-220px; top:-220px; border:70px solid rgba(244,91,11,.06); border-radius:50%; }
.brand { position:relative; z-index:1; display:inline-flex; align-items:center; gap:12px; width:max-content; color:var(--ink); font-family:Montserrat,sans-serif; font-size:1.32rem; font-weight:800; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; color:#fff; background:var(--orange); border-radius:13px 13px 13px 4px; box-shadow:0 8px 22px rgba(244,91,11,.25); }
.welcome-copy { position:relative; z-index:1; width:min(680px,100%); margin:auto 0; padding:64px 0 28px; }
.eyebrow,.form-kicker { margin:0 0 14px; color:var(--orange-dark); font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.beta-status-pill { display:inline-flex; align-items:center; gap:7px; width:max-content; margin:0 0 16px; padding:7px 11px; color:#fff; border:1px solid #ff7a2f; border-radius:999px; background:linear-gradient(135deg,#f45b0b,#d94704); box-shadow:0 8px 20px rgba(244,91,11,.18); font-size:.72rem; font-weight:900; letter-spacing:.09em; text-transform:uppercase; }
.eyebrow span { margin-right:7px; color:var(--green); }
.welcome-copy h1 { max-width:640px; margin:0; font-family:Montserrat,sans-serif; font-size:clamp(3rem,6.2vw,5.8rem); line-height:.98; letter-spacing:-.055em; }
.welcome-lead { max-width:640px; margin:24px 0 34px; color:#4f5f77; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.65; }
.beta-welcome-note { max-width:620px; margin:-18px 0 28px; padding:12px 15px; color:#4b3a2f; border-left:3px solid var(--orange); border-radius:0 10px 10px 0; background:rgba(255,244,234,.72); font-size:.88rem; line-height:1.55; }
.values { display:grid; gap:12px; }
.value-card { display:flex; gap:15px; align-items:flex-start; max-width:620px; padding:15px 18px; border:1px solid rgba(221,227,236,.85); border-radius:16px; background:rgba(255,255,255,.75); backdrop-filter:blur(8px); }
.value-icon { display:grid; flex:0 0 38px; place-items:center; height:38px; color:var(--orange-dark); background:#fff0e5; border-radius:12px; font-size:1.1rem; font-weight:800; }
.value-card h2 { margin:1px 0 4px; font-size:.98rem; }
.value-card p { margin:0; color:var(--muted); font-size:.88rem; line-height:1.5; }
.community-promise { margin:22px 0 0; color:#3f4f66; font-size:.9rem; font-weight:600; }
.community-promise span { margin-right:7px; color:var(--orange); }
.access-panel { display:grid; place-items:center; padding:clamp(28px,5vw,72px); background:linear-gradient(150deg,#e9eef5,#d9e1ec); }
.access-wrap { width:min(455px,100%); }
.login-form { width:100%; padding:clamp(26px,4vw,40px); border:1px solid rgba(255,255,255,.85); border-radius:24px; background:#fff; box-shadow:0 24px 60px rgba(33,47,69,.14); }
.login-form[hidden] { display:none; }
.form-heading { position:relative; margin-bottom:25px; }
.form-heading h2 { margin:0 0 7px; font-family:Montserrat,sans-serif; font-size:1.65rem; letter-spacing:-.025em; }
.form-heading > p:last-child { margin:0; color:var(--muted); font-size:.93rem; line-height:1.5; }
.field-label { display:block; margin:13px 0 7px; color:#344257; font-size:.82rem; font-weight:700; }
.login-form input,.login-form select { width:100%; min-height:48px; margin:0; padding:12px 14px; color:var(--ink); border:1px solid #cfd7e4; border-radius:11px; outline:none; background:#f9fafc; font-size:.95rem; transition:border-color .2s,box-shadow .2s,background .2s; }
.login-form input:focus,.login-form select:focus { border-color:var(--orange); background:#fff; box-shadow:0 0 0 4px rgba(244,91,11,.12); }
.login-form button { min-height:48px; border-radius:11px; font-weight:800; cursor:pointer; transition:transform .18s,box-shadow .18s,background .18s; }
.login-form button:hover { transform:translateY(-1px); }
.login-btn { width:100%; margin-top:20px; color:#fff; border:1px solid var(--orange); background:var(--orange); box-shadow:0 9px 20px rgba(244,91,11,.2); }
.login-btn:hover { background:#dc4d06; box-shadow:0 12px 24px rgba(244,91,11,.26); }
.verification-recovery { margin-top:12px; padding:14px; border:1px solid #f0c7ad; border-radius:12px; background:#fff8f1; }
.verification-recovery strong { display:block; color:#8f340a; font-size:.87rem; }
.verification-recovery p { margin:5px 0 10px; color:#5f6d81; font-size:.78rem; line-height:1.45; }
.verification-recovery .verification-tip { margin:8px 0 0; color:#758196; font-size:.72rem; }
.verification-resend-btn { width:100%; min-height:42px!important; color:#9e3905; border:1px solid #f0b98f; background:#fff; font-size:.82rem; }
.verification-resend-btn:disabled { cursor:wait; opacity:.6; }
.artist-login-btn { width:100%; margin-top:10px; color:#9e3905; border:1px solid #f0c7ad; background:var(--cream); }
.artist-login-btn span { margin-right:6px; }
.account-help { display:flex; justify-content:space-between; gap:12px; margin-top:14px; }
.account-help a,.terms-label a { color:#b84208; font-size:.79rem; font-weight:700; text-decoration:none; }
.account-help a:hover,.terms-label a:hover { text-decoration:underline; text-underline-offset:3px; }
.mfa-login-check { margin-top:1rem; border:1px solid #b9dfd1; border-radius:1rem; background:#eef9f5; padding:.9rem; }
.mfa-login-heading { display:flex; align-items:flex-start; gap:.7rem; margin-bottom:.8rem; }
.mfa-login-heading strong { display:block; color:#162033; font-size:.95rem; }
.mfa-login-heading p { margin:.18rem 0 0; color:#45645c; font-size:.78rem; line-height:1.45; }
.mfa-login-icon { display:inline-flex; width:2rem; height:2rem; flex:none; align-items:center; justify-content:center; border-radius:.72rem; background:#0f7a65; color:#fff; font-weight:900; }
.mfa-login-check input { background:#fff; }
.mfa-login-cancel { display:block; width:100%; min-height:38px; margin-top:.5rem; border:0; background:transparent; color:#5d6675; font-size:.78rem; font-weight:800; text-align:center; }
.mfa-login-cancel:hover { color:#c2410c; }
.form-divider { display:flex; align-items:center; gap:12px; margin:24px 0 13px; color:#7b879a; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.form-divider::before,.form-divider::after { content:""; height:1px; flex:1; background:var(--line); }
.signup-btn { width:100%; color:#27364a; border:1px solid #c9d2df; background:#f1f4f8; }
.signup-btn:hover { background:#e6ebf2; }
.age-note,.field-hint { margin:10px 0 0; color:#78869a; font-size:.76rem; line-height:1.45; text-align:center; }
.access-trust { margin:16px auto 0; color:#5a6980; font-size:.78rem; line-height:1.5; text-align:center; }
.access-trust span { color:var(--green); }
.error-message { display:none; margin:8px 0 4px; padding:9px 11px; color:#a1271c; border:1px solid #fecaca; border-radius:9px; background:#fff1f1; font-size:.8rem; }
.name-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.birthday-heading { display:flex; justify-content:space-between; align-items:end; gap:10px; margin-top:4px; }
.birthday-heading > span:last-child { color:#78869a; font-size:.7rem; }
.birthday-section { display:grid; grid-template-columns:1.25fr .8fr 1fr; gap:8px; }
.birthday-section label { min-width:0; }
.field-hint { margin:6px 0 2px; text-align:left; }
.signup-topic-preferences { display:flex; flex-wrap:wrap; gap:9px 16px; margin:16px 0 0; padding:14px; border:1px solid #dce4ee; border-radius:12px; background:#f8fafc; }
.signup-topic-preferences legend { padding:0 5px; color:#344257; font-size:.84rem; font-weight:800; }
.signup-topic-preferences .field-hint { flex-basis:100%; margin:0 0 3px; }
.signup-topic-preferences label { display:flex; align-items:center; gap:7px; color:#435269; font-size:.82rem; font-weight:700; }
.signup-topic-preferences input { flex:0 0 17px; width:17px; min-height:auto; height:17px; padding:0; accent-color:var(--orange); }
.profile-url-input { display:flex; align-items:center; overflow:hidden; border:1px solid #cfd7e4; border-radius:11px; background:#f9fafc; }
.profile-url-input:focus-within { border-color:var(--orange); background:#fff; box-shadow:0 0 0 4px rgba(244,91,11,.12); }
.profile-url-input span { padding-left:14px; color:#66758b; font-size:.88rem; font-weight:700; white-space:nowrap; }
.profile-url-input input { min-width:0; border:0!important; box-shadow:none!important; background:transparent!important; padding-left:2px; }
.profile-url-input input[readonly] { color:#4f5e73; cursor:not-allowed; }
.availability-status { min-height:1.2em; margin:6px 0 0; color:#6b778b; font-size:.76rem; }
.availability-status.good { color:#137a52; font-weight:700; }
.availability-status.bad { color:#ad2f24; font-weight:700; }
.beta-capacity-card { display:flex; align-items:center; gap:10px; margin:12px 0 4px; padding:11px 12px; border:1px solid #dce4ee; border-radius:11px; background:#f8fafc; }
.beta-capacity-dot { flex:0 0 9px; width:9px; height:9px; border-radius:50%; background:#20855b; box-shadow:0 0 0 4px rgba(32,133,91,.1); }
.beta-capacity-card > div { min-width:0; flex:1; }
.beta-capacity-card strong { display:block; color:#344257; font-size:.78rem; }
.beta-capacity-card p { margin:2px 0 0; color:#6b778b; font-size:.72rem; line-height:1.4; }
.beta-capacity-card a { flex:0 0 auto; color:var(--orange-dark); font-size:.72rem; font-weight:800; text-decoration:none; }
.beta-capacity-card.is-full { border-color:#f1c9ad; background:#fff8f1; }
.beta-capacity-card.is-full .beta-capacity-dot { background:#d94704; box-shadow:0 0 0 4px rgba(217,71,4,.1); }
.beta-agreement-label { border-color:#f3bd99; background:#fff5eb; }
.login-btn:disabled { cursor:not-allowed; opacity:.55; transform:none!important; box-shadow:none; }
.terms-label { display:flex; align-items:flex-start; gap:10px; margin:18px 0 0; padding:13px; color:#4f5e73; border:1px solid #f1d1bc; border-radius:11px; background:var(--cream); font-size:.79rem; line-height:1.55; }
.terms-label input { min-height:auto; flex:0 0 18px; width:18px; height:18px; margin:2px 0 0; accent-color:var(--orange); }
.back-button { position:absolute; right:0; top:0; width:40px; min-height:40px!important; color:#4f5f75; border:1px solid var(--line); background:#f6f8fa; }
.text-button { width:100%; min-height:auto!important; margin-top:13px; padding:7px; color:#5b6980; border:0; background:transparent; font-size:.82rem; }
.text-button strong { color:var(--orange-dark); }
.footer { display:flex; justify-content:space-between; align-items:center; gap:20px; width:100%; min-height:74px; margin:0; padding:20px clamp(24px,5vw,72px); color:#65738a; border-top:1px solid #d8dee8; background:#eef2f6; font-size:.78rem; }
.footer nav { display:flex; flex-wrap:wrap; justify-content:center; max-width:100%; gap:22px; }
.footer a { margin:0; color:#4f5e74; font-weight:700; text-decoration:none; }
.footer a:hover { color:var(--orange-dark); }
.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:980px) { .landing-shell{grid-template-columns:1fr}.welcome-panel{min-height:auto;padding-bottom:46px}.welcome-copy{padding:58px 0 10px}.welcome-copy h1{font-size:clamp(2.8rem,10vw,5rem)}.access-panel{padding:48px 24px 56px}.values{grid-template-columns:repeat(3,1fr)}.value-card{display:block}.value-icon{margin-bottom:10px} }
@media (max-width:680px) { .welcome-panel{padding:26px 20px 38px}.welcome-copy{padding-top:48px}.welcome-copy h1{font-size:2.75rem}.welcome-lead{font-size:1rem}.values{grid-template-columns:1fr}.value-card{display:flex}.access-panel{padding:28px 14px 40px}.login-form{padding:25px 20px;border-radius:19px}.name-grid{grid-template-columns:1fr}.birthday-section{grid-template-columns:1.15fr .8fr 1fr}.account-help{flex-direction:column;align-items:center;gap:7px}.footer{flex-direction:column;gap:12px;text-align:center}.footer nav{gap:18px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important} }