/* =========================================================
   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;
}
/* Modifier used ONLY by the /calculators/ listing page, which shows three
   cards per row instead of the homepage's five. Declared before the
   breakpoints below on purpose: those rules target .calc-grid with the same
   specificity, so being later in the file lets them still narrow the grid to
   2 and then 1 column on small screens. The homepage keeps 5 across. */
.calc-grid-3 { grid-template-columns: repeat(3, 1fr); }
@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;
  /* `justify-content` only centres the flex ITEMS (the label and the
     arrow) as a group — it does not centre the wrapped lines INSIDE the
     label. Labels here are long enough to wrap onto two lines in the
     narrow card, and a <button> centres those lines by default while an
     <a> inherits `start`, so the two element types looked different.
     Setting it explicitly centres every line in both. */
  text-align: center;
}
.calc-btn:hover { opacity: 0.88; }
/* The arrow is decorative. While it sat in the flex flow it consumed
   ~17px (icon + gap), which pushed the LABEL about 8px left of the
   button's true centre. Taking it out of the flow lets the label centre
   on the button itself; the arrow stays exactly where it looked before,
   pinned to the right edge and vertically centred.

   The button keeps SYMMETRIC horizontal padding wide enough to clear the
   arrow (8px edge + 11px glyph = 19px each side). Reserving the same
   space on both sides is what keeps the label optically centred AND
   stops a short one-line label — "Calculate Loan" was the case that
   broke — from running underneath the arrow. 19px is the widest padding
   that still lets every label wrap to the same two lines, so all five
   buttons keep their original 54px height and stay bottom-aligned. */
.calc-btn {
  position: relative;
  padding-left: 19px;
  padding-right: 19px;
}
.calc-btn i {
  font-size: 11px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.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;
  /* Anchored to the RIGHT EDGE OF .promo-text rather than to a percentage
     of the banner. `right: 42%` resolved against .promo-text (the nearest
     positioned ancestor, ~300px) instead of the 809px banner, so the button
     landed on top of the "Get Your Dream Home" heading — and the offset
     drifted further as the banner narrowed. `left: 100%` always starts just
     after the text block, so the two can never collide at any width. */
  left: calc(100% + 18px);
  top: 50%;
  transform: translateY(-50%);
  /* Absolutely-positioned elements size shrink-to-fit, which squeezed the
     label from 123px to 86px once the button was anchored at left:100%.
     nowrap keeps it on one line at its natural width. */
  white-space: nowrap;
}
@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; }

/* Footer row of the Popular Articles card, holding the "View All" link.
   Deliberately has NO border-top: `.article-item:last-child` only drops
   its border while it is the last child, so adding this row hands the
   5th article its bottom border back — that line is the separator, and
   a border here too would draw a double rule.
   New class only; no existing rule is modified. */
.articles-foot {
  display: flex;
  justify-content: center;
  padding: 12px 16px;
}

/* =========================================================
   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); }

/* =========================================================
   HOMEPAGE PROSE (intro paragraph + About/trust block)
   ---------------------------------------------------------
   The homepage loads only style.css and ads.css, so the
   .content-card rules used on the inner pages (which live in
   calculator.css) are NOT available here. These few rules
   reproduce that same card look using the existing design
   tokens only — no new colours, radii or fonts are introduced.
   Scoped to .home-prose, so no other page or section changes.
   ========================================================= */
.home-prose p {
  font-size: 14px;
  color: var(--gray-600);
  line-height: 1.75;
}
.home-prose p + p { margin-top: 11px; }
.home-prose a { color: var(--blue); font-weight: 500; }
.home-prose a:hover { text-decoration: underline; }

/* The intro sits directly under the hero as plain text, matching
   the .section-sub voice rather than sitting in its own card. */
#site-intro p { margin: 0; }

/* The About block is a card, matching .faq-card exactly. */
.home-prose-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: 10px;
  padding: 16px 18px 18px;
}
.home-prose-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}
.home-prose-byline {
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
  font-size: 13px;
  color: var(--gray-500);
}

/* =========================================================
   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,
  .home-prose-card h2 { justify-content: center; }
  .section-sub { text-align: center; }
  /* Match the centred treatment the rest of the page gets on phones. */
  .home-prose p { 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,
  .home-prose-card h2,
  .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,
  .home-prose-card h2 .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; }
}