/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer theme {
    :root, :host {
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        --spacing: .25rem;
        --default-font-family: var(--font-sans);
        --default-mono-font-family: var(--font-mono)
    }
}
@layer base {
    *, :after, :before, ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0
    }

    html, :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
        font-feature-settings: var(--default-font-feature-settings, normal);
        font-variation-settings: var(--default-font-variation-settings, normal);
        -webkit-tap-highlight-color: transparent
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit
    }

    a {
        color: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        -webkit-text-decoration: inherit;
        text-decoration: inherit
    }

    b, strong {
        font-weight: bolder
    }

    code, kbd, samp, pre {
        font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
        font-feature-settings: var(--default-mono-font-feature-settings, normal);
        font-variation-settings: var(--default-mono-font-variation-settings, normal);
        font-size: 1em
    }

    small {
        font-size: 80%
    }

    sub, sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative
    }

    sub {
        bottom: -.25em
    }

    sup {
        top: -.5em
    }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse
    }

    :-moz-focusring {
        outline: auto
    }

    progress {
        vertical-align: baseline
    }

    summary {
        display: list-item
    }

    ol, ul, menu {
        list-style: none
    }

    img, svg, video, canvas, audio, iframe, embed, object {
        vertical-align: middle;
        display: block
    }

    img, video {
        max-width: 100%;
        height: auto
    }

    button, input, select, optgroup, textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    ::file-selector-button {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: #0000;
        border-radius: 0
    }

    :where(select:is([multiple],[size])) optgroup {
        font-weight: bolder
    }

    :where(select:is([multiple],[size])) optgroup option {
        padding-inline-start: 20px
    }

    ::file-selector-button {
        margin-inline-end: 4px
    }

    ::placeholder {
        opacity: 1
    }

    @supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px) {
        ::placeholder {
            color: currentColor
        }

        @supports (color:color-mix(in lab, red, red)) {
            ::placeholder {
                color: color-mix(in oklab, currentcolor 50%, transparent)
            }
        }
    }textarea {
         resize: vertical
     }

    ::-webkit-search-decoration {
        -webkit-appearance: none
    }

    ::-webkit-date-and-time-value {
        min-height: 1lh;
        text-align: inherit
    }

    ::-webkit-datetime-edit {
        display: inline-flex
    }

    ::-webkit-datetime-edit-fields-wrapper {
        padding: 0
    }

    ::-webkit-datetime-edit {
        padding-block: 0
    }

    ::-webkit-datetime-edit-year-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-month-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-day-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-hour-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-minute-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-second-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-millisecond-field {
        padding-block: 0
    }

    ::-webkit-datetime-edit-meridiem-field {
        padding-block: 0
    }

    ::-webkit-calendar-picker-indicator {
        line-height: 1
    }

    :-moz-ui-invalid {
        box-shadow: none
    }

    button, input:where([type=button],[type=reset],[type=submit]) {
        appearance: button
    }

    ::file-selector-button {
        appearance: button
    }

    ::-webkit-inner-spin-button {
        height: auto
    }

    ::-webkit-outer-spin-button {
        height: auto
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important
    }
}
@layer components;
@layer utilities {
    .visible {
        visibility: visible
    }

    .fixed {
        position: fixed
    }

    .relative {
        position: relative
    }

    .start {
        inset-inline-start: var(--spacing)
    }

    .end {
        inset-inline-end: var(--spacing)
    }

    .table {
        display: table
    }

    .antialiased {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }
}

:root {
    --ink: #0c0c0c;
    --paper: #f2eee5;
    --line: #d2cabd;
    --muted: #6f6a61;
    --academy: #2460a0;
    --prevention: #4a7a2a;
    --business: #dc7814;
    --adventure: #c83828;
    --gold: #b8a050;
    --accent: var(--academy)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    background: var(--paper);
    color: var(--ink);
    margin: 0;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif
}

a {
    color: inherit;
    text-decoration: none
}

button, input, textarea {
    font: inherit
}

.portal-notice {
    background: var(--gold);
    color: #130f00;
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
    padding: .7rem 1rem;
    font-size: .75rem;
    line-height: 1.4;
    display: flex
}

.portal-notice strong {
    letter-spacing: .07em;
    text-transform: uppercase
}

.portal-notice a {
    border-bottom: 1px solid #130f00;
    font-weight: 850
}

.cat-academy {
    --accent: var(--academy)
}

.cat-prevention {
    --accent: var(--prevention)
}

.cat-business {
    --accent: var(--business)
}

.cat-adventure {
    --accent: var(--adventure)
}

.eyebrow {
    color: var(--accent);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: 850
}

.portal-header {
    background: var(--ink);
    color: #fff;
    border-bottom: 1px solid #353532;
    justify-content: space-between;
    align-items: center;
    min-height: 5.6rem;
    padding: 0 clamp(1rem, 4vw, 4rem);
    display: flex
}

.portal-brand {
    align-items: center;
    gap: 1.2rem;
    display: flex
}

.portal-brand strong {
    letter-spacing: .14em;
    font-size: clamp(.92rem, 1.7vw, 1.35rem)
}

.portal-brand span {
    color: #bdb9b0;
    letter-spacing: .18em;
    text-transform: uppercase;
    border-left: 1px solid #8e897f;
    padding-left: 1.2rem;
    font-size: .68rem
}

.portal-header nav {
    align-items: center;
    gap: clamp(1rem, 3vw, 3rem);
    font-size: .75rem;
    display: flex
}

.portal-header nav span {
    color: #929189
}

.portal-hero {
    background: var(--ink);
    color: #fff;
    grid-template-columns:1.15fr .85fr;
    gap: 4rem;
    min-height: 68vh;
    padding: clamp(4rem, 9vw, 9rem) clamp(1rem, 6vw, 7rem);
    display: grid
}

.portal-hero h1 {
    letter-spacing: -.075em;
    text-transform: uppercase;
    margin: 1.4rem 0;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: clamp(4.2rem, 9vw, 9.3rem);
    font-weight: 300;
    line-height: .78
}

.portal-hero-copy {
    border-left: 1px solid #4a4945;
    align-self: end;
    padding-left: clamp(1.4rem, 4vw, 4rem)
}

.portal-hero-copy > p {
    color: #d4d0c7;
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    font-weight: 300;
    line-height: 1.4
}

.portal-hero-copy > div {
    grid-template-columns:repeat(3, 1fr);
    gap: 1px;
    margin: 2rem 0 1rem;
    display: grid
}

.portal-hero-copy > div a {
    color: #fff;
    background: #242421;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    font-weight: 800;
    transition: background .2s, color .2s;
    display: flex
}

.portal-hero-copy > div a:hover {
    background: var(--gold);
    color: #130f00
}

.portal-hero-copy > div a b {
    font-size: .8rem
}

.portal-hero-copy small {
    color: #89877f
}

.access-terms {
    background: #fff;
    grid-template-columns:.8fr 1.2fr;
    gap: clamp(2rem, 6vw, 6rem);
    padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 6vw, 7rem);
    scroll-margin-top: 1rem;
    display: grid
}

.access-terms h2 {
    letter-spacing: -.055em;
    margin: 1rem 0 0;
    font-size: clamp(2.8rem, 5vw, 5.6rem);
    font-weight: 300;
    line-height: .92
}

.access-terms > div {
    background: var(--line);
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 1px;
    display: grid
}

.access-terms article {
    color: #fff;
    flex-direction: column;
    min-height: 245px;
    padding: clamp(1.25rem, 3vw, 2rem);
    display: flex
}

.access-terms article:first-child {
    background: var(--academy)
}

.access-terms article:nth-child(2) {
    background: var(--adventure)
}

.access-terms article:nth-child(3) {
    background: var(--prevention)
}

.access-terms article > span {
    color: #ffffffc7;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 850
}

.access-terms article > strong {
    margin-top: auto;
    font-size: clamp(1.9rem, 3vw, 3.1rem);
    font-weight: 300;
    line-height: 1
}

.access-terms article > p {
    color: #ffffffe0;
    margin-bottom: 1.2rem;
    line-height: 1.5
}

.access-terms article > a {
    color: #fff;
    text-transform: uppercase;
    border-top: 1px solid #ffffff59;
    align-items: center;
    min-height: 3.2rem;
    padding-top: .8rem;
    font-size: .72rem;
    font-weight: 900;
    display: flex
}

.access-terms article > a:hover {
    text-underline-offset: .25rem;
    text-decoration: underline
}

.course-catalog {
    padding: clamp(4rem, 8vw, 9rem) clamp(1rem, 5vw, 6rem)
}

.catalog-group {
    max-width: 1420px;
    margin: 0 auto 6rem;
    scroll-margin-top: 1rem
}

.catalog-group > header {
    border-bottom: 5px solid var(--accent);
    justify-content: space-between;
    align-items: end;
    padding-bottom: 1rem;
    display: flex
}

.catalog-group > header span {
    color: var(--accent);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .72rem;
    font-weight: 850
}

.catalog-group > header h2 {
    letter-spacing: -.045em;
    margin: 0;
    padding-right: .14em;
    font-size: clamp(2.3rem, 5vw, 5.5rem);
    font-weight: 300;
    overflow: visible
}

.catalog-grid {
    background: var(--line);
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin-top: 1px;
    display: grid
}

.catalog-card {
    background: #fff;
    flex-direction: column;
    min-height: 360px;
    padding: clamp(1.3rem, 3vw, 2.3rem);
    transition: background .2s, color .2s;
    display: flex
}

.catalog-card:hover {
    background: var(--accent);
    color: #fff
}

.catalog-card > p {
    color: var(--accent);
    letter-spacing: .13em;
    text-transform: uppercase;
    margin: 0;
    font-size: .67rem;
    font-weight: 850
}

.catalog-card:hover > p {
    color: #fff
}

.catalog-card h3 {
    -webkit-hyphens: auto;
    hyphens: auto;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
    margin: 1.2rem 0;
    padding-right: .16em;
    font-size: clamp(1.8rem, 3vw, 3.2rem);
    font-weight: 300;
    line-height: 1
}

.catalog-card-bottom {
    gap: .6rem;
    margin-top: auto;
    display: grid
}

.catalog-card-bottom strong {
    white-space: nowrap;
    padding-block: .08em;
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    line-height: 1.12;
    display: block;
    overflow: visible
}

.catalog-card-bottom span {
    color: var(--muted);
    font-size: .78rem
}

.catalog-card:hover .catalog-card-bottom span {
    color: #ffffffbf
}

.catalog-card-bottom b {
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-top: 1rem;
    font-size: .72rem
}

.portal-principles {
    background: var(--ink);
    color: #fff;
    grid-template-columns:.8fr 1.2fr;
    gap: clamp(3rem, 8vw, 9rem);
    padding: clamp(5rem, 9vw, 10rem) clamp(1rem, 6vw, 7rem);
    display: grid
}

.portal-principles h2 {
    letter-spacing: -.055em;
    margin: 1rem 0;
    font-size: clamp(3rem, 6vw, 6.6rem);
    font-weight: 300;
    line-height: .9
}

.principle-grid {
    background: #353532;
    gap: 1px;
    display: grid
}

.principle-grid article {
    background: #20201e;
    padding: 2rem
}

.principle-grid span {
    color: #c4a25e;
    font-weight: 850
}

.principle-grid h3 {
    margin-top: 3rem;
    font-size: 1.6rem;
    font-weight: 400
}

.principle-grid p {
    color: #aaa79f;
    line-height: 1.6
}

.course-landing {
    min-height: 100vh
}

.course-header {
    border-bottom-color: var(--accent)
}

