/* Final blog brand layer. Loaded after specialty post styles. */
:root {
  --navy: #16324F;
  --glacier: #2E6F95;
  --ice: #E9F2F7;
  --ice2: #F5F9FB;
  --gold: #D9982F;
  --text: #22313F;
  --muted: #5B6B7A;
  --line: #D8E4EC;
  --card: #ffffff;
  --shadow: 0 2px 12px rgba(22,50,79,.08);
}

.blog-body,
.blog-hub-page {
  background:
    radial-gradient(circle at top right, rgba(46,111,149,.12), transparent 30%),
    linear-gradient(180deg, var(--ice) 0%, var(--ice2) 42%, #fff 100%);
  color: var(--text);
  font-family: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
}

.blog-body .header-snowball,
.blog-hub-page .header-snowball {
  filter: none;
  box-shadow: none;
}

.blog-body a,
.blog-hub-page a {
  color: var(--glacier);
}

.blog-body a:focus-visible,
.blog-hub-page a:focus-visible,
.blog-body button:focus-visible,
.blog-hub-page button:focus-visible {
  outline: 3px solid rgba(217,152,47,.55);
  outline-offset: 3px;
}

.blog-hero,
.blog-hub-hero,
.premium-blog-hub {
  padding: 48px 0 40px;
  background:
    radial-gradient(circle at 88% 12%, rgba(46,111,149,.12), transparent 28%),
    radial-gradient(circle at 12% 18%, rgba(217,152,47,.11), transparent 26%),
    linear-gradient(135deg, var(--ice) 0%, var(--ice2) 64%, #fff 100%);
  border-bottom: 1px solid var(--line);
}

.blog-body h1,
.blog-hub-page h1,
.blog-article-content h1,
.paycheck-article h1,
.student-article h1,
.debt-guide-article h1,
.cashback-article h1,
.practical-article h1 {
  max-width: 720px;
  color: var(--navy) !important;
  font-size: clamp(1.9rem, 4vw, 2.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
}

.blog-body h2,
.blog-hub-page h2,
.guide-heading h2,
.blog-article-content h2,
.paycheck-article h2,
.student-article h2,
.debt-guide-article h2,
.cashback-article h2,
.practical-article h2 {
  color: var(--navy) !important;
  font-size: 1.45rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.blog-lead {
  color: var(--muted) !important;
  font-size: 1.2rem !important;
  line-height: 1.75 !important;
  background: var(--ice2) !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--gold) !important;
  border-radius: 12px !important;
}

.blog-kicker,
.blog-pill,
.blog-tag,
.blog-tag.green,
.blog-pill.green {
  background: var(--ice) !important;
  color: var(--glacier) !important;
  border: 1px solid var(--line) !important;
}

.blog-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
  gap: 24px !important;
}

.blog-card,
.blog-card-green,
.blog-card-blue,
.blog-card-purple,
.blog-card-gold,
.blog-card-red,
.blog-feature-card,
.blog-principle-card,
.blog-glass-card,
.blog-feature-panel,
.blog-cta-box,
.blog-sidebar-card,
.blog-article-content,
.blog-footer-cta,
.blog-panel,
.blog-highlight,
.blog-warning,
.blog-insight,
.blog-example,
.blog-source-box,
.guide-callout,
.guide-caution,
.guide-faq,
.article-contents,
.method-box,
.source-card,
.paycheck-example,
.dashboard-example,
.comparison-card {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  background: var(--card) !important;
  box-shadow: var(--shadow) !important;
}

.blog-card,
.blog-card-premium {
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.blog-card-premium::before {
  display: none !important;
}

.blog-card:hover,
.blog-card-premium:hover {
  transform: translateY(-2px);
  border-color: var(--glacier) !important;
  box-shadow: 0 8px 24px rgba(22,50,79,.12) !important;
}

.blog-card h3 {
  display: -webkit-box;
  min-height: 0 !important;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.22;
}

.blog-card p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.blog-primary-btn,
.blog-primary-link,
.blog-feature-card a,
.blog-workbook-cta a {
  border-radius: 8px !important;
  background: var(--gold) !important;
  color: var(--navy) !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 18px rgba(217,152,47,.18) !important;
}

.blog-secondary-btn,
.blog-secondary-link,
.blog-card a,
.blog-sidebar-card a {
  border: 1px solid var(--glacier) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--glacier) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.blog-body main[class*="layout"] > article,
.blog-body article.paycheck-article,
.blog-body article.student-article,
.blog-body article.debt-guide-article,
.blog-body article.cashback-article,
.blog-body article.practical-article,
.blog-body .practical-article,
.blog-body .student-article,
.blog-body .debt-guide-article,
.blog-body .paycheck-article {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.blog-article-layout {
  grid-template-columns: minmax(0, 720px) minmax(240px, 295px) !important;
  justify-content: center;
}

.article-byline {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted) !important;
  font-size: .76rem !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
}

.article-byline span:not(:last-child)::after {
  content: "•";
  margin-left: 8px;
  color: var(--gold);
}

.section-number,
.guide-heading span {
  display: inline-grid !important;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px !important;
  background: var(--glacier) !important;
  color: #fff !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
}

.blog-highlight,
.blog-warning,
.blog-insight,
.blog-example,
blockquote,
.guide-callout,
.guide-caution {
  border-left: 3px solid var(--gold) !important;
  background: var(--ice2) !important;
}

.date-window-grid,
.assignment-table,
.money-calculation,
.sinking-example,
.week-split {
  max-width: 860px;
  margin: 24px auto;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  background: var(--ice2) !important;
  box-shadow: var(--shadow) !important;
}

.money-calculation strong,
.assignment-table strong,
.date-window-grid strong,
.sinking-example strong,
.week-split strong {
  color: var(--navy) !important;
}

.money-calculation tr:last-child,
.assignment-table tr:last-child,
.week-split tr:last-child {
  background: rgba(217,152,47,.14) !important;
  color: var(--navy) !important;
  font-weight: 800;
}

.blog-footer {
  border-top: 1px solid var(--line) !important;
  background: var(--card) !important;
  color: var(--muted) !important;
}

.blog-footer::after {
  content: " One paycheck at a time.";
}

@media (max-width: 980px) {
  .blog-article-layout {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 700px) {
  .blog-card-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .blog-body main[class*="layout"] > article,
  .blog-body article.paycheck-article,
  .blog-body article.student-article,
  .blog-body article.debt-guide-article,
  .blog-body article.cashback-article,
  .blog-body article.practical-article,
  .blog-body .practical-article,
  .blog-body .student-article,
  .blog-body .debt-guide-article,
  .blog-body .paycheck-article {
    max-width: none;
    padding: 20px;
  }
}

/* Blog hub polish: keeps Blog 1 aligned with the darker core site pages. */
.blog-hub-page {
  background:
    radial-gradient(circle at 10% 0%, rgba(217,152,47,.22), transparent 28%),
    radial-gradient(circle at 92% 4%, rgba(46,111,149,.26), transparent 32%),
    linear-gradient(180deg, #0b1f39 0, #16324f 250px, var(--ice) 251px, var(--ice2) 100%) !important;
}

.blog-hub-page .blog-hub-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 82% 18%, rgba(217,152,47,.18), transparent 30%),
    radial-gradient(circle at 14% 15%, rgba(46,111,149,.36), transparent 36%),
    linear-gradient(135deg, #07192f 0%, #16324f 54%, #2e6f95 140%) !important;
}

.blog-hub-page .blog-hub-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--glacier), #1aa36f, var(--gold));
}

.blog-hub-page .blog-hub-hero-grid {
  position: relative;
  z-index: 1;
  align-items: stretch;
  gap: clamp(22px, 4vw, 42px);
}

.blog-hub-page .blog-hub-hero h1,
.blog-hub-page .blog-hub-hero h2 {
  color: #fff !important;
  text-shadow: 0 2px 18px rgba(0,0,0,.22);
}

.blog-hub-page .blog-hub-hero p {
  max-width: 760px;
  color: rgba(255,255,255,.84) !important;
}

.blog-hub-page .blog-hub-hero .blog-pill,
.blog-hub-page .blog-hub-hero .blog-pill.green {
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.16);
}

.blog-hub-page .blog-feature-panel {
  border: 1px solid rgba(255,255,255,.28) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(233,242,247,.86)) !important;
  box-shadow: 0 24px 60px rgba(4,19,38,.28) !important;
}

