/* Share the anniversary announcement without importing either layout's global styles. */
.two-year-results-banner {
    /* Keep the milestone announcement compact and visually distinct. */
    padding: 18px 0;
    border-bottom: 1px solid rgba(155, 230, 254, 0.22);
    background: #0f1023;
}

.two-year-results-banner .container {
    /* Preserve the public banner width when the backend Bootstrap container is present. */
    width: auto;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.two-year-results-banner-inner {
    /* Align the milestone copy and its single action on desktop. */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 22px;
    border: 1px solid rgba(125, 118, 254, 0.46);
    border-radius: 14px;
    background: rgba(125, 118, 254, 0.1);
}

.two-year-results-banner-copy {
    /* Allow the title to use available space without forcing a tall banner. */
    min-width: 0;
}

.two-year-results-banner-eyebrow {
    /* Use one small all-caps treatment to identify the milestone label. */
    margin: 0 0 7px;
    color: #9be6fe;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.2;
    text-transform: uppercase;
}

.two-year-results-banner h2 {
    /* Keep the banner hierarchy forceful without competing with the page title. */
    margin: 0;
    color: #ffffff;
    font-family: "Hanken Grotesk", "Arial", sans-serif;
    font-size: clamp(21px, 2.1vw, 30px);
    font-weight: 700;
    line-height: 1.05;
}

.two-year-results-banner-copy > p:last-child {
    /* Make the three milestone terms easy to scan under the banner title. */
    margin: 7px 0 0;
    color: #c9c6ff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.two-year-results-banner-cta {
    /* Make the complete CTA block one obvious, keyboard-accessible link. */
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 12px 18px;
    border: 1px solid rgba(155, 230, 254, 0.74);
    border-radius: 999px;
    background: #f5f7ff;
    color: #16112b;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
}

.two-year-results-banner-cta:hover,
.two-year-results-banner-cta:focus-visible {
    /* Preserve contrast while making the action feel responsive to input. */
    border-color: #ffffff;
    background: #9be6fe;
    color: #16112b;
    opacity: 1;
    outline: none;
}

/* Preserve the component values against the backend layout's broad heading and link rules. */
body.backend-theme #main-container .two-year-results-banner .two-year-results-banner-eyebrow {
    /* Restore the milestone label color after the backend paragraph rule. */
    color: #9be6fe;
}

body.backend-theme #main-container .two-year-results-banner h2 {
    /* Restore the public title treatment after the backend heading rule. */
    margin: 0;
    color: #ffffff;
    font-family: "Hanken Grotesk", "Arial", sans-serif;
    font-size: clamp(21px, 2.1vw, 30px);
    font-weight: 700;
    line-height: 1.05;
}

body.backend-theme #main-container .two-year-results-banner-copy > p:last-child {
    /* Restore the public supporting-copy color after the backend paragraph rule. */
    color: #c9c6ff;
}

body.backend-theme #main-container a.two-year-results-banner-cta {
    /* Override the backend's generic link-button declaration for this white pill CTA. */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    margin: 0 !important;
    padding: 12px 18px !important;
    border: 1px solid rgba(155, 230, 254, 0.74) !important;
    border-radius: 999px !important;
    background: #f5f7ff !important;
    color: #16112b !important;
    font-size: 15px;
    font-weight: 800 !important;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
}

body.backend-theme #main-container a.two-year-results-banner-cta:hover,
body.backend-theme #main-container a.two-year-results-banner-cta:focus-visible {
    /* Keep the backend hover and focus states identical to the public banner. */
    border-color: #ffffff !important;
    background: #9be6fe !important;
    color: #16112b !important;
    filter: none !important;
    opacity: 1;
    outline: none;
}

/* Stack the milestone banner deliberately at the existing public mobile breakpoint. */
@media (max-width: 768px) {
    .two-year-results-banner {
        /* Reduce only the outer banner spacing on handheld displays. */
        padding: 12px 0;
    }

    .two-year-results-banner-inner {
        /* Replace the desktop horizontal treatment with a compact vertical reading order. */
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }

    .two-year-results-banner-cta {
        /* Let the single banner action fill the available touch target width. */
        width: 100%;
    }
}