@supports (color:color-mix(in lab, red, red)) {
    .course-header {
        border-bottom-color: color-mix(in srgb, var(--accent), #000 30%)
    }
}

.course-header .portal-brand span {
    color: var(--accent)
}

.course-hero {
    background: var(--ink);
    color: #fff;
    grid-template-columns:minmax(0, 1.1fr) minmax(330px, .62fr);
    gap: clamp(2rem, 5vw, 6rem);
    min-height: calc(100vh - 5.6rem);
    padding: clamp(3rem, 7vw, 8rem) clamp(1rem, 6vw, 7rem);
    display: grid
}

.course-hero-copy {
    align-self: center;
    min-width: 0
}

.course-hero-copy h1 {
    -webkit-hyphens: auto;
    hyphens: auto;
    letter-spacing: -.072em;
    overflow-wrap: anywhere;
    text-transform: uppercase;
    max-width: 100%;
    margin: 1.5rem 0 2rem;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: clamp(3.2rem, 5.4vw, 5.8rem);
    font-weight: 300;
    line-height: .84
}

.course-lead {
    color: #d1cec6;
    max-width: 780px;
    font-size: clamp(1.25rem, 2vw, 1.8rem);
    font-weight: 300;
    line-height: 1.45
}

.dnl-brand-graphic {
    background: #fff;
    max-width: 250px;
    margin: 2rem 0;
    padding: 8px
}

.dnl-brand-graphic img {
    width: 100%;
    height: auto;
    display: block
}

.course-price {
    align-items: baseline;
    gap: 1rem;
    margin: 2rem 0;
    display: flex
}

.course-price strong {
    color: var(--accent);
    white-space: nowrap;
    font-size: clamp(3rem, 6vw, 6.2rem)
}

.course-price span {
    color: #929089
}

.access-badge {
    border-left: 5px solid var(--accent);
    gap: .2rem;
    padding: .35rem 0 .35rem 1rem;
    display: grid
}

.access-badge b {
    color: var(--accent);
    letter-spacing: .13em;
    text-transform: uppercase;
    font-size: .67rem
}

.access-badge span {
    font-weight: 850
}

.access-badge small {
    color: #8d8b84
}

.order-cta {
    background: var(--accent);
    color: #fff;
    text-transform: uppercase;
    justify-content: space-between;
    align-items: center;
    max-width: 360px;
    margin-top: 2rem;
    padding: 1.1rem;
    font-size: .72rem;
    font-weight: 850;
    display: flex
}

.service-cta {
    border: 1px solid #17201e38;
    flex-direction: column;
    gap: .25rem;
    max-width: 360px;
    margin-top: .75rem;
    padding: .9rem 1rem;
    display: flex
}

.service-cta span {
    font-size: .72rem
}

.service-cta strong {
    color: var(--accent);
    text-transform: uppercase;
    font-size: .8rem
}

.course-login {
    border-top: 7px solid var(--accent);
    color: var(--ink);
    background: #f8f5ee;
    align-self: center;
    padding: clamp(1.5rem, 3.5vw, 3rem)
}

.login-label {
    color: var(--accent);
    letter-spacing: .13em;
    text-transform: uppercase;
    font-size: .67rem;
    font-weight: 850
}

.course-login h2 {
    letter-spacing: -.04em;
    margin: 1rem 0 2rem;
    font-size: clamp(2rem, 3vw, 3.2rem);
    font-weight: 300;
    line-height: 1
}

.course-login form {
    gap: 1rem;
    display: grid
}

.course-login label {
    letter-spacing: .07em;
    text-transform: uppercase;
    gap: .45rem;
    font-size: .68rem;
    font-weight: 850;
    display: grid
}

.course-login input, .course-login select {
    background: #fff;
    border: 1px solid #cfc7ba;
    width: 100%;
    min-height: 3.3rem;
    padding: .8rem
}

.course-login button {
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    border: 0;
    justify-content: space-between;
    padding: 1.1rem;
    font-size: .72rem;
    font-weight: 850;
    display: flex
}

.course-login button:disabled {
    cursor: wait;
    opacity: .65
}

.login-message {
    background: #fff3d6;
    border-left: 3px solid #bd7b00;
    padding: .8rem;
    font-size: .75rem;
    line-height: 1.5
}

.login-help {
    color: var(--muted);
    font-size: .72rem;
    line-height: 1.5
}

.password-forgotten-link {
    color: var(--accent);
    border-bottom: 1px solid;
    justify-self: start;
    margin-top: .2rem;
    font-size: .74rem;
    font-weight: 850
}

.password-request-page {
    background: var(--ink);
    color: #fff;
    grid-template-columns:minmax(0, 1fr) minmax(330px, .65fr);
    align-items: center;
    gap: clamp(2.5rem, 7vw, 8rem);
    min-height: calc(100vh - 5.6rem);
    padding: clamp(4rem, 8vw, 9rem) clamp(1rem, 6vw, 7rem);
    display: grid
}

.password-request-page > div {
    max-width: 850px
}

.password-request-page h1 {
    letter-spacing: -.065em;
    text-transform: uppercase;
    margin: 1.5rem 0 2rem;
    font-size: clamp(3.2rem, 6.5vw, 7rem);
    font-weight: 300;
    line-height: .86
}

.password-request-page > div > p:not(.eyebrow) {
    color: #c9c6be;
    max-width: 720px;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    line-height: 1.65
}

.password-request-page > div > a {
    text-transform: uppercase;
    border-bottom: 1px solid #ffffff73;
    margin-top: 1.5rem;
    padding-bottom: .35rem;
    font-size: .73rem;
    font-weight: 850;
    display: inline-block
}

.password-request-form {
    gap: 1rem;
    display: grid
}

.course-preview-link {
    border-bottom: 1px solid var(--accent);
    color: var(--accent);
    padding-bottom: .3rem;
    font-size: .72rem;
    font-weight: 850;
    display: inline-block
}

.course-preview-links {
    flex-direction: column;
    align-items: start;
    gap: .85rem;
    display: flex
}

.customer-login-page {
    min-height: 100vh
}

.customer-login-hero {
    background: var(--ink);
    color: #fff;
    grid-template-columns:minmax(0, 1fr) minmax(330px, .65fr);
    align-items: center;
    gap: clamp(2.5rem, 7vw, 8rem);
    min-height: calc(100vh - 5.6rem);
    padding: clamp(4rem, 8vw, 9rem) clamp(1rem, 6vw, 7rem);
    display: grid
}

.customer-login-hero > div:first-child {
    max-width: 850px
}

.customer-login-hero h1 {
    letter-spacing: -.065em;
    text-transform: uppercase;
    margin: 1.5rem 0 2rem;
    font-size: clamp(3.4rem, 7vw, 7.5rem);
    font-weight: 300;
    line-height: .84
}

.customer-login-hero > div:first-child > p:not(.eyebrow) {
    color: #c9c6be;
    max-width: 700px;
    font-size: clamp(1.05rem, 2vw, 1.45rem);
    line-height: 1.6
}

.login-route-note {
    border-left: 5px solid var(--academy);
    gap: .4rem;
    margin-top: 2.5rem;
    padding-left: 1rem;
    display: grid
}

.login-route-note strong {
    color: #fff;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .72rem
}

.login-route-note span {
    color: #aaa79f;
    overflow-wrap: anywhere
}

.customer-login-support {
    grid-template-columns:1fr 1fr;
    gap: clamp(2rem, 6vw, 7rem);
    padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 6vw, 7rem);
    display: grid
}

.customer-login-support h2 {
    letter-spacing: -.055em;
    margin: 1rem 0 0;
    font-size: clamp(2.8rem, 5vw, 5.2rem);
    font-weight: 300;
    line-height: .92
}

.customer-login-support > p {
    color: var(--muted);
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.7
}

.support-assistant {
    z-index: 110;
    flex-direction: column;
    align-items: flex-end;
    gap: .65rem;
    display: flex;
    position: fixed;
    bottom: 1rem;
    right: 1rem
}

.support-assistant__toggle {
    color: #fff;
    cursor: pointer;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #11110f;
    border: 1px solid #4f4d48;
    min-height: 46px;
    padding: .85rem 1.15rem;
    font-size: .68rem;
    font-weight: 850
}

.support-assistant__panel {
    border-top: 6px solid var(--academy);
    color: var(--ink);
    background: #f8f5ee;
    width: min(430px, 100vw - 2rem);
    max-height: calc(100vh - 82px);
    padding: 1.25rem;
    overflow: auto;
    box-shadow: 0 18px 60px #00000047
}

.support-assistant__panel > header {
    border-bottom: 1px solid var(--line);
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    padding-bottom: 1rem;
    display: flex
}

.support-assistant__panel > header span {
    color: var(--academy);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .62rem;
    font-weight: 850;
    display: block
}

.support-assistant__panel > header h2 {
    margin: .55rem 0 0;
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1.12
}

.support-assistant__panel > header button {
    color: var(--muted);
    cursor: pointer;
    background: 0 0;
    border: 0;
    padding: .1rem .3rem;
    font-size: 1.7rem;
    line-height: 1
}

.support-assistant__notice {
    color: var(--muted);
    margin: 1rem 0;
    font-size: .75rem;
    line-height: 1.55
}

.support-assistant__topics {
    flex-wrap: wrap;
    gap: .45rem;
    display: flex
}

.support-assistant__topics button {
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    background: #fff;
    border-radius: 999px;
    padding: .55rem .7rem;
    font-size: .68rem;
    font-weight: 800
}

.support-assistant__search {
    border-bottom: 1px solid var(--line);
    border-top: 1px solid var(--line);
    gap: .45rem;
    margin: 1rem -1.25rem 0;
    padding: 1rem 1.25rem;
    display: grid
}

.support-assistant__search label {
    font-size: .72rem;
    font-weight: 850
}

.support-assistant__search > div {
    grid-template-columns:1fr auto;
    gap: .45rem;
    display: grid
}

.support-assistant__search input {
    border: 1px solid var(--line);
    color: var(--ink);
    background: #fff;
    border-radius: 8px;
    min-width: 0;
    padding: .7rem .75rem
}

.support-assistant__search button {
    background: var(--academy);
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    border: 0;
    border-radius: 999px;
    padding: .7rem .85rem;
    font-size: .68rem;
    font-weight: 850
}

.support-assistant__results {
    gap: .65rem;
    margin-top: 1rem;
    display: grid
}

.support-assistant__results article {
    border-left: 4px solid var(--gold);
    background: #fff;
    padding: .85rem
}

.support-assistant__results h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 500
}

.support-assistant__results p {
    color: var(--muted);
    margin: .45rem 0;
    font-size: .8rem;
    line-height: 1.55
}

.support-assistant__results small {
    color: var(--academy);
    margin-top: .35rem;
    font-size: .68rem;
    font-weight: 800;
    display: block
}

.support-assistant__results a {
    color: var(--academy);
    font-size: .72rem;
    font-weight: 850;
    text-decoration: underline
}

.support-assistant__results .support-assistant__warning {
    color: #5e430f;
    background: #fff3d6;
    border-left: 4px solid #bd7b00;
    margin: 0;
    padding: .8rem
}

.support-assistant__actions {
    flex-wrap: wrap;
    align-items: start;
    gap: .45rem .8rem;
    margin-top: .6rem;
    display: flex
}

.support-assistant__results .support-assistant__inline-mail {
    color: var(--academy)
}

.support-assistant__panel > footer {
    border-top: 1px solid var(--line);
    flex-direction: column;
    align-items: start;
    gap: .65rem;
    margin-top: 1rem;
    padding-top: .8rem;
    display: flex
}

.support-assistant__panel > footer a {
    color: var(--muted);
    font-size: .68rem;
    text-decoration: underline
}

.support-assistant__panel > footer .support-assistant__mail {
    background: var(--ink);
    color: #fff;
    padding: .75rem .85rem;
    font-weight: 850;
    text-decoration: none
}

.course-details {
    grid-template-columns:.8fr 1.2fr;
    gap: clamp(3rem, 7vw, 8rem);
    padding: clamp(5rem, 9vw, 10rem) clamp(1rem, 6vw, 7rem);
    display: grid
}

.course-intro h2, .course-content > div:first-child > h2, .course-final-login h2 {
    letter-spacing: -.055em;
    margin: 1rem 0 2rem;
    font-size: clamp(3rem, 5.5vw, 6rem);
    font-weight: 300;
    line-height: .92
}

.course-intro > p {
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1.6
}

.course-intro blockquote {
    border-left: 5px solid var(--accent);
    margin: 2rem 0 0;
    padding-left: 1.3rem;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.5
}

.facts-grid {
    margin: 0
}

.facts-grid > div {
    border-top: 1px solid var(--line);
    grid-template-columns:.55fr 1.45fr;
    gap: 2rem;
    padding: 1.25rem 0;
    display: grid
}

.facts-grid dt {
    color: var(--accent);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 850
}

.facts-grid dd {
    margin: 0;
    font-size: 1.12rem;
    font-weight: 750
}

.course-content {
    background: #fff;
    grid-template-columns:.82fr 1.18fr;
    gap: clamp(3rem, 8vw, 9rem);
    padding: clamp(5rem, 9vw, 10rem) clamp(1rem, 6vw, 7rem);
    display: grid
}

.course-content ul {
    margin: 2rem 0 0;
    padding: 0;
    list-style: none
}

.course-content li {
    border-bottom: 1px solid var(--line);
    padding: 1rem 0;
    line-height: 1.5
}

.module-list {
    background: var(--line);
    gap: 1px;
    display: grid
}

.module-list article {
    background: var(--paper);
    border-left: 6px solid var(--accent);
    padding: 1.5rem
}

