:root {
    --wrapper-width: 1400px;
    --edge-padding: 68px;
    --aside-border-radius: 52px;

    --spring: linear(
        0,
        0.012 0.7%,
        0.046 1.4%,
        0.193 3%,
        0.928 8.1%,
        1.179 10.2%,
        1.325 12.1%,
        1.369 13.1%,
        1.389 14.1%,
        1.391 14.8%,
        1.382 15.6%,
        1.328 17.3%,
        1.022 22.8%,
        0.926 24.9%,
        0.872 26.7%,
        0.848 28.6%,
        0.849 29.9%,
        0.864 31.4%,
        1.02 38.9%,
        1.047 41%,
        1.059 43.1%,
        1.053 46%,
        0.993 53.4%,
        0.977 57.5%,
        1.009 71.8%,
        0.997 86.1%,
        1
    );

    --spring-slight: linear(
        0,
        0.01 0.9%,
        0.037 1.8%,
        0.155 3.9%,
        0.793 11.2%,
        1.015 14.3%,
        1.156 17.3%,
        1.198 18.8%,
        1.224 20.4%,
        1.231 22.4%,
        1.213 24.7%,
        1.176 27%,
        1.006 35.6%,
        0.968 38.8%,
        0.949 42.1%,
        0.951 46.7%,
        0.997 57.3%,
        1.011 63.5%,
        0.998 84.2%,
        1
    );
}

:root {
    --color-red: #e81d62;
    --color-yellow: #ffb121;
    --color-yellow-tint: #ffefd3;
    --color-green: #9aa378;
    --color-brand: #07c4d2;
    --color-blue: #2b6eba;
    --color-gray: #363f45;
    --color-green-c: #8d9869;
    --color-brand-c: #00a1b3;
    --color-dark-c: #0093a9;
}

:root {
    --col1: calc((100% / 12) * 1);
    --col2: calc((100% / 12) * 2);
    --col3: calc((100% / 12) * 3);
    --col4: calc((100% / 12) * 4);
    --col5: calc((100% / 12) * 5);
    --col6: calc((100% / 12) * 6);
    --col7: calc((100% / 12) * 7);
    --col8: calc((100% / 12) * 8);
    --col9: calc((100% / 12) * 9);
    --col10: calc((100% / 12) * 10);
    --col11: calc((100% / 12) * 11);
    --col12: calc((100% / 12) * 12);
    --col1px: calc((var(--wrapper-width) / 12) * 1);
    --col2px: calc((var(--wrapper-width) / 12) * 2);
    --col3px: calc((var(--wrapper-width) / 12) * 3);
    --col4px: calc((var(--wrapper-width) / 12) * 4);
    --col5px: calc((var(--wrapper-width) / 12) * 5);
    --col6px: calc((var(--wrapper-width) / 12) * 6);
    --col7px: calc((var(--wrapper-width) / 12) * 7);
    --col8px: calc((var(--wrapper-width) / 12) * 8);
    --col9px: calc((var(--wrapper-width) / 12) * 9);
    --col10px: calc((var(--wrapper-width) / 12) * 10);
    --col11px: calc((var(--wrapper-width) / 12) * 11);
    --col12px: calc((var(--wrapper-width) / 12) * 12);
}

.wrapper {
    position: relative;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    width: var(--wrapper-width);
}

.col1 {
    width: var(--col1);
}

.col2 {
    width: var(--col2);
}

.col3 {
    width: var(--col3);
}

.col4 {
    width: var(--col4);
}

.col5 {
    width: var(--col5);
}

.col6 {
    width: var(--col6);
}

.col7 {
    width: var(--col7);
}

.col8 {
    width: var(--col8);
}

.col9 {
    width: var(--col9);
}

.col10 {
    width: var(--col10);
}

.col11 {
    width: var(--col11);
}

.col12 {
    width: var(--col12);
}

.col1px {
    width: var(--col1px);
}

.col2px {
    width: var(--col2px);
}

.col3px {
    width: var(--col3px);
}

.col4px {
    width: var(--col4px);
}

.col5px {
    width: var(--col5px);
}

.col6px {
    width: var(--col6px);
}

.col7px {
    width: var(--col7px);
}

.col8px {
    width: var(--col8px);
}

.col9px {
    width: var(--col9px);
}

.col10px {
    width: var(--col10px);
}

.col11px {
    width: var(--col11px);
}

