/*
 * Mondra Capital — shared "See If You Qualify" modal + promotion styles.
 * Loaded site-wide (assets/css/qualify.css) so the modal and its trigger
 * buttons look identical everywhere, regardless of which nav/footer
 * template a given page was originally built from.
 *
 * Colors fall back to /apply's exact hex values (var(--token, #hex)) so
 * this still renders correctly on pages that don't define the --navy/
 * --gold custom properties locally (e.g. the older template used by
 * tradelines.html).
 */

.qm-overlay{display:none;position:fixed;inset:0;z-index:9998;background:rgba(15,61,43,.75);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:20px;}
.qm-overlay.open{display:flex;}
.qm-card{background:#fff;border-radius:8px;max-width:440px;width:100%;max-height:92vh;overflow-y:auto;position:relative;box-shadow:0 24px 64px rgba(0,0,0,.3);padding:36px;text-align:center;}
.qm-close{position:absolute;top:14px;right:18px;background:none;border:none;font-size:26px;line-height:1;color:#bbb;cursor:pointer;z-index:2;}
.qm-close:hover{color:#666;}
.qm-head{margin-bottom:22px;}
.qm-head h2{font-family:'Cormorant Garamond',serif;font-size:clamp(22px,3vw,28px);font-weight:600;color:var(--navy,#0f3d2b);margin-bottom:8px;line-height:1.2;}
.qm-head p{font-size:14.5px;color:var(--gray,#8a8f9e);line-height:1.6;font-family:'DM Sans',sans-serif;}
body.qm-locked{overflow:hidden;}

@media(max-width:640px){
  .qm-overlay{padding:0;}
  .qm-card{max-width:100%;width:100%;height:100%;max-height:100%;border-radius:0;padding:24px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
}

/* Fallback button classes — mirror /apply's .bp/.bo exactly, for pages
   that don't already define those classes locally. */
.mc-bp{background:var(--gold,#16a34a);color:var(--navy,#0f3d2b);padding:15px 36px;border-radius:3px;font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:background .2s,transform .2s;display:inline-block;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;}
.mc-bp:hover{background:var(--gl,#22c55e);transform:translateY(-1px);}
.mc-bo{background:transparent;color:rgba(255,255,255,.8);padding:15px 36px;border-radius:3px;border:1px solid rgba(255,255,255,.25);font-size:14px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;transition:all .2s;display:inline-block;font-family:'DM Sans',sans-serif;cursor:pointer;}
.mc-bo:hover{border-color:var(--gold,#16a34a);color:var(--gold,#16a34a);}

/* Outline button for use on gold/light backgrounds (inside .cb) — /apply
   has no such variant since /apply never needed a secondary button. */
.bo-gold{background:transparent;color:var(--navy,#0f3d2b);padding:15px 36px;border-radius:3px;border:1px solid rgba(15,61,43,.35);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:all .2s;display:inline-block;font-family:'DM Sans',sans-serif;cursor:pointer;}
.bo-gold:hover{border-color:var(--navy,#0f3d2b);background:rgba(15,61,43,.06);}

/* Dedicated bottom-of-page qualify CTA band — navy gradient (.cb's shape,
   inverted colors) so a service page's existing gold .cb Apply Now band
   and this one read as two distinct, deliberate sections rather than a
   duplicate gold-on-gold stack. */
.qcb{background:linear-gradient(135deg,var(--navy,#0f3d2b) 0%,var(--nm,#0c3324) 100%);padding:60px 5%;text-align:center;border-top:1px solid rgba(22,163,74,.15);}
.qcb h2{font-family:'Cormorant Garamond',serif;font-size:clamp(28px,3vw,42px);font-weight:600;color:#fff;margin-bottom:12px;}
.qcb p{font-size:15px;color:rgba(255,255,255,.6);margin-bottom:28px;max-width:480px;margin-left:auto;margin-right:auto;font-family:'DM Sans',sans-serif;}