/*
 * SEO landing pages (/song-key-finder, /chordify-alternative, ...).
 * Loaded after tokens.css, components.css and landing.css: the hero, the
 * `.start` tool form, `.steps`, `.features`, `.faq`, `.price` and the footer
 * come from those files. This file only adds the content blocks, all `seo-*`.
 */

/* ---------- breadcrumb above the hero ---------- */
.seo-crumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; padding: 0; list-style: none; font-size: 12.5px; color: var(--ink-tertiary); }
.seo-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--stroke-strong); }
.seo-crumbs a { color: var(--ink-secondary); }
.seo-crumbs a:hover { color: var(--accent-strong); }

/* Wider hero for tool pages that carry a second row of chips under the lede. */
.hero--seo .hero__inner { max-width: 820px; }
.seo-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.seo-chips li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--stroke); border-radius: var(--radius-pill); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--ink-secondary); }
.seo-chips .icon { width: 14px; height: 14px; color: var(--accent); }

/* ---------- fact strip under the hero ---------- */
.seo-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; max-width: 1040px; margin: 0 auto; padding: 0; list-style: none; overflow: hidden; background: var(--stroke); border: 1px solid var(--stroke); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.seo-facts li { display: grid; gap: 3px; padding: 20px 22px; background: var(--surface); }
.seo-facts strong { font-size: 28px; line-height: 1.05; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.seo-facts span { font-size: 13px; line-height: 1.45; color: var(--ink-secondary); }

/* ---------- section scaffolding ---------- */
.seo-section { padding: 72px 0; }
.seo-section--tint { background: var(--surface); border-block: 1px solid var(--stroke); }
.seo-section--tight { padding: 28px 0; }
.seo-section--sand { background: var(--canvas-secondary); border-block: 1px solid var(--stroke); }
.seo-narrow { width: min(calc(100% - 48px), 820px); margin-inline: auto; }
.seo-head { display: grid; gap: 10px; margin-bottom: 30px; }
.seo-head h2 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; letter-spacing: -.035em; font-weight: 700; text-wrap: balance; }
.seo-head p:not(.eyebrow) { max-width: 640px; font-size: 16px; line-height: 1.65; color: var(--ink-secondary); }
.seo-head--center { justify-items: center; text-align: center; }

/* Long-form text: one readable column, calm rhythm. */
.seo-prose { display: grid; gap: 16px; font-size: 16px; line-height: 1.75; color: var(--ink-secondary); }
.seo-prose h2 { color: var(--ink); }
.seo-prose h3 { margin-top: 14px; font-size: 20px; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); }
.seo-prose strong { color: var(--ink); font-weight: 650; }
.seo-prose a { color: var(--accent-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.seo-prose a:hover { text-decoration-thickness: 2px; }
.seo-prose ul, .seo-prose ol { display: grid; gap: 9px; margin: 0; padding-left: 22px; }
.seo-prose li::marker { color: var(--accent); font-weight: 700; }
.seo-prose code, .seo-code { padding: 1px 6px; border-radius: var(--radius-xs); background: var(--surface-2); border: 1px solid var(--stroke); font: 600 .88em var(--font-chord); color: var(--ink); }

/* Text on one side, a design block on the other. */
.seo-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.seo-split--top { align-items: start; }
.seo-split--flip > :first-child { order: 2; }

/* ---------- answer box: the direct answer, first thing in the section ---------- */
.seo-answer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; max-width: 820px; margin: 0 auto; padding: 22px 26px; background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), .24); border-left: 4px solid var(--accent); border-radius: var(--radius-md); }
.seo-answer .icon-circle { background: var(--surface); }
.seo-answer__label { margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-strong); }
.seo-answer p:last-child { font-size: 17px; line-height: 1.6; color: var(--ink); }

/* ---------- callouts ---------- */
.seo-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 16px 18px; background: var(--surface-2); border: 1px solid var(--stroke); border-radius: var(--radius-md); font-size: 14.5px; line-height: 1.65; color: var(--ink-secondary); }
.seo-callout .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.seo-callout strong { color: var(--ink); }
.seo-callout--tip { background: var(--positive-soft); border-color: rgba(47, 158, 91, .24); }
.seo-callout--tip .icon { color: var(--positive); }
.seo-callout--warn { background: var(--warning-soft); border-color: rgba(169, 112, 15, .26); }
.seo-callout--warn .icon { color: var(--warning); }

