/* ============================================================
   Delancey Street — Hub / Listicle / Pillar Pages
   Owned by T6 (page-best-business-debt-settlement-companies.php,
                 page-business-debt-resolution.php,
                 page-business-debt-settlement.php,
                 page-how-does-business-debt-settlement-work.php)

   Patterns lifted from snapshots in ds-import-data/snapshots/.
   Colour values come from tokens.css; never hard-code hex.
   ============================================================ */

/* ============================================================
   Hero — directory variant (max-width 1280, paper bg, dotted)
   ============================================================ */
.ds-hub-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 60px 72px;
  background: #fff;
  border-bottom: 1px solid var(--ds-line);
}
.ds-hub-hero__inner {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
}
.ds-hub-hero__crumbs {
  font-size: 12px;
  color: var(--ds-muted);
  margin-bottom: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ds-hub-hero__crumbs a { color: var(--ds-muted); text-decoration: none; }
.ds-hub-hero__crumbs a:hover { color: var(--ds-cyan); }
.ds-hub-hero__crumbs .sep { padding: 0 8px; }
.ds-hub-hero__kicker {
  font-size: 13px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ds-hub-hero h1 {
  font-size: clamp(44px, 6.4vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: 900;
  margin: 0;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 1100px;
  color: var(--ds-ink);
}
.ds-hub-hero h1 .ds-emph { color: var(--ds-cyan); }
.ds-hub-hero__sub {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ds-ink-3);
  margin-top: 28px;
  font-weight: 500;
  max-width: 780px;
}
.ds-hub-hero__cta {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}
/* dotted Delancey pattern in upper-right of hero */
.ds-hub-hero__dots {
  position: absolute;
  top: -40px;
  right: -60px;
  width: 480px;
  height: 340px;
  opacity: 0.07;
  pointer-events: none;
  background-image: radial-gradient(var(--ds-ink) 1px, transparent 1px);
  background-size: 14px 14px;
  background-position: 0 0;
  border-radius: 12px;
  transform: rotate(15deg);
}

/* ============================================================
   Search bar — appears on master listicle hub
   ============================================================ */
.ds-hub-search {
  padding: 40px 60px 0;
  background: #fff;
}
.ds-hub-search__inner {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
}
.ds-hub-search__input {
  width: 100%;
  height: 64px;
  border: 1px solid var(--ds-line);
  border-radius: 14px;
  padding: 0 64px 0 28px;
  font-size: 18px;
  font-weight: 500;
  color: var(--ds-ink);
  font-family: inherit;
  background: #fff;
  outline: none;
  box-sizing: border-box;
  box-shadow: 0 4px 18px rgba(15, 26, 45, 0.04);
  transition: border-color var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-hub-search__input:focus {
  border-color: var(--ds-cyan);
  box-shadow: 0 4px 24px rgba(0, 184, 240, 0.18);
}
.ds-hub-search__icon {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ds-cyan);
  pointer-events: none;
}
.ds-hub-search__counts {
  max-width: 880px;
  margin: 14px auto 0;
  font-size: 13px;
  color: var(--ds-ink-3);
  font-weight: 500;
  display: flex;
  gap: 18px;
}
.ds-hub-search__counts strong { color: var(--ds-ink); font-weight: 800; }
.ds-hub-search--counts-only { padding-top: 28px; padding-bottom: 0; }
.ds-hub-search--counts-only .ds-hub-search__counts { margin-top: 0; }

/* ============================================================
   Section utilities used by the hub pages
   ============================================================ */
.ds-hub-section {
  padding: 72px 60px;
  background: #fff;
  position: relative;
  overflow: hidden;
}
.ds-hub-section--paper { background: var(--ds-paper); }
.ds-hub-section--ink   { background: var(--ds-ink); color: #fff; }
.ds-hub-section--tight { padding: 40px 60px; }
.ds-hub-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.ds-hub-section__inner--narrow { max-width: 1100px; }
.ds-hub-section__inner--reading { max-width: 1180px; }
/* Decorative top divider with logo dot */
.ds-hub-divider {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1280px, calc(100% - 120px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
}
.ds-hub-divider__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-cyan);
  opacity: 0.5;
  flex-shrink: 0;
}
.ds-hub-divider__line { flex: 1; height: 1px; background: var(--ds-line); }

/* ============================================================
   Stats strip (4 large numbers)
   ============================================================ */
.ds-hub-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.ds-hub-stats > div {
  padding: 24px;
  background: var(--ds-paper);
  border-radius: 14px;
  border-left: 3px solid var(--ds-cyan);
}
.ds-hub-stats__n {
  font-size: 36px;
  font-weight: 900;
  color: var(--ds-cyan);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ds-hub-stats__lab {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-ink-3);
  margin-top: 8px;
}

/* ============================================================
   Heading title — hub variant (with eyebrow row count)
   ============================================================ */
.ds-hub-title {
  font-size: 32px;
  font-weight: 900;
  color: var(--ds-ink);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0 0 32px;
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.ds-hub-title .ds-emph { color: var(--ds-cyan); }
.ds-hub-title__count {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-muted);
  letter-spacing: 0.14em;
}
.ds-hub-title--big {
  font-size: 54px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: balance;
  display: block;
  margin: 0 0 24px;
}
.ds-hub-section--ink .ds-hub-title { color: #fff; }
.ds-hub-section--ink .ds-hub-title--big { color: #fff; }

/* ============================================================
   State grid — 5-column compact tiles with arrow
   ============================================================ */
.ds-hub-states {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.ds-hub-states a {
  padding: 16px 18px;
  background: var(--ds-paper);
  border-radius: 10px;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ds-ink);
  text-decoration: none;
  transition: border-color var(--ds-dur-fast) var(--ds-ease),
              background var(--ds-dur-fast) var(--ds-ease),
              transform var(--ds-dur-fast) var(--ds-ease);
}
.ds-hub-states a:hover {
  border-color: var(--ds-cyan);
  background: #fff;
  transform: translateY(-1px);
}
.ds-hub-states__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-ink);
}
.ds-hub-states__arrow { color: var(--ds-cyan); flex-shrink: 0; }

/* ============================================================
   City grid — 4-column with state kicker on each card
   ============================================================ */
.ds-hub-cities {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.ds-hub-cities a {
  padding: 18px 20px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--ds-line);
  text-decoration: none;
  display: block;
  transition: border-color var(--ds-dur-fast) var(--ds-ease),
              transform var(--ds-dur-fast) var(--ds-ease),
              box-shadow var(--ds-dur-fast) var(--ds-ease);
}
.ds-hub-cities a:hover {
  border-color: var(--ds-cyan);
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-card);
}
.ds-hub-cities__state {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.ds-hub-cities__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ds-hub-cities__name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ds-ink);
}

