/* blog-v2.css — editorial article layout (Stripe / Home Loan Experts / NerdWallet inspired).
   Opt-in: only applies when <body class="blog-v2">. Overrides the per-page inline
   typography with higher-specificity selectors. No overlays, popups or animation. */

body.blog-v2 {
  background: #ffffff;
  --v2-ink: #0f2a1d;
  --v2-body: #2b3a33;
  --v2-muted: #5b6b63;
  --v2-line: #e4e9e6;
  --v2-band: #f1f4f1;
  --v2-green: #1A4D2E;
  --v2-green-soft: #e8f3ec;
  --v2-accent: #D87C4A;
  --v2-callout: #eef6fb;
}

/* ── Title band (replaces the dark photo hero) ───────────────────────────── */
body.blog-v2 #main-content {
  background: var(--v2-band) !important;
  padding: 3.25rem 0 2.5rem !important;
  border-bottom: 1px solid var(--v2-line);
}
body.blog-v2 #main-content > div[aria-hidden="true"],
body.blog-v2 #main-content > .absolute { display: none !important; }
body.blog-v2 #main-content > div.relative { max-width: 960px; }
body.blog-v2 #main-content nav { color: var(--v2-muted) !important; }
body.blog-v2 #main-content nav a { color: var(--v2-muted) !important; }
body.blog-v2 #main-content nav a:hover { color: var(--v2-green) !important; }
body.blog-v2 #main-content nav i { color: #9aa7a0 !important; }
body.blog-v2 #main-content span.inline-flex.rounded-full {
  background: var(--v2-green-soft) !important;
  color: var(--v2-green) !important;
  border-color: #cfe5d6 !important;
}
body.blog-v2 #main-content h1 {
  color: var(--v2-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.12 !important;
  font-size: clamp(2rem, 4.4vw, 3.1rem) !important;
  max-width: 24ch;
  max-width: 820px;
}
body.blog-v2 #main-content .eeat-signals,
body.blog-v2 #main-content .eeat-signals * { color: var(--v2-muted) !important; }
body.blog-v2 #main-content .eeat-signals strong { color: var(--v2-ink) !important; }
body.blog-v2 #main-content .eeat-signals .rounded-full {
  background: var(--v2-green-soft) !important;
  border-color: #cfe5d6 !important;
}
body.blog-v2 #main-content .eeat-signals .rounded-full i { color: var(--v2-green) !important; }
body.blog-v2 #main-content .text-white\/30 { color: #b6c0ba !important; }
body.blog-v2 #main-content .text-gray-300,
body.blog-v2 #main-content .text-gray-300 strong,
body.blog-v2 #main-content .text-gray-300 span { color: var(--v2-muted) !important; }
body.blog-v2 #main-content .text-emerald-300 { color: var(--v2-green) !important; }
body.blog-v2 #main-content [data-quiz-trigger] {
  background: var(--v2-accent) !important;
  color: var(--v2-ink) !important;
  border-radius: 999px !important;
  padding: .7rem 1.4rem !important;
}
body.blog-v2 #main-content [data-quiz-trigger]:hover { background: #b8632f !important; }

