/* =====================================
   CREDIT CARDS — CORPORATE TYPOGRAPHY REFRESH 20260826
   Matches the refreshed Denarya / About system.
===================================== */


/* =====================================
   BASE TYPE
===================================== */

body {
  font-family:
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-synthesis: none;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-family: inherit;
}


/* =====================================
   DISPLAY HEADINGS
===================================== */

body h1,
body h2,
body h3 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight: 400;
  font-synthesis: none;
}

.cc-hero-left h1 {
  font-weight: 400;
  letter-spacing: -0.025em;
}

.cc-seo-duo h2,
.cc-insights-header h2,
.cc-workspace-header h2 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight: 400;
  letter-spacing: -0.025em;
}


/* =====================================
   EDITORIAL GOLD EMPHASIS
===================================== */

.cc-seo-duo h2 span {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-style: normal;
  font-weight: 400;
}


/* =====================================
   KICKERS / EYEBROWS / MICRO LABELS
===================================== */

.cc-hero-kicker,
.cc-seo-kicker,
.cc-workspace-eyebrow,
.cc-mobile-preview-kicker,
.cc-denarius-inline-kicker,
.point-value-engine-kicker,
.wallet-verdict-kicker,
.impact-kicker {
  font-family:
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-weight: 500;
}


/* =====================================
   HERO SUPPORTING TYPE
===================================== */

.cc-hero-sub {
  font-weight: 400;
}

.cc-hero-trust span,
.cc-trust-badge {
  font-weight: 500;
}


/* =====================================
   EDITORIAL BODY COPY
===================================== */

.cc-seo-duo p,
.cc-insights-header p,
.cc-workspace-header p {
  font-weight: 400;
}


/* =====================================
   WORKSPACE / INTERFACE HIERARCHY
===================================== */

.cc-workspace-tab {
  font-weight: 500;
}

body strong,
body b {
  font-weight: 600;
}


/* =====================================
   MAJOR UI HEADINGS
===================================== */

.wallet-section h3,
.spending-analysis-section h3,
.perk-reality-section h3,
.wallet-review-section h3,
.results-section h3,
.credit-strategy-section h2,
.credit-strategy-section h3,
.interest-reality-section h3,
.cc-collapsible-header .section-header h2 {
  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight: 400;
}


/* =====================================
   SECONDARY CARD TITLES
===================================== */

.economics-title,
.welcome-bonus-preview-title,
.card-gotchas-title,
.wallet-review-detail-title,
.chart-title,
.statement-upload-card-subtitle,
.statement-upload-dropzone-title {
  font-family:
    "IBM Plex Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-weight: 500;
}


/* =====================================
   FOCUS MODE COPY
===================================== */

.cc-focus-toggle-copy span {
  font-weight: 500;
}

.cc-focus-toggle-copy strong {
  font-weight: 600;
}

.cc-focus-toggle-copy p {
  font-weight: 400;
}

.cc-focus-toggle-track::before {
  font-weight: 500;
}


/* =====================================
   LIGHT MODE — ABOUT-MATCHED TYPE COLOR
===================================== */

body:not(.dark-mode) .cc-hero-left h1,
body:not(.dark-mode) .cc-seo-duo h2,
body:not(.dark-mode) .cc-insights-header h2,
body:not(.dark-mode) .cc-workspace-header h2 {
  color: #17130f;
}

body:not(.dark-mode) .cc-hero-kicker,
body:not(.dark-mode) .cc-seo-kicker,
body:not(.dark-mode) .cc-workspace-eyebrow {
  color: #8f642c;
}

body:not(.dark-mode) .cc-seo-duo h2 span {
  color: #a97936;
  text-shadow: none;
}

body:not(.dark-mode) .cc-hero-sub,
body:not(.dark-mode) .cc-seo-duo p,
body:not(.dark-mode) .cc-insights-header p,
body:not(.dark-mode) .cc-workspace-header p {
  color: rgba(23, 19, 15, 0.68);
}


/* =====================================
   DARK MODE — ABOUT-MATCHED TYPE COLOR
===================================== */

body.dark-mode .cc-hero-left h1,
body.dark-mode .cc-seo-duo h2,
body.dark-mode .cc-insights-header h2,
body.dark-mode .cc-workspace-header h2 {
  color: #f5f5f2;
}

body.dark-mode .cc-hero-kicker,
body.dark-mode .cc-seo-kicker,
body.dark-mode .cc-workspace-eyebrow {
  color: #a98653;
}

body.dark-mode .cc-seo-duo h2 span {
  color: #c5a871;
  text-shadow: none;
}

body.dark-mode .cc-hero-sub,
body.dark-mode .cc-seo-duo p,
body.dark-mode .cc-insights-header p,
body.dark-mode .cc-workspace-header p {
  color: rgba(245, 245, 242, 0.72);
}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 768px) {
  .cc-hero-left h1,
  .cc-seo-duo h2,
  .cc-insights-header h2,
  .cc-workspace-header h2 {
    letter-spacing: -0.02em;
  }
}