.blog-hub-page .blog-feature-panel h2 {
  color: var(--navy) !important;
  text-shadow: none;
}

.blog-hub-page .blog-feature-panel p {
  color: var(--text) !important;
}

.blog-hub-page .blog-main {
  padding-top: clamp(22px, 4vw, 42px);
}

.blog-hub-page .blog-main > section {
  margin: 0 auto clamp(22px, 4vw, 42px);
}

.blog-hub-page .blog-section-title {
  align-items: end;
  gap: 18px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(216,228,236,.88);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(245,249,251,.84)),
    radial-gradient(circle at 95% 0%, rgba(217,152,47,.14), transparent 32%);
  box-shadow: 0 18px 42px rgba(22,50,79,.10);
}

.blog-hub-page .blog-section-title p {
  color: var(--muted);
}

.blog-hub-page .blog-band {
  padding: clamp(28px, 5vw, 54px) 0;
  border-block: 1px solid rgba(216,228,236,.9);
  background:
    radial-gradient(circle at 12% 15%, rgba(46,111,149,.12), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(233,242,247,.86)) !important;
}

.blog-hub-page .blog-card,
.blog-hub-page .blog-feature-card,
.blog-hub-page .blog-principle-card,
.blog-hub-page .seo-cluster-hub,
.blog-hub-page .blog-book-spotlight,
.blog-hub-page .blog-workbook-cta,
.blog-hub-page .blog-cta-box {
  border: 1px solid rgba(216,228,236,.96) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(145deg, #fff 0%, rgba(245,249,251,.94) 100%) !important;
  box-shadow: 0 18px 42px rgba(22,50,79,.10) !important;
}

.blog-hub-page .blog-card,
.blog-hub-page .blog-feature-card,
.blog-hub-page .blog-principle-card {
  position: relative;
  overflow: hidden;
}

.blog-hub-page .blog-card::before,
.blog-hub-page .blog-feature-card::before,
.blog-hub-page .blog-principle-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--glacier), #1aa36f, var(--gold));
}

