/* ---------------------------------------------------------------------------
   Fetch landing page
   Ported by hand from design-mockups/landingpage.html, which used the Tailwind
   CDN build. That build is a dev-only tool (it compiles in the browser), so the
   token set below is the same Material 3 palette expressed as plain custom
   properties. No build step, no CDN.

   The 3D/Spline hero and its "Normal / 3D" preview toggle are intentionally
   not ported -- the toggle was a designer preview control, and the 3D panel
   pulled three external models from an unpinned @latest script.
--------------------------------------------------------------------------- */

:root {
    /* primary */
    --primary: #0037b0;
    --on-primary: #ffffff;
    --primary-container: #1d4ed8;
    --on-primary-container: #cad3ff;
    --primary-fixed: #dce1ff;
    --primary-fixed-dim: #b7c4ff;
    --on-primary-fixed: #001551;

    /* secondary / tertiary */
    --secondary: #4648d4;
    --secondary-container: #6063ee;
    --tertiary: #004f35;
    --tertiary-container: #006a48;

    /* surfaces */
    --background: #f8f9ff;
    --surface: #f8f9ff;
    --surface-variant: #d3e4fe;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #eff4ff;
    --surface-container: #e5eeff;
    --surface-container-high: #dce9ff;
    --surface-container-highest: #d3e4fe;
    --hero-bg: #edf6ff;

    /* text + lines */
    --on-surface: #0b1c30;
    --on-surface-variant: #434655;
    --outline: #747686;
    --outline-variant: #c4c5d7;

    /* type scale */
    --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --headline-xl: 700 40px/48px var(--font-sans);
    --headline-lg: 700 32px/40px var(--font-sans);
    --headline-md: 600 24px/32px var(--font-sans);
    --body-lg: 400 18px/28px var(--font-sans);
    --body-md: 400 16px/24px var(--font-sans);
    --label-md: 600 14px/20px var(--font-sans);
    --label-sm: 500 12px/16px var(--font-sans);

    /* spacing + shape */
    --unit: 8px;
    --gutter: 24px;
    --margin-mobile: 16px;
    --margin-desktop: 32px;
    --container: 1280px;
    --radius: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;

    /* the sticky nav's height, subtracted from the hero so its contents sit on
       the true vertical centre of what you can actually see */
    --nav-height: 73px;

    /* the "how it works" band is the one deliberately different surface on
       the page -- a deep blue wash built from the brand primary, dark enough
       for white glass cards to sit on */
    --howto-1: #2a55d4;
    --howto-2: #12379f;
    --howto-3: #051f66;
}

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

body {
    margin: 0;
    font: var(--body-md);
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--primary-container); color: var(--on-primary-container); }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.material-symbols-outlined.filled { font-variation-settings: 'FILL' 1; }

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

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--margin-mobile);
}

/* ------------------------------------------------------------------ buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--unit) * 1);
    font: var(--label-md);
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    padding: 10px 24px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.btn--primary {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 1px 2px rgba(11, 28, 48, .12);
}
.btn--primary:hover { background: var(--primary-container); box-shadow: 0 4px 10px rgba(11, 28, 48, .16); }

.btn--outline {
    background: var(--surface);
    color: var(--primary);
    border-color: var(--outline-variant);
}
.btn--outline:hover { background: var(--surface-container-high); }

.btn--lg { padding: 16px 32px; }
.btn--block { width: 100%; }

.btn:focus-visible,
a:focus-visible,
input:focus-visible,
button:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------- nav */

.topNav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--surface);
    border-bottom: 1px solid var(--outline-variant);
}

.topNav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
    padding-block: calc(var(--unit) * 2);
}

.topNav__logo { display: flex; align-items: center; gap: calc(var(--unit) * 1.5); text-decoration: none; }
.topNav__logo img { height: 40px; width: auto; }
.topNav__wordmark { font: var(--headline-md); color: var(--primary); margin: 0; }