/* ---------- cards ---------- */
.seo-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.seo-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seo-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seo-card { display: grid; align-content: start; gap: 12px; padding: 24px; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius-lg); transition: border-color var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast); }
.seo-card:hover { border-color: var(--stroke-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.seo-card h3 { font-size: 17px; line-height: 1.3; letter-spacing: -.015em; }
.seo-card p { font-size: 14px; line-height: 1.65; color: var(--ink-secondary); }
.seo-card a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.seo-card__kicker { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-tertiary); }
.seo-section--tint .seo-card { background: var(--canvas); }

/* ---------- output readout: key, tempo, meter as big instrument tiles ---------- */
.seo-output { overflow: hidden; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.seo-output__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--stroke); background: var(--surface-2); }
.seo-output__title { font-size: 14px; font-weight: 650; }
.seo-output__note { font-size: 11.5px; color: var(--ink-tertiary); }
.seo-readouts { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .8fr); gap: 1px; background: var(--stroke); }
.seo-readout { display: grid; gap: 2px; padding: 18px; background: var(--surface); }
.seo-readout__label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-tertiary); }
.seo-readout__value { font: 700 24px/1.15 var(--font-chord); letter-spacing: -.03em; white-space: nowrap; color: var(--accent-strong); }
.seo-readout__sub { font-size: 12.5px; color: var(--ink-secondary); }
.seo-output__body { padding: 18px 20px 20px; }
.seo-output__label { margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-tertiary); }

/* Chord chips in time: a row of bars. `.is-now` marks the current chord. */
.seo-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.seo-bars li { display: grid; justify-items: center; gap: 1px; padding: 10px 6px; background: var(--surface-2); border: 1px solid var(--stroke); border-radius: var(--radius-sm); }
.seo-bars b { font: 700 17px/1.2 var(--font-chord); color: var(--chord); }
.seo-bars span { font-size: 10.5px; color: var(--ink-tertiary); }
.seo-bars .is-now { background: var(--now-bg); border-color: rgba(var(--accent-rgb), .35); }

/* A chord progression with its Roman numerals above the chords. */
.seo-numerals { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.seo-numerals li { display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 10px 14px 11px; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius-sm); }
.seo-numerals i { font: 700 13px/1.2 var(--font-sans); font-style: normal; color: var(--ink-tertiary); }
.seo-numerals b { font: 700 20px/1.2 var(--font-chord); color: var(--chord); }

/* ---------- vertical flow (numbered, connected) ---------- */
.seo-flow { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: flow; }
.seo-flow li { position: relative; display: grid; gap: 4px; padding: 0 0 26px 54px; counter-increment: flow; }
.seo-flow li:last-child { padding-bottom: 0; }
.seo-flow li::before { content: counter(flow); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); border: 1px solid rgba(var(--accent-rgb), .3); color: var(--accent-strong); font-size: 14px; font-weight: 700; }
.seo-flow li::after { content: ""; position: absolute; left: 17px; top: 42px; bottom: 6px; width: 2px; background: linear-gradient(var(--stroke-strong), transparent); }
.seo-flow li:last-child::after { display: none; }
.seo-flow h3 { padding-top: 6px; font-size: 17px; letter-spacing: -.015em; }
.seo-flow p { font-size: 14.5px; line-height: 1.65; color: var(--ink-secondary); }

/* ---------- definition cards ---------- */
.seo-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; }
.seo-terms div { display: grid; gap: 6px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius-md); }
.seo-terms dt { color: var(--ink); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.seo-terms dd { margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-secondary); }

/* ---------- good for / not for ---------- */
.seo-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.seo-fit__col { display: grid; align-content: start; gap: 14px; padding: 24px; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius-lg); }
.seo-fit__col h3 { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.seo-fit__col h3 .icon { width: 20px; height: 20px; }
.seo-fit__col--yes { border-top: 3px solid var(--positive); }
.seo-fit__col--yes h3 .icon { color: var(--positive); }
.seo-fit__col--no { border-top: 3px solid var(--warning); }
.seo-fit__col--no h3 .icon { color: var(--warning); }
.seo-fit ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.seo-fit li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.6; color: var(--ink-secondary); }
.seo-fit li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--stroke-strong); }
.seo-fit__col--yes li::before { background: var(--positive); }
.seo-fit__col--no li::before { background: var(--warning); }

