/* mellodeo.com. Tokens, type, radii and the chunky offset shadows follow
   docs/design/mellodeo-v2 (Mellodeo Website.dc.html, WEBSITE.md). Desktop is
   drawn at 1440px; below 900px the mobile (390px) layouts take over.
   The current instrument's colours live in --c / --sh / --t on <body>, and
   site.js swaps them as the hero cycles or a filter changes. */

:root {
  --ink: #1f1d2b;
  --bg: #fbf8f3;
  --muted: #6d6878;
  --faint: #9a94a3;
  --body: #4a4656;
  --line: #ebe5da;
  --line2: #e3ddd2;
  --chip: #efeae1;
  --dark2: #2a2834;
  --dark3: #3a3846;
  --on-dark: #c9c4d1;
  --on-dark2: #a39daf;
  --amber: #f5b83d;
  --amber-sh: #b88414;
  --amber-t: #fef1d6;
  --amber-ink: #6b4c0c;
  --guitar: #ef6f4f;
  --guitar-sh: #c4522f;
  --piano: #4d8df5;
  --piano-sh: #2f66c2;
  --drums: #43b86a;
  --drums-sh: #2c8a4c;
  --c: #ef6f4f;
  --sh: #c4522f;
  --t: #fde7e0;
  --pad: 64px;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --spring: cubic-bezier(.3, 1.35, .5, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; text-wrap: pretty; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { max-width: 100%; }
.page { max-width: 1440px; margin: 0 auto; }
.px { padding-left: var(--pad); padding-right: var(--pad); }
.mono { font-family: var(--mono); font-weight: 700; }
/* Desktop-only / mobile-only content (the two designs differ). !important so
   component display rules (.btn, .chips…) can't resurrect hidden copies. */
.mb { display: none !important; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; padding: 10px 14px; background: #fff; border: 2px solid var(--ink); border-radius: 12px; }
:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; border-radius: 6px; }

/* ── Logo: the note mark after "mellode" ─────────────────────────────── */
.logo { display: inline-flex; align-items: center; font-weight: 800; font-size: 24px; letter-spacing: -0.03em; color: var(--ink); }
.logo .note { position: relative; display: inline-block; width: 1em; height: 1.2125em; margin-left: .167em; margin-top: -.5em; flex: none; }
.logo .note i { position: absolute; display: block; }
.logo .note .head { left: 0; bottom: 0; width: .667em; height: .567em; border-radius: 50%; background: var(--guitar); transform: rotate(-20deg); }
.logo .note .stem { left: .55em; bottom: .3125em; width: .117em; height: .833em; border-radius: .067em; background: currentColor; }
.logo .note .flag { left: .617em; bottom: .6125em; width: .333em; height: .533em; border-top: .117em solid currentColor; border-right: .117em solid currentColor; border-radius: 0 .267em 0 0; }
.dark .logo { color: #fff; }

/* ── Buttons: chunky, with an offset shadow that presses in ─────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; border-radius: 14px; padding: 11px 20px; transition: transform .08s, box-shadow .08s, background .35s; }
.btn-ink { background: var(--ink); color: #fff; box-shadow: 0 4px 0 #000; }
.btn-amber { background: var(--amber); color: var(--ink); box-shadow: 0 4px 0 var(--amber-sh); }
.btn-line { background: #fff; color: var(--ink); border: 2px solid var(--line2); box-shadow: 0 4px 0 var(--line2); }
.btn-ghost-dark { border: 2px solid var(--dark3); color: #fff; }
.btn-lg { padding: 18px 34px; border-radius: 18px; font-size: 20px; }
.btn-lg.btn-ink { box-shadow: 0 6px 0 #000; }
.btn-md { padding: 16px 26px; border-radius: 16px; font-size: 18px; }
.btn-md.btn-amber { box-shadow: 0 5px 0 var(--amber-sh); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.btn-lg:active { transform: translateY(6px); }
.fine { font-size: 15px; color: var(--faint); }

/* ── Chips (instrument, level, category) ─────────────────────────────── */
/* Text on instrument fills is ink, never white (LAUNCH.md: white on coral is
   3.0:1, on green 2.5:1). */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { padding: 12px 22px; border-radius: 16px; font-weight: 700; font-size: 17px; background: #fff; color: var(--ink); border: 2px solid var(--line2); box-shadow: 0 4px 0 var(--line2); transition: background .25s, border-color .25s, box-shadow .25s, color .25s; }
.chip:active { transform: translateY(4px); box-shadow: 0 0 0 transparent; }
.chip[aria-pressed="true"][data-inst="0"] { background: var(--guitar); border-color: var(--guitar-sh); box-shadow: 0 4px 0 var(--guitar-sh); color: var(--ink); }
.chip[aria-pressed="true"][data-inst="1"] { background: var(--piano); border-color: var(--piano-sh); box-shadow: 0 4px 0 var(--piano-sh); color: var(--ink); }
.chip[aria-pressed="true"][data-inst="2"] { background: var(--drums); border-color: var(--drums-sh); box-shadow: 0 4px 0 var(--drums-sh); color: var(--ink); }
.chip-sm { padding: 10px 18px; border-radius: 14px; font-size: 16px; box-shadow: none; }
.pill { padding: 9px 18px; border-radius: 999px; font-weight: 700; font-size: 15px; background: #fff; border: 2px solid var(--line2); }
.pill[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── Header ──────────────────────────────────────────────────────────── */
.site-head { display: flex; align-items: center; justify-content: space-between; padding-top: 26px; padding-bottom: 26px; position: relative; z-index: 20; }
.nav { display: flex; align-items: center; gap: 32px; font-size: 16px; font-weight: 600; color: var(--muted); }
.nav a:hover { color: var(--ink); }
.nav .on { color: var(--ink); border-bottom: 3px solid var(--guitar); padding-bottom: 2px; }
.nav .login { color: var(--ink); }
.dark .nav { color: var(--on-dark2); }
.dark .nav a:hover, .dark .nav .login { color: #fff; }
.dark .nav .on { color: #fff; border-color: var(--amber); }
.head-m { display: none; gap: 8px; align-items: center; }
.menu-btn { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--line2); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.menu-btn span { width: 18px; height: 2.5px; border-radius: 2px; background: var(--ink); }
.menu { position: fixed; inset: 72px 0 0; z-index: 40; background: var(--bg); padding: 16px 20px; display: none; flex-direction: column; gap: 4px; overflow-y: auto; }
.menu.open { display: flex; }
.menu > a { padding: 14px 0; border-bottom: 2px solid var(--line); font-size: 26px; font-weight: 800; color: var(--ink); }
.menu .menu-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.menu .menu-cta .btn { padding: 16px; border-radius: 16px; font-size: 17px; }
body.menu-open { overflow: hidden; }

/* ── Type scale ──────────────────────────────────────────────────────── */
.kicker { font: 700 13px var(--mono); color: var(--guitar-sh); }
.h-xl { font-size: clamp(48px, 5.6vw, 80px); line-height: 1.02; font-weight: 800; letter-spacing: -0.045em; margin: 0; }
.h-lg { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; margin: 0; }
.h-md { font-size: clamp(32px, 3.1vw, 44px); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.h-sm { font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; margin: 0; }
.lede { font-size: 22px; line-height: 1.45; color: var(--muted); }
.card { background: #fff; border: 2px solid var(--line); border-radius: 28px; }
.stripes { background: repeating-linear-gradient(135deg, var(--stripe, var(--t)) 0 10px, #fff 10px 20px); display: flex; font: 500 11px var(--mono); color: var(--muted); }
.stripes-dark { background: repeating-linear-gradient(135deg, #2a2834 0 10px, #23212c 10px 20px); display: flex; align-items: center; justify-content: center; font: 500 12px var(--mono); color: #8a8496; }
.sec { padding-bottom: 96px; }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 28px; }

/* ── Home hero ───────────────────────────────────────────────────────── */
.hero { padding-top: 72px; padding-bottom: 72px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 32px; }
.hero-line { display: flex; align-items: baseline; justify-content: center; gap: .275em; white-space: nowrap; font-size: clamp(44px, 5.6vw, 80px); line-height: 1.2; font-weight: 800; letter-spacing: -0.045em; margin: 0; }
.hero-line .slot { display: inline-block; padding: .025em .275em .125em; border-radius: .3em; border: 3px solid var(--ink); background: #fff; box-shadow: 0 7px 0 var(--ink); }
.hero-line .slot-inst { border-color: var(--c); background: var(--c); color: var(--ink); box-shadow: 0 7px 0 var(--sh); transition: background .35s, box-shadow .35s, border-color .35s; }
.hero-line .onrow { display: contents; }
.swap { display: inline-block; }
.swap.in { animation: mdSwap .45s var(--spring); }
@keyframes mdSwap { 0% { transform: translateY(70%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.hero .lede { max-width: 640px; }
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* Song path preview */
.path-card { padding: 40px 48px 44px; display: flex; flex-direction: column; gap: 32px; }
.path-card .sec-head { margin: 0; }
.path-card .mono { font-size: 12px; color: var(--sh); margin-bottom: 8px; transition: color .35s; }
.path-card .sec-head p { font-size: 17px; line-height: 1.5; color: var(--muted); max-width: 420px; }
.path-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.stop { display: flex; flex-direction: column; gap: 18px; padding: 20px 18px 22px; border-radius: 22px; background: var(--bg); border: 2px solid var(--line); transition: background .35s, border-color .35s; }
.stop.active { background: var(--t); border-color: var(--c); }
.stop-top { display: flex; justify-content: space-between; font: 700 12px var(--mono); color: var(--faint); }
.stop.active .stop-top { color: var(--sh); }
.nodes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.node { width: 36px; height: 36px; border-radius: 50%; background: #e6e0d6; box-shadow: 0 4px 0 #cfc7ba; color: #fff; display: flex; align-items: center; justify-content: center; font: 700 13px var(--mono); transition: background .35s, box-shadow .35s; }
.node.boss { width: 48px; border-radius: 12px; background: var(--ink); box-shadow: 0 4px 0 #000; }
.node.lit { background: var(--c); box-shadow: 0 4px 0 var(--sh); }
.stop-teach { font-size: 14px; color: var(--muted); line-height: 1.4; }

/* Song tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; }
.tile { display: flex; flex-direction: column; gap: 14px; transition: transform .2s; }
.tile:hover { transform: translateY(-3px); }
.art { aspect-ratio: 1; border-radius: 24px; border: 2px solid var(--c); padding: 16px; align-items: flex-end; justify-content: space-between; transition: border-color .35s, box-shadow .35s; }
.tiles.lib .art { box-shadow: 0 5px 0 var(--c); }
.art .lvl { padding: 5px 9px; border-radius: 8px; background: #fff; color: var(--sh); font-weight: 700; }
.tile-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tile-title { font-weight: 800; font-size: 20px; }
.tile-artist { font-size: 15px; color: var(--muted); }
.tile-key { font: 700 12px var(--mono); color: var(--faint); text-align: right; padding-top: 4px; white-space: nowrap; }

/* Dark feature band (teachers teaser) */
.band-dark { border-radius: 28px; background: var(--ink); color: #fff; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.band-dark .copy { padding: 56px; display: flex; flex-direction: column; gap: 18px; justify-content: center; }
.band-dark .copy .mono { font-size: 12px; color: var(--amber); }
.band-dark .copy p { font-size: 17px; line-height: 1.5; color: var(--on-dark); max-width: 460px; }
.band-dark .photo { min-height: 380px; }
.band-dark .btn { align-self: flex-start; padding: 14px 22px; box-shadow: 0 5px 0 var(--amber-sh); }

/* Blog cards */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.post { background: #fff; border: 2px solid var(--line); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s; }
.post-img { height: 180px; background: repeating-linear-gradient(135deg, var(--stripe) 0 10px, #fff 10px 20px); }
.posts.full .post-img { height: 200px; }
.post-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.post-tag { font: 700 11px var(--mono); display: flex; justify-content: space-between; }
.post-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.posts.full .post:hover { transform: translateY(-3px); }

/* Closing CTA band, in the current instrument's colour */
.cta-band { padding: 88px var(--pad); background: var(--c); color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; transition: background .35s; }
.cta-band .fine { color: var(--ink); }

/* Footer */
.site-foot { padding-top: 40px; padding-bottom: 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 15px; color: var(--muted); }
.site-foot .logo { font-size: 20px; }
.foot-links { display: flex; gap: 28px; flex-wrap: wrap; }
.foot-links a:hover { color: var(--ink); }
.copy-mark { font: 500 13px var(--mono); color: var(--faint); }
.legal { padding-bottom: 32px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--faint); }
.legal a:hover { color: var(--ink); }

/* ── Inner-page heroes ───────────────────────────────────────────────── */
.page-hero { padding-top: 72px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 24px; max-width: 1128px; }
.page-hero .lede { max-width: 680px; }
.title-row { padding-top: 64px; display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.title-row .h-xl { line-height: 1; }

/* How it works */
.steps { display: flex; flex-direction: column; gap: 24px; }
.step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: center; padding: 40px; }
.step.flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.step.flip .shot { order: -1; }
.step-copy { display: flex; flex-direction: column; gap: 16px; }
.step-num { font: 700 72px var(--mono); line-height: 1; }
.step-copy p { font-size: 18px; line-height: 1.55; color: var(--muted); max-width: 440px; }
.shot { aspect-ratio: 16 / 10; border-radius: 22px; border: 2px solid var(--c); align-items: center; justify-content: center; font-size: 12px; }
.level-card { border-radius: 28px; background: var(--ink); color: #fff; padding: 56px; display: flex; flex-direction: column; gap: 40px; }
.level-card .sec-head { margin: 0; }
.level-card .sec-head p { font-size: 17px; line-height: 1.5; color: var(--on-dark); max-width: 420px; }
.phases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.phase { padding: 28px; border-radius: 22px; background: var(--dark2); display: flex; flex-direction: column; gap: 12px; }
.phase .mono { font-size: 12px; color: var(--amber); }
.phase h3 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.phase p { font-size: 16px; line-height: 1.5; color: var(--on-dark); }

/* Songs */
.songs-top { padding-bottom: 40px; display: flex; flex-direction: column; gap: 28px; }
.songs-top .title-row p { font-size: 19px; line-height: 1.5; color: var(--muted); max-width: 520px; }
.search { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 26px; border-radius: 24px; background: #fff; border: 3px solid var(--ink); box-shadow: 0 7px 0 var(--ink); }
.search .lens { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--ink); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 24px; font-weight: 600; }
.search input::placeholder { color: var(--faint); }
.search .chips { gap: 6px; flex-wrap: nowrap; }
.filter-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.filter-row .chips { gap: 8px; }
.count { font: 700 13px var(--mono); color: var(--faint); text-transform: uppercase; }
.empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--muted); font-size: 18px; }
.request { padding: 48px 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.request p { font-size: 17px; line-height: 1.5; color: var(--muted); margin-top: 10px; }
.field-row { display: flex; gap: 10px; }
.field { flex: 1; min-width: 0; padding: 16px 20px; border-radius: 16px; border: 2px solid var(--line2); background: #fff; font-size: 17px; outline: 0; }
.field::placeholder { color: var(--faint); }
.field:focus { border-color: var(--ink); }
.field-row .btn { padding: 16px 24px; border-radius: 16px; box-shadow: 0 5px 0 #000; }

/* Teachers */
.teach-top { background: var(--ink); color: #fff; }
.teach-hero { padding-top: 56px; padding-bottom: 96px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.teach-hero .copy { display: flex; flex-direction: column; gap: 24px; }
.teach-hero .kicker { color: var(--amber); }
.teach-hero .h-xl { font-size: clamp(44px, 5vw, 72px); }
.teach-hero p { font-size: 20px; line-height: 1.5; color: var(--on-dark); max-width: 520px; }
.teach-hero .actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.teach-hero .btn-ghost-dark { padding: 14px 24px; border-radius: 16px; font-size: 18px; }
.roster { border-radius: 24px; background: #fff; color: var(--ink); padding: 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.roster-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.roster-head .mono { font-size: 11px; color: var(--faint); }
.roster-head .song { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.roster-head .flag { padding: 9px 14px; border-radius: 12px; background: var(--amber-t); color: var(--amber-ink); font-weight: 700; font-size: 14px; white-space: nowrap; }
.roster-row { display: grid; grid-template-columns: 110px 150px 120px minmax(0, 1fr); gap: 14px; align-items: center; font-size: 15px; }
.roster-row.cols { font: 700 10px var(--mono); color: var(--faint); padding-bottom: 4px; border-bottom: 2px solid #efeae1; }
.roster-row .name { font-weight: 700; }
.segs, .days { display: flex; gap: 4px; }
.segs span { flex: 1; height: 10px; border-radius: 4px; background: var(--line); }
.segs .done { background: var(--drums); }
.segs .now { background: var(--amber); }
.days span { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.days .on { background: var(--ink); }
.status { font-weight: 700; }
.status.ok { color: var(--drums-sh); }
.status.bad { color: var(--guitar-sh); }
.features { padding-top: 96px; padding-bottom: 96px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feature { padding: 36px; display: flex; flex-direction: column; gap: 14px; }
.feature .sq { width: 48px; height: 48px; border-radius: 14px; }
.feature h3 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }
.feature p { font-size: 17px; line-height: 1.5; color: var(--muted); }
.school { border-radius: 28px; background: var(--amber-t); border: 2px solid var(--amber); padding: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.school .intro { display: flex; flex-direction: column; gap: 14px; }
.school .intro .h-md { font-size: clamp(34px, 3.4vw, 48px); letter-spacing: -0.035em; line-height: 1.08; }
.school .intro p { font-size: 18px; line-height: 1.5; color: var(--amber-ink); }
.school form { display: flex; flex-direction: column; gap: 12px; }
.school .field { border-color: #ecd7a6; }
.school .btn { padding: 16px; border-radius: 16px; font-size: 18px; box-shadow: 0 5px 0 #000; }

/* Blog */
.blog-top { padding-bottom: 48px; }
.featured { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); border-radius: 28px; overflow: hidden; }
.featured .img { min-height: 440px; padding: 20px; align-items: flex-end; --stripe: #fde7e0; }
.featured .copy { padding: 48px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.featured .mono { font-size: 12px; color: var(--guitar-sh); }
.featured .h-md { letter-spacing: -0.035em; line-height: 1.08; }
.featured p { font-size: 18px; line-height: 1.55; color: var(--muted); }
.featured .read { font-weight: 800; }
.newsletter { border-radius: 28px; background: var(--ink); color: #fff; padding: 56px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.newsletter p { font-size: 17px; line-height: 1.5; color: var(--on-dark); margin-top: 10px; }
.newsletter .field { background: var(--dark2); border-color: var(--dark3); color: #fff; }
.newsletter .field::placeholder { color: #8a8496; }
.newsletter .btn { box-shadow: 0 5px 0 var(--amber-sh); }

/* About */
.about-hero { padding-top: 88px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 24px; }
.about-hero .h-xl { line-height: 1.04; max-width: 1200px; }
.team-photo { aspect-ratio: 21 / 8; border-radius: 28px; --stripe: #ebe5da; align-items: center; justify-content: center; font-size: 12px; }
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; }
.story .body { display: flex; flex-direction: column; gap: 20px; font-size: 20px; line-height: 1.6; color: var(--body); }
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 18px; }
.person { display: flex; flex-direction: column; gap: 12px; }
.portrait { aspect-ratio: 1; border-radius: 24px; --stripe: #ebe5da; padding: 14px; align-items: flex-end; }
.person .who { font-weight: 800; font-size: 19px; }
.person .role { font-size: 15px; color: var(--muted); }
.contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.contact { padding: 32px; border-radius: 24px; display: flex; flex-direction: column; gap: 8px; }
.contact .mono { font-size: 12px; }
.contact h3 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; }
.contact a { font-size: 16px; color: var(--muted); }
.contact a:hover { color: var(--ink); }

/* Pricing */
.price-hero { padding-top: 72px; padding-bottom: 96px; display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.price-hero .h-xl { line-height: 1; }
.price-hero > p { font-size: 21px; color: var(--muted); }
.seg { position: relative; display: grid; grid-template-columns: 200px 200px; padding: 4px; border-radius: 16px; background: var(--chip); font-weight: 700; font-size: 15px; }
.seg .thumb { position: absolute; top: 4px; left: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 12px; background: #fff; box-shadow: 0 2px 0 var(--line2); transition: transform .4s var(--spring); }
.seg[data-yearly="true"] .thumb { transform: translateX(100%); }
.seg button { position: relative; padding: 10px 0; color: var(--muted); transition: color .25s; font-weight: 700; }
.seg button[aria-pressed="true"] { color: var(--ink); }
.plans { width: 100%; max-width: 1000px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; }
.plan { border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.plan-free { background: #fff; border: 2px solid var(--line); }
.plan-pro { background: var(--ink); color: #fff; box-shadow: 0 8px 0 #000; }
.plan-name { font-size: 26px; font-weight: 800; display: flex; justify-content: space-between; align-items: center; }
.badge { padding: 5px 12px; border-radius: 999px; background: var(--amber); color: var(--ink); font-weight: 800; font-size: 13px; }
.price { display: flex; align-items: baseline; gap: 8px; }
.price .amt { font-size: 64px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; overflow: hidden; }
.price .unit { font-size: 17px; color: var(--on-dark); }
.ticks { display: flex; flex-direction: column; gap: 12px; font-size: 17px; margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 10px; }
.ticks li::before { content: "✓"; font-weight: 800; color: var(--drums); }
.plan-pro .ticks li::before { color: var(--amber); }
.plan .cta { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.plan .cta .btn { padding: 16px; border-radius: 16px; font-size: 17px; }
.plan-pro .fine { text-align: center; font-size: 14px; color: var(--on-dark2); }
.class-link { display: flex; align-items: center; gap: 16px; padding: 18px 24px; border-radius: 20px; background: var(--amber-t); border: 2px solid var(--amber); font-size: 17px; font-weight: 700; }
.class-link b { color: var(--amber-sh); font-weight: 800; }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 64px; }
.faq { border-top: 2px solid var(--line); }
.faq button { width: 100%; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; text-align: left; }
.faq .sign { width: 36px; height: 36px; border-radius: 12px; background: var(--chip); display: flex; align-items: center; justify-content: center; flex: none; }
.faq .answer { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 680px; padding-bottom: 22px; margin-top: -10px; }
.faq .answer[hidden] { display: none; }

/* Legal and contact pages: the site chrome around readable prose */
.doc { max-width: 760px; padding-top: 48px; padding-bottom: 96px; }
.doc h1 { font-size: clamp(40px, 5vw, 64px); line-height: 1.05; font-weight: 800; letter-spacing: -0.04em; margin: 0 0 12px; }
.doc h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 40px 0 10px; }
.doc h3 { font-size: 20px; font-weight: 800; margin: 28px 0 8px; }
.doc p, .doc li { font-size: 18px; line-height: 1.6; color: var(--body); }
.doc p + p { margin-top: 14px; }
.doc ul { padding-left: 22px; }
.doc a { color: var(--guitar-sh); font-weight: 700; }
.doc .updated { font: 500 13px var(--mono); color: var(--faint); margin-bottom: 24px; }
.doc .summary { padding: 20px 24px; border-radius: 20px; background: #fff; border: 2px solid var(--line); font-weight: 600; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Mobile web (the 390px designs), below 900px ─────────────────────── */
@media (max-width: 899px) {
  :root { --pad: 20px; }
  .dk { display: none !important; }
  .mb { display: revert !important; }
  .btn.mb, .chips.mb { display: flex !important; }
  .inst-row.mb { display: flex !important; }
  .sec { padding-bottom: 48px; }
  .sec-head { margin-bottom: 18px; }
  .h-xl { font-size: 40px; line-height: 1.05; letter-spacing: -0.04em; }
  .h-lg { font-size: 36px; }
  .h-md { font-size: 28px; }
  .lede { font-size: 17px; }
  .kicker { font-size: 11px; }
  .fine { font-size: 14px; }

  .site-head { padding-top: 14px; padding-bottom: 14px; }
  .site-head .logo { font-size: 21px; }
  .nav { display: none; }
  .head-m { display: flex; }
  .head-m .btn { padding: 10px 14px; border-radius: 12px; font-size: 14px; box-shadow: 0 3px 0 #000; }
  .dark .head-m .btn { background: var(--amber); color: var(--ink); box-shadow: 0 3px 0 var(--amber-sh); }
  .dark .menu-btn { background: var(--dark2); border-color: var(--dark3); }
  .dark .menu-btn span { background: #fff; }

  .hero { padding-top: 32px; padding-bottom: 48px; gap: 22px; }
  .hero-line { flex-direction: column; align-items: center; gap: 12px; font-size: 40px; line-height: 1.1; letter-spacing: -0.04em; white-space: normal; }
  .hero-line .slot { padding: 2px 16px 8px; border-radius: 18px; box-shadow: 0 5px 0 var(--ink); }
  .hero-line .slot-inst { box-shadow: 0 5px 0 var(--sh); }
  .hero-line .onrow { display: flex; align-items: baseline; gap: 12px; }
  .chips { gap: 8px; justify-content: center; }
  .chip { padding: 10px 16px; border-radius: 14px; font-size: 15px; box-shadow: 0 3px 0 var(--line2); }
  .hero-cta { width: 100%; gap: 10px; }
  .hero-cta .btn { width: 100%; padding: 17px; border-radius: 16px; font-size: 18px; box-shadow: 0 5px 0 #000; }

  .path-card { padding: 24px 20px; gap: 16px; border-radius: 24px; }
  .path-card .sec-head { flex-direction: column; align-items: flex-start; gap: 0; }
  .path-card .mono { font-size: 11px; }
  .path-grid { grid-template-columns: 1fr; gap: 10px; }
  .stop { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; }
  .stop-top .levels, .stop-teach { display: none; }
  .nodes { gap: 5px; flex-wrap: nowrap; }
  .node, .node.boss { width: 22px; height: 22px; font-size: 10px; box-shadow: 0 3px 0 #cfc7ba; }
  .node.boss { box-shadow: 0 3px 0 #000; }
  .node.lit { box-shadow: 0 3px 0 var(--sh); }
  .node.boss:not(.lit) { border-radius: 12px; }

  .tiles { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .tile { gap: 8px; }
  .art { border-radius: 18px; padding: 8px; }
  .art .lbl, .tile-key { display: none; }
  .art .lvl { padding: 4px 7px; border-radius: 7px; font-size: 9px; }
  .tiles.lib .art { box-shadow: 0 4px 0 var(--c); }
  .tile-title { font-size: 16px; }
  .tile-artist { font-size: 13px; }
  .browse { display: flex; margin-top: 18px; padding: 14px; }

  .band-dark { grid-template-columns: 1fr; border-radius: 24px; }
  .band-dark .photo { min-height: 180px; order: -1; }
  .band-dark .copy { padding: 24px; gap: 12px; }
  .band-dark .copy .mono { font-size: 11px; }
  .band-dark .copy .h-md { font-size: 26px; line-height: 1.12; }
  .band-dark .copy p { display: none; }
  .band-dark .btn { align-self: stretch; margin-top: 6px; padding: 14px; box-shadow: 0 4px 0 var(--amber-sh); }

  .posts { grid-template-columns: 1fr; gap: 12px; }
  .post { flex-direction: row; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; }
  .post-img, .posts.full .post-img { width: 64px; height: 64px; border-radius: 14px; flex: none; --stripe-size: 6px; background: repeating-linear-gradient(135deg, var(--stripe) 0 6px, #fff 6px 12px); }
  .posts.full .post-img { width: 72px; height: 72px; }
  .post-body { padding: 0; gap: 4px; }
  .post-tag { font-size: 10px; justify-content: flex-start; gap: 4px; }
  .post-title { font-size: 16px; line-height: 1.25; letter-spacing: 0; }

  .cta-band { padding: 48px 20px; gap: 16px; }
  .cta-band .h-lg { font-size: 36px; }
  .cta-band .btn { width: 100%; padding: 17px; border-radius: 16px; font-size: 18px; box-shadow: 0 5px 0 #000; }

  .site-foot { flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 32px; padding-bottom: 24px; }
  .site-foot > .logo { display: none; }
  .foot-links { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
  .copy-mark { font-size: 12px; }

  .page-hero { padding-top: 32px; padding-bottom: 40px; gap: 16px; }
  .title-row { padding-top: 28px; flex-direction: column; align-items: stretch; gap: 16px; }
  .title-row .h-xl { font-size: 44px; }

  .step, .step.flip { grid-template-columns: 1fr; gap: 12px; padding: 20px; border-radius: 24px; }
  .steps { gap: 14px; }
  .shot { order: -1; border-radius: 16px; font-size: 0; }
  .step-num { font-size: 36px; }
  .step-copy { gap: 12px; }
  .step-copy .h-sm { font-size: 24px; letter-spacing: -0.02em; }
  .step-copy p { font-size: 15px; line-height: 1.5; }
  .level-card { padding: 24px; gap: 14px; border-radius: 24px; }
  .level-card .sec-head p { display: none; }
  .phases { grid-template-columns: 1fr; gap: 14px; }
  .phase { padding: 16px; border-radius: 16px; gap: 6px; }
  .phase .mono { font-size: 11px; }
  .phase h3 { display: none; }
  .phase p { font-size: 15px; line-height: 1.45; }

  .songs-top { padding-bottom: 24px; gap: 16px; }
  .songs-top .title-row p { display: none; }
  .search { padding: 14px 16px; gap: 10px; border-radius: 18px; box-shadow: 0 5px 0 var(--ink); }
  .search .lens { width: 16px; height: 16px; }
  .search input { font-size: 17px; }
  .inst-row { display: flex; gap: 6px; }
  .inst-row .chip { flex: 1; text-align: center; padding: 10px 0; font-size: 15px; box-shadow: none; }
  .filter-row .chips { gap: 6px; justify-content: flex-start; }
  .pill { padding: 8px 14px; font-size: 14px; }
  .count { display: none; }
  .request { grid-template-columns: 1fr; gap: 12px; padding: 22px; border-radius: 24px; }
  .request .h-sm { font-size: 24px; letter-spacing: -0.02em; }
  .request p { font-size: 15px; line-height: 1.45; margin-top: 0; }
  .field-row { flex-direction: column; }
  .field { padding: 14px 16px; border-radius: 14px; font-size: 15px; }
  .field-row .btn { padding: 14px; border-radius: 14px; box-shadow: 0 4px 0 #000; }

  .teach-hero { grid-template-columns: 1fr; padding-top: 28px; padding-bottom: 40px; gap: 16px; }
  .teach-hero .copy { gap: 16px; }
  .teach-hero .h-xl { font-size: 38px; }
  .teach-hero p { font-size: 16px; }
  .teach-hero .actions { flex-direction: column; align-items: stretch; }
  .teach-hero .actions .btn { padding: 16px; font-size: 17px; }
  .teach-hero .btn-ghost-dark { padding: 14px; font-size: 17px; }
  .roster { margin-top: 8px; padding: 18px; gap: 12px; border-radius: 20px; }
  .roster-head .mono { font-size: 10px; }
  .roster-head .song { font-size: 19px; font-weight: 800; }
  .roster-head .flag, .roster-row.cols, .roster-row .days { display: none; }
  .roster-row { grid-template-columns: 1fr auto; gap: 6px; padding-top: 10px; border-top: 2px solid #efeae1; font-size: 14px; }
  .roster-row .segs { grid-column: 1 / -1; grid-row: 2; }
  .roster-row .segs span { height: 8px; }
  .roster-row:nth-of-type(n + 6) { display: none; }
  .features { grid-template-columns: 1fr; padding-top: 40px; padding-bottom: 40px; gap: 14px; }
  .feature { padding: 22px; border-radius: 22px; gap: 10px; }
  .feature .sq { width: 40px; height: 40px; border-radius: 12px; }
  .feature h3 { font-size: 22px; letter-spacing: 0; }
  .feature p { font-size: 15px; line-height: 1.45; }
  .school { grid-template-columns: 1fr; padding: 22px; gap: 10px; border-radius: 24px; }
  .school .intro p { display: none; }
  .school .intro .h-md { font-size: 26px; letter-spacing: -0.03em; line-height: 1.1; }
  .school form { gap: 10px; }
  .school .btn { padding: 15px; border-radius: 14px; font-size: 16px; box-shadow: 0 4px 0 #000; }

  .blog-top { padding-bottom: 20px; }
  .blog-top .chips { gap: 6px; justify-content: flex-start; }
  .featured { grid-template-columns: 1fr; border-radius: 24px; }
  .featured .img { min-height: 200px; font-size: 0; }
  .featured .copy { padding: 20px; gap: 10px; }
  .featured .mono { font-size: 11px; }
  .featured .h-md { font-size: 26px; letter-spacing: -0.03em; line-height: 1.12; }
  .featured p, .featured .read { display: none; }
  .newsletter { grid-template-columns: 1fr; padding: 22px; gap: 12px; border-radius: 24px; }
  .newsletter .h-md { font-size: 26px; letter-spacing: -0.03em; }
  .newsletter p { font-size: 15px; margin-top: 12px; }
  .newsletter .btn { box-shadow: 0 4px 0 var(--amber-sh); }

  .about-hero { padding-top: 32px; padding-bottom: 32px; gap: 14px; }
  .about-hero .h-xl { font-size: 36px; line-height: 1.08; }
  .team-photo { aspect-ratio: 4 / 3; border-radius: 22px; font-size: 11px; }
  .story { grid-template-columns: 1fr; gap: 14px; }
  .story .body { font-size: 17px; line-height: 1.55; gap: 14px; }
  .team { grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .person { gap: 8px; }
  .portrait { border-radius: 18px; font-size: 0; }
  .person .who { font-size: 15px; }
  .person .role { font-size: 13px; }
  .contacts { grid-template-columns: 1fr; gap: 10px; }
  .contact { padding: 18px; border-radius: 18px; gap: 4px; }
  .contact .mono { font-size: 11px; }
  .contact h3 { display: none; }

  .price-hero { padding-top: 28px; padding-bottom: 40px; gap: 18px; align-items: stretch; text-align: left; }
  .price-hero .h-xl { font-size: 40px; line-height: 1.05; }
  .price-hero > p { font-size: 16px; }
  .seg { grid-template-columns: 1fr 1fr; border-radius: 14px; font-size: 14px; }
  .seg .thumb { border-radius: 10px; }
  .seg button { padding: 11px 0; font-size: 14px; }
  .plans { grid-template-columns: 1fr; gap: 18px; }
  .plan { padding: 24px; border-radius: 24px; gap: 16px; }
  .plan-pro { order: -1; box-shadow: 0 6px 0 #000; }
  .plan-name { font-size: 22px; }
  .badge { padding: 4px 10px; font-size: 12px; }
  .price { flex-direction: column; align-items: flex-start; gap: 2px; }
  .price .amt { font-size: 48px; }
  .price .unit { font-size: 14px; }
  .plan-free .price { display: none; }
  .ticks { font-size: 15px; gap: 10px; }
  .ticks .dk-only { display: none; }
  .plan .cta .btn { padding: 15px; border-radius: 14px; font-size: 16px; }
  .plan-pro .fine { font-size: 13px; }
  .class-link { display: block; padding: 16px 18px; border-radius: 18px; font-size: 15px; }
  .faq-wrap { grid-template-columns: 1fr; gap: 12px; }
  .faq button { padding: 16px 0; font-size: 17px; gap: 12px; letter-spacing: 0; }
  .faq .sign { width: 28px; height: 28px; border-radius: 9px; }
  .faq .answer { font-size: 15px; line-height: 1.5; padding-bottom: 16px; margin-top: -8px; }

  .doc { padding-top: 24px; padding-bottom: 56px; }
  .doc p, .doc li { font-size: 16px; }
}