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

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
    font-size: inherit;
    font-weight: inherit
}

ul[role=list],
ol[role=list] {
    list-style: none;
    margin: 0;
    padding: 0
}

body {
    min-height: 100vh;
    line-height: 1.5
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
label {
    line-height: 1.1
}

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

a:not([class]) {
    text-decoration-skip-ink: auto
}

img,
picture {
    display: block;
    max-width: 100%;
    height: auto
}

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

textarea:not([rows]) {
    min-height: 10em
}

:target {
    scroll-margin-block: 0
}

@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto
    }

    *,
    *:before,
    *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
    }
}

:root {
    --red-100: hsl(357 63% 61%);
    --red-400: hsl(357 80% 44%);
    --red-400-opaque: hsl(357 80% 44% / .5);
    --red-700: hsl(357 78% 34%);
    --blue-100: hsl(217 100% 92%);
    --blue-400: hsl(218 98% 63%);
    --blue-400-opaque: hsla(218, 98%, 63%, 0.5);
    --blue-500: hsla(226, 82%, 40%, 1);
    --green-400: hsl(155 86% 35%);
    --orange-400: hsl(36 85% 44%);
    --neutral-950: hsl(0 0% 7%);
    --neutral-900: hsl(180 4% 5%);
    --neutral-800: hsl(234 21% 19%);
    --neutral-700: hsl(200 9% 34%);
    --neutral-600: hsl(200 5% 47%);
    --neutral-550: hsl(0 0% 58%);
    --neutral-500: hsl(0 0% 80%);
    --neutral-450: hsl(233 7% 75%);
    --neutral-450-40: hsl(233 7% 75% / 40%);
    --neutral-400: hsl(214 16% 92%);
    --neutral-400-20: hsl(214 16% 92% / 20%);
    --neutral-300: hsl(0 0% 96%);
    --neutral-200: hsl(225 50% 97%);
    --neutral-100: hsl(0 0% 100%);
    --ff-primary: "Inter", sans-serif;
    --ff-secondary: "Inter", sans-serif;
    --ff-base: var(--ff-primary);
    --ff-heading: var(--ff-secondary);
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;
    --fs-xs: .875rem;
    --fs-sm: 1rem;
    --fs-md: 1.125rem;
    --fs-2md: 1.25rem;
    --fs-lg: 1.5rem;
    --fs-xl: 1.6875rem;
    --fs-2xl: 2rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 3rem;
    --lh-100: 1.1;
    --lh-200: 1.2;
    --lh-300: 1.3;
    --lh-400: 1.4;
    --lh-500: 1.5;
    --ls-xs: -.02em;
    --ls-s: -.01em;
    --ls-l: .04em;
    --ls-xl: .1em;
    --wrapper-wide: 108rem;
    --wrapper-medium: 90rem;
    --wrapper-narrow: 76rem;
    --wrapper-padding: 2rem;
    --space-4: .25rem;
    --space-6: .375rem;
    --space-8: .5rem;
    --space-12: .75rem;
    --space-14: .875rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-40: 2.5rem;
    --space-48: 3rem;
    --space-64: 4rem;
    --space-80: 5rem;
    --space-100: 6.25rem;
    --space-160: 10rem;
    --gap-6: 6px;
    --gap-8: 8px;
    --gap-12: 12px;
    --gap-16: 16px;
    --gap-20: 20px;
    --gap-24: 24px;
    --gap-32: 32px;
    --gap-40: 40px;
    --gap-48: 48px;
    --gap-64: 64px;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 30px;
    --radius-circle: 50%;
    --radius-pill: 100vw;
    --text-limit: 768px;
    --search-limit: 40rem;
    --dropdown-size: 3.25rem;
    --radio-outline: hsl(210 3% 35%);
    --language-dropdown-width: 48rem;
    --search-height: 3.25rem;
    --footer-column-width: 12rem;
    --card-icon-size: 100px;
    --card-image-small: 5rem;
    --card-image-large: 8.75rem;
    --shadow-1: 0px 4px 16px 0px hsl(0 0% 0% / 8%)
}

