/* ==========================================================================
   Free Credit Score — page components

   Modelled on the reference layout: a white hero with a product lockup and a
   phone showing the score, a five-up benefit strip, a score-band table, a
   carousel explaining the number, then the FAQ.
   Scoped to .cs-page so none of it leaks into the rest of the site.
   ========================================================================== */

.cs-page { --poor: #DC2626; --fair: #D97706; --good: #059669; }

/* ---------- hero ---------- */
.cs-hero { padding: 84px 0 110px; }
.cs-hero-grid {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: var(--sp-16); align-items: center;
}
.cs-lockup { display: flex; align-items: center; gap: 14px; margin-bottom: var(--sp-8); }
.cs-lockup strong { font-size: clamp(1.4rem, 2.6vw, 1.85rem); letter-spacing: -.03em; font-weight: 600; }
.cs-title {
  font-size: clamp(2.4rem, 4.4vw, 3.3rem); line-height: 1.06;
  letter-spacing: -.04em; font-weight: 600; margin-bottom: var(--sp-8);
}
.cs-claims { display: grid; gap: 16px; margin-bottom: var(--sp-10); }
.cs-claims li { display: flex; gap: 13px; align-items: flex-start; font-size: var(--text-lead); color: var(--ink-2); line-height: 1.45; }
/* The tick is a mark, not a badge — no filled disc competing with the text. */
.cs-claims .tick {
  flex-shrink: 0; margin-top: 5px;
  display: grid; place-items: center; width: 18px; height: 18px;
  color: var(--success);
}
.cs-powered { margin-top: var(--sp-10); font-size: .82rem; color: var(--ink-3); max-width: 46ch; }
.cs-powered strong { color: var(--ink-2); display: block; margin-bottom: 4px; font-size: .75rem;
  letter-spacing: .08em; text-transform: uppercase; }

/* ---------- the phone, and the score inside it ---------- */
/* The wrap is pinned to the phone's own width so the two floating cards hang
   off its edges rather than off the column, which is what buried them under
   the gauge the first time round. */
.cs-phone-wrap { position: relative; width: min(330px, 100%); margin: 0 auto; }
.cs-phone {
  width: 100%; background: var(--surface);
  border: 8px solid var(--ink); border-radius: 46px;
  box-shadow: var(--sh-xl); padding: 24px 22px 28px; text-align: center;
}
.cs-phone-bar {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .68rem; font-weight: 700; color: var(--ink-3); margin-bottom: 16px;
}
.cs-gauge { width: 100%; max-width: 240px; height: auto; margin: 0 auto; display: block; }
.cs-score { font-size: 2.9rem; font-weight: 600; letter-spacing: -.045em; line-height: 1; margin-top: 8px; }
.cs-score-of { font-size: .9rem; color: var(--ink-2); margin-top: 4px; }
.cs-delta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--success-bg); color: var(--success); font-weight: 700; font-size: .84rem;
}
.cs-phone-foot { margin-top: 14px; font-size: .74rem; color: var(--ink-3); }

/* the two cards that float over the phone, as on the reference */
.cs-float {
  position: absolute; width: 182px; padding: 13px 15px;
  border-radius: var(--r-md); box-shadow: var(--sh-lg); text-align: left;
}
.cs-float-offers { top: -26px; right: -142px; background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--line); }
.cs-float-offers .cap {
  display: inline-block; margin-bottom: 8px; padding: 3px 8px; border-radius: 6px;
  background: var(--warning-bg); color: var(--warning);
  font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.cs-float-offers strong { display: block; font-size: .88rem; margin-bottom: 8px; }
.cs-float-offers ul { display: grid; gap: 7px; }
.cs-float-offers li { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--ink-2); }
.cs-float-offers li .dot {
  display: grid; place-items: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--tint); color: var(--primary); font-size: .68rem; font-weight: 800;
}
.cs-float-report {
  bottom: -30px; left: -152px;
  background: var(--grad); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cs-float-report strong { display: block; font-size: .88rem; }
.cs-float-report span { font-size: .76rem; opacity: .88; }

/* ---------- five-up benefit strip ---------- */
.cs-feats {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-12) var(--sp-10); text-align: center;
}
/* The icon sits on the page, not in a tinted tile. Five tiles in a row read
   as five buttons; five glyphs read as one thought. */
