/* =========================================================
   Best Finance Calculator — Homepage Styles
   ========================================================= */

:root {
  --navy: #12385f;
  --navy-dark: #0b1f36;
  --blue: #1a6fd4;
  --blue-dark: #1558ab;
  --lime: #2bb673;
  --lime-dark: #1f9a5e;
  --purple: #7c5cd6;
  --purple-dark: #6a49c4;
  --orange: #f2763c;
  --orange-dark: #dd6229;
  --teal: #1aa6a6;
  --teal-dark: #148a8a;
  --gold: #f5c518;
  --gray-50: #f7fafc;
  --gray-100: #eef2f6;
  --gray-200: #e3e9ef;
  --gray-400: #94a3b8;
  --gray-500: #6b7b8f;
  --gray-600: #55647a;
  --gray-700: #3d4d63;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--gray-700);
  background: #ffffff;
  font-size: 16px;
  line-height: 1.58;
}

a { text-decoration: none; }
ul { list-style: none; }

.section-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--gray-200);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  gap: 16px;
}
.logo-link { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* 18px, not the original 21px: the brand name "BestFinanceCalculator" is
   twice as long as the old one. Measured at 981-1280px, 21px pushed the
   header 26px past the viewport at 981px; 18px fits at every width with
   room to spare and still reads as the largest text in the header. */
.logo-name { font-size: 18px; font-weight: 800; color: var(--navy); line-height: 1.1; }
.logo-tagline { font-size: 12px; color: var(--gray-500); }

.logo-icon {
  width: 39px;
  height: 39px;
  border-radius: 8px;
  background: var(--lime);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-icon .logo-screen {
  position: absolute;
  top: 5px; left: 5px; right: 5px;
  height: 10px;
  background: var(--navy);
  border-radius: 2px;
}
.logo-icon .logo-grid {
  position: absolute;
  top: 19px; left: 5px; right: 5px; bottom: 5px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
}
.logo-icon .logo-grid span { background: #fff; border-radius: 1px; }

/* gap was 24px. "Financial Tips & Guides" (184px) replaced "About" (~50px),
   which left the header 84px short at 1280px and pushed "Contact" under the
   search box. Trimming the gap to 18px recovers 30px across the 5 gaps,
   and the search box gives back the rest (see .header-search). */
.main-nav { display: flex; align-items: center; gap: 18px; }
.nav-link {
  color: var(--gray-700);
  font-weight: 500;
  font-size: 16.5px;
  position: relative;
  padding: 4px 0;
  white-space: nowrap;
}
.nav-link:hover { color: var(--blue); }
.nav-caret { font-size: 10px; opacity: 0.6; }
.nav-link.active { color: var(--lime-dark); font-weight: 600; }
.nav-link.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -13px;
  height: 3px;
  background: var(--lime);
  border-radius: 2px;
}

/* min-width:0 lets these flex items shrink instead of forcing the header
   wider than the page. The "Financial Tips & Guides" nav item is longer
   than the old "About", and with the fixed 240px search box the header
   was overflowing by ~16px, which created a horizontal scrollbar. */
.header-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* flex-shrink lets the search wrapper give space back to the nav, but
   never below the 170px min-width set on the input itself. */
.header-search-wrap { position: relative; min-width: 0; flex: 0 1 240px; }
/* The nav must keep its natural width so no item is ever clipped. */
.main-nav { flex: 0 0 auto; }
.search-ico {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--gray-400);
  font-size: 14px;
}
.header-search {
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  padding: 10px 16px 10px 37px;
  font-size: 14.5px;
  /* Was a fixed 240px. The longer "Financial Tips & Guides" nav item needs
     that space, so the field now flexes between a usable 170px and the
     original 240px — full size on wide screens, gracefully narrower when
     the nav needs room, instead of the nav sliding underneath it. */
  width: 100%;
  max-width: 240px;
  min-width: 170px;
  background: #fff;
  font-family: inherit;
  color: var(--gray-700);
}
.header-search::placeholder { color: var(--gray-400); }
.header-search:focus { outline: none; border-color: var(--blue); }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 21px;
  color: var(--navy);
  cursor: pointer;
}
.mobile-menu {
  display: none;
  border-top: 1px solid var(--gray-200);
  padding: 14px 18px;
  flex-direction: column;
  gap: 13px;
}
.mobile-menu.open { display: flex; }
.mobile-menu .nav-link.active::after { display: none; }
.mobile-search { margin-top: 4px; }
.mobile-search .header-search { width: 100%; }