.topNav__links { display: none; align-items: center; gap: calc(var(--unit) * 4); }
.topNav__links a {
    font: var(--body-md);
    color: var(--on-surface-variant);
    text-decoration: none;
    transition: color .2s ease;
}
.topNav__links a:hover { color: var(--primary); }

/* --------------------------------------------------------------------- hero */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    /* the nav is sticky and sits above this, so its height has to come out of
       the viewport or the contents read as pushed down */
    min-height: calc(100svh - var(--nav-height));
    padding-block: calc(var(--unit) * 6);
    padding-inline: var(--margin-mobile);
    background: var(--hero-bg);
    overflow: hidden;
}


/* The background is a short 3D scene of lost items, pre-rendered as a
   ping-pong loop (the clip plus itself reversed) so it cycles seamlessly.
   Cover-fit like a background image; never interactive. */
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* keeps the headline crisp when objects drift beneath it */
.hero__veil {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(58% 58% at 50% 46%,
        rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 72%);
}

.hero__content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    text-align: center;
}

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

.hero__title {
    font: var(--headline-xl);
    font-size: clamp(2.25rem, 6vw, 3.75rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--primary);
    max-width: 56rem;
    margin: 0 auto calc(var(--unit) * 3);
    text-wrap: balance;
}

.hero__subtitle {
    font: var(--body-lg);
    color: var(--on-surface-variant);
    max-width: 42rem;
    margin: 0 auto calc(var(--unit) * 5);
    text-wrap: pretty;
}

.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--unit) * 2);
}

/* ------------------------------------------------------------ how it works */

.section { padding-block: calc(var(--unit) * 12); padding-inline: var(--margin-mobile); }
.section--lowest { background: var(--surface-container-lowest); }
.section--surface { background: var(--surface); }

/* A deliberately different surface from the rest of the page: the steps are
   the one place we want to feel like a product tour. */
.howto {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .35), transparent 60%),
        linear-gradient(155deg, var(--howto-1) 0%, var(--howto-2) 48%, var(--howto-3) 100%);
    color: #fff;
}

.howto__head { text-align: center; margin-bottom: calc(var(--unit) * 6); }

.howto__title {
    font: var(--headline-lg);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 calc(var(--unit) * 2);
    text-wrap: balance;
}

.howto__lead {
    font: var(--body-md);
    color: rgba(255, 255, 255, .82);
    max-width: 40rem;
    margin: 0 auto;
    text-wrap: pretty;
}

.steps {
    display: grid;
    gap: calc(var(--unit) * 3);
    max-width: 72rem;
    margin-inline: auto;
}

/* translucent over the gradient, so the cards read as glass rather than
   as opaque boxes sitting on top of it */
.step {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: calc(var(--unit) * 3);
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--radius-2xl);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 20px 44px rgba(30, 12, 84, .18);
    overflow: hidden;
}

.step__number {
    position: absolute;
    top: calc(var(--unit) * 2.5);
    right: calc(var(--unit) * 3);
    font: var(--headline-md);
    color: rgba(255, 255, 255, .45);
    margin: 0;
}

.step__title {
    font: var(--headline-md);
    font-size: 20px;
    color: #fff;
    margin: 0 0 calc(var(--unit) * 1.5);
    padding-right: calc(var(--unit) * 3);
}

.step__body {
    font: var(--body-md);
    font-size: 15px;
    color: rgba(255, 255, 255, .8);
    margin: 0 0 calc(var(--unit) * 3);
}

/* All three illustrations are transparent PNGs but at different aspect ratios
   (one square, two 3:2), so they are contained rather than cropped to a shared
   shape -- and they float directly on the glass with no panel behind them. */
.step__art {
    margin-top: auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 12rem;
    margin-bottom: calc(var(--unit) * -1);
}
/* the snap-it art is square where the other two are landscape, so at the
   shared cap it reads smaller -- give the first step a taller box */
.step:first-child .step__art { height: 14rem; }
/* <picture> has no height of its own, so the img's max-height resolved
   against nothing and the tall snap-it art grew straight over the step's
   text. Sizing the picture to the art box restores the cap. */
