@font-face {
    font-family: "acumin-pro-semi-condensed";
    src: url("/assets/css/font/Acumin-RPro.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #fff;
    --ink: #1b1f23;
    --muted: #6b7280;
    --grid: #e5e7eb;
    --primary: #1e73be;
    --highlight: #f25ba8;
    --bar: #1f77d0;
    --card: #f8fafc;
    --border: #e5e7eb;
    --accent-blue: #0077CD;
    --line: #e5e7eb;
    --brand: #0D70C0;
    --brand10: rgba(13,112,192,.10);
    --radius: 6px; /* normalized */
    --header-h: 66px; /* anchor for mega-menu */
    /* Footer tokens */
    --footer-bg: #f8f9fa;
    --text-color: #333;
    --link-color: var(--accent-blue);
    --link-hover: #005999;
    --font-sans: acumin-pro-semi-condensed, Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    --goa-font-weight-regular: 400;
    --goa-font-size-2: 0.875rem;
    --goa-font-size-1: 0.75rem;
    --goa-font-family-sans: acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif;
    --goa-line-height-1: 1.25rem;
    --goa-space-3xl: 4rem;
    --goa-space-xl: 2rem;
    --goa-space-m: 1rem;
    --goa-space-2xs: 0.25rem;
    --goa-border-width-l: 3px;
    --goa-icon-size-s: 1rem;
    --goa-color-greyscale-black: #333333;
    --goa-color-greyscale-700: #666666;
    --goa-color-greyscale-100: #f1f1f1;
    --goa-color-interactive-focus: #feba35;
    --goa-color-interactive-hover: #004f84;
    --goa-color-interactive-default: #0070c4;
    --goa-color-text-secondary: var(--goa-color-greyscale-700);
    --goa-color-text-default: var(--goa-color-greyscale-black);
    --goa-typography-body-xs: var(--goa-font-weight-regular) var(--goa-font-size-2) / var(--goa-line-height-1) var(--goa-font-family-sans);
    --goa-microsite-header-typography: var(--goa-typography-body-xs);
    --goa-microsite-header-typography-version-number: var(--goa-font-size-1);
    --goa-microsite-header-padding-small-screen: var(--goa-space-2xs) var(--goa-space-m);
    --goa-microsite-header-padding-medium-screen: var(--goa-space-2xs) var(--goa-space-xl);
    --goa-microsite-header-padding-large-screen: var(--goa-space-2xs) var(--goa-space-3xl);
    --goa-microsite-header-gap: var(--goa-space-m);
    --goa-microsite-header-color-bg: var(--goa-color-greyscale-100);
    --goa-microsite-header-color-links: var(--goa-color-interactive-default);
    --goa-microsite-header-color-links-hover: var(--goa-color-interactive-hover);
    --goa-microsite-header-link-focus-border: var(--goa-border-width-l) solid var(--goa-color-interactive-focus);
    --goa-microsite-header-color-version-number: var(--goa-color-text-secondary);
}

/* iPhone Pro / modern mobile widths */
@media (max-width: 430px) {
    :root {
        --header-h: 55px;
    }
}


body {
    overflow-x: hidden;
    scrollbar-gutter: stable;
}

html, body {
    font-family: var(--font-sans);
    font-weight: normal;
    

    font-optical-sizing: auto;

}


/* form controls don’t always inherit */
input, button, textarea, select {
    font: inherit;
}
.login-textbox {
    width: 250px;
}

h2 {

    line-height: 2.75rem;
    font-size: 2em;
    color: #333;
    font-weight: normal;
    word-break: break-word;
}

/* ================
   HEADER (grid-safe)
   ================ */
header {
    position: relative;
    top: 0;
    z-index: 1000;
    background: #fff;
    color: #000;
    padding: 1rem 2rem;
    box-shadow: 0 3px 13px rgba(51,51,51,.11);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    min-height: var(--header-h);
}

.header-title {
    /* Remove grid-column since we're taking it out of flow */
    /* grid-column: 2; */
    /* justify-self: center; */
    /* True viewport centering */
    position: absolute;
    left: 50vw; /* 50% of viewport width */
    top: 53%; /* 👈 add this */
    transform: translate(-50%, -50%); /* 👈 update this */
    text-align: center;
    max-width: 70vw;
    white-space: nowrap;
    overflow: hidden;
    color: #222;
    letter-spacing: 1px;
    font-weight: 400;
    font-size: 1.2rem;
}

    .header-title a {
        text-decoration: none;
        cursor: pointer;
        color: #000;
    }

.logo {
    font-weight: bold;
    color: #fff;
    width: 120px;
    height: auto;
    grid-column: 1;
    justify-self: start;
    align-self: center;
}


/* ================
   JUMBOTRON / IMAGES
   ================ */
.image1 {
    background-image: url('../images/kyler-nixon-_ZBekGTBh-c-unsplash.jpg');
    background-size: cover;
    background-position: 44% 70%;
    background-repeat: no-repeat;
    height: 30vh;
    width: 100%;
    position: relative;
    padding: 0;
    margin: 0;
    z-index: 1;
}

.header-container {
    width: 90%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: transparent;
}

.jumbotron {
    background-size: cover;
    background-position: 34% 60.2%;
    background-repeat: no-repeat;
    height: 40vh;
    min-height: 300px;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
}

.jumbotron-content {
    position: absolute;
    inset: 0 0 auto 0;
    height: 100%;
    background: linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.38),rgba(0,0,0,.75));
    padding: 2em 1em;
    display: flex;
    align-items: flex-end;
    box-shadow: 0;
    border-bottom: 7px solid rgba(200,238,250,1);
    -webkit-font-smoothing: antialiased;
}

