/* landing_v2: FINAL's ivory / ink (navy) / brass (amber) language, phone first. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/fraunces-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-latin.woff2) format('woff2')}

:root{
  --navy:#0c1630; --navy-2:#111e3d; --line:rgba(244,238,223,.14);
  --cream:#f4eedf; --paper:#f7f1e3; --ivory:#fbf7ee; --ink:#1b1a20; --ink-soft:#5a5448; --rule:#e3d9c3;
  --amber:#e3a53a; --amber-deep:#9a5f00; --brass-text:#8a5a12; --text:#eef0f5; --muted:#b4bccd;
  --display:'Fraunces',Georgia,serif; --ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:16px;
  /* the Grok atmosphere plate behind One Sound goes here later, e.g. url(../img/one-sound-plate.webp) */
  --os-plate:none;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--navy);color:var(--text);font:16px/1.55 var(--ui);overflow-x:hidden}
img,video{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.narrow{max-width:760px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.08;margin:0}
h2{font-size:clamp(30px,7vw,48px)}
.eyebrow{font:600 12px/1.3 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 12px}
.sub{color:var(--muted);font-size:17px;max-width:40em;margin:12px 0 0}
.acc{font-family:var(--ui);font-weight:600;font-size:.86em;margin:0 .02em 0 .04em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section[id]{scroll-margin-top:64px}


/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 22px;border-radius:999px;
  font:600 16px var(--ui);text-decoration:none;border:0;cursor:pointer;transition:transform .15s,background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--amber);color:#1b1305;box-shadow:0 6px 24px rgba(227,165,58,.28)}
.btn-primary:hover{background:#efb54d}
.btn-ghost{border:1.5px solid rgba(244,238,223,.45);color:var(--text)}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber)}
.btn:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.btn,.btn:active{transition:none;transform:none}}