.col12px {
    width: var(--col12px);
}

.alignRight {
    text-align: right;
    justify-content: flex-end;
}

.colAlignRight {
    justify-content: flex-end;
    margin-left: auto !important;
}

.alignCenter {
    text-align: center;
    justify-content: center;
}

.colAlignCenter {
    display: flex !important;
    justify-content: center !important;
}

.pullRight {
    margin-left: auto;
}

/* ubuntu-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 400;
    src: url("fonts/ubuntu-v21-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ubuntu-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Ubuntu";
    font-style: normal;
    font-weight: 500;
    src: url("fonts/ubuntu-v21-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* prosto-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: "Prosto";
    font-style: normal;
    font-weight: 300;
    src: url("fonts/prosto-sans-cond-light.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@font-face {
    font-family: "icomoon";
    src: url("fonts/icomoon.eot?yzugj4");
    src:
        url("fonts/icomoon.eot?yzugj4#iefix") format("embedded-opentype"),
        url("fonts/icomoon.ttf?yzugj4") format("truetype"),
        url("fonts/icomoon.woff?yzugj4") format("woff"),
        url("fonts/icomoon.svg?yzugj4#icomoon") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: "icomoon" !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-adult:before {
    content: "\e900";
}
.icon-dots:before {
    content: "\e901";
}
.icon-external:before {
    content: "\e902";
}
.icon-smile:before {
    content: "\e903";
}
.icon-substances:before {
    content: "\e904";
}
.icon-walk:before {
    content: "\e905";
}

/*
    Light 300
    Regular 400
    Medium 500
    SemiBold 600
    Bold 700
    ExtraBold 800
*/

:root {
    --font-nav: 500 18px/32px "Ubuntu", sans-serif;
    --font-h1: 500 68px/70px "Ubuntu", sans-serif;
    --font-intro: 300 25px/40px "Prosto", sans-serif;
    --font-button: 500 24px/35px "Ubuntu", sans-serif;
    --font-bold-header: 500 22px/32px "Ubuntu", sans-serif;
    --font-text: 300 20px/30px "Prosto", sans-serif;
    --font-quote: 400 44px/54px "Ubuntu", sans-serif;
    --font-cta: 500 44px/54px "Ubuntu", sans-serif;
    --font-copyright: 400 13px/13px "Ubuntu", sans-serif;
}
@media screen and (max-width: 1900px) {
    :root {
    }
}
@media screen and (max-width: 1600px) {
    :root {
    }
}

@media screen and (max-width: 1280px) {
    :root {
    }
}

@media screen and (max-width: 760px) {
    :root {
    }
}