.jumbotron-no-image {
    height: 25vh;
    min-height: 200px;
    width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
}

.jumbotron-content-no-image {
    position: absolute;
    inset: 0 0 auto 0;
    height: 100%;
    background: #fff;
    border-bottom: 0;
    padding: 2em 1em;
    display: flex;
    align-items: flex-end;
    box-shadow: none;
    -webkit-font-smoothing: antialiased;
}

.jumbotron-title, .jumbotron-subtitle, .jumbotron-title-no-image {
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    margin: 0;

}

.jumbotron-title {
    color: #fff;
    letter-spacing:0.02rem;
    max-width: 800px;
    margin: 0;
    padding: 0;
    line-height: 3.5rem;
    font-size: 2.3rem;
    word-break: break-word;
}

.jumbotron-subtitle {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 2em;
    max-width: 1000px;
}

.jumbotron-title-no-image {
    color: #fff;
    line-height: 2em;
    font-size: 2.2rem;
}

.jumbotron-no-image .jumbotron-title,
.jumbotron-no-image .jumbotron-subtitle,
.jumbotron-content-no-image .jumbotron-title,
.jumbotron-content-no-image .jumbotron-subtitle {
    color: #2b2b2b !important;
    text-shadow: none !important;
}

@media (max-width:768px) {
    .jumbotron {
        height: 30vh;
        min-height: 300px;
    }

  

    .jumbotron-content {
        position: absolute;
        inset: 0;
        background: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .38), rgba(0, 0, 0, .75) );
        padding: 0 1em 3em;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        flex-direction: row;
        border-bottom: 7px solid rgba(200, 238, 250, 1);
        -webkit-font-smoothing: antialiased;
    }

    .jumbotron-title {
        font-size: 2.375rem;
        transform: translateY(8px);
        text-wrap: balance;
    }

    .jumbotron-subtitle {
        font-weight: normal;
        text-wrap: balance;
        margin: 0.325rem 0 0;
        font-size: 1.5rem;
        line-height: 2.25rem;
    }

    .header-container {
        width: 95%;
        padding: 10px;
    }
}

@media (max-width:555px) {
    .jumbotron-content {
        position: absolute;
        inset: 0;
        background: linear-gradient( to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .38), rgba(0, 0, 0, .75) );
        padding: 0 1em;
        display: flex;
        align-items: center; /* vertical center */
        justify-content: flex-start; /* left align */
        flex-direction: row; /* normal flow */
        border-bottom: 7px solid rgba(200, 238, 250, 1);
        -webkit-font-smoothing: antialiased;
    }
}

/* ================
   CARDS / SECTIONS
   ================ */
.profile-card {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 0 4px 1px rgba(0,0,0,.08);
    padding: 24px;
    margin: 24px auto 32px;
}


.nav-tabs {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    padding: 0 0 0 1px;
}

