/* ============================================================
   EduKZN — School Management Systems
   Design system & parallax engine
   ------------------------------------------------------------
   Aesthetic: dark editorial / technical blueprint.
   Display face   : Fraunces  (wonky variable serif)
   Interface face : Manrope
   Data face      : JetBrains Mono
   Available also : Poppins, Montserrat (see --f-poppins / --f-montserrat)
   ------------------------------------------------------------
   0. Tokens
   1. Reset & base
   2. Atmosphere (fixed parallax layers)
   3. Utilities
   4. Buttons
   5. Header & navigation
   6. Hero
   7. Ticker
   8. Section shell
   9. Platform (the shift)
  10. Module explorer
  11. Blueprint plates
  12. Parent portal + UI mock
  13. Campus gallery
  14. Reporting dashboard
  15. Transport & boarding split
  16. Onboarding steps
  17. Deployment plans
  18. Trust
  19. FAQ
  20. Enquiry & form
  21. Footer
  22. Floating UI (to-top, toasts, consent, lightbox)
  23. Motion & reveal
  24. Responsive
   25. Preferences & print
   26. Legal documents & 404
   27. Account surface (sign in · register · verify · reset)
   28. Dashboard console (five role levels)
   ============================================================ */

/* ------------------------------------------------------------
   0. TOKENS
   ------------------------------------------------------------ */
:root {
    /* Surfaces */
    --ink:          #0A0B0F;
    --ink-2:        #0F1116;
    --ink-3:        #16181F;
    --ink-4:        #1E2129;
    --graphite:     #2A2E38;

    /* Papers */
    --paper:        #F4F1EA;
    --paper-2:      #EAE5DA;
    --cream:        #FCFAF5;

    /* Text */
    --on-ink:       #F4F1EA;
    --on-ink-dim:   #A8AEBE;
    --on-ink-faint: #6E7688;
    --on-paper:     #0E1015;
    --on-paper-dim: #555C6B;

    /* Accents */
    --lime:         #D6FB4B;
    --lime-deep:    #A9CE1F;
    --amber:        #FFB24B;
    --rust:         #E2703A;
    --teal:         #3FD8C4;

    /* Status */
    --ok:           #7BD16A;
    --warn:         #FFC35C;
    --bad:          #FF7A6B;

    /* Tint — the RGB triplet behind every faint surface fill and
       hairline drawn over an ink surface. Kept apart from the colour
       so a light region only has to flip this one value: the
       dashboard content column does exactly that below. */
    --tint-rgb:     244, 241, 234;

    /* Lines */
    --line-ink:     rgba(var(--tint-rgb), .13);
    --line-ink-2:   rgba(var(--tint-rgb), .07);
    --line-paper:   rgba(14, 16, 21, .14);
    --line-paper-2: rgba(14, 16, 21, .07);

    /* Type */
    --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
    --f-body:    "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
    --f-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

    /* Loaded and ready, not applied by default. Swap any element onto
       these by setting font-family to the variable. */
    --f-poppins:    "Poppins", "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
    --f-montserrat: "Montserrat", "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Fluid scale */
    --t-hero:  clamp(2.55rem, 1.2rem + 6.1vw, 6.4rem);
    --t-h2:    clamp(1.95rem, 1.15rem + 3.2vw, 3.85rem);
    --t-h3:    clamp(1.24rem, 1.06rem + .78vw, 1.75rem);
    --t-lede:  clamp(1.02rem, .96rem + .34vw, 1.24rem);
    --t-body:  clamp(.96rem, .93rem + .16vw, 1.06rem);
    --t-small: clamp(.8rem, .78rem + .1vw, .875rem);
    --t-micro: .715rem;
    --t-mega:  clamp(7rem, 22vw, 26rem);

    /* Space */
    --pad:      clamp(1.15rem, 4vw, 4.5rem);
    --wide:     1320px;
    --sec-y:    clamp(4.5rem, 9vw, 9.5rem);
    --r-sm:     8px;
    --r-md:     14px;
    --r-lg:     22px;
    --r-xl:     30px;
    --r-pill:   999px;

    /* Motion */
    --ease:      cubic-bezier(.22, .68, .28, 1);
    --ease-out:  cubic-bezier(.16, 1, .3, 1);
    --ease-in:   cubic-bezier(.7, 0, .84, 0);

    /* Chrome height */
    --hdr-h: 76px;
}

/* ------------------------------------------------------------
   1. RESET & BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--hdr-h) + 18px);
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--on-ink);
    font-family: var(--f-body);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.62;
    letter-spacing: -.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }

h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 600;
    font-variation-settings: "SOFT" 20, "WONK" 1;
    line-height: 1.02;
    letter-spacing: -.022em;
    margin: 0;
    text-wrap: balance;
}
h1 em, h2 em, h3 em {
    font-style: italic;
    color: var(--lime);
    font-variation-settings: "SOFT" 60, "WONK" 1;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--lime); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
    border-radius: 4px;
}

code {
    font-family: var(--f-mono);
    font-size: .88em;
    background: rgba(214, 251, 75, .12);
    color: var(--lime);
    padding: .12em .42em;
    border-radius: 5px;
}

.ic {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    stroke-width: 1.6;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------
   2. ATMOSPHERE — fixed parallax backdrop
   Five gradient "scenes" cross-fade as the visitor scrolls, so
   the backdrop stays stationary while content travels over it.
   ------------------------------------------------------------ */
.atmos {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--ink);
}
.atmos__scene {
    position: absolute;
    inset: -10% -5%;
    opacity: 0;
    transition: opacity 1.1s var(--ease);
    will-change: opacity;
}
.atmos__scene.is-on { opacity: 1; }

.atmos__scene[data-scene="0"] {
    background:
        radial-gradient(58% 46% at 78% 8%,  rgba(214, 251, 75, .17), transparent 68%),
        radial-gradient(50% 44% at 6% 78%,  rgba(226, 112, 58, .13), transparent 70%),
        radial-gradient(70% 60% at 50% 118%, rgba(63, 216, 196, .08), transparent 72%),
        linear-gradient(180deg, #0C0E14 0%, #0A0B0F 60%, #08090C 100%);
}
.atmos__scene[data-scene="1"] {
    background:
        radial-gradient(52% 40% at 12% 12%, rgba(140, 147, 163, .14), transparent 70%),
        radial-gradient(64% 52% at 92% 84%, rgba(214, 251, 75, .09), transparent 72%),
        linear-gradient(180deg, #090A0E 0%, #0D0F15 100%);
}
.atmos__scene[data-scene="2"] {
    background:
        radial-gradient(46% 38% at 88% 20%, rgba(63, 216, 196, .12), transparent 70%),
        radial-gradient(58% 46% at 8% 92%,  rgba(214, 251, 75, .08), transparent 72%),
        linear-gradient(180deg, #0A0C11 0%, #080A0D 100%);
}
.atmos__scene[data-scene="3"] {
    background:
        radial-gradient(56% 44% at 84% 78%, rgba(255, 178, 75, .11), transparent 70%),
        radial-gradient(44% 40% at 14% 16%, rgba(214, 251, 75, .10), transparent 72%),
        linear-gradient(180deg, #0B0C11 0%, #090A0E 100%);
}
.atmos__scene[data-scene="4"] {
    background:
        radial-gradient(70% 40% at 50% 108%, rgba(214, 251, 75, .16), transparent 70%),
        radial-gradient(48% 42% at 90% 4%,  rgba(226, 112, 58, .10), transparent 72%),
        linear-gradient(180deg, #0A0B0F 0%, #07080A 100%);
}

/* Film grain — a tiny inline SVG noise tile */
.atmos__grain {
    position: absolute;
    inset: 0;
    opacity: .34;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.atmos__vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 40%, transparent 42%, rgba(0, 0, 0, .55) 100%);
}

/* --- Drifting auroras -------------------------------------------
   Three oversized, heavily blurred colour fields sit over the scene
   gradients. Each one drifts on its own long loop (the inner <i>),
   while the scroll driver slides the wrapper at a rate of its own —
   so the backdrop keeps breathing when the visitor stops scrolling,
   and deepens the moment they start again. */
.atmos__aurora {
    position: absolute;
    inset: -34%;
    transform: translate3d(0, calc(var(--scr, 0px) * var(--aurora-rate, -.03)), 0);
    will-change: transform;
}
.atmos__aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    animation: aurora-drift var(--aurora-dur, 30s) var(--ease) infinite alternate;
}
.atmos__aurora--a { --aurora-rate: -.03; }
.atmos__aurora--a i {
    width: 44vw; height: 44vw; top: 6%; left: 56%;
    background: radial-gradient(circle, rgba(214, 251, 75, .34), transparent 68%);
}
.atmos__aurora--b { --aurora-rate: -.05; }
.atmos__aurora--b i {
    width: 40vw; height: 40vw; top: 44%; left: 2%;
    --aurora-dur: 38s;
    background: radial-gradient(circle, rgba(226, 112, 58, .32), transparent 68%);
}
.atmos__aurora--c { --aurora-rate: -.075; }
.atmos__aurora--c i {
    width: 50vw; height: 50vw; top: 58%; left: 58%;
    --aurora-dur: 46s;
    background: radial-gradient(circle, rgba(63, 216, 196, .26), transparent 70%);
}
@keyframes aurora-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-9%, -7%, 0) scale(1.2); }
}

/* --- Scroll progress --- */
.scroll-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 90;
    pointer-events: none;
}
.scroll-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--lime), var(--amber));
    box-shadow: 0 0 14px rgba(214, 251, 75, .6);
}

/* ------------------------------------------------------------
   3. UTILITIES
   ------------------------------------------------------------ */
.wrap {
    width: 100%;
    max-width: var(--wide);
    margin-inline: auto;
    padding-inline: var(--pad);
    position: relative;
}

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

.skip {
    position: absolute;
    top: -100px; left: var(--pad);
    z-index: 200;
    background: var(--lime);
    color: var(--ink);
    padding: .7rem 1.1rem;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    font-weight: 700;
    transition: top .2s var(--ease);
}
.skip:focus { top: 0; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--lime);
    margin: 0 0 1.1rem;
}
.eyebrow__dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 0 3px rgba(214, 251, 75, .2);
    animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(214, 251, 75, .22); }
    50%      { box-shadow: 0 0 0 7px rgba(214, 251, 75, 0); }
}
.eyebrow--lite { color: var(--on-ink-dim); }
.eyebrow--lite .eyebrow__dot { background: var(--amber); box-shadow: 0 0 0 3px rgba(255, 178, 75, .2); }

.ticks { display: grid; gap: .75rem; margin: 1.6rem 0 0; }
.ticks li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .7rem;
    align-items: start;
    font-size: var(--t-small);
    line-height: 1.55;
    color: var(--on-ink-dim);
}
.ticks .ic { color: var(--lime); margin-top: .22em; width: 1rem; height: 1rem; }

.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.chip {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-ink-dim);
    border: 1px solid var(--line-ink);
    padding: .32rem .68rem;
    border-radius: var(--r-pill);
    white-space: nowrap;
}

.round {
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-ink);
    color: var(--on-ink);
    transition: background .25s var(--ease), color .25s var(--ease),
                border-color .25s var(--ease), transform .25s var(--ease);
}
.round .ic { width: 1.05rem; height: 1.05rem; }
.round:hover { background: var(--lime); border-color: var(--lime); color: var(--ink); transform: translateY(-2px); }

/* Parallax carrier — JS writes --plx in px, and --plx-s only for the
   layers that opt into depth, so every existing carrier is unchanged. */
[data-plx] { transform: translate3d(0, var(--plx, 0px), 0) scale(var(--plx-s, 1)); will-change: transform; }

/* ------------------------------------------------------------
   4. BUTTONS
   ------------------------------------------------------------ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--f-body);
    font-size: var(--t-small);
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1;
    padding: .92rem 1.35rem;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    transition: background .28s var(--ease), color .28s var(--ease),
                border-color .28s var(--ease), transform .28s var(--ease),
                box-shadow .28s var(--ease);
    white-space: nowrap;
}
.btn .ic { width: 1rem; height: 1rem; transition: transform .3s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover .ic { transform: translateX(3px); }
.btn:active { transform: translateY(0); }

.btn--lime { background: var(--lime); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(214, 251, 75, .55); }
.btn--lime:hover { background: #E2FF6E; box-shadow: 0 16px 40px -14px rgba(214, 251, 75, .7); }

.btn--ink { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.btn--ink:hover { background: var(--ink-3); border-color: var(--ink-3); }

.btn--ghost { border-color: var(--line-paper); color: var(--on-paper); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

.btn--ghost-lite { border-color: var(--line-ink); color: var(--on-ink); backdrop-filter: blur(6px); }
.btn--ghost-lite:hover { background: rgba(var(--tint-rgb), .08); border-color: rgba(var(--tint-rgb), .3); }

.btn--lg { padding: 1.08rem 1.75rem; font-size: .95rem; }
.btn--xs { padding: .55rem .9rem; font-size: var(--t-micro); letter-spacing: .06em; text-transform: uppercase; font-family: var(--f-mono); }

/* ------------------------------------------------------------
   5. HEADER & NAVIGATION
   ------------------------------------------------------------ */
.hdr {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
}
/* The blurred backdrop lives on a pseudo-element so that .hdr itself
   never creates a containing block for the fixed mobile panel. */
.hdr::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 11, 15, .84);
    border-bottom: 1px solid var(--line-ink-2);
    backdrop-filter: blur(16px) saturate(1.25);
    -webkit-backdrop-filter: blur(16px) saturate(1.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s var(--ease);
}
.hdr.is-solid::before { opacity: 1; }

.hdr__bar {
    position: relative;
    z-index: 2;
    max-width: var(--wide);
    margin-inline: auto;
    padding: 0 var(--pad);
    height: var(--hdr-h);
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Brand — a single lockup image, so swapping one file re-brands every surface */
.brand { display: inline-flex; align-items: center; gap: .7rem; flex: none; }
.brand__logo { display: block; height: 38px; width: auto; flex: none; }

/* Desktop nav */
.hdr__nav { margin-left: auto; }
.hdr__nav ul { display: flex; align-items: center; gap: .18rem; }
.hdr__nav a {
    position: relative;
    display: block;
    padding: .55rem .78rem;
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--on-ink-dim);
    border-radius: var(--r-sm);
    transition: color .24s var(--ease), background .24s var(--ease);
}
.hdr__nav a::after {
    content: "";
    position: absolute;
    left: .78rem; right: .78rem; bottom: .28rem;
    height: 1px;
    background: var(--lime);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .34s var(--ease);
}
.hdr__nav a:hover { color: var(--on-ink); }
.hdr__nav a:hover::after,
.hdr__nav a.is-active::after { transform: scaleX(1); }
.hdr__nav a.is-active { color: var(--lime); }
.hdr__navfoot { display: none; }

/* Actions */
.hdr__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.hdr__nav + .hdr__actions { margin-left: .5rem; }

.hdr__cta {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--lime);
    color: var(--ink);
    font-size: var(--t-small);
    font-weight: 700;
    padding: .72rem 1.15rem;
    border-radius: var(--r-pill);
    transition: background .28s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease);
    box-shadow: 0 10px 26px -14px rgba(214, 251, 75, .7);
}
.hdr__cta .ic { width: .95rem; height: .95rem; transition: transform .3s var(--ease); }
.hdr__cta:hover { background: #E2FF6E; transform: translateY(-2px); }
.hdr__cta:hover .ic { transform: translateX(3px); }

.hdr__icon {
    width: 42px; height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-ink);
    color: var(--on-ink);
    transition: background .26s var(--ease), color .26s var(--ease), border-color .26s var(--ease);
}
.hdr__icon .ic { width: 1.15rem; height: 1.15rem; }
.hdr__icon:hover { background: rgba(var(--tint-rgb), .09); border-color: rgba(var(--tint-rgb), .28); }

/* Burger */
.burger {
    display: none;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-ink);
    position: relative;
    z-index: 130;
    transition: border-color .3s var(--ease), background .3s var(--ease);
}
.burger span {
    position: absolute;
    left: 50%;
    width: 18px;
    height: 1.6px;
    background: var(--on-ink);
    border-radius: 2px;
    transform: translateX(-50%);
    transition: transform .4s var(--ease-out), opacity .22s var(--ease),
                width .3s var(--ease), top .3s var(--ease);
}
.burger span:nth-child(1) { top: 16px; }
.burger span:nth-child(2) { top: 21.2px; }
.burger span:nth-child(3) { top: 26.4px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21.2px; transform: translateX(-50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 21.2px; transform: translateX(-50%) rotate(-45deg); }

.nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 110;
    background: rgba(5, 6, 8, .6);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .35s var(--ease);
}
.nav-scrim.is-on { opacity: 1; }
body.nav-open { overflow: hidden; }

/* ------------------------------------------------------------
   6. HERO
   ------------------------------------------------------------ */
.hero {
    position: relative;
    z-index: 2;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--hdr-h) + clamp(2.5rem, 7vw, 6rem)) 0 clamp(4rem, 9vw, 7rem);
    overflow: hidden;
}
.hero__layers { position: absolute; inset: 0; pointer-events: none; }
.hl { position: absolute; display: block; }

.hl--grid {
    inset: -10% -10%;
    background-image:
        linear-gradient(rgba(var(--tint-rgb), .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--tint-rgb), .045) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: radial-gradient(80% 62% at 62% 32%, #000 10%, transparent 76%);
    -webkit-mask-image: radial-gradient(80% 62% at 62% 32%, #000 10%, transparent 76%);
}
.hl--arc {
    width: min(110vw, 1180px);
    aspect-ratio: 1;
    right: -28vw;
    top: -30vh;
    border-radius: 50%;
    border: 1px solid rgba(214, 251, 75, .16);
    box-shadow: inset 0 0 120px rgba(214, 251, 75, .06);
}
.hl--arc::before,
.hl--arc::after {
    content: "";
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    border: 1px solid rgba(214, 251, 75, .09);
}
.hl--arc::after { inset: 30%; border-color: rgba(255, 178, 75, .1); }

.hl--blob {
    width: 46vw; height: 46vw;
    left: -16vw; bottom: -18vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(226, 112, 58, .16), transparent 66%);
    filter: blur(30px);
}
.hl--rule {
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--tint-rgb), .12) 18%, rgba(var(--tint-rgb), .12) 82%, transparent);
}
.hl--r1 { top: 32%; }
.hl--r2 { top: 68%; }

.hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
}

/* Headline reveal */
.hero__h1 {
    font-size: var(--t-hero);
    font-weight: 500;
    letter-spacing: -.035em;
    line-height: .94;
    margin-bottom: 1.6rem;
}
.ln { display: block; overflow: hidden; padding-bottom: .04em; }
.ln__in {
    display: block;
    transform: translateY(112%) rotate(3deg);
    opacity: 0;
    animation: lineUp 1.05s var(--ease-out) forwards;
    animation-delay: calc(.16s + var(--d, 0) * .1s);
}
@keyframes lineUp {
    to { transform: translateY(0) rotate(0); opacity: 1; }
}
.hero__h1 em { color: var(--lime); }

.hero__lede {
    font-size: var(--t-lede);
    color: var(--on-ink-dim);
    max-width: 46ch;
    margin-bottom: 2.1rem;
}

.hero__acts { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 2.6rem; }

.hero__facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1rem;
    padding-top: 1.8rem;
    border-top: 1px solid var(--line-ink-2);
}
.hero__facts li { display: grid; gap: .18rem; }
.hero__facts b {
    font-family: var(--f-display);
    font-size: clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
    font-weight: 600;
    color: var(--lime);
    line-height: 1;
    letter-spacing: -.03em;
}
.hero__facts span {
    font-family: var(--f-mono);
    font-size: .655rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    line-height: 1.5;
}

