/* REQ-63: the beta sign-up, confirmation and privacy pages. Loaded after
 * ../ds/styles.css and ../tokens.css; only the site's own tokens, so the
 * existing light and dark themes apply (data-theme on <html>). */
html { background:var(--bg); }
html[data-theme="light"] { color-scheme:light; }
html[data-theme="dark"] { color-scheme:dark; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); }
a { color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; }
a:hover { color:var(--accent); }
[data-theme="dark"] a { color:var(--accent-on-soft-violet); }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
::selection { background:var(--accent-soft); color:var(--accent-ink); }
[data-theme="dark"] .cl-icon-sun { display:none; }
[data-theme="light"] .cl-icon-moon { display:none; }
[hidden] { display:none !important; }

.skip { position:absolute; left:-9999px; top:0; background:var(--bg-elevated); color:var(--text); padding:var(--sp-4) var(--sp-6); z-index:100; border-radius:var(--r-sm); }
.skip:focus { left:var(--sp-4); top:var(--sp-4); }

.bt-header { position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--line); }
.bt-nav { max-width:1200px; margin:0 auto; padding:10px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.bt-logo { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-22); letter-spacing:-0.02em; color:var(--text); line-height:1; text-decoration:none; display:inline-flex; align-items:center; min-height:44px; }
[data-theme="dark"] .bt-logo, .bt-logo:hover { color:var(--text); }
.bt-logo span { color:var(--accent); }
.bt-actions { display:flex; align-items:center; gap:12px; }
.bt-lang { display:inline-flex; gap:2px; padding:3px; border-radius:var(--r-md); background:var(--bg-sunken, var(--surface-sunken)); }
.bt-lang a { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 var(--sp-4); border-radius:var(--r-sm);
  font-size:var(--fs-13); font-weight:var(--fw-bold); text-decoration:none; color:var(--text-mute); }
.bt-lang a[aria-current="true"] { background:var(--bg-elevated); color:var(--text); box-shadow:var(--shadow-card); }
.bt-theme { width:44px; height:44px; }

main { max-width:640px; margin:0 auto; padding:48px 24px 72px; }
main.bt-wide { max-width:720px; }
main h1 { font-family:var(--font-display); font-weight:var(--fw-bold); font-size:var(--fs-42); line-height:1.1; letter-spacing:-0.02em; margin:0 0 var(--sp-5); }
main h2 { font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-22); line-height:1.2; margin:var(--sp-9) 0 var(--sp-4); }
.bt-intro { font-size:var(--fs-15); line-height:1.5; color:var(--text-mute); margin:0 0 var(--sp-8); }
.bt-version { color:var(--text-faint); font-size:var(--fs-13); margin:0 0 var(--sp-8); }
.bt-text p, .bt-text li { line-height:1.55; color:var(--text-mute); font-size:var(--fs-15); }
.bt-text ul { padding-left:var(--sp-8); }
.bt-text li + li { margin-top:var(--sp-3); }
.bt-text strong { color:var(--text); }
.bt-card { background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp-9); box-shadow:var(--shadow-card); }
.bt-cta { display:inline-flex; margin-top:var(--sp-6); text-decoration:none; }
.bt-cta.cl-btn--primary, .bt-cta.cl-btn--primary:hover { color:var(--on-accent); }
[data-theme="dark"] .bt-cta.cl-btn--primary { color:var(--on-accent); }
.bt-back { margin-top:var(--sp-8); }

/* form */
.bt-form { display:grid; gap:var(--sp-8); }
.bt-field { display:grid; gap:var(--sp-3); }
.bt-field label.bt-label, .bt-fieldset legend { font-weight:var(--fw-bold); font-size:var(--fs-15); color:var(--text); padding:0; }
.bt-opt-note { font-weight:var(--fw-medium); color:var(--text-mute); }
.bt-form .cl-input { min-height:48px; box-sizing:border-box; border-color:var(--line-strong); }
.bt-field, .bt-fieldset { scroll-margin-top:96px; }
.bt-form input { scroll-margin-top:96px; }
.bt-form .cl-input[aria-invalid="true"], .bt-fieldset[data-invalid="true"] .bt-option { border-color:var(--feedback-danger); }
.bt-fieldset { border:0; margin:0; padding:0; min-width:0; display:grid; gap:var(--sp-3); }
.bt-fieldset legend { margin-bottom:var(--sp-3); }
.bt-option { display:flex; align-items:center; gap:var(--sp-5); min-height:44px; box-sizing:border-box; padding:var(--sp-4) var(--sp-6);
  border:1.5px solid var(--line-strong); border-radius:var(--r-md); background:var(--bg-elevated); cursor:pointer; }