.nav-link {
    padding: 8px 10px;
    font-weight: 700;
    color: #1e73be;
    border-radius: 6px 6px 0 0;
}

    .nav-link.active {
        background: #f8fafc;
        color: #1e73be;
    }

.idh-section {
    background: var(--bg);
    color: var(--ink);
}

.idh-overview {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: start;
    padding: 24px;
    background: #fff;
    border-radius: var(--radius);
    margin: 16px 0;
}

.idh-h2 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.idh-intro {
    margin: 0 0 8px;
    color: var(--muted);
}

.idh-link {
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
    color: var(--primary);
}

.idh-cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width:980px) {
    .idh-overview {
        grid-template-columns: 1fr;
    }

    .idh-cta {
        justify-content: flex-start;
    }
}

/* Horizontal stats list */
.idh-stats {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex; /* horizontal layout */
    flex-wrap: nowrap; /* keep in one line */
    overflow-x: auto; /* scroll horizontally if too long */
    gap: 1rem; /* space between items */
    scroll-snap-type: x mandatory; /* nice smooth scroll */
    -webkit-overflow-scrolling: touch;
}

/* =========================
   GOA Page Headings (Hero)
   ========================= */
.goa-container {
    display: flex;
    align-items: flex-start;
    margin: 0 auto 2rem;
}

.goa-heading {
    position: relative;
    padding-left: 1.5rem;
}

    .goa-heading:before {
        content: "";
        position: absolute;
        left: 0;
        top: .25rem;
        bottom: .25rem;
        width: .6rem;
        background: #002c4e;
    }

    .goa-heading h1 {
        margin: 0;
        font-size: 2.2rem;
        font-weight: 700;
        color: #2b2b2b;
    }

.goa-page-header--lede {
    margin: 1.125rem 0 0;
    color: #333;
    font-weight: 500;
    max-width: 50rem;
    font-size: 1.2em;
    line-height: 1.45;
}

/* =========
   FOOTER
   ========= */
.goa-footer {
    background: var(--footer-bg);
    
    font-size: .9rem;
    color: var(--text-color);
}

    .goa-footer .goa-container {
        width: calc(100% - 3rem);
        max-width: 80rem;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 1.75rem 0;
    }

.goa-logo {
    font-weight: 700;
    color: var(--accent-blue);
    text-decoration: none;
    margin-right: 2rem;
    font-size: 1.1rem;
}

.goa-footer--links {
    display: flex;
    flex: 1;
    gap: 3rem;
}

.goa-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.goa-list li {
    margin-bottom: .5rem;
}

.goa-list a {
    color: var(--link-color);
    text-decoration: none;
}

    .goa-list a:hover {
        text-decoration: underline;
        color: var(--link-hover);
    }

.goa-footer--social-copy {
    margin-left: auto;
    text-align: right;
}

.goa-footer--social ul {
    list-style: none;
    padding: 0;
    margin: 0 0 .5rem 0;
    display: flex;
    gap: 1rem;
}

.goa-footer--social a {
    color: var(--link-color);
    text-decoration: none;
}

    .goa-footer--social a:hover {
        text-decoration: underline;
    }

.visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    white-space: nowrap;
}

.goa-footer .goa-logo {
    position: relative;
    display: inline-block;
    padding-left: 11.5rem;
    line-height: 3rem;
    text-decoration: none;
}

    .goa-footer .goa-logo:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        height: 3rem;
        width: 10.8125rem;
        background: rgba(0,0,0,0) url("data:image/svg+xml,%3Csvg ... %3E") no-repeat center center / contain;
    }

div.goa-socialshare li a {
    display: inline-block;
    padding-left: 28px;
    line-height: 24px;
    position: relative;
}

    div.goa-socialshare li a:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 24px;
        width: 24px;
        background-size: cover;
    }

div.goa-socialshare li.goa-socialshare-facebook a:before {
    background: url("data:image/svg+xml,%3Csvg ... %3E") no-repeat center center;
}

div.goa-socialshare li.goa-socialshare-twitter a:before {
    background: url("data:image/svg+xml,%3Csvg ... %3E") no-repeat center center;
}

div.goa-socialshare li.goa-socialshare-instagram a:before {
    background: url("data:image/svg+xml,%3Csvg ... %3E") no-repeat center center;
}

div.goa-socialshare li.goa-socialshare-linkedin a:before {
    background: url("data:image/svg+xml,%3Csvg ... %3E") no-repeat center center;
}