.module-list span {
    color: var(--accent);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .7rem;
    font-weight: 850
}

.module-list h3 {
    margin: 1rem 0 0;
    font-size: 1.55rem;
    font-weight: 400
}

.course-final-login {
    background: var(--accent);
    color: #fff;
    justify-content: space-between;
    gap: 3rem;
    padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 6vw, 7rem);
    display: flex
}

.course-final-login .eyebrow {
    color: #fff
}

.course-final-login > div {
    max-width: 900px
}

.course-final-login > a {
    border: 1px solid #ffffff8c;
    align-self: end;
    padding: 1rem;
    font-weight: 850
}

.protected-course {
    background: var(--paper);
    color: var(--ink);
    grid-template-columns:320px minmax(0, 1fr);
    min-height: 100vh;
    display: grid
}

.protected-nav {
    background: var(--ink);
    color: #fff;
    height: 100vh;
    padding: 2rem 1.3rem 4rem;
    position: sticky;
    top: 0;
    overflow-y: auto
}

.protected-nav h1 {
    margin: 1rem 0 1.8rem;
    font-size: 2.2rem;
    font-weight: 300;
    line-height: 1
}

.protected-license {
    border-left: 4px solid var(--accent);
    gap: .25rem;
    margin-bottom: 2rem;
    padding-left: .8rem;
    display: grid
}

.protected-license span, .protected-license small {
    color: #9f9d95;
    font-size: .67rem
}

.protected-license b {
    font-size: .75rem
}

.protected-nav nav {
    margin: 2rem 0;
    display: grid
}

.protected-nav nav a {
    border-top: 1px solid #383835;
    grid-template-columns:55px 1fr;
    gap: .4rem;
    padding: .8rem 0;
    font-size: .76rem;
    display: grid
}

.protected-nav nav a span {
    color: var(--accent);
    font-weight: 850
}

.protected-nav > a {
    color: #aaa79f;
    font-size: .75rem
}

.protected-nav-focus {
    flex-direction: column;
    display: flex
}

.protected-nav-focus > a {
    margin-top: 1rem
}

.personal-support {
    border: 1px solid #484842;
    margin-top: auto;
    padding: 1rem
}

.personal-support > span {
    color: var(--accent);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .62rem;
    font-weight: 900;
    display: block
}

.personal-support > strong {
    margin: .55rem 0;
    font-size: .88rem;
    line-height: 1.35;
    display: block
}

.personal-support > p {
    color: #aaa79f;
    font-size: .7rem;
    line-height: 1.45
}

.personal-support > a {
    border: 1px solid var(--accent);
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    padding: .75rem;
    font-size: .68rem;
    font-weight: 850;
    text-decoration: none;
    display: block
}

.course-focus-status {
    border-top: 1px solid #383835;
    border-bottom: 1px solid #383835;
    gap: .65rem;
    margin: .5rem 0 2rem;
    padding: 1.3rem 0;
    display: grid
}

.course-focus-status > span {
    color: #aaa79f;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .68rem
}

.course-focus-status > strong {
    font-size: .92rem;
    line-height: 1.35
}

.course-focus-status > div {
    background: #383835;
    height: 4px;
    overflow: hidden
}

.course-focus-status i {
    background: var(--accent);
    height: 100%;
    transition: width .25s;
    display: block
}

.protected-content {
    min-width: 0;
    padding-bottom: 6rem
}

.protected-content > header {
    border-bottom: 1px solid var(--line);
    justify-content: space-between;
    align-items: center;
    padding: 1rem clamp(1rem, 4vw, 4rem);
    display: flex
}

.protected-content > header div {
    display: grid
}

.protected-content > header span {
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .65rem
}

.protected-content > header strong {
    font-size: .72rem
}

.protected-module {
    border-top: 7px solid var(--accent);
    background: #fff;
    max-width: 900px;
    margin: clamp(2rem, 5vw, 5rem) auto;
    padding: clamp(1.5rem, 5vw, 4rem)
}

.protected-module h2 {
    letter-spacing: -.055em;
    margin: 1rem 0 2rem;
    font-size: clamp(2.5rem, 5vw, 5rem);
    font-weight: 300;
    line-height: .92
}

.protected-media {
    background: var(--ink);
    color: #fff;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 0;
    padding: 1.2rem;
    display: flex
}

.protected-media div {
    display: grid
}

.protected-media span {
    color: #aaa79f;
    font-size: .72rem
}

.protected-media button {
    color: #aaa79f;
    background: #393936;
    border: 0;
    padding: .8rem
}

.protected-module label {
    letter-spacing: .07em;
    text-transform: uppercase;
    gap: .6rem;
    font-size: .7rem;
    font-weight: 850;
    display: grid
}

.protected-module textarea {
    background: var(--paper);
    border: 1px solid var(--line);
    resize: vertical;
    padding: 1rem
}

.protected-content-focus {
    min-height: 100vh;
    padding-bottom: 1.5rem
}

.course-focus-stage {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 4rem) 2rem
}

.course-focus-stage .protected-module {
    margin-bottom: 1.5rem
}

.course-step-controls {
    grid-template-columns:.65fr .8fr minmax(220px, 1.5fr) .8fr .65fr;
    align-items: end;
    gap: .65rem;
    max-width: 1100px;
    margin: 0 auto;
    display: grid
}

.course-step-controls button {
    background: var(--ink);
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    border: 0;
    min-height: 50px;
    padding: .9rem 1.2rem;
    font-size: .75rem;
    font-weight: 850
}

.course-step-controls button:last-child {
    background: var(--accent);
    justify-self: stretch
}

.course-step-controls button:disabled {
    cursor: default;
    opacity: .35
}

.course-step-controls label {
    gap: .3rem;
    display: grid
}

.course-step-controls label > span {
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .62rem;
    font-weight: 850
}

.course-step-controls select {
    border: 1px solid var(--line);
    color: var(--ink);
    background: #fff;
    width: 100%;
    min-height: 50px;
    padding: .7rem
}

.course-game-start > p:not(.eyebrow) {
    max-width: 760px;
    font-size: 1.12rem;
    line-height: 1.65
}

.acute-rule {
    border-left: 6px solid var(--accent);
    background: #f2ead8;
    margin: 2rem 0;
    padding: 1.4rem 1.5rem
}

.acute-rule h3 {
    margin: .35rem 0 .8rem;
    font-size: clamp(1.5rem, 3vw, 2.2rem)
}

.acute-rule p:not(.eyebrow) {
    margin: 0 0 .75rem;
    line-height: 1.65
}

.acute-rule small {
    color: var(--muted);
    line-height: 1.5;
    display: block
}

.game-start-grid {
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 2.5rem 0;
    display: grid
}

.game-start-grid > div {
    background: #7f7f7f14;
    gap: .8rem;
    min-height: 210px;
    padding: 1.4rem;
    display: grid
}

.game-start-grid b {
    color: var(--accent);
    font-size: .75rem
}

.game-start-grid strong {
    font-size: 1.2rem
}

.game-start-grid span {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.55
}

.workbook-document {
    border: 1px solid var(--line);
    background: #f5f1e8;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1rem;
    display: grid
}

.workbook-document > header {
    grid-template-columns:minmax(180px, 1fr) auto auto;
    align-items: end;
    gap: .75rem;
    padding: .35rem;
    display: grid
}

.workbook-document h3 {
    margin: .35rem 0 0;
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    font-weight: 400;
    line-height: 1.05
}

.workbook-page-controls {
    grid-template-columns:44px 150px 44px;
    align-items: stretch;
    gap: 1px;
    margin: 0;
    display: grid
}

.workbook-page-controls button, .workbook-view-controls button {
    background: var(--academy);
    color: #fff;
    cursor: pointer;
    border: 0;
    height: 44px;
    padding-inline: .8rem
}

.workbook-page-controls button:disabled, .workbook-view-controls button:disabled {
    cursor: default;
    opacity: .35
}

.workbook-page-controls strong, .workbook-view-controls strong {
    border: 1px solid var(--line);
    text-align: center;
    background: #fff;
    justify-content: center;
    align-items: center;
    height: 44px;
    margin: 0;
    font-size: .72rem;
    display: flex
}

.workbook-view-controls {
    grid-template-columns:44px 64px 44px auto;
    justify-content: end;
    align-items: stretch;
    gap: 1px;
    height: 44px;
    display: grid
}

.protected-workbook-viewer {
    background: #cbc5ba;
    height: min(78vh, 900px);
    padding: clamp(.5rem, 2vw, 1.4rem);
    overflow: auto
}

.protected-workbook-viewer:fullscreen {
    height: 100vh;
    padding: 1.5rem
}

.protected-workbook-page {
    -webkit-user-select: none;
    user-select: none;
    min-width: 100%;
    margin: 0;
    position: relative
}

.protected-workbook-page > img {
    pointer-events: none;
    max-width: none;
    height: auto;
    margin: 0 auto;
    display: block;
    box-shadow: 0 8px 30px #00000038
}

.protected-workbook-page .media-license-watermark {
    color: #2460a033;
    text-shadow: 0 1px #ffffffb3
}

.bonus-countdown {
    background: var(--academy);
    color: #fff;
    cursor: pointer;
    border: 0;
    min-height: 52px;
    margin: .5rem 0 1.5rem;
    padding: .8rem 1.1rem;
    font-weight: 850
}

.workbook-notice {
    border-left: 4px solid var(--accent);
    gap: .3rem;
    padding-left: 1rem;
    display: grid
}

.workbook-notice span {
    color: var(--muted);
    font-size: .82rem
}

.structure-promise {
    border-left: 4px solid var(--accent);
    background: #7f7f7f14;
    padding: 1rem;
    font-size: .88rem !important
}

.bonus-tag {
    color: var(--adventure);
    letter-spacing: .11em;
    text-transform: uppercase;
    margin-bottom: .35rem;
    font-size: .64rem;
    font-weight: 900;
    display: block
}

.game-mission {
    border-top: 1px solid var(--line);
    gap: 1.4rem;
    margin-top: 2rem;
    padding-top: 2rem;
    display: grid
}

.game-mission-compact {
    gap: .6rem
}

.game-mission h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500
}

.workbook-field {
    letter-spacing: 0 !important;
    text-transform: none !important;
    gap: .55rem !important;
    display: grid !important
}

.workbook-field > span {
    font-size: .9rem;
    line-height: 1.45
}

.workbook-field input, .workbook-field textarea {
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink);
    font: inherit;
    width: 100%;
    padding: .9rem
}

.copy-answer {
    border: 1px solid var(--academy);
    color: var(--academy);
    cursor: pointer;
    text-transform: uppercase;
    background: 0 0;
    justify-content: space-between;
    justify-self: start;
    align-items: center;
    min-height: 40px;
    padding: .65rem .8rem;
    font-size: .7rem;
    font-weight: 900;
    display: flex
}

.copy-answer:hover {
    background: var(--academy);
    color: #fff
}

.copy-answer:disabled {
    border-color: var(--line);
    color: var(--muted);
    cursor: default;
    opacity: .72
}

.copy-answer:disabled:hover {
    color: var(--muted);
    background: 0 0
}

.decision-field {
    border: 0;
    margin: 0;
    padding: 0
}

.decision-field legend {
    margin-bottom: .7rem;
    font-size: .9rem;
    font-weight: 850;
    line-height: 1.45
}

.decision-options {
    gap: .55rem;
    display: grid
}

.decision-options label {
    cursor: pointer;
    background: #7f7f7f14;
    border: 1px solid #0000;
    grid-template-columns:auto 1fr;
    align-items: center;
    padding: .85rem 1rem;
    letter-spacing: 0 !important;
    text-transform: none !important;
    gap: .75rem !important;
    display: grid !important
}

.decision-options label.is-selected {
    border-color: var(--accent);
    box-shadow: inset 4px 0 var(--accent)
}

.decision-options input {
    accent-color: var(--accent)
}

.ranking-game {
    border: 1px solid var(--line);
    padding: 1.2rem
}

.ranking-game > p {
    color: var(--muted);
    font-size: .82rem
}

.ranking-game > div {
    gap: .5rem;
    display: grid
}

.ranking-game label {
    grid-template-columns:1fr 74px;
    align-items: center;
    letter-spacing: 0 !important;
    text-transform: none !important;
    gap: 1rem !important;
    display: grid !important
}

.ranking-game select {
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink);
    font: inherit;
    padding: .65rem
}

.yes-no-check {
    background: #7f7f7f0f;
    gap: 1.2rem;
    padding: 1.2rem;
    display: grid
}

.yes-no-check > p {
    color: var(--muted);
    margin: -.5rem 0 .2rem;
    font-size: .82rem
}

