/* Table of contents

    1. Resets
    2. Custom properties
        2.1 Colors
        2.2 Fonts
            2.2.1 Font families
            2.2.2 Font sizes
            2.2.3 Font weights
            2.2.4 Font styles
        2.3 Spacings
            2.3.1 Page spacing
            2.3.2 Section spacing
            2.3.3 Header spacing
            2.3.4 Footer spacing
            2.3.5 Content spacing
            2.3.6 Element spacing
            2.3.7 Underline spacing
            2.3.8 Socials spacing
        2.4 Sizings and gaps
        2.5 Transitions
        2.6 Line heights
        2.7 Border radiuses
        2.8 Border widths
        2.9 Underline thicknesses
        2.10 Paddings
    3. General styles
    4. Typography
    5. Layout
        5.1 Wrapper
        5.2 Spacings
        5.3 Header
        5.4 Navigation
        5.5 Main
            5.5.1 Hero
            5.5.2 Split screen
        5.6 Sections
        5.7 Footer
    6. Components
        6.1 Logo
        6.2 CTA
        6.3 List
            6.3.1 List Items
            6.3.2 Bullet list
        6.4 Two-column
        6.5 Form
        6.6 Scroll indicator
        6.7 Modules
            6.7.1 Scroll module
            6.7.2 Entry module
            6.7.3 App module
            6.7.4 Bordered module
        6.8 Accordion
        6.9 Modal
        6.10 Progress bar
        6.11 Tooltip
    7. Utilities
    8. Animations

*/

/* =================================================================================================
                                            1. Resets
================================================================================================= */

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

* {
    margin: 0;
    padding: 0;
    font: inherit;
}