/* Signal cards */
.hero__stack {
    position: relative;
    height: clamp(420px, 42vw, 540px);
}
.sig {
    position: absolute;
    background: linear-gradient(160deg, rgba(24, 27, 34, .92), rgba(14, 16, 21, .94));
    border: 1px solid var(--line-ink);
    border-radius: var(--r-lg);
    padding: 1.05rem 1.15rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .95);
}
.sig::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(150deg, rgba(214, 251, 75, .09), transparent 42%);
    pointer-events: none;
}
.sig__h {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--f-mono);
    font-size: .675rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--on-ink-dim);
    margin-bottom: .85rem;
}
.sig__h .ic { color: var(--lime); width: 1rem; height: 1rem; }
.sig__meta {
    font-size: .72rem;
    color: var(--on-ink-faint);
    margin: .8rem 0 0;
    font-family: var(--f-mono);
    letter-spacing: .02em;
}
.sig__msg { font-size: .8rem; line-height: 1.5; color: var(--on-ink-dim); margin: 0; }

.sig--a { top: 2%; right: 4%; width: 232px; z-index: 4; }
.sig--b { top: 34%; left: 0; width: 216px; z-index: 3; }
.sig--c { bottom: 20%; right: 8%; width: 246px; z-index: 2; }
.sig--d { bottom: -2%; left: 8%; width: 254px; z-index: 5; }

.sig__ring { display: flex; align-items: center; gap: .9rem; }
.ring { width: 62px; height: 62px; flex: none; transform: rotate(-90deg); }
.ring--sm { width: 54px; height: 54px; }
.ring circle { fill: none; stroke-width: 3.4; }
.ring__bg { stroke: rgba(var(--tint-rgb), .13); }
.ring__fg {
    stroke: var(--lime);
    stroke-linecap: round;
    stroke-dasharray: 113.1;
    stroke-dashoffset: calc(113.1 - (113.1 * var(--pct, 0)) / 100);
    animation: ringGrow 1.6s var(--ease-out) .5s both;
}
@keyframes ringGrow {
    from { stroke-dashoffset: 113.1; }
}
.sig__big {
    font-family: var(--f-display);
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.04em;
}
.sig__big em { font-style: normal; font-size: .55em; color: var(--lime); margin-left: .1em; }

.sig__bars {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 62px;
}
.sig__bars span {
    flex: 1;
    height: var(--h);
    border-radius: 3px;
    background: linear-gradient(180deg, var(--lime), rgba(214, 251, 75, .28));
    transform-origin: bottom;
    animation: barGrow .9s var(--ease-out) both;
}
.sig__bars span:nth-child(1) { animation-delay: .55s; }
.sig__bars span:nth-child(2) { animation-delay: .62s; }
.sig__bars span:nth-child(3) { animation-delay: .69s; }
.sig__bars span:nth-child(4) { animation-delay: .76s; }
.sig__bars span:nth-child(5) { animation-delay: .83s; }
.sig__bars span:nth-child(6) { animation-delay: .9s; }
@keyframes barGrow { from { transform: scaleY(.06); opacity: .2; } }

.sig__route { display: flex; align-items: center; }
.sig__pin {
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 1.6px solid var(--on-ink-faint);
    flex: none;
}
.sig__pin.is-done { background: var(--lime); border-color: var(--lime); }
.sig__pin.is-now {
    border-color: var(--amber);
    box-shadow: 0 0 0 4px rgba(255, 178, 75, .18);
    animation: pulse 2s var(--ease) infinite;
}
.sig__line { flex: 1; height: 1.6px; background: rgba(var(--tint-rgb), .14); position: relative; }
.sig__line i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0); background: var(--lime); }

/* Scroll cue */
.scrollcue {
    position: absolute;
    left: 50%;
    bottom: 1.6rem;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    gap: .55rem;
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    z-index: 3;
}
.scrollcue__track {
    width: 1px; height: 46px;
    background: var(--line-ink);
    position: relative;
    overflow: hidden;
}
.scrollcue__track i {
    position: absolute;
    left: 0; top: -40%;
    width: 100%; height: 40%;
    background: var(--lime);
    animation: cue 2.1s var(--ease) infinite;
}
@keyframes cue {
    0%   { top: -40%; }
    100% { top: 100%; }
}

/* ------------------------------------------------------------
   7. TICKER
   ------------------------------------------------------------ */
.ticker {
    position: relative;
    z-index: 3;
    background: var(--lime);
    color: var(--ink);
    overflow: hidden;
    padding: .78rem 0;
    border-block: 1px solid rgba(10, 11, 15, .1);
}
.ticker__track {
    display: flex;
    width: max-content;
    animation: slide 46s linear infinite;
}
.ticker__set { display: flex; align-items: center; }
.ticker__item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--f-mono);
    font-size: .715rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
    padding-inline: 1.35rem;
}
.ticker__item::after {
    content: "";
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(10, 11, 15, .35);
    margin-left: 1.35rem;
}
.ticker__item .ic { width: .95rem; height: .95rem; }
@keyframes slide {
    to { transform: translateX(-50%); }
}
.ticker:hover .ticker__track { animation-play-state: paused; }

/* ------------------------------------------------------------
   8. SECTION SHELL
   ------------------------------------------------------------ */
.sec {
    position: relative;
    z-index: 2;
    padding: var(--sec-y) 0;
}
.sec__head { max-width: 68ch; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.sec__head--split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
}
.sec__h2 {
    font-size: var(--t-h2);
    font-weight: 500;
    margin-bottom: 1rem;
}
.sec__head--split .sec__h2 { margin-bottom: 0; }
.sec__lede {
    font-size: var(--t-lede);
    color: var(--on-ink-dim);
    max-width: 56ch;
}

/* Light "paper" chapters */
.sec--campus,
.sec--insight,
.sec--faq {
    background: var(--paper);
    color: var(--on-paper);
}
.sec--campus { border-radius: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) 0 0; }
.sec--faq { border-radius: clamp(24px, 4vw, 48px); }
.sec--campus .sec__lede,
.sec--insight .sec__lede,
.sec--faq .sec__lede { color: var(--on-paper-dim); }
.sec--campus .eyebrow,
.sec--insight .eyebrow,
.sec--faq .eyebrow { color: var(--on-paper-dim); }
.sec--campus h2 em,
.sec--insight h2 em,
.sec--faq h2 em { color: var(--lime-deep); }
.sec--campus .chip,
.sec--insight .chip { border-color: var(--line-paper); color: var(--on-paper-dim); }

/* ------------------------------------------------------------
   9. PLATFORM — the shift
   ------------------------------------------------------------ */
.shift {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
    gap: clamp(1rem, 2.4vw, 2rem);
    align-items: stretch;
}
.shift__col {
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-lg);
    padding: clamp(1.3rem, 2.6vw, 2.1rem);
    background: linear-gradient(165deg, rgba(22, 24, 31, .7), rgba(12, 13, 17, .7));
    backdrop-filter: blur(8px);
}
.shift__col--after { border-color: rgba(214, 251, 75, .26); background: linear-gradient(165deg, rgba(214, 251, 75, .07), rgba(12, 13, 17, .8)); }
.shift__h { margin-bottom: 1.2rem; }
.shift__tag {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .34rem .72rem;
    border-radius: var(--r-pill);
}
.shift__tag--bad { background: rgba(255, 122, 107, .13); color: var(--bad); }
.shift__tag--good { background: rgba(214, 251, 75, .15); color: var(--lime); }
.shift__list { display: grid; gap: .85rem; }
.shift__list li {
    position: relative;
    padding-left: 1.35rem;
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--on-ink-dim);
}
.shift__list li::before {
    content: "";
    position: absolute;
    left: 0; top: .62em;
    width: 7px; height: 1px;
    background: var(--on-ink-faint);
}
.shift__col--after .shift__list li::before { background: var(--lime); width: 9px; }
.shift__col--after .shift__list li { color: var(--on-ink); }

.shift__spine {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shift__spine-line {
    position: absolute;
    inset: 8% 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(214, 251, 75, .4), transparent);
}
.shift__spine-node {
    position: relative;
    z-index: 2;
    writing-mode: vertical-rl;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--lime);
    background: var(--ink-2);
    border: 1px solid rgba(214, 251, 75, .3);
    border-radius: var(--r-pill);
    padding: 1.1rem .5rem;
}

.metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 2rem);
    margin-top: clamp(2.5rem, 5vw, 4.5rem);
}
.metric {
    padding-top: 1.6rem;
    border-top: 1px solid var(--line-ink-2);
}
.metric .ic { width: 1.45rem; height: 1.45rem; color: var(--lime); margin-bottom: .95rem; }
.metric h3 { font-size: var(--t-h3); margin-bottom: .5rem; }
.metric p { font-size: var(--t-small); color: var(--on-ink-dim); }

/* ------------------------------------------------------------
   10. MODULE EXPLORER
   ------------------------------------------------------------ */
.explorer {
    display: grid;
    grid-template-columns: minmax(280px, 3.6fr) minmax(0, 8.4fr);
    gap: clamp(1.1rem, 2.2vw, 1.8rem);
    align-items: start;
}
.explorer__rail {
    display: grid;
    gap: 3px;
    border-left: 1px solid var(--line-ink-2);
}
.mx {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: .7rem;
    width: 100%;
    text-align: left;
    padding: .82rem .85rem .82rem 1.05rem;
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    color: var(--on-ink-dim);
    transition: background .3s var(--ease), color .3s var(--ease);
}
.mx::before {
    content: "";
    position: absolute;
    left: -1px; top: 50%;
    width: 2px; height: 0;
    background: var(--lime);
    transform: translateY(-50%);
    transition: height .38s var(--ease);
}
.mx__num {
    font-family: var(--f-mono);
    font-size: .64rem;
    letter-spacing: .08em;
    color: var(--on-ink-faint);
    transition: color .3s var(--ease);
}
.mx__ico { color: var(--on-ink-faint); transition: color .3s var(--ease); }
.mx__ico .ic { width: 1.05rem; height: 1.05rem; }
.mx__name { font-size: var(--t-small); font-weight: 600; letter-spacing: -.01em; }
.mx__go { opacity: 0; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.mx__go .ic { width: .95rem; height: .95rem; }
.mx:hover { background: rgba(var(--tint-rgb), .04); color: var(--on-ink); }
.mx.is-active { background: rgba(214, 251, 75, .07); color: var(--on-ink); }
.mx.is-active::before { height: 62%; }
.mx.is-active .mx__num { color: var(--lime); }
.mx.is-active .mx__ico { color: var(--lime); }
.mx.is-active .mx__go { opacity: 1; }

.explorer__stage { position: relative; }
.pane {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(1.2rem, 2.6vw, 2.4rem);
    align-items: start;
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-xl);
    padding: clamp(1.1rem, 2.2vw, 1.7rem);
    background: linear-gradient(170deg, rgba(20, 22, 28, .82), rgba(10, 11, 15, .86));
    backdrop-filter: blur(10px);
}
.pane[hidden] { display: none; }
.pane.is-entering { animation: paneIn .55s var(--ease-out) both; }
@keyframes paneIn {
    from { opacity: 0; transform: translateY(14px) scale(.995); }
}
.pane__view { position: relative; }
.pane__ghost {
    position: absolute;
    right: -.15em; top: -.22em;
    font-family: var(--f-display);
    font-size: clamp(3.4rem, 8vw, 5.6rem);
    font-weight: 700;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(214, 251, 75, .22);
    pointer-events: none;
    z-index: 2;
}
.pane__kicker {
    font-family: var(--f-mono);
    font-size: .69rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--lime);
    margin-bottom: .7rem;
}
.pane__h { font-size: var(--t-h3); margin-bottom: .7rem; }
.pane__blurb { font-size: var(--t-small); color: var(--on-ink-dim); line-height: 1.65; }
.pane__feats { display: grid; gap: .62rem; margin-top: 1.3rem; }
.pane__feats li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .6rem;
    align-items: start;
    font-size: var(--t-small);
    line-height: 1.55;
    color: var(--on-ink-dim);
}
.pane__feats .ic { color: var(--lime); width: .95rem; height: .95rem; margin-top: .3em; }

.explorer__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem .35rem .2rem;
}
.explorer__count {
    font-family: var(--f-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    color: var(--on-ink-faint);
}
.explorer__count b { color: var(--lime); }
.explorer__nav { display: flex; gap: .45rem; }

/* ------------------------------------------------------------
   11. BLUEPRINT PLATES (placeholder system)
   Every photographic slot is a deliberate technical drawing.
   ------------------------------------------------------------ */
.plate {
    position: relative;
    aspect-ratio: var(--ratio, 4 / 3);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--line-paper);
    background: var(--cream);
    isolation: isolate;
}
.plate__surface {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg, rgba(14, 16, 21, .045) 0 1px, transparent 1px 9px),
        linear-gradient(150deg, #F7F5EF, #E8E3D8);
}
.plate__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(14, 16, 21, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 16, 21, .05) 1px, transparent 1px);
    background-size: 30px 30px;
}
.plate__marks i {
    position: absolute;
    width: 13px; height: 13px;
    border: 1px solid rgba(14, 16, 21, .3);
}
.plate__marks i:nth-child(1) { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.plate__marks i:nth-child(2) { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.plate__marks i:nth-child(3) { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.plate__marks i:nth-child(4) { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.plate__core {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .5rem;
    text-align: center;
    padding: 1.5rem;
}
.plate__core .ic {
    width: 1.7rem; height: 1.7rem;
    color: rgba(14, 16, 21, .32);
}
.plate__id {
    font-family: var(--f-mono);
    font-size: .655rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(14, 16, 21, .62);
}
.plate__hint {
    font-family: var(--f-mono);
    font-size: .575rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: rgba(14, 16, 21, .36);
    max-width: 22ch;
}
.plate__badge {
    position: absolute;
    top: 12px; left: 34px;
    font-family: var(--f-mono);
    font-size: .575rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--on-ink);
    padding: .26rem .55rem;
    border-radius: var(--r-pill);
}
.plate__cap {
    position: absolute;
    left: 12px; right: 12px; bottom: 12px;
    font-family: var(--f-mono);
    font-size: .615rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(14, 16, 21, .55);
    background: rgba(252, 250, 245, .86);
    backdrop-filter: blur(6px);
    border-radius: var(--r-sm);
    padding: .4rem .6rem;
    text-align: left;
}
.plate__zoom {
    position: absolute;
    right: 12px; top: 12px;
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ink);
    color: var(--on-ink);
    opacity: 0;
    transform: scale(.85);
    transition: opacity .3s var(--ease), transform .3s var(--ease), background .24s var(--ease);
}
.plate__zoom .ic { width: .95rem; height: .95rem; }
.plate--zoom:hover .plate__zoom,
.plate__zoom:focus-visible { opacity: 1; transform: scale(1); }
.plate__zoom:hover { background: var(--lime); color: var(--ink); }
.plate--zoom { cursor: zoom-in; }

/* Dark variant for dark sections */
.plate--ink {
    border-color: var(--line-ink);
    background: var(--ink-2);
}
.plate--ink .plate__surface {
    background:
        repeating-linear-gradient(45deg, rgba(var(--tint-rgb), .04) 0 1px, transparent 1px 9px),
        linear-gradient(150deg, #15181F, #0B0C10);
}
.plate--ink .plate__grid {
    background-image:
        linear-gradient(rgba(214, 251, 75, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(214, 251, 75, .055) 1px, transparent 1px);
}
.plate--ink .plate__marks i { border-color: rgba(214, 251, 75, .3); }
.plate--ink .plate__core .ic { color: rgba(214, 251, 75, .38); }
.plate--ink .plate__id { color: rgba(var(--tint-rgb), .66); }
.plate--ink .plate__hint { color: rgba(var(--tint-rgb), .34); }
.plate--ink .plate__badge { background: var(--lime); color: var(--ink); }
.plate--ink .plate__cap {
    color: rgba(var(--tint-rgb), .72);
    background: rgba(10, 11, 15, .78);
}
.plate--ink .plate__zoom { background: var(--lime); color: var(--ink); }

/* ------------------------------------------------------------
   12. PARENT PORTAL + UI MOCK
   ------------------------------------------------------------ */
.portal {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
.portal__acts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}
.portal__note {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--f-mono);
    font-size: .655rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.portal__note .ic { width: .9rem; height: .9rem; color: var(--lime); }
.portal__caption {
    font-family: var(--f-mono);
    font-size: .615rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    text-align: center;
    margin-top: 1rem;
}

.portal__device { position: relative; }
.ui {
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--line-ink);
    background: var(--cream);
    box-shadow: 0 50px 110px -50px rgba(0, 0, 0, .95), 0 0 0 1px rgba(214, 251, 75, .07);
}
.ui__chrome {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .62rem .85rem;
    background: var(--ink-3);
    border-bottom: 1px solid var(--line-ink-2);
}
.ui__dots { display: flex; gap: 5px; flex: none; }
.ui__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--tint-rgb), .16); }
.ui__dots i:first-child { background: rgba(255, 122, 107, .6); }
.ui__dots i:nth-child(2) { background: rgba(255, 195, 92, .6); }
.ui__dots i:nth-child(3) { background: rgba(123, 209, 106, .55); }
.ui__url {
    flex: 1;
    font-family: var(--f-mono);
    font-size: .595rem;
    letter-spacing: .05em;
    color: var(--on-ink-faint);
    background: rgba(var(--tint-rgb), .05);
    border-radius: var(--r-pill);
    padding: .3rem .75rem;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ui__badge {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    font-family: var(--f-mono);
    font-size: .545rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lime);
    border: 1px solid rgba(214, 251, 75, .3);
    border-radius: var(--r-pill);
    padding: .2rem .5rem;
}
.ui__badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--lime); }

