.graph-section {
    --gemini-blue: #4fabff;
    --caption-color: rgba(255, 255, 255, 0.7);
    display: block;
    padding-top: var(--spacer-6);
    width: 100%;
    margin: 0 auto;
    max-width: 1200px
}

@media(min-width: 43.75rem) {
    .graph-section {
        padding-top:var(--spacer-5)
    }
}

.graph-section__heading {
    color: #fff;
    text-align: center;
    font-family: Google Sans Display,sans-serif;
    font-size: 2.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.34px;
    max-width: 91vw;
    margin-inline:auto;margin-bottom: 7.25rem
}

@media(min-width: 43.75rem) {
    .graph-section__heading {
        max-width:65.625rem;
        padding: 0 1.5625rem;
        font-size: 5rem
    }
}

.graph-section__graph-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 3.375rem;
    padding: 0 var(--spacer-grid-mobile);
    margin-bottom: 3.4375rem
}

@media(min-width: 43.75rem) {
    .graph-section__graph-container {
        padding:0 1.5625rem;
        margin: 0 auto 3.75rem
    }
}

.graph-section__graph {
    position: relative;
    width: 100%;
    height: 28.125rem;
    overflow: hidden
}

@media(min-width: 43.75rem) {
    .graph-section__graph {
        height:34.3125rem
    }
}

.graph-section__graph__sub-heading {
    color: #9aa0a6;
    font-family: Google Sans Text,sans-serif;
    font-size: .9375rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.15px;
    margin-top: -0.625rem
}

.graph-section__graph__sub-heading.gemini-top-heading {
    color: var(--gemini-blue);
    margin-bottom: -0.25rem;
    margin-top: 0
}

.graph-section__graph__sub-heading.sub-heading-link {
    position: relative;
    transition: color .3s ease-out;
    text-decoration: underline
}

.graph-section__graph__sub-heading.sub-heading-link:hover {
    color: #fff
}

.graph-section__graph__sub-heading.sub-heading-link:hover:before {
    transform: scaleX(1)
}

.graph-section__graph__gemini-value {
    position: absolute;
    top: 0;
    right: 0;
    width: -moz-fit-content;
    width: fit-content;
    display: flex;
    flex-direction: column;
    text-align: right
}

.graph-section__graph__gemini-value__value-wrapper {
    position: relative
}

.graph-section__graph__gemini-value__animated-value,.graph-section__graph__gemini-value__value {
    font-family: Google Sans Display,sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 3.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.04em;
    text-align: right;
    padding-left: .3125rem
}

@media(min-width: 43.75rem) {
    .graph-section__graph__gemini-value__animated-value,.graph-section__graph__gemini-value__value {
        font-size:5.25rem;
        padding-left: .625rem
    }
}

.graph-section__graph__gemini-value__value {
    color: rgba(0,0,0,0)
}

.graph-section__graph__gemini-value__animated-value {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, #bcc4d6 0%, #438aef 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: rgba(0,0,0,0)
}

.graph-section__graph__gemini-value__caption {
    margin-top: -1.4em
}

@media(min-width: 43.75rem) {
    .graph-section__graph__gemini-value__caption {
        margin-top:-1.7em
    }
}

.graph-section__graph__scale-value {
    --local-color: #9aa0a6;
    position: absolute;
    width: 100%;
    top: 4.375rem;
    left: 0;
    text-align: left
}

@media(min-width: 43.75rem) {
    .graph-section__graph__scale-value .sub-heading-link br {
        display:none
    }
}

@media(min-width: 43.75rem) {
    .graph-section__graph__scale-value {
        top:5.3125rem
    }
}

.graph-section__graph__scale-value a {
    text-decoration: none
}

.graph-section__graph__scale-value__value {
    color: var(--local-color);
    font-family: Google Sans Display,sans-serif;
    font-size: 2.375rem;
    font-style: normal;
    letter-spacing: -0.04em;
    font-weight: 400;
    line-height: 100%;
    padding-bottom: 1.25rem;
    border-bottom: dotted var(--local-color);
    margin-bottom: .625rem
}

.graph-section__graph__sota-value {
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: left
}

.graph-section__graph__sota-value__value,.graph-section__graph__sota-value__animated-value {
    font-family: Google Sans Display,sans-serif;
    font-variant-numeric: tabular-nums;
    font-size: 3.375rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.135rem;
    color: rgba(0,0,0,0);
    width: -moz-fit-content;
    width: fit-content;
    margin: 0
}