@font-face {
    font-family: Inter;
    src: url(/resources/fonts/Inter-Regular.woff2) format("woff2"), url(Inter-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Inter;
    src: url(/resources/fonts/Inter-Medium.woff2) format("woff2"), url(Inter-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: Inter;
    src: url(/resources/fonts/Inter-Bold.woff2) format("woff2"), url(Inter-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

body {
    font-weight: var(--fw-regular);
    font-family: var(--ff-primary);
    background-color: var(--neutral-100);
    color: var(--neutral-900)
}

@media (max-width: 63.9375em) {

    body[data-navigation=show],
    body[data-language=show] {
        overflow: hidden
    }
}

.heading-3xl {
    font-weight: var(--fw-bold);
    font-size: var(--fs-2xl);
    line-height: var(--lh-100);
    letter-spacing: var(--ls-xs)
}

@media (min-width: 64em) {
    .heading-3xl {
        font-size: var(--fs-4xl)
    }
}

.heading-2xl {
    font-weight: var(--fw-bold);
    font-size: var(--fs-xl);
    line-height: var(--lh-200);
    letter-spacing: var(--ls-xs)
}

@media (min-width: 64em) {
    .heading-2xl {
        font-size: var(--fs-3xl)
    }
}

.heading-xl {
    font-weight: var(--fw-bold);
    font-size: var(--fs-lg);
    line-height: var(--lh-200);
    letter-spacing: var(--ls-s)
}

@media (min-width: 64em) {
    .heading-xl {
        font-size: var(--fs-2xl)
    }
}

.heading-l {
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    line-height: var(--lh-200);
    letter-spacing: var(--ls-s)
}

@media (min-width: 64em) {
    .heading-l {
        font-size: var(--fs-xl)
    }
}

.heading-m {
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    line-height: var(--lh-200);
    letter-spacing: var(--ls-s)
}

@media (min-width: 64em) {
    .heading-m {
        font-size: var(--fs-lg)
    }
}

.heading-s {
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    line-height: var(--lh-200)
}

@media (min-width: 64em) {
    .heading-s {
        font-size: var(--fs-md)
    }
}

.paragraph-lead {
    font-weight: var(--fw-regular);
    font-size: var(--fs-2md);
    line-height: var(--lh-400)
}

@media (min-width: 64em) {
    .paragraph-lead {
        font-size: var(--fs-lg)
    }
}

.paragraph-big {
    font-weight: var(--fw-regular);
    font-size: var(--fs-sm);
    line-height: var(--lh-500)
}

@media (min-width: 64em) {
    .paragraph-big {
        font-size: var(--fs-md)
    }
}

.paragraph {
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    line-height: var(--lh-500)
}

@media (min-width: 64em) {
    .paragraph {
        font-size: var(--fs-sm)
    }
}

.paragraph-small {
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    line-height: var(--lh-500)
}

.link-big {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-500)
}

.link-medium,
.link {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: var(--lh-500);
    text-decoration: none
}

.link-small {
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    line-height: var(--lh-200);
    text-decoration: underline
}

.label-lead {
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    line-height: var(--lh-300);
    letter-spacing: var(--ls-xl);
    text-transform: uppercase
}

@media (min-width: 64em) {
    .label-lead {
        font-size: var(--fs-md)
    }
}

.label-titles {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: var(--lh-200);
    letter-spacing: var(--ls-s)
}

.label-small {
    font-weight: var(--fw-bold);
    font-size: var(--fs-xs);
    line-height: var(--lh-300);
    letter-spacing: var(--ls-l)
}

.caption {
    font-weight: var(--fw-medium);
    font-size: var(--fs-md);
    line-height: var(--lh-500)
}

@media (min-width: 64em) {
    .caption {
        font-size: var(--fs-2md)
    }
}

.fw-regular {
    font-weight: var(--fw-regular)
}

.fw-medium {
    font-weight: var(--fw-medium)
}

.fw-bold {
    font-weight: var(--fw-bold)
}

.lh-100 {
    line-height: var(--lh-100)
}

.lh-200 {
    line-height: var(--lh-200)
}

.lh-300 {
    line-height: var(--lh-300)
}

.lh-400 {
    line-height: var(--lh-400)
}

.lh-500 {
    line-height: var(--lh-500)
}

.article-date {
    margin-bottom: var(--space-32);
    color: var(--neutral-700)
}

.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    pointer-events: none;
    flex-shrink: 0
}

.icon-navigation {
    width: .9599609375em
}

.skip-link {
    position: fixed;
    z-index: 600;
    top: 0;
    right: 0;
    left: 0;
    translate: 0 -100%;
    width: max-content;
    margin-inline: auto;
    padding: var(--space-16);
    text-align: center;
    text-decoration: none;
    background-color: var(--neutral-100);
    color: var(--neutral-800)
}

.skip-link:focus-visible {
    translate: 0;
    outline-offset: 2px
}

.button {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: var(--lh-500);
    display: inline-flex;
    column-gap: var(--gap-8);
    align-items: center;
    align-self: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-pill);
    outline: 1px solid transparent;
    outline-offset: 0;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.button-medium {
    padding: 1em 1.5em
}

.button-medium.button-square {
    padding: 1em
}

.button-small {
    padding: .75em 1.125em
}

.button-small.button-square {
    padding: .625em
}

.button-language {
    padding: .5em 1.125em
}

@media (min-width: 64em) {
    .button-language {
        padding: 1em 1.5em
    }
}

.button-fixed-100 {
    min-width: 100px;
    justify-content: center
}

.button-primary {
    background-color: var(--red-400);
    color: var(--neutral-100)
}

.button-primary:hover {
    background-color: var(--red-700)
}

.button-secondary {
    background-color: var(--neutral-100);
    color: var(--neutral-900);
    outline: 1px solid var(--neutral-400)
}

.button .icon {
    font-size: 1.5em
}

.button:focus {
    outline: 4px solid var(--red-700);
    outline-offset: -2px
}

.filter__btn {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: var(--lh-500);
    text-decoration: none;
    position: relative;
    border: 0;
    border-radius: var(--radius-pill);
    padding: .75em 1.125em;
    background-color: var(--neutral-100);
    color: var(--neutral-900);
    outline: 1px solid var(--neutral-400);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.filter__btn:has(input:checked) {
    background-color: var(--red-400);
    color: var(--neutral-100)
}

.filter__btn input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: var(--radius-pill);
    margin: 0;
    pointer-events: none
}

.datepicker {
    display: grid;
    gap: var(--gap-8)
}

.datepicker label {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: var(--lh-200);
    letter-spacing: var(--ls-s)
}

.datepicker input {
    width: 100%;
    border: 1px solid var(--neutral-400);
    border-radius: var(--radius-pill);
    padding: var(--space-12) var(--space-16);
    background-color: transparent;
    -webkit-appearance: none
}

.datepicker input::-webkit-calendar-picker-indicator {
    width: 1.5rem;
    height: 1.5rem;
    background-image: url(/resources/icons/calendar_month.svg);
    background-position: 50% 50%;
    background-size: cover;
    opacity: .5
}

.dropdown {
    position: relative;
    min-height: var(--dropdown-size)
}

.dropdown-holder {
    position: absolute;
    width: 100%;
    z-index: 400;
    border: 1px solid var(--neutral-400);
    border-radius: calc(var(--dropdown-size) / 2);
    background-color: var(--neutral-100)
}

.dropdown-holder:has(button[aria-expanded=true]) {
    z-index: 500;
    box-shadow: var(--shadow-1)
}

.dropdown-holder:focus {
    outline: 3px solid lime
}

.dropdown-button {
    width: 100%;
    border: 0;
    padding: var(--space-12) var(--space-24);
    text-align: left;
    background-color: transparent;
    color: var(--neutral-900);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-sm);
    -webkit-tap-highlight-color: transparent
}

.dropdown-button .icon {
    font-size: 1.5em
}

.dropdown-button[aria-expanded=true] .icon {
    transform: rotate(180deg)
}

.dropdown-panel {
    display: none
}

[aria-expanded=true]+.dropdown-panel {
    display: block
}

.dropdown-panel ul {
    padding-bottom: var(--space-16)
}

.dropdown-panel li a {
    display: block;
    padding: var(--space-12) var(--space-24);
    color: var(--neutral-900);
    text-decoration: none
}

.dropdown-panel li a:hover {
    background-color: var(--neutral-300)
}

.hamburger {
    margin: 0;
    border: 0;
    padding: var(--space-4) var(--space-8);
    font-size: 2rem;
    background-color: transparent;
    color: var(--neutral-900);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

@media (min-width: 64em) {
    .hamburger {
        display: none
    }
}

.hamburger .icon {
    display: block
}

a:not([class]) {
    font-weight: var(--fw-regular);
    text-decoration: underline;
    color: var(--red-400);
    text-decoration-line: underline;
    text-underline-offset: 4px
}

a:not([class]):hover {
    text-decoration-thickness: 2px
}

a:not([class]):focus {
    background-color: var(--neutral-300);
    text-decoration-thickness: 2px
}

.link-wrapper {
    display: inline-flex;
    display: flex;
    column-gap: var(--gap-8);
    color: var(--red-400);
    break-inside: avoid
}

.link-wrapper .icon {
    font-size: 1.5em;
    color: currentColor
}

.link-share {
    color: var(--neutral-700)
}

.link-share .link-icon {
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs)
}

.link-icon {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: var(--lh-500);
    text-decoration: none;
    padding-block: 2px;
    color: currentColor;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px
}

.link-icon:hover {
    text-decoration-line: underline
}

.link-icon:focus {
    background-color: var(--neutral-300);
    text-decoration-line: underline
}

.link-item {
    font-weight: var(--fw-bold);
    font-size: var(--fs-2md);
    line-height: var(--lh-500);
    border: 1px solid var(--neutral-400);
    border-radius: var(--radius-sm);
    padding: var(--space-16) var(--space-24);
    color: var(--neutral-950);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--gap-8)
}

