.how-page { max-width: 1100px; }

.how-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(28px, 6vw, 64px);
    margin-bottom: 24px;
    border: 1px solid #cfe2d1;
    border-radius: 22px;
    background: linear-gradient(135deg, #f3fbf4 0%, #fff 55%, #eef6ff 100%);
}
.how-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -90px;
    width: 250px;
    height: 250px;
    border: 36px solid rgba(46, 125, 50, 0.08);
    border-radius: 50%;
}
.how-hero h2 { max-width: 700px; margin: 8px 0 12px; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1.04; }
.how-hero h3 { max-width: 700px; margin: 10px 0 12px; font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.15; }
.how-hero p { max-width: 680px; margin: 0 0 20px; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }
.how-hero .btn { position: relative; z-index: 1; }

.how-section { margin: 34px 0; }
.how-heading { max-width: 650px; margin-bottom: 18px; }
.how-heading h3, .how-split h3, .how-result h3 { margin: 5px 0 8px; font-size: clamp(1.4rem, 3vw, 2rem); }
.how-eyebrow { color: var(--primary); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

.how-flow { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; padding: 0; list-style: none; }
.how-step { position: relative; min-height: 205px; padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(31, 54, 38, 0.06); }
.how-step-number { position: absolute; top: 14px; right: 16px; color: #a9b4ae; font-size: 0.78rem; font-weight: 800; }
.how-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 14px; background: #eaf6ec; color: var(--primary); font-size: 1.65rem; font-weight: 700; }
.how-step:nth-child(2n) .how-icon { background: #edf5fc; color: #286a9c; }
.how-step h4 { margin: 0 0 8px; font-size: 1.05rem; }
.how-step p { margin: 0; color: var(--muted); line-height: 1.5; }

.how-split { display: grid; gap: 22px; padding: clamp(22px, 5vw, 42px); border-radius: 18px; background: #17241b; color: #fff; }
.how-split p { color: #c9d5cc; line-height: 1.6; }
.how-data-stack { display: grid; gap: 9px; }
.how-data-stack span { padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 10px; background: rgba(255, 255, 255, 0.07); }

.how-result { display: grid; gap: 18px; align-items: center; padding: 24px; margin: 34px 0; border: 1px solid #cfe2d1; border-radius: 18px; background: #f7fbf7; }
.how-result-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 1.8rem; }
.how-result p { margin: 0; color: var(--muted); line-height: 1.55; }

@media (min-width: 700px) {
    .how-flow { grid-template-columns: repeat(3, 1fr); }
    .how-split { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
    .how-result { grid-template-columns: auto 1fr auto; }
}