@media (max-width:900px) {
    .goa-footer .goa-container {
        align-items: flex-start;
        row-gap: 1rem;
    }

    .goa-footer--links {
        width: 100%;
        gap: 2rem;
    }

    .goa-footer--social-copy {
        width: 100%;
        text-align: left;
        margin-left: 0;
    }
}

@media (max-width:600px) {
    .goa-footer .goa-logo {
        padding-left: 9.5rem;
    }

    .goa-footer--links {
        flex-direction: column;
        gap: 1.25rem;
    }
}

/* =============
   SIMPLE PLOT UI (single consolidated version)
   ============= */
.idh-plot {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 8px;
    min-height: 260px;
    padding: 8px 4px 0;
}

.idh-y {
    display: grid;
    grid-template-rows: repeat(4,1fr);
    align-items: start;
    color: var(--muted);
    font-size: 12px;
}

    .idh-y div {
        transform: translateY(-8px);
    }

.idh-grid {
    position: relative;
    display: grid;
    grid-template-rows: repeat(4,1fr);
}

    .idh-grid .line {
        border-top: 1px solid var(--grid);
    }

.idh-bars {
    position: absolute;
    inset: 0 0 24px 0;
    display: flex;
    align-items: flex-end;
    gap: 22px;
    padding: 0 6px;
}

.bar {
    width: 34px;
    background: var(--bar);
    border-radius: var(--radius) var(--radius) 0 0;
}

    .bar.highlight {
        background: var(--highlight);
    }

.idh-x {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 22px;
    padding: 0 6px;
    justify-content: flex-start;
    color: #374151;
    font-size: 12px;
}

    .idh-x span {
        width: 34px;
        text-align: center;
    }

.idh-source {
    margin: 10px 6px 0;
    color: var(--muted);
    font-size: 12px;
}

/* ============
   UTILITIES
   ============ */


.show-menu {
    display: block !important;
}



@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

/* ============
   SCOPED GRID
   ============ */
.idh-row {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    margin-top: 32px;
}



@media (max-width:980px) {
    .idh-row, .container > .row.idh-row {
        grid-template-columns: 1fr;
    }
}

/* ============
   PERFORMANCE / ANTI-FLICKER EXTRAS
   ============ */