.step__art picture {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.step__art img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(30, 12, 84, .22));
}

/* ------------------------------------------------------- item carousel */

/* A light blue band between the deep-blue steps and the footer area, holding
   the section heading and the item marquee. */
.arcSection {
    background: linear-gradient(180deg, #f1f6ff 0%, #e0ebff 100%);
    padding-block: calc(var(--unit) * 8) calc(var(--unit) * 6);
    overflow: hidden;
}

.arcSection__head {
    text-align: center;
    padding-inline: var(--margin-mobile);
    margin-bottom: calc(var(--unit) * 3);
}
.arcSection__head h2 {
    font: var(--headline-lg);
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    letter-spacing: -0.01em;
    color: var(--on-surface);
    margin: 0 0 calc(var(--unit) * 1);
}
.arcSection__head p {
    font: var(--body-md);
    font-size: 15px;
    color: var(--on-surface-variant);
    margin: 0;
}

/* A flat, constant-speed marquee. The cards are in normal flow, so the band
   sizes itself to the tallest card and nothing can ever clip -- the previous
   absolutely-positioned approaches kept losing card tops to estimate errors.
   The track holds two identical halves; sliding it by exactly half its width
   (4 x (card + gap), thanks to margin-right on every card) loops seamlessly
   inside the same edge fade. */
.arc {
    --arc-card-width: 16rem;
    --arc-gap: 24px;
    --arc-duration: 35s;
    position: relative;
    overflow: hidden;
    /* borders only, no shadows -- so no headroom needed inside the clip */
    padding-block: 4px 8px;
    /* fade the ends so cards dissolve at the edges rather than popping */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}

/* Base layout doubles as the reduced-motion fallback: a static centred row
   of the four distinct items. */
.arc__ring {
    display: flex;
    justify-content: center;
    gap: var(--arc-gap);
}
.arcCard { width: var(--arc-card-width); flex: none; display: flex; }
.arcCard:nth-child(n+5) { display: none; }

@media (prefers-reduced-motion: no-preference) {
    .arc__ring {
        justify-content: flex-start;
        gap: 0;
        width: max-content;
        animation: arc-scroll var(--arc-duration) linear infinite;
    }
    .arcCard,
    .arcCard:nth-child(n+5) {
        display: block;
        margin-right: var(--arc-gap);
    }
}

@keyframes arc-scroll {
    to { transform: translateX(-50%); }
}

/* the same visual language as the in-app item cards */
.arcCard__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: calc(var(--unit) * 1.25);
    background: var(--surface-container-lowest);
    border: 1px solid rgba(196, 197, 215, .55);
    border-radius: 22px;
}

.arcCard__media {
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: var(--surface-container);
}
.arcCard__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.arcCard__title {
    font: var(--label-md);
    font-size: 15px;
    color: var(--on-surface);
    margin: 10px 4px 1px;
}

.arcCard__category {
    font: var(--label-sm);
    color: var(--on-surface-variant);
    margin: 0 4px 6px;
}

.arcCard__desc {
    font: var(--body-md);
    font-size: 12.5px;
    line-height: 17px;
    color: var(--on-surface-variant);
    margin: 0 4px 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.arcCard__stats { display: flex; gap: 6px; margin: 0 0 8px; flex: none; }
.arcCard__stat {
    flex: 1;
    min-width: 0;
    background: var(--surface-container-low);
    border-radius: 12px;
    padding: 7px 8px;
    text-align: center;
}
.arcCard__stat span {
    display: block;
    font: var(--label-sm);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    margin-bottom: 1px;
}
.arcCard__stat b {
    display: block;
    font: var(--label-md);
    font-size: 12.5px;
    color: var(--on-surface);
    overflow-wrap: break-word;
}

.arcCard__btn {
    /* pinned to the bottom, so cards in the same row always end level even
       when a description runs a line shorter */
    margin-top: auto;
    /* the site's primary blue, matching the portal buttons */
    background: var(--primary);
    color: #ffffff;
    border-radius: var(--radius-full);
    text-align: center;
    padding: 10px;
    font: var(--label-md);
    font-size: 13px;
}

/* ----------------------------------------------------- school search field */

/* used by the school portal's search form */
.searchField { position: relative; flex-grow: 1; }
.searchField .material-symbols-outlined {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--outline);
    pointer-events: none;
}
.searchField input {
    width: 100%;
    padding: 16px 16px 16px 48px;
    font: var(--body-md);
    color: var(--on-surface);
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    box-shadow: 0 1px 2px rgba(11, 28, 48, .06);
}
.searchField input::placeholder { color: var(--outline); }

