/* ChoirWiz public site. The one motion moment: four soft voice-waves (from the Ensemble Rise logo) fly in and settle behind the hero. */
body.site{background:var(--bg)}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px clamp(16px,4vw,40px);
  background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top-nav{display:flex;gap:4px}
.top-nav a{text-decoration:none;color:var(--ink);font-weight:700;font-size:.92rem;padding:8px 14px;border-radius:999px}
.top-nav a:hover{background:var(--surface-2)}

.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(24px,5vw,64px);align-items:center;max-width:1240px;margin:0 auto;
  padding:clamp(28px,6vw,80px) clamp(16px,4vw,40px) clamp(36px,6vw,80px)}
.petals{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:visible}
.pt{position:absolute;width:clamp(220px,30vw,460px);height:auto;opacity:.22;animation:fly 1.4s var(--spring) both,drift 11s ease-in-out infinite 1.4s}
.p1{left:-12%;top:-2%;--rot:-6deg;--dx:-40vw;--dy:-20vh}
.p2{right:-10%;top:-8%;--rot:10deg;--dx:40vw;--dy:-30vh;animation-delay:.08s,1.5s}
.p3{left:20%;bottom:-10%;--rot:-4deg;--dx:0;--dy:40vh;animation-delay:.16s,1.6s}
.p4{right:-6%;bottom:2%;--rot:6deg;--dx:40vw;--dy:30vh;animation-delay:.24s,1.7s}
@keyframes fly{from{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot) - 200deg)) scale(.3);opacity:0}to{transform:translate(0,0) rotate(var(--rot)) scale(1);opacity:.22}}
@keyframes drift{0%,100%{transform:rotate(var(--rot)) translate(0,0)}50%{transform:rotate(calc(var(--rot) + 3deg)) translate(10px,-12px)}}
.hero-copy{display:grid;gap:22px;align-content:center;animation:rise .8s var(--ease) .5s both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero h1{font-size:clamp(2.2rem,5.2vw,4.2rem);line-height:1.02;letter-spacing:-.02em}
.hero .lede{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:46ch;margin:0}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.where{margin:0;font-size:.95rem;font-weight:600;opacity:.85;max-width:40ch}.where span{display:block;font-weight:500;opacity:.8}
.stores{display:flex;gap:10px 12px;align-items:center;flex-wrap:wrap}
.stores .note{margin:0}
@media (max-width:640px){.stores .note{flex-basis:100%}}
.store{display:inline-flex;line-height:0;border-radius:8px;transition:transform .2s var(--spring)}
.store img{height:48px;width:auto;display:block}
.store:hover{transform:translateY(-2px)}
.store small{display:block;font-size:.68rem;font-weight:600;opacity:.75;margin-bottom:2px}
.proof{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.proof li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-weight:700;font-size:.84rem;box-shadow:var(--shadow-sm)}
.proof li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-right:8px;vertical-align:1px}
.hero-film{animation:rise .8s var(--ease) .7s both;min-width:0}
.film{position:relative;border-radius:28px;overflow:hidden;background:#0b0817;box-shadow:0 40px 90px -30px rgba(24,14,58,.55),0 0 0 1px rgba(24,14,58,.08);aspect-ratio:16/9;transform:rotate(1.2deg);transition:transform .4s var(--spring)}
.film:hover{transform:rotate(0)}
.film.playing{transform:none}
.film video{width:100%;height:100%;object-fit:cover}
.film-play{position:absolute;inset:0;margin:auto;width:88px;height:88px;border-radius:50%;border:0;background:var(--brand);color:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 20px 40px -14px var(--magenta);transition:transform .2s var(--spring)}
.film-play:hover{transform:scale(1.08)}
.film-play::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:3px solid var(--magenta);opacity:0;animation:halo 1.8s ease-out infinite}
.film-play svg{width:38px;height:38px;fill:currentColor;margin-left:5px}
@keyframes halo{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.45);opacity:0}}
.film.playing .film-play{display:none}

.walk{max-width:1180px;margin:0 auto;padding:clamp(24px,5vw,60px) clamp(16px,4vw,40px);display:grid;gap:clamp(40px,7vw,96px)}
.walk-head{display:grid;gap:8px;max-width:640px}
.walk-head h2,.family h2,.pricing h2,.faq h2{font-size:clamp(1.7rem,3.6vw,2.6rem)}
.feat{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(24px,5vw,64px);align-items:center}
.feat.flip .feat-copy{order:2}
.feat-copy{display:grid;gap:12px}
.feat h3{font-size:clamp(1.4rem,2.6vw,2rem)}
.feat p{margin:0;color:var(--muted);font-size:1.02rem;max-width:52ch}
.feat ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.feat li{padding-left:26px;position:relative;font-weight:600}
.feat li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;background:var(--teal)}
.feat:nth-child(3n+1) li::before{background:var(--coral)} .feat:nth-child(3n+2) li::before{background:var(--amber)}
.feat-shot{margin:0;border-radius:24px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--line);transform:rotate(-1deg);transition:transform .4s var(--spring)}
.feat:hover .feat-shot{transform:rotate(0)}
.feat.flip .feat-shot{transform:rotate(1deg)}
.feat-shot.phone{width:min(300px,100%);justify-self:center;border-radius:36px;border:8px solid var(--plum)}
.feat-shot img{width:100%;height:auto}

