/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-ap34l9e7ex] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ap34l9e7ex] {
    flex: 1;
}

.sidebar[b-ap34l9e7ex] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ap34l9e7ex] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ap34l9e7ex]  a, .top-row[b-ap34l9e7ex]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-ap34l9e7ex]  a:hover, .top-row[b-ap34l9e7ex]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-ap34l9e7ex]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-ap34l9e7ex] {
        justify-content: space-between;
    }

    .top-row[b-ap34l9e7ex]  a, .top-row[b-ap34l9e7ex]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ap34l9e7ex] {
        flex-direction: row;
    }

    .sidebar[b-ap34l9e7ex] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ap34l9e7ex] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-ap34l9e7ex]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ap34l9e7ex], article[b-ap34l9e7ex] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* #blazor-error-ui lives in wwwroot/app.css. Scoping it here made it match only MainLayout's
   copy of the banner, leaving it permanently visible on every other layout. */
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-utcjaxobev] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-utcjaxobev] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-utcjaxobev] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-utcjaxobev] {
    font-size: 1.1rem;
}

.bi[b-utcjaxobev] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-utcjaxobev] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-utcjaxobev] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-utcjaxobev] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-utcjaxobev] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-utcjaxobev] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-utcjaxobev] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-utcjaxobev] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-utcjaxobev] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-utcjaxobev] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-utcjaxobev] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-utcjaxobev] {
        padding-bottom: 1rem;
    }

    .nav-item[b-utcjaxobev]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-utcjaxobev]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-utcjaxobev]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-utcjaxobev] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-utcjaxobev] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-utcjaxobev] {
        display: none;
    }

    .nav-scrollable[b-utcjaxobev] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Components/Layout/PublicLayout.razor.rz.scp.css */
/* Design tokens for every public page. Declared here on .public-shell so nested components
   (Home, LandingHero, the sign-up wizard) inherit them through the DOM even though their own
   CSS is scoped to a different component.

   Light by default, dark on <html data-theme="dark">. The light steps are the same ones the
   admin shell uses, so the marketing site and the product read as one thing in either theme.
   Dark is a selected palette, not an inversion of light — see .ai/project/gotchas.md. */
.public-shell[b-y344lmxbbt] {
    /* surfaces */
    --ln-bg: #f4f6f9;
    --ln-elev: #ffffff;
    --ln-panel: #ffffff;
    --ln-panel-soft: #f8fafc;
    --ln-border: #e6eaf0;
    --ln-border-soft: #eef1f5;
    /* ink */
    --ln-text: #0b0b0b;
    --ln-text-dim: #52514e;
    --ln-text-faint: #6e6d68;
    /* accent */
    --ln-accent: #256abf;
    --ln-accent-hover: #1f5aa6;
    --ln-accent-soft: #eaf2fc;
    /* Decorative bracket/rule tint — framing, never text. */
    --ln-accent-line: #9ec3ec;
    /* Ink that sits ON the accent fill, not on the page. */
    --ln-on-accent: #ffffff;
    /* status */
    --ln-green: #006300;
    --ln-green-glow: rgba(0, 99, 0, .14);
    --ln-amber: #85560a;
    --ln-amber-soft: #fdf4de;
    /* Tints of the page ink used as fills and tracks. Dark flips these to white veils. */
    --ln-veil: rgba(11, 11, 11, .028);
    --ln-veil-strong: rgba(11, 11, 11, .045);
    --ln-track: rgba(11, 11, 11, .09);
    --ln-grid: rgba(11, 11, 11, .032);
    --ln-header-bg: rgba(255, 255, 255, .86);
    /* Single-hue heat scale, low -> high. */
    --ln-heat-1: #dbe9f9;
    --ln-heat-2: #a9caf0;
    --ln-heat-3: #5b93d9;
    --ln-heat-4: #256abf;
    /* Categorical marks (timetable stripes). Fixed order, never cycled.
       Slot 2 is teal, not the #006300 the status green uses: against slot 3's amber a true
       green collapses to ΔE 0.3 under protanopia. Teal re-steps it to 10.7 and the set passes
       every check of scripts/validate_palette.js at surface #f8fafc. */
    --ln-cat-1: #256abf;
    --ln-cat-2: #00806b;
    --ln-cat-3: #8a5a00;
    --ln-cat-4: #6d3fc4;
    --ln-cat-5: #a12626;

    --ln-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --ln-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;
    color-scheme: light;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--ln-sans);
    color: var(--ln-text);
    background-color: var(--ln-bg);
    /* Faint engineering grid, matching the reference. */
    background-image:
        linear-gradient(to right, var(--ln-grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--ln-grid) 1px, transparent 1px);
    background-size: 44px 44px;
}

[data-theme="dark"] .public-shell[b-y344lmxbbt] {
    --ln-bg: #0f1216;
    --ln-elev: #171b21;
    --ln-panel: #1b1f26;
    --ln-panel-soft: #21262e;
    --ln-border: #272d36;
    --ln-border-soft: #1f242b;
    --ln-text: #e9ecf1;
    --ln-text-dim: #a3acb9;
    --ln-text-faint: #7d8590;
    --ln-accent: #4d9fff;
    --ln-accent-hover: #74b4ff;
    --ln-accent-soft: rgba(77, 159, 255, .14);
    --ln-accent-line: #33507a;
    --ln-on-accent: #08101c;
    --ln-green: #4ade80;
    --ln-green-glow: rgba(74, 222, 128, .16);
    --ln-amber: #fbbf24;
    --ln-amber-soft: rgba(251, 191, 36, .15);
    --ln-veil: rgba(255, 255, 255, .025);
    --ln-veil-strong: rgba(255, 255, 255, .035);
    --ln-track: rgba(255, 255, 255, .06);
    --ln-grid: rgba(255, 255, 255, .022);
    --ln-header-bg: rgba(15, 18, 22, .82);
    --ln-heat-1: rgba(77, 159, 255, .28);
    --ln-heat-2: rgba(77, 159, 255, .48);
    --ln-heat-3: rgba(77, 159, 255, .68);
    --ln-heat-4: rgba(77, 159, 255, .90);
    /* Re-stepped, not inherited from the status hues. The old stripe set (#4d9fff #4ade80
       #fbbf24 #a78bfa #f87171) sat entirely above the dark lightness band and put green next
       to amber at ΔE 7.3 under protanopia; this set clears the band and reaches 11.4.
       Slot 1 is a shade darker than --ln-accent on purpose — the accent is tuned for text
       contrast, these are marks and have to sit inside the categorical band. */
    --ln-cat-1: #3d92f5;
    --ln-cat-2: #0f9d85;
    --ln-cat-3: #bd8a1a;
    --ln-cat-4: #9470f0;
    --ln-cat-5: #e85068;
    color-scheme: dark;
}

/* School theme ------------------------------------------------------------ */

/* A resolved tenant's site re-declares the same token names in a warm palette, so every section
   component, every .ln-* shape and the footer all move to it without knowing it exists. The
   platform's landing page never gets this class and keeps the blue above.

   The split follows the reference designs: a deep navy ink, a cream page, and orange used for
   emphasis. Two orange tokens, and the difference between them matters —
     --ln-accent  is text and button fill, so it is dark enough to read (4.7:1 on white);
     --ln-brand   is decoration only — blobs, plates, rules — and is the vivid orange the
                  reference leads with, which does NOT pass as body text. Never set type in it.
   --ln-deep is the dark band the stats strip sits on. */
.public-shell-school[b-y344lmxbbt] {
    --ln-bg: #fdf8f3;
    --ln-elev: #ffffff;
    --ln-panel: #ffffff;
    --ln-panel-soft: #fdf3ea;
    --ln-border: #f1e3d6;
    --ln-border-soft: #f7ede4;
    --ln-text: #1f2333;
    --ln-text-dim: #55596b;
    --ln-text-faint: #7b8091;
    --ln-accent: #c2570e;
    --ln-accent-hover: #a3470a;
    --ln-accent-soft: #fdeee0;
    --ln-accent-line: #f0c49e;
    --ln-on-accent: #ffffff;
    --ln-brand: #ef8034;
    --ln-brand-soft: #fbdcc2;
    --ln-deep: #2c4250;
    --ln-deep-ink: #eef4f7;
    /* The third orange, and it exists because the other two are both wrong on the dark band:
       --ln-accent is tuned against white and goes muddy on navy, and --ln-brand is a decoration
       tone. This one is measured on --ln-deep (4.5:1) so a figure can be set in it. */
    --ln-deep-accent: #f2a15c;
    --ln-veil: rgba(31, 35, 51, .028);
    --ln-veil-strong: rgba(31, 35, 51, .045);
    --ln-track: rgba(31, 35, 51, .09);
    /* The engineering grid is the platform product's motif. A school site is not a product
       screenshot, so the backdrop goes plain and the decoration moves to the hero's shapes. */
    --ln-grid: transparent;
    --ln-header-bg: rgba(253, 248, 243, .9);
    --ln-heat-1: #fdeee0;
    --ln-heat-2: #f8cba4;
    --ln-heat-3: #ef8034;
    --ln-heat-4: #c2570e;
    /* Re-stepped for this palette rather than inherited: slot 1 has to be the school's own
       orange, and the rest are spaced around it. Same rule as the blue set — these are marks,
       not text, and they are spaced for colour-vision deficiency as well as for hue. */
    --ln-cat-1: #d9641a;
    --ln-cat-2: #17796a;
    --ln-cat-3: #2f6bb0;
    --ln-cat-4: #7b4bb8;
    --ln-cat-5: #b03a52;
    /* Rounder than the product shell. One token so a card, a button and a plate agree. */
    --ln-round: 1.25rem;
    --ln-round-sm: .75rem;

    /* The hero's wash bleeds past the container on purpose, and without this the document gains a
       horizontal scrollbar. `clip` rather than `hidden`: hidden would make this a scroll container
       and break the sticky header inside it. Scoped to the school shell, so the platform page is
       not given a clipping ancestor it never asked for. */
    overflow-x: clip;
}

[data-theme="dark"] .public-shell-school[b-y344lmxbbt] {
    /* Warm-tinted dark, not the product's cool one — a school that picked orange in light should
       not turn slate at night. Selected, not inverted: the accent lightens rather than darkens,
       because contrast on a dark panel runs the other way. */
    --ln-bg: #14110f;
    --ln-elev: #1c1815;
    --ln-panel: #201b17;
    --ln-panel-soft: #2a231d;
    --ln-border: #372d25;
    --ln-border-soft: #2b241e;
    --ln-text: #f4ece5;
    --ln-text-dim: #bcb0a5;
    --ln-text-faint: #8f8377;
    --ln-accent: #f5a05c;
    --ln-accent-hover: #ffbb84;
    --ln-accent-soft: rgba(245, 160, 92, .14);
    --ln-accent-line: #6d4726;
    --ln-on-accent: #241305;
    --ln-brand: #f08b3c;
    --ln-brand-soft: rgba(240, 139, 60, .26);
    --ln-deep: #17242c;
    --ln-deep-ink: #e6eef2;
    --ln-deep-accent: #f5a860;
    --ln-veil: rgba(255, 255, 255, .03);
    --ln-veil-strong: rgba(255, 255, 255, .045);
    --ln-track: rgba(255, 255, 255, .07);
    --ln-grid: transparent;
    --ln-header-bg: rgba(20, 17, 15, .88);
    --ln-heat-1: rgba(240, 139, 60, .22);
    --ln-heat-2: rgba(240, 139, 60, .42);
    --ln-heat-3: rgba(240, 139, 60, .66);
    --ln-heat-4: rgba(240, 139, 60, .9);
    --ln-cat-1: #e8873a;
    --ln-cat-2: #23a189;
    --ln-cat-3: #4d97ea;
    --ln-cat-4: #a586f2;
    --ln-cat-5: #e8697f;
}

