:root{
  --light:#d9f0ff;
  --mid:#8cc8ff;
  --dark:#0b1a3a;

  /* Page background overrides (desktop gradient + mobile solid) */
  --bg-left: #BFE4FF;   /* light blue (left + mobile) */
  --bg-right: #3E78C6;  /* richer blue (desktop right) */

  --text:#0b1220;
  --muted:#334155;

  --border: rgba(2,6,23,.12);
  --shadow: 0 18px 60px rgba(2,6,23,.18);
  --shadow2: 0 10px 25px rgba(2,6,23,.12);

  --accent:#2563eb;
  --accent2:#22c55e;
  --danger:#ef4444;

  --radius:18px;
  --brand-width: clamp(160px,18vw,260px);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 500px at 18% 12%, rgba(37,99,235,.16), transparent 60%),
    radial-gradient(900px 600px at 85% 18%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(90deg,var(--light) 0%,#c6e6ff 25%,var(--mid) 55%,#2b5fbf 78%,var(--dark) 100%);
  min-height:100vh;
}

/* Global background: desktop two-stop gradient using new vars; mobile single-color */
html, body{
  min-height: 100%;
  background: linear-gradient(90deg, var(--bg-left) 0%, var(--bg-right) 100%) !important;
}

/* Narrow, centered container for education/content sections */
.narrow-wrap{
  max-width:880px; /* ~800-900px */
  margin:0; /* left-justify inside the .wrap container */
  padding-left:12px;
  padding-right:12px;
}
.narrow-wrap p,
.narrow-wrap li{
  line-height:1.6;
}

@media (max-width: 768px){
  html, body{
    background: var(--bg-left) !important;
  }
}

a{ color:inherit; text-decoration:none; }

/* ================= HEADER ================= */
.top{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(10px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid rgba(2,6,23,.10);
}

/* Compact header state toggled by JS (class: header--compact) */
.top.header--compact{ }
.top.header--compact .top-inner{ padding:6px 14px; transition: padding 180ms ease; }
.top .top-inner{ transition: padding 180ms ease; }
.top.header--compact .brand img{ width: calc(var(--brand-width) * 0.68); transition: width 180ms ease; }
.top .brand img{ transition: width 180ms ease; }
.top.header--compact .pill,
.top.header--compact .desktop-nav a{ padding:8px 10px; font-size:0.92rem; transition: padding 180ms ease, font-size 180ms ease; }
.desktop-nav a, .pill{ transition: padding 180ms ease, font-size 180ms ease; }

.top-inner{
  max-width:1320px;
  margin:0 auto;
  padding:6px 14px; /* compact by default */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:relative;
  overflow:hidden; /* prevent children from rendering offscreen */
}

.brand{ display:flex; align-items:center; flex: 0 0 auto; z-index:2; }
.brand img{
  width: calc(var(--brand-width) * 0.68); /* slightly smaller so nav fits */
  max-width:160px;
  height:auto;
  object-fit:contain;
}

/* Desktop nav */
.desktop-nav{
  display:flex;
  gap:12px; /* requested gap between pills */
  flex:1 1 auto; /* nav grows/shrinks */
  min-width:0; /* allow nav to shrink inside header */
  justify-content:flex-end;
  align-items:center;
  flex-wrap:nowrap; /* default: keep pills on one line */
  margin-left:0; /* no offset so nav remains visible */
  z-index:1;
  overflow-x:auto; /* allow horizontal scrolling when viewport is too narrow */
  -webkit-overflow-scrolling:touch;
  -ms-overflow-style: none; /* hide scrollbar IE/Edge */
  scrollbar-width: none; /* hide scrollbar Firefox */
}
.desktop-nav::-webkit-scrollbar{ display:none; }

/* Allow direct children of the header inner container to shrink properly */
.top-inner > *{ min-width:0; }

/* Responsive: below 1200px allow nav to wrap or scroll and remove left padding so items flow
   under the logo when needed (no clipped/partial pills). Keep pills styled the same. */
@media(max-width:1200px){
  .desktop-nav{
    flex-wrap:wrap; /* allow pills to wrap to next line on medium screens */
    margin-left:0;
    overflow-x:auto; /* allow scrolling when wrapped */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .desktop-nav::-webkit-scrollbar{ display:none; }
  }
}

.pill{
  padding:6px 8px; /* slightly smaller so pills fit in header */
  border-radius:999px;
  border:1px solid rgba(2,6,23,.12);
  background:#fff;
  font-weight:900;
  white-space:nowrap;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
  font-size:0.9rem;
}

.pill.primary{
  background:rgba(37,99,235,.12);
  border-color:rgba(37,99,235,.35);
}

/* Spacing for pill links used in top navigation on footer pages */
.top-nav a.pill{ margin-right:10px; }
.top-nav a.pill:last-child{ margin-right:0; }

/* Ensure header nav links render as pills even if class changes were applied elsewhere */
.desktop-nav a,
.desktop-nav a.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  padding:8px 10px;
  border-radius:9999px;
  border:1px solid rgba(2,6,23,.12);
  background:#fff;
  font-weight:900;
  gap:8px;
  color:inherit;
  text-decoration:none;
  flex:0 0 auto; /* prevent pills from stretching or being partially clipped */
  box-shadow: 0 6px 14px rgba(2,6,23,.06);
  transition: background .12s ease, box-shadow .12s ease, transform .06s ease, padding .12s ease, font-size .12s ease;
}

.desktop-nav a:hover,
.desktop-nav a:focus{
  background: rgba(37,99,235,.08);
  outline: none;
}

/* Active / current page state */
.desktop-nav a[aria-current="page"],
.desktop-nav a.active{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.35);
  color: var(--dark);
}

/* Keep primary pill styling consistent inside header */
.desktop-nav a.pill.primary{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.35);
}

/* Hamburger (mobile only) */
.hamburger{
  display:none;
  font-size:26px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(2,6,23,.14);
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
  padding:8px 12px;
}

/* Mobile calculator toggle and menu */
.header-actions{ display:flex; align-items:center; gap:8px; }
.calc-toggle{ display:none; background:#fff; border:1px solid rgba(2,6,23,.12); padding:8px 10px; border-radius:12px; font-weight:900; cursor:pointer; }
.calc-menu{ display:none; position:absolute; top:64px; right:20px; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow2); padding:8px; flex-direction:column; min-width:220px; z-index:120; }
.calc-menu a{ padding:10px 12px; border-radius:8px; font-weight:800; color:inherit; text-decoration:none; }
.calc-menu a:hover, .calc-menu a:focus{ background:rgba(37,99,235,.06); outline:none; }
.calc-menu.open{ display:flex; }
.snapshot-link{ display:inline-flex; padding:6px 10px; border-radius:10px; font-weight:800; border:1px solid rgba(2,6,23,.08); background:#fff; }

/* Dropdown menu */
.menu{
  position:absolute;
  top:64px;
  right:20px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow2);
  display:none;
  flex-direction:column;
  min-width:240px;
  overflow:hidden;
}

.menu.open{ display:flex; }

.menu a{
  padding:14px 16px;
  border-bottom:1px solid rgba(2,6,23,.08);
  font-weight:800;
}
.menu a:last-child{ border-bottom:none; }
.menu a:hover{ background:rgba(37,99,235,.08); }

/* ================= LAYOUT ================= */
.wrap{
  max-width:1320px;
  margin:0 auto;
  padding:20px;
}

