/* Car Insure Assist - front page.
   Palette: slate blue + warm clay on sand. Layout is a card grid of ordered
   steps, because the content is a checklist for someone under stress. */
:root{--cia-slt:#3C5A78;--cia-slt-d:#2A4055;--cia-cly:#C97B5A;--cia-bg:#F6F4F0;--cia-ink:#1C2733;--cia-mut:#5D6B78;--cia-line:#E1DDD5}
.hp{background:var(--cia-bg);color:var(--cia-ink);font-size:17px;line-height:1.65}
.hp .cia-wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.hp .cia-narrow{max-width:740px}
.hp h1,.hp h2,.hp h3{letter-spacing:-.015em;margin:0}

.hp .cia-hero{background:var(--cia-slt);padding:88px 0 76px}
.hp .cia-hero h1{color:#fff;font-size:clamp(31px,4.6vw,52px);line-height:1.12;max-width:17ch;margin:0 0 22px}
.hp .cia-lede{color:#C9D6E2;max-width:60ch;margin:0;font-size:18px}

.hp .cia-sec{padding:74px 0}
.hp .cia-shade{background:#fff;border-top:1px solid var(--cia-line);border-bottom:1px solid var(--cia-line)}
.hp .cia-lab{text-transform:uppercase;letter-spacing:.17em;font-size:11.5px;font-weight:700;color:var(--cia-cly);margin:0 0 22px}
.hp .cia-sec h2{font-size:clamp(23px,2.9vw,32px);color:var(--cia-slt);margin:0 0 20px}

.hp .cia-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hp .cia-card{background:#fff;border:1px solid var(--cia-line);border-top:3px solid var(--cia-cly);border-radius:2px;padding:26px 24px}
.hp .cia-step{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;color:var(--cia-cly);margin-bottom:11px}
.hp .cia-card h3{font-size:18px;color:var(--cia-slt);margin:0 0 10px;line-height:1.3}
.hp .cia-card p{margin:0;color:var(--cia-mut);font-size:15.5px}

.hp .cia-narrow p{color:var(--cia-mut);margin:0 0 18px}
.hp .cia-narrow strong{color:var(--cia-ink)}

.hp .cia-end{background:var(--cia-slt-d);padding:56px 0;text-align:center}
.hp .cia-end p{color:#C9D6E2;margin:0 auto 22px;max-width:62ch}
.hp .cia-end a{display:inline-block;background:var(--cia-cly);color:#2A1109;text-decoration:none;font-weight:700;padding:14px 34px;border-radius:2px}
.hp .cia-end a:hover{background:#D68C6D;color:#2A1109}

@media(max-width:900px){.hp .cia-cards{grid-template-columns:1fr 1fr}}
@media(max-width:620px){
 .hp .cia-cards{grid-template-columns:1fr}
 .hp .cia-hero{padding:58px 0 50px}.hp .cia-sec{padding:50px 0}
}