/* ---- header: style#__jsx-2025582589 ---- */
:root {
            --body-bg: rgb(255, 255, 255);
            --body-image: none;
            --body-bg-rgb: 255, 255, 255;
            --body-border: rgb(230, 230, 230);
            --body-primary-color: #1a1a1a;
            --body-secondary-color: #595959;
            --body-reaction-bg: rgb(242, 242, 242);
            --body-reaction-text-color: rgb(89, 89, 89);
            --body-toc-active-border: #737373;
            --body-toc-inactive-border: #f2f2f2;
            --body-toc-inactive-color: #595959;
            --body-toc-active-font-weight: 400;
            --body-table-border: rgb(204, 204, 204);
            --body-color: hsl(0, 0%, 0%);
            --footer-bg: rgb(255, 255, 255);
            --footer-image: none;
            --footer-border: rgb(230, 230, 230);
            --footer-color: hsl(211, 10%, 61%);
            --header-bg: rgb(95, 61, 200);
            --header-image: url(https://downloads.intercomcdn.com/i/o/249416/994f61450503cfdf1e9f098e/07fa007329ae7d80e7bad119ae6e34ce.png);
            --header-color: hsl(0, 0%, 100%);
            --collection-card-bg: rgb(255, 255, 255);
            --collection-card-image: none;
            --collection-card-color: hsl(255, 56%, 51%);
            --card-bg: rgb(255, 255, 255);
            --card-border-color: rgb(230, 230, 230);
            --card-border-inner-radius: 6px;
            --card-border-radius: 8px;
            --card-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --search-bar-border-radius: 10px;
            --search-bar-width: 100%;
            --ticket-blue-bg-color: #dce1f9;
            --ticket-blue-text-color: #334bfa;
            --ticket-green-bg-color: #d7efdc;
            --ticket-green-text-color: #0f7134;
            --ticket-orange-bg-color: #ffebdb;
            --ticket-orange-text-color: #b24d00;
            --ticket-red-bg-color: #ffdbdb;
            --ticket-red-text-color: #df2020;
            --header-height: 245px;
            --header-subheader-background-color: #000000;
            --header-subheader-font-color: #FFFFFF;
            --content-block-bg: rgb(255, 255, 255);
            --content-block-image: none;
            --content-block-color: hsl(0, 0%, 10%);
            --content-block-button-bg: rgb(51, 75, 250);
            --content-block-button-image: none;
            --content-block-button-color: hsl(0, 0%, 100%);
            --content-block-button-radius: 6px;
            --content-block-margin: 0;
            --content-block-width: auto;
            --primary-color: hsl(255, 56%, 51%);
            --primary-color-alpha-10: hsla(255, 56%, 51%, 0.1);
            --primary-color-alpha-60: hsla(255, 56%, 51%, 0.6);
            --text-on-primary-color: #ffffff
        }

/* ---- header: style#__jsx-1611979459 ---- */
:root {
            --font-family-primary: system-ui, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
        }

/* ---- header: style#__jsx-2466147061 ---- */
:root {
            --font-family-secondary: system-ui, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
        }
        
        html{
            scroll-behavior: smooth;
        }

/* ---- header: style#__jsx-cf6f0ea00fa5c760 ---- */
.fade-background.jsx-cf6f0ea00fa5c760 {
            background: radial-gradient(333.38%100%at 50%0%, rgba(var(--body-bg-rgb), 0)0%, rgba(var(--body-bg-rgb), .00925356)11.67%, rgba(var(--body-bg-rgb), .0337355)21.17%, rgba(var(--body-bg-rgb), .0718242)28.85%, rgba(var(--body-bg-rgb), .121898)35.03%, rgba(var(--body-bg-rgb), .182336)40.05%, rgba(var(--body-bg-rgb), .251516)44.25%, rgba(var(--body-bg-rgb), .327818)47.96%, rgba(var(--body-bg-rgb), .409618)51.51%, rgba(var(--body-bg-rgb), .495297)55.23%, rgba(var(--body-bg-rgb), .583232)59.47%, rgba(var(--body-bg-rgb), .671801)64.55%, rgba(var(--body-bg-rgb), .759385)70.81%, rgba(var(--body-bg-rgb), .84436)78.58%, rgba(var(--body-bg-rgb), .9551)88.2%, rgba(var(--body-bg-rgb), 1)100%), var(--header-image), var(--header-bg);
            background-size: cover;
            background-position-x: center
        }

/* ---- header: style#__jsx-27f84a20f81f6ce9 ---- */
.table-of-contents::-webkit-scrollbar {
            width: 8px
        }

        .table-of-contents::-webkit-scrollbar-thumb {
            background-color: #f2f2f2;
            border-radius: 8px
        }

/* ---- header: style#__jsx-62724fba150252e0 ---- */
.related_articles section a {
            color: initial
        }

/* ---- header: style#__jsx-7b3ac4f8d5337043 ---- */
.article_body a:not(.intercom-h2b-button) {
            color: var(--primary-color)
        }

        article a.intercom-h2b-button {
            background-color: var(--primary-color);
            border: 0
        }

        .zendesk-article table {
            overflow-x: scroll !important;
            display: block !important;
            height: auto !important
        }

        .intercom-interblocks-unordered-nested-list ul,
        .intercom-interblocks-ordered-nested-list ol {
            margin-top: 16px;
            margin-bottom: 16px
        }

        .intercom-interblocks-unordered-nested-list ul .intercom-interblocks-unordered-nested-list ul,
        .intercom-interblocks-unordered-nested-list ul .intercom-interblocks-ordered-nested-list ol,
        .intercom-interblocks-ordered-nested-list ol .intercom-interblocks-ordered-nested-list ol,
        .intercom-interblocks-ordered-nested-list ol .intercom-interblocks-unordered-nested-list ul {
            margin-top: 0;
            margin-bottom: 0
        }

        .intercom-interblocks-image a:focus {
            outline-offset: 3px
        }

/* ---- header: style#__jsx-33b64116cd598d32 ---- */
.table_of_contents.jsx-33b64116cd598d32 {
            max-width: 260px;
            min-width: 260px
        }

/* ---- header: style#toc-active-black-line ---- */
.article-content-row .table-of-contents section.toc-selected {
    border-left-color: #000 !important;
    border-inline-start-color: #000 !important;
}
.article-content-row .table-of-contents section.toc-selected > a {
    color: #000 !important;
    font-weight: 600 !important;
}
.article-content-row .table-of-contents section:not(.toc-selected) {
    border-left-color: #f2f2f2 !important;
    border-inline-start-color: #f2f2f2 !important;
}

/* ---- header: style#reference-page-layout ---- */
/* Reference-style article layout */
.row.article-content-row{
    width:960px !important;
    max-width:calc(100% - 40px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    column-gap:0 !important;
}

/* 9-column area: 720px */
.row.article-content-row > .col-12.col-sm-9{
    flex:0 0 75% !important;
    width:75% !important;
    max-width:75% !important;
    padding-left:0 !important;
    padding-right:0 !important;
}

/* Keep the actual readable article at ~640px like the screenshot */
.row.article-content-row > .col-12.col-sm-9 > .relative.z-3{
    width:640px !important;
    max-width:640px !important;
    margin:0 !important;
}

.row.article-content-row > .col-12.col-sm-9 .lg\:max-w-160{
    width:640px !important;
    max-width:640px !important;
}

/* 3-column sidebar: 240px, positioned beside the article */
.row.article-content-row > .col-12.col-sm-3{
    flex:0 0 25% !important;
    width:25% !important;
    max-width:25% !important;
    padding-left:20px !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
}

/* Reference-style TOC */
.row.article-content-row > .col-12.col-sm-3 > .page{
    position:sticky !important;
    top:90px !important;
    margin:0 !important;
    padding:0 !important;
    max-width:260px !important;
    max-height:calc(100vh - 110px) !important;
    overflow-y:auto !important;
}

.row.article-content-row .table_of_contents{
    max-width:260px !important;
    min-width:0 !important;
    width:100% !important;
}

/* Do not create extra vertical space around the article row */
.row.article-content-row{
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
}

/* Keep breadcrumb/content aligned to the same 640px reading column */
.row.article-content-row > .col-12.col-sm-9 > .relative.z-3{
    box-sizing:border-box !important;
}

@media (max-width: 767px){
    .row.article-content-row{
        width:100% !important;
        max-width:100% !important;
        display:block !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .row.article-content-row > .col-12.col-sm-9,
    .row.article-content-row > .col-12.col-sm-3{
        width:100% !important;
        max-width:100% !important;
        flex:none !important;
    }

    .row.article-content-row > .col-12.col-sm-9 > .relative.z-3,
    .row.article-content-row > .col-12.col-sm-9 .lg\:max-w-160{
        width:100% !important;
        max-width:100% !important;
    }

    .row.article-content-row > .col-12.col-sm-3{
        padding-left:0 !important;
    }

    .row.article-content-row > .col-12.col-sm-3 > .page{
        position:static !important;
        max-height:none !important;
    }
}

/* ---- header: style#remove-sidebar-horizontal-bar ---- */
/* Remove the unwanted horizontal scrollbar/bar under the sidebar.
   Keep vertical scrolling available when the TOC is taller than the viewport. */
.row.article-content-row > .col-12.col-sm-3 > .page{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    scrollbar-width:thin;
}

/* Prevent the TOC itself from creating horizontal overflow. */
.row.article-content-row .toc-wrap,
.row.article-content-row .toc-body,
.row.article-content-row .toc-list{
    max-width:100% !important;
    overflow-x:hidden !important;
}

/* ---- header: style#hero-to-article-gap-and-sidebar-rail ---- */
/* Gap between the hero and the article area — like the reference image. */
.row.article-content-row{
    padding-top:45px !important;
    margin-top:0 !important;
}

/* Reference-style sidebar rail:
   light gray continuous line, with only the selected item's segment black. */
.row.article-content-row .toc-body{
    position:relative !important;
    padding-left:0 !important;
}

.row.article-content-row .toc-rail{
    position:absolute !important;
    left:0 !important;
    top:30px !important;
    bottom:0 !important;
    width:2px !important;
    background:#e7e3da !important;
    border-radius:0 !important;
    pointer-events:none !important;
}

.row.article-content-row .toc-rail-fill{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    width:2px !important;
    height:0 !important;
    background:#111 !important;
    border-radius:0 !important;
    transition:height .2s ease, top .2s ease !important;
}

.row.article-content-row .toc-list{
    position:relative !important;
    margin:0 !important;
    padding:0 0 0 14px !important;
    list-style:none !important;
}

.row.article-content-row .toc-list li{
    position:relative !important;
    margin:0 !important;
    padding:0 !important;
}

.row.article-content-row .toc-list .toc-link{
    display:block !important;
    padding:9px 0 9px 0 !important;
    margin:0 !important;
    text-decoration:none !important;
    color:#8f8a82 !important;
    font-weight:400 !important;
}

.row.article-content-row .toc-list .toc-link.is-active{
    color:#111 !important;
    font-weight:600 !important;
}

/* Active black segment beside the selected link. */
.row.article-content-row .toc-list li::before{
    content:"" !important;
    position:absolute !important;
    left:-14px !important;
    top:0 !important;
    bottom:0 !important;
    width:2px !important;
    background:transparent !important;
}

.row.article-content-row .toc-list li:has(.toc-link.is-active)::before{
    background:#111 !important;
}

@supports not selector(:has(*)){
    .row.article-content-row .toc-list li.active-item::before{
        background:#111 !important;
    }
}

.row.article-content-row .toc-num{
    color:#b8b0a4 !important;
    margin-right:8px !important;
}

.row.article-content-row .toc-link.is-active .toc-num{
    color:#111 !important;
}

/* ---- header: style#cgfilms-final-navbar-hero-spacing ---- */
/* Final hero positioning: match the centered desktop/mobile composition. */
#hero .hero__content {
    position: absolute !important;
    top: 115px !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 20px !important;
    transform: none !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

#hero .hero__pulse-container {
    position: relative !important;
    width: 150px !important;
    height: 90px !important;
    margin: 0 auto 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#hero .hero__pulse-ring {
    display: none !important;
}

#hero .hero__logo-container {
    position: static !important;
    width: auto !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#hero .hero__logo-img {
    display: block !important;
    width: 145px !important;
    height: auto !important;
    max-width: 145px !important;
    margin: 0 auto !important;
}

#hero .hero__title {
    margin: 0 auto !important;
    max-width: 760px !important;
    text-align: center !important;
    line-height: 0.98 !important;
}

