:root {
  /* Kaf Musician Connect design system — Houselights (dark) theme.
     Names on the left are the app's originals so existing rules keep working;
     values come from the design system's tokens. */
  --primary: #f0b544;        /* brass — the primary action */
  --primary-light: #f6c977;  /* brass-text — links, prices, active nav */
  --primary-dark: #c8901f;
  --on-primary: #231704;     /* on-brass — text on a brass fill */
  --accent: #4fc9ae;         /* moss — the talent side */
  --accent-text: #7fdcc6;    /* moss-text */
  --pink: #ffc862;           /* brass-hover */
  --cyan: #7fdcc6;
  --bg: #14110e;             /* surface-page */
  --bg2: #0d0b09;            /* surface-sunken */
  --card: #1e1a16;           /* surface-card */
  --card-hover: #2a241e;
  --text: #e9e2d8;           /* ink */
  --text-strong: #faf6f0;    /* ink-strong */
  --muted: #a89b8c;          /* ink-muted */
  --border: #312a23;         /* line-soft */
  --border-strong: #7b6e5f;  /* line-strong */
  --focus-ring: #f0b544;
  --danger: #ff9287;         /* signal-closed */
  --danger-soft: #361412;
  --success: #63cc90;        /* signal-open */
  --success-soft: #0f2a1b;
  --hold: #79bce8;           /* signal-hold */
  --hold-soft: #0d2433;
  --radius: 12px;
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
}
a { color: var(--primary-light); text-decoration: none; }
strong, b { color: var(--text-strong); }
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  background: var(--primary);
  color: var(--on-primary);
  transition: background .15s, transform .1s;
}
button:hover { background: var(--pink); }
button:active { transform: translateY(1px); }
button.secondary { background: transparent; color: var(--accent-text); border: 2px solid var(--border-strong); }
button.secondary:hover { background: var(--card-hover); }
button.danger { background: var(--danger); color: #2a0a07; }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  background: var(--bg2);
  color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
/* Mount point for a Stripe.js Card Element (server/public/app.js openBookingModal
   / openRentalModal) — styled to match the plain inputs above since Stripe
   renders its own iframe inside this div rather than a real <input>. */
.stripe-card-element {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg2);
}
.stripe-card-element--focused { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--border-strong); }
.stripe-card-error { color: var(--danger); font-size: 13px; margin-top: 6px; min-height: 16px; }
/* Signup honeypot (see public/app.js SignupPage) — positioned off-screen
   rather than display:none/visibility:hidden, since some bots skip fields
   hidden that way but still fill ones that are merely moved off-canvas. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-color: var(--border-strong); box-shadow: none; }
button:focus-visible, a:focus-visible, .category-tile:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
label { font-size: 13px; font-weight: 600; color: var(--muted); display: block; margin: 12px 0 4px; }
.container { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
header.topbar {
  background: rgba(20, 17, 14, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
header.topbar .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand {
  font-size: 20px; font-weight: 800; cursor: pointer;
  font-family: var(--font-display);
  letter-spacing: -.01em;
  color: var(--text-strong);
}
.nav-links { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nav-links button { background: transparent; color: var(--text); font-weight: 500; padding: 8px 12px; }
.nav-links button:hover { background: var(--card-hover); filter: none; }
.nav-links button.active { background: var(--card-hover); color: var(--primary-light); }
main { padding: 28px 0 60px; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .4);
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
h1 { font-family: var(--font-display); font-size: 32px; line-height: 1.12; letter-spacing: -.015em; margin: 0 0 6px; color: var(--text-strong); }
h2 { font-family: var(--font-display); font-size: 22px; line-height: 1.2; margin: 0 0 12px; color: var(--text-strong); }
h3 { font-size: 17px; margin: 0 0 8px; color: var(--text-strong); font-weight: 600; }
p.muted, span.muted { color: var(--muted); font-size: 13px; }
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 700;
  background: var(--card-hover); color: var(--primary-light); text-transform: uppercase; letter-spacing: .04em;
}
.badge.pending { background: var(--hold-soft); color: var(--hold); }
.badge.accepted { background: var(--success-soft); color: var(--success); }
.badge.declined, .badge.cancelled, .badge.no_show_client, .badge.no_show_musician { background: var(--danger-soft); color: var(--danger); }
.badge.completed { background: var(--success-soft); color: var(--success); }
.badge.countered { background: var(--hold-soft); color: var(--hold); }
.badge.emergency { background: var(--danger-soft); color: var(--danger); }
.badge.open { background: var(--success-soft); color: var(--success); }
.badge.filled { background: var(--hold-soft); color: var(--hold); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.stars { color: var(--primary-light); font-size: 14px; }
.error-box { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); padding: 10px 14px; border-radius: var(--radius); margin: 10px 0; font-size: 14px; }
.success-box { background: var(--success-soft); color: var(--success); border: 1px solid var(--success); padding: 10px 14px; border-radius: var(--radius); margin: 10px 0; font-size: 14px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tabs button { background: none; color: var(--muted); border-radius: 0; padding: 10px 14px; font-weight: 600; }
.tabs button:hover { filter: none; color: var(--text); }
.tabs button.active { color: var(--primary-light); border-bottom: 2px solid var(--primary); background: none; }
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(13, 11, 9, .72); display: flex; align-items: center;
  justify-content: center; z-index: 100; padding: 20px;
}
.modal {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; max-width: 480px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .7);
}
.center-form { max-width: 420px; margin: 40px auto; }
.notif-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { font-weight: 600; }
.notif-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); display: inline-block; margin-right: 6px; }
footer.appfoot { text-align: center; color: var(--muted); font-size: 12px; padding: 24px 0; }
footer.appfoot .footer-link { color: var(--primary-light); text-decoration: none; }
footer.appfoot .footer-link:hover { text-decoration: underline; }
.empty-state { text-align: center; color: var(--muted); padding: 40px 20px; }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { background: var(--bg2); border: 1px solid var(--border); border-radius: 20px; padding: 2px 10px; font-size: 12px; color: var(--text); }
.checkbox-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 10px; }
.availability-table { border-collapse: collapse; width: 100%; min-width: 420px; }
.availability-table th, .availability-table td { text-align: center; padding: 4px 8px; font-size: 13px; color: var(--text); }
.availability-table th { color: var(--muted); font-weight: 500; }
.availability-table td:first-child, .availability-table th:first-child { text-align: left; color: var(--muted); }
.availability-table tbody tr:nth-child(odd) { background: var(--bg2); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.gallery-thumb { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--bg2); }
.gallery-thumb img { width: 100%; height: 120px; object-fit: cover; display: block; }
.gallery-thumb button { position: absolute; bottom: 6px; right: 6px; left: 6px; }

/* ---------- profile photos ---------- */
.avatar {
  border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--bg2); border: 1px solid var(--border);
}
.avatar-placeholder {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--accent-text);
  background: #12332d;
}
.avatar-sm { width: 32px; height: 32px; font-size: 12px; }
.avatar-md { width: 56px; height: 56px; font-size: 18px; }
.avatar-lg { width: 88px; height: 88px; font-size: 26px; }
.avatar-xl { width: 120px; height: 120px; font-size: 34px; }
.musician-card-head { display: flex; align-items: flex-start; gap: 12px; }
.avatar-upload-row { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }

