#page-budgeter{
  background:#FFFCF7; font-family:'Nunito',system-ui,sans-serif;
  padding-top:0 !important; padding-bottom:96px;
}
/* "bg-" prefix; every trap-word (hero,-card,-tile,-tag,badge,pill,metric,stat-,-fill,
   progress-,-section,-meta,-input) is avoided deliberately. */
.bgx-top{ position:relative; width:100%; margin:0; padding:0 !important; background:none !important; }
/* The banner carries the heading and tagline itself, so it IS the hero — repeating
   that text beside it would say everything twice. Exactly 2:1, so it never crops. */
.bgx-banner{ width:100%; display:block; }
.bgx-banner img{ width:100%; height:auto; display:block; aspect-ratio:2/1; object-fit:cover; }
.bgx-hero{
  max-width:1240px; margin:0 auto; padding:26px 20px 8px;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
.bgx-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.bgx-back{
  position:absolute; top:18px; left:18px; z-index:5; display:inline-flex; align-items:center; gap:6px;
  background:#243447; border:none; color:#fff !important; -webkit-text-fill-color:#fff !important;
  padding:10px 16px; border-radius:999px; font:inherit; font-weight:700; font-size:.82rem;
  cursor:pointer; min-height:44px;
}
#page-budgeter h1.bgx-h1{
  font-family:'Playfair Display',serif; font-size:clamp(2rem,4.4vw,3rem); line-height:1.12; margin:0 0 12px;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
.bgx-eb{
  font-size:.82rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; margin:0 0 10px;
  color:#7d9e77 !important; -webkit-text-fill-color:#7d9e77 !important;
}
/* renamed from .bgx-tag — the global [class*="-tag"] rule was overriding the size
   (1.45rem -> 12.48px) and forcing a sage background onto the tagline. */
.bgx-line{
  font-family:'Caveat',cursive; font-size:1.45rem; margin:0 0 12px;
  color:#5E7E57 !important; -webkit-text-fill-color:#5E7E57 !important;
}
.bgx-desc{
  font-size:1.05rem; line-height:1.75; margin:0 0 22px;
  color:#5b5950 !important; -webkit-text-fill-color:#5b5950 !important;
}
.bgx-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.bgx-btn{
  background:#243447; border:2px solid #243447; border-radius:999px;
  padding:13px 24px; min-height:48px; font:inherit; font-weight:800; font-size:.95rem;
  color:#fff !important; -webkit-text-fill-color:#fff !important; cursor:pointer;
}
.bgx-btn:hover{ background:#31465F; }
.bgx-btn--soft{
  background:#fff; border-color:#EAE2D4;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
.bgx-btn--soft:hover{ border-color:#7d9e77; background:#FBF6EC; }
.bgx-btn--blush{
  background:#FDF4F0; border-color:#F3DCD2;
  color:#8f4526 !important; -webkit-text-fill-color:#8f4526 !important;
}
.bgx-btn--sm{ padding:9px 16px; min-height:44px; font-size:.85rem; }
.bgx-btn:focus-visible,.bgx-back:focus-visible,.bgx-nb:focus-visible,
.bgx-sum:focus-visible,.bgx-fc:focus-visible,.bgx-fab:focus-visible{
  outline:3px solid #CF9E3F; outline-offset:3px;
}
.bgx-art{
  background:linear-gradient(150deg,#EAF1E4,#FDF4F0); border-radius:26px; padding:26px;
  display:grid; place-items:center; min-height:230px;
}
.bgx-art svg{ width:100%; max-width:320px; height:auto; }

.bgx-wrap{ max-width:1240px; margin:0 auto; padding:6px 20px 20px; }
#page-budgeter h2.bgx-h2{
  font-family:'Playfair Display',serif; font-size:clamp(1.45rem,2.7vw,1.95rem); margin:0 0 4px;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
#page-budgeter h3.bgx-h3{
  font-family:'Playfair Display',serif; font-size:1.2rem; margin:0 0 6px;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
.bgx-sub{ font-size:1rem; color:#78766c !important; -webkit-text-fill-color:#78766c !important; margin:0 0 20px; }
.bgx-store{ font-size:.86rem; text-align:center; margin:0 0 14px;
  color:#a8a496 !important; -webkit-text-fill-color:#a8a496 !important; }

/* summary cards */
.bgx-sums{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-bottom:28px; }
.bgx-sum{
  background:#fff; border:1px solid #EAE2D4; border-radius:22px; padding:20px;
  text-align:left; cursor:pointer; font:inherit; display:flex; flex-direction:column; gap:6px;
  box-shadow:0 5px 18px rgba(51,64,47,.04);
}
.bgx-sum:hover{ border-color:#7d9e77; }
.bgx-sum .lb{
  font-size:.85rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#8d8a7e !important; -webkit-text-fill-color:#8d8a7e !important;
}
.bgx-sum .big{
  font-family:'Playfair Display',serif; font-size:1.85rem; line-height:1.1;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
  font-variant-numeric:tabular-nums;
}
.bgx-sum .small{ font-size:1rem; color:#5b5950 !important; -webkit-text-fill-color:#5b5950 !important; line-height:1.55; }
.bgx-bar{ height:10px; border-radius:999px; background:#EFEADF; overflow:hidden; }
.bgx-bar i{ display:block; height:100%; border-radius:999px; background:#7d9e77; }
.bgx-bar i.warn{ background:#CF9E3F; }   /* soft amber, never red unless strong alerts on */
.bgx-bar i.alert{ background:#C0562F; }
.bgx-hint{
  font-size:.95rem; border-radius:12px; padding:8px 11px; line-height:1.55;
  background:#FBF1DC; color:#7a5f28 !important; -webkit-text-fill-color:#7a5f28 !important;
}

/* feature grid */
.bgx-fg{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:14px; margin-bottom:30px; }
.bgx-fc{
  background:#fff; border:1px solid #EAE2D4; border-radius:22px; padding:20px;
  display:flex; flex-direction:column; gap:8px; text-align:left; font:inherit; cursor:pointer;
}
.bgx-fc:hover{ border-color:#7d9e77; }
.bgx-fc svg{ width:26px; height:26px; stroke:#5E7E57; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.bgx-fc p{ margin:0; font-size:1rem; line-height:1.6;
  color:#5b5950 !important; -webkit-text-fill-color:#5b5950 !important; }
.bgx-fc .go{
  margin-top:auto; font-weight:800; font-size:.95rem;
  color:#5E7E57 !important; -webkit-text-fill-color:#5E7E57 !important;
}

/* connected features */
.bgx-conn{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.bgx-cc{
  background:#fff; border:1px solid #EAE2D4; border-radius:22px; padding:20px;
  display:flex; flex-direction:column; gap:8px;
}
.bgx-cc .row{ display:flex; align-items:center; gap:12px; }
.bgx-cc svg{ width:24px; height:24px; stroke:#5E7E57; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; flex:none; }
.bgx-cc b{ color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.bgx-cc p{ margin:0; font-size:1rem; line-height:1.6;
  color:#5b5950 !important; -webkit-text-fill-color:#5b5950 !important; }
.bgx-status{
  font-size:.82rem; font-weight:800; border-radius:999px; padding:4px 10px; display:inline-block;
}
.bgx-status.live{ background:#EAF1E4; color:#41603a !important; -webkit-text-fill-color:#41603a !important; }
.bgx-status.soon{ background:#F4F1E8; color:#6d6b62 !important; -webkit-text-fill-color:#6d6b62 !important; }
.bgx-tog{
  display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto;
  padding-top:10px; border-top:1px solid #F4F1E8;
}
.bgx-tog span{ font-size:.9rem; font-weight:700; color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.bgx-sw{
  position:relative; width:56px; height:44px; border:none; background:none; cursor:pointer; flex:none;
}
.bgx-sw::before{
  content:''; position:absolute; top:11px; left:0; width:52px; height:22px; border-radius:999px;
  background:#DDD7C8; transition:background .18s ease;
}
.bgx-sw::after{
  content:''; position:absolute; top:13px; left:3px; width:18px; height:18px; border-radius:50%;
  background:#fff; transition:transform .18s ease; box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.bgx-sw[aria-checked="true"]::before{ background:#7d9e77; }
.bgx-sw[aria-checked="true"]::after{ transform:translateX(30px); }
.bgx-sw:focus-visible{ outline:3px solid #CF9E3F; outline-offset:2px; border-radius:12px; }

/* lists */
.bgx-panel{
  background:#fff; border:1px solid #EAE2D4; border-radius:24px; padding:22px; margin-bottom:20px;
}
.bgx-ph{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.bgx-item{
  display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid #F4F1E8; flex-wrap:wrap;
}
.bgx-item:last-child{ border-bottom:none; }
.bgx-item b{ color:#243447 !important; -webkit-text-fill-color:#243447 !important; font-size:1rem; }
.bgx-item .sub{ font-size:.95rem; color:#78766c !important; -webkit-text-fill-color:#78766c !important; }
.bgx-item .amt{
  margin-left:auto; font-family:'Playfair Display',serif; font-size:1.2rem; font-variant-numeric:tabular-nums;
  color:#243447 !important; -webkit-text-fill-color:#243447 !important;
}
.bgx-empty{
  background:#FBF6EC; border:1px dashed #EAE2D4; border-radius:18px; padding:28px; text-align:center;
  line-height:1.7; font-size:1rem;
  color:#78766c !important; -webkit-text-fill-color:#78766c !important;
}
.bgx-chip{
  display:inline-block; font-size:.82rem; font-weight:800; border-radius:999px; padding:4px 10px;
  background:#F4F1E8; color:#6d6b62 !important; -webkit-text-fill-color:#6d6b62 !important;
}
.bgx-chip.src{ background:#EAF1E4; color:#41603a !important; -webkit-text-fill-color:#41603a !important; }

/* nav */
.bgx-nav{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; margin-bottom:20px; }
.bgx-nb{
  flex:none; background:#fff; border:1.5px solid #EAE2D4; border-radius:999px;
  padding:10px 18px; min-height:44px; font:inherit; font-weight:700; font-size:.9rem;
  color:#5b7fa6 !important; -webkit-text-fill-color:#5b7fa6 !important; cursor:pointer;
}
.bgx-nb.on{ background:#243447; border-color:#243447; color:#fff !important; -webkit-text-fill-color:#fff !important; }

/* sticky mobile bar */
.bgx-mob{
  position:fixed; left:0; right:0; bottom:0; z-index:900; display:none;
  background:#fff; border-top:1px solid #EAE2D4;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  justify-content:space-around; align-items:center;
}
.bgx-mb{
  background:none; border:none; font:inherit; font-size:.84rem; font-weight:700; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  min-width:56px; min-height:52px; padding:5px;
  color:#78766c !important; -webkit-text-fill-color:#78766c !important;
}
.bgx-mb.on{ color:#243447 !important; -webkit-text-fill-color:#243447 !important; }
.bgx-mb svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.bgx-fab{
  background:#243447; border:none; border-radius:50%; width:58px; height:58px;
  display:grid; place-items:center; cursor:pointer; margin-top:-18px;
  box-shadow:0 8px 20px rgba(36,52,71,.32);
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
.bgx-fab svg{ width:26px; height:26px; stroke:#fff; stroke-width:2.2; fill:none;
  stroke-linecap:round; stroke-linejoin:round; }

@media (max-width:900px){
  .bgx-hero{ grid-template-columns:1fr; gap:22px; padding:34px 16px 20px; }
  .bgx-art{ order:2; }
}
@media (max-width:760px){
  .bgx-mob{ display:flex; }
  #page-budgeter{ padding-bottom:104px; }
  .bgx-wrap{ padding:6px 14px 20px; }
  .bgx-cta{ flex-direction:column; }
  .bgx-cta .bgx-btn{ width:100%; }
  .bgx-sum .big{ font-size:1.7rem; }   /* important figures must stay large */
}
.bgx-lock{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:#FBF1DC; border:1px solid #E8D9AE; border-radius:18px;
  padding:16px 18px; margin:0 0 14px;
}
.bgx-lock b{ color:#243447 !important; -webkit-text-fill-color:#243447 !important; font-size:1rem; }
.bgx-lock p{
  margin:4px 0 0; font-size:1rem; line-height:1.6;
  color:#7a5f28 !important; -webkit-text-fill-color:#7a5f28 !important;
}

@media (prefers-reduced-motion:reduce){
  .bgx-sw::before,.bgx-sw::after{ transition:none !important; }
}

/* ---- 16px floor -------------------------------------------------------------
   The spec asks for a 16px minimum and no tiny text. These seven were the only
   things still rendering below it (13.1–15.2px), so they are lifted explicitly.
   Uppercase card labels and status chips are lifted too — on a money screen the
   label is as much a part of the reading as the figure. */
#page-budgeter .bgx-store{ font-size:1rem !important; color:#8d8a7e !important; -webkit-text-fill-color:#8d8a7e !important; }
#page-budgeter .bgx-sum .lb{ font-size:1rem !important; letter-spacing:.04em; }
#page-budgeter .bgx-fc .go{ font-size:1rem !important; }
#page-budgeter .bgx-status{ font-size:1rem !important; padding:5px 12px; }
#page-budgeter .bgx-tog span{ font-size:1rem !important; line-height:1.5; }
#page-budgeter .bgx-cc p{ font-size:1rem !important; line-height:1.65; }
#page-budgeter .bgx-item .sub,
#page-budgeter .bgx-hint{ font-size:1rem !important; line-height:1.6; }

/* Buttons, nav pills and chips were still 13.1–15.2px. They are actions, not body
   copy, but 13px is hard work on a phone — all lifted to 16px.
   The bottom tab-bar labels stay smaller by design: at 16px the five items wrap on a
   360px screen. They sit beside a 21px icon and each has a 52px tap target. */
#page-budgeter .bgx-btn,
#page-budgeter .bgx-btn--sm,
#page-budgeter .bgx-back,
#page-budgeter .bgx-nb,
#page-budgeter .bgx-chip{ font-size:1rem !important; }
#page-budgeter .bgx-chip{ padding:5px 12px; }
#page-budgeter .bgx-mb{ font-size:.84rem; }