/* ============================================================
   CustomSongGuide.com — "Best Personalized Song Services 2026"
   Recreated from the design handoff (ForeverSongs Comparison).
   Fidelity note: layout/spacing/typography match the handoff;
   the mock's placeholder ForeverSongs pink (#db2777) is replaced
   with ForeverSongs' actual brand system (Lora serif wordmark,
   blue #027AB8 accents, real logo mark).
   ============================================================ */

:root {
  --ink: #0a0a0a;
  --ink-2: #1f2937;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --line: #e5e7eb;
  --line-2: #d1d5db;
  --page-bg: #f5f5f4;
  --panel: #fafafa;
  /* ForeverSongs actual brand */
  --fs-blue: #027ab8;
  --fs-blue-dark: #0369a1;
  --fs-soft: #f0f9ff;
  /* Site accent system */
  --hot: #ef4444;
  --hot-dark: #b91c1c;
  --hot-soft: #fff5f5;
  --hot-pill: #fee2e2;
  --accent: #7c3aed;
  --accent-dark: #6d28d9;
  --accent-soft: #f3eaff;
  --gold: #facc15;
  --gold-text: #ca8a04;
  --gold-soft: #fef9c3;
  --good: #16a34a;
  --bad: #dc2626;
  --partial: #f97316;
  --serif: 'Lora', Georgia, 'Times New Roman', serif;
}

