/* Shared visual language, using the colours of the supplied school SVGs.
   Irregular curves are stable artwork, not animations or runtime randomness. */
.brand-site {
    --brand-ink: #052439;
    --brand-muted: #40576a;
    --brand-paper: #f8f6f4;
    --brand-yellow: #feb93a;
    --brand-warm: #f9ebdc;
    --brand-blue: #45b9f0;
    --brand-blue-soft: #d6e6ef;
    --brand-link: #075477;
    --brand-gutter: clamp(2.5rem, 10vw, 10rem);
    --brand-edge-width: clamp(0.75rem, 4vw, 3.5rem);
    --brand-footer-wave-height: clamp(3rem, 8vw, 7rem);
    --TA-bcolor: var(--brand-paper);
    --TA-color: var(--brand-ink);
    --TA-color-yl: var(--brand-warm);
    --TA-color-yd: var(--brand-yellow);
    --TA-color-ydd: var(--brand-yellow);
    --TA-color-bl: var(--brand-blue-soft);
    --TA-color-bdd: var(--brand-blue);
    --school-ink: var(--brand-ink);
    --school-ink-soft: var(--brand-muted);
    --school-blue: var(--brand-link);
    --school-brand-blue: var(--brand-blue);
    --school-blue-soft: var(--brand-blue-soft);
    --school-yellow: var(--brand-yellow);
    --school-yellow-soft: var(--brand-warm);
    --school-bg: var(--brand-paper);
    --school-border: #d6e0e6;
    background: var(--brand-paper);
    color: var(--brand-ink);
}

.brand-site #main-content {
    position: relative;
    isolation: isolate;
}

.brand-site #main-content::before,
.brand-site #main-content::after {
    position: absolute;
    inset-inline: 0;
    pointer-events: none;
    content: "";
}

.brand-site #main-content::before {
    top: 0;
    z-index: -1;
    height: clamp(12rem, 31.2vw, 38rem);
    background: url("../img/brand/corners.6cec8e497cad.svg?v=20261005-3") top center / 100% auto no-repeat;
}