/* Utility strip above the nav, tenant only. */

.school-topbar[b-y344lmxbbt] {
    background: var(--ln-deep);
    color: var(--ln-deep-ink);
    font-size: .8125rem;
}

.school-topbar-inner[b-y344lmxbbt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem 2.25rem;
    padding-block: .6rem;
}

.school-topbar-item[b-y344lmxbbt] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: inherit;
    text-decoration: none;
}

a.school-topbar-item:hover .school-topbar-value[b-y344lmxbbt] {
    text-decoration: underline;
}

/* ::deep, because the <svg> is rendered by NavIcon and carries that component's scope attribute
   rather than this layout's. Same mechanism as .public-nav-actions ::deep .public-theme. */
.school-topbar-icon[b-y344lmxbbt]  svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--ln-brand);
}

.school-topbar-text[b-y344lmxbbt] {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.school-topbar-label[b-y344lmxbbt] {
    font-weight: 650;
}

.school-topbar-value[b-y344lmxbbt] {
    opacity: .78;
}

/* The address is the longest and the least urgent, so it is the first to go. */
@media (max-width: 760px) {
    .school-topbar-wide[b-y344lmxbbt] {
        display: none;
    }
}

@media (max-width: 480px) {
    .school-topbar-inner[b-y344lmxbbt] {
        gap: .75rem 1.5rem;
    }

    .school-topbar-label[b-y344lmxbbt] {
        display: none;
    }
}

/* School chrome overrides. The shapes are shared with the product shell; only their roundness,
   weight and shadow change, so the school reads friendlier without a second set of classes. */

.public-shell-school .public-brand-mark[b-y344lmxbbt] {
    border-color: transparent;
    background: var(--ln-brand);
    color: #ffffff;
    border-radius: 50%;
    font-family: var(--ln-sans);
    font-size: .9375rem;
}

.public-shell-school .public-cta[b-y344lmxbbt] {
    border-radius: 999px;
    padding: .55rem 1.35rem;
    box-shadow: 0 6px 16px -8px var(--ln-accent);
}

.public-shell-school .public-nav-links a[b-y344lmxbbt] {
    font-weight: 550;
}

.public-shell-school .public-main[b-y344lmxbbt]  .ln-card {
    border-radius: var(--ln-round);
    box-shadow: 0 1px 2px rgba(31, 35, 51, .04), 0 12px 28px -22px rgba(31, 35, 51, .35);
}

[data-theme="dark"] .public-shell-school .public-main[b-y344lmxbbt]  .ln-card {
    box-shadow: none;
}

.public-shell-school .public-main[b-y344lmxbbt]  .ln-btn {
    border-radius: 999px;
    padding: .85rem 1.7rem;
}

.public-shell-school .public-main[b-y344lmxbbt]  .ln-btn-primary {
    box-shadow: 0 10px 24px -12px var(--ln-accent);
}

/* The section eyebrow becomes the reference's small orange caption rather than a mono label. */
.public-shell-school .public-main[b-y344lmxbbt]  .ln-eyebrow {
    font-family: var(--ln-sans);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ln-accent);
}

.public-shell-school .public-main[b-y344lmxbbt]  .ln-section-title {
    font-size: clamp(1.9rem, 3.6vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.028em;
}

.public-shell-school .public-footer-heading[b-y344lmxbbt] {
    font-family: var(--ln-sans);
    font-size: .8125rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--ln-accent);
}

.public-container[b-y344lmxbbt] {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

/* Header ------------------------------------------------------------------ */

.public-header[b-y344lmxbbt] {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid var(--ln-border-soft);
    background-color: var(--ln-header-bg);
    backdrop-filter: blur(10px);
}

.public-header-inner[b-y344lmxbbt] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 3.75rem;
}

.public-brand[b-y344lmxbbt] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--ln-text);
    font-weight: 700;
    font-size: 1.0625rem;
    letter-spacing: -.01em;
}

/* Holds the logomark on root and a tenant's initial otherwise, so it sets the letter's type as
   well as the tile. */
.public-brand-mark[b-y344lmxbbt] {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .5rem;
    border: 1px solid var(--ln-border);
    background: var(--ln-panel-soft);
    color: var(--ln-text);
    font-family: var(--ln-mono);
    font-size: .8125rem;
    font-weight: 700;
}

.public-brand-mark[b-y344lmxbbt]  .brand-mark-svg {
    width: 1rem;
    height: 1rem;
    /* The only surface where the mark sits on the page rather than on an accent tile, so the
       node can carry the accent here without disappearing into its own background. */
    --brand-node: var(--ln-accent);
}

/* The second half of the wordmark steps back so "Intelli" leads, without introducing a colour
   the dark theme would have to re-derive. */
.public-brand-name-soft[b-y344lmxbbt] {
    font-weight: 500;
    color: var(--ln-text-dim);
}

.public-nav-links[b-y344lmxbbt] {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin-inline: auto;
}

.public-nav-links a[b-y344lmxbbt] {
    color: var(--ln-text-dim);
    text-decoration: none;
    font-size: .9375rem;
}

.public-nav-links a:hover[b-y344lmxbbt] {
    color: var(--ln-text);
}

.public-nav-actions[b-y344lmxbbt] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.public-signin[b-y344lmxbbt] {
    color: var(--ln-text-dim);
    text-decoration: none;
    font-size: .9375rem;
}

.public-signin:hover[b-y344lmxbbt] {
    color: var(--ln-text);
}

.public-cta[b-y344lmxbbt] {
    display: inline-flex;
    align-items: center;
    padding: .5rem 1.05rem;
    border-radius: .5rem;
    background: var(--ln-accent);
    color: var(--ln-on-accent);
    font-weight: 650;
    font-size: .9375rem;
    text-decoration: none;
    white-space: nowrap;
}

.public-cta:hover[b-y344lmxbbt] {
    background: var(--ln-accent-hover);
    color: var(--ln-on-accent);
}

/* Theme switch ------------------------------------------------------------ */

/* ::deep is required, not decoration. The <button> is rendered by ThemeToggle, so it carries
   that component's scope attribute, and a plain `.public-theme` here would compile to
   `.public-theme[b-thislayout]` and match nothing. ::deep moves the scope onto the ancestor
   instead: `.public-nav-actions[b-thislayout] .public-theme`.
   AdminLayout and DashboardLayout sidestep this by passing globally-defined classes
   (.ad-btn / .dash-btn); the public shell has no global stylesheet, so it styles in place. */
.public-nav-actions[b-y344lmxbbt]  .public-theme {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .7rem;
    border: 1px solid var(--ln-border);
    border-radius: .5rem;
    background: var(--ln-elev);
    color: var(--ln-text-dim);
    font: inherit;
    font-size: .875rem;
    line-height: 1.2;
    cursor: pointer;
}

.public-nav-actions[b-y344lmxbbt]  .public-theme:hover {
    background: var(--ln-panel-soft);
    color: var(--ln-text);
}

/* Only the marketing nav collapses on small screens; brand and actions stay put. */
@media (max-width: 860px) {
    .public-nav-links[b-y344lmxbbt] {
        display: none;
    }
}

/* ThemeToggle drops to the icon alone at this width (visually-hidden label, still announced).
   Match the breakpoint so the button tightens at the same moment it loses its text. */
@media (max-width: 720px) {
    .public-nav-actions[b-y344lmxbbt]  .public-theme {
        padding-inline: .5rem;
    }
}

/* Body -------------------------------------------------------------------- */

.public-main[b-y344lmxbbt] {
    flex: 1;
    padding-block: 2rem 4rem;
}

/* Shared landing section chrome ------------------------------------------- */

/* Every marketing section repeats the same shell — eyebrow, heading, lede, card surface — so it
   is defined once here rather than six times over in six scoped stylesheets. This file already
   owns the --ln-* tokens for the same reason.

   ::deep is required, not decoration: this markup is rendered by the section components, so it
   carries THEIR scope attribute. A plain `.ln-section` would compile to `.ln-section[b-thislayout]`
   and match nothing. Same mechanism as `.public-nav-actions ::deep .public-theme` above. */

.public-main[b-y344lmxbbt]  .ln-section {
    padding-block: 4.5rem;
    /* .public-header is sticky at 3.75rem. Without this an anchor jump parks the heading
       underneath it. */
    scroll-margin-top: 5rem;
}

.public-main[b-y344lmxbbt]  .ln-section-head {
    max-width: 44rem;
    margin-bottom: 3rem;
}

.public-main[b-y344lmxbbt]  .ln-section-head-center {
    margin-inline: auto;
    text-align: center;
}

.public-main[b-y344lmxbbt]  .ln-eyebrow {
    margin-bottom: .85rem;
    font-family: var(--ln-mono);
    font-size: .75rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ln-text-faint);
}

.public-main[b-y344lmxbbt]  .ln-section-title {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 3.2vw, 2.4rem);
    font-weight: 750;
    line-height: 1.15;
    letter-spacing: -.022em;
    color: var(--ln-text);
}

.public-main[b-y344lmxbbt]  .ln-lede {
    margin: 0;
    color: var(--ln-text-dim);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.public-main[b-y344lmxbbt]  .ln-card {
    border: 1px solid var(--ln-border);
    border-radius: .75rem;
    background: var(--ln-panel);
}

/* Shared button shapes, so a CTA looks the same whichever section it sits in. */
.public-main[b-y344lmxbbt]  .ln-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .8rem 1.5rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    font-weight: 650;
    font-size: .9375rem;
    text-decoration: none;
    white-space: nowrap;
}

.public-main[b-y344lmxbbt]  .ln-btn-primary {
    background: var(--ln-accent);
    color: var(--ln-on-accent);
}

.public-main[b-y344lmxbbt]  .ln-btn-primary:hover {
    background: var(--ln-accent-hover);
    color: var(--ln-on-accent);
}

.public-main[b-y344lmxbbt]  .ln-btn-quiet {
    border-color: var(--ln-border);
    background: var(--ln-elev);
    color: var(--ln-text);
}

.public-main[b-y344lmxbbt]  .ln-btn-quiet:hover {
    background: var(--ln-panel-soft);
    color: var(--ln-text);
}

@media (max-width: 1080px) {
    .public-main[b-y344lmxbbt]  .ln-section {
        padding-block: 3.25rem;
    }

    .public-main[b-y344lmxbbt]  .ln-section-head {
        margin-bottom: 2.25rem;
    }
}