.ui__body { display: grid; grid-template-columns: 118px minmax(0, 1fr); background: var(--cream); }
.ui__side {
    background: var(--ink-2);
    padding: 1rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.ui__sidebrand {
    font-family: var(--f-display);
    font-size: .95rem;
    font-weight: 700;
    color: var(--on-ink);
    margin-bottom: .6rem;
    letter-spacing: -.03em;
}
.ui__sidebrand em { font-style: normal; color: var(--lime); }
.ui__side ul { display: grid; gap: .18rem; }
.ui__side li {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .655rem;
    font-weight: 500;
    color: var(--on-ink-faint);
    padding: .42rem .5rem;
    border-radius: var(--r-sm);
}
.ui__side li .ic { width: .85rem; height: .85rem; }
.ui__side li.is-on { background: rgba(214, 251, 75, .1); color: var(--lime); }
.ui__sidefoot {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: .45rem;
    font-size: .62rem;
    color: var(--on-ink-faint);
    padding: .5rem;
    border-top: 1px solid var(--line-ink-2);
}
.ui__sidefoot .ic { width: .8rem; height: .8rem; }

.ui__main { padding: .9rem; display: grid; gap: .7rem; }
.ui__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    flex-wrap: wrap;
}
.ui__who { display: flex; align-items: center; gap: .55rem; }
.ui__ava {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--lime);
    font-family: var(--f-mono);
    font-size: .6rem;
    font-weight: 700;
    flex: none;
}
.ui__who b { display: block; font-size: .74rem; color: var(--on-paper); line-height: 1.2; }
.ui__who em { display: block; font-style: normal; font-size: .6rem; color: var(--on-paper-dim); }
.ui__seg { display: flex; gap: 3px; background: var(--paper-2); padding: 3px; border-radius: var(--r-pill); }
.ui__seg span {
    font-size: .6rem;
    font-weight: 600;
    color: var(--on-paper-dim);
    padding: .28rem .6rem;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
.ui__seg span.is-on { background: var(--ink); color: var(--lime); }

.ui__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.ui__card {
    background: #fff;
    border: 1px solid var(--line-paper-2);
    border-radius: var(--r-md);
    padding: .7rem .75rem;
    display: grid;
    gap: .3rem;
    align-content: start;
}
.ui__card--wide { grid-column: 1 / -1; }
.ui__card--ring { justify-items: start; }
.ui__lab {
    font-family: var(--f-mono);
    font-size: .545rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-paper-dim);
}
.ui__ring { display: flex; align-items: center; gap: .55rem; }
.ui__ring b {
    font-family: var(--f-display);
    font-size: 1.28rem;
    font-weight: 600;
    letter-spacing: -.04em;
    color: var(--on-paper);
}
.ui__ring b span { font-size: .6em; color: var(--lime-deep); }
.ui__amt {
    font-family: var(--f-display);
    font-size: 1.22rem;
    font-weight: 600;
    letter-spacing: -.03em;
    color: var(--on-paper);
}
.ui__amt span { font-size: .62em; color: var(--on-paper-dim); }
.ui__sub { font-size: .6rem; color: var(--on-paper-dim); }
.ui__sub--ok { color: #4E9B42; }
.ui__mini {
    display: block;
    height: 4px;
    border-radius: 3px;
    background: var(--paper-2);
    overflow: hidden;
}
.ui__mini i { display: block; height: 100%; width: var(--w); background: var(--lime-deep); border-radius: 3px; }

.ui__marks { display: grid; gap: .42rem; }
.ui__marks li {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .2rem .5rem;
    font-size: .6rem;
    color: var(--on-paper-dim);
    align-items: center;
}
.ui__marks b { font-family: var(--f-mono); font-size: .6rem; color: var(--on-paper); }
.ui__marks i {
    grid-column: 1 / -1;
    height: 3px;
    border-radius: 3px;
    background: var(--paper-2);
    position: relative;
    overflow: hidden;
}
.ui__marks i::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--w);
    background: var(--ink);
    border-radius: 3px;
}
.ui__feed { display: grid; gap: .45rem; }
.ui__feed li { display: grid; grid-template-columns: auto 1fr; gap: .5rem; align-items: start; font-size: .62rem; color: var(--on-paper-dim); }
.ui__feed b { color: var(--on-paper); font-weight: 600; }
.ui__pip { width: 6px; height: 6px; border-radius: 50%; background: var(--paper-2); margin-top: .38em; }
.ui__pip--hi { background: var(--lime-deep); box-shadow: 0 0 0 3px rgba(169, 206, 31, .2); }

/* ------------------------------------------------------------
   13. CAMPUS GALLERY
   ------------------------------------------------------------ */
.gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.8rem, 1.6vw, 1.3rem);
    align-items: start;
}
.gallery .plate { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.gallery .plate:hover { transform: translateY(-5px); box-shadow: 0 28px 50px -32px rgba(14, 16, 21, .5); }
.gallery__tall { grid-row: span 2; }

/* Lightbox */
.lb {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: grid;
    place-items: center;
    padding: var(--pad);
    background: rgba(5, 6, 8, .9);
    backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease);
}
.lb.is-on { opacity: 1; pointer-events: auto; }
.lb__frame {
    width: min(880px, 100%);
    transform: scale(.94);
    transition: transform .45s var(--ease-out);
}
.lb.is-on .lb__frame { transform: scale(1); }
.lb__frame .plate { border-color: rgba(var(--tint-rgb), .22); }
.lb__cap {
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-ink-dim);
    text-align: center;
    margin-top: 1rem;
}
.lb__close {
    position: absolute;
    top: var(--pad); right: var(--pad);
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-ink);
    color: var(--on-ink);
    transition: background .25s var(--ease), color .25s var(--ease);
}
.lb__close:hover { background: var(--lime); color: var(--ink); }

/* ------------------------------------------------------------
   14. REPORTING DASHBOARD
   ------------------------------------------------------------ */
.dash {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(1rem, 2.2vw, 1.6rem);
    align-items: stretch;
}
.dash__panel {
    background: var(--cream);
    border: 1px solid var(--line-paper-2);
    border-radius: var(--r-lg);
    padding: clamp(1.1rem, 2.2vw, 1.7rem);
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 60px -50px rgba(14, 16, 21, .45);
}
.dash__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.dash__h { font-size: 1.16rem; margin-bottom: .2rem; }
.dash__sub { font-size: .74rem; color: var(--on-paper-dim); margin: 0; font-family: var(--f-mono); letter-spacing: .02em; }

.seg {
    display: flex;
    gap: 3px;
    background: var(--paper-2);
    padding: 3px;
    border-radius: var(--r-pill);
}
.seg__btn {
    font-family: var(--f-mono);
    font-size: .655rem;
    font-weight: 500;
    letter-spacing: .06em;
    color: var(--on-paper-dim);
    padding: .38rem .7rem;
    border-radius: var(--r-pill);
    transition: background .26s var(--ease), color .26s var(--ease);
}
.seg__btn:hover { color: var(--on-paper); }
.seg__btn.is-on { background: var(--ink); color: var(--lime); }

.chart {
    position: relative;
    flex: 1;
    min-height: 210px;
    display: grid;
    align-items: end;
}
.chart__set {
    grid-area: 1 / 1;
    display: flex;
    align-items: flex-end;
    gap: clamp(4px, 1.1vw, 12px);
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s var(--ease);
}
.chart__set.is-on { opacity: 1; pointer-events: auto; }
.chart__bar {
    position: relative;
    flex: 1;
    height: var(--h);
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, rgba(14, 16, 21, .9), rgba(14, 16, 21, .55));
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform-origin: bottom;
    transition: background .3s var(--ease), transform .35s var(--ease);
    min-width: 0;
}
.chart__bar > i { position: absolute; inset: auto 0 0 0; height: 3px; background: var(--lime-deep); border-radius: 0 0 2px 2px; }
.chart__bar:hover { background: linear-gradient(180deg, var(--ink), var(--graphite)); transform: scaleY(1.015); }
.chart__val {
    position: absolute;
    top: -1.5rem;
    font-family: var(--f-mono);
    font-style: normal;
    font-size: .6rem;
    color: var(--on-paper);
    opacity: 0;
    transition: opacity .25s var(--ease);
}
.chart__bar:hover .chart__val { opacity: 1; }
.chart__lab {
    position: absolute;
    bottom: -1.45rem;
    font-family: var(--f-mono);
    font-style: normal;
    font-size: .575rem;
    letter-spacing: .04em;
    color: var(--on-paper-dim);
}
.chart__set.is-on .chart__bar { animation: barGrow .7s var(--ease-out) both; }
.chart__set.is-on .chart__bar:nth-child(2) { animation-delay: .05s; }
.chart__set.is-on .chart__bar:nth-child(3) { animation-delay: .1s; }
.chart__set.is-on .chart__bar:nth-child(4) { animation-delay: .15s; }
.chart__set.is-on .chart__bar:nth-child(5) { animation-delay: .2s; }
.chart__set.is-on .chart__bar:nth-child(6) { animation-delay: .25s; }
.chart__set.is-on .chart__bar:nth-child(7) { animation-delay: .3s; }
.chart__set.is-on .chart__bar:nth-child(8) { animation-delay: .35s; }
.chart__set.is-on .chart__bar:nth-child(9) { animation-delay: .4s; }
.chart__set.is-on .chart__bar:nth-child(10) { animation-delay: .45s; }
.chart__set.is-on .chart__bar:nth-child(11) { animation-delay: .5s; }
.chart__set.is-on .chart__bar:nth-child(12) { animation-delay: .55s; }

.dash__foot {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 2.1rem 0 0;
    padding-top: .9rem;
    border-top: 1px solid var(--line-paper-2);
    font-family: var(--f-mono);
    font-size: .605rem;
    letter-spacing: .05em;
    color: var(--on-paper-dim);
}
.dash__foot .ic { width: .9rem; height: .9rem; color: var(--lime-deep); }

/* Table */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: .68rem .5rem; }
.tbl thead th {
    font-family: var(--f-mono);
    font-size: .585rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-paper-dim);
    border-bottom: 1px solid var(--line-paper-2);
    padding-bottom: .55rem;
}
.tbl tbody tr { border-bottom: 1px solid var(--line-paper-2); }
.tbl tbody tr:last-child { border-bottom: 0; }
.tbl__lead { font-family: var(--f-body); font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.tbl__toggle {
    width: 24px; height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-paper);
    color: var(--on-paper-dim);
    transition: background .25s var(--ease), color .25s var(--ease), transform .3s var(--ease);
}
.tbl__toggle .ic { width: .8rem; height: .8rem; }
.tbl__toggle[aria-expanded="true"] { background: var(--ink); color: var(--lime); transform: rotate(90deg); }
.tbl__chev { width: 22px; color: var(--on-paper-dim); }
.tbl__chev .ic { width: .85rem; height: .85rem; transform: rotate(90deg); }
.pill {
    display: inline-block;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .05em;
    padding: .24rem .55rem;
    border-radius: var(--r-pill);
    background: var(--paper-2);
    color: var(--on-paper-dim);
}
.pill--num { background: transparent; border: 1px solid var(--line-paper); color: var(--on-paper); }
.pill--ok { background: rgba(123, 209, 106, .18); color: #3F7F35; }
.pill--warn { background: rgba(255, 195, 92, .22); color: #96650A; }
.pill--bad { background: rgba(255, 122, 107, .2); color: #A83527; }
.tbl__detail { background: rgba(234, 229, 218, .5); }
.tbl__detail-in { padding: .3rem .5rem .9rem 2.1rem; }
.tbl__detail p { font-size: .78rem; color: var(--on-paper-dim); margin-bottom: .7rem; }
.tbl__detail-grid { display: flex; flex-wrap: wrap; gap: .55rem; }
.tbl__detail-grid span {
    font-family: var(--f-mono);
    font-size: .595rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--on-paper-dim);
    border: 1px solid var(--line-paper);
    border-radius: var(--r-pill);
    padding: .28rem .6rem;
}
.tbl__detail-grid b { color: var(--on-paper); }

.report-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.2vw, 1.6rem);
    margin-top: clamp(2.2rem, 4vw, 3.6rem);
}
.rcard {
    border-top: 2px solid var(--ink);
    padding-top: 1.25rem;
}
.rcard .ic { width: 1.4rem; height: 1.4rem; color: var(--lime-deep); margin-bottom: .85rem; }
.rcard h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.rcard p { font-size: var(--t-small); color: var(--on-paper-dim); }

/* ------------------------------------------------------------
   15. TRANSPORT & BOARDING SPLIT
   ------------------------------------------------------------ */
.split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}
.split__half {
    position: relative;
    padding: clamp(3.5rem, 8vw, 7rem) clamp(1.15rem, 5vw, 4.5rem);
    overflow: hidden;
    border-top: 1px solid var(--line-ink-2);
}
.split__half--b { border-left: 1px solid var(--line-ink-2); }
.split__bg {
    position: absolute;
    inset: -20% 0;
    pointer-events: none;
}
.split__half--a .split__bg {
    background:
        radial-gradient(60% 50% at 20% 30%, rgba(63, 216, 196, .1), transparent 70%),
        radial-gradient(50% 50% at 90% 90%, rgba(214, 251, 75, .07), transparent 72%);
}
.split__half--b .split__bg {
    background:
        radial-gradient(60% 50% at 80% 26%, rgba(255, 178, 75, .1), transparent 70%),
        radial-gradient(50% 50% at 10% 92%, rgba(226, 112, 58, .07), transparent 72%);
}
.split__in { position: relative; max-width: 60ch; }

/* ------------------------------------------------------------
   16. ONBOARDING STEPS
   ------------------------------------------------------------ */
.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(1rem, 2.4vw, 2.2rem);
    counter-reset: step;
}
.step {
    position: relative;
    padding-top: 2.4rem;
    border-top: 1px solid var(--line-ink);
}
.step::before {
    content: "";
    position: absolute;
    top: -3px; left: 0;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--lime);
}
.step__n {
    display: block;
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .18em;
    color: var(--lime);
    margin-bottom: .8rem;
}
.step__h { font-size: 1.18rem; margin-bottom: .5rem; }
.step__d { font-size: var(--t-small); color: var(--on-ink-dim); }

/* ------------------------------------------------------------
   17. DEPLOYMENT PLANS
   ------------------------------------------------------------ */
.plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.2vw, 1.6rem);
    align-items: stretch;
}
.plan {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-xl);
    padding: clamp(1.4rem, 2.6vw, 2.1rem);
    background: linear-gradient(170deg, rgba(22, 24, 31, .72), rgba(10, 11, 15, .72));
    backdrop-filter: blur(10px);
    transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.plan:hover { transform: translateY(-4px); border-color: rgba(var(--tint-rgb), .22); }
.plan--lead {
    border-color: rgba(214, 251, 75, .34);
    background: linear-gradient(170deg, rgba(214, 251, 75, .08), rgba(10, 11, 15, .8));
}
.plan__tag {
    align-self: flex-start;
    font-family: var(--f-mono);
    font-size: .585rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--on-ink-dim);
    border: 1px solid var(--line-ink);
    border-radius: var(--r-pill);
    padding: .3rem .65rem;
    margin-bottom: 1.3rem;
}
.plan--lead .plan__tag { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.plan__name { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem); margin-bottom: .55rem; }
.plan__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .5rem;
    font-family: var(--f-mono);
    font-size: clamp(1.5rem, 1.24rem + .82vw, 1.95rem);
    letter-spacing: -.015em;
    color: var(--lime);
    margin-bottom: .35rem;
}
.plan__price span {
    font-size: .66rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.plan__note { font-size: .74rem; color: var(--on-ink-faint); margin-bottom: 1.5rem; }
.plan__list { display: grid; gap: .6rem; margin-bottom: 2rem; }
.plan__list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem;
    align-items: start;
    font-size: var(--t-small);
    line-height: 1.5;
    color: var(--on-ink-dim);
}
.plan__list .ic { color: var(--lime); width: .9rem; height: .9rem; margin-top: .32em; }
.plan__foot {
    font-size: .7rem;
    line-height: 1.6;
    color: var(--on-ink-faint);
    border-top: 1px solid var(--line-ink-2);
    padding-top: .9rem;
    margin-bottom: 1.5rem;
}
.plan .btn { margin-top: auto; justify-content: center; }

.deploy-note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1rem;
    align-items: start;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.2rem, 2.4vw, 1.8rem);
    border: 1px dashed rgba(214, 251, 75, .3);
    border-radius: var(--r-lg);
    background: rgba(214, 251, 75, .035);
}
.deploy-note > .ic { width: 1.5rem; height: 1.5rem; color: var(--lime); }
.deploy-note p { font-size: var(--t-small); color: var(--on-ink-dim); }
.deploy-note b { color: var(--on-ink); }

/* ------------------------------------------------------------
   18. TRUST
   ------------------------------------------------------------ */
.trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2.2vw, 1.6rem);
}
.trust__card {
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-lg);
    padding: clamp(1.2rem, 2.2vw, 1.7rem);
    background: rgba(16, 18, 23, .55);
    backdrop-filter: blur(8px);
    transition: border-color .35s var(--ease), background .35s var(--ease);
}
.trust__card:hover { border-color: rgba(214, 251, 75, .3); background: rgba(214, 251, 75, .045); }
.trust__ico {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-ink);
    color: var(--lime);
    margin-bottom: 1.1rem;
}
.trust__ico .ic { width: 1.2rem; height: 1.2rem; }
.trust__card h3 { font-size: 1.06rem; margin-bottom: .45rem; }
.trust__card p { font-size: var(--t-small); color: var(--on-ink-dim); }

.trust__bar {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: clamp(2rem, 4vw, 3rem);
    padding-top: 1.6rem;
    border-top: 1px solid var(--line-ink-2);
}
.trust__bar-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--f-mono);
    font-size: .64rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--on-ink-dim);
    border: 1px solid var(--line-ink);
    border-radius: var(--r-pill);
    padding: .45rem .85rem;
}
.trust__bar-item .ic { width: .9rem; height: .9rem; color: var(--lime); }

/* ------------------------------------------------------------
   19. FAQ
   ------------------------------------------------------------ */
.faq {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
.faq__aside { position: sticky; top: calc(var(--hdr-h) + 2rem); }
.faq__aside .btn { margin-top: 1.8rem; }
.faq__list { display: grid; gap: 0; }
.qa {
    border-bottom: 1px solid var(--line-paper);
    padding: 0;
}
.qa[open] { background: rgba(234, 229, 218, .42); border-radius: var(--r-md); }
.qa__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.15rem .9rem;
    font-family: var(--f-display);
    font-size: clamp(1rem, .95rem + .38vw, 1.22rem);
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.28;
    cursor: pointer;
    list-style: none;
    transition: color .25s var(--ease);
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { color: var(--lime-deep); }
.qa__sign {
    position: relative;
    width: 20px; height: 20px;
    flex: none;
}
.qa__sign i {
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1.6px;
    background: var(--on-paper);
    transition: transform .35s var(--ease), background .25s var(--ease);
}
.qa__sign i:last-child { transform: rotate(90deg); }
.qa[open] .qa__sign i:last-child { transform: rotate(0); }
.qa[open] .qa__sign i { background: var(--lime-deep); }
.qa__a { padding: 0 .9rem 1.35rem; }
.qa__a p { font-size: var(--t-small); color: var(--on-paper-dim); max-width: 68ch; }

/* ------------------------------------------------------------
   20. ENQUIRY & FORM
   ------------------------------------------------------------ */
.enquiry {
    display: grid;
    grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
.enquiry__list { display: grid; gap: .85rem; margin-top: 1.8rem; }
.enquiry__list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .75rem;
    align-items: start;
    font-size: var(--t-small);
    color: var(--on-ink-dim);
}
.enquiry__list .ic { width: 1.1rem; height: 1.1rem; color: var(--lime); margin-top: .2em; }
.enquiry__list b { color: var(--on-ink); }
.enquiry__contact {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line-ink-2);
}
.enquiry__contact a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--f-mono);
    font-size: .655rem;
    letter-spacing: .05em;
    color: var(--on-ink-dim);
    border: 1px solid var(--line-ink);
    border-radius: var(--r-pill);
    padding: .45rem .8rem;
    transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.enquiry__contact a:hover { border-color: var(--lime); color: var(--lime); background: rgba(214, 251, 75, .06); }
.enquiry__contact .ic { width: .9rem; height: .9rem; }

