/* ============================================================
   CustomSongGuide.com: two-service comparison components
   ============================================================
   For "X vs. ForeverSongs" pages where both sides are done-for-you
   services, first used on ForeverSongs vs. Custom Song Gift,
   September 2026. Loads after /styles.css, guide-blocks.css and
   competitor-review.css, and uses their --cs-* tokens.

     .cd-hero      16:9 hero art shown whole (brand names sit at the edges)
     .cd-paths     the two processes, one quiet line each
     .cd-duo       two equal figures side by side (price, delivery)
     .cd-volume    review volume, drawn to scale
     .cd-glance    the at-a-glance comparison table
     .cd-fit       the two "choose X if" options, equal weight
   ============================================================ */

/* ---- hero: show the whole image ---- */
.cd-hero .article-hero-img {
  aspect-ratio: 16 / 9;
}
@media (max-width: 900px) {
  .cd-hero .article-hero-img {
    aspect-ratio: 16 / 9;
  }
}

/* ---- the two processes ---- */
.cd-paths {
  margin: 26px 0 0;
  border-block: 1px solid var(--cs-line);
}
.cd-path {
  display: grid;
  grid-template-columns: 11.5em minmax(0, 1fr);
  gap: 6px 18px;
  align-items: baseline;
  padding: 14px 0;
}
.cd-path + .cd-path {
  border-top: 1px solid var(--cs-line-2);
}
.cd-path-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--cs-navy);
}
.cr-page .cd-path ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  max-width: none;
}
.cr-page .cd-path li {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cs-ink-2);
}
.cd-path li + li::before {
  content: '\2192';
  color: var(--cs-purple);
  padding: 0 12px;
}
.cr-page .cd-path li.cd-key {
  color: var(--cs-purple);
}

/* ---- two equal figures ---- */
.cd-duo {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--cs-navy);
  border-bottom: 1px solid var(--cs-line);
}
.cd-duo > div {
  padding: 16px 16px 16px 0;
}
.cd-duo > div + div {
  padding-left: 20px;
  border-left: 1px solid var(--cs-line);
}
.cd-duo-k {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cs-muted);
}
.cd-duo-v {
  display: block;
  margin-top: 8px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.05;
  color: var(--cs-navy);
  font-variant-numeric: tabular-nums;
}
.cd-duo-s {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--cs-ink-2);
}

/* ---- review volume, to scale ---- */
.cd-volume {
  margin: 24px 0 0;
  padding: 16px 0;
  border-top: 2px solid var(--cs-navy);
  border-bottom: 1px solid var(--cs-line);
  display: grid;
  gap: 14px;
}
.cd-vol-row {
  display: grid;
  grid-template-columns: 10.5em minmax(0, 1fr);
  gap: 4px 16px;
  align-items: center;
}
.cd-vol-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--cs-navy);
}
.cd-vol-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.cd-vol-bar i {
  display: block;
  height: 12px;
  min-width: 4px;
  border-radius: 999px;
  background: var(--cs-navy);
}
.cd-vol-num {
  flex: none;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--cs-ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cd-vol-note {
  font-size: 12.5px;
  color: var(--cs-muted);
}

/* ---- at a glance ---- */
.cd-glance {
  margin: 24px 0 0;
  border: 1px solid var(--cs-line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.cd-glance table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 15px;
  line-height: 1.45;
  color: var(--cs-ink);
}
.cd-glance th,
.cd-glance td {
  text-align: left;
  vertical-align: top;
  padding: 14px 18px;
  border-top: 1px solid var(--cs-line);
}
.cd-glance col.cd-col-label {
  width: 30%;
}
.cd-glance thead th {
  border-top: 0;
  padding-top: 18px;
  padding-bottom: 16px;
  background: var(--cs-tint-navy);
  vertical-align: bottom;
}
.cd-glance thead th + th {
  border-left: 1px solid var(--cs-line);
}
.cd-glance-brand {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--cs-navy);
  line-height: 1.2;
}
.cd-glance-flow {
  display: inline-block;
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cs-purple);
  background: #fff;
  border: 1px solid #ddd6f5;
  border-radius: 999px;
  padding: 5px 10px;
}
.cd-glance tbody th {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--cs-muted);
  padding-top: 16px;
}
.cd-glance tbody td {
  border-left: 1px solid var(--cs-line);
  font-weight: 600;
  color: var(--cs-navy);
}
/* The row that decides it. */
.cd-glance tr.cd-key th,
.cd-glance tr.cd-key td {
  background: var(--cs-tint-purple);
}
.cd-glance tr.cd-key th {
  color: var(--cs-purple);
}

/* ---- which fits you: two equal options ---- */
.cd-fit {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.cd-fit-card {
  border: 1px solid var(--cs-line);
  border-top: 3px solid var(--cs-navy);
  border-radius: 14px;
  background: #fff;
  padding: 20px 22px 22px;
}
.cr-page .cd-fit-card h3 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--cs-navy);
}
.cr-page .article-body .cd-fit-card p {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  max-width: none;
}
.cd-fit-tag {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cs-purple);
}

/* ---- Our Pick: disclosure above the verdict ---- */
.cr-page .article-body p.cd-pick-disc {
  margin-top: 10px;
  font-size: 13px;
  font-style: italic;
  color: var(--cs-muted);
}

/* The proof line here is a full sentence, so let it wrap at every width
   (competitor-review.css keeps its short version on one line). */
.cr-page .article-body .cd-pick p.cr-proof {
  white-space: normal;
}
@media (max-width: 520px) {
  .cr-page .article-body .cd-pick p.cr-proof {
    white-space: normal;
  }
}

/* ---- narrow ---- */
@media (max-width: 760px) {
  .cd-path {
    grid-template-columns: minmax(0, 1fr);
  }
  .cd-duo-v {
    font-size: 24px;
  }
  .cd-duo > div + div {
    padding-left: 14px;
  }
  .cd-vol-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .cd-fit {
    grid-template-columns: minmax(0, 1fr);
  }
  .cd-glance table {
    font-size: 14px;
  }
  .cd-glance th,
  .cd-glance td {
    padding: 12px 10px;
  }
  .cd-glance col.cd-col-label {
    width: 28%;
  }
  .cd-glance tbody th {
    font-size: 10.5px;
    letter-spacing: 0.4px;
  }
  .cd-glance-brand {
    font-size: 15px;
  }
  .cd-glance-flow {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: 0.3px;
    line-height: 1.35;
    padding: 0;
    border: 0;
    background: none;
  }
}