@media (max-width: 640px) {
    .public-main[b-y344lmxbbt]  .ln-btn {
        width: 100%;
    }
}

/* Footer ------------------------------------------------------------------ */

.public-footer[b-y344lmxbbt] {
    border-top: 1px solid var(--ln-border-soft);
    padding-block: 1.5rem;
    color: var(--ln-text-faint);
}

.public-footer-inner[b-y344lmxbbt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.public-footer a[b-y344lmxbbt] {
    color: var(--ln-text-faint);
}

.public-footer a:hover[b-y344lmxbbt] {
    color: var(--ln-text-dim);
}

/* Expanded footer, root only. A tenant subdomain keeps the single-line variant above. */

.public-footer-wide[b-y344lmxbbt] {
    padding-block: 3.5rem 0;
}

.public-footer-cols[b-y344lmxbbt] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    padding-bottom: 2.5rem;
}

.public-footer-brand[b-y344lmxbbt] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    max-width: 22rem;
}

.public-footer-blurb[b-y344lmxbbt] {
    margin: 0;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--ln-text-faint);
}

/* A tenant's footer carries its address where the root's carries a product blurb. Each line is
   its own block rather than a run of <br />, so it reflows on a narrow screen. */
.public-footer-address[b-y344lmxbbt] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin: 0;
    font-size: .875rem;
    font-style: normal;
    line-height: 1.5;
    color: var(--ln-text-faint);
}

.public-footer-address a[b-y344lmxbbt] {
    color: var(--ln-text-dim);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.public-footer-address a:hover[b-y344lmxbbt] {
    color: var(--ln-text);
}

.public-footer-heading[b-y344lmxbbt] {
    margin-bottom: 1rem;
    font-family: var(--ln-mono);
    font-size: .6875rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ln-text-faint);
}

.public-footer-list[b-y344lmxbbt] {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.public-footer-list a[b-y344lmxbbt] {
    color: var(--ln-text-dim);
    text-decoration: none;
    font-size: .9375rem;
}

.public-footer-list a:hover[b-y344lmxbbt] {
    color: var(--ln-text);
}

.public-footer-bar[b-y344lmxbbt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--ln-border-soft);
}

@media (max-width: 1080px) {
    .public-footer-cols[b-y344lmxbbt] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .public-footer-brand[b-y344lmxbbt] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .public-footer-cols[b-y344lmxbbt] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .public-footer-bar[b-y344lmxbbt] {
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
    }
}

/* Visible focus on a dark background. */
.public-shell a:focus-visible[b-y344lmxbbt],
.public-shell button:focus-visible[b-y344lmxbbt] {
    outline: 2px solid var(--ln-accent);
    outline-offset: 2px;
    border-radius: .375rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-3fgz17zrb2],
.components-reconnect-repeated-attempt-visible[b-3fgz17zrb2],
.components-reconnect-failed-visible[b-3fgz17zrb2],
.components-pause-visible[b-3fgz17zrb2],
.components-resume-failed-visible[b-3fgz17zrb2],
.components-rejoining-animation[b-3fgz17zrb2] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-3fgz17zrb2],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-3fgz17zrb2],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-3fgz17zrb2],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-3fgz17zrb2],
#components-reconnect-modal.components-reconnect-retrying[b-3fgz17zrb2],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-3fgz17zrb2],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-3fgz17zrb2],
#components-reconnect-modal.components-reconnect-failed[b-3fgz17zrb2],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-3fgz17zrb2] {
    display: block;
}


#components-reconnect-modal[b-3fgz17zrb2] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-3fgz17zrb2 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-3fgz17zrb2 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-3fgz17zrb2 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-3fgz17zrb2]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-3fgz17zrb2 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-3fgz17zrb2 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-3fgz17zrb2 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-3fgz17zrb2 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-3fgz17zrb2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-3fgz17zrb2] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-3fgz17zrb2] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-3fgz17zrb2] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-3fgz17zrb2] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-3fgz17zrb2] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-3fgz17zrb2] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-3fgz17zrb2 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-3fgz17zrb2] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-3fgz17zrb2 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/AdminHome.razor.rz.scp.css */
.admin-signin[b-hlbqck9kbt] {
    max-width: 26rem;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.notice-panel[b-xch1i7qh05] {
    max-width: 40rem;
    margin-block: 4rem;
    padding: 2.25rem;
    border: 1px solid var(--ln-border);
    border-radius: .75rem;
    background: var(--ln-panel);
}

.notice-panel h1[b-xch1i7qh05] {
    font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    font-weight: 750;
    letter-spacing: -.02em;
    margin-bottom: .85rem;
}

.notice-panel p[b-xch1i7qh05] {
    color: var(--ln-text-dim);
    line-height: 1.65;
    margin-bottom: 1.75rem;
}

.notice-cta[b-xch1i7qh05] {
    display: inline-flex;
    align-items: center;
    padding: .8rem 1.5rem;
    border-radius: .5rem;
    background: var(--ln-accent);
    color: var(--ln-on-accent);
    font-weight: 650;
    text-decoration: none;
}

.notice-cta:hover[b-xch1i7qh05] {
    background: var(--ln-accent-hover);
    color: var(--ln-on-accent);
}
/* /Components/Pages/Public/Onboarding.razor.rz.scp.css */
.onboarding-page[b-mcguuhowk2] {
    max-width: 46rem;
    margin-inline: auto;
    padding-block: 2rem 1rem;
}

.onboarding-intro[b-mcguuhowk2] {
    margin-bottom: 2.25rem;
}

.onboarding-eyebrow[b-mcguuhowk2] {
    margin-bottom: .6rem;
    font-family: var(--ln-mono);
    font-size: .75rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ln-accent);
}

.onboarding-intro h1[b-mcguuhowk2] {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -.025em;
    margin-bottom: .85rem;
}

.onboarding-lede[b-mcguuhowk2] {
    max-width: 34rem;
    margin: 0;
    color: var(--ln-text-dim);
    line-height: 1.65;
}

.onboarding-card[b-mcguuhowk2] {
    padding: 1.75rem;
    border: 1px solid var(--ln-border);
    border-radius: .75rem;
    background: var(--ln-panel);
}

@media (max-width: 640px) {
    .onboarding-card[b-mcguuhowk2] {
        padding: 1.25rem;
    }
}
/* /Components/Pages/Public/OnboardingSuccess.razor.rz.scp.css */
.onboarding-done[b-8ddnuc9gif] {
    max-width: 42rem;
    margin-inline: auto;
    padding: 2.25rem;
    margin-block: 2rem;
    border: 1px solid var(--ln-border);
    border-radius: .75rem;
    background: var(--ln-panel);
}

.done-eyebrow[b-8ddnuc9gif] {
    margin-bottom: .6rem;
    font-family: var(--ln-mono);
    font-size: .75rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ln-green);
}

.onboarding-done h1[b-8ddnuc9gif] {
    font-size: clamp(1.85rem, 3.6vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -.025em;
    margin-bottom: .85rem;
}

.done-lede[b-8ddnuc9gif] {
    color: var(--ln-text-dim);
    line-height: 1.65;
    margin-bottom: 1.75rem;
}

.done-facts[b-8ddnuc9gif] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .6rem 1.25rem;
    margin-bottom: 2rem;
    padding: 1rem 1.15rem;
    border: 1px solid var(--ln-border-soft);
    border-radius: .5rem;
    background: var(--ln-elev);
}

.done-facts dt[b-8ddnuc9gif] {
    font-family: var(--ln-mono);
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ln-text-faint);
    align-self: center;
}

.done-facts dd[b-8ddnuc9gif] {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.done-facts code[b-8ddnuc9gif] {
    color: var(--ln-accent);
    font-family: var(--ln-mono);
    font-size: .875rem;
}

.status-chip[b-8ddnuc9gif] {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: var(--ln-amber-soft);
    color: var(--ln-amber);
    font-family: var(--ln-mono);
    font-size: .6875rem;
}

.onboarding-done h2[b-8ddnuc9gif] {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .75rem;
}

.done-steps[b-8ddnuc9gif] {
    margin: 0 0 1.5rem;
    padding-left: 1.15rem;
    color: var(--ln-text-dim);
    line-height: 1.8;
}

.done-note[b-8ddnuc9gif] {
    padding: .85rem 1rem;
    border-left: 2px solid var(--ln-accent);
    border-radius: .25rem;
    background: var(--ln-accent-soft);
    color: var(--ln-text-dim);
    font-size: .9375rem;
    margin-bottom: 1.75rem;
}

.done-cta[b-8ddnuc9gif] {
    display: inline-flex;
    align-items: center;
    padding: .8rem 1.5rem;
    border-radius: .5rem;
    background: var(--ln-accent);
    color: var(--ln-on-accent);
    font-weight: 650;
    text-decoration: none;
}

.done-cta:hover[b-8ddnuc9gif] {
    background: var(--ln-accent-hover);
    color: var(--ln-on-accent);
}

@media (max-width: 640px) {
    .onboarding-done[b-8ddnuc9gif] {
        padding: 1.5rem;
    }

    .done-facts[b-8ddnuc9gif] {
        grid-template-columns: minmax(0, 1fr);
        gap: .25rem;
    }

    .done-facts dd[b-8ddnuc9gif] {
        margin-bottom: .75rem;
    }
}
/* /Components/Shared/BrandMark.razor.rz.scp.css */
/* Box behaviour only — no size, no colour.
   Size would be a losing fight: a scoped rule here compiles to `.brand-mark-svg[b-xxxxx]`,
   which outranks the single-class rules the callers use (.admin-brand-glyph, .public-brand-mark),
   so callers could not shrink the mark. The default box comes from the svg's width/height
   presentation attributes instead, which lose to any CSS. Colour is inherited from the badge. */
.brand-mark-svg[b-m6uialixhd] {
    display: block;
}
/* /Components/Shared/LandingHero.razor.rz.scp.css */
.hero[b-rklz54j3nh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 3.5rem;
    align-items: center;
    padding-block: 3.5rem 4rem;
}

/* Left column ------------------------------------------------------------- */

.status-pill[b-rklz54j3nh] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .85rem;
    margin-bottom: 2rem;
    border: 1px solid var(--ln-border);
    border-radius: 999px;
    background: var(--ln-veil);
    font-family: var(--ln-mono);
    font-size: .8125rem;
}

.status-dot[b-rklz54j3nh] {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--ln-green);
    box-shadow: 0 0 0 3px var(--ln-green-glow);
}

.status-label[b-rklz54j3nh] {
    color: var(--ln-text);
}

.status-sep[b-rklz54j3nh],
.status-meta[b-rklz54j3nh] {
    color: var(--ln-text-faint);
}