.enquiry__form {
    background: linear-gradient(170deg, rgba(22, 24, 31, .78), rgba(11, 12, 16, .82));
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-xl);
    padding: clamp(1.3rem, 3vw, 2.4rem);
    backdrop-filter: blur(12px);
}
.form { display: grid; gap: 1.15rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

.field { display: grid; gap: .42rem; }
.field label, .field legend {
    font-family: var(--f-mono);
    font-size: .615rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-dim);
    padding: 0;
}
.field--set { border: 0; margin: 0; padding: 0; }
.field--set legend { margin-bottom: .7rem; }
.req { color: var(--lime); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="password"],
.field input[type="search"],
.field input[type="number"],
.field select,
.field textarea {
    width: 100%;
    background: rgba(var(--tint-rgb), .045);
    border: 1px solid var(--line-ink);
    border-radius: var(--r-sm);
    padding: .78rem .9rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--on-ink);
    transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
    appearance: none;
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; font-family: var(--f-body); }
.field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A8AEBE' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    padding-right: 2.4rem;
}
.field select option { background: var(--ink-2); color: var(--on-ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--on-ink-faint); }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: rgba(214, 251, 75, .55);
    background: rgba(var(--tint-rgb), .07);
    box-shadow: 0 0 0 3px rgba(214, 251, 75, .12);
}
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: rgba(255, 122, 107, .6); }
.field__err {
    font-size: .72rem;
    color: var(--bad);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.checks {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: .45rem;
}
.check {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem;
    align-items: start;
    font-size: .78rem;
    color: var(--on-ink-dim);
    padding: .5rem .6rem;
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.check:hover { border-color: var(--line-ink); color: var(--on-ink); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
    width: 17px; height: 17px;
    border: 1px solid var(--line-ink);
    border-radius: 4px;
    display: grid;
    place-items: center;
    margin-top: .12em;
    flex: none;
    transition: background .22s var(--ease), border-color .22s var(--ease);
}
.check__box .ic { width: .7rem; height: .7rem; color: var(--ink); opacity: 0; transform: scale(.6); transition: opacity .2s var(--ease), transform .25s var(--ease-out); }
.check input:checked ~ .check__box { background: var(--lime); border-color: var(--lime); }
.check input:checked ~ .check__box .ic { opacity: 1; transform: scale(1); }
.check input:focus-visible ~ .check__box { box-shadow: 0 0 0 3px rgba(214, 251, 75, .25); }
.check:has(input:checked) { border-color: rgba(214, 251, 75, .38); background: rgba(214, 251, 75, .05); color: var(--on-ink); }
.check__txt { line-height: 1.45; }
.check--consent { border: 0; padding: 0; }
.check--consent:hover { border: 0; }
.check--consent a { color: var(--lime); text-decoration: underline; text-underline-offset: 2px; }
.check--consent .check__box { margin-top: .2em; }

.form__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-top: .5rem;
}
.form__legal {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--f-mono);
    font-size: .595rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    margin: 0;
}
.form__legal .ic { width: .85rem; height: .85rem; color: var(--lime); }

/* Honeypot — hidden from people, visible to naive bots */
.hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.alert {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .8rem;
    align-items: start;
    border-radius: var(--r-md);
    padding: .95rem 1.1rem;
    margin-bottom: 1.3rem;
    border: 1px solid transparent;
}
.alert--ok { background: rgba(123, 209, 106, .1); border-color: rgba(123, 209, 106, .32); }
.alert--ok > .ic { color: var(--ok); }
.alert--error { background: rgba(255, 122, 107, .1); border-color: rgba(255, 122, 107, .32); }
.alert--error > .ic { color: var(--bad); }
.alert > .ic { width: 1.2rem; height: 1.2rem; margin-top: .1em; }
.alert strong { display: block; font-size: .84rem; margin-bottom: .18rem; }
.alert p { font-size: .79rem; color: var(--on-ink-dim); margin: 0; }
.alert__x {
    font-size: 1.25rem;
    line-height: 1;
    color: var(--on-ink-faint);
    padding: 0 .2rem;
    transition: color .2s var(--ease);
}
.alert__x:hover { color: var(--on-ink); }

/* ------------------------------------------------------------
   21. FOOTER
   ------------------------------------------------------------ */
.ftr {
    position: relative;
    z-index: 2;
    background: #07080B;
    border-top: 1px solid var(--line-ink-2);
    padding: clamp(3.5rem, 7vw, 6rem) 0 0;
    overflow: hidden;
}
.ftr__glow {
    position: absolute;
    inset: auto 0 -40% 0;
    height: 70%;
    background: radial-gradient(60% 100% at 50% 100%, rgba(214, 251, 75, .12), transparent 70%);
    pointer-events: none;
}
.ftr__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr));
    gap: clamp(1.5rem, 3vw, 3rem);
    padding-bottom: clamp(2.5rem, 5vw, 4rem);
    position: relative;
}
.brand--ftr { margin-bottom: 1.2rem; }
.brand--ftr .brand__logo { height: 44px; }
.ftr__pitch { font-size: var(--t-small); color: var(--on-ink-dim); max-width: 38ch; }
.ftr__contact { display: grid; gap: .55rem; margin-top: 1.5rem; }
.ftr__contact li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .55rem;
    align-items: start;
    font-size: .78rem;
    color: var(--on-ink-dim);
}
.ftr__contact .ic { width: .95rem; height: .95rem; color: var(--lime); margin-top: .22em; }
.ftr__contact a:hover { color: var(--lime); }

.ftr__h {
    font-family: var(--f-mono);
    font-size: .605rem;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    margin-bottom: 1.1rem;
}
.ftr__col ul { display: grid; gap: .5rem; }
.ftr__col a {
    font-size: .79rem;
    color: var(--on-ink-dim);
    transition: color .22s var(--ease), padding-left .25s var(--ease);
}
.ftr__col a:hover { color: var(--lime); padding-left: 3px; }

.ftr__areas {
    padding: 1.6rem 0;
    border-top: 1px solid var(--line-ink-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.2rem;
    position: relative;
}
.ftr__areas-h {
    font-family: var(--f-mono);
    font-size: .585rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    font-weight: 500;
}
.ftr__areas-list { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.ftr__areas-list li {
    font-size: .715rem;
    color: var(--on-ink-faint);
    position: relative;
}
.ftr__areas-list li + li::before {
    content: "·";
    position: absolute;
    left: -.55rem;
    color: rgba(var(--tint-rgb), .2);
}

.ftr__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .6rem;
    padding: 1.4rem 0 1.8rem;
    border-top: 1px solid var(--line-ink-2);
    position: relative;
}
.ftr__base p {
    margin: 0;
    font-family: var(--f-mono);
    font-size: .615rem;
    letter-spacing: .05em;
    color: var(--on-ink-faint);
}
.ftr__made { color: rgba(var(--tint-rgb), .3); }

/* ------------------------------------------------------------
   22. FLOATING UI
   ------------------------------------------------------------ */
.totop {
    position: fixed;
    right: clamp(.9rem, 2vw, 1.6rem);
    bottom: clamp(.9rem, 2vw, 1.6rem);
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--lime);
    color: var(--ink);
    z-index: 120;
    opacity: 0;
    transform: translateY(14px) scale(.9);
    pointer-events: none;
    transition: opacity .35s var(--ease), transform .35s var(--ease), background .25s var(--ease);
    box-shadow: 0 16px 34px -16px rgba(214, 251, 75, .7);
}
.totop.is-on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { background: #E2FF6E; }

.toasts {
    position: fixed;
    right: clamp(.9rem, 2vw, 1.6rem);
    bottom: clamp(4.2rem, 5vw, 5.2rem);
    z-index: 160;
    display: grid;
    gap: .6rem;
    width: min(360px, calc(100vw - 2rem));
    pointer-events: none;
}
.toast {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: .7rem;
    align-items: start;
    background: rgba(20, 22, 28, .96);
    border: 1px solid var(--line-ink);
    border-left: 2px solid var(--lime);
    border-radius: var(--r-md);
    padding: .85rem .95rem;
    box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .95);
    backdrop-filter: blur(12px);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(22px) scale(.98);
    animation: toastIn .5s var(--ease-out) forwards;
}
.toast.is-out { animation: toastOut .35s var(--ease-in) forwards; }
@keyframes toastIn { to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(22px) scale(.98); } }
.toast--err { border-left-color: var(--bad); }
.toast > .ic { width: 1.15rem; height: 1.15rem; color: var(--lime); margin-top: .1em; }
.toast--err > .ic { color: var(--bad); }
.toast b { display: block; font-size: .78rem; margin-bottom: .15rem; }
.toast span { font-size: .72rem; color: var(--on-ink-dim); line-height: 1.45; }

.consent {
    position: fixed;
    left: clamp(.9rem, 2vw, 1.6rem);
    bottom: clamp(.9rem, 2vw, 1.6rem);
    z-index: 150;
    width: min(430px, calc(100vw - 2rem));
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .85rem;
    align-items: start;
    background: rgba(18, 20, 25, .96);
    border: 1px solid var(--line-ink);
    border-radius: var(--r-lg);
    padding: 1.05rem 1.15rem;
    backdrop-filter: blur(14px);
    box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .95);
    animation: toastIn .55s var(--ease-out) forwards;
    opacity: 0;
}
.consent__ico {
    width: 34px; height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(214, 251, 75, .12);
    color: var(--lime);
}
.consent__ico .ic { width: 1rem; height: 1rem; }
.consent__body strong { display: block; font-size: .82rem; margin-bottom: .25rem; }
.consent__body p { font-size: .715rem; color: var(--on-ink-dim); line-height: 1.5; margin: 0; }
.consent__body a { color: var(--lime); text-decoration: underline; text-underline-offset: 2px; }
.consent__act { grid-column: 1 / -1; display: flex; justify-content: flex-end; }
/* The [hidden] attribute only wins over the UA stylesheet, and the rule
   above sets display: grid — so dismissing the notice needs this. */
.consent[hidden] { display: none; }

/* ------------------------------------------------------------
   23. MOTION & REVEAL
   ------------------------------------------------------------ */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
    transition-delay: calc(var(--d, 0) * .09s);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-plx][data-reveal] { will-change: transform, opacity; }

/* ------------------------------------------------------------
   24. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1180px) {
    :root { --wide: 1080px; }

    .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
    .hero__stack { height: 440px; }
    .sig--a { width: 205px; }
    .sig--b { width: 192px; }
    .sig--c { width: 218px; }
    .sig--d { width: 226px; }
    .ui__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui__card--wide { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
    :root { --hdr-h: 68px; }

    /* Mobile navigation overlay */
    .burger { display: block; }
    .hdr__nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(420px, 88vw);
        margin: 0;
        z-index: 125;
        background: linear-gradient(180deg, #0D0F14, #08090C);
        border-left: 1px solid var(--line-ink-2);
        padding: calc(var(--hdr-h) + 2rem) clamp(1.2rem, 5vw, 2.4rem) 2rem;
        display: flex;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform .5s var(--ease-out);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .hdr__nav.is-open { transform: none; }
    .hdr__nav ul { flex-direction: column; align-items: stretch; gap: .1rem; }
    .hdr__nav a {
        font-family: var(--f-display);
        font-size: 1.5rem;
        font-weight: 600;
        letter-spacing: -.025em;
        padding: .55rem 0;
        border-bottom: 1px solid var(--line-ink-2);
        border-radius: 0;
        color: var(--on-ink);
    }
    .hdr__nav a::after { display: none; }
    .hdr__nav a.is-active { color: var(--lime); }
    .hdr__navfoot {
        display: grid;
        gap: .7rem;
        margin-top: auto;
        padding-top: 2rem;
    }
    .hdr__navfoot-link {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        font-family: var(--f-mono);
        font-size: .72rem;
        color: var(--on-ink-dim);
    }
    .hdr__navfoot-link .ic { width: 1rem; height: 1rem; color: var(--lime); }

    .hdr__cta span { display: none; }
    .hdr__cta { padding: .78rem; }
    .hdr__cta .ic { width: 1.05rem; height: 1.05rem; }

    .hero { min-height: auto; padding-top: calc(var(--hdr-h) + 3rem); }
    .hero__inner { grid-template-columns: 1fr; gap: 3rem; }
    .hero__stack { height: 380px; max-width: 520px; }
    .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }

    .sec__head--split { grid-template-columns: 1fr; align-items: start; gap: 1.2rem; }

    .shift { grid-template-columns: 1fr; }
    .shift__spine { display: none; }

    .explorer { grid-template-columns: 1fr; }
    .explorer__rail {
        display: flex;
        gap: .4rem;
        overflow-x: auto;
        padding-bottom: .5rem;
        border-left: 0;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    .mx {
        grid-template-columns: auto 1fr;
        flex: none;
        border-radius: var(--r-pill);
        border: 1px solid var(--line-ink-2);
        padding: .6rem .95rem;
        white-space: nowrap;
    }
    .mx::before { display: none; }
    .mx.is-active { border-color: rgba(214, 251, 75, .45); }
    .mx__name { white-space: nowrap; }
    .mx__go, .mx__ico { display: none; }

    .pane { grid-template-columns: 1fr; }

    .portal { grid-template-columns: 1fr; gap: 3rem; }
    .ui__body { grid-template-columns: 96px minmax(0, 1fr); }

    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gallery__tall { grid-row: span 1; }

    .dash { grid-template-columns: 1fr; }
    .report-cards { grid-template-columns: 1fr; gap: 1.6rem; }

    .split { grid-template-columns: 1fr; }
    .split__half--b { border-left: 0; border-top: 1px solid var(--line-ink-2); }

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

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

    .faq { grid-template-columns: 1fr; }
    .faq__aside { position: static; }
    .faq__aside .sec__lede { max-width: none; }

    .enquiry { grid-template-columns: 1fr; }

    .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem; }
    .ftr__brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    :root { --sec-y: clamp(3.4rem, 9vw, 5rem); }

    .hero__stack { height: 330px; }
    .sig--a { width: 176px; top: 0; right: 0; padding: .85rem .9rem; }
    .sig--b { width: 164px; top: 36%; left: 0; padding: .85rem .9rem; }
    .sig--c { width: 184px; bottom: 20%; right: 2%; padding: .85rem .9rem; }
    .sig--d { width: 196px; bottom: 0; left: 4%; padding: .85rem .9rem; }
    .sig__msg { font-size: .72rem; }
    .sig__meta { font-size: .645rem; }
    .ring { width: 50px; height: 50px; }

    .scrollcue { display: none; }

    .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero__acts .btn { flex: 1 1 100%; justify-content: center; }

    .metrics { grid-template-columns: 1fr; gap: 1.8rem; }
    .steps { grid-template-columns: 1fr; gap: 1.8rem; }

    .form__row { grid-template-columns: 1fr; }
    .checks { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

    .gallery { grid-template-columns: 1fr; }
    .trust { grid-template-columns: 1fr; }

    .ui__body { grid-template-columns: 1fr; }
    .ui__side { flex-direction: row; align-items: center; gap: .3rem; padding: .55rem .6rem; overflow-x: auto; }
    .ui__sidebrand { margin: 0 .4rem 0 0; font-size: .8rem; }
    .ui__side ul { display: flex; gap: .3rem; }
    .ui__side li span,
    .ui__side li { white-space: nowrap; font-size: .6rem; }
    .ui__sidefoot { display: none; }
    .ui__cards { grid-template-columns: 1fr; }

    .dash__head { flex-direction: column; align-items: stretch; }
    .seg { align-self: flex-start; }

    .tbl thead { display: none; }
    .tbl tbody tr.tbl__row { display: grid; grid-template-columns: 1fr auto; gap: .2rem .5rem; padding: .85rem 0; }
    .tbl__lead { flex-direction: row; }
    .tbl__row td { padding: 0; }
    .tbl__row td:nth-child(2),
    .tbl__row td:nth-child(3),
    .tbl__row td:nth-child(4) { grid-row: 2; }
    .tbl__row td:nth-child(2) { grid-column: 1; }
    .tbl__row td:nth-child(3) { grid-column: 1; margin-left: 4.4rem; }
    .tbl__row td:nth-child(4) { grid-column: 2; justify-self: end; }
    .tbl__chev { display: none; }

    .explorer__foot { flex-direction: column; align-items: stretch; gap: .8rem; }
    .explorer__nav { justify-content: flex-end; }

    .ftr__grid { grid-template-columns: 1fr; }
    .ftr__areas { flex-direction: column; align-items: flex-start; }
    .ftr__base { flex-direction: column; }

    .consent { grid-template-columns: 1fr; }
    .consent__ico { display: none; }
    .consent__act { justify-content: flex-start; }

    .toasts { width: calc(100vw - 2rem); right: 1rem; }
}

@media (max-width: 420px) {
    .hero__stack { height: 300px; }
    .sig--a { width: 150px; }
    .sig--b { width: 142px; }
    .sig--c { width: 156px; }
    .sig--d { width: 164px; }
    .hero__facts { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .hdr__icon { display: none; }
    .brand__logo { height: 30px; }
}

/* ------------------------------------------------------------
   25. PREFERENCES & PRINT
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    [data-plx] { transform: none !important; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .ticker__track { animation: none; }
    .atmos__scene { transition: none; }
}

@media print {
    .hdr, .totop, .toasts, .consent, .ticker, .scrollcue,
    .hero__layers, .atmos, .scroll-progress, .plate__zoom { display: none !important; }
    body { background: #fff; color: #000; }
    .sec { padding: 1.2rem 0; page-break-inside: avoid; }
    .sec--campus, .sec--insight, .sec--faq { background: #fff; }
    a { text-decoration: underline; }
}

/* ------------------------------------------------------------
   26. LEGAL DOCUMENTS & 404
   Dark parallax hero, then a light "paper" reading surface so
   long legal text stays comfortable.
   ------------------------------------------------------------ */

/* --- Breadcrumbs (shared by legal + 404) --- */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    margin: 0 0 1.4rem;
}
.crumbs a { color: var(--on-ink-dim); transition: color .25s var(--ease); }
.crumbs a:hover { color: var(--lime); }
.crumbs [aria-current] { color: var(--on-ink); }