:root {
    dynamic-range-limit: standard;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

*:not(dialog) {
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

body {
    -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

html,
body {
    overflow-x: hidden;
}

body {
    font: var(--font-text);
    color: var(--color-gray);
}

/* Ambulant overwrites. */
body.is-ambulant {
    .header-image-wrapper .blob-background {
        fill: var(--color-brand-c);
    }

    [data-ambulant-color] {
        background-color: var(--color-yellow-tint);

        h2,
        h3,
        p,
        a {
            color: var(--color-text);

            &:hover {
                color: inherit;
            }
        }

        .header-inner {
            padding-bottom: 200px;
        }
    }
}

/* Global utilities. */
h1 {
    font: var(--font-h1);
    color: var(--color-brand-c);
}

h2 {
    font: var(--font-bold-header);
}

.blob-frame {
    position: relative;

    display: flex;
    width: 100%;
    height: auto;
    overflow: inherit;
}
.blob-small {
    max-width: 640px;
}

.blob-flip {
    /* Flip the whole SVG, then counter-flip the image back to normal. */
    transform: scaleX(-1);
}
.blob-flip .blob-img {
    transform: scaleX(-1);
}

.blob-bg-shift .blob-background {
    /* Moves the background of the blob to the top right. */
    translate: -8% -12%;
    display: flex;
}

.blob-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.site-switch-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;

    font: var(--font-nav);
    color: #fff;
    background-color: var(--color-brand-c);
    padding-block: 16px;
}

.site-switch-container p {
    font-size: 19px;
}

.site-toggle-wrapper {
    display: block;
    width: 52px;
    height: 28px;
    background-color: #fff;
    border-radius: 100vw;
    outline: 5px solid white;
}

.site-toggle-wrapper::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    outline: 5px solid white;
    background-color: var(--color-brand-c);
    border-radius: 100vw;

    /* Can be removed when the toggle is functional, just for visual testing. */
    transition: translate 0.1s ease;
}

.site-toggle-wrapper.active::before {
    translate: 24px 0;
}

.pill-button {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 28px;

    font: var(--font-button);
    text-decoration: none;

    color: inherit;
    background: none;

    border-radius: 100vw;

    margin-top: 48px;
    padding: 16px 28px;

    border: 1.5px solid var(--color-gray);

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.pill-button.filled {
    border: none;
    background-color: #fff;
    color: var(--color-text);
}

.pill-button.small {
    font: var(--font-bold-header);
    padding: 10px 28px;
}

.pill-button.smaller {
    font: var(--font-nav);
    padding: 10px 28px;
}

.pill-button span {
    text-wrap: nowrap;
}

.pill-button .button-hook {
    overflow: inherit;
    width: 30px;
    height: 30px;
}

.pill-button:hover .button-hook-l {
    rotate: 30deg;
    scale: 1.2;
}

.pill-button:hover .button-hook-r {
    rotate: -30deg;
    scale: 1.2;
}

.pill-button:hover {
    background-color: var(--color-yellow);
    border-color: transparent;
}

.button-hook-l,
.button-hook-r {
    transition:
        rotate 1.2s var(--spring),
        scale 0.2s ease;
}

.button-hook-l {
    transform-origin: 50% 30%;
}

.button-hook-r {
    transform-origin: 50% 30%;
}

/* Shared page components. */
.top-nav {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    gap: 48px;

    padding-inline: var(--edge-padding);
    padding-block: 24px;
}

.top-nav a {
    color: var(--color-text);
    font: var(--font-nav);
    text-decoration: none;
}

.top-nav a.active {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 2px;
}

.logo-wrapper {
    display: flex;
    flex-grow: 1;

    margin-right: auto;
}

.logo {
    height: 68px;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 64px;

    width: 100%;
    max-width: 1700px;

    margin-top: 90px;
    margin-inline: auto;
}

.header-image-wrapper {
    position: relative;
    width: 70%;
}

.header-image-wrapper .blob-frame {
    translate: -5% 0%;
}

.header-image-wrapper.hook::before {
    display: inline-block;
    content: "";
    position: absolute;
    width: 70%;
    aspect-ratio: 105 / 127; /* Don't ask... */
    background-image: url("/img/hook-header.svg");
    background-size: cover;
    translate: -55% -50%;
    left: 50%;
    top: 50%;
    z-index: 1;
}

.header-text-wrapper {
    display: flex;
    flex-direction: column;
    width: 30%;
    height: 100%;
}

.header-inner.sub-page .header-image-wrapper {
    width: 60%;
}

.header-inner.sub-page .header-text-wrapper {
    width: 50%;
}

.header-site-selector {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    color: var(--color-brand-c);
    font: var(--font-nav);
}

.header-site-selector a {
    position: relative;
    text-decoration: none !important;
    padding-bottom: 7px;
}

.header-site-selector .selected::before {
    content: "";
    position: absolute;
    bottom: 6px; /* Position the line */
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-brand-c);
}

.header-site-selector .selected::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: 50%;

    width: 12px;
    height: 12px;

    border-right: 2px solid var(--color-brand-c);
    border-bottom: 2px solid var(--color-brand-c);

    background-color: #fff;

    transform: translateX(-50%) rotate(45deg);
}

body.is-ambulant .header-site-selector .selected::after {
    background-color: var(--color-yellow-tint);
}

.header-site-selector .icon-external {
    display: inline-flex;
    translate: 3px 3px;

    font-size: 22px;
}

.header-pre-title {
    font: var(--font-nav);
    font-size: 22px;

    margin-bottom: 14px;
}

.intro {
    font: var(--font-intro);
    margin-top: 24px;
}

.quote-container {
    margin-top: 180px;
}

.quote-inner {
    display: flex;
    gap: 64px;
    translate: -3.5% 0%;
}

.quote-content {
    margin-top: 20px;
}

.quote-image {
    width: 190px;
    aspect-ratio: 1/1;
}

.quote-text {
    font: var(--font-quote);
    color: var(--color-brand-c);
}

.quote-author {
    margin-top: 8px;
}