.hero h1[b-rklz54j3nh] {
    font-size: clamp(2.4rem, 4.6vw, 3.65rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.025em;
    margin: 0 0 1.35rem;
    max-width: 15ch;
}

.caret[b-rklz54j3nh] {
    display: inline-block;
    width: .32rem;
    height: .92em;
    margin-left: .12em;
    vertical-align: -.1em;
    background: var(--ln-accent);
    animation: caret-blink-b-rklz54j3nh 1.1s steps(1, end) infinite;
}

@keyframes caret-blink-b-rklz54j3nh {
    0%, 45% { opacity: 1; }
    50%, 95% { opacity: .15; }
}

@media (prefers-reduced-motion: reduce) {
    .caret[b-rklz54j3nh] {
        animation: none;
    }
}

.hero-lede[b-rklz54j3nh] {
    max-width: 34rem;
    margin-bottom: 2.5rem;
    color: var(--ln-text-dim);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.preview-label[b-rklz54j3nh] {
    display: block;
    margin-bottom: .6rem;
    font-family: var(--ln-mono);
    font-size: .75rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ln-text-faint);
}

.preview-row[b-rklz54j3nh] {
    display: flex;
    gap: .75rem;
    max-width: 36rem;
}

.preview-input[b-rklz54j3nh] {
    flex: 1 1 auto;
    min-width: 0;
    padding: .8rem 1rem;
    border: 1px solid var(--ln-border);
    border-radius: .5rem;
    background: var(--ln-elev);
    color: var(--ln-text);
    font: inherit;
    font-size: .9375rem;
}

.preview-input[b-rklz54j3nh]::placeholder {
    color: var(--ln-text-faint);
}

.preview-input:focus[b-rklz54j3nh] {
    outline: none;
    border-color: var(--ln-accent);
    box-shadow: 0 0 0 3px var(--ln-accent-soft);
}

.preview-button[b-rklz54j3nh] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: .8rem 1.4rem;
    border-radius: .5rem;
    background: var(--ln-accent);
    color: var(--ln-on-accent);
    font-weight: 650;
    font-size: .9375rem;
    text-decoration: none;
}

.preview-button:hover[b-rklz54j3nh] {
    background: var(--ln-accent-hover);
    color: var(--ln-on-accent);
}

.preview-hint[b-rklz54j3nh] {
    margin: .65rem 0 0;
    font-family: var(--ln-mono);
    font-size: .8125rem;
    color: var(--ln-text-faint);
}

.hero-actions[b-rklz54j3nh] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.5rem;
}

.btn-launch[b-rklz54j3nh],
.btn-explore[b-rklz54j3nh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.05rem 1.85rem;
    border-radius: .5rem;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 1px solid transparent;
}

.btn-launch[b-rklz54j3nh] {
    background: var(--ln-accent);
    color: var(--ln-on-accent);
}

.btn-launch:hover[b-rklz54j3nh] {
    background: var(--ln-accent-hover);
    color: var(--ln-on-accent);
}

.btn-explore[b-rklz54j3nh] {
    background: var(--ln-elev);
    border-color: var(--ln-border);
    color: var(--ln-text);
}

.btn-explore:hover[b-rklz54j3nh] {
    background: var(--ln-panel-soft);
    color: var(--ln-text);
}

.trust-row[b-rklz54j3nh] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    color: var(--ln-text-dim);
}

.trust-row li[b-rklz54j3nh] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.tick[b-rklz54j3nh] {
    color: var(--ln-accent);
}

/* Right column: panel cluster --------------------------------------------- */

.panel-cluster[b-rklz54j3nh] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.15rem;
}

.bracket[b-rklz54j3nh] {
    position: absolute;
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid var(--ln-accent-line);
}

.bracket-tl[b-rklz54j3nh] { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.bracket-tr[b-rklz54j3nh] { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.bracket-bl[b-rklz54j3nh] { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.bracket-br[b-rklz54j3nh] { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.panel[b-rklz54j3nh] {
    display: flex;
    flex-direction: column;
    padding: 1.1rem;
    border: 1px solid var(--ln-border);
    border-radius: .75rem;
    background: var(--ln-panel);
}

.panel-head[b-rklz54j3nh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}

.panel-head-center[b-rklz54j3nh] {
    justify-content: center;
}

.panel-title[b-rklz54j3nh] {
    font-family: var(--ln-mono);
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ln-text-dim);
}

.panel-meta[b-rklz54j3nh] {
    font-family: var(--ln-mono);
    font-size: .6875rem;
    color: var(--ln-text-faint);
}

/* Attendance */

.live-badge[b-rklz54j3nh] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .45rem;
    border-radius: 999px;
    background: var(--ln-accent-soft);
    font-family: var(--ln-mono);
    font-size: .625rem;
    letter-spacing: .08em;
    color: var(--ln-accent);
}

.live-dot[b-rklz54j3nh] {
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: var(--ln-accent);
}

.panel-school[b-rklz54j3nh] {
    margin: 0 0 .9rem;
    font-family: var(--ln-mono);
    font-size: .875rem;
    color: var(--ln-text-dim);
    overflow-wrap: anywhere;
}

.heat[b-rklz54j3nh] {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.heat-days[b-rklz54j3nh],
.heat-row[b-rklz54j3nh] {
    display: grid;
    grid-template-columns: 1.25rem repeat(7, minmax(0, 1fr));
    gap: .3rem;
    align-items: center;
}

.heat-days span[b-rklz54j3nh] {
    font-family: var(--ln-mono);
    font-size: .5625rem;
    text-align: center;
    color: var(--ln-text-faint);
}

.heat-week[b-rklz54j3nh] {
    font-family: var(--ln-mono);
    font-size: .5625rem;
    color: var(--ln-text-faint);
}

.heat-cell[b-rklz54j3nh] {
    height: .95rem;
    border-radius: .1875rem;
    background: var(--ln-veil-strong);
}

.heat-1[b-rklz54j3nh] { background: var(--ln-heat-1); }
.heat-2[b-rklz54j3nh] { background: var(--ln-heat-2); }
.heat-3[b-rklz54j3nh] { background: var(--ln-heat-3); }
.heat-4[b-rklz54j3nh] { background: var(--ln-heat-4); }

.heat-legend[b-rklz54j3nh] {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .8rem;
    font-family: var(--ln-mono);
    font-size: .5625rem;
    color: var(--ln-text-faint);
}

.heat-scale[b-rklz54j3nh] {
    flex: 1;
    height: .3rem;
    border-radius: 999px;
    background: linear-gradient(to right, var(--ln-heat-1), var(--ln-heat-4));
}

/* Timetable */

.lesson-list[b-rklz54j3nh] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lesson[b-rklz54j3nh] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .65rem;
    padding: .5rem .65rem;
    border-left: 2px solid var(--lesson-accent);
    border-radius: .25rem;
    background: var(--ln-panel-soft);
}

.lesson-time[b-rklz54j3nh] {
    font-family: var(--ln-mono);
    font-size: .625rem;
    color: var(--ln-text-faint);
}

.lesson-subject[b-rklz54j3nh] {
    font-size: .8125rem;
    color: var(--ln-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lesson-room[b-rklz54j3nh] {
    font-family: var(--ln-mono);
    font-size: .625rem;
    color: var(--ln-text-faint);
}

/* Enrollment */

.donut[b-rklz54j3nh] {
    position: relative;
    display: grid;
    place-items: center;
    margin-block: .5rem 1.1rem;
}

.donut svg[b-rklz54j3nh] {
    width: 7.5rem;
    height: 7.5rem;
    transform: rotate(-90deg);
}

.donut-track[b-rklz54j3nh],
.donut-value[b-rklz54j3nh] {
    fill: none;
    stroke-width: 9;
}

.donut-track[b-rklz54j3nh] {
    stroke: var(--ln-track);
}

.donut-value[b-rklz54j3nh] {
    stroke: var(--ln-accent);
    stroke-linecap: round;
}

.donut-centre[b-rklz54j3nh] {
    position: absolute;
    display: grid;
    justify-items: center;
    gap: .1rem;
}

.donut-pct[b-rklz54j3nh] {
    font-size: 1.35rem;
    font-weight: 700;
}

.donut-caption[b-rklz54j3nh] {
    font-family: var(--ln-mono);
    font-size: .625rem;
    color: var(--ln-text-faint);
}

.stat-row[b-rklz54j3nh] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem;
    margin: auto 0 0;
    text-align: center;
}

.stat-row dt[b-rklz54j3nh] {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ln-text);
}

.stat-row dd[b-rklz54j3nh] {
    margin: .15rem 0 0;
    font-family: var(--ln-mono);
    font-size: .5625rem;
    letter-spacing: .06em;
    color: var(--ln-text-faint);
}

/* Notifications */

.unread-badge[b-rklz54j3nh] {
    padding: .15rem .45rem;
    border-radius: .25rem;
    background: var(--ln-accent-soft);
    font-family: var(--ln-mono);
    font-size: .625rem;
    color: var(--ln-accent);
}

.notice-list[b-rklz54j3nh] {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: 0 0 .9rem;
    padding: 0;
    list-style: none;
}

.notice[b-rklz54j3nh] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .5rem;
    padding: .5rem .6rem;
    border-radius: .3125rem;
    background: var(--ln-panel-soft);
}

.notice-muted[b-rklz54j3nh] {
    background: transparent;
    padding-inline: .6rem;
    grid-template-columns: minmax(0, 1fr);
}

.notice-dot[b-rklz54j3nh] {
    width: .3125rem;
    height: .3125rem;
    margin-top: .4rem;
    border-radius: 50%;
    background: var(--ln-accent);
}

.notice-body[b-rklz54j3nh] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.notice-text[b-rklz54j3nh] {
    font-size: .75rem;
    color: var(--ln-text);
}

.notice-ago[b-rklz54j3nh] {
    font-family: var(--ln-mono);
    font-size: .5625rem;
    color: var(--ln-text-faint);
}

.panel-cta[b-rklz54j3nh] {
    display: block;
    margin-top: auto;
    padding: .6rem;
    border-radius: .375rem;
    background: var(--ln-accent);
    color: var(--ln-on-accent);
    font-size: .8125rem;
    font-weight: 650;
    text-align: center;
    text-decoration: none;
}

.panel-cta:hover[b-rklz54j3nh] {
    background: var(--ln-accent-hover);
    color: var(--ln-on-accent);
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 1080px) {
    .hero[b-rklz54j3nh] {
        grid-template-columns: minmax(0, 1fr);
        gap: 3rem;
        padding-block: 2.5rem 3rem;
    }

    .hero h1[b-rklz54j3nh] {
        max-width: 20ch;
    }
}

@media (max-width: 640px) {
    .panel-cluster[b-rklz54j3nh] {
        grid-template-columns: minmax(0, 1fr);
    }

    .preview-row[b-rklz54j3nh] {
        flex-wrap: wrap;
    }

    .preview-button[b-rklz54j3nh],
    .btn-launch[b-rklz54j3nh],
    .btn-explore[b-rklz54j3nh] {
        width: 100%;
    }

    .trust-row[b-rklz54j3nh] {
        gap: .75rem 1.5rem;
    }
}
/* /Components/Shared/Landing/ClientStrip.razor.rz.scp.css */
/* The strip sits directly under the hero, so it opens tighter than a standalone section would. */
.client-strip[b-x3vvbvh23c] {
    padding-block: 2.5rem 4rem;
    border-top: 1px solid var(--ln-border-soft);
}

.client-heading[b-x3vvbvh23c] {
    margin: 0 0 1.75rem;
    text-align: center;
    font-family: var(--ln-mono);
    font-size: .75rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ln-text-faint);
}