html {
  scroll-behavior: smooth;
}
html,
body {
  margin: 0;
  padding: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a.nou:hover {
  text-decoration: none;
}
button {
  font-family: inherit;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes popin {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- ForeverSongs brand mark + wordmark (actual branding) ---------- */
.fs-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--line);
  overflow: hidden;
  flex-shrink: 0;
}
.fs-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fs-wordmark {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.5px;
}
.fs-wordmark b {
  font-weight: 600;
}
.fs-wordmark .tld {
  font-weight: 400;
  color: var(--fs-blue);
}

/* ---------- Sticky header ---------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.site-header-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.3px;
}
.site-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
.site-brand .tld {
  color: var(--muted-2);
  font-weight: 500;
}
.site-updated {
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- Hero ---------- */
.fs-hero {
  padding: 28px 20px 22px;
  text-align: center;
}
.fs-h1 {
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: -1px;
  margin: 0 auto 10px;
  max-width: 760px;
  font-weight: 800;
  color: var(--ink);
}
.fs-h1 .grad {
  background: linear-gradient(135deg, #7c3aed, #0369a1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-showcase {
  max-width: 720px;
  margin: 20px auto 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.fs-hs-top {
  padding: 16px 20px;
  display: flex;
  gap: 20px;
  align-items: center;
}
.hs-brand {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.hs-brand .fs-mark {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}
.hs-name {
  font-size: 20px;
  color: var(--ink);
  line-height: 1.15;
}
.hs-score-line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 3px;
  font-size: 13px;
}
.stars {
  color: var(--gold-text);
  letter-spacing: 1px;
  font-size: 12px;
}
.hs-score-line .num {
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
}
.hs-score-line .den {
  color: var(--muted-2);
  font-size: 12px;
}
.hs-benefits {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hs-benefits li {
  display: flex;
  gap: 8px;
}
.hs-benefits .tick {
  color: var(--good);
  font-weight: 900;
}
.hs-footer {
  padding: 10px 20px;
  border-top: 1px solid var(--line);
  background: var(--page-bg);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  justify-content: center;
  align-items: center;
  font-size: 12.5px;
  color: var(--muted);
}
.hs-footer .strong {
  color: var(--ink);
  font-weight: 700;
}
.hs-footer .dot {
  color: var(--muted-2);
}

.hero-sample {
  max-width: 520px;
  margin: -4px auto 16px;
  text-align: center;
}
.sample-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 13px;
  transition:
    border-color 0.12s,
    color 0.12s,
    box-shadow 0.12s;
}
.sample-pill:hover {
  border-color: var(--fs-blue);
  color: var(--fs-blue);
  box-shadow: 0 2px 8px rgba(2, 122, 184, 0.15);
}
.sample-pill .play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--fs-blue);
  color: #fff;
  font-size: 10px;
  padding-left: 2px;
  flex-shrink: 0;
}
.sample-pill strong {
  color: var(--ink);
  font-weight: 700;
}
.sample-pill .arrow {
  color: var(--muted-2);
}

.fs-cta-wrap {
  margin: 22px auto 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.fs-hero-cta {
  padding: 17px 30px;
  font-size: 17px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--fs-blue);
  color: #fff;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: 0.1px;
  box-shadow: 0 12px 26px rgba(2, 122, 184, 0.35);
  min-height: 52px;
  box-sizing: border-box;
  transition:
    background 0.12s,
    transform 0.08s,
    box-shadow 0.12s;
}
.fs-hero-cta:hover {
  background: var(--fs-blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(2, 122, 184, 0.4);
}
.fs-hero-cta .offer {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 0 6px;
}
.fs-hero-cta .arr {
  font-size: 20px;
  line-height: 1;
}
.fs-disclosure {
  max-width: 620px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.45;
  color: #5f6670; /* AA on the #f5f5f4 page bg (was --muted-2, ~2.3:1) */
  font-weight: 500;
  letter-spacing: 0.1px;
}
.fs-disclosure a {
  color: var(--muted);
  text-decoration: underline;
}
.fs-disclosure a:hover {
  color: var(--ink);
}

/* ---------- Ranked review cards ---------- */
.rank-list {
  margin: 14px auto 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.rank-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.rank-card.rc-first {
  border: 2px solid var(--hot);
  box-shadow:
    0 20px 60px rgba(239, 68, 68, 0.18),
    0 4px 14px rgba(15, 23, 42, 0.06);
}
.rc-grid {
  display: grid;
  grid-template-columns: 220px 1fr 240px;
}
.rc-left {
  padding: 28px 20px;
  border-right: 1px solid var(--line);
  text-align: center;
  background: var(--panel);
  position: relative;
}
.rc-first .rc-left {
  background: var(--hot-soft);
}
.rc-mid {
  padding: 28px 28px 24px;
}
.rc-right {
  padding: 24px 20px;
  border-left: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.rc-first .rc-right {
  background: var(--hot-soft);
}

.rank-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  box-sizing: border-box;
}
.rc-first .rank-badge {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 4px 12px rgba(10, 10, 10, 0.25);
}
.rc-brand {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.rc-logo {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}
.rc-first .fs-mark.rc-logo {
  width: 78px;
  height: 78px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
}
.rc-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--ink);
  line-height: 1;
}
.rc-first .rc-name {
  font-size: 22px;
}
.rc-domain {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.rc-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 6px;
  margin-top: 14px;
}
.rc-pill.choice {
  background: var(--hot-pill);
  color: var(--hot-dark);
  border: 1px solid #fecaca;
}
.rc-pill.blue {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}
.rc-pill.violet {
  background: #ede9fe;
  color: var(--accent-dark);
  border: 1px solid #ddd6fe;
}

/* Competitor placeholder marks (original monograms — per handoff, never real logos) */
.logo-songlorious {
  background: linear-gradient(135deg, #5f5170, #8b7ba3);
  font-size: 40px;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
}
.name-songlorious {
  color: #5f5170;
  font-style: italic;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: -0.5px;
}
.logo-csg {
  background: linear-gradient(135deg, #1e293b, #475569);
}
.name-csg {
  color: #1e293b;
  letter-spacing: -0.4px;
}
.name-csg b {
  color: #475569;
}
.logo-suno {
  background: #0a0a0a;
}
.name-suno {
  color: #0a0a0a;
  letter-spacing: -1px;
}
.logo-anymusic {
  background: linear-gradient(135deg, #6366f1, #0f172a);
}
.name-anymusic {
  color: #0f172a;
}
.name-anymusic b {
  color: #6366f1;
}

.rc-title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.best-for {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.rc-body {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0 0 16px;
}

.fs-proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.pc-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.pc-label.pros {
  color: #15803d;
}
.pc-label.cons {
  color: var(--bad);
}
.pc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  display: flex;
  flex-direction: column;
}
.pc-list li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 5px 0;
  color: var(--ink-2);
  line-height: 1.45;
}
.pc-list .ic {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.pc-list .ic.y {
  background: var(--good);
  color: #fff;
  font-size: 10px;
}
.pc-list .ic.n {
  background: var(--hot-pill);
  color: var(--bad);
  font-size: 13px;
}

.rc-footer-row {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.rc-footer-row .note {
  font-size: 13px;
  color: var(--muted);
}
.rc-footer-row .note strong {
  color: var(--ink);
  font-weight: 700;
}
.btn-mini {
  background: var(--hot);
  color: #fff;
  padding: 9px 16px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13.5px;
  transition: background 0.12s ease;
}
.btn-mini:hover {
  background: var(--hot-dark);
}

.score-block {
  text-align: center;
  margin-bottom: 16px;
}
.fs-score-num {
  font-size: 56px;
  letter-spacing: -2px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}
.rc-first .fs-score-num {
  color: var(--hot-dark);
}
.score-den {
  font-size: 16px;
  color: var(--muted);
  font-weight: 500;
  margin-left: 2px;
}
.score-stars {
  margin-top: 4px;
  font-size: 14px;
  color: var(--gold-text);
  letter-spacing: 1.5px;
}
.score-verdict {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top: 4px;
}
.rc-first .score-verdict {
  color: var(--hot-dark);
}

.btn-deal {
  display: block;
  text-align: center;
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.3px;
  padding: 17px 16px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.4);
  transition:
    transform 0.08s ease,
    box-shadow 0.12s ease;
}
.btn-deal:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(239, 68, 68, 0.5);
}
.btn-ghost {
  display: block;
  text-align: center;
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.3px;
  padding: 15px 16px;
  border-radius: 10px;
  transition:
    background 0.12s ease,
    color 0.12s,
    border-color 0.12s;
}
.btn-ghost:hover {
  background: var(--page-bg);
  color: var(--ink);
  border-color: var(--muted-2);
}
.rc-sub {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}
.rc-sub strong {
  color: var(--good);
  font-weight: 700;
}

/* ---------- Promo banner ---------- */
.fs-promo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  padding: 28px 32px;
  align-items: center;
  margin: 32px auto 0;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(135deg, #0a0a0a 0%, #1e293b 100%);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  color: #fff;
}
.fs-promo::before {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(239, 68, 68, 0.35) 0%, transparent 70%);
}
.fs-promo-copy {
  position: relative;
}
.fs-promo-eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hot);
  margin-bottom: 8px;
}
.fs-promo h3 {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
}
.fs-promo p {
  margin: 0;
  font-size: 14.5px;
  color: #cbd5e1;
  line-height: 1.5;
  max-width: 540px;
}
.fs-promo-cta {
  background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
  color: #fff;
  padding: 16px 24px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
  box-shadow: 0 10px 24px rgba(239, 68, 68, 0.45);
  white-space: nowrap;
  position: relative;
  transition:
    transform 0.08s ease,
    box-shadow 0.12s ease;
}
.fs-promo-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(239, 68, 68, 0.55);
}