/* ============================================================
   "Why local matters" 3-card grid
   ============================================================ */
.ds-hub-why {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}
.ds-hub-why__card {
  padding: 28px 32px;
  background: var(--ds-paper);
  border-radius: 16px;
  border-top: 3px solid var(--ds-cyan);
}
.ds-hub-section--paper .ds-hub-why__card { background: #fff; }
.ds-hub-why__card h3 {
  font-size: 18px;
  font-weight: 900;
  color: var(--ds-ink);
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.ds-hub-why__card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-ink-3);
  font-weight: 500;
  margin: 0;
}

/* ============================================================
   States compact grid (smaller — for resolution page coverage row)
   ============================================================ */
.ds-hub-states-mini {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.ds-hub-states-mini a {
  padding: 18px 22px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--ds-line);
  color: var(--ds-ink);
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition: border-color var(--ds-dur-fast) var(--ds-ease),
              transform var(--ds-dur-fast) var(--ds-ease);
}
.ds-hub-states-mini a:hover {
  border-color: var(--ds-cyan);
  transform: translateY(-1px);
}
.ds-hub-states-mini a svg { color: var(--ds-cyan); flex-shrink: 0; }
.ds-hub-states-mini-foot {
  text-align: center;
  margin-top: 28px;
}
.ds-hub-states-mini-foot a {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-cyan-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--ds-cyan);
  padding-bottom: 2px;
  letter-spacing: 0.02em;
}

/* ============================================================
   Pull quote — hub variant (cyan border-top)
   ============================================================ */
.ds-hub-pull {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 48px;
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid var(--ds-line);
  border-bottom: 1px solid var(--ds-line);
}
.ds-hub-pull__mark {
  font-size: 120px;
  font-weight: 900;
  color: var(--ds-cyan);
  letter-spacing: -0.04em;
  line-height: 0.85;
  font-family: Georgia, serif;
}
.ds-hub-pull__kicker {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ds-hub-pull__quote {
  font-size: 24px;
  font-weight: 700;
  color: var(--ds-ink);
  letter-spacing: -0.005em;
  line-height: 1.35;
  margin: 0;
  text-wrap: pretty;
  max-width: 780px;
}
.ds-hub-pull__byline {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-ink-2);
}
.ds-hub-pull__cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ============================================================
   Scenarios accordion (resolution page)
   ============================================================ */
.ds-hub-scenarios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  max-width: 980px;
  margin: 0 auto;
}
.ds-hub-scenario {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--ds-line);
  overflow: hidden;
  transition: border-color var(--ds-dur) var(--ds-ease),
              box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-hub-scenario[open] {
  border-color: var(--ds-cyan);
  box-shadow: 0 8px 30px rgba(0, 184, 240, 0.06);
}
.ds-hub-scenario summary {
  padding: 24px 28px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 22px;
  align-items: center;
  list-style: none;
}
.ds-hub-scenario summary::-webkit-details-marker { display: none; }
.ds-hub-scenario__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--ds-paper);
  color: var(--ds-cyan-deep);
  display: grid;
  place-items: center;
  border: 1px solid var(--ds-line);
  transition: background var(--ds-dur-fast) var(--ds-ease),
              color var(--ds-dur-fast) var(--ds-ease),
              border-color var(--ds-dur-fast) var(--ds-ease);
}
.ds-hub-scenario[open] .ds-hub-scenario__icon {
  background: var(--ds-cyan);
  color: #fff;
  border-color: var(--ds-cyan);
}
.ds-hub-scenario__icon svg { color: var(--ds-cyan); display: block; }
.ds-hub-scenario[open] .ds-hub-scenario__icon svg { color: #fff; }
.ds-hub-scenario__meta { min-width: 0; }
.ds-hub-scenario__kicker {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-family: var(--ds-font-mono, ui-monospace, Menlo, monospace);
}
.ds-hub-scenario__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ds-ink);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.ds-hub-scenario__chip {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ds-paper);
  color: var(--ds-ink);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  flex-shrink: 0;
  transition: background var(--ds-dur-fast) var(--ds-ease),
              color var(--ds-dur-fast) var(--ds-ease);
}
.ds-hub-scenario[open] .ds-hub-scenario__chip {
  background: var(--ds-ink);
  color: #fff;
}
.ds-hub-scenario__body {
  padding: 4px 28px 28px 98px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: start;
}
.ds-hub-scenario__body p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ds-ink-2);
  font-weight: 500;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.ds-hub-scenario__how-kicker {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ds-hub-scenario__steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.ds-hub-scenario__steps li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ds-ink-2);
  font-weight: 500;
}
.ds-hub-scenario__steps li::before {
  content: attr(data-n);
  font-size: 11px;
  font-weight: 900;
  color: var(--ds-cyan);
  font-family: var(--ds-font-mono, ui-monospace, Menlo, monospace);
  letter-spacing: 0.04em;
  padding-top: 3px;
}
.ds-hub-scenario__outcome {
  padding: 22px 24px;
  background: var(--ds-paper);
  border-radius: 12px;
  border: 1px solid var(--ds-line);
}
.ds-hub-scenario__outcome-kicker {
  font-size: 10px;
  font-weight: 800;
  color: var(--ds-muted);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ds-hub-scenario__outcome-body {
  font-size: 14px;
  font-weight: 700;
  color: var(--ds-ink);
  line-height: 1.5;
}

/* ============================================================
   Dark vertical-rail process (resolution page "From same-day to closeout")
   ============================================================ */
.ds-hub-rail-grid {
  display: grid;
  grid-template-columns: 0.6fr 2fr;
  gap: 48px;
  align-items: start;
  color: #fff;
}
.ds-hub-rail-head {
  position: sticky;
  top: 120px;
}
.ds-hub-rail-head h2 {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  color: #fff;
}
.ds-hub-rail-head h2 .ds-emph { color: var(--ds-cyan); display: block; }
.ds-hub-rail-head p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  margin-top: 20px;
  max-width: 300px;
}
.ds-hub-rail {
  position: relative;
}
.ds-hub-rail::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: rgba(0, 184, 240, 0.25);
}
.ds-hub-rail__step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 24px;
  padding: 18px 0;
  position: relative;
}
.ds-hub-rail__num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ds-cyan);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--ds-ink);
  font-family: var(--ds-font-mono, ui-monospace, Menlo, monospace);
}
.ds-hub-rail__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ds-hub-rail__pill {
  font-size: 10px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: rgba(0, 184, 240, 0.12);
  border-radius: 999px;
}
.ds-hub-rail__title {
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.ds-hub-rail__step p {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 10px;
  font-weight: 500;
}
.ds-hub-rail__tags {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.01em;
  font-family: var(--ds-font-mono, ui-monospace, Menlo, monospace);
}

/* ============================================================
   FAQ side-by-side (sticky title, stacked items)
   ============================================================ */
.ds-hub-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 64px;
  align-items: start;
}
.ds-hub-faq-head { position: sticky; top: 120px; }
.ds-hub-faqs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ds-hub-faq {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--ds-line);
  padding: 22px 26px;
  transition: border-color var(--ds-dur) var(--ds-ease);
}
.ds-hub-faq[open] {
  border-color: var(--ds-cyan);
  box-shadow: 0 6px 24px rgba(0, 184, 240, 0.06);
}
.ds-hub-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  list-style: none;
  cursor: pointer;
}
.ds-hub-faq summary::-webkit-details-marker { display: none; }
.ds-hub-faq summary h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--ds-ink);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  flex: 1;
}
.ds-hub-faq[open] summary h3 { color: var(--ds-cyan); }
.ds-hub-faq__chevron {
  transition: transform var(--ds-dur) var(--ds-ease);
  flex-shrink: 0;
}
.ds-hub-faq[open] .ds-hub-faq__chevron { transform: rotate(180deg); }
.ds-hub-faq__a {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ds-ink-3);
  margin-top: 14px;
  margin-bottom: 0;
  font-weight: 500;
}