.blog-hub-page .blog-card:hover,
.blog-hub-page .blog-feature-card:hover,
.blog-hub-page .blog-principle-card:hover {
  transform: translateY(-3px);
  border-color: rgba(46,111,149,.45) !important;
  box-shadow: 0 24px 54px rgba(22,50,79,.16) !important;
}

.blog-hub-page .blog-card h3,
.blog-hub-page .blog-feature-card h3,
.blog-hub-page .blog-principle-card h3 {
  color: var(--navy) !important;
}

.blog-hub-page .blog-card p,
.blog-hub-page .blog-feature-card p,
.blog-hub-page .blog-principle-card p {
  color: var(--text);
}

.blog-hub-page .blog-card a,
.blog-hub-page .blog-feature-card a,
.blog-hub-page .blog-primary-link,
.blog-hub-page .blog-book-button,
.blog-hub-page .blog-workbook-cta a {
  border-radius: 10px !important;
  background: var(--gold) !important;
  color: var(--navy) !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 24px rgba(217,152,47,.22);
}

.blog-hub-page .blog-secondary-link,
.blog-hub-page .seo-cluster-links a {
  border: 1px solid rgba(46,111,149,.28) !important;
  border-radius: 10px !important;
  background: rgba(233,242,247,.82) !important;
  color: var(--navy) !important;
  font-weight: 800 !important;
}