/* ---------------------------------------------------------
   Responsive header — CSS is the source of truth.
   js/main.js also toggles these elements, but it only runs after
   DOMContentLoaded and only re-checks on "resize". If the script is
   slow, blocked, or the browser reports a stale innerWidth, the
   desktop nav would flash (or stay) on a phone. These media queries
   make the correct layout apply from the first painted frame, with
   no JavaScript involved.
   !important is required because main.js writes inline styles
   (element.style.display), which otherwise outrank any stylesheet.
   --------------------------------------------------------- */
@media (max-width: 980px) {
  .main-nav,
  .header-right .header-search-wrap { display: none !important; }
  .menu-toggle { display: block !important; }
}

@media (min-width: 981px) {
  .main-nav { display: flex !important; }
  .header-right .header-search-wrap { display: block !important; }
  .menu-toggle { display: none !important; }
  /* A menu left open on a wide screen must never linger. */
  .mobile-menu,
  .mobile-menu.open { display: none !important; }
}

/* =========================================================
   PAGE GRID (sidebar starts at top, next to hero)
   ========================================================= */
.page-body { padding-top: 16px; padding-bottom: 30px; }
.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 315px;
  gap: 20px;
  align-items: start;
}
.main-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.side-column { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 1000px) {
  .content-grid { grid-template-columns: 1fr; }
  .side-column { flex-direction: row; flex-wrap: wrap; }
  .side-column > * { flex: 1 1 280px; }
}
@media (max-width: 620px) {
  .side-column { flex-direction: column; }
  /* Once the sidebar stacks vertically, the 280px flex-basis inherited
     from the row layout would act as a fixed HEIGHT and clip the cards
     (the 5th article was being cut off). Let them size to content. */
  .side-column > * { flex: 0 0 auto; }
}

/* Extra sidebar ad slot shown only on the desktop sidebar layout. */
@media (max-width: 1000px) {
  .desktop-only-ad { display: none; }
}

/* =========================================================
   HERO (card inside left column)
   ========================================================= */
.hero-card {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(115deg, #eff6fd 0%, #e8f2fb 55%, #e3eff9 100%);
  min-height: 305px;
  display: flex;
  align-items: center;
}

/* Full-bleed hero photograph. The artwork is text-free, so it can span the
   whole card; a left-weighted white wash keeps the headline readable. */
.hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(247,251,255,0.98) 0%,
    rgba(247,251,255,0.96) 34%,
    rgba(247,251,255,0.82) 47%,
    rgba(247,251,255,0.3) 60%,
    rgba(247,251,255,0) 72%);
}
.hero-content {
  position: relative;
  z-index: 2;
  padding: 32px 30px;
  max-width: 64%;
}
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ddf3e6;
  color: var(--lime-dark);
  font-weight: 600;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 999px;
}
.hero-title {
  font-size: clamp(2.15rem, 4.2vw, 3rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin-top: 12px;
}
.hero-sub {
  margin-top: 12px;
  font-size: 16px;
  /* Deeper navy-slate + slightly heavier weight so the line stays crisp
     against the bright hero photo behind it. */
  color: #2b4a6f;
  font-weight: 500;
  line-height: 1.6;
  max-width: 480px;
}
.hero-search-bar {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 3px 14px rgba(18, 56, 95, 0.1);
  padding: 4px 4px 4px 14px;
  gap: 8px;
  margin-top: 21px;
  max-width: 505px;
}
.hero-search-ico { color: var(--gray-400); font-size: 14px; }
.hero-search-bar input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  padding: 11px 0;
  font-family: inherit;
  color: var(--gray-700);
  min-width: 0;
}
.hero-search-bar input::placeholder { color: var(--gray-400); }
.hero-search-btn {
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: 6px;
  padding: 11px 26px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.hero-search-btn:hover { background: var(--blue-dark); }

@media (max-width: 760px) {
  .hero-content { max-width: 100%; padding: 26px 20px; }
  /* Wash the photo top-to-bottom instead of left-to-right so the
     stacked text stays readable over it. */
  .hero-overlay {
    background: linear-gradient(180deg,
      rgba(247,251,255,0.96) 0%,
      rgba(247,251,255,0.9) 55%,
      rgba(247,251,255,0.62) 100%);
  }
}

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.section-heading h2,
.why-title, .split-title, .faq-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
}
.heading-ico { color: var(--blue); font-size: 19px; }
.section-sub {
  font-size: 14px;
  color: var(--gray-500);
  margin-top: 5px;
  margin-bottom: 16px;
}
.view-all { color: var(--blue); font-weight: 600; font-size: 14px; white-space: nowrap; }
.view-all:hover { text-decoration: underline; }