.client-row[b-x3vvbvh23c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 2.5rem;
    margin: 0 0 3rem;
    padding: 0;
    list-style: none;
}

/* Wordmarks, not logos: a monogram tile plus the name reads as a client list without inventing
   a graphic identity for an institution that does not exist. */
.client[b-x3vvbvh23c] {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--ln-text-dim);
}

.client-glyph[b-x3vvbvh23c] {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: .375rem;
    border: 1px solid var(--ln-border);
    background: var(--ln-panel-soft);
    font-family: var(--ln-mono);
    font-size: .6875rem;
    font-weight: 700;
    color: var(--ln-text-dim);
}

.client-name[b-x3vvbvh23c] {
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.client-stats[b-x3vvbvh23c] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 1.75rem 1rem;
    border-block: 1px solid var(--ln-border-soft);
    background: var(--ln-veil);
    border-radius: .75rem;
}

.client-stat[b-x3vvbvh23c] {
    text-align: center;
}

.client-stat-value[b-x3vvbvh23c] {
    font-size: clamp(1.5rem, 2.6vw, 1.875rem);
    font-weight: 750;
    letter-spacing: -.02em;
    color: var(--ln-text);
}

.client-stat-label[b-x3vvbvh23c] {
    margin: .35rem 0 0;
    font-size: .8125rem;
    color: var(--ln-text-faint);
}

@media (max-width: 640px) {
    .client-row[b-x3vvbvh23c] {
        gap: 1rem 1.5rem;
    }

    .client-stats[b-x3vvbvh23c] {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }
}
/* /Components/Shared/Landing/ClosingCta.razor.rz.scp.css */
.closing-cta[b-mfn1wso1fk] {
    padding-bottom: 1.5rem;
}

.closing-panel[b-mfn1wso1fk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.5rem 2rem;
    border: 1px solid var(--ln-border);
    border-radius: 1rem;
    background: var(--ln-panel);
    text-align: center;
}

.closing-title[b-mfn1wso1fk] {
    max-width: 20ch;
}

.closing-lede[b-mfn1wso1fk] {
    max-width: 36rem;
    margin: 0 0 2rem;
    color: var(--ln-text-dim);
    font-size: 1.0625rem;
    line-height: 1.65;
}

.closing-actions[b-mfn1wso1fk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .85rem;
}

.closing-trust[b-mfn1wso1fk] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem 1.75rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
    color: var(--ln-text-faint);
}

.closing-tick[b-mfn1wso1fk] {
    color: var(--ln-green);
    font-size: .8125rem;
}

@media (max-width: 640px) {
    .closing-panel[b-mfn1wso1fk] {
        padding: 2.5rem 1.5rem;
    }

    .closing-actions[b-mfn1wso1fk] {
        width: 100%;
        flex-direction: column;
    }
}
/* /Components/Shared/Landing/FeatureGrid.razor.rz.scp.css */
.feature-list[b-sahzezs0qv] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.feature[b-sahzezs0qv] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.75rem;
}

.feature-icon[b-sahzezs0qv] {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
    border: 1px solid var(--ln-border);
    background: var(--ln-accent-soft);
    color: var(--ln-accent);
}

/* NavIcon renders the svg, so it carries that component's scope attribute — a plain selector
   would compile to `.feature-glyph[b-thiscomponent]` and match nothing. See gotchas.md. */
.feature-icon[b-sahzezs0qv]  .feature-glyph {
    width: 1.25rem;
    height: 1.25rem;
}

.feature-title[b-sahzezs0qv] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--ln-text);
}

.feature-body[b-sahzezs0qv] {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ln-text-dim);
}

@media (max-width: 1080px) {
    .feature-list[b-sahzezs0qv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .feature-list[b-sahzezs0qv] {
        grid-template-columns: minmax(0, 1fr);
    }

    .feature[b-sahzezs0qv] {
        padding: 1.5rem;
    }
}
/* /Components/Shared/Landing/HowItWorks.razor.rz.scp.css */
.how-it-works[b-az034alml0] {
    border-top: 1px solid var(--ln-border-soft);
}

.step-list[b-az034alml0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.step[b-az034alml0] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.75rem 1.5rem;
    border-radius: .75rem;
    background: var(--ln-veil);
}

/* Connector between the numbered chips. Decorative, so it stops before the last step and is
   dropped entirely once the list stacks. */
.step:not(:last-child)[b-az034alml0]::after {
    content: "";
    position: absolute;
    top: 2.75rem;
    left: calc(1.5rem + 2.25rem);
    right: -1.25rem;
    height: 1px;
    background: var(--ln-accent-line);
}

.step-number[b-az034alml0] {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--ln-accent);
    color: var(--ln-on-accent);
    font-family: var(--ln-mono);
    font-size: .9375rem;
    font-weight: 700;
    /* Sits above the connector rule rather than being crossed by it. */
    position: relative;
    z-index: 1;
}

.step-title[b-az034alml0] {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ln-text);
}

.step-text[b-az034alml0] {
    margin: 0;
    font-size: .9063rem;
    line-height: 1.6;
    color: var(--ln-text-dim);
}

.step-cta[b-az034alml0] {
    margin: 2.75rem 0 0;
    text-align: center;
}

@media (max-width: 1080px) {
    .step-list[b-az034alml0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .step:not(:last-child)[b-az034alml0]::after {
        display: none;
    }
}

@media (max-width: 640px) {
    .step-list[b-az034alml0] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Shared/Landing/LandingFaq.razor.rz.scp.css */
.faq[b-jsle6k7atv] {
    border-top: 1px solid var(--ln-border-soft);
}

.faq-list[b-jsle6k7atv] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-width: 48rem;
    margin-inline: auto;
}

.faq-item[b-jsle6k7atv] {
    overflow: hidden;
}

.faq-question[b-jsle6k7atv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--ln-text);
    list-style: none;
}

/* Suppress the native disclosure triangle in both engines; .faq-marker replaces it. */
.faq-question[b-jsle6k7atv]::-webkit-details-marker {
    display: none;
}

.faq-question[b-jsle6k7atv]::marker {
    content: "";
}

.faq-question:hover[b-jsle6k7atv] {
    background: var(--ln-panel-soft);
}

/* Plus that becomes a minus. Two rules on one box rather than two glyphs, so nothing reflows
   when the panel opens. */
.faq-marker[b-jsle6k7atv] {
    position: relative;
    flex: 0 0 auto;
    width: .875rem;
    height: .875rem;
}

.faq-marker[b-jsle6k7atv]::before,
.faq-marker[b-jsle6k7atv]::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.5px;
    background: var(--ln-accent);
    transform: translateY(-50%);
}

.faq-marker[b-jsle6k7atv]::after {
    transform: translateY(-50%) rotate(90deg);
    transition: transform .18s ease;
}

.faq-item[open] .faq-marker[b-jsle6k7atv]::after {
    transform: translateY(-50%) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
    .faq-marker[b-jsle6k7atv]::after {
        transition: none;
    }
}

.faq-answer[b-jsle6k7atv] {
    margin: 0;
    padding: 0 1.5rem 1.35rem;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ln-text-dim);
}

/* The focus ring is on <summary>, which is the focusable element — .public-shell's global rule
   only covers a and button. */
.faq-question:focus-visible[b-jsle6k7atv] {
    outline: 2px solid var(--ln-accent);
    outline-offset: -2px;
}

@media (max-width: 640px) {
    .faq-question[b-jsle6k7atv] {
        padding: 1rem 1.15rem;
        font-size: .9375rem;
    }

    .faq-answer[b-jsle6k7atv] {
        padding: 0 1.15rem 1.15rem;
    }
}
/* /Components/Shared/Landing/PricingPlans.razor.rz.scp.css */
.pricing[b-2oc2iffdeb] {
    border-top: 1px solid var(--ln-border-soft);
}

.plan-list[b-2oc2iffdeb] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.plan[b-2oc2iffdeb] {
    display: flex;
    flex-direction: column;
    padding: 2rem 1.75rem;
}

/* The featured plan is marked by border, label and a filled CTA — three channels, not colour
   alone, so it still reads as the recommendation in either theme. */
.plan-featured[b-2oc2iffdeb] {
    border-color: var(--ln-accent);
    box-shadow: 0 0 0 1px var(--ln-accent);
}

.plan-flag[b-2oc2iffdeb] {
    align-self: flex-start;
    margin: 0 0 .85rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: var(--ln-accent-soft);
    color: var(--ln-accent);
    font-family: var(--ln-mono);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.plan-name[b-2oc2iffdeb] {
    margin: 0 0 .75rem;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--ln-text);
}

.plan-price[b-2oc2iffdeb] {
    display: flex;
    align-items: baseline;
    gap: .4rem;
    margin: 0 0 .5rem;
}

.plan-amount[b-2oc2iffdeb] {
    font-size: 2.5rem;
    font-weight: 780;
    letter-spacing: -.03em;
    line-height: 1;
    color: var(--ln-text);
}

/* A quoted plan has no number, so it should not shout at the same size as one that does. */
.plan-amount-quiet[b-2oc2iffdeb] {
    font-size: 1.625rem;
    color: var(--ln-text-dim);
}

.plan-period[b-2oc2iffdeb] {
    font-size: .875rem;
    color: var(--ln-text-faint);
}

.plan-for[b-2oc2iffdeb] {
    margin: 0 0 1.5rem;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--ln-text-dim);
}

.plan-cta[b-2oc2iffdeb] {
    width: 100%;
}

.plan-features[b-2oc2iffdeb] {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    margin: 1.75rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--ln-border-soft);
    list-style: none;
}

.plan-feature[b-2oc2iffdeb] {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .9063rem;
    line-height: 1.5;
    color: var(--ln-text-dim);
}

.plan-tick[b-2oc2iffdeb] {
    flex: 0 0 auto;
    color: var(--ln-accent);
    font-size: .8125rem;
    line-height: 1.55;
}

.plan-footnote[b-2oc2iffdeb] {
    margin: 2rem 0 0;
    text-align: center;
    font-size: .8125rem;
    color: var(--ln-text-faint);
}

@media (max-width: 1080px) {
    .plan-list[b-2oc2iffdeb] {
        grid-template-columns: minmax(0, 1fr);
        max-width: 32rem;
        margin-inline: auto;
    }
}
/* /Components/Shared/School/SchoolAbout.razor.rz.scp.css */
.about-grid[b-xdxzazb48u] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.about-copy p[b-xdxzazb48u] {
    margin: 0 0 1.25rem;
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--ln-text-dim);
}

.about-copy p:last-child[b-xdxzazb48u] {
    margin-bottom: 0;
}

.about-values[b-xdxzazb48u] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-value[b-xdxzazb48u] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
}

/* The soft coloured circle the reference puts beside every feature. NavIcon renders the <svg>,
   so ::deep is required to reach past its scope attribute. */