header, .jumbotron, .jumbotron-content, .image1 {
   
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.idh-btn-primary, .btn-profile {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
   
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

    .idh-btn-primary::before, .idh-btn-primary::after {
        will-change: transform,opacity;
    }

.tab-button .tab-icon-wrapper, .tab-button .tab-label {
    will-change: opacity,transform;
}

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===============================
   INK-LIKE RIGHT BORDER ANIMATION
   =============================== */
@keyframes tocInkFade {
    0% {
        border-right-width: 1px;
    }

    100% {
        border-right-width: 10px;
    }
}
/* ===============================
   FLASH + LIGHT ANIMATION (pulse + arrow "ping")
   =============================== */

/* Add both classes when flashing:
   el.classList.add("toc-flash","toc-flash2");
*/
.toc-flash {
    position: relative;
    padding: 0;
    background: rgba(0,119,205,0);
    border-radius: 6px;
    animation: tocFlashSubtle 900ms ease-out 1;
    will-change: background, border-right-color;
}

@keyframes tocFlashSubtle {
    0% {
        background: rgba(0,119,205,0);
        border-right-color: rgba(0,119,205,0);
    }

    25% {
        background: rgba(0,119,205,.045);
        border-right-color: rgba(0,119,205,.35);
    }

    100% {
        background: rgba(0,119,205,0);
        border-right-color: rgba(0,119,205,0);
    }
}

/* Arrow */
.toc-flash::after {
    content: "";
    position: absolute;
    left: -16px;
    top: 50%;
    transform: translateY(-50%) scale(.92);
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 11px solid rgba(0,119,205,.55);
    filter: drop-shadow(0 0 2px rgba(0,119,205,.3));
    opacity: 0;
  
    will-change: transform, opacity, filter;
}



@media (prefers-reduced-motion: reduce) {
    .toc-flash {
        animation: none;
        background: linear-gradient( to right, rgba(13 54 146 / 0.12) 0%, rgba(13 54 146 / 0.04) 55%, rgba(13 54 146 / 0.00) 100% );
        border-right-color: rgba(0,119,205,.25);
    }

    .toc-flash2::after {
        animation: none;
        opacity: 1;
        transform: translateY(-50%);
        filter: none;
    }
}






    @media (max-width: 768px) {
        .header-title {
            display: none;
        }


        header {
            padding: 10px 13px 10px 10px;
            min-height: 55px;
        }

        .logo {
            width: 100px;
        }
    }














    /* ===============================
   JUMBOTRON TEXT IMPROVEMENTS
   (Fix the overflow issurs for lots of text -- nardo)
   =============================== */




    /* Jumbotron */
    .jumbotron {
        background-size: cover;
        background-position: center;
        height: 40vh;
        min-height: 300px;
        position: relative;
        display: flex;
        align-items: flex-end;
    }

    /* Overlay */
    .jumbotron-content {
        position: absolute;
        inset: 0;
        background: linear-gradient( to bottom, rgba(0,0,0,0), rgba(0,0,0,0.4), rgba(0,0,0,0.75) );
        padding: 2rem 1rem;
        display: flex;
        align-items: flex-end;
    }

    /* ===============================
   TEXT (clean + responsive)
   =============================== */
    .jumbotron-title {
        color: #fff;
        margin: 0;
        font-weight: 700;
        font-size: clamp(2.8rem, 7vw, 3rem);
        line-height: 1.1;
        white-space: nowrap;
        max-width: 100%;
    }

    .jumbotron-subtitle {
        color: #fff;
        margin-top: 0.5rem;
        font-size: clamp(1rem, 2.5vw, 1.75rem); /* ↑ ~25% */
        line-height: 1.4;
        max-width: min(42ch, 1000px);
        overflow-wrap: break-word;
        text-wrap: balance;
    }

    /* Mobile refinement only where needed */
    @media (max-width: 768px) {
        .jumbotron-title {
            max-width: 14ch;
        }

        .jumbotron-subtitle {
            max-width: 30ch;
        }
    }

    @media (max-width: 555px) {
        .jumbotron-title {
            max-width: 12ch;
        }

        .jumbotron-subtitle {
            max-width: 32ch;
        }
    }







    /* Let hero grow when text needs space */
    .jumbotron {
        min-height: clamp(300px, 40vh, 520px);
        height: auto; /* 🔥 key fix */
    }

    /* Keep content pinned nicely */
    .jumbotron-content {
        align-items: flex-end;
        padding: clamp(1rem, 3vw, 2.5rem) 1rem;
    }

    /* Prevent text from getting too wide */
    .jumbotron-title {
        max-width: 18ch;
    }

    .jumbotron-subtitle {
        max-width: 42ch;
    }

    /* Mobile: stack more naturally */
    @media (max-width: 768px) {
        .jumbotron {
            min-height: 340px;
        }

        .jumbotron-content {
            align-items: flex-end;
        }
    }


    /* ===============================
   FORCE BOTTOM ALIGN (clean fix)
   =============================== */

    .jumbotron-content,
    .jumbotron-content-no-image {
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* key */
        /* remove aggressive full stretch effect */
        inset: auto 0 0 0; /* anchor to bottom only */
        height: auto; /* key fix */
        padding-bottom: clamp(1.5rem, 3vw, 3rem);
    }


    .jumbotron-content,
    .jumbotron-content-no-image {
        padding-bottom: clamp(1.5rem, 3vw, 3rem);
    }




    /* ===============================
   JUMBOTRON TEXT / ALIGNMENT OVERRIDES
   =============================== */

    .jumbotron {
        min-height: clamp(300px, 40vh, 520px);
        height: auto;
    }

    .jumbotron-content,
    .jumbotron-content-no-image {
        padding-bottom: clamp(1.5rem, 3vw, 3rem);
        align-items: flex-end;
    }

    .jumbotron-title {
        font-size: clamp(2.8rem, 7vw,3rem);
        line-height: 1.1;
        max-width: 18ch;
        white-space: nowrap;
    }

    .jumbotron-subtitle {
        font-size: clamp(1.42rem, 2vw, 1.35rem);
        line-height: 1.2em;
        max-width: 102ch;
        overflow-wrap: break-word;
        text-wrap: balance;
    }

    @media (max-width: 1024px) {
        .jumbotron-title {
            font-size: 1.8em;
            max-width: 20ch;
            white-space: normal;
            text-wrap: nowrap;
            font-size: clamp(2.25rem, 5vw, 3.2rem);
            max-width: 32ch;
            padding-bottom: 0.1rem;
        }

        .jumbotron-subtitle {
        }
    }

    @media (max-width: 600px) {
        .jumbotron-title {
            white-space: normal;
            font-size: 1.8em;
            font-size: clamp(2.375rem, 7vw, 2.4rem);
            max-width: 22ch;
            text-wrap: balance;
            line-height: 1.1;
            margin-bottom: 0.5em;
            font-weight: 700;
        }

        .jumbotron-subtitle {
            max-width: 28ch;
            font-size: 1.5rem;
            line-height: 1.3em;
            text-wrap: balance;
        }
    }
















/* ===============================================
   ON THIS PAGE — CSS ONLY STICKY SIDEBAR
   =============================================== */

.on-the-page-col {
    position: relative;
}

#on-the-page-wrap {
    position: sticky;
    top: calc(var(--header-h, 66px) + 24px);
    z-index: 20;
    background: #fff;
    align-self: flex-start;
}

#goa-blue-heading3 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: #333;
    width: auto;
}

