/* Homepage CTA for debtors. Isolated from the theme's existing layout. */
.main-about .debtors-account-banner {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) 263px;
    align-items: center;
    gap: 24px;
    padding: 48px 36px;
    margin-top: 14px;
    margin-bottom: 66px;
    border: 1px solid #d6e9f5;
    border-left: 5px solid #0a9bd0;
    border-radius: 12px;
    background: linear-gradient(110deg, #f3faff 0%, #eaf5fd 100%);
    box-shadow: 0 10px 32px rgba(15, 28, 73, 0.07);
}

.debtors-account-banner__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #d8effb;
    color: #087db4;
}

.debtors-account-banner__content {
    min-width: 0;
}

.debtors-account-banner__eyebrow {
    margin: 0 0 7px;
    font-family: "Rubik", sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #086c9f;
}

.debtors-account-banner__title {
    margin: 0 0 9px;
    font-family: "RobotoS", Georgia, serif;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.3;
    color: #0f1c49;
}

.debtors-account-banner__description {
    margin: 0;
    font-family: "Rubik", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    color: #34476b;
}

.debtors-account-banner__button,
.debtors-account-banner__button:visited {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    min-height: 54px;
    padding: 14px 18px;
    border-radius: 5px;
    background: #0876b0;
    color: #fff;
    font-family: "Rubik", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.debtors-account-banner__button:hover {
    background: #075c8a;
    box-shadow: 0 5px 14px rgba(8, 118, 176, 0.2);
    color: #fff;
}

.debtors-account-banner__button:focus-visible {
    outline: 3px solid #0f1c49;
    outline-offset: 3px;
}

.debtors-account-banner__button span {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
}

@media (max-width: 1100px) {
    .main-about .debtors-account-banner {
        margin-top: 0;
        margin-bottom: 50px;
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 14px 20px;
        padding: 26px;
    }

    .debtors-account-banner__icon {
        width: 56px;
        height: 56px;
    }

    .debtors-account-banner__button {
        grid-column: 2;
        justify-self: start;
    }
}

@media (max-width: 600px) {
    .main-about .debtors-account-banner {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 23px 19px;
        margin-bottom: 38px;
        border-radius: 9px;
    }

    .debtors-account-banner__icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
    }

    .debtors-account-banner__icon svg {
        width: 27px;
        height: 27px;
    }

    .debtors-account-banner__title {
        font-size: 23px;
    }

    .debtors-account-banner__description {
        font-size: 14px;
    }

    .debtors-account-banner__button {
        grid-column: auto;
        justify-self: stretch;
        width: 100%;
        margin-top: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .debtors-account-banner__button {
        transition: none;
    }
}

/* Keep the existing dot ornaments with the actual About content,
   rather than overlaying the new CTA above it. */
.main-about .about-descript {
    position: relative;
}

/* Wide desktop hero: actual two-column layout, not an absolutely
   positioned video overlapping an unconstrained heading. The theme
   already hides the video at viewport widths up to 1440px. */
@media screen and (min-width: 1441px) {
    .first-screen .first-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
    }

    .first-screen .first-wrap > .container {
        grid-column: 1;
        min-width: 0;
        max-width: none;
        width: 100%;
        margin: 0;
        padding-left: max(24px, calc((100vw - 1170px) / 2));
        padding-right: 30px;
    }

    .first-screen .first-wrap h1 {
        display: block;
        max-width: 100%;
        font-size: 42px;
        line-height: 1.33;
        overflow-wrap: normal;
        text-wrap: balance;
    }

    .first-screen .first-wrap .video {
        grid-column: 2;
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: 570px;
    }

    .first-screen .first-wrap .video iframe {
        display: block;
        width: 100%;
        height: 100%;
    }
}

/* Home page rhythm tuning after inserting the debtors CTA above the About section. */
@media (min-width: 1101px) {
    .home .main-about {
        margin-top: 154px;
    }

    .home .main-about .debtors-account-banner {
        margin-top: 0;
        margin-bottom: 88px;
    }

    .home .main-about .about-descript {
        margin-top: 28px;
    }

    .home .main-about .about-descript .dark-points,
    .home .main-about .about-descript .light-points {
        opacity: 0.42;
        pointer-events: none;
    }

    .home .main-about .about-descript .dark-points {
        left: -118px;
        top: 138px;
    }

    .home .main-about .about-descript .light-points {
        right: -84px;
        top: -10px;
    }
}

@media (min-width: 601px) and (max-width: 1100px) {
    .home .main-about {
        margin-top: 225px;
    }

    .home .main-about .debtors-account-banner {
        margin-bottom: 62px;
    }
}