#hero .hero__subtitle {
    max-width: 720px !important;
    margin: 28px auto 0 !important;
    text-align: center !important;
}

#hero .hero__tagline {
    margin: 18px auto 0 !important;
    text-align: center !important;
}

#hero .hero__cta-group {
    margin: 34px auto 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
}

@media (max-width: 767px) {
    #hero .hero__content {
        top: 95px !important;
        padding: 0 16px !important;
    }

    #hero .hero__pulse-container {
        width: 120px !important;
        height: 70px !important;
        margin-bottom: 18px !important;
    }

    #hero .hero__logo-img {
        width: 115px !important;
        max-width: 115px !important;
    }

    #hero .hero__subtitle {
        max-width: 95% !important;
        margin-top: 22px !important;
    }

    #hero .hero__cta-group {
        flex-wrap: wrap !important;
        margin-top: 28px !important;
    }
}

/* =========================================================
   CG FILMS HERO - FINAL LAYOUT FIX
   Target: logo -> heading -> subtitle -> tagline -> buttons
   centered vertically without clipping at the top.
   ========================================================= */

#hero {
    position: relative !important;
    min-height: 100vh !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/* Keep the complete hero content in normal document flow. */
#hero .hero__content {
    position: absolute !important;
    top: 115px !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;

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

    margin: 0 !important;
    padding: 0 20px 40px !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    text-align: center !important;
    box-sizing: border-box !important;

    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;

    z-index: 20 !important;
}

