.how-hero{
    background:
        radial-gradient(circle at top right, rgba(0,120,191,.14), transparent 34%),
        linear-gradient(180deg,#f5faff 0%,#ffffff 100%);
    padding:58px 0 48px;
    border-bottom:1px solid #e2ebf3;
}

.how-kicker,
.section-head span,
.info-panel span,
.cta-box span{
    display:inline-block;
    color:#0078bf;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
    font-size:.82rem;
    margin-bottom:.7rem;
}

.how-hero h1{
    max-width:820px;
    font-size:clamp(2.25rem,5vw,4.4rem);
    line-height:1.03;
    font-weight:900;
    letter-spacing:-.045em;
    color:#142033;
    margin-bottom:1.1rem;
}

.how-lead{
    max-width:720px;
    color:#52606f;
    font-size:1.18rem;
    line-height:1.75;
    margin-bottom:1.6rem;
}

.how-actions{
    display:flex;
    flex-wrap:wrap;
    gap:.75rem;
}

.btn-primary{
    background:#0078bf;
    border-color:#0078bf;
    border-radius:0;
    font-weight:900;
    padding:.85rem 1.25rem;
}

.btn-primary:hover{
    background:#005f99;
    border-color:#005f99;
}

.btn-outline-primary{
    border-color:#0078bf;
    color:#0078bf;
    border-radius:0;
    font-weight:900;
    padding:.85rem 1.25rem;
}

.btn-outline-primary:hover{
    background:#0078bf;
    border-color:#0078bf;
    color:#fff;
}

.how-quick-card{
    background:#ffffff;
    border:1px solid #dce7f1;
    box-shadow:0 18px 45px rgba(20,32,51,.08);
    padding:34px;
}

.how-quick-card h2{
    font-size:1.45rem;
    font-weight:900;
    margin-bottom:1rem;
    color:#142033;
}

.how-quick-card ul{
    margin:0;
    padding-left:1.2rem;
    color:#52606f;
    line-height:1.9;
    font-weight:700;
}

.how-section{
    padding:66px 0;
}

.how-soft{
    background:#f5f9fd;
    border-top:1px solid #e2ebf3;
    border-bottom:1px solid #e2ebf3;
}

.section-head{
    max-width:780px;
    margin-bottom:2.2rem;
}

.section-head h2,
.info-panel h2,
.suitable-box h2,
.text-card h2,
.cta-box h2{
    color:#142033;
    font-weight:900;
    letter-spacing:-.025em;
    margin-bottom:.75rem;
}

.section-head p,
.info-panel p,
.suitable-box p,
.text-card p,
.cta-box p{
    color:#52606f;
    line-height:1.75;
    margin-bottom:0;
}

.step-card{
    height:100%;
    background:#ffffff;
    border:1px solid #dce7f1;
    padding:30px;
    transition:transform .18s ease, box-shadow .18s ease;
}

.step-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 38px rgba(20,32,51,.08);
}

.step-number{
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0078bf;
    color:#ffffff;
    font-weight:950;
    margin-bottom:1.2rem;
}

.step-card h3,
.benefit-card h3{
    color:#142033;
    font-weight:900;
    font-size:1.15rem;
    margin-bottom:.7rem;
}

.step-card p,
.benefit-card p{
    color:#52606f;
    line-height:1.7;
    margin:0;
}

.info-panel,
.benefit-card,
.suitable-box,
.text-card{
    background:#ffffff;
    border:1px solid #dce7f1;
    padding:32px;
}

.info-panel{
    box-shadow:0 18px 45px rgba(20,32,51,.07);
}

.info-panel a{
    display:inline-block;
    margin-top:1.2rem;
    font-weight:900;
    color:#0078bf;
    text-decoration:none;
}

.info-panel a:hover{
    color:#005f99;
    text-decoration:underline;
}

.benefit-card{
    height:100%;
}

.suitable-grid{
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;
    margin-top:1.4rem;
}

.suitable-grid span{
    background:#eef6fc;
    border:1px solid #d5e7f4;
    color:#142033;
    padding:.65rem .85rem;
    font-weight:850;
}

.text-card{
    border-left:5px solid #0078bf;
}

.text-card p + p{
    margin-top:1rem;
}

.how-faq{
    background:#ffffff;
}

.faq-list{
    border-top:1px solid #dce7f1;
}

.faq-list details{
    border-bottom:1px solid #dce7f1;
    padding:0;
}

.faq-list summary{
    cursor:pointer;

    list-style:none;
    padding:1.25rem 0;
    color:#142033;
    font-weight:900;
    font-size:1.05rem;
}

.faq-list summary::-webkit-details-marker{
    display:none;
}

.faq-list summary::after{
    content:"+";
    float:right;
    color:#0078bf;
    font-weight:900;
}

.faq-list details[open] summary::after{
    content:"–";
}

.faq-list p{
    color:#52606f;
    line-height:1.75;
    padding:0 0 1.25rem;
    margin:0;
    max-width:900px;
}

.how-cta{
    padding:0 0 72px;
}

.cta-box{
    background:#eef6fc;
    border:1px solid #d5e7f4;
    padding:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.5rem;
}

.cta-box h2{
    margin-bottom:.35rem;
}

@media (max-width:991.98px){
    .how-hero{
        padding:42px 0 38px;
    }

    .how-section{
        padding:48px 0;
    }

    .cta-box{
        align-items:flex-start;
        flex-direction:column;
    }
}

@media (max-width:575.98px){
    .how-hero h1{
        font-size:2.35rem;
    }

    .how-lead{
        font-size:1.04rem;
    }

    .how-quick-card,
    .step-card,
    .info-panel,
    .benefit-card,
    .suitable-box,
    .text-card,
    .cta-box{
        padding:24px;
    }
}