/* ---------- Section header pattern ---------- */
.fs-section {
  margin: 56px auto 0;
}
.section-eyebrow {
  font-size: 12px;
  font-weight: 800;
  color: var(--hot);
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.fs-h2 {
  font-size: 30px;
  margin: 0 0 6px;
  letter-spacing: -0.6px;
  font-weight: 800;
  color: var(--ink);
}
.section-lede {
  font-size: 16px;
  color: var(--muted);
  max-width: 720px;
  margin: 0 0 22px;
  line-height: 1.55;
}

/* ---------- Comparison table ---------- */
.fs-ctable {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.fs-ctable-scroll {
  overflow-x: auto;
}
.fs-ctable table {
  width: 100%;
  border-collapse: collapse;
}
.fs-ctable th,
.fs-ctable td {
  padding: 14px 18px;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.fs-ctable thead th {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel);
}
.fs-ctable thead th.c1 {
  color: var(--hot-dark);
  background: var(--hot-soft);
}
.fs-ctable td.c1 {
  background: #fffaf9;
  font-weight: 600;
}
.fs-ctable td.feat {
  font-weight: 600;
  color: var(--ink-2);
}
.fs-ctable .yes {
  color: #15803d;
  font-weight: 800;
} /* AA text shade of --good */
.fs-ctable .no {
  color: var(--bad);
  font-weight: 800;
}
.fs-ctable .part {
  color: #c2410c;
  font-weight: 700;
} /* AA text shade of --partial */
.fs-ctable tr:last-child td {
  border-bottom: none;
}
.th-chip {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  color: #fff;
  font-size: 12px;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin-right: 6px;
  overflow: hidden;
}
.th-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.th-chip.fs {
  background: #fff;
  border: 1px solid var(--line);
  box-sizing: border-box;
}
.th-chip.csg {
  background: #334155;
}
.th-chip.suno {
  background: #0a0a0a;
}
.th-chip.anymusic {
  background: #6366f1;
}
.table-footnote {
  font-size: 12px;
  color: #5f6670;
  margin: 10px 2px 0;
}

/* ---------- Buying guide ---------- */
.fs-guide {
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.fs-guide h3 {
  font-size: 17px;
  margin: 18px 0 8px;
  color: var(--ink);
}
.fs-guide h3:first-child {
  margin-top: 0;
}
.fs-guide p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.fs-guide ul {
  padding-left: 18px;
  margin: 8px 0;
}
.fs-guide li {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 4px;
}

/* ---------- Methodology ---------- */
.fs-method {
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.method-byline {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
}
.method-byline-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.method-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #0369a1);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.method-byline-main {
  flex: 1;
  min-width: 220px;
}
.method-byline-main strong {
  color: var(--ink);
}
.method-byline-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.method-byline-tags {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.fs-method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.method-cell {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}
.method-pct {
  font-size: 28px;
  font-weight: 800;
  color: var(--hot);
  letter-spacing: -1px;
}
.method-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.3px;
  margin-top: 4px;
}
.method-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 6px;
}

/* ---------- FAQ ---------- */
.fs-faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 22px;
}
.fs-faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  cursor: pointer;
}
.fs-faq details[open] {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
/* Grid rows stretch, which keeps two open cards in a row the same height.
   A CLOSED card must opt out, or opening its row-mate inflated it to the
   same height and it read as an answer that had gone missing. */
.fs-faq details:not([open]) {
  align-self: start;
}
.fs-faq summary {
  /* Hold two lines so every closed card is the same height whether its
     question wraps or not; without it a one-line question sat 13px
     shorter than its row-mate. */
  min-height: 2.6em;
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.fs-faq summary::-webkit-details-marker {
  display: none;
}
.fs-faq summary::after {
  content: '+';
  color: var(--hot);
  font-weight: 800;
  font-size: 18px;
}
.fs-faq details[open] summary::after {
  content: '−';
}
.fs-faq p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 10px 0 2px;
}

/* ---------- Coverage ---------- */
.fs-coverage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 24px 28px;
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}
.fs-coverage .line {
  color: var(--ink-2);
  font-size: 15px;
}
.fs-coverage .line strong {
  color: var(--ink);
}
.btn-coverage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  transition: background 0.12s ease;
}
.btn-coverage:hover {
  background: var(--accent-dark);
}

/* ---------- Long-form sections ---------- */
.fs-lf {
  padding: 28px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-top: 22px;
}
.fs-lf h3 {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  margin: 24px 0 10px;
  letter-spacing: -0.3px;
}
.fs-lf h3:first-child {
  margin-top: 0;
}
.fs-lf p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.fs-lf ul {
  padding-left: 22px;
  margin: 8px 0 16px;
}
.fs-lf li {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 8px;
}