/* ------------------------------------------------------------ small notes */

/* used by the admin console */
.previewNote {
    font: var(--label-sm);
    color: var(--on-surface-variant);
    margin: 0 0 calc(var(--unit) * 3);
}

/* -------------------------------------------------------------- legal pages */

.legal {
    max-width: 46rem;
    margin-inline: auto;
    padding: calc(var(--unit) * 8) var(--margin-mobile) calc(var(--unit) * 10);
}
.legal h1 {
    font: var(--headline-lg);
    font-size: clamp(1.7rem, 4vw, 2.25rem);
    color: var(--on-surface);
    margin: 0 0 4px;
}
.legal__updated {
    font: var(--label-sm);
    color: var(--on-surface-variant);
    margin: 0 0 calc(var(--unit) * 4);
}
.legal h2 {
    font: var(--headline-md);
    font-size: 19px;
    color: var(--on-surface);
    margin: calc(var(--unit) * 4) 0 calc(var(--unit) * 1);
}
.legal p,
.legal li {
    font: var(--body-md);
    font-size: 15px;
    line-height: 24px;
    color: var(--on-surface-variant);
}
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--on-surface); font-weight: 600; }
.legal a { color: var(--primary); }

.legal .tableWrap { overflow-x: auto; margin: 0 0 12px; }
.legal table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
}
.legal th,
.legal td {
    text-align: left;
    vertical-align: top;
    padding: 10px 12px;
    border: 1px solid rgba(196, 197, 215, .55);
    font: var(--body-md);
    font-size: 13.5px;
    line-height: 19px;
    color: var(--on-surface-variant);
}
.legal th {
    background: var(--surface-container-low);
    color: var(--on-surface);
    font-weight: 600;
}

/* ------------------------------------------------------------------- footer */

.footer {
    background: var(--surface-container-highest);
    border-top: 1px solid var(--outline-variant);
    padding-block: calc(var(--unit) * 4);
    padding-inline: var(--margin-mobile);
}

.footer__inner {
    max-width: var(--container);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: calc(var(--unit) * 2);
    align-items: center;
    text-align: center;
}

.footer__brand { display: flex; align-items: center; gap: calc(var(--unit) * 1.5); font: var(--label-md); color: var(--on-surface); }
.footer__tagline { font: var(--body-md); font-size: 14px; color: var(--on-surface-variant); margin: 0; }
.footer__links { display: flex; flex-wrap: wrap; gap: calc(var(--unit) * 3); justify-content: center; }
.footer__links a { font: var(--body-md); font-size: 14px; color: var(--on-surface-variant); text-decoration: none; }
.footer__links a:hover { color: var(--primary); text-decoration: underline; }

/* ---------------------------------------------------------------- portal */

.portal { padding-block: calc(var(--unit) * 10); padding-inline: var(--margin-mobile); }
.portal__inner { max-width: 44rem; margin-inline: auto; }

.portal h1 { font: var(--headline-lg); color: var(--primary); margin: 0 0 calc(var(--unit) * 1.5); text-align: center; }
.portal__lead { font: var(--body-lg); color: var(--on-surface-variant); text-align: center; margin: 0 0 calc(var(--unit) * 4); }

