/* =====================================================================
   /mortgage/ hub and /mortgage/purchase/ (2026-10-22).
   The homepage grammar (2px ink rule opening each list, hairlines between
   rows, Public Sans 800 headings) applied to the loan picker. Loaded by
   those two pages through $page['css'], after guides.css. Tokens: site.css.
   ===================================================================== */

.page-mortgage ::selection,.page-purchase ::selection{background:#cfe3f4;color:var(--ink-deep)}
.page-mortgage li,.page-purchase li{text-wrap:pretty}

/* ================================================================ hero */
.mg-hero{padding:clamp(28px,5vw,64px) 0 clamp(28px,4vw,48px)}
.mg-hero__grid{display:grid;gap:18px}
@media (min-width:1000px){
    .mg-hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(48px,6vw,88px);align-items:end}
}
.mg-hero h1{
    max-width:15ch;
    font-size:clamp(2.05rem,5.3vw,3.4rem);font-weight:800;letter-spacing:-.032em;line-height:1.06;color:var(--ink);
}
.mg-hero h1 em{font-style:normal;color:var(--accent-logo)}
.mg-lede{max-width:54ch;font-size:clamp(1.03rem,1.6vw,1.12rem);line-height:1.65;color:#4A6178}
.mg-lede + .mg-lede{margin-top:12px}
.mg-lede a{color:var(--accent);text-underline-offset:3px}

/* =========================================================== loan picker */
.mg-loans{padding:clamp(8px,2vw,16px) 0 clamp(48px,6.5vw,80px)}
.mg-loans__h{margin-bottom:14px;font-size:clamp(1.3rem,2.4vw,1.55rem);font-weight:800;letter-spacing:-.022em;line-height:1.2;color:var(--ink)}
.mg-list{list-style:none;border-top:2px solid var(--ink)}
.mg-loan{display:grid;gap:16px;padding:22px 0 24px;border-bottom:1px solid var(--line)}
.mg-loan__main{order:1}
.mg-loan__go{order:2}
.mg-loan__reads{order:3}
@media (min-width:960px){
    .mg-loan{
        grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);column-gap:clamp(40px,6vw,96px);row-gap:18px;
        grid-template-areas:"main reads" "go reads";align-items:start;padding:28px 0 30px;
    }
    .mg-loan__main{grid-area:main}
    .mg-loan__go{grid-area:go}
    .mg-loan__reads{grid-area:reads}
}
.mg-loan h3{font-size:clamp(1.35rem,2.6vw,1.75rem);font-weight:800;letter-spacing:-.025em;line-height:1.15;color:var(--ink)}
.mg-loan__fit{margin-top:4px;font-size:1rem;font-weight:600;line-height:1.45;color:var(--accent)}
.mg-loan__text{margin-top:10px;max-width:54ch;font-size:1rem;line-height:1.62;color:#4A6178}

.mg-loan__reads{list-style:none}
.mg-loan__reads li + li{border-top:1px solid var(--line)}
.mg-loan__reads a{
    display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;padding:9px 0;
    font-size:.97rem;font-weight:600;line-height:1.35;color:var(--ink);text-decoration:underline;
    text-decoration-color:transparent;text-decoration-thickness:1.5px;text-underline-offset:4px;
    transition:color var(--t) var(--ease),text-decoration-color var(--t) var(--ease);
    -webkit-tap-highlight-color:transparent;
}
.mg-loan__reads svg{flex:0 0 auto;width:17px;height:17px;color:var(--accent)}
.mg-loan__reads a:hover{color:var(--accent);text-decoration-color:currentColor}
.mg-loan__reads a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
@media (min-width:960px){.mg-loan__reads{margin-top:-9px}}

.mg-btn{
    display:flex;align-items:center;justify-content:center;gap:9px;min-height:52px;width:100%;
    padding:14px 24px;border-radius:var(--r-pill);background:var(--ink);color:#fff;
    font-size:1rem;font-weight:600;text-align:center;text-decoration:none;
    transition:background .15s var(--ease);
    -webkit-tap-highlight-color:transparent;
}
.mg-btn svg{flex:0 0 auto;width:18px;height:18px}
.mg-btn:hover{background:var(--ink-deep)}
.mg-btn:focus-visible{outline:3px solid var(--accent-bright);outline-offset:3px}
@media (min-width:520px){.mg-btn{width:auto;display:inline-flex;padding-inline:30px}}
.mg-soon{
    display:flex;align-items:center;justify-content:center;min-height:52px;padding:12px 24px;
    border:1.5px dashed #c5d0dc;border-radius:var(--r-pill);
    font-size:.95rem;font-weight:600;color:var(--muted);
}
@media (min-width:520px){.mg-soon{display:inline-flex}}

/* ============================================================ sections */
.mg-sec{padding:clamp(48px,6.5vw,80px) 0}
.mg-sec--wash{background:var(--wash);border-block:1px solid var(--line)}
.mg-sec--rule{padding-top:0}
.mg-sec--rule .container{border-top:1px solid var(--line);padding-top:clamp(48px,6.5vw,80px)}

.mg-steps{list-style:none;counter-reset:mg;border-top:2px solid var(--ink)}
.mg-steps li{
    counter-increment:mg;display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:12px;
    padding:18px 0 20px;border-bottom:1px solid var(--line);
}
.mg-steps li::before{
    content:counter(mg);grid-row:span 2;
    font-size:1.55rem;font-weight:800;line-height:1.1;color:var(--accent-logo);font-variant-numeric:tabular-nums;
}
.mg-steps h3,.mg-faq h3{font-size:1.125rem;font-weight:700;letter-spacing:-.01em;line-height:1.4;color:var(--ink)}
.mg-steps p,.mg-faq p{max-width:60ch;font-size:1rem;line-height:1.65;color:#4A6178}
.mg-steps p{margin-top:4px}
.mg-steps a,.mg-faq a{color:var(--accent);text-underline-offset:3px}

.mg-faq{border-top:2px solid var(--ink)}
.mg-faq__item{padding:18px 0 20px;border-bottom:1px solid var(--line)}
.mg-faq__item:last-child{border-bottom:none}
.mg-faq p{margin-top:6px}

/* ============================================== /mortgage/purchase/ only */
.mg-hero--soon{padding-bottom:clamp(36px,5vw,64px)}
.mg-hero--soon .mg-hero__grid{align-items:start}
@media (min-width:1000px){.mg-hero--soon .mg-hero__side{padding-top:10px}}
.mg-status{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:22px;padding-top:16px;
    border-top:2px solid var(--ink);
}
.mg-status strong{font-size:1rem;font-weight:700;color:var(--ink)}
.mg-status span{font-size:.95rem;line-height:1.55;color:#4A6178}
.mg-status a{color:var(--accent);font-weight:600;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
    .mg-btn,.mg-loan__reads a{transition:none}
}