/* Shared dark "Halo" theme for the track picker + all 4 intake forms — same
   tokens/aurora/glass system as index.html, so these pages read as the same
   product instead of a plain light form bolted onto a modern marketing site.
   The tokens are now genuinely shared (see below) rather than mirrored by hand. */
/* Tokens (--bg, --violet, --track-*, --section-y, ...) now live in
   assets/dtr-tokens.css, which every page under forms/ links BEFORE this file.
   They used to be duplicated here and in index.html's inline <style>; the two
   copies stayed identical only because nobody had edited one without the other.
   Do not redeclare a token in this file. */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.7;font-size:15.5px;
  position:relative;overflow-x:hidden;-webkit-font-smoothing:antialiased
}
a{color:inherit}
.wrap{max-width:720px;margin:0 auto;padding:0 20px 80px;position:relative;z-index:1}

/* Aurora backdrop — identical recipe to index.html's, toned down slightly since
   these are task-focused pages, not the marketing hero. */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora .blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.28;animation:dtr-drift 26s ease-in-out infinite alternate}
.aurora .b1{width:460px;height:460px;top:-160px;left:-120px;background:var(--violet)}
.aurora .b2{width:380px;height:380px;top:160px;right:-160px;background:var(--cyan);animation-delay:-9s}
@keyframes dtr-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(30px,-24px) scale(1.06)}}
@media (prefers-reduced-motion:reduce){.aurora .blob{animation:none}}

.glass{background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(20px)}

/* Compact branded header — same visual language as the main site's sticky header,
   without the full nav (these are single-task pages, not the marketing site). */
header.site-head{position:sticky;top:0;z-index:100;background:rgba(8,8,13,.72);border-bottom:1px solid var(--border);backdrop-filter:blur(16px)}
.site-head-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;max-width:720px;margin:0 auto;gap:16px}
.site-logo{display:flex;align-items:center;gap:9px;text-decoration:none;flex-shrink:0}
.site-logo img{height:24px;width:auto;display:block}
.site-logo span{font-size:12.5px;font-weight:700;letter-spacing:.4px;color:var(--text)}
.back-pill{font-size:12.5px;font-weight:600;color:var(--text-dim);text-decoration:none;white-space:nowrap}
.back-pill:hover{color:var(--text)}