.portal__form { display: flex; flex-direction: column; gap: calc(var(--unit) * 2); margin-bottom: calc(var(--unit) * 4); }

.schoolList { display: grid; gap: calc(var(--unit) * 1.5); list-style: none; margin: 0; padding: 0; }

.schoolList a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
    padding: calc(var(--unit) * 2.5) calc(var(--unit) * 3);
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    font: var(--label-md);
    font-size: 16px;
    color: var(--on-surface);
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.schoolList a:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0, 55, 176, .1); }
.schoolList .material-symbols-outlined { color: var(--primary); }

.emptyState {
    font: var(--body-md);
    color: var(--on-surface-variant);
    text-align: center;
    padding: calc(var(--unit) * 4);
    background: var(--surface-container-low);
    border-radius: var(--radius-xl);
}

/* ----------------------------------------------------------------- admin */

.adminPage { max-width: 56rem; }

.adminHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
    margin-bottom: calc(var(--unit) * 1);
}
.adminHead h1 { text-align: left; margin: 0; }

.flashMessage {
    font: var(--body-md);
    color: var(--tertiary);
    background: rgba(0, 106, 72, .08);
    border: 1px solid rgba(0, 106, 72, .2);
    border-radius: var(--radius-lg);
    padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
    margin-bottom: calc(var(--unit) * 2);
}

.formError {
    font: var(--body-md);
    color: var(--on-error-container, #93000a);
    background: var(--error-container, #ffdad6);
    border-radius: var(--radius-lg);
    padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
    margin-bottom: calc(var(--unit) * 2);
}

.adminList { gap: calc(var(--unit) * 1.5); }

.adminRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gutter);
    flex-wrap: wrap;
    padding: calc(var(--unit) * 2) calc(var(--unit) * 3);
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
}

.adminRow__name { font: var(--label-md); font-size: 16px; color: var(--on-surface); margin: 0 0 4px; }
.adminRow__meta { font: var(--label-sm); color: var(--on-surface-variant); margin: 0; }
.adminRow__meta code { background: var(--surface-container); padding: 1px 6px; border-radius: var(--radius); }
.adminRow__actions { display: flex; gap: calc(var(--unit) * 1); align-items: center; }
.adminRow__actions form { margin: 0; }

.badge {
    display: inline-block;
    font: var(--label-sm);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    vertical-align: middle;
}
.badge--muted { background: var(--surface-container-high); color: var(--on-surface-variant); }

.adminForm { display: flex; flex-direction: column; gap: calc(var(--unit) * 0.5); text-align: left; }
.adminForm label { font: var(--label-md); color: var(--on-surface); margin-top: calc(var(--unit) * 2); }
.adminForm input[type="text"],
.adminForm textarea {
    font: var(--body-md);
    color: var(--on-surface);
    background: var(--surface-container-lowest);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-lg);
    padding: calc(var(--unit) * 1.5);
    width: 100%;
}
.adminForm input:disabled { background: var(--surface-container); color: var(--on-surface-variant); }
.adminForm textarea { resize: vertical; font-family: var(--font-sans); }

.fieldHint { font: var(--label-sm); color: var(--on-surface-variant); margin: 4px 0 0; }

.checkboxRow {
    display: flex;
    gap: calc(var(--unit) * 1.5);
    align-items: flex-start;
    font: var(--body-md);
    font-size: 14px;
    background: var(--surface-container-low);
    border-radius: var(--radius-lg);
    padding: calc(var(--unit) * 2);
    margin-top: calc(var(--unit) * 2);
}
.checkboxRow input { margin-top: 3px; }

.adminForm__actions { display: flex; gap: calc(var(--unit) * 2); margin-top: calc(var(--unit) * 3); }