/* ---------- Inline ad card ---------- */
.fs-inline-ad {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-top: 20px;
  text-decoration: none;
  position: relative;
  transition:
    box-shadow 0.15s,
    border-color 0.15s;
}
.fs-inline-ad:hover {
  border-color: var(--line-2);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
.ad-tag {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.5px;
  background: #f1f5f9;
  padding: 2px 7px;
  border-radius: 4px;
}
.fs-inline-ad .fs-mark {
  width: 100px;
  height: 100px;
  border-radius: 16px;
  background: var(--fs-soft);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
}
.ad-eyebrow {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent-dark);
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.ad-headline {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.3px;
}
.ad-copy {
  min-width: 0;
}
.fs-ad-ctawrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.ad-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  padding: 14px 26px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(10, 10, 10, 0.22);
}
.ad-caption {
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Related guides ---------- */
.fs-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 22px;
}
.guide-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 22px;
  color: var(--ink);
  transition:
    border-color 0.12s,
    box-shadow 0.12s,
    transform 0.08s;
}
.guide-tile:hover {
  border-color: var(--hot);
  box-shadow: 0 10px 24px rgba(239, 68, 68, 0.12);
  transform: translateY(-1px);
}
.guide-tile.has-image {
  padding: 0 0 18px;
  overflow: hidden;
}
.guide-img {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #fff2ea;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c2794f;
  font-size: 12px;
  letter-spacing: 0.4px;
  text-align: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.guide-img-photo {
  display: block;
  width: 100%;
  /* The <img> carries height="640"; without this the attribute fixes the
     height, both dimensions become definite, and aspect-ratio is ignored,
     cropping the 3:2 photo to portrait. */
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: 12px;
  background: var(--panel);
}
.guide-tile.has-image .guide-eyebrow,
.guide-tile.has-image .guide-title,
.guide-tile.has-image .guide-sub {
  margin-left: 22px;
  margin-right: 22px;
}
.guide-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--hot-dark);
}
.guide-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink);
}
.guide-sub {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Footer ---------- */
.fs-footer {
  margin-top: 80px;
  padding: 36px 20px 120px;
  background: var(--ink);
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.6;
}
.fs-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.footer-disclosure {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 22px;
}
.footer-disclosure-title {
  color: #fff;
  font-size: 14px;
  margin: 0 0 8px;
  font-weight: 700;
}
.footer-disclosure p {
  margin: 0;
}
.footer-meta {
  color: #94a3b8;
  font-size: 12px;
}
.footer-meta a {
  color: #c4b5fd;
}

/* ---------- Sticky bottom bar ---------- */
.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-top: 2px solid var(--hot);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.35);
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1),
    visibility 0s linear 0.35s;
  transform: translateY(110%);
  visibility: hidden; /* keeps the CTA/close out of the tab order while hidden */
}
.sticky-bar.visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.sticky-bar-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sb-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.sb-left .fs-mark {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.sb-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.sb-title {
  font-size: 17px;
  color: #fff;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb-title .fs-wordmark {
  letter-spacing: -0.5px;
}
.sb-offer {
  background: var(--hot);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.6px;
  padding: 3px 8px;
  border-radius: 5px;
  text-transform: uppercase;
  line-height: 1;
  font-family: Inter, sans-serif;
}
.fs-sb-meta {
  font-size: 12.5px;
  color: #cbd5e1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fs-sb-meta .star {
  color: var(--gold);
  margin-right: 4px;
}
.sb-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb-cta {
  background: var(--fs-blue);
  color: #fff;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 14.5px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(2, 122, 184, 0.45);
  transition:
    background 0.12s ease,
    transform 0.08s ease;
}
.sb-cta:hover {
  background: var(--fs-blue-dark);
  transform: translateY(-1px);
}
.sb-close {
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding: 4px 8px;
  margin-left: 4px;
}
.sb-close:hover {
  color: #fff;
}

/* ---------- Promo popup modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-backdrop.open {
  display: flex;
  animation: fadein 0.2s ease;
}
.fs-modal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 880px;
  background: #fff;
  border-radius: 18px;
  width: 100%;
  overflow: hidden;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
  animation: popin 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 0;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 20px;
  cursor: pointer;
  color: var(--ink);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.modal-close:hover {
  background: #fff;
}
.fs-modal-left {
  padding: 36px 28px;
  min-height: 360px;
  background: linear-gradient(135deg, #bfdbfe 0%, #c4b5fd 50%, #fde68a 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  box-sizing: border-box;
}
.modal-ad-tag {
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 9px;
  border-radius: 5px;
  align-self: flex-start;
}
.fs-modal-left .fs-mark {
  width: 132px;
  height: 132px;
  border-radius: 28px;
  border: none;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
  margin-bottom: 18px;
}
.modal-wordmark {
  font-size: 48px;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -1.6px;
}
.modal-tagline {
  font-size: 14px;
  color: rgba(10, 10, 10, 0.7);
  margin-top: 4px;
  font-weight: 600;
}
.fs-modal-right {
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  box-sizing: border-box;
}
.modal-deal-pill {
  background: var(--gold-soft);
  color: var(--gold-text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 6px;
  align-self: flex-start;
  border: 1px solid #fde68a;
}
.fs-modal-right h2 {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.8px;
  margin: 0;
  color: var(--ink);
}
.fs-modal-right .modal-body {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}
.modal-cta {
  background: var(--ink);
  color: #fff;
  padding: 17px 22px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 16px;
  text-align: center;
  box-shadow: 0 8px 20px rgba(10, 10, 10, 0.25);
  transition:
    background 0.12s ease,
    transform 0.08s ease;
}
.modal-cta:hover {
  background: var(--ink-2);
  transform: translateY(-1px);
}
.modal-dismiss {
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
  text-decoration: underline;
}
.modal-dismiss:hover {
  color: var(--ink);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .sticky-bar,
  .sticky-bar.visible {
    transition: none;
  }
  .modal-backdrop,
  .fs-modal {
    animation: none;
  }
}

/* ============================================================
Article pages (site/guides/*.html). Scoped under .article-page so
none of it reaches index.html, which still runs the original chrome
until the homepage gets its own redesign pass.

Palette from the CustomSongGuide redesign handoff: colour carries
meaning - navy structural, purple editorial, teal positive signal,
orange-red the top pick only, blue informational. Typography is
unchanged (Inter, as the rest of the site); the stat rows use
tabular figures rather than a second typeface.
============================================================ */
/* Guide pages only, so the homepage keeps its own ground. This also sets the
   colour the browser paints on overscroll and below short pages; the value
   matches --cs-cream below. */
body.article-doc {
  background: #fbf7f3;
}
.article-page {
  /* The site header is sticky, so sticky panels and anchor targets have to
     clear it or they land underneath. */
  --cs-header: 78px;
  --cs-navy: #062846;
  --cs-orange: #ff492c;
  --cs-purple: #5746b2;
  --cs-blue: #288dff;
  --cs-blue-ink: #146fce;
  --cs-teal: #1c9e8e;
  --cs-ink: #26333e;
  --cs-ink-2: #3a4753;
  --cs-muted: #657586;
  --cs-muted-2: #8996a3;
  --cs-tint-purple: #f1edfb;
  --cs-tint-orange: #fff1ee;
  --cs-tint-blue: #e9f3ff;
  --cs-tint-navy: #e9eef3;
  --cs-line: #e4e8ec;
  --cs-line-2: #eef1f3;
  --cs-gutter: 24px;
  /* Two surfaces. Cream is the page; white is what you read or act on.
     Panels nested inside a white surface go back to cream so they recess
     instead of disappearing. */
  --cs-cream: #fbf7f3;
  --cs-cream-2: #f6f1ec;
  background: var(--cs-cream);
  color: var(--cs-ink);
}
.article-page a {
  color: var(--cs-blue);
}
.article-page a:hover {
  color: var(--cs-blue-ink);
}

/* ---------- Hero band ---------- */
.article-hero {
  background:
    linear-gradient(115deg, var(--cs-tint-purple) 0%, #fdf3f0 42%, var(--cs-tint-blue) 100%);
  border-bottom: 1px solid var(--cs-line);
  /* A soft bloom behind the title so the band is not a flat wash. */
  position: relative;
  isolation: isolate;
}
.article-hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--cs-gutter);
  padding-block: 26px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: 48px;
  align-items: center;
}
.article-hero-text {
  min-width: 0;
}
.back-link {
  /* Its own full-width row above the title/image pair, so it stays at the top
     of the hero at every width instead of being pulled into a column. */
  grid-column: 1 / -1;
  width: fit-content;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cs-blue-ink);
  margin-bottom: 4px;
}
.article-eyebrow {
  display: inline-block;
  background: var(--cs-navy);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
}
.article-h1 {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -1.2px;
  color: var(--cs-navy);
  margin: 18px 0 0;
  text-wrap: balance;
}
.article-deck {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--cs-ink-2);
  margin: 18px 0 0;
}
.article-byline {
  font-size: 14px;
  color: var(--cs-muted);
  margin: 22px 0 0;
}