.quote-container.blue .quote-inner {
    background-color: var(--color-brand-c);
    color: #fff;

    padding-left: 64px;
    padding-block: 48px;
    border-radius: var(--aside-border-radius) 0px 0px var(--aside-border-radius);

    position: relative;
    z-index: 1;
}

.quote-container.blue .quote-text {
    color: #fff;
}

.quote-container.blue .quote-image {
    margin-left: -154px;
}

.quote-container.blue .quote-inner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 100vw;
    background-color: inherit;
    z-index: -1;
}

.image-text-section {
    display: flex;
    align-items: center;
    margin-top: 250px;
    gap: 64px;
}

.image-text-section.full-width svg {
    scale: 1.3;
}

.image-text-section.full-width:not(.flipped) .section-content-wrapper {
    margin-left: auto;
}

.image-text-section.full-width.flipped .section-content-wrapper {
    margin-right: auto;
}

.section-content-wrapper ul {
    padding: 0;
    padding-left: 10px;
}

.section-content-wrapper li {
    list-style-position: outside;
    list-style-type: ">";
    padding-left: 8px;
}
.section-content-wrapper.checkmarks li {
    list-style-type: "";
    padding-left:0;
}
    .section-content-wrapper .checkmarks {
        padding: 0;
    }

.section-content-wrapper .checkmarks li {
    display: flex;
    list-style: none;
    padding: 0;
}

.checkmarks li::before {
    content: "";
    display: inline-block;
    height: 20px;
    width: 20px;
    margin-right: 12px;
    margin-top: 6px;
    background-image: url("/img/checkmark.svg");
    background-repeat: no-repeat;
}

.team-quote {
    margin-top: 32px;
    color: var(--color-brand-c);
}

.team-contact-actions {
    display: flex;
    gap: 24px;
    margin-top: 24px;
}

.team-contact-column {
    display: flex;
    flex-direction: column;

    align-items: center;
    gap: 24px;
}

.image-text-section.flipped {
    flex-direction: row-reverse;
}

.image-text-section.flipped svg {
    margin-left: auto;
}

.usp-section {
    margin-top: 300px;
    padding-inline: var(--col1);
}

.usp-container {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    margin-top: 64px;
}

.usp-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.usp-icon {
    font-size: 151px;
    color: var(--color-brand);
    vertical-align: bottom;
}

.steps-container {
    counter-reset: step-counter;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 240px;
}

.step-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--color-yellow-tint);
    counter-increment: step-counter;
    border-radius: var(--aside-border-radius);
    padding: 112px 64px;

    /* --- JS Animation Base Styles --- */
    opacity: 0;
    transform: translateY(20px); /* Slight drop for a nice pop-in effect */
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}

/* JS will add this class when the card enters the viewport */
.step-wrapper.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.step-wrapper h2 {
    font: var(--font-bold-header);
}

.step-number::before {
    content: counter(step-counter);
    display: flex;
    translate: 0px -6px;
    margin-right: 48px;
    font: var(--font-cta);
    font-size: 148px;
    color: var(--color-brand-c);
}

.step-indicator {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    z-index: 10;
    border-radius: 4px;
}

.step-hook-svg {
    overflow: inherit;
}

.step-hook {
    transition: rotate 1.3s var(--spring-slight) 0.1s;
}

.step-hook.bottom {
    rotate: -45deg;
    transform-origin: 60% 0%;
}

.step-hook.top {
    rotate: 45deg;
    transform-origin: 60% 100%;
}

.step-indicator.is-open .step-hook.top,
.step-indicator.is-open .step-hook.bottom {
    rotate: 0deg;
}

.step-indicator.is-open .step-hook-svg {
    scale: 0.9;
}

.step-hook-svg {
    scale: 1;
    transition: scale 0.2s ease;
}

/* Hide the very last indicator */
.step-wrapper:last-child .step-indicator {
    display: none;
}

.aside-section {
    margin-top: 220px;
}

.aside-section.yellow .aside-inner {
    background-color: var(--color-yellow-tint);
}

.aside-section.yellow h2,
.aside-section.yellow p {
    color: var(--color-gray);
}

.aside-inner {
    background-color: var(--color-brand-c);
    position: relative;

    padding-block: 92px;
    padding-right: 92px;

    border-radius: 0px var(--aside-border-radius) var(--aside-border-radius) 0px;
}