.blog-hub-page .blog-book-spotlight {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
  gap: clamp(18px, 4vw, 34px);
  align-items: center;
  padding: clamp(20px, 4vw, 36px);
  background:
    radial-gradient(circle at 8% 15%, rgba(217,152,47,.17), transparent 25%),
    linear-gradient(135deg, #fff, rgba(233,242,247,.9)) !important;
}

.blog-hub-page .blog-book-cover-wrap {
  padding: 10px;
  border-radius: 18px;
  background: linear-gradient(145deg, #0b1f39, var(--glacier));
  box-shadow: 0 20px 45px rgba(22,50,79,.20);
}

.blog-hub-page .blog-book-cover-wrap img {
  display: block;
  width: 100%;
  border-radius: 12px;
}

.blog-hub-page .blog-book-points span {
  border: 1px solid rgba(216,228,236,.95);
  border-radius: 999px;
  background: rgba(245,249,251,.92);
  color: var(--navy);
  font-weight: 800;
}

.blog-hub-page .share-cluster,
.blog-hub-page .blog-support-note {
  border: 1px solid rgba(216,228,236,.9);
  background: rgba(255,255,255,.88);
  box-shadow: var(--shadow);
}

@media (max-width: 760px) {
  .blog-hub-page .blog-hub-hero {
    padding: 34px 0 30px;
  }

  .blog-hub-page .blog-section-title {
    align-items: start;
  }

  .blog-hub-page .blog-book-spotlight {
    grid-template-columns: 1fr;
  }

  .blog-hub-page .blog-book-cover-wrap {
    max-width: 170px;
  }
}

/* Blog hub refinement: gold is reserved for premium/book/workbook actions. */
.blog-hub-page .blog-main > section:not(.blog-band) {
  padding: clamp(8px, 2vw, 16px) 0;
}

.blog-hub-page .blog-main > section:nth-of-type(3),
.blog-hub-page .blog-main > section:nth-of-type(4) {
  padding: clamp(28px, 5vw, 54px) 0;
  background:
    radial-gradient(circle at 88% 12%, rgba(46,111,149,.12), transparent 26%),
    radial-gradient(circle at 10% 24%, rgba(217,152,47,.10), transparent 24%),
    linear-gradient(135deg, rgba(11,31,57,.04), rgba(233,242,247,.92));
  border-block: 1px solid rgba(216,228,236,.82);
}

.blog-hub-page .blog-main > section:nth-of-type(5) {
  padding: clamp(30px, 5vw, 58px) 0;
  background:
    linear-gradient(135deg, rgba(11,31,57,.96), rgba(22,50,79,.94) 58%, rgba(46,111,149,.86));
}

.blog-hub-page .blog-main > section:nth-of-type(5) .blog-book-spotlight {
  border-color: rgba(255,255,255,.24) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,.22) !important;
}

.blog-hub-page .blog-main > section:nth-of-type(6) {
  padding: clamp(28px, 5vw, 54px) 0;
  background:
    radial-gradient(circle at 90% 20%, rgba(217,152,47,.18), transparent 22%),
    linear-gradient(135deg, rgba(233,242,247,.88), rgba(245,249,251,.96));
}

.blog-hub-page .blog-card a,
.blog-hub-page .blog-feature-card a,
.blog-hub-page .blog-primary-link {
  border: 1px solid rgba(46,111,149,.35) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--glacier), #138764) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 12px 24px rgba(46,111,149,.18) !important;
}

.blog-hub-page .blog-card a:hover,
.blog-hub-page .blog-feature-card a:hover,
.blog-hub-page .blog-primary-link:hover {
  filter: brightness(.98);
  transform: translateY(-1px);
}

