section#reasons.reasons-2025 {
    background-color: #fff;
    border-radius: var(--sec-br) var(--sec-br) 0 0;
    padding: var(--sec-padding1);
    margin-top: 0;

    ul.wrap_reasons {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 70px;
        margin: 0;
        padding: 0
    }

    .reason_header {
        text-align: center;
        margin-bottom: 35px;

        .number {
            display: inline-block;
            margin: 0 0 16px;
            background: #2a3037;
            color: #fff;
            border-radius: 3px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .02em;
            /* max(2.5vw, 20px) resolved to 48px at 1920px, eight times the 6px vertical
               padding, stretching a 59px label into a 157px box. Fixed values at the
               same ~3:1 ratio as the other labels, with the top 0.5px thicker to
               offset a -0.87px optical shift. */
            padding: 6.5px 20px 5.5px
        }

        /* Down from 27px to match Figma; overrides .common-h3-1. */
        h3.common-h3-1 {
            font-size: clamp(19.5px, 1.5vw, 24px);
        }

        h3 {
            margin: 0
        }
    }

    ul.wrap_items {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 24px;
        row-gap: 16px;
        margin: 0;
        padding: 0;

        li {
            display: flex;
            flex-direction: column;
            align-items: center;

            /* The six screenshots range from 1.35 to 1.71 in aspect, so laid out raw
               their widths and vertical positions never line up. A fixed-ratio tile
               gives them a common frame and the image is centred with contain.
               The source images are also normalised to 1000x620 on a 1100x700 canvas. */
            .wrap_img {
                width: 100%;
                aspect-ratio: 1100 / 700;
                background: #f8f8fc;
                border-radius: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 auto 14px;

                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                }
            }

            /* Shares the caption's left edge; right alignment added an axis in one column. */
            p.note {
                width: 100%;
                margin: 8px 0 0;
                font-size: 12px;
                line-height: 1.5;
                color: #757575;
                text-align: left
            }

            /* Centred two-line captions ended at different points per column. Left aligned,
               they share an axis with the tile edge. */
            p.common-p-2 {
                width: 100%;
                margin: 0;
                text-align: left;
                text-wrap: pretty;
                font-size: 15px;

                /* Three-column only: reserve two lines so the row's baseline (where the
                   trademark note sits) stays level even with a one-line caption. */
                @media screen and (min-width:960px) {
                    min-height: 3.3em;
                }
            }
        }
    }
}

@media screen and (max-width:1199px) {
    section#reasons.reasons-2025 {
        ul.wrap_reasons {
            row-gap: 60px
        }

        ul.wrap_items {
            row-gap: 30px
        }
    }
}

@media screen and (max-width:959px) {
    section#reasons.reasons-2025 {
        ul.wrap_reasons {
            row-gap: 50px
        }

        .reason_header {
            margin-bottom: 30px;

            .number {
                margin-bottom: 15px
            }
        }

        ul.wrap_items {
            grid-template-columns: 1fr;
            row-gap: 40px;
            max-width: 600px;
            margin: 0 auto;

            li {
                .wrap_img {
                    margin-bottom: 12px
                }
            }
        }
    }
}

@media screen and (max-width:767px) {
    section#reasons.reasons-2025 {
        ul.wrap_reasons {
            row-gap: 40px
        }

    }
}

@media screen and (max-width:480px) {
    section#reasons.reasons-2025 {
        ul.wrap_items {
            p.note {
                font-size: 11px
            }
        }
    }
}

section#banner_autopilot {
    margin: 0 auto 120px;
    padding: 0 20px;
}

@media screen and (max-width:959px) {
    section#banner_autopilot {
        margin: 0 auto 80px
    }
}

@media screen and (max-width:767px) {
    section#banner_autopilot {
        margin: 0 auto 60px
    }
}

@media screen and (max-width:480px) {
    section#banner_autopilot {
        padding: 0 10px
    }
}