.yes-no-check .decision-options {
    grid-template-columns:1fr 1fr
}

.bonus-mission, .timed-bonus {
    background: #d6c35c12;
    border: 1px solid #d6c35c59;
    padding: 1.2rem
}

.bonus-mission > p, .timed-bonus > p {
    color: #cbc8bd;
    line-height: 1.55
}

.workbook-field small {
    color: var(--muted);
    justify-self: end;
    font-size: .7rem
}

.timed-bonus {
    gap: 1rem;
    margin-top: .6rem;
    display: grid
}

.timed-bonus > div {
    gap: 1rem;
    display: grid
}

.timed-bonus > div > button {
    background: var(--adventure);
    color: #111;
    cursor: pointer;
    border: 0;
    min-height: 54px;
    padding: .8rem 1rem;
    font-size: 1rem;
    font-weight: 900
}

.result-sheet > h2 {
    margin-bottom: 1.2rem
}

.protocol-intro {
    color: var(--muted);
    max-width: 760px;
    line-height: 1.6
}

.safety-result {
    background: var(--accent);
    color: #fff;
    grid-template-columns:auto 1fr;
    align-items: center;
    gap: 1.2rem;
    margin: 2rem 0;
    padding: 1.4rem;
    display: grid
}

.safety-result > span {
    font-size: clamp(2.2rem, 5vw, 4rem);
    font-weight: 300
}

.safety-result h3, .safety-result p {
    margin: 0 0 .35rem
}

.safety-result small {
    color: #ffffffb8
}

.result-list {
    gap: 1px;
    margin: 2rem 0;
    display: grid
}

.result-list section {
    background: #7f7f7f12;
    padding: 1rem
}

.result-list section small {
    color: var(--accent);
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: .35rem;
    font-size: .62rem;
    font-weight: 900;
    display: block
}

.result-list section h3 + small {
    margin-top: 1.2rem
}

.result-list h3 {
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0 0 .5rem;
    font-size: .72rem
}

.result-list p {
    white-space: pre-wrap;
    margin: 0;
    line-height: 1.55
}

.result-actions {
    align-items: center;
    gap: 1rem;
    display: flex
}

.result-actions button {
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    border: 0;
    padding: 1rem 1.2rem;
    font-weight: 850
}

.result-actions small {
    color: var(--muted)
}

.course-feedback {
    border-top: 1px solid var(--line);
    margin-top: 3rem;
    padding-top: 1rem
}

.course-feedback summary {
    color: var(--muted);
    cursor: pointer;
    padding: .65rem 0;
    font-size: .76rem;
    font-weight: 800
}

.course-feedback-content {
    padding-top: 1rem
}

.course-feedback-content > p {
    color: var(--muted);
    max-width: 700px;
    line-height: 1.55
}

.feedback-grid {
    grid-template-columns:1fr 1fr;
    gap: 1rem;
    margin: 1.4rem 0;
    display: grid
}

.feedback-grid label {
    letter-spacing: 0 !important;
    text-transform: none !important;
    gap: .45rem !important;
    display: grid !important
}

.feedback-grid label > span {
    font-size: .78rem;
    font-weight: 850
}

.feedback-grid .wide {
    grid-column: 1/-1
}

.feedback-grid select, .feedback-grid textarea {
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: .8rem
}

.course-feedback-content > button {
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    border: 0;
    padding: .95rem 1.1rem;
    font-size: .74rem;
    font-weight: 900
}

.cat-adventure .course-feedback {
    border-color: #3a433b
}

.cat-adventure .course-feedback-content > p {
    color: #aaa99f
}

.cat-adventure .feedback-grid select, .cat-adventure .feedback-grid textarea {
    color: #fff;
    background: #0d120f;
    border-color: #3a433b
}

.cat-adventure .game-mission, .cat-adventure .ranking-game {
    border-color: #3a433b
}

.cat-adventure .workbook-field input, .cat-adventure .workbook-field textarea, .cat-adventure .ranking-game select {
    color: #fff;
    background: #0d120f;
    border-color: #3a433b
}

.cat-adventure .copy-answer {
    border-color: var(--adventure);
    color: #fff
}

.cat-adventure .decision-options label, .cat-adventure .game-start-grid > div, .cat-adventure .yes-no-check, .cat-adventure .result-list section {
    background: #ffffff0e
}

.cat-adventure .game-start-grid span, .cat-adventure .workbook-notice span, .cat-adventure .ranking-game > p, .cat-adventure .yes-no-check > p, .cat-adventure .result-actions small {
    color: #aaa99f
}

.expedition-video {
    background: #080b09;
    margin: 2rem 0
}

.expedition-video video {
    object-fit: contain;
    width: 100%;
    max-height: 620px;
    display: block
}

.expedition-video figcaption {
    color: #aaa99f;
    padding: .8rem 1rem;
    font-size: .78rem
}

.story-instruction {
    border-left: 4px solid var(--adventure);
    gap: .35rem;
    margin: .5rem 0 2rem;
    padding: .25rem 0 .25rem 1rem;
    display: grid
}

.story-instruction > span {
    color: var(--adventure);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .67rem;
    font-weight: 900
}

.story-instruction > strong {
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .78rem
}

.story-instruction > p {
    color: #cbc8bd;
    max-width: 720px;
    margin: 0;
    line-height: 1.55
}

.press-evidence {
    background: #0b0f0d;
    border: 1px solid #3a433b;
    grid-template-columns:minmax(150px, .55fr) 1.45fr;
    gap: clamp(1rem, 4vw, 2.4rem);
    margin: 2rem 0;
    padding: clamp(1rem, 3vw, 1.8rem);
    display: grid
}

.press-evidence > img {
    border: 1px solid #4a5049;
    align-self: start;
    width: 100%
}

.press-evidence h3 {
    color: #fff;
    margin: .7rem 0 1rem;
    font-size: clamp(1.5rem, 3vw, 2.3rem);
    font-weight: 400;
    line-height: 1.08
}

.press-evidence > div > p:not(.eyebrow) {
    color: #cbc8bd;
    line-height: 1.55
}

.press-evidence small {
    color: #8f938d;
    margin-top: 1rem;
    line-height: 1.45;
    display: block
}

.press-headlines {
    gap: .5rem;
    margin: 1.2rem 0;
    display: grid
}

.press-headlines span {
    border-left: 3px solid var(--adventure);
    color: #fff;
    padding: .55rem .75rem;
    font-family: Georgia, serif;
    font-size: 1rem
}

.press-document {
    grid-column: 1/-1
}

.press-document object {
    background: #fff;
    border: 1px solid #4a5049;
    width: 100%;
    height: min(72vh, 760px);
    display: block
}

.press-document > div {
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: .8rem;
    display: flex
}

.press-document a {
    background: var(--adventure);
    color: #111;
    text-transform: uppercase;
    padding: .85rem 1rem;
    font-size: .72rem;
    font-weight: 900
}

.press-document a:last-child {
    border: 1px solid var(--adventure);
    color: var(--adventure);
    background: 0 0
}

.media-license-watermark {
    color: #ffffff57;
    pointer-events: none;
    text-shadow: 0 1px 2px #0000009e;
    text-transform: uppercase;
    z-index: 7;
    position: absolute;
    inset: 0;
    overflow: hidden
}

.media-license-watermark .license-line {
    letter-spacing: .095em;
    text-align: center;
    transform-origin: 50%;
    white-space: nowrap;
    width: 124%;
    font-size: clamp(.48rem, .72vw, .66rem);
    font-weight: 850;
    line-height: 1;
    position: absolute;
    left: -12%;
    transform: rotate(-18deg)
}

.media-license-watermark .license-line-1 {
    top: 20%
}

.media-license-watermark .license-line-2 {
    top: 49%;
    left: -5%
}

.media-license-watermark .license-line-3 {
    top: 77%;
    left: 2%
}

.customer-watermark {
    border: 1px solid var(--line);
    color: #161614a6;
    letter-spacing: .07em;
    pointer-events: none;
    text-transform: uppercase;
    background: #ffffffd1;
    padding: .55rem .7rem;
    font-size: .61rem;
    font-weight: 850;
    position: fixed;
    bottom: 12px;
    right: 12px
}

.course-customer-watermark {
    pointer-events: none;
    z-index: 90;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    inset: 0;
    overflow: hidden
}

.course-customer-watermark span {
    color: #ffffff3d;
    letter-spacing: .13em;
    text-align: center;
    text-shadow: 0 1px 3px #000000c2;
    text-transform: uppercase;
    white-space: nowrap;
    width: 145vw;
    font-size: clamp(1rem, 2.25vw, 2rem);
    font-weight: 850;
    transform: rotate(-27deg)
}

.press-quick-game {
    border-top-color: var(--business)
}

.game-answer {
    border-left: 4px solid;
    margin: 1rem 0 0;
    padding: .8rem 1rem;
    line-height: 1.55
}

.game-answer strong {
    margin-bottom: .25rem;
    display: block
}

.game-answer.is-correct {
    color: #244217;
    background: #e7f0e4;
    border-color: #4a7a2a
}

.game-answer.is-review {
    color: #693708;
    background: #fff1df;
    border-color: #dc7814
}

.copy-protection-page {
    min-height: 100vh
}

.copy-protection-hero {
    background: var(--ink);
    color: #fff;
    grid-template-columns:1.15fr .85fr;
    gap: clamp(2rem, 7vw, 8rem);
    padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 6vw, 7rem);
    display: grid
}

.copy-protection-hero h1 {
    letter-spacing: -.07em;
    text-transform: uppercase;
    max-width: 980px;
    margin: 1rem 0;
    font-size: clamp(3.5rem, 7vw, 7.7rem);
    font-weight: 300;
    line-height: .85
}

.copy-protection-hero > div:last-child {
    border-left: 1px solid #484844;
    align-self: end;
    padding-left: clamp(1.2rem, 4vw, 4rem)
}

.copy-protection-hero > div:last-child > p:first-child {
    color: #d4d0c7;
    font-size: clamp(1.15rem, 2vw, 1.7rem);
    font-weight: 300;
    line-height: 1.55
}

.copy-protection-live-note {
    border-left: 4px solid var(--gold);
    color: #fff;
    margin-top: 2rem;
    padding: .7rem 1rem;
    font-size: .9rem;
    font-weight: 750;
    line-height: 1.5
}

.copy-protection-explainer {
    background: var(--line);
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 1px;
    display: grid
}

.copy-protection-explainer article {
    background: #fff;
    min-height: 270px;
    padding: clamp(1.5rem, 3vw, 2.5rem)
}

.copy-protection-explainer span {
    color: var(--academy);
    font-size: .72rem;
    font-weight: 900
}

.copy-protection-explainer h2 {
    letter-spacing: -.035em;
    margin: 4rem 0 1rem;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 350;
    line-height: 1.05
}

.copy-protection-explainer p {
    color: var(--muted);
    line-height: 1.6
}

.copy-protection-demo-section {
    padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 6vw, 7rem)
}

.copy-protection-demo-section > header {
    max-width: 820px;
    margin-bottom: 2.5rem
}

.copy-protection-demo-section > header h2 {
    letter-spacing: -.055em;
    margin: .8rem 0 1rem;
    font-size: clamp(2.8rem, 5vw, 5.8rem);
    font-weight: 300;
    line-height: .9
}

.copy-protection-demo-section > header > p:last-child {
    color: var(--muted)
}

.copy-protection-demo {
    background: var(--paper);
    border: 1px solid #aaa397;
    grid-template-columns:minmax(210px, .34fr) minmax(0, 1fr);
    min-height: 520px;
    display: grid;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 70px #1212102b
}

.copy-protection-demo > aside {
    background: var(--ink);
    color: #fff;
    padding: 2rem 1.4rem
}

.copy-protection-demo > aside h3 {
    margin: 1rem 0 2rem;
    font-size: clamp(1.8rem, 3vw, 2.7rem);
    font-weight: 300;
    line-height: 1
}

.copy-protection-demo > article {
    background: #fff;
    margin: clamp(1.2rem, 4vw, 3rem);
    padding: clamp(6.3rem, 9vw, 7.5rem) clamp(1.4rem, 4vw, 3.5rem) clamp(1.4rem, 4vw, 3.5rem);
    position: relative
}

.copy-protection-demo > article .media-license-watermark {
    color: #2460a03d;
    text-shadow: 0 1px #ffffffbf
}

.copy-protection-demo > article > h3 {
    letter-spacing: -.055em;
    max-width: 700px;
    margin: 1rem 0 1.5rem;
    font-size: clamp(2.4rem, 5vw, 5rem);
    font-weight: 300;
    line-height: .9
}