.btn--danger { color: var(--error, #ba1a1a); border-color: rgba(186, 26, 26, .4); }
.btn--danger:hover { background: var(--error-container, #ffdad6); border-color: var(--error, #ba1a1a); }

.setupSteps {
    text-align: left;
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: var(--radius-xl);
    padding: calc(var(--unit) * 3);
    font: var(--body-md);
    color: var(--on-surface-variant);
}
.setupSteps ol { margin: calc(var(--unit) * 1) 0 0; padding-left: 1.25rem; }
.setupSteps li { margin-bottom: calc(var(--unit) * 1.5); }
.setupSteps code {
    background: var(--surface-container-high);
    padding: 2px 6px;
    border-radius: var(--radius);
    font-size: 14px;
}
.callbackUrl {
    display: block;
    margin: calc(var(--unit) * 1) 0 4px;
    word-break: break-all;
    color: var(--on-surface);
}

/* ------------------------------------------------------------- closing CTA */

.ctaSection {
    background: var(--surface);
    padding-block: calc(var(--unit) * 10);
    padding-inline: var(--margin-mobile);
}
.ctaSection__inner {
    max-width: 64rem;
    margin-inline: auto;
}
.ctaSection__head { text-align: center; margin-bottom: calc(var(--unit) * 5); }
.ctaSection__head h2 {
    font: var(--headline-lg);
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    letter-spacing: -0.01em;
    color: var(--on-surface);
    margin: 0 0 calc(var(--unit) * 1.5);
    text-wrap: balance;
}
.ctaSection__head p {
    font: var(--body-md);
    color: var(--on-surface-variant);
    margin: 0;
    text-wrap: pretty;
}

/* stacked on small screens (register on top, per the source order);
   side by side from 900px */
.ctaSection__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--unit) * 3);
}
@media (min-width: 900px) {
    .ctaSection__grid { grid-template-columns: 1fr 1fr; align-items: start; }
}

.ctaPanel {
    background: var(--surface-container-lowest);
    border: 1px solid rgba(196, 197, 215, .5);
    border-radius: 22px;
    padding: calc(var(--unit) * 4);
    text-align: left;
}
.ctaPanel h3 {
    font: var(--headline-md);
    font-size: 1.15rem;
    color: var(--on-surface);
    margin: 0 0 calc(var(--unit) * 1);
}
.ctaPanel > p {
    font: var(--body-md);
    font-size: 14.5px;
    color: var(--on-surface-variant);
    margin: 0 0 calc(var(--unit) * 3);
}

.ctaPanel label {
    display: block;
    font: var(--label-sm);
    color: var(--on-surface-variant);
    margin: 0 0 4px;
}
.ctaPanel input,
.ctaPanel textarea {
    width: 100%;
    font: var(--body-md);
    font-size: 15px;
    color: var(--on-surface);
    background: var(--surface);
    border: 1px solid var(--outline-variant);
    border-radius: 12px;
    padding: 11px 14px;
    margin: 0 0 calc(var(--unit) * 2);
}
.ctaPanel textarea { resize: vertical; min-height: 88px; font-family: var(--font-sans); }
.ctaPanel input::placeholder,
.ctaPanel textarea::placeholder { color: var(--outline); }

.ctaPanel .btn { width: 100%; }

/* the school search: input and button on one line */
.ctaSearchRow { display: flex; gap: calc(var(--unit) * 1.5); }
.ctaSearchRow input { flex: 1; margin: 0; }
.ctaSearchRow .btn { width: auto; flex: none; }

.ctaFlash {
    font: var(--body-md);
    font-size: 14px;
    border-radius: 12px;
    padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
    margin: 0 0 calc(var(--unit) * 3);
}
.ctaFlash--ok { background: rgba(0, 106, 72, .08); color: var(--tertiary); }
.ctaFlash--error { background: var(--error-container, #ffdad6); color: var(--on-error-container, #93000a); }

/* ------------------------------------------------------------ school sign-in *//* ------------------------------------------------------------ school sign-in */

.authPage {
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(0, 55, 176, .07), transparent 70%),
        var(--surface);
    min-height: 100svh;
}

.authWrap {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--unit) * 3);
    padding: calc(var(--unit) * 3) var(--margin-mobile);
}