ul[role="list"],
ol[role="list"] {
    list-style: none;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

html, body {
    width: 100%;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    -webkit-font-smoothing: auto;
}

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

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

img {
    pointer-events: none; /* Disable visual search on image hover in Microsoft Edge */
}

input,
textarea {
    border: 0;
    outline: none;
}

input:not([type="checkbox"], [type="radio"], .code-input) {
    display: block;
    width: 100%;
}

button {
    background-color: transparent;
    border: 0;
    letter-spacing: var(--ls);
}

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

/* =================================================================================================
                                        2. Custom properties
================================================================================================= */

:root {
    /* 2.1 Colors */
    --bg-primary: #180f40;
    --bg-secondary: #120837;
    --bg-accent-primary: #1c134b;
    --bg-accent-secondary: #211b53;

    --bg-online: linear-gradient(90deg, #a8e6a1, #78cc72);
    --bg-offline: linear-gradient(90deg, #f28c8c, #c94c4c);
    --bg-under-load: linear-gradient(90deg, #fff29c, #d9c64a);

    --clr-primary: #fff;
    --clr-secondary: #b0c4de;
    --clr-tertiary: #9db4d8;

    --clr-accent-primary: #6b8dfc;
    --clr-accent-secondary: #ff7f50;
    --clr-accent-tertiary: #78cc72;
    --clr-accent-quaternary: #b68dfc;

    --clr-btn: #4169e1;
    --clr-btn-hover: #395dcb;

    --clr-muted: #798eb8;

    --bg-error: #361c1c;
    --clr-error: #e74c3c;

    /* 2.2 Fonts */
        /* 2.2.1 Font families */
        --ff-primary: 'Open Sans', sans-serif;
        --ff-accent: 'Oxanium', sans-serif;

        /* 2.2.2 Font sizes */
        --fs-200: .9em;
        --fs-300: .985em;
        --fs-400: 1em;
        --fs-500: 1.1em;
        --fs-600: 1.5em;
        --fs-700: 1.675em;
        --fs-800: 2em;
        --fs-900: 3.3em;

        --fs-body: .925rem;
        --fs-h1: clamp(2em, 4vw, 2.765em);
        --fs-scalable-300: clamp(var(--fs-400), 1.5vw, 1.1em);
        --fs-scalable-400: clamp(var(--fs-400), 1.75vw, 1.2em);
        --fs-scalable-500: clamp(var(--fs-500), 1.5vw, 1.2em);
        --fs-scalable-600: clamp(var(--fs-500), 1.75vw, 1.3em);

        /* 2.2.3 Font weights */
        --fw-400: 400;
        --fw-500: 500;
        --fw-600: 600;
        --fw-700: 700;
        --fw-800: 800;

        /* 2.2.4 Font styles */
        --tt-uppercase: uppercase;
        --ls: -.01em;

    /* 2.3 Spacings */
        /* 2.3.1 Page spacing */
        --page-spacing-inline: clamp(1rem, 2.5vw, 2rem);
        --page-spacing-block: clamp(1rem, 2.5vw, 2rem);
        --page-spacing-block-no-nav: calc(var(--page-spacing-block) + .35rem);

        /* 2.3.2 Section spacing */
        --section-spacing-top: 2.2rem;
        --section-spacing-top-no-hero: clamp(5.65rem, 16vw, 8.05rem);
        
        --section-spacing-bottom-mobile: 5.5rem;
        --section-spacing-bottom-desktop: 16rem;
        --section-spacing-bottom: clamp(var(--section-spacing-bottom-mobile), 16vw, var(--section-spacing-bottom-desktop));

        /* 2.3.3 Header spacing */
        --header-nav-spacing: clamp(3rem, 4vw, 4.15rem);

        /* 2.3.4 Footer spacing */
        --footer-nav-spacing-min: 1rem;
        --footer-nav-spacing-max: 1.4rem;
        --footer-nav-spacing: clamp(var(--footer-nav-spacing-min), 2.5vw, var(--footer-nav-spacing-max));
        --footer-nav-spacing-large: calc(var(--footer-nav-spacing) * 1.5);

        /* 2.3.5 Content spacing */
        --content-spacing-top: clamp(2.25rem, 2.5vw, 3rem);
        --column-spacing-sm: 1.75rem;
        --column-spacing-md: 4rem;
        --column-spacing-scalable: clamp(var(--column-spacing-sm), 3.25vw, var(--column-spacing-md));

        /* 2.3.6 Element spacing */
        --cta-spacing-top: clamp(1.5rem, 2.5vw, 1.75rem);
        --cta-spacing-top-xl: clamp(1.615rem, 2.5vw, 2.25rem);
        --arrow-spacing: .75em;
        --arrow-spacing-hover: .25em;

        /* 2.3.7 Underline spacing */
        --underline-offset: .275rem;

        /* 2.3.8 Socials spacing */
        --footer-socials-spacing: clamp(var(--footer-nav-spacing-min), 2.5vw, 2rem);
        --social-links-gap: 1.25em;

        /* 2.3.9 Form spacing */
        --form-label-spacing: .5rem;
        --form-input-padding: .8em;
        --form-min-row-gap: 1.55rem;
        --form-max-row-gap: 2.25rem;
        --form-row-gap-breakpoint: 2.5vw;
        --form-row-gap: clamp(var(--form-min-row-gap), var(--form-row-gap-breakpoint), var(--form-max-row-gap));

    /* 2.4 Sizings and gaps */
    --min-column: 18rem;
    --list-column-gap: var(--column-spacing-sm);

    --list-row-gap-min: 2.5rem;
    --list-row-gap-max: 6rem;
    --list-row-gap-breakpoint: 6.5vw;
    --list-row-gap: clamp(var(--list-row-gap-min), var(--list-row-gap-breakpoint), var(--list-row-gap-max));

    --grid-cell-gap: clamp(.5rem, 1vw, 1rem);

    /* 2.5 Transitions */
    --ts-hero: 1050ms;
    --ts-extra-slow: 400ms;
    --ts-slow: 350ms;
    --ts-medium: 250ms;
    --ts-semi-fast: 150ms;
    --ts-fast: 100ms;
    --ts-very-fast: 80ms;

    /* 2.6 Line heights */
    --lh-100: 1;
    --lh-200: 1.15;
    --lh-300: 1.35;
    --lh-400: 1.55;
    --lh-500: 1.75;

    /* 2.7 Border radiuses */
    --br-300: .35em;
    --br-400: .44em;
    --br-500: .65rem;
    --br-600: .85rem;
    --br-scalable-600: clamp(var(--br-500), 2.5vw, var(--br-600));

    /* 2.8 Border widths */
    --bw-300: .1rem;
    --bw-400: 3px;
    --bw-500: .2em;
    --bw-900: clamp(.425rem, 1.5vw, .5rem);

    /* 2.9 Underline thicknesses */
    --underline-thickness: .1rem;

    /* 2.10 Paddings */
    --padding-400-min: 1.65rem;
    --padding-400-max: 2.75rem;
    --padding-400-breakpoint: 3.65vw;
    --padding-400: clamp(var(--padding-400-min), var(--padding-400-breakpoint), var(--padding-400-max));

    --btn-padding-min: .65rem;
    --btn-padding-max: .75rem;
    --btn-padding-block: clamp(var(--btn-padding-min), 2.5vw, var(--btn-padding-max));
    --btn-padding-inline: clamp(calc(var(--btn-padding-min) * 2), 2.5vw, calc(var(--btn-padding-max) * 2));
    
}

/* =================================================================================================
                                        3. General styles
================================================================================================= */

/* Increase font weights for iOS and other WebKit environments */
@supports(-webkit-touch-callout: none) {
    :root {
        --fw-400: 500;
        --fw-500: 600;
    }
}

body {
    font-family: var(--ff-primary);
    font-size: var(--fs-body);
    font-weight: var(--fw-400);
    letter-spacing: var(--ls);
    color: var(--clr-secondary);
}

/* =================================================================================================
                                        4. Typography
================================================================================================= */

h1:not(.graphic, .ornamental),
h2:not(.ornamental),
h3.primary {
    font-family: var(--ff-accent);
    font-size: var(--fs-h1);
    font-weight: var(--fw-800);
    color: var(--clr-primary);
    text-transform: var(--tt-uppercase);
    line-height: 1.25;
    max-width: 17ch;
}

h1.sm-width,
h2:not(.ornamental).sm-width,
h3.primary.sm-width {
    max-width: 15ch;
}

h1.l-width,
h2:not(.ornamental).l-width,
h3.primary.l-width {
    max-width: 25ch;
}

h1.xl-width,
h2:not(.ornamental).xl-width,
h3.primary.xl-width {
    max-width: 35ch;
}

@supports(-webkit-text-stroke: 1px white) {
    h1:not(.graphic, .ornamental), h2:not(.ornamental), h3.primary {
        -webkit-text-stroke: 1px white;
        letter-spacing: .019em;
    }
}

h1.ornamental,
h2.ornamental,
p.ornamental {
    --_padding-bottom: 2.1em;
    font-family: var(--ff-accent);
    font-size: var(--fs-scalable-400);
    font-weight: var(--fw-700);
    text-transform: var(--tt-uppercase);
    padding-bottom: var(--_padding-bottom);
    color: var(--clr-accent-primary);
    line-height: var(--lh-100);
}

h1.ornamental a,
h2.ornamental a,
p.ornamental a {
    color: inherit;
    text-decoration: none;
}

h1.ornamental a:has(> i) i,
h2.ornamental a:has(> i) i,
p.ornamental a:has(> i) i {
    padding-right: var(--arrow-spacing);
}

h3:not(.primary, .app-module__heading, .entry-module__heading, .bordered-module__heading) {
    font-size: var(--fs-scalable-500);
    font-weight: var(--fw-600);
    color: var(--clr-primary);
    padding-bottom: .565em;
}

h3.sm {
    font-size: var(--fs-scalable-300);
}

h4 {
    color: var(--clr-primary);
    font-weight: var(--fw-500);
    padding-bottom: .25em;
}

h5 {
    font-family: var(--ff-accent);
    color: var(--clr-primary);
    font-size: var(--fs-scalable-400);
    font-weight: var(--fw-700);
    text-transform: var(--tt-uppercase);
}

a.underlined:not(header .nav__links a),
button.underlined {
    color: var(--clr-secondary);
    font-weight: var(--fw-500);
    font-size: inherit;
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
    text-decoration-thickness: var(--underline-thickness);
}

a.underlined:not(header .nav__links a):hover,
button.underlined:hover {
    text-decoration: none;
}

p.section-description,
p.section-note {
    max-width: 50ch;
    font-weight: var(--fw-500);
    font-size: var(--fs-scalable-400);
    line-height: var(--lh-500);
}

p.section-description {
    padding-top: .55em;
}

p.section-note {
    text-box-trim: trim-start;
    text-box-edge: cap alphabetic;
}

/* =================================================================================================
                                            5. Layout
================================================================================================= */

/* 5.1 Wrapper */
.wrapper {
    --_max-width: 81.25em;
    --_inline-padding: var(--page-spacing-inline);
    width: min(var(--_max-width), 100% - (var(--_inline-padding) * 2));
    margin-inline: auto;
}

.wrapper-wide {
    --_max-width: 137.25em;
    width: min(var(--_max-width), 100%);
    margin-inline: auto;
}

.wrapper-wide.top {
    padding-left: var(--page-spacing-inline);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@supports(padding: max(0px)) {
    .wrapper {
        --_inline-padding: max(var(--page-spacing-inline), env(safe-area-inset-left), env(safe-area-inset-right));
    }
    
    .wrapper-wide.top {
        padding-left: max(var(--page-spacing-inline), env(safe-area-inset-left));
    }

    .wrapper-wide.top:not(:has(.nav__btn)) {
        padding-block: var(--page-spacing-block);
        padding-right: max(var(--page-spacing-inline), env(safe-area-inset-right));
    }
}

/* 5.2 Spacings */
main:not(.split-screen) > *:not(.hero) {
    padding-top: var(--section-spacing-top);
    padding-bottom: var(--section-spacing-bottom);
}

main:not(.split-screen) > section:not(.hero):first-of-type {
    padding-top: var(--section-spacing-top-no-hero);
}

footer {
    margin-top: auto;
    padding-block: var(--section-spacing-top) var(--page-spacing-block);
}

.content-flow {
    margin-top: var(--content-spacing-top);
}

/* 5.3 Header */
header {
    position: fixed;
    inset: 0 0 auto 0;
    display: grid;
    align-items: center;
    z-index: 99;
    transition: transform calc(var(--ts-hero) / 3) ease calc(var(--ts-hero) + var(--ts-hero) / 3);
}

header.visually-hidden {
    transform: translateY(-100%);
}

header:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + clamp(4rem, 10vw, 8rem));
    background-image: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0));
    opacity: .5;
    pointer-events: none;
    z-index: -1;
    transition: opacity var(--ts-hero) ease;
}

/* 5.4 Navigation */
header .nav__links {
    display: flex;
    align-items: center;
    line-height: var(--lh-100);
}

header .nav__links a {
    display: block;
    color: var(--clr-secondary);
    text-decoration: none;
    transition: color var(--ts-semi-fast) ease-in-out;
}

header .nav__links a:hover,
header .nav__links a:focus {
    color: var(--clr-primary);
}

header .nav__links a.active {
    color: var(--clr-primary);
}

@media (max-width: 54.999em) {
    .nav__menu {
        position: fixed;
        inset: 0;
        display: none;
        background-image: linear-gradient(to bottom, var(--bg-secondary), var(--bg-primary));
        padding-bottom: var(--page-spacing-block);
        animation: vanish var(--ts-medium);
    }

    .nav__menu.active {
        display: block;
        animation: fadeIn var(--ts-medium);
    }
    
    .nav__menu:after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle at 0% 50%, rgba(0, 255, 255, .02), transparent 65%);
        pointer-events: none;
        z-index: -1;
    }

    .nav__btn {
        font-size: var(--fs-600);
        color: var(--clr-primary);
        padding-block: var(--page-spacing-block);
        padding-inline: var(--page-spacing-inline);
        cursor: pointer;
    }

    @supports(padding: max(0px)) {
        .nav__btn {
            padding-right: max(var(--page-spacing-inline), env(safe-area-inset-right));
        }
    }
    
    .nav__btn i {
        pointer-events: none;
    }
    
    .nav__open i {
        transform: scaleX(-1);
    }

    header .nav__links {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: var(--ff-accent);
        font-weight: var(--fw-700);
        font-size: var(--fs-700);
        text-transform: var(--tt-uppercase);
        flex-direction: column;
        will-change: transform;
    }
    
    header .nav__links li {
        transform: translateY(.65em);
    }

    header .nav__links li.translateIn {
        --_speed: var(--ts-medium);
        --_delay: 25ms;
        animation-name: translateIn;
        animation-fill-mode: forwards;
        animation-duration: var(--_speed);
    }
    
    header .nav__links li:nth-child(2).translateIn {
        animation-delay: var(--_delay);
    }
    
    header .nav__links li:nth-child(3).translateIn {
        animation-delay: calc(var(--_delay) * 2);
    }
    
    header .nav__links li:nth-child(4).translateIn {
        animation-delay: calc(var(--_delay) * 3);
    }
    
    header .nav__links li:nth-child(5).translateIn {
        animation-delay: calc(var(--_delay) * 4);
    }

    header .nav__links a {
        padding-block: .75em;
    }

    .nav__menu .social-links {
        position: absolute;
        bottom: var(--page-spacing-block);
        left: 50%;
        transform: translateX(-50%);
    }
}