.copy-protection-demo > article > p:not(.eyebrow) {
    color: var(--muted);
    max-width: 720px;
    line-height: 1.65
}

.copy-protection-demo-topline {
    border-bottom: 1px solid var(--line);
    text-transform: uppercase;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.5rem;
    padding-bottom: .8rem;
    font-size: .67rem;
    display: flex
}

.copy-protection-demo-topline span {
    color: var(--muted)
}

.copy-protection-next {
    background: var(--academy);
    color: #fff;
    justify-content: space-between;
    align-items: end;
    gap: 3rem;
    padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 6vw, 7rem);
    display: flex
}

.copy-protection-next .eyebrow {
    color: #fff
}

.copy-protection-next h2 {
    letter-spacing: -.055em;
    margin: 1rem 0 0;
    font-size: clamp(2.8rem, 5vw, 5.5rem);
    font-weight: 300;
    line-height: .92
}

.copy-protection-next > a {
    text-transform: uppercase;
    border: 1px solid #ffffff8c;
    padding: 1rem;
    font-size: .75rem;
    font-weight: 850
}

.cat-adventure .protected-content {
    color: #f4efe4;
    background: #111713
}

.cat-adventure .protected-content > header {
    background: #0b0f0d;
    border-color: #394138
}

.cat-adventure .protected-content > header span {
    color: #aaa99f
}

.cat-adventure .protected-module {
    border-top-color: var(--adventure);
    background: #171e19;
    box-shadow: 0 24px 70px #0000004d
}

.cat-adventure .protected-module > p:not(.eyebrow) {
    color: #cbc8bd;
    line-height: 1.65
}

.cat-adventure .protected-module textarea {
    color: #fff;
    background: #0d120f;
    border-color: #3a433b
}

.protected-adventure-image {
    background: #080b09;
    height: clamp(300px, 48vw, 560px);
    margin: calc(-1 * clamp(1.5rem, 5vw, 4rem)) calc(-1 * clamp(1.5rem, 5vw, 4rem)) 2.3rem;
    position: relative;
    overflow: hidden
}

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

.protected-adventure-image-complete {
    aspect-ratio: 4/3;
    height: auto
}

.protected-adventure-image-complete img {
    object-fit: contain
}

.protected-adventure-image-ship img {
    object-position: left bottom;
    transform-origin: 0 100%;
    transform: scale(1.32)
}

.protected-adventure-image figcaption {
    background: linear-gradient(#0000, #050806eb);
    align-items: end;
    gap: .35rem;
    padding: 4rem 1.3rem 1.1rem;
    display: grid;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0
}

.protected-adventure-image figcaption span {
    color: #fff;
    font-size: .82rem;
    font-weight: 750
}

.protected-adventure-image figcaption b {
    color: #d6c35c;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .61rem
}

.payment-process {
    background: #fff;
    padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 6vw, 7rem)
}

.payment-process > header {
    max-width: 850px
}

.payment-process h2 {
    letter-spacing: -.055em;
    margin: 1rem 0 1.5rem;
    font-size: clamp(3rem, 6vw, 6.5rem);
    font-weight: 300;
    line-height: .92
}

.payment-process > header > p:last-child {
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1.6
}

.payment-steps {
    background: var(--line);
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin-top: 3rem;
    display: grid
}

.payment-steps article {
    color: #fff;
    min-height: 280px;
    padding: 2rem
}

.payment-steps article:first-child {
    background: var(--academy)
}

.payment-steps article:nth-child(2) {
    background: var(--prevention)
}

.payment-steps article:nth-child(3) {
    background: var(--business)
}

.payment-steps article:nth-child(4) {
    background: var(--adventure)
}

.payment-steps span {
    color: #ffffffc7;
    font-weight: 850
}

.payment-steps h3 {
    margin-top: 3rem;
    font-size: 1.55rem;
    font-weight: 400
}

.payment-steps p {
    color: #ffffffe0;
    line-height: 1.55
}

.payment-note {
    border-left: 5px solid var(--accent);
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    margin-top: 2rem;
    padding: 1rem 0 1rem 1.3rem;
    display: flex
}

.payment-note p {
    max-width: 850px;
    margin: 0;
    line-height: 1.5
}

.payment-note a {
    color: var(--accent);
    flex: none;
    font-size: .75rem;
    font-weight: 850
}

.payment-note-links {
    flex-direction: column;
    flex: none;
    gap: .7rem;
    display: flex
}

.payment-process-compact {
    background: #f7f3eb
}

.payment-process-compact h2 {
    font-size: clamp(2.8rem, 5vw, 5rem)
}

.site-footer {
    color: #fff;
    background: #11110f;
    justify-content: space-between;
    align-items: start;
    gap: 3rem;
    padding: 3rem clamp(1rem, 6vw, 7rem);
    display: flex
}

.site-footer strong {
    letter-spacing: .13em
}

.site-footer p {
    color: #8f8d86;
    font-size: .75rem
}

.site-footer nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1.5rem;
    font-size: .75rem;
    display: flex
}

.site-footer nav a {
    border-bottom: 1px solid #55534e;
    padding-bottom: .25rem
}

.order-page {
    background: #f3efe7;
    min-height: 100vh
}

.order-form, .order-result {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 7rem) clamp(1rem, 4vw, 4rem)
}

.order-form {
    grid-template-columns:minmax(0, 1.45fr) minmax(300px, .55fr);
    align-items: start;
    gap: 2rem;
    display: grid
}

.order-form-main, .order-sidebar, .transfer-card, .order-summary {
    border: 1px solid var(--line);
    background: #fff;
    padding: clamp(1.5rem, 4vw, 3.5rem)
}

.order-form h1, .order-success h1 {
    letter-spacing: -.055em;
    margin: 1rem 0 1.5rem;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 300;
    line-height: .92
}

.order-lead {
    color: var(--muted);
    font-size: 1.15rem;
    line-height: 1.6
}

.form-grid {
    grid-template-columns:1fr 1fr;
    gap: 1rem;
    margin-top: 2rem;
    display: grid
}

.form-grid label {
    letter-spacing: .06em;
    text-transform: uppercase;
    gap: .45rem;
    font-size: .69rem;
    font-weight: 850;
    display: grid
}

.form-grid label small {
    color: var(--muted);
    text-transform: none;
    font-weight: 500
}

.form-grid input {
    border: 1px solid var(--line);
    background: #faf8f4;
    min-height: 3.4rem;
    padding: .8rem
}

.form-grid .wide {
    grid-column: 1/-1
}

.order-consents {
    border-top: 1px solid var(--line);
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    display: grid
}

.order-consents label {
    grid-template-columns:22px 1fr;
    align-items: start;
    gap: .8rem;
    font-size: .78rem;
    line-height: 1.5;
    display: grid
}

.order-consents input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0
}

.order-consents a {
    color: var(--accent);
    font-weight: 800;
    text-decoration: underline
}

.pay-order-button {
    background: var(--accent);
    color: #fff;
    text-transform: uppercase;
    border: 0;
    justify-content: space-between;
    width: 100%;
    margin-top: 2rem;
    padding: 1.2rem;
    font-size: .78rem;
    font-weight: 850;
    display: flex
}

.implementation-note {
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.5
}

.order-sidebar {
    position: sticky;
    top: 1rem
}

.order-sidebar h2, .order-summary h2, .transfer-card h2 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.08
}

.order-sidebar > div, .order-summary > div {
    border-top: 1px solid var(--line);
    justify-content: space-between;
    align-items: baseline;
    margin-top: 2rem;
    padding-top: 1.2rem;
    display: flex
}

.order-sidebar > div strong, .order-summary > div strong {
    color: var(--accent);
    white-space: nowrap;
    font-size: 2.4rem
}

.order-sidebar > p, .order-summary > p {
    color: var(--muted);
    line-height: 1.5
}

.order-success {
    align-items: start;
    gap: 1.5rem;
    margin-bottom: 3rem;
    display: flex
}

.order-success > span {
    color: #236745;
    background: #e4f2ea;
    border-radius: 50%;
    flex: none;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.5rem;
    display: grid
}

.order-success p:last-child {
    color: var(--muted);
    max-width: 780px;
    font-size: 1.05rem;
    line-height: 1.6
}

.payment-layout {
    grid-template-columns:minmax(0, 1.35fr) minmax(300px, .65fr);
    align-items: start;
    gap: 2rem;
    display: grid
}

.giro-placeholder {
    border: 1px solid var(--line);
    background: #f7f4ee;
    grid-template-columns:180px 1fr;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0;
    padding: 1.5rem;
    display: grid
}

.giro-placeholder > div {
    aspect-ratio: 1;
    color: #fff;
    letter-spacing: .14em;
    text-align: center;
    text-shadow: 0 1px 4px #000;
    background: repeating-linear-gradient(45deg, #171715 0 8px, #fff 8px 16px);
    place-items: center;
    font-size: 1.1rem;
    font-weight: 900;
    display: grid
}

.giro-placeholder p {
    color: var(--muted);
    line-height: 1.55
}

.transfer-list {
    counter-reset: transfer;
    padding: 0;
    list-style: none
}

.transfer-list li {
    border-top: 1px solid var(--line);
    counter-increment: transfer;
    grid-template-columns:34px 1fr;
    align-items: center;
    gap: 1rem;
    padding: .9rem 0;
    display: grid
}

.transfer-list li:before {
    border: 1px solid var(--line);
    color: var(--accent);
    content: counter(transfer);
    border-radius: 50%;
    place-items: center;
    width: 30px;
    height: 30px;
    display: grid
}

.important-note {
    background: #fff3d7;
    border-left: 4px solid #b77a00;
    margin-top: 1.5rem;
    padding: 1rem;
    line-height: 1.55
}

.order-summary ul {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none
}

.order-summary li {
    border-top: 1px solid var(--line);
    grid-template-columns:28px 1fr;
    align-items: start;
    gap: .8rem;
    padding: .9rem 0;
    display: grid
}

.order-summary li b {
    color: var(--accent)
}

.back-link {
    border-bottom: 1px solid var(--accent);
    color: var(--accent);
    margin-top: 2rem;
    padding-bottom: .3rem;
    font-size: .75rem;
    font-weight: 850;
    display: inline-block
}

.legal-page {
    background: #f3efe7;
    min-height: 100vh
}

.legal-page > article {
    background: #fff;
    width: calc(100% - 2rem);
    max-width: 900px;
    margin: clamp(2rem, 6vw, 6rem) auto;
    padding: clamp(1.5rem, 6vw, 5rem);
    overflow: hidden
}

.legal-page h1 {
    -webkit-hyphens: auto;
    hyphens: auto;
    letter-spacing: -.06em;
    overflow-wrap: anywhere;
    max-width: 100%;
    margin: 1rem 0 3rem;
    font-size: clamp(2.25rem, 7vw, 7rem);
    font-weight: 300;
    line-height: .9
}

.legal-page h2 {
    border-top: 1px solid var(--line);
    margin: 2.4rem 0 1rem;
    padding-top: 1.4rem;
    font-size: 1.7rem;
    font-weight: 400
}

.legal-page p {
    line-height: 1.65
}

.legal-page article a {
    color: var(--academy);
    text-decoration: underline
}

.payment-info-page {
    background: #fff;
    min-height: 100vh
}

.payment-info-hero {
    background: var(--ink);
    color: #fff;
    padding: clamp(4rem, 9vw, 9rem) clamp(1rem, 7vw, 8rem)
}

.payment-info-hero h1 {
    letter-spacing: -.07em;
    text-transform: uppercase;
    max-width: 1050px;
    margin: 1.5rem 0 2rem;
    font-size: clamp(4rem, 9vw, 9rem);
    font-weight: 300;
    line-height: .82
}

.payment-info-hero > p:nth-of-type(2) {
    color: #ccc8bf;
    max-width: 760px;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    line-height: 1.5
}

.payment-info-hero > a {
    background: var(--gold);
    color: #130f00;
    text-transform: uppercase;
    justify-content: space-between;
    max-width: 420px;
    margin-top: 2rem;
    padding: 1.1rem;
    font-size: .75rem;
    font-weight: 850;
    display: flex
}

.transfer-preview {
    background: #f3efe7;
    grid-template-columns:.9fr 1.1fr;
    gap: clamp(3rem, 8vw, 8rem);
    padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 7vw, 8rem);
    display: grid
}

.transfer-preview h2 {
    letter-spacing: -.055em;
    margin: 1rem 0 2rem;
    font-size: clamp(3rem, 5vw, 5.5rem);
    font-weight: 300;
    line-height: .92
}

.transfer-preview > div:first-child > p:last-of-type {
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1.65
}