#on-the-page {
    width: 100%;
    max-width: 260px;
    min-width: 183px;
    padding: 0;
    border-left: 1px solid #ddd;
    background: #fff;
    max-height: calc(100vh - var(--header-h, 66px) - 40px);
    overflow-y: auto;
    white-space: normal;
    overflow-wrap: break-word;
}

    #on-the-page h3 {
        font-size: 1rem;
        margin-bottom: .5rem;
        color: #333;
    }

    #on-the-page ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #on-the-page li {
        margin-bottom: .35rem;
        border-left: 3px solid transparent;
    }

    #on-the-page a {
        display: block;
        padding-left: calc(1em - 3px);
        border-left: 3px solid transparent;
        text-decoration: none;
        color: #545860;
        font-size: 0.95rem;
        line-height: 1.4;
        white-space: normal;
        overflow: hidden;
        overflow-wrap: break-word;
    }

        #on-the-page a:hover {
            color: #333;
            text-decoration: underline;
        }

        #on-the-page a.active-toc {
            color: #333;
        }

.active-item-left-border {
    border-left: #066BBF solid 3px !important;
}

#toc-list li.active-item-left-border > a {
    font-weight: 700;
    color: #333;
    border-left-color: transparent;
}

@media (max-width: 1510px) {
    #on-the-page {
        min-width: 116px;
    }

    .idh-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1024px) {
    .on-the-page-col,
    #on-the-page-wrap,
    #on-the-page {
        display: none !important;
    }

    .forceFullWidth {
        width: 100% !important;
    }
}






























body {
    margin: 0;
}

.notification-bar {
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    min-height: 28px;
    display: flex;
    align-items: center;
    background-color: var(--goa-microsite-header-color-bg);
    color: var(--goa-color-text-default);
    font: var(--goa-microsite-header-typography);
    font-size: 0.95em;
    padding: var(--goa-microsite-header-padding-medium-screen);
    opacity: 0;
    visibility: hidden;
  
}

body.page-loaded .notification-bar {
    opacity: 1;
    visibility: visible;
    animation: notificationFadeIn 0.2s ease forwards;
}
@keyframes notificationFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.notification-bar__content {
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--goa-microsite-header-gap);
    box-sizing: border-box;
}

.notification-bar__text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
}
    .notification-bar__text p {
        display: contents;
        margin: 0;
    }

    .notification-bar__text span,
    .notification-bar__text a {
        white-space: nowrap;
        flex-shrink: 0;
    }

.notification-bar__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: #0070c4;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.22rem 0.45rem 0.2rem;
    min-height: 1.25rem;
    margin-right: 4px;
    border-radius: 2px;
    white-space: nowrap;
    align-self: baseline;
    transform: scale(0.9);
    transform-origin: center;
}

.text-best-fit {
    margin-right: 4px;
    margin-top: 1px;
}