@media (min-width: 55em) {
    header > .wrapper-wide.top {
        padding-block: var(--page-spacing-block);
    }
    
    .nav__btn,
    .nav__menu .logo,
    .nav__menu .social-links {
        display: none;
    }

    .nav__menu {
        padding-right: var(--page-spacing-inline);
    }

    header .nav__links {
        font-size: var(--fs-scalable-300);
        font-weight: var(--fw-600);
        gap: var(--header-nav-spacing);
    }
}

/* 5.5 Main */
    /* 5.5.1 Hero */
    .hero {
        --_min-height: 110vh;
        --_max-height: 120vh;
        --_height: clamp(var(--_min-height), 40vh + 50vw, var(--_max-height));
        --_placement: 30% 70%;
        position: relative;
        isolation: isolate;
        min-height: var(--_height);
        overflow: hidden;
    }

    .hero:before {
        content: "";
        position: absolute;
        display: block;
        inline-size: 100%;
        min-height: var(--_height);
        pointer-events: none;
        z-index: -1;
    }

    .layer {
        display: block;
        object-fit: cover;
        object-position: var(--_placement);
        inline-size: 100%;
        min-height: var(--_height);
        pointer-events: none;
    }

    .layer:not(.foreground) {
        position: fixed;
    }

    .layer.background {
        z-index: -1;
    }

    .layer.foreground {
        position: absolute;
        bottom: 0;
        transform: translateY(1px);
        z-index: 2;
    }

    .hero-content {
        position: fixed;
        inset: 0;
    }

    .hero-content * {
        pointer-events: inherit;
    }

    .hero-content > .wrapper {
        --_mt-min: 7.25rem;
        --_mt-max: 14rem;
        display: grid;
        justify-items: center;
        text-align: center;
        color: var(--clr-primary);
        margin-top: clamp(var(--_mt-min), calc(12.75vh + 5vw), var(--_mt-max));
    }

    .hero-content__title {
        --_min-width: 300px;
        --_max-width: 600px;
        width: clamp(var(--_min-width), calc(18vw + 32vh), var(--_max-width));
        min-width: var(--_min-width);
        height: auto;
        pointer-events: none;
    }

    .hero-content__description {
        font-size: var(--fs-scalable-500);
        font-weight: var(--fw-600);
        line-height: var(--lh-400);
        text-shadow: 0px 0px 20px rgba(255, 255, 255, .15);
        max-width: clamp(30ch, 70vw, 50ch);
        margin-top: 1em;
    }

    .hero-content__cta {
        --_clr-start: rgba(40, 35, 85, .9);
        --_clr-end: rgba(18, 8, 55, .9);
        position: relative;
        display: inline-block;
        background-image: linear-gradient(135deg, var(--_clr-start), var(--_clr-end));
        backdrop-filter: blur(2px);
        color: var(--clr-primary);
        font-family: var(--ff-accent);
        font-size: var(--fs-scalable-500);
        font-weight: var(--fw-700);
        letter-spacing: .01rem;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        padding: .9em 2em .8em 2em;
        border-radius: var(--br-400);
        margin-top: clamp(1.65em, 2.5vw, 2.15em);
        transition: all .3s ease;
    }

    .hero-content__cta:before {
        content: "";
        position: absolute;
        inset: 0;
        background-color: var(--_clr-end);
        border-radius: inherit;
        opacity: 0;
        transition: opacity var(--ts-semi-fast) ease-in-out;
        z-index: -1;
    }
    
    .hero-content__cta:hover:before {
        opacity: 1;
    }

    /* 5.5.2 Split screen */
    .split-screen {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .split-screen > .split-screen__content {
        padding-block: var(--section-spacing-top);
    }

    .split-screen > section:last-of-type {
        flex: 1;
        margin-top: auto;
    }

    .split-screen__graphic {
        position: relative;
        height: 50vh;
    }
    
    .split-screen__graphic.signup {
        background-image: url('/assets/images/signup/thumbnail.svg');
        background-position: 64% 40%;
        background-size: cover;
    }

    .split-screen__graphic > img {
        position: absolute;
        inset: 0;
        height: 100%;
        inline-size: 100%;
        object-fit: cover;
    }

    .split-screen__graphic > img.login {
        object-position: 72.75% 70%;
    }

    .split-screen__nav {
        position: absolute;
        inset: var(--section-spacing-top-no-hero) auto auto 0;
        z-index: 100;
    }

    .split-screen__nav .wrapper-wide.top {
        flex-direction: column;
        justify-content: unset;
        align-items: start;
        padding-block: 0;
    }

    .split-screen > section .wrapper {
        width: 100%;
        padding: var(--page-spacing-inline);
    }

    .split-screen__nav p {
        color: var(--clr-secondary);
        font-weight: var(--fw-500);
        line-height: 1;  /* Match ornamental heading line-height */
        padding-bottom: .675ch;
    }

    .split-screen__nav a {
        font-weight: var(--fw-500);
    }

    .split-screen__nav p,
    .split-screen__nav a {
        font-size: var(--fs-scalable-300);
    }

    .split-screen__nav a:hover {
        text-decoration: none;
    }

    @media (min-width: 35em) {
        .split-screen__nav {
            inset: 0 0 auto auto;
        }

        .split-screen__nav .wrapper-wide.top {
            align-items: end;
            text-align: right;
            padding-block: var(--page-spacing-block-no-nav);
        }

        .split-screen__nav p {
            line-height: var(--lh-200); /* Match logo line-height */
            padding-bottom: .615ch;
        }
    }

    @media (max-width: 57.999em) {
        body:has(main.split-screen) header > .wrapper-wide.top {
            padding-block: var(--page-spacing-block-no-nav)
        }
    }

    @media (min-width: 58em) {
        .split-screen {
            display: grid;
            grid-template-columns: 1fr 1fr;
            min-height: 100vh;
        }

        .split-screen.image-content {
            grid-template-areas: 'right left';
        }

        .split-screen.content-image {
            grid-template-areas: 'left right';
        }

        .split-screen__nav {
            inset: 0 auto 0 50%;
        }

        .split-screen__nav .wrapper-wide.top {
            align-items: end;
            text-align: right;
            transform: translateX(-100%);
            padding-block: var(--page-spacing-block);
        }

        .split-screen > section {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .split-screen > section:first-of-type {
            padding-top: 0;
        }

        .split-screen > section .wrapper {
            width: auto;
            max-width: 36rem;
            padding: var(--section-spacing-top-no-hero) var(--page-spacing-inline);
        }

        .split-screen > .split-screen__content {
            grid-area: left;
            display: grid;
            place-content: center;
        }

        .split-screen__graphic > img.login {
            object-position: 56.5% 50%;
        }
    }

    @media (min-width: 70em) {
        .split-screen > .split-screen__graphic {
            background-position: 65% 50%;
        }

        .split-screen__graphic > img.login { object-position: 53.5% 50%; }
    }

    @media (min-width: 80em) { .split-screen__graphic > img.login { object-position: 49% 50%; } }
    @media (min-width: 90em) { .split-screen__graphic > img.login { object-position: 43.5% 50%; } }
    @media (min-width: 100em) { .split-screen__graphic > img.login { object-position: 40% 50%; }}
    @media (min-width: 105em) { .split-screen__graphic > img.login { object-position: 36.5% 50%; }}

    @media (min-width: 115em) {
        .split-screen > .split-screen__graphic {
            background-position: 75% 50%;
        }

        .split-screen__graphic > img.login {
            object-position: 0% 50%;
        }
    }

/* 5.6 Sections */
main:not(.split-screen) section:not(.hero) {
    position: relative;
    scroll-margin-top: 3.5em;
}

section:not(.hero) {
    background-color: var(--bg-primary);
}

/* 5.7 Footer */
footer {
    --_min-margin: 4rem;
    --_max-margin-top: 5.35rem;
    --_max-margin-bottom: 12rem;
    --_footer-item-spacing: clamp(4rem, 9vw, 7rem);
    --_border-top: 2px solid var(--bg-accent-secondary);
    --_padding-block: calc(var(--page-spacing-block) * 1.215);
    position: relative;
    background-color: var(--bg-primary);
}

.footer-top {
    border-top: var(--_border-top);
    margin-top: clamp(var(--_min-margin), 6vw, var(--_max-margin-top));
}

.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: start;
    column-gap: var(--_footer-item-spacing);
    margin-top: clamp(var(--_min-margin), 6vw, var(--_max-margin-top));
}

.footer-right {
    justify-items: end;
}

.footer-bottom {
    position: relative;
    border-top: var(--_border-top);
    padding-top: var(--_padding-block);
}

.footer-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--footer-nav-spacing-large);
}