.bt-option:hover { border-color:var(--accent); }
.bt-option:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
[data-theme="dark"] .bt-option:has(input:checked) { color:var(--text); }
.bt-option:has(input:focus-visible) { outline:3px solid var(--accent); outline-offset:2px; }
.bt-option input { width:22px; height:22px; margin:0; flex:none; accent-color:var(--accent); }
.bt-option-text { display:grid; gap:2px; line-height:1.3; font-size:var(--fs-15); color:var(--text); font-weight:var(--fw-semibold); }
.bt-option-line { font-weight:var(--fw-medium); font-size:var(--fs-13); color:var(--text-mute); }
.bt-option:has(input:checked) .bt-option-line { color:var(--text); }
.bt-consent .bt-option-text { font-weight:var(--fw-medium); }
.bt-consent a { font-weight:var(--fw-bold); }
.bt-error { margin:0; color:var(--feedback-danger-ink); font-size:var(--fs-13); font-weight:var(--fw-semibold); line-height:1.4; }
.bt-error::before { content:"\26A0\00A0"; }
.bt-summary { border:1.5px solid var(--feedback-danger-border); background:var(--feedback-danger-soft); border-radius:var(--r-md); padding:var(--sp-6) var(--sp-7); margin:0 0 var(--sp-8); }
.bt-summary h2 { margin:0 0 var(--sp-3); font-size:var(--fs-18); color:var(--feedback-danger-ink); }
.bt-summary p { margin:0 0 var(--sp-3); color:var(--text); }
.bt-summary ul { margin:0; padding-left:var(--sp-8); }
.bt-summary li { margin:0; }
.bt-summary a { display:inline; font-weight:var(--fw-bold); color:var(--feedback-danger-ink); }
.bt-status { border:1.5px solid var(--feedback-danger-border); background:var(--feedback-danger-soft); border-radius:var(--r-md); padding:var(--sp-6) var(--sp-7); margin:0 0 var(--sp-6); color:var(--text); }
.bt-send { width:100%; min-height:52px; justify-content:center; }
.bt-send[aria-busy="true"] { opacity:.8; }
.bt-hp { position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.bt-sent h2 { margin-top:0; }
.bt-sent h2:focus { outline:none; }
.bt-sent p { line-height:1.5; color:var(--text-mute); }
.bt-sent .bt-addr { color:var(--text); font-weight:var(--fw-bold); overflow-wrap:anywhere; }
.bt-sent a { display:inline-block; padding:var(--sp-3) 0; }

footer { border-top:1px solid var(--line); }
.bt-foot { max-width:1200px; margin:0 auto; padding:28px 24px; display:flex; flex-wrap:wrap; gap:var(--sp-6) var(--sp-9); align-items:center; justify-content:space-between; color:var(--text-faint); }
.bt-foot nav { display:flex; flex-wrap:wrap; gap:0 var(--sp-8); }
.bt-foot nav a { display:inline-flex; align-items:center; min-height:44px; }
.bt-foot .t-eyebrow { color:var(--text-faint); }

@media (max-width: 720px) {
  .bt-nav { padding:8px 16px; gap:8px; }
  .bt-actions { gap:8px; }
  main { padding:32px 16px 56px; }
  main h1 { font-size:var(--fs-32); }
  .bt-card { padding:var(--sp-7); }
  .bt-foot { padding:20px 16px; }
}
@media (prefers-reduced-motion: no-preference) { .bt-option { transition:border-color .12s, background .12s; } }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