/* ============================================================
   Related reads (rich-bg cards)
   ============================================================ */
.ds-hub-reads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ds-hub-reads__card {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ds-paper);
  border: 1px solid var(--ds-line);
  color: var(--ds-ink);
  text-decoration: none;
  transition: transform var(--ds-dur) var(--ds-ease),
              border-color var(--ds-dur) var(--ds-ease),
              box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-hub-reads__card:hover {
  transform: translateY(-3px);
  border-color: var(--ds-cyan);
  box-shadow: var(--ds-shadow-card);
}
.ds-hub-reads__visual {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
}
.ds-hub-reads__visual--ink   { background: var(--ds-ink); color: #fff; }
.ds-hub-reads__visual--paper { background: var(--ds-paper); }
.ds-hub-reads__visual--cyan  { background: var(--ds-cyan); }
.ds-hub-reads__chip {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 10px;
  background: #fff;
  color: var(--ds-ink);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  border-radius: 999px;
  text-transform: uppercase;
  z-index: 2;
}
.ds-hub-reads__pad {
  position: absolute;
  inset: 0;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ds-hub-reads__pad--center {
  align-items: center;
  text-align: center;
}
.ds-hub-reads__visual-kicker {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ds-hub-reads__visual--ink .ds-hub-reads__visual-kicker { color: var(--ds-cyan); }
.ds-hub-reads__visual--cyan .ds-hub-reads__visual-kicker { color: var(--ds-ink); opacity: 0.75; }
.ds-hub-reads__flow {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds-hub-reads__flow-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.85);
}
.ds-hub-reads__flow-num {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.7);
}
.ds-hub-reads__flow-row.is-active { color: var(--ds-cyan); }
.ds-hub-reads__flow-row.is-active .ds-hub-reads__flow-num {
  background: var(--ds-cyan);
  color: #fff;
}
.ds-hub-reads__big {
  font-size: 96px;
  font-weight: 900;
  color: var(--ds-ink);
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.ds-hub-reads__bar {
  margin-top: 12px;
  height: 6px;
  width: 70%;
  background: rgba(10, 18, 31, 0.15);
  border-radius: 999px;
  overflow: hidden;
}
.ds-hub-reads__bar > span {
  display: block;
  height: 100%;
  background: var(--ds-ink);
}
.ds-hub-reads__vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.ds-hub-reads__vs-side { text-align: center; }
.ds-hub-reads__vs-num {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ds-hub-reads__vs-num--cyan { color: var(--ds-cyan); }
.ds-hub-reads__vs-num--ink  { color: var(--ds-ink); }
.ds-hub-reads__vs-mid {
  font-size: 22px;
  font-weight: 900;
  color: var(--ds-ink);
  opacity: 0.4;
}
.ds-hub-reads__body { padding: 24px 26px; }
.ds-hub-reads__body h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--ds-ink);
  margin: 0 0 10px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.ds-hub-reads__body p {
  font-size: 14px;
  color: var(--ds-ink-3);
  line-height: 1.55;
  margin: 0;
  font-weight: 500;
}
.ds-hub-reads__more {
  margin-top: 18px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   Cyan-band CTA (final on every hub)
   ============================================================ */
.ds-hub-cta-band {
  padding: 72px 60px 0;
  background: var(--ds-cyan);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.ds-hub-cta-band__inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: end;
}
.ds-hub-cta-band__copy { padding-bottom: 56px; }
.ds-hub-cta-band__copy h2 {
  font-size: 54px;
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  text-transform: uppercase;
  color: #fff;
}
.ds-hub-cta-band__copy p {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
  margin: 0 0 28px;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.95);
}
.ds-hub-cta-band__copy strong { font-weight: 800; }
.ds-hub-cta-band__btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.ds-hub-cta-band .ds-cta {
  background: #fff;
  color: var(--ds-ink);
  border: 0;
}
.ds-hub-cta-band .ds-cta:hover { color: var(--ds-ink); }
.ds-hub-cta-band .ds-cta--ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}
.ds-hub-cta-band .ds-cta--ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.ds-hub-cta-band__visual {
  position: relative;
  height: 440px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ds-hub-cta-band__visual img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  object-position: center bottom;
  position: relative;
  z-index: 2;
}
.ds-hub-cta-band__hashtag {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  background: #fff;
  color: var(--ds-ink);
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  white-space: nowrap;
  z-index: 3;
  box-shadow: 0 8px 24px rgba(10, 18, 31, 0.18);
}
.ds-hub-cta-band__hashtag span {
  text-decoration: underline 2px;
  text-underline-offset: 3px;
}

/* ============================================================
   Floating-anchor TOC bar (how-it-works deep)
   ============================================================ */
.ds-hub-toc {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 28px;
  background: var(--ds-paper);
  border-radius: 14px;
  border-left: 4px solid var(--ds-cyan);
  display: grid;
  grid-template-columns: auto repeat(5, 1fr);
  gap: 24px;
  align-items: center;
}
.ds-hub-toc__lab {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-ink);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ds-hub-toc a {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-ink);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color var(--ds-dur-fast) var(--ds-ease);
}
.ds-hub-toc a:hover { color: var(--ds-cyan); }
.ds-hub-toc a svg { color: var(--ds-cyan); flex-shrink: 0; }