.footer-end__left {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--footer-nav-spacing-large);
}

.footer-navigation { 
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--_footer-item-spacing);
    margin-bottom: clamp(var(--_min-margin), 10vw, var(--_max-margin-bottom));
}

footer .logo {
    padding-bottom: 1rem;
}

.footer-navigation__heading,
.footer-stat__heading {
    font-family: var(--ff-accent);
    font-size: var(--fs-scalable-400);
    font-weight: var(--fw-700);
    text-transform: var(--tt-uppercase);
    padding-bottom: var(--footer-nav-spacing);
}

.footer-navigation__heading {
    color: var(--clr-primary);
}

footer .nav__links {
    display: flex;
    flex-direction: column;
    gap: var(--footer-nav-spacing);
    font-size: var(--fs-scalable-300);
}

footer .nav__links a {
    display: block;
    font-size: inherit;
    font-weight: var(--fw-500);
    color: var(--clr-secondary);
    text-decoration: none;
}

footer .nav__links a:hover,
footer .nav__links a:focus {
    color: var(--clr-primary);
}

.footer-slogan {
    font-size: var(--fs-scalable-400);
    font-weight: var(--fw-500);
    line-height: var(--lh-500);
    max-width: 35ch;
}

.footer-stats {
    --_stat-spacing: var(--header-nav-spacing);
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: end;
    gap: var(--_stat-spacing);
    margin-bottom: clamp(var(--_min-margin), 10vw, var(--_max-margin-bottom));
}

@media (max-width: 49.999em) {
    .footer-stats {
        display: none;
    }
}

.footer-stat {
    display: block;
    text-decoration: none;
}

.footer-stat__heading {
    color: var(--clr-tertiary);
}

.footer-stat__value {
    font-family: var(--ff-accent);
    font-size: clamp(2rem, 3.5vw, 2.5rem);
    font-weight: var(--fw-600);
    color: var(--clr-secondary);
    text-align: center;
    line-height: 1;
}

.footer-stat:hover h5 {
    color: var(--clr-secondary);
}

.footer-stat:hover .footer-stat__value {
    color: var(--clr-primary);
}

.footer-socials {
    display: flex;
    gap: var(--social-links-gap);
    align-items: center;
}

.social-links {
    display: flex;
    flex-direction: row;
    gap: var(--social-links-gap);
    line-height: var(--lh-100);
}

.social-links a {
    color: var(--clr-secondary);
}

.social-links a:hover,
.social-links a:focus {
    color: var(--clr-primary);
}

.social-label {
    font-family: var(--ff-accent);
    font-size: var(--fs-scalable-300);
    font-weight: var(--fw-500);
    color: var(--clr-muted);
}

@media (max-width: 34.999em) {
    .social-label {
        display: none;
    }
}

p.copyright {
    font-family: var(--ff-accent);
    font-size: var(--fs-scalable-300);
    font-weight: var(--fw-500);
    color: var(--clr-muted);
}

/* =================================================================================================
                                        6. Components
================================================================================================= */

/* 6.1 Logo */
.logo {
    display: inline-block;
    font-size: var(--fs-scalable-500);
    font-family: var(--ff-accent);
    font-weight: var(--fw-700);
    color: var(--clr-primary);
    text-decoration: none;
}

.logo > span {
    color: var(--clr-accent-primary);
}

.logo.primary {
    font-size: var(--fs-scalable-500);
}

.logo.secondary {
    font-size: var(--fs-scalable-600);
}