/* This paints the background to the left edge of the screen. */
.aside-inner::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 50vw;
    background-color: inherit;
    z-index: -1;
}

.aside-inner h2 {
    font: var(--font-cta);
    color: #fff;
}

.aside-inner p {
    color: #fff;
}

.aside-button-wrapper {
    display: flex;
    justify-content: flex-end;

    width: 100%;
}

.more-section-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.more-section {
    margin-top: 150px;
}

.more-section-inner h2 {
    font: var(--font-cta);
}

.more-section-buttons {
    display: flex;
    align-items: center;
    gap: 24px;
}

.faq-section {
    margin-top: 200px;
}

.faq-container h2 {
    font: var(--font-cta);
}

.accordion-header::-webkit-details-marker {
    display: none;
}

details {
    --_border: 1.5px solid
        color-mix(in srgb, var(--color-gray) 30%, transparent 100%);

    border-bottom: var(--_border);
}

details:first-of-type {
    border-top: var(--_border);
    margin-top: 64px;
}

details .button-hook {
    width: 32px;
    height: 32px;
    transition:
        rotate 0.4s ease,
        scale 0.2s ease;
    margin-left: auto;
    overflow: inherit;
}

details[open] .button-hook-l {
    rotate: 30deg;
    scale: 1.2;
}

details[open] .button-hook-r {
    rotate: -30deg;
    scale: 1.2;
}

/* Target the content area of the details element */
details::details-content {
    height: 0;
    overflow: hidden;
    transition: height 0.3s cubic-bezier(0.02, 0.45, 0.43, 0.99);
}

/* When open, animate to auto */
details[open]::details-content {
    height: auto;
}

summary {
    display: flex;
    flex-shrink: 0;
    cursor: pointer;
    padding: 30px;
    font: var(--font-bold-header);
    color: var(--color-brown);
    list-style: none;
    padding: 14px 0;
}

summary .icon {
    text-align: center;
    margin-left: auto;
    transition: rotate 0.4s ease;
    transform-origin: center 40%;
}

.accordion-content {
    /* padding-inline: 30px; */
    padding-bottom: 30px;
}

footer {
    margin-top: 200px;
}

footer h2 {
    font: var(--font-cta);
    margin-bottom: 77px;
}

footer .blob-frame {
    margin-bottom: -147px;
    z-index: 2;
}

.footer-logo {
    display: flex;
    padding-left: var(--edge-padding);
    translate: 0px 190px;
}

.footer-logo.offset {
    translate: 0px 486px;
}

.footer-col-wrapper {
    display: flex;
}

.footer-col {
    width: 250px;
}

.footer-col h3 {
    font: var(--font-nav);
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.footer-col a {
    color: inherit;
}

.footer-blue-section {
    --_left-padding: 82px;

    padding-left: var(--_left-padding);
    padding-block: 120px;
    translate: calc(var(--_left-padding) * -1) 0%;

    color: #fff;
    background-color: var(--color-brand-c);
    border-radius: var(--aside-border-radius) 0px 0px var(--aside-border-radius);

    position: relative;
    z-index: 1;
}

/* Paints the background to the right edge of the screen. */
.footer-blue-section::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 99.5%;
    width: 50vw;
    background-color: inherit;
    z-index: -1;
}

.footer-white-section {
    padding-block: 54px;
}

.footer-yellow-section {
    display: flex;
    align-items: center;
    gap: 64px;

    background-color: var(--color-yellow-tint);

    padding-block: 24px;
    /* I kept your original border-radius */
    border-radius: 0px var(--aside-border-radius) 0 0px;

    /* Added to establish positioning context */
    position: relative;
    z-index: 1;
}

/* This paints the background to the left edge of the screen */
.footer-yellow-section::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%; /* Pins the background exactly to the left edge of .footer-yellow-section */
    width: 100vw; /* Massive width to guarantee it reaches the left screen edge */
    background-color: inherit; /* Automatically matches var(--color-yellow-tint) */
    z-index: -1;
}

.footer-cert {
    max-width: 150px;
    max-height: 120px;
    mix-blend-mode: multiply;
}

.footer-copy-section {
    padding-block: 48px 32px;
}

small {
    font: var(--font-copyright);
    color: color-mix(in srgb, var(--color-gray) 36%, transparent);
}

a:not(.pill-button) {
    color: inherit;
    transition: color 0.2s ease;

    &:hover {
        color: var(--color-yellow);
    }
}