/* ============================================================
   Section heading with eyebrow + bigger H2 (reusable narrow)
   ============================================================ */
.ds-hub-head {
  text-align: left;
  max-width: 820px;
  margin: 0;
}
.ds-hub-head--center {
  text-align: center;
  margin: 0 auto;
}
.ds-hub-head__eyebrow {
  font-size: 13px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ds-hub-head h2 {
  font-size: 54px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--ds-ink);
  margin: 0;
  text-transform: uppercase;
  text-wrap: balance;
}
.ds-hub-head h2 .ds-emph { color: var(--ds-cyan); }
.ds-hub-section--ink .ds-hub-head h2 { color: #fff; }

/* ============================================================
   Weeks rail — 6-column compact step cards (how-it-works)
   ============================================================ */
.ds-hub-weeks {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.ds-hub-weeks__card {
  padding: 22px 18px;
  background: #fff;
  border-radius: 12px;
  border-top: 3px solid var(--ds-cyan);
  transition: transform var(--ds-dur) var(--ds-ease),
              box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-hub-weeks__card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-card);
}
.ds-hub-weeks__when {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ds-hub-weeks__title {
  font-size: 15px;
  font-weight: 900;
  color: var(--ds-ink);
  margin-top: 8px;
  margin-bottom: 6px;
}
.ds-hub-weeks__d {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ds-ink-3);
  font-weight: 500;
}

/* ============================================================
   Cost split — % big number card + checklist card
   ============================================================ */
.ds-hub-cost {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ds-hub-cost__primary {
  padding: 32px;
  background: var(--ds-paper);
  border-radius: 16px;
  border-top: 3px solid var(--ds-cyan);
}
.ds-hub-cost__secondary {
  padding: 32px;
  background: var(--ds-paper);
  border-radius: 16px;
}
.ds-hub-section--paper .ds-hub-cost__primary,
.ds-hub-section--paper .ds-hub-cost__secondary { background: #fff; }
.ds-hub-cost__kicker {
  font-size: 13px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ds-hub-cost__kicker--ink { color: var(--ds-ink); }
.ds-hub-cost__big {
  font-size: 54px;
  font-weight: 900;
  color: var(--ds-ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.ds-hub-cost__sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-ink-2);
  margin-top: 8px;
  margin-bottom: 18px;
}
.ds-hub-cost__primary p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-ink-3);
  font-weight: 500;
  margin: 0;
}
.ds-hub-cost__list {
  margin: 0;
  padding: 0 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds-hub-cost__list li {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-ink-2);
  font-weight: 600;
}

/* ============================================================
   Fits / Not-a-fit two-column (how-it-works eligibility)
   ============================================================ */
.ds-hub-fits {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.ds-hub-fits__card {
  padding: 32px;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.ds-hub-fits__card--in {
  background: #fff;
  border: 1px solid var(--ds-line);
}
.ds-hub-fits__card--in::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ds-cyan);
}
.ds-hub-fits__card--out {
  background: var(--ds-ink);
  color: #fff;
  border: 1px solid var(--ds-ink);
}
.ds-hub-fits__card--out::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
}
.ds-hub-fits__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.ds-hub-fits__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ds-hub-fits__icon--in { background: var(--ds-cyan); }
.ds-hub-fits__icon--out {
  border: 1.5px solid rgba(255, 255, 255, 0.45);
}
.ds-hub-fits__lab {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ds-hub-fits__card--in .ds-hub-fits__lab { color: var(--ds-ink); }
.ds-hub-fits__card--out .ds-hub-fits__lab { color: #fff; }
.ds-hub-fits__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.ds-hub-fits__list li {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 600;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ds-hub-fits__list li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.ds-hub-fits__card--in .ds-hub-fits__list li { color: var(--ds-ink-2); }
.ds-hub-fits__card--in .ds-hub-fits__list li::before { background: var(--ds-cyan); }
.ds-hub-fits__card--out .ds-hub-fits__list li { color: rgba(255, 255, 255, 0.78); font-weight: 500; }
.ds-hub-fits__card--out .ds-hub-fits__list li::before { background: rgba(255, 255, 255, 0.45); }

/* ============================================================
   FAQ stacked w/ chevron (how-it-works)
   ============================================================ */
.ds-hub-faq-stack {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================================
   Hub CTA strip (small) — cyan-bordered card with title + CTA pair
   ============================================================ */
.ds-hub-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 48px;
  align-items: center;
  padding: 40px 0;
  border-top: 1px solid var(--ds-line);
  border-bottom: 1px solid var(--ds-line);
}

/* ============================================================
   Hub featured highlight card (problem-with-callout-card on resolution)
   ============================================================ */
.ds-hub-callout {
  margin-top: 32px;
  padding: 28px 32px;
  background: #fff;
  border-radius: 16px;
  border-left: 3px solid var(--ds-cyan);
}
.ds-hub-section--paper .ds-hub-callout { background: #fff; }
.ds-hub-callout__kicker {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-muted);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ds-hub-callout__big {
  font-size: 42px;
  font-weight: 900;
  color: var(--ds-ink);
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.ds-hub-callout__meta {
  font-size: 13px;
  font-weight: 700;
  color: var(--ds-ink-2);
  margin-top: 10px;
  line-height: 1.5;
}
.ds-hub-callout__rule {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ds-line);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-ink-3);
  line-height: 1.55;
}

/* ============================================================
   Drop-cap intro paragraph
   ============================================================ */
.ds-hub-dropcap p:first-child::first-letter {
  float: left;
  font-size: 84px;
  font-weight: 900;
  line-height: 0.85;
  margin-right: 14px;
  margin-top: 6px;
  color: var(--ds-cyan);
  letter-spacing: -0.04em;
}
.ds-hub-dropcap p {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ds-ink);
  font-weight: 600;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.ds-hub-dropcap p + p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ds-ink-3);
  font-weight: 500;
  margin: 0 0 18px;
}

/* ============================================================
   2-column problem header
   ============================================================ */
.ds-hub-problem {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr;
  gap: 64px;
  align-items: start;
}

/* ============================================================
   Center contact contact cards (resolution page)
   ============================================================ */
.ds-hub-contact {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}
.ds-hub-contact__rows { display: grid; gap: 16px; }
.ds-hub-contact__row {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  background: var(--ds-paper);
  border-radius: 12px;
  border-left: 3px solid var(--ds-cyan);
}
.ds-hub-section--paper .ds-hub-contact__row { background: #fff; }
.ds-hub-contact__row > div { flex: 1; }
.ds-hub-contact__kicker {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.ds-hub-contact__big {
  font-size: 18px;
  font-weight: 900;
  color: var(--ds-ink);
  margin-bottom: 5px;
  letter-spacing: -0.005em;
}
.ds-hub-contact__d {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ds-ink-3);
  font-weight: 500;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .ds-hub-states { grid-template-columns: repeat(3, 1fr); }
  .ds-hub-cities { grid-template-columns: repeat(3, 1fr); }
  .ds-hub-states-mini { grid-template-columns: repeat(3, 1fr); }
  .ds-hub-stats { grid-template-columns: repeat(2, 1fr); }
  .ds-hub-why { grid-template-columns: 1fr; }
  .ds-hub-reads { grid-template-columns: 1fr; }
  .ds-hub-weeks { grid-template-columns: repeat(3, 1fr); }
  .ds-hub-cost { grid-template-columns: 1fr; }
  .ds-hub-fits { grid-template-columns: 1fr; }
  .ds-hub-rail-grid { grid-template-columns: 1fr; gap: 32px; }
  .ds-hub-rail-head { position: static; }
  .ds-hub-faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .ds-hub-faq-head { position: static; }
  .ds-hub-problem { grid-template-columns: 1fr; gap: 36px; }
  .ds-hub-contact { grid-template-columns: 1fr; gap: 36px; }
  .ds-hub-cta-band__inner { grid-template-columns: 1fr; gap: 32px; }
  .ds-hub-cta-band__visual { height: 320px; }
  .ds-hub-toc {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .ds-hub-toc__lab { grid-column: 1 / -1; }
  .ds-hub-pull {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: left;
  }
  .ds-hub-pull__cta { flex-direction: row; }
  .ds-hub-scenario__body {
    padding: 4px 28px 28px 28px;
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 800px) {
  .ds-hub-hero { padding: 56px 20px 56px; }
  .ds-hub-hero h1 { font-size: clamp(36px, 9vw, 56px); }
  .ds-hub-hero__sub { font-size: 17px; }
  .ds-hub-search { padding: 32px 20px 0; }
  .ds-hub-search__input { height: 56px; padding-right: 56px; padding-left: 20px; font-size: 16px; }
  .ds-hub-section, .ds-hub-section--tight { padding: 56px 20px; }
  .ds-hub-states { grid-template-columns: repeat(2, 1fr); }
  .ds-hub-cities { grid-template-columns: 1fr 1fr; }
  .ds-hub-states-mini { grid-template-columns: 1fr 1fr; }
  .ds-hub-stats { grid-template-columns: 1fr 1fr; }
  .ds-hub-weeks { grid-template-columns: 1fr 1fr; }
  .ds-hub-title { font-size: 26px; }
  .ds-hub-title--big { font-size: 40px; }
  .ds-hub-head h2 { font-size: 36px; }
  .ds-hub-rail-head h2 { font-size: 32px; }
  .ds-hub-cta-band { padding: 56px 20px 0; }
  .ds-hub-cta-band__copy h2 { font-size: 36px; }
  .ds-hub-cta-band__copy p { font-size: 17px; }
  .ds-hub-cta-band__visual { height: 260px; }
  .ds-hub-toc { grid-template-columns: 1fr 1fr; }
  .ds-hub-pull__mark { font-size: 84px; }
  .ds-hub-pull__quote { font-size: 20px; }
  .ds-hub-scenario summary {
    grid-template-columns: 40px 1fr 32px;
    gap: 14px;
    padding: 20px 22px;
  }
  .ds-hub-scenario__icon { width: 40px; height: 40px; }
  .ds-hub-scenario__chip { width: 32px; height: 32px; font-size: 16px; }
  .ds-hub-scenario__body { padding: 4px 22px 22px 22px; }
  .ds-hub-strip {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
}

/* ============================================================
   Guide-article extensions — used by page-business-debt-settlement.php
   to upgrade the in-article modules (timeline card, pull quote,
   settlement estimator, FAQs, author, references, etc.). These
   complement the .ds-guide* base in pages-forms.css.
   ============================================================ */

/* Embedded dark timeline card */
.ds-guide-timeline {
  margin: 36px 0;
  padding: 40px 36px 36px;
  background: var(--ds-ink);
  color: #fff;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.ds-guide-timeline::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: var(--ds-cyan);
  opacity: 0.08;
  pointer-events: none;
}
.ds-guide-timeline > * { position: relative; }
.ds-guide-timeline__kicker {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ds-guide-timeline__h {
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 28px;
  color: #fff;
}
.ds-guide-timeline__h .ds-emph { color: var(--ds-cyan); }
.ds-guide-timeline__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.ds-guide-timeline__list::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--ds-cyan) 0%, rgba(0, 184, 240, 0.15) 100%);
  pointer-events: none;
}
.ds-guide-timeline__step {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 18px;
  align-items: flex-start;
  position: relative;
}
.ds-guide-timeline__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ds-cyan);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 0 0 4px var(--ds-ink);
}
.ds-guide-timeline__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.ds-guide-timeline__when {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ds-guide-timeline__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}
.ds-guide-timeline__title {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.ds-guide-timeline__d {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 500;
}

/* Pull quote inside the article body */
.ds-guide-pull {
  margin: 40px 0;
  padding: 40px 0 32px;
  border-top: 2px solid var(--ds-cyan);
  border-bottom: 1px solid var(--ds-line);
  position: relative;
}
.ds-guide-pull__mark {
  font-size: 72px;
  font-weight: 900;
  color: var(--ds-cyan);
  line-height: 0.7;
  font-family: Georgia, "Times New Roman", serif;
  margin-bottom: 8px;
  user-select: none;
}
.ds-guide-pull blockquote {
  margin: 0;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ds-ink);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Settlement estimator widget */
.ds-guide-estimator {
  margin: 48px 0;
  padding: 32px 36px;
  background: linear-gradient(135deg, var(--ds-paper) 0%, #fff 100%);
  border: 1px solid var(--ds-line);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
.ds-guide-estimator__kicker {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ds-guide-estimator__h {
  font-size: 22px;
  font-weight: 900;
  color: var(--ds-ink);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 4px;
  line-height: 1.15;
}
.ds-guide-estimator__sub {
  font-size: 13px;
  color: var(--ds-muted);
  font-weight: 500;
  margin: 0 0 24px;
}
.ds-guide-estimator__label {
  display: block;
  margin-bottom: 18px;
}
.ds-guide-estimator__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.ds-guide-estimator__row-lab {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-ink);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ds-guide-estimator__amount {
  font-size: 22px;
  font-weight: 900;
  color: var(--ds-cyan);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ds-guide-estimator__slider {
  width: 100%;
  accent-color: var(--ds-cyan);
  height: 6px;
}
.ds-guide-estimator__range {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 700;
  color: var(--ds-muted);
  margin-top: 6px;
  letter-spacing: 0.08em;
}
.ds-guide-estimator__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.ds-guide-estimator__card {
  padding: 18px 16px;
  background: #fff;
  border: 1px solid var(--ds-line);
  border-top-width: 3px;
  border-radius: 14px;
}
.ds-guide-estimator__card--success { border-top-color: var(--ds-success); }
.ds-guide-estimator__card--cyan    { border-top-color: var(--ds-cyan); }
.ds-guide-estimator__card--ink     { border-top-color: var(--ds-ink); }
.ds-guide-estimator__card-lab {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ds-guide-estimator__card--success .ds-guide-estimator__card-lab { color: var(--ds-success); }
.ds-guide-estimator__card--cyan    .ds-guide-estimator__card-lab { color: var(--ds-cyan); }
.ds-guide-estimator__card--ink     .ds-guide-estimator__card-lab { color: var(--ds-ink); }
.ds-guide-estimator__card-amt {
  font-size: 20px;
  font-weight: 900;
  color: var(--ds-ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ds-guide-estimator__card-sub {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-muted);
  margin-top: 6px;
}
.ds-guide-estimator__card-foot {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-ink-3);
  margin-top: 8px;
}
.ds-guide-estimator__foot {
  margin-top: 18px;
  padding: 14px 18px;
  background: rgba(0, 184, 240, 0.06);
  border-radius: 12px;
  font-size: 12px;
  color: var(--ds-ink-3);
  font-weight: 600;
  line-height: 1.5;
}
.ds-guide-estimator__foot strong { color: var(--ds-ink); }
.ds-guide-estimator__foot a {
  color: var(--ds-cyan);
  font-weight: 800;
  text-decoration: none;
}
.ds-guide-estimator__foot a:hover { text-decoration: underline; }

/* TL;DR — chip-pill variant used by page-business-debt-settlement.php
   (overrides the inkblock -tag variant from pages-forms.css). */
.ds-guide__tldr-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ds-guide__tldr-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-cyan);
}

/* Checklist — chip-pill variant used by page-business-debt-settlement.php */
.ds-guide__checklist-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ds-guide__checklist-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ds-cyan);
}

/* Article FAQs (within ds-guide__article) */
.ds-guide__faqs { margin: 48px 0 16px; }
.ds-guide__faqs-kicker {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ds-guide__faqs-h {
  font-size: 32px;
  font-weight: 900;
  color: var(--ds-ink);
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0 0 20px;
  line-height: 1.05;
}
.ds-guide__faqs-list { border-top: 1px solid var(--ds-line); }
.ds-guide__faq {
  border-bottom: 1px solid var(--ds-line);
}
.ds-guide__faq summary {
  width: 100%;
  text-align: left;
  padding: 20px 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  list-style: none;
}
.ds-guide__faq summary::-webkit-details-marker { display: none; }
.ds-guide__faq summary > span:first-child {
  font-size: 17px;
  font-weight: 800;
  color: var(--ds-ink);
  letter-spacing: -0.005em;
  flex: 1;
}
.ds-guide__faq-chip {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ds-paper);
  color: var(--ds-ink);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
  flex-shrink: 0;
  transition: background var(--ds-dur-fast) var(--ds-ease),
              color var(--ds-dur-fast) var(--ds-ease);
}
.ds-guide__faq[open] .ds-guide__faq-chip {
  background: var(--ds-cyan);
  color: #fff;
}
.ds-guide__faq[open] .ds-guide__faq-chip::before { content: "–"; }
.ds-guide__faq[open] .ds-guide__faq-chip { font-size: 0; }
.ds-guide__faq[open] .ds-guide__faq-chip::before { font-size: 18px; }
.ds-guide__faq-a {
  padding: 0 4px 24px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ds-ink-2);
  font-weight: 500;
  max-width: 680px;
}

/* Side-CTA card inside article body */
.ds-guide__sidecta {
  margin-top: 40px;
  padding: 36px 40px;
  background: var(--ds-paper);
  border-radius: 20px;
  border-left: 3px solid var(--ds-cyan);
}
.ds-guide__sidecta-kicker {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ds-guide__sidecta h3 {
  font-size: 24px;
  font-weight: 900;
  color: var(--ds-ink);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.1;
}
.ds-guide__sidecta p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ds-ink-3);
  font-weight: 500;
  margin: 12px 0 20px;
}
.ds-guide__sidecta-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ds-guide__sidecta-btns .ds-cta { height: 46px; padding: 0 22px; font-size: 12px; }

/* Author block */
.ds-guide__author {
  margin: 48px 0 0;
  padding: 28px 32px;
  background: var(--ds-paper);
  border-radius: 20px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  align-items: center;
}
.ds-guide__author-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--ds-cyan);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  overflow: hidden;
}
.ds-guide__author-kicker {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-cyan);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ds-guide__author-name {
  font-size: 18px;
  font-weight: 900;
  color: var(--ds-ink);
  letter-spacing: -0.005em;
}
.ds-guide__author-title {
  font-size: 13px;
  color: var(--ds-ink-3);
  font-weight: 600;
  margin-top: 2px;
}
.ds-guide__author-meta {
  font-size: 12px;
  color: var(--ds-muted);
  font-weight: 600;
  margin-top: 10px;
  line-height: 1.5;
}
.ds-guide__author-meta strong { color: var(--ds-ink-2); }