.about-value-icon[b-xdxzazb48u] {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--ln-accent-soft);
    color: var(--ln-accent);
}

.about-value-icon[b-xdxzazb48u]  svg {
    width: 1.3rem;
    height: 1.3rem;
}

.about-value-title[b-xdxzazb48u] {
    margin: 0 0 .4rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ln-text);
}

.about-value-body[b-xdxzazb48u] {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ln-text-dim);
}

/* Head's message ---------------------------------------------------------- */

/* Re-points the token rather than setting `background` directly: .ln-card's fill comes from
   PublicLayout through a ::deep selector that outranks anything written here, so a plain
   background declaration on this class silently loses. Changing what the shared rule reads works
   by inheritance and cannot be outranked. */
.about-message[b-xdxzazb48u] {
    --ln-panel: var(--ln-panel-soft);

    position: relative;
    margin: 3rem 0 0;
    padding: 2.25rem;
    overflow: hidden;
}

/* An oversized quote mark bled into the corner — the reference's way of marking a testimonial
   without a photograph. Decoration, so it is drawn rather than written into the copy. */
.about-message[b-xdxzazb48u]::before {
    content: "\201C";
    position: absolute;
    top: -2.5rem;
    right: 1.5rem;
    font-size: 11rem;
    line-height: 1;
    color: var(--ln-brand);
    opacity: .16;
    pointer-events: none;
}

.about-quote[b-xdxzazb48u] {
    position: relative;
    margin: 0 0 1.75rem;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.7;
    letter-spacing: -.008em;
    color: var(--ln-text);
}

.about-quote[b-xdxzazb48u]::before {
    content: "\201C";
}

.about-quote[b-xdxzazb48u]::after {
    content: "\201D";
}

.about-attrib[b-xdxzazb48u] {
    display: flex;
    align-items: center;
    gap: .85rem;
}

/* Stands in for a portrait until a school can upload one. */
.about-attrib-mark[b-xdxzazb48u] {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 1px solid var(--ln-accent-line);
    background: var(--ln-accent-soft);
    color: var(--ln-accent);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.about-attrib-who[b-xdxzazb48u] {
    display: flex;
    flex-direction: column;
}

.about-attrib-name[b-xdxzazb48u] {
    font-weight: 650;
    font-size: .9375rem;
    color: var(--ln-text);
}

.about-attrib-role[b-xdxzazb48u] {
    font-size: .8125rem;
    color: var(--ln-text-faint);
}

@media (max-width: 900px) {
    .about-grid[b-xdxzazb48u] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }

    .about-message[b-xdxzazb48u] {
        margin-top: 2rem;
        padding: 1.75rem;
    }
}
/* /Components/Shared/School/SchoolAcademics.razor.rz.scp.css */
.stage-list[b-o40ies4e2c] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stage[b-o40ies4e2c] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 1.75rem;
    transition: transform .18s ease;
}

/* The lift the reference gives its class cards on hover. Skipped for anyone who has asked for
   less motion. */
.stage:hover[b-o40ies4e2c] {
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .stage[b-o40ies4e2c] {
        transition: none;
    }

    .stage:hover[b-o40ies4e2c] {
        transform: none;
    }
}

.stage-head[b-o40ies4e2c] {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--ln-border-soft);
}

.stage-step[b-o40ies4e2c] {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--ln-accent);
    color: var(--ln-on-accent);
    font-size: .875rem;
    font-weight: 700;
}

.stage-name[b-o40ies4e2c] {
    margin: 0;
    margin-right: auto;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--ln-text);
}

.stage-grades[b-o40ies4e2c] {
    flex: none;
    padding: .25rem .7rem;
    border-radius: 999px;
    background: var(--ln-accent-soft);
    font-size: .8125rem;
    font-weight: 650;
    color: var(--ln-accent);
}

.stage-body[b-o40ies4e2c] {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ln-text-dim);
}

.stage-subjects-label[b-o40ies4e2c] {
    margin: .35rem 0 0;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--ln-text-faint);
}

.stage-subjects[b-o40ies4e2c] {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.stage-subject[b-o40ies4e2c] {
    padding: .3rem .65rem;
    border: 1px solid var(--ln-border);
    border-radius: 999px;
    background: var(--ln-panel-soft);
    font-size: .8125rem;
    color: var(--ln-text-dim);
}

@media (max-width: 900px) {
    .stage-list[b-o40ies4e2c] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .stage[b-o40ies4e2c] {
        padding: 1.5rem;
    }
}
/* /Components/Shared/School/SchoolAdmissions.razor.rz.scp.css */
.admissions-grid[b-8gl9pacntd] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

/* Steps ------------------------------------------------------------------- */

.admission-steps[b-8gl9pacntd] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.admission-step[b-8gl9pacntd] {
    position: relative;
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
}

/* The connector the reference draws down its numbered process. It runs from under one badge to
   the next, so the last step has none — hence :not(:last-child) rather than a border on the list. */
.admission-step:not(:last-child)[b-8gl9pacntd]::before {
    content: "";
    position: absolute;
    top: 2.5rem;
    left: 1.125rem;
    width: 2px;
    height: calc(100% + 1.5rem - 2.5rem);
    background: var(--ln-accent-line);
}

.step-number[b-8gl9pacntd] {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--ln-accent);
    color: var(--ln-on-accent);
    font-size: .875rem;
    font-weight: 700;
}

.step-title[b-8gl9pacntd] {
    margin: 0 0 .35rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--ln-text);
}

.step-text[b-8gl9pacntd] {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ln-text-dim);
}

/* Key dates --------------------------------------------------------------- */

/* Token re-pointed rather than `background` set: .ln-card's fill is written in PublicLayout with
   a ::deep selector that outranks this file, so the declaration would be dropped. */
.admission-dates[b-8gl9pacntd] {
    --ln-panel: var(--ln-panel-soft);

    padding: 1.75rem;
}

.admission-dates-head[b-8gl9pacntd] {
    margin: 0 0 1.25rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ln-accent);
}

.admission-dates-list[b-8gl9pacntd] {
    margin: 0;
}

.admission-date[b-8gl9pacntd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .7rem;
    border-top: 1px solid var(--ln-border-soft);
}

.admission-date:first-child[b-8gl9pacntd] {
    border-top: 0;
    padding-top: 0;
}

.admission-date dt[b-8gl9pacntd] {
    font-size: .9375rem;
    color: var(--ln-text-dim);
}

.admission-date dd[b-8gl9pacntd] {
    margin: 0;
    flex: none;
    font-weight: 650;
    font-size: .9375rem;
    color: var(--ln-text);
}

/* Note and CTA ------------------------------------------------------------ */

.admission-note[b-8gl9pacntd] {
    max-width: 44rem;
    margin: 2.5rem auto 0;
    padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--ln-brand);
    border-radius: 0 var(--ln-round-sm) var(--ln-round-sm) 0;
    background: var(--ln-panel-soft);
    font-size: .9375rem;
    line-height: 1.7;
    color: var(--ln-text-dim);
}

.admission-cta[b-8gl9pacntd] {
    margin: 2rem 0 0;
    text-align: center;
}

@media (max-width: 900px) {
    .admissions-grid[b-8gl9pacntd] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}
/* /Components/Shared/School/SchoolCampusLife.razor.rz.scp.css */
.campus-list[b-0wptsr9lq3] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.campus-tile[b-0wptsr9lq3] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Stands in for a photograph. The accent arrives as --campus-accent from the component, which
   sets it from a --ln-cat-N token so both themes get a step picked for them. Not clipped by the
   card's overflow: the badge below deliberately hangs past its lower edge. */
.campus-plate[b-0wptsr9lq3] {
    position: relative;
    display: block;
    height: 6.5rem;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--campus-accent) 26%, transparent),
            color-mix(in srgb, var(--campus-accent) 8%, transparent));
    border-bottom: 1px solid var(--ln-border-soft);
}

.campus-badge[b-0wptsr9lq3] {
    position: absolute;
    bottom: -1.4rem;
    left: 1.5rem;
    display: grid;
    place-items: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: var(--ln-panel);
    box-shadow: 0 0 0 1px var(--ln-border), 0 .5rem 1rem -.6rem rgba(0, 0, 0, .35);
    color: var(--campus-accent);
}

.campus-badge[b-0wptsr9lq3]  svg {
    width: 1.3rem;
    height: 1.3rem;
}

/* Top padding clears the badge that hangs off the plate. */
.campus-body[b-0wptsr9lq3] {
    padding: 2.1rem 1.5rem 1.5rem;
}

.campus-title[b-0wptsr9lq3] {
    margin: 0 0 .4rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--ln-text);
}

.campus-text[b-0wptsr9lq3] {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ln-text-dim);
}

@media (max-width: 1080px) {
    .campus-list[b-0wptsr9lq3] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .campus-list[b-0wptsr9lq3] {
        grid-template-columns: minmax(0, 1fr);
    }

    .campus-plate[b-0wptsr9lq3] {
        height: 5rem;
    }
}
/* /Components/Shared/School/SchoolContact.razor.rz.scp.css */
.contact-grid[b-c2zm26ulus] {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

/* Details ----------------------------------------------------------------- */

.contact-list[b-c2zm26ulus] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-item[b-c2zm26ulus] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.35rem 1.5rem;
}

/* Circular, matching the facility tiles and the about values — one icon shape across the site. */
.contact-icon[b-c2zm26ulus] {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--ln-accent-soft);
    color: var(--ln-accent);
}

/* NavIcon owns the svg, so it carries that component's scope attribute. ::deep is required. */
.contact-icon[b-c2zm26ulus]  .contact-glyph {
    width: 1.125rem;
    height: 1.125rem;
}

.contact-body[b-c2zm26ulus] {
    min-width: 0;
}

.contact-label[b-c2zm26ulus] {
    margin: 0 0 .3rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ln-accent);
}

.contact-value[b-c2zm26ulus] {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.6;
    color: var(--ln-text);
    font-style: normal;
}

.contact-value a[b-c2zm26ulus] {
    color: var(--ln-accent);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.contact-value a:hover[b-c2zm26ulus] {
    color: var(--ln-accent-hover);
}

.contact-address-line[b-c2zm26ulus] {
    display: block;
}

/* Portal panel ------------------------------------------------------------ */

/* Token re-pointed rather than `background` set: .ln-card's fill is written in PublicLayout with
   a ::deep selector that outranks this file, so the declaration would be dropped. */
.contact-panel[b-c2zm26ulus] {
    --ln-panel: var(--ln-panel-soft);

    padding: 1.75rem;
}

.contact-panel-head[b-c2zm26ulus] {
    margin: 0 0 .6rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--ln-text);
}

.contact-panel-text[b-c2zm26ulus] {
    margin: 0 0 1.5rem;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ln-text-dim);
}

.contact-panel-btn[b-c2zm26ulus] {
    width: 100%;
}

.contact-panel-host[b-c2zm26ulus] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ln-border);
}

.contact-panel-host-label[b-c2zm26ulus] {
    font-size: .8125rem;
    color: var(--ln-text-faint);
}