/* ---------- Two-column body ---------- */
.article-layout {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--cs-gutter);
  padding-block: 40px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
}
.article-main {
  min-width: 0;
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: 18px;
  padding: 36px 40px 40px;
  box-shadow: 0 1px 3px rgba(6, 40, 70, 0.04);
}
.article-hero-pic {
  display: block;
  min-width: 0;
}
.article-hero-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  align-self: center;
}

/* ---------- Short answer ---------- */
/* A quiet callout, not a shout: pale tint with a purple rule, sitting at the
   top of the article column where the reader meets it first. */
.article-short-answer {
  background: var(--cs-tint-purple);
  border-left: 4px solid var(--cs-purple);
  border-radius: 0 14px 14px 0;
  padding: 24px 28px 26px;
}
.article-short-answer-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--cs-purple);
  margin-bottom: 12px;
}
.article-short-answer p {
  margin: 0;
  font-size: 18.5px;
  line-height: 1.6;
  font-weight: 600;
  color: var(--cs-navy);
}
.article-short-answer p + p {
  /* A full line of separation: at 14px the paragraphs read as one block. */
  margin-top: 20px;
  font-size: 16.5px;
  line-height: 1.68;
  font-weight: 400;
  color: var(--cs-ink-2);
}
.article-page .article-short-answer a {
  color: var(--cs-blue-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Article prose ---------- */
.article-body {
  margin-top: 0;
}
.article-body > .article-h2:first-child {
  margin-top: 40px;
}
.article-body-close > .article-h2:first-child {
  margin-top: 52px;
}
.article-h2 {
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--cs-navy);
  margin: 52px 0 0;
  scroll-margin-top: var(--cs-header);
  text-wrap: balance;
}
.article-body > .article-h2::before {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 2px;
  background: var(--cs-purple);
  margin-bottom: 16px;
}
.article-body p,
.article-page .article-body li {
  font-size: 17px;
  line-height: 1.72;
  color: var(--cs-ink);
}
.article-body p {
  margin: 18px 0 0;
  max-width: 68ch;
}
.article-body strong {
  color: var(--cs-navy);
  font-weight: 700;
}
.article-body em {
  color: var(--cs-ink-2);
}

/* A paragraph of short example lines, lifted out of <br> runs. */
.article-lines {
  margin: 22px 0 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--cs-tint-purple);
  list-style: none;
  display: grid;
  gap: 9px;
  max-width: 60ch;
}
.article-lines li {
  position: relative;
  font-size: 17px;
  line-height: 1.6;
  font-style: italic;
  color: var(--cs-ink-2);
}
.article-lines li::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cs-purple);
}

