/* chord.css — Chordology guitar-chord SEO page. Dark theme, shared by every
   chord+tuning page. Inherits the marketing site's tokens & 12-tone identity. */

:root{
  --bg:#08080c;
  --bg-2:#0d0d14;
  --ink:#f4f5f7;
  --mut:#9aa0ab;
  --mut-2:#6b7079;
  --line:rgba(255,255,255,0.08);
  --line-2:rgba(255,255,255,0.13);
  --accent:#5B4FE0;
  --accent-soft:#9d95f2;
  --card:#101019;
  --tile:rgba(255,255,255,0.05);
  --maxw:880px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ── Nav ─────────────────────────────────────────────── */
header.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(8,8,12,0.72); backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
header.nav.scrolled{ border-bottom-color:var(--line); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:62px; max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ width:28px; height:28px; }
.brand span{ font-size:18px; font-weight:600; letter-spacing:-0.4px; }
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:-0.2px;
  padding:9px 17px; border-radius:999px; border:none; cursor:pointer;
  background:var(--accent); color:#fff; transition:transform .18s var(--ease), box-shadow .25s;
  box-shadow:0 8px 26px -10px rgba(91,79,224,0.8);
}
.btn:hover{ transform:translateY(-1.5px); box-shadow:0 14px 34px -10px rgba(91,79,224,0.9); }
.btn svg{ width:15px; height:15px; }

/* ── Breadcrumb ──────────────────────────────────────── */
.crumbs{ font-size:13px; color:var(--mut-2); padding:26px 0 0; }
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.crumbs a{ color:var(--mut); transition:color .2s; }
.crumbs a:hover{ color:var(--ink); }
.crumbs li[aria-current]{ color:var(--ink); }
.crumbs .sep{ color:var(--mut-2); opacity:.6; }

/* ── Header ──────────────────────────────────────────── */
.head{ padding:30px 0 6px; }
.tuning-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:var(--accent-soft); background:rgba(91,79,224,0.12);
  border:1px solid rgba(91,79,224,0.28); padding:6px 13px; border-radius:999px;
}
.tuning-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--accent-soft); }
h1{ font-size:clamp(40px,7vw,64px); font-weight:700; letter-spacing:-2px; line-height:1; margin-top:18px; }
h1 .sub{ display:block; font-size:clamp(16px,2.4vw,21px); font-weight:500; letter-spacing:-.4px; color:var(--mut); margin-top:12px; }
.summary{ font-size:clamp(16px,1.6vw,18px); color:var(--mut); margin-top:20px; max-width:600px; line-height:1.55; }
.summary b{ color:var(--ink); font-weight:500; }