.link-item .icon {
    color: var(--red-400);
    font-size: 1.1em
}

.pill {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-6)
}

.pill-item {
    font-weight: var(--fw-regular);
    font-size: var(--fs-xs);
    line-height: 1;
    background-color: var(--neutral-300);
    border-radius: var(--radius-pill);
    color: var(--neutral-900);
    padding: var(--space-4) var(--space-8)
}

.gauge {
    display: flex;
    gap: var(--gap-16);
    background-color: var(--neutral-300);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-xs)
}

.gauge>div {
    flex-grow: 1
}

.gauge svg path {
    fill: var(--red-400)
}

.gauge-level-1 svg path:nth-child(1),
.gauge-level-1 svg path:nth-child(2) {
    fill: var(--neutral-450-40)
}

.gauge-level-2 svg path:nth-child(1) {
    fill: var(--neutral-450-40)
}

.form-rate {
    margin-top: var(--space-40);
    max-width: 580px
}

.label {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: var(--lh-200);
    letter-spacing: var(--ls-s);
    display: block;
    margin-bottom: var(--space-8)
}

.input {
    display: block;
    width: 100%;
    margin-bottom: var(--space-24);
    border: 0;
    border-radius: var(--radius-sm);
    padding: var(--space-8)
}

textarea {
    resize: vertical
}

.fieldset {
    margin: 0;
    border: 0;
    padding: 0
}

.radios-list {
    display: flex;
    gap: var(--gap-16);
    padding-top: var(--space-16);
    padding-bottom: var(--space-32)
}

.radios-group {
    display: grid;
    gap: var(--gap-20);
    padding-top: var(--space-16);
    padding-bottom: var(--space-40)
}

.radio-block {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gap-12)
}

.radio-block label {
    cursor: pointer
}

.radio-block label:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--radius-circle);
    border: 1px solid var(--radio-outline);
    background-color: var(--neutral-100);
    width: var(--space-24);
    height: var(--space-24)
}

.radio-block input[type=radio] {
    margin: 0;
    width: var(--space-24);
    height: var(--space-24);
    opacity: 0
}

.radio-block input[type=radio]:hover+label:before,
.radio-block input[type=radio]:focus+label:before {
    border-color: var(--red-400)
}

.radio-block input[type=radio]:checked+label:before {
    border-color: transparent;
    background-color: var(--red-400);
    background-image: url(/resources/icons/check_white.svg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 80% 80%
}

.radio {
    position: relative;
    width: min-content
}

.radio-input {
    display: block;
    margin: 0;
    width: var(--space-40);
    height: var(--space-40)
}

.radio-label {
    position: absolute;
    inset: -2px;
    display: grid;
    place-content: center;
    border-radius: var(--radius-circle);
    background-color: var(--neutral-100);
    color: var(--neutral-900);
    cursor: pointer
}

:checked+.radio-label {
    background-color: var(--red-400);
    color: var(--neutral-100)
}

:root {
    --a11y-theme-color: var(--neutral-800);
    --a11y-theme-focus: var(--red-400);
    --a11y-panel-background: #fff;
    --a11y-panel-zIndex: 100;
    --a11y-handle-background: var(--a11y-theme-color);
    --a11y-handle-color: #fff;
    --a11y-handle-focus-border: var(--a11y-theme-focus);
    --a11y-title-background: var(--a11y-theme-color);
    --a11y-title-color: #fff;
    --a11y-button-background: #fff;
    --a11y-button-color: hsla(180, 4%, 5%, 1);
    --a11y-button-zIndex: 1;
    --a11y-button-zIndex-focus: 2;
    --a11y-button-border: hsla(214, 16%, 92%, 1);
    --a11y-button-focus-border: var(--a11y-theme-focus);
    --a11y-icon-color: hsla(0, 0%, 58%, 1);
    --a11y-name-color: var(--a11y-button-color);
    --a11y-step-background: hsla(0, 0%, 85%, 1);
    --a11y-step-active-background: hsla(357, 80%, 44%, 1);
    --a11y-step-border: #fff
}

.a11y-panel {
    position: fixed;
    z-index: var(--a11y-panel-zIndex);
    top: 20px;
    right: -380px;
    width: 378px;
    transition: right .3s;
    font-family: var(--ff-primary);
    border-radius: 0 0 8px 8px;
    background: var(--a11y-panel-background)
}

.a11y-panel[data-state=expanded] {
    right: 20px;
    box-shadow: 0 4px 8px #00000040
}

@media (max-width: 767px) {
    .a11y-panel {
        right: -320px;
        width: 300px
    }
}

.a11y-handle {
    width: 55px;
    aspect-ratio: 1;
    background: var(--a11y-handle-background);
    color: var(--a11y-handle-color);
    margin: 0;
    border: 0;
    padding: 10px;
    cursor: pointer
}

.a11y-handle:focus {
    box-shadow: 0 0 4px var(--a11y-handle-focus-border)
}

.a11y-handle svg {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    fill: currentColor
}

.a11y-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--a11y-title-background);
    color: var(--a11y-title-color);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0
}