.contact-panel-host-value[b-c2zm26ulus] {
    font-family: var(--ln-mono);
    font-size: .8125rem;
    color: var(--ln-text-dim);
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .contact-grid[b-c2zm26ulus] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 640px) {
    .contact-list[b-c2zm26ulus] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Shared/School/SchoolFacilities.razor.rz.scp.css */
.facility-list[b-n12p6vr67s] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.facility[b-n12p6vr67s] {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: 2rem 1.75rem;
    text-align: center;
    align-items: center;
    transition: transform .18s ease;
}

.facility:hover[b-n12p6vr67s] {
    transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
    .facility[b-n12p6vr67s] {
        transition: none;
    }

    .facility:hover[b-n12p6vr67s] {
        transform: none;
    }
}

/* Circular, not the product shell's rounded square: this is the reference's icon-in-a-disc, and
   the ring around it is the same trick the hero collage uses to give a flat shape depth. */
.facility-icon[b-n12p6vr67s] {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: .35rem;
    border-radius: 50%;
    background: var(--ln-accent-soft);
    color: var(--ln-accent);
    box-shadow: 0 0 0 .4rem var(--ln-panel-soft);
}

/* NavIcon renders the svg, so it carries THAT component's scope attribute — a plain selector
   would compile to `.facility-glyph[b-thiscomponent]` and match nothing. See gotchas.md. */
.facility-icon[b-n12p6vr67s]  .facility-glyph {
    width: 1.5rem;
    height: 1.5rem;
}

.facility-title[b-n12p6vr67s] {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--ln-text);
}

.facility-body[b-n12p6vr67s] {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ln-text-dim);
}

@media (max-width: 1080px) {
    .facility-list[b-n12p6vr67s] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .facility-list[b-n12p6vr67s] {
        grid-template-columns: minmax(0, 1fr);
    }

    .facility[b-n12p6vr67s] {
        padding: 1.5rem;
    }
}
/* /Components/Shared/School/SchoolFaq.razor.rz.scp.css */
/* The same disclosure treatment as LandingFaq on the root page. It is repeated rather than
   promoted into PublicLayout's ::deep block because the two pages are never on screen together
   and neither should be able to restyle the other by accident — but if a third page ever wants
   this, that is the moment to move it up. */

.school-faq[b-xh7gicxuyy] {
    border-top: 1px solid var(--ln-border-soft);
}

.faq-list[b-xh7gicxuyy] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-width: 48rem;
    margin-inline: auto;
}

.faq-item[b-xh7gicxuyy] {
    overflow: hidden;
}

.faq-question[b-xh7gicxuyy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--ln-text);
    list-style: none;
}

/* Suppress the native disclosure triangle in both engines; .faq-marker replaces it. */
.faq-question[b-xh7gicxuyy]::-webkit-details-marker {
    display: none;
}

.faq-question[b-xh7gicxuyy]::marker {
    content: "";
}

.faq-question:hover[b-xh7gicxuyy] {
    background: var(--ln-panel-soft);
}

/* Plus that becomes a minus. Two rules on one box rather than two glyphs, so nothing reflows
   when the panel opens. */
.faq-marker[b-xh7gicxuyy] {
    position: relative;
    flex: 0 0 auto;
    width: .875rem;
    height: .875rem;
}

.faq-marker[b-xh7gicxuyy]::before,
.faq-marker[b-xh7gicxuyy]::after {
    content: "";
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.5px;
    background: var(--ln-accent);
    transform: translateY(-50%);
}

.faq-marker[b-xh7gicxuyy]::after {
    transform: translateY(-50%) rotate(90deg);
    transition: transform .18s ease;
}

.faq-item[open] .faq-marker[b-xh7gicxuyy]::after {
    transform: translateY(-50%) rotate(0deg);
}

@media (prefers-reduced-motion: reduce) {
    .faq-marker[b-xh7gicxuyy]::after {
        transition: none;
    }
}

.faq-answer[b-xh7gicxuyy] {
    margin: 0;
    padding: 0 1.5rem 1.35rem;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ln-text-dim);
}

/* The focus ring is on <summary>, which is the focusable element — .public-shell's global rule
   only covers a and button. */
.faq-question:focus-visible[b-xh7gicxuyy] {
    outline: 2px solid var(--ln-accent);
    outline-offset: -2px;
}

@media (max-width: 640px) {
    .faq-question[b-xh7gicxuyy] {
        padding: 1rem 1.15rem;
        font-size: .9375rem;
    }

    .faq-answer[b-xh7gicxuyy] {
        padding: 0 1.15rem 1.15rem;
    }
}
/* /Components/Shared/School/SchoolHero.razor.rz.scp.css */
.school-hero[b-uddpoecnq7] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: center;
    padding-block: 3.5rem 4.5rem;
}

/* The warm wash the reference designs put behind the hero. It is drawn here rather than on
   .public-main because only this section wants it, and it is pinned to the section box so it
   cannot bleed over the header. */
.school-hero[b-uddpoecnq7]::before {
    content: "";
    position: absolute;
    inset: -2rem -12vw auto -12vw;
    height: 82%;
    background:
        radial-gradient(48rem 26rem at 78% 22%, var(--ln-accent-soft), transparent 70%),
        radial-gradient(34rem 20rem at 6% 78%, var(--ln-panel-soft), transparent 72%);
    pointer-events: none;
}

/* Copy -------------------------------------------------------------------- */

/* Both columns are lifted above the wash. The wash is an absolutely positioned ::before, so
   without this it would paint over static content rather than behind it — and a negative
   z-index would drop it behind the shell's own background instead. */
.hero-copy[b-uddpoecnq7],
.hero-visual[b-uddpoecnq7] {
    position: relative;
    z-index: 1;
}

.hero-notice[b-uddpoecnq7] {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .95rem;
    margin-bottom: 1.6rem;
    border: 1px solid var(--ln-accent-line);
    border-radius: 999px;
    background: var(--ln-accent-soft);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ln-accent);
}

.hero-notice-dot[b-uddpoecnq7] {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--ln-brand);
    box-shadow: 0 0 0 3px var(--ln-brand-soft);
}

.hero-name[b-uddpoecnq7] {
    margin: 0 0 .65rem;
    font-size: clamp(2.35rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: var(--ln-text);
    text-wrap: balance;
}

/* --ln-accent, never --ln-brand: this is type, and the brand tone is decoration that does not
   carry enough contrast to be read. */
.hero-name-accent[b-uddpoecnq7] {
    color: var(--ln-accent);
}

.hero-motto[b-uddpoecnq7] {
    margin: 0 0 1.35rem;
    font-size: clamp(1.125rem, 1.8vw, 1.375rem);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--ln-text-dim);
}

.hero-lede[b-uddpoecnq7] {
    margin: 0 0 2rem;
    max-width: 34rem;
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ln-text-dim);
}

.hero-actions[b-uddpoecnq7] {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: 2rem;
}

.hero-points[b-uddpoecnq7] {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ln-text-dim);
}

.hero-points li[b-uddpoecnq7] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .8rem;
    border: 1px solid var(--ln-border);
    border-radius: 999px;
    background: var(--ln-panel);
}

.hero-tick[b-uddpoecnq7] {
    color: var(--ln-accent);
}

/* Visual ------------------------------------------------------------------ */

.hero-visual[b-uddpoecnq7] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.hero-collage[b-uddpoecnq7] {
    position: relative;
    width: min(100%, 24rem);
    aspect-ratio: 1;
    margin-inline: auto 1rem;
}

.hero-ring[b-uddpoecnq7] {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

/* The big disc. --ln-on-accent is the paired foreground for the accent fill and is re-picked per
   theme, so the icon stays legible when the palette flips. */
.hero-ring-lg[b-uddpoecnq7] {
    inset: 8% 4% 8% 4%;
    background: linear-gradient(145deg, var(--ln-brand), var(--ln-accent));
    color: var(--ln-on-accent);
    box-shadow: 0 1.5rem 3rem -1.25rem rgba(0, 0, 0, .35);
}

.hero-ring-md[b-uddpoecnq7] {
    top: -2%;
    right: -4%;
    width: 30%;
    aspect-ratio: 1;
    background: var(--ln-panel);
    border: 1px solid var(--ln-border);
    color: var(--ln-accent);
    box-shadow: 0 .75rem 2rem -1rem rgba(0, 0, 0, .3);
}

.hero-ring-sm[b-uddpoecnq7] {
    bottom: 4%;
    left: -6%;
    width: 24%;
    aspect-ratio: 1;
    background: var(--ln-accent-soft);
    border: 1px solid var(--ln-accent-line);
    color: var(--ln-accent);
}

/* NavIcon renders the <svg>, so it carries that component's scope attribute and a plain
   descendant selector here would compile to .hero-ring svg[b-thisscope] and match nothing.
   ::deep moves the scope onto the ancestor. */
.hero-ring-lg[b-uddpoecnq7]  svg {
    width: 42%;
    height: auto;
}

.hero-ring-md[b-uddpoecnq7]  svg,
.hero-ring-sm[b-uddpoecnq7]  svg {
    width: 44%;
    height: auto;
}

.hero-dot[b-uddpoecnq7] {
    position: absolute;
    border-radius: 50%;
    background: var(--ln-brand);
}

.hero-dot-1[b-uddpoecnq7] {
    top: 14%;
    left: -2%;
    width: .7rem;
    height: .7rem;
}

.hero-dot-2[b-uddpoecnq7] {
    top: 44%;
    right: -8%;
    width: 1.1rem;
    height: 1.1rem;
    background: var(--ln-brand-soft);
}

.hero-dot-3[b-uddpoecnq7] {
    bottom: 18%;
    right: 6%;
    width: .55rem;
    height: .55rem;
}

.hero-dot-4[b-uddpoecnq7] {
    top: 2%;
    left: 26%;
    width: .5rem;
    height: .5rem;
    background: var(--ln-accent-line);
}

/* Facts card -------------------------------------------------------------- */

/* Overlapped onto the collage, the way the reference floats a card over its photograph. It sits
   after the collage in the source, so it wins the stacking order without a z-index. */
.hero-facts[b-uddpoecnq7] {
    position: relative;
    width: min(100%, 19rem);
    margin-top: -3.5rem;
    margin-right: auto;
    padding: 1.5rem 1.6rem;
}

.hero-facts-head[b-uddpoecnq7] {
    margin: 0 0 1.1rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ln-accent);
}

.hero-facts-list[b-uddpoecnq7] {
    margin: 0 0 1.25rem;
}

.hero-fact[b-uddpoecnq7] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-block: .65rem;
    border-top: 1px solid var(--ln-border-soft);
}

.hero-fact:first-child[b-uddpoecnq7] {
    border-top: 0;
    padding-top: 0;
}

.hero-fact dt[b-uddpoecnq7] {
    font-size: .875rem;
    color: var(--ln-text-dim);
}

.hero-fact dd[b-uddpoecnq7] {
    margin: 0;
    font-weight: 700;
    font-size: .875rem;
    color: var(--ln-text);
}