/* ── Note tiles ──────────────────────────────────────── */
.notes-row{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.ntile{
  min-width:58px; padding:11px 14px 9px; border-radius:15px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  color:#fff; box-shadow:0 6px 18px -8px rgba(0,0,0,0.6);
}
.ntile .nm{ font-size:24px; font-weight:700; letter-spacing:-.5px; line-height:1; }
.ntile .role{ font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.formula{ margin-top:16px; font-size:14.5px; color:var(--mut); }
.formula b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* ── Section scaffolding ─────────────────────────────── */
section.blk{ padding:46px 0 0; }
.kicker{ font-size:12px; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-soft); }
h2{ font-size:clamp(24px,3vw,32px); font-weight:700; letter-spacing:-1px; line-height:1.05; margin-top:12px; }
.blk .lead{ font-size:15.5px; color:var(--mut); margin-top:12px; max-width:580px; line-height:1.55; }

/* ── Stats card ──────────────────────────────────────── */
.stats{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:20px; overflow:hidden;
  margin-top:8px;
}
.stat{ background:var(--card); padding:24px 26px; }
.stat .lab{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mut-2); }
.stat .val{ display:flex; align-items:baseline; gap:9px; margin-top:14px; }
.stat .num{ font-size:34px; font-weight:700; letter-spacing:-1px; font-variant-numeric:tabular-nums; }
.stat .den{ font-size:16px; color:var(--mut-2); font-weight:600; }
.pips{ display:flex; gap:8px; margin-top:16px; }
.pip{ width:14px; height:14px; border-radius:50%; background:var(--tile); box-shadow:inset 0 0 0 1px var(--line-2); }
.pip.on{ background:var(--accent); box-shadow:none; }
.bright-scale{ position:relative; height:13px; border-radius:999px; margin-top:18px;
  background:linear-gradient(90deg,#211E3F 0%,#6F66C9 48%,#D9D5F6 100%); }
.bright-knob{ position:absolute; top:50%; width:22px; height:22px; border-radius:50%;
  transform:translate(-50%,-50%); background:#fff; border:3px solid var(--accent);
  box-shadow:0 1px 5px rgba(0,0,0,.45); }
.bright-ends{ display:flex; justify-content:space-between; margin-top:11px; font-size:12.5px; font-weight:500; color:var(--mut); }
@media (max-width:560px){ .stats{ grid-template-columns:1fr; } }

/* ── Inline app nudge ────────────────────────────────── */
.nudge{
  display:flex; align-items:center; gap:14px; margin-top:22px;
  background:rgba(91,79,224,0.09); border:1px solid rgba(91,79,224,0.26);
  border-radius:16px; padding:15px 18px;
}
.nudge .ic{ width:40px; height:40px; flex:0 0 auto; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:rgba(91,79,224,0.18); color:var(--accent-soft); }
.nudge .ic svg{ width:22px; height:22px; }
.nudge .txt{ flex:1; font-size:14.5px; color:var(--mut); line-height:1.4; }
.nudge .txt b{ color:var(--ink); font-weight:600; }
.nudge a.go{ font-size:14px; font-weight:600; color:var(--accent-soft); white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.nudge a.go:hover{ color:#fff; }
@media (max-width:560px){ .nudge{ flex-wrap:wrap; } .nudge a.go{ width:100%; } }

/* ── Positions grid ──────────────────────────────────── */
.positions{ display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:14px; margin-top:24px; }
.pos{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:16px 12px 14px; display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:border-color .25s, transform .25s var(--ease);
}
.pos:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.pos .diagram{ display:flex; justify-content:center; }
.pos .meta{ text-align:center; }
.pos .meta .t{ font-size:14px; font-weight:600; letter-spacing:-.2px; }
.pos .meta .frets{ font-size:12px; color:var(--mut-2); margin-top:3px; font-variant-numeric:tabular-nums; letter-spacing:.08em; }

/* ── Diagram image grids ─────────────────────────────── */
/* The PNGs are self-contained (diagram, name and frets baked in) so they index in image search,
   but the card chrome — background, border, rounded corners — lives in CSS, exactly as it did for
   the old inline-SVG diagrams. The card clips the square-cornered image to its radius. */
.diagram-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:14px; margin-top:24px; align-items:start; }
.diagram-card{
  background:var(--card); border:1px solid var(--line); border-radius:18px; overflow:hidden;
  display:flex; justify-content:center;
  transition:border-color .25s, transform .25s var(--ease);
}
.diagram-card:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.diagram-img{ display:block; height:auto; max-width:100%; }

/* ── Chips ───────────────────────────────────────────── */
.chip-grid{ display:flex; flex-wrap:wrap; gap:34px; margin-top:8px; }
.chip-col{ flex:1; min-width:200px; }
.chip-col .lab{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mut-2); margin-bottom:14px; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; }
.chip{ font-size:14.5px; font-weight:500; letter-spacing:-.2px; color:var(--ink);
  background:var(--tile); border:1px solid var(--line-2); padding:9px 16px; border-radius:999px; }

/* ── Theory / enharmonic ─────────────────────────────── */
.theory-card{ background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; margin-top:8px; }
.trow{ display:flex; align-items:center; gap:14px; padding:18px 22px; border-bottom:1px solid var(--line); }
.trow:last-child{ border-bottom:none; }
.trow .k{ font-size:15px; color:var(--mut); min-width:170px; }
.trow .v{ flex:1; display:flex; flex-wrap:wrap; gap:9px; align-items:center; font-size:15px; }
.enh{ display:inline-flex; align-items:center; gap:5px; font-weight:600; line-height:1; color:var(--accent-soft);
  text-decoration:none; transition:color .2s; }
.enh:hover{ color:#fff; }
.enh:hover span.lbl{ text-decoration:underline; text-underline-offset:3px; }
.enh svg{ width:6px; height:11px; }
.muted-v{ color:var(--mut-2); }

/* ── Related chords ──────────────────────────────────── */
.related-row{ display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }
.related-row .enh{ background:var(--tile); border:1px solid var(--line-2); padding:8px 14px; border-radius:999px; }
.tlink{ color:var(--accent-soft); font-weight:600; text-decoration:underline; text-underline-offset:3px; transition:color .2s; }
.tlink:hover{ color:#fff; }

/* ── App CTA ─────────────────────────────────────────── */
.cta{
  position:relative; overflow:hidden; margin-top:54px;
  background:linear-gradient(160deg,#15131f,#0c0c14);
  border:1px solid var(--line-2); border-radius:26px; padding:42px 38px;
}
.cta::before{ content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px;
  background:radial-gradient(50% 50% at 50% 50%,rgba(91,79,224,0.4),transparent 70%); pointer-events:none; }
.cta-inner{ position:relative; z-index:1; display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.cta-mark{ width:64px; height:64px; flex:0 0 auto; }
.cta-copy{ flex:1; min-width:240px; }
.cta-copy h2{ margin-top:0; }
.cta-copy p{ font-size:15.5px; color:var(--mut); margin-top:12px; max-width:440px; line-height:1.55; }
.cta-copy .feats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.cta-copy .feat{ font-size:12.5px; font-weight:600; color:var(--accent-soft); background:rgba(91,79,224,0.12);
  border:1px solid rgba(91,79,224,0.28); padding:6px 12px; border-radius:999px; }
.appstore{
  display:inline-flex; align-items:center; gap:12px; padding:13px 24px 13px 20px; border-radius:15px;
  background:#fff; color:#08080c; transition:transform .18s var(--ease), box-shadow .25s; white-space:nowrap;
  box-shadow:0 12px 40px -14px rgba(0,0,0,0.9);
}
.appstore:hover{ transform:translateY(-2px); }
.appstore svg{ width:28px; height:28px; flex:0 0 auto; }
.appstore .t1{ display:block; font-size:10.5px; letter-spacing:.2px; opacity:.62; line-height:1.1; font-weight:500; }
.appstore .t2{ display:block; font-size:19px; font-weight:600; letter-spacing:-.5px; line-height:1.15; margin-top:1px; }

/* ── FAQ ─────────────────────────────────────────────── */
.faq{ margin-top:14px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:20px 4px; font-size:17px; font-weight:600; letter-spacing:-.3px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .pl{ width:18px; height:18px; flex:0 0 auto; position:relative; transition:transform .25s var(--ease); }
.faq summary .pl::before,.faq summary .pl::after{ content:""; position:absolute; background:var(--accent-soft); border-radius:2px; }
.faq summary .pl::before{ left:0; right:0; top:8px; height:2px; }
.faq summary .pl::after{ top:0; bottom:0; left:8px; width:2px; }
.faq details[open] summary .pl{ transform:rotate(45deg); }
.faq .ans{ padding:0 4px 22px; font-size:15.5px; color:var(--mut); line-height:1.6; max-width:640px; }
.faq .ans code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px; color:var(--ink);
  background:var(--tile); padding:2px 7px; border-radius:6px; letter-spacing:.06em; }

/* ── Footer ──────────────────────────────────────────── */
footer{ border-top:1px solid var(--line); margin-top:60px; padding:40px 0 56px; }
.foot-inner{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.foot-brand{ display:flex; align-items:center; gap:10px; }
.foot-brand img{ width:26px; height:26px; }
.foot-brand span{ font-size:16px; font-weight:600; letter-spacing:-.4px; }
.foot-links{ display:flex; gap:26px; flex-wrap:wrap; font-size:14px; color:var(--mut); }
.foot-links a:hover{ color:var(--ink); }
.foot-bot{ margin-top:24px; font-size:13px; color:var(--mut-2); }

@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }


/* ── Tablature ───────────────────────────────────────── */
.tabs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-top:24px; }
.tab{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px 14px 14px;
  transition:border-color .25s, transform .25s var(--ease); }
.tab:hover{ border-color:var(--line-2); transform:translateY(-2px); }
.tab .lbl{ text-align:center; font-size:14px; font-weight:600; letter-spacing:-.2px; margin-bottom:12px; }
.tabgrid{ display:flex; flex-direction:column; }
.trow{ display:flex; align-items:center; height:27px; }
.trow .sl{ width:15px; flex:0 0 auto; text-align:center; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px; color:var(--mut-2); }
.trow .tline{ position:relative; flex:1; height:100%; display:flex; align-items:center; justify-content:center; }
.trow .tline::before{ content:""; position:absolute; left:2px; right:0; top:50%; height:1px; background:var(--line-2); }
.tdot{ position:relative; z-index:1; min-width:22px; height:22px; padding:0 5px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center; background:var(--c); color:#fff;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; font-weight:700; }
.tdot.root{ box-shadow:0 0 0 2px var(--card), 0 0 0 3.8px var(--c); }
.tmute{ position:relative; z-index:1; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px; color:var(--mut-2); }


/* ── Listing pages ───────────────────────────────────── */
.lhead{ padding:30px 0 4px; }
.lhead h1{ font-size:clamp(30px,5vw,44px); letter-spacing:-1.4px; line-height:1.04; }
.lhead .summary{ margin-top:18px; }
.listing{ display:grid; grid-template-columns:repeat(auto-fill,minmax(244px,1fr)); gap:16px; margin-top:30px; }
.lcard{ position:relative; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:20px; padding:24px 22px;
  transition:border-color .25s, transform .25s var(--ease); }
a.lcard:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.lcard .ltitle{ font-size:25px; font-weight:700; letter-spacing:-.7px; line-height:1; padding-right:78px; }
.lcard .lsub{ font-size:13.5px; color:var(--mut); margin-top:8px; line-height:1.5; }
.lcard .lgo{ margin-top:auto; padding-top:18px; font-size:13.5px; font-weight:600; color:var(--accent-soft);
  display:inline-flex; align-items:center; gap:5px; }
.lcard .lgo svg{ width:6px; height:11px; }
a.lcard:hover .lgo{ color:#fff; }
.ltag{ position:absolute; top:20px; right:20px; font-size:10.5px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; padding:5px 10px; border-radius:999px; }
.ltag.live{ color:var(--accent-soft); background:rgba(91,79,224,.14); border:1px solid rgba(91,79,224,.3); }
.ltag.inapp{ color:var(--mut-2); background:var(--tile); border:1px solid var(--line-2); }
.tdots,.cdots{ display:flex; gap:7px; margin-top:18px; flex-wrap:wrap; }
.tdotc{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12.5px; font-weight:700; letter-spacing:-.3px; box-shadow:0 4px 12px -6px rgba(0,0,0,.6); }
.cmeta{ display:flex; gap:14px; margin-top:16px; font-size:12.5px; color:var(--mut-2); }
.cmeta b{ color:var(--ink); font-weight:600; }