/* ---------- photo-forward listing cards (browse grid) ---------- */
.card.photo-card { padding: 0; overflow: hidden; }
.card-photo {
  width: 100%; height: 170px; object-fit: cover; display: block; background: var(--bg2);
}
.card-photo-placeholder {
  display: flex; align-items: center; justify-content: center; font-size: 42px;
  color: var(--accent-text);
  background: #12332d;
}
.photo-card-body { padding: 16px 18px 18px; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
/* .category-tile itself (box shape, hover, text) is defined once, further
   down, alongside the category-art background-image rules (.cat-drums etc)
   it's meant to pair with — see "category art (design system: Category
   asset group)". */
.nudge-banner {
  background: #3a2a0f;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 14px; font-size: 13px; color: var(--text);
}

/* ---------- opening-screen backgrounds (home, equipment, login, signup) ---------- */
.full-bleed { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.gradient-surface {
  background-color: #1c1712;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 200, 98, .38) 0, transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(240, 181, 68, .26) 0, transparent 28%),
    radial-gradient(circle at 50% 104%, rgba(79, 201, 174, .18) 0, transparent 38%),
    radial-gradient(rgba(251, 248, 243, .10) 1.5px, transparent 1.5px),
    linear-gradient(135deg, #14110e 0%, #2a1d0c 58%, #6f3d03 100%);
  background-size: auto, auto, auto, 22px 22px, auto;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
}
.hero {
  position: relative;
  overflow: hidden;
  padding: 72px 20px 64px;
  text-align: center;
  color: #fff;
  margin-bottom: 24px;
}
.hero .container { max-width: 720px; position: relative; z-index: 2; }
.hero h1 { color: #fff; font-size: 34px; margin-bottom: 10px; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero p { color: rgba(255,255,255,.9); font-size: 15px; margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.hero .music-note { font-size: 30px; opacity: .95; display: block; margin-bottom: 8px; }
.auth-shell {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.auth-shell .center-form {
  position: relative;
  z-index: 2;
  margin: 0;
  box-shadow: 0 24px 70px rgba(4, 2, 20, .55);
  border: 1px solid var(--border);
}

/* ---------- floating instrument decoration ---------- */
.floating-icons {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.fi {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: var(--size, 80px);
  opacity: var(--op, .34);
  filter: drop-shadow(0 10px 18px rgba(4, 2, 20, .45));
  animation: fi-float var(--dur, 9s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
@keyframes fi-float {
  0%   { transform: translateY(0) rotate(var(--rot, -8deg)); }
  50%  { transform: translateY(-20px) rotate(calc(var(--rot, -8deg) * -1)); }
  100% { transform: translateY(0) rotate(var(--rot, -8deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .fi, .stage-glow, .fog span, .light-sweep::after { animation: none; }
}

/* ---------- "stage" hero: instruments clustered on a lit-up piano, like a band about to play ---------- */
.hero.stage-hero { min-height: 420px; padding: 56px 20px 0; display: flex; flex-direction: column; }
.hero.stage-hero .container { flex: 0 0 auto; }
.stage-glow {
  position: absolute;
  left: 50%; bottom: 40px;
  width: 900px; height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(240,181,68,.40) 0%, rgba(240,181,68,.22) 35%, transparent 70%);
  filter: blur(6px);
  animation: stage-pulse 6s ease-in-out infinite;
  z-index: 0;
}
@keyframes stage-pulse {
  0%, 100% { opacity: .7; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;  transform: translateX(-50%) scale(1.06); }
}
.fog { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fog span {
  position: absolute;
  bottom: -20px;
  width: 420px; height: 160px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.14) 0%, transparent 72%);
  filter: blur(2px);
  animation: fog-drift var(--fdur, 16s) ease-in-out infinite;
  animation-delay: var(--fdelay, 0s);
}
@keyframes fog-drift {
  0%   { transform: translateX(-60px) translateY(0); }
  50%  { transform: translateX(60px) translateY(-10px); }
  100% { transform: translateX(-60px) translateY(0); }
}
.crowd-band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 150px;
  z-index: 1;
  opacity: .68;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 45%, transparent 100%);
  mask-image: linear-gradient(to top, #000 45%, transparent 100%);
}
.crowd-band svg { width: 100%; height: 100%; display: block; }
.crowd-arm {
  animation: crowd-wave var(--cdur, 3s) ease-in-out infinite;
  animation-delay: var(--cdelay, 0s);
}
@keyframes crowd-wave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { .crowd-arm { animation: none; } }
.light-sweep {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
}

/* ---------- bottom-of-page closer: crossing stage lights + crowd ---------- */
.stage-lights-band {
  position: relative;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;
  margin-top: 44px;
  margin-bottom: 8px;
  background: linear-gradient(180deg, #0d0b09 0%, #1c1712 55%, #2a1d0c 100%);
}
.stage-lights-band .stage-lights-copy {
  position: relative; z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.beam-rig {
  position: absolute; top: 0; left: 50%; width: 0; height: 0; z-index: 0; pointer-events: none;
}
.beam-rig .beam {
  position: absolute; top: -20px; left: 0;
  width: var(--w, 6px); height: 620px;
  transform: rotate(var(--angle, 0deg));
  transform-origin: top center;
  filter: blur(5px);
  mix-blend-mode: screen;
  opacity: .5;
  animation: beam-flicker var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes beam-flicker {
  0%, 100% { opacity: .3; }
  50%      { opacity: .65; }
}
@media (prefers-reduced-motion: reduce) { .beam-rig .beam { animation: none; opacity: .45; } }

/* upward beams in the main hero: anchored at the piano keys, shining up past
   the equalizer toward the "Find your musician..." title */
.beam-rig-up {
  position: absolute; bottom: 64px; left: 50%; width: 0; height: 0; z-index: 0; pointer-events: none;
}
.beam-rig-up .beam {
  position: absolute; bottom: -20px; left: 0;
  width: var(--w, 6px); height: 380px;
  transform: rotate(var(--angle, 0deg));
  transform-origin: bottom center;
  filter: blur(5px);
  mix-blend-mode: screen;
  opacity: .5;
  animation: beam-flicker var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@media (prefers-reduced-motion: reduce) { .beam-rig-up .beam { animation: none; opacity: .45; } }

/* a second set, anchored right beneath the title/subtitle block, shining
   down to meet the ones rising from the piano keys */
.beam-rig-title {
  position: absolute; top: 100%; left: 50%; width: 0; height: 0; z-index: 0; pointer-events: none;
}
.beam-rig-title .beam {
  position: absolute; top: -20px; left: 0;
  width: var(--w, 6px); height: 280px;
  transform: rotate(var(--angle, 0deg));
  transform-origin: top center;
  filter: blur(5px);
  mix-blend-mode: screen;
  opacity: .5;
  animation: beam-flicker var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@media (prefers-reduced-motion: reduce) { .beam-rig-title .beam { animation: none; opacity: .45; } }
.crowd-band--tall {
  height: 300px;
  opacity: .88;
  -webkit-mask-image: linear-gradient(to top, #000 32%, transparent 96%);
  mask-image: linear-gradient(to top, #000 32%, transparent 96%);
}
.stage-lights-copy { position: relative; z-index: 2; text-align: center; color: #fff; }
.stage-lights-copy h2 { font-size: 26px; margin-bottom: 6px; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.stage-lights-copy p { color: rgba(255,255,255,.85); margin: 0; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.light-sweep::after {
  content: '';
  position: absolute; top: -50%; left: -30%;
  width: 40%; height: 200%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.10) 45%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.10) 55%, transparent 100%);
  animation: sweep 7s ease-in-out infinite;
}
@keyframes sweep {
  0%   { transform: translateX(-40%); }
  50%  { transform: translateX(220%); }
  100% { transform: translateX(220%); }
}
.piano-strip {
  position: relative;
  z-index: 2;
  height: 64px;
  margin-top: auto;
  display: flex;
  background: linear-gradient(180deg, #f7f1e8 0%, #ddd1bd 100%);
  box-shadow: 0 -10px 40px rgba(6, 3, 20, .5);
  border-top: 1px solid rgba(255,255,255,.5);
}
/* the hero's own piano sits flush at the hero's bottom edge (overflow:hidden
   clips anything below it), so its "beneath the keys" glow bleeds upward
   from the keys into the equalizer instead, right where the beams start.
   Sits behind the equalizer bars (z-index 1, same layer as the crowd band). */
.keys-glow {
  /* anchored at the very bottom of the keys (not their top edge) — the
     portion behind the opaque piano is hidden, so height is padded out to
     keep the same amount visible above it */
  position: absolute; left: 0; right: 0; bottom: 0; height: 164px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(240,181,68,.5) 0%, rgba(240,181,68,.22) 55%, transparent 100%);
  filter: blur(14px);
}
/* light continuing past the bottom of the keys, downward onto the page below
   the hero (the hero itself clips at its own edge, so this lives just
   outside it, pulled up flush against the piano — no gap) */
.keys-glow-below {
  height: 150px;
  margin-top: -24px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(240,181,68,.4) 0%, rgba(240,181,68,.18) 45%, transparent 100%);
  filter: blur(10px);
}
.piano-strip .bk {
  flex: 1;
  border-right: 1px solid rgba(60, 48, 34, .3);
  position: relative;
}
.piano-strip .bk::after {
  content: '';
  position: absolute; top: 0; left: 8%; right: 8%; height: 62%;
  background: linear-gradient(180deg, #2a241e 0%, #14110e 100%);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 3px 6px rgba(0,0,0,.4);
}
.piano-strip .bk.no-black::after { content: none; }

.equalizer {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding: 0 20px 6px;
}
.equalizer .bar {
  width: 7px;
  border-radius: 4px 4px 0 0;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(240, 181, 68, .5);
  transform-origin: bottom;
  animation: eq-bounce var(--dur, 1.2s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes eq-bounce {
  0%, 100% { transform: scaleY(var(--min, .3)); }
  50%      { transform: scaleY(var(--max, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .equalizer .bar { animation: none; transform: scaleY(.6); }
}

.vinyl-wrap {
  position: absolute;
  z-index: 2;
  right: 4%;
  top: 18%;
  width: 190px;
  height: 190px;
  animation: vinyl-spin 9s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .vinyl-wrap { animation: none; } }
@keyframes vinyl-spin { to { transform: rotate(360deg); } }
.vinyl-wrap svg { width: 100%; height: 100%; filter: drop-shadow(0 14px 30px rgba(0,0,0,.5)); }
.tonearm {
  position: absolute;
  z-index: 3;
  right: 2%;
  top: 10%;
  width: 90px;
  height: 90px;
  transform: rotate(24deg);
  transform-origin: 88% 12%;
  opacity: .92;
}

.safety-notice {
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  margin: 14px 0;
  line-height: 1.5;
}

/* ================= MOBILE (phones) ================= */
@media (max-width: 640px) {
  .container { padding: 0 14px; }

  /* header: let it wrap onto two lines instead of clipping at a fixed
     64px height when the brand + all four nav links can't fit one row */
  header.topbar .container { height: auto; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; gap: 8px; }
  .brand { font-size: 17px; }
  .nav-links { gap: 2px; }
  .nav-links button { padding: 6px 8px; font-size: 13px; }

  h1 { font-size: 21px; }
  .hero { padding: 44px 14px 40px; margin-bottom: 16px; }
  .hero h1 { font-size: 24px; }
  .hero p { font-size: 13px; }
  .hero .music-note { font-size: 24px; }

  /* the vinyl record is sized for a wide hero — shrink and tuck it into
     the corner so it stops overlapping the (now-wrapping) title text */
  .hero.stage-hero { min-height: 340px; }
  .vinyl-wrap { width: 84px; height: 84px; top: 8px; right: 4%; }
  .tonearm { width: 46px; height: 46px; top: 4px; right: 2%; }

  /* thinner, tighter equalizer bars so more of the spectrum fits before
     the hero's overflow:hidden starts cropping the outer bars */
  .equalizer { gap: 2px; padding: 0 10px 4px; }
  .equalizer .bar { width: 4px; }

  .stage-lights-band { min-height: 300px; }
  .stage-lights-copy h2 { font-size: 20px; }
  .stage-lights-copy p { font-size: 13px; }
  .beam-rig .beam, .beam-rig-up .beam, .beam-rig-title .beam { width: calc(var(--w, 6px) * 0.7); }

  .grid { grid-template-columns: 1fr; }
  .card { padding: 16px; }
  .center-form { margin: 24px auto; }
}

/* ---------- category art (design system: Category asset group) ---------- */
.category-tile {
  position: relative;
  overflow: hidden;
  display: block;
  cursor: pointer;
  background-color: var(--card);
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: top center;
  background-size: 100% 200px;
  border: 1px solid var(--border);
  padding: 216px 16px 16px;
  color: var(--text);
}
.category-tile h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; margin: 0 0 4px; color: var(--text-strong); }
.category-tile p { color: var(--muted); }
.category-tile .cat-explore { color: var(--primary-light); margin-top: 10px; }
.category-tile:hover { transform: translateY(-3px); filter: none; border-color: var(--border-strong); }
.cat-drums { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Drums%20and%20percussion%22%3E%20%3Ctitle%3EDrums%20and%20percussion%3C%2Ftitle%3E%20%3Crect%20width%3D%22320%22%20height%3D%22200%22%20fill%3D%22%238a4d05%22%2F%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fbf8f3%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%3Ccircle%20cx%3D%22160%22%20cy%3D%22132%22%20r%3D%2250%22%2F%3E%20%20%3Ccircle%20cx%3D%22160%22%20cy%3D%22132%22%20r%3D%2217%22%20fill%3D%22%23fbf8f3%22%20stroke%3D%22none%22%2F%3E%20%20%3Ccircle%20cx%3D%2272%22%20cy%3D%2292%22%20r%3D%2228%22%2F%3E%20%20%3Ccircle%20cx%3D%22248%22%20cy%3D%2292%22%20r%3D%2228%22%2F%3E%20%20%3Cellipse%20cx%3D%22160%22%20cy%3D%2244%22%20rx%3D%2246%22%20ry%3D%229%22%2F%3E%20%20%3Cpath%20d%3D%22M160%2053v22%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); }
.cat-guitar { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Guitar%20and%20bass%22%3E%20%3Ctitle%3EGuitar%20and%20bass%3C%2Ftitle%3E%20%3Crect%20width%3D%22320%22%20height%3D%22200%22%20fill%3D%22%231b5a86%22%2F%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fbf8f3%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%3Cpath%20d%3D%22M160%2068c40%200%2052%2016%2052%2034%200%2016-24%2018-24%2030%200%2014%2028%2018%2028%2032%200%2016-24%2024-56%2024s-56-8-56-24c0-14%2028-18%2028-32%200-12-24-14-24-30%200-18%2012-34%2052-34z%22%2F%3E%20%20%3Ccircle%20cx%3D%22160%22%20cy%3D%22108%22%20r%3D%2212%22%2F%3E%20%20%3Cpath%20d%3D%22M160%2068V32%22%2F%3E%20%20%3Crect%20x%3D%22146%22%20y%3D%2214%22%20width%3D%2228%22%20height%3D%2218%22%20rx%3D%226%22%2F%3E%20%20%3Crect%20x%3D%22134%22%20y%3D%22150%22%20width%3D%2252%22%20height%3D%2212%22%20rx%3D%226%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); }
.cat-vocals { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Vocals%22%3E%20%3Ctitle%3EVocals%3C%2Ftitle%3E%20%3Crect%20width%3D%22320%22%20height%3D%22200%22%20fill%3D%22%230f5d50%22%2F%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fbf8f3%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%3Crect%20x%3D%22138%22%20y%3D%2230%22%20width%3D%2244%22%20height%3D%2282%22%20rx%3D%2222%22%2F%3E%20%20%3Cpath%20d%3D%22M114%2092a46%2046%200%200%200%2092%200%22%2F%3E%20%20%3Cpath%20d%3D%22M160%20138v28%22%2F%3E%20%20%3Cpath%20d%3D%22M132%20172h56%22%2F%3E%20%20%3Cpath%20d%3D%22M148%2052h24M148%2070h24%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); }
.cat-keys { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Keys%20and%20piano%22%3E%20%3Ctitle%3EKeys%20and%20piano%3C%2Ftitle%3E%20%3Crect%20width%3D%22320%22%20height%3D%22200%22%20fill%3D%22%237a4405%22%2F%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fbf8f3%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%3Crect%20x%3D%2242%22%20y%3D%2256%22%20width%3D%22236%22%20height%3D%2296%22%20rx%3D%228%22%2F%3E%20%20%3Cpath%20d%3D%22M89%2056v96M136%2056v96M184%2056v96M231%2056v96%22%2F%3E%20%20%3Cpath%20d%3D%22M89%2056v54M136%2056v54M184%2056v54M231%2056v54%22%20stroke-width%3D%2220%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); }
.cat-dj { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22DJs%22%3E%20%3Ctitle%3EDJs%3C%2Ftitle%3E%20%3Crect%20width%3D%22320%22%20height%3D%22200%22%20fill%3D%22%231b5a86%22%2F%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fbf8f3%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%3Ccircle%20cx%3D%22116%22%20cy%3D%22102%22%20r%3D%2252%22%2F%3E%20%20%3Ccircle%20cx%3D%22116%22%20cy%3D%22102%22%20r%3D%2220%22%2F%3E%20%20%3Ccircle%20cx%3D%22116%22%20cy%3D%22102%22%20r%3D%226%22%20fill%3D%22%23fbf8f3%22%20stroke%3D%22none%22%2F%3E%20%20%3Cpath%20d%3D%22M232%2040v36l-62%2040%22%2F%3E%20%20%3Cpath%20d%3D%22M232%20132v44M272%20118v58%22%2F%3E%20%20%3Crect%20x%3D%22216%22%20y%3D%22140%22%20width%3D%2232%22%20height%3D%2216%22%20rx%3D%228%22%20fill%3D%22%23fbf8f3%22%20stroke%3D%22none%22%2F%3E%20%20%3Crect%20x%3D%22256%22%20y%3D%22152%22%20width%3D%2232%22%20height%3D%2216%22%20rx%3D%228%22%20fill%3D%22%23fbf8f3%22%20stroke%3D%22none%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); }
.cat-horns { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Horns%20and%20woodwinds%22%3E%20%3Ctitle%3EHorns%20and%20woodwinds%3C%2Ftitle%3E%20%3Crect%20width%3D%22320%22%20height%3D%22200%22%20fill%3D%22%230a4a40%22%2F%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fbf8f3%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%3Cpath%20d%3D%22M54%20118h158%22%2F%3E%20%20%3Cpath%20d%3D%22M212%2084l58-28v124l-58-28z%22%2F%3E%20%20%3Cpath%20d%3D%22M96%20118V74M136%20118V74M176%20118V74%22%2F%3E%20%20%3Crect%20x%3D%2286%22%20y%3D%2256%22%20width%3D%2220%22%20height%3D%2218%22%20rx%3D%226%22%2F%3E%20%20%3Crect%20x%3D%22126%22%20y%3D%2256%22%20width%3D%2220%22%20height%3D%2218%22%20rx%3D%226%22%2F%3E%20%20%3Crect%20x%3D%22166%22%20y%3D%2256%22%20width%3D%2220%22%20height%3D%2218%22%20rx%3D%226%22%2F%3E%20%20%3Ccircle%20cx%3D%2248%22%20cy%3D%22118%22%20r%3D%2212%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); }
.cat-mixing { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Mixing%20and%20sound%22%3E%20%3Ctitle%3EMixing%20and%20sound%3C%2Ftitle%3E%20%3Crect%20width%3D%22320%22%20height%3D%22200%22%20fill%3D%22%238a4d05%22%2F%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fbf8f3%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%3Cpath%20d%3D%22M72%2044v112M124%2044v112M176%2044v112M228%2044v112%22%2F%3E%20%20%3Crect%20x%3D%2256%22%20y%3D%22104%22%20width%3D%2232%22%20height%3D%2218%22%20rx%3D%226%22%20fill%3D%22%23fbf8f3%22%20stroke%3D%22none%22%2F%3E%20%20%3Crect%20x%3D%22108%22%20y%3D%2262%22%20width%3D%2232%22%20height%3D%2218%22%20rx%3D%226%22%20fill%3D%22%23fbf8f3%22%20stroke%3D%22none%22%2F%3E%20%20%3Crect%20x%3D%22160%22%20y%3D%22126%22%20width%3D%2232%22%20height%3D%2218%22%20rx%3D%226%22%20fill%3D%22%23fbf8f3%22%20stroke%3D%22none%22%2F%3E%20%20%3Crect%20x%3D%22212%22%20y%3D%2284%22%20width%3D%2232%22%20height%3D%2218%22%20rx%3D%226%22%20fill%3D%22%23fbf8f3%22%20stroke%3D%22none%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); }
.cat-stage { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Stage%20and%20lighting%22%3E%20%3Ctitle%3EStage%20and%20lighting%3C%2Ftitle%3E%20%3Crect%20width%3D%22320%22%20height%3D%22200%22%20fill%3D%22%230a4a40%22%2F%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fbf8f3%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%3Cpath%20d%3D%22M30%2034h260%22%2F%3E%20%20%3Cpath%20d%3D%22M160%2034v14%22%2F%3E%20%20%3Crect%20x%3D%22124%22%20y%3D%2248%22%20width%3D%2272%22%20height%3D%2248%22%20rx%3D%2212%22%2F%3E%20%20%3Cpath%20d%3D%22M128%20100%2074%20168M192%20100l54%2068%22%2F%3E%20%20%3Cellipse%20cx%3D%22160%22%20cy%3D%22176%22%20rx%3D%2286%22%20ry%3D%2210%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); }
.cat-dance { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20200%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%20role%3D%22img%22%20aria-label%3D%22Dance%20and%20performance%22%3E%20%3Ctitle%3EDance%20and%20performance%3C%2Ftitle%3E%20%3Crect%20width%3D%22320%22%20height%3D%22200%22%20fill%3D%22%230f5d50%22%2F%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23fbf8f3%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%20%3Ccircle%20cx%3D%22146%22%20cy%3D%2242%22%20r%3D%2215%22%2F%3E%20%20%3Cpath%20d%3D%22M146%2060l-8%2054%22%2F%3E%20%20%3Cpath%20d%3D%22M100%2096l38-20%2052-30%22%2F%3E%20%20%3Cpath%20d%3D%22M138%20114l-30%2058M138%20114l42%2030%2010%2030%22%2F%3E%20%20%3Cpath%20d%3D%22M238%2046a58%2058%200%200%201%200%20110%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); }

/* Real gear photos in place of the illustration, for the categories we have
   actual photos for. The .cat-* illustrations above rely on background-size:
   100% 118px plus the SVG's own preserveAspectRatio="slice" to fill exactly
   the top 118px art strip without distortion — that slice trick only works
   for the SVG's internal coordinate system, not a plain raster photo, and a
   photo set directly as .category-tile's background with background-size:
   cover would cover the tile's FULL padded height, not just that top strip.
   So instead: turn off the tile's own background-image for these three and
   pin the photo to an absolutely-positioned ::before capped at the same
   art-area height as .category-tile's background-size above, with
   cover+position doing the crop safely within that fixed box. */
.category-tile.cat-drums-photo,
.category-tile.cat-keys-photo,
.category-tile.cat-mixing-photo,
.category-tile.cat-guitar-photo,
.category-tile.cat-vocals-photo,
.category-tile.cat-bass-photo,
.category-tile.cat-dj-photo,
.category-tile.cat-mc-photo,
.category-tile.cat-horns-photo {
  background-image: none;
}
.cat-drums-photo::before,
.cat-keys-photo::before,
.cat-mixing-photo::before,
.cat-guitar-photo::before,
.cat-vocals-photo::before,
.cat-bass-photo::before,
.cat-dj-photo::before,
.cat-mc-photo::before,
.cat-horns-photo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
}
.cat-drums-photo::before { background-image: url('/images/categories/session-drummers.jpg'); background-position: center 55%; }
.cat-keys-photo::before { background-image: url('/images/categories/session-keys.jpg'); background-position: center 40%; }
.cat-mixing-photo::before { background-image: url('/images/categories/sound-engineers.jpg'); background-position: center 35%; }
.cat-guitar-photo::before { background-image: url('/images/categories/session-guitarists.jpg'); background-position: center 40%; }
.cat-vocals-photo::before { background-image: url('/images/categories/lead-vocalists.jpg'); background-position: center 30%; }
.cat-bass-photo::before { background-image: url('/images/categories/session-bassists.jpg'); background-position: center 45%; }
.cat-dj-photo::before { background-image: url('/images/categories/djs.jpg'); background-position: center 35%; }
.cat-mc-photo::before { background-image: url('/images/categories/mcs-hosts.jpg'); background-position: center 30%; }
.cat-horns-photo::before { background-image: url('/images/categories/horns-woodwinds.jpg'); background-position: center 25%; }