/* ---------- Checklist card ---------- */
.article-checklist {
  background: var(--cs-cream-2);
  border-radius: 14px;
  padding: 24px 28px;
  margin: 32px 0 0;
  scroll-margin-top: var(--cs-header);
}
.article-checklist-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--cs-purple);
}
.article-checklist-title {
  font-size: 19px;
  font-weight: 800;
  color: var(--cs-navy);
  margin: 8px 0 16px;
}
.article-checklist ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.article-checklist li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--cs-ink);
}
.article-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--cs-teal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z' fill='%23fff'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* ---------- Customer review ---------- */
.article-review {
  margin: 36px 0 0;
}
.article-review-card {
  position: relative;
  background: var(--cs-cream-2);
  border-radius: 16px;
  padding: 40px 36px 30px;
  margin-top: 22px;
}
.article-review-quote {
  position: absolute;
  top: -22px;
  left: 26px;
  font-size: 92px;
  line-height: 1;
  font-weight: 800;
  color: var(--cs-orange);
  font-family: Georgia, 'Times New Roman', serif;
}
.article-review blockquote {
  margin: 0;
  font-size: clamp(20px, 2.3vw, 25px);
  line-height: 1.42;
  font-weight: 700;
  color: var(--cs-navy);
  text-wrap: balance;
}
.article-review-attr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(6, 40, 70, 0.08);
  font-size: 14.5px;
}
.article-review-name {
  font-weight: 800;
  color: var(--cs-navy);
}
.article-review-stars {
  color: var(--cs-orange);
  font-size: 14px;
  letter-spacing: 1px;
}
.article-review-source {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--cs-ink-2) !important;
  text-decoration: none;
}
.article-review-source:hover {
  color: var(--cs-navy) !important;
  text-decoration: underline;
}
.tp-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #00b67a;
  color: #fff;
  font-size: 12px;
  line-height: 1;
}

/* ---------- Recommendation card ---------- */
/* Compact by design: the head row carries the identity, rating and badge
   together, and the stats run inline rather than as a three-cell block. */
.article-rec {
  border: 1px solid var(--cs-line);
  border-top: 4px solid var(--cs-navy);
  border-radius: 16px;
  background: #fff;
  padding: 22px 24px;
  margin: 40px 0 0;
  scroll-margin-top: var(--cs-header);
  box-shadow: 0 3px 14px rgba(6, 40, 70, 0.07);
}
.article-rec-head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.article-rec-mark {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 11px;
  background: var(--cs-navy);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-rec-id {
  margin-right: auto;
}
.article-rec-name {
  font-size: 20px;
  font-weight: 800;
  color: var(--cs-navy);
  margin: 0;
}
.article-rec-tagline {
  font-size: 13.5px;
  color: var(--cs-muted);
  margin: 2px 0 0;
}
.article-rec-verdict-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.article-rec-score-num {
  font-size: 27px;
  font-weight: 800;
  color: var(--cs-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  line-height: 1;
}
.article-rec-score-den {
  font-size: 13px;
  color: var(--cs-muted);
  margin-left: -3px;
}
.article-rec-stars {
  color: var(--cs-orange);
  font-size: 14px;
  letter-spacing: 1px;
}
.article-rec-badge {
  display: inline-block;
  background: var(--cs-orange);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.article-rec-verdict {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--cs-ink);
  margin: 14px 0 0;
}
.article-rec-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.article-rec-stats li {
  background: var(--cs-cream-2);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13.5px;
  color: var(--cs-ink-2);
}
.article-rec-stats b {
  color: var(--cs-navy);
  font-variant-numeric: tabular-nums;
}
.article-rec-claim {
  /* The price and the button are one object: same panel, same border, button
     immediately under the price it applies to. */
  margin-top: 18px;
  padding: 16px 18px 18px;
  border: 1px solid #f6c9bf;
  border-radius: 12px;
  background: var(--cs-tint-orange);
  text-align: center;
}
.article-rec-offer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 0 0 14px;
  font-size: 16px;
  color: var(--cs-navy);
}
.article-rec-offer-flag {
  background: var(--cs-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
}
.article-rec-offer-price {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.article-rec-offer s {
  color: var(--cs-muted);
  text-decoration-thickness: 1px;
}
.article-rec-claim .article-rec-cta {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}
.article-rec-claim-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #a8563f;
}
.article-rec-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
}
.article-rec-cta {
  display: inline-block;
  background: var(--cs-purple);
  color: #fff !important;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
}
.article-rec-cta:hover {
  background: #4a3aa0;
  color: #fff !important;
  text-decoration: none;
}
.article-rec-cta-2 {
  display: inline-block;
  border: 1.5px solid var(--cs-blue);
  color: var(--cs-blue-ink);
  font-size: 15px;
  font-weight: 700;
  padding: 10.5px 20px;
  border-radius: 999px;
  text-decoration: none;
}
.article-rec-cta-2:hover {
  background: var(--cs-tint-blue);
  text-decoration: none;
}
.article-rec-disclosure {
  font-size: 12.5px;
  color: var(--cs-muted-2);
  margin-left: auto;
}

/* ---------- Sidebar ---------- */
.article-side {
  min-width: 0;
  /* The layout is align-items:start, which collapses this column to its own
     content height and leaves the sticky child no room to travel. Stretching
     it to the row height is what makes the rail actually stick. */
  align-self: stretch;
}
.article-side-sticky {
  position: sticky;
  top: var(--cs-header);
  display: grid;
  gap: 20px;
}
.article-toc {
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: 14px;
  padding: 20px 22px;
}
.article-toc-label {
  /* A heading over a list, not an eyebrow on a block of content, so it is set
     larger than its items rather than smaller. Sentence case because uppercase
     at this size reads as shouting. */
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--cs-blue-ink);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cs-line-2);
}
.article-toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 11px;
}
.article-toc a {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--cs-navy);
  text-decoration: none;
}
.article-toc a:hover {
  color: var(--cs-blue-ink);
  text-decoration: underline;
}
.article-toc a[href='#our-top-pick'] {
  color: var(--cs-purple);
}
.article-toc a[href='#our-top-pick']:hover {
  color: var(--cs-purple);
}
/* Deliberately not the editorial card: no badge, no score, softer edges and
   a tinted ground, so a labelled ad reads as an ad rather than as a second
   copy of the recommendation. */