/* --- 26a. Legal hero --- */
.legal-page { position: relative; z-index: 2; }
.legal-hero {
    position: relative;
    padding: calc(var(--hdr-h) + clamp(3rem, 7.5vw, 6.5rem)) 0 clamp(2.6rem, 5vw, 4.5rem);
    overflow: hidden;
}
.legal-hero__layers { position: absolute; inset: 0; pointer-events: none; }
.legal-hero__in { max-width: 940px; }
.legal-hero__h1 {
    font-size: clamp(2.05rem, 1.05rem + 4.1vw, 4.2rem);
    font-weight: 500;
    letter-spacing: -.028em;
    margin-bottom: 1.1rem;
    max-width: 22ch;
}
.legal-hero__lede {
    font-size: var(--t-lede);
    color: var(--on-ink-dim);
    max-width: 64ch;
}
.legal-hero__meta {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    margin: 1.9rem 0 0;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.legal-hero__meta .ic { width: 1rem; height: 1rem; color: var(--lime); }

/* --- 26b. Legal body on paper --- */
.legal {
    background: var(--paper);
    color: var(--on-paper);
    border-radius: clamp(24px, 4vw, 48px);
}
.legal__grid {
    display: grid;
    grid-template-columns: minmax(0, 248px) minmax(0, 1fr);
    gap: clamp(1.6rem, 4vw, 4.5rem);
    align-items: start;
}

.legal__toc {
    position: sticky;
    top: calc(var(--hdr-h) + 26px);
    border-left: 1px solid var(--line-paper);
    padding-left: 1.15rem;
    max-height: calc(100svh - var(--hdr-h) - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.legal__toc-h {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-paper-dim);
    margin: 0 0 .85rem;
}
.legal__toc ol { display: grid; gap: .05rem; }
.legal__toc li a {
    display: grid;
    grid-template-columns: 2.2ch 1fr;
    gap: .6rem;
    padding: .34rem 0;
    font-size: var(--t-small);
    line-height: 1.4;
    color: var(--on-paper-dim);
    transition: color .22s var(--ease);
}
.legal__toc li a span {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    opacity: .65;
}
.legal__toc li a:hover { color: var(--on-paper); }
.legal__toc li a:hover span { color: var(--lime-deep); opacity: 1; }

.legal__body { max-width: 78ch; }

.legal__note {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .85rem;
    align-items: start;
    background: rgba(169, 206, 31, .13);
    border: 1px solid rgba(169, 206, 31, .32);
    border-radius: var(--r-md);
    padding: 1.1rem 1.25rem;
    margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.legal__note .ic { margin-top: .22em; color: var(--lime-deep); }
.legal__note p { font-size: var(--t-small); color: var(--on-paper); }
.legal__note a { text-decoration: underline; text-underline-offset: 3px; }

.legal__block {
    padding-top: clamp(1.8rem, 3.2vw, 2.6rem);
    margin-top: clamp(1.8rem, 3.2vw, 2.6rem);
    border-top: 1px solid var(--line-paper);
}
.legal__block:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
.legal__h {
    font-size: var(--t-h3);
    font-weight: 500;
    letter-spacing: -.02em;
    margin-bottom: .85rem;
    scroll-margin-top: calc(var(--hdr-h) + 26px);
}
.legal__block p { color: var(--on-paper-dim); }
.legal__block p strong,
.legal__list strong { color: var(--on-paper); font-weight: 700; }
.legal__block code {
    background: rgba(14, 16, 21, .07);
    color: var(--on-paper);
}

.legal__list {
    display: grid;
    gap: .68rem;
    margin: 1.15rem 0 1.2rem;
}
.legal__list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .68rem;
    align-items: start;
    color: var(--on-paper-dim);
}
.legal__list .ic {
    width: 1rem;
    height: 1rem;
    margin-top: .32em;
    color: var(--lime-deep);
}

.legal__contact {
    margin-top: clamp(2.4rem, 5vw, 3.8rem);
    padding: clamp(1.35rem, 3vw, 2.1rem);
    background: var(--paper-2);
    border: 1px solid var(--line-paper);
    border-radius: var(--r-lg);
}
.legal__contact p { color: var(--on-paper-dim); }
.legal__contact a { text-decoration: underline; text-underline-offset: 3px; }
.legal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.4rem;
}

/* --- 26c. 404 --- */
.nf-page { position: relative; z-index: 2; }
.nf {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--hdr-h) + clamp(3rem, 8vw, 6.5rem)) 0 clamp(4rem, 9vw, 7rem);
    overflow: hidden;
}
.nf__layers { position: absolute; inset: 0; pointer-events: none; }
.nf__in { position: relative; max-width: 900px; }
.nf__code {
    font-family: var(--f-display);
    font-style: italic;
    font-variation-settings: "SOFT" 40, "WONK" 1;
    font-weight: 700;
    font-size: clamp(5rem, 19vw, 14rem);
    line-height: .84;
    letter-spacing: -.05em;
    margin: 0 0 -.08em;
    color: rgba(214, 251, 75, .1);
    -webkit-text-stroke: 1px rgba(214, 251, 75, .34);
    user-select: none;
    pointer-events: none;
}
.nf__h1 {
    font-size: clamp(1.85rem, 1.05rem + 3.3vw, 3.4rem);
    font-weight: 500;
    margin-bottom: 1rem;
}
.nf__lede {
    font-size: var(--t-lede);
    color: var(--on-ink-dim);
    max-width: 58ch;
}
.nf__act {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin: 2rem 0 0;
}
.nf__links {
    margin-top: clamp(2.4rem, 5vw, 3.6rem);
    padding-top: 1.6rem;
    border-top: 1px solid var(--line-ink);
}
.nf__links-h {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    margin-bottom: 1rem;
}
.nf__links ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .35rem 1.6rem;
}
.nf__links a {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem 0;
    font-size: var(--t-small);
    color: var(--on-ink-dim);
    transition: color .25s var(--ease);
}
.nf__links a:hover { color: var(--lime); }
.nf__links .ic { color: var(--on-ink-faint); transition: color .25s var(--ease); }
.nf__links a:hover .ic { color: var(--lime); }

@media (max-width: 1024px) {
    .legal__grid { grid-template-columns: minmax(0, 1fr); }
    .legal__toc {
        position: static;
        max-height: none;
        overflow: visible;
        border-left: 0;
        border-top: 1px solid var(--line-paper);
        padding: .1rem 0 0;
        margin-bottom: 2.4rem;
    }
    .legal__toc ol {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .05rem 1.4rem;
    }
    .nf__links ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .legal__toc ol { grid-template-columns: minmax(0, 1fr); }
    .nf__links ul { grid-template-columns: minmax(0, 1fr); }
    .nf__act .btn, .legal__actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media print {
    .legal-hero__layers, .legal__toc, .nf__code, .crumbs, .legal__actions { display: none !important; }
    .legal { background: #fff; border-radius: 0; }
    .legal__grid { grid-template-columns: minmax(0, 1fr); }
    .legal__block { page-break-inside: avoid; }
    .legal__block p, .legal__list li { color: #000; }
}

/* ------------------------------------------------------------
   27. ACCOUNT SURFACE
   Sign in, create account, verify and reset all share one shell:
   a brand panel explaining the five access levels on the left,
   and one card on the right. The card holds the flip switch that
   swaps sign-in for registration without leaving the page.
   ------------------------------------------------------------ */

/* --- 27a. Shell ------------------------------------------------- */
.auth {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: start;
    gap: clamp(1.5rem, 3.6vw, 2.8rem);
    min-height: 100svh;
    padding: clamp(1.1rem, 2.4vw, 2rem) var(--pad) clamp(1.8rem, 4vw, 3rem);
}

.auth__glow {
    position: absolute;
    inset: -18% -12% auto -12%;
    height: 74vh;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(44% 58% at 20% 28%, rgba(214, 251, 75, .11), transparent 70%),
        radial-gradient(38% 54% at 78% 16%, rgba(63, 216, 196, .09), transparent 72%),
        radial-gradient(48% 58% at 54% 0%, rgba(255, 178, 75, .07), transparent 75%);
}

.auth__bar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    max-width: var(--wide);
    margin-inline: auto;
    padding-bottom: clamp(.9rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--line-ink-2);
}

.auth__back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-dim);
    white-space: nowrap;
    transition: color .25s var(--ease);
}
.auth__back .ic {
    width: .95rem;
    height: .95rem;
    transform: rotate(180deg);
    transition: transform .3s var(--ease);
}
.auth__back:hover { color: var(--lime); }
.auth__back:hover .ic { transform: rotate(180deg) translateX(3px); }

.auth__wrap {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: clamp(1.8rem, 4.5vw, 4.5rem);
    align-items: start;
    width: 100%;
    max-width: var(--wide);
    margin-inline: auto;
    padding-top: clamp(1rem, 3vw, 2.6rem);
}

.auth__intro {
    position: sticky;
    top: clamp(1rem, 3vw, 2.2rem);
    min-width: 0;
}
.auth__intro-h {
    font-size: clamp(1.7rem, 1.05rem + 2.3vw, 2.85rem);
    font-weight: 500;
    letter-spacing: -.028em;
    max-width: 20ch;
    margin-bottom: .9rem;
}
.auth__intro-lede {
    font-size: var(--t-lede);
    color: var(--on-ink-dim);
    max-width: 46ch;
    margin-bottom: 1.7rem;
}

.auth__roles {
    margin-bottom: 1.8rem;
    border-top: 1px solid var(--line-ink-2);
}
.auth__roles li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: baseline;
    padding: .62rem 0;
    border-bottom: 1px solid var(--line-ink-2);
}
.auth__roles li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--lime);
    transform: translateY(-1px);
}
.auth__roles-name { font-size: .85rem; font-weight: 600; }
.auth__roles-scope {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    text-align: right;
}

.auth__points { display: grid; gap: .85rem; }
.auth__points li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
}
.auth__points .ic {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: .18em;
    color: var(--lime);
}
.auth__points span {
    display: block;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--on-ink-dim);
}
.auth__points strong {
    display: block;
    font-size: .84rem;
    font-weight: 600;
    color: var(--on-ink);
}

.auth__panel { min-width: 0; }

.auth__foot {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    width: 100%;
    max-width: var(--wide);
    margin-inline: auto;
    font-size: .72rem;
    color: var(--on-ink-faint);
}
.auth__foot .ic { width: .9rem; height: .9rem; }
.auth__foot a {
    color: var(--on-ink-dim);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.auth__foot a:hover { color: var(--lime); }

/* --- 27b. Card -------------------------------------------------- */
.card {
    position: relative;
    padding: clamp(1.35rem, 3.2vw, 2.45rem);
    border: 1px solid var(--line-ink);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(30, 33, 41, .74), rgba(15, 17, 22, .95));
    box-shadow: 0 34px 70px -46px rgba(0, 0, 0, .95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.auth-card { display: grid; gap: 1.2rem; }
.auth-card--narrow {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
}
.auth-card > .alert { margin-bottom: 0; }

.auth-card__head { display: grid; gap: .65rem; }
.auth-card__kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lime);
    margin: 0;
}
.auth-card__kicker .ic { width: .85rem; height: .85rem; }
.auth-card__h1 {
    font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem);
    font-weight: 500;
    letter-spacing: -.025em;
    margin: 0;
}
.auth-card__sub {
    font-size: var(--t-small);
    color: var(--on-ink-dim);
    max-width: 54ch;
    margin: 0;
}
.auth-card__note {
    font-size: .78rem;
    color: var(--on-ink-dim);
    margin: 0;
}
.auth-card__note a,
.auth-card__foot a,
.check--consent + .field__note a {
    color: var(--lime);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.auth-card__act {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: .2rem;
}
.auth-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--line-ink-2);
    font-size: .75rem;
    color: var(--on-ink-faint);
    margin: 0;
}
.auth-card__foot .ic { width: .95rem; height: .95rem; flex: none; }

.bigmark {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(214, 251, 75, .3);
    border-radius: var(--r-md);
    background: rgba(214, 251, 75, .1);
    color: var(--lime);
}
.bigmark .ic { width: 1.6rem; height: 1.6rem; }
.bigmark--mail {
    border-color: rgba(63, 216, 196, .3);
    background: rgba(63, 216, 196, .1);
    color: var(--teal);
}
.bigmark--bad {
    border-color: rgba(255, 122, 107, .3);
    background: rgba(255, 122, 107, .1);
    color: var(--bad);
}

.auth-steps { display: grid; gap: .55rem; }
.auth-steps li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .75rem;
    align-items: baseline;
    padding: .62rem .85rem;
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-sm);
    background: rgba(var(--tint-rgb), .03);
    font-size: .8rem;
    color: var(--on-ink-dim);
}
.auth-steps li span {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    color: var(--lime);
}
.auth-steps li strong { color: var(--on-ink); font-weight: 600; }

/* --- 27c. Flip switch ------------------------------------------- */
.flip { position: relative; }

.flip__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.flip__switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .25rem;
    padding: .28rem;
    margin-bottom: 1.4rem;
    border: 1px solid var(--line-ink);
    border-radius: var(--r-pill);
    background: rgba(10, 11, 15, .6);
    transition: box-shadow .25s var(--ease);
}
.flip__radio:focus-visible ~ .flip__switch {
    outline: 2px solid var(--lime);
    outline-offset: 3px;
}

.flip__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .62rem .8rem;
    border-radius: var(--r-pill);
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-ink-dim);
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: background .3s var(--ease), color .3s var(--ease);
}
.flip__tab .ic { width: .9rem; height: .9rem; }
.flip__tab:hover { color: var(--on-ink); }

#flipLogin:checked ~ .flip__switch .flip__tab[for="flipLogin"],
#flipRegister:checked ~ .flip__switch .flip__tab[for="flipRegister"] {
    background: var(--lime);
    color: var(--ink);
}

.flip__inner { position: relative; }

/* A faint watermark arrow, so the panel hints at a second face. */
.flip__hint {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 0;
    transform: translateY(-50%);
    color: var(--lime);
    opacity: .07;
    pointer-events: none;
}
.flip__hint .ic { width: 6.5rem; height: 6.5rem; }

/* Only the checked radio's face is in the document flow, so the
   card grows and shrinks to fit whichever form is in front. */
.flip__face {
    position: relative;
    z-index: 1;
    display: none;
}
#flipLogin:checked ~ .flip__inner .flip__face--front,
#flipRegister:checked ~ .flip__inner .flip__face--back { display: block; }

@keyframes flip-in-right {
    from { opacity: 0; transform: perspective(1400px) rotateY(-15deg) translateX(24px); }
    to   { opacity: 1; transform: perspective(1400px) rotateY(0) translateX(0); }
}
@keyframes flip-in-left {
    from { opacity: 0; transform: perspective(1400px) rotateY(15deg) translateX(-24px); }
    to   { opacity: 1; transform: perspective(1400px) rotateY(0) translateX(0); }
}
.flip__inner.is-turn[data-turn="in"] .flip__face--back {
    animation: flip-in-right .68s var(--ease-out) both;
}
.flip__inner.is-turn[data-turn="out"] .flip__face--front {
    animation: flip-in-left .68s var(--ease-out) both;
}

.flip__title {
    font-size: clamp(1.15rem, 1.05rem + .5vw, 1.45rem);
    font-weight: 500;
    letter-spacing: -.02em;
    margin: 0 0 .35rem;
}
.flip__lede {
    font-size: var(--t-small);
    color: var(--on-ink-dim);
    max-width: 46ch;
    margin: 0 0 1.25rem;
}

/* --- 27d. Forms, passwords and links ---------------------------- */
.auth-form { display: grid; gap: 1rem; }
.auth-form__split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.auth-form__row {
    display: flex;
    justify-content: flex-end;
    margin: .1rem 0;
}
.auth-form__submit {
    width: 100%;
    justify-content: center;
    margin-top: .3rem;
}
.auth-form__alt {
    font-size: .78rem;
    color: var(--on-ink-dim);
    text-align: center;
    margin: 0;
}

.auth-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--lime);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(214, 251, 75, .34);
    text-underline-offset: 3px;
    transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.auth-link .ic { width: .85rem; height: .85rem; }
.auth-link:hover {
    color: #E2FF6E;
    text-decoration-color: currentColor;
}

/* The school group is a role-dependent block; it is hidden by the
   `hidden` attribute from auth.js, so it must not be display:grid
   unless it is actually visible. */
.school-group { display: grid; gap: 1rem; }
.school-group[hidden] { display: none; }

.field__note {
    font-size: .72rem;
    line-height: 1.5;
    color: var(--on-ink-faint);
    margin: 0;
}

/* --- 27e. School picker (combobox) ------------------------------ */
.combo { position: relative; display: block; }

.combo__list {
    position: absolute;
    z-index: 40;
    top: calc(100% + .35rem);
    left: 0;
    right: 0;
    max-height: 17rem;
    overflow-y: auto;
    margin: 0;
    padding: .35rem;
    list-style: none;
    background: var(--ink-2);
    border: 1px solid var(--line-ink);
    border-radius: 12px;
    box-shadow: 0 24px 50px -22px rgba(0, 0, 0, .85);
}
.combo__list[hidden] { display: none; }

.combo__opt {
    display: grid;
    gap: .15rem;
    padding: .55rem .7rem;
    border-radius: 9px;
    cursor: pointer;
    transition: background .18s var(--ease), color .18s var(--ease);
}
.combo__opt + .combo__opt { margin-top: .12rem; }
.combo__opt:hover,
.combo__opt.is-active { background: rgba(214, 251, 75, .12); }

.combo__opt-name {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--on-ink);
}
.combo__opt.is-active .combo__opt-name { color: var(--lime); }

.combo__opt-meta {
    font-family: var(--f-mono);
    font-size: .63rem;
    letter-spacing: .02em;
    line-height: 1.35;
    color: var(--on-ink-faint);
}

.combo__opt--manual {
    margin-top: .35rem;
    padding-top: .65rem;
    border-top: 1px dashed var(--line-ink);
}
.combo__opt--manual .combo__opt-name { color: var(--lime); }

.combo__opt.is-empty {
    cursor: default;
    font-size: .75rem;
    color: var(--on-ink-faint);
    text-align: center;
}
.combo__opt.is-empty:hover { background: transparent; }

/* Manual-entry detail block, revealed only when the school is not
   on the register (or while a submission carries field errors). */
.school-detail { display: grid; gap: 1rem; }
.school-detail[hidden] { display: none; }

.alert__act { margin: .6rem 0 0; }

.pw { position: relative; display: block; }
.field .pw input { padding-right: 2.9rem; }

.pw__toggle {
    position: absolute;
    top: 50%;
    right: .4rem;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    transform: translateY(-50%);
    border-radius: var(--r-sm);
    color: var(--on-ink-faint);
    transition: color .25s var(--ease), background .25s var(--ease);
}
.pw__toggle .ic { width: 1.05rem; height: 1.05rem; }
.pw__toggle:hover { color: var(--on-ink); background: rgba(var(--tint-rgb), .07); }
.pw__toggle.is-on { color: var(--lime); }

.pw__meter {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    align-items: center;
    gap: .35rem;
    margin: .15rem 0 0;
}
.pw__meter[hidden] { display: none; }
.pw__meter i {
    height: 4px;
    border-radius: var(--r-pill);
    background: rgba(var(--tint-rgb), .11);
    transition: background .3s var(--ease);
}
.pw__meter i.is-on { background: var(--lime); }
.pw__meter[data-level="1"] i.is-on { background: var(--bad); }
.pw__meter[data-level="2"] i.is-on { background: var(--amber); }
.pw__meter[data-level="3"] i.is-on { background: var(--lime-deep); }
.pw__meter span {
    margin-left: .35rem;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: .06em;
    color: var(--on-ink-faint);
    white-space: nowrap;
}

/* Development-only panel carrying the link that would be emailed. */
.devlink {
    display: grid;
    gap: .5rem;
    justify-items: start;
    padding: 1rem 1.1rem;
    border: 1px dashed rgba(255, 178, 75, .45);
    border-radius: var(--r-md);
    background: rgba(255, 178, 75, .06);
    margin-bottom: 0;
}
.devlink__tag {
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--amber);
    border-radius: var(--r-pill);
    padding: .22rem .6rem;
}
.devlink strong { font-size: .84rem; }
.devlink p { font-size: .76rem; color: var(--on-ink-dim); margin: 0; }
.devlink .devlink__hint { font-size: .72rem; color: var(--on-ink-faint); }
.devlink__url {
    font-family: var(--f-mono);
    font-size: .72rem;
    color: var(--teal);
    word-break: break-all;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.devlink__copy {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-ink);
    border: 1px solid var(--line-ink);
    border-radius: var(--r-pill);
    padding: .35rem .8rem;
    transition: background .25s var(--ease), border-color .25s var(--ease);
}
.devlink__copy:hover {
    background: rgba(var(--tint-rgb), .08);
    border-color: rgba(var(--tint-rgb), .3);
}

/* --- 27e. Account surface responsive ---------------------------- */
@media (max-width: 1024px) {
    .auth__wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.2rem;
    }
    .auth__intro { position: static; }
    .auth__intro-h { max-width: 26ch; }
    .auth__intro-lede { max-width: 62ch; }
}

@media (max-width: 720px) {
    .auth { padding-inline: 1.1rem; }
    .auth__back span { display: none; }
    .auth__roles li { grid-template-columns: auto minmax(0, 1fr); }
    .auth__roles-name { align-self: baseline; }
    .auth__roles-scope {
        grid-column: 2;
        text-align: left;
        margin-top: -.35rem;
    }
    .auth-form__split { grid-template-columns: minmax(0, 1fr); }
    .card { padding: 1.25rem; }
    .auth-card__act .btn,
    .auth-card__foot { flex: 1 1 auto; }
    .auth-card__act .btn { justify-content: center; }
    .flip__tab { padding: .55rem .5rem; letter-spacing: .05em; }
    .flip__hint { display: none; }
}