/* 6.2 CTA */
.cta {
    display: inline-block;
    font-weight: var(--fw-600);
    color: var(--clr-primary);
    text-decoration: none;
    cursor: pointer;
    will-change: transform;
}

.cta.box {
    border: var(--bw-400) solid var(--bg-accent-secondary);
    padding: 1.15rem 1.55rem;
    border-radius: var(--br-400);
    line-height: 1;
}

.cta.mt {
    margin-top: var(--cta-spacing-top);
}

.cta.mt-xl {
    margin-top: var(--cta-spacing-top-xl);
}

.section-description + .cta{
    font-size: var(--fs-scalable-400);
}

.cta:has(> i) i {
    padding-left: var(--arrow-spacing);
    transition: transform var(--ts-fast) ease-in-out;
    will-change: transform;
}

.cta:has(> i):hover i {
    transform: translateX(var(--arrow-spacing-hover));
}

.featured .cta:has(> i):hover i {
    transform: none;
}

.featured:hover .cta:has(> i) i {
    transform: translateX(var(--arrow-spacing-hover));
}

/* 6.3 List */
    /* 6.3.1 List Items*/
    .list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--min-column), 1fr));
        column-gap: var(--list-column-gap);
        row-gap: var(--list-row-gap);
        font-size: var(--fs-scalable-300);
        transition: all var(--ts-extra-slow) ease;
    }

    .list:not(.columns) {
        row-gap: var(--content-spacing-top);
    }

    .list__item {
        transition: transform var(--ts-semi-fast) cubic-bezier(.4, 0, .2, 1) 0s;
    }

    .list__item:hover {
        transform: translate3d(0, -4px, 0);
    }

    .list a:not(.cta) {
        color: inherit;
        text-decoration: none;
    }

    .list__image {
        position: relative;
        width: 100%;
        padding-top: 75%; /* 4:3 aspect ratio */
    }

    .list__image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .list__image.square {
        aspect-ratio: 1;
    }

    .list__description {
        font-size: var(--fs-400);
        line-height: var(--lh-400);
        margin-top: .85em;
    }

    .list__item.featured {
        grid-column: 1 / -1;
    }

    .list__item.featured > :first-child {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--min-column), 1fr));
        gap: var(--list-column-gap);
    }

    .list__item.featured:hover {
        transform: unset;
    }

    .list__item.featured .list__description {
        margin-top: unset;
        grid-column: span 1;
        font-weight: var(--fw-500);
        line-height: var(--lh-500);
    }

    .list__item .list__description .list__heading {
        color: var(--clr-primary);
        font-weight: var(--fw-500);
        line-height: 1;
        padding-bottom: .6em;
    }

    .list__description .list__heading:has(+ .list__subheading) {
        padding-bottom: .4em;
    }

    .list__item.featured .list__description .list__heading {
        font-weight: var(--fw-600);
    }

    .list__item.featured .list__description .list__subheading {
        color: var(--clr-tertiary);
        font-weight: var(--fw-500);
        line-height: var(--lh-300);
        padding-bottom: 1rem;
    }

    .list__item:not(.featured) .list__subheading {
        display: none;
    }

    .list__description h4 {
        padding-bottom: .6em;
        line-height: 1;
    }

    .list__item.featured .list__description h4 {
        font-weight: var(--fw-600);
    }

    .list__description h4:has(+ .list__subheading) {
        padding-bottom: .4em;
    }

    .list__item.featured .list__image {
        grid-column: span 2;
        padding-top: 66.67%; /* 3:2 aspect ratio */
    }

    /* 6.3.2 Bullet list */
    .bullet-list {
        font-size: var(--fs-scalable-300);
        color: var(--clr-secondary);
        line-height: var(--lh-400);
    }

    .bullet-list.text {
        line-height: 2;
    }

    .bullet-list.pt {
        padding-top: 1.5rem;
    }

    .bullet-list > li {
        --_bullet-spacing: 1rem;
        --_bullet-size: .35rem;
        --_icon-spacing: 1rem;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: var(--_bullet-spacing);
    }

    .bullet-list:not(.text) > li:not(:last-of-type),
    .bullet-list__appendix-group > :not(:last-child),
    .entry-module__note p span:not(:last-of-type) {
        margin-bottom: clamp(0rem, calc(2rem - 4vw), 1.25rem);
    }

    .bullet-list__placeholder:not(:has(i)) {
        width: var(--_bullet-size);
        height: var(--_bullet-size);
    }

    .bullet-list__placeholder:has(i) {
        width: var(--_icon-spacing);
    }

    .bullet {
        position: relative;
    }

    .bullet:before {
        content: "";
        position: absolute;
        left: calc(var(--_bullet-spacing) * -1);
        top: 50%;
        transform: translate(-100%, -50%);
        display: block;
        width: var(--_bullet-size);
        height: var(--_bullet-size);
        background-color: var(--clr-secondary);
        border-radius: 100vmax;
    }

    .bullet-list__appendix {
        font-size: var(--fs-scalable-300);
        line-height: var(--lh-500);
    }

/* 6.4 Two-column */
.two-column {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min-column), 1fr));
    column-gap: var(--column-spacing-scalable);
    row-gap: var(--content-spacing-top);
}

.two-column__image {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 aspect ratio */
}

.two-column__image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 6.5 Form */
.bordered-modules + form.content-flow {
    margin-top: unset;
}

form:not(.inline) {
    display: grid;
    grid-template-columns: 1fr;
    font-size: var(--fs-scalable-300);
    accent-color: var(--clr-accent-primary);
}

form.inline:not(.hidden) {
    display: inline-block;
}

.form-group {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: baseline;
}

.form-group:not(:last-of-type) {
    margin-bottom: var(--form-row-gap);
}

.form-group:has(.fine-print),
.form-group:has(.tooltip) {
    grid-template-columns: max-content auto auto;
}

label {
    font-weight: var(--fw-500);
    color: var(--clr-secondary);
}

.form-group:has(input:focus-visible) label {
    color: var(--clr-primary);
}

.password-wrapper {
    position: relative;
    grid-column: 1 / -1;
    margin-top: var(--form-label-spacing);
}

.password-wrapper button {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
    height: 100%;
    color: var(--clr-muted);
    font-size: var(--fs-200);
    font-weight: var(--fw-500);
    line-height: 1;
    cursor: pointer;
}

input:not([type="checkbox"]),
textarea {
    background-color: var(--bg-accent-secondary);
    color: var(--clr-secondary);
    border: var(--bw-400) solid var(--bg-accent-secondary);
    border-radius: var(--br-400);
    padding: var(--form-input-padding);
}

.form-group > input:not([type="checkbox"], .code-input),
.form-group > textarea,
.code-inputs {
    grid-column: 1 / -1;
    margin-top: var(--form-label-spacing);
}

.password-wrapper input {
    grid-column: unset;
    margin-top: 0;
    padding-right: clamp(4rem, 5vw, 4.375rem);
}

.form-group:has(input:not(.error):focus-visible) .password-wrapper button {
    color: var(--clr-secondary);
}

textarea {
    min-height: clamp(16.65rem, 50vw, 28rem);
    line-height: 1.85;
    resize: vertical;
    field-sizing: content;
}

input::placeholder,
textarea::placeholder {
    color: var(--clr-muted);
}