/* The advertiser's own look: white inside so it does not sit beige on beige,
   a coral-to-purple border sweep, and the red call to action. Nothing else on
   the page uses either, which is what keeps it from reading as editorial. */
.article-side-card {
  position: relative;
  border: 2px solid transparent;
  border-radius: 20px;
  padding: 22px 20px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #ff8a6b 0%, #d98aa8 45%, var(--cs-purple) 100%) border-box;
}
.article-side-ad {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #f0f2f4;
  color: var(--cs-muted-2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
}
.article-side-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.article-side-mark {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 9px;
  background: var(--cs-navy);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.article-side-card-name {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--cs-navy);
}
.article-side-pitch {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--cs-ink-2);
}
.article-side-facts {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--cs-muted);
}
.article-side-facts b {
  color: var(--cs-ink);
  font-weight: 700;
}
.article-side-cta {
  --ad-red: #ee2200;
  /* Sized to its label and centred, not stretched: the card goes full width
     below the article on narrow screens, and a button that follows it looks
     enormous. */
  display: block;
  width: fit-content;
  max-width: 100%;
  text-align: center;
  margin: 20px auto 0;
  padding: 14px 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff3b1f 0%, var(--ad-red) 55%, #d81c00 100%);
  font-size: 15.5px;
  font-weight: 800;
  color: #fff !important;
  letter-spacing: 0.2px;
  text-decoration: none;
}
.article-side-cta:hover {
  background: linear-gradient(135deg, #ff2e10 0%, #dd1f00 55%, #c51900 100%);
  color: #fff !important;
  text-decoration: none;
}

/* ---------- FAQ ---------- */
.article-faq-section {
  margin-top: 48px;
  scroll-margin-top: var(--cs-header);
}
.article-faq-list {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.article-faq-item {
  border: 1px solid var(--cs-line);
  border-radius: 14px;
  background: #fff;
}
.article-faq-item[open] {
  border-color: var(--cs-purple);
}
.article-faq-item summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  list-style: none;
}
.article-faq-item summary::-webkit-details-marker {
  display: none;
}
.article-faq-item summary:focus-visible {
  outline: 2px solid var(--cs-purple);
  outline-offset: 2px;
  border-radius: 14px;
}
.article-faq-item h3 {
  flex: 1;
  font-size: 18px;
  font-weight: 800;
  color: var(--cs-navy);
  margin: 0;
  line-height: 1.35;
}
.article-faq-icon {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cs-tint-purple);
}
.article-faq-icon::before,
.article-faq-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--cs-purple);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}
.article-faq-icon::before {
  width: 11px;
  height: 2px;
}
.article-faq-icon::after {
  width: 2px;
  height: 11px;
  transition: transform 0.18s ease;
}
.article-faq-item[open] .article-faq-icon {
  background: var(--cs-purple);
}
.article-faq-item[open] .article-faq-icon::before {
  background: #fff;
}
.article-faq-item[open] .article-faq-icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}
.article-faq-a {
  padding: 0 24px 22px;
}
.article-faq-item p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--cs-ink);
  margin: 0;
  max-width: 68ch;
}
@media (prefers-reduced-motion: reduce) {
  .article-faq-icon::after {
    transition: none;
  }
}

/* ---------- Sources ---------- */
.article-sources {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid var(--cs-line);
}
.article-sources h3 {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cs-purple);
  margin: 0 0 14px;
}
.article-sources ul {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 10px;
}
.article-sources li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cs-muted);
}

/* ---------- Related guides ---------- */
.more-guides {
  /* Same cream as the page, lifted by a faint dot field so the closing zone
     reads as its own section without another block of colour. */
  background:
    radial-gradient(circle at center, rgba(87, 70, 178, 0.07) 1px, transparent 1.4px)
      0 0 / 22px 22px,
    var(--cs-cream);
  border-top: 1px solid var(--cs-line);
  margin-top: 56px;
}
.more-guides-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--cs-gutter);
  padding-block: 44px 52px;
}
.more-guides .article-eyebrow {
  background: var(--cs-tint-purple);
  color: var(--cs-purple);
}
.more-guides-label {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--cs-navy);
  margin: 14px 0 24px;
}
.more-guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.more-guide-card {
  display: block;
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: 14px;
  padding: 22px 24px;
  text-decoration: none;
}
.more-guide-card:hover {
  border-color: var(--cs-blue);
  box-shadow: 0 3px 12px rgba(6, 40, 70, 0.07);
}
.more-guide-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--cs-tint-navy);
  color: var(--cs-navy);
}
.more-guide-tag.tag-thank-you-songs {
  background: var(--cs-tint-purple);
  color: var(--cs-purple);
}
.more-guide-tag.tag-tribute-songs {
  background: var(--cs-tint-orange);
  color: #c22d16;
}
.more-guide-title {
  display: block;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 800;
  color: var(--cs-navy);
  margin-top: 14px;
}
.more-guide-desc {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--cs-muted);
  margin-top: 8px;
}