@media(min-width: 43.75rem) {
    .graph-section__graph__sota-value__value,.graph-section__graph__sota-value__animated-value {
        font-size:4.625rem;
        letter-spacing: -0.185rem
    }
}

.graph-section__graph__sota-value__animated-value {
    color: #fff;
    position: absolute;
    top: 0;
    left: 0
}

.graph-section__graph__sota-value:not(.graph-section__graph__sota-value__animated-value) {
    color: rgba(0,0,0,0)
}

.graph-section__graph__sota-value__paragraph {
    color: #fff;
    font-family: Google Sans Display,sans-serif;
    font-size: .75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.12px;
    max-width: 63vw;
    margin-top: .625rem
}

@media(min-width: 43.75rem) {
    .graph-section__graph__sota-value__paragraph {
        max-width:16.375rem
    }
}

.graph-section__graph-paragraph {
    color: #e8eaed;
    font-family: Google Sans Display,sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.28px;
    margin: 0 auto
}

@media(min-width: 43.75rem) {
    .graph-section__graph-paragraph {
        position:absolute;
        max-width: 22.5rem;
        right: 0;
        bottom: 0rem
    }
}

.graph-section__table-paragraph-container {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 4rem
}

@media(min-width: 43.75rem) {
    .graph-section__table-paragraph-container {
        margin-top:0
    }
}

.graph-section__table-paragraph-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 3.375rem
}

@media(min-width: 43.75rem) {
    .graph-section__table-paragraph-wrapper {
        display:flex;
        flex-direction: column;
        align-items: center;
        text-align: center
    }
}

.chart-animation,.chart-animation-inner {
    --chart-animation-width: 100%;
    position: absolute;
    height: 100%;
    width: var(--chart-animation-width);
    left: 0;
    top: 0;
    overflow: hidden
}

@media(max-width: 43.6875rem) {
    #chart {
        display:none
    }
}

@media(min-width: 43.75rem) {
    #chart-mobile {
        display:none
    }
}

@keyframes animateInChart {
    0% {
        width: 0;
        overflow: hidden
    }

    99.9% {
        overflow: hidden
    }

    100% {
        overflow: visible;
        width: var(--chart-animation-width)
    }
}

.chart-animation-inner {
    width: 100vw;
    max-width: 1200px;
    pointer-events: none
}

.chart-animation.in-view {
    animation-name: animateInChart;
    animation-duration: 1.5s;
    animation-fill-mode: forwards
}

@media(prefers-reduced-motion: reduce) {
    .chart-animation.in-view {
        animation: none !important;
        width: var(--chart-animation-width)
    }
}

.chart-wrapper {
    position: absolute;
    left: 0;
    top: 8px;
    width: -moz-fit-content;
    width: fit-content;
    height: auto
}

@media(min-width: 43.75rem) {
    .chart-wrapper {
        top:0
    }
}

.chart-wrapper svg {
    transform-origin: left top;
    width: 100%;
    height: auto
}

@keyframes lineUp {
    0% {
        transform: scaleX(0)
    }

    100% {
        transform: scaleX(1)
    }
}

#graph-line-wrapper .in-view.graph-line {
    animation-name: lineUp;
    animation-duration: 1.75s;
    animation-fill-mode: forwards
}

.graph-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: .125rem;
    background: linear-gradient(90deg, #fff 4.83%, #4fabff 88.58%);
    transform-origin: left
}

.point {
    position: absolute;
    display: none;
    width: .3125rem;
    height: .3125rem;
    border-radius: 50%;
    background-color: red;
    transform: translate(-50%, -50%)
}

.graph-paragraph-wrapper {
    display: block;
    padding: 5rem 2.25rem 5rem;
    margin-inline:auto}

@media(min-width: 43.75rem) {
    .graph-paragraph-wrapper {
        padding:5rem 2.25rem
    }
}

.graph-paragraph {
    display: block;
    color: #e8eaed;
    font-family: Google Sans Display,sans-serif;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.28px
}

@media(min-width: 43.75rem) {
    .graph-paragraph {
        font-size:1.5rem;
        max-width: 34.375rem
    }
}

.graph-button {
    display: flex;
    width: 20.75rem;
    margin-inline:auto;margin-top: 3.75rem;
    margin-bottom: 4.0625rem
}

@media(min-width: 43.75rem) {
    .graph-button {
        margin-top:3.75rem;
        margin-bottom: 5rem
    }
}