.page-head{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px;
  margin-bottom:18px;
  border:1px solid rgba(2,6,23,.08);
}

/* Premium trust container combining privacy + disclaimer */
.trust-card{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 20px;
  margin-bottom:18px;
  border:1px solid rgba(2,6,23,.08);
}
.trust-card .trust-inner{ display:block; max-width:880px; }
.trust-card h2{ font-size:1.2rem; margin:0 0 0.5rem; color: #0f172a; }
.trust-card .disclaimer-heading{ font-size:1.2rem; margin:0 0 0.5rem; color:#0f172a; }
.privacy-list, .disclaimer-list{ list-style:none; margin:0; padding:0; }
.privacy-list li, .disclaimer-list li{ margin:0 0 0.6rem; color:var(--text); font-size:0.95rem; line-height:1.4; }
.privacy-list li strong{ font-weight:800; color:var(--dark); margin-right:8px; }
.trust-divider{ border:none; border-top:1px solid rgba(2,6,23,0.08); margin:12px 0; }

/* Micro-typography tweaks for trust container */
.trust-card h2, .trust-card .disclaimer-heading{ letter-spacing: -0.01em; }
.trust-card .privacy-list li, .trust-card .disclaimer-list li{ color: #0f172a; }

h1{
  margin:0 0 8px;
  font-size:clamp(1.7rem,2.6vw,2.4rem);
}

h2 {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
  margin-bottom: 1rem;
}
.lead{ color:var(--muted); max-width:90ch; }

/* Calculator UI panel headings */
.calc-section-title {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
  margin-bottom: 0.6rem;
}

/* Optional helper text under panel headings */
.calc-section-subtext {
  font-size: 0.95rem;
  color: #475569;
  margin-bottom: 0.8rem;
}

/* ================= HOME CALCULATORS GRID ================= */
.calc-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  margin-top:14px;
}

.calc-grid a{
  display:block;
  width:100%;
  text-align:center;
}

/* ================= COMMON CALCULATOR UI ================= */
.dashboard{
  display:grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap:16px;
  align-items:start;
}

/* Allow grid children to shrink properly so internal scrolling works without forcing row growth */
.dashboard > .panel{ min-height: 0; }

/* Desktop: left column contains inputs + graph stacked; right column holds Results. */
@media(min-width:900px){
  .dashboard{ grid-template-columns: minmax(420px, 1fr) 360px; }
  .dashboard .left-col{ grid-column:1; display:flex; flex-direction:column; gap:16px; min-height:0; }
  .dashboard .results-panel{ grid-column:2; display:flex; flex-direction:column; min-height:0; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35); border-radius:14px; padding:10px; }
  .dashboard .results-panel .table-wrap{ max-height:360px; overflow:auto; -webkit-overflow-scrolling:touch; }
  .dashboard .results-panel #tableSection{ order: 7; }
  .dashboard .results-panel .compare-strategy-card{ order: 8; margin-top: 10px; }

  body.loan-extra-page .dashboard .results-panel > .actions,
  body.debt-consolidation-page .dashboard .results-panel > .actions,
  body.student-loan-page .dashboard .results-panel > .actions{ order: 2; }

  body.loan-extra-page .dashboard .results-panel #results-summary-message,
  body.debt-consolidation-page .dashboard .results-panel #results-summary-message,
  body.student-loan-page .dashboard .results-panel #results-summary-message{ order: 3; }

  body.loan-extra-page .dashboard .results-panel .snapshot-cta-box,
  body.debt-consolidation-page .dashboard .results-panel .snapshot-cta-box,
  body.student-loan-page .dashboard .results-panel .snapshot-cta-box{ order: 4; }

  body.loan-extra-page .dashboard .results-panel #tableSection,
  body.debt-consolidation-page .dashboard .results-panel #tableSection,
  body.student-loan-page .dashboard .results-panel #tableSection{ order: 5; }

  body.loan-extra-page .dashboard .results-panel .compare-strategy-card,
  body.debt-consolidation-page .dashboard .results-panel .compare-strategy-card,
  body.student-loan-page .dashboard .results-panel .compare-strategy-card{ order: 8; }
}

.card{
  background:rgba(255,255,255,.92);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow2);
  padding:16px;
}

.panel-title{ margin:0 0 6px; font-size:1.05rem; color:var(--dark); }
.panel-sub{ margin:0 0 12px; color:var(--muted); }
.panel-foot{ margin:12px 0 0; color:var(--muted); font-size:.95rem; }

.kpi-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.kpi-inner{ padding:0; border:none; box-shadow:none; background:transparent; }

label{ display:block; font-weight:800; color:var(--muted); margin:0 0 6px; }

.input{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid rgba(2,6,23,.14);
  background:rgba(255,255,255,.98);
  outline:none;
  font-size:1rem;
}

.input:focus{
  border-color: rgba(37,99,235,.40);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top:12px;
}

.btn{
  border:1px solid rgba(2,6,23,.14);
  background:rgba(255,255,255,.92);
  padding:11px 14px;
  border-radius:14px;
  cursor:pointer;
  font-weight:900;
  font-size:1rem;
}

.btn.solid,
.btn.primary{
  background: rgba(37,99,235,.92);
  border-color: rgba(37,99,235,.92);
  color:#fff;
}

.btn.danger{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.28);
  color: #7f1d1d;
}

.status{
  margin-top:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(2,6,23,.10);
  background:rgba(255,255,255,.86);
  color:var(--muted);
  font-weight:700;
}

.status.ok{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); color:#064e3b; }
.status.bad{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); color:#7f1d1d; }