/* 1 · HERO ================================================================================== */
.hero{padding:30px 0 40px;background:
  repeating-linear-gradient(180deg,transparent 0 13px,rgba(244,238,223,.035) 13px 14px) 0 118px/100% 70px no-repeat,
  radial-gradient(120% 80% at 90% 0%,#1a2b57 0%,var(--navy) 60%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
h1{font-size:clamp(38px,10.6vw,84px);font-weight:600;margin:0;line-height:1.02}
h1 span{display:block}
h1 span:first-child{color:var(--amber)}
.lede{font-size:18px;line-height:1.5;color:#dde1ea;margin:16px 0 0;max-width:30em}
.cta{display:grid;gap:10px;margin-top:22px;max-width:420px}
.cta .btn{width:100%}
.stores{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.store{display:inline-flex;border-radius:9px;min-height:48px}
.store img{height:48px;width:auto}
.stores.one .store{flex:none}
@media (min-width:600px){.stores{justify-content:flex-start}}

.ledger{margin:0;padding:16px 0 0;border-top:1px solid var(--line)}
.ledger-h{margin:0 0 4px;font-size:15px;color:var(--muted)}
.ledger-h b{color:var(--cream);font-weight:600}
.ledger p:not(.ledger-h){display:flex;align-items:center;margin:0;min-height:50px;font:400 clamp(20px,5.4vw,28px)/1.1 var(--display);color:var(--cream)}
.ledger .lw{white-space:nowrap}
.ledger .ld{flex:1;min-width:14px;border-bottom:2px dotted rgba(244,238,223,.32);margin:0 8px;transform:translateY(5px)}
.ledger .mini{height:48px;width:auto;flex:none;overflow:visible;margin-right:6px}
.ledger .mini line{stroke:rgba(244,238,223,.62);stroke-width:.11}
.ledger .mini .gl{fill:var(--cream)}
.ledger .lk{font-weight:700;color:var(--amber);font-size:1.2em;min-width:1.3em;text-align:center}
.ledger figcaption{font-size:14px;color:var(--muted);margin-top:8px}

@media (min-width:900px){
  .hero{padding:64px 0 80px}
  .hero-grid{grid-template-columns:1.1fr .9fr;column-gap:72px;align-items:center}
  h1{font-size:clamp(46px,4.3vw,64px)}
  .lede{font-size:20px}
  .cta{grid-template-columns:auto auto;justify-content:start;max-width:none;align-items:center;gap:12px}
  .cta .btn{width:auto}
  .cta .btn-primary{grid-column:1/-1;justify-self:start;min-height:56px;font-size:17px;padding:0 28px}
  .stores{justify-content:flex-start}
  .ledger{border-top:0;padding:20px 24px 18px;border-radius:var(--r);background:rgba(244,238,223,.04);border:1px solid var(--line)}
  .ledger p:not(.ledger-h){min-height:70px}
  .ledger .mini{height:66px}
}

/* 2 · DEMO ================================================================================== */
.demo{padding:48px 0 52px;background:var(--cream);color:var(--ink)}
.demo .eyebrow{color:var(--brass-text)}
.demo .sub{color:#4b463c}
.demo-grid{display:grid;gap:18px;margin-top:24px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.step-t{display:flex;align-items:center;gap:10px;margin:0 0 8px;font:600 13px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--brass-text)}
.step-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--cream);font:700 13px var(--ui);letter-spacing:0}
.assign{background:var(--ivory);border:1px solid #e4d8bd;border-radius:var(--r);padding:16px 16px 14px}
.assign-title{margin:0;font:600 26px/1.1 var(--display)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0}
.chips li{padding:6px 12px;border-radius:999px;background:#efe5cf;font:600 14px var(--ui);color:#3c3a36}
.chips .q{font-size:1.15em;line-height:1}
.link-row{display:flex;align-items:stretch;gap:8px;background:var(--ivory);border:1px solid #e4d8bd;border-radius:14px;padding:6px 6px 6px 12px}
.link{flex:1;min-width:0;align-self:center;font:500 14px/1.4 ui-monospace,'SF Mono',Menlo,Consolas,monospace;color:#2b2a30;overflow-wrap:anywhere}
.link span{white-space:nowrap}
.btn-copy{min-height:44px;padding:0 16px;background:var(--ink);color:var(--cream);font-size:15px;flex:none;border-radius:10px}
.btn-copy:hover{background:#2c2b33}
.btn-copy.done{background:#2f6b3a}
.link-note{margin:8px 2px 0;font-size:14px;color:#5a5448}
.open{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick{min-height:52px;padding:6px 10px;border-radius:12px;border:1.5px solid #d8c8a4;background:var(--ivory);color:var(--ink);
  font:600 16px/1.2 var(--ui);cursor:pointer;transition:background .15s,border-color .15s}
.pick:hover{border-color:var(--amber-deep)}
.pick[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.pick-more{grid-column:1/-1;background:transparent;border-style:dashed;font-weight:600}
.pick-more[aria-pressed="true"]{border-style:solid}

.paper{background:var(--paper);border:1px solid #e4d8bd;border-radius:var(--r);padding:16px 14px 18px;box-shadow:0 18px 50px rgba(60,40,10,.12);min-height:220px}
.empty{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:186px}
.empty::before{content:"";display:block;width:78%;height:45px;margin-bottom:18px;
  background:repeating-linear-gradient(180deg,rgba(27,26,32,.16) 0 1px,transparent 1px 11px)}
.empty-t{margin:0;font:600 22px/1.2 var(--display)}
.empty-s{margin:6px 0 0;font-size:14px;color:#5a5448}
.st-who{margin:0;font:400 15px var(--ui);color:#5a5448}
.st-who b{display:block;font:600 30px/1.1 var(--display);color:var(--ink);margin-top:2px}
.st-key{margin:6px 0 0;font:600 15px var(--ui);color:var(--brass-text)}
.st-staves{margin:10px 0 0}
.st-staves svg{display:block;height:auto;overflow:visible}
.st-staves svg+svg{margin-top:4px}
.st-same{margin:10px 0 0;font-size:15px;color:#3c3a36}
.listen{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.btn-play{min-height:48px;background:var(--amber);color:#1b1305;font-size:15px;padding:0 20px}
.btn-play.playing{background:var(--ink);color:var(--cream)}
.hint{margin:0;font-size:13px;color:#5a5448}

/* the whole band (FINAL's eight-part score, as the result view) */
.score-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:0 2px 10px;border-bottom:1px solid var(--rule);margin-bottom:6px}
.score-title{font:600 12px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--brass-text)}
.tally{font:600 12.5px var(--ui);color:var(--ink-soft)}
.score{position:relative;padding-left:10px}
.score::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:2px;background:var(--ink)}
.row{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:4px}
.row .who{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:48px;padding:4px 6px 4px 0;border:0;
  background:none;text-align:left;cursor:pointer;color:var(--ink);font:600 13px/1.2 var(--ui);border-radius:8px}
.row .who small{font:600 12px var(--display);color:var(--brass-text);margin-top:2px}
.row .who small::before{content:"▶ ";font-size:9px;vertical-align:1px;color:#b77a14}
.row.solo{background:rgba(227,165,58,.16);border-radius:10px}
.row svg{width:100%;height:auto;overflow:visible}
.band-note{margin:12px 2px 0;font-size:14px;color:#5a5448}
.staff line{stroke:#2b2a30;stroke-width:.1}
.staff .bar{stroke-width:.14}
.staff .fin{stroke-width:.42}
.staff .gl{fill:#1b1a20}
.staff .n{fill:#1b1a20;transition:fill .12s}
.staff .stem{stroke:#1b1a20;stroke-width:.13}
.staff .led{stroke:#1b1a20;stroke-width:.14}
.staff .col{fill:rgba(227,165,58,0);transition:fill .12s}
.staff .col.on{fill:rgba(227,165,58,.35)}
.staff g.note.on .n{fill:#b56a00}
.staff g.note.on .stem{stroke:#b56a00}
@media (prefers-reduced-motion:no-preference){
  .student.show .note{animation:inkin .32s ease both;animation-delay:calc(var(--k)*12ms)}
  @keyframes inkin{from{opacity:0}to{opacity:1}}
}
@media (min-width:900px){
  .demo{padding:88px 0 92px}
  .demo-grid{grid-template-columns:380px minmax(0,1fr);column-gap:44px;align-items:start;margin-top:32px}
  .result{position:sticky;top:84px}
  .paper{padding:22px 24px 24px;min-height:320px}
  .empty{min-height:270px}
  .row{grid-template-columns:118px minmax(0,1fr);gap:12px}
  .row .who{font-size:15px}
  .row .who small{font-size:14px}
}

/* 3 · ONE SOUND: landing overrides (the section's own rules are in one-sound.css) =============== */
.os{background:var(--os-plate) center/cover no-repeat,linear-gradient(180deg,#0a1228 0%,#0d1834 100%);border-top:0;padding:64px 0 60px}
.os-eyebrow{margin-bottom:10px}
.os .os-title{letter-spacing:-.01em;font-size:clamp(30px,7.4vw,52px);max-width:15em;margin:0 auto}
.os .os-line{margin-top:14px}
.os .os-prod{max-width:44em;line-height:1.5}
@media (min-width:900px){.os{padding:96px 0 84px}}

/* 4 · FREEDOM ================================================================================ */
.freedom{padding:52px 0 44px;background:var(--ivory);color:var(--ink)}
.freedom h2{font-size:13px;font-family:var(--ui);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-text);margin-bottom:10px}
.freedom blockquote{margin:0;padding:18px 0;border-bottom:1px solid var(--rule)}
.freedom blockquote.last{border-bottom:0}
.freedom blockquote p{margin:0;font:400 clamp(24px,6.2vw,40px)/1.22 var(--display);letter-spacing:-.005em}
.freedom blockquote.last p{font-style:italic;color:#6b4300}
@media (min-width:900px){.freedom{padding:96px 0 80px}.freedom blockquote{padding:26px 0}}

/* 5 · CURRICULA ============================================================================== */
.curricula{padding:48px 0;background:var(--cream);color:var(--ink);border-top:1px solid var(--rule)}
.curricula .sub{color:#4b463c}
.courses{display:grid;gap:10px;margin-top:22px}
.course{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--r);background:var(--ivory);border:1px solid #e4d8bd;
  text-decoration:none;color:var(--ink);transition:border-color .15s}
a.course:hover{border-color:var(--amber-deep)}
.c-for{font:600 12px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--brass-text)}
.c-name{font:600 23px/1.15 var(--display);color:var(--ink);text-decoration:none}
.course-set .c-name{font-size:21px;display:block;padding:10px 0;text-decoration:underline;text-decoration-color:#d9c79d;text-underline-offset:5px}
.course-set .c-name:hover{color:#8a4f00}
.c-line{color:#4b463c;font-size:15px}
.downloads{margin:18px 0 0}
.downloads a{display:inline-flex;align-items:center;gap:.35em;min-height:44px;font-weight:600;color:#7a4b00;text-decoration:none}
.downloads a:hover{text-decoration:underline}
@media (min-width:760px){.courses{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.courses{gap:14px}.course{padding:20px 22px}.curricula{padding:84px 0}}

/* 6 · PRIVACY + FREE ========================================================================= */
.trust{padding:48px 0;background:var(--navy)}
.trust-grid{display:grid;gap:36px}
.trust h2{font-size:clamp(28px,6.6vw,40px);color:var(--cream)}
.privacy p{color:#cfd5e2;margin:14px 0 0;max-width:34em}
.free ul{list-style:none;margin:14px 0 0;padding:0}
.free li{padding:12px 0 12px 22px;border-top:1px solid var(--line);position:relative;color:#cfd5e2}
.free li:last-child{border-bottom:1px solid var(--line)}
.free li::before{content:"";position:absolute;left:2px;top:21px;width:9px;height:9px;border-radius:50%;background:var(--amber)}
.free li b{color:var(--text);display:block;font-weight:600}
@media (min-width:900px){.trust{padding:88px 0}.trust-grid{grid-template-columns:1fr 1fr;gap:64px}}

/* 7 · ABOUT ================================================================================== */
.about{padding:48px 0;background:var(--ivory);color:var(--ink)}
.about .eyebrow{color:var(--brass-text)}
.about-grid{display:grid;grid-template-columns:120px 1fr;gap:18px;align-items:center}
.about picture img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 8%;border-radius:12px}
.about h2{font-size:clamp(28px,6.4vw,40px)}
.about-cred{margin:10px 0 0;color:#3c3a36;font-size:16px}
.about p{margin-bottom:0}
.more{display:inline-flex;align-items:center;gap:.35em;min-height:44px;font-weight:600;color:#7a4b00;text-decoration:none}
.more:hover{text-decoration:underline}
@media (max-width:420px){.about-grid{grid-template-columns:104px 1fr;gap:14px}}
@media (min-width:760px){.about{padding:80px 0}.about-grid{grid-template-columns:240px 1fr;gap:40px}}

/* 8 · GET THE APP + FOOTER =================================================================== */
.get{padding:52px 0 56px;background:radial-gradient(90% 90% at 50% 100%,#1c2e5c 0%,var(--navy) 70%);text-align:center}
.get .sub{margin:12px auto 0}
.badges{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:24px}
.badge{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border-radius:var(--r);background:rgba(244,238,223,.05);
  border:1px solid var(--line);text-decoration:none;min-width:190px}
.badge img:first-child{height:50px;width:auto}
.badge .qr{width:120px;height:120px;border-radius:8px;background:#fff;padding:6px}
@media (max-width:600px){.badge .qr{display:none}.badges{gap:10px;flex-wrap:nowrap}.badge{min-width:0;padding:0;background:none;border:0;border-radius:9px;min-height:48px}.badge img:first-child{height:46px}}
.web-link a{display:inline-flex;min-height:44px;align-items:center;gap:.35em;color:var(--amber);text-decoration:none;font-weight:600;margin-top:16px}
.web-link a:hover{text-decoration:underline}
.foot{padding:26px 0 40px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 18px}
.foot nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.foot nav a:hover{color:var(--text)}
.foot p{margin:10px 0 0}

/* no JavaScript: the demo shows the whole band (prerendered), the controls that need JS are hidden */
.no-js .js-only,.no-js #copy,.no-js .open,.no-js #empty,.no-js .listen{display:none!important}
.no-js #band{display:block!important}
.no-js .step:last-child .step-t::after{content:" (the whole band, below)";text-transform:none;letter-spacing:0;font-weight:500}

/* installed as the home page (home-v2): the shared site bar replaces .top; the nav's phone "home card" is not
   part of this design (the hero already links to the curriculum) */
.hero-copy .twh-hcard{display:none!important}
.foot-more{margin:0 0 14px}.foot-more a{display:inline-flex;min-height:44px;align-items:center;gap:.35em;color:var(--amber);text-decoration:none;font-weight:600;font-size:16px}
.foot-more a:hover{text-decoration:underline}
.foot .disclose{margin-top:6px;font-size:13px}