/* ============================================================
   CustomSongGuide.com — guide blocks
   ============================================================
   The live guide design in /styles.css supplies the page: the hero,
   the short answer, prose, the checklist, the customer review, the
   Editor's Choice card, the FAQ, sources, related guides, the sticky
   bar and the promo modal. This file adds only the four things the
   editorial handoff needs that the live design has no component for,
   each built from the live design's own --cs-* tokens so it reads as
   part of that page rather than a bolt-on:

     .gb-solo    one column, because the right rail is removed
     .gb-rel     the relationship grid and the DIY-vs-service compare
     .gb-steps   the numbered buying criteria
     .gb-ad      the rail ad card, laid out wide and in-flow

   Loads after /styles.css. Everything is prefixed `gb-`, so it cannot
   reach the homepage or any other guide.
   ============================================================ */

/* One column. The rail held the "In this guide" nav and the ad card;
   the ad moves in-flow as .gb-ad below, and the nav goes with the rail. */
.article-page .gb-solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 880px;
  gap: 0;
}

/* ---- shared icon system ---- */
/* Filled Material Design Icons (Apache 2.0), inlined as 24px SVG so they
   take their colour from currentColor and cost no extra request. */
.gb-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gb-accent-tint, var(--cs-tint-purple));
  color: var(--gb-accent, var(--cs-purple));
}
.gb-ico svg {
  display: block;
  width: 20px;
  height: 20px;
}
/* Solid glyphs carry no stroke, so they need a little more of the chip
   than the line icons do to read at the same weight. */
.gb-ico-solid svg {
  width: 20px;
  height: 20px;
}

/* ---- relationship grid ---- */
/* Each card carries its own accent. The colours are decoration, not
   identity: every card names itself in words, so nothing is lost if a
   reader cannot separate the blue from the violet. */
.gb-rel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0 8px;
  border: 0;
}
.gb-rel > div {
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: 12px;
  padding: 14px 16px 16px;
}
.gb-rel > div:nth-child(1) { --gb-accent: #0e9a80; --gb-accent-tint: #e2f2ef; }
.gb-rel > div:nth-child(2) { --gb-accent: #1f6fe0; --gb-accent-tint: #e6eefc; }
.gb-rel > div:nth-child(3) { --gb-accent: #7b2fd0; --gb-accent-tint: #efe7fb; }
.gb-rel > div:nth-child(4) { --gb-accent: #c02563; --gb-accent-tint: #fae7ee; }
.article-page .gb-rel :where(p) {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--cs-ink);
  margin: 0;
}
.gb-rel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.article-page .gb-rel-who {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.1px;
  color: var(--gb-accent, var(--cs-navy));
}
/* ---- DIY vs a service ---- */
/* Two sides, deliberately unequal: the recommendation is the one the page
   argues for, so it carries the tint and the edge. */
.gb-vs > div:nth-child(1),
.gb-vs > div:nth-child(2) {
  --gb-accent: var(--cs-navy);
  --gb-accent-tint: var(--cs-tint-navy);
}
.gb-vs > div:nth-child(2) {
  --gb-accent: var(--cs-purple);
  background: var(--cs-tint-purple);
  border-color: transparent;
  box-shadow: inset 3px 0 0 var(--cs-purple);
}
.gb-vs > div:nth-child(2) .gb-ico {
  background: #fff;
}

/* ---- numbered buying criteria ---- */
/* Two up rather than six full-width rows: same copy, about half the
   scroll, and the icon sits inline with the title so a phone gains
   nothing in height. */
.gb-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0 8px;
  padding: 0;
  list-style: none;
}
.gb-steps li {
  background: #fff;
  border: 1px solid var(--cs-line);
  border-radius: 12px;
  padding: 14px 16px 16px;
  margin: 0;
}
.article-page .gb-steps :where(p) {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--cs-ink);
  margin: 0;
}
.gb-steps-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.article-page .gb-steps-what {
  margin: 0;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -0.1px;
  color: var(--cs-navy);
}
/* The ordinal is real text in the markup, not a CSS counter: the copy
   writes it out and generated content never reaches the crawlable text. */
.article-page .gb-steps-num {
  margin-left: auto;
  padding-left: 10px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--cs-muted-2);
}
/* ---- the ad, in flow ---- */
/* A faithful port of the Editor's Choice card from the paused homepage
   redesign on blog-launch-review. HANDOFF.md records that its shape took
   ten rounds and is settled, so this keeps the anatomy exactly: verdict
   on the left, offer panel on the right, trust strip across the bottom.
   Gold is for Trustpilot and the badge, navy for our own score, and the
   one red is the button. */
.gb-ad {
  position: relative;
  border-radius: 22px;
  margin: 38px 0;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(132deg, #ff6b45 0%, #eb3419 26%, #7b5ce8 74%, #5b3fd6 100%)
      border-box;
  border: 2px solid transparent;
  box-shadow:
    0 2px 4px rgba(6, 40, 70, 0.05),
    0 18px 46px rgba(6, 40, 70, 0.12);
}
.gb-ad-inner {
  padding: 14px 26px 0;
  overflow: hidden;
  border-radius: 20px;
}
.gb-ad-tag {
  position: absolute;
  top: 12px;
  right: 14px;
  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;
}
.gb-ad-eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cs-purple);
  margin-bottom: 8px;
}
/* Two columns, one job each: the verdict, then the offer. */
.gb-ad-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 268px;
  gap: 20px 30px;
  align-items: stretch;
  margin-top: 10px;
}
.gb-ad-main {
  display: flex;
  flex-direction: column;
  gap: 11px;
  justify-content: center;
}
.gb-ad-idrow {
  display: flex;
  align-items: center;
  gap: 15px;
}
.gb-ad-logo {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #fff;
  border: 1px solid var(--cs-line);
  padding: 2px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(6, 40, 70, 0.1);
}
.gb-ad-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.gb-ad-namerow {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
}
.article-page .gb-ad-name,
.article-page .gb-ad-name a {
  font-size: 25px;
  font-weight: 800;
  color: var(--cs-navy) !important;
  letter-spacing: -0.6px;
  line-height: 1.1;
  text-decoration: none;
}
.gb-ad-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1.35;
  background: linear-gradient(135deg, #ffd84d 0%, #ffc800 100%);
  color: #4a3200;
  box-shadow: 0 2px 8px rgba(255, 200, 0, 0.36);
}
.gb-ad-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--cs-muted);
}
/* Our own score is out of 10 on a navy chip, never stars: gold means
   Trustpilot and nothing else. */