.transfer-preview-card {
    border-top: 7px solid var(--gold);
    background: #fff;
    grid-template-columns:44px 1fr;
    padding: clamp(1.5rem, 4vw, 3rem);
    display: grid
}

.transfer-preview-card span, .transfer-preview-card p {
    border-bottom: 1px solid var(--line);
    margin: 0;
    padding: 1.1rem 0
}

.transfer-preview-card span {
    color: var(--academy);
    font-weight: 850
}

.transfer-preview-card p {
    line-height: 1.5
}

.payment-service-link {
    border-top: 1px solid var(--line);
    background: #fff;
    grid-template-columns:minmax(0, 1.2fr) minmax(280px, .6fr);
    align-items: end;
    gap: clamp(2rem, 7vw, 7rem);
    padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 7vw, 8rem);
    display: grid
}

.payment-service-link h2 {
    letter-spacing: -.06em;
    margin: 1rem 0 1.5rem;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 300;
    line-height: .9
}

.payment-service-link p:not(.eyebrow) {
    color: var(--muted);
    max-width: 760px;
    font-size: 1.12rem;
    line-height: 1.65
}

.payment-service-link small {
    color: var(--muted);
    max-width: 760px;
    line-height: 1.5;
    display: block
}

.payment-service-link > a {
    background: var(--adventure);
    color: #fff;
    text-transform: uppercase;
    justify-content: space-between;
    align-items: center;
    min-height: 58px;
    padding: 1rem 1.2rem;
    font-size: .76rem;
    font-weight: 850;
    display: flex
}

.no-payment-box {
    border-left: 5px solid var(--adventure);
    gap: .35rem;
    margin-top: 2rem;
    padding: .7rem 0 .7rem 1rem;
    display: grid
}

.no-payment-box strong {
    color: var(--adventure);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .72rem
}

.no-payment-box span {
    color: var(--muted);
    font-size: .8rem;
    line-height: 1.5
}

.payment-helper {
    background: var(--ink);
    color: #fff;
    padding: clamp(5rem, 9vw, 9rem) clamp(1rem, 7vw, 8rem)
}

.payment-helper > header {
    max-width: 850px
}

.payment-helper h2 {
    letter-spacing: -.055em;
    margin: 1rem 0 1.5rem;
    font-size: clamp(3rem, 6vw, 6.5rem);
    font-weight: 300;
    line-height: .92
}

.payment-helper > header > p:last-child {
    color: #aaa79f;
    font-size: 1.05rem;
    line-height: 1.65
}

.payment-helper-layout {
    grid-template-columns:minmax(0, 1.2fr) minmax(320px, .8fr);
    align-items: start;
    gap: 2rem;
    margin-top: 3rem;
    display: grid
}

.payment-helper form, .giro-output {
    color: var(--ink);
    background: #fff;
    min-height: 100%;
    padding: clamp(1.5rem, 4vw, 3rem)
}

.payment-helper form > label {
    letter-spacing: .07em;
    text-transform: uppercase;
    gap: .5rem;
    margin-bottom: 1.2rem;
    font-size: .69rem;
    font-weight: 850;
    display: grid
}

.payment-helper select, .payment-helper input {
    border: 1px solid var(--line);
    background: #f5f1e9;
    width: 100%;
    min-height: 3.5rem;
    padding: .8rem
}

.payment-fixed-row {
    border-top: 1px solid var(--line);
    grid-template-columns:90px minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 4rem;
    display: grid
}

.payment-fixed-row > span {
    color: var(--muted);
    font-size: .72rem
}

.payment-fixed-row > strong {
    overflow-wrap: anywhere
}

.copy-payment {
    border: 1px solid var(--line);
    cursor: pointer;
    text-transform: uppercase;
    background: 0 0;
    padding: .55rem;
    font-size: .66rem;
    font-weight: 850
}

.generate-giro {
    background: var(--academy);
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    border: 0;
    justify-content: space-between;
    width: 100%;
    margin-top: 1.5rem;
    padding: 1.1rem;
    font-size: .72rem;
    font-weight: 850;
    display: flex
}

.payment-safety {
    color: var(--muted);
    text-align: center;
    margin-bottom: 0;
    font-size: .67rem
}

.giro-output {
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex
}

.giro-output img {
    width: 100%;
    max-width: 360px;
    height: auto
}

.giro-output > strong {
    margin-top: 1rem;
    font-size: 1.1rem
}

.giro-output > p, .giro-empty p {
    color: var(--muted);
    max-width: 430px;
    line-height: 1.55
}

.giro-empty {
    place-items: center;
    display: grid
}

