/* Shared MyMortgageOwl shell components (from ARM vs Fixed) */

/* ── Global color tightening (darker greens for KPIs) ── */
:root{
  --gd:#0F2417;         /* global dark green */
  --gb:#0F2417;         /* button/brand base */
  --gm:#2D6A4F;         /* mid green */
  --green-dark:#0F2417; /* legacy token used in style-*.css */
  --green-mid:#2D6A4F;  /* legacy token used in style-*.css */
}

/* ── ARM Baseline Header / Breadcrumb / Hero ── */
.snb{
  background:var(--gd,#1A4731);
  padding:0 24px;
  position:sticky;
  top:0;
  z-index:200;
  box-shadow:0 2px 16px rgba(0,0,0,.2);
}
.ni{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:60px;
}
.lo{
  font-family:'DM Serif Display',Georgia,serif;
  font-size:1.4rem;
  font-weight:400;
  color:#fff;
  letter-spacing:-.02em;
  text-decoration:none;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.lo span{color:#6EE49A;font-style:italic}
.mob-toggle{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:4px}
.mob-drop{display:none}
.desk-nav{display:block}
.nl{display:flex;gap:20px;list-style:none;padding:0;margin:0}
.nl a{
  color:rgba(255,255,255,.82);
  font-size:.88rem;
  font-weight:500;
  padding:6px 2px;
  border-bottom:2px solid transparent;
  transition:border-color .2s,color .2s;
  text-decoration:none;
}
.nl a:hover,.nl a.ac{color:#fff;border-bottom-color:#6EE49A;text-decoration:none}
.md-nl{list-style:none;padding:16px 24px;margin:0;display:flex;flex-direction:column;gap:12px;background:#0F2417;border-top:1px solid rgba(255,255,255,.1)}
.md-nl a{color:rgba(255,255,255,.85);font-size:1.05rem;font-weight:600;text-decoration:none;padding:8px 0;display:block}
.md-nl a:hover{color:#fff}

@media(max-width:820px){
  .desk-nav{display:none}
  .mob-toggle{display:block;margin-right:auto}
  /* Nudge right per user request */
  .snb .lo{position:absolute;left:50%;transform:translateX(-46%)}
  .mob-drop.open{display:block;position:absolute;top:60px;left:0;right:0;box-shadow:0 12px 24px rgba(0,0,0,.3)}
}
.bc{
  background:var(--wh,#fff);
  border-bottom:1px solid var(--bd,#D4E8DA);
  padding:9px 20px;
  font-size:.78rem;
  color:var(--m2,#7A9A88);
}
.bci{max-width:1080px;margin:0 auto}
.bc a{color:var(--gm,#2D6A4F);text-decoration:none}
.bc span{margin:0 5px;color:var(--m2,#7A9A88)}
.ph{
  background:linear-gradient(160deg,var(--gd,#1A4731) 0%,var(--gm,#2D6A4F) 100%);
  padding:48px 24px 40px;
  text-align:center;
}
.ph h1{
  font-family:'DM Serif Display',Georgia,serif;
  font-size:clamp(1.6rem,5vw,2.6rem);
  font-weight:400;
  color:#fff;
  line-height:1.15;
  margin-bottom:12px;
  letter-spacing:-.03em;
}
.ph p{
  font-family:var(--miq-font-sans,inherit);
  font-size:1rem;
  color:rgba(255,255,255,.82);
  max-width:580px;
  margin:0 auto;
  line-height:1.6;
}
.ph .bg{
  display:inline-block;
  background:rgba(110,228,154,.2);
  color:#6EE49A;
  border:1px solid rgba(110,228,154,.4);
  border-radius:20px;
  font-size:.75rem;
  font-weight:700;
  padding:3px 12px;
  margin-bottom:12px;
  letter-spacing:.5px;
}

/* ARM baseline page wrapper */
.pw{
  max-width:1100px;
  margin:0 auto;
  padding:20px 20px 24px;
  display:grid;
  grid-template-columns:1fr 300px;
  gap:28px;
  align-items:start;
}
.pw .sb{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.pw .main-col{
  grid-row: auto !important;
  grid-column: auto !important;
}
@media(max-width:820px){
  .pw{display:flex;flex-direction:column;gap:24px;align-items:stretch}
  .pw .sb{display:contents}
  .pw .main-col{display:contents}
  
  .pw .sb > .rate-widget { order: 1; max-width: 100%; width: 100%; margin: 0; border-radius: 16px; }
  .pw .main-col > .calc-card { order: 2; width: 100%; }
  
  .pw .sb > .lender-rate-section { 
    order: 3; 
    width: 100%;
    margin: 0 !important;
  }
  
  .pw .main-col > *, 
  .pw .sb > * { order: 4; width: 100%; }
  
  /* Remove double padding so they match standard card widths */
  #lender-rate-box { 
    padding: 0 !important; 
    width: 100% !important;
    margin: 0 !important;
  }
}

/* ── Modern Premium Footer ── */
.miq-footer{
  background:var(--gd,#1A4731);
  color:rgba(255,255,255,0.7);
  padding:60px 20px 40px;
  font-size:0.9rem;
  border-top:1px solid rgba(255,255,255,0.1);
  margin-top:40px;
}
.miq-footer-inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.5fr repeat(4, 1fr);
  gap:40px;
}
.miq-footer-brand .lo{
  font-size:1.6rem;
  margin-bottom:20px;
  display:inline-flex;
}
.miq-footer-brand p{
  line-height:1.7;
  font-size:0.85rem;
  color:rgba(255,255,255,0.5);
  max-width:280px;
}
.miq-footer-col h4{
  color:#fff;
  font-size:0.85rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.2px;
  margin-bottom:24px;
}
.miq-footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.miq-footer-col a{
  color:rgba(255,255,255,0.6);
  text-decoration:none;
  transition:all 0.2s;
  display:inline-block;
}
.miq-footer-col a:hover{
  color:var(--gm,#2D6A4F);
  transform:translateX(4px);
}
.miq-footer-bottom{
  max-width:1100px;
  margin:60px auto 0;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.miq-footer-disclaimer{
  font-size:0.75rem;
  line-height:1.6;
  color:rgba(255,255,255,0.35);
  margin-bottom:24px;
}
.miq-footer-copyright{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:0.8rem;
  color:rgba(255,255,255,0.4);
}
@media(max-width:960px){
  .miq-footer-inner{grid-template-columns:repeat(3, 1fr);gap:40px 30px}
  .miq-footer-brand{grid-column:span 3}
}
@media(max-width:600px){
  .miq-footer{padding:60px 20px 30px}
  .miq-footer-inner{grid-template-columns:1fr 1fr}
  .miq-footer-brand{grid-column:span 2}
  .miq-footer-copyright{flex-direction:column;gap:10px;text-align:center}
}

/* ── Lender Rate Section ── */
.lender-rate-section{background:var(--gl,#E8F5EC);padding:0}
#lender-rate-box{max-width:760px;margin:0 auto 12px;padding:0 16px}
.lender-box{
  background:var(--wh,#fff);
  border-radius:var(--ra,16px);
  box-shadow:0 4px 24px rgba(26,71,49,.10);
  overflow:hidden;
  border:1.5px solid var(--bd,#D4E8DA);
}
.lender-box h3{
  background:linear-gradient(135deg,var(--gd,#1A4731) 0%,var(--gm,#2D6A4F) 100%);
  color:#fff;
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.3px;
  padding:16px 22px 14px;
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.lender-box h3::before{content:'🏦';font-size:1rem}
.lender-box>p{
  font-size:.78rem;
  color:var(--mu,#4A6358);
  padding:10px 22px 4px;
  margin:0;
  border-bottom:1px solid var(--bd,#D4E8DA);
  background:var(--gp,#F0FAF2);
}
.lender-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:12px;
  padding:13px 22px;
  border-bottom:1px solid var(--bd,#D4E8DA);
  transition:background .15s;
}
.lender-row:last-of-type{border-bottom:none}
.lender-row:hover{background:var(--gp,#F0FAF2)}
.lender-name{
  font-weight:700;
  font-size:.87rem;
  color:var(--tx,#0F2417);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lender-rate{
  font-size:1.15rem;
  font-weight:800;
  color:var(--gd,#1A4731);
  min-width:64px;
  text-align:center;
  background:var(--gp,#F0FAF2);
  border-radius:8px;
  padding:4px 10px;
  letter-spacing:-.3px;
}
.lender-btn{
  background:linear-gradient(135deg,var(--gb,#1B5E20),var(--gm,#2D6A4F));
  color:#fff;
  border:none;
  border-radius:20px;
  padding:8px 18px;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  transition:opacity .2s,transform .1s;
  box-shadow:0 2px 8px rgba(27,94,32,.2);
}
.lender-btn:hover{opacity:.88;transform:translateY(-1px)}
.lender-btn:active{transform:scale(.97)}
.lender-disc{
  font-size:.68rem;
  color:var(--m2,#7A9A88);
  padding:10px 22px 14px;
  line-height:1.55;
  background:var(--gp,#F0FAF2);
  border-top:1px solid var(--bd,#D4E8DA);
  margin:0;
}

/* Sidebar Specific Lender Layout to prevent squishing */
.sb .lender-row {
  grid-template-columns: 1fr auto;
  gap: 12px 8px;
  padding: 14px 18px;
}
.sb .lender-name {
  grid-column: 1 / -1;
  white-space: normal;
  overflow: visible;
  font-size: 1rem;
  line-height: 1.3;
}
.sb .lender-rate {
  grid-row: 2;
  grid-column: 1;
  justify-self: start;
}
.sb .lender-btn {
  grid-row: 2;
  grid-column: 2;
  justify-self: end;
}

@media(max-width:480px){
  .lender-row{grid-template-columns:1fr auto;gap:8px;padding:11px 14px}
  .lender-rate{font-size:1rem;min-width:54px;padding:3px 8px}
  .lender-btn{padding:7px 12px;font-size:.74rem;border-radius:16px}
  .lender-box h3{padding:14px 14px 12px}
  .lender-box>p{padding:9px 14px 6px}
  .lender-disc{padding:9px 14px 12px}
}

/* ── Enhanced Rate Widget ── */
.rate-widget{
  background:linear-gradient(135deg, var(--gd,#1A4731), var(--gm,#2D6A4F));
  border-radius:var(--ra,16px);
  box-shadow:var(--sh,0 4px 22px rgba(26,71,49,.10));
  overflow:hidden;
  margin-bottom:24px;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
.rate-widget h3{
  font-size:.75rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1px;
  color:#6EE49A;
  padding:16px 20px 8px;
  margin:0;
}
.rate-widget-body{padding:0 20px 16px}
.rate-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.rate-row:last-child{border-bottom:none}
.rate-label{font-size:.9rem;font-weight:600;color:rgba(255,255,255,0.85)}
.rate-val{font-size:1.15rem;font-weight:800;color:#fff}
.rate-as-of{
  font-size:.65rem;
  color:rgba(255,255,255,0.5);
  padding:12px 20px;
  background:rgba(0,0,0,0.15);
  border-top:1px solid rgba(255,255,255,0.05);
}

/* ── Share / Print Row ── */
.print-btn{
  background:none;
  border:1.5px solid var(--bd,#D4E8DA);
  color:var(--mu,#4A6358);
  padding:8px 16px;
  border-radius:var(--rs,12px);
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all .2s;
}
.print-btn:hover{border-color:var(--gm,#2D6A4F);color:var(--gm,#2D6A4F)}
.share-row{display:flex;gap:12px;margin-top:12px;margin-bottom:12px;flex-wrap:wrap}
.share-btn{
  background:var(--gp,#F0FAF2);
  border:1.5px solid var(--bd,#D4E8DA);
  color:var(--gd,#1A4731);
  padding:7px 14px;
  border-radius:var(--rs,12px);
  font-size:.75rem;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:all .2s;
}
.share-btn:hover{background:var(--gm,#2D6A4F);color:#fff;border-color:var(--gm,#2D6A4F)}
.print-btn{background:var(--gp,#F0FAF2);border:1.5px solid var(--bd,#D4E8DA);color:var(--gd,#1A4731);padding:7px 14px;border-radius:var(--rs,12px);font-size:.75rem;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .2s}
.print-btn:hover{background:var(--gm,#2D6A4F);color:#fff;border-color:var(--gm,#2D6A4F)}
.share-url{display:none;font-size:.72rem;color:var(--m2,#7A9A88);margin-top:6px;word-break:break-all}

/* Action buttons (copy/print/report) should align cleanly on mobile */
@media (max-width: 560px){
  .share-row{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  .share-row > a,
  .share-row > button{width:100%}
}
@media (min-width: 561px){
  .share-row{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    gap:12px;
    align-items:stretch;
  }
  .share-row > a,
  .share-row > button{width:100%}
}

/* ── Mortgage calculator: cleaner result tools + accordions ── */
.miq-result-tools{
  margin-top:14px;
  padding:12px;
  border:1.5px solid var(--bd,#D4E8DA);
  border-radius:14px;
  background:var(--gp,#F0FAF2);
}
.miq-tool-row{display:flex;gap:10px;flex-wrap:wrap}
.miq-tool-btn{
  appearance:none;
  border:1.5px solid var(--bd,#D4E8DA);
  background:#fff;
  color:var(--gd,#1A4731);
  padding:8px 12px;
  border-radius:12px;
  font-size:.78rem;
  font-weight:700;
  cursor:pointer;
  outline:none;
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.miq-tool-btn:hover{border-color:var(--gm,#2D6A4F);box-shadow:0 10px 18px rgba(26,71,49,.08);transform:translateY(-1px)}
.miq-tool-btn:active{transform:translateY(0)}
.miq-tool-btn:focus-visible{outline:3px solid rgba(45,106,79,.35);outline-offset:2px}

/* Make anchors with button styling behave like real buttons */
a.miq-tool-btn{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
a.miq-tool-btn:hover{text-decoration:none}
a.miq-tool-btn-block{
  display:flex;
  width:100%;
  justify-content:space-between;
}
.miq-tool-btn-primary{
  background:linear-gradient(135deg,var(--gb,#1B5E20),var(--gm,#2D6A4F));
  color:#fff;
  border-color:transparent;
}

/* Loan Estimate audit: verdict box styling (page uses style-9 which doesn't define this) */
.verdict-box.miq-verdict{
  border-radius:16px;
  padding:22px 18px;
  text-align:center;
  margin-top:14px;
  color:#fff;
  box-shadow:0 12px 28px rgba(0,0,0,.10);
}
.verdict-box.miq-verdict.miq-save{background:linear-gradient(135deg,#0F2417,#2D6A4F)}
.verdict-box.miq-verdict.miq-warn{background:linear-gradient(135deg,#5A4A00,#2D6A4F)}
.verdict-box.miq-verdict.miq-rent{background:linear-gradient(135deg,#5B0C0C,#2D6A4F)}

.verdict-box.miq-verdict #v-label,
.verdict-box.miq-verdict .vlabel,
.verdict-box.miq-verdict .tlabel{
  font-size:.74rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  margin-bottom:6px;
}
.verdict-box.miq-verdict #v-amount,
.verdict-box.miq-verdict .vamount,
.verdict-box.miq-verdict .tamount{
  font-size:2.15rem;
  font-weight:900;
  letter-spacing:-1px;
  line-height:1.05;
  overflow-wrap:anywhere;
}
.verdict-box.miq-verdict #v-sub,
.verdict-box.miq-verdict .vsub,
.verdict-box.miq-verdict .tsub{
  margin-top:10px;
  font-size:.86rem;
  line-height:1.45;
  color:rgba(255,255,255,.82);
}

/* Mortgage Points: keep it ONE table, but make each row mobile-friendly (no horizontal scroll) */
#matrix{overflow:visible}
#matrix table.miq-matrix-table{width:100%;table-layout:auto !important}
#matrix table.miq-matrix-table th,
#matrix table.miq-matrix-table td{font-variant-numeric:tabular-nums}

@media (max-width: 560px){
  #matrix table.miq-matrix-table thead{display:none !important}
  #matrix table.miq-matrix-table tr{
    display:block !important;
    margin:0 0 12px !important;
    border:1px solid var(--bd,#D4E8DA) !important;
    border-radius:14px !important;
    overflow:hidden !important;
    background:#fff !important;
  }
  #matrix table.miq-matrix-table td{
    display:flex !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding:10px 12px !important;
    border-bottom:1px solid #EEF6F1 !important;
    text-align:right !important;
    white-space:normal !important;
  }
  #matrix table.miq-matrix-table td::before{
    content:attr(data-label);
    font-weight:900;
    color:var(--gd,#0F2417);
    text-align:left;
  }
  #matrix table.miq-matrix-table td:last-child{border-bottom:none !important}
  /* Make the first cell ("Points") read like a card header */
  #matrix table.miq-matrix-table td:first-child{
    display:block !important;
    background:var(--gp,#F0FAF2) !important;
    text-align:left !important;
    font-weight:900 !important;
    color:var(--gd,#0F2417) !important;
  }
  #matrix table.miq-matrix-table td:first-child::before{content:'' !important;display:none !important}
}

/* ARM vs Fixed: make the year-by-year schedule fit on mobile (no horizontal scroll) */
#yr-btn.ab{
  background:linear-gradient(135deg,var(--gb,#1B5E20),var(--gm,#2D6A4F)) !important;
  color:#fff !important;
  border-color:transparent !important;
  font-weight:800 !important;
}
#yr-btn.ab:hover{filter:brightness(1.03)}
#yr-wrap .at thead th{
  background:linear-gradient(135deg,var(--gd,#0F2417),var(--gm,#2D6A4F)) !important;
  color:#fff !important;
}

@media (max-width: 560px){
  #yr-wrap.aw{overflow-x:visible !important}
  #yr-wrap .at{min-width:0 !important;width:100% !important;table-layout:fixed !important}
  #yr-wrap .at thead{display:none !important}
  #yr-wrap .at tr{display:block !important;margin:0 0 12px !important;border:1px solid var(--bd,#D4E8DA) !important;border-radius:14px !important;overflow:hidden !important;background:#fff}
  #yr-wrap .at td{display:flex !important;justify-content:space-between !important;gap:12px !important;padding:10px 12px !important;border-bottom:1px solid #EEF6F1 !important;text-align:right !important;white-space:normal !important}
  #yr-wrap .at td::before{content:attr(data-label);font-weight:900;color:var(--gd,#0F2417);text-align:left}
  #yr-wrap .at td:last-child{border-bottom:none !important}
  #yr-wrap .at td:first-child{display:block !important;background:var(--gp,#F0FAF2) !important;text-align:left !important;font-family:'DM Serif Display',serif !important;font-weight:900 !important;color:var(--gd,#0F2417) !important}
  #yr-wrap .at td:first-child::before{content:'' !important;display:none !important}
}

/* KPI value text should read as the brand "dark green" everywhere */
.bk-val{color:var(--gd,#0F2417) !important;}

/* Primary KPI tile (used for "Estimated Monthly Payment", etc.) */
.bk-item.miq-primary{
  border-left-color:var(--gb,#1B5E20) !important;
  background:linear-gradient(180deg,#F0FAF2,#E6FAF0) !important;
}
.bk-item.miq-primary .bk-label{
  color:rgba(15,36,23,.78) !important;
}
.bk-item.miq-primary .bk-val{
  color:var(--gb,#1B5E20) !important;
}

/* Treat legacy "highlight" tiles the same as our primary KPI styling */
.bk-item.highlight{
  border-left-color:var(--gb,#1B5E20) !important;
  background:linear-gradient(180deg,#F0FAF2,#E6FAF0) !important;
}
.bk-item.highlight .bk-val,
.bk-val.green{
  color:var(--gb,#1B5E20) !important;
}
.miq-tool-details{margin-top:10px}
.miq-tool-summary{
  cursor:pointer;
  list-style:none;
  font-weight:800;
  color:var(--gd,#1A4731);
  font-size:.85rem;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.55);
  border:1px dashed rgba(26,71,49,.30);
}
.miq-tool-details[open] .miq-tool-summary{background:#fff;border-style:solid}
.miq-tool-summary::-webkit-details-marker{display:none}
.miq-tool-summary::after{content:'▾';float:right;opacity:.75}
.miq-tool-details[open] .miq-tool-summary::after{content:'▴'}
.miq-tool-body{padding:10px 2px 2px}
.sb {
  position: sticky;
  top: 100px;
}

.miq-code{
  margin:0 0 10px;
  padding:10px 12px;
  border-radius:12px;
  background:#0F2417;
  color:#B9F5D0;
  border:1px solid rgba(110,228,154,.25);
  overflow:auto;
  font-size:.72rem;
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
}

.blog-article-wrapper {
  padding: 32px 40px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #D4E8DA;
  box-shadow: 0 4px 12px rgba(26,71,49,.04);
  margin-bottom: 40px;
}
@media (max-width: 768px) {
  .blog-article-wrapper {
    padding: 24px 20px;
  }
}
.blog-hero-image {
  width: 100%;
  height: auto;
  max-height: 350px;
  object-fit: cover;
  border-radius: 12px;
  margin: 20px 0 32px 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.guide-card {
  background: #fff;
  border: 1px solid #D4E8DA;
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(26,71,49,.04);
}
.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(26,71,49,.12);
  border-color: #A3D4B6;
}
.guide-card-meta {
  font-size: .75rem;
  color: #7A9A88;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.guide-card-meta::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #6EE49A;
  border-radius: 50%;
}
.guide-card h2 {
  margin: 0 0 12px;
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1.3;
}
.guide-card h2 a {
  color: #1A4731;
  text-decoration: none;
}
.guide-card h2 a:hover {
  color: #2D6A4F;
}
.guide-card p {
  margin: 0 0 16px;
  color: #4A6358;
  font-size: .9rem;
  line-height: 1.6;
  flex: 1;
}
.guide-card-link {
  font-size: .85rem;
  font-weight: 800;
  color: #2D6A4F;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s;
}
.guide-card:hover .guide-card-link {
  gap: 8px;
}

.article-content {
  color: #4A6358;
  font-size: 1.05rem;
  line-height: 1.8;
}
.article-content h2 {
  margin-top: 40px;
  margin-bottom: 20px;
  color: #1A4731;
  font-size: 1.6rem;
  border-bottom: 2px solid #6EE49A;
  padding-bottom: 8px;
  display: inline-block;
}
.article-content h3 {
  margin-top: 24px;
  margin-bottom: 12px;
  color: #2D6A4F;
  font-size: 1.2rem;
}
.article-content p {
  margin-bottom: 20px;
}
.article-content ul, .article-content ol {
  margin-bottom: 20px;
  padding-left: 24px;
}
.article-content li {
  margin-bottom: 8px;
}

.inline-cta {
  background: #F0FAF2;
  border: 1px dashed #A3D4B6;
  border-radius: 12px;
  padding: 32px 24px;
  margin: 40px 0;
  text-align: center;
}
.inline-cta h4 {
  color: #1A4731;
  margin: 0 0 12px 0;
  font-size: 1.3rem;
}
.inline-cta p {
  margin: 0 0 20px 0;
  color: #4A6358;
}
.inline-cta .btn {
  display: inline-block;
  background: #2D6A4F;
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.2s;
  font-size: 1.05rem;
}
.inline-cta .btn:hover {
  background: #1A4731;
}

.article-table-wrap {
  margin: 32px 0;
  overflow-x: auto;
}

.miq-accordions{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  column-span: all;
  break-inside: avoid;
}
.miq-accordion{
  border:1.5px solid var(--bd,#D4E8DA);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
}
.miq-accordion > summary{
  cursor:pointer;
  padding:12px 14px;
  font-weight:900;
  color:var(--gd,#1A4731);
  background:linear-gradient(180deg,#fff, var(--gp,#F0FAF2));
  list-style:none;
}
.miq-accordion > summary::-webkit-details-marker{display:none}
.miq-accordion > summary::after{content:'+';float:right;opacity:.75}
.miq-accordion[open] > summary::after{content:'–'}
.miq-accordion-body{padding:12px 14px 14px}
.miq-accordion-body .amort-wrap{display:block!important}
.miq-accordion-body .closing-wrap{display:block!important}
/* Improve readability in the long “Calculation Details” block */
#calc-details{
  font-size:.92rem;
  line-height:1.65;
  color:var(--tx,#0F2417);
}
#calc-details ul{margin:10px 0 0;padding-left:18px}
#calc-details li{margin:10px 0}
#calc-details strong{font-weight:900}

/* ── Consistent Vertical Rhythm (Mobile/All Pages) ── */
:root{--miq-card-gap:16px}
@media(max-width:480px){:root{--miq-card-gap:14px}}

/* Normalize spacing between the “card-like” blocks inside the main column.
   We use !important because many page-specific stylesheets hardcode .card{margin-bottom:...}. */
.main-col > :is(section.card, .card, .lender-rate-section){margin:0!important}
.main-col > :is(section.card, .card, .lender-rate-section) + :is(section.card, .card, .lender-rate-section){
  margin-top:var(--miq-card-gap)!important;
}
/* Balanced metric grids: when a results grid has odd tiles, let last tile span full row. */
.bg3 > .bi:last-child:nth-child(odd){grid-column:1 / -1}

/* If the lender widget is followed by content blocks, keep the same spacing */
:where(.main-col) > .lender-rate-section { padding:0 } /* box already has its own interior padding */

/* Many legacy pages use .page-wrap with an overly-large bottom padding (e.g. 60px),
   which makes the spacing before the ARM calculators/resources block feel “awkward” on mobile.
   ARM vs Fixed uses a tighter bottom padding, so normalize it globally. */
.page-wrap{padding-bottom:24px!important}

/* ── All Calculators & Resources blocks ── */
.miq-link-sections{
  max-width:1080px!important;margin:var(--miq-card-gap, 24px) auto 16px!important;padding:0 16px!important;
  display:grid!important;grid-template-columns:1fr 1fr!important;gap:16px!important
}
@media(max-width:700px){
  .miq-link-sections{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .pw .miq-link-sections {
    width: 100% !important;
    margin: var(--miq-card-gap, 24px) 0 16px !important;
    padding: 0 !important;
  }
}
.sc.miq-grid-card{
  background:var(--wh,#fff);border-radius:var(--ra,16px);
  box-shadow:0 4px 20px rgba(26,71,49,.08);
  border:1.5px solid var(--bd,#D4E8DA);overflow:hidden;padding:0!important
}
.sc.miq-grid-card h3{
  font-size:.82rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.8px;color:#fff;margin:0;
  background:linear-gradient(135deg,var(--gd,#1A4731) 0%,var(--gm,#2D6A4F) 100%);
  padding:14px 20px;
}
.miq-link-grid{
  list-style:none!important;display:grid!important;
  grid-template-columns:1fr 1fr!important;gap:0!important;margin:0!important;padding:8px!important
}
@media(max-width:340px){.miq-link-grid{grid-template-columns:1fr!important}}
.miq-link-grid li{margin:0;padding:0;list-style:none}
.miq-link-grid li:last-child:nth-child(odd){grid-column:1 / -1}
.miq-link-grid li a{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:10px;
  font-size:.82rem;font-weight:700;color:var(--tx,#0F2417);
  transition:background .15s,transform .1s;min-height:46px;
  text-decoration:none;
}
.miq-link-grid li a:hover{
  background:var(--gp,#F0FAF2);color:var(--gd,#1A4731);
  transform:translateY(-1px);text-decoration:none
}
.miq-link-grid li a:focus-visible{outline:2px solid var(--gm,#2D6A4F);outline-offset:2px}
.miq-link-grid li a .calc-ico{
  font-size:1.1rem;width:32px;height:32px;
  background:var(--gp,#F0FAF2);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:background .15s
}
.miq-link-grid li a:hover .calc-ico{background:rgba(45,106,79,.15)}
.miq-link-grid li a .calc-label{flex:1;line-height:1.3}
.miq-link-grid li a .ar{color:var(--gm,#2D6A4F);font-size:.68rem;flex-shrink:0;opacity:.7}
.miq-resource-grid{list-style:none!important;display:flex!important;flex-direction:column!important;gap:0!important;margin:0!important;padding:12px!important}
.miq-resource-grid li{list-style:none;margin:0;padding:0}
.ql.miq-resource-grid li a,
.miq-resource-grid li a{
  display:flex!important;align-items:center;gap:16px;
  padding:14px 4px;border-bottom:1px solid rgba(45,106,79,.1);
  color:var(--tx,#0F2417)!important;font-size:.92rem;font-weight:600;
  transition:all .15s;text-decoration:none!important;
}
.miq-resource-grid li:last-child a{border-bottom:none}
.ql.miq-resource-grid li a:hover,
.miq-resource-grid li a:hover{color:var(--gm,#2D6A4F)!important;background:var(--gp,#F0FAF2);border-radius:8px}
.miq-resource-grid li a .res-ico{
  font-size:1.1rem;width:34px;height:34px;min-width:34px;
  background:var(--gp,#F0FAF2);border-radius:10px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0
}
.miq-resource-grid li a .res-label{flex:1;color:var(--tx,#0F2417)}
.miq-resource-grid li a::after{content:'→';color:var(--gm,#2D6A4F);font-size:.8rem;opacity:.7;flex-shrink:0}