.gb-ad-score {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  background: var(--cs-navy);
  color: #fff;
  border-radius: 8px;
  padding: 4px 10px 5px;
  line-height: 1;
}
.gb-ad-score b {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.gb-ad-den {
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
}
.gb-ad-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  align-content: center;
}
.article-page .gb-ad-bullets li {
  position: relative;
  padding-left: 29px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--cs-ink-2);
}
.gb-ad-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(28, 158, 142, 0.13);
}
.gb-ad-bullets li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 19px;
  height: 19px;
  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'/%3E%3C/svg%3E") center / 13px 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'/%3E%3C/svg%3E") center / 13px no-repeat;
}
/* Price, then button. Two elements, one width, nothing left to balance. */
.gb-ad-offer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--cs-line);
  border-radius: 15px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfafe 100%);
  box-shadow:
    0 1px 2px rgba(6, 40, 70, 0.04),
    0 10px 26px rgba(6, 40, 70, 0.07);
}
.article-page .gb-ad-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  margin: 0;
  color: var(--cs-muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.article-page .gb-ad-price b {
  color: var(--cs-navy);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -1.4px;
}
.article-page .gb-ad-price s {
  font-size: 16px;
}
.gb-ad-from {
  font-size: 13px;
  font-weight: 600;
}
/* Capped, not full width: the offer panel goes full width on a phone, and
   a red pill that widens with it is a slab of red. 262px at every width. */
.article-page .gb-ad-cta {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 262px;
  margin-inline: auto;
  text-align: center;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  white-space: nowrap;
  text-decoration: none;
  background: linear-gradient(135deg, #ff5c3d 0%, #eb3419 62%);
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(235, 52, 25, 0.26);
}
.article-page .gb-ad-cta:hover {
  filter: brightness(0.95);
  color: #fff !important;
}
/* Full-bleed strip: it closes the card instead of floating inside it. */
.gb-ad-trust {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
  margin: 14px -26px 0;
  padding: 9px 26px;
  background: #f7f9fb;
  border-top: 1px solid var(--cs-line-2);
  font-size: 13.5px;
  color: var(--cs-ink-2);
}
.gb-ad-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  color: var(--cs-navy);
}
.gb-ad-stars {
  color: #ffc800;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 1px rgba(6, 40, 70, 0.1);
}
.gb-ad-sep {
  color: #c6d0da;
  font-weight: 400;
}

@media (max-width: 680px) {
  /* Two columns at phone width leave each item about twenty characters. */
  .gb-rel,
  .gb-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .gb-ad-inner {
    padding: 14px 22px 0;
  }
  .gb-ad-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  /* The name wraps at this width, so the badge drops below it and the
     logo would otherwise float against the middle of a tall block. */
  .gb-ad-idrow {
    align-items: flex-start;
    gap: 13px;
  }
  .article-page .gb-ad-name,
  .article-page .gb-ad-name a {
    font-size: 21px;
  }
  .gb-ad-namerow {
    gap: 9px;
  }
  .gb-ad-meta {
    margin-top: 4px;
  }
  .gb-ad-trust {
    margin-inline: -22px;
    padding-inline: 22px;
    gap: 6px;
  }
  .gb-ad-sep {
    display: none;
  }
  .gb-ad-trust-item {
    flex-basis: 100%;
  }
}

/* ---- comparison table ---- */
/* Scrolls rather than shrinking: at phone width a five-column table either
   scrolls or becomes unreadable, and the site has no other table pattern. */
.gb-table-wrap {
  margin: 26px 0 8px;
  overflow-x: auto;
  border: 1px solid var(--cs-line);
  border-radius: 14px;
  background: #fff;
}
.gb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  min-width: 540px;
}
.article-page .gb-table th,
.article-page .gb-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--cs-line-2);
  line-height: 1.45;
}
.article-page .gb-table thead th {
  background: var(--cs-cream-2);
  color: var(--cs-navy);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.article-page .gb-table tbody th {
  color: var(--cs-navy);
  font-weight: 700;
  width: 34%;
}
.article-page .gb-table td {
  color: var(--cs-ink);
}
.gb-table tbody tr:last-child th,
.gb-table tbody tr:last-child td {
  border-bottom: 0;
}
/* The recommended column, so a scan down the table lands somewhere. */
.article-page .gb-table thead th:nth-child(2),
.article-page .gb-table tbody td:nth-child(2) {
  background: rgba(28, 158, 142, 0.06);
  font-weight: 700;
  color: var(--cs-navy);
}

/* Inline brand mentions. Every "ForeverSongs" in the prose is a link now, so
   these have to read as clickable without turning the page purple or fighting
   the per-card accent colours: they inherit the surrounding colour and are
   marked by the underline alone, which also keeps the cue non-colour-only. */
.article-page .fs-inline {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(109, 40, 217, 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.article-page .fs-inline:hover {
  color: var(--accent-dark);
  text-decoration-color: currentColor;
}