.cs-feat .ic {
  display: grid; place-items: center; height: 34px; margin: 0 auto var(--sp-6);
  color: var(--primary);
}
.cs-feat .ic svg { width: 30px; height: 30px; }
.cs-feat h3 { font-size: var(--text-h4); font-weight: 600; margin-bottom: 10px; }
.cs-feat p { font-size: var(--text-small); color: var(--ink-2); line-height: 1.5; }

/* ---------- score band table ---------- */
.cs-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); overflow: hidden;
}
/* One bar across the head rather than two colours meeting mid-table. */
.cs-table th {
  padding: 22px 30px; text-align: left; color: #fff; background: var(--secondary);
  font-size: var(--text-small); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.cs-table th:first-child { text-align: center; }
.cs-table td { padding: 32px 30px; border-top: 1px solid var(--line); vertical-align: middle; }
.cs-table td:first-child { text-align: center; width: 30%; border-right: 1px solid var(--line); }
.cs-band { display: block; font-size: 1.75rem; font-weight: 600; letter-spacing: -.03em; }
.cs-tag {
  display: inline-block; margin-top: 12px; padding: 5px 13px; border-radius: var(--r-pill);
  color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
}
.cs-tag.is-poor { background: var(--poor); }
.cs-tag.is-fair { background: var(--fair); }
.cs-tag.is-good { background: var(--good); }
.cs-implications { display: grid; gap: 12px; }
.cs-implications li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--text-body);
  color: var(--ink-2); line-height: 1.45; }
.cs-implications .tick {
  flex-shrink: 0; margin-top: 4px;
  display: grid; place-items: center; width: 18px; height: 18px;
  color: var(--primary);
}

/* ---------- explainer carousel ---------- */
.cs-carousel .car-track { scroll-snap-type: x mandatory; }
.cs-carousel .car-track > * { flex: 0 0 100%; scroll-snap-align: start; }
.cs-carousel { padding: 0 var(--sp-16); }
.cs-slide { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--sp-12); align-items: center; }
.cs-slide-art {
  background: var(--surface); border-radius: var(--r-xl);
  padding: var(--sp-12); display: grid; place-items: center; min-height: 340px;
}
.cs-slide-art img { width: 100%; max-width: 260px; height: auto; }
.cs-slide h3 { font-size: var(--text-h2); font-weight: 600; margin-bottom: var(--sp-6); }

/* what moves the number — weights, drawn as bars */
.cs-weights { width: 100%; display: grid; gap: 14px; }
.cs-weights div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: .84rem; }
.cs-weights dt { font-weight: 600; }
.cs-weights dd { font-weight: 800; color: var(--secondary); }
.cs-weights .bar { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--surface-alt); }
.cs-weights .bar > i { display: block; height: 100%; border-radius: 999px; background: var(--grad); }

/* Below this the hero is still two columns but the right one is too narrow
   for a card to hang off the phone without pushing the page sideways. */
@media (max-width: 1200px) {
  .cs-float { display: none; }
}

@media (max-width: 1024px) {
  .cs-hero-grid { grid-template-columns: 1fr; gap: var(--sp-12); }
  .cs-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10) var(--sp-8); }
  .cs-feats > :last-child { grid-column: 1 / -1; }
  .cs-carousel { padding: 0; }
  .cs-carousel .car-btn.prev { left: 4px; }
  .cs-carousel .car-btn.next { right: 4px; }
  .cs-slide { grid-template-columns: 1fr; gap: var(--sp-8); }
}

@media (max-width: 640px) {
  .cs-hero { padding: var(--sp-10) 0; }
  .cs-feats { grid-template-columns: 1fr; }
  .cs-feats > :last-child { grid-column: auto; }
  .cs-table th, .cs-table td { padding: 16px; }
  .cs-table td:first-child { width: 34%; }
  .cs-band { font-size: 1.15rem; }
  .cs-slide-art { min-height: 0; padding: var(--sp-6); }
}