.results{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.result-box{
  border:1px solid rgba(2,6,23,.10);
  background:rgba(255,255,255,.92);
  border-radius:16px;
  padding:12px;
}

.results-summary-message{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(2,6,23,.08);
  border-left:3px solid rgba(37,99,235,.35);
  background:rgba(255,250,242,.88);
  color:var(--dark);
  font-size:1.04rem;
  line-height:1.45;
}

.results-summary-message strong{
  font-weight:900;
}

.results-summary-message .interest-highlight{
  color:var(--accent);
  font-weight:800;
  font-size:1.07em;
}

.kicker{ color:var(--muted); font-weight:800; font-size:.92rem; }
.value{ font-size:1.35rem; font-weight:950; margin-top:4px; color:var(--dark); }

.full{ grid-column:1 / -1; }

.table-wrap{ overflow:auto; border-radius:16px; border:1px solid rgba(2,6,23,.10); background:#fff; }

table{ width:100%; border-collapse:collapse; }
th, td{ padding:12px 12px; text-align:left; border-bottom:1px solid rgba(2,6,23,.08); }
th{ background:rgba(37,99,235,.06); font-weight:950; color:var(--dark); }
tr:last-child td{ border-bottom:none; }

/* footer text neutral styling (site-wide) */
.footer-text{ color:var(--muted); font-weight:700; text-shadow:none; }

/* ===== Snowball/Avalanche table ===== */
.debts{ width:100%; border-collapse:collapse; margin-top:12px; }
.debts th, .debts td{ padding:12px; border-bottom:1px solid rgba(2,6,23,.08); }
.debts th{ background:rgba(37,99,235,.06); font-weight:950; }
.debts input{ width:100%; }

.pilltag{ display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-weight:900; font-size:.82rem; border:1px solid rgba(2,6,23,.12); background:#fff; }
.pilltag.good{ border-color: rgba(34,197,94,.30); background: rgba(34,197,94,.10); color:#065f46; }
.pilltag.blue{ border-color: rgba(37,99,235,.30); background: rgba(37,99,235,.10); color:#1d4ed8; }

.list{ margin:8px 0 0; padding-left:18px; color:var(--muted); font-weight:700; }

.fineprint{ margin-top:12px; color:var(--muted); font-size:.95rem; }

/* ================= RESPONSIVE ================= */
@media(max-width: 900px){
  .dashboard{ grid-template-columns:1fr; }
}

/* Page layout with right sidebar for ads on desktop */
.page-layout{ display:grid; grid-template-columns: minmax(0,1fr) 320px; gap:28px; align-items:start; }
.main{ min-width:0; }
.page-layout > .main { grid-column: 1 / -1; max-width: 1320px; margin: 0 auto; }
.sidebar{ width:320px; }
@media(max-width:1100px){ .page-layout{ grid-template-columns:1fr; } .sidebar{ width:auto; } }

/* Calculator cards grid variant */
.calc-cards{ display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
@media(max-width:900px){ .calc-cards{ grid-template-columns:1fr; } }

.calc-card{ background:rgba(255,255,255,.96); border:1px solid rgba(2,6,23,.08); border-radius:14px; padding:16px; box-shadow:var(--shadow2); display:flex; flex-direction:column; gap:12px; }
.calc-card h3{ margin:0; font-size:1.05rem; }
.calc-card p{ margin:0; color:var(--muted); }
.calc-card .btn{ margin-top:auto; align-self:start; }

/* Hero tweaks */
.hero{ padding:40px 22px; }
.hero-ctas{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap; }

/* Center CTAs when they appear in the left/top hero column */
.hero-top .hero-ctas {
  margin-top: 14px;
}
.hero .btn.large{ padding:12px 18px; font-size:1.02rem; height:44px; display:inline-flex; align-items:center; }

/* New hero grid layout (desktop two-column, mobile stacked) */
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas: "top right" "bottom right";
  gap:32px;
  align-items:start;
}
.hero-top{ grid-area: top; }
.hero-right{ grid-area: right; }
.hero-bottom{ grid-area: bottom; }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.chip{ background:rgba(255,255,255,0.96); border:1px solid rgba(2,6,23,.06); padding:8px 12px; border-radius:999px; font-weight:800; color:var(--muted); font-size:.92rem; }
.usecases-label{ margin-top:18px; font-weight:900; color:var(--dark); font-size:0.98rem; }
.use-case-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:8px 12px; margin-top:8px; }
.use-case-item{ color:var(--muted); font-weight:800; padding:6px 0; display:flex; align-items:center; gap:10px; }
.use-case-item::before{ content:none !important; }
.usecase-pills{
  border-radius:12px;
  padding:14px;
  background: linear-gradient(90deg, rgba(235,245,255,0.95), rgba(225,238,255,0.98));
  border:1px solid rgba(2,6,23,.06);
  box-shadow: 0 10px 24px rgba(37,99,235,0.06);
}

/* Homepage: add breathing room above 'Popular ways people use these tools' */
.hero-bottom .usecases { margin-top: 18px; }

.usecase-pills .usecases-label{ margin-top:0; }
.preview-card{
  border-radius:12px;
  padding:16px;
  background: linear-gradient(90deg, rgba(235,245,255,0.95), rgba(225,238,255,0.98));
  border:1px solid rgba(2,6,23,.06);
  box-shadow: 0 12px 30px rgba(37,99,235,0.08), 0 4px 12px rgba(2,6,23,0.06);
  transition: box-shadow .18s ease, transform .12s ease;
}

/* Calculator card heading emoji alignment */
.calc-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.calc-emoji {
  font-size: 1.15em;
  line-height: 1;
  display: inline-block;
}

/* Page header emoji alignment */
.page-head h1 { display: flex; align-items: center; gap: 0.5rem; }
.page-emoji { font-size: 1.15em; line-height: 1; display: inline-block; }

/* Slightly tighten vertical rhythm for specific homepage blocks */
.what-results.page-head,
.privacy-data.page-head {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Ensure privacy block has no left accent and prevent reintroduction */
.privacy-data.page-head {
  border-left: none !important;
  padding-left: 18px;
}

.micro-trust { margin-top:8px; font-weight:700; color:#0f172a; }

/* Disclaimer and footer (updated per provided styles) */
.disclaimer-section {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  /* border-top removed to eliminate grey line above calculators section */
  background: transparent;
  box-shadow: none;
}

.disclaimer-micro {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.disclaimer-heading {
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
  margin-bottom: 0.65rem;
}

.disclaimer-text {
  color: #6b7280;
  font-size: 0.93rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.disclaimer-text:last-of-type {
  margin-bottom: 0;
}

.disclaimer-micro {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.site-footer {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  font-size: 0.9rem;
  color: #4a5568;
}

.footer-links {
  margin-bottom: 0.75rem;
}

.footer-links a {
  margin: 0 0.5rem;
  color: inherit;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-trust {
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: #6b7280;
}

.footer-copy {
  font-size: 0.8rem;
  color: #6b7280;
}
.preview-title{ font-weight:900; margin-bottom:8px; }
.preview-line{ display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px dashed rgba(2,6,23,.04); }
.preview-line:last-of-type{ border-bottom:none; }
.preview-note{ margin-top:12px; font-size:.94rem; color:var(--muted); }

@media(max-width:900px){
  .hero{ padding:24px 16px; }
  .hero-grid{ grid-template-columns: 1fr; grid-template-areas: "top" "right" "bottom"; }
  .preview-card{ order:0; }
  .hero-top, .hero-bottom{ width:100%; }
  .use-case-grid{ grid-template-columns:1fr; }
  .hero-ctas{ margin-top:12px; }
}

/* Desktop: place the CTAs in the left column and center them vertically between top and bottom */
@media(min-width:900px){
  /* keep CTAs in normal flow on desktop */
}

/* Keep the hero subheadline on one line at desktop widths */
@media(min-width:900px){
  .hero-top .lead{ white-space:normal; overflow-wrap:break-word; }
}

/* Keep chips on a single line on wider screens so they align neatly */
@media(min-width:900px){
  .chips{ flex-wrap:nowrap; }
  .chip{ flex:0 1 auto; white-space:nowrap; }
}

/* Mini guide cover and CTA */
.mini-guide-cover{
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  height: auto;
  max-width: 84px;
}
@media(max-width:1200px){
  .desktop-nav{
    flex-wrap:wrap; /* allow pills to wrap to next line on medium screens */
    margin-left:0;
    overflow-x:auto; /* allow scrolling when wrapped */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .desktop-nav::-webkit-scrollbar{ display:none; }
 }
 }

/* Mobile-specific: collapse header nav and show calc toggle */
@media(max-width:768px){
  /* Keep Home visible; hide other pills behind the calculators toggle */
  .desktop-nav a{ display:inline-flex; }
  .desktop-nav a:not(:first-child){ display:none; }
  .calc-toggle{ display:inline-flex; align-items:center; gap:8px; }
  .hamburger{ display:inline-flex; }
  .top-inner{ padding:6px 12px; }
}
}

.mini-guide-cta-content .cta-button{
  display:inline-block;
  margin-bottom:6px;
}

/* Credit Card Payoff: Free Snapshot preview banner */
.cta-snapshot-banner{
  max-width:920px;
  margin:2px auto 12px;
  width:100%;
  display:grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap:2px;
  align-items:center;
  background: linear-gradient(180deg, rgba(240,247,255,0.96), rgba(232,241,250,0.98));
  border:1px solid rgba(2,6,23,.08);
  border-radius:12px;
  padding:14px 14px;
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
}

.results-panel .cta-snapshot-banner{
  margin-top:14px;
}

body.snowball-page .cta-snapshot-banner{
  margin-top:22px;
  margin-left:0;
  margin-right:auto;
}

.cta-snapshot-title{
  margin:0 0 3px;
  font-size:1.05rem;
  color:var(--dark);
}

.cta-snapshot-outside-title{
  margin:10px 0 6px;
}

.cta-snapshot-subhead{
  margin:0 0 2px;
  color:var(--muted);
  font-weight:600;
  font-size:0.95rem;
}

.cta-snapshot-note{
  margin:0 0 8px;
  color:#475569;
  font-size:0.9rem;
}

.cta-snapshot-label{
  margin:0 0 6px;
  font-weight:800;
  color:var(--dark);
}

.cta-snapshot-list ul{
  margin:0 0 12px;
  padding-left:18px;
  color:var(--muted);
  line-height:1.2;
  font-size:0.95rem;
}

.cta-snapshot-content > .cta-snapshot-btn{
  margin-top:10px;
}

body.loan-extra-page .cta-snapshot-list ul,
body.debt-consolidation-page .cta-snapshot-list ul,
body.student-loan-page .cta-snapshot-list ul,
body.snowball-page .cta-snapshot-list ul{
  margin-bottom:18px;
}

body.loan-extra-page .cta-snapshot-content > .cta-snapshot-btn,
body.debt-consolidation-page .cta-snapshot-content > .cta-snapshot-btn,
body.student-loan-page .cta-snapshot-content > .cta-snapshot-btn,
body.snowball-page .cta-snapshot-content > .cta-snapshot-btn{
  display:inline-flex;
  align-items:center;
  margin-bottom:12px;
}

body.loan-extra-page .cta-snapshot-action-row,
body.debt-consolidation-page .cta-snapshot-action-row,
body.student-loan-page .cta-snapshot-action-row,
body.snowball-page .cta-snapshot-action-row{
  margin-top:14px;
}

.cta-snapshot-btn{
  padding:12px 19px;
  font-size:1.06rem;
  border-radius:14px;
  box-shadow: 0 4px 12px rgba(37,99,235,.16);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.cta-snapshot-btn:hover,
.cta-snapshot-btn:focus{
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(37,99,235,.20);
}

.cta-snapshot-action-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.cta-snapshot-inline-note{
  color:#94a3b8;
  font-style:italic;
  font-size:0.95rem;
}

.cta-snapshot-content > .cta-snapshot-inline-note{
  display:block;
  margin:10px 0 0;
  line-height:1.35;
}

.cta-snapshot-micro{
  margin:6px 0 0;
  color:#94a3b8;
  font-size:0.78rem;
  line-height:1.25;
}

.compare-strategy-card{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(2,6,23,.08);
  background:rgba(255,255,255,.84);
}

.compare-strategy-card .panel-note{
  margin:0;
}

.cta-snapshot-image{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:0;
}

.cta-snapshot-image img{
  width:100%;
  max-width:240px;
  height:auto;
  margin-top:-4px;
  border-radius:10px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

/* New Snapshot CTA block */
.snapshot-cta-box{
  margin-top:12px;
  padding:28px;
  max-width:920px;
  border-radius:12px;
  border:2px solid #1a1a2e;
  background:#ffffff;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.snapshot-cta-header h3{
  color:#1a1a2e;
  font-size:22px;
  font-weight:800;
}

.snapshot-cta-header p{
  color:#1a1a2e;
}

.snapshot-cta-bullets li{
  color:#333333;
}

.snapshot-cta-inner{
  display:block;
}

.snapshot-cta-header,
.snapshot-cta-footer{
  display:block;
  width:100%;
}

.snapshot-cta-footer{
  margin-top:12px;
}

.snapshot-cta-middle{
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:16px;
}

.snapshot-cta-bullets{
  flex:1;
  min-width:0;
}

.snapshot-cta-image{
  flex-shrink:0;
  width:180px;
  margin:0;
  display:flex;
  justify-content:flex-end;
}

.snapshot-cta-image img{
  width:180px;
  max-width:180px;
  height:auto;
  display:block;
  margin:0;
}

body.snowball-page .snapshot-cta-middle{
  align-items:flex-start;
  gap:10px;
}

body.snowball-page .snapshot-cta-image{
  align-self:flex-start;
  margin-top:-80px;
}

.snapshot-cta-bullets ul{
  margin:8px 0 0;
}

.snapshot-cta-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  box-sizing:border-box;
  padding:11px 18px;
  border-radius:12px;
  background:#2563eb;
  color:#ffffff;
  font-weight:800;
  text-decoration:none;
  border:1px solid rgba(37,99,235,.45);
  box-shadow: 0 6px 14px rgba(37,99,235,.22);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.snapshot-cta-button:hover,
.snapshot-cta-button:focus{
  background:#1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(37,99,235,.26);
  outline:none;
}

.snapshot-cta-subtext,
.snapshot-cta-upsell{
  margin:8px 0 0;
}

.snapshot-cta-subtext{
  font-style:italic;
}

@media (max-width:700px){
  .cta-snapshot-banner{
    grid-template-columns:1fr;
    padding:14px;
    max-width:100%;
  }
  .cta-snapshot-content{ order:1; }
  .cta-snapshot-image{ order:2; margin-top:24px; }
  .btn.primary.cta-snapshot-btn{ width:auto; text-align:center; margin:0 auto; display:block; max-width:260px; color:#fff !important; }

  .snapshot-cta-inner{
    display:block;
  }

  .snapshot-cta-middle{
    display:block;
    margin-bottom:12px;
  }

  .snapshot-cta-footer{
    margin-top:8px;
  }

  .snapshot-cta-image{
    width:100%;
    margin:16px auto;
    display:block;
    max-width:100%;
  }

  .snapshot-cta-image img{
    width:100%;
    max-width:180px;
    margin:0 auto;
  }
}

/* Mini guide banner (calm green) */
.cta-bar{
  background: linear-gradient(180deg, rgba(34,197,94,0.06), rgba(34,197,94,0.04));
  border: 1px solid rgba(34,197,94,0.12);
  border-radius:12px;
  padding:14px;
}

.mini-guide-inner{
  display:flex;
  gap:14px;
  align-items:center;
}

.mini-guide-body{ min-width:0; }
.mini-guide-headline{ margin:0 0 6px; font-weight:800; }
.mini-guide-line{ margin:0 0 10px; color:var(--muted); }
.mini-guide-cta-wrap{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

@media (max-width:600px){
  .mini-guide-inner{ flex-direction:column; align-items:flex-start; }
  .mini-guide-cover{ width:64px; height:auto; }
  .mini-guide-card .mini-guide-cta-wrap{ margin-top:12px; }
}
/* CTA cover image sizing: centered and responsive */
.cta-cover{
  display:block;
  max-width:160px;
  width:100%;
  height:auto;
  margin:12px auto;
  border-radius:6px;
}

@media (max-width:480px){
  .cta-cover{ max-width:130px; }
}

/* Ensure .cta-cover doesn't expand to full width when inside a horizontal mini-guide layout */
.mini-guide-inner img.cta-cover{ 
  width: auto; 
  flex: 0 0 auto; 
  margin: 0; /* align with text baseline inside the flex row */
}
.mini-guide-card img{
  min-width:160px;
  max-width:180px;
  border:2px solid #ffffff;
  border-radius:8px;
}
/* Finalized mini guide CTA card (dark navy variant with left border and subtle inset highlight) */
.mini-guide-card{
  background-color:#1a1a2e;
  border-left:6px solid #00c896;
  color:#f8fafc;
  border-radius:12px;
  padding:14px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}
.mini-guide-card .mini-guide-headline{ font-weight:800; color:#ffffff; margin:0 0 6px; }
.mini-guide-card .mini-guide-line{ color: rgba(255,255,255,0.9); margin:0 0 10px; }
.mini-guide-card .mini-guide-checklist{ list-style:none; margin:0 0 16px; padding-left:0; color: rgba(255,255,255,0.9); }
.mini-guide-card .mini-guide-checklist li{ margin:0 0 8px; }
.mini-guide-card .mini-guide-checklist li:last-child{ margin-bottom:0; }
.mini-guide-card .mini-guide-cta-wrap{ align-items:center; }
/* Ensure CTA helper microcopy in mini-guide cards is readable on green background */
.mini-guide-card .cta-helper{ color:#ffffff; font-weight:700; margin-left:8px; }

/* Prevent pseudo-icons inside the loan extra payment learn box (avoid duplicates) */
#learnBox .learn-checks li::before{ content: none !important; }

/* Loan Extra Payment: stacked statements without reserved icon gutter */
#learnBox .learn-checks{ display:block; gap:0; padding:0; margin:0; }
#learnBox .learn-checks li{ display:block; margin-bottom:12px; }
#learnBox .learn-checks .check-text{ font-size:1rem; line-height:1.45; color:var(--muted); margin:0; }
#learnBox .learn-checks .check-text strong{ display:block; margin:0 0 0.35rem 0; font-weight:800; color:#0f172a; }
#learnBox .learn-checks .check-text p{ margin:0; }

/* Make mini-guide-card match Credit Card CTA exactly (ensure specificity) */
.section-box #learnBox .mini-guide-card,
.what-means-inner #learnBox .mini-guide-card,
#learnBox .mini-guide-card{
  background-color:#1a1a2e !important;
  border-left:6px solid #145c44 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.9) !important;
}
#learnBox .mini-guide-card .mini-guide-headline{ font-weight:800 !important; color:#ffffff !important; }
#learnBox .mini-guide-card .mini-guide-line{ color: rgba(255,255,255,0.9) !important; }
.trust-bullets{ list-style:none; padding:0; margin:12px 0 0; display:flex; gap:12px; color:var(--muted); font-weight:700; flex-wrap:wrap; }

/* Footer and utility styles requested */
.site-footer {
  margin-top: 18px;
  text-align: center;
  padding: 18px 16px;
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
.preview-trust {
  text-align: center;
  margin-top: 10px;
  font-size: 0.95rem;
  color: #0f172a;
  font-weight: 700;
}
.site-footer .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.site-footer p, .site-footer .footer-links, .site-footer .footer-copy { margin: 8px 0; }
.site-footer .footer-links { display: inline-block; }
.site-footer .footer-copy { display: block; margin-top: 6px; }
.site-footer { display: flex; justify-content: center; }
/* Make footer span the full viewport and offset it so it appears centered
   even when placed inside a narrower container (common for calculator pages). */
.site-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
}
.site-footer a { text-decoration: none; color: inherit; font-weight:700; }
.site-footer a:hover { text-decoration: underline; }
.small-muted { font-size: 0.9rem; opacity: 0.8; }
.top-nav a { text-decoration: none; }
.top-nav a:hover { text-decoration: underline; }
.trust-bullets li{ background:rgba(255,255,255,.9); padding:8px 12px; border-radius:999px; border:1px solid rgba(2,6,23,.06); }

/* How steps */
.how-steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; margin-top:12px; }
.how-steps .step{ background:rgba(255,255,255,.96); border:1px solid rgba(2,6,23,.08); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:12px; }
.how-steps .step strong{ font-size:1.1rem; display:block; min-width:28px; }
@media(max-width:900px){ .how-steps{ grid-template-columns:1fr; } }

/* How it works step heading and body structure */
.step-heading{ display:flex; justify-content:flex-start; align-items:center; gap:10px; margin-bottom:8px; }
.step-heading strong{ font-weight:800; }
.step-badge{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:rgba(2,6,23,0.08); border:1px solid rgba(2,6,23,0.12); font-weight:700; font-size:0.95rem; color:var(--muted); flex-shrink:0; }
.step-emoji{ display:inline-block; font-size:1.15em; line-height:1; flex-shrink:0; }
.step-body{ line-height:1.4; color:var(--muted); font-size:0.95rem; }

/* Emoji sizing for calculator and inline icons handled globally; removed custom step sizing */

/* Desktop: keep two equal-width columns and center them when viewport is wide */
@media(min-width:1100px){
  .dashboard{
    grid-template-columns: repeat(2, minmax(420px, 560px));
    justify-content: center;
  }
}

@media(max-width:768px){
  .dashboard{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch;
    gap:16px;
  }

  .dashboard .left-col,
  .dashboard .right-col,
  .dashboard .results-col,
  .dashboard .inputs-col,
  .dashboard .results-panel,
  .dashboard .inputs-panel,
  .dashboard > .panel,
  .dashboard .panel{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  .dashboard .left-col,
  .dashboard .right-col,
  .dashboard .results-col,
  .dashboard .inputs-col,
  .dashboard .results-panel,
  .dashboard .inputs-panel,
  .dashboard > .panel,
  .dashboard .panel{
    background: transparent !important;
  }

  .wrap,
  .dashboard{
    background: transparent !important;
  }

  .desktop-nav{ display:none; }
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
  .calc-grid{ grid-template-columns:1fr; }
  .kpi-grid{ grid-template-columns:1fr; }
  .results{ grid-template-columns:1fr; }

  .dashboard .results-panel{
    display:flex;
    flex-direction:column;
  }

  .dashboard .results-panel .results{ order:1; }
  .dashboard .results-panel > .actions{ order:2; }
  .dashboard .results-panel #results-summary-message{ order:3; }
  .dashboard .results-panel .snapshot-cta-box{ order:4; }
  .dashboard .results-panel #tableSection{ order:5; }
  .dashboard .results-panel .graph-panel{ order:6; }
  .dashboard .results-panel .compare-strategy-card{ order:7; }

  body.loan-extra-page .dashboard .results-panel > .actions,
  body.debt-consolidation-page .dashboard .results-panel > .actions,
  body.student-loan-page .dashboard .results-panel > .actions{ order:2; }

  body.loan-extra-page .dashboard .results-panel #results-summary-message,
  body.debt-consolidation-page .dashboard .results-panel #results-summary-message,
  body.student-loan-page .dashboard .results-panel #results-summary-message{ order:3; }

  body.loan-extra-page .dashboard .results-panel .snapshot-cta-box,
  body.debt-consolidation-page .dashboard .results-panel .snapshot-cta-box,
  body.student-loan-page .dashboard .results-panel .snapshot-cta-box{ order:4; }

  body.loan-extra-page .dashboard .results-panel #tableSection,
  body.debt-consolidation-page .dashboard .results-panel #tableSection,
  body.student-loan-page .dashboard .results-panel #tableSection{ order:5; }

  body.loan-extra-page .dashboard .results-panel .graph-panel,
  body.debt-consolidation-page .dashboard .results-panel .graph-panel,
  body.student-loan-page .dashboard .results-panel .graph-panel{ order:6; }

  body.loan-extra-page .dashboard .results-panel .compare-strategy-card,
  body.debt-consolidation-page .dashboard .results-panel .compare-strategy-card,
  body.student-loan-page .dashboard .results-panel .compare-strategy-card{ order:7; }

  body.snowball-page #results{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  body.snowball-page #results > .section-title{ order:1; }
  body.snowball-page #results > .kpi-grid{ order:2; }
  body.snowball-page #results > .kpi{ order:3; }
  body.snowball-page #results > #results-summary-message{ order:4; }
  body.snowball-page #results > .snapshot-cta-box{ order:5; }
  body.snowball-page #results > #tables{ order:6; }

  /* Mobile-friendly table (stacked rows) */
  table thead{ display:none; }
  table, tbody, tr, td{ display:block; width:100%; }
  tr{ border-bottom:1px solid rgba(2,6,23,.10); }
  td{ border-bottom:none; display:flex; justify-content:space-between; gap:12px; }
  td::before{
    content: attr(data-label);
    font-weight:900;
    color:var(--muted);
  }
}

/* Mobile menu: ensure hamburger opens full-width stacked list of calculators */
@media(max-width:768px){
  .menu{
    position:absolute;
    left:0;
    right:0;
    top:64px;
    width:100%;
    min-width:0;
    border-radius:0;
    box-shadow: none;
    border-left: none;
    border-right: none;
    display:none;
    flex-direction:column;
    z-index:60;
    background:#fff;
  }

  .menu.open{ display:flex; }

  .menu a{
    display:block;
    padding:12px 16px;

/* Override: remove the emerald left border on mini-guide CTA boxes used in calculators */
.mini-guide-card,
#learnBox .mini-guide-card,
.section-box #learnBox .mini-guide-card,
.what-means-inner #learnBox .mini-guide-card {
  border-left: none !important;
  box-shadow: none !important;
}
    border-bottom:1px solid rgba(2,6,23,.06);
    font-weight:800;
    text-align:left;
  }

  .menu a:last-child{ border-bottom:none; }
}

/* Fix mobile menu clipping and scrolling: allow header inner to show overflow and make menu scrollable */
@media(max-width:768px){
  .top-inner{ overflow:visible; }
  .menu{ max-height: calc(100vh - 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}

/* Slightly reduce pill sizing on medium-large screens so long labels fit */
@media(max-width:1200px){
  .desktop-nav .pill{
    padding:8px 12px;
    font-size:0.95rem;
  }
}

/* Minor helpers */

/* Minor helpers */
.tables-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }

/* ================= COMPARE CHARTS LAYOUT ================= */
.compare-charts{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-top:12px;
}
.compare-charts .graph-static{ flex:1; min-width:0; }
.compare-charts .graph-static canvas{
  border-radius:12px;
  border:1px solid rgba(2,6,23,.06);
  box-shadow: 0 6px 18px rgba(2,6,23,.06);
  height:240px;
  display:block;
}
@media(max-width:900px){
  .compare-charts{ flex-direction:column; gap:10px; }
  .compare-charts .graph-static canvas{ height:220px; }
}

/* ================= LEARN MODAL ================= */
.learn-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:120; }
.learn-modal.open{ display:flex; }
.learn-modal-backdrop{ position:fixed; inset:0; background:rgba(2,6,23,0.46); backdrop-filter: blur(2px); }
.learn-modal-panel{ position:relative; z-index:2; width:clamp(320px,44vw,640px); background:#fff; border-radius:16px; padding:18px; box-shadow:0 18px 60px rgba(2,6,23,.22); border:1px solid rgba(2,6,23,.08); }
.learn-modal-panel h3{ margin-top:0; }
.learn-modal-content{ color:var(--muted); line-height:1.45; margin-bottom:12px; }
.learn-modal .actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
.learn-modal .learn-modal-close{ padding:8px 12px; border-radius:10px; }

@media(max-width:700px){
  .learn-modal-panel{ width:92%; padding:14px; border-radius:12px; }
}

/* ================= GUIDE CALLOUT ================= */
.callout{
  display:flex;
  gap:12px;
  align-items:center;
  background: linear-gradient(180deg, #eafaf0 0%, var(--accent2) 100%); /* light green → site green */
  border:1px solid #000; /* black border as requested */
  padding:14px;
  border-radius:12px;
  box-shadow: 0 6px 18px rgba(2,6,23,0.04);
}
.callout .callout-text{
  color:#000;
  font-weight:500; /* lighter weight for crisper display */
  line-height:1.35;
  -webkit-font-smoothing:subpixel-antialiased;
  -moz-osx-font-smoothing:auto;
  text-rendering:optimizeLegibility;
  text-shadow:none;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}
.callout .callout-text strong{ background: transparent; padding:0; border-radius:0; color:var(--accent); font-weight:600; }
.callout .callout-actions{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.price-badge{ background: #ffffff; border:1px solid rgba(2,6,23,0.06); padding:6px 10px; border-radius:999px; font-weight:900; color:var(--accent2); box-shadow:0 8px 20px rgba(2,6,23,0.04); }
.guide-cta{ padding:8px 12px; border-radius:12px; font-weight:900; background:#062e1a; border-color:rgba(2,6,23,0.12); color:#fff; }

/* Explicit gradient variant for the credit card payoff Learn callout */
.callout-gradient{
  background: linear-gradient(180deg, #eafaf0 0%, var(--accent2) 100%);
  border:1px solid #000;
}

@media(max-width:700px){
  .callout{ flex-direction:column; align-items:flex-start; }
  .callout .callout-actions{ width:100%; justify-content:space-between; margin-top:8px; }
}

/* Graph helpers */
.graph-controls{ display:flex; gap:12px; align-items:center; margin-bottom:8px; }
.graph-static{ background:transparent; padding:6px 0; min-height:240px; }
#compareCharts{ display:flex; gap:12px; }

@media(max-width:900px){
  #compareCharts{ flex-direction:column; }
}

/* Graph: static canvas beneath the heading (no white pill box) */
.graph-static{
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
  min-height:260px;
  display:block;
}
.graph-static canvas{ width:100%; height:260px; display:block; }

/* ================= PAGE SECTIONS (consistent across calculators) ================= */
.page-sections{ display:grid; gap:18px; margin:18px 0; grid-column:1 / -1; }
.section-heading{ font-size:1.75rem; font-weight:700; line-height:1.3; color:#0f172a; margin-bottom:1rem; }
.section-box{ border:1px solid rgba(2,6,23,.10); background:rgba(255,255,255,.94); border-radius:14px; padding:16px; min-height:120px; }

/* Additional sections used across calculators for consistent headings/spacing */
.additional-sections{ margin-top:18px; }
.section-heading{ font-size:1.75rem; font-weight:700; line-height:1.3; color:#0f172a; margin-bottom:1rem; }
.section-box{ border:1px dashed rgba(2,6,23,.10); background:rgba(255,255,255,.92); border-radius:12px; padding:14px; min-height:64px; margin-bottom:14px; }
.cell-input{
  width:100%;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(2,6,23,.14);
  background:rgba(255,255,255,.98);
  outline:none;
  font-size:1rem;
}

/* Ensure graph panel sits under Results on desktop by placing it in the right column.
   Keep default flow for mobile so panels stack Inputs -> Results -> Graph. */
@media(min-width:900px){
  /* Place graph under the input column and keep Results in the right column.
     Panels order in markup stays: Inputs (panel 1), Results (panel 2), Graph (panel 3).
     On desktop we position them into columns/rows so layout becomes:
       col1,row1: Inputs
       col2,row1: Results
       col1,row2: Graph
     On mobile the DOM order still stacks Inputs -> Results -> Graph. */
  .dashboard > .panel:first-child{ grid-column: 1; grid-row: 1; }
  .panel.results-panel{ grid-column: 2; grid-row: 1; }
  .panel.graph-panel{ grid-column: 1; grid-row: 2; }
  /* Prevent the Results panel from expanding the first row when the schedule is shown.
     Make the payoff table scroll inside the Results panel so the Graph stays under Inputs. */
  .panel.results-panel{ align-self: start; display:flex; flex-direction:column; min-height:0; }
  .panel.results-panel .table-wrap{ max-height: 360px; overflow:auto; -webkit-overflow-scrolling: touch; }
}

/* Mobile optimization for Free Debt Snapshot section */
@media(max-width:768px){
  #snapshotBox {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px;
  }

  #snapshotBox img {
    max-width: 300px;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  #snapshotBox > div,
  #snapshotBox > form {
    padding: 8px;
    line-height: 1.6;
  }

  #snapshotBox p {
    line-height: 1.6;
    margin: 8px 0;
  }

  #snapshotBox button,
  #snapshotBox input[type="submit"] {
    padding: 12px 16px;
    line-height: 1.5;
  }

  /* Mobile layout fix for Free Debt Snapshot Worksheet (PDF Preview) section */
  .cta-bar .mini-guide-inner {
    flex-direction: column !important;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .cta-bar .mini-guide-cover {
    max-width: 320px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin: 0 auto !important;
    display: block;
    flex-shrink: 0;
  }

  .cta-bar .mini-guide-body {
    width: 100%;
    max-width: 100%;
    padding: 0 16px;
    overflow-wrap: anywhere;
  }

  .cta-bar h3,
  .cta-bar p {
    width: 100%;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }

  .cta-bar ul {
    width: 100%;
    max-width: 100%;
  }

  .mini-guide-cta-wrap {
    width: 100%;
  }

  .mini-guide-cta-wrap .btn {
    width: 100%;
  }

  .guide-cta,
  .cta-button,
  .btn.primary { color:#fff !important; }
}

.cell-input:focus{
  border-color: rgba(37,99,235,.40);
  box-shadow: 0 0 0 3px rgba(37,99,235,.14);
}

/* Learn box checked list */
.learn-checks{ list-style:none; margin:0 0 12px; padding:0; display:grid; gap:10px; }
.learn-checks li{ display:flex; gap:12px; align-items:flex-start; }
.learn-checks .check-icon{ width:28px; height:28px; flex:0 0 28px; display:block; }
.learn-checks .check-text{ color:var(--muted); font-weight:400; line-height:1.35; }
.learn-checks .check-icon svg{ width:100%; height:100%; display:block; }

/* --- Tighten spacing inside "What Your Results Mean" (scoped) --- */
/* Targets the learn-checks used in calculator "What Your Results Mean" boxes */
#learnBox .learn-checks { gap:8px; margin:0 0 10px; }
#learnBox .learn-checks li { margin-bottom:0.9rem; }
#learnBox .learn-checks li:last-child { margin-bottom:0; }
#learnBox .learn-checks .check-text { margin:0; line-height:1.32; }
#learnBox .learn-checks .check-text strong { display:block; margin:0 0 0.12rem 0; font-weight:800; }
#learnBox .learn-checks .check-text p { margin:0.12rem 0 0.85rem 0; }

/* Also support pages that use the .what-means-inner.results-mean wrapper */
.what-means-inner.results-mean .learn-checks { gap:8px; }
.what-means-inner.results-mean .learn-checks li { margin-bottom:0.9rem; }
.what-means-inner.results-mean .learn-checks .check-text strong { display:block; margin:0 0 0.12rem 0; }
.what-means-inner.results-mean .learn-checks .check-text p { margin:0.12rem 0 0.85rem 0; }

/* FAQ accordion styles for Credit Card Payoff page */
.faq-section{ margin-top: 18px; }

.faq-section h2{
  margin: 0 0 10px;
  font-size: 18px;
  line-height: 1.25;
}

.faq-accordion{
  display: grid;
  gap: 10px;
}

.faq-item{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.75);
  overflow: hidden;
}

.faq-item summary{
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  list-style: none;
}

.faq-item summary::-webkit-details-marker{ display: none; }

.faq-item summary::after{
  content: "▾";
  float: right;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after{ transform: rotate(180deg); }

.faq-answer{
  padding: 0 14px 12px;
  line-height: 1.5;
  opacity: 0.95;
  font-size: 14px;
}

@media (max-width: 640px){
  .faq-section h2{ font-size: 17px; }
  .faq-item summary{ padding: 12px 12px; }
  .faq-answer{ padding: 0 12px 12px; font-size: 15px; }
}

/* Styles for updated Credit Card Payoff 'What Your Results Mean' */
.what-means-inner {
  max-width: 900px;
  margin: 0; /* left-align with surrounding sections */
  padding: 0 16px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
}
.what-means-inner .learn-checks { list-style:none; padding:0; margin:0; }
.what-means-inner .learn-checks li { display:flex; gap:12px; align-items:flex-start; margin-bottom:12px; }
.what-means-inner .learn-checks .check-icon { flex:0 0 32px; width:32px; height:32px; margin-top:4px; }
.what-means-inner .learn-checks .check-text { flex:1 1 auto; font-size:1rem; line-height:1.5; }
.what-means-inner .cta-bar { background:#1a1a2e; color:#fff; border-radius:12px; padding:14px; margin-top:14px; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; overflow:hidden; }
.what-means-inner .cta-bar .cta-text { flex:1 1 60%; min-width:0; margin:0; font-weight:700; }
.what-means-inner .cta-button { flex:0 0 auto; min-height:44px; padding:10px 18px; display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; }

@media (max-width: 480px) {
  .what-means-inner { font-size:16px; line-height:1.5; }
  .what-means-inner .learn-checks li { gap:10px; margin-bottom:10px; }
  .what-means-inner .cta-bar { padding:12px; }
  .what-means-inner .cta-bar .cta-text { font-size:0.98rem; }
  .what-means-inner .cta-button { padding:12px 14px; width:auto; }
}

/* Nudge hero CTAs up slightly so they sit closer to the lead text */
.hero-bottom .hero-ctas {
  margin-top: 0px;
}

@media (min-width: 900px) {
  /* lift the CTAs a bit higher on desktop without affecting mobile flow */
  .hero-bottom .hero-ctas { margin-top: -16px; }
}

/* small helper text under CTA button */
.what-means-inner .cta-helper{ margin-top:8px; color:rgba(17,24,39,0.65); font-size:13px; line-height:1.4; }
@media (max-width:480px){ .what-means-inner .cta-helper{ font-size:14px; } }

/* Micro-disclaimer styling under CTA */
.what-means-inner .micro-disclaimer { margin-top:10px; color: rgba(17,24,39,0.6); font-size:13px; line-height:1.4; }
.what-means-inner .micro-disclaimer p { margin:0 0 6px 0; }
@media (max-width: 480px) {
  .what-means-inner .micro-disclaimer { font-size:14px; }
}

@media (max-width: 768px) {
  /* Mobile-only: replace dark/multi-color gradients with a subtle light-blue background
     (keeps desktop/tablet gradients intact) */
  :root {
    --mobile-bg-blue: #e6f7ff; /* light-blue matching left side of existing gradient */
    --mobile-text-strong: #072033; /* dark navy for high contrast on mobile */
  }

  /* Override large section/background containers */
  body,
  .page-layout,
  .wrap,
  .main,
  .page-head,
  .hero,
  .hero-grid,
  .hero-top,
  .hero-bottom,
  .hero-right,
  header.top,
  footer.site-footer {
    background-image: none !important;
    background-color: var(--mobile-bg-blue) !important;
    color-scheme: light;
  }

  /* Ensure cards and content panels remain white/opaque for readability */
  .section-box,
  .preview-card,
  .calc-card,
  .usecase-pills,
  .menu,
  .calc-menu {
    background-image: none !important;
    background-color: rgba(255,255,255,0.96) !important;
    color: var(--mobile-text-strong) !important;
  }

  /* Keep footer transparent on mobile */
  .footer-inner {
    background-image: none !important;
    background-color: transparent !important;
    color: var(--mobile-text-strong) !important;
  }

  /* Make sure text is high-contrast on mobile */
  body,
  h1, h2, h3, h4, p, li, a, .lead, .muted, .chip, .preview-note, .usecase-item, .faq-answer, .faq-item summary {
    color: var(--mobile-text-strong) !important;
  }

  /* Remove any element-level gradients or overlays */
  .bg-gradient,
  .has-gradient,
  [style*="linear-gradient"],
  [class*="gradient"] {
    background-image: none !important;
    background-color: var(--mobile-bg-blue) !important;
  }

  /* Keep interactive elements visible and accessible */
  .btn,
  .pill,
  .hamburger,
  .calc-toggle {
    color: inherit;
  }
}

/* Mini Guide CTA refinements (credit card payoff page) */
.mini-guide-card {
  background-color: #1b6a52; /* slightly calmer, one notch less saturated */
  border-left: 6px solid #145c44;
  color: #f8fafc; /* off-white text for readability */
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), 0 6px 18px rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 1.5rem 1.75rem; /* slightly reduced vertical height */
  border-top: 1px solid rgba(255,255,255,0.08); /* subtle divider feel */
  margin-top: 1.25rem;
}
.mini-guide-card .mini-guide-headline { font-weight: 800; color: #ffffff; }
.mini-guide-card .mini-guide-line { color: rgba(255,255,255,0.85); }
.mini-guide-card .mini-guide-body { color: #f8fafc; }
/* keep button colors intact; buttons inherit their own styles elsewhere */

/* Emoji alignment tweaks (use on <span class="icon-emoji">) */
.icon-emoji { font-size: 0.95em; margin-right: 0.4rem; vertical-align: -0.08em; }

/* Results text hierarchy refinements */
.results-mean h4 { color: #0f172a; }
.results-mean p { color: #334155; }
/* Also apply to the existing markup used in this section */
.results-mean .check-text strong { color: #0f172a; }
.results-mean .check-text { color: #334155; }


/* Mobile adjustments: ensure learn boxes, CTA, chips and spacing match desktop pattern */
@media (max-width: 768px) {
  .what-means-inner { padding: 0 12px; font-size: 16px; line-height:1.5; }

  /* stacked statements spacing tighter on mobile */
  #learnBox .learn-checks { gap: 8px; }
  #learnBox .learn-checks li { margin-bottom: 10px; }
  #learnBox .learn-checks .check-text strong { display:block; margin:0 0 6px 0; font-weight:800; }
  #learnBox .learn-checks .check-text p { margin:0; }

  /* CTA compact styling on mobile */
  #learnBox .mini-guide-card { padding:12px; border-radius:10px; margin-top:12px; }
  #learnBox .mini-guide-card .mini-guide-headline { font-size:1.05rem; }
  #learnBox .mini-guide-card .mini-guide-line { font-size:0.95rem; }
  #learnBox .mini-guide-cover { width:64px; height:auto; }

  /* Keep chips readable but inline on mobile */
  .chips { gap:8px; font-weight:700; color:var(--muted); }

  /* Extra breathing room above usecases on mobile */
  .hero-bottom .usecases { margin-top:22px; }
}

/* ===== HERO: subtle visual guide between content + snapshot ===== */
/* Add this ONLY if your hero wrapper exists; if your wrapper class is different,
   replace .hero with the correct top-level hero container selector. */
.hero {
  position: relative;
}

/* A faint divider line that guides the eye left → right */


/* ===== Snapshot card feels “live” (subtle hover) ===== */
.preview-card {
  transition: transform 160ms ease, box-shadow 160ms ease;
  will-change: transform;
}

.preview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
}

/* Tiny badge in snapshot title */
.preview-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0f172a;
  background: rgba(15, 23, 42, 0.06);
  vertical-align: middle;
}

/* ===== Micro-caption + trust signal ===== */
.hero-primary-meta {
  margin-top: 0.25rem;
  font-size: 0.9rem;
  color: #0f172a;
  font-weight: 600;
}

.hero-cta-primary {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ===== Usecases: green accent for visual anchoring ===== */
.usecase-pills {
  border-left: none !important;
  padding-left: 1rem;
}

/* Make the label slightly stronger */
.usecases-label {
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 0.6rem;
}

/* Tighten vertical rhythm: reduce space between section headings and their first content
   This reduces only the header bottom margin and the top margin of the immediate next element
   (paragraph, ul, or subtext). It does not change section separation or card spacing. */
h2,
.section-heading,
.section-title,
.calc-section-title,
.disclaimer-heading {
  /* keep existing visual size while tightening spacing */
  margin-bottom: 0.5rem !important;
}

h2 + p,
h2 + ul,
h2 + .panel-sub,
h2 + .section-subtext,
.section-heading + p,
.section-heading + ul,
.section-heading + .section-subtext,
.section-title + p,
.section-title + ul,
.section-title + .section-subtext,
.calc-section-title + p,
.calc-section-title + ul,
.calc-section-title + .section-subtext,
.disclaimer-heading + p {
  margin-top: 0.25rem !important;
}

/* Slightly loosen on very small screens for readability */
@media(max-width:480px){
  h2,
  .section-heading,
  .section-title,
  .calc-section-title,
  .disclaimer-heading { margin-bottom: 0.65rem !important; }
  h2 + p,
  .section-heading + p,
  .section-title + p { margin-top: 0.35rem !important; }
}

/* Strong override: remove left accent (border or pseudo-element) from mini-guide CTAs globally
   This only removes the left accent; it preserves background, padding, radius, text, and button styles. */
.mini-guide-card,
#learnBox .mini-guide-card,
.section-box #learnBox .mini-guide-card,
.what-means-inner #learnBox .mini-guide-card {
  border-left: none !important;
  /* remove inset highlight that looked like a left accent */
  box-shadow: none !important;
}
.mini-guide-card::before,
.mini-guide-card::after,
#learnBox .mini-guide-card::before,
#learnBox .mini-guide-card::after,
.section-box #learnBox .mini-guide-card::before,
.section-box #learnBox .mini-guide-card::after {
  display: none !important;
  content: none !important;
}

/* Emoji items: keep spacing consistent */
.use-case-item {
  font-weight: 600;
  color: #0f172a;
}