/*
 * CHIPREGISTER_HOME_GPS_PROMO_V5_3_CENTER_CTA
 *
 * WIDTH:
 * inherited from section.how, therefore exactly the same total
 * width as the four How cards. DO NOT CHANGE.
 *
 * SOURCE PNG:
 * contains white bands above and below the actual dark banner.
 * They are hidden responsively by the stage viewport.
 * PNG files are NOT modified and are NOT resampled.
 *
 * Vertical external separation:
 * max ~3 mm = 11 CSS px.
 */

.cr-home-gps-promo {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;

    /* about 2.9 mm at 96 CSS dpi */
    margin: 11px 0;

    padding: 0;
}

/*
 * The useful dark artwork inside the 1889x833 source occupies
 * approximately the central 1889x610 region.
 *
 * 1889 / 610 = 3.0967.
 *
 * This viewport removes ONLY the white bands already embedded
 * in the PNG. It does not change the horizontal geometry.
 */
.cr-home-gps-promo__stage {
    position: relative;

    width: 100%;
    max-width: 100%;

    aspect-ratio: 1889 / 610;

    margin: 0;
    padding: 0;

    overflow: hidden;

    border-radius: 14px;
    background: #061321;
}

/*
 * Keep the image at exactly the container width.
 * Natural source ratio: 1889 / 833.
 *
 * Move it upward by the proportional amount corresponding
 * to the embedded top white band.
 */
.cr-home-gps-promo__image {
    position: absolute;

    top: 0;
    left: 0;

    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
    border: 0;

    transform: translateY(-13.8%);
    transform-origin: top left;
}

/*
 * Overlay occupies ONLY the visible dark banner.
 * CTA therefore can never fall into the removed white band.
 */
.cr-home-gps-promo__overlay {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
}

/*
 * CTA position inside the dark artwork.
 * Proportional values => same position at every viewport width.
 *
 * The button is placed in the lower-left/central area of the
 * planet, not below the banner.
 */
.cr-home-gps-promo__cta {
    position: absolute;

    left: 45%;
    bottom: 4.5%;

    transform: translateX(-50%);

    pointer-events: auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: clamp(4px, .45vw, 8px);

    max-width: 38%;

    padding:
        clamp(6px, .55vw, 10px)
        clamp(11px, 1.05vw, 20px);

    border:
        clamp(1px, .10vw, 2px)
        solid rgba(126,255,68,.90);

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #48db0b 0%,
            #159d08 100%
        );

    color: #fff;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;

    font-family: Inter, Arial, sans-serif;
    font-size: clamp(9px, .90vw, 17px);
    font-weight: 900;
    line-height: 1.1;

    box-shadow:
        0 0 clamp(5px,.5vw,10px) rgba(92,255,48,.80),
        0 0 clamp(10px,1.0vw,19px) rgba(42,213,20,.52),
        inset 0 1px 0 rgba(255,255,255,.28);

    text-shadow: 0 1px 2px rgba(0,0,0,.28);

    z-index: 2;
}

.cr-home-gps-promo__paw {
    flex: 0 0 auto;
    font-size: 1.08em;
    line-height: 1;
}

.cr-home-gps-promo__cta:hover {
    filter: brightness(1.06);
}

.cr-home-gps-promo__cta:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}

/*
 * Tablet:
 * same geometry, only CTA typography scales.
 */
@media (max-width: 1024px) {
    .cr-home-gps-promo {
        margin: 10px 0;
    }

    .cr-home-gps-promo__stage {
        border-radius: 12px;
    }

    .cr-home-gps-promo__cta {
        left: 45%;
        bottom: 4.5%;

        max-width: 40%;

        font-size: clamp(8px, 1.20vw, 13px);

        padding:
            clamp(5px, .65vw, 8px)
            clamp(9px, 1.15vw, 15px);
    }
}

/*
 * Smartphone:
 * still no extra vertical whitespace and no horizontal scroll.
 */
@media (max-width: 767px) {
    .cr-home-gps-promo {
        margin: 8px 0;
    }

    .cr-home-gps-promo__stage {
        border-radius: 9px;
    }

    .cr-home-gps-promo__cta {
        left: 45%;
        bottom: 4%;

        max-width: 43%;

        gap: 2px;

        padding:
            clamp(3px, 1.0vw, 5px)
            clamp(6px, 1.7vw, 9px);

        font-size: clamp(6px, 1.85vw, 9px);

        white-space: normal;
    }

    .cr-home-gps-promo__paw {
        font-size: 1em;
    }
}