input:focus,
textarea:focus {
    border-color: var(--clr-accent-primary);
    outline: calc(var(--bw-400) + 1px) solid var(--clr-accent-primary);
    outline-offset: calc((var(--bw-400) + 1px) * -1);
}

input[type="checkbox"],
input[type="radio"] {
    margin-right: .65ch;
    cursor: pointer;
}

.checkbox-wrapper {
    --_checkbox-size: 1rem;
    --_checkbox-border-radius: .135rem;
    --_checkbox-margin: var(--form-label-spacing);
    --_checkbox-vertical-offset: .15rem;
    margin-right: var(--_checkbox-margin);
}

.checkbox-wrapper:not(.with-anchor) {
    display: flex;
    align-items: center;
    gap: var(--_checkbox-margin);
    cursor: pointer;
    margin-right: unset;
}

.checkbox-wrapper input[type="checkbox"] {
    position: absolute;
    height: 0;
    width: 0;
    opacity: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    pointer-events: none;
}

.checkbox-wrapper.with-anchor .custom-checkbox {
    transform: translateY(var(--_checkbox-vertical-offset));
}

.custom-checkbox {
    position: relative;
    display: block;
    width: var(--_checkbox-size);
    height: var(--_checkbox-size);
    background-color: var(--clr-primary);
    border-radius: var(--_checkbox-border-radius);
    cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox {
    background-color: var(--clr-accent-primary);
}

.checkbox-wrapper input[type="checkbox"]:focus + .custom-checkbox {
    outline: 3px solid var(--clr-accent-primary);
    outline-offset: 3px;
}

.checkbox-wrapper input[type="checkbox"]:checked + .custom-checkbox:after {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--fs-200);
    color: var(--clr-primary);
    line-height: 1;
}

.code-inputs {
    --_size: clamp(2.65rem, 12.75vw, 3.75rem);
    display: grid;
    grid-template-columns: repeat(6, var(--_size));
    gap: clamp(.275rem, 1.55vw, .5rem);
}

.code-input {
    width: var(--_size);
    height: var(--_size);
    text-align: center;
    font-size: var(--fs-scalable-600);
    font-weight: var(--fw-500);
}

.error-message:empty {
    display: none;
}

a.field-option,
.error-message {
    justify-self: end;
    text-align: right;
    font-size: var(--fs-200);
    font-weight: var(--fw-500);
}

.error-message:not(.muted) {
    color: var(--clr-error);
}

.error-message.muted {
    color: var(--clr-muted);
}

input.error,
textarea.error {
    border-color: var(--clr-error);
    outline-color: var(--clr-error);
    color: var(--clr-error);
    background-color: var(--bg-error);
}

input#password.error + button[data-show-password] {
    color: var(--clr-error);
}

a.field-option {
    display: inline-block;
    color: var(--clr-muted);
    text-decoration: none;
}

.hint-message {
    grid-column: 1 / -1;
    color: var(--clr-muted);
    font-size: var(--fs-200);
    font-weight: var(--fw-500);
    margin-top: .25rem;
}

.fine-print {
    max-width: 40ch;
    line-height: var(--lh-400);
}

.submit-form {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    column-gap: var(--form-min-row-gap);
}

button.primary,
button.secondary {
    position: relative;
    font-weight: var(--fw-500);
    padding: 1em 2em;
    border-radius: var(--br-300);
    width: max-content;
    cursor: pointer;
    z-index: 1;
}

button.primary {
    background-image: linear-gradient(135deg, var(--clr-btn), var(--clr-btn-hover));
    color: var(--clr-primary);
}

button.primary:before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--clr-btn-hover);
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--ts-semi-fast) ease-in-out;
    z-index: -1;
}

button.primary:not(:disabled):hover:before,
button.primary.processing:before {
    opacity: 1;
}

button.primary.processing {
    cursor: default;
}

button.secondary {
    color: var(--clr-secondary);
    background-color: rgba(255, 255, 255, .05);
    transition: background-color var(--ts-semi-fast) ease-in-out;
}