.a11y-close {
    margin: 0;
    border: 0;
    padding: 10px;
    background-color: transparent;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer
}

.a11y-close .icon {
    display: block
}

.a11y-buttons-list {
    margin: 16px;
    border: 1px solid var(--a11y-button-border);
    display: grid;
    grid-template-columns: repeat(2, 1fr)
}

.a11y-button,
.a11y-reset {
    position: relative;
    z-index: var(--a11y-button-zIndex);
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 16px;
    margin: 0;
    border-radius: 0;
    border: 1px solid var(--a11y-button-border);
    padding: 16px;
    font-weight: 400;
    font-size: 16px;
    font-size: 14px;
    line-height: 1.5;
    background: var(--a11y-button-background);
    color: var(--a11y-button-color);
    cursor: pointer
}

.a11y-reset {
    grid-column: span 2
}

.a11y-button:focus,
.a11y-reset:focus {
    z-index: var(--a11y-button-zIndex-focus);
    box-shadow: 0 0 4px var(--a11y-button-focus-border)
}

.a11y-icon {
    display: block;
    color: var(--a11y-icon-color);
    pointer-events: none
}

@media (max-width: 767px) {
    .a11y-icon {
        display: none
    }
}

.a11y-icon svg {
    height: 20px;
    fill: currentColor
}

@media (min-width: 768px) {
    .a11y-icon svg {
        height: 32px
    }
}

.a11y-name {
    display: block;
    flex-grow: 1;
    word-break: break-word;
    color: var(--a11y-name-color);
    pointer-events: none;
    line-height: 1.25
}

.a11y-steps {
    width: 100%;
    display: flex;
    flex-direction: row;
    margin: 0;
    padding-left: 0;
    list-style: none;
    pointer-events: none;
    gap: 6px
}

.a11y-step-item {
    flex-grow: 1;
    height: 6px;
    margin: 0;
    border: 0;
    border-radius: 50vw;
    background: var(--a11y-step-background);
    transition: .3s;
    aspect-ratio: 1
}

[data-selected="1"] .a11y-step-item:nth-child(1) {
    background: var(--a11y-step-active-background)
}

[data-selected="2"] .a11y-step-item:nth-child(-n+2) {
    background: var(--a11y-step-active-background)
}

[data-selected="3"] .a11y-step-item:nth-child(-n+3) {
    background: var(--a11y-step-active-background)
}

[data-selected="4"] .a11y-step-item:nth-child(-n+4) {
    background: var(--a11y-step-active-background)
}

@font-face {
    font-family: OmoType;
    src: url(/resources/fonts/OmoType_Std-Medium_One_web.ttf) format("truetype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: OmoType;
    src: url(/resources/fonts/OmoType_Std-Black_One_web.ttf) format("truetype");
    font-weight: 700;
    font-style: normal
}

.size1 {
    font-size: 18px
}

.size2 {
    font-size: 20px
}

.size3 {
    font-size: 22px
}

.size4 {
    font-size: 24px
}

.spacing1 {
    letter-spacing: .05em
}

.spacing2 {
    letter-spacing: .1em
}

.spacing3 {
    letter-spacing: .15em
}

.spacing4 {
    letter-spacing: .2em
}

.typography1 body {
    font-family: OmoType, sans-serif !important
}

.links1 a {
    text-decoration: underline !important;
    background: #ff0 !important;
    color: #000 !important
}

.links1 a:hover {
    text-decoration: none !important
}

.contrast1 {
    filter: grayscale(100%)
}

.contrast2 {
    filter: invert(100%)
}

.contrast3 {
    filter: contrast(200%)
}

.contrast4 {
    filter: contrast(75%)
}

.cursor1,
.cursor1 a,
.cursor1 button {
    cursor: url(/resources/a11y-cursor.png), auto !important
}

.accordion {
    margin-top: var(--space-24);
    margin-bottom: var(--space-24)
}

.accordion-panel {
    margin-top: -1px;
    border-top: 1px solid var(--neutral-400);
    border-bottom: 1px solid var(--neutral-400)
}

.accordion-content {
    padding: var(--space-8) var(--space-16) var(--space-24);
    display: none
}

.accordion-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-16);
    width: 100%;
    margin: 0;
    border: 0;
    padding: var(--space-16);
    font-weight: var(--fw-medium);
    background-color: transparent;
    text-align: left;
    cursor: pointer
}

.accordion-button-name {
    flex-grow: 1
}

.accordion-button-icon {
    font-size: 1.25em
}

.accordion-button-icon .icon {
    display: block
}

.accordion-button-icon .icon:last-child {
    display: none
}

[aria-expanded=true]+.accordion-content {
    display: block
}

[aria-expanded=true] .accordion-button-icon .icon:first-child {
    display: none
}

[aria-expanded=true] .accordion-button-icon .icon:last-child {
    display: block
}

.alert {
    display: flex;
    flex-direction: row;
    gap: var(--gap-16);   
    border-radius: var(--radius-md);
    padding: var(--space-20)
}

.alert .icon {
    font-size: var(--fs-lg)
}

.alert-error {
    background-color: var(--red-400-opaque);    
    color: var(--red-400)
}

.alert-info {
    background-color: var(--blue-400-opaque);
    color: var(--blue-400)
}

.anchor-group {
    margin: 0;
    padding: 0;
    list-style: none
}

.anchor-group>*+* {
    margin-top: var(--space-16)
}

.anchor-section {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24)
}

.anchor-section>*+* {
    margin-top: var(--space-24)
}

.banner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-24);
    border-radius: var(--radius-lg);
    padding: var(--space-24);
    background-color: var(--neutral-800);
    color: var(--neutral-100)
}

.banner-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap-8)
}

.banner .button {
    flex-shrink: 0
}

.breadcrumb {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-6);
    margin: 0;
    padding-top: var(--space-32);
    padding-bottom: var(--space-32);
    padding-left: 0;
    list-style: none
}

.breadcrumb-item {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: var(--lh-200);
    letter-spacing: var(--ls-s);
    display: flex;
    align-items: center
}

.breadcrumb-item:not(:last-child):after {
    content: "";
    flex-shrink: 0;
    display: block;
    margin-left: var(--space-4);
    width: 1em;
    height: 1em;
    background-image: url(/resources/icons/navigate_next.svg);
    background-position: 50% 50%;
    background-size: cover
}

.breadcrumb-link {
    text-decoration: none;
    color: var(--neutral-900)
}

