/* PianoKite website. One stylesheet, system fonts, light + dark. */
:root{
  --pt-accent:#4f46e5;--pt-accent-2:#4338ca;--pt-accent-soft:#eef2ff;
  --bg:#fffdf9;--bg-2:#f6f3ee;--card:#fff;--text:#1f1d2b;--muted:#5d5a6c;--line:#e7e2da;
  --ok:#047857;--err:#b91c1c;
  --lv1:#d1fae5;--lv1t:#065f46;--lv2:#dbeafe;--lv2t:#1e40af;--lv3:#fef3c7;--lv3t:#92400e;
  --lv4:#ffe4e6;--lv4t:#9f1239;--lv5:#ede9fe;--lv5t:#5b21b6;
  --r:14px;--shadow:0 1px 2px rgba(30,27,75,.06),0 4px 16px rgba(30,27,75,.06);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root{
  --pt-accent:#818cf8;--pt-accent-2:#a5b4fc;--pt-accent-soft:#1e1b4b;
  --bg:#13121a;--bg-2:#1b1a24;--card:#201f2b;--text:#ecebf3;--muted:#a9a6b9;--line:#33313f;
  --ok:#34d399;--err:#f87171;
  --lv1:#064e3b;--lv1t:#a7f3d0;--lv2:#1e3a8a;--lv2t:#bfdbfe;--lv3:#78350f;--lv3t:#fde68a;
  --lv4:#881337;--lv4t:#fecdd3;--lv5:#4c1d95;--lv5t:#ddd6fe;
  --shadow:0 1px 2px rgba(0,0,0,.3);
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:4.5rem}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
img,svg{max-width:100%}
a{color:var(--pt-accent);text-underline-offset:2px}
a:hover{color:var(--pt-accent-2)}
h1,h2,h3{line-height:1.2;letter-spacing:-.01em;margin:1.6em 0 .5em}
h1{font-size:clamp(1.8rem,4.5vw,2.6rem);margin-top:.4em}
h2{font-size:clamp(1.3rem,3vw,1.65rem)}
h3{font-size:1.1rem}
p{margin:.6em 0}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.narrow{max-width:780px}
.center{text-align:center;padding:4rem 16px}
.muted{color:var(--muted)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--pt-accent);color:#fff;padding:.5rem 1rem;z-index:50}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--pt-accent);outline-offset:2px}

/* Header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:.75rem;height:56px}
.logo{display:flex;align-items:center;gap:.5rem;font-weight:700;color:var(--text);text-decoration:none;white-space:nowrap}
.logo img{display:block}
.top nav{display:flex;gap:.25rem;margin-left:auto}
.top nav a{color:var(--text);text-decoration:none;padding:.4rem .55rem;border-radius:8px;font-size:.95rem}
.top nav a:hover{background:var(--bg-2)}
@media (max-width:640px){.logo span{display:none}.top nav a{padding:.4rem .4rem;font-size:.9rem}}
@media (max-width:480px){.top nav a:nth-child(3){display:none}.top-in{gap:.4rem}.logo img{flex:none}}

/* Buttons */
.btn,.waitlist button{display:inline-block;background:var(--pt-accent);color:#fff;border:0;border-radius:999px;padding:.7rem 1.25rem;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap}
@media (prefers-color-scheme:dark){.btn,.waitlist button{color:#13121a}}
.btn:hover,.waitlist button:hover{background:var(--pt-accent-2);color:#fff}
@media (prefers-color-scheme:dark){.btn:hover,.waitlist button:hover{color:#13121a}}
.btn-sm{padding:.45rem .9rem;font-size:.9rem}
.btn-ghost{background:transparent;color:var(--pt-accent);border:2px solid var(--pt-accent)}
.btn-ghost:hover{background:var(--pt-accent-soft);color:var(--pt-accent)}
@media (prefers-color-scheme:dark){.btn-ghost,.btn-ghost:hover{color:var(--pt-accent)}}
.play-badge{display:inline-flex;align-items:center;gap:.6rem;background:#000;color:#fff;border-radius:10px;padding:.5rem 1rem;text-decoration:none;border:1px solid #555}
.play-badge span{display:flex;flex-direction:column;font-size:1.15rem;font-weight:600;line-height:1.1}
.play-badge small{font-size:.65rem;font-weight:400;text-transform:uppercase;letter-spacing:.05em}
.play-badge:hover{color:#fff;background:#222}

/* Waitlist */
.waitlist{display:flex;flex-wrap:wrap;gap:.5rem;max-width:460px;margin:1rem 0 .25rem}
.waitlist input[type=email]{flex:1 1 220px;min-width:0;padding:.7rem 1rem;border:1px solid var(--line);border-radius:999px;font:inherit;background:var(--card);color:var(--text)}
.waitlist .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.wl-msg{flex-basis:100%;margin:.25rem 0 0;min-height:1.4em;font-size:.95rem}
.wl-msg.ok{color:var(--ok)}.wl-msg.err{color:var(--err)}
.waitlist.done input,.waitlist.done button{display:none}

/* Hero */
.hero{background:radial-gradient(1200px 400px at 80% -10%,var(--pt-accent-soft),transparent),var(--bg);padding:2rem 0 2.5rem}
.hero-in{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.hero-in{grid-template-columns:1fr 1.1fr}}
.eyebrow{font-weight:600;color:var(--pt-accent);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;margin:0}
.lead{font-size:1.15rem;color:var(--muted);max-width:36em}
.status{font-size:.9rem;color:var(--muted)}
.caption{font-size:.9rem;color:var(--muted);text-align:center}
.pt-player{min-height:460px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line);margin:1rem 0}

/* Sections */
section{padding:.5rem 0 1.5rem}
.band{background:var(--bg-2);padding:1.5rem 0 2.5rem;margin:1rem 0}
.features,.steps,.plans,.cards,.chips,.links,.guide-list,.comp-list{list-style:none;padding:0;margin:1rem 0}
.features{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.features li,.plans>li,.steps li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.2rem;box-shadow:var(--shadow)}
.features h3,.plans h3,.steps h3{margin:.2rem 0 .4rem}
.features p,.steps p{margin:0;color:var(--muted)}
.steps{display:grid;gap:1rem;counter-reset:s;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.steps li{counter-increment:s}
.steps li::before{content:counter(s);display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--pt-accent);color:#fff;font-weight:700}
@media (prefers-color-scheme:dark){.steps li::before{color:#13121a}}
.plans{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.plans>li.hl{border:2px solid var(--pt-accent)}
.plans .price{font-size:1.3rem;font-weight:700;margin:.2rem 0}
.plans ul{padding-left:1.1rem;color:var(--muted);margin:.5rem 0 0}
.faq details{border-bottom:1px solid var(--line);padding:.8rem 0}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--muted)}
.more{margin:1.25rem 0}

/* Cards */
.cards{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.card a{display:flex;flex-direction:column;gap:.15rem;height:100%;padding:.8rem 1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:var(--text);box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.card a:hover{border-color:var(--pt-accent);transform:translateY(-1px);color:var(--text)}
.card-t{font-weight:650;line-height:1.3}
.card-c{color:var(--muted);font-size:.9rem}
.card-m{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:auto;padding-top:.4rem;font-size:.82rem;color:var(--muted)}
.lv{display:inline-block;border-radius:999px;padding:.05rem .55rem;font-size:.78rem;font-weight:600;background:var(--lv1);color:var(--lv1t)}
.lv2{background:var(--lv2);color:var(--lv2t)}.lv3{background:var(--lv3);color:var(--lv3t)}
.lv4{background:var(--lv4);color:var(--lv4t)}.lv5{background:var(--lv5);color:var(--lv5t)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips a{display:inline-block;padding:.35rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--card);text-decoration:none;color:var(--text);font-size:.92rem}
.chips a:hover{border-color:var(--pt-accent)}
.chips .n{color:var(--muted);font-size:.8rem}
.count{color:var(--muted);font-size:.92rem}
.pager ol{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin:1.5rem 0}
.pager a,.pager span{display:inline-grid;place-items:center;min-width:2.4rem;height:2.4rem;border:1px solid var(--line);border-radius:8px;text-decoration:none}
.pager span{background:var(--pt-accent);color:#fff;border-color:var(--pt-accent)}
.links li{margin:.35rem 0}
.guide-list{display:grid;gap:.75rem}
.guide-list a{display:block;padding:1rem 1.2rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card);text-decoration:none;color:var(--text)}
.guide-list a:hover{border-color:var(--pt-accent)}
.guide-list span{display:block;color:var(--muted);font-size:.93rem;margin-top:.2rem}
.comp-list{columns:2 260px;gap:2rem}
.comp-list li{break-inside:avoid;padding:.25rem 0}
.comp-list .muted{font-size:.85rem}

/* Breadcrumbs */
.crumbs ol{display:flex;flex-wrap:wrap;list-style:none;padding:0;margin:1rem 0 0;font-size:.88rem;color:var(--muted)}
.crumbs li+li::before{content:"›";margin:0 .45rem}
.crumbs a{color:var(--muted)}

/* Piece page */
.piece-h h1{margin-bottom:.2rem}
.sub{color:var(--muted);margin:0;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.tbl{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:.82rem;color:var(--muted);font-weight:600}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem 1.5rem;margin:1rem 0}
.facts dt{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.facts dd{margin:0}
.tips li{margin:.45rem 0}
.app-note{background:var(--pt-accent-soft);border-radius:var(--r);padding:.9rem 1.1rem}
.license{font-size:.93rem;color:var(--muted)}

/* Search */
.search{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem;box-shadow:var(--shadow)}
.search input[type=search]{width:100%;padding:.75rem 1rem;font:inherit;font-size:1.05rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text)}
.filters{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.75rem}
.filters label{display:flex;flex-direction:column;font-size:.8rem;color:var(--muted);flex:1 1 140px}
.filters select{font:inherit;font-size:.95rem;padding:.45rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text)}
.browse h3{margin-top:1.2rem}

/* Prose (guides, legal) */
.prose{font-size:1.05rem}
.prose h2{margin-top:2rem}
.prose li{margin:.3rem 0}
.prose .meta{color:var(--muted);font-size:.9rem}
.prose blockquote,.prose .note{margin:1rem 0;padding:.8rem 1rem;background:var(--pt-accent-soft);border-radius:10px}
.prose table{margin:1rem 0}
.prose td,.prose th{white-space:normal}

/* CTA + footer */
.cta{background:var(--pt-accent);color:#fff;padding:2rem 0;margin-top:2rem}
.cta-in{display:grid;gap:1rem;align-items:center}
@media (min-width:860px){.cta-in{grid-template-columns:1.2fr 1fr}}
.cta h2{margin:0 0 .3rem;color:#fff}
.cta p{color:#e0e7ff}
.cta .waitlist input[type=email]{border-color:transparent}
.cta .waitlist button,.cta .waitlist button:hover{background:#1e1b4b;color:#fff}
.cta .wl-msg.ok,.cta .wl-msg.err{color:#fff;font-weight:600}
@media (prefers-color-scheme:dark){.cta{background:#312e81}}
.foot{border-top:1px solid var(--line);padding:2rem 0 3rem;font-size:.9rem;background:var(--bg-2)}
.foot-cols{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.foot h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 .5rem}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin:.25rem 0}
.foot a{color:var(--text);text-decoration:none}
.foot a:hover{color:var(--pt-accent);text-decoration:underline}
.fine{color:var(--muted);margin-top:2rem}
.fine a{color:var(--muted);text-decoration:underline}
@media (prefers-color-scheme:dark){.pager span{color:#13121a}}
.app-pitch{border:1px solid var(--line);border-left:4px solid var(--pt-accent);border-radius:var(--r);padding:.9rem 1.1rem;margin:1rem 0;background:var(--card)}
.lessons-home{padding:1.5rem 0 1rem}
.lessons-home .lead{max-width:62rem}
.path{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.path>li{display:flex;gap:.8rem;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.8rem 1rem;box-shadow:var(--shadow)}
.path h3{margin:0 0 .2rem;font-size:1.02rem}
.path p{margin:0}
.u-n{flex:none;display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--pt-accent);color:#fff;font-weight:700}
@media (prefers-color-scheme:dark){.u-n{color:#13121a}}
.u-play{color:var(--muted);font-size:.93rem}
.u-teach{font-size:.95rem;margin-bottom:.25rem!important}
.u-meta{color:var(--muted);font-size:.8rem;margin-top:.25rem!important}
.u-free{display:inline-block;vertical-align:middle;margin-left:.3rem;padding:.05rem .45rem;border-radius:999px;background:var(--pt-accent-soft);color:var(--pt-accent);font-size:.72rem;font-weight:700}
.path-detail{grid-template-columns:1fr}
.features.compact{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
@media (max-width:520px){.tbl th,.tbl td{padding:.5rem .4rem}.tbl td:first-child{white-space:normal}}
@media (min-width:1000px){.lessons-home .path{grid-template-columns:repeat(5,1fr)}}