/* References */
.ds-guide__refs {
  margin: 48px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--ds-line);
}
.ds-guide__refs-kicker {
  font-size: 11px;
  font-weight: 800;
  color: var(--ds-muted);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ds-guide__refs ol {
  padding-left: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: decimal;
}
.ds-guide__refs li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ds-ink-3);
  font-weight: 500;
}

/* Tighter responsive for guide additions */
@media (max-width: 800px) {
  .ds-guide-timeline { padding: 28px 22px 24px; }
  .ds-guide-timeline__h { font-size: 22px; }
  .ds-guide-estimator { padding: 24px 22px; }
  .ds-guide-estimator__cards { grid-template-columns: 1fr; }
  .ds-guide__author {
    grid-template-columns: 1fr;
    text-align: left;
    padding: 24px 22px;
  }
  .ds-guide__author-avatar { width: 56px; height: 56px; font-size: 18px; }
  .ds-guide__faqs-h { font-size: 26px; }
  .ds-guide-pull blockquote { font-size: 20px; }
}

/* ============================================================
   Defensive accordion collapse — ensure hub FAQ + scenarios
   stay collapsed when not [open]. Native <details> handles this
   via UA stylesheet, but explicit display: grid / flex on the
   body containers can occasionally defeat the UA hide on older
   browsers. This makes the collapsed state explicit.
   ============================================================ */