.breadcrumb-link:hover {
    text-decoration: underline
}

.breadcrumb-link[aria-current=page] {
    color: var(--neutral-700)
}

.button-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-block: var(--space-32);
    margin-inline: auto;
    max-width: 60rem;
    gap: var(--gap-16)
}

.card {
    position: relative;
    display: flex;
    gap: var(--gap-16)
}

@media (min-width: 40em) {
    .card {
        gap: var(--gap-40)
    }
}

.card-icon {
    font-size: var(--card-icon-size)
}

.card-illustration img {
    max-width: 15rem
}

.card-clickable .card-content a:before {
    content: "";
    position: absolute;
    inset: 0
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16);
    flex-grow: 1
}

@media (min-width: 40em) {
    .card-body {
        gap: var(--gap-24)
    }
}

.card-body h3 a {
    color: currentColor;
    text-decoration: none
}

.card-body h3 a:hover {
    text-decoration: underline
}

.card-body p+p {
    margin-top: var(--space-8)
}

.card-body .card-date {
    color: var(--neutral-700)
}

.card-content {
    flex-grow: 1
}

.card-content>*+* {
    margin-top: 1em
}

.card-image {
    width: var(--card-image-small);
    height: var(--card-image-small);
    align-self: start;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden
}

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

.card-image-large {
    width: var(--card-image-small);
    height: var(--card-image-small);
    align-self: start;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    overflow: hidden
}

@media (min-width: 40em) {
    .card-image-large {
        width: var(--card-image-large);
        height: var(--card-image-large)
    }
}

.card-image-large img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.card-folder {
    color: var(--neutral-600)
}

.card-padded {
    padding: var(--space-24);
    border: 1px solid var(--neutral-400);
    border-radius: var(--radius-md)
}

.card-padded .card-link:hover {
    text-decoration: none
}

.card-padded:hover {
    background-color: var(--neutral-300)
}

.card-bg {
    padding: var(--space-24);
    border: 1px solid var(--neutral-400);
    border-radius: var(--radius-md);
    background-color: var(--neutral-300)
}

.filter-group {
    margin-top: var(--space-48)
}

@media (min-width: 48em) {
    .filter-group {
        margin-top: var(--space-64)
    }
}

.filter-gap {
    gap: var(--gap-8) var(--gap-24)
}

.floating-buttons {
    position: fixed;
    z-index: 700;
    right: var(--space-16);
    bottom: var(--space-16);
    display: flex;
    flex-direction: column;
    gap: var(--gap-8)
}

.footnote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-32);
    margin-top: var(--space-48);
    border-top: 1px solid var(--neutral-400-20);
    padding-top: var(--space-48)
}

@media (min-width: 64em) {
    .footnote {
        flex-direction: row;
        justify-content: space-between
    }
}

.inline-items {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--gap-16) var(--gap-24);
    font-size: var(--fs-xs)
}

.language-picker {
    position: relative
}

.language-panel {
    position: fixed;
    z-index: 900;
    inset: 0;
    background-color: var(--neutral-100);
    padding-bottom: var(--space-16);
    display: none
}

@media (min-width: 64em) {
    .language-panel {
        position: absolute;
        inset: unset;
        top: 110%;
        right: 0;
        width: 75vw;
        max-width: var(--language-dropdown-width);
        border-radius: var(--radius-xl);
        border: var(--neutral-400);
        padding-block: var(--space-32);
        box-shadow: var(--shadow-1)
    }
}

[aria-expanded=true]+.language-panel {
    display: block
}

.language-panel ul {
    column-count: 2
}

@media (min-width: 48em) {
    .language-panel ul {
        column-count: 3
    }
}

@media (min-width: 64em) {
    .language-panel ul {
        column-count: 4
    }
}

.language-panel li {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: var(--lh-500);
    margin-inline: var(--space-8)
}

.language-panel li a {
    display: block;
    padding-block: var(--space-16);
    color: var(--neutral-900);
    text-decoration: none
}

@media (min-width: 64em) {
    .language-panel li a {
        padding-block: var(--space-8)
    }
}

.language-panel li a:hover {
    text-decoration: underline
}

.more-info {
    border-radius: var(--radius-md);
    padding: var(--space-24);
    background-color: var(--neutral-300)
}

.more-info-heading {
    margin-bottom: var(--space-24);
    border-bottom: 1px solid var(--neutral-500);
    padding-bottom: var(--space-24)
}

.more-info-heading:not(:first-child) {
    margin-top: var(--space-40)
}

.paging {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-16);
    margin: 0;
    padding: 0;
    list-style: none;
    margin-top: var(--space-32);
    margin-bottom: var(--space-32)
}

.paging a {
    min-width: 44px
}

.paging a[aria-current=page] {
    background-color: var(--red-400);
    color: var(--neutral-100);
    outline-color: transparent
}

.highlight {
    border-radius: var(--radius-md);
    padding: var(--space-20);
    background-color: var(--neutral-300)
}

.rte ul,
.rte ol {
    margin-bottom: 0;
    padding-left: var(--space-24)
}

.rte>*+* {
    margin-top: 1.5em
}

.rte h2 {
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    line-height: var(--lh-200);
    letter-spacing: var(--ls-s)
}

@media (min-width: 64em) {
    .rte h2 {
        font-size: var(--fs-lg)
    }
}

.rte h3 {
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    line-height: var(--lh-200);
    letter-spacing: var(--ls-s)
}

@media (min-width: 64em) {
    .rte h3 {
        font-size: var(--fs-lg)
    }
}

.scrollspy {
    position: sticky;
    top: var(--space-32);
    margin-top: var(--space-48);
    counter-reset: scrollspy-counter
}

.scrollspy>*:not(:first-child) {
    margin-top: var(--space-24)
}

.scrollspy li {
    position: relative;
    border-left: 1px solid var(--neutral-400);
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
    padding-left: var(--space-24);
    counter-increment: scrollspy-counter
}

.scrollspy li.toc-active a:after {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 5px;
    background-color: var(--red-400)
}

.scrollspy a {
    display: inline-block;
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    line-height: var(--lh-500);
    text-decoration: none;
    color: var(--neutral-900)
}

.scrollspy a:before {
    content: counter(scrollspy-counter) ". "
}

.search {
    padding: var(--space-32) var(--space-16);
    text-align: center;
    background-color: var(--neutral-800);
    color: var(--neutral-100)
}

