@layer layout {
    .container {
        max-width: var(--container);
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    .container--820 {
        max-width: 820px;
    }

    .container--760 {
        max-width: 760px;
    }

    .section--white {
        background: var(--color-white);
    }

    .section--mint {
        background: var(--color-mint);
    }

    .section--border-top {
        border-top: 1px solid var(--color-line);
    }

    .section--border-bottom {
        border-bottom: 1px solid var(--color-line);
    }

    .section--border-both {
        border-block: 1px solid var(--color-line);
    }

    .section__inner {
        padding-block: var(--section-y);
    }

    .section__inner--hero {
        padding-block: var(--hero-top) var(--section-y);
    }

    .section__inner--home {
        padding-block: clamp(48px, 7vw, 88px) clamp(56px, 8vw, 104px);
    }

    .section__inner--intro {
        padding-block: clamp(40px, 5vw, 64px) var(--section-y);
    }

    .section__inner--legal {
        padding-block: clamp(36px, 5vw, 56px) var(--section-y);
    }

    .section__inner--confirm {
        padding-block: clamp(56px, 8vw, 104px);
    }

    .section__inner--flush {
        padding-block: 0;
    }

    .breadcrumb-row {
        padding-top: 20px;
    }

    .breadcrumb {
        color: var(--color-muted);
        font-size: 14px;
    }

    .breadcrumb__current {
        color: var(--color-ink);
        font-weight: 500;
    }

    .hero {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 48px 64px;
    }

    .hero__text {
        container: hero-text / inline-size;
        display: flex;
        flex: 6 1 480px;
        flex-direction: column;
        align-items: flex-start;
        gap: 26px;
        min-width: 0;
    }

    .hero__text > .lead {
        max-width: 600px;
    }

    .hero__media {
        flex: 5 1 400px;
        min-width: 0;
    }

    .hero__media--sm {
        flex: 4 1 360px;
    }

    .hero__media--md-wide {
        flex: 5 1 420px;
    }

    .hero__media--lg {
        flex: 6 1 420px;
    }

    .section-head {
        max-width: 760px;
        margin-bottom: 40px;
    }

    .section-head__title {
        margin-top: 12px;
    }

    .section-head__intro {
        margin-top: 16px;
        font-size: 18px;
    }

    .dark .section-head__intro {
        color: var(--fg-muted);
    }

    .section-head--row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 16px 48px;
        max-width: none;
    }

    .section-head__text {
        min-width: 0;
        max-width: 760px;
    }

    .section-head__aside {
        display: flex;
    }

    .section-head--column {
        display: flex;
        flex-direction: column;
        gap: 16px;
        max-width: none;
        margin-bottom: 0;
    }

    .section-head--column .section-head__title,
    .section-head--column .section-head__intro {
        margin-top: 0;
    }

    .section-head--column .section-head__intro {
        font-size: inherit;
    }

    .section-head--compact {
        margin-bottom: 32px;
    }

    .split {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 32px 80px;
    }

    .split--center {
        align-items: center;
        gap: 40px 72px;
    }

    .split__intro {
        display: flex;
        flex: 1 1 300px;
        flex-direction: column;
        gap: 16px;
    }

    .split__intro--320 {
        flex-basis: 320px;
    }

    .split__body {
        flex: 2 1 560px;
        min-width: 0;
    }

    .split__body--520 {
        flex-basis: 520px;
    }

    .split__half {
        flex: 1 1 420px;
        min-width: 0;
    }

    .grid {
        --grid-min: 280px;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min)), 1fr));
        gap: 16px;
    }

    .grid--190 { --grid-min: 190px; }
    .grid--200 { --grid-min: 200px; }
    .grid--220 { --grid-min: 220px; }
    .grid--230 { --grid-min: 230px; }
    .grid--240 { --grid-min: 240px; }
    .grid--250 { --grid-min: 250px; }
    .grid--260 { --grid-min: 260px; }
    .grid--270 { --grid-min: 270px; }
    .grid--280 { --grid-min: 280px; }
    .grid--300 { --grid-min: 300px; }
    .grid--340 { --grid-min: 340px; }
    .grid--440 { --grid-min: 440px; }

    .grid--gap-20 {
        gap: 20px;
    }

    .grid--gap-24 {
        gap: 24px;
    }

    .stack {
        --stack-gap: 16px;
        display: flex;
        flex-direction: column;
        gap: var(--stack-gap);
    }

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

    .stack--8 { --stack-gap: 8px; }
    .stack--10 { --stack-gap: 10px; }
    .stack--12 { --stack-gap: 12px; }
    .stack--14 { --stack-gap: 14px; }
    .stack--18 { --stack-gap: 18px; }
    .stack--20 { --stack-gap: 20px; }
    .stack--24 { --stack-gap: 24px; }
    .stack--26 { --stack-gap: 26px; }
    .stack--block { --stack-gap: var(--space-block); }

    .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .cluster {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .figure {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 0;
    }

    .figure__caption {
        color: var(--fg-muted);
        font-size: 14px;
    }
}