/* ------------------------------------------------------------
   28. DASHBOARD CONSOLE
   One shell for all five access levels. Only the sidebar modules
   and the scoped data change; the frame does not. `main.dash` is
   scoped to the element so the landing page's reporting mock
   (a div.dash) keeps its own rules.
   ------------------------------------------------------------ */

main.dash {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 228px minmax(0, 1fr);
    gap: 1.1rem;
    align-items: stretch;
    min-height: 100svh;
    padding: 1rem;
    background:
        radial-gradient(1200px 520px at -10% -5%, rgba(214, 251, 75, .08), transparent 48%),
        linear-gradient(180deg, #EEF1F5 0%, #F5F7FB 100%);
}

/* --- 28a. Sidebar ----------------------------------------------- */
.dash__side {
    position: sticky;
    top: 1rem;
    z-index: 40;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 1rem;
    height: calc(100svh - 2rem);
    padding: 1rem .85rem 1rem 1rem;
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 1.65rem;
    background:
        radial-gradient(72% 72% at 14% 0%, rgba(214, 251, 75, .08), transparent 62%),
        linear-gradient(180deg, #0D0F13 0%, #12161D 100%);
    box-shadow: 0 24px 60px -32px rgba(15, 17, 22, .9);
    overflow: hidden;
}

.dash__side-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
}
.brand--dash .brand__logo { height: 28px; }

.dash__close {
    display: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--line-ink);
    border-radius: var(--r-sm);
    color: var(--on-ink-dim);
    transition: color .25s var(--ease), border-color .25s var(--ease);
}
.dash__close .ic { width: .95rem; height: .95rem; transform: rotate(180deg); }
.dash__close:hover { color: var(--lime); border-color: rgba(214, 251, 75, .4); }

.dash__scope {
    display: grid;
    gap: .3rem;
    padding: .85rem .95rem;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .035);
}
.dash__scope-role {
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lime);
}
.dash__scope-where {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--on-ink-dim);
}
.dash__scope-where .ic {
    width: .85rem;
    height: .85rem;
    flex: none;
    color: var(--on-ink-faint);
}

.dash__nav {
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-right: -.5rem;
    padding-right: .5rem;
}
.dash__nav-title {
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    margin: 0 0 .55rem .15rem;
}
.dash__nav ul { display: grid; gap: .16rem; }

.dash__link {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .7rem;
    align-items: center;
    padding: .72rem .82rem;
    border-radius: 1rem;
    color: var(--on-ink-dim);
    transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.dash__link .ic {
    width: 1.05rem;
    height: 1.05rem;
    flex: none;
    color: var(--on-ink-faint);
    transition: color .25s var(--ease);
}
.dash__link:hover { background: rgba(255, 255, 255, .055); color: var(--on-ink); transform: translateX(2px); }
.dash__link:hover .ic { color: var(--on-ink); }

.dash__link-txt { display: grid; gap: .1rem; min-width: 0; }
.dash__link-txt b { font-size: .82rem; font-weight: 600; letter-spacing: -.01em; }
.dash__link-txt em {
    font-size: .68rem;
    font-style: normal;
    color: var(--on-ink-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash__link-tag {
    font-family: var(--f-mono);
    font-size: .56rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-pill);
    padding: .16rem .45rem;
}
.dash__link.is-soon .dash__link-txt b { color: var(--on-ink-dim); }
.dash__link.is-active { background: #6EDC3B; color: #08100A; box-shadow: 0 12px 28px -18px rgba(110, 220, 59, .85); }
.dash__link.is-active .ic,
.dash__link.is-active .dash__link-txt b,
.dash__link.is-active .dash__link-txt em { color: #08100A; }
.dash__link.is-active::before { content: none; }

.dash__side-foot {
    display: grid;
    gap: .8rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.dash__me {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .65rem;
    align-items: center;
}
.dash__avatar {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .07);
    color: #F5F7FA;
    font-family: var(--f-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.dash__me-txt { display: grid; min-width: 0; }
.dash__me-txt b,
.dash__me-txt em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash__me-txt b { font-size: .8rem; font-weight: 600; }
.dash__me-txt em { font-size: .68rem; font-style: normal; color: var(--on-ink-faint); }
.dash__out .btn { width: 100%; justify-content: center; }
.dash__out .btn .ic { transform: rotate(180deg); }

/* --- 28b. Top bar and scroll area ------------------------------- */
.dash__stage {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    min-height: calc(100svh - 2rem);
    border: 1px solid rgba(15, 17, 22, .07);
    border-radius: 1.85rem;
    background: #FFFFFF;
    box-shadow: 0 26px 60px -38px rgba(15, 17, 22, .28);
    overflow: hidden;
}

.dash__top {
    position: sticky;
    top: 1rem;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem clamp(1.1rem, 3vw, 2rem);
    border-bottom: 1px solid var(--line-ink-2);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dash__burger {
    display: none;
    place-content: center;
    row-gap: 4px;
    flex: none;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--line-ink);
    border-radius: var(--r-sm);
}
.dash__burger span {
    display: block;
    width: 15px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--on-ink);
}

.dash__crumb { display: grid; gap: .1rem; min-width: 0; margin-right: auto; }
.dash__crumb-eyebrow {
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    margin: 0;
}
.dash__crumb-h1 {
    font-family: var(--f-body);
    font-size: clamp(1rem, .95rem + .3vw, 1.18rem);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash__top-act { display: flex; align-items: center; gap: .5rem; flex: none; }
.dash__pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .82rem;
    border: 1px solid var(--line-ink);
    border-radius: var(--r-pill);
    font-family: var(--f-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--on-ink-dim);
    white-space: nowrap;
}
.dash__pill .ic { width: .85rem; height: .85rem; color: var(--lime); }
.dash__pill--link {
    color: var(--on-ink);
    transition: background .25s var(--ease), border-color .25s var(--ease);
}
.dash__pill--link .ic {
    color: var(--on-ink-dim);
    transition: transform .3s var(--ease), color .25s var(--ease);
}
.dash__pill--link:hover {
    background: rgba(var(--tint-rgb), .07);
    border-color: rgba(var(--tint-rgb), .28);
}
.dash__pill--link:hover .ic { transform: translateX(3px); color: var(--lime); }

.dash__main { min-width: 0; }
.dash__inner {
    display: grid;
    gap: clamp(1.2rem, 2.4vw, 1.9rem);
    width: 100%;
    max-width: 1400px;
    margin-inline: auto;
    padding: clamp(1.2rem, 3vw, 2.6rem) clamp(1rem, 3vw, 2.4rem) clamp(3rem, 6vw, 5rem);
}
.dash__inner > .alert { margin-bottom: 0; }

.dash__scrim { display: none; }

/* --- 28c. Module heading and hero ------------------------------- */
.dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}
.dash-head__txt { min-width: 0; }
.dash-head__txt h2 {
    font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
    font-weight: 500;
    letter-spacing: -.028em;
    margin: 0 0 .35rem;
}
.dash-head__txt p {
    font-size: var(--t-small);
    color: var(--on-ink-dim);
    max-width: 68ch;
    margin: 0;
}
.dash-head__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.dash-head__chips li {
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-dim);
    border: 1px solid var(--line-ink);
    border-radius: var(--r-pill);
    padding: .38rem .75rem;
    white-space: nowrap;
}

.dash-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(1.2rem, 3vw, 2.6rem);
    align-items: center;
    padding: clamp(1.3rem, 3vw, 2.2rem);
    border: 1px solid var(--line-ink);
    border-radius: var(--r-lg);
    background:
        radial-gradient(58% 120% at 6% 0%, rgba(214, 251, 75, .1), transparent 62%),
        linear-gradient(180deg, rgba(30, 33, 41, .66), rgba(15, 17, 22, .92));
    overflow: hidden;
}
.dash-hero__txt { min-width: 0; }
.dash-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lime);
    margin: 0 0 .8rem;
}
.dash-eyebrow .ic { width: .85rem; height: .85rem; }
.dash-hero__h {
    font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.6rem);
    font-weight: 500;
    letter-spacing: -.028em;
    margin: 0 0 .6rem;
}
.dash-hero__lede {
    font-size: var(--t-small);
    color: var(--on-ink-dim);
    max-width: 54ch;
    margin: 0;
}
.dash-hero__facts { display: grid; gap: .55rem; }
.dash-hero__facts li {
    display: grid;
    gap: .12rem;
    padding: .65rem .8rem;
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-sm);
    background: rgba(var(--tint-rgb), .03);
}
.dash-hero__facts span {
    font-family: var(--f-mono);
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.dash-hero__facts b { font-size: .82rem; font-weight: 600; }

/* --- 28d. Stat cards -------------------------------------------- */
.dash-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: .9rem;
}
.dash-card {
    position: relative;
    display: grid;
    gap: .3rem;
    align-content: start;
    padding: 1.05rem 1.15rem 1.15rem;
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(30, 33, 41, .5), rgba(15, 17, 22, .74));
    overflow: hidden;
}
.dash-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--lime);
    opacity: .55;
}
.dash-card--teal::before { background: var(--teal); }
.dash-card--amber::before { background: var(--amber); }
.dash-card--rust::before { background: var(--rust); }
.dash-card__ic {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: .3rem;
    border-radius: var(--r-sm);
    background: rgba(var(--tint-rgb), .05);
    color: var(--lime);
}
.dash-card__ic .ic { width: 1.05rem; height: 1.05rem; }
.dash-card--teal .dash-card__ic { color: var(--teal); }
.dash-card--amber .dash-card__ic { color: var(--amber); }
.dash-card--rust .dash-card__ic { color: var(--rust); }
.dash-card__label {
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.dash-card__value {
    font-family: var(--f-display);
    font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.15rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.03em;
}
.dash-card__hint { font-size: .72rem; color: var(--on-ink-dim); }

/* --- 28e. Panels ------------------------------------------------ */
.dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: clamp(.9rem, 1.8vw, 1.4rem);
    align-items: start;
}
.dash-panel {
    display: grid;
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(30, 33, 41, .44), rgba(15, 17, 22, .7));
    overflow: hidden;
}
.dash-panel__head {
    display: grid;
    gap: .3rem;
    padding: 1.1rem 1.2rem .9rem;
    border-bottom: 1px solid var(--line-ink-2);
}
.dash-panel__head h3 {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -.02em;
    margin: 0;
}
.dash-panel__head p { font-size: .72rem; color: var(--on-ink-faint); margin: 0; }
.dash-panel__body { min-width: 0; padding: 1rem 1.2rem 1.2rem; }
.dash-panel__foot {
    padding: .85rem 1.2rem;
    border-top: 1px solid var(--line-ink-2);
}

.dash-lead { display: block; font-size: .82rem; font-weight: 600; color: var(--on-ink); }
.dash-sub {
    display: block;
    margin-top: .1rem;
    font-family: var(--f-mono);
    font-size: .66rem;
    color: var(--on-ink-faint);
}
.dash-empty { font-size: .8rem; color: var(--on-ink-faint); margin: 0; }
.dash-note {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin: .9rem 0 0;
    font-size: .72rem;
    line-height: 1.55;
    color: var(--on-ink-faint);
}
.dash-note .ic {
    width: .9rem;
    height: .9rem;
    flex: none;
    margin-top: .22em;
    color: var(--lime);
}
.dash-note--block {
    max-width: 92ch;
    margin-top: 0;
    padding: .95rem 1.1rem;
    border: 1px dashed var(--line-ink);
    border-radius: var(--r-md);
    background: rgba(var(--tint-rgb), .025);
}

/* --- 28f. Tables (dark surface) --------------------------------- */
.dash-tablewrap {
    overflow-x: auto;
    margin: 0 -.3rem;
    padding: 0 .3rem;
}
.dash-tbl th,
.dash-tbl td { padding: .68rem .55rem; vertical-align: middle; }
.dash-tbl td { font-size: .8rem; color: var(--on-ink-dim); }
.dash-tbl thead th { color: var(--on-ink-faint); border-bottom-color: var(--line-ink); }
.dash-tbl tbody tr { border-bottom-color: var(--line-ink-2); }
.dash-tbl tbody tr:hover { background: rgba(var(--tint-rgb), .03); }

/* --- 28f-2. Listing toolbar and pager ---------------------------- */
.dash-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .7rem;
    margin: 0 0 1.1rem;
}
.dash-tools__field { flex: 1 1 18rem; min-width: 0; }
.dash-tools .auth-link { padding-bottom: .72rem; }

.dash-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
}
.dash-pager__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .74rem;
    font-weight: 600;
    color: var(--lime);
    text-decoration: none;
    transition: color .22s var(--ease);
}
.dash-pager__link .ic { width: .85rem; height: .85rem; }
.dash-pager__link:hover { color: #E2FF6E; }
.dash-pager__link.is-off { color: var(--on-ink-faint); opacity: .5; }
.dash-pager__link--prev .ic { transform: rotate(180deg); }
.dash-pager__pos {
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .04em;
    color: var(--on-ink-faint);
}

.dash-badge {
    display: inline-block;
    padding: .24rem .58rem;
    border-radius: var(--r-pill);
    background: rgba(var(--tint-rgb), .07);
    color: var(--on-ink-dim);
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.dash-badge--ok { background: rgba(123, 209, 106, .16); color: var(--ok); }
.dash-badge--warn { background: rgba(255, 195, 92, .16); color: var(--warn); }
.dash-badge--bad { background: rgba(255, 122, 107, .16); color: var(--bad); }
.dash-badge--lime { background: rgba(214, 251, 75, .16); color: var(--lime); }

/* --- 28g. Breakdown, school record and permissions --------------- */
.dash-breakdown { display: grid; gap: .72rem; }
.dash-breakdown li {
    display: grid;
    grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr) 2.4rem;
    gap: .7rem;
    align-items: center;
}
.dash-breakdown__name {
    font-size: .76rem;
    color: var(--on-ink-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-breakdown__track {
    height: 6px;
    border-radius: var(--r-pill);
    background: rgba(var(--tint-rgb), .08);
    overflow: hidden;
}
.dash-breakdown__track i {
    display: block;
    height: 100%;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, var(--lime-deep), var(--lime));
}
.dash-breakdown__n {
    font-family: var(--f-mono);
    font-size: .74rem;
    text-align: right;
    color: var(--on-ink);
}

.dash-schoolcard__top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding-bottom: .95rem;
    margin-bottom: .95rem;
    border-bottom: 1px solid var(--line-ink-2);
}
.dash-schoolcard__mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(214, 251, 75, .28);
    border-radius: var(--r-sm);
    background: rgba(214, 251, 75, .12);
    color: var(--lime);
    font-family: var(--f-mono);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
}
.dash-schoolcard__top div strong { display: block; font-size: .88rem; font-weight: 600; }
.dash-schoolcard__top div span { display: block; font-size: .72rem; color: var(--on-ink-faint); }

.dash-deflist {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .55rem .9rem;
}
.dash-deflist dt {
    font-family: var(--f-mono);
    font-size: .58rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.dash-deflist dd {
    margin: .12rem 0 0;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.dash-access { display: grid; gap: .1rem; }
.dash-access li {
    display: grid;
    grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
    gap: .7rem;
    align-items: baseline;
    padding: .42rem 0;
    border-bottom: 1px solid var(--line-ink-2);
}
.dash-access li:last-child { border-bottom: 0; }
.dash-access__key {
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--lime);
}
.dash-access__verbs { display: flex; flex-wrap: wrap; gap: .3rem; }
.dash-access__verbs em {
    font-style: normal;
    font-size: .68rem;
    color: var(--on-ink-dim);
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-pill);
    padding: .2rem .55rem;
}

/* --- 28h. Module tiles ------------------------------------------ */
.dash-launch { display: grid; gap: 1.1rem; }
.dash-launch__head h3 {
    font-size: 1.15rem;
    font-weight: 500;
    letter-spacing: -.02em;
    margin: 0 0 .35rem;
}
.dash-launch__head p {
    font-size: .78rem;
    color: var(--on-ink-dim);
    max-width: 78ch;
    margin: 0;
}
.dash-launch__head em { font-style: normal; color: var(--lime); }
.dash-launch__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
    gap: .7rem;
}

.dash-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    padding: .9rem 1rem;
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-md);
    background: rgba(var(--tint-rgb), .025);
    transition: border-color .25s var(--ease), background .25s var(--ease), transform .3s var(--ease);
}
.dash-tile:hover {
    border-color: rgba(214, 251, 75, .34);
    background: rgba(214, 251, 75, .05);
    transform: translateY(-2px);
}
.dash-tile__ic {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: var(--r-sm);
    background: rgba(var(--tint-rgb), .06);
    color: var(--lime);
}
.dash-tile__ic .ic { width: 1.1rem; height: 1.1rem; }
.dash-tile__txt { display: grid; gap: .12rem; min-width: 0; }
.dash-tile__txt b { font-size: .82rem; font-weight: 600; }
.dash-tile__txt em {
    font-size: .68rem;
    font-style: normal;
    color: var(--on-ink-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dash-tile__go {
    width: .95rem;
    height: .95rem;
    color: var(--on-ink-faint);
    transition: transform .3s var(--ease), color .25s var(--ease);
}
.dash-tile:hover .dash-tile__go { transform: translateX(3px); color: var(--lime); }
.dash-tile__tag {
    font-family: var(--f-mono);
    font-size: .56rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-pill);
    padding: .2rem .5rem;
}
.dash-tile.is-current { border-color: rgba(214, 251, 75, .34); }
.dash-tile.is-soon .dash-tile__ic { color: var(--on-ink-dim); background: rgba(var(--tint-rgb), .04); }
.dash-tile.is-soon:hover {
    border-color: var(--line-ink);
    background: rgba(var(--tint-rgb), .04);
    transform: none;
}

/* --- 28i. Role catalogue and "next release" --------------------- */
.dash-roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: clamp(.9rem, 1.8vw, 1.3rem);
}
.dash-rolecard {
    display: grid;
    gap: .85rem;
    align-content: start;
    padding: 1.15rem 1.25rem 1.05rem;
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(30, 33, 41, .42), rgba(15, 17, 22, .68));
}
.dash-rolecard.is-self {
    border-color: rgba(214, 251, 75, .32);
    box-shadow: inset 0 0 0 1px rgba(214, 251, 75, .1);
}
.dash-rolecard__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
}
.dash-rolecard__head h3 {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -.02em;
    margin: 0;
}
.dash-rolecard__head p {
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    margin: .32rem 0 0;
}
.dash-rolecard__n {
    font-family: var(--f-display);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    text-align: right;
    color: var(--on-ink);
}
.dash-rolecard__n em {
    display: block;
    margin-top: .25rem;
    font-family: var(--f-mono);
    font-size: .56rem;
    font-style: normal;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.dash-rolecard__blurb { font-size: .78rem; line-height: 1.55; color: var(--on-ink-dim); margin: 0; }
.dash-rolecard__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line-ink-2);
}
.dash-rolecard__foot > span:first-child {
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}

