.text-card-section {
    position: relative;
    background: linear-gradient(242deg, #0063D8 34.72%, #194886 98.01%);
    color: #fff;
}

.text-card-intro {
    color: #fff;
    text-align: center;
}

.text-card-intro > * {
    color: #fff;
}

.text-card-intro h2 {
    padding-top: 0;
}

.text-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 -12px;
}

.text-card-col {
    width: 100%;
    padding: 0 12px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.text-card-col-inner {
    position: relative;
    width: 100%;
    max-width: 290px;
    margin: 0 auto;
    aspect-ratio: 290 / 377;
    -webkit-clip-path: url(#text-card-droplet-clip);
    clip-path: url(#text-card-droplet-clip);
    max-height: 377px;
}

.text-card-pattern-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

.text-card-pattern-bg svg {
    display: block;
    width: 100%;
    height: 100%;
}

.text-card {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    box-sizing: border-box;
}

.text-card h3 {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    width: 56%;
       max-width: 139px;
    padding: 0 0 8px;
    display:flex;
    justify-content: center;
}

.text-card p {
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    padding: 0 10px;
    max-width: 261px;

}

.text-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.text-card-link i {
    font-size: 11px;
}
.homepage-text-card {
    /* Reserve the in-section white bottom wave (192 tall at 1920w, scales fluidly
       with viewport width) plus one homepage-refresh section gap so the cards clear
       the wave with consistent spacing. Falls back to --section-margins off-template. */
    padding-bottom: calc(100vw * 192 / 1920 + var(--hr-section-gap, var(--section-margins)));
    z-index: 1;
}

/* White wave clips the bottom of the blue section into the white product section below.
   Because the blue is the section's own gradient and the wave fill is #fff (same as the
   product section background), there is no color seam to match. */
.text-card-bottom-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    line-height: 0;
    z-index: 1;
    pointer-events: none;
}

.text-card-bottom-wave svg {
    display: block;
    width: 100%;
    height: auto;
}

.homepage-text-card .container {
    position: relative;
    z-index: 2;
}

/* Top wave: when the text-card follows the masthead, clip its top edge into the wave
   shape and pull it up so it overlaps the masthead. The masthead background image shows
   through the wave troughs, and the text-card's own gradient forms the wave peaks, so the
   transition blends with the text-card with no color to match. Replaces the old blue
   homepage-bottom-wave that floated over the masthead image. */
.video-text:has(+ .homepage-text-card) .homepage-bottom-wave {
    display: none;
}

.video-text + .homepage-text-card {
    --tc-top-wave: calc(100vw * 188 / 1920);
    margin-top: calc(-1 * var(--tc-top-wave));
    padding-top: calc(var(--tc-top-wave) + var(--hr-section-gap, var(--section-margins)));
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%20188'%20preserveAspectRatio='none'%3E%3Cpath%20d='M172.712%201.16328C294.193%209.93937%20415.678%2068.975%20537.16%2094.7428C658.643%20120.032%20780.126%20112.053%20901.608%2090.5141C1023.09%2068.9751%201144.57%2035.469%201266.06%2035.2281C1387.54%2035.4671%201509.02%2068.9741%201630.5%2094.7428C1743.15%20118.194%201855.78%20134.986%201920%20143.857V188H0V17.2097C52.6906%205.15016%20112.699%20-3.17255%20172.712%201.16328Z'%20fill='%23000'/%3E%3C/svg%3E") top / 100% var(--tc-top-wave) no-repeat,
        linear-gradient(#000, #000) bottom / 100% calc(100% - var(--tc-top-wave) + 1px) no-repeat;
    -webkit-mask-composite: source-over;
    mask:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%20188'%20preserveAspectRatio='none'%3E%3Cpath%20d='M172.712%201.16328C294.193%209.93937%20415.678%2068.975%20537.16%2094.7428C658.643%20120.032%20780.126%20112.053%20901.608%2090.5141C1023.09%2068.9751%201144.57%2035.469%201266.06%2035.2281C1387.54%2035.4671%201509.02%2068.9741%201630.5%2094.7428C1743.15%20118.194%201855.78%20134.986%201920%20143.857V188H0V17.2097C52.6906%205.15016%20112.699%20-3.17255%20172.712%201.16328Z'%20fill='%23000'/%3E%3C/svg%3E") top / 100% var(--tc-top-wave) no-repeat,
        linear-gradient(#000, #000) bottom / 100% calc(100% - var(--tc-top-wave) + 1px) no-repeat;
    mask-composite: add;
}

.bottom-cta {
    padding-bottom: 50px;
}
@media (min-width: 601px) {
    .text-card-col {
        width: 50%;
    }
}
.bottom-cta .btn {
    background: #fff;
    color: #194886;
}


@media (min-width: 768px) {
   
    .text-cards {
        margin: 0 -15px;
    }

    .text-card-col {
        padding: 0 15px 48px;
    }

    .text-card {
        top: 25%;
        transform: translateX(-50%) translateY(0);
    }

    .text-card h3 {
        padding-bottom: 10px;
    }

   

    .text-card-link {
        margin-top: 12px;

    }
}

@media (min-width: 992px) {
    .text-card-col {
        width: 33.333%;
    }

    .text-card h3 {
        padding-bottom: 12px;
    }

    

   
}

@media (min-width: 1200px) {
    .text-card-col {
        width: 25%;
    }

    .text-card {
        top: 25%;
    }

    .text-card h3 {
        padding-bottom: 14px;
    }

    .text-card p {
        max-width: 261px;
    }

    .text-card-intro h2 {
        font-size: 48px;
    }
    .bottom-cta .btn:hover{
        background: #4DC6EC;
        color: #fff;
    }
  
}