:root{
    --help-blue:#1768e7;
    --help-text:#14213d;
    --help-muted:#6f7d92;
    --help-line:#e2e8f1;
}

.help-page{
    margin:0;
    background:#fff;
    color:var(--help-text);
}

.help-hero{
    padding:74px 0 58px;
    background:
        radial-gradient(circle at 82% 18%,rgba(38,119,240,.14),transparent 28%),
        linear-gradient(180deg,#f7fbff,#fff);
}

.help-kicker{
    margin:0 0 12px;
    color:var(--help-blue);
    font-size:11px;
    font-weight:900;
    letter-spacing:.09em;
}

.help-hero h1{
    margin:0;
    font-size:clamp(42px,5vw,62px);
    line-height:1.07;
    letter-spacing:-.055em;
}

.help-hero p{
    max-width:720px;
    margin:18px 0 0;
    color:var(--help-muted);
    font-size:15px;
    line-height:1.8;
}

.help-section{
    padding:70px 0 84px;
}

.help-section.alt{
    background:#f7f9fc;
    border-top:1px solid #edf1f6;
    border-bottom:1px solid #edf1f6;
}

.help-section-head{
    margin-bottom:24px;
}

.help-section-head h2{
    margin:0;
    font-size:31px;
    letter-spacing:-.04em;
}

.help-section-head p{
    margin:8px 0 0;
    color:var(--help-muted);
    font-size:12px;
}

.help-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
}

.help-card{
    padding:22px;
    border:1px solid var(--help-line);
    border-radius:17px;
    background:#fff;
    box-shadow:0 9px 24px rgba(31,54,89,.04);
}

.help-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
}

.help-card-kicker{
    color:var(--help-blue);
    font-size:9px;
    font-weight:900;
    letter-spacing:.07em;
}

.help-card-label{
    padding:5px 8px;
    border-radius:999px;
    color:#63738c;
    background:#f0f3f7;
    font-size:8px;
    font-weight:850;
}

.help-card h3{
    margin:12px 0 10px;
    font-size:19px;
    line-height:1.4;
    letter-spacing:-.03em;
}

.help-card p{
    margin:0;
    color:var(--help-muted);
    font-size:12px;
    line-height:1.75;
    white-space:pre-line;
}

.help-points{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:14px;
}

.help-points span{
    padding:6px 9px;
    border-radius:999px;
    color:#1768e7;
    background:#edf5ff;
    font-size:9px;
    font-weight:800;
}

.help-product-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.help-product-card{
    padding:22px;
    border:1px solid var(--help-line);
    border-radius:16px;
    background:#fff;
}

.help-product-card span{
    display:inline-grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:12px;
    color:#fff;
    background:#1768e7;
    font-weight:900;
}

.help-product-card.hancom span{background:#168db1}
.help-product-card.excel span{background:#118b57}

.help-product-card h3{
    margin:14px 0 8px;
    font-size:17px;
}

.help-product-card p{
    min-height:52px;
    margin:0;
    color:var(--help-muted);
    font-size:11px;
    line-height:1.7;
}

.help-product-card a{
    display:inline-block;
    margin-top:14px;
    color:var(--help-blue);
    font-size:11px;
    font-weight:850;
}

.help-cta{
    padding:58px 0;
    background:linear-gradient(135deg,#163d79,#1768e7);
    color:#fff;
}

.help-cta .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
}

.help-cta h2{
    margin:0;
    font-size:28px;
    letter-spacing:-.04em;
}

.help-cta p{
    margin:8px 0 0;
    color:rgba(255,255,255,.75);
    font-size:12px;
}

.help-cta a{
    min-height:43px;
    display:inline-flex;
    align-items:center;
    padding:0 16px;
    border-radius:10px;
    color:#174d9b;
    background:#fff;
    font-size:11px;
    font-weight:850;
}

@media(max-width:800px){
    .help-grid,
    .help-product-grid{
        grid-template-columns:1fr;
    }

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