.ds-hub-scenario:not([open]) .ds-hub-scenario__body { display: none; }
.ds-hub-faq:not([open]) .ds-hub-faq__a { display: none; }
.ds-guide__faq:not([open]) .ds-guide__faq-a { display: none; }

/* ============================================================
   Cyan portrait pre-footer CTA (.ds-mca-final-cta)
   Shared with pages-editorial / pages-mca. Duplicated here so
   hub templates that don't load pages-editorial.css still render
   the CTA correctly.
   ============================================================ */
.ds-mca-final-cta {
  position: relative;
  background-color: var(--ds-cyan);
  color: #fff;
  overflow: hidden;
  padding: 96px 60px 0;
}
.ds-mca-final-cta::before {
  /* Canonical d-pattern (CtaBand variant): right 45% strip.
     Slant baked into d-pattern.svg via SVG <pattern patternTransform="rotate(15)"> — no CSS rotation. */
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 45%;
  background: url('../images/d-pattern.svg') center / cover no-repeat;
  opacity: 0.18;
  pointer-events: none;
  z-index: 1;
}
.ds-mca-final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  z-index: 1;
}
.ds-mca-final-cta__inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: end;
}
.ds-mca-final-cta__copy {
  padding-bottom: 80px;
}
.ds-mca-final-cta__copy h2 {
  font-size: 60px;
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  text-transform: uppercase;
  color: #fff;
}
.ds-mca-final-cta__sub {
  font-size: 20px;
  line-height: 1.4;
  font-weight: 600;
  margin: 0 0 32px;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.95);
}
.ds-mca-final-cta__sub strong { color: #fff; }
.ds-mca-final-cta__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ds-mca-final-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 32px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  background: #fff;
  color: var(--ds-ink);
  border: 0;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s var(--ds-ease), box-shadow 0.2s var(--ds-ease);
}
.ds-mca-final-cta__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.3);
  background: #f1f1f1;
  color: var(--ds-ink);
}
.ds-mca-final-cta__btn svg { transition: transform var(--ds-dur) var(--ds-ease); }
.ds-mca-final-cta__btn:hover svg { transform: translateX(3px); }
.ds-mca-final-cta__tel {
  height: 58px;
  padding: 0 28px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: background 0.2s var(--ds-ease), border-color 0.2s var(--ds-ease);
}
.ds-mca-final-cta__tel:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}
.ds-mca-final-cta__portrait {
  position: relative;
  height: 520px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.ds-mca-final-cta__portrait img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  display: block;
  position: relative;
  z-index: 5;
}
.ds-mca-final-cta__pill {
  position: absolute;
  top: 32px;
  right: 0;
  padding: 12px 24px;
  background: #fff;
  color: var(--ds-ink);
  border-radius: 999px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.3);
  z-index: 4;
  white-space: nowrap;
}
.ds-mca-final-cta__pill span { color: var(--ds-cyan); }
@media (max-width: 1000px) {
  .ds-mca-final-cta { padding: 72px 32px 0; }
  .ds-mca-final-cta__inner { grid-template-columns: 1fr; gap: 32px; }
  .ds-mca-final-cta__copy { padding-bottom: 0; }
  .ds-mca-final-cta__copy h2 { font-size: 44px; }
  .ds-mca-final-cta__sub { font-size: 17px; }
  .ds-mca-final-cta__portrait { height: 420px; }
  .ds-mca-final-cta__pill {
    position: relative;
    top: auto;
    right: auto;
    margin: 0 auto 16px;
    display: inline-block;
  }
}
@media (max-width: 640px) {
  .ds-mca-final-cta { padding: 56px 20px 0; }
  .ds-mca-final-cta__copy h2 { font-size: 34px; }
  .ds-mca-final-cta__actions { flex-direction: column; align-items: stretch; }
  .ds-mca-final-cta__btn,
  .ds-mca-final-cta__tel { width: 100%; justify-content: center; }
  .ds-mca-final-cta__portrait { height: 340px; }
  .ds-mca-final-cta__pill { font-size: 18px; padding: 10px 18px; }
}