@media (min-width: 48em) {
    .search {
        padding-top: var(--space-40);
        padding-bottom: var(--space-40)
    }
}

.search-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--gap-8);
    max-height: var(--search-height)
}

.search-field {
    position: relative;
    z-index: 550;
    width: 100%;
    max-width: var(--search-limit);
    border-radius: calc(var(--search-height) / 2);
    border: var(--neutral-400);
    background-color: var(--neutral-100);
    box-shadow: var(--shadow-1)
}

.search-field .button {
    position: absolute;
    top: .25rem;
    right: .25rem
}

.search-input {
    width: 100%;
    border: 0;
    border-radius: var(--radius-pill);
    padding: var(--space-14) var(--space-24);
    padding-right: var(--space-64);
    background-color: transparent
}

.search-suggestions-list {
    position: relative;
    z-index: 10;
    text-align: left;
    padding-bottom: calc(var(--search-height) / 2);
    display: none
}

.search-suggestions-list a {
    display: block;
    color: var(--neutral-900);
    text-decoration: none;
    padding: var(--space-12) var(--space-24)
}

.search-suggestions-list a:hover {
    background-color: var(--neutral-300)
}

.search-suggestions-category {
    font-weight: var(--fw-bold);
    font-size: var(--fs-xs);
    line-height: var(--lh-300);
    letter-spacing: var(--ls-l);
    padding: var(--space-16) var(--space-24) var(--space-12);
    color: var(--neutral-600)
}

.social ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--gap-8);
    font-size: var(--fs-2md)
}

@media (min-width: 64em) {
    .social ul {
        justify-content: end
    }
}

.social ul a {
    display: block;
    padding: var(--space-6);
    color: var(--neutral-100)
}

.social .icon {
    display: block
}

.step {
    position: relative;
    padding-top: var(--space-20);
    padding-bottom: var(--space-20)
}

@media (min-width: 40em) {
    .step {
        padding-top: var(--space-40);
        padding-bottom: var(--space-40);
        padding-left: var(--space-64)
    }
}

.step+.step {
    border-top: 1px solid var(--neutral-400)
}

.step .rte {
    margin-top: var(--space-24)
}

@media (min-width: 40em) {
    .step .rte {
        margin-top: var(--space-40)
    }
}

.step-button {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    text-align: left;
    margin: 0;
    border: 0;
    padding: 0;
    background-color: transparent;
    color: var(--neutral-900);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.step-button .icon {
    margin-bottom: 4px;
    color: var(--red-400)
}

.step-button[aria-expanded=false]+.rte {
    display: none
}

.step-button[aria-expanded=true]+.rte {
    display: block
}

.steps {
    counter-reset: my-custom-counter
}

.step {
    counter-increment: my-custom-counter
}

.step-number {
    display: flex;
    gap: var(--gap-8)
}

.step-number:before {
    content: counter(my-custom-counter) ". "
}

@media (min-width: 40em) {
    .step-number:before {
        content: counter(my-custom-counter);
        position: absolute;
        left: 0;
        margin-top: calc(var(--space-8) * -1);
        border: 1px solid var(--neutral-400);
        border-radius: var(--radius-circle);
        width: var(--space-40);
        height: var(--space-40);
        display: grid;
        place-content: center
    }
}

@media (min-width: 64em) {
    .step-number:before {
        margin-top: calc(var(--space-4) * -1);
        font-size: var(--fs-sm)
    }
}

.stepper-round {
    border: 1px solid var(--neutral-400);
    border-radius: var(--radius-md);
    padding-inline: var(--space-16)
}

@media (min-width: 40em) {
    .stepper-round {
        padding-inline: var(--space-40)
    }
}

.stepper-heading {
    margin-inline: calc(var(--space-16) * -1);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    padding: var(--space-20) var(--space-16);
    background-color: var(--red-400);
    color: var(--neutral-100)
}

@media (min-width: 40em) {
    .stepper-heading {
        margin-inline: calc(var(--space-40) * -1)
    }
}

.tab-list {
    margin-bottom: var(--space-32);
    border-bottom: 1px solid var(--neutral-400)
}

.tab-item {
    margin: 0;
    border: 0;
    border-bottom: 5px solid transparent;
    padding: var(--space-16) var(--space-40);
    background-color: transparent;
    color: var(--neutral-900);
    font-weight: var(--fw-bold);
    font-size: var(--fs-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

@media (min-width: 64em) {
    .tab-item {
        font-size: var(--fs-md)
    }
}

.tab-item[aria-selected=true] {
    border-bottom-color: var(--red-400);
    color: var(--red-400)
}

.header:after {
    content: "";
    display: block;
    border-top: 3px solid var(--red-400);
    height: 9px;
    background-color: var(--neutral-100);
    border-bottom: 3px solid var(--blue-500)
}

.header-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gap-24);
    padding-top: var(--space-16);
    padding-bottom: var(--space-16)
}

.header-logo {
    flex-grow: 1
}

.header-logo-link {
    display: inline-block;
    vertical-align: bottom;
    -webkit-tap-highlight-color: transparent
}

.header-logo-img {
    height: 2rem
}

@media (min-width: 48em) {
    .header-logo-img {
        height: 3rem
    }
}

.quick-links {
    display: flex;
    flex-direction: column;
    gap: var(--gap-16) var(--gap-64)
}

@media (min-width: 40em) {
    .quick-links {
        flex-direction: row;
        flex-wrap: wrap
    }
}

.quick-links ul {
    flex: 1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-8)
}

.quick-links-wrapper {
    border-bottom: 1px solid var(--neutral-400);
    padding-top: var(--space-40);
    padding-bottom: var(--space-40)
}

.mobile-nav-panel {
    position: fixed;
    z-index: 900;
    inset: 0;
    background-color: var(--neutral-100);
    padding-bottom: var(--space-16);
    display: none
}

[aria-expanded=true]+.mobile-nav-panel {
    display: block
}

.mobile-nav-panel-grid {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: var(--gap-16)
}

.mobile-nav-panel-scroller {
    overflow-y: auto;
    flex-grow: 1
}

.mobile-nav-panel li {
    font-weight: var(--fw-medium);
    font-size: var(--fs-sm);
    line-height: var(--lh-500);
    margin-inline: var(--space-8)
}

.mobile-nav-panel li:not(:first-child) {
    border-top: 1px solid var(--neutral-500)
}