.hero-facts-link[b-uddpoecnq7] {
    font-size: .875rem;
    font-weight: 700;
    color: var(--ln-accent);
    text-decoration: none;
}

.hero-facts-link:hover[b-uddpoecnq7] {
    color: var(--ln-accent-hover);
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 980px) {
    .school-hero[b-uddpoecnq7] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.75rem;
        padding-block: 2.5rem 3rem;
    }

    .school-hero[b-uddpoecnq7]::before {
        height: 60%;
    }

    .hero-visual[b-uddpoecnq7] {
        align-items: center;
    }

    .hero-collage[b-uddpoecnq7] {
        width: min(100%, 20rem);
        margin-inline: auto;
    }

    .hero-facts[b-uddpoecnq7] {
        width: min(100%, 26rem);
        margin-top: -2.5rem;
        margin-inline: auto;
    }
}

/* Below this the collage stops earning its width — the card is the useful half, so the shapes
   shrink rather than the facts. */
@media (max-width: 560px) {
    .hero-collage[b-uddpoecnq7] {
        width: min(100%, 15rem);
    }

    .hero-facts[b-uddpoecnq7] {
        margin-top: -1.75rem;
    }
}

/* .ln-btn goes full width at 640px, so the row has to stack with it or the two buttons
   overlap their own gap. */
@media (max-width: 640px) {
    .hero-actions[b-uddpoecnq7] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Shared/School/SchoolHighlights.razor.rz.scp.css */
/* Tighter than a full .ln-section: this band sits directly under the hero and reads as part of
   it rather than as the first section proper. */
.highlights[b-4k3je1g3ap] {
    padding-block: 0 3.5rem;
}

/* The reference designs break the page with one dark plate of figures. It is a rounded card
   inside the container rather than a full-bleed strip, because the shell has no full-bleed slot
   and a rounded plate matches the rest of the school's shapes. */
.highlight-row[b-4k3je1g3ap] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 2.5rem 2rem;
    border-radius: var(--ln-round);
    background: var(--ln-deep);
    color: var(--ln-deep-ink);
    overflow: hidden;
}

/* Two soft discs bled off the corners, the same decorative language as the hero collage. Mixed
   from --ln-brand rather than --ln-brand-soft: the soft token is a pale cream tuned for a light
   page, and over navy it greys out instead of glowing. */
.highlight-row[b-4k3je1g3ap]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(18rem 18rem at 96% -30%,
            color-mix(in srgb, var(--ln-brand) 42%, transparent), transparent 65%),
        radial-gradient(14rem 14rem at 2% 130%,
            color-mix(in srgb, var(--ln-brand) 30%, transparent), transparent 65%);
    pointer-events: none;
}

.highlight[b-4k3je1g3ap] {
    position: relative;
    text-align: center;
}

/* Divider rules between the figures, as the reference has. Drawn on the element rather than with
   a border on .highlight so the first column does not get a stray leading rule. */
.highlight + .highlight[b-4k3je1g3ap]::before {
    content: "";
    position: absolute;
    inset-block: .25rem;
    left: calc(-.625rem - 1px);
    width: 1px;
    background: rgba(255, 255, 255, .14);
}

/* --ln-deep-accent, not --ln-brand: this is type on the dark plate and has to carry contrast
   there, which the decoration tone does not. */
.highlight-value[b-4k3je1g3ap] {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ln-deep-accent);
}

.highlight-label[b-4k3je1g3ap] {
    margin: .35rem 0 0;
    font-size: .875rem;
    color: var(--ln-deep-ink);
    opacity: .75;
}

@media (max-width: 640px) {
    .highlight-row[b-4k3je1g3ap] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.75rem 1rem;
        padding: 2rem 1.25rem;
    }

    /* Two columns means the rule would fall between rows as well. Only the second column keeps
       one, and nothing draws it once the grid is a single column. */
    .highlight + .highlight[b-4k3je1g3ap]::before {
        display: none;
    }

    .highlight:nth-child(2n)[b-4k3je1g3ap]::before {
        display: block;
    }
}

@media (max-width: 380px) {
    .highlight-row[b-4k3je1g3ap] {
        grid-template-columns: minmax(0, 1fr);
    }

    .highlight:nth-child(2n)[b-4k3je1g3ap]::before {
        display: none;
    }
}
/* /Components/Shared/School/SchoolNews.razor.rz.scp.css */
.news-grid[b-k6y2u2ki4h] {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.news-column-head[b-k6y2u2ki4h] {
    margin: 0 0 1.25rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ln-accent);
}

/* Notices ----------------------------------------------------------------- */

.notice-list[b-k6y2u2ki4h] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notice-item[b-k6y2u2ki4h] {
    padding-block: 1.25rem;
    border-top: 1px solid var(--ln-border-soft);
}

.notice-item:first-child[b-k6y2u2ki4h] {
    border-top: 0;
    padding-top: 0;
}

/* A date pill rather than a mono line — the same chip shape the rest of the school site uses. */
.notice-date[b-k6y2u2ki4h] {
    display: inline-block;
    margin: 0 0 .5rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--ln-accent-soft);
    font-size: .75rem;
    font-weight: 650;
    color: var(--ln-accent);
}

.notice-title[b-k6y2u2ki4h] {
    margin: 0 0 .35rem;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.012em;
    color: var(--ln-text);
}

.notice-body[b-k6y2u2ki4h] {
    margin: 0;
    font-size: .9375rem;
    line-height: 1.65;
    color: var(--ln-text-dim);
}

/* Events ------------------------------------------------------------------ */

.event-list[b-k6y2u2ki4h] {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.event-item[b-k6y2u2ki4h] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.1rem;
}

.event-chip[b-k6y2u2ki4h] {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.1rem;
    padding-block: .45rem;
    border-radius: var(--ln-round-sm, .5rem);
    background: var(--ln-accent);
    color: var(--ln-on-accent);
    line-height: 1.1;
}

.event-month[b-k6y2u2ki4h] {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
}

.event-day[b-k6y2u2ki4h] {
    font-size: 1.125rem;
    font-weight: 750;
}

.event-body[b-k6y2u2ki4h] {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.event-title[b-k6y2u2ki4h] {
    font-size: .9375rem;
    font-weight: 650;
    color: var(--ln-text);
}

.event-detail[b-k6y2u2ki4h] {
    font-size: .8125rem;
    color: var(--ln-text-faint);
}

@media (max-width: 900px) {
    .news-grid[b-k6y2u2ki4h] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }
}
/* /Components/Shared/School/SchoolPortalCta.razor.rz.scp.css */
.portal-cta[b-qmiurn82v4] {
    padding-bottom: 1.5rem;
}

/* The reference closes on one solid plate rather than another white card. It uses --ln-deep, not
   the accent, because the primary button inside is an accent fill and would vanish into it.

   The plate re-points the tokens rather than overriding .ln-eyebrow, .ln-section-title and
   .ln-btn-quiet by hand. Those three are styled from PublicLayout with a ::deep selector that
   outranks anything a section component can write, so a colour override here would be a
   specificity fight that changes result with stylesheet order. Re-declaring the tokens the shared
   rules already read is the mechanism the school theme itself uses one level up, and it settles by
   inheritance instead. */
.portal-panel[b-qmiurn82v4] {
    --ln-text: var(--ln-deep-ink);
    --ln-text-dim: color-mix(in srgb, var(--ln-deep-ink) 82%, transparent);
    --ln-text-faint: color-mix(in srgb, var(--ln-deep-ink) 62%, transparent);
    --ln-border: rgba(255, 255, 255, .28);
    --ln-elev: rgba(255, 255, 255, .08);
    --ln-panel-soft: rgba(255, 255, 255, .16);
    /* The accent has to carry against navy now, so the band's own orange takes over, and its
       paired foreground becomes the plate colour — 4.5:1 the other way round. */
    --ln-accent: var(--ln-deep-accent);
    --ln-accent-hover: var(--ln-deep-accent);
    --ln-on-accent: var(--ln-deep);

    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3.75rem 2rem;
    border-radius: var(--ln-round, 1rem);
    background: var(--ln-deep);
    color: var(--ln-deep-ink);
    text-align: center;
    overflow: hidden;
}

/* Same decorative discs as the figures band, so the two dark plates read as one device. */
.portal-panel[b-qmiurn82v4]::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(20rem 20rem at 92% -20%,
            color-mix(in srgb, var(--ln-brand) 42%, transparent), transparent 62%),
        radial-gradient(16rem 16rem at 4% 118%,
            color-mix(in srgb, var(--ln-brand) 30%, transparent), transparent 62%);
    pointer-events: none;
}

/* Lift the content above the wash, which is an absolutely positioned ::before. */
.portal-panel > *[b-qmiurn82v4] {
    position: relative;
}

.portal-title[b-qmiurn82v4] {
    max-width: 22ch;
}

.portal-lede[b-qmiurn82v4] {
    max-width: 36rem;
    margin: 0 0 2rem;
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--ln-text-dim);
}

.portal-actions[b-qmiurn82v4] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .85rem;
}

@media (max-width: 640px) {
    .portal-panel[b-qmiurn82v4] {
        padding: 2.5rem 1.5rem;
    }

    .portal-actions[b-qmiurn82v4] {
        width: 100%;
        flex-direction: column;
    }
}
/* /Components/Shared/TenantOnboardingWizard.razor.rz.scp.css */
.wizard-steps[b-x42x517bhp] {
    gap: .5rem;
}

.wizard-fields[b-x42x517bhp] {
    max-width: 640px;
}
/* /Components/Shared/ThemeToggle.razor.rz.scp.css */
/* Scoped: this is the toggle's own styling, not a shared shell class, so it does not belong in
   admin.css or dashboard.css. Colour and button chrome come from whichever shell class the
   caller passes in via Class — nothing here sets a colour. */

.theme-toggle[b-sflbgcu6i1] {
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
}

.theme-ico[b-sflbgcu6i1] {
    display: block;
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

/* Show the icon for the theme currently in force, so the icon, the visible label and
   aria-pressed all say the same thing: sun = "Dark theme, off", moon = "Dark theme, on".
   (Deliberately not the "icon shows what you'll switch to" convention — that would contradict
   the pressed state a screen reader announces.)

   The selector reaches outside the component to <html>, which Blazor's scoped CSS permits: the
   generated attribute is appended to the subject compound (.theme-ico-*), not to the ancestor,
   giving `[data-theme="dark"] .theme-ico-moon[b-xxxxx]`. Note there is no :global() here —
   that is a CSS-modules feature, and Blazor would pass it through as an invalid selector and
   silently drop the rule. */
.theme-ico-moon[b-sflbgcu6i1] {
    display: none;
}

[data-theme="dark"] .theme-ico-moon[b-sflbgcu6i1] {
    display: block;
}

[data-theme="dark"] .theme-ico-sun[b-sflbgcu6i1] {
    display: none;
}

/* The label is meaningful to screen readers and to anyone reading the topbar, but the topbar
   is tight on small screens — drop to the icon alone, which still carries the state. */
@media (max-width: 720px) {
    .theme-toggle span[b-sflbgcu6i1] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}