/* ---------- comparison table ---------- */
.seo-table-wrap { overflow-x: auto; border: 1px solid var(--stroke); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; }
.seo-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: 14px; line-height: 1.5; }
.seo-table caption { padding: 16px 20px; text-align: left; font-size: 13px; color: var(--ink-tertiary); caption-side: bottom; border-top: 1px solid var(--stroke); }
.seo-table th, .seo-table td { padding: 14px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--stroke); }
.seo-table thead th { position: sticky; top: 0; background: var(--surface-2); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: var(--ink); white-space: nowrap; }
.seo-table tbody th { width: 168px; font-weight: 600; color: var(--ink); background: var(--surface); }
.seo-table tbody tr:last-child th, .seo-table tbody tr:last-child td { border-bottom: 0; }
.seo-table td { color: var(--ink-secondary); }
.seo-table .is-us { background: var(--accent-soft); color: var(--ink); }
.seo-table thead .is-us { background: var(--accent-soft); color: var(--accent-strong); }
.seo-table .is-us strong { color: var(--accent-strong); }
.seo-table td small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-tertiary); }
.seo-table .is-us small { color: var(--ink-secondary); }
.seo-mark { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.seo-mark .icon { width: 16px; height: 16px; }
.seo-mark--yes .icon { color: var(--positive); }
.seo-mark--no .icon { color: var(--ink-tertiary); }
.seo-mark--part .icon { color: var(--warning); }

/* ---------- related pages ---------- */
.seo-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.seo-related a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 100%; padding: 16px 18px; background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--radius-md); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); }
.seo-related a:hover { border-color: rgba(var(--accent-rgb), .45); box-shadow: var(--shadow-md); color: inherit; }
.seo-related strong { display: block; font-size: 14.5px; letter-spacing: -.01em; }
.seo-related span { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.45; color: var(--ink-secondary); }
.seo-related .icon-circle { display: grid; margin: 0; }
.seo-related .seo-related__go { width: 18px; height: 18px; color: var(--ink-tertiary); transition: transform var(--motion-fast), color var(--motion-fast); }
.seo-related a:hover .seo-related__go { color: var(--accent); transform: translateX(3px); }

/* ---------- closing call to action ---------- */
.seo-cta { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 14px; max-width: 920px; margin: 0 auto; padding: 52px 32px; text-align: center; background: linear-gradient(180deg, var(--accent-soft), var(--surface)); border: 1px solid rgba(var(--accent-rgb), .28); border-radius: var(--radius-xl); box-shadow: 0 22px 54px rgba(var(--accent-rgb), .12); }
.seo-cta h2 { max-width: 620px; text-wrap: balance; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -.035em; }
.seo-cta p { max-width: 540px; font-size: 16px; line-height: 1.6; color: var(--ink-secondary); }
.seo-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.seo-cta__fine { font-size: 12.5px; color: var(--ink-tertiary); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .seo-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-cards, .seo-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .seo-split--flip > :first-child { order: 0; }
}
@media (max-width: 760px) {
  .seo-section { padding: 52px 0; }
  .seo-narrow { width: min(calc(100% - 32px), 820px); }
  .seo-head { margin-bottom: 24px; }
  .seo-prose { font-size: 15.5px; line-height: 1.7; }
  .seo-answer { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px; }
  .seo-answer p:last-child { font-size: 16px; }
  .seo-facts li { padding: 16px; }
  .seo-facts strong { font-size: 24px; }
  .seo-cards, .seo-cards--2, .seo-cards--4, .seo-fit, .seo-terms, .seo-related { grid-template-columns: minmax(0, 1fr); }
  .seo-readouts { grid-template-columns: minmax(0, 1fr); }
  .seo-readout { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 14px; }
  .seo-readout__label { grid-column: 1 / -1; }
  .seo-bars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-cta { padding: 40px 20px; border-radius: var(--radius-lg); }
}