/* =====================================================================
   Homepage only (2026-10-21). Loaded by index.php through $page['css'].
   The approved HELOC state page look (ruled plates, form-style start card,
   2px ink rules) carried to the homepage. Shared index rows: guides.css.
   ===================================================================== */

.page-home ::selection{background:#cfe3f4;color:var(--ink-deep)}
.page-home dd,.page-home dt,.page-home li,.page-home small{text-wrap:pretty}

/* ================================================================ hero */
.hm-hero{padding:clamp(24px,5vw,56px) 0 clamp(40px,5vw,64px)}
.hm-hero__grid{
    display:grid;gap:24px;align-items:start;
    grid-template-areas:"copy" "start" "plate";
}
.hm-hero__copy{grid-area:copy}
.hm-start{grid-area:start}
.hm-plate{grid-area:plate}
@media (min-width:1000px){
    .hm-hero__grid{
        grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:clamp(40px,5vw,72px);row-gap:0;
        grid-template-areas:"copy start" "plate start";
    }
    .hm-start{margin-top:8px}
}

.hm-hero h1{
    max-width:17ch;
    font-size:clamp(2.05rem,5.3vw,3.25rem);font-weight:800;letter-spacing:-.032em;line-height:1.06;color:var(--ink);
}
.hm-hero h1 span{display:block}
.hm-hero h1 span + span{color:var(--accent-logo)}
.hm-lede{margin-top:18px;max-width:54ch;font-size:clamp(1.03rem,1.6vw,1.15rem);line-height:1.65;color:#4A6178}

/* ruled facts plate (state page grammar) */
.hm-plate{display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--ink);margin-top:4px}
@media (min-width:1000px){.hm-plate{margin-top:32px}}
.hm-plate__cell{display:flex;flex-direction:column;padding:14px 14px 16px 0;border-bottom:1px solid var(--line)}
.hm-plate__cell:nth-child(2n){padding-left:16px;border-left:1px solid var(--line)}
.hm-plate dt{order:2;margin-top:4px;font-size:.9rem;line-height:1.42;color:var(--muted)}
.hm-plate dd{order:1;margin:0;font-size:clamp(1.55rem,3.4vw,2rem);font-weight:800;letter-spacing:-.025em;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums}

/* --------------------------------------------- start card (product picker) */
.hm-start{
    background:#fff;border:1px solid var(--line);border-radius:20px;
    box-shadow:0 1px 2px rgba(50,70,95,.06);
    padding:20px 16px 16px;
}
@media (min-width:480px){.hm-start{padding:28px 26px 22px}}
.hm-start__title{font-size:clamp(1.3rem,2.4vw,1.5rem);font-weight:800;letter-spacing:-.022em;line-height:1.18;color:var(--ink)}
.hm-start__sub{margin-top:6px;font-size:.95rem;line-height:1.5;color:var(--muted)}
.hm-options{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:16px}
.hm-option{
    display:flex;align-items:center;gap:14px;min-height:64px;
    padding:13px 16px 13px 18px;border:1.5px solid transparent;border-radius:14px;
    background:var(--row);color:#111114;text-decoration:none;
    transition:background var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
    -webkit-tap-highlight-color:transparent;
}
.hm-option__text{flex:1 1 auto;min-width:0}
.hm-option strong{display:block;font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.hm-option small{display:block;margin-top:2px;font-size:.88rem;line-height:1.35;color:#4A6178}
.hm-option svg{flex:0 0 auto;width:20px;height:20px;color:var(--ink-soft);transition:color .2s var(--ease)}
.hm-option:hover{background:var(--row-hover)}
.hm-option:hover svg{color:var(--ink)}
.hm-option:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(50,70,95,.14)}
.hm-option:active{background:var(--row-active);border-color:var(--ink)}
.hm-start__note{margin-top:14px;font-size:.86rem;line-height:1.5;color:var(--muted)}

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

/* state index: big names, the field guide's thumb tabs */
.hm-states{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;border-top:2px solid var(--ink)}
@media (min-width:700px){.hm-states{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px}}
@media (min-width:1180px){.hm-states{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hm-states li{border-bottom:1px solid var(--line)}
.hm-states a{
    display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:60px;padding:14px 0;
    font-size:clamp(1.08rem,2vw,1.3rem);font-weight:800;letter-spacing:-.02em;color:var(--ink);text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}
.hm-states a span{min-width:0;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:5px;transition:color var(--t) var(--ease),text-decoration-color var(--t) var(--ease)}
.hm-states svg{flex:0 0 auto;width:18px;height:18px;color:var(--accent)}
.hm-states a:hover span{color:var(--accent);text-decoration-color:currentColor}
.hm-states a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

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

.hm-ledger{margin-top:36px;border-top:2px solid var(--ink)}
.hm-ledger > div{padding:14px 0 16px;border-bottom:1px solid var(--line)}
.hm-ledger dt{font-size:1rem;font-weight:700;line-height:1.4;color:var(--ink)}
.hm-ledger dd{margin:2px 0 0}
@media (min-width:760px){
    .hm-ledger > div{display:grid;grid-template-columns:12.5rem minmax(0,1fr);column-gap:24px}
    .hm-ledger dd{margin:0}
}
.hm-how__cta{margin-top:26px}
.hm-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;
    padding:14px 30px;border-radius:var(--r-pill);background:var(--ink);color:#fff;
    font-size:1rem;font-weight:600;text-decoration:none;
    transition:background .15s var(--ease);
}
.hm-btn svg{width:18px;height:18px}
.hm-btn:hover{background:var(--ink-deep)}
.hm-btn:focus-visible{outline:3px solid var(--accent-bright);outline-offset:3px}
@media (max-width:479px){.hm-btn{width:100%}}

/* FAQ: open answers, ruled like the state pages */
.hm-faq{border-top:2px solid var(--ink)}
.hm-faq__item{padding:18px 0 20px;border-bottom:1px solid var(--line)}
.hm-faq__item:last-child{border-bottom:none}
.hm-faq h3{font-size:1.125rem;font-weight:700;letter-spacing:-.01em;line-height:1.4;color:var(--ink)}
.hm-faq p{margin-top:6px}

@media (prefers-reduced-motion:reduce){
    .hm-option,.hm-option svg,.hm-btn{transition:none}
}