.blog-hub-page .blog-book-button,
.blog-hub-page .blog-workbook-cta a {
  border: 1px solid rgba(217,152,47,.58) !important;
  background: linear-gradient(135deg, var(--gold), #f0b449) !important;
  color: var(--navy) !important;
  box-shadow: 0 14px 28px rgba(217,152,47,.25) !important;
}

.blog-hub-page .blog-workbook-cta {
  background:
    radial-gradient(circle at 92% 0%, rgba(217,152,47,.22), transparent 28%),
    linear-gradient(135deg, #fff, rgba(245,249,251,.92)) !important;
}

.blog-hub-page .blog-cta-box {
  background:
    radial-gradient(circle at 90% 10%, rgba(46,111,149,.16), transparent 30%),
    linear-gradient(135deg, #fff, rgba(233,242,247,.9)) !important;
}

.blog-hub-page .blog-cta-box .blog-primary-link {
  background: linear-gradient(135deg, var(--glacier), #11a06d) !important;
  color: #fff !important;
}

.blog-hub-page .blog-cta-box .blog-secondary-link {
  background: #fff !important;
}

.blog-hub-page .seo-cluster-hub {
  background:
    radial-gradient(circle at 100% 0%, rgba(46,111,149,.13), transparent 28%),
    linear-gradient(135deg, #fff, rgba(245,249,251,.94)) !important;
}

.blog-hub-page .blog-principle-grid,
.blog-hub-page .blog-card-grid,
.blog-hub-page .blog-feature-layout {
  margin-top: clamp(18px, 3vw, 28px);
}

/* Stronger visual separation across Blog 1 article boxes. */
.blog-hub-page .blog-main > section:nth-of-type(1) {
  padding: clamp(28px, 5vw, 54px) 0;
  background:
    radial-gradient(circle at 9% 18%, rgba(26,163,111,.13), transparent 28%),
    radial-gradient(circle at 91% 4%, rgba(46,111,149,.12), transparent 26%),
    linear-gradient(180deg, rgba(233,242,247,.88), rgba(245,249,251,.96));
}

.blog-hub-page .blog-main > section:nth-of-type(2) {
  background:
    radial-gradient(circle at 12% 8%, rgba(46,111,149,.15), transparent 26%),
    radial-gradient(circle at 90% 24%, rgba(22,50,79,.10), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(233,242,247,.92)) !important;
}

.blog-hub-page .blog-main > section:nth-of-type(7) {
  padding: clamp(26px, 5vw, 50px) 0;
  background:
    radial-gradient(circle at 12% 10%, rgba(26,163,111,.16), transparent 26%),
    linear-gradient(135deg, rgba(233,242,247,.9), rgba(255,255,255,.96));
}

.blog-hub-page .blog-feature-card.blog-card-green,
.blog-hub-page .blog-card.blog-card-green {
  background:
    radial-gradient(circle at 100% 0%, rgba(26,163,111,.14), transparent 34%),
    linear-gradient(145deg, #fff 0%, rgba(235,250,244,.94) 100%) !important;
}

.blog-hub-page .blog-feature-card.blog-card-blue,
.blog-hub-page .blog-card.blog-card-blue {
  background:
    radial-gradient(circle at 100% 0%, rgba(46,111,149,.16), transparent 34%),
    linear-gradient(145deg, #fff 0%, rgba(233,242,247,.94) 100%) !important;
}

.blog-hub-page .blog-card.blog-card-purple,
.blog-hub-page .blog-feature-card.blog-card-purple {
  background:
    radial-gradient(circle at 100% 0%, rgba(103,80,164,.13), transparent 34%),
    linear-gradient(145deg, #fff 0%, rgba(243,240,252,.92) 100%) !important;
}

.blog-hub-page .blog-card.blog-card-red,
.blog-hub-page .blog-feature-card.blog-card-red {
  background:
    radial-gradient(circle at 100% 0%, rgba(190,72,72,.11), transparent 34%),
    linear-gradient(145deg, #fff 0%, rgba(255,245,245,.92) 100%) !important;
}

.blog-hub-page .blog-card.blog-card-gold,
.blog-hub-page .blog-feature-card.blog-card-gold {
  background:
    radial-gradient(circle at 100% 0%, rgba(217,152,47,.14), transparent 34%),
    linear-gradient(145deg, #fff 0%, rgba(255,249,235,.94) 100%) !important;
}

.blog-hub-page .blog-principle-card:nth-child(1) {
  background:
    radial-gradient(circle at 100% 0%, rgba(26,163,111,.14), transparent 34%),
    linear-gradient(145deg, #fff, rgba(235,250,244,.94)) !important;
}

.blog-hub-page .blog-principle-card:nth-child(2) {
  background:
    radial-gradient(circle at 100% 0%, rgba(46,111,149,.15), transparent 34%),
    linear-gradient(145deg, #fff, rgba(233,242,247,.94)) !important;
}

.blog-hub-page .blog-principle-card:nth-child(3) {
  background:
    radial-gradient(circle at 100% 0%, rgba(217,152,47,.13), transparent 34%),
    linear-gradient(145deg, #fff, rgba(255,249,235,.92)) !important;
}

.blog-hub-page .blog-principle-card:nth-child(4) {
  background:
    radial-gradient(circle at 100% 0%, rgba(103,80,164,.12), transparent 34%),
    linear-gradient(145deg, #fff, rgba(243,240,252,.92)) !important;
}

.blog-hub-page .blog-section-title::before {
  content: "";
  display: block;
  width: 54px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--glacier), #1aa36f, var(--gold));
  position: absolute;
  top: 18px;
  left: 24px;
}

.blog-hub-page .blog-section-title {
  position: relative;
  padding-top: clamp(30px, 4vw, 38px);
}

.blog-hub-page .blog-card .blog-tag,
.blog-hub-page .blog-card .blog-pill,
.blog-hub-page .blog-feature-card .blog-pill {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}