/* ChoirWiz brand tokens — shared by the public site and the app.
   Logo: "The Ensemble Rise" (four singers on one wave). Brand gradient: Voice Violet → Encore Magenta → Sunrise Orange.
   Light content on a deep Stage Night chrome. One brand gradient, used once per screen. */
:root{
  --coral:#FF4D6D; --magenta:#E8338F; --grape:#5B2BE0; --teal:#00B8A9; --amber:#FF9A1F; --sky:#3AB0FF; --sun:#FFC93A; --pink:#FF7EB6;
  --plum:#14103A; --plum-2:#2B0F63; --plum-3:#3A1A80;
  --bg:#FBF9FF; --surface:#FFFFFF; --surface-2:#F3EEFB; --ink:#14103A; --muted:#6B628C;
  --line:#E8E2F8; --grid:#F1EDFB; --lane:#FDFCFF;
  --s:#FF5A5F; --a:#F59E0B; --t:#00A99B; --b:#6C3CE1;
  --gold:#FF5A5F; --good:#10A36B; --warn:#E59400; --bad:#E5484D;
  --brand:linear-gradient(120deg,#5B2BE0,#E8338F 55%,#FF9A1F);
  --shadow:0 18px 40px -20px rgba(45,20,120,.35);
  --shadow-sm:0 4px 14px -6px rgba(45,20,120,.18);
  --f-display:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:22px; --r-sm:14px;
  --ease:cubic-bezier(.2,.9,.25,1.05); --spring:cubic-bezier(.34,1.56,.64,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#120A2C; --surface:#1C1143; --surface-2:#261856; --ink:#F7F3FF; --muted:#B4A9DA;
  --line:#352563; --grid:#2A1C58; --lane:#160D38;
  --s:#FF7A7E; --a:#FFC24B; --t:#2FD9C7; --b:#A98BFF; --gold:#FF7A7E;
  --good:#3FD99A; --warn:#FFC24B; --bad:#FF7477; --shadow:0 18px 40px -18px rgba(0,0,0,.6); --shadow-sm:0 4px 14px -6px rgba(0,0,0,.5); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#120A2C; --surface:#1C1143; --surface-2:#261856; --ink:#F7F3FF; --muted:#B4A9DA;
  --line:#352563; --grid:#2A1C58; --lane:#160D38;
  --s:#FF7A7E; --a:#FFC24B; --t:#2FD9C7; --b:#A98BFF; --gold:#FF7A7E;
  --good:#3FD99A; --warn:#FFC24B; --bad:#FF7477; --shadow:0 18px 40px -18px rgba(0,0,0,.6); --shadow-sm:0 4px 14px -6px rgba(0,0,0,.5); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{overflow-x:clip;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;overflow-x:clip}
img,svg,video{max-width:100%;display:block}
h1,h2,h3{font-family:var(--f-display);font-weight:800;letter-spacing:-.01em;text-wrap:balance;margin:0;line-height:1.1}
button{font-family:inherit;color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--sky);outline-offset:3px}
a{color:var(--grape)}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.grow{flex:1}

/* ---------- logo: the Ensemble Rise (media/logo.svg) ---------- */
.bloom{height:40px;width:auto;flex:none;display:inline-flex;align-items:flex-end}
.bloom img{height:100%;width:auto;display:block;transform-origin:50% 100%}
.wordmark{font-family:var(--f-display);font-weight:800;font-size:1.3rem;letter-spacing:-.01em;line-height:1}
.wordmark b{font-weight:800;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
@keyframes bloom-in{from{transform:translateY(10px) scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes bloom-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06) translateY(-1px)}}
.bloom.in img{animation:bloom-in .8s var(--spring) both}
.bloom.live img{animation:bloom-breathe calc(60s / var(--bpm,120)) ease-in-out infinite}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:1rem;padding:14px 24px;border-radius:999px;
  text-decoration:none;cursor:pointer;border:0;transition:transform .18s var(--spring),box-shadow .18s ease;position:relative;isolation:isolate;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-brand{background:var(--brand);color:#fff;box-shadow:0 14px 28px -12px var(--magenta)}
.btn-brand:hover{box-shadow:0 18px 34px -12px var(--magenta)}
.btn-ghost{background:var(--surface);color:var(--ink);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-small{padding:9px 16px;font-size:.88rem}
.chipbtn{text-decoration:none;display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);background:var(--surface);color:var(--ink);font-weight:700;font-size:.85rem;padding:8px 14px;border-radius:999px;cursor:pointer;transition:border-color .15s,transform .15s var(--spring)}
.chipbtn:hover{border-color:var(--ink)}
.chipbtn:active{transform:scale(.97)}
.chipbtn[aria-pressed="true"],.chipbtn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--surface-2);flex-wrap:wrap}
.seg button{border:0;background:none;color:var(--muted);font-weight:700;font-size:.86rem;padding:8px 14px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.label{font-size:.82rem;font-weight:800;color:var(--muted)}
.note{font-size:.84rem;color:var(--muted);margin:0}
.kicker{margin:0 0 4px;font-weight:800;font-size:.9rem;color:var(--magenta)}
.linkbtn{border:0;background:none;color:inherit;text-decoration:underline;cursor:pointer;font:inherit;padding:0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- OrchestraWiz: the family's blue → teal → green (Ensemble Rise kit, Nov 2026) ----------
   Same type, layout and navy ink; the brand gradient, its accents and the light grounds turn cool. */
html[data-brand="orchestra"]{
  --brand:linear-gradient(120deg,#2A33D9,#14A3D6 55%,#1FCC8C);
  --grape:#2A33D9; --magenta:#14A3D6; --sky:#14A3D6; --coral:#3D6BFF; --amber:#14B8A6; --sun:#5FE39A; --pink:#7CC4FF;
  --plum:#0B1638; --plum-2:#0F2A6B; --plum-3:#16408F; --ink:#0B1638;
  --shadow:0 18px 40px -20px rgba(15,42,107,.35); --shadow-sm:0 4px 14px -6px rgba(15,42,107,.18);
}
/* OrchestraWiz in dark mode: night blue instead of ChoirWiz's violet night */
@media (prefers-color-scheme: dark){html[data-brand="orchestra"]:not([data-theme="light"]){
  --bg:#07112B; --surface:#0E1C40; --surface-2:#142A57; --ink:#F2F7FF; --muted:#A3B5D9; --line:#1F3A6E; --grid:#16294F; --lane:#0A1734}}
html[data-brand="orchestra"][data-theme="dark"]{--bg:#07112B; --surface:#0E1C40; --surface-2:#142A57; --ink:#F2F7FF; --muted:#A3B5D9; --line:#1F3A6E; --grid:#16294F; --lane:#0A1734}
@media (prefers-color-scheme: light){html[data-brand="orchestra"]:not([data-theme="dark"]){
  --bg:#F7FAFF; --surface-2:#EAF2FC; --line:#DCE6F6; --grid:#EBF1FB; --lane:#FCFDFF; --muted:#5E6A8C}}
html[data-brand="orchestra"][data-theme="light"]{--bg:#F7FAFF; --surface-2:#EAF2FC; --line:#DCE6F6; --grid:#EBF1FB; --lane:#FCFDFF; --muted:#5E6A8C}

/* ---------- BandWiz: the family's crimson → orange → gold (Ensemble Rise kit, Nov 2026) ----------
   Same type and layout; the brand gradient, its accents and the grounds turn warm, like brass under stage lights. */
html[data-brand="band"]{
  --brand:linear-gradient(120deg,#B91B31,#FF5A1F 55%,#FFC21F);
  --grape:#B91B31; --magenta:#E8461F; --sky:#F26B1D; --coral:#E8461F; --amber:#FF9A1F; --sun:#FFC21F; --pink:#FF8A5B;
  --plum:#2A0710; --plum-2:#4A0E1C; --plum-3:#6B1426; --ink:#1F0A10;
  --shadow:0 18px 40px -20px rgba(90,15,30,.35); --shadow-sm:0 4px 14px -6px rgba(90,15,30,.18);
}
@media (prefers-color-scheme: dark){html[data-brand="band"]:not([data-theme="light"]){
  --bg:#1A0609; --surface:#2A0C13; --surface-2:#3A121C; --ink:#FFF5F0; --muted:#D9AFA3; --line:#4E1A26; --grid:#38111A; --lane:#22080D}}
html[data-brand="band"][data-theme="dark"]{--bg:#1A0609; --surface:#2A0C13; --surface-2:#3A121C; --ink:#FFF5F0; --muted:#D9AFA3; --line:#4E1A26; --grid:#38111A; --lane:#22080D}
@media (prefers-color-scheme: light){html[data-brand="band"]:not([data-theme="dark"]){
  --bg:#FFFAF6; --surface-2:#FCEFE6; --line:#F3DED2; --grid:#F8EAE1; --lane:#FFFDFB; --muted:#7A5A58}}
html[data-brand="band"][data-theme="light"]{--bg:#FFFAF6; --surface-2:#FCEFE6; --line:#F3DED2; --grid:#F8EAE1; --lane:#FFFDFB; --muted:#7A5A58}