.notification-bar a {
    color: var(--goa-microsite-header-color-links);
    cursor: pointer;
    text-decoration: underline;
}

    .notification-bar a:hover {
        color: var(--goa-microsite-header-color-links-hover);
    }

    .notification-bar a:focus {
        outline: var(--goa-microsite-header-link-focus-border);
        outline-offset: 2px;
    }

    .notification-bar a[target="_blank"]::after {
        content: "";
        width: var(--goa-icon-size-s);
        height: var(--goa-icon-size-s);
        background-color: var(--goa-microsite-header-color-links);
        display: inline-block;
        margin-left: var(--goa-space-2xs);
        vertical-align: -0.15em;
        mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M384%20224v184a40%2040%200%200%201-40%2040H104a40%2040%200%200%201-40-40V168a40%2040%200%200%201%2040-40h167.48M336%2064h112v112M224%20288%20440%2072%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2232%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
        -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M384%20224v184a40%2040%200%200%201-40%2040H104a40%2040%200%200%201-40-40V168a40%2040%200%200%201%2040-40h167.48M336%2064h112v112M224%20288%20440%2072%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%2232%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    }

    .notification-bar a[target="_blank"]:hover::after {
        background-color: var(--goa-microsite-header-color-links-hover);
    }

.notification-bar__version {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: var(--goa-microsite-header-color-version-number);
    font-size: var(--goa-microsite-header-typography-version-number);
    white-space: nowrap;
}

/* Tablet / desktop */
@media (min-width: 1024px) {
    .notification-bar {
        padding: var(--goa-microsite-header-padding-large-screen);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .notification-bar {
        padding: 0 0 0 1px;
        min-height: 28px;
        font-size: 0.82rem;
        line-height: 1;
    }

    .notification-bar__text {
        flex-wrap: nowrap;
        white-space: nowrap;
        overflow: hidden;
        align-items: baseline;
        line-height: 1;
    }
        .notification-bar__text p {
            display: contents;
            margin: 0;
        }

    .notification-bar__badge,
    .notification-bar a,
    .text-best-fit {
        flex: 0 0 auto;
        line-height: 1;
    }

    .notification-bar__badge {
        font-size: 1rem;
        min-height: 1.1rem;
        padding: 0.2rem 0.4rem;
        transform: scale(0.9);
    }

    .text-best-fit {
        margin-top: 0;
    }

    .notification-bar a {
        font-size: inherit;
    }

    .notification-text-start,
    .notification-text-service,
    .notification-text-help {
        font-size: 0;
        margin-right: 4px;
        line-height: 1;
    }

        .notification-text-start::after,
        .notification-text-service::after,
        .notification-text-help::after {
            font-size: 0.82rem;
            line-height: 1;
            vertical-align: baseline;
        }

        .notification-text-start::after {
            content: "New";
        }

        .notification-text-service::after {
            content: "service";
        }

        .notification-text-help::after {
            content: "— give";
        }

    .notification-bar a[target="_blank"]::after {
        width: 0.75rem;
        height: 0.75rem;
        margin-left: 2px;
        vertical-align: -0.1em;
    }
}

/* Popup overlay */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 12345;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
}

    .overlay.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity 200ms ease, visibility 0s;
    }

