/* ===================================================================
 * Use-case landing pages (new-to-canada, mortgage-ready, rebuild-credit)
 * Built on index's hero-about / section / features-stack / feature-row /
 * final-cta structure (all styled in main.css). This file only adds the
 * few page-specific bits.
 * =================================================================== */

/* Hero CTA row */
.uc-hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.uc-hero-link {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  transition: color 0.15s;
}
.uc-hero-link:hover { color: #fff; }

/* Narrow reading column for the intro prose section */
.uc-narrow { max-width: 760px; }
.uc-prose p {
  font-size: 1.06rem;
  line-height: 1.72;
  color: var(--color-fg-soft);
  margin: 0 0 20px;
}
.uc-prose p:last-child { margin-bottom: 0; }

/* Subtle alternating background for the feature-rows section */
.uc-section-alt { background: var(--color-surface); }

/* ===================================================================
 * Contextual feature-row visuals (one per row, themed to the content).
 * White card on the dark .feature-visual container, matching the
 * payment-showcase aesthetic.
 * =================================================================== */
.uc-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 40px rgba(10, 37, 64, 0.08), 0 4px 12px rgba(10, 37, 64, 0.05);
  padding: 1.1rem 1.2rem;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.uc-card-head { display: flex; align-items: center; justify-content: space-between; }
.uc-card-title { font-weight: 700; font-size: 0.95rem; color: var(--color-fg); }
.uc-card-tag {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; background: var(--color-accent-soft); color: #166534;
}
.uc-card-tag-muted { background: #f1f5f9; color: #64748b; }
.uc-card-foot {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; color: var(--color-muted); border-top: 1px solid var(--color-border); padding-top: 0.7rem;
}
.uc-card-foot svg { width: 15px; height: 15px; color: var(--color-accent); flex: 0 0 auto; }

/* Timeline: a credit file building month by month */
.uc-timeline { display: flex; flex-direction: column; gap: 7px; }
.uc-tl-row { display: flex; align-items: center; gap: 10px; }
.uc-tl-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.uc-tl-dot-on { background: var(--color-accent); }
.uc-tl-dot-off { background: #cbd5e1; }
.uc-tl-month { font-size: 0.85rem; color: var(--color-fg-soft); flex: 1; }
.uc-tl-state { font-size: 0.78rem; font-weight: 600; }
.uc-tl-state-on { color: #166534; }
.uc-tl-state-off { color: #94a3b8; }

/* Meter: a horizontal strength/readiness bar */
.uc-meter { display: flex; flex-direction: column; gap: 0.5rem; }
.uc-meter-label { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--color-fg-soft); }
.uc-meter-track { height: 12px; border-radius: 100px; background: #eef2f7; position: relative; overflow: hidden; }
.uc-meter-fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 100px;
  background: linear-gradient(90deg, #2ECC71, #06b6d4);
}
.uc-meter-scale { display: flex; justify-content: space-between; font-size: 0.7rem; color: #94a3b8; }
.uc-meter-marker {
  position: absolute; top: -3px; width: 2px; height: 18px; background: var(--color-fg);
  border-radius: 2px;
}
.uc-meter-note { font-size: 0.8rem; color: var(--color-fg-soft); }
.uc-meter-note strong { color: var(--color-fg); }

/* Trend SVG block */
.uc-trend { width: 100%; }
.uc-trend svg { width: 100%; height: auto; display: block; }

/* Checklist */
.uc-check { display: flex; flex-direction: column; gap: 9px; }
.uc-check-row { display: flex; align-items: flex-start; gap: 9px; font-size: 0.86rem; color: var(--color-fg-soft); line-height: 1.4; }
.uc-check-ico {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-accent-soft); color: #166534;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.uc-check-ico svg { width: 11px; height: 11px; }

/* Lesson card list */
.uc-lessons { display: flex; flex-direction: column; gap: 8px; }
.uc-lesson {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--color-border); border-radius: 10px; background: #fafbfc;
}
.uc-lesson-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
  background: var(--color-fg); color: #fff; font-size: 0.72rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.uc-lesson-txt { font-size: 0.85rem; color: var(--color-fg); font-weight: 500; }

/* Two-column "we do / we won't" */
.uc-dodont { display: grid; grid-template-columns: 1fr; gap: 9px; }
.uc-dd-row { display: flex; align-items: flex-start; gap: 9px; font-size: 0.85rem; line-height: 1.4; }
.uc-dd-do { color: var(--color-fg-soft); }
.uc-dd-ico-do, .uc-dd-ico-no {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.uc-dd-ico-do { background: var(--color-accent-soft); color: #166534; }
.uc-dd-ico-no { background: #fee2e2; color: #991b1b; }
.uc-dd-ico-do svg, .uc-dd-ico-no svg { width: 11px; height: 11px; }

/* ===================================================================
 * Intro stat strip — one framing paragraph + 3 contextual stat cards.
 * Replaces the old wall-of-text intro.
 * =================================================================== */
.uc-intro-lead {
  max-width: 720px;
  margin: 0 auto 36px;
  text-align: center;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--color-fg-soft);
}
.uc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
}
.uc-stat {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.uc-stat-num {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-accent);
  line-height: 1.1;
}
.uc-stat-num-sm { font-size: 1.35rem; }
.uc-stat-label {
  margin-top: 8px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--color-fg-soft);
}
@media (max-width: 720px) {
  .uc-stats { grid-template-columns: 1fr; gap: 12px; max-width: 420px; }
  .uc-stat { padding: 20px; }
}