.mobile-nav-panel li a {
    display: block;
    padding-block: var(--space-16);
    color: var(--neutral-900);
    text-decoration: none
}

.navigation {
    border-bottom: 1px solid var(--neutral-400);
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
    background-color: var(--neutral-800);
    color: var(--neutral-100);
    display: none
}

@media (min-width: 64em) {
    .navigation {
        display: block
    }
}

.navigation .nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 var(--gap-24)
}

.navigation .nav-link {
    display: block;
    font-weight: var(--fw-medium);
    padding-top: var(--space-8);
    color: var(--neutral-100);
    text-decoration: none;
    opacity: .75
}

@media (min-width: 80em) {
    .navigation .nav-link {
        padding-right: var(--space-12);
        padding-left: var(--space-12)
    }
}

@media (min-width: 96em) {
    .navigation .nav-link {
        padding-right: var(--space-24);
        padding-left: var(--space-24)
    }
}

.navigation .nav-link:hover {
    text-decoration: underline
}

.section-intro {
    border-bottom: 1px solid var(--neutral-400);
    padding-top: var(--space-48);
    padding-bottom: var(--space-48)
}

.footer {
    background-color: var(--neutral-800);
    color: var(--neutral-100);
    padding-top: var(--space-48);
    padding-bottom: var(--space-48)
}

@media (min-width: 48em) {
    .footer {
        padding-top: var(--space-100);
        padding-bottom: var(--space-64)
    }
}

.footer a {
    color: var(--neutral-500)
}

.footer a:focus {
    background-color: var(--neutral-900)
}

.footer-columns {
    display: grid;
    gap: var(--gap-48)
}

@media (min-width: 64em) {
    .footer-columns {
        grid-template-columns: repeat(2, 1fr)
    }
}

.footer-heading {
    font-weight: var(--fw-bold);
    font-size: var(--fs-md);
    line-height: var(--lh-200);
    letter-spacing: var(--ls-s);
    margin-bottom: var(--space-24)
}

@media (min-width: 64em) {
    .footer-heading {
        font-size: var(--fs-lg)
    }
}

.auto-columns {
    column-width: var(--footer-column-width);
    column-gap: var(--gap-64)
}

.wrapper-wide {
    --_size: var(--wrapper-wide);
    --_padding: var(--wrapper-padding);
    width: min(var(--_size), 100% - var(--_padding));
    margin-inline: auto
}

@media (min-width: 40em) {
    .wrapper-wide {
        --_padding: 3rem
    }
}

@media (min-width: 48em) {
    .wrapper-wide {
        --_padding: 5rem
    }
}

.wrapper-medium {
    --_size: var(--wrapper-medium);
    --_padding: var(--wrapper-padding);
    width: min(var(--_size), 100% - var(--_padding));
    margin-inline: auto
}

@media (min-width: 40em) {
    .wrapper-medium {
        --_padding: 3rem
    }
}

@media (min-width: 48em) {
    .wrapper-medium {
        --_padding: 5rem
    }
}

.wrapper-narrow {
    --_size: var(--wrapper-narrow);
    --_padding: var(--wrapper-padding);
    width: min(var(--_size), 100% - var(--_padding));
    margin-inline: auto
}

@media (min-width: 40em) {
    .wrapper-narrow {
        --_padding: 3rem
    }
}

@media (min-width: 48em) {
    .wrapper-narrow {
        --_padding: 5rem
    }
}

.full-width {
    width: 100%
}

.stack {
    display: grid;
    isolation: isolate
}

.stack>* {
    grid-column: 1/-1;
    grid-row: 1/-1
}

.flex {
    display: flex
}

.flex-row {
    flex-direction: row
}

.flex-column {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.flex-grow {
    flex-grow: 1
}

.equal-cols {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-24)
}

.equal-cols>* {
    flex: 1 1 var(--_col, 20rem)
}

@media (min-width: 48em) {
    .two-columns {
        column-count: 2;
        column-gap: var(--gap-16)
    }
}

.list-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-24);
    justify-content: space-between;
    align-items: end;
    margin-bottom: var(--space-48)
}

.grid,
.grid-2 {
    display: grid
}

@media (min-width: 48em) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr)
    }
}

.grid-3 {
    display: grid
}

@media (min-width: 48em) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width: 80em) {
    .grid-3 {
        grid-template-columns: repeat(3, 1fr)
    }
}

.grid-4 {
    display: grid
}

@media (min-width: 48em) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (min-width: 80em) {
    .grid-4 {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (min-width: 96em) {
    .grid-4 {
        grid-template-columns: repeat(4, 1fr)
    }
}

.grid-8-4 {
    display: grid
}

@media (min-width: 64em) {
    .grid-8-4 {
        grid-template-columns: 8fr 4fr
    }
}

.grid-9-3 {
    display: grid
}

@media (min-width: 64em) {
    .grid-9-3 {
        grid-template-columns: 9fr 3fr
    }
}

.grid-1-3 {
    display: grid
}

@media (min-width: 64em) {
    .grid-1-3 {
        grid-template-columns: 1fr 3fr
    }
}

.row-span-2 {
    grid-row: span 2
}

.reverse-columns {
    display: flex;
    flex-direction: column
}

@media (min-width: 64em) {
    .reverse-columns {
        flex-direction: row-reverse;
        justify-content: space-between
    }
}

@media (min-width: 80em) {
    .reverse-columns>:first-child {
        flex-basis: 25%
    }

    .reverse-columns>:last-child {
        flex-basis: 66.6666666667%
    }
}

.fit-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--_col, 20rem), 100%), 1fr));
    gap: var(--_gap, var(--gap-32))
}

.fill-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--_col, 20rem), 100%), 1fr));
    gap: var(--_gap, var(--gap-32))
}