.family{background:var(--plum);color:#fff;margin:clamp(24px,5vw,60px) 0;padding:clamp(36px,6vw,72px) clamp(16px,4vw,40px);position:relative;overflow:hidden}
.family::before{content:"";position:absolute;right:-120px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(232,68,168,.45),transparent 70%)}
.family>*{position:relative;max-width:1180px;margin-inline:auto}
.family .lede{color:rgba(255,255,255,.75);max-width:60ch}
.fam-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.fam{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:18px 24px;display:grid;gap:2px;min-width:200px}
.fam b{font-family:var(--f-display);font-size:1.2rem}.fam span{font-size:.85rem;opacity:.7}
.fam.now{background:var(--brand);border-color:transparent}.fam.now span{opacity:.95}

.pricing{max-width:1180px;margin:0 auto;padding:clamp(24px,5vw,60px) clamp(16px,4vw,40px);display:grid;gap:28px}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;align-items:start}
.plan{background:var(--surface);border-radius:var(--r);padding:24px;display:grid;gap:8px;box-shadow:var(--shadow-sm);border-top:8px solid var(--pc);position:relative}
.plan-singer{--pc:var(--teal)} .plan-director{--pc:var(--coral)} .plan-school{--pc:var(--grape)}
.plan-director{box-shadow:var(--shadow);transform:translateY(-8px)}
.plan-director::after{content:"Most choirs";position:absolute;top:-16px;right:14px;background:var(--brand);color:#fff;font-weight:800;font-size:.75rem;padding:5px 10px;border-radius:999px}
.plan-name{font-family:var(--f-display);font-weight:700;font-size:1.2rem}
.plan-price{font-family:var(--f-display);font-weight:700;font-size:2.4rem;line-height:1}
.plan-price span{font-size:1rem;color:var(--muted);font-family:var(--f-body)}
.plan p{margin:4px 0 8px;color:var(--muted)}
.plan .btn{justify-self:stretch}

.faq{max-width:760px;margin:0 auto;padding:clamp(24px,5vw,60px) clamp(16px,4vw,40px);display:grid;gap:10px}
.faq h2{margin-bottom:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 18px;transition:box-shadow .2s}
.faq details[open]{box-shadow:var(--shadow-sm)}
.faq summary{cursor:pointer;font-weight:800;font-size:1.02rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.faq summary::after{content:"+";font-family:var(--f-display);font-size:1.3rem;color:var(--magenta);transition:transform .25s var(--spring)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:10px 0 0;color:var(--muted)}

.site-foot{max-width:1180px;margin:0 auto;padding:40px clamp(16px,4vw,40px) 48px;display:grid;gap:10px;border-top:1px solid var(--line)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .feat,.feat.flip{grid-template-columns:1fr}.feat.flip .feat-copy{order:0}
  .top-nav{display:none}
  .p3{display:none}.pt{opacity:.7}
  .plan-director{transform:none}
}
a.fam{color:#fff;text-decoration:none}a.fam:hover{filter:brightness(1.08)}
html[data-brand="orchestra"] .plan-director::after{content:"Most orchestras"}
html[data-brand="band"] .plan-director::after{content:"Most bands"}
/* each family card in its own brand's colors */
.fam.now.choir{background:linear-gradient(120deg,#5B2BE0,#E8338F 55%,#FF9A1F)}
.fam.now.orch{background:linear-gradient(120deg,#2A33D9,#14A3D6 55%,#1FCC8C)}
.fam.now.band{background:linear-gradient(120deg,#B91B31,#FF5A1F 55%,#FFC21F)}
html[data-brand="orchestra"] .family::before{background:radial-gradient(closest-side,rgba(20,163,214,.45),transparent 70%)}
html[data-brand="band"] .family::before{background:radial-gradient(closest-side,rgba(255,90,31,.45),transparent 70%)}
/* the play button sits in the corner, so the film's title card stays readable */
.film-play{inset:auto auto 18px 18px;margin:0;width:68px;height:68px}.film-play svg{width:30px;height:30px}
/* phones: the petals stay out from under the headline */
@media (max-width:700px){.p1,.p2{top:auto;bottom:40%;opacity:.12}.pt{width:200px}}