/* ─── Section wrapper ─── */
        .how-we-work {
            background: #f7f8fb;
            padding: 64px 20px 56px;
            color: #1a2340;
        }

        /* ─── Header ─── */
        .hww-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .hww-title {
            font-size: clamp(26px, 4vw, 42px);
            font-weight: 800;
            letter-spacing: -0.5px;
            line-height: 1.15;
            color: #1a2340;
        }

        .hww-subtitle {
            margin-top: 10px;
            font-size: clamp(14px, 1.8vw, 17px);
            color: #6b7a99;
            font-weight: 400;
        }

        /* ─── Grid ─── */
        .hww-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            margin: 0 auto 16px;
        }

        /* ─── Card ─── */
        .hww-card {
            background: #fff;
            border-radius: 20px;
            padding: 28px 28px 36px;
            position: relative;
            overflow: hidden;
            min-height: 220px;
        }

        /* Decorative blob bottom-right */
        .hww-card::after {
            content: '';
            position: absolute;
            bottom: -40px;
            right: -40px;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: color-mix(in srgb, var(--color_brand) 6%, transparent);
            pointer-events: none;
        }

        /* ─── Step badge ─── */
        .hww-step {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: var(--color_brand);
            color: #fff;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.5px;
            margin-bottom: 20px;
        }

        /* ─── Card body: icon + text ─── */
        .hww-card-body {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

        /* ─── Icon box ─── */
        .hww-icon-box {
            flex-shrink: 0;
            width: 68px;
            height: 68px;
            border-radius: 16px;
            background: color-mix(in srgb, var(--color_brand) 10%, #f0f2f8);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hww-icon-box svg {
            width: 32px;
            height: 32px;
            stroke: var(--color_brand);
            fill: none;
            stroke-width: 1.6;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* ─── Text ─── */
        .hww-card-text {
            flex: 1;
        }

        .hww-card-title {
            font-size: clamp(15px, 1.5vw, 18px);
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 8px;
            color: #1a2340;
        }

        .hww-card-desc {
            font-size: clamp(13px, 1.2vw, 15px);
            color: #6b7a99;
            line-height: 1.6;
        }

        /* ─── Dashed arrow (SVG inline, bottom-right of card) ─── */
        .hww-arrow {
            position: absolute;
            bottom: 18px;
            right: 22px;
            width: 90px;
            height: 36px;
            opacity: 0.55;
        }

        .hww-arrow svg {
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        /* ─── Features bar ─── */
        .hww-features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            background: #fff;
            border-radius: 20px;
            margin: 0 auto;
            overflow: hidden;
        }

        .hww-feature {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 24px 28px;
            position: relative;
        }

        /* Dividers between features */
        .hww-feature+.hww-feature::before {
            content: '';
            position: absolute;
            left: 0;
            top: 20%;
            height: 60%;
            width: 1px;
            background: #e8eaf2;
        }

        /* ─── Feature icon ─── */
        .hww-feat-icon {
            flex-shrink: 0;
            width: 46px;
            height: 46px;
            border-radius: 12px;
            background: color-mix(in srgb, var(--color_brand) 10%, #f0f2f8);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hww-feat-icon svg {
            width: 22px;
            height: 22px;
            stroke: var(--color_brand);
            fill: none;
            stroke-width: 1.7;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .hww-feat-text strong {
            display: block;
            font-size: clamp(13px, 1.2vw, 15px);
            font-weight: 700;
            color: #1a2340;
            margin-bottom: 3px;
        }

        .hww-feat-text span {
            font-size: clamp(12px, 1vw, 13px);
            color: #6b7a99;
            line-height: 1.4;
        }

        /* ─── Responsive ─── */
        @media (max-width: 820px) {
            .how-we-work {
                padding: 44px 16px 40px;
            }

            .hww-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            /* Show all arrows on single-column but hide the last one */
            .hww-card:nth-child(2) .hww-arrow {
                display: block;
            }

            .hww-card:nth-child(4) .hww-arrow {
                display: none;
            }

            .hww-features {
                grid-template-columns: 1fr;
            }

            .hww-feature+.hww-feature::before {
                top: 0;
                left: 10%;
                width: 80%;
                height: 1px;
            }

            .hww-feature {
                padding: 18px 20px;
            }

            .hww-step {
                display: none
            }
        }

        @media (max-width: 480px) {
            .hww-card {
                padding: 22px 20px 32px;
            }

            .hww-card-body {
                flex-direction: column;
                gap: 14px;
            }

            .hww-icon-box {
                width: 56px;
                height: 56px;
            }
        }