button.secondary:hover {
    background-color: rgba(255, 255, 255, .045);
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

button:disabled {
    cursor: default;
    opacity: .5;
}

.bordered-modules.rounded .bordered-module.form-message {
    border-radius: var(--br-scalable-600);
}

.bordered-module.form-message {
    background-color: var(--bg-accent-primary);
    color: var(--clr-tertiary);
    font-size: var(--fs-scalable-300);
    font-weight: var(--fw-600);
    text-align: center;
    padding: clamp(1.1rem, 2.5vw, 1.2rem);
    margin-bottom: clamp(var(--form-min-row-gap), var(--form-row-gap-breakpoint), var(--form-max-row-gap));
}

.bordered-module.form-message.error {
    border-color: var(--clr-error);
    color: var(--clr-error);
    background-color: var(--bg-error);
}

.form-response:empty {
    display: none;
}

.form-response {
    color: var(--clr-muted);
    font-weight: var(--fw-500);
    font-size: var(--fs-200);
}

.input-details {
    grid-column: 1 / -1;
    color: var(--clr-muted);
    font-size: .875em;
    margin-top: .25rem;
}

.form-notes {
    font-size: var(--fs-scalable-300);
    font-weight: var(--fw-500);
    color: var(--clr-muted);
}

.form-notes__heading {
    color: var(--clr-secondary);
    line-height: var(--lh-200);
    padding-bottom: .2rem;
}

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

.form-notes button {
    font-weight: var(--fw-500);
    font-size: inherit;
    cursor: pointer;
}

.form-notes .form-notes__actions button,
.form-notes .form-notes__actions a.underlined {
    color: var(--clr-muted);
}

.form-notes .form-notes__actions button:disabled {
    color: var(--clr-muted);
    opacity: 1;
    filter: none;
    cursor: text;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-notes__response {
    font-weight: var(--fw-500);
}

.custom-select {
    display: inline-block;
}

.custom-select.mt {
    margin-top: var(--cta-spacing-top);
}

.custom-select__btn {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    padding: var(--btn-padding-block) var(--btn-padding-inline);
    font-size: var(--fs-scalable-400);
    font-weight: var(--fw-500);
    color: var(--clr-secondary);
    background-color: var(--bg-accent-primary);
    border: var(--bw-400) solid var(--bg-accent-secondary);
    border-radius: var(--br-400);
    cursor: pointer;
}

.custom-select__btn:active,
.custom-select__btn[aria-expanded="true"],
.custom-select__btn.focused {
    border-color: var(--clr-accent-primary);
    outline: calc(var(--bw-400) + 1px) solid var(--clr-accent-primary);
    outline-offset: calc((var(--bw-400) + 1px) * -1);
}

.custom-select__label::after {
    content: "\f0d7";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    display: inline-block;
    margin-left: 1rem;
}

.custom-select__btn[aria-expanded="true"] .custom-select__label::after {
    transform: rotate(180deg);
}

.custom-select__btn-alt {
    font-size: var(--fs-scalable-300);
    font-weight: var(--fw-500);
    color: var(--clr-secondary);
    margin-left: clamp(.75rem, 2.5vw, 1rem);
    cursor: pointer;
}

.custom-select__listbox-wrapper {
    position: relative;
}

.custom-select__listbox {
    list-style: none;
    position: absolute;
    inset: auto auto auto 0;
    display: grid;
    font-size: var(--fs-scalable-400);
    font-weight: var(--fw-500);
    color: var(--clr-secondary);
    background-color: var(--bg-accent-primary);
    border: var(--bw-400) solid var(--bg-accent-secondary);
    border-radius: var(--br-400);
    margin-top: .35rem;
    z-index: 50;
}

.custom-select__option {
    padding: calc(1.15rem / 2) var(--btn-padding-inline);
}

.custom-select__option:not(.custom-select__header) {
    cursor: pointer;
}

.custom-select__option:hover {
    background-color: var(--bg-accent-secondary);
}

.custom-select__option[data-default],
.custom-select__option[aria-selected="true"] {
    color: var(--clr-primary);
}

.custom-select__option:first-child {
    border-top-left-radius: var(--br-400);
    border-top-right-radius: var(--br-400);
}

.custom-select__option:last-child {
    border-bottom-left-radius: var(--br-400);
    border-bottom-right-radius: var(--br-400);
}

.custom-select.cols-4 .custom-select__listbox {
    grid-template-columns: repeat(4, max-content);
    column-gap: .5rem;
}

.custom-select.cols-4 .custom-select__option {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    text-align: center;
}

.custom-select__header {
    pointer-events: none;
    user-select: none;
    cursor: default;
}

.select-display-box {
    border: var(--bw-400) solid var(--bg-accent-secondary);
    border-radius: var(--br-400);
    padding: calc(clamp(.65rem, 2.5vw, .75rem)* 2);
    margin-top: clamp(.75rem, 2.5vw, 1rem);
}

/* 6.6 Scroll indicator */
.scroll-indicator {
    display: none;
}

.supports-js .indicator-wrapper {
    position: absolute;
    bottom: var(--page-spacing-block);
    left: 50%;
    transform: translateX(-50%);
    opacity: 1;
    transition: opacity var(--ts-slow) ease-in-out;
    z-index: 2;
}

.supports-js .scroll-indicator {
    display: inline-block;
    font-family: var(--ff-accent);
    font-size: var(--fs-200);
    color: var(--clr-primary);
    font-weight: var(--fw-500);
    text-decoration: none;
    animation: bounce infinite 3s;
}

.supports-js .indicator-wrapper.hide {
    opacity: 0;
}

/* 6.7 Modules */
    /* 6.7.1 Scroll module */
    .scroll-module {
        --_bottom-spacing: 1rem;
        position: relative;
        width: 100%;
        overflow-x: auto;
        padding-bottom: var(--_bottom-spacing);
        margin-bottom: calc(var(--_bottom-spacing) * -1);
    }

    .scroll-module::-webkit-scrollbar {
        height: .65rem;
    }
    
    .scroll-module::-webkit-scrollbar-track {
        margin: 0;
    }
    
    .scroll-module::-webkit-scrollbar-thumb {
        background: var(--bg-secondary);
    }

    /* 6.7.2 Entry module */
    .entry-modules {
        --_padding: var(--padding-400);
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        counter-reset: heading;
    }

    .entry-module {
        background-color: var(--bg-secondary);
        border-left: var(--bw-900) solid var(--bg-accent-primary);
        padding: var(--_padding);
    }

    .entry-module.group > :not(:first-child) {
        padding-top: var(--padding-400-max);
    }

    .entry-modules.highlight-first > :first-child,
    .entry-module.highlight-primary {
        border-left-color: var(--clr-accent-primary);
    }

    .entry-module.highlight-secondary {
        border-left-color: var(--clr-accent-secondary);
    }

    .entry-module.highlight-primary .entry-module__subheading {
        color: var(--clr-accent-primary);
    }

    .entry-module.highlight-secondary .entry-module__subheading {
        color: var(--clr-accent-secondary);
    }

    .entry-module__heading {
        color: var(--clr-primary);
        font-size: var(--fs-scalable-400);
        font-weight: var(--fw-700);
        padding-bottom: .15rem;
    }

    .entry-module__heading.spatious,
    .entry-module h3.spatious {
        padding-bottom: 1rem;
    }
    
    .entry-module h3.ordered {
        counter-increment: heading;
        text-decoration: underline;
        text-underline-offset: var(--underline-offset);
        text-decoration-thickness: var(--underline-thickness);
        scroll-margin-top: var(--section-spacing-top-no-hero);
    }

    .entry-module h3.ordered:before {
        content: counter(heading) ". ";
    }

    .entry-module__subheading {
        font-size: var(--fs-scalable-300);
        font-weight: var(--fw-500);
        color: var(--clr-tertiary);
    }

    .entry-module__note {
        font-size: var(--fs-scalable-300);
        font-weight: var(--fw-400);
        color: var(--clr-secondary);
        background-color: var(--bg-accent-primary);
        line-height: var(--lh-500);
        padding: var(--_padding);
    }

    .entry-module__note > p > span {
        display: block;
    }

    .entry-module__note .primary-text {
        color: var(--clr-primary);
        font-weight: var(--fw-500);
    }

    .entry-module__note .timestamp {
        margin-top: 1.5rem;
    }

    /* 6.7.3 App module */
    .app-module-controls {
        display: flex;
        flex-wrap: wrap;
        gap: var(--grid-cell-gap);
    }

    .app-module {
        display: grid;
    }

    .app-module.columns {
        grid-template-columns: repeat(auto-fit, minmax(var(--min-column), 1fr));
    }
    
    .app-module__image {
        position: relative;
        width: 100%;
        padding-top: 66.67%; /* 3:2 aspect ratio */
    }

    .app-module__image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .app-module__content-block {
        background-color: var(--bg-secondary);
        padding: clamp(1.75rem, 4vw, 3.5rem);
        line-height: var(--lh-500);
    }
    
    .app-module__heading {
        font-size: var(--fs-scalable-400);
        font-weight: var(--fw-600);
        color: var(--clr-primary);
        padding-bottom: .25em;
    }
    
    .app-module__description {
        font-size: var(--fs-scalable-300);
        line-height: 1.7;
        max-width: 40ch;
    }

    .app-module__btn {
        font-size: var(--fs-scalable-400);
        font-weight: var(--fw-500);
        color: var(--clr-secondary);
        background-color: var(--bg-accent-primary);
        border: var(--bw-400) solid var(--bg-accent-secondary);
        border-radius: var(--br-400);
        padding: var(--btn-padding-block) var(--btn-padding-inline);
        cursor: pointer;
    }

    .app-module__btn:focus {
        border-color: var(--clr-accent-primary);
        outline: calc(var(--bw-400) + 1px) solid var(--clr-accent-primary);
        outline-offset: calc((var(--bw-400) + 1px) * -1);
    }

    .app-module__action {
        font-size: var(--fs-scalable-300);
        font-weight: var(--fw-500);
        color: var(--clr-secondary);
        cursor: pointer;
    }

    .app-module__result {
        font-size: var(--fs-scalable-300);
        font-weight: var(--fw-500);
        color: var(--clr-secondary);
        line-height: var(--lh-300);
    }

    .app-module__result .highlight {
        color: var(--clr-primary);
        font-size: var(--fs-scalable-500);
        font-weight: 700;
    }

    .app-module.grid-cells {
        grid-template-columns: repeat(8, 1fr);
        grid-auto-rows: 1fr;
        gap: var(--grid-cell-gap);
        min-width: 40rem;
    }

    .grid-cell {
        background-color: var(--bg-accent-primary);
        aspect-ratio: 1 / 1;
    }

    .grid-cell:hover:not(.active),
    .grid-cell.highlight:not(.active) {
        background-color: var(--bg-accent-secondary);
    }

    .grid-cell > button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    /* 6.7.4 Bordered module */
    .bordered-modules {
        --_module-gap: 1rem;
        --_item-gap: 1rem;
        --_column-size: 30rem;
        --_progress-bar-gap: .4rem;
        display: flex;
        flex-wrap: wrap;
        gap: var(--_module-gap);
    }

    .bordered-modules.rounded .bordered-module {
        border-radius: var(--br-600);
    }

    .bordered-module {
        min-width: var(--min-column);
        flex: 1 1 var(--_column-size);
        border: var(--bw-500) solid var(--bg-accent-secondary);
        padding: var(--padding-400);
    }

    .bordered-module__heading {
        color: var(--clr-primary);
        font-size: var(--fs-scalable-600);
        font-weight: var(--fw-700);
        padding-bottom: clamp(var(--padding-400-min), 2.5vw, 2.5rem);
    }

    .bordered-module__groups {
        display: grid;
    }

    .bordered-module__groups.table {
        gap: var(--_item-gap);
    }

    .bordered-module__group {
        display: flex;
        justify-content: space-between;
        font-size: var(--fs-scalable-300);
        gap: var(--_item-gap);
    }

    .bordered-module__group .stat {
        font-weight: var(--fw-500);
        text-align: right;
    }

    .bordered-module__group .highlight {
        color: var(--clr-primary);
    }

    .progress-bar + .bordered-module__group {
        margin-top: var(--_item-gap);
    }

    .bordered-module__group + .progress-bar {
        margin-top: var(--_progress-bar-gap);
    }

/* 6.8 Accordion */
.accordion {
    cursor: pointer;
}

.accordion .accordion__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--ts-semi-fast) ease-in-out;
}