.popup {
    width: 70%;
   
    margin-top: 28px;
    padding: 24px;
    box-sizing: border-box;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f1f1f1+1,ffffff+50,f1f1f1+100 */
    background: linear-gradient(to right, #f1f1f1 1%,#ffffff 50%,#f1f1f1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

    border-radius: 10px;
    position: relative;
    z-index: 12346;
    text-wrap: balance;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    transform: translateY(20px) scale(0.96);
    transition: transform 260ms ease;
}

.overlay.is-open .popup {
    transform: translateY(0) scale(1);
}

.popup h2 {
    margin-top: 0;
    margin-right: 48px;
    color: #333;
    font-family: Tahoma, Arial, sans-serif;
}

.popup .close {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: #333;
}

    .popup .close:hover {
        color: #06d85f;
    }

.popup .content {

    overflow: auto;
}

@media screen and (max-width: 700px) {
    .overlay {
        align-items: center;
        padding: 16px;
        box-sizing: border-box;
    }

    .popup {
        width: 100%;
        margin-top: 0;
    }
    .adjustForMobile {
        font-size:1.3rem;
    }
}

@media screen and (max-width: 1024px) {
    .adjustForMobile {
        font-size: 1.6rem;
    }

}




















body.popup-open {
    overflow: hidden;
}



    .feedback-popup {
        width: 80vw;
        max-width: 900px;
        max-height: 90vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .feedback-popup__content {
        padding: 0;
        overflow: hidden;
        border-radius: 6px;
    }

    .feedback-popup__iframe {
        display: block;
        width: 100%;
        height: 72vh;
        border: 0;
        background: #fff;
    }

    @media (max-width: 600px) {
        .feedback-popup {
            width: 94vw;
            max-height: 92vh;
        }

        .feedback-popup__iframe {
            height: 76vh;
        }

        .popup {
            width: 99%;
            padding:3px;
            margin:1px;
        }
    }




.feedback-popup__content {
    max-height: calc(100vh - 140px);
    overflow: auto;
}

.feedback-popup__iframe {
    width: 100%;
    height: calc(100vh - 180px);
    border: 0;
}

/* Hide chart shell until Stencil has hydrated */
goa-line-chart:not(.hydrated),
goa-bar-chart:not(.hydrated),
goa-pie-chart:not(.hydrated),
goa-regional-explorer:not(.hydrated) {
    visibility: hidden;
}

/* Always hide raw Stencil config */
goa-line-chart [slot="config"],
goa-bar-chart [slot="config"],
goa-pie-chart [slot="config"],
goa-regional-explorer [slot="config"],
config[slot="config"] {
    display: none !important;
}






goa-highlights-tabs,
goa-regional-explorer {
    display: block;
    position: relative;
    width: 100%;
    min-height: clamp(280px, 55vh, 450px);
}

    /* show loading block before the Stencil component is registered */
    goa-highlights-tabs:not(:defined)::after,
    goa-regional-explorer:not(:defined)::after {
        content: "Investment Data Hub loading...";
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: clamp(280px, 55vh, 450px);
        padding: 1.5rem;
        box-sizing: border-box;
        border-radius: 6px;
        color: #d2d2d2;
        font-size: clamp(1rem, 4vw, 1.8rem);
        font-weight: 500;
        letter-spacing: clamp(0.04em, 0.8vw, 0.12em);
        text-align: center;
        line-height: 1.3;
        background: linear-gradient( 90deg, #ffffff 20%, #f6f6f6 40%, #ffffff 60% );
        box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 4px;
        background-size: 400% 100%;
        animation: goa-loading-shimmer 1.4s ease infinite;
    }

    /* remove reserved loading height after component is registered */
    goa-highlights-tabs:defined,
    goa-regional-explorer:defined {
        min-height: 0;
    }

        goa-highlights-tabs:defined::after,
        goa-regional-explorer:defined::after {
            content: none;
        }

    /* hide raw config */
    goa-highlights-tabs config[slot="config"],
    goa-regional-explorer config[slot="config"] {
        display: none;
    }

@keyframes goa-loading-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}


@media (max-width: 480px) {
    goa-highlights-tabs:not(:defined)::after,
    goa-regional-explorer:not(:defined)::after {
        content: "IDH loading...";
    }
}





/* Desktop + tablet */
.addAdjustmentForBetaHeader {
    top: calc(var(--header-h, 66px) + 27px) !important;
}

/* Nest Hub Max: 1280 x 800 */
@@media (width: 1280px) and (height: 800px) {
    .addAdjustmentForBetaHeader {
        top: calc(var(--header-h, 66px) + 29px) !important;
    }
}
/* iPad Mini portrait: 768 x 1024 and newer 744 x 1133 */
@@media (min-width: 744px) and (max-width: 768px) and (min-height: 1024px) and (max-height: 1133px) and (orientation: portrait) {
    .addAdjustmentForBetaHeader {
        top: calc(var(--header-h, 66px) + 19px) !important;
    }
}

/* iPad Mini landscape */
@@media (min-width: 1024px) and (max-width: 1133px) and (min-height: 744px) and (max-height: 768px) and (orientation: landscape) {
    .addAdjustmentForBetaHeader {
        top: calc(var(--header-h, 66px) + 29px) !important;
    }
}

/* Mobile phones */
@@media (max-width: 767px) {
    .addAdjustmentForBetaHeader {
        top: calc(var(--header-h, 66px) + 50px) !important;
    }
}

/* iPhone Pro / small smartphones portrait */
@@media (max-width: 430px) and (orientation: portrait) {
    .addAdjustmentForBetaHeader {
        top: calc(var(--header-h, 66px) + 27px + env(safe-area-inset-top, 0px)) !important;
    }
}