h1{font-size:29px;font-weight:700;letter-spacing:-.5px;margin:0 0 8px;text-wrap:balance}
.gradient-text{background:linear-gradient(100deg,var(--violet),var(--cyan) 60%,var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sub{color:var(--text-dim);font-size:15px;margin:0 0 26px;max-width:64ch}

.badge{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--track-color,var(--gold))}

.note{background:var(--glass);border:1px solid var(--border);color:var(--text-dim);border-radius:12px;padding:14px 16px;font-size:13.5px;margin-bottom:26px}
.note b{color:var(--text)}

.not-now{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.back-link{font-size:13px;color:var(--text-faint);text-decoration:none}
.back-link:hover{color:var(--text-dim)}
.email-later-btn{background:var(--glass);border:1px solid var(--border-strong);color:var(--text-dim);border-radius:100px;padding:8px 16px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.email-later-btn:hover{background:var(--glass-strong);color:var(--text)}

.section{background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(20px);border-radius:18px;padding:24px 24px 8px;margin-bottom:18px}
.section h2{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--track-color,var(--gold));margin:0 0 4px;font-weight:700}
.section .subtext{color:var(--text-faint);font-size:12.5px;margin:0 0 18px}

.field{margin-bottom:18px}
label{display:block;font-weight:600;font-size:13.5px;margin-bottom:6px;color:var(--text)}
label .req{color:var(--warn)}
.hint{font-weight:400;color:var(--text-faint);font-size:12px;margin-top:4px}
input[type=text],input[type=email],input[type=url],input[type=number],input[type=file],select,textarea{
  width:100%;padding:11px 13px;border-radius:10px;font-size:14.5px;font-family:inherit;
  background:rgba(0,0,0,.22);border:1px solid var(--border-strong);color:var(--text);
  transition:border .15s,box-shadow .15s
}
input::placeholder,textarea::placeholder{color:var(--text-faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(155,123,240,.15)}

/* An AUTOFILLED field is a separate repaint that the rule above never reaches: Safari and
   Chrome paint it with their own light background and ignore `background` entirely. A
   1000px inset shadow is the only thing that covers it, and it has to be an opaque colour
   -- the field's own rgba(0,0,0,.22) would let the browser's light paint straight through.
   Untreated, an autofilled name/email/phone box came back as a pale block in the middle of
   a dark glass form, and in Safari, which leaves the author's text colour alone there,
   near-white text on that pale background is simply not readable. The absurd transition
   delay stops the browser fading its own colour back in a moment after focus.

   -webkit-text-fill-color is set HERE ONLY and never on the base input rule. Pinning it
   unconditionally is exactly what made the admin panel's autofilled field invisible: it
   also wins in the autofill state, where the browser would otherwise have supplied its
   own dark text to go with its own light background.

   Deliberately TWO rules per state, not one selector list: a list is thrown away whole if
   the engine does not recognise even one selector in it. Firefox knows :autofill but not
   :-webkit-autofill, and old WebKit (Safari < 15) knows only :-webkit-autofill, so
   grouping them hands one of the two engines nothing at all.

   :focus is in the list because `input:focus` above is later in the file at equal
   specificity -- without the extra pseudo-class it would win back the light background
   the moment you tabbed into the field. */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,
select:-webkit-autofill,textarea:-webkit-autofill{
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--field-solid) inset;
  box-shadow:0 0 0 1000px var(--field-solid) inset;
  transition:background-color 9999s ease-in-out 0s
}
input:autofill,input:autofill:hover,input:autofill:focus,
select:autofill,textarea:autofill{
  -webkit-text-fill-color:var(--text);
  caret-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--field-solid) inset;
  box-shadow:0 0 0 1000px var(--field-solid) inset;
  transition:background-color 9999s ease-in-out 0s
}
/* The inset shadow above costs the focus ring, since box-shadow is one property. Give it
   back on autofilled fields so a long form still shows you which field you are in. */
input:-webkit-autofill:focus,select:-webkit-autofill:focus,textarea:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--field-solid) inset,0 0 0 3px rgba(155,123,240,.15);
  box-shadow:0 0 0 1000px var(--field-solid) inset,0 0 0 3px rgba(155,123,240,.15)
}
input:autofill:focus,select:autofill:focus,textarea:autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--field-solid) inset,0 0 0 3px rgba(155,123,240,.15);
  box-shadow:0 0 0 1000px var(--field-solid) inset,0 0 0 3px rgba(155,123,240,.15)
}
textarea{min-height:90px;resize:vertical}
select option{background:#14141c;color:var(--text)}
.row{display:flex;gap:16px;flex-wrap:wrap}
.row .field{flex:1;min-width:200px}
input[type=file]{padding:9px 12px;font-size:13px}

.opt{display:block;text-decoration:none;color:var(--text);background:var(--glass);border:1px solid var(--border);
  border-radius:16px;padding:20px 22px;margin-bottom:14px;backdrop-filter:blur(20px);
  border-top:3px solid var(--track-color,var(--violet));transition:transform .15s,box-shadow .2s,background .2s}
.opt:hover{transform:translateY(-2px);background:var(--glass-strong);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.opt-ic{font-size:22px;margin-bottom:8px;display:block}
.opt-t{font-weight:700;font-size:16px;margin-bottom:4px}
.opt-s{color:var(--text-dim);font-size:13.5px}

.btn{background:linear-gradient(135deg,var(--violet),var(--cyan));color:#08080d;border:none;border-radius:100px;
  padding:15px 30px;font-size:15.5px;font-weight:700;cursor:pointer;width:100%;letter-spacing:.2px;
  transition:box-shadow .25s,transform .15s}
.btn:hover{box-shadow:0 0 30px rgba(155,123,240,.4);transform:translateY(-1px)}
.foot{text-align:center;color:var(--text-faint);font-size:12.5px;margin-top:22px}
.foot b{color:var(--text-dim)}

footer.site-foot{text-align:center;color:var(--text-faint);font-size:13px;margin-top:36px}