.mx-auto {
    margin-inline: auto
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.items-start {
    align-items: flex-start
}

.items-end {
    align-items: flex-end
}

.items-center {
    align-items: center
}

.flex-between {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between
}

.text-limit {
    max-width: var(--text-limit)
}

.vertically-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.flow>*+* {
    margin-top: var(--flow-space, 1em)
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0
}

.aspect-16-9 {
    aspect-ratio: 16/9
}

.aspect-3-2 {
    aspect-ratio: 3/2
}

.aspect-4-3 {
    aspect-ratio: 4/3
}

.bg-neutral-100 {
    background-color: var(--neutral-100)
}

.bg-neutral-200 {
    background-color: var(--neutral-200)
}

.bg-neutral-300 {
    background-color: var(--neutral-300)
}

.bg-neutral-400 {
    background-color: var(--neutral-400)
}

.bg-neutral-450 {
    background-color: var(--neutral-450)
}

.bg-neutral-500 {
    background-color: var(--neutral-500)
}

.bg-neutral-550 {
    background-color: var(--neutral-550)
}

.bg-neutral-600 {
    background-color: var(--neutral-600)
}

.bg-neutral-700 {
    background-color: var(--neutral-700)
}

.bg-neutral-800 {
    background-color: var(--neutral-800)
}

.bg-neutral-900 {
    background-color: var(--neutral-900)
}

.bg-neutral-950 {
    background-color: var(--neutral-950)
}

.bg-red-100 {
    background-color: var(--red-100)
}

.bg-red-400 {
    background-color: var(--red-400)
}

.bg-red-400-opaque {
    background-color: var(--red-400-opaque)
}

.bg-red-700 {
    background-color: var(--red-700)
}

.bg-green-400 {
    background-color: var(--green-400)
}

.bg-blue-100 {
    background-color: var(--blue-100)
}

.bg-blue-400 {
    background-color: var(--blue-400)
}

.bg-blue-400-opaque {
    background-color: var(--blue-400-opaque)
}

.bg-orange-400 {
    background-color: var(--orange-400)
}

.text-neutral-100 {
    color: var(--neutral-100)
}

.text-neutral-200 {
    color: var(--neutral-200)
}

.text-neutral-300 {
    color: var(--neutral-300)
}

.text-neutral-400 {
    color: var(--neutral-400)
}

.text-neutral-450 {
    color: var(--neutral-450)
}

.text-neutral-500 {
    color: var(--neutral-500)
}

.text-neutral-550 {
    color: var(--neutral-550)
}

.text-neutral-600 {
    color: var(--neutral-600)
}

.text-neutral-700 {
    color: var(--neutral-700)
}

.text-neutral-800 {
    color: var(--neutral-800)
}

.text-neutral-900 {
    color: var(--neutral-900)
}

.text-neutral-950 {
    color: var(--neutral-950)
}

.text-red-100 {
    color: var(--red-100)
}

.text-red-400 {
    color: var(--red-400)
}

.text-red-700 {
    color: var(--red-700)
}

.text-green-400 {
    color: var(--green-400)
}

.text-blue-100 {
    color: var(--blue-100)
}

.text-blue-400 {
    color: var(--blue-400)
}

.text-orange-400 {
    color: var(--orange-400)
}

.lg-show {
    display: none
}

@media (min-width: 64em) {
    .lg-show {
        display: block
    }
}

.radius-xs {
    border-radius: var(--radius-xs)
}

.radius-sm {
    border-radius: var(--radius-sm)
}

.radius-md {
    border-radius: var(--radius-md)
}

.radius-lg {
    border-radius: var(--radius-lg)
}

.radius-circle {
    border-radius: var(--radius-circle)
}

.radius-pill {
    border-radius: var(--radius-pill)
}

.gap-6 {
    gap: var(--gap-6)
}

.gap-8 {
    gap: var(--gap-8)
}

.gap-12 {
    gap: var(--gap-12)
}

.gap-16 {
    gap: var(--gap-16)
}

.gap-20 {
    gap: var(--gap-20)
}

.gap-24 {
    gap: var(--gap-24)
}

.gap-32 {
    gap: var(--gap-32)
}

.gap-40 {
    gap: var(--gap-40)
}

.gap-48 {
    gap: var(--gap-48)
}

.gap-64 {
    gap: var(--gap-64)
}

.gap-row-0 {
    row-gap: 0
}

.mt-8 {
    margin-top: var(--space-8)
}

.my-32 {
    margin-top: var(--space-32);
    margin-bottom: var(--space-32)
}

.my-48,
.my-64 {
    margin-top: var(--space-48);
    margin-bottom: var(--space-48)
}

@media (min-width: 48em) {
    .my-64 {
        margin-top: var(--space-64);
        margin-bottom: var(--space-64)
    }
}

.my-100 {
    margin-top: var(--space-48);
    margin-bottom: var(--space-48)
}

@media (min-width: 48em) {
    .my-100 {
        margin-top: var(--space-100);
        margin-bottom: var(--space-100)
    }
}

.py-24 {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24)
}

.py-32 {
    padding-top: var(--space-32);
    padding-bottom: var(--space-32)
}

.py-48,
.py-64 {
    padding-top: var(--space-48);
    padding-bottom: var(--space-48)
}

@media (min-width: 48em) {
    .py-64 {
        padding-top: var(--space-64);
        padding-bottom: var(--space-64)
    }
}

.py-100 {
    padding-top: var(--space-48);
    padding-bottom: var(--space-48)
}

@media (min-width: 48em) {
    .py-100 {
        padding-top: var(--space-100);
        padding-bottom: var(--space-100)
    }
}

.divider-hr-32>*:not([hidden])+* {
    margin-top: var(--space-32);
    border-top: 1px solid var(--neutral-400);
    padding-top: var(--space-32)
}

.divider-hr-64>*:not([hidden])+* {
    margin-top: var(--space-48);
    border-top: 1px solid var(--neutral-400);
    padding-top: var(--space-48)
}

@media (min-width: 48em) {
    .divider-hr-64>*:not([hidden])+* {
        margin-top: var(--space-64);
        padding-top: var(--space-64)
    }
}

.styleguide {
    background-color: #fff;
    font-size: 1rem
}

.styleguide section {
    max-width: 90rem;
    margin-inline: auto;
    padding: 4rem 0;
    border-block: 2px dashed #ddd;
    margin-top: -1px
}

.styleguide section>h2 {
    font-weight: 700;
    font-size: 2rem
}

.styleguide section>h3 {
    font-weight: 700;
    font-size: 1.125rem;
    margin-top: 2.5em;
    margin-bottom: 1.25em;
    text-transform: uppercase;
    display: inline-block;
    background-color: #ddd;
    padding: 1rem
}

.styleguide section>ul {
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 1.25rem
}

.styleguide section>ul li {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: .5rem;
    position: relative
}

.styleguide section>ul li>span {
    width: 5rem;
    aspect-ratio: 1
}

.styleguide>h1 {
    font-weight: 700;
    font-size: 4rem;
    text-align: center;
    margin-block: 1em
}