/* Mortgage cluster — brand palette only (#012F38 · #6aba5a · #f8f7f4).
   Scoped to mg-* so nothing here can leak into the pillar's existing styles. */

.mg-cols{columns:2;column-gap:2.2rem;margin:0 0 1.2rem;padding-left:1.15rem}
.mg-cols li{break-inside:avoid;margin-bottom:.4rem}
@media (max-width:620px){.mg-cols{columns:1}}

.mg-pull{font-family:'Playfair Display',Georgia,serif !important;
  font-size:1.16rem !important;line-height:1.5 !important;color:#012F38 !important;
  border-left:3px solid var(--lime,#A2C243);padding-left:1.05rem;margin:1.4rem 0 !important}

/* the "pre-approval is not final approval" style warning */
.mg-callout{background:#fff;border-left:3px solid #6aba5a;padding:1.2rem 1.4rem;
  margin:1.4rem 0;border-radius:0 3px 3px 0;box-shadow:0 8px 24px rgba(1,47,56,.05)}
.mg-callout p{margin:0 0 .6rem}
.mg-callout p:last-child{margin-bottom:0}

/* resource hub cards */
.mg-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:1.1rem;margin:1.5rem 0 0}
.mg-card{display:flex;flex-direction:column;background:#fff;border-radius:4px;
  border-top:3px solid #6aba5a;padding:1.25rem 1.35rem 1.15rem;text-decoration:none;
  box-shadow:0 8px 26px rgba(1,47,56,.05);transition:box-shadow .2s,transform .2s}
.mg-card:hover{box-shadow:0 16px 40px rgba(1,47,56,.11);transform:translateY(-2px)}
.mg-card b{font-family:'Playfair Display',Georgia,serif;font-size:1.08rem;
  color:#012F38;margin-bottom:.45rem}
.mg-card p{font-size:.9rem;line-height:1.6;color:var(--muted,#5A5A5A);margin:0 0 .95rem}
.mg-go{font-size:.82rem;font-weight:500;color:#012F38;border-bottom:2px solid #6aba5a;
  padding-bottom:2px;align-self:flex-start;margin-top:auto}

/* calculator quick-links */
.mg-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:.85rem;margin:1.4rem 0 0}
.mg-tool{display:block;background:#f8f7f4;border:1px solid #e6e3dc;border-radius:4px;
  padding:1rem 1.15rem;text-decoration:none;transition:border-color .2s}
.mg-tool:hover{border-color:#6aba5a}
.mg-tool b{display:block;color:#012F38;font-size:.98rem;margin-bottom:.3rem}
.mg-tool span{display:block;font-size:.84rem;color:#0e7c66}

/* buttons */
.mg-btns{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.3rem}
.mg-btn{display:inline-block;background:#6aba5a;color:#012F38;padding:.72rem 1.35rem;
  font-size:.84rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;border-radius:3px;border:1px solid #6aba5a;transition:.2s}
.mg-btn:hover{background:#5aa84a;color:#012F38}
.mg-btn.ghost{background:transparent;color:#012F38;border-color:#c9d3cd}
.mg-btn.ghost:hover{border-color:#6aba5a;color:#0e7c66;background:transparent}

/* success story */
.mg-story{background:linear-gradient(135deg,#012F38 0%,#0B3D47 100%);
  border-left:4px solid #6aba5a;border-radius:5px;padding:2rem 2.2rem}
.mg-story-eyebrow{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lime,#A2C243);font-weight:600;margin-bottom:.8rem}
.mg-story .mg-story-h{color:#fff !important;margin:0 0 1rem}
.mg-story .mg-story-h em{color:#6aba5a;font-style:italic}
.mg-story-body p{color:rgba(255,255,255,.87) !important;line-height:1.8;
  margin:0 0 .8rem}
.mg-story-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.3rem 0}
.mg-story-tags span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:#6aba5a;border:1px solid rgba(106,186,90,.45);border-radius:99px;
  padding:.32rem .8rem}
.mg-story-cta{display:inline-block;background:#6aba5a;color:#012F38 !important;
  padding:.72rem 1.4rem;border-radius:3px;font-size:.82rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.mg-story-cta:hover{background:#5aa84a}
@media (max-width:700px){.mg-story{padding:1.5rem 1.3rem}}

/* hero call link under the buttons */
.hero-call{margin:.9rem 0 0;font-size:.95rem}
.hero-call a{color:rgba(255,255,255,.9);text-decoration:none;
  border-bottom:1px solid rgba(106,186,90,.6);padding-bottom:1px}
.hero-call a:hover{color:#6aba5a}

/* mobile sticky contact bar — Al's details, not the general office line.
   Deliberately slim so it never covers content. */
.mg-bar{display:none}
@media (max-width:820px){
  .mg-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:900;
    background:#012F38;border-top:1px solid rgba(106,186,90,.5);
    box-shadow:0 -4px 18px rgba(0,0,0,.22)}
  .mg-bar a{flex:1;text-align:center;padding:.7rem .4rem;color:#fff;
    font-family:'DM Sans',system-ui,sans-serif;font-size:.8rem;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
    border-right:1px solid rgba(255,255,255,.12)}
  .mg-bar a:last-child{border-right:0;background:#6aba5a;color:#012F38}
  /* keep it clear of the page end */
  body{padding-bottom:44px}
}

/* calculator -> Al handoff, injected on results */
.mg-verify{background:#f8f7f4;border-left:3px solid #6aba5a;padding:1.2rem 1.4rem;
  margin:1.4rem 0 0;border-radius:0 3px 3px 0}
.mg-verify b{display:block;font-family:'Playfair Display',Georgia,serif;
  font-size:1.05rem;color:#012F38;margin-bottom:.4rem}
.mg-verify p{font-size:.92rem;line-height:1.65;color:var(--muted,#5A5A5A);margin:0 0 .85rem}
.mg-verify .mg-btns{margin-top:0}

/* The site chat FAB sits bottom-right at 20px and collided with the Apply
   button on the sticky bar. Lift it clear on the viewports where the bar
   shows — scoped to pages that actually carry the bar. */
@media (max-width:820px){
  body:has(.mg-bar) #clg-as-fab{bottom:56px}
}

/* ── reading measure on the mortgage pillar ────────────────────────────────
   The pillar's content column runs ~920px, so body copy sets in very long
   lines. The guides beneath it use ~756px of text inside a centred 820px
   column. This brings the pillar into line: a modest inset plus a capped
   measure on prose, while cards, grids and the success story keep the full
   column width. */
.wrap main .sec{padding-left:clamp(0px,3vw,48px)}
.wrap main .sec > p,
.wrap main .sec > ul,
.wrap main .sec > ol,
.wrap main .sec > h2,
.wrap main .sec > h3,
.wrap main .sec > .mg-callout,
.wrap main .sec > .mg-pull,
.wrap main .sec > .faq{max-width:72ch}
/* the eyebrow tag should follow the same left edge */
.wrap main .sec > .tag{padding-left:0}
/* full-width elements keep the whole column */
.wrap main .sec > .mg-cards,
.wrap main .sec > .mg-tools,
.wrap main .sec > .mg-btns,
.wrap main .sec > .mg-story-tags{max-width:none}
.wrap main .sec.mg-story{padding-left:2rem}
@media (max-width:820px){
  .wrap main .sec{padding-left:0}
  .wrap main .sec.mg-story{padding-left:1.3rem}
}

/* ── Al's market update ────────────────────────────────────────────────────
   Auto-published from his emailed update. Dated on purpose: a rate note with
   no date is worse than none, because the reader can't tell if it's stale. */
.mg-asof{font-size:.86rem !important;color:var(--muted,#5A5A5A) !important;margin:-.4rem 0 1rem !important;
  letter-spacing:.01em}
.mg-update{background:#fff;border-left:3px solid #6aba5a;padding:1.3rem 1.5rem;
  border-radius:0 3px 3px 0;box-shadow:0 8px 24px rgba(1,47,56,.05);margin:0 0 1rem;
  max-width:72ch}
.mg-update p{margin:0 0 .9rem}
.mg-update p:last-child{margin-bottom:0}
.mg-update ul{margin:.9rem 0 0;padding-left:1.15rem}
.mg-update li{margin-bottom:.45rem;font-size:1rem}
#market-update .mg-asof:last-of-type{font-style:italic;margin-top:.9rem !important;
  max-width:72ch}

/* ── "Text Al" desktop fallback ────────────────────────────────────────────
   sms: links do nothing on a desktop with no messaging handler. This panel
   only appears when the click demonstrably didn't open anything. */
#al-fallback{position:fixed;inset:0;z-index:9600;display:none;
  align-items:center;justify-content:center;background:rgba(1,47,56,.55);
  padding:1.5rem}
#al-fallback.open{display:flex}
#al-fallback .alf-box{position:relative;background:#fff;border-radius:6px;
  max-width:420px;width:100%;padding:1.7rem 1.8rem;
  box-shadow:0 30px 80px rgba(1,47,56,.35);
  font-family:'DM Sans',system-ui,sans-serif}
#al-fallback b{display:block;font-family:'Playfair Display',Georgia,serif;
  font-size:1.3rem;color:#012F38;margin-bottom:.4rem}
#al-fallback p{font-size:.95rem;line-height:1.6;color:var(--muted,#5A5A5A);margin:0 0 1rem}
#al-fallback .alf-num{display:block;font-family:'Playfair Display',Georgia,serif;
  font-size:1.7rem;color:#0e7c66;text-decoration:none;margin-bottom:1.1rem;
  letter-spacing:.01em}
#al-fallback .alf-num:hover{color:#6aba5a}
#al-fallback .alf-row{display:flex;flex-wrap:wrap;gap:.55rem}
#al-fallback .alf-btn{font-family:'DM Sans',system-ui,sans-serif;font-size:.82rem;
  font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:.6rem 1rem;border-radius:3px;border:1px solid #c9d3cd;background:#fff;
  color:#012F38;text-decoration:none;cursor:pointer;transition:.18s}
#al-fallback .alf-btn:hover{border-color:#6aba5a;color:#0e7c66}
#al-fallback .alf-go{background:#6aba5a;border-color:#6aba5a;color:#012F38}
#al-fallback .alf-go:hover{background:#5aa84a;color:#012F38}
#al-fallback .alf-x{position:absolute;top:.6rem;right:.8rem;border:0;
  background:none;font-size:1.6rem;line-height:1;color:#9aa8ab;cursor:pointer}
#al-fallback .alf-x:hover{color:#012F38}