/* IMPORTANT: remove any old absolute positioning/transform
   from individual hero elements. */
#hero .hero__content > * {
    position: static !important;
    float: none !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    scale: none !important;
}

/* Logo area */
#hero .hero__pulse-container {
    position: static !important;
    width: 150px !important;
    height: auto !important;
    min-height: 80px !important;

    margin: 0 auto 25px !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#hero .hero__pulse-ring {
    display: none !important;
}

#hero .hero__logo-container {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#hero .hero__logo-img {
    position: static !important;
    display: block !important;

    width: 135px !important;
    max-width: 135px !important;
    height: auto !important;

    margin: 0 auto !important;
    padding: 0 !important;
}

/* Heading */
#hero .hero__title {
    position: static !important;

    width: 100% !important;
    max-width: 780px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
    line-height: 1.02 !important;
    font-size: clamp(48px, 5vw, 72px) !important;
}

/* Subtitle */
#hero .hero__subtitle {
    position: static !important;

    width: 100% !important;
    max-width: 760px !important;

    margin: 26px auto 0 !important;
    padding: 0 !important;

    text-align: center !important;
    line-height: 1.55 !important;
    font-size: 20px !important;
}

/* Tagline */
#hero .hero__tagline {
    position: static !important;

    width: 100% !important;
    max-width: 600px !important;

    margin: 17px auto 0 !important;
    padding: 0 !important;

    text-align: center !important;
    line-height: 1.65 !important;
}