.dash-soon {
    display: grid;
    justify-items: center;
    gap: .5rem;
    padding: clamp(2rem, 6vw, 4.5rem) clamp(1.2rem, 4vw, 3rem);
    border: 1px dashed var(--line-ink);
    border-radius: var(--r-xl);
    background: radial-gradient(58% 100% at 50% 0%, rgba(214, 251, 75, .06), transparent 68%);
    text-align: center;
}
.dash-soon__mark {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin-bottom: .5rem;
    border: 1px solid rgba(214, 251, 75, .28);
    border-radius: var(--r-lg);
    background: rgba(214, 251, 75, .08);
    color: var(--lime);
}
.dash-soon__mark .ic { width: 1.8rem; height: 1.8rem; }
.dash-soon h2 {
    font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
    font-weight: 500;
    letter-spacing: -.028em;
    margin: 0;
}
.dash-soon__lede {
    font-size: var(--t-small);
    color: var(--on-ink-dim);
    max-width: 68ch;
    margin: 0;
}
.dash-soon__ready { width: 100%; margin-top: 1.8rem; text-align: left; }
.dash-soon__ready > p {
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    margin: 0 0 .9rem;
}
.dash-soon__ready-empty { margin-top: 1.2rem; }

/* --- 28i-2. Management lists & forms ---------------------------- */
.dash-recs { display: grid; gap: .7rem; list-style: none; margin: 0; padding: 0; }
.dash-rec {
    display: grid;
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(30, 33, 41, .42), rgba(15, 17, 22, .62));
    overflow: hidden;
}
.dash-rec.is-focus { border-color: rgba(214, 251, 75, .34); }
.dash-rec__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.1rem;
    padding: .85rem 1rem;
}
.dash-rec__id { display: grid; gap: .12rem; min-width: 0; flex: 1 1 14rem; }
.dash-rec__id b { font-size: .86rem; font-weight: 600; color: var(--on-ink); }
.dash-rec__id em {
    font-style: normal;
    font-family: var(--f-mono);
    font-size: .64rem;
    letter-spacing: .04em;
    color: var(--on-ink-faint);
}
.dash-rec__badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.dash-rec__facts { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.dash-rec__facts span {
    font-family: var(--f-mono);
    font-size: .64rem;
    color: var(--on-ink-faint);
}
.dash-rec > .dash-more { border: 0; border-top: 1px solid var(--line-ink-2); border-radius: 0; background: rgba(var(--tint-rgb), .018); }

.dash-focus {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.4rem;
    padding: clamp(1rem, 2.4vw, 1.5rem);
    border: 1px solid rgba(214, 251, 75, .3);
    border-radius: var(--r-lg);
    background: radial-gradient(60% 120% at 4% 0%, rgba(214, 251, 75, .07), transparent 60%),
        linear-gradient(180deg, rgba(30, 33, 41, .6), rgba(15, 17, 22, .86));
}
.dash-focus__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.dash-focus__head h3 { font-size: 1.02rem; font-weight: 500; letter-spacing: -.02em; margin: 0; }

/* Disclosure used throughout the console */
.dash-more { border: 1px solid var(--line-ink-2); border-radius: var(--r-md); background: rgba(var(--tint-rgb), .02); }
.dash-more > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    padding: .7rem .95rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--f-mono);
    font-size: .64rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-dim);
}
.dash-more > summary::-webkit-details-marker { display: none; }
.dash-more > summary:hover { color: var(--lime); }
.dash-more > summary .ic { width: .82rem; height: .82rem; transform: rotate(90deg); transition: transform .3s var(--ease); }
.dash-more[open] > summary .ic { transform: rotate(-90deg); }
.dash-more__body { padding: .35rem .95rem 1rem; border-top: 1px solid var(--line-ink-2); }

/* Key/value mini list */
.dash-mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .1rem .9rem; margin: 0; }
.dash-mini > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; padding: .42rem 0; border-bottom: 1px solid var(--line-ink-2); }
.dash-mini dt {
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    flex: 0 0 42%;
}
.dash-mini dd { margin: 0; font-size: .8rem; font-weight: 500; color: var(--on-ink); flex: 1 1 auto; min-width: 0; word-break: break-word; }

/* Management forms */
.dash-form { display: grid; gap: .9rem; }
.dash-form__stack { display: grid; gap: .8rem; margin-top: .9rem; }
.dash-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.dash-form__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dash-form--danger { padding: .8rem .9rem; border: 1px dashed rgba(255, 122, 107, .38); border-radius: var(--r-md); background: rgba(255, 122, 107, .05); }
.dash-form--danger .dash-note { margin-top: 0; }
.dash-field { display: grid; gap: .38rem; min-width: 0; }
.dash-field > span {
    font-family: var(--f-mono);
    font-size: .605rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-dim);
}
.dash-field--wide { grid-column: 1 / -1; }
.dash-field input,
.dash-field select,
.dash-field textarea {
    width: 100%;
    background: rgba(var(--tint-rgb), .045);
    border: 1px solid var(--line-ink);
    border-radius: var(--r-sm);
    padding: .66rem .8rem;
    font-family: var(--f-body);
    font-size: .845rem;
    font-weight: 500;
    color: var(--on-ink);
    transition: border-color .25s var(--ease), background .25s var(--ease);
    appearance: none;
}
.dash-field textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.dash-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A8AEBE' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
    padding-right: 2.2rem;
}
.dash-field select option { background: var(--ink-2); color: var(--on-ink); }
.dash-field input::placeholder,
.dash-field textarea::placeholder { color: var(--on-ink-faint); }
.dash-field input:focus,
.dash-field select:focus,
.dash-field textarea:focus { outline: none; border-color: rgba(214, 251, 75, .55); background: rgba(var(--tint-rgb), .07); }
.dash-check { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--on-ink-dim); }
.dash-check input { width: 1rem; height: 1rem; accent-color: var(--lime); }

/* Compact inline form (table row actions) */
.dash-inline { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0; }
.dash-inline select,
.dash-inline input[type="text"] {
    background: rgba(var(--tint-rgb), .045);
    border: 1px solid var(--line-ink);
    border-radius: var(--r-sm);
    padding: .34rem .5rem;
    font-family: var(--f-mono);
    font-size: .68rem;
    color: var(--on-ink);
    appearance: none;
}
.dash-inline select { padding-right: 1.6rem; }
.dash-inline input[type="text"] { width: 6.5rem; }
.dash-inline select:focus,
.dash-inline input[type="text"]:focus { outline: none; border-color: rgba(214, 251, 75, .5); }

.btn--danger { background: rgba(255, 122, 107, .12); border-color: rgba(255, 122, 107, .45); color: var(--bad); }
.btn--danger:hover { background: rgba(255, 122, 107, .2); border-color: rgba(255, 122, 107, .7); color: var(--bad); }

/* --- 28j. Console responsive ------------------------------------ */
@media (max-width: 1024px) {
    main.dash {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: 0;
    }

    .dash__side {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: min(320px, 86vw);
        height: 100dvh;
        border-radius: 0 1.5rem 1.5rem 0;
        transform: translateX(-100%);
        box-shadow: 0 0 70px -12px rgba(0, 0, 0, .95);
        transition: transform .42s var(--ease-out);
    }
    .dash__side.is-open { transform: none; }
    .dash__close { display: grid; }
    .dash__burger { display: grid; }

    .dash__scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 35;
        background: rgba(4, 5, 8, .66);
        opacity: 0;
        pointer-events: none;
        transition: opacity .35s var(--ease);
    }
    body.dash-nav-open { overflow: hidden; }
    body.dash-nav-open .dash__scrim { opacity: 1; pointer-events: auto; }

    main.dash .dash-hero { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .dash__top { gap: .7rem; }
    .dash__top-act .dash__pill:not(.dash__pill--link) { display: none; }
    .dash-cards { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
    .dash-card { padding: .95rem 1rem 1.05rem; }
    .dash-grid { grid-template-columns: minmax(0, 1fr); }
    .dash-breakdown li { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 2rem; }
    .dash-access li { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
    .dash-panel__head { padding: 1rem 1rem .8rem; }
    .dash-panel__body { padding: .9rem 1rem 1.1rem; }
    .dash-panel__foot { padding: .8rem 1rem; }
    .dash-rolecard__head { flex-direction: column; }
    .dash-rolecard__n { text-align: left; }
    .dash-schoolcard__top { grid-template-columns: auto minmax(0, 1fr); }
    .dash-schoolcard__top > .dash-badge { grid-column: 2; }
}

/* --- 29. Academics, fees and admissions ------------------------- */

/* Horizontal percentage bar used by the performance and pass-rate
   tables. The tone matches the band it falls in. */
.dash-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 3.4rem;
    align-items: center;
    gap: .55rem;
    min-width: 8.5rem;
}
.dash-bar__track {
    display: block;
    height: 6px;
    border-radius: var(--r-pill);
    background: rgba(var(--tint-rgb), .09);
    overflow: hidden;
}
.dash-bar__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--on-ink-faint);
    transition: width .5s var(--ease-out);
}
.dash-bar b {
    font-family: var(--f-mono);
    font-size: .7rem;
    font-weight: 600;
    text-align: right;
    color: var(--on-ink-dim);
}
.dash-bar--ok .dash-bar__fill { background: var(--ok); }
.dash-bar--amber .dash-bar__fill { background: var(--warn); }
.dash-bar--bad .dash-bar__fill { background: var(--bad); }
.dash-bar--ok b { color: var(--ok); }
.dash-bar--amber b { color: var(--warn); }
.dash-bar--bad b { color: var(--bad); }

/* Mark sheet cells */
.dash-mark {
    width: 4.6rem;
    background: rgba(var(--tint-rgb), .045);
    border: 1px solid var(--line-ink);
    border-radius: var(--r-sm);
    padding: .34rem .5rem;
    font-family: var(--f-mono);
    font-size: .74rem;
    color: var(--on-ink);
    text-align: center;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}
.dash-mark--wide {
    width: 100%;
    min-width: 11rem;
    font-family: var(--f-body);
    font-size: .78rem;
    text-align: left;
}
.dash-mark:focus { outline: none; border-color: rgba(214, 251, 75, .55); background: rgba(var(--tint-rgb), .07); }

/* A disclosure the office is meant to open */
.dash-more--lead { border-color: rgba(214, 251, 75, .3); background: rgba(214, 251, 75, .035); }
.dash-more--lead > summary { color: var(--lime); }

/* Plain bulleted list inside a disclosure body */
.dash-more__list {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding-left: 1.1rem;
    font-size: .78rem;
    color: var(--on-ink-dim);
}
.dash-more__list li::marker { color: var(--lime); }

/* One school's record on the Client Schools list */
.dash-schoolcard {
    display: grid;
    gap: .9rem;
    padding: 1.05rem 1.15rem 1.15rem;
    border: 1px solid var(--line-ink);
    border-radius: var(--r-md);
    background: rgba(var(--tint-rgb), .025);
}

/* --- 30. Learner portal ---------------------------------------- */

.portal-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .9rem;
    padding: .8rem 1rem;
    border: 1px solid var(--line-ink);
    border-left: 3px solid var(--on-ink-faint);
    border-radius: var(--r-md);
    background: rgba(var(--tint-rgb), .035);
}
.portal-status__ref {
    font-family: var(--f-mono);
    font-size: .78rem;
    letter-spacing: .06em;
    color: var(--on-ink-dim);
}
.portal-status__label {
    font-size: .76rem;
    font-weight: 600;
    padding: .28rem .7rem;
    border-radius: var(--r-pill);
    background: rgba(var(--tint-rgb), .08);
    color: var(--on-ink);
}
.portal-status--ok { border-left-color: var(--ok); }
.portal-status--ok .portal-status__label { background: rgba(123, 209, 106, .16); color: var(--ok); }
.portal-status--warn { border-left-color: var(--warn); }
.portal-status--warn .portal-status__label { background: rgba(255, 195, 92, .16); color: var(--warn); }
.portal-status--bad { border-left-color: var(--bad); }
.portal-status--bad .portal-status__label { background: rgba(255, 122, 107, .16); color: var(--bad); }

.portal-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .8rem 1.2rem;
    margin: 0;
}
.portal-facts dt {
    font-family: var(--f-mono);
    font-size: .605rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.portal-facts dd { margin: .2rem 0 0; font-size: .84rem; color: var(--on-ink); }

.portal-note {
    display: flex;
    gap: .55rem;
    margin: 0;
    padding: .8rem .95rem;
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-md);
    background: rgba(var(--tint-rgb), .03);
    font-size: .8rem;
    color: var(--on-ink-dim);
}
.portal-note .ic { width: 1rem; height: 1rem; flex: none; margin-top: .12rem; color: var(--lime); }

.portal-sub {
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    margin: 0;
}

.portal-check { display: grid; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.portal-check__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .7rem;
    border-radius: var(--r-sm);
    background: rgba(var(--tint-rgb), .03);
    font-size: .8rem;
    color: var(--on-ink-dim);
}
.portal-check__item .ic { width: .95rem; height: .95rem; flex: none; }
.portal-check__item em {
    margin-left: auto;
    font-style: normal;
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.portal-check__item.is-met { color: var(--on-ink); }
.portal-check__item.is-met .ic { color: var(--ok); }
.portal-check__item.is-todo .ic { color: var(--warn); }

@media (max-width: 560px) {
    .portal-status { flex-direction: column; align-items: flex-start; }
    .dash-mark { width: 3.6rem; }
}

/* --- 31. School website ----------------------------------------- */

/* The website module leads the school dashboard, so it is dressed
   apart from the rest of the module list. */
.dash__link.is-lead {
    background: linear-gradient(90deg, rgba(214, 251, 75, .13), rgba(214, 251, 75, 0));
    color: var(--on-ink);
}
.dash__link.is-lead .ic { color: var(--lime); }
.dash__link.is-lead .dash__link-txt b { font-size: .88rem; }
.dash__link.is-lead::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 2px;
    height: 1.5rem;
    border-radius: var(--r-pill);
    background: var(--lime);
    transform: translateY(-50%);
}
.dash__link.is-lead.is-active { background: rgba(214, 251, 75, .17); }

.dash-tile.is-lead { border-color: rgba(214, 251, 75, .28); background: rgba(214, 251, 75, .05); }
.dash-tile.is-lead .dash-tile__ic { background: rgba(214, 251, 75, .18); }

/* The sidebar scope block doubles as the way into the School
   profile, so it takes a hover and a chevron when it is a link. */
.dash__scope.is-link {
    position: relative;
    text-decoration: none;
    padding-right: 2.1rem;
    transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.dash__scope.is-link:hover {
    border-color: rgba(214, 251, 75, .42);
    background: rgba(214, 251, 75, .06);
    transform: translateY(-1px);
}
.dash__scope.is-link:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.dash__scope-go {
    position: absolute;
    top: 50%;
    right: .8rem;
    width: .95rem;
    height: .95rem;
    transform: translateY(-50%);
    color: var(--on-ink-faint);
    transition: color .25s var(--ease), transform .25s var(--ease);
}
.dash__scope.is-link:hover .dash__scope-go { color: var(--lime); transform: translate(2px, -50%); }

/* -- The publish header bar ------------------------------------- */

.dash-site__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: 1.1rem 1.4rem;
    align-items: start;
    margin-bottom: 1.4rem;
    padding: 1.15rem 1.25rem 1.25rem;
    border: 1px solid var(--line-ink);
    border-left: 3px solid var(--on-ink-faint);
    border-radius: var(--r-md);
    background: linear-gradient(180deg, rgba(var(--tint-rgb), .045), rgba(var(--tint-rgb), .015));
}
.dash-site__bar.is-armed {
    border-left-color: var(--lime);
    background: linear-gradient(180deg, rgba(214, 251, 75, .07), rgba(var(--tint-rgb), .015));
}
.dash-site__bar h2 {
    margin: 0 0 .35rem;
    font-family: var(--f-mono);
    font-size: clamp(.95rem, .85rem + .5vw, 1.25rem);
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--on-ink);
    word-break: break-word;
}
.dash-site__lede { margin: 0 0 .7rem; font-size: .82rem; color: var(--on-ink-dim); max-width: 62ch; }
.dash-site__meta { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }

/* -- Website state lamp -----------------------------------------
   One small light reports a school site's public state wherever it
   appears: green and breathing while the site is live, amber while
   it is paused, a hollow ring while it does not exist yet. */
.dash-live {
    display: inline-block;
    flex: none;
    width: .6em;
    height: .6em;
    border-radius: 50%;
    background: var(--on-ink-faint);
}
.dash-live--live { background: var(--ok); animation: dash-live-pulse 2s var(--ease) infinite; }
.dash-live--paused { background: var(--warn); }
.dash-live--suspended { background: var(--bad); }
.dash-live--none { background: transparent; box-shadow: inset 0 0 0 1.5px var(--on-ink-faint); }
.dash-live--live.dash-live--warn { animation-duration: 1.4s; }
@keyframes dash-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(123, 209, 106, .6); }
    50%      { box-shadow: 0 0 0 .42em rgba(123, 209, 106, 0); }
}
.dash-site__lamp { display: inline-flex; align-items: center; gap: .42rem; }
.dash-site__lamp .dash-live { width: .55rem; height: .55rem; }
.dash__link-txt b .dash-live { margin-left: .4rem; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
    .dash-live--live { animation: none; box-shadow: 0 0 0 .16em rgba(123, 209, 106, .3); }
}

/* -- Website address control ------------------------------------ */
.dash-addr { display: grid; gap: .55rem; }
.dash-addr__row {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--line-ink);
    border-radius: var(--r-sm);
    overflow: hidden;
    background: rgba(var(--tint-rgb), .045);
    transition: border-color .25s var(--ease), background .25s var(--ease);
}
.dash-addr__row:focus-within { border-color: rgba(214, 251, 75, .55); background: rgba(var(--tint-rgb), .07); }
.dash-addr__scheme,
.dash-addr__suffix {
    display: flex;
    align-items: center;
    padding: .66rem .55rem;
    font-family: var(--f-mono);
    font-size: .74rem;
    color: var(--on-ink-faint);
    background: rgba(var(--tint-rgb), .035);
    white-space: nowrap;
}
.dash-addr__scheme { border-right: 1px solid var(--line-ink-2); }
.dash-addr__suffix { border-left: 1px solid var(--line-ink-2); }
.dash-addr__field {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: 0;
    background: transparent;
    padding: .66rem .7rem;
    font-family: var(--f-mono);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--on-ink);
}
.dash-addr__field:focus { outline: none; }
.dash-addr__field::placeholder { color: var(--on-ink-faint); font-weight: 500; }
.dash-addr__note { margin: 0; font-size: .74rem; line-height: 1.5; color: var(--on-ink-dim); word-break: break-word; }
.dash-addr__note b { color: var(--on-ink); font-weight: 600; }
.dash-addr__note.is-ok { color: var(--ok); }
.dash-addr__note.is-bad { color: var(--bad); }
.dash-addr__note.is-checking { color: var(--on-ink-faint); }

@media (max-width: 560px) {
    .dash-addr__row { flex-wrap: wrap; }
    .dash-addr__scheme { border-right: 0; border-bottom: 1px solid var(--line-ink-2); flex: 1 1 100%; padding: .4rem .55rem; }
    .dash-addr__suffix { border-left: 0; border-top: 1px solid var(--line-ink-2); flex: 1 1 100%; padding: .4rem .55rem; }
}