.giro-empty > span {
    color: #fff;
    letter-spacing: .14em;
    text-shadow: 0 1px 4px #000;
    background: repeating-linear-gradient(45deg, #0c0c0c 0 8px, #fff 8px 16px);
    place-items: center;
    width: 210px;
    height: 210px;
    font-size: 1rem;
    font-weight: 850;
    display: grid
}

.payment-helper-warning {
    border-left: 5px solid var(--gold);
    gap: .35rem;
    margin-top: 2rem;
    padding-left: 1rem;
    display: grid
}

.payment-helper-warning strong {
    color: var(--gold);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .72rem
}

.payment-helper-warning span {
    color: #aaa79f;
    font-size: .8rem;
    line-height: 1.5
}

@media (width <= 980px) {
    .portal-hero, .portal-principles, .access-terms, .course-hero, .course-details, .course-content, .customer-login-hero, .customer-login-support, .password-request-page {
        grid-template-columns:1fr
    }

    .portal-hero {
        min-height: auto
    }

    .catalog-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .course-login {
        max-width: 650px
    }

    .payment-steps {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .order-form, .payment-layout {
        grid-template-columns:1fr
    }

    .order-sidebar {
        position: static
    }

    .transfer-preview, .payment-service-link, .payment-helper-layout {
        grid-template-columns:1fr
    }
}

@media (width <= 720px) {
    .support-assistant {
        bottom: .65rem;
        right: .65rem
    }

    .support-assistant__panel {
        width: calc(100vw - 1.3rem);
        max-height: calc(100vh - 1.3rem)
    }

    .support-assistant__search > div {
        grid-template-columns:1fr
    }

    .portal-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding-block: 1.2rem
    }

    .portal-header nav span {
        display: none
    }

    .portal-hero h1, .course-hero-copy h1 {
        font-size: clamp(3.3rem, 17vw, 5rem)
    }

    .portal-hero-copy {
        border-left: 0;
        padding-left: 0
    }

    .portal-hero-copy > div, .access-terms > div {
        grid-template-columns:1fr
    }

    .access-terms article {
        min-height: 190px
    }

    .catalog-group > header {
        flex-direction: column;
        align-items: start;
        gap: .7rem
    }

    .catalog-grid {
        grid-template-columns:1fr
    }

    .catalog-card {
        min-height: 300px
    }

    .course-final-login {
        flex-direction: column
    }

    .course-final-login > a {
        align-self: start
    }

    .facts-grid > div {
        grid-template-columns:1fr;
        gap: .35rem
    }

    .protected-course {
        display: block
    }

    .protected-nav {
        height: auto;
        position: relative
    }

    .protected-nav nav {
        display: none
    }

    .protected-media {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem
    }

    .course-step-controls {
        grid-template-columns:1fr 1fr
    }

    .course-step-controls label {
        grid-area: 1 / 1 /auto/ -1
    }

    .game-start-grid {
        grid-template-columns:1fr
    }

    .game-start-grid > div {
        min-height: 0
    }

    .workbook-document > header {
        grid-template-columns:1fr;
        align-items: stretch
    }

    .workbook-view-controls {
        justify-content: flex-start
    }

    .protected-workbook-viewer {
        height: 70vh
    }

    .result-actions {
        flex-direction: column;
        align-items: stretch
    }

    .safety-result {
        grid-template-columns:1fr;
        align-items: start
    }

    .press-evidence {
        grid-template-columns:1fr
    }

    .press-evidence > img {
        max-width: 230px
    }

    .feedback-grid {
        grid-template-columns:1fr
    }

    .feedback-grid .wide {
        grid-column: auto
    }

    .payment-steps {
        grid-template-columns:1fr
    }

    .payment-steps article {
        min-height: auto
    }

    .payment-note, .site-footer {
        flex-direction: column;
        align-items: start
    }

    .site-footer nav {
        justify-content: flex-start
    }

    .form-grid {
        grid-template-columns:1fr
    }

    .form-grid .wide {
        grid-column: auto
    }

    .giro-placeholder {
        grid-template-columns:1fr
    }

    .giro-placeholder > div {
        width: 100%;
        max-width: 180px
    }

    .order-success {
        flex-direction: column
    }

    .portal-notice {
        text-align: left;
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem
    }

    .copy-protection-hero {
        grid-template-columns:1fr
    }

    .copy-protection-hero > div:last-child {
        border-top: 1px solid #484844;
        border-left: 0;
        padding-top: 1.5rem;
        padding-left: 0
    }

    .copy-protection-explainer {
        grid-template-columns:1fr
    }

    .copy-protection-explainer article {
        min-height: auto
    }

    .copy-protection-explainer h2 {
        margin-top: 2rem
    }

    .copy-protection-demo {
        display: block
    }

    .copy-protection-demo > aside {
        min-height: 220px
    }

    .copy-protection-demo > article {
        margin: 0
    }

    .copy-protection-demo-topline {
        flex-direction: column;
        align-items: start;
        gap: .5rem
    }

    .copy-protection-next {
        flex-direction: column;
        align-items: start
    }

    .payment-fixed-row {
        grid-template-columns:1fr auto;
        align-items: start;
        padding: .8rem 0
    }

    .payment-fixed-row > span {
        grid-column: 1/-1
    }

    .legal-page > article {
        width: calc(100% - 1rem);
        margin-block: 1rem 2.5rem;
        padding: 1.35rem
    }

    .legal-page h1 {
        letter-spacing: -.045em;
        margin-bottom: 2rem;
        font-size: clamp(2.1rem, 11vw, 3.5rem);
        line-height: .95
    }
}

@media print {
    body {
        background: #fff !important
    }

    .protected-nav, .protected-content > header, .no-print {
        display: none !important
    }

    .protected-course, .protected-content, .course-focus-stage {
        color: #111 !important;
        background: #fff !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important
    }

    .protected-module.result-sheet {
        box-shadow: none !important;
        color: #111 !important;
        background: #fff !important;
        border: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important
    }

    .result-list section {
        break-inside: avoid;
        color: #111 !important;
        background: #f3f3f3 !important
    }

    .result-actions {
        display: none !important
    }

    .safety-result {
        color: #111 !important;
        background: #eee !important
    }

    .safety-result small {
        color: #555 !important
    }

    .media-license-watermark {
        color: #0000002e !important;
        text-shadow: none !important
    }
}

.rio-service-page {
    color: #17201e;
    background: #efe7d6;
    min-height: 100vh
}

.rio-service-hero {
    color: #fff;
    background: linear-gradient(135deg, #142f28, #0d201b);
    grid-template-columns:minmax(0, 1fr) 240px;
    align-items: center;
    gap: 3rem;
    padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 7vw, 7rem);
    display: grid
}

.rio-service-hero h1 {
    letter-spacing: -.055em;
    margin: .7rem 0 1.2rem;
    font-family: Georgia, serif;
    font-size: clamp(3rem, 7vw, 6rem);
    font-weight: 400;
    line-height: .92
}

.rio-service-hero p:not(.eyebrow) {
    max-width: 760px;
    font-size: clamp(1rem, 2vw, 1.25rem);
    line-height: 1.6
}

.rio-service-hero > div > strong {
    border-left: 4px solid #ae3029;
    margin-top: 1.5rem;
    padding: .65rem 1rem;
    display: block
}

.rio-service-compass {
    border: 1px solid #efe7d673;
    border-radius: 50%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 220px;
    display: flex;
    position: relative
}

.rio-service-compass:before, .rio-service-compass:after {
    content: "";
    background: #efe7d6a6;
    height: 1px;
    position: absolute;
    left: -25px;
    right: -25px;
    transform: rotate(-22deg)
}

.rio-service-compass:after {
    transform: rotate(63deg)
}

.rio-service-compass b {
    color: #db645c;
    font-size: 2rem
}

.rio-service-compass span {
    letter-spacing: .12em;
    font-family: Georgia, serif
}

.rio-service-form {
    background: #ffffff73;
    border: 1px solid #17372e33;
    max-width: 960px;
    margin: clamp(2rem, 6vw, 5rem) auto;
    padding: clamp(1.25rem, 5vw, 3.5rem);
    box-shadow: 0 18px 55px #0d211c14
}

.rio-service-form fieldset {
    border: 0;
    border-top: 1px solid #17372e38;
    margin: 0;
    padding: 2.25rem 0
}

.rio-service-form fieldset:first-child {
    border-top: 0;
    padding-top: 0
}

.rio-service-form legend {
    color: #17372e;
    padding-right: 1rem;
    font-family: Georgia, serif;
    font-size: 1.55rem
}

.rio-service-form label > span {
    margin-bottom: .45rem;
    font-size: .82rem;
    font-weight: 800;
    display: block
}

.rio-service-form input:not([type=checkbox]) {
    font: inherit;
    background: #fff;
    border: 1px solid #69736e;
    width: 100%;
    min-height: 50px;
    padding: .75rem
}

.rio-service-fields {
    grid-template-columns:1.2fr 1fr;
    gap: 1rem;
    display: grid
}

.rio-service-check {
    background: #d1b88633;
    border: 1px solid #17372e4d;
    align-items: flex-start;
    gap: .8rem;
    padding: 1rem;
    display: flex
}

.rio-service-check input {
    width: 22px;
    min-width: 22px;
    height: 22px;
    margin: 0
}

.rio-service-check span {
    margin: 0;
    line-height: 1.5
}

.rio-service-privacy, .rio-service-small {
    font-size: .8rem;
    line-height: 1.5
}

.rio-service-error {
    color: #8e201b;
    font-weight: 800
}

.rio-service-submit {
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    background: #a52a26;
    border: 0;
    width: 100%;
    min-height: 56px;
    padding: 1rem;
    font-size: .85rem;
    font-weight: 850
}

.rio-service-submit:focus, .rio-service-form input:focus {
    outline-offset: 3px;
    outline: 3px solid #dd8d2d
}

.rio-service-legal {
    justify-content: center;
    gap: 1.2rem;
    margin: -2rem auto 3rem;
    display: flex
}

@media (width <= 720px) {
    .rio-service-hero {
        grid-template-columns:1fr
    }

    .rio-service-compass {
        width: 165px;
        height: 165px
    }

    .rio-service-fields {
        grid-template-columns:1fr
    }
}

.rio-service-page {
    background-image: linear-gradient(#efe7d6e6, #efe7d6f0), url(../images/rio/rio-landschaft.jpg);
    background-position: 50%;
    background-size: cover
}

.rio-service-hero {
    color: #142f28;
    background-color: #efe7d6e0;
    background-image: linear-gradient(90deg, #efe7d6f7, #efe7d6c4), url(../images/rio/rio-landschaft.jpg);
    background-position: 50%, right 64%;
    background-size: cover;
    padding-top: 3rem;
    padding-bottom: 3rem
}

.rio-service-hero .eyebrow {
    color: #9b211d
}

.rio-service-kicker {
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 850;
    margin: 0 !important;
    font-size: .75rem !important
}

.rio-service-form {
    box-shadow: none;
    background: 0 0;
    border: 0;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    max-width: 1420px;
    padding: 0 1.25rem;
    display: grid
}

.rio-service-panel {
    background: #fffffff2;
    border: 1px solid #17372e2e;
    padding: clamp(1.25rem, 3vw, 2.5rem);
    box-shadow: 0 16px 40px #0d211c24
}

.rio-service-product {
    border-top: 1px solid #17372e2e;
    border-bottom: 1px solid #17372e2e;
    grid-template-columns:84px 1fr;
    align-items: center;
    gap: 1rem;
    margin: .8rem 0 1.4rem;
    padding: .9rem 0;
    display: grid
}

.rio-service-product img {
    object-fit: cover;
    width: 84px;
    height: 84px
}

.rio-service-product strong, .rio-service-product span {
    display: block
}

.rio-service-product strong {
    font-family: Georgia, serif;
    font-size: 1.3rem
}

.rio-service-product span {
    color: #56615c;
    margin-top: .3rem;
    font-size: .82rem
}

.rio-service-panel fieldset {
    padding: 1.4rem 0
}

.rio-service-panel h2 {
    color: #142f28;
    margin: .65rem 0 1rem;
    font-family: Georgia, serif;
    font-size: clamp(1.8rem, 3.2vw, 2.8rem);
    font-weight: 400
}

.rio-service-voucher {
    color: #f1e6cf;
    background: #111916;
    border: 1px solid #aa8f5a;
    min-height: 320px;
    margin-top: 1rem;
    padding: 2.2rem 1.7rem 2.3rem;
    display: block;
    overflow: visible
}

.rio-service-voucher-label {
    color: #111916;
    letter-spacing: .11em;
    text-transform: uppercase;
    background: #d4bb86;
    border-radius: 2px;
    margin: 0 0 1rem;
    padding: .55rem .7rem .48rem;
    font-size: .68rem;
    font-weight: 900;
    line-height: 1;
    display: inline-block
}

.rio-service-voucher-title {
    color: #fff;
    margin: 0 0 1rem;
    padding: 0;
    font-family: Georgia, serif;
    font-size: clamp(1.5rem, 2.4vw, 2.05rem);
    font-weight: 400;
    line-height: 1.4;
    display: block;
    overflow: visible
}

.rio-service-voucher p {
    margin: 0 0 1.25rem;
    line-height: 1.65
}

.rio-service-voucher input {
    border-color: #b49a66 !important
}

.rio-service-attachment {
    text-align: center;
    border: 2px dashed #8b918d;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 220px;
    margin: 1.4rem 0;
    padding: 1.5rem;
    display: flex
}

.rio-service-attachment > span {
    color: #9b211d;
    border: 3px solid #9b211d;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 72px;
    margin-bottom: 1rem;
    font-weight: 900;
    display: flex
}

.rio-service-attachment strong, .rio-service-attachment small {
    display: block
}

.rio-service-attachment small {
    color: #5d6561;
    margin-top: .4rem
}

.rio-service-right .rio-service-submit {
    background: linear-gradient(90deg, #8e1714, #b12722, #8e1714);
    margin-top: 1rem
}

@media (width <= 820px) {
    .rio-service-form {
        grid-template-columns:1fr
    }

    .rio-service-hero {
        background-image: linear-gradient(#efe7d6ed, #efe7d6ed), url(../images/rio/rio-landschaft.jpg)
    }
}

.admin-workspace {
    color: var(--ink);
    background: #f2efe8;
    min-height: 100vh
}

.admin-topbar {
    color: #fff;
    background: #11110f;
    justify-content: space-between;
    align-items: center;
    min-height: 76px;
    padding: 1rem clamp(1rem, 4vw, 4rem);
    display: flex
}

.admin-topbar div {
    gap: .25rem;
    display: grid
}

.admin-topbar span, .admin-form-preview span, .admin-toolbar span {
    color: #aaa79f;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .62rem;
    font-weight: 850
}

.admin-topbar strong {
    letter-spacing: .08em;
    font-size: .85rem
}

.admin-topbar a {
    text-transform: uppercase;
    border: 1px solid #55544f;
    padding: .8rem 1rem;
    font-size: .68rem;
    font-weight: 850
}

.admin-topbar nav {
    gap: .6rem;
    display: flex
}

.admin-hero {
    color: #fff;
    background: #191916;
    padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 6vw, 7rem)
}

.admin-hero h1 {
    letter-spacing: -.07em;
    text-transform: uppercase;
    margin: 1.5rem 0 2rem;
    font-size: clamp(3.4rem, 7.5vw, 8rem);
    font-weight: 300;
    line-height: .82
}

.admin-hero > p:not(.eyebrow) {
    color: #c4c1b9;
    max-width: 820px;
    font-size: clamp(1.1rem, 2vw, 1.55rem);
    line-height: 1.55
}

.admin-warning {
    border-left: 5px solid var(--adventure);
    gap: .35rem;
    max-width: 900px;
    margin-top: 2.5rem;
    padding: .6rem 0 .6rem 1.2rem;
    display: grid
}

.admin-warning span {
    color: #aaa79f;
    font-size: .82rem;
    line-height: 1.5
}

.admin-index {
    background: var(--academy);
    grid-template-columns:repeat(6, 1fr);
    padding: 0 clamp(1rem, 6vw, 7rem);
    display: grid
}

.admin-index a {
    color: #fff;
    text-transform: uppercase;
    border-right: 1px solid #fff3;
    padding: 1.15rem;
    font-size: .7rem;
    font-weight: 850
}

.admin-section {
    padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 6vw, 7rem)
}

.admin-section > header {
    grid-template-columns:minmax(220px, .5fr) minmax(0, 1.5fr);
    gap: 2rem;
    margin-bottom: 3rem;
    display: grid
}

.admin-section > header > div {
    align-items: center;
    gap: 1rem;
    display: flex
}

.admin-section > header > div > span {
    color: var(--academy);
    font-size: 3rem;
    font-weight: 200
}

.admin-section > header h2 {
    letter-spacing: -.055em;
    margin: 0;
    font-size: clamp(2.8rem, 5vw, 5.5rem);
    font-weight: 300;
    line-height: .9
}

.admin-toolbar {
    grid-template-columns:1fr auto;
    align-items: end;
    gap: 1rem;
    display: grid
}

.admin-toolbar label, .admin-form-preview label {
    gap: .45rem;
    display: grid
}

.admin-toolbar input, .admin-form-preview input, .admin-form-preview select, .note-form input, .note-form textarea, .customer-assignment input, .customer-assignment select {
    background: #fff;
    border: 1px solid #c9c5bc;
    width: 100%;
    min-height: 50px;
    padding: .8rem
}

.admin-form-preview select {
    min-height: 50px
}

.admin-toolbar button, .admin-form-preview button {
    background: var(--academy);
    color: #fff;
    text-transform: uppercase;
    border: 0;
    min-height: 50px;
    padding: .9rem 1.2rem;
    font-size: .7rem;
    font-weight: 850
}

.admin-toolbar button:disabled, .admin-form-preview button:disabled, .admin-course-actions button:disabled {
    cursor: not-allowed;
    opacity: .55
}

.admin-empty {
    text-align: center;
    border: 1px dashed #aaa69d;
    margin-top: 1.5rem;
    padding: clamp(2rem, 5vw, 4rem)
}

.admin-empty strong {
    font-size: 1.3rem
}

.admin-empty p {
    color: var(--muted);
    max-width: 720px;
    margin: 1rem auto 0;
    line-height: 1.55
}

.admin-public {
    background: #fff
}

.admin-form-preview {
    grid-template-columns:1fr 1fr;
    gap: 1rem;
    display: grid
}

.admin-form-preview button {
    grid-column: 1/-1
}

.admin-service {
    background: #e9e4da
}

.admin-course-table {
    border-top: 1px solid #c9c5bc
}

.admin-course-table article {
    border-bottom: 1px solid #c9c5bc;
    grid-template-columns:minmax(220px, 1.1fr) minmax(220px, 1fr) 220px;
    align-items: center;
    gap: 1.5rem;
    padding: 1.35rem 0;
    display: grid
}

.admin-course-title, .admin-course-media {
    gap: .3rem;
    display: grid
}

.admin-course-title > span, .admin-course-media > span {
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .62rem;
    font-weight: 850
}

.admin-course-title h3 {
    margin: 0;
    font-size: 1.3rem
}

.admin-course-title small {
    color: var(--muted)
}

.admin-course-media strong {
    font-size: .8rem;
    line-height: 1.45
}

.admin-course-actions {
    grid-template-columns:1fr 1fr;
    gap: .45rem;
    display: grid
}

.admin-course-actions a, .admin-course-actions button {
    background: var(--ink);
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    border: 0;
    padding: .75rem .65rem;
    font-size: .62rem;
    font-weight: 850
}

.admin-course-actions button {
    background: var(--academy)
}

.admin-directory-intro {
    color: var(--muted);
    max-width: 850px;
    margin: -1rem 0 2.5rem;
    font-size: 1rem;
    line-height: 1.65
}

.admin-overview-status {
    background: #c9c5bc;
    border: 1px solid #c9c5bc;
    grid-template-columns:repeat(3, 1fr);
    gap: 1px;
    margin-bottom: 1.25rem;
    display: grid
}

.admin-overview-status span {
    background: #f4f1eb;
    align-items: baseline;
    gap: .65rem;
    padding: .9rem 1rem;
    display: flex
}

.admin-overview-status b {
    color: var(--academy);
    font-size: 1.5rem
}

.admin-communication-grid {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 1.25rem;
    display: grid
}

.admin-link-panel {
    background: #f8f6f1;
    border: 1px solid #c9c5bc
}

.admin-link-panel > header {
    border-bottom: 1px solid #c9c5bc;
    gap: .25rem;
    padding: 1rem;
    display: grid
}

.admin-link-panel > header span {
    color: var(--academy);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .66rem;
    font-weight: 900
}

.admin-link-panel > header strong {
    font-size: 1rem
}

.admin-link-panel.is-internal > header {
    color: #fff;
    background: #171716
}

.admin-link-panel.is-internal > header span {
    color: #9fc0ea
}

.admin-link-panel.is-review {
    grid-column: 1/-1
}

.admin-link-panel.is-review > header {
    background: #e9e4da
}

.admin-link-panel > p {
    color: var(--muted);
    margin: 0;
    padding: 1rem;
    font-size: .78rem;
    line-height: 1.5
}

.admin-link-panel > nav {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    display: grid
}

.admin-link-panel > nav a {
    border-bottom: 1px solid #dedad1;
    justify-content: space-between;
    align-items: center;
    min-height: 42px;
    padding: .55rem .75rem;
    font-size: .74rem;
    display: flex
}

.admin-link-panel > nav a:nth-child(odd) {
    border-right: 1px solid #dedad1
}

.admin-link-panel > nav a:hover, .admin-link-panel > nav a:focus-visible {
    color: var(--academy);
    background: #fff
}

.admin-link-panel > nav a b {
    color: var(--academy)
}

.admin-compact-courses {
    border-top: 4px solid var(--academy);
    display: grid
}

.admin-compact-courses > strong {
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #ece8df;
    padding: .65rem .75rem;
    font-size: .7rem
}

.admin-compact-courses > div {
    border-top: 1px solid #dedad1;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    padding: .4rem .65rem;
    display: grid
}

.admin-compact-courses > div > span {
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .76rem;
    font-weight: 750;
    overflow: hidden
}

.admin-compact-courses > div nav {
    gap: .35rem;
    display: flex
}

.admin-compact-courses > div a {
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
    background: #22221f;
    padding: .48rem .55rem;
    font-size: .58rem;
    font-weight: 850
}

.admin-compact-courses > div a:hover, .admin-compact-courses > div a:focus-visible {
    background: var(--academy)
}

.audio-admin-directory {
    color: var(--ink);
    background: #efede7;
    min-height: 100vh
}

.audio-admin-hero, .audio-admin-overview, .audio-admin-preview, .audio-admin-stations {
    max-width: 1280px;
    margin: 0 auto;
    padding: 4rem 2rem
}

.audio-admin-hero h1 {
    letter-spacing: -.055em;
    text-transform: uppercase;
    max-width: 980px;
    margin: 1rem 0 1.5rem;
    font-size: clamp(3rem, 7vw, 7rem);
    line-height: .9
}

.audio-admin-hero > p:last-of-type {
    color: var(--muted);
    max-width: 850px;
    font-size: 1.05rem;
    line-height: 1.7
}

.audio-admin-facts {
    background: #bdb8ae;
    border: 1px solid #bdb8ae;
    grid-template-columns:repeat(4, 1fr);
    gap: 1px;
    margin-top: 2.5rem;
    display: grid
}

.audio-admin-facts span {
    background: #fff;
    gap: .25rem;
    padding: 1.25rem;
    display: grid
}

.audio-admin-facts b {
    font-size: 2rem
}

.audio-admin-overview, .audio-admin-preview, .audio-admin-stations {
    border-top: 1px solid #c9c5bc
}

.audio-admin-overview h2, .audio-admin-preview h2, .audio-admin-stations h2 {
    letter-spacing: -.04em;
    text-transform: uppercase;
    margin: .5rem 0 2rem;
    font-size: clamp(2rem, 4vw, 4rem)
}

.audio-admin-base-pages {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 1rem;
    display: grid
}

.audio-admin-base-pages article {
    border-left: 6px solid var(--adventure);
    background: #fff;
    gap: .35rem;
    padding: 1.2rem;
    display: grid
}

.audio-admin-base-pages span, .audio-admin-preview span {
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .68rem;
    font-weight: 850
}

.audio-admin-preview > div {
    color: #fff;
    background: #171716;
    grid-template-columns:150px 1fr;
    gap: .65rem 1.5rem;
    padding: 1.5rem;
    display: grid
}

.audio-admin-preview code {
    color: #e4b2a9;
    overflow-wrap: anywhere
}

.audio-admin-table {
    border: 1px solid #c9c5bc
}

.audio-admin-table article {
    background: #fff;
    border-bottom: 1px solid #dedad1;
    grid-template-columns:minmax(260px, 1fr) 2fr;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    display: grid
}

.audio-admin-table article:last-child {
    border-bottom: 0
}

.audio-admin-table article > div {
    grid-template-columns:42px 1fr;
    align-items: center;
    gap: 1rem;
    display: grid
}

.audio-admin-table article > div span {
    color: var(--adventure);
    font-size: 1.5rem;
    font-weight: 900
}

.audio-admin-table nav {
    grid-template-columns:repeat(3, 1fr);
    gap: .55rem;
    display: grid
}

.audio-admin-table nav a {
    color: #fff;
    background: #171716;
    gap: .2rem;
    padding: .75rem;
    font-size: .72rem;
    font-weight: 850;
    text-decoration: none;
    display: grid
}

.audio-admin-table nav a:hover, .audio-admin-table nav a:focus-visible {
    background: var(--adventure)
}

.audio-admin-table nav small {
    color: #bbb;
    overflow-wrap: anywhere;
    font-size: .56rem
}

@media (width <= 760px) {
    .audio-admin-facts, .audio-admin-base-pages {
        grid-template-columns:1fr 1fr
    }

    .audio-admin-table article, .audio-admin-table nav, .audio-admin-preview > div {
        grid-template-columns:1fr
    }

    .audio-admin-hero, .audio-admin-overview, .audio-admin-preview, .audio-admin-stations {
        padding: 3rem 1rem
    }
}

.admin-backend {
    color: #fff;
    background: #11110f
}

.admin-backend > header > div > span {
    color: #7fa5d4
}

.backend-functions {
    grid-template-columns:repeat(4, 1fr);
    display: grid
}

.backend-functions article {
    border: 1px solid #3c3b37;
    gap: .7rem;
    min-height: 170px;
    padding: 1.4rem;
    display: grid
}

.backend-functions strong {
    font-size: 1.1rem
}

.backend-functions span {
    color: #aaa79f;
    line-height: 1.55
}

.admin-primary-link {
    background: var(--academy);
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    min-height: 50px;
    padding: 1rem 1.2rem;
    font-size: .7rem;
    font-weight: 850
}

.admin-message {
    border-left: 5px solid var(--adventure);
    z-index: 20;
    background: #fff4d7;
    margin: 1.5rem clamp(1rem, 6vw, 7rem) 0;
    padding: 1rem 1.2rem;
    position: sticky;
    top: 10px
}

.customer-list {
    gap: 1.2rem;
    margin-top: 2rem;
    display: grid
}

.customer-card {
    background: #fff;
    border: 1px solid #c9c5bc;
    padding: 1.4rem
}

.customer-card.is-inactive {
    opacity: .7
}

.customer-card > header {
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    display: flex
}

.customer-card > header span, .customer-card dt, .customer-enrollments small {
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .62rem;
    font-weight: 850
}

.customer-card h3 {
    margin: .3rem 0 0;
    font-size: 1.8rem
}

.customer-status {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .45rem;
    display: flex
}

.customer-status b {
    text-transform: uppercase;
    background: #e9e4da;
    padding: .55rem .7rem;
    font-size: .65rem
}

.customer-card dl {
    grid-template-columns:1fr 1fr;
    gap: 1rem;
    margin: 1.4rem 0;
    display: grid
}

.customer-card dl div {
    border-left: 3px solid var(--academy);
    padding-left: .8rem
}

.customer-card dd {
    margin: .3rem 0 0;
    font-weight: 800
}

.customer-enrollments {
    gap: .55rem;
    display: grid
}

.customer-enrollments > div {
    background: #f2efe8;
    grid-template-columns:1fr auto auto;
    align-items: center;
    gap: .8rem;
    padding: .8rem;
    display: grid
}

.customer-enrollments button, .customer-card footer button, .customer-assignment button, .note-form button, .note-card button, .credential-box button, .customer-logout {
    cursor: pointer;
    text-transform: uppercase;
    border: 0;
    padding: .75rem .8rem;
    font-size: .64rem;
    font-weight: 850
}

.customer-enrollments button, .customer-assignment button, .note-form button {
    background: var(--academy);
    color: #fff
}

.customer-assignment {
    grid-template-columns:1fr 170px auto;
    gap: .6rem;
    margin-top: 1rem;
    display: grid
}

.customer-card > footer {
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.2rem;
    display: flex
}

.customer-card > footer button {
    background: var(--ink);
    color: #fff
}

.customer-card > footer .danger-button {
    background: #8e1714
}

.password-request-list {
    gap: 1rem;
    display: grid
}

.password-request-list article {
    border-left: 5px solid var(--academy);
    background: #fff;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.2rem;
    display: flex
}

.password-request-list article span {
    color: var(--muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .64rem;
    font-weight: 850
}

.password-request-list article h3 {
    margin: .3rem 0;
    font-size: 1.65rem
}

.password-request-list article p {
    margin: 0
}

.password-request-list article > div:last-child {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .6rem;
    display: flex
}

.password-request-list button {
    background: var(--ink);
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
    border: 0;
    padding: .8rem;
    font-size: .64rem;
    font-weight: 850
}

.password-request-list button:first-child {
    background: var(--academy)
}

.credential-box {
    background: #e7f0e7;
    border: 2px solid #55755b;
    margin-top: 1.5rem;
    padding: 1.3rem
}

.credential-box b {
    font-family: ui-monospace, monospace
}

.note-form {
    grid-template-columns:1fr auto;
    gap: .8rem;
    margin-bottom: 2rem;
    display: grid
}

.note-form textarea {
    resize: vertical;
    grid-column: 1/-1
}

.note-board {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 1rem;
    display: grid
}

.note-card {
    background: #fff8d7;
    gap: .8rem;
    min-height: 220px;
    padding: 1.4rem;
    display: grid;
    transform: rotate(-.25deg);
    box-shadow: 0 8px 22px #201d141a
}

.note-card:nth-child(2n) {
    background: #e8f0ed;
    transform: rotate(.25deg)
}

.note-card.is-completed {
    opacity: .6
}

.note-card > span {
    color: var(--muted);
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .62rem;
    font-weight: 850
}

.note-card h3, .note-card p {
    margin: 0
}

.note-card p {
    white-space: pre-wrap;
    line-height: 1.55
}

.note-card footer {
    flex-wrap: wrap;
    align-self: end;
    gap: .45rem;
    display: flex
}

.note-card button {
    color: #fff;
    background: #23231f
}

.admin-access-denied {
    max-width: 720px;
    margin: auto;
    padding: 12vh 1.5rem
}

.admin-access-denied h1 {
    letter-spacing: -.06em;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 300
}

.admin-access-denied p {
    line-height: 1.6
}

.admin-access-denied a {
    background: var(--academy);
    color: #fff;
    margin-top: 1rem;
    padding: 1rem;
    display: inline-block
}

.customer-logout {
    color: #111;
    background: #fff;
    width: 100%
}

@media (width <= 900px) {
    .admin-course-table article {
        grid-template-columns:1fr 1fr;
        align-items: start
    }

    .admin-course-actions {
        grid-column: 1/-1
    }

    .admin-index, .backend-functions, .admin-communication-grid, .customer-assignment {
        grid-template-columns:1fr 1fr
    }

    .customer-assignment button {
        grid-column: 1/-1
    }
}

@media (width <= 680px) {
    .admin-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem
    }

    .admin-index, .admin-section > header, .admin-course-table article, .admin-form-preview, .admin-toolbar, .backend-functions, .admin-communication-grid, .admin-overview-status {
        grid-template-columns:1fr
    }

    .admin-link-panel.is-review, .admin-course-actions, .admin-form-preview button {
        grid-column: auto
    }

    .admin-hero h1 {
        font-size: clamp(3rem, 16vw, 4.8rem)
    }

    .admin-topbar nav, .customer-card > header, .customer-card > footer {
        flex-direction: column;
        align-items: stretch;
        width: 100%
    }

    .customer-card dl, .customer-assignment, .note-form, .note-board {
        grid-template-columns:1fr
    }

    .customer-assignment button, .note-form textarea {
        grid-column: auto
    }

    .customer-enrollments > div {
        grid-template-columns:1fr
    }

    .password-request-list article {
        flex-direction: column;
        align-items: stretch
    }

    .password-request-list article > div:last-child {
        justify-content: flex-start
    }
}