/* ============================================================
   QC May 2026 — Responsive overflow fixes (Hub cluster)
   Targets: 375 / 768 / 1280 widths, hero/timeline/VS/FAQ/CTA
   ============================================================ */

/* Prevent any descendant from forcing horizontal page scroll */
.ds-hub-hero,
.ds-hub-section,
.ds-hub-search,
.ds-hub-cta-band,
.ds-mca-final-cta {
  overflow-x: clip;
}

/* Hero: hard-wrap long uppercase words ("SETTLEMENT", "RESOLUTION",
   "COMPANIES") so headlines never overflow narrow phones. */
.ds-hub-hero h1,
.ds-hub-title,
.ds-hub-title--big,
.ds-hub-head h2,
.ds-hub-rail-head h2,
.ds-hub-cta-band__copy h2,
.ds-mca-final-cta__copy h2 {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* Sticky TOC: ensure it unsticks at <1100, also clamp when sticky to avoid
   overlap with header. Note: base @1100 already sets position:static for the
   .ds-hub-rail-head + .ds-hub-faq-head. This is defensive. */
@media (max-width: 1100px) {
  .ds-hub-rail-head,
  .ds-hub-faq-head { position: static !important; top: auto !important; }
  .ds-hub-toc { gap: 14px 16px; }
}

/* 1280 — clamp hero size on laptops */
@media (max-width: 1280px) {
  .ds-hub-hero h1 { font-size: clamp(40px, 5.4vw, 76px); }
}

/* 768 tablet — tidy paddings + collapse 2-up grids cleanly */
@media (max-width: 768px) {
  .ds-hub-hero { padding: 48px 24px 56px; }
  .ds-hub-hero__cta { gap: 12px; }
  .ds-hub-hero__cta .ds-cta { width: auto; }
  .ds-hub-section,
  .ds-hub-section--tight { padding: 56px 24px; }
  .ds-hub-stats > div { padding: 18px 16px; }
  /* Final CTA pill repositions */
  .ds-mca-final-cta__pill {
    position: relative !important;
    top: auto;
    right: auto;
    margin: 0 0 12px;
  }
}

/* 640 — FAQ tap targets */
@media (max-width: 640px) {
  .ds-hub-faq summary,
  .ds-guide__faq summary,
  .ds-hub-scenario summary { min-height: 44px; }
  .ds-hub-faq { padding: 18px 20px; }
}

/* 480 — narrow phones */
@media (max-width: 480px) {
  /* Hero shrinks further */
  .ds-hub-hero { padding: 40px 16px 48px; }
  .ds-hub-hero h1 { font-size: clamp(28px, 8.5vw, 38px); line-height: 1.04; }
  .ds-hub-hero__sub { font-size: 16px; margin-top: 20px; }
  .ds-hub-hero__crumbs { font-size: 11px; flex-wrap: wrap; }
  .ds-hub-hero__cta { flex-direction: column; align-items: stretch; }
  .ds-hub-hero__cta .ds-cta { width: 100%; justify-content: center; }

  /* Section padding tighter */
  .ds-hub-section,
  .ds-hub-section--tight { padding: 40px 16px; }
  .ds-hub-search { padding: 24px 16px 0; }
  .ds-hub-search__input { height: 52px; font-size: 15px; }
  .ds-hub-title { font-size: 22px; }
  .ds-hub-title--big { font-size: 30px; }
  .ds-hub-head h2,
  .ds-hub-rail-head h2 { font-size: 26px; }

  /* Stats: 1col */
  .ds-hub-stats { grid-template-columns: 1fr; }
  .ds-hub-stats > div { padding: 16px 14px; }

  /* States/Cities: 1col directories */
  .ds-hub-states,
  .ds-hub-cities,
  .ds-hub-states-mini { grid-template-columns: 1fr; }
  .ds-hub-states a,
  .ds-hub-cities a,
  .ds-hub-states-mini a { padding: 14px 16px; font-size: 14px; }

  /* Weeks/process timeline: 1col */
  .ds-hub-weeks { grid-template-columns: 1fr; }

  /* TOC: 1col */
  .ds-hub-toc { grid-template-columns: 1fr; gap: 12px; }
  .ds-hub-toc__lab { grid-column: auto; }

  /* Pull quote scaling */
  .ds-hub-pull__mark { font-size: 64px; }
  .ds-hub-pull__quote { font-size: 17px; }

  /* Scenarios accordion summary fits 375 */
  .ds-hub-scenario summary {
    grid-template-columns: 36px 1fr 28px;
    gap: 12px;
    padding: 16px 18px;
  }
  .ds-hub-scenario__icon { width: 36px; height: 36px; }
  .ds-hub-scenario__chip { width: 28px; height: 28px; font-size: 14px; }
  .ds-hub-scenario__body { padding: 4px 18px 18px 18px; }

  /* CTA band tidies */
  .ds-hub-cta-band { padding: 40px 16px 0; }
  .ds-hub-cta-band__copy h2 { font-size: 26px; }
  .ds-hub-cta-band__copy p { font-size: 15px; }
  .ds-hub-cta-band__visual { height: 220px; }

  /* Final CTA band (shared cyan portrait CTA) */
  .ds-mca-final-cta { padding: 48px 16px 0; }
  .ds-mca-final-cta__copy h2 { font-size: 26px; line-height: 1.05; }
  .ds-mca-final-cta__sub { font-size: 15px; }
  .ds-mca-final-cta__portrait { height: 280px; }
  .ds-mca-final-cta__pill { font-size: 16px; padding: 8px 16px; }

  /* Strip / pillar links: stack */
  .ds-hub-strip { gap: 18px; padding: 20px 18px; }
}

/* 400 — extra-tight phones */
@media (max-width: 400px) {
  .ds-hub-hero h1 { font-size: 26px; }
  .ds-hub-title--big { font-size: 26px; }
  .ds-hub-head h2,
  .ds-hub-rail-head h2 { font-size: 22px; }
}

/* ============================================================
   Comparison table — `.ds-hub-compare`
   3-column "Criterion / Legitimate firm / Churn shop" used on
   /best-business-debt-settlement-companies/ and similar hub
   pages. Was previously rendering as bare unstyled divs.
   Pattern mirrors the .ds-versus__row treatment from
   /our-difference/ but with neutral coloring (no Delancey-vs-X
   call-out — this is an educational comparison).
   ============================================================ */
.ds-hub-compare {
  margin: 28px 0 16px;
  border: 1px solid var(--ds-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ds-white);
}
.ds-hub-compare__row {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  border-bottom: 1px solid var(--ds-line-soft);
}
.ds-hub-compare__row:last-child { border-bottom: 0; }
.ds-hub-compare__row > div {
  padding: 18px 20px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ds-ink);
  border-right: 1px solid var(--ds-line-soft);
  display: flex;
  align-items: center;
}
.ds-hub-compare__row > div:last-child { border-right: 0; }
/* First column = criterion label */
.ds-hub-compare__row > div:first-child {
  font-weight: 700;
  color: var(--ds-ink);
  background: var(--ds-paper);
}
/* Second column = legitimate firm (positive — cyan accent) */
.ds-hub-compare__row > div:nth-child(2) {
  color: var(--ds-ink);
  background: var(--ds-cyan-soft);
  font-weight: 500;
}
/* Third column = churn shop (negative — neutral muted) */
.ds-hub-compare__row > div:nth-child(3) {
  color: var(--ds-muted);
  background: var(--ds-white);
}
/* Header row */
.ds-hub-compare__row--head > div {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ds-ink);
  background: var(--ds-ink) !important;
  color: #fff !important;
  padding: 14px 20px;
}
.ds-hub-compare__row--head > div:nth-child(2) { background: var(--ds-cyan-deep) !important; }
.ds-hub-compare__row--head > div:nth-child(3) { background: var(--ds-ink-2, #1F2C42) !important; }
.ds-hub-compare__footnote {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--ds-muted);
}

/* Mobile: stack vertically with column labels prefixed via ::before */
@media (max-width: 768px) {
  .ds-hub-compare__row {
    grid-template-columns: 1fr;
    border-bottom: 8px solid var(--ds-paper);
  }
  .ds-hub-compare__row > div {
    border-right: 0;
    border-bottom: 1px solid var(--ds-line-soft);
    padding: 14px 16px;
  }
  .ds-hub-compare__row > div:last-child { border-bottom: 0; }
  /* First-column criterion becomes the section header on mobile */
  .ds-hub-compare__row > div:first-child {
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ds-ink);
    background: var(--ds-paper);
  }
  /* Add column labels via ::before on mobile so users know which is which */
  .ds-hub-compare__row > div:nth-child(2)::before {
    content: 'Legitimate firm — ';
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--ds-cyan-deep);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
  .ds-hub-compare__row > div:nth-child(3)::before {
    content: 'Churn shop — ';
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: var(--ds-muted-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
  /* Hide the head row on mobile — column labels handle it inline */
  .ds-hub-compare__row--head { display: none; }
  .ds-hub-compare__row > div:nth-child(2),
  .ds-hub-compare__row > div:nth-child(3) {
    display: block;
  }
}