.dash-site__bar-side { display: grid; gap: .7rem; align-content: start; }
.dash-site__progress { display: grid; gap: .4rem; }
.dash-site__progress > span {
    font-family: var(--f-mono);
    font-size: .605rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.dash-site__todo {
    display: grid;
    gap: .3rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .76rem;
    color: var(--warn);
}
.dash-site__todo li { display: flex; gap: .4rem; align-items: baseline; }
.dash-site__todo li::before { content: "—"; color: var(--warn); opacity: .6; }

/* The publish button breathes until the site is live, so the one
   action that matters is impossible to miss. */
.dash-site__publish.is-armed { animation: site-armed 2.6s var(--ease) infinite; }
@keyframes site-armed {
    0%, 100% { box-shadow: 0 0 0 0 rgba(214, 251, 75, .5), 0 10px 30px -12px rgba(214, 251, 75, .45); }
    50%      { box-shadow: 0 0 0 12px rgba(214, 251, 75, 0), 0 16px 42px -12px rgba(214, 251, 75, .85); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -- The template gallery --------------------------------------- */

.dash-site__gallery { display: grid; gap: 1.5rem; }
.dash-site__gallery-head h3 { margin: 0 0 .3rem; font-size: 1.05rem; color: var(--on-ink); }
.dash-site__gallery-head p { margin: 0; font-size: .82rem; color: var(--on-ink-dim); max-width: 76ch; }

.dash-site__group { display: grid; gap: .7rem; }
.dash-site__group > h4 {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-family: var(--f-mono);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lime);
}
.dash-site__group > h4::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--line-ink-2);
}
.dash-site__group > h4 span {
    order: 2;
    padding: .1rem .45rem;
    border-radius: var(--r-pill);
    background: rgba(var(--tint-rgb), .07);
    font-size: .6rem;
    letter-spacing: .06em;
    color: var(--on-ink-dim);
}

.dash-site__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
    gap: .8rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.dash-site__card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: .7rem;
    height: 100%;
    padding: .9rem .95rem 1rem;
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-md);
    background: rgba(var(--tint-rgb), .025);
    text-decoration: none;
    transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.dash-site__card:hover {
    border-color: rgba(214, 251, 75, .4);
    background: rgba(214, 251, 75, .045);
    transform: translateY(-2px);
}
.dash-site__card:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.dash-site__card.is-used { border-color: rgba(123, 209, 106, .45); background: rgba(123, 209, 106, .05); }

.dash-site__swatch {
    display: flex;
    height: 34px;
    border-radius: var(--r-sm);
    overflow: hidden;
    border: 1px solid var(--line-ink-2);
}
.dash-site__swatch i { flex: 1 1 0; display: block; }
.dash-site__swatch i:first-child { flex: 2 1 0; }

.dash-site__card-txt { display: grid; gap: .25rem; align-content: start; min-width: 0; }
.dash-site__card-txt b { font-size: .88rem; font-weight: 600; color: var(--on-ink); }
.dash-site__card-txt em { font-size: .75rem; font-style: normal; color: var(--on-ink-faint); line-height: 1.45; }

.dash-site__card-foot {
    display: flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.dash-site__card-foot .dash-badge { margin-left: auto; letter-spacing: .06em; }
.dash-site__card-go {
    width: .9rem;
    height: .9rem;
    flex: none;
    margin-left: auto;
    color: var(--on-ink-faint);
    transition: transform .25s var(--ease), color .25s var(--ease);
}
.dash-site__card:hover .dash-site__card-go { color: var(--lime); transform: translateX(3px); }
.dash-site__card-foot .dash-badge + .dash-site__card-go { margin-left: .15rem; }

/* -- The layout console ----------------------------------------- */

.dash-site__imageform { margin: 0; }
.dash-site__busy {
    position: fixed;
    right: 1.1rem;
    bottom: 1.1rem;
    z-index: 90;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .62rem 1rem;
    border-radius: var(--r-pill);
    background: var(--lime);
    color: var(--ink);
    font-family: var(--f-mono);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 22px 48px -16px rgba(0, 0, 0, .85);
}
.dash-site__busy .ic { width: .9rem; height: .9rem; animation: spin 1s linear infinite; }

.dash-site__console {
    display: grid;
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}

.dash-site__rail {
    position: sticky;
    top: .5rem;
    display: grid;
    gap: .85rem;
    align-content: start;
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1.05rem 1.15rem;
    border: 1px solid var(--line-ink);
    border-radius: var(--r-md);
    background: rgba(var(--tint-rgb), .03);
}

.dash-site__rail-head { display: grid; gap: .35rem; }
.dash-site__rail-head h3 { margin: 0; font-size: 1rem; color: var(--on-ink); }
.dash-site__rail-head p { margin: 0; font-size: .74rem; color: var(--on-ink-faint); }
.dash-site__rail-state { margin-top: .15rem; }
.dash-site__back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--on-ink-dim);
    text-decoration: none;
}
.dash-site__back .ic { width: .8rem; height: .8rem; transform: rotate(180deg); }
.dash-site__back:hover { color: var(--lime); }

.dash-site__hint {
    display: flex;
    gap: .5rem;
    margin: 0;
    padding: .6rem .75rem;
    border: 1px solid rgba(214, 251, 75, .25);
    border-radius: var(--r-sm);
    background: rgba(214, 251, 75, .05);
    font-size: .73rem;
    color: var(--on-ink-dim);
}
.dash-site__hint .ic { width: .95rem; height: .95rem; flex: none; margin-top: .1rem; color: var(--lime); }

.dash-site__secs { display: grid; gap: .45rem; }
.dash-site__sec { background: rgba(var(--tint-rgb), .02); }
.dash-site__jump {
    display: inline-block;
    margin-bottom: .3rem;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .06em;
    color: var(--lime);
    text-decoration: none;
}
.dash-site__jump:hover { text-decoration: underline; }

.dash-site__pics-wrap { background: rgba(var(--tint-rgb), .02); }
.dash-site__pics { display: grid; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.dash-site__pic {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .4rem .55rem;
    border-radius: var(--r-sm);
    background: rgba(var(--tint-rgb), .04);
}
.dash-site__pic-name { font-size: .74rem; color: var(--on-ink-dim); }

.dash-site__view { min-width: 0; }
.dash-site__stage {
    height: clamp(520px, 78vh, 900px);
    overflow: auto;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid var(--line-ink);
    border-radius: var(--r-md);
    box-shadow: 0 34px 80px -44px rgba(0, 0, 0, .95);
}
/* The rendered site is a page, so it is scaled onto the pane rather
   than allowed to burst out of the dashboard column. */
.dash-site__stage .wt { font-size: 15px; }

/* -- The School profile ----------------------------------------- */

.dash-site__profile { display: grid; gap: 1.2rem; }

.dash-site__crest-row {
    display: grid;
    grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start;
}
.dash-site__crest {
    display: grid;
    place-items: center;
    min-height: 9.5rem;
    padding: .8rem;
    border: 1px solid var(--line-ink-2);
    border-radius: var(--r-md);
    background: rgba(var(--tint-rgb), .05);
}
.dash-site__crest img { max-width: 100%; max-height: 8rem; object-fit: contain; display: block; }
.dash-site__crest.is-empty {
    border-style: dashed;
    font-family: var(--f-mono);
    font-size: .66rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
}
.dash-site__crest-form { display: grid; gap: .5rem; }
.dash-form--crest { padding: .8rem .9rem; border: 1px dashed var(--line-ink); border-radius: var(--r-md); }

.dash-site__form-head {
    margin: .9rem 0 -.1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line-ink-2);
    font-family: var(--f-mono);
    font-size: .62rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--lime);
}
.dash-site__form-head:first-of-type { margin-top: .2rem; padding-top: 0; border-top: 0; }
.dash-form > .dash-site__form-head + .dash-form__grid { margin-top: .1rem; }

.dash-site__checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dash-site__check {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .7rem;
    border-radius: var(--r-sm);
    background: rgba(var(--tint-rgb), .035);
    font-size: .78rem;
    color: var(--on-ink-dim);
}
.dash-site__check .ic { width: .95rem; height: .95rem; flex: none; color: var(--warn); }
.dash-site__check.is-done { color: var(--on-ink); }
.dash-site__check.is-done .ic { color: var(--ok); }

.dash-site__people { display: grid; gap: .5rem; }
.dash-site__person-wrap { background: rgba(var(--tint-rgb), .02); }
.dash-site__portrait {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: .9rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--line-ink-2);
}
.dash-site__photo {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    flex: none;
    overflow: hidden;
    border-radius: var(--r-pill);
    border: 1px solid var(--line-ink-2);
    background: rgba(var(--tint-rgb), .06);
}
.dash-site__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dash-site__photo.is-empty {
    font-family: var(--f-mono);
    font-size: .95rem;
    letter-spacing: .04em;
    color: var(--on-ink-faint);
}
.dash-site__portrait-txt { display: grid; gap: .15rem; min-width: 0; }
.dash-site__portrait-txt b { font-size: .88rem; color: var(--on-ink); }
.dash-site__portrait-txt em { font-style: normal; font-size: .74rem; color: var(--on-ink-faint); }

.dash-site__add { border-color: rgba(214, 251, 75, .3); background: rgba(214, 251, 75, .035); }
.dash-site__add > summary { color: var(--lime); }

@media (max-width: 1180px) {
    .dash-site__console { grid-template-columns: minmax(0, 1fr); }
    .dash-site__rail { position: static; max-height: none; overflow: visible; }
    .dash-site__stage { height: clamp(420px, 66vh, 760px); }
}

@media (max-width: 900px) {
    .dash-site__bar { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .dash-site__crest-row { grid-template-columns: minmax(0, 1fr); }
    .dash-site__crest { min-height: 7rem; }
    .dash-site__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .dash-site__swatch { height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .dash-site__publish.is-armed { animation: none; box-shadow: 0 0 0 3px rgba(214, 251, 75, .3); }
    .dash-site__busy .ic { animation: none; }
}

/* ------------------------------------------------------------
   32. LIGHT CONSOLE THEME
   The dashboard content column runs on a light, conventional
   canvas while the sidebar keeps the dark brand rail. Every
   override sits here, scoped to the console, so the public site
   and the account pages are untouched.
   ------------------------------------------------------------ */

.dash__stage {
    /* The console already paints itself from tokens, so remapping
       them here is enough to turn it light: near-black text, dark
       hairlines, and a dark tint so every faint fill reads as a
       soft grey on white rather than a light wash on black. */
    --tint-rgb:     15, 17, 22;
    --on-ink:       #14171C;
    --on-ink-dim:   #5C6472;
    --on-ink-faint: #8A919E;
    --line-ink:     rgba(15, 17, 22, .12);
    --line-ink-2:   rgba(15, 17, 22, .07);
    --card:         #FFFFFF;
    --card-line:    rgba(15, 17, 22, .09);

    /* Lime is a highlighter, not a legible ink — deepen it for text
       and icons while the fills keep the bright brand hue. */
    --lime:         #5B7A0D;
    --ok:           #1E7B34;
    --warn:         #96620A;
    --bad:          #C0392B;

    background: #F3F5F8;
}

/* -- Surfaces ---------------------------------------------------- */
.dash__stage {
    border-color: rgba(15, 17, 22, .06);
    box-shadow: 0 30px 70px -46px rgba(15, 17, 22, .26);
}
.dash__top {
    background: rgba(255, 255, 255, .94);
    border-bottom-color: var(--card-line);
}
.dash-hero {
    border-color: var(--card-line);
    background:
        radial-gradient(58% 120% at 6% 0%, rgba(214, 251, 75, .2), transparent 62%),
        var(--card);
}
.dash-card,
.dash-panel,
.dash-tile,
.dash-rec,
.dash-rolecard,
.dash-site__card,
.dash-more,
.dash-site__rail,
.dash-site__sec,
.dash-site__pics-wrap,
.dash-site__bar {
    background: var(--card);
    border-color: var(--card-line);
    box-shadow: 0 16px 34px -30px rgba(15, 17, 22, .18);
}
.dash-focus {
    border-color: rgba(214, 251, 75, .45);
    background:
        radial-gradient(60% 120% at 4% 0%, rgba(214, 251, 75, .16), transparent 60%),
        var(--card);
}
.dash-rec > .dash-more { background: #FAFBFC; }
.dash-card,
.dash-panel,
.dash-rec,
.dash-rolecard,
.dash-site__card,
.dash-site__rail,
.dash-site__sec,
.dash-site__pics-wrap,
.dash-site__bar { border-radius: 1.35rem; }
.dash-card::before { height: 0; opacity: 0; }
.dash-card__ic {
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid rgba(15, 17, 22, .07);
    border-radius: .85rem;
    background: #F6F8FB;
}
.dash-rec {
    padding: .18rem;
    border-radius: 1.2rem;
}
.dash-rec > .dash-more {
    border-radius: 0 0 1rem 1rem;
}
.dash-site__bar { border-left-color: rgba(15, 17, 22, .18); }
.dash-site__bar.is-armed {
    border-left-color: var(--lime-deep);
    background: linear-gradient(180deg, rgba(214, 251, 75, .16), rgba(214, 251, 75, .03));
}
.dash-site__stage {
    border-color: var(--card-line);
    box-shadow: 0 22px 56px -40px rgba(15, 17, 22, .45);
}
.dash-addr__row { background: rgba(15, 17, 22, .035); }
.dash-field select option { background: #FFFFFF; color: var(--on-ink); }

/* -- Type: no serif figures, calmer micro labels ------------------ */
.dash-card__value,
.dash-rolecard__n { font-family: var(--f-body); font-variant-numeric: tabular-nums; }

.dash-field > span,
.dash-mini dt,
.dash-card__label,
.dash-hero__facts span {
    font-family: var(--f-body);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
}

/* -- Actions ----------------------------------------------------- */
.dash__stage .btn--lime {
    background: #D9F76A;
    color: #14171C;
    box-shadow: 0 6px 18px -10px rgba(90, 120, 10, .45);
}
.dash__stage .btn--lime:hover { background: #E4FF8C; }
.dash__stage .btn--ink { background: #14171C; color: #FFFFFF; border-color: #14171C; }
.dash__stage .btn--ink:hover { background: #2A2E38; border-color: #2A2E38; }
.dash__stage .btn--ghost-lite { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* The bright highlighter lime is unreadable as text on white, so the
   two inline-link hovers fall back to the deepened lime ink. */
.dash__stage .auth-link:hover,
.dash__stage .dash-pager__link:hover { color: var(--lime-deep); }
.dash__stage .auth-link { text-decoration-color: rgba(91, 122, 13, .34); }

/* A high-impact call to action reads near-black on a light canvas. */
.dash__stage .btn.dash-site__publish {
    background: #14171C;
    color: #FFFFFF;
    box-shadow: 0 8px 22px -12px rgba(15, 17, 22, .55);
}
.dash__stage .btn.dash-site__publish:hover { background: #2A2E38; }
.dash__stage .dash-site__busy { background: #14171C; color: #FFFFFF; }

/* -- Status chips keep their contrast on white ------------------- */
.dash__stage .dash-badge--ok { background: rgba(30, 123, 52, .12); }
.dash__stage .dash-badge--warn { background: rgba(150, 98, 10, .13); }
.dash__stage .dash-badge--bad { background: rgba(192, 57, 43, .12); }
.dash__stage .dash-badge--lime { background: rgba(169, 206, 31, .24); }

/* -- The live lamp glows a deeper green on white ------------------ */
.dash__stage .dash-live--live { animation-name: dash-live-pulse-lite; }
@keyframes dash-live-pulse-lite {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 123, 52, .42); }
    50%      { box-shadow: 0 0 0 .42em rgba(30, 123, 52, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .dash__stage .dash-live--live { box-shadow: 0 0 0 .16em rgba(30, 123, 52, .25); }
}

/* -- Room to breathe: a wider canvas and a slimmer preview rail --- */
.dash__inner { max-width: 1560px; gap: clamp(1.35rem, 2.6vw, 2.1rem); }
.dash__top-act { gap: .65rem; }
.dash__crumb-h1 { font-size: clamp(1.02rem, .98rem + .28vw, 1.18rem); }
.dash__crumb-eyebrow {
    font-family: var(--f-body);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
.dash__stage .dash__pill {
    background: #F7F9FC;
    border-color: rgba(15, 17, 22, .08);
    color: #505A68;
}
.dash__stage .dash__pill .ic { color: #4B5563; }
.dash__stage .dash__pill--link:hover {
    background: #EFF3F8;
    border-color: rgba(15, 17, 22, .12);
}
.dash-panel__head { padding: 1.2rem 1.35rem 1rem; }
.dash-panel__body { padding: 1.15rem 1.35rem 1.4rem; }
.dash-site__console { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: 1.35rem; }
.dash-site__stage { height: clamp(560px, 80vh, 1000px); }
.dash-site__grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* ------------------------------------------------------------
   33. CINEMATIC HERO DEPTH
   The script writes a single 0–1 progress value as the hero
   leaves the fold; the copy lifts and dims with it, so the
   headline has somewhere to travel to. Nothing is written when
   the visitor prefers reduced motion, which leaves the default
   value — and the hero — perfectly still.
   ------------------------------------------------------------ */

.hero__inner {
    transform: translate3d(0, calc(var(--hero-out, 0) * -48px), 0);
    opacity: calc(1 - var(--hero-out, 0) * .92);
    will-change: transform, opacity;
}

/* ------------------------------------------------------------
   34. SMART PRELOADER
   The white lockup on a field of brand ink, under a lime rule that
   draws itself once. It is a curtain, not a wall: `preload-escape`
   retires it after 3.4s whatever happens, so a visitor whose
   browser never fires `load` — or who has scripting switched off
   entirely — is never held up for longer than that.
   ------------------------------------------------------------ */

.preload {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 1.5rem;
    padding: 2rem;
    overflow: hidden;
    background:
        radial-gradient(58% 44% at 74% 12%, rgba(214, 251, 75, .13), transparent 66%),
        radial-gradient(54% 42% at 8% 88%,  rgba(226, 112, 58, .12), transparent 68%),
        var(--ink);
    animation: preload-escape .7s var(--ease) 3.4s forwards;
}

/* A soft bloom that sits behind the mark and breathes. */
.preload__aurora {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(72vw, 660px);
    height: min(72vw, 660px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(214, 251, 75, .18), transparent 66%);
    filter: blur(60px);
    animation: preload-bloom 2.6s var(--ease) infinite alternate;
}

/* The entrance lives on the logo itself so the wrapper stays free to
   carry the exit — otherwise the finished keyframe would hold the
   transform and the lift-away would never happen. */
.preload__mark { display: block; }
.preload__logo {
    display: block;
    height: clamp(32px, 5vw, 52px);
    width: auto;
    animation: preload-mark 1.05s var(--ease-out) both;
}

.preload__rule {
    width: clamp(118px, 26vw, 240px);
    height: 2px;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(var(--tint-rgb), .13);
}
.preload__rule i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--lime), var(--amber));
    box-shadow: 0 0 14px rgba(214, 251, 75, .6);
    animation: preload-rule 3.2s var(--ease-out) forwards;
}

.preload__txt {
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--on-ink-faint);
    animation: preload-mark 1.05s var(--ease-out) .14s both;
}

@keyframes preload-mark {
    from { opacity: 0; transform: translateY(14px) scale(.95); }
    to   { opacity: 1; transform: none; }
}
@keyframes preload-rule { to { width: 100%; } }
@keyframes preload-bloom {
    from { transform: scale(1);    opacity: .7; }
    to   { transform: scale(1.14); opacity: 1; }
}
@keyframes preload-escape { to { opacity: 0; visibility: hidden; } }

/* The script's own exit — the mark lifts away, the curtain fades. */
.preload.is-done {
    animation: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s var(--ease), visibility 0s .7s;
}
.preload.is-done .preload__mark {
    transform: translateY(-14px) scale(1.04);
    transition: transform .7s var(--ease);
}

/* While the curtain is up, the page behind it stays put. */
body.is-loading { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    /* Show it, then get out of the way almost immediately. */
    .preload { animation-delay: .9s; }
    .preload__aurora { animation: none; }
}