.authBrand {
    display: flex;
    align-items: center;
    gap: calc(var(--unit) * 1.25);
    text-decoration: none;
}
.authBrand img { height: 40px; width: auto; }
.authBrand span { font: var(--headline-md); color: var(--primary); }

.authCard {
    width: 100%;
    max-width: 26rem;
    background: var(--surface-container-lowest);
    border: 1px solid rgba(196, 197, 215, .5);
    border-radius: var(--radius-2xl);
    box-shadow: 0 18px 44px rgba(11, 28, 48, .1);
    padding: calc(var(--unit) * 5) calc(var(--unit) * 4);
    text-align: center;
}

.authCard h1 {
    font: var(--headline-lg);
    font-size: 1.75rem;
    letter-spacing: -0.01em;
    color: var(--on-surface);
    margin: 0 0 calc(var(--unit) * 0.75);
}

.authSchool {
    font: var(--label-md);
    font-size: 15px;
    color: var(--primary);
    margin: 0 0 calc(var(--unit) * 2);
}

.authLead {
    font: var(--body-md);
    font-size: 14.5px;
    color: var(--on-surface-variant);
    margin: 0 auto calc(var(--unit) * 4);
    max-width: 20rem;
    text-wrap: pretty;
}

.authError {
    font: var(--body-md);
    font-size: 14px;
    color: var(--on-error-container, #93000a);
    background: var(--error-container, #ffdad6);
    border-radius: var(--radius-lg);
    padding: calc(var(--unit) * 1.5);
    margin: 0 0 calc(var(--unit) * 3);
}

/* The standard light Google button: white, hairline border, the four-colour
   G, medium-weight label. Kept deliberately close to Google's own spec so it
   reads as the real thing. */
.googleBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--unit) * 1.5);
    width: 100%;
    height: 48px;
    background: #ffffff;
    border: 1px solid #d5d7e2;
    border-radius: var(--radius-lg);
    font: var(--label-md);
    font-size: 15px;
    color: #1f1f1f;
    text-decoration: none;
    transition: box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.googleBtn:hover {
    background: #f8faff;
    border-color: #c4c9d9;
    box-shadow: 0 2px 8px rgba(11, 28, 48, .1);
}
.googleBtn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.googleBtn__logo { width: 20px; height: 20px; flex: none; }

.authDomains {
    margin-top: calc(var(--unit) * 3);
    padding-top: calc(var(--unit) * 3);
    border-top: 1px solid var(--surface-container-high);
}
.authDomains p {
    font: var(--label-sm);
    color: var(--on-surface-variant);
    margin: 0 0 calc(var(--unit) * 1);
}
.authDomains ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(var(--unit) * 1);
    list-style: none;
    margin: 0;
    padding: 0;
}
.authDomains li {
    font: var(--label-sm);
    color: var(--on-surface);
    background: var(--surface-container);
    border-radius: var(--radius-full);
    padding: 4px 12px;
}

.authFoot {
    font: var(--body-md);
    font-size: 14px;
    color: var(--on-surface-variant);
    margin: 0;
}
.authFoot a { color: var(--primary); text-decoration: none; }
.authFoot a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- responsive */

@media (min-width: 640px) {
    .hero__actions { flex-direction: row; }
    .footer__inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

@media (min-width: 768px) {
    .container, .hero, .section, .footer, .portal { padding-inline: var(--margin-desktop); }
    .topNav__links { display: flex; }
    .steps { grid-template-columns: repeat(3, 1fr); }
}

/* Tighten the curve on narrow screens so the crest still reads as an arch
   rather than flattening into a straight row. */
@media (max-width: 900px) {
    .arc { --arc-card-width: 13.25rem; }
}

@media (max-width: 560px) {
    .arc { --arc-card-width: 11.5rem; }
    .arcCard__desc { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    /* no motion: the flat hero colour stands in for the video */
    .hero__video, .hero__veil { display: none; }
    * { transition-duration: .01ms !important; }
}