/* ============================================================================
   page-financing.css - /financing/

   This file is small on purpose. Its main job is to EXIST: header.php links
   wtv-base.css only when a page sets $page_css, and the hero on this page is
   built from .wtv-* classes that live in wtv-base.css. Without a page
   stylesheet the band renders as unstyled text on white.

   Everything below the hero is still .container.prose from inventory.css and
   is deliberately untouched.
   ============================================================================ */

/* The hero's two CTAs. Same shape as .ct-btn-row on /contact/, restated here
   rather than shared because page-contact.css is not loaded on this page and
   a cross-page dependency between two page stylesheets is worse than eight
   duplicated lines. */
.fin-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
}
.fin-btn-row--center { justify-content: center; }

/* Below 420px the two buttons cannot sit side by side without the phone
   number wrapping mid-number, so they stack full width instead. */
@media (max-width: 420px) {
  .fin-btn-row { flex-direction: column; align-items: stretch; }
}

/* ============================================================================
   2026-09-24 REBUILD: ElmBlue + 700Credit. LAYOUT ONLY.
   Buttons, cards and bands are the site's own (.wtv-button, .wtv-card,
   .wtv-hero-band, .wtv-band) from wtv-base.css; Chance rejected invented
   rounder buttons on the preview. This file adds grids, the check icons and
   the terms tiles, nothing that restyles a shared component.
   ============================================================================ */

/* Two ways to start: two cards, the ElmBlue one marked as the main route
   with a lime top rule (lime as an edge, never as text on white). */
.fin-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.fin-path { display: flex; flex-direction: column; gap: .6rem; }
.fin-path p { margin: 0; }
.fin-path--main { border-top: 4px solid var(--wtv-lime); }
.fin-path__go { margin-top: auto !important; padding-top: .6rem; }

/* How it works: an ordered list laid out by the wtv grid, so the markers go. */
.fin-steps { list-style: none; padding: 0; margin: 0; }

/* Do you qualify? */
.fin-qualify { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.fin-checks { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .65rem; }
.fin-checks li { position: relative; padding-left: 1.85rem; }
/* Navy disc, lime tick: the same pairing the site uses for its other checks.
   The tick is drawn in CSS so no icon file ships for it. */
.fin-checks li::before {
  content: ""; position: absolute; left: 0; top: .2em;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--wtv-navy);
}
.fin-checks li::after {
  content: ""; position: absolute; left: .42rem; top: calc(.2em + .26rem);
  width: .36rem; height: .6rem;
  border: solid var(--wtv-lime); border-width: 0 .16rem .16rem 0;
  transform: rotate(45deg);
}
.fin-checks strong { font-variant-numeric: tabular-nums; }

/* The terms: three figure tiles. */
.fin-terms {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
}
.fin-terms li { text-align: center; display: flex; flex-direction: column; gap: .35rem; }
.fin-terms .wtv-stat-num { color: var(--wtv-navy); font-weight: 900; font-variant-numeric: tabular-nums; }
.fin-terms span { color: var(--wtv-muted-text); }
.fin-s179 { margin: 1.25rem auto 0; max-width: 60ch; text-align: center; }

/* Straight answers. */
.fin-answers { margin-top: 1.25rem; }
.fin-answers p { margin: 0 0 .9rem; }

@media (max-width: 760px) {
  .fin-paths, .fin-qualify { grid-template-columns: minmax(0, 1fr); }
  .fin-terms { grid-template-columns: minmax(0, 1fr); }
  .fin-terms li { flex-direction: row; align-items: baseline; justify-content: space-between; text-align: left; }
  .fin-path .wtv-button { width: 100%; }
}

/* The card buttons sit inside a <p>, where the body-link rule underlines every
   <a>. A button is not a text link. (0,3,1) outranks the body-link rule. */
.wtv .fin-path a.wtv-button,
.wtv .fin-path a.wtv-button:hover { text-decoration: none; }

/* Straight answers, centred under its heading (Chance, 2026-09-24). Each <p>
   carries the site's 672px reading cap, so without auto margins the block
   sat against the left of the container while the H2 was centred. */
.fin-answers { text-align: center; }
.fin-answers p { margin-inline: auto; text-wrap: balance; }