/* =========================================================
   CALCULATOR CARDS
   ========================================================= */
.calc-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 11px;
}
@media (max-width: 1000px) { .calc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .calc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px)  { .calc-grid { grid-template-columns: 1fr; } }

.calc-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 17px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.calc-card:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(18,56,95,0.09); }
.calc-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}
.calc-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); line-height: 1.3; }
.calc-card p { font-size: 13px; color: var(--gray-500); line-height: 1.55; flex-grow: 1; }
.calc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  padding: 10px 8px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  transition: opacity 0.18s;
  /* The mortgage card uses an <a> for this button, so normalise it. */
  box-sizing: border-box;
  text-decoration: none;
  line-height: 1.3;
}
.calc-btn:hover { opacity: 0.88; }
.calc-btn i { font-size: 11px; }

.theme-blue   .calc-icon { background: #dceaf9; color: var(--blue); }
.theme-blue   .calc-btn  { background: var(--blue); }
.theme-lime   .calc-icon { background: #d9f2e5; color: var(--lime-dark); }
.theme-lime   .calc-btn  { background: var(--lime); }
.theme-purple .calc-icon { background: #e6e0f8; color: var(--purple-dark); }
.theme-purple .calc-btn  { background: var(--purple); }
.theme-orange .calc-icon { background: #fde4d6; color: var(--orange-dark); }
.theme-orange .calc-btn  { background: var(--orange); }
.theme-teal   .calc-icon { background: #d4f0f0; color: var(--teal-dark); }
.theme-teal   .calc-btn  { background: var(--teal); }

/* =========================================================
   AD LABEL
   ========================================================= */
.ad-label {
  font-size: 11.5px;
  color: var(--gray-400);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}

/* =========================================================
   DREAM HOME PROMO BANNER
   ========================================================= */
.promo-banner {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(90deg, #1a4fa8 0%, #2f7fd6 55%, #64a9e8 100%);
  min-height: 96px;
  display: flex;
  align-items: center;
}
.promo-photo {
  position: absolute;
  right: 0; top: 0;
  height: 100%;
  width: 38%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 42%);
  mask-image: linear-gradient(to right, transparent 0%, #000 42%);
}
.promo-text {
  position: relative;
  z-index: 2;
  padding: 16px 22px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.promo-text h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.01em; }
.underline-gold { border-bottom: 3px solid var(--gold); padding-bottom: 1px; }
.promo-text p { font-size: 14px; opacity: 0.95; }
.promo-btn {
  background: var(--gold);
  color: #16314f;
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 24px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  margin-top: 4px;
  position: absolute;
  right: 42%;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 700px) {
  .promo-btn { position: static; transform: none; }
  .promo-photo { opacity: 0.25; width: 100%; -webkit-mask-image: none; mask-image: none; }
}

/* =========================================================
   WHY USE OUR CALCULATORS
   ========================================================= */
.why-section {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 18px 16px 22px;
}
.why-title { margin-bottom: 18px; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  text-align: center;
}
@media (max-width: 860px) { .why-grid { grid-template-columns: repeat(3, 1fr); row-gap: 20px; } }
@media (max-width: 520px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  /* With 5 items in a 2-column grid the last one is left alone in the
     first column; span it across both so it sits centred. */
  .why-grid .why-item:last-child { grid-column: 1 / -1; }
}

.why-item { padding: 0 6px; border-right: 1px solid var(--gray-200); }
.why-item:last-child { border-right: none; }
@media (max-width: 860px) { .why-item { border-right: none; } }

.why-icon {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.why-item h5 { font-weight: 700; color: var(--navy); font-size: 14px; margin-bottom: 5px; }
.why-item p { font-size: 12px; color: var(--gray-500); line-height: 1.5; }
.icon-green { background: #d9f2e5; color: var(--lime-dark); }
.icon-blue  { background: #dceaf9; color: var(--blue); }

/* =========================================================
   SPLIT ROW (How It Works | Tips) & (Plan | Wealth Ad)
   ========================================================= */
.split-row {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 800px) { .split-row { grid-template-columns: 1fr; } }
.split-main { min-width: 0; display: flex; flex-direction: column; }
.split-side { min-width: 0; display: flex; flex-direction: column; }

/* ---------- How It Works ---------- */
.how-steps {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  flex: 1;
}
.how-step { flex: 1; text-align: center; padding: 0 4px; }
.step-icon-wrap { position: relative; width: 59px; height: 59px; margin: 0 auto 12px; }
.step-circle {
  width: 59px; height: 59px;
  border-radius: 50%;
  background: #dceaf9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--blue);
}
.step-number {
  position: absolute;
  top: -4px; left: -6px;
  width: 25px; height: 25px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}
.how-step h5 { font-weight: 700; color: var(--navy); font-size: 14px; margin-bottom: 5px; }
.how-step p { font-size: 12px; color: var(--gray-500); line-height: 1.5; }
.how-chevron { color: #cbd5e1; font-size: 16px; padding-top: 21px; }
@media (max-width: 560px) {
  /* Stacked steps: stretch each one to the full width so the inherited
     `align-items: flex-start` no longer shrink-wraps them to the left
     and their centred icon/text line up down the middle. */
  .how-steps { flex-direction: column; gap: 20px; align-items: stretch; }
  .how-chevron { display: none; }
}

/* ---------- Financial Tips Box ---------- */
.tips-box {
  background: #eaf4fd;
  border: 1px solid #d3e7f7;
  border-radius: 8px;
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.tips-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.tip-icon {
  width: 35px; height: 35px;
  border-radius: 50%;
  background: #d9f2e5;
  color: var(--lime-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.tips-box h4 { font-weight: 700; color: var(--navy); font-size: 16px; }
.tips-box p { font-size: 13px; color: var(--gray-600); line-height: 1.55; margin-bottom: 16px; flex-grow: 1; }
.tips-btn {
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* This button is now an <a> pointing at /guides/. A <button> normalises
     line-height to "normal", but an anchor inherits the body's 1.58,
     which made the box 4.5px taller. Pinning both keeps the rendered
     button byte-identical to the original. */
  line-height: normal;
  text-decoration: none;
  justify-content: center;
}
.tips-btn i { font-size: 11px; }

/* =========================================================
   PLAN YOUR FINANCIAL FUTURE
   ========================================================= */
.plan-banner {
  position: relative;
  background: linear-gradient(100deg, #e8f7ef 0%, #f1fbf5 55%, #ffffff 100%);
  border: 1px solid #d5eddf;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  flex: 1;
  min-height: 144px;
}
.plan-banner img {
  position: absolute;
  right: 0; top: 0;
  height: 100%;
  width: 40%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 40%);
  mask-image: linear-gradient(to right, transparent 0%, #000 40%);
}
.plan-text { position: relative; z-index: 2; padding: 16px 20px; max-width: 62%; }
.plan-text h3 {
  font-size: 17.5px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.plan-badge {
  width: 29px; height: 29px;
  border-radius: 50%;
  background: var(--lime);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  flex-shrink: 0;
}
.plan-text p { font-size: 13px; color: var(--gray-600); margin-bottom: 14px; line-height: 1.55; }
.plan-btn {
  background: var(--lime);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.plan-btn i { font-size: 11px; }
@media (max-width: 620px) {
  .plan-text { max-width: 100%; }
  .plan-banner img { opacity: 0.2; width: 100%; -webkit-mask-image: none; mask-image: none; }
}

/* =========================================================
   SIDEBAR ADS
   ========================================================= */
.side-ad {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  color: #fff;
  padding: 16px;
  min-height: 178px;
  display: flex;
  align-items: flex-start;
}
.side-ad .ad-body { position: relative; z-index: 2; max-width: 100%; }
.side-ad h4 { font-size: 18.5px; font-weight: 800; margin-bottom: 8px; line-height: 1.2; }
.side-ad p { font-size: 12.5px; opacity: 0.92; line-height: 1.5; margin-bottom: 14px; }
.side-ad-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 5px;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.side-ad .ad-inset-img {
  position: absolute;
  right: 0; bottom: 0;
  width: 58%;
  height: 55%;
  object-fit: cover;
  border-radius: 8px 0 0 0;
  z-index: 1;
}
.tall-ad { min-height: 236px; }
.tall-ad .ad-inset-img { height: 48%; }

.ad-blue  { background: linear-gradient(150deg, #1f7fdd 0%, #1a63bd 100%); }
.ad-blue  .side-ad-btn { background: #1558ab; color: #fff; }
.ad-green { background: linear-gradient(150deg, #24a96f 0%, #14806a 100%); }
.ad-green .side-ad-btn { background: #158a55; color: #fff; }
.ad-navy  { background: linear-gradient(150deg, #123a63 0%, #0d2646 100%); }
.ad-navy  .side-ad-btn { background: var(--gold); color: #16314f; }

/* Wealth chart illustration */
.wealth-chart {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 78px;
  z-index: 1;
}
.wealth-chart .bar {
  width: 12px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, #ffe27a 0%, #f5c518 55%, #c9990b 100%);
}
.wealth-chart svg {
  position: absolute;
  left: -4px;
  bottom: 0;
  width: 92px;
  height: 78px;
  overflow: visible;
}

/* =========================================================
   POPULAR ARTICLES
   ========================================================= */
.articles-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  overflow: hidden;
}
.articles-card h4 {
  padding: 14px 16px 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 8px;
}
.articles-card h4 i { color: var(--blue); font-size: 14px; }
.article-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  transition: background 0.18s;
}
.article-item:last-child { border-bottom: none; }
.article-item:hover { background: var(--gray-50); }
.article-icon {
  width: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--blue);
  flex-shrink: 0;
}
.article-text { flex: 1; }
.article-item .chevron { color: #c4cedb; font-size: 12px; flex-shrink: 0; }

/* =========================================================
   FAQ
   ========================================================= */
.faq-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px 18px 6px;
}
.faq-title { margin-bottom: 8px; }
.faq-item { border-bottom: 1px solid var(--gray-100); }
.faq-item:last-child { border-bottom: none; }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  background: none;
  border: none;
  text-align: left;
  font-weight: 500;
  color: var(--gray-700);
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}
.faq-question:hover { color: var(--blue); }
.plus-icon {
  flex-shrink: 0;
  color: var(--gray-400);
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.25s, color 0.2s;
}
.faq-item.open .plus-icon { transform: rotate(45deg); color: var(--blue); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer p {
  padding: 0 0 14px 0;
  font-size: 13.5px;
  color: var(--gray-600);
  line-height: 1.65;
}

/* =========================================================
   BACK TO HOME BAR — sits directly above the footer
   ---------------------------------------------------------
   Deliberately reuses the existing button language (.tips-btn):
   same blue, weight, font-size, padding, radius and icon gap,
   so it reads as part of the original design rather than a new
   component. Only new classes are added — no existing rule is
   touched, so every other part of the site is unaffected.
   ========================================================= */
.back-home-bar {
  display: flex;
  justify-content: center;
  padding-top: 22px;
  padding-bottom: 26px;
}
.back-home-btn {
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* An <a> inherits the body's 1.58 line-height, which would make the
     box taller than the site's other buttons. Pinning it keeps this
     button exactly the same height as .tips-btn / .plan-btn. */
  line-height: normal;
  text-decoration: none;
  transition: background 0.2s;
}
.back-home-btn:hover { background: var(--blue-dark); }
.back-home-btn i { font-size: 11px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: var(--navy-dark); color: #b7c3d1; margin-top: 8px; }
.footer-inner { padding-top: 26px; padding-bottom: 16px; }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-logo-icon { width: 37px; height: 37px; }
.footer-logo-icon .logo-screen { top: 5px; height: 9px; background: var(--navy-dark); }
.footer-logo-icon .logo-grid { top: 18px; }
.footer-name { font-size: 18.5px; font-weight: 800; color: #fff; line-height: 1.1; }
.footer-tagline { font-size: 12px; color: #8b9bad; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-link { color: #b7c3d1; font-size: 13.5px; transition: color 0.2s; }
.footer-link:hover { color: #fff; }
.footer-socials { display: flex; gap: 7px; }
.footer-social {
  width: 31px; height: 31px;
  border-radius: 50%;
  background: rgba(255,255,255,0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  transition: background 0.2s;
}
.footer-social:hover { background: var(--lime); }
.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.09); margin: 18px 0 13px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: #8b9bad;
}
.footer-legal { display: flex; gap: 18px; }
.footer-legal .footer-link { font-size: 12.5px; }

/* =========================================================
   TOAST
   ========================================================= */
#toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--navy);
  color: #fff;
  padding: 12px 24px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: 0 8px 26px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 90vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* =========================================================
   MOBILE: CENTRE-ALIGN EVERYTHING
   Pure alignment layer for phone widths. It changes no colours, font
   sizes, spacing or structure, and every desktop rule is untouched.
   Kept last in the file so it wins over the earlier default alignments.
   ========================================================= */
@media (max-width: 760px) {
  /* --- Hero --- */
  .hero-content { text-align: center; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .hero-search-bar { margin-left: auto; margin-right: auto; }

  /* Break the badge onto two lines: "100% Free • No Sign Up" then
     "Fast & Accurate". The middle separator is dropped so no stray
     bullet is left dangling at the end of the first line. */
  .badge-pill { flex-wrap: wrap; justify-content: center; row-gap: 2px; }
  .badge-pill .badge-line { white-space: nowrap; }
  /* Replace the middle separator with a full-width line break so the
     badge always reads "100% Free • No Sign Up" / "Fast & Accurate". */
  .badge-pill .badge-sep {
    flex-basis: 100%;
    width: 100%;
    height: 0;
    font-size: 0;
    overflow: hidden;
  }

  /* --- Section headings and sub-labels --- */
  .section-heading { justify-content: center; }
  .section-heading h2,
  .why-title,
  .split-title,
  .faq-title { justify-content: center; }
  .section-sub { text-align: center; }

  /* Give every section heading the same size on phones. 18px is the
     largest value at which the longest one ("Frequently Asked
     Questions") still fits on a single line. */
  .section-heading h2,
  .why-title,
  .split-title,
  .faq-title,
  .articles-card h4 { font-size: 18px; gap: 8px; }

  .section-heading h2 .heading-ico,
  .why-title .heading-ico,
  .split-title .heading-ico,
  .faq-title .heading-ico,
  .articles-card h4 i { font-size: 16px; }

  .faq-title { white-space: nowrap; }

  /* --- Calculator cards --- */
  .calc-card { align-items: center; text-align: center; }

  /* --- Dream Home promo banner --- */
  .promo-text { align-items: center; text-align: center; }

  /* --- Why Use Our Calculators --- */
  .why-item { text-align: center; }

  /* --- How It Works --- */
  .how-step { text-align: center; }

  /* --- Financial Tips box --- */
  .tips-box { align-items: center; text-align: center; }
  .tips-head { justify-content: center; }

  /* --- Plan Your Financial Future banner --- */
  .plan-text { text-align: center; }
  .plan-text h3 { justify-content: center; }
  .plan-btn { margin-left: auto; margin-right: auto; }

  /* --- Sidebar ads --- */
  .side-ad { justify-content: center; }
  .side-ad .ad-body { text-align: center; }

  /* --- Popular Articles --- */
  .articles-card h4 { justify-content: center; }
  .article-item { justify-content: center; text-align: center; }
  .article-text { flex: 0 1 auto; }

  /* --- FAQ --- */
  .faq-question { justify-content: center; text-align: center; gap: 10px; }

  /* --- Footer --- */
  .footer-top { justify-content: center; }
  .footer-brand { flex-direction: column; text-align: center; }
  .footer-nav { justify-content: center; }
  .footer-socials { justify-content: center; }
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-legal { justify-content: center; }
}