/* ---------- Article pages: narrow ---------- */
@media (max-width: 900px) {
  .article-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-block: 22px 40px;
  }
  .article-hero-img {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 1000px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .article-main {
    padding: 30px 28px 34px;
  }
  .article-side-sticky {
    position: static;
  }
  .article-toc {
    display: none;
  }
}
@media (max-width: 620px) {
  .article-page {
    --cs-gutter: 0px;
  }
  .article-hero-inner,
  .article-layout,
  .more-guides-inner {
    padding-inline: 18px;
  }
  /* Edge to edge on a phone: a card with side padding wastes measure. */
  .article-main {
    border-radius: 0;
    border-inline: 0;
    padding: 26px 18px 30px;
    margin-inline: -18px;
  }
  .article-review-card {
    padding: 34px 20px 24px;
  }
  .article-review-quote {
    font-size: 72px;
    left: 16px;
  }
  .article-hero-inner {
    padding-block: 20px 32px;
  }
  .article-short-answer {
    padding: 20px 22px 22px;
  }
  .article-checklist,
  .article-rec {
    padding: 20px;
  }
  .article-rec-disclosure {
    margin-left: 0;
  }
  .article-faq-item summary {
    padding: 18px 20px;
    gap: 12px;
  }
  .article-faq-a {
    padding: 0 20px 18px;
  }
  .article-rec-stats {
    grid-template-columns: 1fr;
  }
  .article-rec-stats > div + div {
    border-left: 0;
    border-top: 1px solid var(--cs-line-2);
    padding-top: 14px;
    margin-top: 14px;
  }
  .article-rec-actions .article-rec-cta,
  .article-rec-actions .article-rec-cta-2 {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ---------- Responsive: ≤880px ---------- */
@media (max-width: 880px) {
  .fs-h1 {
    font-size: 34px;
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .fs-hero {
    text-align: left;
  }
  .fs-cta-wrap {
    margin: 22px 0 6px;
    align-items: flex-start;
  }
  .fs-hero-cta {
    padding: 16px 22px;
    font-size: 16px;
    width: 100%;
    max-width: 380px;
    justify-content: center;
    box-sizing: border-box;
  }
  .fs-disclosure {
    text-align: left;
    margin: 18px 0 0;
  }
  .fs-hs-top {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
  .rc-grid {
    grid-template-columns: 1fr;
  }
  .rc-left {
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 28px 20px 22px;
  }
  .rc-right {
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .rc-first .rc-left {
    order: 1;
  }
  .rc-first .rc-right {
    order: 2;
    border-top: none;
    padding: 22px 20px 26px;
  }
  .rc-first .rc-mid {
    order: 3;
  }
  .rc-mid {
    padding: 24px 20px;
  }
  .fs-proscons {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .fs-promo {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .fs-h2 {
    font-size: 24px;
  }
  .fs-faq {
    grid-template-columns: 1fr;
  }
  .fs-method-grid {
    grid-template-columns: 1fr 1fr;
  }
  .fs-ctable th,
  .fs-ctable td {
    padding: 12px 12px;
    font-size: 13px;
  }
  .fs-related {
    grid-template-columns: 1fr;
  }
  .fs-inline-ad {
    grid-template-columns: 80px 1fr;
    gap: 14px;
    padding: 18px;
  }
  .fs-inline-ad .fs-mark {
    width: 80px;
    height: 80px;
  }
  .fs-ad-ctawrap {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 8px;
    gap: 12px;
  }
  .fs-modal {
    grid-template-columns: 1fr;
    max-width: 440px;
  }
  .fs-modal-left {
    min-height: 200px;
    padding: 28px 24px;
  }
  .fs-modal-right {
    padding: 28px 24px;
  }
  .fs-sb-meta {
    display: none;
  }
  .fs-footer {
    padding-bottom: 130px;
  }
  .article-h1 {
    font-size: 29px;
  }
  .article-h2 {
    font-size: 24px;
    margin-top: 38px;
  }
  .article-body {
    font-size: 17px;
  }
  .article-short-answer,
  .article-review,
  .article-rec,
  .article-faq-item {
    padding: 20px;
  }
  .more-guides-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Responsive: ≤480px ---------- */
@media (max-width: 480px) {
  .fs-h1 {
    font-size: 28px;
    letter-spacing: -0.6px;
  }
  .fs-hero {
    padding: 22px 14px 16px;
  }
  .wrap {
    padding: 0 14px;
  }
  .rc-left {
    padding: 22px 16px 18px;
  }
  .rc-mid {
    padding: 20px 16px;
  }
  .rc-right {
    padding: 20px 16px;
  }
  .fs-score-num {
    font-size: 44px;
    letter-spacing: -1.5px;
  }
  .fs-promo {
    padding: 20px 18px;
    gap: 16px;
  }
  .fs-section {
    margin-top: 40px;
  }
  .fs-h2 {
    font-size: 21px;
  }
  .fs-guide {
    padding: 22px 18px;
  }
  .fs-method {
    padding: 22px 18px;
  }
  .fs-ctable th,
  .fs-ctable td {
    padding: 10px 8px;
    font-size: 12.5px;
  }
  .fs-lf {
    padding: 20px 18px;
  }
  .fs-inline-ad {
    grid-template-columns: 64px 1fr;
    padding: 14px;
    gap: 12px;
  }
  .fs-inline-ad .fs-mark {
    width: 64px;
    height: 64px;
  }
  .fs-modal-left {
    padding: 22px 18px;
    min-height: 170px;
  }
  .fs-modal-right {
    padding: 22px 18px;
  }
  .modal-wordmark {
    font-size: 40px;
  }
}

/* Inline ForeverSongs mentions. Where the sentence reads as prose the name is
   underlined so it looks clickable without recolouring the paragraph; in a
   column label or a footnote a link would look out of place, so .fs-plain is
   clickable and visually identical to the text around it. */
.fs-inline {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(109, 40, 217, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.fs-inline:hover {
  color: var(--accent-dark);
  text-decoration-color: currentColor;
}
.fs-plain,
.fs-plain:hover {
  color: inherit;
  text-decoration: none;
}