/* ── Alternate hero template (section.hero-pattern) ──────────────────────── */
body.blog-v2 section.hero-pattern {
  background: var(--v2-band) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--v2-line);
  color: var(--v2-body) !important;
}
body.blog-v2 section.hero-pattern > .absolute { display: none !important; }
body.blog-v2 section.hero-pattern > div.relative { padding-top: 3rem !important; padding-bottom: 2.25rem !important; max-width: 960px; }
body.blog-v2 section.hero-pattern [class*="text-"]:not(.bg-accent) { color: var(--v2-muted) !important; }
body.blog-v2 section.hero-pattern strong,
body.blog-v2 section.hero-pattern a:hover { color: var(--v2-ink) !important; }
body.blog-v2 section.hero-pattern h1[class] {
  color: var(--v2-ink) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.12 !important;
  font-size: clamp(2rem, 4.4vw, 3.1rem) !important;
}
body.blog-v2 section.hero-pattern p.text-lg,
body.blog-v2 section.hero-pattern p[class*="text-xl"] { color: var(--v2-body) !important; }
body.blog-v2 section.hero-pattern .rounded-full:not(.bg-accent) { background: var(--v2-green-soft) !important; border-color: #cfe5d6 !important; }
body.blog-v2 section.hero-pattern .rounded-full i { color: var(--v2-green) !important; }
body.blog-v2 section.hero-pattern i.fas { color: var(--v2-green) !important; }
body.blog-v2 section.hero-pattern .bg-accent { background: var(--v2-accent) !important; color: var(--v2-ink) !important; }
body.blog-v2 section.hero-pattern + div, body.blog-v2 section.hero-pattern ~ .bg-gray-50 { background: #fff; }

/* ── Reading column ──────────────────────────────────────────────────────── */
body.blog-v2 article.blog-content,
body.blog-v2 .blog-content {
  max-width: 740px;
  color: var(--v2-body);
  font-size: 1.125rem;
  line-height: 1.8;
}
body.blog-v2 .blog-content p {
  margin: 0 0 1.25rem;
  color: var(--v2-body);
  font-size: 1.125rem;
  line-height: 1.8;
}
body.blog-v2 .blog-content > p:first-of-type {
  font-size: 1.3rem;
  line-height: 1.65;
  color: var(--v2-ink);
}
body.blog-v2 .blog-content h2 {
  font-size: clamp(1.6rem, 3vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--v2-ink);
  margin: 3rem 0 1rem;
  padding: 0;
  border: 0;
  scroll-margin-top: 110px;
}
body.blog-v2 .blog-content h2::before,
body.blog-v2 .blog-content h2::after { content: none; }
body.blog-v2 .blog-content h3 {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--v2-ink);
  margin: 2.1rem 0 .6rem;
}
body.blog-v2 .blog-content a:not(.btn):not([class*="bg-"]) {
  color: #0b6b8a;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body.blog-v2 .blog-content a:not(.btn):not([class*="bg-"]):hover { color: var(--v2-green); }
body.blog-v2 .blog-content strong { color: var(--v2-ink); }

/* Check-mark bullets (Home Loan Experts) */
body.blog-v2 .blog-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
body.blog-v2 .blog-content ul > li {
  position: relative;
  padding: 0 0 0 1.9rem;
  margin: 0 0 .7rem;
  line-height: 1.7;
}
body.blog-v2 .blog-content ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: #2f9e5b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8'/%3E%3C/svg%3E") center / 72% no-repeat;
}
body.blog-v2 .blog-content ol {
  padding-left: 1.5rem;
  margin: 0 0 1.5rem;
}
body.blog-v2 .blog-content ol > li { margin: 0 0 .7rem; padding-left: .3rem; line-height: 1.7; }
body.blog-v2 .blog-content ol > li::marker { color: var(--v2-green); font-weight: 700; }

/* Tables */
body.blog-v2 .blog-content table {
  width: 100%;
  font-size: .98rem;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--v2-line);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5rem 0 2rem;
}
body.blog-v2 .blog-content thead th {
  background: var(--v2-band);
  color: var(--v2-ink);
  text-align: left;
  font-weight: 700;
  padding: .8rem 1rem;
}
body.blog-v2 .blog-content tbody td { padding: .8rem 1rem; border-top: 1px solid var(--v2-line); vertical-align: top; }
body.blog-v2 .blog-content tbody tr:nth-child(even) td { background: #fafbfa; }

/* Callouts (existing + new) — "What you should do" box (Home Loan Experts) */
body.blog-v2 .blog-content .callout,
body.blog-v2 .blog-content .callout-info,
body.blog-v2 .blog-content .callout-tip,
body.blog-v2 .blog-content .callout-warning,
body.blog-v2 .blog-content .key-takeaways {
  background: var(--v2-callout);
  border: 0;
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
  margin: 2rem 0;
  color: var(--v2-body);
}
body.blog-v2 .blog-content .callout-warning { background: #fff7ed; }
body.blog-v2 .blog-content blockquote {
  margin: 2rem 0;
  padding: .2rem 0 .2rem 1.4rem;
  border-left: 4px solid var(--v2-accent);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--v2-ink);
  font-style: normal;
}

/* ── On-this-page box (built by blog-v2.js) ──────────────────────────────── */
.v2-toc {
  background: var(--v2-band, #f1f4f1);
  border: 1px solid var(--v2-line, #e4e9e6);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2.25rem;
}
.v2-toc-title {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5b6b63;
  margin: 0 0 .6rem;
}
.v2-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: v2toc; }
.v2-toc li { counter-increment: v2toc; margin: 0; padding: .28rem 0; font-size: 1rem; line-height: 1.45; }
.v2-toc li::before { content: counter(v2toc) "."; color: #1A4D2E; font-weight: 700; display: inline-block; width: 1.6rem; }
body.blog-v2 .blog-content .v2-toc a:not(.x):not([class*="bg-"]) { color: #0b6b8a; text-decoration: none; }
body.blog-v2 .blog-content .v2-toc a:not(.x):not([class*="bg-"]):hover { text-decoration: underline; }
body.blog-v2 .blog-content .v2-toc li { margin: 0; padding: .28rem 0; }
body.blog-v2 .blog-content .v2-toc li::before { background: none; position: static; width: 1.6rem; height: auto; border-radius: 0; }

/* ── "Dive deeper" / end of article (NerdWallet) ─────────────────────────── */
body.blog-v2 #article-cta { background: var(--v2-band) !important; }
body.blog-v2 #article-cta h2 { color: var(--v2-ink); letter-spacing: -0.015em; }

@media (max-width: 640px) {
  body.blog-v2 #main-content { padding: 2rem 0 1.75rem !important; }
  body.blog-v2 .blog-content, body.blog-v2 .blog-content p { font-size: 1.05rem; }
  body.blog-v2 .blog-content > p:first-of-type { font-size: 1.15rem; }
}

/* Byline contrast on any hero (some templates ship white text on a light hero) */
body.blog-v2 .eeat-signals,
body.blog-v2 .eeat-signals span,
body.blog-v2 .eeat-signals time { color: var(--v2-muted) !important; }
body.blog-v2 .eeat-signals strong,
body.blog-v2 .eeat-signals a { color: var(--v2-ink) !important; }
body.blog-v2 .eeat-signals .rounded-full { background: var(--v2-green-soft) !important; border-color: #cfe5d6 !important; }
body.blog-v2 .eeat-signals .rounded-full i { color: var(--v2-green) !important; }

/* Share buttons in the title band */
body.blog-v2 #main-content a[class*="bg-white"],
body.blog-v2 #main-content a[class*="bg-white"] i { color: var(--v2-ink) !important; }
body.blog-v2 #main-content a[class*="bg-white"] { background: #fff !important; border: 1px solid var(--v2-line); }

/* ── Tone down the heavy green: dark-green CTA/callout boxes become light cards ── */
body.blog-v2 .cta-block {
  background: var(--v2-band) !important;
  background-image: none !important;
  color: var(--v2-ink) !important;
  border: 1px solid var(--v2-line);
}
body.blog-v2 .blog-content div[class*="bg-brand-5"]:not([class*="rounded-full"]) h1,
body.blog-v2 .blog-content div[class*="bg-brand-5"]:not([class*="rounded-full"]) h2,
body.blog-v2 .blog-content div[class*="bg-brand-5"]:not([class*="rounded-full"]) h3,
body.blog-v2 .cta-block h2, body.blog-v2 .cta-block h3,
body.blog-v2 .blog-content div[class*="bg-brand-6"] h2, body.blog-v2 .blog-content div[class*="bg-brand-6"] h3,
body.blog-v2 .blog-content div[class*="bg-brand-7"] h2, body.blog-v2 .blog-content div[class*="bg-brand-7"] h3,
body.blog-v2 .blog-content div[class*="from-brand-6"] h2, body.blog-v2 .blog-content div[class*="from-brand-6"] h3,
body.blog-v2 .blog-content div[class*="from-primary-6"] h2, body.blog-v2 .blog-content div[class*="from-primary-6"] h3,
body.blog-v2 section.bg-brand-500:not(.hero-pattern) h1, body.blog-v2 section.bg-brand-500:not(.hero-pattern) h2, body.blog-v2 section.bg-brand-500:not(.hero-pattern) h3 { color: var(--v2-ink) !important; }
body.blog-v2 .blog-content div[class*="bg-brand-5"] p,
body.blog-v2 .blog-content div[class*="bg-brand-6"] p,
body.blog-v2 .blog-content div[class*="bg-brand-7"] p,
body.blog-v2 .blog-content div[class*="from-brand-6"] p,
body.blog-v2 .blog-content div[class*="from-primary-6"] p,
body.blog-v2 .cta-block p,
body.blog-v2 section.bg-brand-500:not(.hero-pattern) p,
body.blog-v2 section.bg-brand-500:not(.hero-pattern) li { color: var(--v2-body) !important; }
/* keep the action buttons strong inside those light cards */
body.blog-v2 .cta-block a[class*="bg-accent"], body.blog-v2 .blog-content a[class*="bg-accent"],
body.blog-v2 section.bg-brand-500:not(.hero-pattern) a[class*="bg-accent"] {
  background: var(--v2-accent) !important; color: var(--v2-ink) !important; border-radius: 999px; text-decoration: none !important;
}
body.blog-v2 .cta-block a[class*="bg-white"] { background: #fff !important; color: var(--v2-ink) !important; border: 1px solid var(--v2-line); border-radius: 999px; }
body.blog-v2 .cta-block a:not([class*="bg-"]) { color: #0b6b8a !important; }

/* Sidebar primary buttons: orange accent instead of dark green */
body.blog-v2 aside a[class*="bg-brand-5"],
body.blog-v2 aside a[class*="bg-brand-6"],
body.blog-v2 aside a[class*="bg-brand-7"] { background: var(--v2-accent) !important; color: var(--v2-ink) !important; }

/* ── JS-tagged dark blocks → light cards (see blog-v2.js) ────────────────── */
body.blog-v2 .v2-light {
  background: var(--v2-band) !important;
  background-image: none !important;
  color: var(--v2-ink) !important;
  border: 1px solid var(--v2-line);
  box-shadow: none !important;
}
body.blog-v2 .v2-light h1, body.blog-v2 .v2-light h2, body.blog-v2 .v2-light h3, body.blog-v2 .v2-light h4,
body.blog-v2 .v2-light strong { color: var(--v2-ink) !important; }
body.blog-v2 .v2-light p, body.blog-v2 .v2-light li, body.blog-v2 .v2-light span,
body.blog-v2 .v2-light small, body.blog-v2 .v2-light label, body.blog-v2 .v2-light div { color: var(--v2-body) !important; }
body.blog-v2 .v2-light i.fas, body.blog-v2 .v2-light i.fa, body.blog-v2 .v2-light i.far { color: var(--v2-green) !important; }
body.blog-v2 .v2-light a:not([class*="bg-"]):not([class*="border-"]) { color: #0b6b8a !important; }
body.blog-v2 .v2-light a[class*="bg-accent"], body.blog-v2 .v2-light button[class*="bg-accent"],
body.blog-v2 .v2-light a[class*="bg-accent"] *, body.blog-v2 .v2-light button[class*="bg-accent"] * {
  background: var(--v2-accent) !important; color: var(--v2-ink) !important; border-radius: 999px; text-decoration: none !important;
}
body.blog-v2 .v2-light a[class*="bg-white"], body.blog-v2 .v2-light button[class*="bg-white"],
body.blog-v2 .v2-light a[class*="border-white"], body.blog-v2 .v2-light a[class*="border-2"] {
  background: #fff !important; color: var(--v2-ink) !important; border: 1px solid var(--v2-line) !important; border-radius: 999px;
}
body.blog-v2 .v2-light a[class*="bg-white"] *, body.blog-v2 .v2-light button[class*="bg-white"] * { color: var(--v2-ink) !important; background: transparent !important; }
/* small coloured pills inside light cards */
body.blog-v2 .v2-light span[class*="rounded-full"] { background: var(--v2-green-soft) !important; color: var(--v2-green) !important; }

/* ── Title band: catch-all text colours (any colour utility on a light band) ── */
body.blog-v2 #main-content [class*="text-"]:not(a[class*="bg-"]):not(button):not([class*="bg-accent"]) { color: var(--v2-muted) !important; }
body.blog-v2 #main-content h1[class] { color: var(--v2-ink) !important; }
body.blog-v2 #main-content h1 span[class] { color: var(--v2-accent) !important; }
body.blog-v2 #main-content strong { color: var(--v2-ink) !important; }
body.blog-v2 #main-content span[class*="rounded-full"]:not(.bg-accent) { background: var(--v2-green-soft) !important; color: var(--v2-green) !important; border-color: #cfe5d6 !important; }
body.blog-v2 #main-content p[class*="text-lg"], body.blog-v2 #main-content p[class*="text-xl"] { color: var(--v2-body) !important; }
body.blog-v2 section.hero-pattern h1 span[class] { color: var(--v2-accent) !important; }

body.blog-v2 #main-content h1[class]:not(.x):not(.y):not(.z) { color: var(--v2-ink) !important; }
body.blog-v2 #main-content h1 span[class]:not(.x):not(.y) { color: var(--v2-accent) !important; }
body.blog-v2 section.hero-pattern h1[class]:not(.x):not(.y):not(.z):not(.w) { color: var(--v2-ink) !important; }

/* darker accent for coloured heading words on the light band (contrast) */
body.blog-v2 #main-content h1 span[class]:not(.x):not(.y):not(.z),
body.blog-v2 section.hero-pattern h1 span[class]:not(.x):not(.y):not(.z) { color: #b8632f !important; }

/* No colour transitions when a block is restyled (avoids a visible fade from the old dark colours) */
body.blog-v2 .v2-light, body.blog-v2 .v2-light * { transition: none !important; }

/* Coloured words inside any article H1 on the light title band */
body.blog-v2 h1 span[class*="text-"]:not(.x):not(.y):not(.z) { color: #b8632f !important; }

/* Centered boxes: keep narrow paragraphs centred (global .blog-content p margin reset removed mx-auto) */
body.blog-v2 .blog-content .text-center p,
body.blog-v2 .blog-content .v2-light.text-center p,
body.blog-v2 .blog-content .v2-light p[class*="mx-auto"],
body.blog-v2 .blog-content p[class*="mx-auto"] { margin-left: auto !important; margin-right: auto !important; }
body.blog-v2 .blog-content .v2-light p, body.blog-v2 .blog-content .cta-block p { font-size: 1rem; line-height: 1.65; }
body.blog-v2 .blog-content .v2-light p[class*="max-w"], body.blog-v2 .blog-content .text-center p[class*="max-w"] { max-width: 34rem; }

/* ── CTA cards: white card, orange left accent bar, left-aligned (Ray's preferred style) ── */
body.blog-v2 .v2-light,
body.blog-v2 .cta-block {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid var(--v2-line) !important;
  border-left: 4px solid var(--v2-accent) !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 28px rgba(15, 42, 29, .08) !important;
  text-align: left !important;
  padding: 1.75rem 2rem !important;
}
body.blog-v2 .v2-light h1, body.blog-v2 .v2-light h2, body.blog-v2 .v2-light h3, body.blog-v2 .v2-light h4,
body.blog-v2 .v2-light p, body.blog-v2 .cta-block h2, body.blog-v2 .cta-block h3, body.blog-v2 .cta-block p,
body.blog-v2 .v2-light .text-center, body.blog-v2 .v2-light [class*="text-center"] {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}
body.blog-v2 .v2-light h2, body.blog-v2 .v2-light h3, body.blog-v2 .cta-block h2, body.blog-v2 .cta-block h3 {
  font-size: 1.45rem !important; line-height: 1.3 !important; margin-top: 0 !important; margin-bottom: .6rem !important; font-weight: 800 !important;
}
body.blog-v2 .v2-light p, body.blog-v2 .cta-block p { font-size: 1.02rem !important; line-height: 1.65 !important; margin-bottom: 1.1rem !important; }
body.blog-v2 .v2-light [class*="justify-center"], body.blog-v2 .cta-block [class*="justify-center"],
body.blog-v2 .v2-light .cta-buttons, body.blog-v2 .cta-block .cta-buttons { justify-content: flex-start !important; }
body.blog-v2 .v2-light a[class*="bg-accent"], body.blog-v2 .v2-light button[class*="bg-accent"],
body.blog-v2 .cta-block a[class*="bg-accent"] { border-radius: 10px !important; padding: .8rem 1.4rem !important; }
body.blog-v2 .v2-light a[class*="bg-white"], body.blog-v2 .v2-light button[class*="bg-white"],
body.blog-v2 .v2-light a[class*="border-white"], body.blog-v2 .cta-block a[class*="bg-white"] {
  border-radius: 10px !important; border: 2px solid var(--v2-line) !important; padding: .8rem 1.4rem !important; font-weight: 700;
}
@media (max-width: 640px) { body.blog-v2 .v2-light, body.blog-v2 .cta-block { padding: 1.35rem 1.25rem !important; } }