.brand-site #main-content::after {
    top: 0;
    /* Continue behind the footer, including its margin and transparent wave. */
    bottom: -12rem;
    z-index: 2;
    /* Repeat the corner artwork above the ribbons in the outer margins only.
       This cleanly joins the shapes without a translucent stripe on yellow. */
    background-image: url("../img/brand/corners.6cec8e497cad.svg?v=20261005-3"), url("../img/brand/edge-yellow.cd0a0c0e9cf9.svg"), url("../img/brand/edge-blue.3e2882f2656b.svg?v=20261005-3");
    background-position: center top, left top, right -19rem;
    background-size: 100% auto, var(--brand-edge-width) 90rem, var(--brand-edge-width) 90rem;
    background-repeat: no-repeat, repeat-y, repeat-y;
    -webkit-mask-image: linear-gradient(to right,
        #000 0, #000 var(--brand-edge-width),
        transparent var(--brand-edge-width), transparent calc(100% - var(--brand-edge-width)),
        #000 calc(100% - var(--brand-edge-width)), #000 100%);
    mask-image: linear-gradient(to right,
        #000 0, #000 var(--brand-edge-width),
        transparent var(--brand-edge-width), transparent calc(100% - var(--brand-edge-width)),
        #000 calc(100% - var(--brand-edge-width)), #000 100%);
}

.brand-site .site-header {
    border-bottom-color: var(--brand-blue-soft);
    background: var(--brand-paper);
}

.brand-site :is(.nav-register, .nav-school, .nav-school-contact) {
    background: var(--brand-yellow);
    color: var(--brand-ink);
}

.brand-wave {
    position: relative;
    isolation: isolate;
    --brand-wave-height: clamp(2.5rem, 7.5vw, 7rem);
    --brand-wave-top: url("../img/brand/wave-a-top.e629b6fbaff4.svg");
    --brand-wave-bottom: url("../img/brand/wave-a-bottom.11cf6c85dfb6.svg");
}

.brand-wave--b {
    --brand-wave-top: url("../img/brand/wave-b-top.ecd070703de9.svg");
    --brand-wave-bottom: url("../img/brand/wave-b-bottom.3be97f056453.svg");
}

.brand-wave--c {
    --brand-wave-top: url("../img/brand/wave-c-top.cf646c370985.svg");
    --brand-wave-bottom: url("../img/brand/wave-c-bottom.6ee6e62b238a.svg");
}

.brand-wave--blue { --brand-wave-fill: #e9eff2; }
.brand-wave--warm { --brand-wave-fill: var(--brand-warm); }
.brand-wave--dark { --brand-wave-fill: var(--brand-ink); }

.brand-site .brand-wave {
    background: var(--brand-wave-fill);
}

/* Mask only the decoration, never text, links, photos or focus outlines.
   Separate edge masks keep curves proportional on long mobile sections. */
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
    .brand-site .brand-wave { background: none; }

    .brand-wave::before {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--brand-wave-fill);
        -webkit-mask:
            var(--brand-wave-top) top / 100% var(--brand-wave-height) no-repeat,
            linear-gradient(#000, #000) center / 100% calc(100% - var(--brand-wave-height) - var(--brand-wave-height) + 2px) no-repeat,
            var(--brand-wave-bottom) bottom / 100% var(--brand-wave-height) no-repeat;
        mask:
            var(--brand-wave-top) top / 100% var(--brand-wave-height) no-repeat,
            linear-gradient(#000, #000) center / 100% calc(100% - var(--brand-wave-height) - var(--brand-wave-height) + 2px) no-repeat,
            var(--brand-wave-bottom) bottom / 100% var(--brand-wave-height) no-repeat;
        pointer-events: none;
        content: "";
    }
}

.brand-dot-cloud {
    position: absolute;
    z-index: 2;
    width: 7rem;
    height: 10rem;
    background: url("../img/brand/dot-cloud.a7cfd1e9476e.svg") center / contain no-repeat;
    pointer-events: none;
}

/* Original advertising illustrations have their own space in the layout:
   never cover headings, cards or controls with decorative artwork. */
.brand-site .brand-illustrated-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    max-width: 1200px;
    margin-inline: auto;
    gap: clamp(1.5rem, 5vw, 4rem);
    text-align: left;
}

.brand-illustrated-heading > div {
    min-width: 0;
    max-width: 47rem;
}

.brand-motif {
    display: block;
    width: auto;
    height: clamp(8rem, 17vw, 12rem);
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.brand-motif--plane {
    width: clamp(10rem, 23vw, 18rem);
    height: auto;
}

.brand-illustrated-heading > div > p:last-child:not(.school-kicker):not(.section-kicker) {
    color: var(--brand-muted);
}

.brand-site .site-footer {
    position: relative;
    z-index: 3;
    margin-top: clamp(3rem, 5vw, 5rem);
    border: 0;
    background: var(--brand-ink);
    color: white;
}

.brand-site .site-footer::before {
    position: absolute;
    inset-inline: 0;
    bottom: calc(100% - 1px);
    height: var(--brand-footer-wave-height);
    background: var(--brand-ink);
    -webkit-mask: url("../img/brand/wave-c-top.cf646c370985.svg") center / 100% 100% no-repeat;
    mask: url("../img/brand/wave-c-top.cf646c370985.svg") center / 100% 100% no-repeat;
    pointer-events: none;
    content: "";
}

.brand-site .site-footer :is(a, .footer-status, .school-footer__bottom) {
    color: var(--brand-blue-soft);
}

.brand-site .site-footer .footer-column > strong { color: var(--brand-yellow); }
.brand-site .site-footer .footer-brand > strong { color: white; }
.brand-site .site-footer .footer-logo {
    padding: 0.4rem;
    border-radius: 0.75rem;
    background: var(--brand-paper);
}

.brand-site .site-footer a:focus-visible {
    outline-color: var(--brand-blue);
}

.platform-site {
    --color-primary: var(--brand-yellow);
    --color-primary-dark: #fcb63a;
    --color-accent: var(--brand-link);
    --color-text: var(--brand-ink);
    --color-muted: var(--brand-muted);
    --color-bg: var(--brand-paper);
    --color-soft-blue: var(--brand-blue-soft);
    --color-border: #d6e0e6;
}

.platform-site .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    width: min(1200px, calc(100% - var(--brand-gutter)));
    min-height: 42rem;
    margin-inline: auto;
    padding: clamp(4.5rem, 9vw, 8rem) 0 5rem;
    gap: clamp(2rem, 5vw, 4rem);
    background: none;
}

.platform-site .hero-content { text-align: left; }
.platform-site .hero h1 {
    font-size: clamp(2.6rem, 4.5vw, 4.25rem);
    font-weight: 900;
}
.platform-site .hero .hero-actions { justify-content: flex-start; }

.platform-site .hero-visual {
    position: relative;
    display: grid;
    min-height: 28rem;
    place-items: center;
}
.platform-site .hero-visual::before {
    position: absolute;
    inset: 2rem 0 1rem;
    border-radius: 42% 58% 39% 61% / 63% 38% 62% 37%;
    background: var(--brand-blue-soft);
    transform: rotate(7deg);
    content: "";
}
.platform-site .hero-visual img {
    position: relative;
    width: min(75%, 20rem);
    height: auto;
    object-fit: contain;
    transform: rotate(-7deg);
}
.platform-site .hero-visual .brand-dot-cloud { top: 0; left: 0; transform: rotate(-11deg); }

.platform-site :is(.levels-section, .features-section, .how-it-works, .benefits-section) {
    padding-inline: calc(var(--brand-gutter) / 2);
    padding-block: clamp(4.5rem, 8vw, 7.5rem);
}
.platform-site :is(.features-section, .benefits-section) { background: none; }
.platform-site .section-heading h2 { font-weight: 850; letter-spacing: -0.035em; }
.platform-site .level-card--primary { border-top: 4px solid var(--brand-blue); background: #f3f8fb; }
.platform-site .level-card--secondary { border-top: 4px solid var(--brand-yellow); background: #fff5e6; }
.platform-site :is(.feature, .level-card) { border-radius: 2.4rem 1.2rem 2.6rem 1.4rem; }
.platform-site :is(.feature, .level-card):nth-child(even) { border-radius: 1.2rem 2.4rem 1.4rem 2.6rem; }
.platform-site .cta-section {
    width: min(1180px, calc(100% - var(--brand-gutter)));
    margin-inline: auto;
    border-radius: 1.75rem;
    background: var(--brand-ink);
}
.platform-site .site-footer {
    /* Keep the highest wave crest below the final call-to-action card. */
    margin-top: calc(var(--brand-footer-wave-height) + clamp(1.5rem, 3vw, 3rem));
    padding: 3rem max(calc(var(--brand-gutter) / 2), calc((100% - 1180px) / 2));
}

/* Reserve the outer margins for the artwork on functional pages as well. */
.brand-site :is(.materials-page, .material-detail-page, .learning-page, .account-page, .checkout-page, .payment-result, .helpdesk) {
    max-width: calc(100% - var(--brand-gutter));
}
.platform-site .school-shell { width: min(1180px, calc(100% - var(--brand-gutter))); }
.brand-site .legal-area { width: min(1160px, calc(100% - var(--brand-gutter))); }
.brand-site .journal-shell { width: min(1240px, calc(100% - var(--brand-gutter))); }

@media (max-width: 900px) {
    .platform-site .hero { grid-template-columns: 1fr; min-height: auto; }
    .platform-site .hero-visual { width: min(28rem, 100%); min-height: 24rem; margin-inline: auto; }
}

@media (max-width: 640px) {
    .brand-site { --brand-edge-width: 1rem; }
    .brand-site #main-content::after {
        background-size: 100% auto, var(--brand-edge-width) 65rem, var(--brand-edge-width) 65rem;
        background-position: center top, left top, right -13rem;
    }
    .brand-site .brand-wave { --brand-wave-height: 2.75rem; }
    .platform-site .hero h1 { font-size: clamp(2.35rem, 10vw, 3.5rem); }
    .platform-site .hero-visual { min-height: 21rem; }
    .brand-dot-cloud { width: 5rem; height: 8rem; }
    .brand-site .brand-illustrated-heading {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .brand-motif { height: 6rem; justify-self: end; }
    .brand-motif--plane { width: 10rem; height: auto; }
}

@media print {
    .brand-site #main-content::before,
    .brand-site #main-content::after,
    .brand-wave::before,
    .brand-site .site-footer::before,
    .brand-dot-cloud,
    .brand-motif { display: none; }
    .brand-site .brand-illustrated-heading { grid-template-columns: 1fr; }
}