/* Buttons */
#hero .hero__cta-group {
    position: static !important;

    width: auto !important;
    margin: 30px auto 0 !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;

    transform: none !important;
}

@media (max-width: 767px) {
    #hero .hero__content {
        top: 85px !important;
        padding: 0 16px 30px !important;
    }

    #hero .hero__pulse-container {
        width: 120px !important;
        min-height: 65px !important;
        margin-bottom: 18px !important;
    }

    #hero .hero__logo-img {
        width: 110px !important;
        max-width: 110px !important;
    }

    #hero .hero__title {
        max-width: 95% !important;
        font-size: clamp(42px, 12vw, 58px) !important;
        line-height: 1.02 !important;
    }

    #hero .hero__subtitle {
        max-width: 95% !important;
        margin-top: 20px !important;
        font-size: 17px !important;
    }

    #hero .hero__tagline {
        margin-top: 15px !important;
        font-size: 14px !important;
    }

    #hero .hero__cta-group {
        flex-wrap: wrap !important;
        margin-top: 25px !important;
    }
}

/* ---- footer: style#intercom-lightweight-app-style ---- */
@keyframes intercom-lightweight-app-launcher {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes intercom-lightweight-app-gradient {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes intercom-lightweight-app-messenger {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    40% {
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

.intercom-lightweight-app {
    position: fixed;
    z-index: 2147483001;
    width: 0;
    height: 0;
    font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.intercom-lightweight-app-gradient {
    position: fixed;
    z-index: 2147483002;
    width: 500px;
    height: 500px;
    bottom: 0;
    right: 0;
    pointer-events: none;
    background: radial-gradient(ellipse at bottom right,
            rgba(29, 39, 54, 0.16) 0%,
            rgba(29, 39, 54, 0) 72%);
    animation: intercom-lightweight-app-gradient 200ms ease-out;
}

.intercom-lightweight-app-launcher {
    position: fixed;
    z-index: 2147483003;
    padding: 0 !important;
    margin: 0 !important;
    border: none;
    bottom: 20px;
    right: 20px;
    max-width: 48px;
    width: 48px;
    max-height: 48px;
    height: 48px;
    border-radius: 50%;
    background: #5F3DC8;
    cursor: pointer;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.06), 0 2px 32px 0 rgba(0, 0, 0, 0.16);
    transition: transform 167ms cubic-bezier(0.33, 0.00, 0.00, 1.00);
    box-sizing: content-box;
}


.intercom-lightweight-app-launcher:hover {
    transition: transform 250ms cubic-bezier(0.33, 0.00, 0.00, 1.00);
    transform: scale(1.1)
}

.intercom-lightweight-app-launcher:active {
    transform: scale(0.85);
    transition: transform 134ms cubic-bezier(0.45, 0, 0.2, 1);
}


.intercom-lightweight-app-launcher:focus {
    outline: none;


}

.intercom-lightweight-app-launcher-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    transition: transform 100ms linear, opacity 80ms linear;
}

.intercom-lightweight-app-launcher-icon-open {

    opacity: 1;
    transform: rotate(0deg) scale(1);

}

.intercom-lightweight-app-launcher-icon-open svg {
    width: 24px;
    height: 24px;
}

.intercom-lightweight-app-launcher-icon-open svg path {
    fill: rgb(255, 255, 255);
}

.intercom-lightweight-app-launcher-icon-self-serve {

    opacity: 1;
    transform: rotate(0deg) scale(1);

}

.intercom-lightweight-app-launcher-icon-self-serve svg {
    height: 44px;
}

.intercom-lightweight-app-launcher-icon-self-serve svg path {
    fill: rgb(255, 255, 255);
}

.intercom-lightweight-app-launcher-custom-icon-open {
    max-height: 24px;
    max-width: 24px;


    opacity: 1;
    transform: rotate(0deg) scale(1);

}

.intercom-lightweight-app-launcher-icon-minimize {

    opacity: 0;
    transform: rotate(-60deg) scale(0);

}

.intercom-lightweight-app-launcher-icon-minimize svg path {
    fill: rgb(255, 255, 255);
}

/* Extended launcher styles */
.intercom-lightweight-app-launcher.intercom-launcher-extended {
    width: calc(180px - 30px);
    max-width: calc(180px - 30px);
    height: calc(45px - 26px);
    max-height: calc(45px - 26px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 16px 12px 12px !important;
    gap: 6px;
    /* Use theme background instead of hardcoded gradient */
    background: #5F3DC8;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0px -2px 50px rgba(0, 0, 0, 0.1);

}

.intercom-lightweight-app-launcher.intercom-launcher-extended .intercom-lightweight-app-launcher-icon {
    position: relative;
    width: 24px;
    height: 24px;
}

.intercom-lightweight-app-launcher-text {
    /* Match text color with launcher icon */
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    opacity: 1;
    transition: opacity 80ms linear;
}

.intercom-lightweight-app-messenger {
    position: fixed;
    z-index: 2147483003;
    overflow: hidden;
    background-color: #ffffff;
    animation: intercom-lightweight-app-messenger 250ms cubic-bezier(0, 1, 1, 1);
    transform-origin: bottom right;


    width: 400px;
    height: calc(100% - 104px);
    max-height: 704px;
    min-height: 250px;
    right: 20px;
    bottom: 84px;
    box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);


    border-radius: 24px;
}

.intercom-lightweight-app-messenger-header {
    height: 64px;
    border-bottom: none;
    background: #ffffff;
}

.intercom-lightweight-app-messenger-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: #ffffff;
    font-size: 14px;
    line-height: 21px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.05);
}

@media print {
    .intercom-lightweight-app {
        display: none;
    }
}


/* ============================================================
   Account page – styles for Concrete Content blocks
   ============================================================ */

/* Make the main content area inherit the article styles */
.article_body,
.article_body .ccm-block-content,
.article_body .ccm-block-html {
    font-family: var(--font-body, "Inter", system-ui, sans-serif);
    color: var(--ink-soft, #4A4239);
    font-size: 15.5px;
    line-height: 1.65;
}

/* Headings */
.article_body h1 {
    font-family: var(--font-display, "Source Serif 4", Georgia, serif);
    font-weight: 700;
    font-size: 32px;
    line-height: 1.12;
    margin: 0 0 16px;
    color: var(--ink, #241F1A);
}

.article_body h2 {
    font-family: var(--font-display, "Source Serif 4", Georgia, serif);
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    margin: 40px 0 16px;
    color: var(--ink, #241F1A);
    padding-top: 24px;
    border-top: 3px solid var(--body-border);
}

/* Paragraphs */
.article_body p {
    margin: 0 0 16px;
    color: var(--ink-soft, #4A4239);
}

/* Lists */
.article_body ol,
.article_body ul {
    margin: 0 0 20px 1.4em;
    padding: 0;
}

.article_body ol {
    padding-left: 10px;
    list-style-type: decimal !important;
}

.article_body li {
    margin-bottom: 6px;
}

/* Links */
.article_body a {
    color: var(--copper, #B4622A);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article_body a:hover {
    color: var(--ink, #241F1A);
}

/* Callout boxes (yellow & blue) */
.article_body div[style*="background:#fff8e1"],
.article_body div[style*="background:#e8eaf6"],
.article_body .callout-yellow,
.article_body .callout-blue {
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin: 24px 0 !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

.article_body div[style*="background:#fff8e1"],
.article_body .callout-yellow {
    background: #fff8e1 !important;
    border-left-color: #fbc916 !important;
}

.article_body div[style*="background:#e8eaf6"],
.article_body .callout-blue {
    background: #e8eaf6 !important;
    border-left-color: #3f51b5 !important;
}

/* Images inside the article */
.article_body img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    margin: 1.5rem 0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Related Articles */
.related-articles-section h3 {
    font-family: var(--font-display, Georgia, serif);
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.related-articles-section ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--line, #E6DFD1);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.related-articles-section li {
    border-bottom: 1px solid var(--line, #E6DFD1) !important;
    margin: 0 !important;
}

.related-articles-section li:last-child {
    border-bottom: none !important;
}

.related-articles-section a {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px !important;
    text-decoration: none !important;
    color: var(--ink, #241F1A) !important;
    transition: background 0.15s ease;
}

.related-articles-section a:hover {
    background: #f8f5ef !important;
}

.related-articles-section a::after {
    content: "›";
    font-size: 18px;
    color: var(--muted, #9C9285);
}

/* Horizontal rules */
.article_body hr {
    display: block;
    height: 3px;
    border-radius: 3px;
    background: var(--body-border);
    border: none;
    margin: 1em 0;
}

/* Push the whole article row below the fixed navbar */
.row.article-content-row {
    padding-top: 100px !important;   /* adjust this value if needed */
    margin-top: 0 !important;
}

/* Make the TOC start a bit lower and stay sticky under the nav */
.row.article-content-row > .col-12.col-sm-3 > .page,
.row.article-content-row .toc-wrap {
    position: sticky !important;
    top: 100px !important;           /* must be >= navbar height + some gap */
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* On mobile keep normal flow */
@media (max-width: 767px) {
    .row.article-content-row {
        padding-top: 80px !important;
    }
    .row.article-content-row .toc-wrap {
        position: static !important;
        top: auto !important;
    }
}

/* Push the whole article row below the fixed navbar */
.row.article-content-row {
    padding-top: 100px !important;   /* adjust this value if needed */
    margin-top: 0 !important;
}

/* Make the TOC start a bit lower and stay sticky under the nav */
.row.article-content-row > .col-12.col-sm-3 > .page,
.row.article-content-row .toc-wrap {
    position: sticky !important;
    top: 100px !important;           /* must be >= navbar height + some gap */
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* On mobile keep normal flow */
@media (max-width: 767px) {
    .row.article-content-row {
        padding-top: 80px !important;
    }
    .row.article-content-row .toc-wrap {
        position: static !important;
        top: auto !important;
    }
}


/* ===== Account Footer – match static design ===== */

/*#footer {*/
/*    background: #ffffff !important;*/
/*    padding: 48px 0 40px !important;*/
/*    border-top: 1px solid #eee;*/
/*}*/

/*#footer .text-center {*/
/*    text-align: center !important;*/
/*}*/

/* Make the Account Footer logo readable (match static contrast filter) */
/*#footer img,*/
/*#footer .ccm-image-block img,*/
/*#footer picture img {*/
/*    max-height: 32px !important;*/
/*    width: auto !important;*/
/*    display: block !important;*/
/*    margin: 0 auto 24px !important;*/
    
    /* This is the key part – similar to the static site's contrast-80 */
/*    filter: contrast(0.75) brightness(0.85) !important;*/
/*    opacity: 0.9;*/
/*}*/

/* Links row */
/*#footer ul {*/
/*    display: flex !important;*/
/*    flex-wrap: wrap !important;*/
/*    justify-content: center !important;*/
/*    gap: 8px 24px !important;*/
/*    margin: 0 0 20px 0 !important;*/
/*    padding: 0 !important;*/
/*    list-style: none !important;*/
/*}*/

/*#footer ul li {*/
/*    list-style: none !important;*/
/*    margin: 0 !important;*/
/*}*/

/*#footer ul a {*/
/*    color: #909aa5 !important;*/
/*    font-size: 14px !important;*/
/*    text-decoration: none !important;*/
/*    transition: color 0.2s ease;*/
/*}*/

/*#footer ul a:hover {*/
/*    color: #5f3dc8 !important;*/
/*}*/

/* Social icons */
/*#footer .flex.flex-wrap.items-center {*/
/*    margin-top: 8px !important;*/
/*}*/

/*#footer svg {*/
/*    width: 16px !important;*/
/*    height: 16px !important;*/
/*    fill: #909aa5 !important;*/
/*    transition: fill 0.2s ease;*/
/*}*/

/*#footer a:hover svg {*/
/*    fill: #5f3dc8 !important;*/
/*}*/



/* ============================================================
   MOBILE FIX – Account page (prevent horizontal scroll)
   ============================================================ */
@media (max-width: 900px) {

    /* Force the whole row to be full width */
    .row.article-content-row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        display: block !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Left column */
    .row.article-content-row > .col-12.col-sm-9 {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* The inner content container that was locked to 640px */
    .row.article-content-row > .col-12.col-sm-9 > .relative.z-3,
    .row.article-content-row > .col-12.col-sm-9 .lg\:max-w-160,
    .row.article-content-row .relative.z-3 {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Right column (TOC) */
    .row.article-content-row > .col-12.col-sm-3 {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 32px !important;
    }

    /* Prevent any child from causing horizontal scroll */
    .article_body,
    .article_body img,
    .article_body * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Breadcrumb */
    .row.article-content-row nav[aria-label="Breadcrumb"] {
        font-size: 13px !important;
        padding-right: 0 !important;
    }

    /* Make sure the body itself doesn't scroll horizontally */
    body, html, #app, .ccm-page {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

@media (max-width: 900px) {
    .toc-body {
        display: none;
    }
    .toc-body.is-open {
        display: block;
    }
}

/* Desktop: Article on left, TOC on right */
@media (min-width: 768px) {
    .article-content-row {
        display: flex !important;
        flex-direction: row !important;
    }
    .toc-column {
        order: 2 !important;          /* TOC goes to the right */
    }
    .content-column {
        order: 1 !important;          /* Content stays on the left */
    }
}

/* Mobile: TOC (Contents) first, then article */
@media (max-width: 767px) {
    .article-content-row {
        display: flex !important;
        flex-direction: column !important;
    }
    .toc-column {
        order: 1 !important;          /* Contents appears first */
        margin-bottom: 24px;
    }
    .content-column {
        order: 2 !important;          /* Article comes after */
    }
}

/* Align the breadcrumb + article header with the article-content-row layout */
.article-page-wrapper .article-top {
    width: 960px !important;
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 100px !important;   /* same offset used for .row.article-content-row */
    box-sizing: border-box !important;
}

/* Since article-content-row itself already has padding-top:100px,
   remove the duplicate space it would otherwise add below article-top */
.article-page-wrapper .article-top + .row.article-content-row {
    padding-top: 30px !important; /* just the gap between header and article body, e.g. your existing hero-to-article-gap value */
}

@media (max-width: 767px) {
    .article-page-wrapper .article-top {
        padding-top: 80px !important; /* matches your existing mobile row padding-top */
    }
    
    .article-page-wrapper .article-top + .row.article-content-row {
        padding-top: 10px !important; 
    }
}

@media (max-width: 900px) {
    .navbar,
    #nav {
        position: relative !important;
    }

    .navbar__toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    #nav-links,
    .navbar__nav {
        display: none !important;
    }

    #nav-links.is-open,
    .navbar__nav.is-open {
        display: flex !important;
        flex-direction: column !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: #fff !important;
        box-shadow: 0 8px 20px rgba(0,0,0,0.1) !important;
        z-index: 999 !important;
        box-sizing: border-box !important;
    }
}

@media (min-width: 901px) {
    .navbar__toggle {
        display: none !important;
    }

    #nav-links,
    .navbar__nav {
        display: flex !important;
        position: static !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
}

@media (max-width: 768px) {
    .navbar__nav .navbar__link {
        display: block;
        font-size: 1rem;
        font-weight: var(--fw-semibold);
        padding: 0.7rem 1.3rem;
        color: var(--text-primary);
        transform: translateY(30px);
        animation: none;
        opacity: 1;
        text-align: center;
    }
}

/* Optional: animate the hamburger into an X when open */
.navbar__toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.navbar__toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.navbar__toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}



.intercom-reaction-picker{
    margin-bottom: 3em;
}