.accordion__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion__icon {
    display: none;
    visibility: hidden;
}

.accordion .accordion__icon {
    display: unset;
    visibility: unset;
    font-size: var(--fs-scalable-600);
    color: var(--clr-primary);
}

.accordion.active .accordion__icon {
    transform: rotate(180deg);
}

/* 6.9 Modal */
.modal {
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: var(--br-400);
    padding: var(--padding-400);
    background-color: #12172a;
    width: calc(100% - var(--page-spacing-inline) * 2);
    max-width: 75ch;
    border: 0;
}

.modal::backdrop {
    background: rgba(0, 0, 0, .7)
}

.close-modal.icon {
    position: absolute;
    top: 0;
    right: 0;
    padding: 1.25rem;
    font-size: var(--fs-scalable-600);
    line-height: var(--lh-100);
    color: var(--clr-primary);
    cursor: pointer;
    transition: color var(--ts-semi-fast) ease-in-out;
}

.modal__heading {
    color: var(--clr-primary);
    font-size: var(--fs-scalable-600);
    font-weight: var(--fw-700);
    padding-bottom: 1rem;
}

.modal__description {
    color: var(--clr-secondary);
    font-size: var(--fs-scalable-300);
    line-height: var(--lh-400);
}

.modal__description + .modal__cta {
    margin-top: 2rem;
}

/* 6.10 Progress bar */
.progress-bar {
    height: .85rem;
    background-color: var(--bg-accent-secondary);
    list-style: none;
}

.progress-bar.rounded {
    border-radius: 100vmax;
}

.progress-bar__fill {
    height: 100%;
    width: 0%;
    background-color: var(--clr-secondary);
    border-radius: inherit;
}

.progress-bar__fill.primary {
    background-color: var(--clr-accent-primary);
}

.progress-bar__fill.secondary {
    background-color: var(--clr-accent-secondary);
}

.progress-bar__fill.tertiary {
    background-color: var(--clr-accent-tertiary);
}

.progress-bar__fill.quaternary {
    background-color: var(--clr-accent-quaternary);
}

/* 6.11 Tooltip */
.tooltip {
    color: var(--clr-secondary);
    cursor: pointer;
}

.tooltip:hover,
.tooltip:has(+ :popover-open) {
    color: var(--clr-primary);
}

/* =================================================================================================
                                        7. Utilities
================================================================================================= */

[data-switch-columns][data-enable-switch] [data-left-column] {
    order: 1;
}

[data-switch-columns][data-enable-switch] [data-right-column] {
    order: 2;
}

[data-switch-columns][data-enable-switch].content-flow--md {
    margin-top: var(--content-spacing-top);
}

.placeholder {
    background-color: var(--bg-accent-primary);
}

.scroll-lock {
    overflow: hidden;
}

.supports-js .slide-in {
    opacity: 0;
    transition: opacity var(--ts-extra-slow) ease-in, transform var(--ts-extra-slow) ease-in;
}

.supports-js .slide-in.appear {
    opacity: 1;
    transform: translateY(0);
}

.supports-js .from-bottom {
    transform: translateY(50%);
}

.pe-none {
    pointer-events: none;
}

.pe-all {
    pointer-events: all;
}

.cursor-auto {
    cursor: auto;
}

.mbm-overlay {
    mix-blend-mode: overlay;
}

.mbm-soft-light {
    mix-blend-mode: soft-light;
}

.mbm-lighten {
    mix-blend-mode: lighten;
}

.wc-transform {
    will-change: transform;
}

.flip-horizontally {
    transform: scaleX(-1);
}

.ml-icon {
    margin-left: .4em;
}

.ml-icon__md {
    margin-left: .55em;
}

.ml-icon__xl {
    margin-left: .75em;
}

.mr-icon {
    margin-right: .4em;
}

.mr-icon__md {
    margin-right: .55em;
}

.mr-icon__xl {
    margin-right: .75em;
}

.clr-primary {
    color: var(--clr-primary);
}

.clr-secondary {
    color: var(--clr-secondary);
}

.clr-muted {
    color: var(--clr-muted);
}

.highlight-primary-bg {
    background-color: var(--clr-accent-primary);
}

.highlight-secondary-bg {
    background-color: var(--clr-accent-secondary);
}

.highlight-tertiary-bg {
    background-color: var(--clr-accent-tertiary);
}

.online-status {
    background-image: var(--bg-online);
}

.under-load-status {
    background-image: var(--bg-under-load);
}

.offline-status {
    background-image: var(--bg-offline);
}

i.online-status,
i.offline-status,
i.under-load-status {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.fw-500 {
    font-weight: var(--fw-500);
}

[data-animation="scale"] {
    transform: scale(1.075);
}

[data-animation="fade"],
[data-animation="fadeInLast"] {
    filter: opacity(0);
}

.scaleIn {
    animation: scaleIn ease forwards;
}

.filterFadeIn {
    animation: filterFadeIn ease forwards;
}

.no-animation {
    animation: none !important;
}

@media (max-width: 54.999em) {
    .show-md {
        display: none;
    }
}

.supports-js .visually-hidden {
    opacity: 0;
    pointer-events: none;
}

.hidden {
    display: none;
    visibility: hidden;
}

/* =================================================================================================
                                        8. Animations
================================================================================================= */

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes vanish {
    from {
        display: block;
        opacity: 1;
    }

    to {
        display: none;
        opacity: 0;
    }
}

@keyframes translateIn {
    to {
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 50%, 100% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-5px);
    }

    75% {
        transform: translateY(-2.5px);
    }
}

@keyframes filterFadeIn {
    to {
        filter: opacity(1);
    }
}

@keyframes scaleIn {
    to {
        transform: scale(1);
    }
}