/* ============================================================
   OTR Main Stylesheet
   Extracted from index.html. Edit here, not in the HTML.
   Sections: base / layout / components / modals / demo-test / how-to-apply
   ============================================================ */

        @font-face {
            font-family: "Jameel Noori Nastaleeq";
            src:
                local("Jameel Noori Nastaleeq"),
                local("JameelNooriNastaleeq"),
                url("https://cdn.jsdelivr.net/gh/tariq-abdullah/urdu-web-font-CDN/JameelNooriNastaleeq.woff") format("woff");
            font-weight: 400 700;
            font-style: normal;
            font-display: swap;
            unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
        }

        :root {
            --otr-urdu-font: "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", "Nafees Web Naskh", serif;
            --otr-bg-deep: #050818;
            --otr-bg: #0a0c1a;
            --otr-surface: #0f172a;
            /* Registration: empty (hollow) until user enters data; filled = navy blue dark */
            --otr-reg-field-bg-filled: #0c1829;
            --otr-reg-field-bg: #0c1829;
            --otr-reg-field-border: rgba(59, 130, 246, 0.42);
            --otr-reg-field-bg-empty: rgba(15, 23, 42, 0.12);
            --otr-reg-field-border-empty: rgba(71, 85, 105, 0.38);
            --otr-gold: #fde047;
            --otr-gold-muted: rgba(250, 204, 21, 0.55);
            --otr-sky: #38bdf8;
            --otr-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
            --otr-shadow-deep: 0 24px 80px rgba(0, 0, 0, 0.55);
        }

        html {
            color-scheme: dark;
            scroll-padding-top: 5.75rem;
            overflow-x: hidden;
            max-width: 100%;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
            background-color: var(--otr-bg);
            background-image:
                radial-gradient(ellipse 130% 90% at 50% -25%, rgba(59, 130, 246, 0.14), transparent 52%),
                radial-gradient(ellipse 70% 50% at 100% 40%, rgba(250, 204, 21, 0.07), transparent 48%),
                linear-gradient(180deg, var(--otr-bg-deep) 0%, var(--otr-bg) 38%, #0f172a 100%);
            color: #fff;
            scroll-behavior: smooth;
            overflow-x: hidden;
            max-width: 100%;
            position: relative;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }

        :where(
            [lang="ur"],
            input[lang="ur"],
            textarea[lang="ur"],
            .dt-q-card--urdu #dt-q-text,
            #dt-options.dt-options--urdu .dt-opt-text
        ) {
            font-family: var(--otr-urdu-font);
            letter-spacing: normal;
            text-transform: none;
        }

        ::selection {
            background: rgba(250, 204, 21, 0.38);
            color: #fff;
        }

        main > section {
            scroll-margin-top: 5.5rem;
        }

        /** Site masthead ? fixed strip + spacer below keeps document flow aligned with anchor scroll-margin. */
        #otr-site-header.otr-site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 50;
            transform: translate3d(0, 0, 0);
            transition: transform 0.42s var(--otr-ease-smooth);
            will-change: transform;
            backface-visibility: hidden;
            background-color: rgba(0, 0, 0, 0.72);
            backdrop-filter: blur(14px) saturate(1.1);
            -webkit-backdrop-filter: blur(14px) saturate(1.1);
            box-shadow:
                0 4px 28px rgba(0, 0, 0, 0.45),
                0 1px 0 rgba(250, 204, 21, 0.14);
        }
        #otr-site-header.otr-site-header--hidden-y {
            transform: translate3d(0, -100%, 0);
            pointer-events: none;
        }
        /** Mobile drawer open: keep masthead visible (drawer is a body-level sibling, not inside the transformed header). */
        body.otrs-mobile-menu-open #otr-site-header.otr-site-header {
            transform: translate3d(0, 0, 0);
            pointer-events: auto;
        }
        @media (prefers-reduced-motion: reduce) {
            #otr-site-header.otr-site-header {
                transition-duration: 0.08s;
            }
            .otr-header-layout-anchor {
                transition-duration: 0.08s;
            }
        }
        .otr-header-layout-anchor {
            width: 100%;
            flex-shrink: 0;
            pointer-events: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            transition: height 0.42s var(--otr-ease-smooth);
            /* Approximate masthead footprint until JS assigns exact height ? avoids overlap under fixed nav. */
            min-height: 6.25rem;
        }
        .otr-header-layout-anchor--collapsed {
            min-height: 0 !important;
        }

        /* Masthead: primary stack ends at gold rule; Login / Create Account ribbon sits at top of #hero, just under the spacer (see `.otr-hero-auth-ribbon`). */
        .otr-masthead-core {
            width: 100%;
            box-sizing: border-box;
        }
        .otr-masthead-inner {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: 100%;
            gap: 0;
            padding: 0.75rem 1rem;
        }
        .otr-header-primary-stack {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: 100%;
            gap: 0.75rem;
        }
        @media (max-width: 767px) {
            .otr-masthead-inner {
                padding-bottom: 0.75rem;
            }
        }
        @media (min-width: 768px) {
            .otr-masthead-inner {
                padding-bottom: 0.5rem;
            }
        }

        /* Hero: PK #1 pill ? spacing below auth ribbon; no upward translate so the badge sits lower than Login / Create Account. */
        .otr-hero-badge-auth-center {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-top: 0.875rem;
            margin-bottom: 2.5rem;
            transform: translateY(0);
        }
        @media (min-width: 1024px) {
            .otr-hero-badge-auth-center {
                margin-top: 1.125rem;
                transform: translateY(0);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .otr-hero-badge-auth-center {
                transform: translateY(0);
            }
        }
        .otr-hero-platform-badge--in-row {
            transform: translateY(0) !important;
        }
        .otr-hero-badge-auth-center .otr-hero-platform-badge--in-row:hover {
            transform: translateY(-1px) !important;
        }
        .otr-hero-badge-auth-center .otr-hero-platform-badge--in-row:active {
            transform: translateY(0) !important;
        }
        @media (prefers-reduced-motion: reduce) {
            .otr-hero-badge-auth-center .otr-hero-platform-badge--in-row:hover,
            .otr-hero-badge-auth-center .otr-hero-platform-badge--in-row:active {
                transform: translateY(0) !important;
            }
        }
        /* Auth buttons: neon rim on ::after donut mask ? transform spin (outline-only, GPU-friendly). */
        @keyframes otr-auth-login-rim-spin {
            to {
                transform: rotate(360deg);
            }
        }
        @keyframes otr-auth-create-rim-spin {
            to {
                transform: rotate(-360deg);
            }
        }
        @keyframes otr-auth-login-particle-drift {
            0% {
                background-position: 0 0;
            }
            25% {
                background-position: 5% -4%;
            }
            50% {
                background-position: -4% 5%;
            }
            75% {
                background-position: 4% 3%;
            }
            100% {
                background-position: 0 0;
            }
        }
        @keyframes otr-auth-create-particle-drift {
            0% {
                background-position: 0 0;
            }
            20% {
                background-position: -5% 4%;
            }
            40% {
                background-position: 4% -5%;
            }
            60% {
                background-position: 5% 4%;
            }
            80% {
                background-position: -4% -3%;
            }
            100% {
                background-position: 0 0;
            }
        }
        .otr-hero-auth-btn {
            font-family: inherit;
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            padding: 0.52rem 1.1rem;
            border-radius: 9999px;
            border: 1px solid transparent;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            isolation: isolate;
            transition:
                color 0.38s var(--otr-ease-smooth),
                text-shadow 0.38s var(--otr-ease-smooth),
                border-color 0.38s var(--otr-ease-smooth),
                box-shadow 0.42s var(--otr-ease-smooth),
                transform 0.32s var(--otr-ease-smooth);
        }
        .otr-auth-btn-label {
            position: relative;
            z-index: 3;
            display: inline-block;
        }
        .otr-hero-auth-btn--login,
        .otr-hero-auth-btn--create {
            background-origin: border-box;
        }
        /* Login: super-dense star cluster ? white, yellow, red, green, sky */
        .otr-hero-auth-btn--login::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            z-index: 1;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.48s var(--otr-ease-smooth);
            background-image:
                radial-gradient(circle at 6% 14%, rgba(255, 255, 255, 1) 0.58px, transparent 1.48px),
                radial-gradient(circle at 14% 36%, rgba(253, 224, 71, 1) 0.68px, transparent 1.58px),
                radial-gradient(circle at 11% 68%, rgba(74, 222, 128, 1) 0.6px, transparent 1.44px),
                radial-gradient(circle at 22% 12%, rgba(56, 189, 248, 1) 0.62px, transparent 1.5px),
                radial-gradient(circle at 28% 44%, rgba(248, 113, 113, 1) 0.55px, transparent 1.38px),
                radial-gradient(circle at 19% 88%, rgba(255, 255, 255, 0.98) 0.65px, transparent 1.52px),
                radial-gradient(circle at 36% 22%, rgba(250, 204, 21, 1) 0.64px, transparent 1.52px),
                radial-gradient(circle at 34% 58%, rgba(34, 197, 94, 0.98) 0.58px, transparent 1.46px),
                radial-gradient(circle at 42% 8%, rgba(125, 211, 252, 1) 0.6px, transparent 1.45px),
                radial-gradient(circle at 44% 76%, rgba(239, 68, 68, 0.96) 0.54px, transparent 1.34px),
                radial-gradient(circle at 52% 32%, rgba(163, 230, 53, 1) 0.58px, transparent 1.42px),
                radial-gradient(circle at 48% 62%, rgba(255, 255, 255, 1) 0.7px, transparent 1.58px),
                radial-gradient(circle at 58% 16%, rgba(14, 165, 233, 0.98) 0.56px, transparent 1.4px),
                radial-gradient(circle at 54% 48%, rgba(254, 240, 138, 1) 0.62px, transparent 1.5px),
                radial-gradient(circle at 62% 82%, rgba(220, 38, 38, 0.92) 0.52px, transparent 1.32px),
                radial-gradient(circle at 70% 28%, rgba(134, 239, 172, 1) 0.6px, transparent 1.46px),
                radial-gradient(circle at 66% 58%, rgba(186, 230, 253, 1) 0.58px, transparent 1.42px),
                radial-gradient(circle at 76% 10%, rgba(253, 224, 71, 1) 0.64px, transparent 1.52px),
                radial-gradient(circle at 74% 70%, rgba(56, 189, 248, 0.98) 0.56px, transparent 1.4px),
                radial-gradient(circle at 84% 38%, rgba(255, 255, 255, 0.96) 0.62px, transparent 1.48px),
                radial-gradient(circle at 82% 72%, rgba(22, 163, 74, 0.95) 0.55px, transparent 1.36px),
                radial-gradient(circle at 92% 18%, rgba(252, 165, 165, 0.98) 0.56px, transparent 1.4px),
                radial-gradient(circle at 88% 54%, rgba(6, 182, 212, 0.96) 0.58px, transparent 1.44px),
                radial-gradient(circle at 94% 86%, rgba(250, 204, 21, 1) 0.6px, transparent 1.46px),
                radial-gradient(circle at 4% 48%, rgba(125, 211, 252, 1) 0.55px, transparent 1.36px),
                radial-gradient(circle at 16% 52%, rgba(74, 222, 128, 0.95) 0.57px, transparent 1.4px),
                radial-gradient(circle at 26% 26%, rgba(255, 255, 255, 1) 0.65px, transparent 1.5px),
                radial-gradient(circle at 38% 92%, rgba(248, 113, 113, 1) 0.54px, transparent 1.34px),
                radial-gradient(circle at 46% 42%, rgba(34, 211, 238, 0.95) 0.56px, transparent 1.38px),
                radial-gradient(circle at 56% 92%, rgba(253, 224, 71, 0.98) 0.6px, transparent 1.44px),
                radial-gradient(circle at 64% 6%, rgba(22, 163, 74, 1) 0.55px, transparent 1.36px),
                radial-gradient(circle at 72% 46%, rgba(255, 255, 255, 0.98) 0.68px, transparent 1.56px),
                radial-gradient(circle at 78% 90%, rgba(59, 130, 246, 0.85) 0.52px, transparent 1.3px),
                radial-gradient(circle at 86% 8%, rgba(239, 68, 68, 0.9) 0.53px, transparent 1.32px),
                radial-gradient(circle at 96% 64%, rgba(163, 230, 53, 1) 0.58px, transparent 1.42px),
                radial-gradient(circle at 8% 82%, rgba(56, 189, 248, 1) 0.6px, transparent 1.46px),
                radial-gradient(circle at 30% 6%, rgba(234, 179, 8, 0.98) 0.58px, transparent 1.42px),
                radial-gradient(circle at 50% 18%, rgba(134, 239, 172, 0.98) 0.57px, transparent 1.4px),
                radial-gradient(circle at 60% 38%, rgba(248, 113, 113, 0.94) 0.52px, transparent 1.3px),
                radial-gradient(circle at 68% 96%, rgba(125, 211, 252, 1) 0.6px, transparent 1.45px),
                radial-gradient(circle at 24% 72%, rgba(21, 128, 61, 0.88) 0.5px, transparent 1.26px),
                radial-gradient(circle at 40% 30%, rgba(255, 255, 255, 1) 0.62px, transparent 1.48px),
                radial-gradient(circle at 90% 42%, rgba(250, 250, 250, 0.95) 0.55px, transparent 1.36px),
                radial-gradient(circle at 12% 24%, rgba(52, 211, 153, 1) 0.58px, transparent 1.42px),
                radial-gradient(circle at 32% 84%, rgba(14, 165, 233, 0.96) 0.56px, transparent 1.38px),
                radial-gradient(circle at 52% 68%, rgba(254, 249, 195, 1) 0.6px, transparent 1.44px),
                radial-gradient(circle at 98% 28%, rgba(185, 28, 28, 0.88) 0.52px, transparent 1.28px),
                radial-gradient(circle at 18% 96%, rgba(110, 231, 255, 0.92) 0.54px, transparent 1.34px),
                radial-gradient(circle at 58% 74%, rgba(74, 222, 128, 1) 0.58px, transparent 1.4px),
                radial-gradient(circle at 44% 14%, rgba(251, 191, 36, 1) 0.6px, transparent 1.46px),
                radial-gradient(circle at 92% 92%, rgba(34, 197, 94, 0.96) 0.55px, transparent 1.34px);
            background-size: 100% 100%;
            background-position: 0 0;
            background-repeat: no-repeat;
            mix-blend-mode: screen;
        }
        .otr-hero-auth-btn--login::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            z-index: 0;
            opacity: 0;
            pointer-events: none;
            box-sizing: border-box;
            transition: opacity 0.48s var(--otr-ease-smooth);
            transform-origin: 50% 50%;
            border: 3px solid transparent;
            background:
                linear-gradient(transparent, transparent) padding-box,
                conic-gradient(
                    from 0deg,
                    rgba(253, 224, 71, 0.22) 0deg,
                    rgba(255, 255, 255, 0.72) 26deg,
                    rgba(186, 230, 253, 0.58) 58deg,
                    rgba(253, 224, 71, 0.28) 88deg,
                    rgba(248, 113, 113, 0.48) 118deg,
                    rgba(125, 211, 252, 0.55) 150deg,
                    rgba(254, 240, 138, 0.78) 182deg,
                    rgba(52, 211, 153, 0.35) 214deg,
                    rgba(56, 189, 248, 0.5) 246deg,
                    rgba(254, 202, 202, 0.38) 278deg,
                    rgba(253, 224, 71, 0.32) 310deg,
                    rgba(253, 224, 71, 0.22) 360deg
                ) border-box;
            background-origin: border-box;
            background-clip: padding-box, border-box;
            box-shadow: none;
        }
        /* Login / Create default + hover colors: see “Hero auth ribbon” swap block below */
        .otr-hero-auth-btn--login:hover::before,
        .otr-hero-auth-btn--login:hover::after,
        .otr-hero-auth-btn--login:active::before,
        .otr-hero-auth-btn--login:active::after {
            display: none !important;
            opacity: 0 !important;
            animation: none !important;
        }
        @keyframes otr-auth-login-twinkle {
            0%,
            100% {
                opacity: 0.9;
                filter: brightness(1.08) saturate(1.32) drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.72))
                    drop-shadow(0 0 2px rgba(253, 224, 71, 0.38));
                transform: scale(1) translate(0, 0);
            }
            33% {
                opacity: 0.98;
                filter: brightness(1.2) saturate(1.42) drop-shadow(0 0 2px rgba(74, 222, 128, 0.5))
                    drop-shadow(0 0 2.5px rgba(56, 189, 248, 0.4));
                transform: scale(1.02) translate(0.2px, -0.2px);
            }
            66% {
                opacity: 0.94;
                filter: brightness(1.15) saturate(1.48) drop-shadow(0 0 2px rgba(248, 113, 113, 0.48))
                    drop-shadow(0 0 2.5px rgba(125, 211, 252, 0.5));
                transform: scale(1.014) translate(-0.15px, 0.18px);
            }
        }
        /* Create Account: dense cluster ? red, yellow, green, sky only (no white on white) */
        .otr-hero-auth-btn--create::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            z-index: 1;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.48s var(--otr-ease-smooth);
            background-image:
                radial-gradient(circle at 5% 12%, rgba(253, 224, 71, 1) 0.64px, transparent 1.52px),
                radial-gradient(circle at 12% 32%, rgba(220, 38, 38, 0.92) 0.55px, transparent 1.38px),
                radial-gradient(circle at 9% 58%, rgba(14, 165, 233, 0.98) 0.6px, transparent 1.46px),
                radial-gradient(circle at 16% 82%, rgba(22, 163, 74, 0.96) 0.58px, transparent 1.44px),
                radial-gradient(circle at 22% 18%, rgba(250, 204, 21, 1) 0.62px, transparent 1.5px),
                radial-gradient(circle at 20% 48%, rgba(56, 189, 248, 1) 0.58px, transparent 1.42px),
                radial-gradient(circle at 28% 72%, rgba(239, 68, 68, 0.95) 0.54px, transparent 1.34px),
                radial-gradient(circle at 34% 8%, rgba(34, 197, 94, 1) 0.6px, transparent 1.46px),
                radial-gradient(circle at 31% 38%, rgba(234, 179, 8, 0.98) 0.6px, transparent 1.44px),
                radial-gradient(circle at 38% 62%, rgba(6, 182, 212, 0.96) 0.58px, transparent 1.42px),
                radial-gradient(circle at 42% 88%, rgba(185, 28, 28, 0.9) 0.53px, transparent 1.3px),
                radial-gradient(circle at 48% 22%, rgba(125, 211, 252, 1) 0.62px, transparent 1.48px),
                radial-gradient(circle at 46% 52%, rgba(74, 222, 128, 1) 0.58px, transparent 1.42px),
                radial-gradient(circle at 52% 78%, rgba(251, 191, 36, 1) 0.6px, transparent 1.46px),
                radial-gradient(circle at 58% 12%, rgba(248, 113, 113, 0.96) 0.56px, transparent 1.38px),
                radial-gradient(circle at 56% 42%, rgba(2, 132, 199, 0.95) 0.58px, transparent 1.42px),
                radial-gradient(circle at 62% 68%, rgba(16, 185, 129, 0.98) 0.57px, transparent 1.4px),
                radial-gradient(circle at 68% 92%, rgba(253, 224, 71, 1) 0.64px, transparent 1.52px),
                radial-gradient(circle at 70% 28%, rgba(239, 68, 68, 0.94) 0.54px, transparent 1.32px),
                radial-gradient(circle at 74% 56%, rgba(34, 211, 238, 0.98) 0.6px, transparent 1.46px),
                radial-gradient(circle at 78% 8%, rgba(22, 101, 52, 0.88) 0.52px, transparent 1.28px),
                radial-gradient(circle at 82% 38%, rgba(254, 240, 138, 1) 0.6px, transparent 1.44px),
                radial-gradient(circle at 86% 66%, rgba(59, 130, 246, 0.9) 0.55px, transparent 1.36px),
                radial-gradient(circle at 88% 90%, rgba(220, 38, 38, 0.88) 0.53px, transparent 1.3px),
                radial-gradient(circle at 94% 18%, rgba(52, 211, 153, 1) 0.58px, transparent 1.42px),
                radial-gradient(circle at 92% 48%, rgba(14, 165, 233, 0.96) 0.57px, transparent 1.4px),
                radial-gradient(circle at 96% 76%, rgba(250, 204, 21, 1) 0.62px, transparent 1.5px),
                radial-gradient(circle at 3% 72%, rgba(34, 197, 94, 0.96) 0.56px, transparent 1.38px),
                radial-gradient(circle at 14% 6%, rgba(252, 165, 165, 0.95) 0.54px, transparent 1.34px),
                radial-gradient(circle at 25% 94%, rgba(6, 182, 212, 1) 0.58px, transparent 1.42px),
                radial-gradient(circle at 35% 14%, rgba(234, 88, 12, 0.85) 0.52px, transparent 1.3px),
                radial-gradient(circle at 41% 82%, rgba(163, 230, 53, 1) 0.6px, transparent 1.44px),
                radial-gradient(circle at 54% 6%, rgba(127, 29, 29, 0.82) 0.5px, transparent 1.24px),
                radial-gradient(circle at 51% 34%, rgba(125, 211, 252, 1) 0.62px, transparent 1.48px),
                radial-gradient(circle at 59% 58%, rgba(21, 128, 61, 0.92) 0.54px, transparent 1.32px),
                radial-gradient(circle at 65% 18%, rgba(253, 186, 116, 0.92) 0.55px, transparent 1.35px),
                radial-gradient(circle at 67% 86%, rgba(14, 165, 233, 0.98) 0.6px, transparent 1.44px),
                radial-gradient(circle at 72% 42%, rgba(253, 224, 71, 0.98) 0.58px, transparent 1.4px),
                radial-gradient(circle at 79% 74%, rgba(220, 38, 38, 0.9) 0.54px, transparent 1.32px),
                radial-gradient(circle at 84% 14%, rgba(45, 212, 191, 0.94) 0.56px, transparent 1.36px),
                radial-gradient(circle at 90% 54%, rgba(74, 222, 128, 1) 0.58px, transparent 1.4px),
                radial-gradient(circle at 98% 88%, rgba(56, 189, 248, 1) 0.6px, transparent 1.46px),
                radial-gradient(circle at 7% 42%, rgba(185, 28, 28, 0.86) 0.52px, transparent 1.28px),
                radial-gradient(circle at 18% 62%, rgba(202, 138, 4, 0.95) 0.58px, transparent 1.4px),
                radial-gradient(circle at 26% 8%, rgba(110, 231, 255, 0.96) 0.56px, transparent 1.38px),
                radial-gradient(circle at 33% 52%, rgba(34, 197, 94, 1) 0.58px, transparent 1.42px),
                radial-gradient(circle at 44% 26%, rgba(248, 113, 113, 0.94) 0.55px, transparent 1.34px),
                radial-gradient(circle at 47% 96%, rgba(14, 165, 233, 0.94) 0.56px, transparent 1.36px),
                radial-gradient(circle at 61% 92%, rgba(250, 204, 21, 1) 0.62px, transparent 1.48px),
                radial-gradient(circle at 63% 38%, rgba(22, 163, 74, 0.98) 0.57px, transparent 1.4px),
                radial-gradient(circle at 76% 18%, rgba(239, 68, 68, 0.92) 0.54px, transparent 1.32px),
                radial-gradient(circle at 81% 52%, rgba(251, 191, 36, 1) 0.6px, transparent 1.44px),
                radial-gradient(circle at 91% 32%, rgba(52, 211, 153, 0.98) 0.57px, transparent 1.38px),
                radial-gradient(circle at 11% 26%, rgba(2, 132, 199, 0.92) 0.54px, transparent 1.32px),
                radial-gradient(circle at 29% 66%, rgba(253, 224, 71, 1) 0.6px, transparent 1.44px),
                radial-gradient(circle at 37% 28%, rgba(220, 38, 38, 0.9) 0.53px, transparent 1.28px),
                radial-gradient(circle at 55% 82%, rgba(134, 239, 172, 1) 0.58px, transparent 1.4px),
                radial-gradient(circle at 69% 6%, rgba(56, 189, 248, 1) 0.6px, transparent 1.44px),
                radial-gradient(circle at 73% 98%, rgba(16, 185, 129, 0.96) 0.55px, transparent 1.34px),
                radial-gradient(circle at 87% 28%, rgba(234, 179, 8, 0.98) 0.58px, transparent 1.4px),
                radial-gradient(circle at 13% 90%, rgba(248, 113, 113, 0.92) 0.54px, transparent 1.3px),
                radial-gradient(circle at 49% 12%, rgba(125, 211, 252, 1) 0.6px, transparent 1.44px),
                radial-gradient(circle at 95% 62%, rgba(74, 222, 128, 1) 0.58px, transparent 1.4px),
                radial-gradient(circle at 39% 72%, rgba(6, 182, 212, 0.98) 0.57px, transparent 1.38px),
                radial-gradient(circle at 57% 26%, rgba(154, 52, 18, 0.8) 0.5px, transparent 1.22px),
                radial-gradient(circle at 23% 44%, rgba(34, 211, 238, 0.96) 0.58px, transparent 1.4px);
            background-size: 100% 100%;
            background-position: 0 0;
            background-repeat: no-repeat;
            mix-blend-mode: normal;
        }
        .otr-hero-auth-btn--create::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            z-index: 0;
            opacity: 0;
            pointer-events: none;
            box-sizing: border-box;
            transition: opacity 0.48s var(--otr-ease-smooth);
            transform-origin: 50% 50%;
            border: 3px solid transparent;
            background:
                linear-gradient(transparent, transparent) padding-box,
                conic-gradient(
                    from 0deg,
                    rgba(255, 255, 255, 0.24) 0deg,
                    rgba(253, 224, 71, 0.48) 28deg,
                    rgba(125, 211, 252, 0.52) 60deg,
                    rgba(255, 255, 255, 0.65) 92deg,
                    rgba(248, 113, 113, 0.36) 124deg,
                    rgba(45, 212, 191, 0.34) 156deg,
                    rgba(253, 224, 71, 0.52) 188deg,
                    rgba(56, 189, 248, 0.48) 220deg,
                    rgba(254, 240, 138, 0.42) 252deg,
                    rgba(14, 165, 233, 0.38) 284deg,
                    rgba(255, 255, 255, 0.55) 316deg,
                    rgba(255, 255, 255, 0.24) 360deg
                ) border-box;
            background-origin: border-box;
            background-clip: padding-box, border-box;
            box-shadow: none;
        }
        .otr-hero-auth-btn--create:hover::before,
        .otr-hero-auth-btn--create:hover::after,
        .otr-hero-auth-btn--create:active::before,
        .otr-hero-auth-btn--create:active::after {
            display: none !important;
            opacity: 0 !important;
            animation: none !important;
        }
        @keyframes otr-auth-create-twinkle {
            0%,
            100% {
                opacity: 0.96;
                filter: saturate(1.38) drop-shadow(0 0 1.5px rgba(239, 68, 68, 0.55))
                    drop-shadow(0 0 2px rgba(56, 189, 248, 0.42));
                transform: scale(1) translate(0, 0);
            }
            25% {
                opacity: 1;
                filter: saturate(1.52) drop-shadow(0 0 2.5px rgba(250, 204, 21, 0.72))
                    drop-shadow(0 0 2.5px rgba(34, 197, 94, 0.42));
                transform: scale(1.022) translate(-0.2px, 0.15px);
            }
            50% {
                opacity: 0.97;
                filter: saturate(1.45) drop-shadow(0 0 2px rgba(14, 165, 233, 0.62));
                transform: scale(1.014) translate(0.18px, -0.18px);
            }
            75% {
                opacity: 1;
                filter: saturate(1.58) drop-shadow(0 0 2.5px rgba(239, 68, 68, 0.68))
                    drop-shadow(0 0 3px rgba(56, 189, 248, 0.52)) drop-shadow(0 0 2px rgba(253, 224, 71, 0.58));
                transform: scale(1.028) translate(0.12px, 0.2px);
            }
        }
        .otr-hero-auth-btn:focus-visible {
            outline: 2px solid #facc15;
            outline-offset: 3px;
        }
        @media (prefers-reduced-motion: reduce) {
            .otr-hero-auth-btn--login:hover::before,
            .otr-hero-auth-btn--login:hover::after,
            .otr-hero-auth-btn--create:hover::before,
            .otr-hero-auth-btn--create:hover::after {
                animation: none;
            }
        }

        /* Hero auth ribbon: Login (yellow) ↔ Create (sky) — hover takes the neighbor’s fill */
        .otr-hero-auth-ribbon,
        #mobile-menu {
            --otr-auth-fill-yellow: linear-gradient(180deg, #fde047 0%, #eab308 100%);
            --otr-auth-fill-sky: linear-gradient(180deg, #5eead4 0%, #2dd4bf 42%, #14b8a6 100%);
            --otr-auth-border-yellow: rgba(161, 98, 7, 0.55);
            --otr-auth-border-sky: rgba(13, 148, 136, 0.85);
            --otr-auth-text-on-yellow: #0a0a0a;
            --otr-auth-text-on-sky: #042f2e;
        }

        /* Hero auth ribbon: lightweight Login (yellow) ↔ Create (sky) instant swap on hover/focus */
        .otr-hero-auth-btn.otr-hero-auth-btn--login::before,
        .otr-hero-auth-btn.otr-hero-auth-btn--login::after,
        .otr-hero-auth-btn.otr-hero-auth-btn--create::before,
        .otr-hero-auth-btn.otr-hero-auth-btn--create::after {
            display: none !important;
            animation: none !important;
            opacity: 0 !important;
        }
        .otr-hero-auth-btn.otr-hero-auth-btn--login,
        .otr-hero-auth-btn.otr-hero-auth-btn--create {
            transition:
                background 0.12s ease,
                color 0.12s ease,
                border-color 0.12s ease,
                transform 0.18s ease,
                opacity 0.2s ease,
                filter 0.2s ease;
            text-shadow: none;
            box-shadow: none;
            animation: none;
            background-image: none;
        }
        .otr-hero-auth-btn.otr-hero-auth-btn--login {
            color: var(--otr-auth-text-on-yellow) !important;
            font-size: 1rem;
            font-weight: 800;
            background: var(--otr-auth-fill-yellow) !important;
            border-color: var(--otr-auth-border-yellow) !important;
        }
        .otr-hero-auth-btn.otr-hero-auth-btn--create {
            color: var(--otr-auth-text-on-sky) !important;
            background: var(--otr-auth-fill-sky) !important;
            border-color: var(--otr-auth-border-sky) !important;
        }
        .otr-hero-auth-btn.otr-hero-auth-btn--login:hover,
        .otr-hero-auth-btn.otr-hero-auth-btn--login:focus-visible {
            color: var(--otr-auth-text-on-sky) !important;
            font-weight: 800;
            transform: translateY(-1px);
            background: var(--otr-auth-fill-sky) !important;
            border-color: var(--otr-auth-border-sky) !important;
            text-shadow: none !important;
            box-shadow: none !important;
        }
        .otr-hero-auth-btn.otr-hero-auth-btn--create:hover,
        .otr-hero-auth-btn.otr-hero-auth-btn--create:focus-visible {
            color: var(--otr-auth-text-on-yellow) !important;
            transform: translateY(-1px);
            background: var(--otr-auth-fill-yellow) !important;
            border-color: var(--otr-auth-border-yellow) !important;
            text-shadow: none !important;
            box-shadow: none !important;
        }
        .otr-hero-auth-btn.otr-hero-auth-btn--login:active {
            color: var(--otr-auth-text-on-sky) !important;
            transform: translateY(0);
            background: var(--otr-auth-fill-sky) !important;
            border-color: var(--otr-auth-border-sky) !important;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
        }
        .otr-hero-auth-btn.otr-hero-auth-btn--create:active {
            color: var(--otr-auth-text-on-yellow) !important;
            transform: translateY(0);
            background: var(--otr-auth-fill-yellow) !important;
            border-color: var(--otr-auth-border-yellow) !important;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
        }
        @media (prefers-reduced-motion: reduce) {
            .otr-hero-auth-btn.otr-hero-auth-btn--login:hover,
            .otr-hero-auth-btn.otr-hero-auth-btn--login:focus-visible,
            .otr-hero-auth-btn.otr-hero-auth-btn--create:hover,
            .otr-hero-auth-btn.otr-hero-auth-btn--create:focus-visible {
                transform: none;
            }
        }

        /* Neighbor extra-fade while Login or Create is hovered, focused, or pressed */
        .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--login:hover) .otr-hero-auth-btn--create,
        .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--login:focus-visible) .otr-hero-auth-btn--create,
        .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--login:active) .otr-hero-auth-btn--create,
        #mobile-menu:has(.otr-hero-auth-btn--login:hover) .otr-hero-auth-btn--create,
        #mobile-menu:has(.otr-hero-auth-btn--login:focus-visible) .otr-hero-auth-btn--create,
        #mobile-menu:has(.otr-hero-auth-btn--login:active) .otr-hero-auth-btn--create {
            opacity: 0.34 !important;
            filter: saturate(0.45) brightness(0.68) !important;
            transform: scale(0.96) !important;
            pointer-events: none;
        }
        .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--create:hover) .otr-hero-auth-btn--login,
        .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--create:focus-visible) .otr-hero-auth-btn--login,
        .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--create:active) .otr-hero-auth-btn--login,
        #mobile-menu:has(.otr-hero-auth-btn--create:hover) .otr-hero-auth-btn--login,
        #mobile-menu:has(.otr-hero-auth-btn--create:focus-visible) .otr-hero-auth-btn--login,
        #mobile-menu:has(.otr-hero-auth-btn--create:active) .otr-hero-auth-btn--login {
            opacity: 0.34 !important;
            filter: saturate(0.45) brightness(0.68) !important;
            transform: scale(0.96) !important;
            pointer-events: none;
        }
        .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--login:hover) .otr-hero-auth-btn--login,
        .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--login:focus-visible) .otr-hero-auth-btn--login,
        .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--login:active) .otr-hero-auth-btn--login,
        .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--create:hover) .otr-hero-auth-btn--create,
        .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--create:focus-visible) .otr-hero-auth-btn--create,
        .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--create:active) .otr-hero-auth-btn--create,
        #mobile-menu:has(.otr-hero-auth-btn--login:hover) .otr-hero-auth-btn--login,
        #mobile-menu:has(.otr-hero-auth-btn--login:focus-visible) .otr-hero-auth-btn--login,
        #mobile-menu:has(.otr-hero-auth-btn--login:active) .otr-hero-auth-btn--login,
        #mobile-menu:has(.otr-hero-auth-btn--create:hover) .otr-hero-auth-btn--create,
        #mobile-menu:has(.otr-hero-auth-btn--create:focus-visible) .otr-hero-auth-btn--create,
        #mobile-menu:has(.otr-hero-auth-btn--create:active) .otr-hero-auth-btn--create {
            opacity: 1 !important;
            filter: none !important;
            pointer-events: auto;
        }
        @media (prefers-reduced-motion: reduce) {
            .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--login:hover) .otr-hero-auth-btn--create,
            .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--login:focus-visible) .otr-hero-auth-btn--create,
            .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--login:active) .otr-hero-auth-btn--create,
            .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--create:hover) .otr-hero-auth-btn--login,
            .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--create:focus-visible) .otr-hero-auth-btn--login,
            .otr-hero-auth-ribbon:has(.otr-hero-auth-btn--create:active) .otr-hero-auth-btn--login,
            #mobile-menu:has(.otr-hero-auth-btn--login:hover) .otr-hero-auth-btn--create,
            #mobile-menu:has(.otr-hero-auth-btn--login:focus-visible) .otr-hero-auth-btn--create,
            #mobile-menu:has(.otr-hero-auth-btn--login:active) .otr-hero-auth-btn--create,
            #mobile-menu:has(.otr-hero-auth-btn--create:hover) .otr-hero-auth-btn--login,
            #mobile-menu:has(.otr-hero-auth-btn--create:focus-visible) .otr-hero-auth-btn--login,
            #mobile-menu:has(.otr-hero-auth-btn--create:active) .otr-hero-auth-btn--login {
                transform: scale(1) !important;
            }
        }

        .glass-card {
            background: rgba(20, 25, 45, 0.7);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 215, 0, 0.2);
            border-radius: 28px;
            padding: 1.8rem;
            transition: transform 0.4s, box-shadow 0.4s, border-color 0.4s;
        }
        .glass-card:hover { transform: translateY(-8px); box-shadow: 0 30px 50px -15px rgba(59,130,246,0.3); }
        /* Institutional Access pill ? sky background, black label (high specificity; survives Tailwind order). */
        #portals .otr-institutional-access-badge {
            background-color: #38bdf8 !important;
            color: #000000 !important;
        }
        /* Awards: section title trophy ? refined gold, no flat clip-art look */
        #awards h2 .otr-awards-title-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.5rem;
            vertical-align: -0.06em;
        }
        #awards h2 .otr-awards-title-icon i {
            display: block;
            font-size: clamp(1.85rem, 4.5vw, 2.2rem);
            line-height: 1;
            background: linear-gradient(168deg, #fffef5 0%, #fde047 42%, #d4a20c 78%, #854d0e 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55));
        }

        /* Awards: prize pair cards ? tighter padding, no hover glow (keep lift + transition) */
        #awards .grid > .glass-card {
            box-shadow: none;
            padding: 1.15rem 0.95rem 1.2rem;
        }
        #awards .grid > .glass-card:hover {
            box-shadow: none;
        }

        /* Awards: How We Select Winners card ? no hover glow (keep lift + transition) */
        #awards .glass-card.mt-10.p-8 {
            box-shadow: none;
        }
        #awards .glass-card.mt-10.p-8:hover {
            box-shadow: none;
        }

        #merit-sequencing {
            padding-top: 2rem;
            padding-bottom: 3rem;
        }

        #merit-sequencing .glass-card.mt-10.p-8 {
            margin-top: 1.25rem;
            box-shadow: none;
            transition: none;
        }
        #merit-sequencing .glass-card.mt-10.p-8:hover {
            box-shadow: none;
            transform: none;
        }
        #merit-sequencing .bg-yellow-400\/10 {
            background-color: #03101a;
        }

        /* Awards: CHAMPIONS / TOP 10 pills ? compact, no shadow/backdrop bleed */
        #awards .otr-awards-pill-banner {
            z-index: 2;
            isolation: isolate;
            background-color: #facc15;
            box-shadow: none;
            filter: none;
            text-shadow: none;
            outline: none;
            padding: 0.3rem 0.58rem;
            font-size: 0.75rem;
            font-weight: 700;
            line-height: 1.2;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        /* Awards: card title ? icon + heading tight, pair centered in card */
        #awards .otr-awards-card-head {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            width: 100%;
        }
        #awards .otr-awards-card-head__inner {
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            gap: 0.7rem;
            max-width: 100%;
        }
        #awards .otr-awards-card-head__icon {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            padding-right: 0.2rem;
        }
        #awards .otr-awards-card-head__title {
            flex: 0 1 auto;
            margin: 0;
            text-align: left;
        }

        /* Awards: Top 3 row ? amount left, Tax Free badge right (spaced, refined) */
        #awards .otr-awards-prize-line1 {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            width: 100%;
            max-width: 22rem;
            margin-left: auto;
            margin-right: auto;
            padding: 0.15rem 0.15rem 0.1rem;
            min-height: 2.75rem;
        }
        #awards .otr-awards-prize-line1 p {
            text-align: left;
            flex: 0 1 auto;
            min-width: 0;
        }
        #awards .otr-awards-tax-free {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            align-self: center;
            font-size: 0.625rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            line-height: 1.1;
            text-transform: uppercase;
            color: rgba(253, 224, 71, 0.95);
            padding: 0.38rem 0.55rem;
            border-radius: 7px;
            background: rgba(15, 23, 42, 0.92);
            border: 1px solid rgba(250, 204, 21, 0.38);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        }

        /* Awards: TOP 10 ? grant one-line callout (restrained, matches prize tone) */
        #awards .otr-awards-grant-spotlight {
            position: relative;
            isolation: isolate;
            width: fit-content;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            padding: 0.45rem 0.75rem 0.48rem;
            border-radius: 12px;
            border: 1px solid rgba(234, 179, 8, 0.38);
            background: linear-gradient(180deg, rgba(30, 41, 59, 0.85) 0%, rgba(15, 23, 42, 0.92) 100%);
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) inset, 0 6px 18px rgba(0, 0, 0, 0.35);
            overflow: hidden;
        }
        #awards .otr-awards-grant-spotlight__halo {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 120% 80% at 50% 0%, rgba(253, 224, 71, 0.08), transparent 55%);
            pointer-events: none;
            z-index: 0;
        }
        #awards .otr-awards-grant-spotlight__body {
            position: relative;
            z-index: 1;
            text-align: center;
        }
        #awards .otr-awards-grant-spotlight__line {
            display: flex;
            flex-wrap: nowrap;
            align-items: baseline;
            justify-content: center;
            gap: 0.45rem;
            margin: 0;
            line-height: 1.25;
            white-space: nowrap;
        }
        #awards .otr-awards-grant-spotlight__label {
            margin: 0;
            font-size: 0.8125rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: rgba(226, 232, 240, 0.88);
        }
        #awards .otr-awards-grant-spotlight__dash {
            flex: 0 0 auto;
            color: rgba(148, 163, 184, 0.55);
            font-weight: 400;
            font-size: 0.75rem;
            user-select: none;
        }
        #awards .otr-awards-grant-spotlight__amount {
            margin: 0;
            font-size: 0.9375rem;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.01em;
            color: #fde047;
        }
        #awards .otr-awards-merit-list {
            list-style: none;
            margin: 0.15rem auto 0;
            padding: 0;
            max-width: 26rem;
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }
        #awards .otr-awards-merit-item {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 0.55rem;
            padding: 0.48rem 0.65rem;
            border-radius: 12px;
            background: rgba(15, 23, 42, 0.45);
            border: 1px solid rgba(148, 163, 184, 0.12);
        }
        #awards .otr-awards-merit-icon {
            flex: 0 0 auto;
            width: 1.65rem;
            height: 1.65rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 0.65rem;
            color: #022c22;
            background: linear-gradient(165deg, #6ee7b7 0%, #34d399 50%, #059669 100%);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 2px 8px rgba(0, 0, 0, 0.35);
        }
        #awards .otr-awards-merit-txt {
            flex: 1 1 auto;
            font-size: 0.9rem;
            line-height: 1.45;
            color: #e2e8f0;
            text-align: left;
        }
        #awards .otr-awards-grant-tax-note {
            margin: 0.45rem auto 0;
            max-width: 26rem;
            padding: 0.48rem 0.65rem;
            border-radius: 12px;
            font-size: 0.9rem;
            line-height: 1.45;
            font-weight: 600;
            text-align: center;
            color: #0f172a;
            background-color: #facc15;
            border: 1px solid rgba(15, 23, 42, 0.18);
            box-shadow: none;
        }

        .otr-portals-section {
            padding: 3rem 0 3.5rem;
        }
        .otr-portals-header {
            max-width: 62rem;
            margin: 0 auto 1.85rem;
            text-align: center;
        }
        .otr-portals-header h2 {
            margin: 0 0 0.7rem;
            font-size: clamp(1.6rem, 3.2vw, 2rem);
            font-weight: 800;
            letter-spacing: -0.02em;
        }
        .otr-portals-lead {
            margin: 0 auto;
            max-width: 58rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.42rem;
            font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
            font-weight: 500;
            line-height: 1.52;
            letter-spacing: 0.008em;
            color: #a8b4c4;
            text-wrap: balance;
        }
        .otr-portals-lead-line {
            display: block;
            max-width: 58rem;
            text-align: center;
            text-wrap: balance;
        }
        .otr-portals-lead-em {
            font: inherit;
            color: inherit;
            letter-spacing: inherit;
        }
        .otr-portals-note {
            margin: 0.55rem 0 0;
            font-size: 0.8125rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: rgba(125, 211, 252, 0.9);
        }
        .otr-portals-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 1.15rem;
            max-width: 64rem;
            margin: 0 auto;
        }
        @media (min-width: 768px) {
            .otr-portals-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 1.35rem;
            }
        }
        #portals .otr-portals-card {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0.9rem;
            padding: 1.1rem 1.25rem 1.15rem;
            border-radius: 15px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background: rgba(12, 18, 36, 0.96);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 14px rgba(0, 0, 0, 0.22);
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }
        #portals .otr-portals-card:hover {
            transform: translateY(-2px);
            border-color: rgba(250, 204, 21, 0.32);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.28);
        }
        #portals .otr-portals-pill {
            align-self: center;
            display: block;
            width: fit-content;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0.55rem;
            padding: 0.26rem 0.65rem;
            border-radius: 999px;
            font-size: 0.6875rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            line-height: 1.2;
            text-align: center;
        }
        .otr-portals-pill--gold {
            color: #0a0c1a;
            background: #facc15;
        }
        .otr-portals-pill--sky {
            color: #0a0c1a;
            background: #38bdf8;
        }
        .otr-portals-card-main {
            display: grid;
            grid-template-columns: 3.25rem minmax(0, 1fr);
            gap: 0.95rem;
            align-items: start;
            text-align: left;
        }
        .otr-portals-card-icon {
            width: 3.25rem;
            height: 3.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.7rem;
            background: linear-gradient(165deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.88) 100%);
            border: 1px solid rgba(250, 204, 21, 0.22);
            color: #fde047;
            font-size: 1.38rem;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 2px 8px rgba(0, 0, 0, 0.28);
        }
        #portals .otr-portals-card:hover .otr-portals-card-icon {
            border-color: rgba(250, 204, 21, 0.38);
            color: #fef08a;
        }
        #portals .otr-portals-card--institution .otr-portals-card-icon {
            border-color: rgba(56, 189, 248, 0.26);
            color: #7dd3fc;
        }
        #portals .otr-portals-card--institution:hover .otr-portals-card-icon {
            border-color: rgba(56, 189, 248, 0.42);
            color: #bae6fd;
        }
        .otr-portals-card-copy h3 {
            margin: 0 0 0.32rem;
            font-size: 1.15rem;
            font-weight: 800;
            color: #facc15;
            line-height: 1.28;
            letter-spacing: -0.01em;
        }
        .otr-portals-card-copy > p {
            margin: 0 0 0.95rem;
            font-size: 16px;
            line-height: 1.52;
            color: #94a3b8;
        }
        .otr-portals-features {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0.45rem;
        }
        #portals .otr-portals-features li {
            display: flex;
            align-items: flex-start;
            gap: 0.58rem;
            font-size: 17px;
            line-height: 1.55;
            color: #ffffff !important;
            font-weight: 400;
            letter-spacing: 0.012em;
            -webkit-font-smoothing: antialiased;
        }
        #portals .otr-portals-features i {
            flex-shrink: 0;
            width: 1.28rem;
            margin-top: 0.2rem;
            font-size: 0.92rem;
            color: #facc15;
            opacity: 0.92;
            text-align: center;
        }
        #portals .otr-portals-cta {
            width: 100%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            min-height: 2.75rem;
            padding: 0.72rem 1.35rem;
            font-size: 0.9375rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            line-height: 1.2;
            color: #0a0c1a;
            cursor: pointer;
            border-radius: 0.75rem;
            border: 1px solid rgba(133, 77, 14, 0.45);
            background: linear-gradient(165deg, #fef9c3 0%, #fde047 42%, #eab308 78%, #ca8a04 100%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.35),
                0 1px 0 #854d0e,
                0 4px 12px rgba(0, 0, 0, 0.2);
            transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.18s ease, border-color 0.18s ease;
        }
        #portals .otr-portals-cta i {
            font-size: 1.05em;
            opacity: 0.95;
        }
        #portals .otr-portals-card:hover .otr-portals-cta--student,
        #portals .otr-portals-card:hover .otr-portals-cta--institution {
            border-color: rgba(2, 132, 199, 0.5);
            background: linear-gradient(165deg, #e0f2fe 0%, #7dd3fc 38%, #38bdf8 72%, #0ea5e9 100%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.4),
                0 1px 0 #0369a1,
                0 4px 12px rgba(0, 0, 0, 0.2);
            transform: translateY(-1px);
        }
        #portals .otr-portals-cta--student:hover,
        #portals .otr-portals-cta--institution:hover {
            border-color: rgba(14, 165, 233, 0.6);
            background: linear-gradient(165deg, #f0f9ff 0%, #bae6fd 32%, #38bdf8 68%, #0284c7 100%);
            transform: translateY(-1px);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.45),
                0 1px 0 #0369a1,
                0 5px 14px rgba(0, 0, 0, 0.22);
        }
        #portals .otr-portals-cta:active {
            transform: translateY(0);
            box-shadow:
                inset 0 1px 2px rgba(0, 0, 0, 0.12),
                0 1px 0 #0369a1;
        }
        #portals .otr-portals-cta:focus-visible {
            outline: 2px solid #fde047;
            outline-offset: 2px;
        }

        /* ?? Features: showcase row (reference-aligned) ?? */
        .otr-features-section {
            position: relative;
            isolation: isolate;
            background:
                radial-gradient(ellipse 100% 80% at 50% -20%, rgba(250, 204, 21, 0.07), transparent 52%),
                linear-gradient(180deg, #020617 0%, #0a0f24 42%, #050816 100%);
            border-top: 1px solid rgba(148, 163, 184, 0.12);
            border-bottom: 1px solid rgba(148, 163, 184, 0.1);
        }
        .otr-features-section::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background: radial-gradient(ellipse 55% 40% at 50% 100%, rgba(56, 189, 248, 0.06), transparent 60%);
            opacity: 0.9;
        }
        .otr-features-header {
            max-width: 52rem;
            margin-left: auto;
            margin-right: auto;
        }
        .otr-features-title {
            font-size: clamp(1.85rem, 4vw, 2.65rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            line-height: 1.15;
            color: #fde047;
            margin: 0 0 0.85rem;
            text-wrap: balance;
        }
        .otr-features-lead {
            margin: 0;
            font-size: clamp(0.98rem, 1.35vw, 1.08rem);
            line-height: 1.65;
            color: #cbd5e1;
            font-weight: 500;
            max-width: 48rem;
            margin-left: auto;
            margin-right: auto;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 1rem;
            align-items: stretch;
            max-width: 72rem;
            margin-left: auto;
            margin-right: auto;
        }
        @media (min-width: 700px) {
            .feature-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 1.15rem 1.35rem;
            }
        }
        @media (min-width: 1100px) {
            .feature-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 1.25rem 1.5rem;
            }
        }
        .feature-grid > .feature-card:nth-child(1) { --feature-accent: #fbbf24; }
        .feature-grid > .feature-card:nth-child(2) { --feature-accent: #22d3ee; }
        .feature-grid > .feature-card:nth-child(3) { --feature-accent: #38bdf8; }
        .feature-grid > .feature-card:nth-child(4) { --feature-accent: #34d399; }
        .feature-grid > .feature-card:nth-child(5) { --feature-accent: #c4b5fd; }
        .feature-grid > .feature-card:nth-child(6) { --feature-accent: #4ade80; }
        .feature-grid > .feature-card:nth-child(7) { --feature-accent: #f59e0b; }
        .feature-grid > .feature-card:nth-child(8) { --feature-accent: #7dd3fc; }
        .feature-grid > .feature-card:nth-child(9) { --feature-accent: #2dd4bf; }
        .feature-grid > .feature-card:nth-child(10) { --feature-accent: #a78bfa; }
        .feature-grid > .feature-card:nth-child(11) { --feature-accent: #fde047; }
        .feature-grid > .feature-card:nth-child(12) { --feature-accent: #4ade80; }
        .feature-card--spotlight {
            border-color: color-mix(in srgb, var(--feature-accent) 48%, rgba(148, 163, 184, 0.35));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 4px 14px rgba(0, 0, 0, 0.28);
        }
        .glass-card.feature-card.feature-card--spotlight:hover {
            border-color: color-mix(in srgb, var(--feature-accent) 68%, #fff 10%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.14),
                0 8px 20px rgba(0, 0, 0, 0.34);
        }

        .glass-card.feature-card {
            --feature-accent: #fbbf24;
            position: relative;
            display: grid;
            grid-template-columns: 3rem minmax(0, 1fr);
            grid-template-rows: auto auto;
            column-gap: 1.05rem;
            row-gap: 0.35rem;
            align-items: start;
            align-content: center;
            height: 100%;
            width: 100%;
            min-height: 5.5rem;
            padding: 1.15rem 1.35rem 1.15rem 1.2rem;
            border-radius: 14px;
            text-align: left;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            border: 1px solid color-mix(in srgb, var(--feature-accent) 30%, rgba(148, 163, 184, 0.28));
            overflow: hidden;
            background: rgba(12, 18, 36, 0.88);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 4px 12px rgba(0, 0, 0, 0.26);
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
        }
        .glass-card.feature-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--feature-accent) 14%, transparent), transparent 55%);
            opacity: 0;
            transition: opacity 0.2s ease;
            pointer-events: none;
        }
        .glass-card.feature-card::after {
            content: "";
            position: absolute;
            top: -135%;
            left: -60%;
            width: 68%;
            height: 290%;
            transform: rotate(22deg);
            background: linear-gradient(
                90deg,
                transparent 0%,
                color-mix(in srgb, var(--feature-accent) 18%, transparent) 28%,
                color-mix(in srgb, var(--feature-accent) 48%, rgba(255, 255, 255, 0.2)) 42%,
                rgba(255, 255, 255, 0.82) 50%,
                color-mix(in srgb, var(--feature-accent) 48%, rgba(255, 255, 255, 0.2)) 58%,
                transparent 100%
            );
            opacity: 0;
            pointer-events: none;
            z-index: 2;
        }
        .glass-card.feature-card:hover {
            transform: translateY(-3px);
            border-color: color-mix(in srgb, var(--feature-accent) 58%, #fff 10%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                0 8px 20px rgba(0, 0, 0, 0.32);
        }
        .glass-card.feature-card:active {
            transform: translateY(-1px);
            border-color: color-mix(in srgb, var(--feature-accent) 65%, #fff 12%);
        }
        .glass-card.feature-card:hover::before { opacity: 0.65; }
        .glass-card.feature-card:hover::after {
            opacity: 1;
            animation: feature-card-light 1100ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        @keyframes feature-card-light {
            0% { transform: translateX(0) rotate(22deg); }
            100% { transform: translateX(230%) rotate(22deg); }
        }
        .feature-card.feature-card--accent:hover {
            border-color: rgba(56, 189, 248, 0.45);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 22px 48px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(56, 189, 248, 0.12),
                0 0 42px rgba(56, 189, 248, 0.14);
        }

        .feature-card .feature-card-head {
            display: contents;
        }

        /*
         * Banner JPEGs are mostly square with a flat blue (or white) ?plate? behind the art.
         * Square frame + inner stage colour close to that plate removes the ?box in a box? look.
         * (True transparency still needs PNG/WebP from design ? CSS can only blend/harmonize.)
         */
        .feature-card .feature-card-icon {
            --feature-icon-s: 3rem;
            grid-column: 1;
            grid-row: 1 / span 2;
            align-self: center;
            flex-shrink: 0;
            width: var(--feature-icon-s);
            height: var(--feature-icon-s);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 1;
            overflow: visible;
            padding: 0;
            box-sizing: border-box;
            color: color-mix(in srgb, var(--feature-accent) 82%, #fde047 18%);
            background: none;
            border: none;
            border-radius: 0;
            box-shadow: none;
        }
        .feature-card .feature-card-icon::before {
            content: none;
        }
        .feature-card:hover .feature-card-icon {
            transform: none;
            border: none;
            box-shadow: none;
        }
        .feature-card .feature-card-icon-surface {
            flex: 0 0 auto;
            width: auto;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            z-index: 2;
            border-radius: 0;
            overflow: visible;
            background: none;
        }
        .feature-card .feature-card-mark {
            flex: 0 0 auto;
            overflow: visible;
            transition: transform 0.22s var(--otr-ease-smooth), filter 0.22s ease;
        }
        .feature-icon-defs {
            position: absolute;
            width: 0;
            height: 0;
            overflow: hidden;
        }
        .feature-card .feature-card-mark--svg {
            width: 2.6rem;
            height: 2.6rem;
            display: block;
            fill: none;
            stroke: url(#otr-feat-gold);
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45));
        }
        .feature-card .feature-card-mark--svg .fc-soft {
            fill: rgba(253, 224, 71, 0.16);
            stroke: none;
        }
        .feature-card .feature-card-mark--svg .fc-solid {
            fill: url(#otr-feat-gold);
            stroke: none;
        }
        .feature-card .feature-card-mark--svg .fc-mask {
            fill: #0d1428;
        }
        .feature-card:hover .feature-card-mark--svg {
            transform: translateY(-2px) scale(1.06);
        }
        .feature-card:hover .feature-card-mark--svg .fc-soft {
            fill: rgba(253, 224, 71, 0.26);
        }
        @media (prefers-reduced-motion: reduce) {
            .feature-card:hover .feature-card-mark--svg {
                transform: none;
            }
        }
        /* High-Impact Academic: same navy stage as other banners; stronger lift on the img so dark line art reads */
        .feature-card .feature-card-icon-surface--prep-boost {
            background: linear-gradient(168deg, #1a4a72 0%, #143a58 42%, #0f2d48 72%, #0b2238 100%);
        }
        .feature-card .feature-card-icon-surface--prep-boost .feature-card-icon-img {
            mix-blend-mode: normal;
            filter: brightness(1.22) contrast(1.28) saturate(1.1);
        }
        .feature-card:hover .feature-card-icon-surface--prep-boost .feature-card-icon-img {
            filter: brightness(1.26) contrast(1.3) saturate(1.12);
        }
        .feature-card .feature-card-icon-img {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            object-position: center;
            display: block;
            transform: scale(1.02);
            transition: transform 0.45s var(--otr-ease-smooth), filter 0.45s ease;
            filter: contrast(1.04) saturate(1.03) brightness(1.04);
        }
        .feature-card:hover .feature-card-icon-img {
            transform: scale(1.07);
            filter: contrast(1.05) saturate(1.05) brightness(1.06);
        }
        @media (prefers-reduced-motion: reduce) {
            .feature-card .feature-card-icon-img,
            .feature-card:hover .feature-card-icon-img {
                transform: scale(1.02);
                transition: none;
            }
            .glass-card.feature-card:hover::after {
                animation: none;
                opacity: 0;
            }
        }
        .feature-card .feature-card-icon::after {
            content: none;
        }

        .feature-card.feature-card--accent .feature-card-icon {
            color: #7dd3fc;
            background: none;
            border: none;
            box-shadow: none;
        }
        .feature-card.feature-card--accent:hover .feature-card-icon {
            color: #bae6fd;
            background: none;
            border: none;
            box-shadow: none;
        }

        .feature-card-heading {
            grid-column: 2;
            grid-row: 1;
            position: relative;
            z-index: 1;
            font-size: clamp(0.94rem, 1.02vw, 1.06rem);
            font-weight: 700;
            line-height: 1.35;
            color: #facc15;
            letter-spacing: -0.01em;
            text-transform: none;
            margin: 0;
            padding: 0;
            min-height: 0;
            max-width: none;
            display: block;
            text-align: left;
            text-wrap: balance;
            text-shadow: none;
            filter: none;
            -webkit-text-fill-color: #facc15;
        }
        .feature-card-statement {
            grid-column: 2;
            grid-row: 2;
            position: relative;
            z-index: 1;
            margin: 0;
            max-width: none;
            font-size: clamp(0.82rem, 0.92vw, 0.9rem);
            line-height: 1.5;
            color: #cbd5e1;
            font-weight: 500;
            text-align: left;
            text-wrap: pretty;
        }
        .feature-card-heading--gold {
            letter-spacing: -0.02em;
            font-size: clamp(0.9rem, 1.12vw, 1.02rem);
            font-weight: 700;
            line-height: 1.35;
            max-width: 17rem;
            color: #facc15;
            text-shadow: none;
            filter: none;
        }
        /* Feature banners ? two-line title (banner 1+); shared typography */
        .feature-card-heading.feature-card-heading--dual-banner {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.22rem;
            max-width: 18.5rem;
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            padding-left: 0.5rem;
            padding-right: 0.5rem;
            line-height: 1.2;
            letter-spacing: 0;
            color: #facc15;
            text-shadow: none;
            filter: none;
        }
        .feature-banner-l1 {
            display: block;
            width: 100%;
            font-size: clamp(0.8rem, 1.02vw, 0.9rem);
            font-weight: 800;
            line-height: 1.22;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            text-align: center;
            color: #facc15;
            text-shadow: none;
            filter: none;
        }
        .feature-banner-l2 {
            display: block;
            width: 100%;
            font-size: clamp(0.92rem, 1.14vw, 1.06rem);
            font-weight: 800;
            line-height: 1.3;
            letter-spacing: 0.03em;
            text-transform: none;
            text-align: center;
            color: #facc15;
            text-shadow: none;
            filter: none;
        }
        .feature-banner-l1--case-preserve {
            text-transform: none;
            letter-spacing: 0.025em;
        }
        .feature-card-emoji {
            display: inline-block;
            margin: 0 0.2em;
            font-size: 1.05em;
            vertical-align: middle;
        }
        .feature-card-rank-soft {
            font-weight: 500;
            letter-spacing: 0.04em;
        }

        .feature-card .feature-card-body {
            flex: 1 1 auto;
            font-size: 0.92rem;
            line-height: 1.55;
            color: #e2e8f0;
            font-weight: 500;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            text-align: center;
            width: 100%;
            max-width: 21rem;
            margin: 0 auto;
        }
        .feature-card .feature-card-body p + p { margin-top: 0.45rem; }

        .feature-card-desc {
            margin: 0;
            font-size: clamp(0.84rem, 1.02vw, 0.93rem);
            line-height: 1.62;
            color: #cbd5e1;
            font-weight: 500;
            text-align: center;
            text-wrap: pretty;
        }
        .feature-card-desc strong {
            font-weight: 800;
        }
        .feature-fbr-acronym {
            color: #a16207;
            font-weight: 800;
        }
        .feature-card-desc em {
            color: #e2e8f0;
            font-style: italic;
        }

        .feature-card .feature-card-hook {
            color: #ffffff;
            font-weight: 700;
            margin: 0 auto 0.55rem;
            max-width: 18rem;
            font-size: clamp(0.82rem, 0.98vw, 0.9rem);
            line-height: 1.45;
            letter-spacing: -0.01em;
        }
        .feature-card-hook--tight {
            margin-bottom: 0.4rem !important;
        }

        .feature-card .feature-point-list {
            margin: 0;
            padding: 0;
            list-style: none;
            display: grid;
            gap: 0.35rem;
            width: 100%;
        }
        .feature-card .feature-point-list li {
            position: relative;
            padding-left: 1rem;
            text-align: left;
            font-size: clamp(0.88rem, 1vw, 0.95rem);
            line-height: 1.52;
            color: #f1f5f9;
        }
        .feature-card .feature-point-list li::before {
            content: "";
            position: absolute;
            left: 0.12rem;
            top: 0.55rem;
            width: 0.35rem;
            height: 0.35rem;
            border-radius: 999px;
            background: linear-gradient(180deg, #fde047, #ca8a04);
        }
        .feature-card .feature-point-list li strong {
            color: #f8fafc;
            font-weight: 800;
        }

        .feature-card .feature-point-list.feature-point-list--readable {
            gap: 0.42rem;
            text-align: left;
            margin: 0.05rem auto 0;
            max-width: 19.25rem;
        }
        .feature-card .feature-point-list.feature-point-list--readable li {
            color: #ffffff;
            font-weight: 400;
            font-size: clamp(0.84rem, 1.02vw, 0.93rem);
            line-height: 1.42;
            letter-spacing: 0.01em;
            font-family: inherit;
            padding-left: 1.2rem;
            padding-top: 0.06rem;
            padding-bottom: 0.38rem;
            text-shadow: none;
            filter: none;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }
        .feature-card .feature-point-list.feature-point-list--readable li strong {
            font-weight: 400;
            color: #ffffff;
        }
        .feature-card .feature-point-list.feature-point-list--readable .feature-fbr-acronym {
            color: #a16207;
            font-weight: 400;
        }
        .feature-card .feature-point-list.feature-point-list--readable .feature-prize-amounts {
            color: #fde047;
            font-weight: 600;
        }
        .feature-card .feature-point-list.feature-point-list--readable li::before {
            content: "";
            position: absolute;
            top: calc(0.48em + 2px);
            left: 0.08rem;
            width: 0.42rem;
            height: 0.42rem;
            border-radius: 999px;
            background:
                radial-gradient(circle at 32% 28%, #fffef3 0%, #fde047 38%, #eab308 72%, #a16207 100%);
            border: 1px solid rgba(69, 48, 6, 0.35);
            box-shadow:
                inset 0 1px 2px rgba(255, 255, 255, 0.45),
                inset 0 -2px 3px rgba(100, 70, 5, 0.28);
        }

        .feature-card .feature-prize-list {
            list-style: none;
            margin: 0.15rem 0 0;
            padding: 0;
            width: 100%;
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.18);
            background: rgba(2, 6, 23, 0.45);
        }
        .feature-card .feature-prize-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 0.4rem 0.85rem;
            padding: 0.55rem 0.65rem;
            border-bottom: 1px solid rgba(148, 163, 184, 0.22);
            font-size: clamp(0.88rem, 1vw, 0.95rem);
        }
        .feature-card .feature-prize-row:last-child {
            border-bottom: none;
        }
        .feature-card .feature-prize-row .text-yellow-400 {
            color: #facc15 !important;
            text-shadow: none;
            font-weight: 800 !important;
            letter-spacing: 0.02em;
        }

        .feature-card-tax {
            margin: 0.85rem 0 0;
            padding-top: 0.35rem;
            text-align: center;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.22em;
            color: #7dd3fc;
            text-transform: uppercase;
        }
        
        .btn-primary {
            background: #FFD700;
            color: #0a0c1a;
            font-weight: 700;
            padding: 0.9rem 2rem;
            border-radius: 60px;
            transition: all 0.3s;
            cursor: pointer;
            border: none;
        }
        .btn-primary:hover { transform: scale(1.05); filter: brightness(1.05); }
        
        .btn-sky {
            background: #38BDF6;
            color: #000000;
            font-weight: 700;
            padding: 0.9rem 2rem;
            border-radius: 60px;
            transition: all 0.3s;
            cursor: pointer;
            border: none;
        }
        .btn-sky:hover { transform: scale(1.05); filter: brightness(1.08); }

        .btn-primary:focus-visible,
        .btn-sky:focus-visible {
            outline: 2px solid rgba(253, 224, 71, 0.92);
            outline-offset: 3px;
        }
        
        /* Hero CTA row: one line; horizontal scroll on very narrow screens */
        .hero-cta-row {
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            gap: 0.55rem;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
            padding: 0.2rem 0.15rem 0.35rem;
            scrollbar-width: thin;
        }
        .hero-cta-row::-webkit-scrollbar {
            height: 4px;
        }
        .hero-cta-row::-webkit-scrollbar-thumb {
            background: rgba(250, 204, 21, 0.35);
            border-radius: 999px;
        }

        @media (max-width: 639px) {
            .hero-cta-row {
                flex-wrap: wrap;
                justify-content: center;
                align-items: stretch;
                gap: 0.72rem;
                row-gap: 0.72rem;
                column-gap: 0.62rem;
                padding: 0.42rem 0.65rem 0.58rem;
                overflow-x: visible;
                max-width: 100%;
            }
            .hero-cta-btn {
                flex: 1 1 calc(50% - 0.42rem);
                min-width: min(100%, 10.35rem);
                max-width: 100%;
                white-space: normal;
                text-align: center;
                line-height: 1.28;
                padding: 0.68rem 1rem;
                min-height: 2.85rem;
            }
            .hero-cta-btn .hero-btn-icon {
                flex-shrink: 0;
            }
        }

        .hero-btn-icon {
            margin-right: 0.42em;
            font-size: 0.92em;
            opacity: 0.92;
            filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35));
        }

        /* Hero CTAs: premium pills + hover sheen (same spirit as provincial Top 10 cards) */
        .hero-cta-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            font-size: clamp(0.8rem, 1.65vw, 0.9rem);
            font-weight: 700;
            letter-spacing: 0.01em;
            text-transform: none;
            padding: 0.62rem 1.18rem;
            border-radius: 9999px;
            position: relative;
            z-index: 1;
            overflow: hidden;
            isolation: isolate;
            white-space: nowrap;
            cursor: pointer;
            border: none;
            transition:
                transform 0.22s cubic-bezier(0.34, 1.2, 0.64, 1),
                box-shadow 0.22s ease,
                filter 0.2s ease,
                border-color 0.2s ease;
        }
        .hero-cta-btn > * {
            position: relative;
            z-index: 2;
        }
        .hero-cta-btn::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            opacity: 0;
            transition: opacity 0.22s ease;
            pointer-events: none;
            z-index: 0;
        }
        .hero-cta-gold::before {
            background: linear-gradient(135deg, rgba(250, 204, 21, 0.28) 0%, transparent 58%);
        }
        .hero-cta-sky::before {
            background: linear-gradient(135deg, rgba(125, 211, 252, 0.26) 0%, transparent 58%);
        }
        .hero-cta-btn::after {
            content: "";
            position: absolute;
            top: -120%;
            left: -45%;
            width: 48%;
            height: 260%;
            transform: rotate(22deg);
            background: linear-gradient(
                180deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.38) 46%,
                rgba(255, 255, 255, 0) 100%
            );
            opacity: 0;
            transition: opacity 0.18s ease;
            pointer-events: none;
            z-index: 1;
        }
        .hero-cta-gold:hover::before,
        .hero-cta-sky:hover::before {
            opacity: 1;
        }
        .hero-cta-gold:hover::after,
        .hero-cta-sky:hover::after {
            opacity: 1;
            animation: hero-cta-sheen 820ms ease;
        }
        @keyframes hero-cta-sheen {
            0% {
                transform: translateX(0) rotate(22deg);
            }
            100% {
                transform: translateX(300%) rotate(22deg);
            }
        }
        .hero-cta-btn:focus-visible {
            outline: 2px solid #facc15;
            outline-offset: 3px;
        }
        .hero-cta-sky:focus-visible {
            outline-color: #7dd3fc;
        }

        .hero-cta-gold {
            color: #0b1020;
            background: linear-gradient(
                168deg,
                #fffef8 0%,
                #fef08a 22%,
                #facc15 48%,
                #eab308 72%,
                #a16207 100%
            );
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.75),
                inset 0 -2px 4px rgba(146, 64, 14, 0.12),
                0 1px 0 rgba(255, 255, 255, 0.2) inset,
                0 4px 0 #854d0e,
                0 8px 20px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(15, 23, 42, 0.25);
        }
        .hero-cta-row > button:first-child.hero-cta-gold {
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.75),
                inset 0 -2px 4px rgba(146, 64, 14, 0.12),
                0 4px 0 #854d0e,
                0 8px 22px rgba(0, 0, 0, 0.38),
                0 0 0 1px rgba(250, 204, 21, 0.45),
                0 0 28px rgba(250, 204, 21, 0.22);
        }
        .hero-cta-gold:hover {
            filter: brightness(1.06) saturate(1.08);
            transform: translateY(-4px) scale(1.03);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.88),
                inset 0 -2px 4px rgba(146, 64, 14, 0.08),
                0 7px 0 #854d0e,
                0 16px 34px rgba(0, 0, 0, 0.42),
                0 0 0 1px rgba(254, 240, 138, 0.55),
                0 0 40px rgba(250, 204, 21, 0.34);
        }
        .hero-cta-row > button:first-child.hero-cta-gold:hover {
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.85),
                inset 0 -2px 4px rgba(146, 64, 14, 0.1),
                0 6px 0 #854d0e,
                0 14px 32px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(254, 249, 195, 0.55),
                0 0 44px rgba(250, 204, 21, 0.38);
        }
        .hero-cta-gold:active {
            filter: brightness(0.97);
            transform: translateY(1px) scale(0.99);
            box-shadow:
                inset 0 3px 10px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.4),
                0 2px 0 #854d0e,
                0 4px 12px rgba(0, 0, 0, 0.28);
        }

        .hero-cta-sky {
            color: #0a0a0a;
            font-weight: 800;
            background: linear-gradient(
                168deg,
                #f0f9ff 0%,
                #bae6fd 24%,
                #38bdf8 52%,
                #0284c7 78%,
                #075985 100%
            );
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.65),
                inset 0 -2px 4px rgba(3, 80, 120, 0.15),
                0 4px 0 #0c4a6e,
                0 8px 20px rgba(0, 0, 0, 0.32),
                0 0 0 1px rgba(14, 116, 144, 0.35);
        }
        .hero-cta-sky .hero-btn-icon {
            color: inherit;
            opacity: 1;
            filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
        }
        .hero-cta-sky:hover {
            filter: brightness(1.07) saturate(1.1);
            transform: translateY(-4px) scale(1.03);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.88),
                inset 0 -2px 4px rgba(3, 80, 120, 0.1),
                0 7px 0 #0c4a6e,
                0 16px 34px rgba(0, 0, 0, 0.4),
                0 0 0 1px rgba(125, 211, 252, 0.6),
                0 0 38px rgba(56, 189, 248, 0.36);
        }
        .hero-cta-sky:active {
            filter: brightness(0.97);
            transform: translateY(1px) scale(0.99);
            box-shadow:
                inset 0 3px 10px rgba(0, 0, 0, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.35),
                0 2px 0 #0c4a6e,
                0 4px 12px rgba(0, 0, 0, 0.26);
        }

        @media (prefers-reduced-motion: reduce) {
            .hero-cta-btn,
            .hero-cta-gold:hover,
            .hero-cta-sky:hover,
            .hero-cta-gold:active,
            .hero-cta-sky:active {
                transition: none;
            }
            .hero-cta-gold:hover,
            .hero-cta-sky:hover {
                transform: none;
            }
            .hero-cta-gold:hover::after,
            .hero-cta-sky:hover::after {
                animation: none;
                opacity: 0;
            }
            .hero-cta-gold:hover::before,
            .hero-cta-sky:hover::before {
                opacity: 0.35;
            }
        }

        /* Scannable ?at a glance? row under primary CTAs */
        .hero-trust-strip {
            max-width: min(52rem, 100%);
            margin-left: auto;
            margin-right: auto;
            padding: 0 0.25rem;
        }
        .hero-trust-strip__inner {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 0.25rem 0.45rem;
            text-align: center;
            font-size: clamp(0.76rem, 1.7vw, 0.9rem);
            line-height: 1.4;
            letter-spacing: 0.02em;
            font-weight: 600;
            color: #e2e8f0;
        }
        .hero-trust-strip__seg {
            text-wrap: balance;
        }
        .hero-trust-strip__em {
            font-style: normal;
            font-weight: 900;
            color: #fde047;
            text-shadow: 0 0 18px rgba(250, 204, 21, 0.2);
        }
        .hero-trust-strip__dot {
            color: rgba(250, 204, 21, 0.45);
            font-weight: 400;
            user-select: none;
        }
        @media (max-width: 480px) {
            .hero-trust-strip__inner { gap: 0.2rem 0.35rem; }
        }

        .hero-platform-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.58rem 1.4rem 0.54rem;
            border-radius: 9999px;
            border: 1px solid transparent;
            background:
                linear-gradient(180deg, rgba(16, 30, 58, 0.96) 0%, rgba(11, 22, 44, 0.98) 100%) padding-box,
                linear-gradient(90deg, rgba(250, 204, 21, 0.92) 0%, rgba(253, 224, 71, 0.75) 55%, rgba(56, 189, 248, 0.55) 100%) border-box;
            color: #f8fafc;
            font-weight: 800;
            letter-spacing: 0.075em;
            text-transform: uppercase;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 3px 14px rgba(0, 0, 0, 0.32);
            transform: translateY(-80%);
            transition:
                box-shadow 0.2s ease,
                transform 0.2s ease,
                background 0.2s ease;
            cursor: default;
            position: relative;
        }
        .hero-platform-badge .fa-crown {
            font-size: 0.9rem;
            color: #facc15;
            line-height: 1;
        }
        .hero-platform-badge-text {
            font-size: clamp(0.68rem, 2vw, 0.84rem);
            line-height: 1.25;
            color: #fafafa;
            -webkit-text-fill-color: #fafafa;
        }
        .hero-platform-badge:hover {
            background:
                linear-gradient(180deg, rgba(20, 36, 68, 0.97) 0%, rgba(12, 26, 50, 0.99) 100%) padding-box,
                linear-gradient(90deg, rgba(253, 224, 71, 0.98) 0%, rgba(250, 204, 21, 0.85) 55%, rgba(56, 189, 248, 0.65) 100%) border-box;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                0 4px 16px rgba(0, 0, 0, 0.36);
            transform: translateY(calc(-80% - 2px));
        }
        .hero-platform-badge:active {
            transform: translateY(-80%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 2px 10px rgba(0, 0, 0, 0.28);
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-platform-badge:hover,
            .hero-platform-badge:active {
                transform: translateY(-80%);
            }
        }

        .hero-tools-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.35rem;
            width: 100%;
            max-width: 57rem;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0.5rem;
            align-items: stretch;
        }
        @media (min-width: 1024px) {
            .hero-tools-row {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        .otr-hero-national-award {
            position: relative;
            width: 100%;
            max-width: 57rem;
            margin: clamp(2rem, 5vw, 3.25rem) auto clamp(2.25rem, 5.5vw, 3.5rem);
            padding: clamp(1.15rem, 3vw, 1.45rem) clamp(1rem, 2.5vw, 1.35rem) clamp(1.2rem, 3vw, 1.5rem);
            border-radius: 16px;
            text-align: center;
            box-sizing: border-box;
            background:
                radial-gradient(92% 72% at 12% 8%, rgba(250, 204, 21, 0.1) 0%, transparent 55%),
                radial-gradient(88% 68% at 88% 92%, rgba(56, 189, 248, 0.1) 0%, transparent 52%),
                linear-gradient(168deg, rgba(8, 12, 28, 0.98) 0%, rgba(14, 20, 42, 0.94) 52%, rgba(6, 10, 24, 0.98) 100%);
            border: 1px solid transparent;
            background-clip: padding-box;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.09),
                0 16px 44px rgba(0, 0, 0, 0.48),
                0 0 36px rgba(250, 204, 21, 0.06);
        }
        .otr-hero-national-award::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 16px;
            padding: 1px;
            background: linear-gradient(135deg, rgba(253, 224, 71, 0.78) 0%, rgba(56, 189, 248, 0.42) 48%, rgba(253, 224, 71, 0.58) 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        .otr-hero-national-award::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 16px;
            background-image: radial-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px);
            background-size: 14px 14px;
            opacity: 0.2;
            pointer-events: none;
        }
        .otr-hero-national-award__head {
            position: relative;
            z-index: 1;
            margin-bottom: clamp(1rem, 2.8vw, 1.35rem);
            padding: 0 0.35rem;
        }
        .otr-hero-national-award__badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            margin: 0 0 0.65rem;
            padding: 0.32rem 0.85rem;
            border-radius: 999px;
            font-size: clamp(0.62rem, 1.8vw, 0.72rem);
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #fef9c3;
            background: linear-gradient(180deg, rgba(250, 204, 21, 0.22) 0%, rgba(250, 204, 21, 0.08) 100%);
            border: 1px solid rgba(253, 224, 71, 0.45);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }
        .otr-hero-national-award__badge .fa-award {
            color: #facc15;
            font-size: 0.85em;
        }
        .otr-hero-national-award__title {
            margin: 0 0 0.75rem;
            font-size: clamp(1.15rem, 3.4vw, 1.65rem);
            font-weight: 800;
            line-height: 1.28;
            letter-spacing: 0.01em;
        }
        .otr-hero-national-award__title-gold {
            display: block;
            color: #facc15;
            -webkit-text-fill-color: #facc15;
        }
        .otr-hero-national-award__title-rest {
            color: #f8fafc;
            -webkit-text-fill-color: #f8fafc;
            font-weight: 700;
        }
        .otr-hero-national-award__lead {
            margin: 0 auto;
            max-width: 42rem;
            font-size: clamp(0.82rem, 2.2vw, 0.98rem);
            font-weight: 500;
            line-height: 1.62;
            color: rgba(255, 255, 255, 0.55);
            -webkit-text-fill-color: rgba(255, 255, 255, 0.55);
        }
        .otr-hero-national-award__em {
            color: #fef08a;
            font-weight: 700;
        }
        .otr-hero-national-award__rule {
            width: min(12rem, 55%);
            height: 2px;
            margin: 1rem auto 0;
            border-radius: 2px;
            background: linear-gradient(90deg, transparent, rgba(253, 224, 71, 0.85) 20%, rgba(56, 189, 248, 0.55) 80%, transparent);
            opacity: 0.9;
        }
        .otr-hero-national-award__frame {
            position: relative;
            z-index: 1;
            margin: 0;
            padding: 0.35rem;
            border-radius: 12px;
            background: linear-gradient(145deg, rgba(253, 224, 71, 0.35) 0%, rgba(15, 23, 42, 0.85) 40%, rgba(56, 189, 248, 0.25) 100%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.14),
                0 10px 32px rgba(0, 0, 0, 0.42);
        }
        .otr-hero-national-award__img {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 1280 / 714;
            border-radius: 9px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            object-fit: cover;
            object-position: center;
        }

        .district-vs-strip {
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 100%;
            min-height: 0;
            margin-left: 0;
            margin-right: 0;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            text-align: left;
            border-radius: 16px;
            padding: 1.05rem 1.1rem 1.15rem;
        }
        #district-vs.province-vs-card {
            background:
                radial-gradient(90% 70% at 8% 12%, rgba(250, 204, 21, 0.11) 0%, transparent 52%),
                radial-gradient(85% 65% at 92% 88%, rgba(56, 189, 248, 0.12) 0%, transparent 50%),
                linear-gradient(168deg, rgba(8, 12, 28, 0.98) 0%, rgba(14, 20, 42, 0.94) 52%, rgba(6, 10, 24, 0.98) 100%);
            border: 1px solid transparent;
            background-clip: padding-box;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 16px 44px rgba(0, 0, 0, 0.48);
        }
        #district-vs.province-vs-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 16px;
            padding: 1px;
            background: linear-gradient(135deg, rgba(253, 224, 71, 0.75) 0%, rgba(56, 189, 248, 0.45) 48%, rgba(253, 224, 71, 0.55) 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        #district-vs.province-vs-card::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 16px;
            background-image: radial-gradient(rgba(148, 163, 184, 0.14) 1px, transparent 1px);
            background-size: 14px 14px;
            opacity: 0.22;
            pointer-events: none;
        }
        .district-vs-inner {
            position: relative;
            z-index: 1;
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            min-height: 0;
        }
        #district-vs .district-vs-head {
            text-align: center;
            padding: 0.2rem 0.5rem 0.55rem;
            margin: 0 -0.15rem 0.15rem;
            border-bottom: none;
        }
        #district-vs .province-vs-subtitle {
            margin: 0.35rem 0 0;
            font-size: 0.68rem;
            font-weight: 500;
            letter-spacing: 0.02em;
            line-height: 1.45;
            color: rgba(226, 232, 240, 0.82);
        }
        #district-vs .province-vs-head-rule {
            height: 1px;
            margin: 0.65rem auto 0;
            max-width: 92%;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(250, 204, 21, 0.55) 18%,
                rgba(255, 255, 255, 0.75) 50%,
                rgba(56, 189, 248, 0.55) 82%,
                transparent 100%
            );
        }
        #district-vs .district-vs-select-panel {
            background: rgba(2, 8, 23, 0.55);
            border: 1px solid rgba(148, 163, 184, 0.18);
            border-radius: 12px;
            padding: 0.85rem 0.75rem;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 0 0 1px rgba(0, 0, 0, 0.35),
                0 0 24px rgba(56, 189, 248, 0.06);
            margin-top: 1.1rem;
        }
        .district-vs-actions {
            margin-top: 3.25rem;
            padding-top: 0;
        }
        #district-vs .district-vs-title {
            text-align: center;
            font-size: 0.875rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            line-height: 1.35;
            margin: 0;
            padding: 0;
        }
        #district-vs .district-vs-district-word--gold {
            color: #facc15;
        }
        #district-vs .district-vs-district-word--sky {
            color: #bae6fd;
        }
        #district-vs .district-vs-title .district-vs-vs-word {
            position: relative;
            display: inline-block;
            font-family: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
            font-weight: 400;
            font-size: 1.45em;
            line-height: 1;
            letter-spacing: 0.24em;
            text-indent: 0.1em;
            padding: 0.22em 0.68em 0.16em;
            margin: 0 0.2em;
            vertical-align: middle;
            text-transform: uppercase;
            color: #f8fafc;
            background: #0f172a;
            border: 1px solid rgba(148, 163, 184, 0.38);
            border-top-color: #eab308;
            border-bottom-color: #0ea5e9;
            border-radius: 6px;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
            transform: skewX(-8deg);
        }
        #district-vs .district-vs-title .district-vs-vs-inner {
            position: relative;
            z-index: 1;
            display: inline-block;
            transform: skewX(8deg);
            letter-spacing: 0.22em;
        }
        .district-vs-selects {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            justify-content: center;
            gap: 0.75rem;
            width: 100%;
            max-width: 24rem;
            margin-left: auto;
            margin-right: auto;
        }
        #district-vs .province-vs-vs-ring {
            flex-shrink: 0;
            align-self: center;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.38rem;
            height: 2.38rem;
            padding: 0;
            border-radius: 50%;
            border: 1px solid transparent;
            background:
                linear-gradient(#0f172a, #0f172a) padding-box,
                linear-gradient(90deg, #eab308 0%, #eab308 50%, #0ea5e9 50%, #0ea5e9 100%) border-box;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
            box-sizing: border-box;
        }
        #district-vs .province-vs-vs-inner {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.1rem;
            margin: 0;
            padding: 0;
            font-family: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
            font-weight: 400;
            line-height: 1;
            transform: translate(0, 0.07rem);
        }
        #district-vs .province-vs-vs-letter {
            font-family: inherit;
            font-size: 1.2rem;
            font-weight: 400;
            line-height: 1;
            color: #f8fafc;
            display: block;
        }
        #district-vs .district-vs-select-wrap {
            position: relative;
            flex: 1 1 0;
            min-width: 0;
            max-width: 11rem;
        }
        #district-vs .province-vs-pin {
            position: absolute;
            left: 0.48rem;
            top: 50%;
            transform: translateY(-50%);
            font-size: 0.62rem;
            pointer-events: none;
            z-index: 2;
        }
        #district-vs .province-vs-pin--gold {
            color: #facc15;
        }
        #district-vs .province-vs-pin--sky {
            color: #38bdf8;
        }
        #district-vs .district-select {
            width: 100%;
            max-width: 100%;
            background: rgba(15, 23, 42, 0.88);
            color: #f8fafc;
            border-radius: 10px;
            padding: 0.42rem 0.55rem 0.42rem 1.45rem;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s;
            appearance: auto;
            color-scheme: light;
        }
        #district-vs .district-vs-select-wrap--a .district-select {
            border: 1px solid rgba(250, 204, 21, 0.55);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 0 14px rgba(250, 204, 21, 0.08);
        }
        #district-vs .district-vs-select-wrap--b .district-select {
            border: 1px solid rgba(56, 189, 248, 0.55);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 0 14px rgba(56, 189, 248, 0.1);
        }
        #district-vs .district-vs-select-wrap--a .district-select:focus {
            outline: none;
            border-color: rgba(253, 224, 71, 0.95);
            box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.22);
        }
        #district-vs .district-vs-select-wrap--b .district-select:focus {
            outline: none;
            border-color: rgba(56, 189, 248, 0.95);
            box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.22);
        }
        #district-vs .district-vs-select-wrap--a .district-select:hover {
            border-color: rgba(253, 224, 71, 0.85);
        }
        #district-vs .district-vs-select-wrap--b .district-select:hover {
            border-color: rgba(56, 189, 248, 0.85);
        }
        .district-select {
            width: 100%;
            max-width: 100%;
            cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s ease;
            appearance: auto;
            color-scheme: light;
        }
        .district-select option,
        .district-select optgroup {
            background-color: #ffffff;
            color: #0f172a;
            font-weight: 600;
            font-size: 0.9rem;
            padding: 0.35rem 0.5rem;
        }
        .district-select option:checked,
        .district-select option:focus {
            background-color: #fef08a;
            color: #0f172a;
        }
        .district-select:hover {
            border-color: rgba(253, 224, 71, 0.65);
        }
        .district-select:focus {
            outline: none;
            border-color: rgba(253, 224, 71, 0.9);
            box-shadow:
                0 0 0 2px rgba(255, 215, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        .otr-district-combobox {
            position: relative;
            width: 100%;
            /* Match native registration <select> list highlight (Class, Province, etc.) */
            --otr-district-list-highlight: #0078d4;
            --otr-district-list-highlight-text: #ffffff;
        }
        .otr-district-combobox__control {
            display: flex;
            align-items: stretch;
            gap: 0.2rem;
            padding: 0 0.35rem 0 0;
            min-height: 0;
            cursor: text;
        }
        .otr-district-combobox__control:focus-within {
            outline: none;
            border-color: rgba(253, 224, 71, 0.9);
            box-shadow:
                0 0 0 2px rgba(255, 215, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        .otr-district-combobox.is-open .otr-district-combobox__control {
            border-color: rgba(253, 224, 71, 0.9);
            box-shadow:
                0 0 0 2px rgba(255, 215, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }
        .otr-district-combobox__input {
            flex: 1 1 auto;
            min-width: 0;
            border: 0;
            background: transparent;
            color: #f8fafc;
            font: inherit;
            font-size: 1rem;
            line-height: 1.35;
            padding: 0.58rem 0.45rem 0.58rem 0.8rem;
            margin: 0;
            box-sizing: border-box;
        }
        .otr-district-combobox__input::placeholder {
            color: #94a3b8;
        }
        .otr-district-combobox.is-open .otr-district-combobox__input::placeholder {
            color: #cbd5e1;
        }
        .otr-district-combobox__input:disabled {
            cursor: not-allowed;
            opacity: 0.72;
        }
        .otr-district-combobox__input:focus {
            outline: none;
        }
        .otr-district-combobox__toggle {
            flex: 0 0 auto;
            align-self: center;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            margin: 0;
            padding: 0;
            border: 0;
            border-radius: 0.45rem;
            background: transparent;
            color: rgba(253, 224, 71, 0.92);
            cursor: pointer;
            transition: background-color 0.15s ease, color 0.15s ease;
        }
        .otr-district-combobox__toggle:hover:not(:disabled) {
            background: rgba(255, 255, 255, 0.06);
        }
        .otr-district-combobox__toggle:disabled {
            opacity: 0.45;
            cursor: not-allowed;
        }
        .otr-district-combobox.is-open .otr-district-combobox__toggle i {
            transform: rotate(180deg);
        }
        .otr-district-combobox__toggle i {
            transition: transform 0.18s ease;
            pointer-events: none;
        }
        .otr-district-combobox__listbox {
            position: absolute;
            z-index: 2400;
            left: 0;
            right: 0;
            top: calc(100% + 0.28rem);
            margin: 0;
            padding: 0.28rem 0;
            list-style: none;
            max-height: min(16rem, 42vh);
            overflow-y: auto;
            border-radius: 10px;
            border: 1px solid rgba(100, 116, 139, 0.55);
            background: #ffffff;
            color: #0f172a;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
        }
        .otr-district-combobox__option {
            padding: 0.42rem 0.85rem;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            line-height: 1.35;
            color: #0f172a;
        }
        .otr-district-combobox__option.is-active,
        .otr-district-combobox__option:not(.otr-district-combobox__option--empty):hover {
            background-color: var(--otr-district-list-highlight);
            color: var(--otr-district-list-highlight-text);
        }
        .otr-district-combobox__option--empty {
            cursor: default;
            color: #64748b;
            font-weight: 500;
        }
        .otr-district-combobox__option--empty:hover {
            background: transparent;
        }
        .otr-district-combobox__native {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        #form-student-reg > .reg-group:nth-child(3) > .otr-district-combobox,
        #dt-entry-form > .reg-group:nth-child(3) > .otr-district-combobox {
            margin-bottom: var(--otr-stu-field-box-gap);
        }
        #form-teacher-reg > .reg-group:nth-child(3) > .otr-district-combobox {
            margin-bottom: 0;
        }
        #form-student-reg .otr-district-combobox__control,
        #form-teacher-reg .otr-district-combobox__control,
        #dt-entry-form .otr-district-combobox__control {
            border-radius: 10px;
            border-color: var(--otr-reg-field-border-empty);
            background-color: var(--otr-reg-field-bg-empty);
        }
        #form-student-reg .otr-district-combobox:has(.otr-district-combobox__input:not(:placeholder-shown)) .otr-district-combobox__control,
        #form-teacher-reg .otr-district-combobox:has(.otr-district-combobox__input:not(:placeholder-shown)) .otr-district-combobox__control,
        #dt-entry-form .otr-district-combobox:has(.otr-district-combobox__input:not(:placeholder-shown)) .otr-district-combobox__control {
            border-color: var(--otr-reg-field-border);
            background-color: var(--otr-reg-field-bg-filled);
            box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.1);
        }
        #form-student-reg .otr-district-combobox.is-open .otr-district-combobox__control,
        #form-teacher-reg .otr-district-combobox.is-open .otr-district-combobox__control,
        #form-student-reg .otr-district-combobox__control:focus-within,
        #form-teacher-reg .otr-district-combobox__control:focus-within,
        #dt-entry-form .otr-district-combobox.is-open .otr-district-combobox__control,
        #dt-entry-form .otr-district-combobox__control:focus-within {
            border-color: var(--otr-reg-field-border);
            background-color: var(--otr-reg-field-bg-filled);
        }
        #form-student-reg .otr-district-combobox__input,
        #form-teacher-reg .otr-district-combobox__input,
        #dt-entry-form .otr-district-combobox__input {
            color: #e2e8f0;
            font-size: 0.8125rem;
            line-height: 1.25;
        }
        #form-student-reg .otr-city-combobox .otr-district-combobox__input,
        #form-teacher-reg .otr-city-combobox .otr-district-combobox__input,
        #dt-entry-form .otr-city-combobox .otr-district-combobox__input {
            border: 0 !important;
            background: transparent !important;
            box-shadow: none !important;
            border-radius: 0;
        }
        .district-compare-btn {
            flex-shrink: 0;
            cursor: pointer;
            transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
        }
        #district-vs .province-vs-compare-btn {
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 0.54rem 1.35rem;
            border-radius: 9999px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            color: #0a0c1a;
            background: linear-gradient(165deg, #fffef5 0%, #fde047 42%, #eab308 100%);
            box-shadow:
                inset 0 2px 0 rgba(255, 255, 255, 0.75),
                0 0 20px rgba(250, 204, 21, 0.28),
                0 4px 14px rgba(0, 0, 0, 0.35);
        }
        #district-vs .province-vs-compare-inner {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
        }
        #district-vs .province-vs-compare-icon {
            font-size: 0.75rem;
        }
        #district-vs .province-vs-compare-arrow {
            font-size: 0.9rem;
            font-weight: 900;
            line-height: 1;
            opacity: 0.85;
        }
        #district-vs .province-vs-compare-btn:hover {
            filter: brightness(1.05);
            transform: translateY(-1px);
            box-shadow:
                inset 0 2px 0 rgba(255, 255, 255, 0.8),
                0 0 26px rgba(250, 204, 21, 0.35),
                0 6px 18px rgba(0, 0, 0, 0.38);
        }
        #district-vs .province-vs-compare-btn:active {
            filter: brightness(0.98);
            transform: translateY(1px);
            box-shadow:
                inset 0 2px 6px rgba(0, 0, 0, 0.18),
                0 2px 10px rgba(0, 0, 0, 0.28);
        }
        #province-compare-modal {
            align-items: flex-start;
            overflow-y: auto;
            padding: 0.85rem 0.65rem;
        }
        .province-compare-modal-shell {
            max-width: 980px;
            width: min(94vw, 980px);
            max-height: min(94vh, 760px);
            overflow: auto;
            margin: auto;
            padding: 1.15rem 1rem 1rem;
            border-radius: 22px;
            border: 1px solid rgba(250, 204, 21, 0.34);
            background:
                radial-gradient(120% 90% at 0% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 55%),
                radial-gradient(120% 90% at 100% 0%, rgba(250, 204, 21, 0.1) 0%, transparent 55%),
                linear-gradient(165deg, rgba(15, 23, 42, 0.96) 0%, rgba(6, 11, 26, 0.96) 100%);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }
        .province-compare-modal-shell > h2 {
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
            font-weight: 800;
            letter-spacing: 0.01em;
            line-height: 1.2;
        }
        .province-compare-modal-shell > p {
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
            line-height: 1.45;
        }
        .province-compare-formula {
            margin: 0 0 0.5rem;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: #fde68a;
            border: 1px solid rgba(250, 204, 21, 0.28);
            background: rgba(120, 53, 15, 0.16);
            border-radius: 9999px;
            padding: 0.22rem 0.55rem;
            display: inline-flex;
        }
        .province-compare-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.8rem;
        }
        .province-compare-card {
            border: 1px solid rgba(148, 163, 184, 0.28);
            border-radius: 14px;
            background: linear-gradient(165deg, rgba(2, 6, 23, 0.74) 0%, rgba(6, 11, 26, 0.74) 100%);
            padding: 0.82rem 0.78rem;
        }
        .province-compare-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            margin-bottom: 0.45rem;
        }
        .province-compare-card-head h3 {
            margin: 0;
            font-size: 1rem;
            font-weight: 800;
            color: #f8fafc;
            line-height: 1.2;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        .province-compare-pps {
            border: 1px solid rgba(250, 204, 21, 0.45);
            border-radius: 9999px;
            padding: 0.16rem 0.56rem;
            font-size: 0.72rem;
            font-weight: 800;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        .province-compare-badge-row {
            display: flex;
            gap: 0.4rem;
            flex-wrap: wrap;
            min-height: 1.4rem;
            margin-bottom: 0.22rem;
        }
        .province-compare-badge {
            display: inline-flex;
            align-items: center;
            border: 1px solid rgba(250, 204, 21, 0.36);
            border-radius: 9999px;
            padding: 0.08rem 0.5rem;
            font-size: 0.64rem;
            font-weight: 600;
            color: #fde68a;
            background: rgba(120, 53, 15, 0.18);
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        .province-compare-badge--sky {
            border-color: rgba(56, 189, 248, 0.4);
            color: #bae6fd;
            background: rgba(14, 116, 144, 0.2);
        }
        .province-compare-metric {
            margin-top: 0.4rem;
            display: flex;
            justify-content: space-between;
            gap: 0.45rem;
            font-size: 0.75rem;
            color: #dbeafe;
            font-weight: 600;
            line-height: 1.35;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        .province-compare-metric strong {
            color: #f8fafc;
            font-weight: 800;
        }
        .province-compare-bar {
            margin-top: 0.18rem;
            height: 7px;
            border-radius: 9999px;
            background: rgba(30, 41, 59, 0.78);
            overflow: hidden;
        }
        .province-compare-bar > span {
            display: block;
            height: 100%;
            border-radius: inherit;
            min-width: 0;
            transition: width 550ms cubic-bezier(0.22, 1, 0.36, 1);
        }
        .province-compare-mini {
            margin-top: 0.48rem;
            font-size: 0.67rem;
            line-height: 1.45;
            color: #bfdbfe;
            font-weight: 600;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        .province-compare-summary {
            margin-top: 0.82rem;
            border: 1px solid rgba(148, 163, 184, 0.24);
            border-radius: 12px;
            background: rgba(2, 6, 23, 0.68);
            padding: 0.76rem 0.82rem;
        }
        .province-compare-summary p {
            margin: 0.24rem 0;
            font-size: 0.75rem;
            line-height: 1.48;
            color: #e2e8f0;
            font-weight: 500;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        .province-compare-summary strong {
            color: #f8fafc;
            font-weight: 700;
        }
        @media (max-width: 760px) {
            .province-compare-grid {
                grid-template-columns: 1fr;
            }
            .province-compare-modal-shell {
                width: min(96vw, 980px);
                max-height: min(95vh, 760px);
                padding: 0.95rem 0.72rem 0.86rem;
            }
        }

        .top10-launch-card {
            width: 100%;
            height: 100%;
            min-height: 0;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0.85rem;
            padding: 1.05rem 1.1rem 1.15rem;
            text-align: center;
            box-sizing: border-box;
            font-family: inherit;
            border: 1px solid rgba(250, 204, 21, 0.4);
            border-radius: 16px;
            background:
                linear-gradient(180deg, rgba(250, 204, 21, 0.07) 0%, transparent 35%),
                linear-gradient(155deg, rgba(15, 23, 42, 0.94) 0%, rgba(22, 20, 48, 0.88) 50%, rgba(15, 23, 42, 0.92) 100%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.09),
                0 12px 40px rgba(0, 0, 0, 0.4),
                0 0 32px rgba(250, 204, 21, 0.08);
            backdrop-filter: blur(14px);
            transition:
                border-color 0.3s var(--otr-ease-smooth),
                box-shadow 0.3s var(--otr-ease-smooth),
                transform 0.3s var(--otr-ease-smooth);
        }
        .top10-launch-card:hover {
            border-color: rgba(253, 224, 71, 0.55);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                0 18px 52px rgba(0, 0, 0, 0.48),
                0 0 44px rgba(250, 204, 21, 0.14);
            transform: translateY(-3px);
        }
        @media (prefers-reduced-motion: reduce) {
            .top10-launch-card {
                transition: none;
            }
            .top10-launch-card:hover {
                transform: none;
            }
        }
        .top10-launch-position-badge {
            position: absolute;
            top: 0.42rem;
            right: 0.48rem;
            z-index: 8;
            pointer-events: none;
            filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
        }
        .top10-launch-position-stack {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.2rem;
        }
        .top10-launch-position-class {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-width: 3.5rem;
            max-width: 4.1rem;
            min-height: 1.15rem;
            margin: 0;
            padding: 0.16rem 0.28rem 0.14rem;
            border-radius: 3px;
            background-color: #fffdf7;
            background-image: linear-gradient(180deg, #ffffff 0%, #fffbeb 55%, #fef3c7 100%);
            border: 1px solid rgba(180, 160, 120, 0.45);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.95),
                0 1px 2px rgba(15, 23, 42, 0.12);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            color: #000000;
            text-align: center;
            line-height: 1;
            white-space: nowrap;
            text-shadow: none;
        }
        .top10-launch-position-class:empty {
            display: none;
        }
        .top10-rank-badge-face {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.2rem;
            min-width: 3.5rem;
            padding: 0.42rem 0.55rem 0.52rem;
            background: linear-gradient(
                165deg,
                #fffef5 0%,
                #fef08a 18%,
                #fde047 38%,
                #eab308 58%,
                #ca8a04 78%,
                #a16207 100%
            );
            clip-path: polygon(50% 0%, 100% 14%, 100% 66%, 50% 100%, 0% 66%, 0% 14%);
            box-shadow:
                0 0 0 2px rgba(15, 23, 42, 0.95),
                0 0 0 4px #facc15,
                0 0 0 6px rgba(15, 23, 42, 0.9),
                inset 0 2px 0 rgba(255, 255, 255, 0.65),
                inset 0 -3px 8px rgba(180, 83, 9, 0.35);
        }
        .top10-rank-badge-icon {
            font-size: 0.62rem;
            color: #92400e;
            line-height: 1;
            filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.4));
        }
        .top10-rank-badge-num {
            font-family: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
            font-size: 1.52rem;
            font-weight: 400;
            line-height: 0.9;
            letter-spacing: 0.03em;
            white-space: nowrap;
            color: #0f172a;
            text-shadow:
                0 1px 0 rgba(255, 255, 255, 0.55),
                0 -1px 0 rgba(146, 64, 14, 0.12);
        }
        .top10-launch-card .top10-launch-title {
            position: relative;
            z-index: 1;
            display: flex;
            flex-wrap: nowrap;
            align-items: baseline;
            justify-content: center;
            gap: 0.3em;
            max-width: 100%;
            font-size: clamp(0.7rem, 1.4vw, 0.9rem);
            font-weight: 900;
            letter-spacing: 0.08em;
            line-height: 1.25;
            padding: 0.15rem 0.6rem 0.1rem;
            margin: 0;
        }
        .top10-launch-card .top10-launch-title .top10-heading-gold {
            color: #FFD700;
            text-transform: uppercase;
            flex: 0 1 auto;
            min-width: 0;
        }
        .top10-launch-card .top10-launch-title .top10-heading-date {
            color: #ecfdf5;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: none;
            font-size: 0.76em;
            line-height: 1.2;
            white-space: nowrap;
            flex: 0 0 auto;
            text-shadow: 0 0 1.25em rgba(250, 204, 21, 0.32), 0 1px 0 rgba(15, 23, 42, 0.4);
        }
        @media (max-width: 22rem) {
            .top10-launch-card .top10-launch-title {
                flex-wrap: wrap;
                row-gap: 0.2rem;
            }
        }
        .top10-launch-head {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0.35rem;
            width: 100%;
            margin-bottom: 0.2rem;
        }
        .top10-launch-stats {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.28rem 0.32rem;
            padding: 0.28rem 0.4rem 0.32rem;
            border-radius: 10px;
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(30, 41, 59, 0.88) 100%);
            border: 1px solid rgba(250, 204, 21, 0.35);
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.35) inset,
                0 4px 14px rgba(0, 0, 0, 0.25);
        }
        .top10-launch-stat {
            flex: 1 1 auto;
            min-width: 3.2rem;
            max-width: 7.5rem;
            padding: 0.2rem 0.32rem 0.22rem;
            border-radius: 7px;
            background: rgba(2, 6, 23, 0.75);
            border: 1px solid rgba(253, 224, 71, 0.22);
            text-align: center;
        }
        .top10-launch-stat-lbl {
            display: block;
            font-size: 0.58rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(253, 224, 71, 0.82);
            line-height: 1.2;
            margin-bottom: 0.06rem;
        }
        .top10-launch-stat-val {
            display: block;
            font-size: clamp(0.62rem, 1.5vw, 0.72rem);
            font-weight: 500;
            color: #f8fafc;
            line-height: 1.35;
            white-space: normal;
            overflow-wrap: break-word;
            word-break: normal;
        }
        .top10-modal-stats-banner {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.35rem 0.4rem;
            width: 100%;
            margin: 0 0 0.85rem;
            padding: 0.45rem 0.4rem 0.48rem;
            border-radius: 14px;
            background: linear-gradient(145deg, rgba(30, 27, 8, 0.55) 0%, rgba(15, 23, 42, 0.95) 45%, rgba(2, 6, 23, 0.98) 100%);
            border: 1px solid rgba(250, 204, 21, 0.42);
            box-shadow:
                0 0 20px rgba(250, 204, 21, 0.12),
                0 1px 0 rgba(255, 255, 255, 0.06) inset;
        }
        .top10-stat-chip {
            flex: 1 1 calc(25% - 0.4rem);
            min-width: 4.25rem;
            max-width: 11rem;
            padding: 0.38rem 0.45rem 0.42rem;
            border-radius: 11px;
            background: linear-gradient(180deg, rgba(51, 65, 85, 0.45) 0%, rgba(15, 23, 42, 0.9) 100%);
            border: 1px solid rgba(253, 224, 71, 0.28);
            text-align: center;
        }
        .top10-stat-chip--wide {
            flex: 1 1 100%;
            max-width: 100%;
        }
        @media (min-width: 380px) {
            .top10-stat-chip--wide {
                flex: 1 1 calc(50% - 0.35rem);
                max-width: none;
            }
        }
        @media (min-width: 480px) {
            .top10-stat-chip--wide {
                flex: 1 1 calc(25% - 0.35rem);
            }
        }
        .top10-stat-chip-lbl {
            display: block;
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(253, 224, 71, 0.88);
            margin-bottom: 0.12rem;
        }
        .top10-stat-chip-val {
            display: block;
            font-size: clamp(0.76rem, 2.4vw, 0.82rem);
            font-weight: 500;
            letter-spacing: 0.02em;
            color: #f1f5f9;
            line-height: 1.35;
            overflow-wrap: break-word;
            word-break: normal;
        }
        /* Subject on its own row so long names (e.g. Mathematics, AI) are not squeezed into a quarter width */
        .top10-modal-stats-banner .top10-stat-chip--wide {
            flex: 1 1 100%;
            max-width: 100%;
        }
        .top10-launch-body {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            min-height: 0;
            text-align: left;
        }
        .top10-launch-preview {
            position: relative;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem 0.65rem;
            padding: 0.55rem 0.65rem 0.85rem 0.55rem;
            width: 100%;
            border-radius: 8px;
            background: rgba(10, 12, 28, 0.92);
            border: 1px solid rgba(255, 215, 0, 0.38);
            text-align: left;
            min-height: 0;
        }
        /* Single-pass transition: opacity 1?0.95 with subtle lift.
           Premium feel: slower duration, subtle effect, identical for all cards. */
        .top10-launch-preview.top10-fade {
            opacity: 0.95;
            transform: translateY(-2px);
            transition: opacity 0.4s ease-out, transform 0.4s ease-out;
        }
        .top10-preview-photo-btn {
            flex-shrink: 0;
            padding: 0;
            margin: 0;
            border: none;
            background: transparent;
            cursor: pointer;
            border-radius: 50%;
            line-height: 0;
            position: relative;
            z-index: 6;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .top10-preview-photo-btn:hover {
            transform: scale(1.04);
            box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.45);
        }
        .top10-preview-photo-btn:focus-visible {
            outline: 2px solid #facc15;
            outline-offset: 3px;
        }
        .top10-preview-photo-btn .top10-preview-photo {
            display: block;
            width: 4.35rem;
            height: 4.35rem;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255, 215, 0, 0.55);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
        }
        .top10-preview-fields {
            min-width: 0;
            flex: 1;
            padding-right: 4.25rem;
            padding-top: 0;
            position: relative;
            z-index: 6;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        .top10-preview-name-line {
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.28rem;
            line-height: 1.35;
            width: 100%;
            min-width: 0;
        }
        .top10-preview-name {
            display: block;
            width: 100%;
            min-width: 0;
            font-size: clamp(1rem, 2.2vw, 1.15rem);
            font-weight: 900;
            color: #facc15;
            letter-spacing: 0.02em;
            line-height: 1.3;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
        }
        .top10-preview-name-sep {
            display: none;
        }
        .top10-preview-sdo-inline {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 0.2rem 0.35rem;
            max-width: 100%;
            min-width: 0;
            font-size: clamp(0.78rem, 1.45vw, 0.88rem);
            font-weight: 700;
            color: #f1f5f9;
            line-height: 1.35;
        }
        .top10-preview-sdo-label {
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #94a3b8;
            flex-shrink: 0;
        }
        .top10-preview-sdo {
            font-weight: 700;
            color: #f1f5f9;
            min-width: 0;
            word-break: break-word;
        }
        .top10-preview-school,
        .top10-school-highlight {
            display: inline-block;
            box-sizing: border-box;
            max-width: 100%;
            font-size: clamp(0.78rem, 1.55vw, 0.88rem);
            font-weight: 800;
            color: #0a0c1a;
            background: linear-gradient(165deg, #fffef7 0%, #fff9c4 10%, #ffeb3b 38%, #eab308 68%, #b45309 100%);
            padding: 0.32rem 0.75rem;
            border-radius: 12px;
            line-height: 1.35;
            letter-spacing: 0.02em;
            text-align: center;
            white-space: normal;
            overflow-wrap: break-word;
            word-break: normal;
            hyphens: auto;
            border: 1px solid rgba(180, 120, 10, 0.45);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.58),
                inset 0 -1px 0 rgba(146, 64, 0, 0.2),
                0 2px 0 rgba(0, 0, 0, 0.18),
                0 5px 16px rgba(202, 138, 4, 0.22);
            transform-origin: center center;
        }
        .top10-preview-school.top10-school-banner-pop,
        .top10-school-highlight.top10-school-banner-pop {
            animation: none;
        }
        .top10-preview-school-row {
            flex: 1 1 100%;
            min-width: 0;
            margin: 0.35rem 0 0;
            padding: 0 0.2rem;
            box-sizing: border-box;
            text-align: center;
            overflow: visible;
        }
        .top10-preview-school {
            margin-top: 0;
            width: auto;
            max-width: 100%;
        }
        .top10-preview-city {
            display: block;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            color: #94a3b8;
            margin-top: 0.18rem;
            white-space: nowrap;
        }
        .top10-preview-city:empty { display: none; }
        .top10-school-highlight {
            margin-bottom: 0.55rem;
        }
        .top10-preview-field {
            margin-top: 0.38rem;
        }
        .top10-preview-field-label {
            display: block;
            font-size: 0.65rem;
            font-weight: 800;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #94a3b8;
            margin-bottom: 0.12rem;
        }
        .top10-preview-field-value {
            display: block;
            font-size: clamp(0.8rem, 1.5vw, 0.9rem);
            font-weight: 700;
            color: #f1f5f9;
            line-height: 1.3;
            word-break: break-word;
        }
        .top10-launch-actions {
            margin-top: auto;
            padding-top: 0.5rem;
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.5rem;
            width: 100%;
        }
        .top10-launch-cta-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 0.42em;
            width: 100%;
            min-height: 2.75rem;
            padding: 0.55rem 0.65rem;
            border-radius: 0.75rem;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.6875rem;
            font-weight: 800;
            letter-spacing: 0.055em;
            text-transform: uppercase;
            line-height: 1.3;
            color: #000000;
            text-shadow: none;
            border-style: solid;
            border-width: 1px;
            -webkit-font-smoothing: antialiased;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.33),
                0 1px 2px rgba(15, 23, 42, 0.1),
                0 4px 12px rgba(0, 0, 0, 0.12);
            transition:
                box-shadow 0.2s ease,
                transform 0.18s ease,
                border-color 0.2s ease;
            background: linear-gradient(180deg, #fef9c3 0%, #facc15 50%, #ca8a04 100%);
            border-color: rgba(253, 224, 71, 0.65);
        }
        .top10-launch-cta-btn i {
            font-size: 0.85em;
            color: #000000;
            opacity: 1;
            text-shadow: none;
            filter: none;
        }
        .top10-launch-cta-btn:hover {
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.4),
                0 2px 6px rgba(15, 23, 42, 0.12),
                0 8px 20px rgba(0, 0, 0, 0.14);
            transform: translateY(-0.5px);
        }
        .top10-launch-cta-btn:active {
            transform: translateY(0) scale(0.992);
            box-shadow:
                inset 0 1px 1px rgba(255, 255, 255, 0.28),
                0 1px 2px rgba(0, 0, 0, 0.14);
        }
        .top10-launch-cta-btn:focus-visible {
            outline: 2px solid rgba(226, 232, 240, 0.55);
            outline-offset: 2px;
        }

        /* National program: editorial heading (How Every Round Works) */
        .national-program-shell {
            position: relative;
            padding: 0.9rem 0.95rem 0.95rem;
            border-radius: 18px;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background:
                radial-gradient(ellipse at 50% -22%, rgba(56, 189, 248, 0.1) 0%, transparent 56%),
                linear-gradient(180deg, rgba(2, 10, 28, 0.5), rgba(2, 6, 23, 0.24));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 22px rgba(0, 0, 0, 0.2);
        }
        .national-program-shell::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background: linear-gradient(115deg, rgba(253, 224, 71, 0.07), transparent 36%, transparent 64%, rgba(56, 189, 248, 0.06));
            opacity: 0.55;
        }
        .national-program-kicker {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 0.82rem;
            padding: 0.3rem 0.78rem 0.32rem;
            border-radius: 9999px;
            border: 1px solid rgba(126, 34, 206, 0.45);
            background: linear-gradient(180deg, rgba(88, 28, 135, 0.72), rgba(59, 7, 100, 0.78));
            color: #ffffff;
            font-size: 0.67rem;
            font-weight: 600;
            letter-spacing: 0.13em;
            text-transform: uppercase;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
            text-shadow: none;
            transform: translateZ(0);
        }
        .national-program-head {
            font-family: 'Inter', sans-serif;
            font-weight: 900;
            font-size: clamp(1.95rem, 5vw, 3.05rem);
            line-height: 1.08;
            letter-spacing: -0.028em;
            color: #f8fafc;
            text-align: center;
            max-width: 32rem;
            margin: 0 auto 0.82rem;
        }
        .national-program-head__accent {
            display: block;
            margin-top: 0.1em;
            color: #fde047;
            font-weight: 800;
            text-shadow: none;
            font-size: clamp(1.45rem, 4vw, 2.2rem);
            letter-spacing: -0.02em;
        }
        .national-program-head__sep {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 0.25rem;
            color: #facc15;
            font-weight: 800;
            font-size: 0.92em;
            line-height: 1;
        }
        .national-program-sub {
            font-size: clamp(0.95rem, 2.1vw, 1.05rem);
            font-weight: 500;
            color: #9fb0c7;
            letter-spacing: 0.01em;
            text-align: center;
            max-width: 30rem;
            margin: 0 auto 1.65rem;
        }
        .national-program-divider {
            width: 3rem;
            height: 3px;
            border-radius: 2px;
            background: linear-gradient(90deg, #fde047, #eab308);
            margin: 0 auto 1.75rem;
        }
        .national-program-lead {
            color: #d5deed;
            font-size: clamp(1rem, 2.25vw, 1.24rem);
            line-height: 1.52;
            margin: 0 auto 1.05rem;
            max-width: 48rem;
            text-wrap: balance;
            font-weight: 500;
        }
        .national-program-lead-highlight {
            color: #facc15;
        }
        .national-program-timeline {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            gap: 0;
            flex-wrap: wrap;
            margin: 0 auto 2.2rem;
            max-width: 40rem;
        }
        .national-program-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 7.35rem;
            max-width: 9.5rem;
            position: relative;
            padding: 0.55rem 0.5rem 0.6rem;
            border-radius: 12px;
            border: 1px solid rgba(148, 163, 184, 0.24);
            background:
                radial-gradient(circle at 14% 14%, rgba(56, 189, 248, 0.12) 0%, transparent 44%),
                linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(2, 6, 23, 0.66));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 16px rgba(0, 0, 0, 0.25);
        }
        .national-program-step__num {
            width: 2.95rem;
            height: 2.95rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.02rem;
            font-weight: 900;
            color: #fde047;
            border: 2px solid rgba(253, 224, 71, 0.55);
            background: linear-gradient(145deg, #1e293b, #0f172a);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
            position: relative;
        }
        .national-program-step__num::after {
            content: "";
            position: absolute;
            inset: -7px;
            border-radius: 50%;
            border: 1px solid rgba(253, 224, 71, 0.26);
            opacity: 0.55;
            animation: none;
        }
        .national-program-step--exam .national-program-step__num {
            color: #0f172a;
            border-color: #fde047;
            background: linear-gradient(145deg, #eab308, #fde047);
            box-shadow: 0 10px 24px rgba(234, 179, 8, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
        }
        .national-program-step--exam .national-program-step__num::after {
            border-color: rgba(253, 224, 71, 0.5);
            animation-duration: 2.2s;
        }
        .national-program-step__stem {
            width: 1px;
            height: 0.9rem;
            margin: 0.22rem 0 0.2rem;
            background: linear-gradient(180deg, rgba(253, 224, 71, 0.44), rgba(253, 224, 71, 0.16));
        }
        .national-program-step__month {
            margin: 0 0 0.22rem;
            font-size: 0.7rem;
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #fde047;
        }
        .national-program-step__title {
            margin: 0;
            font-size: 0.85rem;
            font-weight: 800;
            color: #e2e8f0;
        }
        .national-program-step--exam .national-program-step__title {
            color: #fde047;
        }
        .national-program-step__meta {
            margin: 0.15rem 0 0;
            font-size: 0.72rem;
            color: #64748b;
            font-weight: 500;
        }
        .national-program-step__detail {
            margin: 0.25rem 0 0;
            font-size: 0.65rem;
            color: #fde047;
            font-weight: 500;
            letter-spacing: 0.01em;
            opacity: 0.85;
        }
        .national-program-step-link {
            height: 1px;
            width: 2.7rem;
            margin-top: 2.2rem;
            flex-shrink: 0;
            background: linear-gradient(90deg, rgba(253, 224, 71, 0.12), rgba(253, 224, 71, 0.42), rgba(253, 224, 71, 0.12));
            box-shadow: none;
            position: relative;
            overflow: hidden;
        }
        .national-program-step-link::after {
            content: "";
            position: absolute;
            top: -1px;
            left: -42%;
            width: 42%;
            height: 3px;
            background: linear-gradient(90deg, transparent 0%, rgba(253, 224, 71, 0.95) 50%, transparent 100%);
            animation: national-program-connector-flow 2.15s ease-in-out infinite;
        }
        @media (max-width: 680px) {
            .national-program-timeline {
                gap: 0.35rem 0;
            }
            .national-program-step {
                min-width: 6.75rem;
                padding: 0.5rem 0.4rem 0.55rem;
            }
            .national-program-step-link {
                width: 1.65rem;
                margin-top: 2.05rem;
            }
        }
        .national-program-explain {
            color: rgba(226, 232, 240, 0.78);
            font-size: clamp(0.92rem, 1.9vw, 1.02rem);
            line-height: 1.5;
            margin: 0 auto 1.2rem;
            max-width: 50rem;
            text-wrap: pretty;
            font-weight: 500;
        }
        .national-program-explain-highlight {
            color: #facc15;
            font-weight: 500;
        }
        .national-program-explain-closing {
            display: block;
            margin-top: 0.42rem;
            color: #facc15;
            font-weight: 500;
        }
        .national-program-example {
            display: inline-flex;
            align-items: center;
            gap: 1rem;
            padding: 0.82rem 1.38rem;
            border-radius: 9999px;
            background: linear-gradient(180deg, rgba(22, 33, 58, 0.92), rgba(7, 12, 30, 0.96));
            border: 1px solid rgba(234, 179, 8, 0.5);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                inset 0 -1px 0 rgba(255, 255, 255, 0.04),
                0 10px 24px rgba(0, 0, 0, 0.35);
            transition: transform 180ms ease, border-color 220ms ease, box-shadow 220ms ease;
        }
        .national-program-example:hover {
            transform: translateY(-1px);
            border-color: rgba(234, 179, 8, 0.65);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 12px 28px rgba(0, 0, 0, 0.42);
        }
        .national-program-example__label {
            font-size: 0.74rem;
            font-weight: 900;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #111827;
            text-shadow: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.32rem 0.7rem;
            border-radius: 999px;
            background: linear-gradient(180deg, #facc15 0%, #eab308 100%);
            border: 1px solid rgba(161, 98, 7, 0.55);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
        }
        .national-program-example__sep {
            width: 1px;
            height: 1.25rem;
            background: linear-gradient(180deg, rgba(250, 204, 21, 0.05), rgba(250, 204, 21, 0.5), rgba(250, 204, 21, 0.05));
        }
        .national-program-example__flow {
            display: inline-flex;
            align-items: center;
            gap: 0.72rem;
            flex-wrap: wrap;
            justify-content: center;
        }
        .national-program-example__step {
            font-size: 0.98rem;
            font-weight: 600;
            color: #e2e8f0;
            letter-spacing: 0.008em;
            text-shadow: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.28rem;
            min-height: 2rem;
            padding: 0.28rem 0.74rem;
            border-radius: 999px;
            border: 1px solid rgba(148, 163, 184, 0.36);
            background: linear-gradient(180deg, rgba(30, 41, 59, 0.86), rgba(15, 23, 42, 0.88));
            white-space: nowrap;
        }
        .national-program-example__month {
            font-weight: 500;
            letter-spacing: 0.01em;
        }
        .national-program-example__eq {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 0.18rem;
            color: rgba(226, 232, 240, 0.85);
            font-weight: 600;
            letter-spacing: 0.01em;
        }
        .national-program-example__suffix {
            font-weight: 750;
            letter-spacing: 0.008em;
        }
        .national-program-example__suffix--exam {
            color: #facc15;
            font-weight: 800;
        }
        .national-program-example__step--rank {
            color: #111827;
            font-weight: 600;
            border-color: rgba(161, 98, 7, 0.58);
            background: linear-gradient(180deg, #facc15 0%, #eab308 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
            text-shadow: none;
        }
        .national-program-example__step--rank .fa-trophy {
            font-size: 1rem;
            margin-right: 0.3rem;
            color: #111827;
            text-shadow: none;
            filter: none;
        }
        .national-program-example__arrow {
            width: 1.25rem;
            height: 1.25rem;
            border-radius: 50%;
            border: 1px solid rgba(250, 204, 21, 0.4);
            background: rgba(250, 204, 21, 0.08);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            position: relative;
            font-family: inherit;
        }
        .national-program-example__arrow::before {
            content: '';
            width: 0;
            height: 0;
            border-top: 3px solid transparent;
            border-bottom: 3px solid transparent;
            border-left: 5px solid rgba(250, 204, 21, 0.95);
            display: block;
            margin-left: 1px;
        }
        @keyframes national-program-orbit {
            0%, 100% { transform: scale(0.96); opacity: 0.55; }
            50% { transform: scale(1); opacity: 0.35; }
        }
        @keyframes national-program-connector-flow {
            0% { left: -42%; opacity: 0; }
            18% { opacity: 1; }
            82% { opacity: 1; }
            100% { left: 108%; opacity: 0; }
        }
        @media (max-width: 520px) {
            .national-program-example {
                gap: 0.62rem;
                padding: 0.68rem 1rem;
            }
            .national-program-example__label {
                font-size: 0.68rem;
                letter-spacing: 0.16em;
            }
            .national-program-example__step {
                font-size: 0.88rem;
                padding: 0.24rem 0.6rem;
            }
        }

        .top10-champions-modal-shell {
            max-width: 26rem;
            width: 92%;
            padding: 1.35rem 1.25rem 1.5rem;
            border-radius: 22px;
            border: 1px solid rgba(253, 224, 71, 0.45);
            background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
            max-height: min(90vh, 40rem);
            overflow-y: auto;
            perspective: 1200px;
            perspective-origin: 50% 0%;
        }
        .top10-champions-heading {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: center;
            row-gap: 0.2rem;
            column-gap: 0.3rem;
            font-size: 1rem;
            font-weight: 900;
            text-align: center;
            line-height: 1.3;
            margin-bottom: 0.9rem;
        }
        .top10-champions-heading-prefix:empty {
            display: none;
        }
        .top10-champions-heading-prefix {
            width: 100%;
            text-align: center;
            font-size: 0.9em;
            line-height: 1.2;
        }
        .top10-champions-heading-line {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: center;
            row-gap: 0.1rem;
            column-gap: 0.2rem;
        }
        .top10-champions-heading-main,
        .top10-champions-heading-date,
        .top10-champions-heading-prefix {
            background: linear-gradient(90deg, #fde047, #fcd34d, #fbbf24);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            -webkit-text-fill-color: transparent;
        }
        .top10-champions-heading-main {
            text-transform: uppercase;
            font-size: 0.9em;
            letter-spacing: 0.04em;
        }
        .top10-champions-heading-date {
            font-size: 0.72em;
            font-weight: 800;
            letter-spacing: 0.1em;
            background: none;
            -webkit-background-clip: unset;
            background-clip: unset;
            color: #ecfdf5;
            -webkit-text-fill-color: #ecfdf5;
            text-transform: none;
        }
        .top10-slide {
            position: relative;
            text-align: center;
            padding: 0.5rem 0.35rem 0.85rem;
            border-radius: 16px;
            background: rgba(15, 23, 42, 0.65);
            border: 1px solid rgba(250, 204, 21, 0.2);
        }
        /* Single-pass transition: opacity 1?0.95 with subtle lift.
           Premium feel: slower duration, subtle effect, identical for all cards. */
        .top10-slide.top10-fade {
            opacity: 0.95;
            transform: translateY(-2px);
            transition: opacity 0.4s ease-out, transform 0.4s ease-out;
        }
        .top10-slide .top10-slide-hero,
        .top10-slide .top10-slide-school-wrap,
        .top10-slide .top10-slide-details {
            position: relative;
            z-index: 6;
        }
        /* Removed: complex two-stage keyframes. Replaced with single CSS transition. */
        @media (prefers-reduced-motion: reduce) {
            .top10-launch-preview.top10-fade,
            .top10-slide.top10-fade {
                transition-duration: 0.25s;
            }
            .top10-modal-rank-badge .top10-rank-badge-face::after {
                animation: none;
            }
        }
        .top10-slide-hero {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            gap: 0.5rem;
            margin-bottom: 0.25rem;
        }
        .top10-slide-hero-name {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 0.28rem;
            padding: 0 0.15rem;
        }
        /** National merit ? PKR pill above champion name (sky bg / black text; rank 1?10 only). */
        .top10-national-award-stack {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.08rem;
            max-width: 100%;
            margin: 0 0 0.05rem;
        }
        .top10-national-award-stack[hidden] {
            display: none !important;
        }
        /* Modal: lift award pill, drop name slightly ? clearer vertical rhythm vs stats row. */
        .top10-slide .top10-slide-hero-name {
            gap: clamp(0.5rem, 2.6vw, 0.75rem);
        }
        /* Modal only: shift PKR pill upward under the stats banner (launch card unchanged). */
        .top10-slide .top10-national-award-stack {
            margin-top: -2.85rem;
            margin-bottom: 0;
        }
        .top10-slide .top10-slide-hero-student-name {
            margin-top: 0.3rem;
        }
        .top10-national-award-amount {
            display: inline-block;
            margin: 0;
            max-width: 100%;
            box-sizing: border-box;
            padding: 0.3rem 0.7rem;
            font-size: clamp(0.56rem, 1.92vw, 0.72rem);
            font-weight: 800;
            letter-spacing: 0.025em;
            line-height: 1.3;
            color: #0a0a0a;
            background: var(--otr-sky);
            border-radius: 9999px;
            text-transform: none;
            text-align: center;
            text-shadow: none;
            overflow-wrap: anywhere;
            word-break: break-word;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
        }
        /* Launch card ? same sky pill copy as modal */
        .top10-launch-national-award {
            width: 100%;
            margin: 0 0 0.2rem;
            text-align: center;
        }
        .top10-launch-national-award[hidden] {
            display: none !important;
        }
        .top10-launch-national-award-line {
            display: inline-block;
            margin: 0;
            max-width: 100%;
            box-sizing: border-box;
            padding: 0.26rem 0.62rem;
            font-size: clamp(0.52rem, 1.68vw, 0.64rem);
            font-weight: 800;
            letter-spacing: 0.025em;
            line-height: 1.3;
            color: #0a0a0a;
            background: var(--otr-sky);
            border-radius: 9999px;
            text-transform: none;
            text-align: center;
            text-shadow: none;
            overflow-wrap: anywhere;
            word-break: break-word;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        .top10-slide-hero-student-name {
            margin: 0;
            font-size: clamp(0.82rem, 2.9vw, 1.08rem);
            font-weight: 900;
            line-height: 1.3;
            letter-spacing: 0.03em;
            color: #f8fafc;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
            overflow-wrap: anywhere;
            word-break: break-word;
        }
        .top10-photo-wrap {
            position: relative;
            display: block;
            flex-shrink: 0;
            margin: 0;
        }
        .top10-slide-hero .top10-photo-wrap {
            align-self: flex-start;
        }
        .top10-photo {
            flex-shrink: 0;
            display: block;
            width: 5.5rem;
            height: 5.5rem;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid #facc15;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
        }
        .top10-slide-school-wrap {
            width: 100%;
            margin: 0 0 0.45rem;
            padding: 0 0.35rem;
            box-sizing: border-box;
            text-align: center;
            overflow: visible;
        }
        .top10-slide .top10-school-highlight {
            width: auto;
            max-width: 100%;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            word-break: normal;
            overflow-wrap: break-word;
            hyphens: auto;
            text-align: center;
            padding: 0.4rem 0.85rem;
            line-height: 1.35;
        }
        .top10-slide-details {
            margin-top: 1.15rem;
        }
        .top10-modal-rank-badge {
            position: relative;
            flex: 0 0 auto;
            align-self: center;
            z-index: 8;
            pointer-events: none;
            margin-top: 0;
            filter:
                drop-shadow(0 0 14px rgba(250, 204, 21, 0.55))
                drop-shadow(0 0 28px rgba(234, 179, 8, 0.22))
                drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
        }
        .top10-modal-rank-badge .top10-rank-badge-face {
            position: relative;
            overflow: hidden;
            min-width: 4.1rem;
            padding: 0.52rem 0.58rem 0.65rem;
            gap: 0.24rem;
            background: linear-gradient(
                168deg,
                #ffffff 0%,
                #fffbeb 8%,
                #fef9c3 18%,
                #fde047 34%,
                #eab308 52%,
                #ca8a04 72%,
                #92400e 92%,
                #451a03 100%
            );
            clip-path: polygon(50% 0%, 100% 14%, 100% 66%, 50% 100%, 0% 66%, 0% 14%);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.65),
                0 0 0 3px rgba(15, 23, 42, 0.98),
                0 0 0 5px #facc15,
                0 0 0 8px rgba(15, 23, 42, 0.88),
                0 0 0 11px rgba(250, 204, 21, 0.18),
                0 4px 14px rgba(234, 179, 8, 0.35),
                inset 0 3px 5px rgba(255, 255, 255, 0.85),
                inset 0 -6px 14px rgba(120, 53, 15, 0.45);
        }
        .top10-modal-rank-badge .top10-rank-badge-face::after {
            content: "";
            position: absolute;
            top: -50%;
            left: -60%;
            width: 55%;
            height: 200%;
            background: linear-gradient(
                92deg,
                transparent 0%,
                rgba(255, 255, 255, 0.08) 35%,
                rgba(255, 255, 255, 0.65) 48%,
                rgba(255, 255, 255, 0.12) 58%,
                transparent 100%
            );
            transform: skewX(-18deg);
            animation: top10-badge-shine 5s ease-in-out infinite;
            pointer-events: none;
        }
        @keyframes top10-badge-shine {
            0%,
            18% {
                transform: skewX(-18deg) translateX(-120%);
                opacity: 0;
            }
            24% {
                opacity: 1;
            }
            38%,
            100% {
                transform: skewX(-18deg) translateX(280%);
                opacity: 0;
            }
        }
        .top10-modal-rank-badge .top10-rank-badge-icon {
            font-size: 0.82rem;
            color: #9a3412;
            filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.75)) drop-shadow(0 1px 0 rgba(255, 255, 255, 0.55));
        }
        .top10-modal-rank-badge .top10-rank-badge-num {
            font-family: "Bebas Neue", "Impact", "Arial Narrow", sans-serif;
            font-size: 1.88rem;
            font-weight: 400;
            line-height: 0.88;
            letter-spacing: 0.06em;
            color: #020617;
            text-shadow:
                0 2px 0 rgba(255, 255, 255, 0.45),
                0 -1px 0 rgba(146, 64, 14, 0.12),
                0 3px 6px rgba(69, 26, 3, 0.2);
        }
        .top10-student-name {
            font-size: 1.1rem;
            font-weight: 900;
            color: #f8fafc;
            margin-bottom: 0.4rem;
            letter-spacing: 0.02em;
        }
        .top10-slide-hero-name .top10-student-name {
            margin-bottom: 0;
        }
        .top10-detail-grid {
            display: grid;
            gap: 0.35rem 0.5rem;
            text-align: left;
            font-size: 0.78rem;
            margin-top: 0.45rem;
            padding: 0.55rem 0.65rem;
            border-radius: 12px;
            background: rgba(2, 6, 23, 0.55);
            border: 1px solid rgba(148, 163, 184, 0.2);
        }
        .top10-detail-row {
            display: grid;
            grid-template-columns: 5.2rem 1fr;
            gap: 0.35rem;
            align-items: baseline;
        }
        .top10-detail-row dt {
            font-weight: 800;
            color: #94a3b8;
            text-transform: uppercase;
            font-size: 0.65rem;
            letter-spacing: 0.06em;
        }
        .top10-detail-row dd {
            margin: 0;
            color: #e2e8f0;
            font-weight: 600;
        }
        .otr-merit-footer {
            margin: 0.62rem 0 0;
            text-align: center;
            font-size: 0.63rem;
            font-weight: 400;
            color: rgba(148, 163, 184, 0.45);
            letter-spacing: 0.07em;
            text-transform: uppercase;
        }
        .top10-carousel-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            margin-top: 0.85rem;
        }
        .top10-carousel-nav-btn {
            flex-shrink: 0;
            width: 2.25rem;
            height: 2.25rem;
            border-radius: 50%;
            border: 1px solid rgba(253, 224, 71, 0.45);
            background: rgba(30, 41, 59, 0.9);
            color: #fde047;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s, transform 0.15s;
        }
        .top10-carousel-nav-btn:hover {
            background: rgba(250, 204, 21, 0.15);
            transform: scale(1.06);
        }
        .top10-dots {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.3rem;
            flex: 1;
            min-height: 1.5rem;
        }
        .top10-dot {
            width: 0.45rem;
            height: 0.45rem;
            border-radius: 9999px;
            border: none;
            padding: 0;
            background: rgba(148, 163, 184, 0.45);
            cursor: pointer;
            transition: transform 0.15s, background 0.15s;
        }
        .top10-dot[aria-current="true"] {
            background: #facc15;
            transform: scale(1.35);
        }
        .btn-secondary {
            background: transparent;
            border: 2px solid #FFD700;
            color: #FFD700;
            font-weight: 600;
            padding: 0.9rem 2rem;
            border-radius: 60px;
            transition: all 0.3s;
            cursor: pointer;
        }
        .btn-secondary:hover { background: #FFD700; color: #0a0c1a; }
        
        .demo-access-btn {
            background: transparent;
            border: 2px solid #4090FF;
            color: #4090FF;
            font-weight: 600;
            padding: 0.9rem 2rem;
            border-radius: 60px;
            transition: all 0.3s;
            cursor: pointer;
        }
        .demo-access-btn:hover { background: #4090FF; color: #fff; }
        
        .btn-portal-student { background: #FFD700; color: #0a0c1a; font-weight: 700; padding: 1rem; border-radius: 50px; border: none; cursor: pointer; transition: all 0.3s; }
        .btn-portal-teacher { background: linear-gradient(135deg, #4F46E5, #7C3AED); color: white; font-weight: 700; padding: 1rem; border-radius: 50px; border: none; cursor: pointer; transition: all 0.3s; }
        .btn-portal-student:hover, .btn-portal-teacher:hover { transform: translateY(-3px); }
        
        .nav-link {
            position: relative;
            font-weight: 600;
            transition: color 0.25s var(--otr-ease-smooth), transform 0.25s var(--otr-ease-smooth);
            cursor: pointer;
            padding: 0.5rem 0.15rem;
            color: #9ca3af;
            border-radius: 6px;
        }
        .nav-link:hover { color: #fde047; }
        .nav-link::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, #fde047, transparent);
            transition: width 0.3s var(--otr-ease-smooth);
        }
        .nav-link:hover::after { width: 82%; }
        .nav-link:focus-visible {
            outline: 2px solid rgba(253, 224, 71, 0.9);
            outline-offset: 3px;
            color: #fef9c3;
        }
        .nav-link:focus-visible::after {
            width: 82%;
        }

        #mobile-menu a:focus-visible {
            outline: 2px solid rgba(253, 224, 71, 0.85);
            outline-offset: 2px;
            border-radius: 6px;
        }

        /* Mobile nav drawer: body-level panel (header transform traps fixed children to masthead height). */
        #mobile-menu-overlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 10001;
            background-color: rgba(0, 0, 0, 0.78);
            pointer-events: auto;
        }
        #mobile-menu-overlay:not(.hidden) {
            display: block;
        }
        #mobile-menu {
            position: fixed;
            top: 0;
            right: 0;
            width: min(18rem, 88vw);
            height: 100vh;
            height: 100dvh;
            max-height: 100dvh;
            background-color: #0a0c1a;
            z-index: 10002;
            pointer-events: auto;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            box-shadow: -12px 0 40px rgba(0, 0, 0, 0.55);
            transform: translate3d(100%, 0, 0);
            transition: transform 0.3s var(--otr-ease-smooth);
            visibility: hidden;
        }
        #mobile-menu.mobile-menu--open {
            transform: translate3d(0, 0, 0);
            visibility: visible;
        }
        body.otrs-mobile-menu-open {
            overflow: hidden;
        }
        
        .otr-header-ntn {
            text-align: left;
            line-height: 1.2;
            padding: 0.2rem 0 0.2rem 0.65rem;
            border-left: 2px solid rgba(250, 204, 21, 0.85);
            box-shadow: -1px 0 0 rgba(0, 0, 0, 0.35);
        }
        .otr-header-ntn-label {
            font-size: 0.58rem;
            font-weight: 800;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: #fde047;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
        }
        .otr-header-ntn-value {
            display: block;
            margin-top: 0.18rem;
            font-size: clamp(0.68rem, 2.4vw, 0.8rem);
            font-weight: 800;
            letter-spacing: 0.14em;
            font-variant-numeric: tabular-nums;
            color: #f8fafc;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
        }
        .otr-header-row-brand {
            position: relative;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 2.65rem;
        }
        .otr-header-ntn-slot {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            max-width: min(42vw, 11rem);
        }
        .otr-header-logo-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 0;
            border-radius: 9999px;
            flex-shrink: 0;
            box-shadow:
                0 0 0 1px rgba(250, 204, 21, 0.22),
                0 4px 14px rgba(0, 0, 0, 0.35);
            transition: box-shadow 0.2s ease, transform 0.2s ease;
        }
        .otr-header-logo-link:hover {
            transform: scale(1.04);
            box-shadow:
                0 0 0 1px rgba(253, 224, 71, 0.45),
                0 0 18px rgba(251, 191, 36, 0.28),
                0 6px 16px rgba(0, 0, 0, 0.38);
        }
        .otr-header-logo-link:focus-visible {
            outline: 2px solid rgba(250, 204, 21, 0.85);
            outline-offset: 3px;
        }
        .otr-header-logo {
            display: block;
            width: 3.25rem;
            height: 3.25rem;
            object-fit: contain;
            border-radius: 9999px;
        }
        @media (min-width: 768px) {
            .otr-header-logo {
                width: 3.5rem;
                height: 3.5rem;
            }
        }
        .otr-header-brand-inner {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            padding: 0 1rem;
        }
        @media (min-width: 640px) {
            .otr-header-brand-inner {
                padding: 0 1.25rem;
            }
        }
        .otr-header-tagline-wrap {
            position: relative;
            display: inline-block;
            vertical-align: middle;
            max-width: 100%;
            overflow: visible;
            transform-origin: center center;
        }
        .otr-header-tagline-measure {
            visibility: hidden;
            white-space: nowrap;
            pointer-events: none;
            user-select: none;
        }
        .otr-header-tagline-layer {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            white-space: nowrap;
        }
        .otr-header-tagline-wrap,
        .otr-header-tagline-measure {
            letter-spacing: 0.06em;
        }
        .otr-header-typewriter-visible {
            display: inline-block;
            color: #fafaf9;
            letter-spacing: 0.06em;
            -webkit-text-fill-color: currentColor;
            -webkit-font-smoothing: antialiased;
            font-feature-settings: "kern" 1, "liga" 1;
            text-rendering: optimizeLegibility;
        }
        .otr-header-typewriter-brand {
            color: #fde047;
            -webkit-text-fill-color: #fde047;
            font-weight: 800;
        }
        .otr-header-typewriter-rest {
            color: #fafaf9;
            -webkit-text-fill-color: #fafaf9;
            font-weight: 700;
        }
        .otr-header-typewriter-visible--typing .otr-header-typewriter-rest {
            color: #fafaf9;
            -webkit-text-fill-color: #fafaf9;
        }
        .otr-header-typewriter-visible--done {
            background-image: none;
        }
        .otr-header-typewriter-cursor {
            display: inline-block;
            width: 2px;
            height: 0.92em;
            margin-left: 3px;
            vertical-align: -0.08em;
            border-radius: 1px;
            background: #fafaf9;
            animation: otr-header-cursor-blink 0.88s cubic-bezier(0.45, 0, 0.55, 1) infinite;
        }
        .otr-header-typewriter-cursor--active {
            width: 2px;
            animation: otr-header-cursor-blink-fast 0.92s cubic-bezier(0.45, 0, 0.55, 1) infinite;
        }
        @keyframes otr-header-cursor-blink {
            0%,
            42% {
                opacity: 1;
            }
            48%,
            100% {
                opacity: 0.12;
            }
        }
        @keyframes otr-header-cursor-blink-fast {
            0%,
            34% {
                opacity: 1;
            }
            40%,
            100% {
                opacity: 0.1;
            }
        }
        .otr-header-typewriter-cursor--off {
            animation: none;
            opacity: 0;
            width: 0 !important;
            margin-left: 0;
            transition: opacity 0.35s ease, width 0.35s ease, margin 0.35s ease;
        }
        @media (prefers-reduced-motion: reduce) {
            .otr-header-typewriter-cursor:not(.otr-header-typewriter-cursor--off) {
                animation: none;
                opacity: 0.92;
                width: 2px;
                margin-left: 3px;
            }
            .otr-header-typewriter-visible--done,
            .otr-header-typewriter-rest {
                animation: none;
                filter: none;
                text-shadow: none;
            }
            .otr-header-typewriter-cursor--active {
                animation: none;
            }
        }

        /* When `#hero` leaves the gated viewport band (mirrors `#hero .otr-hero--offscreen` IntersectionObserver),
           masthead shimmer/filter/CSS text-motion repaints contend with marquee compositor work on the same
           frames. Freeze those drivers to steady premium visuals so lower-page CSS marquees can pace cleanly. */
        html.otr-marquee-heavy-header-idle #otr-site-header.otr-site-header {
            background-color: rgba(0, 0, 0, 0.68);
            backdrop-filter: blur(12px) saturate(1.08);
            -webkit-backdrop-filter: blur(12px) saturate(1.08);
        }
        
        @keyframes otr-marquee-shift {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-50%, 0, 0); }
        }
        #testimonials .testimonial-track.otr-marquee-css-drive,
        .school-marquee.otr-marquee-css-drive {
            animation: otr-marquee-shift var(--otr-marquee-duration, 90s) linear infinite;
            will-change: transform;
        }
        /* Success Stories marquee: loop distance = exact px (--otr-marquee-loop-end) after decode+measure */
        #testimonials .testimonial-carousel.otr-marquee-motion--pre {
            opacity: 0;
            visibility: hidden;
        }
        #testimonials .testimonial-carousel.otr-marquee-motion--revealed {
            visibility: visible;
            opacity: 1;
            transition: none;
        }
        @media (prefers-reduced-motion: reduce) {
            #testimonials .testimonial-carousel.otr-marquee-motion--pre {
                opacity: 1;
                visibility: visible;
            }
        }
        #testimonials,
        #schools {
            overflow-x: clip;
        }
        /* Schools ↔ FAQ: slightly tighter gap (py-20 elsewhere unchanged on outer edges) */
        #schools {
            padding-bottom: 4rem;
        }
        #faq {
            padding-top: 4rem;
        }
        /* Full-bleed marquees: use viewport width (not max-w-7xl text column) so cards are not clipped mid-screen */
        #testimonials .testimonial-carousel,
        #schools .school-marquee-container {
            position: relative;
            left: 50%;
            width: 100vw;
            max-width: none;
            margin-left: -50vw;
            margin-right: 0;
            box-sizing: border-box;
            -webkit-mask-image: linear-gradient(
                90deg,
                transparent 0,
                #000 1.35rem,
                #000 calc(100% - 1.35rem),
                transparent 100%
            );
            mask-image: linear-gradient(
                90deg,
                transparent 0,
                #000 1.35rem,
                #000 calc(100% - 1.35rem),
                transparent 100%
            );
        }
        #testimonials .testimonial-carousel {
            overflow: hidden;
            overflow-x: hidden;
            padding: 20px 0;
            position: relative;
            contain: layout style paint;
            isolation: isolate;
            transform: translateZ(0);
        }
        #testimonials .testimonial-track {
            --otr-marquee-loop-end: -50%;
            display: flex;
            gap: 28px;
            width: max-content;
            flex-shrink: 0;
            flex-grow: 0;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transition: none !important;
        }
        #testimonials .testimonial-track:not(.otr-marquee-motion--ready) {
            animation: none;
        }
        /* Cruise: one shared RAF ticker (otr-main.js) — no CSS keyframe loop reset / seam shock */
        #testimonials .testimonial-track.otr-marquee-motion--ready {
            animation: none !important;
        }
        #testimonials .testimonial-card {
            width: min(340px, calc(100vw - 2.5rem));
            flex-shrink: 0;
            background: rgba(20, 25, 45, 0.92);
            border-radius: 28px;
            padding: 1.5rem;
            border: 1px solid rgba(255, 215, 0, 0.18);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        #testimonials .testimonial-img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 3px solid #ffd700;
            margin-right: 15px;
            object-fit: cover;
            flex-shrink: 0;
        }
        #testimonials .testimonial-card--stack {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            gap: 0.7rem;
        }
        #testimonials .testimonial-card--stack .testimonial-card__top {
            width: 100%;
        }
        #testimonials .testimonial-card--stack .testimonial-img {
            margin-right: 0;
        }
        #testimonials .testimonial-card__meta {
            flex: 1;
            min-width: 0;
        }
        #testimonials .testimonial-card__quote {
            margin: 0;
            width: 100%;
            text-align: left;
            line-height: 1.55;
            min-height: 5.5rem;
        }
        
        .school-marquee-container.otr-marquee-motion--pre {
            opacity: 0;
            visibility: hidden;
        }
        .school-marquee-container.otr-marquee-motion--revealed {
            visibility: visible;
            opacity: 1;
            transition: none;
        }
        @media (prefers-reduced-motion: reduce) {
            .school-marquee-container.otr-marquee-motion--pre {
                opacity: 1;
                visibility: visible;
            }
        }
        .school-marquee-container {
            overflow: hidden;
            overflow-x: hidden;
            padding: 20px 0;
            position: relative;
            contain: layout style paint;
            isolation: isolate;
            transform: translateZ(0);
        }
        .school-marquee {
            --otr-marquee-loop-end: -50%;
            display: flex;
            gap: 50px;
            width: max-content;
            flex-shrink: 0;
            flex-grow: 0;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transition: none !important;
        }
        .school-marquee:not(.otr-marquee-motion--ready) {
            animation: none;
        }
        .school-marquee.otr-marquee-motion--ready {
            animation: none !important;
        }
        .school-logo-img {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background: linear-gradient(135deg, #FFD700, #FFA500);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.3rem;
            color: #000;
            margin: 0 auto 8px;
            border: 2px solid #FFD700;
            overflow: hidden;
            flex-shrink: 0;
            box-sizing: border-box;
        }
        .school-logo-img--photo {
            padding: 6px;
            background:
                radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.14), transparent 45%),
                linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.92));
        }
        .school-logo-img--photo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            display: block;
            border-radius: 50%;
        }
        .school-marquee .school-marquee-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-shrink: 0;
        }
        .school-marquee .school-marquee-name {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            text-align: center;
            max-width: 12.5rem;
            min-height: 2.65rem;
            margin-top: 0;
            gap: 0.28rem;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
        }
        .school-marquee .school-marquee-name__line1 {
            font-size: 0.9375rem;
            font-weight: 400;
            line-height: 1.32;
            letter-spacing: 0.01em;
            color: #fde047;
            text-shadow: none;
        }
        .school-marquee .school-marquee-name__line2 {
            font-size: 0.8125rem;
            font-weight: 600;
            line-height: 1.3;
            color: rgba(209, 213, 219, 0.98);
            letter-spacing: 0.03em;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        }
        @media (max-width: 640px) {
            .school-marquee .school-marquee-name { max-width: 10.5rem; min-height: 2.45rem; }
            .school-marquee .school-marquee-name__line1 { font-size: 0.875rem; }
            .school-marquee .school-marquee-name__line2 { font-size: 0.75rem; }
        }
        
        .national-top10-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
        @media (max-width: 768px) { .national-top10-grid { grid-template-columns: repeat(2, 1fr); } }
        .national-top10-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; transition: all 0.3s; cursor: pointer; background: rgba(255,255,255,0.05); }
        .national-top10-item:hover { background: rgba(255,215,0,0.1); transform: translateX(5px); }
        .national-top10-rank { width: 30px; height: 30px; background: #FFD700; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; }
        
        /* FAQ subtitle ? subtle orbit of accent dots around ?OTR?. */
        @keyframes otr-faq-otr-orbit-spin {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }
            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }
        .otr-faq-otr-wrap {
            position: relative;
            display: inline-block;
            vertical-align: baseline;
            padding: 0 0.12em;
            isolation: isolate;
        }
        .otr-faq-otr-label {
            position: relative;
            z-index: 2;
            color: #fde047;
        }
        .otr-faq-otr-orbit {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 0;
            height: 0;
            z-index: 1;
            pointer-events: none;
            transform: translate(-50%, -50%);
            animation: otr-faq-otr-orbit-spin 14s linear infinite;
        }
        @media (prefers-reduced-motion: reduce) {
            .otr-faq-otr-orbit {
                animation: none;
            }
        }
        .otr-faq-otr-dot {
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 4px;
            margin: -2px 0 0 -2px;
            border-radius: 50%;
            background: rgba(254, 249, 195, 0.9);
            box-shadow: 0 0 6px rgba(253, 224, 71, 0.35);
        }
        .otr-faq-otr-dot--1 {
            transform: rotate(0deg) translateX(1.28em);
        }
        .otr-faq-otr-dot--2 {
            transform: rotate(90deg) translateX(1.28em);
        }
        .otr-faq-otr-dot--3 {
            transform: rotate(180deg) translateX(1.28em);
        }
        .otr-faq-otr-dot--4 {
            transform: rotate(270deg) translateX(1.28em);
        }

        .faq-question {
            cursor: pointer;
        }
        .faq-answer { display: none; }
        .faq-answer.show { display: block; }

        /* FAQ list: tight vertical rhythm (override Tailwind py-4 / p-8 / text-lg on rows) */
        #faq .faq-item {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }
        #faq .faq-question {
            align-items: center;
            gap: 0.65rem;
            font-weight: 400;
        }
        /* FAQ prompts: regular weight + soft gray (reads lighter than body white) */
        #faq .faq-question > span:first-of-type,
        #faq .faq-question > span.font-semibold,
        #faq .faq-question > span.font-normal {
            font-weight: 400;
            font-size: calc(15px + 1pt);
            line-height: 1.5;
            color: #d1d5db;
            letter-spacing: 0.01em;
            text-rendering: auto;
        }
        #faq p.text-xl {
            font-size: calc(15px + 1pt);
        }
        #faq .faq-question > span:first-of-type i.fas {
            font-size: 0.82em;
        }
        #faq .faq-question > i[id^="icon-"] {
            flex-shrink: 0;
            font-size: 0.8125rem;
        }
        #faq .faq-answer {
            margin-top: 0.5rem;
        }
        #faq .faq-answer p {
            margin: 0 0 0.45rem;
            line-height: 1.52;
            font-size: calc(13px + 1pt);
        }
        #faq .faq-answer p:last-child {
            margin-bottom: 0;
        }

        /* FAQ card: hairline edge accent only when an item is open ? no interior glow / no spread */
        #faq .glass-card {
            padding: 1.25rem 1.75rem;
            position: relative;
            overflow: hidden;
            transform: none !important;
            transition: border-color 0.22s ease;
            box-shadow: none;
        }
        #faq .glass-card::before,
        #faq .glass-card::after {
            content: "";
            position: absolute;
            top: 16%;
            bottom: 16%;
            width: 2px;
            margin: auto 0;
            border-radius: 9999px;
            pointer-events: none;
            z-index: 0;
            opacity: 0;
            transition: opacity 0.35s ease;
            background: linear-gradient(
                180deg,
                transparent 0%,
                rgba(234, 179, 8, 0.42) 50%,
                transparent 100%
            );
            box-shadow: none;
            filter: none;
            will-change: opacity;
        }
        #faq .glass-card::before {
            left: 5px;
        }
        #faq .glass-card::after {
            right: 5px;
        }
        #faq .glass-card.otr-faq-has-open::before,
        #faq .glass-card.otr-faq-has-open::after {
            opacity: 0.5;
        }
        #faq .glass-card > * {
            position: relative;
            z-index: 1;
        }
        #faq .glass-card:hover {
            transform: none !important;
            border-color: rgba(255, 215, 0, 0.28);
        }
        #faq .glass-card:hover:not(.otr-faq-has-open) {
            box-shadow: none;
        }

        /* Contact title: premium seal + micro particle atmosphere (heading zone only) */
        #contact .otr-contact-heading-stack {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
            padding: 0.65rem 1.2rem 0.78rem;
            border-radius: 14px;
            overflow: visible;
            isolation: isolate;
        }
        @keyframes otr-contact-heading-mote-drift {
            0%,
            100% {
                transform: translate3d(0, 0, 0);
                opacity: 0.28;
            }
            40% {
                transform: translate3d(5px, -7px, 0);
                opacity: 0.52;
            }
            75% {
                transform: translate3d(-4px, 5px, 0);
                opacity: 0.36;
            }
        }
        #contact .otr-contact-heading-motes {
            position: absolute;
            z-index: 0;
            /* Anchor to heading block: avoids % height bugs; extends slightly past seal + title */
            inset: -1.35rem -2.75rem -1.1rem -2.75rem;
            min-width: min(20rem, calc(100vw - 2rem));
            min-height: 6.5rem;
            width: auto;
            height: auto;
            pointer-events: none;
            overflow: visible;
        }
        #contact .otr-contact-heading-mote {
            position: absolute;
            width: 3px;
            height: 3px;
            margin: -1.5px 0 0 -1.5px;
            border-radius: 50%;
            background: radial-gradient(
                circle at 35% 35%,
                rgba(255, 252, 235, 0.95) 0%,
                rgba(253, 224, 71, 0.75) 42%,
                rgba(202, 138, 4, 0.25) 100%
            );
            box-shadow: 0 0 6px rgba(250, 204, 21, 0.16);
            opacity: 0.32;
            animation: otr-contact-heading-mote-drift 17s ease-in-out infinite;
        }
        #contact .otr-contact-heading-mote:nth-child(1) {
            left: 7%;
            top: 38%;
            animation-duration: 15.5s;
            animation-delay: -1s;
        }
        #contact .otr-contact-heading-mote:nth-child(2) {
            left: 91%;
            top: 43%;
            animation-duration: 18.5s;
            animation-delay: -4.2s;
        }
        #contact .otr-contact-heading-mote:nth-child(3) {
            left: 46%;
            top: 8%;
            animation-duration: 14.25s;
            animation-delay: -2.8s;
        }
        #contact .otr-contact-heading-mote:nth-child(4) {
            left: 19%;
            top: 73%;
            animation-duration: 17.25s;
            animation-delay: -6.5s;
        }
        #contact .otr-contact-heading-mote:nth-child(5) {
            left: 80%;
            top: 65%;
            animation-duration: 13.75s;
            animation-delay: -0.35s;
        }
        #contact .otr-contact-heading-mote:nth-child(6) {
            left: 54%;
            top: 92%;
            animation-duration: 19.25s;
            animation-delay: -8.75s;
        }
        #contact .otr-contact-heading-mote:nth-child(7) {
            left: 11%;
            top: 56%;
            animation-duration: 16.5s;
            animation-delay: -3.4s;
        }
        #contact .otr-contact-heading-mote:nth-child(8) {
            left: 87%;
            top: 27%;
            animation-duration: 14.85s;
            animation-delay: -5.85s;
        }
        #contact .otr-contact-heading-mote:nth-child(9) {
            left: 34%;
            top: 17%;
            animation-duration: 17.85s;
            animation-delay: -7.35s;
        }
        #contact .otr-contact-heading-mote:nth-child(10) {
            left: 65%;
            top: 53%;
            animation-duration: 15.95s;
            animation-delay: -9.65s;
        }
        #contact .otr-contact-heading-seal {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.52rem;
            width: min(17rem, 90vw);
            margin-bottom: 0.62rem;
            position: relative;
            z-index: 1;
        }
        #contact .otr-contact-heading-seal-line {
            flex: 1 1 auto;
            height: 1px;
            min-width: 1rem;
            max-width: 5.5rem;
            border-radius: 999px;
        }
        #contact .otr-contact-heading-seal-line:first-child {
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(202, 138, 4, 0.15) 38%,
                rgba(253, 224, 71, 0.82) 100%
            );
        }
        #contact .otr-contact-heading-seal-line:last-child {
            background: linear-gradient(
                90deg,
                rgba(253, 224, 71, 0.82) 0%,
                rgba(202, 138, 4, 0.15) 62%,
                transparent 100%
            );
        }
        #contact .otr-contact-heading-seal-core {
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid rgba(253, 224, 71, 0.88);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                inset 0 0 0 2px rgba(15, 23, 42, 0.5),
                0 0 0 1px rgba(250, 204, 21, 0.12);
            background:
                radial-gradient(circle at 32% 28%, rgba(254, 252, 232, 0.22), transparent 52%),
                radial-gradient(circle at 50% 88%, rgba(250, 204, 21, 0.1), transparent 58%);
            opacity: 0.95;
        }
        #contact .otr-contact-heading {
            position: relative;
            z-index: 1;
            margin: 0;
        }
        #contact .otr-contact-heading-text {
            position: relative;
        }
        @media (prefers-reduced-motion: reduce) {
            #contact .otr-contact-heading-mote {
                animation: none;
                opacity: 0.32;
            }
        }

        /* Contact: matched-height cards, compact padding, aligned headers, balanced columns */
        #contact .glass-card {
            padding: 1.15rem 1.35rem;
            border-radius: 22px;
            box-shadow: none;
            transition:
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease;
        }
        #contact .glass-card:hover {
            box-shadow: none;
            transform: none;
        }
        #contact .otr-contact-cards-grid {
            align-items: stretch;
            gap: clamp(1rem, 2.4vw, 1.65rem);
        }
        #contact .otr-contact-form-card,
        #contact .otr-contact-info-card,
        #contact .otr-contact-map-card {
            min-width: 0;
            height: 100%;
        }
        #contact .otr-contact-info-card {
            display: flex;
            flex-direction: column;
            min-height: 0;
            justify-content: flex-start;
            align-items: stretch;
            padding-inline: 1.15rem;
        }
        #contact .otr-contact-map-card {
            display: flex;
            flex-direction: column;
            min-height: 0;
            overflow: hidden;
        }
        #contact .otr-contact-map-head {
            flex-shrink: 0;
            margin: 0 0 0.75rem;
        }
        #contact .otr-contact-map-lead {
            margin: 0;
            font-size: 0.8125rem;
            font-weight: 500;
            line-height: 1.45;
            color: rgba(186, 198, 214, 0.95);
            letter-spacing: 0.02em;
        }
        #contact .otr-contact-map-body {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }
        #contact .otr-contact-map-launch {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            margin: 0;
            padding: 0;
            border: 0;
            background: transparent;
            color: inherit;
            text-decoration: none;
            cursor: pointer;
            border-radius: 14px;
            -webkit-tap-highlight-color: transparent;
        }
        #contact .otr-contact-map-launch:focus-visible {
            outline: 2px solid rgba(253, 224, 71, 0.82);
            outline-offset: 3px;
        }
        #contact .otr-contact-map-frame-wrap {
            position: relative;
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
            height: 100%;
            border-radius: 14px;
            overflow: hidden;
            contain: layout style paint;
            border: 1px solid rgba(250, 204, 21, 0.32);
            background:
                radial-gradient(ellipse 85% 70% at 50% 42%, rgba(56, 189, 248, 0.12), transparent 68%),
                rgba(15, 23, 42, 0.96);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 10px 28px rgba(0, 0, 0, 0.35);
            transition:
                border-color 0.22s ease,
                box-shadow 0.22s ease,
                transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
        }
        #contact .otr-contact-map-launch:hover .otr-contact-map-frame-wrap,
        #contact .otr-contact-map-launch:focus-visible .otr-contact-map-frame-wrap {
            border-color: rgba(253, 224, 71, 0.55);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.14),
                0 14px 32px rgba(0, 0, 0, 0.42),
                0 0 0 1px rgba(56, 189, 248, 0.18);
            transform: translateY(-1px);
        }
        #contact .otr-contact-map-embed {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            border: 0;
            pointer-events: none;
            filter: saturate(1.12) contrast(1.06) brightness(1.05);
            transform: scale(1.22);
            transform-origin: 46% 46%;
            transition: filter 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
        }
        #contact .otr-contact-map-launch:hover .otr-contact-map-embed,
        #contact .otr-contact-map-launch:focus-visible .otr-contact-map-embed {
            filter: saturate(1.16) contrast(1.08) brightness(1.07);
            transform: scale(1.24);
        }
        #contact .otr-contact-map-layer {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 2;
        }
        /* Satellite atmosphere: campus spotlight + edge cloaks (Ghazali pin/label stay clear) */
        #contact .otr-contact-map-layer--atmosphere {
            z-index: 2;
            background:
                radial-gradient(ellipse 28% 22% at 92% 90%, rgba(2, 6, 23, 0.82) 0%, transparent 72%),
                linear-gradient(90deg, transparent 0%, transparent 66%, rgba(2, 6, 23, 0.22) 78%, rgba(2, 6, 23, 0.78) 100%),
                linear-gradient(180deg, rgba(2, 6, 23, 0.62) 0%, rgba(2, 6, 23, 0.18) 12%, transparent 24%),
                linear-gradient(270deg, rgba(2, 6, 23, 0.55) 0%, transparent 14%),
                radial-gradient(ellipse 52% 46% at 44% 48%, transparent 0%, transparent 54%, rgba(2, 6, 23, 0.28) 100%),
                radial-gradient(ellipse 80% 24% at 55% 6%, rgba(248, 250, 252, 0.16) 0%, transparent 74%),
                radial-gradient(ellipse 36% 28% at 18% 16%, rgba(186, 230, 253, 0.12) 0%, transparent 72%),
                linear-gradient(0deg, rgba(15, 23, 42, 0.52) 0%, transparent 18%);
        }
        #contact .otr-contact-map-layer--atmosphere::before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: 0.13;
            background-image:
                linear-gradient(rgba(250, 204, 21, 0.08) 1px, transparent 1px),
                linear-gradient(90deg, rgba(250, 204, 21, 0.08) 1px, transparent 1px);
            background-size: 22px 22px;
            mask-image: radial-gradient(ellipse 78% 72% at 44% 48%, #000 16%, transparent 78%);
        }
        #contact .otr-contact-map-layer--atmosphere::after {
            content: "";
            position: absolute;
            inset: -18%;
            pointer-events: none;
            background: conic-gradient(
                from 225deg at 44% 46%,
                transparent 0deg,
                rgba(56, 189, 248, 0.09) 48deg,
                transparent 96deg,
                rgba(250, 204, 21, 0.08) 148deg,
                transparent 360deg
            );
            mask-image: radial-gradient(ellipse 70% 64% at 44% 48%, transparent 46%, #000 100%);
            opacity: 0.75;
            animation: otr-contact-map-orbit 28s linear infinite;
        }
        @keyframes otr-contact-map-orbit {
            to {
                transform: rotate(360deg);
            }
        }
        #contact .otr-contact-map-layer--sheen {
            z-index: 3;
            opacity: 0;
            background: linear-gradient(
                115deg,
                transparent 38%,
                rgba(255, 255, 255, 0.14) 48%,
                transparent 58%
            );
            transform: translateX(-120%);
            transition: opacity 0.2s ease;
        }
        #contact .otr-contact-map-launch:hover .otr-contact-map-layer--sheen,
        #contact .otr-contact-map-launch:focus-visible .otr-contact-map-layer--sheen {
            opacity: 1;
            animation: otr-contact-map-sheen 900ms ease;
        }
        @keyframes otr-contact-map-sheen {
            from {
                transform: translateX(-120%);
            }
            to {
                transform: translateX(120%);
            }
        }
        #contact .otr-contact-map-corners {
            position: absolute;
            inset: 0.55rem;
            pointer-events: none;
            z-index: 4;
        }
        #contact .otr-contact-map-corners span {
            position: absolute;
            width: 1.1rem;
            height: 1.1rem;
            border-color: rgba(253, 224, 71, 0.72);
            border-style: solid;
            opacity: 0.85;
        }
        #contact .otr-contact-map-corners span:nth-child(1) {
            top: 0;
            left: 0;
            border-width: 2px 0 0 2px;
            border-radius: 4px 0 0 0;
        }
        #contact .otr-contact-map-corners span:nth-child(2) {
            top: 0;
            right: 0;
            border-width: 2px 2px 0 0;
            border-radius: 0 4px 0 0;
        }
        #contact .otr-contact-map-corners span:nth-child(3) {
            bottom: 0;
            left: 0;
            border-width: 0 0 2px 2px;
            border-radius: 0 0 0 4px;
        }
        #contact .otr-contact-map-corners span:nth-child(4) {
            bottom: 0;
            right: 0;
            border-width: 0 2px 2px 0;
            border-radius: 0 0 4px 0;
        }
        #contact .otr-contact-map-float {
            position: absolute;
            left: 0.65rem;
            top: 0.65rem;
            z-index: 6;
            max-width: min(13.5rem, calc(100% - 1.3rem));
            padding: 0.45rem 0.55rem 0.5rem;
            border-radius: 10px;
            border: 1px solid rgba(250, 204, 21, 0.38);
            background: rgba(15, 23, 42, 0.9);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
            pointer-events: none;
            text-shadow: none;
        }
        #contact .otr-contact-map-float-badge {
            display: block;
            font-size: 0.62rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #facc15;
            margin-bottom: 0.2rem;
            text-shadow: none;
        }
        #contact .otr-contact-map-float-title {
            display: block;
            font-size: 0.78rem;
            font-weight: 600;
            line-height: 1.25;
            color: #fffbeb;
            letter-spacing: 0.02em;
            text-shadow: none;
        }
        #contact .otr-contact-map-float-sub {
            display: block;
            margin-top: 0.12rem;
            font-size: 0.68rem;
            font-weight: 600;
            line-height: 1.35;
            color: rgba(203, 213, 225, 0.92);
            text-shadow: none;
        }
        #contact .otr-contact-map-hint {
            position: absolute;
            left: 50%;
            bottom: 0.65rem;
            z-index: 6;
            transform: translateX(-50%);
            pointer-events: none;
        }
        #contact .otr-contact-map-hint-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.38rem 0.72rem;
            border-radius: 999px;
            border: 1px solid rgba(253, 224, 71, 0.45);
            background: rgba(15, 23, 42, 0.92);
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            color: #fef9c3;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
            transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }
        #contact .otr-contact-map-launch:hover .otr-contact-map-hint-pill,
        #contact .otr-contact-map-launch:focus-visible .otr-contact-map-hint-pill {
            background: rgba(234, 179, 8, 0.92);
            border-color: rgba(255, 251, 235, 0.65);
            color: #0a0a0a;
        }
        @media (prefers-reduced-motion: reduce) {
            #contact .otr-contact-map-layer--atmosphere::after {
                animation: none !important;
            }
            #contact .otr-contact-map-launch:hover .otr-contact-map-layer--sheen,
            #contact .otr-contact-map-launch:focus-visible .otr-contact-map-layer--sheen {
                animation: none !important;
            }
            #contact .otr-contact-map-embed,
            #contact .otr-contact-map-launch:hover .otr-contact-map-embed,
            #contact .otr-contact-map-launch:focus-visible .otr-contact-map-embed,
            #contact .otr-contact-map-launch:hover .otr-contact-map-frame-wrap,
            #contact .otr-contact-map-launch:focus-visible .otr-contact-map-frame-wrap {
                transition: none;
                transform: none;
            }
        }
        #contact .otr-contact-map-foot {
            flex-shrink: 0;
            margin: 0.55rem 0 0;
            padding-top: 0.05rem;
            text-align: right;
        }
        #contact .otr-contact-map-open-link {
            font-size: 0.8125rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: #fffbeb;
            text-decoration: none;
            transition: color 0.18s ease;
        }
        #contact .otr-contact-map-open-link:hover {
            color: #fef08a;
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 0.28em;
            text-decoration-color: rgba(253, 224, 71, 0.55);
        }
        #contact .otr-contact-map-open-link:focus-visible {
            outline: 2px solid rgba(253, 224, 71, 0.65);
            outline-offset: 3px;
            border-radius: 3px;
        }
        @media (min-width: 1024px) {
            #contact .otr-contact-cards-grid {
                grid-template-columns: minmax(0, 1.05fr) minmax(15.75rem, 18.5rem) minmax(0, 1.22fr);
            }
            #contact .otr-contact-cards-grid > .glass-card {
                min-height: clamp(21.5rem, 32vw, 26rem);
            }
        }
        @media (max-width: 1023px) {
            #contact .otr-contact-map-frame-wrap {
                min-height: 14rem;
                aspect-ratio: 16 / 11;
            }
        }
        #contact .otr-contact-info-head {
            flex-shrink: 0;
            margin: 0 0 1.25rem;
            padding-right: 0.15rem;
        }
        #contact .otr-contact-form-card {
            min-height: 0;
            align-items: stretch;
            display: flex;
            flex-direction: column;
        }
        #contact #otr-contact-form {
            width: 100%;
            min-width: 0;
        }
        #contact #otr-contact-form input,
        #contact #otr-contact-form textarea {
            margin-bottom: 0.75rem;
            width: 100%;
            box-sizing: border-box;
        }
        #contact #otr-contact-message {
            min-height: 5rem;
            flex: 1 1 auto;
        }
        #contact #otr-contact-submit {
            margin-top: 0.1rem;
            width: 100%;
            box-sizing: border-box;
        }
        #contact .otr-contact-form-card > *:first-child {
            margin-block-start: 0;
        }
        #contact .otr-contact-form-status-slot {
            margin: 0 0 1rem;
            min-height: 1.3125rem;
            line-height: 1.5;
        }
        /* Contact form: sky CTA — no glow; yellow on hover (auth-ribbon pattern) */
        #contact .otr-contact-submit-btn.btn-primary {
            appearance: none;
            -webkit-appearance: none;
            border-radius: 0.75rem;
            padding: 0.625rem 1.125rem;
            font-size: 0.9375rem;
            letter-spacing: 0.02em;
            font-weight: 600;
            color: #0a0a0a;
            text-shadow: none;
            background: linear-gradient(
                165deg,
                #5ac8ff 0%,
                var(--otr-sky) 48%,
                #0ea5e9 100%
            );
            border: 1px solid rgba(12, 74, 110, 0.28);
            box-shadow: none;
            transition:
                background 0.12s ease,
                box-shadow 0.12s ease,
                border-color 0.12s ease,
                transform 0.18s ease,
                color 0.12s ease;
        }
        #contact .otr-contact-submit-btn.btn-primary:hover:not(:disabled),
        #contact .otr-contact-submit-btn.btn-primary:focus-visible:not(:disabled) {
            filter: none;
            transform: translateY(-1px);
            color: #0a0a0a;
            background: linear-gradient(180deg, #fde047 0%, #eab308 100%);
            border-color: rgba(161, 98, 7, 0.55);
            box-shadow: none;
        }
        #contact .otr-contact-submit-btn.btn-primary:active:not(:disabled) {
            transform: translateY(0);
            color: #0a0a0a;
            background: linear-gradient(180deg, #fde047 0%, #eab308 100%);
            border-color: rgba(161, 98, 7, 0.55);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
        }
        #contact .otr-contact-submit-btn.btn-primary:disabled {
            cursor: not-allowed;
            opacity: 0.55;
            transform: none;
            filter: none;
            color: rgba(15, 23, 42, 0.5);
            background: linear-gradient(165deg, rgba(165, 230, 253, 0.65) 0%, rgba(56, 189, 248, 0.55) 100%);
            border-color: rgba(12, 74, 110, 0.2);
            box-shadow: none;
        }
        #contact .otr-contact-submit-btn.btn-primary:focus-visible {
            outline: 2px solid rgba(253, 224, 71, 0.92);
            outline-offset: 3px;
        }
        /* Send Message / Contact Information panel titles share one scale */
        #contact .otr-contact-panel-title {
            color: #facc15;
            font-weight: 500;
            text-shadow: none;
            filter: none;
        }
        #contact .otr-contact-card-title {
            margin: 0 0 0.4rem;
            font-size: clamp(1.2rem, 2.2vw, 1.45rem);
            font-weight: 500;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }
        #contact .otr-contact-info-lead {
            margin: 0;
            max-width: none;
            font-size: 0.875rem;
            line-height: 1.5;
            color: rgba(203, 213, 225, 0.92);
        }
        #contact .otr-contact-info-list {
            list-style: none;
            margin: 0;
            padding: 0 0 0.15rem;
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            gap: 0.95rem;
            justify-content: flex-start;
            min-height: 0;
        }
        #contact .otr-contact-info-row {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            column-gap: 0.75rem;
            align-items: flex-start;
        }
        #contact .otr-contact-info-row--email {
            column-gap: 0.875rem;
        }
        #contact .otr-contact-info-row--email .otr-contact-info-icon {
            min-width: 1.85rem;
            justify-content: flex-start;
        }
        #contact .otr-contact-info-icon {
            width: fit-content;
            height: fit-content;
            min-width: 0;
            min-height: 0;
            max-width: none;
            border-radius: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            align-self: flex-start;
            margin-top: 0.15625rem;
            flex-shrink: 0;
            box-sizing: border-box;
            padding: 0;
            margin: 0.15625rem 0 0 0;
            background: transparent;
            background-image: none;
            border: 0;
            border-width: 0;
            outline: 0;
            box-shadow: none;
            transition: filter 0.2s ease;
        }
        #contact .otr-contact-info-img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            display: block;
            pointer-events: none;
            -webkit-user-drag: none;
            user-select: none;
        }
        #contact .otr-contact-info-fa {
            font-size: 1.5rem;
            line-height: 1;
            color: #facc15;
            display: block;
            pointer-events: none;
            user-select: none;
        }
        #contact .otr-contact-info-fa--whatsapp {
            font-size: 1.65rem;
        }
        #contact .otr-contact-info-row:hover .otr-contact-info-icon {
            filter: brightness(1.08);
        }
        #contact .otr-contact-info-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.35rem;
            min-width: 0;
            padding-top: 0;
            font-size: 1rem;
            font-weight: 500;
            line-height: 1.5;
            color: rgba(203, 213, 225, 0.92);
        }
        #contact .otr-contact-info-row--address .otr-contact-info-text {
            line-height: 1.45;
        }
        #contact .otr-contact-info-row--address .otr-contact-info-link {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.35rem;
        }
        #contact .otr-contact-info-place {
            display: block;
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: rgba(203, 213, 225, 0.92);
            line-height: 1.45;
        }
        #contact .otr-contact-info-muted {
            display: block;
            margin-top: 0;
            font-size: 0.8125rem;
            font-weight: 500;
            line-height: 1.5;
            color: rgba(203, 213, 225, 0.92);
            letter-spacing: 0.02em;
        }
        #contact .otr-contact-info-hint {
            font-size: 0.78rem;
            font-weight: 600;
            color: rgba(148, 163, 184, 0.95);
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        #contact .otr-contact-info-link {
            color: rgba(203, 213, 225, 0.92);
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 0.02em;
            line-height: 1.45;
            text-decoration: none;
            border-bottom: none;
            transition: color 0.18s ease;
        }
        #contact .otr-contact-info-link:hover {
            color: #fef08a;
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 0.28em;
            text-decoration-color: rgba(253, 224, 71, 0.55);
        }
        #contact .otr-contact-info-link:focus-visible {
            outline: 2px solid rgba(253, 224, 71, 0.65);
            outline-offset: 3px;
            border-radius: 3px;
        }
        #contact .otr-contact-info-plain {
            color: rgba(203, 213, 225, 0.92);
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 0.02em;
            line-height: 1.45;
            cursor: default;
        }
        #contact .otr-contact-info-link--whatsapp {
            color: rgba(203, 213, 225, 0.92);
            position: relative;
            transition:
                color 0.18s ease,
                text-shadow 0.22s ease,
                text-decoration-color 0.18s ease;
        }
        #contact .otr-contact-info-link--whatsapp:hover,
        #contact .otr-contact-info-link--whatsapp:focus-visible {
            color: #bbf7d0;
            text-shadow: 0 0 14px rgba(34, 197, 94, 0.35);
            text-decoration-color: rgba(134, 239, 172, 0.75);
        }
        #contact .otr-contact-info-row--whatsapp:hover .otr-contact-info-fa--whatsapp {
            color: #4ade80;
            filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.45));
        }
        #contact .otr-contact-live-chat-btn {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 0.35rem;
            margin: 0;
            padding: 0;
            border: 0;
            background: transparent;
            text-align: left;
            cursor: pointer;
            font: inherit;
            color: inherit;
            width: auto;
            max-width: 100%;
        }
        #contact .otr-contact-live-chat-btn__label {
            color: rgba(203, 213, 225, 0.92);
            font-weight: 600;
            font-size: 1rem;
            letter-spacing: 0.02em;
            line-height: 1.45;
        }
        #contact .otr-contact-live-chat-btn:hover .otr-contact-live-chat-btn__label {
            color: #fef08a;
            text-decoration: underline;
            text-decoration-thickness: 1px;
            text-underline-offset: 0.28em;
            text-decoration-color: rgba(253, 224, 71, 0.55);
        }
        #contact .otr-contact-live-chat-btn:focus-visible {
            outline: 2px solid rgba(253, 224, 71, 0.65);
            outline-offset: 3px;
            border-radius: 3px;
        }

        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 2000; align-items: center; justify-content: center; }
        /* OTR native AI: hidden during live MCQ, payment, and fullscreen. */
        html[data-otr-chatbot-off="1"] #otr-native-chatbot-root,
        html[data-otr-chatbot-off="1"] #chatToggle,
        html[data-otr-chatbot-off="1"] #chatWindow {
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transition: opacity 0.15s ease, visibility 0.15s ease;
        }
        #otr-native-chatbot-root {
            position: relative;
            z-index: 9998;
        }
        #otr-native-chatbot-root #chatToggle,
        #otr-native-chatbot-root .chat-window.open {
            z-index: 9999;
        }
        #otr-native-chatbot-root #chatToggle {
            position: fixed;
        }
        #otr-native-chatbot-root #chatToggle:not([data-otr-custom-pos]) {
            bottom: 24px;
            right: 24px;
        }
        @media (max-width: 768px) {
            #otr-native-chatbot-root #chatToggle:not([data-otr-custom-pos]) {
                bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px)) !important;
                right: calc(0.85rem + env(safe-area-inset-right, 0px)) !important;
            }
        }
        .modal.active { display: flex; }
        .modal-content { background: #0f172a; border-radius: 32px; padding: 2rem; max-width: 500px; width: 90%; border: 1px solid #ffd700; }
        .close { float: right; font-size: 2rem; cursor: pointer; color: #ffd700; }
        .how-to-apply-modal-shell > .close {
            float: none;
            position: absolute;
            top: 0.75rem;
            right: 0.75rem;
            z-index: 30;
            margin: 0;
            width: 2.35rem;
            height: 2.35rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 1.45rem;
            line-height: 1;
            background: rgba(15, 23, 42, 0.88);
            border: 1px solid rgba(253, 224, 71, 0.35);
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .how-to-apply-modal-shell > .close:hover {
            background: rgba(253, 224, 71, 0.12);
            border-color: rgba(253, 224, 71, 0.55);
        }
        .how-to-apply-modal-shell .hta-footer-close {
            margin-top: 1.2rem;
            width: 100%;
            padding: 0.7rem 1rem;
            border-radius: 12px;
            border: 1px solid rgba(148, 163, 184, 0.28);
            background: rgba(15, 23, 42, 0.55);
            color: #94a3b8;
            font-weight: 800;
            font-size: 0.7rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            cursor: pointer;
            transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
        }
        .how-to-apply-modal-shell .hta-footer-close:hover {
            color: #fde047;
            border-color: rgba(253, 224, 71, 0.4);
            background: rgba(253, 224, 71, 0.06);
        }
        .modal.modal-layer-legal { z-index: 2200; }
        .registration-modal-shell {
            max-width: 520px;
            width: 92%;
            max-height: min(90vh, 42rem);
            overflow-y: auto;
            padding: 1.75rem 1.35rem 1.5rem;
            border-radius: 24px;
            position: relative;
        }
        .registration-modal-shell > .close {
            position: sticky;
            top: 0;
            float: right;
            z-index: 5;
            margin: -0.35rem -0.2rem 0.25rem 0;
        }
        #portal-selection-modal.modal {
            overflow-y: auto;
            overscroll-behavior: contain;
            align-items: flex-start;
            padding: 0.7rem 0;
            scrollbar-width: thin;
            scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
        }
        .portal-picker-shell {
            max-width: 520px;
            width: 92%;
            max-height: none;
            flex-shrink: 0;
            margin-top: auto;
            margin-bottom: auto;
            padding: 0;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            background: #0b1020;
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.04) inset,
                0 28px 64px rgba(0, 0, 0, 0.55);
        }
        /* Beat generic .modal-content gold frame on portal chooser */
        .modal-content.portal-picker-shell {
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: #0b1020;
            padding: 0;
            max-height: none;
            border-radius: 20px;
        }
        .portal-picker-shell > .close {
            position: absolute;
            top: 0.85rem;
            right: 0.85rem;
            float: none;
            z-index: 20;
            margin: 0;
            width: 2.4rem;
            height: 2.4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 1.4rem;
            line-height: 1;
            color: #fde047;
            background: rgba(15, 23, 42, 0.85);
            border: 1px solid rgba(253, 224, 71, 0.28);
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
        }
        .portal-picker-shell > .close:hover {
            background: rgba(253, 224, 71, 0.12);
            border-color: rgba(253, 224, 71, 0.5);
            transform: scale(1.05);
        }
        .portal-picker-inner {
            padding: 1.55rem 1.35rem 1.15rem;
        }
        .portal-picker-header {
            text-align: center;
            padding: 0.15rem 1.5rem 0;
            border-bottom: 0;
            margin-bottom: 0.9rem;
        }
        .portal-picker-kicker {
            margin: 0 0 0.4rem;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #eab308;
        }
        .portal-picker-shell .portal-picker-title {
            margin: 0;
            font-size: 1.65rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            background: none;
            -webkit-background-clip: border-box;
            background-clip: border-box;
            color: #f8fafc;
            text-shadow: none;
        }
        .portal-picker-lead {
            margin: 0.45rem auto 0;
            font-size: 0.9rem;
            line-height: 1.45;
            color: #94a3b8;
            max-width: 28rem;
        }
        .portal-picker-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.95rem;
            align-items: stretch;
        }
        @media (min-width: 480px) {
            .portal-picker-shell,
            .modal-content.portal-picker-shell {
                max-width: 640px;
            }
            .portal-picker-grid {
                grid-template-columns: 1fr 1fr;
                gap: 0.85rem;
            }
        }
        .portal-picker-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            height: 100%;
            min-height: 0;
            padding: 1.15rem 1rem 1rem;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: linear-gradient(
                155deg,
                rgba(30, 35, 55, 0.65) 0%,
                rgba(12, 16, 32, 0.94) 48%,
                rgba(6, 10, 22, 0.97) 100%
            );
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            cursor: pointer;
            overflow: hidden;
            transition:
                transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.28s ease,
                box-shadow 0.32s ease;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.06) inset,
                0 12px 36px rgba(0, 0, 0, 0.4);
        }
        .portal-picker-card::before {
            content: none;
        }
        .portal-picker-card--student::before {
            background: linear-gradient(90deg, transparent, rgba(253, 224, 71, 0.25), #fde047, rgba(253, 224, 71, 0.25), transparent);
        }
        .portal-picker-card--school::before {
            background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.35), #93c5fd, rgba(59, 130, 246, 0.35), transparent);
        }
        .portal-picker-card:focus {
            outline: none;
        }
        .portal-picker-card:focus-visible {
            outline: 2px solid rgba(253, 224, 71, 0.65);
            outline-offset: 3px;
        }
        .portal-picker-card-glow {
            position: absolute;
            inset: -45%;
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }
        .portal-picker-card--student .portal-picker-card-glow {
            background: radial-gradient(ellipse 70% 50% at 40% 0%, rgba(253, 224, 71, 0.14) 0%, transparent 58%);
        }
        .portal-picker-card--school .portal-picker-card-glow {
            background: radial-gradient(ellipse 70% 50% at 60% 0%, rgba(96, 165, 250, 0.12) 0%, transparent 58%);
        }
        .portal-picker-card:hover {
            transform: none;
        }
        .portal-picker-card:hover .portal-picker-card-glow {
            opacity: 1;
        }
        .portal-picker-card--student:hover {
            border-color: rgba(253, 224, 71, 0.22);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.07) inset,
                0 20px 48px rgba(0, 0, 0, 0.48),
                0 0 0 1px rgba(253, 224, 71, 0.12),
                0 0 40px rgba(234, 179, 8, 0.07);
        }
        .portal-picker-card--school:hover {
            border-color: rgba(96, 165, 250, 0.28);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.07) inset,
                0 20px 48px rgba(0, 0, 0, 0.48),
                0 0 0 1px rgba(96, 165, 255, 0.1),
                0 0 40px rgba(59, 130, 246, 0.08);
        }
        .portal-picker-icon-wrap {
            position: relative;
            z-index: 2;
            width: 3.15rem;
            height: 3.15rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            margin: 0 auto 0.65rem;
            border: 0;
            box-shadow: none;
        }
        .portal-picker-icon-wrap--gold {
            background: linear-gradient(160deg, #fffbeb 0%, #fde047 42%, #d97706 100%);
            color: #451a03;
        }
        .portal-picker-icon-wrap--blue {
            background: linear-gradient(160deg, #eff6ff 0%, #60a5fa 45%, #1e40af 100%);
            color: #0f172a;
        }
        .portal-picker-card-title {
            position: relative;
            z-index: 2;
            width: 100%;
            font-size: 1.05rem;
            font-weight: 700;
            color: #f8fafc;
            letter-spacing: -0.015em;
            line-height: 1.22;
            text-align: center;
        }
        .portal-picker-card-sub {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 15.5rem;
            margin: 0.35rem auto 0;
            font-size: 0.82rem;
            line-height: 1.4;
            color: #a8b4c9;
            font-weight: 500;
            text-align: center;
        }
        .portal-picker-cta-row {
            position: relative;
            z-index: 2;
            margin-top: auto;
            padding-top: 0.75rem;
            width: 100%;
        }
        .portal-picker-cta-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            width: auto;
            margin: 0 auto;
            padding: 0;
            border-radius: 0;
            font-size: 0.84rem;
            font-weight: 700;
            letter-spacing: 0.01em;
            line-height: 1.2;
            background: none;
            border: 0;
            box-shadow: none;
        }
        .portal-picker-card--student .portal-picker-cta-pill,
        .portal-picker-card--student:hover .portal-picker-cta-pill {
            color: #fde047;
            background: none;
            border: 0;
            box-shadow: none;
        }
        .portal-picker-card--school .portal-picker-cta-pill,
        .portal-picker-card--school:hover .portal-picker-cta-pill {
            color: #93c5fd;
            background: none;
            border: 0;
            box-shadow: none;
        }
        .portal-picker-cta-pill i {
            font-size: 0.72rem;
            opacity: 0.88;
            transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
        }
        .portal-picker-card:hover .portal-picker-cta-pill i {
            transform: translateX(3px);
        }
        @media (max-width: 479px) {
            .portal-picker-card {
                min-height: 0;
            }
            .portal-picker-inner {
                padding: 1.45rem 1rem 1rem;
            }
            .portal-picker-header {
                padding-left: 1rem;
                padding-right: 1rem;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .portal-picker-card:hover {
                transform: none;
            }
            .portal-picker-card:hover .portal-picker-cta-pill i {
                transform: none;
            }
        }
        .reg-field-label {
            display: block;
            font-size: 0.68rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #94a3b8;
            margin: 0.75rem 0 0.28rem;
        }
        /* Registration forms: minimal grouping, generous spacing, no decorative chrome */
        .registration-modal-shell--wizard {
            max-width: 440px;
            max-height: min(90vh, 46rem);
            padding: 1.5rem 1.35rem 1.35rem;
        }
        .registration-modal-shell--wizard .reg-form--wizard > button[type="submit"]:disabled {
            opacity: 0.42;
            cursor: not-allowed;
            pointer-events: none;
            filter: saturate(0.65);
        }
        .registration-modal-shell--wizard .reg-form--wizard > button[type="submit"][data-reg-submit-locked="1"] {
            opacity: 0.42;
            cursor: pointer;
            filter: saturate(0.65);
        }
        @keyframes otr-reg-submit-hint-pulse {
            0%,
            100% {
                border-color: rgba(255, 0, 42, 0.58);
                box-shadow:
                    0 10px 28px rgba(0, 0, 0, 0.18),
                    0 0 5px rgba(255, 0, 42, 0.16);
            }
            50% {
                border-color: rgba(251, 191, 36, 0.78);
                box-shadow:
                    0 10px 28px rgba(0, 0, 0, 0.18),
                    0 0 0 2px rgba(251, 191, 36, 0.42),
                    0 0 12px rgba(251, 191, 36, 0.28),
                    0 0 8px rgba(255, 0, 42, 0.22);
            }
        }
        @keyframes otr-reg-agree-submit-hint-pulse {
            0%,
            100% {
                border-color: rgba(255, 0, 42, 0.58);
                box-shadow: 0 0 5px rgba(255, 0, 42, 0.16);
            }
            50% {
                border-color: rgba(251, 191, 36, 0.78);
                box-shadow:
                    0 0 0 2px rgba(251, 191, 36, 0.42),
                    0 0 12px rgba(251, 191, 36, 0.28),
                    0 0 8px rgba(255, 0, 42, 0.22);
            }
        }
        .registration-modal-shell--wizard .reg-group.reg-group--submit-hint {
            animation: otr-reg-submit-hint-pulse 0.72s ease-in-out 4;
        }
        .registration-modal-shell--wizard .reg-form--wizard .legal-agree-row.legal-agree-row--submit-hint,
        .registration-modal-shell--wizard .reg-form--wizard .legal-agree-row.legal-agree-row--policy-nudge {
            width: 100%;
            box-sizing: border-box;
            align-self: stretch;
            margin-top: 1rem;
            padding: 0.78rem 0.95rem;
            border: 0.5px solid rgba(255, 0, 42, 0.58);
            border-radius: 12px;
            background: linear-gradient(165deg, rgba(30, 41, 59, 0.42) 0%, rgba(15, 23, 42, 0.58) 100%);
        }
        .registration-modal-shell--wizard .reg-form--wizard .legal-agree-row.legal-agree-row--submit-hint {
            animation: otr-reg-agree-submit-hint-pulse 0.72s ease-in-out 4;
        }
        .registration-modal-shell--wizard .reg-form--wizard .legal-agree-row.legal-agree-row--policy-nudge {
            animation: otr-reg-agree-submit-hint-pulse 0.72s ease-in-out 3;
        }
        #student-reg-modal .student-reg-head-row {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: flex-start;
            gap: 0.35rem 1.65rem;
            margin-bottom: 0.35rem;
        }
        #student-reg-modal .student-reg-head-row #student-reg-title {
            margin: 0;
            flex: 0 1 auto;
            min-width: 0;
        }
        #student-reg-modal .student-reg-signin-top {
            margin: 0;
            flex: 0 0 auto;
            text-align: left;
            line-height: 1.35;
        }
        #student-reg-modal .student-reg-signin-top .legal-inline-btn {
            margin-left: 0.4rem;
        }
        #teacher-reg-modal .teacher-reg-head-row {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            justify-content: flex-start;
            gap: 0.35rem 1.65rem;
            margin-bottom: 0.35rem;
        }
        #teacher-reg-modal .teacher-reg-head-row #teacher-reg-title {
            margin: 0;
            flex: 0 1 auto;
            min-width: 0;
        }
        #teacher-reg-modal .teacher-reg-signin-top {
            margin: 0;
            flex: 0 0 auto;
            text-align: left;
            line-height: 1.35;
        }
        #teacher-reg-modal .teacher-reg-signin-top .legal-inline-btn {
            margin-left: 0.4rem;
        }
        #form-teacher-reg > .reg-tch-status-line {
            margin: 0.35rem 0 0;
            min-height: 0;
        }
        #form-teacher-reg > .reg-tch-submit-btn {
            margin-top: 0.55rem;
        }
        #form-teacher-reg .legal-agree-row {
            margin-bottom: 0;
        }
        #form-teacher-reg > .reg-group:nth-child(3) > .reg-group-heading {
            margin-bottom: 0.4rem;
        }
        #form-teacher-reg > .reg-group:nth-child(3) .reg-field-label {
            margin: 0 0 0.22rem;
        }
        #form-teacher-reg > .reg-group:nth-child(3) > label[for="reg-tch-province"] {
            margin-top: 0;
        }
        #form-teacher-reg > .reg-group:nth-child(3) > label[for="reg-tch-district-combo"],
        #form-teacher-reg > .reg-group:nth-child(3) > label[for="reg-tch-city"] {
            margin-top: 0.92rem;
        }
        #form-teacher-reg > .reg-group:nth-child(3) > .reg-stu-mobile-label-row {
            margin-top: var(--otr-stu-field-stack-gap, 0.55rem);
        }
        #form-teacher-reg > .reg-group:nth-child(3) > .reg-stu-mobile-label-row .reg-field-label {
            margin: 0;
        }
        #form-teacher-reg > .reg-group:nth-child(3) > .reg-tch-postal-same-hint {
            margin: 0.22rem 0 0.35rem;
        }
        #form-teacher-reg > .reg-group:nth-child(3) > .reg-tch-postal-same-hint:not([hidden]) + #reg-tch-postal-address {
            margin-top: 0;
        }
        #form-teacher-reg > .reg-group:nth-child(3) select,
        #form-teacher-reg > .reg-group:nth-child(3) #reg-tch-city {
            margin-bottom: var(--otr-stu-field-box-gap, 0.48rem);
        }
        #form-teacher-reg > .reg-group:nth-child(3) > #reg-tch-postal-address.otr-auto-grow-field {
            margin-bottom: 0;
        }
        #form-student-reg {
            --otr-stu-label-field-gap: 0.35rem;
            --otr-stu-field-stack-gap: 0.55rem;
            --otr-stu-field-box-gap: 0.48rem;
        }
        #form-student-reg > .reg-stu-status-line {
            margin: 0.35rem 0 0;
            min-height: 0;
        }
        #form-student-reg > .reg-stu-submit-btn {
            margin-top: 0.55rem;
        }
        #form-student-reg .legal-agree-row {
            margin-bottom: 0;
        }
        /* Location: same field rhythm as Student / Class & school cards */
        #form-student-reg > .reg-group:nth-child(3) > .reg-group-heading {
            margin-bottom: 0.55rem;
        }
        #form-student-reg > .reg-group:nth-child(3) > label[for="reg-stu-province"] {
            margin-top: 0.22rem;
            margin-bottom: 0.22rem;
        }
        #form-student-reg > .reg-group:nth-child(3) > label[for="reg-stu-district-combo"],
        #form-student-reg > .reg-group:nth-child(3) > label[for="reg-stu-city"],
        #form-student-reg > .reg-group:nth-child(3) > label[for="reg-stu-address"],
        #dt-entry-form > .reg-group:nth-child(3) > label[for="dt-input-district-combo"],
        #dt-entry-form > .reg-group:nth-child(3) > label[for="dt-input-city"] {
            margin-top: var(--otr-stu-field-stack-gap);
            margin-bottom: var(--otr-stu-label-field-gap);
        }
        #form-student-reg > .reg-group:nth-child(3) > select,
        #form-student-reg > .reg-group:nth-child(3) > #reg-stu-city {
            margin-bottom: var(--otr-stu-field-box-gap);
        }
        #form-student-reg > .reg-group:nth-child(3) > #reg-stu-address {
            margin-bottom: 0;
        }
        /* Contact: same field rhythm as Student / Class & school cards */
        #form-student-reg > .reg-group:nth-child(4) > .reg-group-heading,
        #form-teacher-reg > .reg-group:nth-child(4) > .reg-group-heading {
            margin-bottom: 0.55rem;
        }
        #form-student-reg > .reg-group:nth-child(4) > .reg-field-label,
        #form-teacher-reg > .reg-group:nth-child(4) > .reg-field-label {
            margin-bottom: var(--otr-stu-label-field-gap, 0.22rem);
        }
        #form-student-reg > .reg-group:nth-child(4) > .reg-stu-mobile-label-row,
        #form-teacher-reg > .reg-group:nth-child(4) > .reg-stu-mobile-label-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.45rem 0.65rem;
            margin-top: 0.22rem;
            margin-bottom: var(--otr-stu-label-field-gap, 0.22rem);
        }
        #form-student-reg > .reg-group:nth-child(4) > .reg-stu-mobile-label-row > .reg-field-label,
        #form-teacher-reg > .reg-group:nth-child(4) > .reg-stu-mobile-label-row > .reg-field-label {
            margin: 0;
        }
        #form-student-reg > .reg-group:nth-child(4) > label.reg-stu-wa-field-label,
        #form-teacher-reg > .reg-group:nth-child(4) > label.reg-stu-wa-field-label {
            margin-top: 0.22rem;
            display: block;
            text-align: center;
        }
        #form-student-reg .reg-stu-wa-same-mobile,
        #form-teacher-reg .reg-stu-wa-same-mobile {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            margin: 0;
            font-size: 0.6875rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: #94a3b8;
            cursor: pointer;
            user-select: none;
            line-height: 1.25;
        }
        #form-student-reg .reg-stu-wa-same-mobile span,
        #form-teacher-reg .reg-stu-wa-same-mobile span {
            color: #cbd5e1;
        }
        #form-student-reg .reg-stu-wa-same-mobile input[type="checkbox"],
        #form-teacher-reg .reg-stu-wa-same-mobile input[type="checkbox"] {
            width: 0.9rem;
            height: 0.9rem;
            margin: 0;
            flex-shrink: 0;
            accent-color: #facc15;
            cursor: pointer;
        }
        #form-student-reg .reg-stu-wa-same-mobile:hover span,
        #form-teacher-reg .reg-stu-wa-same-mobile:hover span {
            color: #e2e8f0;
        }
        #form-student-reg > .reg-group:nth-child(4) > label[for="reg-stu-email"],
        #form-student-reg > .reg-group:nth-child(4) > label[for="reg-stu-password"],
        #form-student-reg > .reg-group:nth-child(4) > label[for="reg-stu-password-confirm"],
        #form-teacher-reg > .reg-group:nth-child(4) > label[for="reg-tch-email"],
        #form-teacher-reg > .reg-group:nth-child(4) > label[for="reg-tch-password"],
        #form-teacher-reg > .reg-group:nth-child(4) > label[for="reg-tch-password-confirm"] {
            margin-top: 0.55rem;
        }
        #form-student-reg > .reg-group:nth-child(4) > #reg-stu-phone,
        #form-student-reg > .reg-group:nth-child(4) > #reg-stu-whatsapp,
        #form-student-reg > .reg-group:nth-child(4) > #reg-stu-email,
        #form-student-reg > .reg-group:nth-child(4) > .otr-pw-field,
        #form-teacher-reg > .reg-group:nth-child(4) > #reg-tch-contact,
        #form-teacher-reg > .reg-group:nth-child(4) > #reg-tch-whatsapp,
        #form-teacher-reg > .reg-group:nth-child(4) > #reg-tch-email,
        #form-teacher-reg > .reg-group:nth-child(4) > .otr-pw-field {
            margin-bottom: var(--otr-stu-field-box-gap, 0.48rem);
        }
        #form-student-reg > .reg-group:nth-child(4) > #reg-stu-pw-meter-block,
        #form-teacher-reg > .reg-group:nth-child(4) > #reg-tch-pw-meter-block {
            margin-bottom: 0.2rem;
        }
        #form-student-reg > .reg-group:nth-child(4) > #reg-stu-password-match-label,
        #form-teacher-reg > .reg-group:nth-child(4) > #reg-tch-password-match-label {
            margin-bottom: 0;
        }
        #form-student-reg > .reg-group:nth-child(4) > #reg-stu-password-match-label:empty,
        #form-teacher-reg > .reg-group:nth-child(4) > #reg-tch-password-match-label:empty {
            display: none;
            margin: 0;
        }
        #form-student-reg > .reg-group:first-child > .reg-photo-upload-row {
            margin-bottom: var(--otr-stu-field-box-gap);
        }
        #form-teacher-reg > .reg-group:first-child > .reg-photo-upload-row {
            margin-bottom: var(--otr-stu-field-box-gap);
        }
        #form-teacher-reg {
            --otr-stu-label-field-gap: 0.22rem;
            --otr-stu-field-stack-gap: 0.55rem;
            --otr-stu-field-box-gap: 0.48rem;
        }
        #form-teacher-reg > .reg-group:nth-child(2) > .reg-tch-type-medium-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 0.75rem;
            row-gap: 0;
            align-items: stretch;
            width: 100%;
            margin-top: 0;
            margin-bottom: var(--otr-stu-field-box-gap, 0.48rem);
        }
        #form-teacher-reg > .reg-group:nth-child(2) > .reg-tch-type-medium-row .reg-tch-type-medium-col {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        #form-teacher-reg > .reg-group:nth-child(2) > .reg-tch-type-medium-row .reg-field-label {
            margin: 0 0 var(--otr-stu-label-field-gap, 0.22rem);
        }
        #form-teacher-reg > .reg-group:nth-child(2) > .reg-tch-type-medium-row select {
            width: 100%;
            box-sizing: border-box;
            font-size: 0.8125rem;
            line-height: 1.25;
            font-weight: 400;
            padding: 0.58rem 0.8rem;
            min-height: calc(0.58rem * 2 + 1.25 * 0.8125rem);
        }
        .registration-modal-shell--wizard #form-teacher-reg > .reg-group:nth-child(2) > .reg-tch-type-medium-row select.p-3 {
            font-size: 0.8125rem;
            line-height: 1.25;
            font-weight: 400;
            padding: 0.58rem 0.8rem;
        }
        #form-teacher-reg > .reg-group:nth-child(2) > label[for="reg-tch-school"] {
            margin-top: var(--otr-stu-field-stack-gap, 0.55rem);
            margin-bottom: var(--otr-stu-label-field-gap, 0.22rem);
        }
        #form-teacher-reg > .reg-group:nth-child(2) > #reg-tch-school.otr-auto-grow-field {
            margin-bottom: var(--otr-stu-field-box-gap, 0.48rem);
        }
        #form-teacher-reg > .reg-group:nth-child(2) > label[for="reg-tch-institution-address"] {
            margin-top: var(--otr-stu-field-stack-gap, 0.55rem);
            margin-bottom: var(--otr-stu-label-field-gap, 0.22rem);
        }
        #form-teacher-reg > .reg-group:nth-child(2) > #reg-tch-institution-address.otr-auto-grow-field {
            margin-bottom: 0;
        }
        #form-teacher-reg > .reg-group:nth-child(2) > .reg-photo-upload-row {
            margin-bottom: var(--otr-stu-field-box-gap, 0.48rem);
        }
        #form-student-reg > .reg-group:first-child > .reg-group-heading {
            margin-bottom: 0.55rem;
        }
        #form-student-reg > .reg-group:first-child > .reg-field-label {
            margin-top: 0;
            margin-bottom: var(--otr-stu-label-field-gap);
        }
        #form-student-reg > .reg-group:first-child > label[for="reg-stu-name"] {
            margin-top: var(--otr-stu-label-field-gap);
        }
        #form-student-reg > .reg-group:first-child > .reg-field-label[for="reg-stu-sdo"] {
            margin-top: var(--otr-stu-field-stack-gap);
        }
        #form-student-reg > .reg-group:first-child > input.p-3,
        #form-student-reg > .reg-group:first-child > select.p-3 {
            margin-bottom: var(--otr-stu-field-box-gap);
        }
        #form-student-reg .reg-stu-gender-bform-row {
            display: grid;
            grid-template-columns: minmax(10.85rem, 12.35rem) minmax(0, 1fr);
            column-gap: 1.2rem;
            row-gap: 0;
            align-items: start;
            width: 100%;
            margin-top: 0.55rem;
        }
        #form-student-reg .reg-stu-gender-bform-col {
            min-width: 0;
        }
        #form-student-reg .reg-stu-gender-bform-col > .reg-field-label {
            margin-top: 0;
            margin-bottom: var(--otr-stu-label-field-gap);
        }
        #form-student-reg .reg-stu-gender-bform-col--gender select {
            width: 100%;
            box-sizing: border-box;
        }
        #form-student-reg .reg-stu-gender-picker {
            position: relative;
            width: 100%;
        }
        #form-student-reg .reg-stu-gender-native {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        #form-student-reg .reg-stu-gender-trigger {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.55rem;
            width: 100%;
            box-sizing: border-box;
            margin: 0;
            padding: 0.58rem 0.8rem;
            border-radius: 10px;
            border: 1px solid var(--otr-reg-field-border-empty);
            background-color: var(--otr-reg-field-bg-empty);
            font-size: 0.8125rem;
            font-weight: 400;
            line-height: 1.25;
            min-height: 0;
            text-align: left;
            color: #e2e8f0;
            cursor: pointer;
            transition: border-color 0.15s ease, box-shadow 0.15s ease;
        }
        #form-student-reg .reg-stu-gender-trigger-text {
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #form-student-reg .reg-stu-gender-trigger-icon {
            flex: 0 0 auto;
            font-size: 0.72rem;
            color: #94a3b8;
        }
        #form-student-reg .reg-stu-gender-picker:has(#reg-stu-gender:valid) .reg-stu-gender-trigger {
            border-color: var(--otr-reg-field-border);
            background-color: var(--otr-reg-field-bg-filled);
        }
        #form-student-reg .reg-stu-gender-trigger[aria-expanded="true"] {
            border-color: rgba(251, 191, 36, 0.55);
            box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
        }
        #form-student-reg .reg-stu-gender-listbox {
            position: absolute;
            z-index: 60;
            bottom: calc(100% + 0.28rem);
            top: auto;
            left: 0;
            min-width: 100%;
            width: max-content;
            max-width: min(17.75rem, 92vw);
            margin: 0;
            padding: 0.2rem 0 0.28rem;
            list-style: none;
            border-radius: 10px;
            border: 1px solid rgba(100, 116, 139, 0.45);
            background: #0c1830;
            box-shadow: 0 -8px 22px rgba(15, 23, 42, 0.18);
        }
        #form-student-reg .reg-stu-gender-option {
            padding: 0.3rem 0.95rem;
            color: #ffffff;
            font-size: 0.8125rem;
            line-height: 1.22;
            white-space: nowrap;
            cursor: pointer;
        }
        #form-student-reg .reg-stu-gender-option:hover,
        #form-student-reg .reg-stu-gender-option.is-active {
            background: #d9bc5c;
            color: #000000;
            -webkit-text-fill-color: #000000;
        }
        #form-student-reg .reg-stu-gender-option[aria-selected="true"]:not(:hover):not(.is-active) {
            background: transparent;
            color: #ffffff;
        }
        #form-student-reg .reg-stu-gender-option[aria-selected="true"].is-active,
        #form-student-reg .reg-stu-gender-option[aria-selected="true"]:hover {
            background: #d9bc5c;
            color: #000000;
            -webkit-text-fill-color: #000000;
        }
        #form-student-reg .reg-stu-gender-bform-col--bform {
            justify-self: end;
            width: auto;
            max-width: 15.35rem;
            margin-left: auto;
            margin-right: 0.65rem;
        }
        #form-student-reg .reg-stu-gender-bform-col--bform > .reg-field-label {
            display: block;
            width: 100%;
            margin-top: 0;
            margin-bottom: var(--otr-stu-label-field-gap);
            text-align: center;
        }
        #form-student-reg .reg-stu-gender-bform-col--bform .otr-bform-input {
            width: 100%;
            max-width: 15.35rem;
            box-sizing: border-box;
        }
        #form-student-reg .reg-stu-bform-hint {
            margin-top: 0.2rem;
            text-align: center;
        }
        #form-student-reg select:not(.reg-stu-gender-native),
        #form-teacher-reg select {
            color: #f8fafc;
            -webkit-text-fill-color: #f8fafc;
            color-scheme: dark;
            accent-color: #d9bc5c;
        }
        #form-student-reg select:not(.reg-stu-gender-native) option,
        #form-student-reg select:not(.reg-stu-gender-native) optgroup,
        #form-teacher-reg select option,
        #form-teacher-reg select optgroup {
            background-color: #0c1830;
            color: #ffffff;
            -webkit-text-fill-color: #ffffff;
        }
        #form-student-reg select:not(.reg-stu-gender-native) option:checked,
        #form-teacher-reg select option:checked {
            background-color: #0c1830;
            color: #ffffff;
            -webkit-text-fill-color: #ffffff;
        }
        #form-student-reg select:not(.reg-stu-gender-native) option:hover,
        #form-student-reg select:not(.reg-stu-gender-native) option:focus,
        #form-student-reg select:not(.reg-stu-gender-native) option:focus-visible,
        #form-student-reg select:not(.reg-stu-gender-native) option:checked:focus,
        #form-teacher-reg select option:hover,
        #form-teacher-reg select option:focus,
        #form-teacher-reg select option:focus-visible,
        #form-teacher-reg select option:checked:focus {
            background-color: #d9bc5c !important;
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }
        @supports (appearance: base-select) {
            #form-student-reg select:not(.reg-stu-gender-native),
            #form-teacher-reg select {
                appearance: base-select;
            }
            #form-student-reg select:not(.reg-stu-gender-native)::picker(select),
            #form-teacher-reg select::picker(select) {
                background-color: #0c1830;
                border: 1px solid rgba(100, 116, 139, 0.55);
                border-radius: 10px;
            }
            #form-student-reg select:not(.reg-stu-gender-native) option,
            #form-teacher-reg select option {
                background-color: #0c1830;
                color: #ffffff;
            }
            #form-student-reg select:not(.reg-stu-gender-native) option:checked,
            #form-teacher-reg select option:checked {
                background-color: #0c1830;
                color: #ffffff;
            }
            #form-student-reg select:not(.reg-stu-gender-native) option:hover,
            #form-student-reg select:not(.reg-stu-gender-native) option:focus,
            #form-student-reg select:not(.reg-stu-gender-native) option:focus-visible,
            #form-student-reg select:not(.reg-stu-gender-native) option:checked:focus,
            #form-teacher-reg select option:hover,
            #form-teacher-reg select option:focus,
            #form-teacher-reg select option:focus-visible,
            #form-teacher-reg select option:checked:focus {
                background-color: #d9bc5c;
                color: #000000;
                -webkit-text-fill-color: #000000;
            }
            #form-student-reg select:not(.reg-stu-gender-native) option::checkmark,
            #form-teacher-reg select option::checkmark {
                display: none;
            }
        }
        #form-student-reg .otr-district-combobox,
        #form-teacher-reg .otr-district-combobox,
        #dt-entry-form .otr-district-combobox {
            --otr-district-list-highlight: #d9bc5c;
            --otr-district-list-highlight-text: #000000;
        }
        #form-student-reg .otr-district-combobox__listbox,
        #form-teacher-reg .otr-district-combobox__listbox,
        #dt-entry-form .otr-district-combobox__listbox {
            background: #0c1830;
            color: #ffffff;
            border-color: rgba(100, 116, 139, 0.55);
        }
        #form-student-reg .otr-district-combobox__option,
        #form-teacher-reg .otr-district-combobox__option,
        #dt-entry-form .otr-district-combobox__option {
            color: #ffffff;
        }
        #form-student-reg .otr-district-combobox__option--empty,
        #form-teacher-reg .otr-district-combobox__option--empty,
        #dt-entry-form .otr-district-combobox__option--empty {
            color: #94a3b8;
        }
        #form-student-reg .otr-district-combobox__option.is-active,
        #form-student-reg .otr-district-combobox__option:not(.otr-district-combobox__option--empty):hover,
        #form-teacher-reg .otr-district-combobox__option.is-active,
        #form-teacher-reg .otr-district-combobox__option:not(.otr-district-combobox__option--empty):hover,
        #dt-entry-form .otr-district-combobox__option.is-active,
        #dt-entry-form .otr-district-combobox__option:not(.otr-district-combobox__option--empty):hover {
            color: #000000 !important;
            -webkit-text-fill-color: #000000 !important;
        }
        #form-student-reg .otr-reg-select-listbox,
        #form-teacher-reg .otr-reg-select-listbox,
        #dt-entry-form .otr-reg-select-listbox {
            position: relative;
            width: 100%;
        }
        #form-student-reg .otr-reg-select-listbox__native,
        #form-teacher-reg .otr-reg-select-listbox__native,
        #dt-entry-form .otr-reg-select-listbox__native {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }
        #form-student-reg .otr-reg-select-listbox__trigger,
        #form-teacher-reg .otr-reg-select-listbox__trigger,
        #dt-entry-form .otr-reg-select-listbox__trigger {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.45rem;
            text-align: left;
            cursor: pointer;
            font: inherit;
            line-height: 1.25;
        }
        #form-student-reg .otr-reg-select-listbox__label,
        #form-teacher-reg .otr-reg-select-listbox__label,
        #dt-entry-form .otr-reg-select-listbox__label {
            flex: 1 1 auto;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        #form-student-reg .otr-reg-select-listbox__chevron,
        #form-teacher-reg .otr-reg-select-listbox__chevron,
        #dt-entry-form .otr-reg-select-listbox__chevron {
            flex: 0 0 auto;
            color: rgba(253, 224, 71, 0.92);
            font-size: 0.75rem;
            line-height: 1;
            pointer-events: none;
        }
        #form-student-reg .otr-reg-select-listbox.is-open .otr-reg-select-listbox__chevron i,
        #form-teacher-reg .otr-reg-select-listbox.is-open .otr-reg-select-listbox__chevron i,
        #dt-entry-form .otr-reg-select-listbox.is-open .otr-reg-select-listbox__chevron i {
            transform: rotate(180deg);
        }
        #form-student-reg .otr-reg-select-listbox__chevron i,
        #form-teacher-reg .otr-reg-select-listbox__chevron i,
        #dt-entry-form .otr-reg-select-listbox__chevron i {
            transition: transform 0.18s ease;
        }
        #form-student-reg .otr-reg-select-listbox__listbox,
        #form-teacher-reg .otr-reg-select-listbox__listbox,
        #dt-entry-form .otr-reg-select-listbox__listbox {
            position: absolute;
            z-index: 2400;
            left: 0;
            right: 0;
            top: calc(100% + 0.28rem);
            margin: 0;
            padding: 0.28rem 0;
            list-style: none;
            max-height: min(16rem, 42vh);
            overflow-y: auto;
            border-radius: 10px;
            border: 1px solid rgba(100, 116, 139, 0.55);
            background: #0c1830;
            color: #ffffff;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
        }
        #form-student-reg .reg-stu-gender-bform-col--gender,
        #form-student-reg .reg-stu-gender-bform-row {
            overflow: visible;
        }
        #form-student-reg .otr-reg-select-listbox--drop-up {
            overflow: visible;
        }
        #form-student-reg #reg-stu-gender-listbox,
        #form-student-reg .reg-stu-gender-bform-col--gender .otr-reg-select-listbox__listbox,
        #form-student-reg .otr-reg-select-listbox--drop-up .otr-reg-select-listbox__listbox {
            top: auto;
            bottom: calc(100% + 0.28rem);
            box-shadow: 0 -10px 24px rgba(15, 23, 42, 0.22);
        }
        .registration-modal-shell--wizard #form-student-reg > .reg-group:first-child {
            overflow: visible;
        }
        #form-student-reg .otr-reg-select-listbox__option,
        #form-teacher-reg .otr-reg-select-listbox__option,
        #dt-entry-form .otr-reg-select-listbox__option {
            padding: 0.42rem 0.85rem;
            font-size: 0.8125rem;
            font-weight: 600;
            line-height: 1.35;
            cursor: pointer;
            color: #ffffff;
        }
        #form-student-reg .otr-reg-select-listbox__option--placeholder,
        #form-teacher-reg .otr-reg-select-listbox__option--placeholder,
        #dt-entry-form .otr-reg-select-listbox__option--placeholder {
            color: #94a3b8;
            font-weight: 500;
        }
        #form-student-reg .otr-reg-select-listbox__option.is-active,
        #form-teacher-reg .otr-reg-select-listbox__option.is-active,
        #dt-entry-form .otr-reg-select-listbox__option.is-active {
            background-color: #d9bc5c;
            color: #000000;
            -webkit-text-fill-color: #000000;
        }
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) {
            min-width: 0;
        }
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) > .reg-group-heading {
            margin-bottom: 0.55rem;
        }
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-class-fee-row {
            margin-top: 0;
        }
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-class-fee-col > .reg-field-label,
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-subject-medium-col > .reg-field-label {
            margin-top: 0;
            margin-bottom: var(--otr-stu-label-field-gap);
        }
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-class-fee-col > select,
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-class-fee-col > .otr-reg-select-listbox,
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-class-fee-col > .reg-stu-field-locked,
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-subject-medium-col > select,
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-subject-medium-col > .otr-reg-select-listbox,
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-subject-medium-col > .reg-stu-field-locked {
            margin-bottom: var(--otr-stu-field-box-gap);
        }
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-subject-medium-row {
            margin-top: var(--otr-stu-field-stack-gap);
        }
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-plan-box {
            margin: var(--otr-stu-field-stack-gap) 0 var(--otr-stu-field-box-gap);
        }
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) > label[for="reg-stu-school"] {
            margin-top: var(--otr-stu-field-stack-gap);
            margin-bottom: var(--otr-stu-label-field-gap);
        }
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) > #reg-stu-school {
            margin-bottom: 0;
        }
        #form-student-reg .reg-stu-class-fee-row {
            display: flex;
            align-items: flex-start;
            column-gap: 1.2rem;
            width: 100%;
            min-width: 0;
            max-width: 100%;
        }
        #form-student-reg .reg-stu-class-fee-col:first-child {
            flex: 0 100 10.75rem;
            min-width: 6.75rem;
            max-width: 10.75rem;
        }
        #form-student-reg .reg-stu-class-fee-col:last-child {
            flex: 1 1 auto;
            min-width: 0;
            max-width: 100%;
        }
        #form-student-reg .reg-stu-class-fee-col > .reg-field-label {
            margin: 0 0 var(--otr-stu-label-field-gap, 0.22rem);
            line-height: 1.2;
            white-space: nowrap;
        }
        #form-student-reg .reg-stu-class-fee-col:last-child > .reg-field-label {
            text-align: center;
        }
        #form-student-reg .reg-stu-class-fee-col > select,
        #form-student-reg .reg-stu-class-fee-col > .reg-stu-field-locked {
            width: 100%;
            box-sizing: border-box;
            min-height: 2.7rem;
        }
        #form-student-reg .reg-stu-class-fee-col > .reg-stu-field-locked {
            display: flex;
            align-items: center;
            white-space: nowrap;
        }
        #form-student-reg .reg-stu-class-fee-col > .reg-stu-field-locked.is-fee-wrap {
            white-space: normal;
        }
        #form-student-reg .reg-stu-class-fee-col > .reg-stu-field-locked.is-awaiting-class {
            justify-content: center;
            text-align: center;
            background-color: var(--otr-reg-field-bg-empty);
            border-color: var(--otr-reg-field-border-empty);
        }
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) #reg-stu-class:required:invalid {
            color: #6b7280;
        }
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) #reg-stu-class:required:valid {
            color: #e2e8f0;
        }
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) #reg-stu-test-fee-display.is-awaiting-class,
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) #reg-stu-subject-display,
        #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) #reg-stu-medium {
            color: #6b7280;
        }
        #form-student-reg .reg-stu-subject-medium-row {
            display: flex;
            align-items: stretch;
            column-gap: 1.2rem;
            width: 100%;
            min-width: 0;
            margin-top: var(--otr-stu-field-stack-gap);
        }
        #form-student-reg .reg-stu-subject-medium-stack {
            flex: 0 100 10.75rem;
            min-width: 6.75rem;
            max-width: 10.75rem;
            display: flex;
            flex-direction: column;
            gap: var(--otr-stu-field-stack-gap);
        }
        #form-student-reg .reg-stu-subject-medium-spacer {
            flex: 1 1 auto;
            min-width: 0;
            align-self: stretch;
            display: flex;
            align-items: stretch;
            min-height: 0;
        }
        #form-student-reg .reg-stu-national-welcome.is-pending {
            display: none !important;
        }
        #form-student-reg .reg-stu-national-welcome {
            flex: 1 1 auto;
            width: 100%;
            min-width: 0;
            display: none;
            align-items: stretch;
            justify-content: center;
            opacity: 0;
            transform: scale(0.9) translateY(0.65rem);
            filter: blur(5px);
            pointer-events: none;
            transition:
                opacity 1.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.55s cubic-bezier(0.16, 1, 0.3, 1),
                filter 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }
        #form-student-reg .reg-stu-national-welcome.is-preparing,
        #form-student-reg .reg-stu-national-welcome.is-revealed,
        #form-student-reg .reg-stu-national-welcome.is-hiding {
            display: flex;
        }
        #form-student-reg .reg-stu-national-welcome.is-preparing:not(.is-revealed) {
            opacity: 0;
            transform: scale(0.88) translateY(0.85rem);
            filter: blur(7px);
            pointer-events: none;
        }
        #form-student-reg .reg-stu-national-welcome.is-revealed:not(.is-preparing):not(.is-hiding) {
            opacity: 1;
            transform: scale(1) translateY(0);
            filter: blur(0);
            pointer-events: auto;
        }
        #form-student-reg .reg-stu-national-welcome.is-preparing .reg-stu-national-welcome__card {
            opacity: 0;
            transform: scale(0.96);
        }
        #form-student-reg .reg-stu-national-welcome.is-revealed:not(.is-preparing) .reg-stu-national-welcome__card {
            opacity: 1;
            transform: scale(1);
            transition:
                opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.55s,
                transform 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.48s;
        }
        #form-student-reg .reg-stu-national-welcome.is-hiding {
            opacity: 0;
            transform: scale(0.94) translateY(0.4rem);
            filter: blur(3px);
            pointer-events: none;
        }
        #form-student-reg .reg-stu-national-welcome.is-magic .reg-stu-national-welcome__card {
            animation: otr-reg-national-welcome-unveil 1.35s cubic-bezier(0.16, 1, 0.3, 1) both;
        }
        #form-student-reg .reg-stu-national-welcome.is-magic .reg-stu-national-welcome__glow {
            animation: otr-reg-national-welcome-glow 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
        }
        #form-student-reg .reg-stu-national-welcome.is-magic .reg-stu-national-welcome__welcome-row {
            animation: otr-reg-national-welcome-part 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
        }
        #form-student-reg .reg-stu-national-welcome.is-magic .reg-stu-national-welcome__name-pill {
            animation: otr-reg-national-welcome-part 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both;
        }
        #form-student-reg .reg-stu-national-welcome.is-magic .reg-stu-national-welcome__to-row {
            animation: otr-reg-national-welcome-part 0.68s cubic-bezier(0.22, 1, 0.36, 1) 0.56s both;
        }
        #form-student-reg .reg-stu-national-welcome.is-magic .reg-stu-national-welcome__stage {
            animation: otr-reg-national-welcome-stage 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.72s both;
        }
        #form-student-reg .reg-stu-national-welcome.is-magic .reg-stu-national-welcome__inspire {
            animation: otr-reg-national-welcome-part 0.68s cubic-bezier(0.22, 1, 0.36, 1) 0.88s both;
        }
        #form-student-reg .reg-stu-national-welcome__card {
            position: relative;
            flex: 1 1 auto;
            width: 100%;
            min-height: 8.25rem;
            padding: 0.45rem 0.55rem 0.5rem;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.22);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 22%),
                linear-gradient(168deg, #0a1628 0%, #0f2845 46%, #08131f 100%);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.05) inset,
                0 14px 32px rgba(2, 6, 23, 0.38);
        }
        #form-student-reg .reg-stu-national-welcome__card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 12%;
            right: 12%;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, transparent, #eab308 18%, #fde68a 50%, #eab308 82%, transparent);
            opacity: 0.92;
            pointer-events: none;
        }
        #form-student-reg .reg-stu-national-welcome__card::after {
            content: "";
            position: absolute;
            inset: 0.45rem;
            border-radius: 12px;
            border: 1px solid rgba(148, 163, 184, 0.12);
            pointer-events: none;
        }
        #form-student-reg .reg-stu-national-welcome__glow {
            position: absolute;
            inset: -35% -20%;
            pointer-events: none;
            opacity: 0;
            background:
                radial-gradient(ellipse 70% 55% at 50% 18%, rgba(250, 204, 21, 0.22), transparent 68%),
                radial-gradient(ellipse 90% 70% at 50% 100%, rgba(56, 189, 248, 0.08), transparent 72%);
        }
        #form-student-reg .reg-stu-national-welcome__copy {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.26rem;
            min-height: 7.35rem;
            padding: 0.3rem 0.15rem 0.68rem;
            text-align: center;
        }
        #form-student-reg .reg-stu-national-welcome__welcome-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
        }
        #form-student-reg .reg-stu-national-welcome__spark {
            color: #facc15;
            font-size: 0.58rem;
            line-height: 1;
            opacity: 0.95;
        }
        #form-student-reg .reg-stu-national-welcome__welcome {
            margin: 0;
            font-size: clamp(1.08rem, 2.15vw, 1.38rem);
            font-weight: 800;
            font-style: italic;
            letter-spacing: 0.08em;
            line-height: 1.05;
            color: #facc15;
        }
        #form-student-reg .reg-stu-national-welcome__to-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            width: min(10.5rem, 90%);
            margin: 0;
        }
        #form-student-reg .reg-stu-national-welcome__to-line {
            flex: 1 1 auto;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(226, 232, 240, 0.45), transparent);
        }
        #form-student-reg .reg-stu-national-welcome__to {
            flex: 0 0 auto;
            font-size: 0.5rem;
            font-weight: 700;
            letter-spacing: 0.32em;
            color: #cbd5e1;
            line-height: 1;
            text-indent: 0.32em;
        }
        #form-student-reg .reg-stu-national-welcome__stage {
            margin: 0;
            padding: 0.26rem 0.68rem;
            max-width: 100%;
            font-size: clamp(0.58rem, 1.14vw, 0.7rem);
            font-weight: 900;
            letter-spacing: 0.06em;
            line-height: 1.15;
            color: #0c1628;
            background: linear-gradient(135deg, #fef3c7 0%, #facc15 42%, #eab308 100%);
            border-radius: 7px;
            border: 1px solid rgba(255, 255, 255, 0.45);
            box-shadow: 0 2px 0 rgba(15, 23, 42, 0.22);
            transform: skewX(-6deg);
        }
        #form-student-reg .reg-stu-national-welcome__inspire {
            margin: 0;
            padding: 0 0.25rem;
            max-width: 100%;
            font-size: clamp(0.5rem, 0.95vw, 0.58rem);
            font-weight: 600;
            font-style: italic;
            line-height: 1.35;
            letter-spacing: 0.02em;
            color: #a5b4c8;
        }
        #form-student-reg .reg-stu-national-welcome__name-pill {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: calc(100% - 0.35rem);
            margin-top: 0;
            padding: 0.38rem 0.62rem;
            border-radius: 14px;
            background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
            border: 1px solid rgba(148, 163, 184, 0.35);
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
        }
        #form-student-reg .reg-stu-national-welcome__name-stack {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            width: 100%;
            max-width: 100%;
            text-align: center;
        }
        #form-student-reg .reg-stu-national-welcome__name-stack .reg-stu-national-welcome__name {
            width: auto;
            flex: 0 1 auto;
            max-width: calc(100% - 1.75rem);
        }
        #form-student-reg .reg-stu-national-welcome__name-icon {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.28rem;
            height: 1.28rem;
            margin: 0;
            border-radius: 999px;
            overflow: hidden;
            position: relative;
            background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
            color: #facc15;
            font-size: 0.58rem;
            border: 1px solid rgba(250, 204, 21, 0.35);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset;
        }
        #form-student-reg .reg-stu-national-welcome__name-photo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: none;
            object-fit: cover;
            border-radius: 999px;
        }
        #form-student-reg .reg-stu-national-welcome__name-icon-fallback {
            line-height: 1;
        }
        #form-student-reg .reg-stu-national-welcome__name-icon.has-photo .reg-stu-national-welcome__name-photo {
            display: block;
        }
        #form-student-reg .reg-stu-national-welcome__name-icon.has-photo .reg-stu-national-welcome__name-icon-fallback {
            display: none;
        }
        #form-student-reg .reg-stu-national-welcome__name {
            display: block;
            width: 100%;
            max-width: 100%;
            font-size: clamp(0.62rem, 2.4vw, 0.78rem);
            font-weight: 800;
            letter-spacing: 0.05em;
            line-height: 1.32;
            color: #0f172a;
            white-space: normal;
            overflow-wrap: break-word;
            word-break: normal;
            text-align: center;
            text-wrap: balance;
        }
        @keyframes otr-reg-national-welcome-unveil {
            0% {
                transform: scale(0.94) translateY(0.45rem);
                opacity: 0.55;
                box-shadow:
                    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
                    0 8px 20px rgba(2, 6, 23, 0.28);
            }
            62% {
                transform: scale(1.012) translateY(-0.06rem);
                opacity: 1;
            }
            100% {
                transform: scale(1) translateY(0);
                opacity: 1;
                box-shadow:
                    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
                    0 14px 32px rgba(2, 6, 23, 0.38);
            }
        }
        @keyframes otr-reg-national-welcome-glow {
            0% {
                opacity: 0;
                transform: scale(0.92);
            }
            40% {
                opacity: 0.85;
            }
            100% {
                opacity: 0.35;
                transform: scale(1);
            }
        }
        @keyframes otr-reg-national-welcome-part {
            0% {
                opacity: 0;
                transform: translateY(0.42rem);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        @keyframes otr-reg-national-welcome-stage {
            0% {
                opacity: 0;
                transform: skewX(-6deg) scale(0.92);
            }
            70% {
                transform: skewX(-6deg) scale(1.03);
            }
            100% {
                opacity: 1;
                transform: skewX(-6deg) scale(1);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            #form-student-reg .reg-stu-national-welcome,
            #form-student-reg .reg-stu-national-welcome.is-magic .reg-stu-national-welcome__card,
            #form-student-reg .reg-stu-national-welcome.is-magic .reg-stu-national-welcome__glow,
            #form-student-reg .reg-stu-national-welcome.is-magic .reg-stu-national-welcome__welcome-row,
            #form-student-reg .reg-stu-national-welcome.is-magic .reg-stu-national-welcome__name-pill,
            #form-student-reg .reg-stu-national-welcome.is-magic .reg-stu-national-welcome__to-row,
            #form-student-reg .reg-stu-national-welcome.is-magic .reg-stu-national-welcome__stage,
            #form-student-reg .reg-stu-national-welcome.is-magic .reg-stu-national-welcome__inspire {
                transition: none;
                animation: none;
                transform: none;
                filter: none;
            }
        }
        #form-student-reg .reg-stu-subject-medium-col {
            min-width: 0;
        }
        #form-student-reg .reg-stu-subject-medium-stack .reg-stu-subject-medium-col--subject > .reg-stu-field-locked,
        #form-student-reg .reg-stu-subject-medium-stack .reg-stu-subject-medium-col--subject > select {
            margin-bottom: 0;
        }
        #form-student-reg .reg-stu-subject-medium-stack .reg-stu-subject-medium-col--medium > select,
        #form-student-reg .reg-stu-subject-medium-stack .reg-stu-subject-medium-col--medium > .reg-stu-field-locked {
            margin-bottom: 0;
        }
        #form-student-reg .reg-stu-subject-medium-col > .reg-field-label {
            margin-top: 0;
            margin-bottom: var(--otr-stu-label-field-gap, 0.22rem);
        }
        #form-student-reg .reg-stu-subject-medium-col > label[for="reg-stu-medium"] {
            display: block;
            text-align: left;
        }
        #form-student-reg .reg-stu-subject-medium-col > select,
        #form-student-reg .reg-stu-subject-medium-col > .reg-stu-field-locked {
            width: 100%;
            box-sizing: border-box;
            min-height: 2.7rem;
        }
        #form-student-reg .reg-stu-subject-medium-col > .reg-stu-field-locked {
            display: flex;
            align-items: center;
        }
        #form-student-reg .reg-stu-plan-invite-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            column-gap: 0.65rem;
            align-items: center;
            margin-top: 0.2rem;
        }
        #form-student-reg .reg-stu-plan-invite-gate {
            margin: 0;
            text-align: right;
            white-space: nowrap;
        }
        @media (max-width: 479px) {
            #form-student-reg .reg-stu-gender-bform-row {
                grid-template-columns: minmax(10.35rem, 11.85rem) minmax(0, 1fr);
                column-gap: 0.85rem;
            }
            #form-student-reg .reg-stu-class-fee-row {
                flex-direction: column;
                row-gap: 0.65rem;
                align-items: stretch;
            }
            #form-student-reg .reg-stu-class-fee-col:first-child,
            #form-student-reg .reg-stu-class-fee-col:last-child {
                flex: none;
                width: 100%;
                max-width: none;
                min-width: 0;
            }
            #form-student-reg .reg-stu-class-fee-col > .reg-stu-field-locked {
                white-space: normal;
            }
            #form-student-reg .reg-stu-subject-medium-row {
                flex-direction: column;
                row-gap: 0;
                column-gap: 0;
            }
            #form-student-reg .reg-stu-subject-medium-stack {
                flex: none;
                width: 100%;
                max-width: none;
            }
            #form-student-reg .reg-stu-subject-medium-spacer {
                display: none;
            }
            #form-student-reg .reg-stu-plan-invite-row {
                grid-template-columns: 1fr;
                row-gap: 0.45rem;
            }
            #form-student-reg .reg-stu-plan-invite-gate {
                text-align: left;
                white-space: normal;
            }
        }
        /* Desktop registration: wide 2×2 section cards, straight field stacks (mobile unchanged) */
        @media (min-width: 960px) {
            #student-reg-modal .student-reg-head-row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                column-gap: 1.1rem;
                align-items: baseline;
                gap: 0;
            }
            #student-reg-modal .student-reg-head-row #student-reg-title {
                grid-column: 1;
            }
            #student-reg-modal .student-reg-signin-top {
                grid-column: 2;
                justify-self: center;
                margin-left: 1.35rem;
                text-align: center;
            }
            #teacher-reg-modal .teacher-reg-head-row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                column-gap: 1.1rem;
                align-items: baseline;
                gap: 0;
            }
            #teacher-reg-modal .teacher-reg-head-row #teacher-reg-title {
                grid-column: 1;
            }
            #teacher-reg-modal .teacher-reg-signin-top {
                grid-column: 2;
                justify-self: center;
                margin-left: 1.35rem;
                text-align: center;
            }
            #form-teacher-reg > .reg-group:nth-child(3) > label[for="reg-tch-district-combo"],
            #form-teacher-reg > .reg-group:nth-child(3) > label[for="reg-tch-city"] {
                margin-top: 1rem;
            }
            #form-teacher-reg > .reg-tch-submit-btn {
                margin-top: 0.5rem;
            }
            .modal-content.registration-modal-shell--wizard {
                max-width: 1120px;
                width: min(1120px, 94vw);
                max-height: min(92vh, 880px);
                overflow-y: auto;
                padding: 1.25rem 1.5rem 1.15rem;
            }
            .registration-modal-shell--wizard > h2 {
                margin-bottom: 0.2rem;
                letter-spacing: -0.01em;
            }
            .registration-modal-shell--wizard .reg-form-sub {
                margin: 0 0 0.85rem;
                font-size: 0.78rem;
            }
            .registration-modal-shell--wizard .reg-form--wizard {
                display: grid;
                grid-template-columns: 1fr 1fr;
                column-gap: 1.1rem;
                row-gap: 1.1rem;
                align-items: start;
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:first-child,
            .registration-modal-shell--wizard #form-student-reg > .reg-group:nth-child(2),
            .registration-modal-shell--wizard #form-student-reg > .reg-group:nth-child(3),
            .registration-modal-shell--wizard #form-student-reg > .reg-group:nth-child(4) {
                align-self: stretch;
            }
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:first-child,
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:nth-child(2),
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:nth-child(3),
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:nth-child(4) {
                align-self: stretch;
            }
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:first-child > .reg-group-heading,
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:nth-child(2) > .reg-group-heading {
                margin-bottom: 0.55rem;
            }
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:nth-child(2) {
                min-width: 0;
            }
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:nth-child(2) > label[for="reg-tch-school"] {
                margin-top: var(--otr-stu-field-stack-gap, 0.55rem);
                margin-bottom: var(--otr-stu-label-field-gap, 0.22rem);
            }
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:nth-child(2) > .reg-tch-type-medium-row {
                margin-top: 0;
                margin-bottom: var(--otr-stu-field-box-gap, 0.48rem);
            }
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:nth-child(2) > #reg-tch-school.otr-auto-grow-field,
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:nth-child(2) > #reg-tch-institution-address.otr-auto-grow-field {
                flex: 0 0 auto;
                align-self: stretch;
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:nth-child(3) {
                display: flex;
                flex-direction: column;
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:nth-child(3) > label[for="reg-stu-address"] {
                margin-top: var(--otr-stu-field-stack-gap);
                margin-bottom: var(--otr-stu-label-field-gap);
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:nth-child(3) > #reg-stu-address {
                flex: 1 1 auto;
                min-height: calc(0.58rem * 2 + 1.35em);
            }
            .registration-modal-shell--wizard .reg-group {
                display: flex;
                flex-direction: column;
                align-self: start;
                height: auto;
                margin: 0;
                padding: 0.95rem 1.05rem 1.05rem;
                border: 0.5px solid rgba(255, 0, 42, 0.58);
                border-radius: 16px;
                background:
                    linear-gradient(165deg, rgba(30, 41, 59, 0.55) 0%, rgba(15, 23, 42, 0.72) 100%);
                box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
                transition: border-color 0.22s ease;
            }
            .registration-modal-shell--wizard .reg-group.reg-group--complete {
                border-color: rgba(56, 189, 248, 0.58);
            }
            .registration-modal-shell--wizard .reg-group:first-of-type {
                padding-top: 0.95rem;
            }
            .registration-modal-shell--wizard .reg-group-heading {
                margin: 0 0 0.65rem;
                padding-bottom: 0.45rem;
                border-bottom: 1px solid rgba(148, 163, 184, 0.14);
                color: #fbbf24;
                font-size: 0.68rem;
                letter-spacing: 0.12em;
            }
            .registration-modal-shell--wizard .reg-form--wizard .reg-field-label {
                margin: 0.55rem 0 var(--otr-stu-label-field-gap, 0.35rem);
                font-size: 0.78rem;
                font-weight: 600;
                color: #e2e8f0;
            }
            .registration-modal-shell--wizard #form-student-reg .reg-field-label {
                margin-bottom: var(--otr-stu-label-field-gap, 0.35rem);
            }
            .registration-modal-shell--wizard .reg-group > .reg-field-label:first-of-type {
                margin-top: 0;
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) > .reg-group-heading {
                margin-bottom: 0.55rem;
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-class-fee-row {
                margin-top: 0;
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-class-fee-col > .reg-field-label,
            .registration-modal-shell--wizard #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-subject-medium-col > .reg-field-label {
                margin-top: 0;
                margin-bottom: var(--otr-stu-label-field-gap, 0.35rem);
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-class-fee-col > select,
            .registration-modal-shell--wizard #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-class-fee-col > .otr-reg-select-listbox,
            .registration-modal-shell--wizard #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-class-fee-col > .reg-stu-field-locked,
            .registration-modal-shell--wizard #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-subject-medium-col > select,
            .registration-modal-shell--wizard #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-subject-medium-col > .otr-reg-select-listbox,
            .registration-modal-shell--wizard #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-subject-medium-col > .reg-stu-field-locked {
                margin-bottom: var(--otr-stu-field-box-gap, 0.48rem);
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-stu-subject-medium-row {
                margin-top: var(--otr-stu-field-stack-gap, 0.55rem);
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) > label[for="reg-stu-school"] {
                margin-top: var(--otr-stu-field-stack-gap, 0.55rem);
                margin-bottom: var(--otr-stu-label-field-gap, 0.35rem);
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:has(.reg-stu-class-fee-row) .reg-plan-box {
                margin: 0.55rem 0 var(--otr-stu-field-box-gap, 0.48rem);
                padding: 0.55rem 0.75rem 0.6rem;
            }
            .registration-modal-shell--wizard .reg-form--wizard input.p-3,
            .registration-modal-shell--wizard .reg-form--wizard select.p-3,
            .registration-modal-shell--wizard .reg-form--wizard .otr-pw-input {
                width: 100%;
                box-sizing: border-box;
                padding: 0.58rem 0.8rem;
                border-radius: 10px;
                border-color: var(--otr-reg-field-border-empty);
                background-color: var(--otr-reg-field-bg-empty);
                transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
            }
            .registration-modal-shell--wizard .reg-form--wizard input.p-2 {
                width: 100%;
                box-sizing: border-box;
                padding: 0.45rem 0.65rem;
                border-radius: 10px;
            }
            .registration-modal-shell--wizard .reg-form--wizard input.p-3:focus,
            .registration-modal-shell--wizard .reg-form--wizard select.p-3:focus,
            .registration-modal-shell--wizard .reg-form--wizard .otr-pw-input:focus {
                outline: none;
                border-color: rgba(251, 191, 36, 0.55);
                box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
            }
            .registration-modal-shell--wizard .reg-form--wizard #reg-stu-school.p-3,
            .registration-modal-shell--wizard .reg-form--wizard #reg-stu-address.p-3,
            .registration-modal-shell--wizard .reg-form--wizard #reg-tch-school.p-3,
            .registration-modal-shell--wizard .reg-form--wizard #reg-tch-institution-address.p-3,
            .registration-modal-shell--wizard .reg-form--wizard #reg-tch-postal-address.p-3 {
                width: 100%;
                box-sizing: border-box;
                padding: 0.58rem 0.8rem;
                min-height: calc(0.58rem * 2 + 1.35em);
                border-radius: 10px;
                border-color: var(--otr-reg-field-border-empty);
                background-color: var(--otr-reg-field-bg-empty);
                transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
            }
            .registration-modal-shell--wizard .reg-form--wizard #reg-stu-school.p-3:focus,
            .registration-modal-shell--wizard .reg-form--wizard #reg-stu-address.p-3:focus,
            .registration-modal-shell--wizard .reg-form--wizard #reg-tch-school.p-3:focus,
            .registration-modal-shell--wizard .reg-form--wizard #reg-tch-institution-address.p-3:focus,
            .registration-modal-shell--wizard .reg-form--wizard #reg-tch-postal-address.p-3:focus {
                outline: none;
                border-color: rgba(251, 191, 36, 0.55);
                box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
            }
            .registration-modal-shell--wizard #form-student-reg .reg-stu-gender-trigger {
                padding: 0.58rem 0.8rem;
                border-radius: 10px;
                border-color: var(--otr-reg-field-border-empty);
                background-color: var(--otr-reg-field-bg-empty);
                font-size: 0.8125rem;
                line-height: 1.25;
            }
            .registration-modal-shell--wizard #form-student-reg .reg-stu-gender-trigger:focus-visible {
                outline: none;
                border-color: rgba(251, 191, 36, 0.55);
                box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
            }
            .registration-modal-shell--wizard .reg-form--wizard .otr-district-combobox__control {
                border-radius: 10px;
                border-color: var(--otr-reg-field-border-empty);
                background-color: var(--otr-reg-field-bg-empty);
            }
            .registration-modal-shell--wizard .reg-form--wizard .otr-district-combobox:has(.otr-district-combobox__input:not(:placeholder-shown)) .otr-district-combobox__control {
                border-color: var(--otr-reg-field-border) !important;
                background-color: var(--otr-reg-field-bg-filled) !important;
                box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.1);
            }
            .registration-modal-shell--wizard .reg-form--wizard .otr-district-combobox__control:focus-within,
            .registration-modal-shell--wizard .reg-form--wizard .otr-district-combobox.is-open .otr-district-combobox__control {
                outline: none;
                border-color: rgba(251, 191, 36, 0.55) !important;
                box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
                background-color: var(--otr-reg-field-bg-filled) !important;
            }
            .registration-modal-shell--wizard .reg-form--wizard .otr-district-combobox__input {
                padding: 0.58rem 0.45rem 0.58rem 0.8rem;
                font-size: 0.8125rem;
                line-height: 1.25;
                color: #e2e8f0;
            }
            .registration-modal-shell--wizard .reg-plan-box {
                margin: 0.65rem 0 0.35rem;
                padding: 0.7rem 0.8rem 0.8rem;
                border-radius: 12px;
            }
            #form-student-reg > .reg-group:first-child > .reg-group-heading {
                margin-bottom: 0.55rem;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-upload-row--student {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 0.55rem;
                width: 100%;
                max-width: 100%;
                height: auto;
                margin: 0 0 var(--otr-stu-field-box-gap, 0.48rem);
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:first-child > .reg-field-label {
                margin-top: 0;
                margin-bottom: var(--otr-stu-label-field-gap, 0.22rem);
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:first-child > label[for="reg-stu-name"] {
                margin-top: var(--otr-stu-label-field-gap, 0.22rem);
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:first-child > .reg-field-label[for="reg-stu-sdo"] {
                margin-top: var(--otr-stu-field-stack-gap, 0.55rem);
            }
            .registration-modal-shell--wizard #form-student-reg .reg-stu-gender-bform-col > .reg-field-label {
                margin-bottom: var(--otr-stu-label-field-gap, 0.22rem);
            }
            .registration-modal-shell--wizard #form-student-reg > .reg-group:first-child > input.p-3,
            .registration-modal-shell--wizard #form-student-reg > .reg-group:first-child > select.p-3 {
                margin-bottom: var(--otr-stu-field-box-gap, 0.48rem);
            }
            .registration-modal-shell--wizard #form-student-reg .reg-stu-gender-bform-row {
                margin-top: 0.55rem;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-thumb {
                position: relative;
                flex: 0 0 6.25rem;
                margin-left: auto;
                margin-right: 0.65rem;
                width: 6.25rem;
                height: 6.25rem;
                border-radius: 50%;
                border: 2px solid rgba(250, 204, 21, 0.35);
                background: rgba(2, 6, 23, 0.55);
                overflow: visible;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
                cursor: pointer;
                isolation: isolate;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-thumb:hover {
                border-color: rgba(251, 191, 36, 0.55);
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-preview--student {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                margin: 0 !important;
                border: none;
                border-radius: 50%;
                object-fit: cover;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-preview--student.show {
                display: block;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-thumb-empty {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                overflow: hidden;
                color: rgba(148, 163, 184, 0.75);
                font-size: 1.35rem;
                pointer-events: none;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-thumb:has(.reg-photo-preview.show) .reg-photo-thumb-empty {
                display: none;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-clear-btn,
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-clear-btn {
                position: absolute;
                top: -0.12rem;
                right: -0.12rem;
                z-index: 5;
                display: none;
                align-items: center;
                justify-content: center;
                width: 1.42rem;
                height: 1.42rem;
                margin: 0;
                padding: 0;
                border: none;
                border-radius: 50%;
                background: linear-gradient(145deg, #ff6b6b 0%, #ef4444 42%, #b91c1c 100%);
                color: #fff;
                font-size: 0.64rem;
                font-weight: 700;
                line-height: 1;
                cursor: pointer;
                box-shadow: 0 2px 8px rgba(127, 29, 29, 0.55);
                pointer-events: auto;
                transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-thumb:has(.reg-photo-preview.show) .reg-photo-clear-btn,
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-thumb:has(.reg-photo-preview.show) .reg-photo-clear-btn {
                display: inline-flex;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-clear-btn:hover,
            .registration-modal-shell--wizard .reg-form--student .reg-photo-clear-btn:focus-visible,
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-clear-btn:hover,
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-clear-btn:focus-visible {
                color: #fff;
                background: linear-gradient(145deg, #ff8585 0%, #f87171 40%, #dc2626 100%);
                box-shadow: 0 3px 10px rgba(153, 27, 27, 0.65);
                filter: brightness(1.06);
                transform: scale(1.05);
                outline: none;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-file-wrap {
                position: relative;
                flex: 0 0 auto;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: center;
                gap: 0.28rem;
                margin-top: -0.28rem;
                margin-left: 0.42rem;
                min-width: 9.65rem;
                width: auto;
                max-width: min(100%, 14.85rem);
                height: auto;
                padding: 0.46rem 0.72rem;
                box-sizing: border-box;
                border-radius: 10px;
                border: 1px solid rgba(100, 116, 139, 0.55);
                background: rgba(2, 6, 23, 0.45);
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-file-input {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-file-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.35rem;
                width: 100%;
                margin: 0;
                padding: 0.48rem 0.85rem;
                border-radius: 8px;
                border: 1px solid rgba(100, 116, 139, 0.5);
                background: rgba(15, 23, 42, 0.75);
                color: #e2e8f0;
                font-size: 0.82rem;
                font-weight: 600;
                line-height: 1.2;
                cursor: pointer;
                transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-file-btn .fa-upload {
                color: #e2e8f0;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-file-btn-label {
                color: #facc15;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-file-btn:hover {
                border-color: rgba(251, 191, 36, 0.55);
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-file-btn:hover .fa-upload {
                color: #e2e8f0;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-file-btn:hover .reg-photo-file-btn-label {
                color: #facc15;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-file-btn:focus-visible {
                outline: none;
                border-color: rgba(251, 191, 36, 0.55);
                box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-file-name {
                display: block;
                width: 100%;
                max-width: 100%;
                font-size: 0.68rem;
                line-height: 1.25;
                color: #64748b;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .registration-modal-shell--wizard .reg-form--student .reg-photo-file-name.is-selected {
                color: #94a3b8;
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-upload-row--teacher {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 0.55rem;
                width: 100%;
                max-width: 100%;
                height: auto;
                margin: 0 0 var(--otr-stu-field-box-gap, 0.48rem);
            }
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:first-child > .reg-field-label {
                margin-top: 0;
                margin-bottom: var(--otr-stu-label-field-gap, 0.22rem);
            }
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:first-child > label[for="reg-tch-name"],
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:first-child > label[for="reg-tch-designation"],
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:first-child > label[for="reg-tch-cnic"] {
                margin-top: var(--otr-stu-label-field-gap, 0.22rem);
            }
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:first-child > input.p-3,
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:first-child > select.p-3 {
                margin-bottom: var(--otr-stu-field-box-gap, 0.48rem);
            }
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:nth-child(2) > label[for="reg-tch-school-logo"] {
                margin-top: 0;
                margin-bottom: var(--otr-stu-label-field-gap, 0.22rem);
            }
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:nth-child(2) > .reg-field-file-hint {
                margin-bottom: var(--otr-stu-label-field-gap, 0.22rem);
            }
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:nth-child(2) > input.p-3,
            .registration-modal-shell--wizard #form-teacher-reg > .reg-group:nth-child(2) > textarea.p-3:not(#reg-tch-school):not(#reg-tch-institution-address) {
                margin-bottom: var(--otr-stu-field-box-gap, 0.48rem);
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-thumb {
                position: relative;
                flex: 0 0 6.25rem;
                margin-left: auto;
                margin-right: 0.65rem;
                width: 6.25rem;
                height: 6.25rem;
                border-radius: 50%;
                border: 2px solid rgba(250, 204, 21, 0.35);
                background: rgba(2, 6, 23, 0.55);
                overflow: visible;
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
                cursor: pointer;
                isolation: isolate;
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-thumb:hover {
                border-color: rgba(251, 191, 36, 0.55);
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-preview--teacher {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                margin: 0 !important;
                border: none;
                border-radius: 50%;
                object-fit: cover;
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-preview--teacher.show {
                display: block;
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-thumb-empty {
                position: absolute;
                inset: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                overflow: hidden;
                color: rgba(148, 163, 184, 0.75);
                font-size: 1.35rem;
                pointer-events: none;
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-thumb:has(.reg-photo-preview.show) .reg-photo-thumb-empty {
                display: none;
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-file-wrap {
                position: relative;
                flex: 0 0 auto;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: center;
                gap: 0.28rem;
                margin-top: -0.28rem;
                margin-left: 0.42rem;
                min-width: 9.65rem;
                width: auto;
                max-width: min(100%, 14.85rem);
                height: auto;
                padding: 0.46rem 0.72rem;
                box-sizing: border-box;
                border-radius: 10px;
                border: 1px solid rgba(100, 116, 139, 0.55);
                background: rgba(2, 6, 23, 0.45);
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-file-input {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-file-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.35rem;
                width: 100%;
                margin: 0;
                padding: 0.48rem 0.85rem;
                border-radius: 8px;
                border: 1px solid rgba(100, 116, 139, 0.5);
                background: rgba(15, 23, 42, 0.75);
                color: #e2e8f0;
                font-size: 0.82rem;
                font-weight: 600;
                line-height: 1.2;
                cursor: pointer;
                transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-file-btn .fa-upload {
                color: #e2e8f0;
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-file-btn-label {
                color: #facc15;
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-file-btn:hover {
                border-color: rgba(251, 191, 36, 0.55);
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-file-btn:hover .fa-upload {
                color: #e2e8f0;
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-file-btn:hover .reg-photo-file-btn-label {
                color: #facc15;
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-file-btn:focus-visible {
                outline: none;
                border-color: rgba(251, 191, 36, 0.55);
                box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-file-name {
                display: block;
                width: 100%;
                max-width: 100%;
                font-size: 0.68rem;
                line-height: 1.25;
                color: #64748b;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .registration-modal-shell--wizard .reg-form--teacher .reg-photo-file-name.is-selected {
                color: #94a3b8;
            }
            .registration-modal-shell--wizard .reg-field-hint {
                margin: 0.15rem 0 0.2rem;
            }
            .registration-modal-shell--wizard .reg-form--wizard > .legal-agree-row,
            .registration-modal-shell--wizard .reg-form--wizard > button,
            .registration-modal-shell--wizard .reg-form--wizard > p {
                grid-column: 1 / -1;
            }
            .registration-modal-shell--wizard .reg-form--wizard > .legal-agree-row {
                margin-top: 0.15rem;
            }
            .registration-modal-shell--wizard .reg-form--wizard > .legal-agree-row.legal-agree-row--submit-hint {
                margin-top: 0.35rem;
                padding: 0.85rem 1.05rem;
                border-radius: 16px;
            }
            .registration-modal-shell--wizard .reg-form--wizard > .reg-form-sub--pre-submit {
                grid-column: 1 / -1;
                margin: 0.55rem 0 0.65rem;
                text-align: center;
                font-size: 0.78rem;
                line-height: 1.45;
                color: #94a3b8;
            }
            .registration-modal-shell--wizard .reg-form--wizard > button[type="submit"] {
                margin-top: 0.15rem;
                max-width: 28rem;
                justify-self: center;
            }
            #form-student-reg > .reg-stu-submit-btn {
                margin-top: 0.5rem;
            }
            .registration-modal-shell--wizard .reg-form--wizard > button[type="submit"]:disabled {
                opacity: 0.42;
                cursor: not-allowed;
                pointer-events: none;
                filter: saturate(0.65);
            }
            .registration-modal-shell--wizard .reg-form--wizard > button[type="submit"][data-reg-submit-locked="1"] {
                opacity: 0.42;
                cursor: pointer;
                filter: saturate(0.65);
            }
            .registration-modal-shell--wizard .reg-form--wizard > p.text-center {
                margin-top: 0.35rem;
            }
            /* Contact card: quarter-panel; Mobile + WhatsApp share one row on desktop */
            #form-student-reg > .reg-group:nth-child(4),
            #form-teacher-reg > .reg-group:nth-child(4) {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-areas:
                    "heading heading"
                    "lphone lwa"
                    "phone wa"
                    "lemail lemail"
                    "email email"
                    "lpw lpw"
                    "pw pw"
                    "meter meter"
                    "lconfirm lconfirm"
                    "confirm confirm"
                    "match match";
                column-gap: 0.75rem;
                row-gap: 0;
                align-content: start;
                min-height: 0;
            }
            #form-student-reg > .reg-group:nth-child(4) {
                row-gap: 0;
                column-gap: 0.85rem;
                padding-bottom: 1.15rem;
            }
            #form-student-reg > .reg-group:nth-child(4) > .reg-group-heading {
                grid-area: heading;
                margin-bottom: 0.55rem;
            }
            #form-student-reg > .reg-group:nth-child(4) > .reg-stu-mobile-label-row {
                grid-area: lphone;
                margin-top: 0.22rem;
                margin-bottom: var(--otr-stu-label-field-gap);
            }
            #form-student-reg > .reg-group:nth-child(4) > #reg-stu-phone {
                grid-area: phone;
            }
            #form-student-reg > .reg-group:nth-child(4) > label.reg-stu-wa-field-label {
                grid-area: lwa;
                margin-top: 0.22rem;
            }
            #form-student-reg > .reg-group:nth-child(4) > #reg-stu-whatsapp {
                grid-area: wa;
            }
            #form-student-reg > .reg-group:nth-child(4) > label[for="reg-stu-email"] { grid-area: lemail; }
            #form-student-reg > .reg-group:nth-child(4) > #reg-stu-email { grid-area: email; }
            #form-student-reg > .reg-group:nth-child(4) > label[for="reg-stu-password"] { grid-area: lpw; }
            #form-student-reg > .reg-group:nth-child(4) > .otr-pw-field:has(#reg-stu-password) { grid-area: pw; }
            #form-student-reg > .reg-group:nth-child(4) > #reg-stu-pw-meter-block { grid-area: meter; }
            #form-student-reg > .reg-group:nth-child(4) > label[for="reg-stu-password-confirm"] { grid-area: lconfirm; }
            #form-student-reg > .reg-group:nth-child(4) > .otr-pw-field:has(#reg-stu-password-confirm) { grid-area: confirm; }
            #form-student-reg > .reg-group:nth-child(4) > #reg-stu-password-match-label { grid-area: match; }
            #form-teacher-reg > .reg-group:nth-child(4) {
                row-gap: 0;
                column-gap: 0.85rem;
                padding-bottom: 1.15rem;
            }
            #form-teacher-reg > .reg-group:nth-child(4) > .reg-group-heading {
                grid-area: heading;
                margin-bottom: 0.55rem;
            }
            #form-teacher-reg > .reg-group:nth-child(4) > .reg-stu-mobile-label-row {
                grid-area: lphone;
                margin-top: 0.22rem;
                margin-bottom: var(--otr-stu-label-field-gap, 0.22rem);
            }
            #form-teacher-reg > .reg-group:nth-child(4) > #reg-tch-contact { grid-area: phone; }
            #form-teacher-reg > .reg-group:nth-child(4) > label.reg-stu-wa-field-label { grid-area: lwa; margin-top: 0.22rem; }
            #form-teacher-reg > .reg-group:nth-child(4) > #reg-tch-whatsapp { grid-area: wa; }
            #form-teacher-reg > .reg-group:nth-child(4) > label[for="reg-tch-email"] { grid-area: lemail; }
            #form-teacher-reg > .reg-group:nth-child(4) > #reg-tch-email { grid-area: email; }
            #form-teacher-reg > .reg-group:nth-child(4) > label[for="reg-tch-password"] { grid-area: lpw; }
            #form-teacher-reg > .reg-group:nth-child(4) > .otr-pw-field:has(#reg-tch-password) { grid-area: pw; }
            #form-teacher-reg > .reg-group:nth-child(4) > #reg-tch-pw-meter-block { grid-area: meter; }
            #form-teacher-reg > .reg-group:nth-child(4) > label[for="reg-tch-password-confirm"] { grid-area: lconfirm; }
            #form-teacher-reg > .reg-group:nth-child(4) > .otr-pw-field:has(#reg-tch-password-confirm) { grid-area: confirm; }
            #form-teacher-reg > .reg-group:nth-child(4) > #reg-tch-password-match-label { grid-area: match; }
            #form-student-reg > .reg-group:nth-child(4) .reg-field-label,
            #form-teacher-reg > .reg-group:nth-child(4) .reg-field-label {
                margin-bottom: 0.22rem;
            }
            #form-student-reg > .reg-group:nth-child(4) > label[for="reg-stu-email"],
            #form-student-reg > .reg-group:nth-child(4) > label[for="reg-stu-password"],
            #form-student-reg > .reg-group:nth-child(4) > label[for="reg-stu-password-confirm"] {
                margin-top: 0.55rem;
            }
            #form-student-reg > .reg-group:nth-child(4) .otr-pw-field,
            #form-teacher-reg > .reg-group:nth-child(4) .otr-pw-field {
                width: 100%;
                margin: 0;
            }
            #form-student-reg > .reg-group:nth-child(4) .otr-pw-meter-wrap,
            #form-teacher-reg > .reg-group:nth-child(4) .otr-pw-meter-wrap {
                margin: 0.38rem 0 0.28rem;
            }
            #form-student-reg > .reg-group:nth-child(4) .otr-pw-hint,
            #form-teacher-reg > .reg-group:nth-child(4) .otr-pw-hint {
                margin: 0.18rem 0 0.08rem;
                font-size: 0.68rem;
                line-height: 1.35;
            }
            #form-student-reg > .reg-group:nth-child(4) .otr-pw-meter-row,
            #form-teacher-reg > .reg-group:nth-child(4) .otr-pw-meter-row {
                margin-bottom: 0.22rem;
            }
            #form-student-reg > .reg-group:nth-child(4) #reg-stu-password-match-label,
            #form-teacher-reg > .reg-group:nth-child(4) #reg-tch-password-match-label {
                margin: 0.32rem 0 0;
                min-height: 0;
            }
            #form-student-reg > .reg-group:nth-child(4) #reg-stu-password-match-label:empty,
            #form-teacher-reg > .reg-group:nth-child(4) #reg-tch-password-match-label:empty {
                display: none;
                margin: 0;
            }
        }
        .reg-form--wizard .reg-form-sub {
            font-size: 0.8125rem;
            line-height: 1.45;
            color: #94a3b8;
            margin: 0 0 1.1rem;
        }
        .reg-group {
            margin: 0;
            padding: 1.35rem 0 0;
            border-top: 1px solid rgba(51, 65, 85, 0.55);
        }
        .reg-group:first-of-type {
            padding-top: 0;
            border-top: none;
        }
        .reg-group-heading {
            margin: 0 0 1rem;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #64748b;
        }
        .reg-form--wizard .reg-field-label {
            text-transform: none;
            letter-spacing: 0;
            font-size: 0.8125rem;
            font-weight: 500;
            color: #cbd5e1;
            margin: 1rem 0 0.35rem;
        }
        .reg-form--wizard .reg-group .reg-field-label:first-of-type {
            margin-top: 0;
        }
        .reg-field-hint {
            display: block;
            font-size: 0.6875rem;
            font-weight: 400;
            line-height: 1.35;
            color: #64748b;
            margin: 0.2rem 0 0.45rem;
            max-width: 36em;
        }
        .reg-plan-box {
            margin: 1rem 0 0.85rem;
            padding: 0.9rem 0.85rem 1rem;
            border-radius: 12px;
            border: 1px solid rgba(234, 179, 8, 0.28);
            background: linear-gradient(168deg, rgba(15, 23, 42, 0.98) 0%, rgba(30, 27, 15, 0.35) 100%);
            box-shadow:
                0 0 0 1px rgba(0, 0, 0, 0.25) inset,
                0 12px 28px rgba(0, 0, 0, 0.22);
        }
        .reg-plan-box .otr-invitation-panel[hidden] {
            display: none !important;
        }
        #form-student-reg .otr-invitation-head {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.75rem;
            min-width: 0;
        }
        #form-student-reg .otr-invitation-head .reg-field-label {
            display: none;
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
        }
        #form-student-reg .reg-plan-box:has(.otr-invitation-gate-btn[aria-expanded="true"]) .otr-invitation-head {
            padding-bottom: 0.4rem;
            border-bottom: 1px solid rgba(234, 179, 8, 0.2);
        }
        #form-student-reg .reg-plan-box:has(.otr-invitation-gate-btn[aria-expanded="true"]) .otr-invitation-head .reg-field-label {
            display: block;
        }
        #form-student-reg .otr-invitation-panel {
            margin-top: 0.45rem;
        }
        #form-student-reg .otr-invitation-apply-row {
            display: flex;
            align-items: stretch;
            gap: 0.5rem;
            min-width: 0;
        }
        #form-student-reg .otr-invitation-apply-row input {
            flex: 1 1 auto;
            width: auto;
            min-width: 0;
            margin: 0;
        }
        #form-student-reg .otr-invitation-apply-btn {
            flex: 0 0 auto;
            align-self: stretch;
            width: auto;
            margin: 0;
            padding: 0 0.95rem;
            border-width: 1.5px;
            border-radius: 10px;
            font-size: 0.8125rem;
            font-weight: 600;
            line-height: 1.15;
            letter-spacing: 0.01em;
            white-space: nowrap;
        }
        #form-student-reg .otr-invitation-apply-row input:focus,
        #form-student-reg .otr-invitation-apply-row input:focus-visible {
            outline: none !important;
            box-shadow: none !important;
            border-color: rgba(148, 163, 184, 0.55) !important;
        }
        .registration-modal-shell--wizard #form-student-reg .otr-invitation-apply-row input.p-3:focus,
        .registration-modal-shell--wizard #form-student-reg .otr-invitation-apply-row input.p-3:focus-visible {
            outline: none !important;
            box-shadow: none !important;
            border-color: rgba(148, 163, 184, 0.55) !important;
        }
        #form-student-reg .otr-invitation-apply-btn:focus,
        #form-student-reg .otr-invitation-apply-btn:focus-visible {
            outline: none !important;
            box-shadow: none !important;
            filter: none;
            background: transparent;
            color: #ffd700;
            border-color: #ffd700;
        }
        #form-student-reg .otr-invitation-apply-btn:active {
            outline: none !important;
            box-shadow: none !important;
            filter: none;
        }
        .registration-modal-shell--wizard #form-student-reg .otr-invitation-apply-btn.btn-secondary:focus,
        .registration-modal-shell--wizard #form-student-reg .otr-invitation-apply-btn.btn-secondary:focus-visible,
        .registration-modal-shell--wizard #form-student-reg .otr-invitation-apply-btn.btn-secondary:active {
            outline: none !important;
            box-shadow: none !important;
            filter: none;
            background: transparent;
            color: #ffd700;
            border-color: #ffd700;
        }
        #form-student-reg .otr-invitation-gate-btn:focus,
        #form-student-reg .otr-invitation-gate-btn:focus-visible {
            outline: none !important;
            box-shadow: none !important;
            text-shadow: none;
        }
        #form-student-reg .otr-invitation-apply-btn:disabled {
            opacity: 0.55;
            cursor: wait;
        }
        #form-student-reg .otr-invitation-status {
            margin: 0.3rem 0 0;
            min-height: 0;
            font-size: 0.75rem;
            line-height: 1.3;
        }
        #form-student-reg .otr-invitation-status:empty {
            display: none;
        }
        @media (max-width: 479px) {
            #form-student-reg .otr-invitation-apply-row {
                flex-direction: column;
                align-items: stretch;
            }
            #form-student-reg .otr-invitation-apply-btn {
                width: 100%;
                min-height: 2.5rem;
            }
        }
        .reg-plan-box .otr-invitation-gate {
            text-align: center;
        }
        .reg-plan-box .otr-invitation-gate-btn {
            display: inline-block;
            font-size: 0.75rem;
            font-weight: 500;
            letter-spacing: 0.01em;
            color: #facc15;
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .reg-plan-box .otr-invitation-gate-btn:hover {
            color: #fde047;
        }
        .reg-form--wizard .reg-plan-box .reg-field-label {
            margin-top: 0;
        }
        .reg-form--wizard .reg-plan-box .reg-field-hint {
            margin-top: 0.15rem;
            margin-bottom: 0.55rem;
        }
        .reg-form--wizard input[type="text"],
        .reg-form--wizard input[type="tel"],
        .reg-form--wizard input[type="email"],
        .reg-form--wizard input[type="password"],
        .reg-form--wizard select,
        .reg-form--wizard .otr-reg-select-listbox__trigger,
        .reg-form--wizard textarea {
            border-radius: 10px !important;
            border: 1px solid var(--otr-reg-field-border-empty) !important;
            background-color: var(--otr-reg-field-bg-empty) !important;
            color: #e2e8f0;
            transition: border-color 0.15s ease, background-color 0.15s ease;
        }
        .reg-form--wizard input[type="text"]:not(:placeholder-shown),
        .reg-form--wizard input[type="tel"]:not(:placeholder-shown),
        .reg-form--wizard input[type="email"]:not(:placeholder-shown),
        .reg-form--wizard input[type="password"]:not(:placeholder-shown),
        .reg-form--wizard textarea:not(:placeholder-shown),
        .reg-form--wizard select:valid,
        .reg-form--wizard .otr-reg-select-listbox.is-filled .otr-reg-select-listbox__trigger {
            border-color: var(--otr-reg-field-border) !important;
            background-color: var(--otr-reg-field-bg-filled) !important;
            box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.1);
        }
        .registration-modal-shell--wizard .reg-form--wizard input:-webkit-autofill,
        .registration-modal-shell--wizard .reg-form--wizard input:-webkit-autofill:hover,
        .registration-modal-shell--wizard .reg-form--wizard input:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px var(--otr-reg-field-bg-empty) inset !important;
            box-shadow: 0 0 0 1000px var(--otr-reg-field-bg-empty) inset !important;
            -webkit-text-fill-color: #e2e8f0 !important;
            caret-color: #e2e8f0;
            border: 1px solid var(--otr-reg-field-border-empty) !important;
        }
        .registration-modal-shell--wizard .reg-form--wizard input:-webkit-autofill:not(:placeholder-shown),
        .registration-modal-shell--wizard .reg-form--wizard input:-webkit-autofill:not(:placeholder-shown):hover,
        .registration-modal-shell--wizard .reg-form--wizard input:-webkit-autofill:not(:placeholder-shown):focus {
            -webkit-box-shadow: 0 0 0 1000px var(--otr-reg-field-bg-filled) inset !important;
            box-shadow: 0 0 0 1000px var(--otr-reg-field-bg-filled) inset !important;
            border: 1px solid var(--otr-reg-field-border) !important;
        }
        .reg-form--wizard input::placeholder {
            color: #475569;
        }
        .reg-form--wizard select option {
            color: #e2e8f0;
            background: #0f172a;
        }
        .reg-form--wizard input:focus,
        .reg-form--wizard select:focus,
        .reg-form--wizard .otr-reg-select-listbox__trigger:focus,
        .reg-form--wizard .otr-reg-select-listbox.is-open .otr-reg-select-listbox__trigger,
        .reg-form--wizard input[type="file"]:focus {
            outline: none;
            border-color: rgba(148, 163, 184, 0.55) !important;
        }
        .reg-form input[type="text"],
        .reg-form input[type="tel"],
        .reg-form input[type="email"],
        .reg-form input[type="file"],
        .reg-form select,
        .reg-form textarea {
            width: 100%;
            box-sizing: border-box;
        }
        #form-student-reg #reg-stu-school.otr-auto-grow-field,
        #form-student-reg #reg-stu-address.otr-auto-grow-field,
        #form-teacher-reg #reg-tch-school.otr-auto-grow-field,
        #form-teacher-reg #reg-tch-institution-address.otr-auto-grow-field,
        #form-teacher-reg #reg-tch-postal-address.otr-auto-grow-field {
            display: block;
            width: 100%;
            min-width: 0;
            resize: none;
            overflow-y: hidden;
            overflow-x: hidden;
            line-height: 1.35;
            font-family: inherit;
            font-size: inherit;
            vertical-align: top;
            min-height: 2.875rem;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            word-wrap: break-word;
            word-break: break-word;
        }
        .reg-form--wizard #reg-stu-school.otr-auto-grow-field,
        .reg-form--wizard #reg-stu-address.otr-auto-grow-field,
        .reg-form--wizard #reg-tch-school.otr-auto-grow-field,
        .reg-form--wizard #reg-tch-institution-address.otr-auto-grow-field,
        .reg-form--wizard #reg-tch-postal-address.otr-auto-grow-field {
            border-radius: 10px !important;
            transition: border-color 0.15s ease, background-color 0.15s ease;
        }
        .reg-form--wizard #reg-stu-school.otr-auto-grow-field::placeholder,
        .reg-form--wizard #reg-stu-address.otr-auto-grow-field::placeholder,
        .reg-form--wizard #reg-tch-school.otr-auto-grow-field::placeholder,
        .reg-form--wizard #reg-tch-institution-address.otr-auto-grow-field::placeholder,
        .reg-form--wizard #reg-tch-postal-address.otr-auto-grow-field::placeholder {
            color: #475569;
        }
        .reg-form--wizard #reg-stu-school.otr-auto-grow-field:focus,
        .reg-form--wizard #reg-stu-address.otr-auto-grow-field:focus,
        .reg-form--wizard #reg-tch-school.otr-auto-grow-field:focus,
        .reg-form--wizard #reg-tch-institution-address.otr-auto-grow-field:focus,
        .reg-form--wizard #reg-tch-postal-address.otr-auto-grow-field:focus {
            outline: none;
            border-color: rgba(148, 163, 184, 0.55) !important;
        }
        .reg-form input[readonly] {
            opacity: 0.92;
            cursor: not-allowed;
            background-color: var(--otr-reg-field-bg);
        }
        .otr-pw-field {
            position: relative;
            width: 100%;
            box-sizing: border-box;
        }
        .otr-pw-field .otr-pw-input {
            width: 100%;
            box-sizing: border-box;
            padding-right: 2.65rem !important;
        }
        .otr-pw-toggle {
            position: absolute;
            right: 0.2rem;
            top: 50%;
            transform: translateY(-50%);
            width: 2.35rem;
            height: 2.35rem;
            margin: 0;
            padding: 0;
            border: none;
            border-radius: 0.45rem;
            background: transparent;
            color: #94a3b8;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: color 0.15s ease, background 0.15s ease;
        }
        .otr-pw-toggle:hover {
            color: #facc15;
            background: rgba(250, 204, 21, 0.08);
        }
        .otr-pw-toggle:focus-visible {
            outline: 2px solid rgba(250, 204, 21, 0.55);
            outline-offset: 1px;
        }
        .otr-pw-meter-wrap {
            margin: 0.35rem 0 0.65rem;
            padding: 0.4rem 0.55rem 0.45rem;
            border-radius: 0.5rem;
            border: 1px solid rgba(51, 65, 85, 0.55);
            background: rgba(15, 23, 42, 0.35);
        }
        #form-student-reg .otr-pw-meter-wrap,
        #form-teacher-reg .otr-pw-meter-wrap {
            margin: 0.32rem 0 0.4rem;
            padding: 0;
            border: none;
            background: transparent;
            border-radius: 0;
        }
        .otr-pw-meter-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .otr-pw-meter-track {
            flex: 1 1 auto;
            min-width: 0;
            height: 4px;
            border-radius: 9999px;
            overflow: hidden;
            background: rgba(51, 65, 85, 0.85);
        }
        .otr-pw-meter-fill {
            display: block;
            height: 100%;
        }
        .otr-pw-meter-status {
            flex: 0 0 auto;
            margin: 0;
            min-width: 3.25rem;
            text-align: right;
            font-size: 0.6875rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            line-height: 1.2;
        }
        .otr-pw-hint {
            margin: 0.35rem 0 0;
            font-size: 0.6875rem;
            line-height: 1.35;
            color: #64748b;
        }
        .reg-form--wizard .otr-pw-field .otr-pw-input[type="password"],
        .reg-form--wizard .otr-pw-field .otr-pw-input[type="text"] {
            border-radius: 10px !important;
            transition: border-color 0.15s ease, background-color 0.15s ease;
        }
        .reg-form--wizard .otr-pw-field .otr-pw-input:focus {
            outline: none;
            border-color: rgba(148, 163, 184, 0.55) !important;
        }
        .registration-modal-shell .otr-pw-field .otr-pw-input {
            border-radius: 0.375rem;
        }
        .registration-modal-shell .otr-pw-field .otr-pw-input:focus {
            outline: none;
            border-color: rgba(148, 163, 184, 0.55);
        }
        /* Sign-in password: long placeholder + toggle ? keep full ?welcome back? line readable */
        #student-signup-modal .otr-pw-field .otr-pw-input,
        #teacher-signup-modal .otr-pw-field .otr-pw-input {
            font-size: 0.75rem;
            line-height: 1.5;
            padding-right: 2.9rem !important;
        }
        .legal-inline-btn {
            display: inline;
            padding: 0;
            margin: 0;
            border: none;
            background: none;
            color: #facc15;
            font: inherit;
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 2px;
            cursor: pointer;
        }
        .legal-inline-btn:hover {
            color: #fde047;
        }
        .portal-soft-link {
            display: inline;
            padding: 0;
            margin: 0;
            border: none;
            background: none;
            color: #ca8a04;
            font: inherit;
            font-weight: 400;
            text-decoration: underline;
            text-underline-offset: 2px;
            cursor: pointer;
            text-shadow: none;
            box-shadow: none;
            filter: none;
        }
        .portal-soft-link:hover {
            color: #eab308;
        }
        .portal-soft-link:focus-visible {
            outline: 2px solid rgba(234, 179, 8, 0.5);
            outline-offset: 2px;
        }
        /** Same hue as `.portal-modal-bar .portal-back-btn` ? bright yellow registration CTA only. */
        #teacher-signup-modal .portal-soft-link--banner-yellow {
            color: #fde047;
        }
        #teacher-signup-modal .portal-soft-link--banner-yellow:hover {
            color: #fef08a;
        }
        /* Terms & Privacy: smooth entrance (backdrop fade + card lift); overrides generic .modal display toggle */
        .modal.legal-doc-modal {
            display: flex;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition:
                opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.42s,
                background 0.45s ease;
            background: transparent;
        }
        .modal.legal-doc-modal.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            background: rgba(0, 0, 0, 0.88);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        .modal.legal-doc-modal > .modal-content {
            transform: translate3d(0, 22px, 0) scale(0.97);
            opacity: 0;
            filter: blur(2px);
            transition:
                transform 0.48s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.4s ease,
                filter 0.45s ease,
                box-shadow 0.45s ease;
            box-shadow:
                0 0 0 1px rgba(253, 224, 71, 0.08),
                0 24px 56px rgba(0, 0, 0, 0.45),
                0 0 80px rgba(234, 179, 8, 0.06);
        }
        .modal.legal-doc-modal.active > .modal-content {
            transform: translate3d(0, 0, 0) scale(1);
            opacity: 1;
            filter: blur(0);
            box-shadow:
                0 0 0 1px rgba(253, 224, 71, 0.2),
                0 32px 72px rgba(0, 0, 0, 0.55),
                0 0 100px rgba(234, 179, 8, 0.1);
        }
        @media (prefers-reduced-motion: reduce) {
            .modal.legal-doc-modal,
            .modal.legal-doc-modal > .modal-content {
                transition-duration: 0.01ms !important;
            }
            .modal.legal-doc-modal > .modal-content {
                transform: none;
                filter: none;
            }
        }
        .legal-doc-modal .modal-content {
            max-width: 36rem;
            max-height: min(88vh, 36rem);
            overflow-y: auto;
            text-align: left;
        }
        .legal-doc-modal .legal-doc-body {
            font-size: 0.875rem;
            line-height: 1.58;
            color: #cbd5e1;
        }
        .legal-doc-modal .legal-doc-body .legal-doc-meta {
            margin: 0 0 0.75rem;
            padding-bottom: 0.65rem;
            border-bottom: 1px solid rgba(71, 85, 105, 0.55);
            font-size: 0.6875rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #94a3b8;
        }
        .legal-doc-modal .legal-doc-body .legal-doc-lead {
            margin: 0 0 1rem;
            font-size: 0.8125rem;
            line-height: 1.62;
            color: #b8c3d4;
        }
        .legal-doc-modal .legal-doc-body .legal-doc-counsel {
            margin: 0 0 1.1rem;
            padding: 0.55rem 0.65rem;
            border-radius: 0.375rem;
            border-left: 3px solid rgba(250, 204, 21, 0.45);
            background: rgba(15, 23, 42, 0.65);
            font-size: 0.6875rem;
            line-height: 1.5;
            color: #94a3b8;
        }
        .legal-doc-modal .legal-doc-body h3 {
            font-size: 0.95rem;
            font-weight: 800;
            color: #f8fafc;
            margin: 1.25rem 0 0.5rem;
        }
        .legal-doc-modal .legal-doc-body h3:first-of-type {
            margin-top: 0.25rem;
        }
        .legal-doc-modal .legal-doc-body ul.legal-doc-list {
            margin: 0.35rem 0 0.65rem;
            padding-left: 1.15rem;
            color: #cbd5e1;
        }
        .legal-doc-modal .legal-doc-body ul.legal-doc-list li {
            margin: 0.25rem 0;
        }
        .legal-agree-row {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            margin: 1rem 0 0.25rem;
            font-size: 0.8125rem;
            color: #cbd5e1;
            line-height: 1.45;
        }
        .reg-form--wizard .legal-agree-row {
            margin-top: 1.5rem;
            padding-top: 1rem;
            padding-left: 0.45rem;
            border-top: 1px solid rgba(51, 65, 85, 0.45);
        }
        .reg-form--wizard .legal-agree-row input[type="checkbox"] {
            margin-top: 0.12rem;
            margin-left: 0.2rem;
            width: 1.2rem;
            height: 1.2rem;
            min-width: 1.2rem;
            min-height: 1.2rem;
            box-sizing: border-box;
            flex-shrink: 0;
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            border: 0.5px solid rgba(255, 0, 42, 0.58);
            border-radius: 4px;
            background-color: #ffffff;
            box-shadow: 0 0 5px rgba(255, 0, 42, 0.16);
            transition: border-color 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease;
        }
        .reg-form--wizard .legal-agree-row input[type="checkbox"]:checked {
            background-color: #eab308;
            border-color: rgba(251, 191, 36, 0.78);
            box-shadow:
                0 0 0 2px rgba(251, 191, 36, 0.42),
                0 0 8px rgba(251, 191, 36, 0.28),
                0 0 8px rgba(255, 0, 42, 0.22);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8l3.5 3.5L13 5' stroke='%23000000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 0.85rem 0.85rem;
        }
        .reg-form--wizard .legal-agree-row input[type="checkbox"]:focus-visible {
            outline: 2px solid rgba(251, 191, 36, 0.55);
            outline-offset: 2px;
        }
        /* Student roll recovery: account-style flow */
        .otr-recover-shell {
            max-width: 420px;
        }
        .otr-recover-lead {
            font-size: 0.8125rem;
            line-height: 1.5;
            color: #94a3b8;
            margin: 0 0 1rem;
        }
        .otr-recover-trust-line {
            font-size: 0.6875rem;
            line-height: 1.45;
            color: #64748b;
            margin: 0 0 1rem;
        }
        .otr-recover-tabs {
            display: flex;
            gap: 0;
            margin: 0 0 1rem;
            border-radius: 10px;
            overflow: hidden;
            border: 1px solid rgba(71, 85, 105, 0.65);
            background: rgba(15, 23, 42, 0.6);
        }
        .otr-recover-tabs button {
            flex: 1;
            padding: 0.55rem 0.5rem;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #94a3b8;
            background: transparent;
            border: none;
            cursor: pointer;
            transition: background 0.15s ease, color 0.15s ease;
        }
        .otr-recover-tabs button[aria-selected="true"] {
            color: #0f172a;
            background: linear-gradient(180deg, #fde047 0%, #eab308 100%);
        }
        .otr-recover-tabs button:focus-visible {
            outline: 2px solid rgba(253, 224, 71, 0.6);
            outline-offset: 2px;
            z-index: 1;
        }
        .otr-recover-field {
            margin-bottom: 0.85rem;
        }
        .otr-recover-label {
            display: block;
            font-size: 0.75rem;
            font-weight: 600;
            color: #cbd5e1;
            margin: 0 0 0.35rem;
        }
        .otr-recover-hint {
            font-size: 0.65rem;
            color: #64748b;
            margin: 0.25rem 0 0;
            line-height: 1.35;
        }
        .otr-recover-panel[hidden] {
            display: none !important;
        }
        .otr-recover-status {
            font-size: 0.8125rem;
            min-height: 1.25rem;
            margin: 0.5rem 0;
        }
        .otr-recover-status--error {
            color: #f87171;
        }
        .otr-recover-status--ok {
            color: #86efac;
        }
        .otr-recover-otp-input {
            letter-spacing: 0.35em;
            font-variant-numeric: tabular-nums;
            text-align: center;
            font-size: 1.1rem;
        }
        .otr-recover-footnote {
            font-size: 0.65rem;
            line-height: 1.4;
            color: #64748b;
            margin-top: 1rem;
            padding-top: 0.85rem;
            border-top: 1px solid rgba(51, 65, 85, 0.45);
        }
        .legal-agree-row input[type="checkbox"] {
            margin-top: 0.2rem;
            flex-shrink: 0;
        }
        .portal-modal-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            margin: -0.35rem 0 0.85rem;
            padding-bottom: 0.65rem;
            border-bottom: 1px solid rgba(148, 163, 184, 0.15);
        }
        .registration-modal-shell--wizard .portal-modal-bar {
            position: sticky;
            top: 0;
            z-index: 20;
            background: rgba(15, 23, 42, 0.96);
            backdrop-filter: blur(8px);
            padding-top: 0.35rem;
        }
        .portal-modal-bar .close {
            float: none;
            margin: 0;
            line-height: 1;
        }
        .portal-modal-bar .portal-back-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.6rem;
            margin: 0;
            border: none;
            background: rgba(15, 23, 42, 0.75);
            color: #fde047;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            border-radius: 10px;
            border: 1px solid rgba(253, 224, 71, 0.28);
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .portal-modal-bar .portal-back-btn:hover {
            background: rgba(253, 224, 71, 0.1);
            border-color: rgba(253, 224, 71, 0.45);
        }
        .portal-modal-bar .portal-back-spacer {
            flex: 1;
        }
        .field-hint {
            font-size: 0.65rem;
            color: #64748b;
            margin: 0.2rem 0 0;
            line-height: 1.3;
        }
        /* Matches sign-in password placeholder scale (0.75rem): hint above file inputs (native file has no placeholder). */
        #teacher-reg-modal .reg-field-file-hint {
            font-size: 0.75rem;
            line-height: 1.5;
            color: #94a3b8;
            margin: 0.1rem 0 0.35rem;
        }
        .portal-forgot-row {
            margin-top: 0.65rem;
            text-align: center;
        }
        #student-signup-modal .otr-student-signin-forgot-row {
            font-size: 0.875rem;
            line-height: 1.25rem;
        }
        /* Student sign-in (yellow) ↔ sky on hover — same swap as hero Login / Create */
        #student-signup-modal,
        #teacher-signup-modal {
            --otr-portal-fill-yellow: linear-gradient(180deg, #fde047 0%, #eab308 100%);
            --otr-portal-fill-sky: linear-gradient(180deg, #5eead4 0%, #2dd4bf 42%, #14b8a6 100%);
            --otr-portal-text-on-yellow: #0a0a0a;
            --otr-portal-text-on-sky: #042f2e;
        }
        #student-signup-modal .btn-primary {
            transition:
                background 0.12s ease,
                color 0.12s ease,
                transform 0.18s ease;
        }
        #student-signup-modal .btn-primary:hover,
        #student-signup-modal .btn-primary:focus-visible {
            background: var(--otr-portal-fill-sky) !important;
            color: var(--otr-portal-text-on-sky) !important;
            transform: translateY(-1px);
            filter: none;
        }
        #student-signup-modal .btn-primary:active {
            background: var(--otr-portal-fill-sky) !important;
            color: var(--otr-portal-text-on-sky) !important;
            transform: translateY(0);
            filter: none;
        }
        #teacher-signup-modal .btn-portal-teacher {
            transition:
                background 0.12s ease,
                color 0.12s ease,
                transform 0.18s ease;
        }
        #teacher-signup-modal .btn-portal-teacher:hover,
        #teacher-signup-modal .btn-portal-teacher:focus-visible {
            background: var(--otr-portal-fill-yellow) !important;
            color: var(--otr-portal-text-on-yellow) !important;
            transform: translateY(-1px);
        }
        #teacher-signup-modal .btn-portal-teacher:active {
            background: var(--otr-portal-fill-yellow) !important;
            color: var(--otr-portal-text-on-yellow) !important;
            transform: translateY(0);
        }
        #student-signup-modal .otr-student-signin-register-prompt .legal-inline-btn {
            margin-left: 0.4rem;
        }
        .reg-photo-preview {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(250, 204, 21, 0.45);
            margin-top: 0.35rem;
            display: none;
        }
        .reg-photo-preview.show { display: block; }
        .how-to-apply-modal-shell {
            position: relative;
            max-width: 420px;
            width: 90%;
            padding: 2.4rem 1.65rem 2rem;
            overflow: hidden;
            text-align: center;
            border-radius: 24px;
            border: 1px solid rgba(253, 224, 71, 0.22);
            background: #080c18;
            box-shadow:
                0 0 0 1px rgba(253, 224, 71, 0.06),
                0 32px 72px rgba(0, 0, 0, 0.65),
                0 0 120px rgba(234, 179, 8, 0.06);
        }
        .how-to-apply-modal-shell::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            background:
                radial-gradient(ellipse 130% 50% at 50% -12%, rgba(253, 224, 71, 0.1) 0%, transparent 55%),
                radial-gradient(ellipse 80% 45% at 20% 105%, rgba(234, 179, 8, 0.05) 0%, transparent 60%),
                radial-gradient(ellipse 80% 45% at 80% 105%, rgba(99, 102, 241, 0.04) 0%, transparent 60%);
        }
        .how-to-apply-modal-shell::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(253, 224, 71, 0.08) 20%,
                rgba(253, 224, 71, 0.35) 50%,
                rgba(253, 224, 71, 0.08) 80%,
                transparent 100%
            );
            pointer-events: none;
        }
        .how-to-apply-modal-shell--wide {
            max-width: 540px;
            text-align: left;
        }
        .hta-panel {
            position: relative;
            z-index: 1;
        }
        .hta-panel.hta-hidden {
            display: none !important;
        }
        /* Study Docs: if student guide is active, never show the teacher panel (defensive; footers must stay inside each panel). */
        #how-to-apply-modal-content #hta-step-docs-student:not(.hta-hidden) ~ #hta-step-docs-teacher {
            display: none !important;
        }
        .hta-heading {
            font-size: 1.15rem;
            font-weight: 900;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            margin-bottom: 1.65rem;
            color: #fde047;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
        }
        .hta-choice-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.9rem;
        }
        .hta-choice-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 0.85rem;
            padding: 1.85rem 0.9rem 1.55rem;
            border-radius: 16px;
            border: 1px solid rgba(148, 163, 184, 0.12);
            background: linear-gradient(174deg, rgba(15, 23, 42, 0.7) 0%, rgba(2, 6, 23, 0.85) 100%);
            backdrop-filter: blur(8px);
            color: #e2e8f0;
            cursor: pointer;
            transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
            width: 100%;
        }
        .hta-choice-card:hover {
            transform: translateY(-4px);
            border-color: rgba(253, 224, 71, 0.4);
            box-shadow:
                0 12px 28px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(253, 224, 71, 0.06);
        }
        .hta-choice-card:focus-visible {
            outline: 2px solid #fde047;
            outline-offset: 3px;
        }
        .hta-choice-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 3.5rem;
            height: 3.5rem;
            border-radius: 50%;
            font-size: 1.35rem;
            color: #0f172a;
            background: linear-gradient(155deg, #fef9c3, #fde047, #eab308);
            box-shadow:
                0 4px 12px rgba(234, 179, 8, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.55);
        }
        .hta-choice-title {
            font-weight: 700;
            font-size: 0.82rem;
            color: #cbd5e1;
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }
        /* Study Docs: Student vs Teacher guide (matches main How to Apply tiles) */
        /* Study Docs sub-step: small context line above the main title */
        .hta-guide-subtitle {
            display: block;
            font-size: 0.68rem;
            font-weight: 800;
            color: rgba(148, 163, 184, 0.95);
            margin: 0 0 0.4rem;
            text-align: center;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }
        .hta-heading--docs-pick {
            margin-bottom: 1.1rem;
        }
        .hta-guide-card.hta-guide-card--teacher .hta-choice-icon {
            color: #0c1324;
            background: linear-gradient(152deg, #e0f2fe 0%, #38bdf8 40%, #1d4ed8 100%);
            box-shadow:
                0 4px 12px rgba(37, 99, 235, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
        }
        .hta-back {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.76rem;
            font-weight: 700;
            color: #94a3b8;
            margin-bottom: 0.65rem;
            cursor: pointer;
            background: none;
            border: none;
            padding: 0.15rem 0;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            transition: color 0.15s ease;
        }
        .hta-back:hover {
            color: #fde047;
        }
        .hta-back:focus-visible {
            outline: 2px solid #fde047;
            outline-offset: 2px;
            border-radius: 4px;
        }
        .hta-sub-heading {
            font-size: 0.88rem;
            font-weight: 800;
            color: #94a3b8;
            margin-bottom: 1rem;
            text-align: center;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }
        /* Teacher guide panel title: same gold family as main How to Apply heading */
        .hta-doc-guide-title {
            font-size: 0.95rem;
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            text-align: center;
            margin: 0 0 1rem;
            color: #fde047;
            text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
        }
        .hta-video-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.85rem;
        }
        .hta-platform-tile {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            padding: 1.3rem 0.85rem;
            border-radius: 18px;
            text-decoration: none;
            color: #fff;
            font-weight: 800;
            overflow: hidden;
            font-size: 0.78rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            border: 1px solid rgba(255, 255, 255, 0.08);
            transition: transform 0.24s ease, box-shadow 0.24s ease;
        }
        .hta-platform-tile i {
            font-size: 2rem;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
        }
        .hta-platform-tile:hover {
            transform: translateY(-3px);
            box-shadow:
                0 12px 28px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
        }
        .hta-platform-tile:focus-visible {
            outline: 2px solid #fde047;
            outline-offset: 3px;
        }
        .hta-platform-youtube {
            background: linear-gradient(160deg, #dc2626, #991b1b);
        }
        .hta-platform-facebook {
            background: linear-gradient(160deg, #2563eb, #1e40af);
        }
        .hta-platform-tiktok {
            background: linear-gradient(160deg, #18181b, #09090b);
            border-color: rgba(255, 255, 255, 0.15);
        }
        .hta-platform-instagram {
            background: linear-gradient(150deg, #e6683c 0%, #dc2743 45%, #9333ea 100%);
        }
        .hta-docs-body {
            max-height: min(56vh, 26rem);
            overflow-y: auto;
            overflow-x: hidden;
            padding-right: 0.5rem;
            text-align: left;
            margin-top: 0.35rem;
        }
        .hta-docs-body::-webkit-scrollbar {
            width: 5px;
        }
        .hta-docs-body::-webkit-scrollbar-thumb {
            background: rgba(253, 224, 71, 0.3);
            border-radius: 999px;
        }
        .hta-doc-block {
            margin-bottom: 1rem;
            padding-bottom: 0.85rem;
            border-bottom: 1px solid rgba(148, 163, 184, 0.14);
        }
        .hta-doc-block:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        .hta-doc-block h3 {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.82rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            color: #d8e0eb;
            margin-bottom: 0.35rem;
        }
        .hta-doc-block h3::before {
            content: "";
            flex-shrink: 0;
            width: 3px;
            height: 1em;
            border-radius: 2px;
            background: linear-gradient(180deg, #fde047, #eab308);
        }
        .hta-doc-block p,
        .hta-doc-block li {
            font-size: 0.84rem;
            line-height: 1.68;
            color: #9aa5b5;
            padding-left: 0.85rem;
        }
        /* Soft emphasis: avoid stark white + heavy bold (hard to read) */
        .hta-docs-body .hta-doc-key {
            color: #b9c4d4;
            font-weight: 600;
        }
        .hta-doc-block ul {
            margin: 0.3rem 0 0 1rem;
            padding: 0;
            list-style: disc;
        }
        .hta-doc-block li {
            margin-bottom: 0.3rem;
        }
        .hta-doc-hero {
            font-size: 0.86rem;
            line-height: 1.6;
            color: #9aa5b5;
            margin: 0 0 1.05rem;
            padding: 0.7rem 0.85rem;
            border-radius: 12px;
            background: rgba(234, 179, 8, 0.05);
            border: 1px solid rgba(253, 224, 71, 0.1);
        }
        .hta-doc-hero .hta-doc-key {
            color: #c5d0e0;
            font-weight: 600;
        }
        .hta-doc-kicker {
            display: block;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(250, 204, 21, 0.72);
            margin-bottom: 0.3rem;
            padding-left: 0.85rem;
        }
        .hta-doc-checklist {
            list-style: none;
            margin: 0.35rem 0 0;
            padding: 0;
        }
        .hta-doc-checklist li {
            position: relative;
            padding-left: 1.1rem;
            margin-bottom: 0.4rem;
        }
        .hta-doc-checklist li::before {
            content: "\2713";
            position: absolute;
            left: 0;
            top: 0.05em;
            color: #fde047;
            font-size: 0.7rem;
            font-weight: 800;
        }
        .hta-doc-block--note {
            border-bottom: none;
            margin-top: 0.35rem;
            margin-bottom: 0;
            padding: 0.7rem 0.85rem;
            border-radius: 12px;
            background: rgba(15, 23, 42, 0.6);
            border: 1px solid rgba(148, 163, 184, 0.2);
        }
        .hta-doc-block--note h3::before {
            display: none;
        }
        .hta-doc-block--note h3 {
            gap: 0.4rem;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #94a3b8;
        }
        .hta-doc-block--note h3.hta-doc-heading-gold {
            color: #fde047;
            text-transform: none;
            font-size: 0.84rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-shadow: none;
        }
        .hta-doc-block--note p {
            padding-left: 0;
            margin: 0;
            color: #96a0b0;
        }
        .hta-doc-block--note .hta-doc-key {
            color: #b0bccb;
        }
        .hta-doc-block--premium {
            border: 1px solid rgba(59, 130, 246, 0.22) !important;
            background: rgba(30, 58, 138, 0.12) !important;
        }
        .hta-doc-block--note + .hta-doc-block--note {
            margin-top: 0.75rem;
        }
        
        .social-icon { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: 0.3s; margin: 0 4px; }
        .social-icon:hover { transform: translateY(-5px) scale(1.1); }
        .otr-contact-social .otr-contact-social-icons .otr-contact-social-link {
            position: relative;
        }
        .otr-contact-social-icons {
            contain: layout;
        }
        #contact .otr-contact-social .otr-contact-social-icons {
            flex-wrap: nowrap;
            justify-content: center;
            gap: 2rem;
            position: relative;
            isolation: isolate;
        }
        @media (min-width: 768px) {
            #contact .otr-contact-social .otr-contact-social-icons {
                gap: 2.5rem;
            }
        }
        #contact .otr-contact-social .otr-contact-social-icons .otr-contact-social-link.social-icon {
            margin-left: 0;
            margin-right: 0;
            background: transparent;
        }
        #contact .otr-contact-social-link .otr-social-mark {
            width: 38px;
            height: 38px;
            display: block;
            overflow: visible;
            flex-shrink: 0;
        }
        #contact .otr-contact-social-link[aria-label="TikTok"] .otr-social-mark,
        #contact .otr-contact-social-link[aria-label="Instagram"] .otr-social-mark {
            width: 30px;
            height: 30px;
        }
        #contact .otr-contact-social {
            overflow: visible;
            margin-top: 3.5rem;
            margin-bottom: 0;
        }
        @media (min-width: 768px) {
            #contact .otr-contact-social {
                margin-top: 4.25rem;
            }
        }
        @media (min-width: 1024px) {
            #contact .otr-contact-social {
                margin-top: 5rem;
            }
        }
        #contact .otr-contact-social-label {
            margin-bottom: 1.75rem;
        }
        @media (min-width: 768px) {
            #contact .otr-contact-social-label {
                margin-bottom: 2.25rem;
            }
        }
        #contact .otr-contact-social .otr-contact-social-icons.otr-contact-social-icons--tip-above {
            contain: none;
            overflow: visible;
        }
        #contact .otr-contact-social-label .otr-contact-social-typewriter {
            display: inline;
        }
        #contact .otr-contact-social-label .otr-contact-social-typewriter-cursor {
            display: inline-block;
            width: 2px;
            height: 0.92em;
            margin-left: 3px;
            vertical-align: -0.08em;
            border-radius: 1px;
            background: linear-gradient(180deg, #e5e7eb 0%, #fcd34d 48%, #ca8a04 100%);
            box-shadow:
                0 0 6px rgba(251, 191, 36, 0.55),
                0 0 12px rgba(245, 158, 11, 0.22);
            animation: otr-header-cursor-blink 0.88s cubic-bezier(0.45, 0, 0.55, 1) infinite;
        }
        #contact .otr-contact-social-label .otr-contact-social-typewriter-cursor--active {
            width: 2.5px;
            animation: otr-header-cursor-blink-fast 0.58s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            box-shadow:
                0 0 9px rgba(251, 191, 36, 0.75),
                0 0 16px rgba(245, 158, 11, 0.28);
        }
        #contact .otr-contact-social-label .otr-contact-social-typewriter-cursor--off {
            animation: none;
            opacity: 0;
            width: 0 !important;
            margin-left: 0;
            transition:
                opacity 0.35s ease,
                width 0.35s ease,
                margin 0.35s ease;
        }
        @media (prefers-reduced-motion: reduce) {
            #contact .otr-contact-social-label .otr-contact-social-typewriter-cursor {
                animation: none;
                opacity: 0;
                width: 0;
                margin: 0;
            }
            #contact .otr-contact-social-label .otr-contact-social-typewriter-cursor--active {
                animation: none;
            }
        }
        .otr-contact-social .otr-contact-social-icons .otr-contact-social-link:hover {
            z-index: 8;
        }
        .otr-contact-social .otr-contact-social-icons .otr-contact-social-link::after {
            content: attr(data-otr-tip);
            position: absolute;
            left: 50%;
            bottom: calc(100% + 8px);
            transform: translateX(-50%);
            padding: 0.35rem 0.65rem;
            border-radius: 0.375rem;
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1.2;
            white-space: nowrap;
            color: #0a0a0a;
            background: #facc15;
            border: 1px solid rgba(0, 0, 0, 0.2);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.05s ease, visibility 0.05s ease;
        }
        #contact .otr-contact-social-icons .otr-contact-social-link::after {
            transition: none;
        }
        .otr-contact-social .otr-contact-social-icons .otr-contact-social-link:hover::after {
            opacity: 1;
            visibility: visible;
        }

        #contact .otr-contact-secp-strip {
            margin-top: 2.75rem;
            width: 100%;
            background-color: var(--otr-reg-field-bg-filled, #0c1829);
            border-top: 1px solid rgba(148, 163, 184, 0.14);
            box-sizing: border-box;
            padding-top: 0.55rem;
            padding-bottom: 1.65rem;
        }
        #contact .otr-contact-secp-strip__inner {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center;
            width: 100%;
            max-width: 80rem;
            margin-left: auto;
            margin-right: auto;
            padding: 0.85rem 1.7rem 0.55rem;
            text-align: center;
            gap: 0.85rem 1.75rem;
        }
        #contact .otr-contact-secp-strip__lead-wrap,
        #contact .otr-contact-secp-strip__org,
        #contact .otr-contact-secp-strip__reg {
            display: inline-block;
            margin: 0;
            flex: 0 0 auto;
        }
        #contact .otr-contact-secp-strip__lead-wrap {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.15rem;
            line-height: 1.15;
        }
        #contact .otr-contact-secp-strip__lead {
            display: block;
            margin: 0;
            font-size: 0.8125rem;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(203, 213, 225, 0.88);
            white-space: nowrap;
        }
        #contact .otr-contact-secp-strip__acronym {
            display: block;
            margin: 0;
            font-size: 0.875rem;
            font-weight: 700;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--otr-gold, #fde047);
            white-space: nowrap;
        }
        #contact .otr-contact-secp-strip__logo {
            flex: 0 0 auto;
            width: 92px;
            height: 92px;
            object-fit: contain;
            display: block;
            image-rendering: -webkit-optimize-contrast;
        }
        #contact .otr-contact-secp-strip__org {
            font-size: clamp(0.6875rem, 1.25vw, 0.875rem);
            font-weight: 600;
            line-height: 1.25;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(226, 232, 240, 0.92);
            white-space: nowrap;
        }
        #contact .otr-contact-secp-strip__reg {
            font-size: clamp(0.75rem, 1.3vw, 0.9375rem);
            font-weight: 500;
            letter-spacing: 0.04em;
            color: var(--otr-gold, #fde047);
            white-space: nowrap;
        }
        @media (min-width: 768px) {
            #contact .otr-contact-secp-strip {
                margin-top: 3.25rem;
            }
            #contact .otr-contact-secp-strip {
                padding-top: 0.7rem;
                padding-bottom: 1.9rem;
            }
            #contact .otr-contact-secp-strip__inner {
                gap: 1.1rem 2.15rem;
                padding: 0.95rem 2.15rem 0.65rem;
            }
        }
        section#contact {
            padding-bottom: 0;
        }

        /* Premium multi-column footer (institutional close; last on-page cadence). */
        .otr-site-footer-premium {
            background: radial-gradient(circle at 50% -20%, rgba(250, 204, 21, 0.06), transparent 55%), #05070f;
            border-top: 1px solid rgba(202, 138, 4, 0.28);
            color: rgba(226, 232, 240, 0.95);
            margin-top: 0;
        }
        .otr-footer-premium__shell {
            padding: 3.25rem 0 2rem;
            box-sizing: border-box;
        }
        @media (max-width: 1024px) {
            .otr-footer-premium__shell {
                padding-bottom: calc(2rem + 5rem + env(safe-area-inset-bottom, 0px));
            }
        }
        @media (min-width: 640px) {
            .otr-footer-premium__shell {
                padding: 3.6rem 0 2.1rem;
            }
        }
        @media (min-width: 640px) and (max-width: 1024px) {
            .otr-footer-premium__shell {
                padding-bottom: calc(2.1rem + 5rem + env(safe-area-inset-bottom, 0px));
            }
        }
        .otr-footer-premium__grid {
            display: grid;
            gap: 1.75rem;
            grid-template-columns: 1fr;
            align-items: start;
            text-align: left;
            padding-bottom: 2rem;
            border-bottom: 1px solid rgba(253, 224, 71, 0.12);
        }
        @media (min-width: 1024px) {
            .otr-footer-premium__grid {
                grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
                column-gap: 2rem;
                row-gap: 1.75rem;
            }
        }
        .otr-footer-premium__nav-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
            min-width: 0;
        }
        @media (min-width: 640px) {
            .otr-footer-premium__nav-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                column-gap: 1.35rem;
                row-gap: 0;
            }
        }
        @media (min-width: 1024px) {
            .otr-footer-premium__nav-grid {
                column-gap: 1.375rem;
                align-items: start;
                padding-top: 0;
            }
        }
        .otr-footer-premium__brand {
            min-width: 0;
        }
        .otr-footer-premium__brand-kicker {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            flex-wrap: nowrap;
            gap: 0.72rem;
            margin: 0 0 1.05rem;
            padding: 0 0 1rem;
            max-width: min(34rem, 100%);
            border-bottom: 1px solid rgba(253, 224, 71, 0.14);
        }
        .otr-footer-premium__logo {
            flex-shrink: 0;
            width: 3.35rem;
            height: 3.35rem;
            border-radius: 50%;
            border: 1px solid rgba(250, 204, 21, 0.34);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0;
            overflow: hidden;
            background: linear-gradient(165deg, #0d1220 0%, #080c14 100%);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.05) inset,
                0 6px 18px rgba(0, 0, 0, 0.38);
        }
        .otr-footer-premium__logo-img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .otr-footer-premium__brand-sub {
            margin: 0;
            flex: none;
            min-width: 0;
            max-width: 100%;
            font-size: clamp(0.74rem, 1.05vw, 0.8125rem);
            font-weight: 600;
            letter-spacing: 0.028em;
            line-height: 1.42;
            text-align: left;
            text-transform: none;
            text-wrap: balance;
            color: rgba(236, 241, 247, 0.92);
        }
        .otr-footer-premium__lead,
        .otr-footer-premium__about {
            font-size: 0.8125rem;
            font-weight: 400;
            line-height: 1.62;
            letter-spacing: 0.01em;
            color: rgba(214, 222, 232, 0.98);
            max-width: min(34rem, 100%);
        }
        .otr-footer-premium__lead {
            margin: 0 0 0.72rem;
        }
        .otr-footer-premium__about {
            margin: 0;
        }
        .otr-footer-premium__col {
            min-width: 0;
        }
        .otr-footer-premium__col-title {
            margin: 0 0 0.72rem;
            margin-block-start: 0;
            font-size: 0.78125rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #facc15;
        }
        .otr-footer-premium__list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 0.375rem;
        }
        .otr-footer-premium__link {
            display: inline;
            padding: 0;
            margin: 0;
            border: none;
            background: none;
            font: inherit;
            font-size: 0.78125rem;
            font-weight: 500;
            line-height: 1.52;
            color: rgba(203, 213, 225, 0.94);
            text-decoration: none;
            text-underline-offset: 3px;
            cursor: pointer;
            transition: color 0.14s ease;
            text-align: left;
            width: auto;
            max-width: 100%;
        }
        .otr-footer-premium__link:focus-visible {
            outline: 2px solid rgba(253, 224, 71, 0.6);
            outline-offset: 2px;
            border-radius: 2px;
        }
        .otr-footer-premium__link:hover {
            color: #fffbeb;
        }
        button.otr-footer-premium__link.otr-footer-premium__link--btn:hover {
            text-decoration: underline;
            text-decoration-color: rgba(253, 224, 71, 0.4);
        }
        a.otr-footer-premium__link:hover {
            text-decoration: underline;
            text-decoration-color: rgba(253, 224, 71, 0.4);
        }
        .otr-footer-premium__trust {
            padding-top: 1.85rem;
            display: block;
            text-align: center;
        }
        .otr-footer-premium__registry-dash {
            color: rgba(202, 138, 4, 0.55);
            font-weight: 400;
            margin: 0 0.4em;
        }
        .otr-footer-premium__entity {
            margin: 0;
            font-size: 0.8125rem;
            line-height: 1.58;
            color: rgba(160, 170, 186, 0.98);
            max-width: 56rem;
        }
        .otr-footer-premium__entity-strong {
            font-weight: 600;
            color: rgba(209, 213, 219, 0.95);
        }
        .otr-footer-premium__entity a {
            color: #e8edf5;
            text-decoration: underline;
            text-decoration-color: rgba(250, 204, 21, 0.4);
            text-underline-offset: 3px;
            transition:
                color 0.14s ease,
                text-decoration-color 0.14s ease;
        }
        .otr-footer-premium__entity a:hover {
            color: #fef9c3;
            text-decoration-color: rgba(253, 224, 71, 0.72);
        }
        .otr-footer-premium__entity.otr-footer-premium__entity--registry {
            max-width: none;
            margin-inline: auto;
            text-align: center;
            line-height: 1.52;
            letter-spacing: 0.012em;
            font-size: 0.766rem;
        }
        .otr-footer-premium__registry-stack {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.38rem;
            max-width: 42rem;
            margin-inline: auto;
        }
        .otr-footer-premium__registry-line {
            margin: 0;
            width: 100%;
            text-wrap: balance;
        }
        .otr-footer-premium__registry-line--contact {
            letter-spacing: 0.02em;
        }
        .otr-footer-premium__registry-line--entity,
        .otr-footer-premium__registry-line--address,
        .otr-footer-premium__registry-line--registry {
            color: rgba(148, 158, 176, 0.96);
            font-size: 0.92em;
            line-height: 1.55;
        }
        @media (min-width: 1024px) {
            .otr-footer-premium__entity.otr-footer-premium__entity--registry {
                font-size: 0.8125rem;
            }
            .otr-footer-premium__registry-stack {
                gap: 0.42rem;
                max-width: 48rem;
            }
        }
        .otr-footer-premium__entity.otr-footer-premium__entity--registry .otr-footer-premium__entity-abbr {
            font-weight: 600;
            color: rgba(218, 224, 234, 0.97);
            text-decoration: underline;
            text-decoration-style: dotted;
            text-underline-offset: 2px;
            text-decoration-color: rgba(250, 204, 21, 0.42);
            cursor: help;
        }
        .otr-footer-premium__entity.otr-footer-premium__entity--registry .otr-footer-premium__entity-strong,
        .otr-footer-premium__entity.otr-footer-premium__entity--registry a,
        .otr-footer-premium__entity.otr-footer-premium__entity--registry .otr-footer-premium__entity-abbr,
        .otr-footer-premium__entity.otr-footer-premium__entity--registry .otr-footer-premium__ntn,
        .otr-footer-premium__entity.otr-footer-premium__entity--registry .otr-footer-premium__registry-dash {
            font-family: inherit;
            font-size: inherit;
            font-weight: 400;
            letter-spacing: inherit;
            color: rgba(160, 170, 186, 0.98);
        }
        .otr-footer-premium__entity.otr-footer-premium__entity--registry a {
            text-decoration: underline;
            text-decoration-color: rgba(160, 170, 186, 0.42);
            text-underline-offset: 3px;
        }
        .otr-footer-premium__entity.otr-footer-premium__entity--registry a:hover {
            color: rgba(160, 170, 186, 0.98);
            text-decoration-color: rgba(160, 170, 186, 0.62);
        }
        .otr-footer-premium__entity.otr-footer-premium__entity--registry .otr-footer-premium__entity-abbr {
            text-decoration: none;
            cursor: help;
        }
        .otr-footer-premium__entity.otr-footer-premium__entity--registry .otr-footer-premium__registry-line--contact .otr-footer-premium__entity-strong {
            font-weight: 600;
            color: rgba(209, 213, 219, 0.95);
        }
        .otr-footer-premium__ntn {
            font-family:
                ui-monospace,
                "Cascadia Code",
                monospace;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: rgba(248, 250, 252, 0.98);
            font-variant-numeric: tabular-nums;
        }
        .otr-footer-premium__rule {
            height: 1px;
            margin: 1.85rem auto 1.65rem;
            max-width: 88rem;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(202, 138, 4, 0.22) 20%,
                rgba(253, 224, 71, 0.4) 50%,
                rgba(202, 138, 4, 0.22) 80%,
                transparent 100%
            );
            opacity: 0.92;
            padding: 0 1rem;
            box-sizing: border-box;
        }
        .otr-footer-premium__bottom {
            text-align: center;
            font-size: 0.9rem;
            line-height: 1.62;
            color: rgba(180, 190, 204, 0.98);
            margin: 0;
            letter-spacing: 0.015em;
        }
        .otr-footer-premium__bottom-main p {
            margin: 0;
        }
        .otr-footer-premium__legal-name {
            margin-top: 0.55rem;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.035em;
            line-height: 1.45;
            color: rgba(232, 236, 242, 0.96);
        }
        .otr-footer-premium__rights {
            color: rgba(156, 165, 180, 0.95);
            font-weight: 500;
        }
        .otr-footer-premium__dev-name {
            font-weight: 800;
            color: #facc15;
        }
        
        @media (max-width: 768px) { .nav-links { display: none !important; } .mobile-menu-btn { display: block !important; } }
        @media (min-width: 769px) { .nav-links { display: flex !important; } .mobile-menu-btn { display: none !important; } }
        
        #hero .otr-hero-auth-ribbon {
            flex-shrink: 0;
            box-sizing: border-box;
            justify-content: flex-end;
            gap: 0.5rem;
            padding-top: 0.7rem;
            padding-bottom: 0.2rem;
        }
        @media (min-width: 768px) {
            #hero .otr-hero-auth-ribbon {
                padding-top: 0.85rem;
                padding-bottom: 0.25rem;
            }
        }

        #hero {
            position: relative;
            background: var(--otr-bg);
            overflow: hidden;
            isolation: isolate;
        }
        #hero::before {
            content: "";
            position: absolute;
            inset: -2px;
            z-index: 3;
            pointer-events: none;
            background:
                radial-gradient(ellipse 55% 42% at 72% 18%, rgba(56, 189, 248, 0.16), transparent 58%),
                radial-gradient(ellipse 50% 45% at 18% 72%, rgba(250, 204, 21, 0.11), transparent 55%),
                radial-gradient(circle at 50% 100%, rgba(15, 23, 42, 0.4), transparent 52%);
            opacity: 0.92;
            animation: otr-hero-mesh 22s ease-in-out infinite alternate;
        }
        @keyframes otr-hero-mesh {
            0% { opacity: 0.78; transform: scale(1) translate3d(0, 0, 0); }
            100% { opacity: 1; transform: scale(1.03) translate3d(-0.6%, 0.4%, 0); }
        }
        #hero .hero-lead {
            line-height: 1.68;
            color: rgba(248, 250, 252, 0.82);
            font-weight: 500;
            letter-spacing: 0.018em;
            text-wrap: balance;
        }
        /* Hero H1: equal vertical rhythm between all three lines (locked copy). */
        #hero h1.otr-hero-headline {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            row-gap: 0.7rem;
            margin-top: 1rem;
        }
        @media (min-width: 640px) {
            #hero h1.otr-hero-headline {
                row-gap: 0.85rem;
                margin-top: 1.25rem;
            }
        }
        @media (min-width: 1024px) {
            #hero h1.otr-hero-headline {
                row-gap: 1rem;
                margin-top: 1.5rem;
            }
        }
        #hero .background-layer {
            position: absolute;
            inset: 0;
            background-image: url("https://images.pexels.com/photos/5905493/pexels-photo-5905493.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2");
            background-size: cover;
            background-position: center 30%;
            filter: brightness(0.48) saturate(1.05);
            z-index: 1;
            transform: scale(1.06);
            transform-origin: center center;
            animation: otr-hero-kenburns 32s ease-in-out infinite alternate;
            will-change: transform;
        }
        @keyframes otr-hero-kenburns {
            0% { transform: scale(1.04) translate3d(-0.4%, 0, 0); }
            100% { transform: scale(1.14) translate3d(0.5%, 0.6%, 0); }
        }

        /* ── SECTION OFF-SCREEN GATES ────────────────────────────────────────────
         * JS IntersectionObserver adds these classes when sections leave viewport.
         * This frees GPU bandwidth for the marquees that are in view.
         * ─────────────────────────────────────────────────────────────────────── */
        #hero.otr-hero--offscreen .background-layer {
            animation: none !important;
            will-change: auto !important;
        }
        #hero.otr-hero--offscreen::before {
            animation: none !important;
        }
        #faq.otr-faq--offscreen .otr-faq-otr-orbit {
            animation-play-state: paused !important;
        }
        #contact.otr-contact--offscreen .otr-contact-heading-mote {
            animation-play-state: paused !important;
        }
        /* Honors box-shadow animations: gate when section scrolled away */
        #school-leadership-honors.otr-honors--offscreen .otr-honors-ctx-icon::after,
        #school-leadership-honors.otr-honors--offscreen .prov-top10-btn--ict {
            animation-play-state: paused !important;
        }

        #hero .gradient-overlay {
            position: absolute;
            inset: 0;
            z-index: 2;
            background:
                radial-gradient(ellipse 95% 75% at 50% 118%, rgba(0, 0, 0, 0.72), transparent 58%),
                radial-gradient(circle at 28% 44%, rgba(255, 215, 0, 0.2) 0%, transparent 48%),
                radial-gradient(circle at 82% 24%, rgba(56, 189, 248, 0.14) 0%, transparent 46%),
                linear-gradient(155deg, rgba(5, 8, 22, 0.94) 0%, rgba(10, 12, 26, 0.78) 48%, rgba(6, 8, 20, 0.9) 100%);
        }
        #hero > * {
            position: relative;
            z-index: 4;
        }
        @media (prefers-reduced-motion: reduce) {
            #hero::before {
                animation: none;
                opacity: 0.88;
                transform: none;
            }
            #hero .background-layer {
                animation: none;
                transform: scale(1.06);
            }
        }
        
        .leader-card { opacity: 0; transform: translateX(0); transition: all 1s; background: linear-gradient(145deg, #1f2937, #111827); border-radius: 40px; padding: 2rem; }
        .leader-card.left { transform: translateX(-100px); }
        .leader-card.right { transform: translateX(100px); }
        .leader-card.visible { opacity: 1; transform: translateX(0); }
        .leader-card .portrait { border: 4px solid #ffd700; border-radius: 50%; width: 140px; height: 140px; object-fit: cover; margin-bottom: 1rem; }

/* -----------------------------------------------
   Demo-test overlay + How-to-apply panel styles
   ----------------------------------------------- */
    #otr-demo-overlay.otr-demo-overlay--entry {
        justify-content: flex-start;
        align-items: stretch;
    }
    /* Overlay */
    #otr-demo-overlay {
        display: none; position: fixed; inset: 0; z-index: 9999;
        background:
            radial-gradient(circle at 15% 10%, rgba(56,189,248,0.18), transparent 42%),
            radial-gradient(circle at 84% 82%, rgba(250,204,21,0.15), transparent 48%),
            #05080f;
        flex-direction: column; align-items: stretch;
        justify-content: flex-start;
        min-height: 100vh;
        min-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    #otr-demo-overlay::before {
        content:""; position:absolute; inset:0; pointer-events:none;
        background:
            radial-gradient(ellipse 70% 50% at 50% -10%, rgba(253,224,71,0.08) 0%, transparent 60%),
            radial-gradient(ellipse 40% 30% at 80% 90%, rgba(56,189,248,0.06) 0%, transparent 60%);
    }
    /* close corner button */
    .dt-close-btn {
        /* Top-left keeps it away from the timer cluster (top-right) */
        position:absolute; top:1.1rem; left:1.1rem; z-index:20;
        width:2.4rem; height:2.4rem; border-radius:50%;
        border:1px solid rgba(253,224,71,0.3); background:rgba(15,23,42,0.9);
        color:#fde047; font-size:1.3rem; cursor:pointer;
        display:flex; align-items:center; justify-content:center;
        transition:background 0.15s;
        box-shadow:0 10px 26px rgba(0,0,0,0.45);
        -webkit-user-select:none;
        user-select:none;
        caret-color:transparent;
    }
    .dt-close-btn:hover { background:rgba(253,224,71,0.12); }
    /* Entry form: hide far corner close ? card has its own control */
    #otr-demo-overlay.otr-demo-overlay--entry .dt-close-btn--global {
        display: none !important;
    }
    /* Results: pin close button to top-right corner of the overlay */
    #otr-demo-overlay.otr-demo-overlay--test {
        background: #0a0e17;
        overflow: hidden;
        height: 100dvh;
        max-height: 100dvh;
        min-height: 0;
    }
    #otr-demo-overlay.otr-demo-overlay--test::before {
        display: none;
    }
    #otr-demo-overlay.otr-demo-overlay--test #dt-screen-test {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        max-height: 100%;
        align-items: stretch;
        align-self: stretch;
    }
    #otr-demo-overlay.otr-demo-overlay--result .dt-close-btn--global {
        left: auto;
        right: 1rem;
        top: 0.75rem;
        position: fixed;
    }
    /* Screens */
    .dt-screen {
        width:100%;
        flex:1 1 auto;
        min-height:0;
        max-height:100vh;
        max-height:100dvh;
        display:none;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        padding:1.5rem;
        position:relative;
    }
    /* Demo test: entry screen — scrollable, top-aligned (matches admission form visibility) */
    #dt-screen-entry {
        gap: 1rem;
        padding: max(1rem, env(safe-area-inset-top, 0px)) 1.25rem max(2.5rem, env(safe-area-inset-bottom, 0px));
        justify-content: flex-start;
        align-items: center;
        max-height: none;
        min-height: auto;
        flex: 0 0 auto;
        overflow: visible;
    }
    .dt-entry-logo {
        font-size:clamp(1.5rem,4vw,2.1rem); font-weight:900;
        letter-spacing:0.14em; color:#fde047;
        text-shadow:none;
    }
    .dt-entry-sub {
        font-size:0.82rem; color:#64748b; letter-spacing:0.08em;
        text-transform:uppercase; margin-top:-0.6rem;
    }
    .dt-entry-card {
        position: relative;
        margin-bottom: 0.5rem;
    }
    .dt-entry-card.registration-modal-shell--wizard {
        background: #0b1020;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.04) inset,
            0 28px 64px rgba(0, 0, 0, 0.55);
        width: min(520px, 94vw);
        max-width: 94vw;
        padding: 1.25rem 1.35rem 1.15rem;
    }
    .dt-entry-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
        margin-bottom: 0.35rem;
    }
    .dt-entry-card-header h2 {
        margin: 0;
        flex: 1;
        min-width: 0;
        line-height: 1.35;
        text-align: left;
    }
    .dt-close-btn.dt-close-btn--entry {
        position: relative;
        top: auto;
        left: auto;
        flex-shrink: 0;
        width: 2.5rem;
        height: 2.5rem;
        margin-top: -0.1rem;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    }
    .dt-close-btn.dt-close-btn--entry:hover {
        background: rgba(253, 224, 71, 0.18);
    }
    .dt-entry-card .reg-form-sub.dt-entry-kicker {
        margin: 0 0 0.85rem;
        font-size: 0.78rem;
        line-height: 1.45;
        color: #94a3b8;
        letter-spacing: 0.02em;
    }
    .dt-entry-card .reg-form-sub.dt-entry-kicker strong {
        color: #e2e8f0;
        font-weight: 600;
    }
    #dt-entry-form.reg-form--wizard select:disabled,
    #dt-entry-form.reg-form--wizard .otr-reg-select-listbox__trigger:disabled {
        opacity: 0.72;
        cursor: not-allowed;
        border-color: var(--otr-reg-field-border-empty) !important;
        background-color: var(--otr-reg-field-bg-empty) !important;
    }
    #dt-entry-form.reg-form--wizard input[type="text"]:not(:placeholder-shown),
    #dt-entry-form.reg-form--wizard input[type="email"]:not(:placeholder-shown),
    #dt-entry-form.reg-form--wizard select:valid:not(:disabled) {
        border-color: var(--otr-reg-field-border) !important;
        background-color: var(--otr-reg-field-bg-filled) !important;
        box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.1);
    }
    #dt-entry-form #dt-input-subject-display.reg-stu-field-locked:not(.is-awaiting-class) {
        border-color: var(--otr-reg-field-border);
        background-color: var(--otr-reg-field-bg-filled);
        box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.1);
    }
    #dt-entry-form #dt-input-subject-display.is-awaiting-class {
        border-color: var(--otr-reg-field-border-empty);
        background-color: var(--otr-reg-field-bg-empty);
        color: #6b7280;
    }
    #dt-entry-form .reg-photo-file-wrap.is-photo-filled {
        border-color: rgba(56, 189, 248, 0.45);
        background: rgba(12, 24, 41, 0.72);
        box-shadow: inset 0 1px 0 rgba(147, 197, 253, 0.08);
    }
    #dt-entry-form > .reg-group > input.p-3,
    #dt-entry-form > .reg-group > select.p-3,
    #dt-entry-form > .reg-group > .otr-reg-select-listbox,
    #dt-entry-form > .reg-group > .otr-district-combobox,
    #dt-entry-form > .reg-group > .otr-city-combobox {
        margin-bottom: var(--otr-stu-field-box-gap, 0.48rem);
    }
    #dt-entry-form > .reg-group > .reg-stu-class-fee-row {
        margin-bottom: var(--otr-stu-field-box-gap, 0.48rem);
    }
    #dt-entry-form > .reg-group > label[for="dt-input-school"] {
        margin-top: var(--otr-stu-field-stack-gap, 0.55rem);
        margin-bottom: var(--otr-stu-label-field-gap, 0.22rem);
    }
    #dt-entry-form > .reg-group > input.p-3:last-child,
    #dt-entry-form > .reg-group > select.p-3:last-child,
    #dt-entry-form > .reg-group > .otr-reg-select-listbox:last-child,
    #dt-entry-form > .reg-group > .otr-city-combobox:last-child,
    #dt-entry-form > .reg-group > #dt-input-school {
        margin-bottom: 0;
    }
    #dt-entry-form > .reg-group:nth-child(3) > label[for="dt-input-province"] {
        margin-top: 0.22rem;
        margin-bottom: 0.22rem;
    }
    #dt-entry-form > .reg-group:has(.reg-stu-class-fee-row) > .reg-group-heading {
        margin-bottom: 0.55rem;
    }
    #dt-entry-form .reg-photo-upload-row--demo {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 1rem;
        width: 100%;
        max-width: 100%;
        margin: 0.15rem 0 0;
    }
    #dt-entry-form .reg-photo-upload-row--demo .reg-photo-file-wrap {
        position: relative;
        flex: 0 0 auto;
        min-width: 9.25rem;
        width: auto;
        max-width: min(100%, 13.25rem);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        gap: 0.28rem;
        padding: 0.46rem 0.68rem;
        box-sizing: border-box;
        border-radius: 10px;
        border: 1px solid rgba(100, 116, 139, 0.55);
        background: rgba(2, 6, 23, 0.45);
    }
    #dt-entry-form .reg-photo-file-input {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    #dt-entry-form .reg-photo-file-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        width: 100%;
        box-sizing: border-box;
        margin: 0;
        padding: 0.45rem 0.65rem;
        border-radius: 8px;
        border: 1px solid rgba(100, 116, 139, 0.5);
        background: rgba(15, 23, 42, 0.75);
        color: #fde047;
        font-size: 0.78rem;
        font-weight: 600;
        cursor: pointer;
        transition: border-color 0.15s ease, background-color 0.15s ease;
    }
    #dt-entry-form .reg-photo-file-btn:hover {
        border-color: rgba(251, 191, 36, 0.55);
        background: rgba(30, 41, 59, 0.88);
    }
    #dt-entry-form .reg-photo-file-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.22);
    }
    #dt-entry-form .reg-photo-file-name {
        font-size: 0.6875rem;
        color: #64748b;
        line-height: 1.35;
    }
    #dt-entry-form .reg-photo-thumb--demo {
        position: relative;
        flex: 0 0 9.5rem;
        width: 9.5rem;
        height: 9.5rem;
        margin: 0 0 0 auto;
        border-radius: 999px;
        border: 2px solid rgba(251, 191, 36, 0.42);
        background: rgba(2, 6, 23, 0.55);
        overflow: hidden;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
        cursor: pointer;
    }
    #dt-entry-form .reg-photo-thumb--demo:hover {
        border-color: rgba(251, 191, 36, 0.58);
    }
    #dt-entry-form .reg-photo-thumb--demo .dt-photo-preview {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border: none;
        box-shadow: none;
        display: none;
    }
    #dt-entry-form .reg-photo-thumb--demo .dt-photo-preview[style*="display: block"],
    #dt-entry-form .reg-photo-thumb--demo .dt-photo-preview[style*="display:block"] {
        display: block !important;
    }
    #dt-entry-form .reg-photo-thumb--demo:has(.dt-photo-preview[style*="display: block"]) .reg-photo-thumb-empty,
    #dt-entry-form .reg-photo-thumb--demo:has(.dt-photo-preview[style*="display:block"]) .reg-photo-thumb-empty {
        display: none;
    }
    #dt-entry-form .reg-photo-thumb-empty {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(148, 163, 184, 0.85);
        font-size: 1.85rem;
        pointer-events: none;
    }
    #dt-entry-form .reg-stu-class-fee-row {
        display: flex;
        align-items: flex-start;
        column-gap: 1.2rem;
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-top: 0.22rem;
        margin-bottom: 0.48rem;
    }
    #dt-entry-form.reg-form--demo {
        --otr-stu-label-field-gap: 0.22rem;
        --otr-stu-field-box-gap: 0.48rem;
        --otr-stu-field-stack-gap: 0.55rem;
    }
    #dt-entry-form .reg-stu-class-fee-col:first-child,
    #dt-entry-form .reg-stu-class-fee-col:last-child {
        flex: 1 1 0;
        min-width: 0;
        max-width: none;
    }
    #dt-entry-form .reg-stu-class-fee-col > .reg-field-label {
        margin: 0 0 0.22rem;
        line-height: 1.2;
    }
    #dt-entry-form .reg-stu-class-fee-col > select,
    #dt-entry-form .reg-stu-class-fee-col > .otr-reg-select-listbox .otr-reg-select-listbox__trigger,
    #dt-entry-form .reg-stu-class-fee-col > .reg-stu-field-locked {
        width: 100%;
        box-sizing: border-box;
        min-height: 2.7rem;
    }
    #dt-entry-form .reg-stu-class-fee-col > .reg-stu-field-locked {
        display: flex;
        align-items: center;
    }
    #dt-entry-form > label[for="dt-input-school"] {
        margin-top: 0.55rem;
    }
    @media (max-width: 479px) {
        #dt-entry-form .reg-stu-class-fee-row {
            flex-direction: column;
            row-gap: 0.65rem;
            align-items: stretch;
        }
        #dt-entry-form .reg-stu-class-fee-col:first-child,
        #dt-entry-form .reg-stu-class-fee-col:last-child {
            flex: none;
            width: 100%;
            max-width: none;
            min-width: 0;
        }
    }
    @media (min-width: 960px) {
        .dt-entry-card.registration-modal-shell--wizard {
            max-width: 1120px;
            width: min(1120px, 94vw);
            max-height: min(92vh, 880px);
            overflow-y: auto;
            padding: 1.25rem 1.5rem 1.15rem;
        }
        .registration-modal-shell--wizard #dt-entry-form > .reg-group:nth-child(1),
        .registration-modal-shell--wizard #dt-entry-form > .reg-group:nth-child(2),
        .registration-modal-shell--wizard #dt-entry-form > .reg-group:nth-child(3),
        .registration-modal-shell--wizard #dt-entry-form > .reg-group:nth-child(4) {
            align-self: stretch;
            min-width: 0;
        }
        .registration-modal-shell--wizard #dt-entry-form > .reg-group:nth-child(3),
        .registration-modal-shell--wizard #dt-entry-form > .reg-group:nth-child(4) {
            display: flex;
            flex-direction: column;
        }
        #dt-entry-form > .reg-group:nth-child(4) > .reg-field-hint {
            margin-bottom: 0.55rem;
        }
        #dt-entry-form > .reg-group:nth-child(4) .reg-photo-upload-row--demo {
            flex: 1 1 auto;
            align-items: center;
            justify-content: flex-start;
            min-height: 9.75rem;
        }
        #dt-entry-form > .reg-group:nth-child(4) .reg-photo-thumb--demo {
            flex: 0 0 10.25rem;
            width: 10.25rem;
            height: 10.25rem;
        }
        #dt-entry-form > .reg-group:nth-child(4) .reg-photo-thumb-empty {
            font-size: 2rem;
        }
        .registration-modal-shell--wizard #dt-entry-form > .dt-entry-error {
            grid-column: 1 / -1;
        }
        .registration-modal-shell--wizard #dt-entry-form > button[type="submit"] {
            grid-column: 1 / -1;
            max-width: 28rem;
            justify-self: center;
            margin-top: 0.5rem;
        }
        .registration-modal-shell--wizard #dt-entry-form > .reg-stu-submit-btn {
            margin-top: 0.5rem;
        }
        .registration-modal-shell--wizard #dt-entry-form > .reg-group > .reg-field-label {
            margin: 0.55rem 0 var(--otr-stu-label-field-gap, 0.22rem);
        }
        .registration-modal-shell--wizard #dt-entry-form > .reg-group > .reg-field-label:first-of-type {
            margin-top: 0;
        }
    }
    .dt-field-locked,
    #student-reg-modal .reg-stu-field-locked {
        box-sizing: border-box;
        width: 100%;
        background-color: var(--otr-reg-field-bg-filled);
        border: 1px solid var(--otr-reg-field-border);
        border-radius: 10px;
        padding: 0.6rem 0.75rem;
        color: #e2e8f0;
        font-size: 0.9rem;
        font-family: 'Inter', sans-serif;
        line-height: 1.35;
    }
    .dt-photo-field-row {
        display:flex; gap:0.8rem; align-items:center;
    }
    .dt-photo-preview {
        width: 3rem;
        height: 3rem;
        border-radius: 999px;
        object-fit: cover;
        border: 2px solid rgba(250, 204, 21, 0.45);
        box-shadow: none;
        display: none;
    }
    #dt-entry-form .dt-start-entry-btn.btn-primary {
        width: 100%;
        margin-top: 0.55rem;
        padding: 0.875rem 1rem;
        border-radius: 0.75rem;
        font-weight: 700;
        font-size: 1rem;
        letter-spacing: 0;
        background: #ffd700;
        color: #0a0c1a;
        border: none;
        box-shadow: none;
        transition: all 0.3s;
        cursor: pointer;
    }
    #dt-entry-form .dt-start-entry-btn.btn-primary:hover:not(:disabled) {
        transform: scale(1.05);
        filter: brightness(1.05);
        box-shadow: none;
    }
    #dt-entry-form .dt-start-entry-btn.btn-primary:active:not(:disabled) {
        transform: none;
        box-shadow: none;
    }
    #dt-entry-form .dt-start-entry-btn.btn-primary:focus-visible {
        outline: 2px solid rgba(253, 224, 71, 0.92);
        outline-offset: 3px;
    }
    #dt-entry-form .dt-start-entry-btn.btn-primary:disabled {
        opacity: 0.42;
        cursor: not-allowed;
        pointer-events: none;
        filter: saturate(0.65);
        transform: none;
        box-shadow: none;
    }
    .dt-start-entry-btn:disabled,
    .dt-submit-btn:disabled {
        opacity: 0.65;
        cursor: wait;
        transform: none;
        box-shadow: none;
    }
    .dt-entry-error {
        margin: 0 0 0.85rem;
        padding: 0.75rem 0.9rem;
        border-radius: 12px;
        border: 1px solid rgba(248, 113, 113, 0.45);
        background: rgba(127, 29, 29, 0.35);
        color: #fecaca;
        font-size: 0.92rem;
        line-height: 1.45;
    }
    .dt-result-error-panel {
        max-width: 28rem;
        margin: 2rem auto;
        padding: 2rem 1.5rem;
        text-align: center;
        border-radius: 18px;
        border: 1px solid rgba(248, 113, 113, 0.35);
        background: rgba(15, 23, 42, 0.92);
        color: #e2e8f0;
    }
    .dt-result-error-panel h3 { margin: 0.75rem 0 0.5rem; color: #fde047; font-size: 1.25rem; }
    .dt-result-error-panel p { margin: 0 0 1.25rem; color: #cbd5e1; line-height: 1.55; }
    .dt-result-error-icon { font-size: 2rem; color: #f87171; }
    .dt-cta-retry--ghost { margin-top: 0.65rem; background: transparent; border: 1px solid rgba(148,163,184,0.35); }
    /* Demo test: welcome screen */
    #dt-screen-welcome {
        gap: 0;
        text-align: center;
        padding: max(1rem, env(safe-area-inset-top, 0px)) 1.25rem max(1rem, env(safe-area-inset-bottom, 0px)) 4.25rem;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        min-height: 0;
    }
    /* Demo welcome — clean national briefing card (no glow FX) */
    .dt-welcome-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.25rem;
        align-items: stretch;
        max-width: min(52rem, 94vw);
        margin: 0 auto;
        position: relative;
        z-index: 2;
        width: 100%;
        box-sizing: border-box;
        padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.15rem, 3.5vw, 2rem);
        border-radius: 14px;
        background: linear-gradient(165deg, #0e1628 0%, #0a0f1c 100%);
        border: 1px solid rgba(234, 179, 8, 0.22);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
    }
    .dt-welcome-layout::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        border-radius: 16px 16px 0 0;
        background: rgba(253, 224, 71, 0.45);
        pointer-events: none;
    }
    #dt-screen-welcome .dt-welcome-cinematic,
    #dt-screen-welcome .dt-welcome-particles {
        display: none;
    }
    .dt-welcome-col { min-width: 0; }
    .dt-welcome-col--visual {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        text-align: center;
    }
    .dt-welcome-col--copy {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: left;
    }
    @media (min-width: 768px) {
        .dt-welcome-layout {
            grid-template-columns: minmax(10.5rem, 0.95fr) minmax(16rem, 1.35fr);
            gap: 0;
            column-gap: 1.75rem;
        }
        .dt-welcome-col--visual {
            padding-right: 1.65rem;
            border-right: 1px solid rgba(148, 163, 184, 0.14);
        }
        .dt-welcome-col--copy {
            padding-left: 0.15rem;
        }
    }

    /* --- Ambient background --- */
    .dt-welcome-cinematic {
        position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
    }
    .dt-welcome-aura {
        position: absolute; border-radius: 999px; filter: blur(32px); opacity: 0.6;
        animation: dt-aura-drift 4.5s ease-in-out infinite alternate;
    }
    .dt-welcome-aura-a {
        width: 20rem; height: 20rem; top: -4%; left: 4%;
        background: radial-gradient(circle, rgba(56,189,248,0.38), rgba(56,189,248,0));
    }
    .dt-welcome-aura-b {
        width: 22rem; height: 22rem; right: 4%; bottom: -4%;
        background: radial-gradient(circle, rgba(253,224,71,0.32), rgba(253,224,71,0));
        animation-delay: 0.5s;
    }
    .dt-welcome-aura-c {
        width: 14rem; height: 14rem; top: 40%; left: 42%;
        background: radial-gradient(circle, rgba(168,85,247,0.22), rgba(168,85,247,0));
        animation-delay: 1.1s; animation-duration: 5.5s;
    }
    .dt-welcome-rings {
        position: absolute; top: 50%; left: 50%;
        width: 15rem; height: 15rem;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        border: 1px solid rgba(148,163,184,0.12);
        animation: dt-ring-pulse 3s ease-out infinite;
    }
    .dt-welcome-rings::before, .dt-welcome-rings::after {
        content: ""; position: absolute; inset: -1.4rem;
        border-radius: 50%;
        border: 1px solid rgba(56,189,248,0.18);
        animation: dt-ring-pulse 3s ease-out infinite;
    }
    .dt-welcome-rings::after {
        inset: -2.8rem;
        border-color: rgba(253,224,71,0.18);
        animation-delay: 0.6s;
    }
    @keyframes dt-ring-pulse {
        0%   { transform: scale(0.92); opacity: 0.15; }
        60%  { opacity: 0.65; }
        100% { transform: scale(1.12); opacity: 0; }
    }
    @keyframes dt-aura-drift {
        0%   { transform: translate(0,0) scale(0.96); }
        100% { transform: translate(12px,-10px) scale(1.08); }
    }
    .dt-welcome-particles {
        position: absolute; inset: 0; pointer-events: none; overflow: hidden;
    }
    .dt-wp { position: absolute; border-radius: 50%; animation: dt-float linear infinite; }
    @keyframes dt-float {
        0%   { transform: translateY(100vh) scale(0); opacity: 0; }
        10%  { opacity: 1; }
        90%  { opacity: 0.6; }
        100% { transform: translateY(-10vh) scale(1); opacity: 0; }
    }

    /* --- Brand block --- */
    .dt-welcome-brand-block {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.1rem;
        position: relative;
        z-index: 2;
    }
    .dt-welcome-welcome-line {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: #64748b;
        animation: dt-name-in 0.4s 0.05s both;
    }
    .dt-welcome-otr {
        font-size: clamp(1.75rem, 4.5vw, 2.35rem);
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #facc15;
        animation: dt-name-in 0.4s 0.1s both;
        line-height: 1;
        position: relative;
        z-index: 2;
    }
    .dt-welcome-badge {
        font-size: 0.625rem;
        letter-spacing: 0.08em;
        line-height: 1.35;
        text-transform: uppercase;
        color: #475569;
        max-width: 14rem;
        animation: dt-name-in 0.4s 0.15s both;
        position: relative;
        z-index: 2;
    }

    /* --- Divider --- */
    .dt-welcome-divider {
        display: flex;
        align-items: center;
        gap: 0.45rem;
        margin: 0.15rem 0 0.1rem;
        width: min(7.5rem, 72%);
        align-self: center;
        animation: dt-name-in 0.4s 0.2s both;
        position: relative;
        z-index: 2;
    }
    .dt-welcome-divider span {
        flex: 1;
        height: 1px;
        background: rgba(148, 163, 184, 0.28);
    }
    .dt-welcome-divider i {
        color: #64748b;
        font-size: 0.45rem;
        opacity: 0.85;
    }

    /* --- Avatar --- */
    .dt-welcome-avatar-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }
    .dt-welcome-avatar-ring {
        display: none;
    }
    .dt-welcome-avatar {
        width: clamp(4.75rem, 12vw, 6.5rem);
        height: clamp(4.75rem, 12vw, 6.5rem);
        border-radius: 50%;
        background: linear-gradient(145deg, #1e293b, #0f172a);
        border: 2px solid rgba(202, 138, 4, 0.45);
        box-shadow: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(2rem, 6vw, 3rem);
        font-weight: 900;
        color: #fff;
        animation: dt-avatar-in 0.45s 0.35s ease-out both;
        position: relative;
        z-index: 1;
    }
    .dt-welcome-photo {
        display: none;
        width: clamp(4.75rem, 12vw, 6.5rem);
        height: clamp(4.75rem, 12vw, 6.5rem);
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid rgba(202, 138, 4, 0.45);
        box-shadow: none;
        animation: dt-avatar-in 0.45s 0.35s ease-out both;
        position: relative;
        z-index: 1;
    }
    @keyframes dt-avatar-in {
        0%   { transform: scale(0.94); opacity: 0; }
        100% { transform: scale(1); opacity: 1; }
    }
    .dt-welcome-demo-title {
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #64748b;
        margin: 0.2rem 0 0;
        max-width: 12rem;
        line-height: 1.35;
        position: relative;
        z-index: 2;
        animation: dt-name-in 0.4s 0.35s both;
    }

    /* --- Copy column --- */
    @keyframes dt-name-in {
        0%   { opacity: 0; transform: translateY(6px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    .dt-welcome-greeting {
        font-size: 0.6875rem;
        font-weight: 800;
        color: #eab308;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        animation: dt-name-in 0.4s 0.12s both;
        position: relative;
        z-index: 2;
        margin-bottom: 0.2rem;
    }
    .dt-welcome-name {
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: 800;
        color: #f8fafc;
        letter-spacing: -0.025em;
        line-height: 1.12;
        animation: dt-name-in 0.4s 0.18s both;
        position: relative;
        z-index: 2;
        text-shadow: none;
        word-break: break-word;
    }
    #dt-screen-welcome .dt-welcome-name {
        text-shadow: none;
    }
    .dt-welcome-tag {
        font-size: 0.78rem;
        color: #94a3b8;
        animation: dt-name-in 0.5s 0.6s both;
        position: relative;
        z-index: 2;
        display: none;
    }
    .dt-welcome-sub {
        font-size: 0.8125rem;
        color: #eab308;
        font-weight: 600;
        animation: dt-name-in 0.4s 0.24s both;
        position: relative;
        z-index: 2;
        margin-top: 0.2rem;
    }
    .dt-welcome-status {
        margin-top: 0.75rem;
        animation: dt-name-in 0.4s 0.3s both;
    }
    .dt-welcome-countdown {
        display: inline-flex;
        align-items: baseline;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.35rem 0.5rem;
        min-height: 2.25rem;
        padding: 0.55rem 0.85rem;
        border-radius: 10px;
        background: rgba(15, 23, 42, 0.72);
        border: 1px solid rgba(148, 163, 184, 0.22);
        box-sizing: border-box;
        width: 100%;
        max-width: 22rem;
        position: relative;
        z-index: 2;
    }
    .dt-welcome-cd-label {
        font-size: 0.8125rem;
        font-weight: 600;
        color: #cbd5e1;
        letter-spacing: 0.02em;
    }
    .dt-welcome-cd-label--go {
        color: #facc15;
        font-weight: 700;
    }
    .dt-welcome-cd-num {
        display: inline;
        color: #f8fafc;
        font-size: clamp(1.35rem, 2.5vw, 1.65rem);
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        letter-spacing: -0.02em;
    }
    .dt-welcome-countdown--live .dt-welcome-cd-label {
        color: #e2e8f0;
        font-weight: 600;
    }
    .dt-welcome-inspire {
        max-width: 100%;
        margin: 0.65rem 0 0;
        color: #cbd5e1;
        font-size: 0.8125rem;
        line-height: 1.58;
        animation: dt-name-in 0.4s 0.36s both;
        position: relative;
        z-index: 2;
        border-left: 3px solid rgba(234, 179, 8, 0.55);
        padding-left: 0.8rem;
    }
    @media (max-width: 767px) {
        .dt-welcome-col--copy { text-align: center; align-items: center; }
        .dt-welcome-inspire {
            border-left: none;
            padding-left: 0;
            text-align: center;
        }
        .dt-welcome-countdown {
            justify-content: center;
            max-width: 100%;
        }
        .dt-welcome-status { width: 100%; display: flex; justify-content: center; }
    }
    .dt-welcome-pill-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem 0.45rem;
        margin-top: 0.75rem;
        width: 100%;
        max-width: 100%;
        animation: dt-name-in 0.4s 0.42s both;
    }
    @media (min-width: 768px) {
        .dt-welcome-pill-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.35rem 0.5rem;
        }
    }
    .dt-welcome-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.42rem 0.72rem;
        border-radius: 8px;
        border: 1px solid rgba(148, 163, 184, 0.26);
        background: rgba(30, 41, 59, 0.45);
        color: #e2e8f0;
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
    .dt-welcome-pill i { font-size: 0.62rem; color: #eab308; opacity: 1; }
    .dt-welcome-cls-note {
        font-size: 0.6875rem;
        color: #475569;
        margin-top: 0.55rem;
        letter-spacing: 0.04em;
        animation: dt-name-in 0.4s 0.48s both;
    }
    /* Demo test: briefing screen */
    #dt-screen-briefing { gap:1.25rem; padding-left:4.6rem; }
    .dt-brief-card {
        background:rgba(15,23,42,0.85); border:1px solid rgba(253,224,71,0.2);
        border-radius:20px; padding:1.75rem 1.85rem;
        width:min(28rem,92vw); backdrop-filter:blur(12px);
    }
    .dt-brief-title {
        font-size:1rem; font-weight:900; color:#fde047;
        letter-spacing:0.1em; text-transform:uppercase; margin-bottom:1rem;
    }
    .dt-brief-row {
        display:flex; justify-content:space-between; align-items:center;
        padding:0.5rem 0; border-bottom:1px solid rgba(148,163,184,0.1);
        font-size:0.82rem;
    }
    .dt-brief-row:last-child { border-bottom:none; }
    .dt-brief-row span { color:#64748b; }
    .dt-brief-row strong { color:#e2e8f0; font-weight:700; }
    .dt-tag { padding:0.18rem 0.5rem; border-radius:6px; font-size:0.7rem; font-weight:800; }
    .dt-tag-red { background:rgba(239,68,68,0.15); color:#fca5a5; border:1px solid rgba(239,68,68,0.25); }
    .dt-tag-green { background:rgba(34,197,94,0.12); color:#86efac; border:1px solid rgba(34,197,94,0.22); }
    .dt-warning-box {
        background:rgba(234,179,8,0.08); border:1px solid rgba(253,224,71,0.22);
        border-radius:12px; padding:0.7rem 0.9rem;
        font-size:0.77rem; color:#fde047; line-height:1.5; width:min(28rem,92vw);
    }
    .dt-warning-box--integrity {
        background:rgba(239,68,68,0.08);
        border-color:rgba(248,113,113,0.35);
        color:#fecaca;
    }
    #dt-start-btn {
        padding:0.85rem 2.4rem; border-radius:12px; border:none;
        background:linear-gradient(135deg,#fef9c3,#fde047,#eab308);
        color:#0a0c1a; font-size:0.95rem; font-weight:900;
        letter-spacing:0.06em; cursor:pointer;
        box-shadow:0 4px 0 #a16207, 0 8px 20px rgba(234,179,8,0.3);
        transition:transform 0.15s;
    }
    #dt-start-btn:hover { transform:translateY(-2px); }
    /* Demo test: test screen */
    #dt-screen-test {
        padding: 0 !important;
        flex: 1 1 auto;
        min-height: 0;
        max-height: 100%;
        overflow: hidden;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        box-sizing: border-box;
        background: #0a0e17;
        font-family: "Inter", system-ui, -apple-system, sans-serif;
        -webkit-font-smoothing: antialiased;
    }
    /* Test UI: top bar */
    .dt-test-topbar {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 0.52rem 1.15rem 0.5rem;
        padding-right: max(1.15rem, calc(min(52vw, 11.5rem) + 1.5rem));
        border-bottom: 1px solid rgba(148, 163, 184, 0.14);
        background: #0c1222;
        gap: 0.85rem;
    }
    .dt-integrity-bar {
        flex-shrink:0;
        display:flex; align-items:center; gap:0.55rem;
        padding:0.42rem 1.35rem 0.42rem 4.6rem;
        border-bottom:1px solid rgba(74,222,128,0.18);
        background:linear-gradient(90deg, rgba(6,78,59,0.35), rgba(2,6,23,0.92));
        color:#86efac;
        font-size:0.72rem;
        font-weight:700;
        letter-spacing:0.02em;
        transition:background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
    }
    .dt-integrity-bar__icon { opacity:0.9; font-size:0.82rem; }
    .dt-integrity-bar__text { flex:1 1 auto; line-height:1.35; }
    .dt-integrity-bar__badge {
        flex-shrink:0;
        padding:0.18rem 0.55rem;
        border-radius:999px;
        background:rgba(248,113,113,0.18);
        border:1px solid rgba(248,113,113,0.45);
        color:#fecaca;
        font-size:0.62rem;
        font-weight:900;
        letter-spacing:0.08em;
        text-transform:uppercase;
    }
    .dt-integrity-bar--alert {
        border-bottom-color: rgba(248, 113, 113, 0.4);
        background: rgba(69, 10, 10, 0.92);
        color: #fecaca;
    }
    #otr-demo-overlay.otr-demo-overlay--integrity-alert {
        box-shadow: inset 0 0 0 2px rgba(248, 113, 113, 0.55);
    }
    #otr-demo-overlay.otr-demo-overlay--integrity-flash {
        animation: dt-integrity-overlay-flash 0.45s ease-out 2;
    }
    @keyframes dt-integrity-overlay-flash {
        0%, 100% { box-shadow: inset 0 0 0 2px rgba(248, 113, 113, 0.5); }
        50% { box-shadow: inset 0 0 0 3px rgba(239, 68, 68, 0.85); }
    }
    #dt-screen-test.dt-screen--protected,
    #dt-screen-test.dt-screen--protected * {
        -webkit-user-select:none;
        user-select:none;
        -webkit-touch-callout:none;
    }
    #dt-screen-test.dt-screen--protected input,
    #dt-screen-test.dt-screen--protected textarea {
        -webkit-user-select:text;
        user-select:text;
    }
    .dt-test-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        flex: 0 1 auto;
        max-width: min(100%, 28rem);
        text-align: center;
    }
    .dt-test-logo {
        font-size: 1.0625rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        color: #facc15;
        line-height: 1.2;
        white-space: nowrap;
    }
    .dt-test-subject-pill {
        padding: 0.28rem 0.72rem;
        border-radius: 6px;
        background: rgba(15, 23, 42, 0.65);
        border: 1px solid rgba(148, 163, 184, 0.22);
        color: #cbd5e1;
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        line-height: 1.2;
        white-space: nowrap;
    }
    .dt-autosave-hint {
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: rgba(110, 231, 183, 0);
        margin-left: 0.4rem;
        transition: color 0.22s ease;
        white-space: nowrap;
    }
    .dt-autosave-hint--visible {
        color: #34d399;
    }
    /* Test UI: timer */
    .dt-timer-wrap {
        position: absolute;
        right: 1.15rem;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 0;
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 0.55rem;
        row-gap: 0.08rem;
        align-items: center;
        background: #111827;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 10px;
        padding: 0.45rem 0.9rem 0.42rem 0.75rem;
        box-shadow: none;
        position: relative;
        z-index: 12;
        max-width: min(52vw, 11.5rem);
    }
    .dt-timer-label {
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        color: #94a3b8;
        text-transform: uppercase;
        line-height: 1;
        grid-column: 2;
    }
    .dt-timer-icon {
        font-size: 0.875rem;
        color: #64748b;
        grid-row: 1 / span 2;
        align-self: center;
    }
    #dt-screen-test .dt-timer {
        grid-column: 2;
    }
    .dt-timer {
        font-size: 1.375rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        color: #f8fafc;
        letter-spacing: 0.04em;
        font-family: "Inter", ui-monospace, monospace;
        line-height: 1;
    }
    .dt-timer-amber { color: #fbbf24 !important; }
    .dt-timer-red { color: #f87171 !important; }
    .dt-timer-wrap.dt-timer-red {
        border-color: rgba(248, 113, 113, 0.35);
        background: rgba(69, 10, 10, 0.45);
    }
    .dt-timer-wrap--idle {
        border-color: rgba(202, 138, 4, 0.35);
    }
    .dt-timer-wrap--idle .dt-timer-label {
        color: #ca8a04;
        font-size: 0.5625rem;
        letter-spacing: 0.05em;
        line-height: 1.2;
    }
    .dt-timer-idle {
        color: #94a3b8;
        font-size: 1.15rem;
    }
    /* Test UI: progress bar */
    .dt-progress-track {
        height: 3px;
        background: rgba(148, 163, 184, 0.12);
        flex-shrink: 0;
        position: relative;
        overflow: hidden;
    }
    #dt-progress-bar {
        height: 100%;
        position: relative;
        background: linear-gradient(90deg, #ca8a04 0%, #facc15 100%);
        transition: width 0.35s ease-out;
    }
    #dt-progress-bar::after {
        display: none;
    }
    /* Test UI: question header strip */
    .dt-q-meta-bar {
        flex-shrink: 0;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 0.65rem;
        padding: 0.35rem 1.15rem 0.1rem;
        min-height: 1.75rem;
        direction: ltr;
        unicode-bidi: isolate;
    }
    .dt-q-meta-start {
        grid-column: 1;
        display: flex;
        align-items: center;
        gap: 0.65rem;
        min-width: 0;
        justify-self: start;
    }
    .dt-q-meta-end {
        grid-column: 3;
        display: flex;
        align-items: center;
        gap: 0.65rem;
        min-width: 0;
        justify-self: end;
    }
    .dt-q-counter {
        grid-column: 2;
        justify-self: center;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #64748b;
        white-space: nowrap;
        text-align: center;
        max-width: min(100%, 14rem);
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .dt-q-counter--urdu {
        text-transform: none;
        letter-spacing: 0.02em;
        font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif;
        font-size: 0.82rem;
        direction: rtl;
        unicode-bidi: isolate;
    }
    .dt-q-counter strong {
        color: #e2e8f0;
        font-weight: 800;
    }
    .dt-q-answered {
        font-size: 0.6875rem;
        font-weight: 600;
        color: #4ade80;
    }
    .dt-q-meta-bar--urdu .dt-q-answered {
        font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif;
        font-size: 0.78rem;
        text-transform: none;
    }
    #dt-screen-welcome.dt-screen-welcome--urdu .dt-welcome-col--copy,
    #dt-screen-welcome.dt-screen-welcome--urdu .dt-welcome-brand-block {
        font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif;
    }
    .dt-diff-badge {
        padding:0.2rem 0.55rem; border-radius:20px; font-size:0.62rem; font-weight:800;
        letter-spacing:0.06em; text-transform:uppercase;
    }
    .dt-diff-easy   { background:rgba(74,222,128,0.12); color:#4ade80; border:1px solid rgba(74,222,128,0.25); }
    .dt-diff-medium { background:rgba(251,191,36,0.12); color:#fbbf24; border:1px solid rgba(251,191,36,0.25); }
    .dt-diff-hard   { background:rgba(248,113,113,0.12); color:#f87171; border:1px solid rgba(248,113,113,0.25); }
    .dt-flag-btn {
        margin-left: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.28rem 0.6rem;
        border-radius: 6px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        background: rgba(15, 23, 42, 0.5);
        color: #64748b;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        transition: border-color 0.15s, color 0.15s, background 0.15s;
        user-select: none;
    }
    .dt-flag-btn i { font-size: 0.72rem; }
    .dt-flag-btn:hover {
        border-color: rgba(148, 163, 184, 0.4);
        color: #94a3b8;
        background: rgba(30, 41, 59, 0.65);
    }
    .dt-flag-btn.dt-flagged {
        border-color: rgba(250, 204, 21, 0.45);
        color: #facc15;
        background: rgba(250, 204, 21, 0.08);
    }
    /* Test UI: question card */
    .dt-test-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        padding: 0.35rem 1.15rem 0.4rem;
        gap: 0.4rem;
        -webkit-overflow-scrolling: touch;
    }
    .dt-q-card {
        background: #111827;
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 10px;
        padding: 0.65rem 0.85rem;
        box-shadow: none;
        flex: 0 0 auto;
        position: relative;
        width: 100%;
        box-sizing: border-box;
    }
    .dt-q-card::before {
        content: "";
        position: absolute;
        top: 0.55rem;
        bottom: 0.55rem;
        left: 0;
        width: 3px;
        background: #facc15;
        border-radius: 0 3px 3px 0;
    }
    .dt-q-card--urdu::before {
        left: auto;
        right: 0;
        border-radius: 3px 0 0 3px;
    }
    #dt-q-text {
        display: block;
        width: 100%;
        min-width: 0;
        font-size: clamp(0.9375rem, 2.1vw, 1.0625rem);
        font-weight: 600;
        line-height: 1.35;
        color: #f1f5f9;
        margin: 0;
        min-height: 2.875rem;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
        word-wrap: break-word;
        word-break: break-word;
    }
    /* Test UI: answer options — one option per line */
    #dt-screen-test #dt-options {
        flex: 0 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 0.4rem;
        align-content: start;
        padding-bottom: 0;
    }
    /* Urdu: options align under RTL question ? letters on the right, text reads RTL */
    #dt-options.dt-options--urdu .dt-opt-btn {
        flex-direction: row-reverse;
        justify-content: flex-start;
        text-align: right;
    }
    #dt-options.dt-options--urdu .dt-opt-text {
        text-align: right;
    }
    #dt-options.dt-options--urdu .dt-opt-letter {
        direction: ltr;
        unicode-bidi: isolate;
    }
    #dt-options.dt-options--urdu .dt-opt-btn::before {
        background: linear-gradient(270deg, rgba(253,224,71,0) 0%, rgba(253,224,71,0.05) 100%);
    }
    #dt-screen-test .dt-opt-btn {
        width: 100%;
        height: auto;
        min-height: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        background: #0c1222;
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-radius: 8px;
        padding: 0.5rem 0.6rem;
        cursor: pointer;
        text-align: left;
        transition: border-color 0.16s, background 0.16s;
        position: relative;
        box-sizing: border-box;
    }
    .dt-opt-btn::before {
        display: none;
    }
    .dt-opt-btn:hover {
        border-color: rgba(148, 163, 184, 0.38);
        background: #111827;
    }
    #dt-screen-test .dt-opt-btn.dt-opt-selected,
    #dt-screen-test .dt-opt-btn.dt-opt-selected:hover {
        border-color: #22c55e;
        background: rgba(34, 197, 94, 0.14);
        box-shadow: inset 3px 0 0 #22c55e;
        animation: dt-opt-pick 0.22s ease-out;
    }
    #dt-screen-test #dt-options.dt-options--urdu .dt-opt-btn.dt-opt-selected {
        box-shadow: inset -3px 0 0 #22c55e;
    }
    @keyframes dt-opt-pick {
        0%   { transform: scale(0.985); }
        100% { transform: scale(1); }
    }
    #dt-screen-test .dt-opt-letter {
        flex-shrink: 0;
        width: 1.625rem;
        height: 1.625rem;
        border-radius: 6px;
        background: rgba(15, 23, 42, 0.85);
        border: 1px solid rgba(148, 163, 184, 0.25);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        font-weight: 800;
        color: #94a3b8;
        letter-spacing: 0.02em;
        transition: background 0.16s, color 0.16s, border-color 0.16s;
    }
    .dt-opt-btn:hover .dt-opt-letter {
        border-color: rgba(148, 163, 184, 0.45);
        color: #cbd5e1;
    }
    #dt-screen-test .dt-opt-btn.dt-opt-selected .dt-opt-letter {
        background: #22c55e;
        color: #052e16;
        border-color: #22c55e;
        box-shadow: none;
    }
    .dt-opt-check {
        flex-shrink: 0;
        margin-left: auto;
        width: 1.25rem;
        height: 1.25rem;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.625rem;
        color: #052e16;
        background: #22c55e;
        opacity: 0;
        transform: scale(0.6);
        transition: opacity 0.16s ease, transform 0.16s ease;
    }
    .dt-opt-btn.dt-opt-selected .dt-opt-check {
        opacity: 1;
        transform: scale(1);
    }
    .dt-opt-text {
        font-size: clamp(0.9375rem, 2.1vw, 1.0625rem);
        font-weight: 500;
        color: #cbd5e1;
        line-height: 1.45;
        flex: 1;
        transition: color 0.16s;
    }
    #dt-screen-test .dt-opt-text {
        font-size: clamp(0.8125rem, 1.85vw, 0.9375rem);
        line-height: 1.35;
    }
    .dt-opt-btn:hover .dt-opt-text { color: #e2e8f0; }
    .dt-opt-btn.dt-opt-selected .dt-opt-text {
        color: #f8fafc;
        font-weight: 600;
    }
    /* Locked option: immutable after NEXT is pressed */
    .dt-opt-btn.dt-opt-locked {
        opacity:0.58; cursor:not-allowed; pointer-events:none;
        border-color:rgba(148,163,184,0.10);
    }
    .dt-opt-btn.dt-opt-locked:hover {
        border-color: rgba(148, 163, 184, 0.1);
        background: #0c1222;
    }
    #dt-screen-test .dt-opt-btn.dt-opt-selected.dt-opt-locked {
        opacity: 0.85;
        border-color: rgba(34, 197, 94, 0.55);
        background: rgba(34, 197, 94, 0.1);
        animation: none;
    }
    #dt-screen-test .dt-opt-btn.dt-opt-selected.dt-opt-locked .dt-opt-letter {
        background: rgba(34, 197, 94, 0.75);
        color: #052e16;
        border-color: rgba(34, 197, 94, 0.75);
    }
    /* Lock badge shown in question header */
    .dt-lock-badge {
        display:inline-flex; align-items:center; gap:0.28rem;
        font-size:0.68rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase;
        color:#64748b; background:rgba(100,116,139,0.10);
        border:1px solid rgba(100,116,139,0.22); border-radius:5px;
        padding:0.14rem 0.48rem; line-height:1.5;
        user-select:none;
    }
    /* Test UI: footer nav */
    .dt-test-footer {
        flex-shrink: 0;
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        column-gap: 0.75rem;
        padding: 0.42rem 1.15rem max(0.5rem, env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(148, 163, 184, 0.14);
        background: #0c1222;
        position: relative;
        z-index: 2;
    }
    .dt-footer-left { justify-self:start; }
    .dt-footer-center {
        justify-self:center;
        display:flex;
        align-items:center;
        justify-content:center;
        gap:0.55rem;
        min-width:min(22rem, 92vw);
    }
    .dt-footer-right { justify-self:end; width:100%; max-width:11.5rem; }
    .dt-nav-btn {
        padding: 0.62rem 1.2rem;
        border-radius: 8px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        background: #111827;
        color: #94a3b8;
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        transition: border-color 0.15s, color 0.15s, background 0.15s;
    }
    .dt-nav-btn:hover:not(:disabled) {
        border-color: rgba(148, 163, 184, 0.45);
        color: #e2e8f0;
        background: #1e293b;
    }
    .dt-nav-btn:disabled { opacity: 0.28; cursor: default; }
    .dt-nav-btn.dt-next-ready {
        border-color: rgba(250, 204, 21, 0.55);
        color: #facc15;
        background: rgba(250, 204, 21, 0.08);
        box-shadow: none;
    }
    .dt-submit-btn {
        padding: 0.62rem 1.35rem;
        border-radius: 8px;
        border: 1px solid #ca8a04;
        background: #facc15;
        color: #0f172a;
        font-size: 0.8125rem;
        font-weight: 800;
        letter-spacing: 0.02em;
        cursor: pointer;
        display: none;
        align-items: center;
        gap: 0.5rem;
        box-shadow: none;
        transition: background 0.15s, border-color 0.15s;
    }
    .dt-submit-btn:hover {
        background: #fde047;
        border-color: #eab308;
    }
    .dt-submit-btn:active { background: #eab308; }
    #dt-screen-test.dt-screen-test--urdu .dt-btn-urdu-text,
    #dt-screen-test.dt-screen-test--urdu .dt-nav-btn--urdu,
    #dt-screen-test.dt-screen-test--urdu .dt-submit-btn--urdu {
        font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.35;
    }
    #dt-screen-test.dt-screen-test--urdu .dt-nav-btn--urdu {
        font-size: 0.95rem;
        padding: 0.52rem 1.05rem;
    }
    #dt-screen-test.dt-screen-test--urdu .dt-submit-btn--urdu {
        font-size: inherit;
        padding: 0.5rem 1rem;
        gap: 0.45rem;
    }
    #dt-screen-test.dt-screen-test--urdu .dt-submit-btn--urdu .dt-btn-urdu-text {
        font-size: 1.02rem;
        font-weight: 700;
        display: inline-block;
        padding-bottom: 0.12rem;
    }
    #dt-screen-test.dt-screen-test--urdu .dt-test-subject-pill {
        font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
        text-transform: none;
        letter-spacing: 0.02em;
        font-size: 0.88rem;
        font-weight: 600;
    }
    #dt-screen-test.dt-screen-test--urdu .dt-timer-label {
        font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
        text-transform: none;
        letter-spacing: 0.02em;
        font-size: 0.72rem;
        font-weight: 600;
        line-height: 1.35;
    }
    #dt-screen-test.dt-screen-test--urdu .dt-palette-label,
    #dt-screen-test.dt-screen-test--urdu .dt-palette-hint {
        font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
        text-transform: none;
        letter-spacing: 0.02em;
    }
    #dt-screen-test.dt-screen-test--urdu .dt-palette-label {
        font-size: 0.82rem;
        font-weight: 700;
    }
    #dt-screen-test.dt-screen-test--urdu .dt-palette-hint {
        font-size: 0.78rem;
        line-height: 1.55;
    }
    #dt-screen-test.dt-screen-test--urdu .dt-flag-btn {
        font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
        text-transform: none;
        letter-spacing: 0.02em;
        font-size: 0.82rem;
        font-weight: 700;
    }
    #dt-screen-test.dt-screen-test--urdu .dt-lock-badge {
        font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
        font-size: 0.78rem;
    }
    #dt-screen-test.dt-screen-test--urdu .dt-integrity-bar__text,
    #dt-screen-test.dt-screen-test--urdu .dt-integrity-bar__badge {
        font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
        text-transform: none;
        letter-spacing: 0.02em;
        font-weight: 600;
    }
    #dt-screen-test.dt-screen-test--urdu .dt-autosave-hint {
        font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
        text-transform: none;
        letter-spacing: 0.02em;
        font-size: 0.72rem;
    }
    /* Test UI: question palette */
    #dt-screen-test .dt-palette-legend {
        display: none;
    }
    #dt-palette-wrap {
        flex-shrink: 0;
        padding: 0.28rem 1.15rem 0.35rem;
        border-top: 1px solid rgba(148, 163, 184, 0.12);
        background: #0c1222;
        position: relative;
        z-index: 2;
    }
    .dt-palette-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.15rem;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .dt-palette-label {
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #64748b;
    }
    .dt-palette-legend {
        display: flex;
        gap: 0.65rem;
        font-size: 0.625rem;
        font-weight: 600;
        color: #64748b;
    }
    .dt-pal-leg { display:flex; align-items:center; gap:0.25rem; }
    .dt-pal-dot {
        width:0.5rem; height:0.5rem; border-radius:50%;
    }
    .dt-pal-dot-done   { background:#4ade80; }
    .dt-pal-dot-flag   { background:#fde047; }
    .dt-pal-dot-skip   { background:#334155; }
    .dt-palette-hint {
        margin: 0 0 0.3rem;
        font-size: 0.625rem;
        font-weight: 500;
        line-height: 1.35;
        color: #64748b;
    }
    #dt-palette { display: flex; flex-wrap: wrap; gap: 0.35rem; }
    .dt-palette-toggle { display: none; }
    .dt-pq {
        width: 2rem;
        height: 2rem;
        border-radius: 6px;
        border: 1px solid transparent;
        font-size: 0.6875rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.12s, background 0.12s;
    }
    .dt-pq:hover { border-color: rgba(148, 163, 184, 0.35); }
    .dt-pq-unanswered {
        background: rgba(15, 23, 42, 0.85);
        border-color: rgba(148, 163, 184, 0.2);
        color: #64748b;
    }
    .dt-pq-answered {
        background: rgba(34, 197, 94, 0.12);
        border-color: rgba(34, 197, 94, 0.35);
        color: #4ade80;
    }
    .dt-pq-flagged {
        background: rgba(250, 204, 21, 0.1);
        border-color: rgba(250, 204, 21, 0.38);
        color: #facc15;
    }
    .dt-pq-current {
        border-color: #facc15;
        outline: 2px solid rgba(250, 204, 21, 0.35);
        outline-offset: 1px;
        box-shadow: none;
    }
    /* Demo test: result screen ? scrollable, top-aligned so tall content is not cropped */
    #dt-screen-result {
        justify-content: flex-start;
        align-items: center;
        padding: 3.4rem 1rem 1.25rem;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 0.85rem;
        min-height: 0;
    }
    /* Wide viewports: card no longer reaches the fixed close button, so reclaim the top gutter */
    @media (min-width: 1280px) {
        #dt-screen-result { padding-top: 1.5rem; }
    }
    .dt-result-body {
        width: 100%;
        max-width: min(72rem, calc(100vw - 2rem));
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .dt-result-layout {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        align-items: stretch;
        border-radius: 22px;
        overflow: hidden;
        background:
            radial-gradient(ellipse 55% 80% at 0% 0%, rgba(250,204,21,0.07), transparent 60%),
            radial-gradient(ellipse 45% 70% at 100% 100%, rgba(22,163,74,0.06), transparent 60%),
            linear-gradient(160deg, #0b1124 0%, #060914 55%, #04060f 100%);
        border: 1px solid rgba(253,224,71,0.16);
        box-shadow: 0 30px 90px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03) inset;
        color: #e2e8f0;
    }
    .dt-result-layout::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, transparent, #eab308 18%, #fde047 50%, #eab308 82%, transparent);
        pointer-events: none;
        z-index: 2;
    }
    .dt-result-layout--error {
        max-width: 42rem;
        margin: 0 auto;
    }

    /* --- BRAND HEADER --- */
    .dt-rc-brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.95rem 1.5rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        background: linear-gradient(90deg, rgba(253,224,71,0.07), rgba(255,255,255,0.01) 45%, rgba(22,163,74,0.06));
    }
    .dt-rc-brand-id {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        min-width: 0;
    }
    .dt-rc-logo {
        flex-shrink: 0;
        display: block;
        width: 3rem;
        height: 3rem;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 0 0 1px rgba(253,224,71,0.4), 0 6px 22px rgba(250,204,21,0.2);
    }
    .dt-rc-logo img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .dt-rc-brand-text { min-width: 0; }
    .dt-rc-brand-name {
        font-size: 1.15rem;
        font-weight: 900;
        letter-spacing: 0.06em;
        color: #fde047;
        line-height: 1.1;
    }
    .dt-rc-brand-name span {
        margin-left: 0.5rem;
        color: #f8fafc;
        font-size: 0.92rem;
        font-weight: 700;
        letter-spacing: 0.01em;
    }
    .dt-rc-brand-tag {
        margin-top: 0.25rem;
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #94a3b8;
    }
    .dt-rc-brand-meta {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.5rem;
    }
    .dt-rc-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.35rem 0.75rem;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.1);
        background: rgba(15,23,42,0.7);
        font-size: 0.68rem;
        font-weight: 700;
        color: #cbd5e1;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    .dt-rc-chip i { color: #fde047; }
    .dt-rc-chip--live {
        border-color: rgba(74,222,128,0.35);
        background: rgba(22,163,74,0.12);
        color: #bbf7d0;
    }
    .dt-rc-chip--live i { color: #4ade80; }

    /* --- HORIZONTAL GRID --- */
    .dt-rc-grid {
        display: grid;
        grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
    }
    .dt-rc-kicker {
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: #64748b;
    }
    /* Result screen — Urdu medium copy */
    #dt-screen-result .dt-ur {
        font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
        letter-spacing: 0;
        text-transform: none;
        font-weight: 600;
        line-height: 1.9;
    }
    #dt-screen-result .dt-rc-kicker .dt-ur,
    #dt-screen-result .dt-stat-label .dt-ur,
    #dt-screen-result .dt-panel-eyebrow .dt-ur,
    #dt-screen-result .dt-score-cap .dt-ur {
        font-size: 1.25em;
        line-height: 1.6;
    }
    #dt-screen-result .dt-result-trajectory .dt-ur,
    #dt-screen-result .dt-panel-rank-text .dt-ur,
    #dt-screen-result .dt-panel-rank-note .dt-ur,
    #dt-screen-result .dt-signal-list .dt-ur,
    #dt-screen-result .dt-result-email-warn .dt-ur,
    #dt-screen-result .dt-result-email-success .dt-ur,
    #dt-screen-result .dt-result-integrity-notice .dt-ur,
    #dt-screen-result .dt-result-loading .dt-ur {
        display: block;
        text-align: right;
    }

    /* --- LEFT: identity + score --- */
    .dt-rc-hero {
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 1.1rem;
        padding: 1.4rem 1.4rem 1.3rem;
        border-right: 1px solid rgba(255,255,255,0.06);
        background:
            radial-gradient(circle at 50% 50%, rgba(250,204,21,0.1), transparent 60%),
            rgba(255,255,255,0.012);
    }
    .dt-rc-hero::after {
        content: "";
        position: absolute;
        right: -3.5rem;
        bottom: -3.5rem;
        width: 13rem;
        height: 13rem;
        border-radius: 50%;
        background: url("assets/otr-brand/otr-logo-mark-256.webp?v=20261025-brand") center / contain no-repeat;
        opacity: 0.07;
        mix-blend-mode: screen;
        pointer-events: none;
    }
    .dt-rc-hero > * {
        position: relative;
        z-index: 1;
    }
    .dt-rc-person {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        min-width: 0;
    }
    .dt-rc-person-text { min-width: 0; }
    .dt-rc-score {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.25rem;
    }
    .dt-score-ring-wrap {
        position: relative;
        width: 5rem;
        height: 5rem;
        flex-shrink: 0;
    }
    .dt-score-ring {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
        display: block;
        filter: drop-shadow(0 0 10px rgba(250,204,21,0.22));
    }
    .dt-score-ring-fill {
        transition: stroke-dasharray 1.3s cubic-bezier(0.22,1,0.36,1);
    }
    .dt-score-center {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .dt-score-num {
        font-size: 1.3rem;
        font-weight: 900;
        color: #fff;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        letter-spacing: -0.02em;
    }
    .dt-score-pct {
        font-size: 0.6rem;
        color: #94a3b8;
        font-weight: 700;
        margin-top: 0.1rem;
    }
    .dt-score-cap {
        margin-top: 0.05rem;
        font-size: 0.45rem;
        font-weight: 800;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: #64748b;
    }
    .dt-rc-grade-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    .dt-result-grade {
        width: 3.4rem;
        height: 3.4rem;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: 900;
        letter-spacing: -0.02em;
        box-shadow: 0 8px 22px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.12) inset;
    }
    .dt-grade-gold   { background: linear-gradient(135deg, #fde047, #eab308); color: #0a0c1a; }
    .dt-grade-green  { background: linear-gradient(135deg, #4ade80, #16a34a); color: #fff; }
    .dt-grade-blue   { background: linear-gradient(135deg, #38bdf8, #0284c7); color: #fff; }
    .dt-grade-yellow { background: linear-gradient(135deg, #fbbf24, #d97706); color: #0a0c1a; }
    .dt-grade-red    { background: linear-gradient(135deg, #ff4d4d, #ef4444); color: #fff; }

    /* --- AVATAR --- */
    .dt-result-avatar-wrap {
        flex-shrink: 0;
        width: 10.5rem;
        height: 10.5rem;
        padding: 3px;
        border-radius: 50%;
        box-sizing: border-box;
        background: conic-gradient(from 210deg, #fde047, #eab308, #16a34a, #fde047);
        box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 22px rgba(250,204,21,0.18);
    }
    .dt-result-avatar {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        border-radius: 50%;
        background: linear-gradient(135deg, #1e3a5f, #1e40af);
        border: 3px solid #060914;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.8rem;
        font-weight: 900;
        color: #fff;
    }
    .dt-result-photo {
        display: block;
        object-fit: cover;
        border-radius: 50%;
    }
    .dt-result-name {
        margin-top: 0.2rem;
        font-size: 1.3rem;
        font-weight: 900;
        color: #f8fafc;
        line-height: 1.15;
        letter-spacing: 0.01em;
        overflow-wrap: anywhere;
    }
    .dt-result-sub {
        font-size: 0.78rem;
        color: #94a3b8;
        margin-top: 0.25rem;
        font-weight: 600;
    }

    /* --- RIGHT: analytics + actions --- */
    .dt-rc-main {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
        padding: 1.3rem 1.5rem 1.25rem;
        min-width: 0;
    }

    /* --- STATS ROW --- */
    .dt-result-stats {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.65rem;
    }
    .dt-stat-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        padding: 0.8rem 0.95rem 0.75rem;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.07);
        background: linear-gradient(160deg, rgba(30,41,59,0.55), rgba(15,23,42,0.35));
        overflow: hidden;
        transition: border-color 0.2s, transform 0.2s;
    }
    .dt-stat-card::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: currentColor;
        opacity: 0.85;
    }
    .dt-stat-card:hover {
        border-color: rgba(253,224,71,0.25);
        transform: translateY(-1px);
    }
    .dt-stat-icon {
        font-size: 0.8rem;
        opacity: 0.9;
    }
    .dt-stat-value {
        font-size: 1.55rem;
        font-weight: 900;
        line-height: 1.05;
        font-variant-numeric: tabular-nums;
    }
    .dt-stat-label {
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #64748b;
    }
    .dt-stat-green { color: #4ade80; }
    .dt-stat-red   { color: #ef4444; }
    .dt-stat-amber { color: #fbbf24; }
    .dt-stat-slate { color: #94a3b8; }

    /* --- ANSWER SPLIT BAR --- */
    .dt-rc-split {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }
    .dt-rc-split-head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.75rem;
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #64748b;
    }
    .dt-rc-split-head b {
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: none;
        color: #cbd5e1;
        font-variant-numeric: tabular-nums;
    }
    .dt-rc-split-track {
        height: 0.55rem;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(255,77,77,0.75), rgba(239,68,68,0.85));
        overflow: hidden;
    }
    .dt-rc-split-ok {
        display: block;
        width: 0;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #16a34a, #4ade80);
        box-shadow: 0 0 12px rgba(74,222,128,0.45);
        transition: width 1.2s cubic-bezier(0.22,1,0.36,1);
    }

    /* --- PANELS (Rank + Signal) --- */
    .dt-result-panels {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }
    .dt-panel {
        padding: 0.95rem 1.1rem;
        border-radius: 14px;
        border: 1px solid rgba(255,255,255,0.07);
        background: rgba(15,23,42,0.45);
    }
    .dt-panel-rank {
        border-color: rgba(56,189,248,0.2);
        background: linear-gradient(160deg, rgba(56,189,248,0.08), rgba(15,23,42,0.4));
    }
    .dt-panel-signal {
        border-color: rgba(74,222,128,0.18);
        background: linear-gradient(160deg, rgba(74,222,128,0.07), rgba(15,23,42,0.4));
    }
    .dt-panel-eyebrow {
        font-size: 0.6rem;
        font-weight: 800;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #64748b;
        margin-bottom: 0.7rem;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }
    .dt-panel-eyebrow i { color: #fde047; font-size: 0.55rem; }
    .dt-panel-rank-text {
        font-size: 0.95rem;
        font-weight: 800;
        color: #f1f5f9;
        line-height: 1.4;
        text-transform: capitalize;
    }
    .dt-panel-rank-note {
        font-size: 0.62rem;
        color: #64748b;
        margin-top: 0.45rem;
        font-style: italic;
    }
    .dt-signal-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
    }
    .dt-signal-list li {
        font-size: 0.82rem;
        color: #cbd5e1;
        line-height: 1.4;
        padding-left: 1rem;
        position: relative;
    }
    .dt-signal-list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.5em;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #22c55e;
    }

    /* --- TRAJECTORY MESSAGE --- */
    .dt-result-trajectory {
        margin: 0;
        padding: 0.85rem 1rem;
        border-radius: 14px;
        border: 1px solid rgba(253,224,71,0.16);
        background: rgba(253,224,71,0.045);
    }
    .dt-result-trajectory p {
        margin: 0;
        font-size: 0.82rem;
        color: #cbd5e1;
        line-height: 1.55;
        font-style: italic;
    }
    .dt-result-trajectory i {
        margin-right: 0.45rem;
        color: #fde047;
        font-size: 0.75rem;
    }

    /* --- NOTICES (email + integrity) --- */
    .dt-rc-notices {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }
    .dt-rc-notices > :only-child { grid-column: 1 / -1; }
    .dt-result-email-success {
        margin: 0;
        padding: 0.75rem 0.95rem;
        border-radius: 12px;
        background: rgba(34,197,94,0.12);
        border: 1px solid rgba(34,197,94,0.35);
        color: #bbf7d0;
        font-size: 0.78rem;
        font-weight: 700;
        line-height: 1.45;
    }
    .dt-result-email-warn {
        margin: 0;
        padding: 0.75rem 0.95rem;
        border-radius: 12px;
        background: rgba(251,191,36,0.1);
        border: 1px solid rgba(251,191,36,0.28);
        color: #fde68a;
        font-size: 0.76rem;
        line-height: 1.45;
    }
    .dt-result-integrity-notice {
        margin: 0;
        padding: 0.75rem 0.95rem;
        border-radius: 12px;
        background: rgba(34,197,94,0.08);
        border: 1px solid rgba(34,197,94,0.22);
        color: #86efac;
        font-size: 0.76rem;
        line-height: 1.45;
    }
    .dt-result-email-success i,
    .dt-result-email-warn i,
    .dt-result-integrity-notice i { margin-right: 0.3rem; }
    .dt-result-integrity-notice--flagged {
        background: rgba(239,68,68,0.12);
        border-color: rgba(248,113,113,0.42);
        color: #fecaca;
        animation: dt-integrity-bar-pulse 1.4s ease-in-out infinite alternate;
    }
    .dt-result-loading {
        padding: 3rem 1.5rem;
        text-align: center;
        color: #cbd5e1;
    }
    .dt-result-loading i { font-size: 1.6rem; color: #fde047; margin-bottom: 0.75rem; }
    .dt-result-loading p { margin: 0; font-size: 0.92rem; }

    /* --- CTA SECTION --- */
    .dt-result-cta-section {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        align-items: stretch;
        gap: 0.65rem 0.75rem;
        margin-top: auto;
        padding-top: 0.25rem;
    }
    .dt-result-cta-section .dt-cta-enroll,
    .dt-result-cta-section .dt-cta-retry { max-width: none; }
    .dt-result-cta-section .dt-cta-enroll::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -40%;
        width: 35%;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
        transform: skewX(-18deg);
        animation: dt-cta-sheen 3.6s ease-in-out 1.2s infinite;
        pointer-events: none;
    }
    @keyframes dt-cta-sheen {
        0%, 70% { left: -40%; }
        100% { left: 120%; }
    }
    .dt-cta-enroll {
        width: 100%;
        max-width: 22rem;
        padding: 1rem 1.5rem;
        border-radius: 12px;
        border: none;
        background: linear-gradient(135deg, #fde047 0%, #eab308 100%);
        color: #0a0c1a;
        font-size: 0.92rem;
        font-weight: 900;
        letter-spacing: 0.02em;
        cursor: pointer;
        box-shadow: 0 6px 0 #92400e, 0 12px 32px rgba(234,179,8,0.2);
        transition: transform 0.15s, box-shadow 0.15s;
        position: relative;
        overflow: hidden;
    }
    .dt-cta-enroll::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%);
        opacity: 0;
        transition: opacity 0.2s;
    }
    .dt-cta-enroll:hover {
        transform: translateY(-3px);
        box-shadow: 0 9px 0 #92400e, 0 18px 40px rgba(234,179,8,0.28);
    }
    .dt-cta-enroll:hover::before { opacity: 1; }
    .dt-cta-enroll:active { transform: translateY(0); box-shadow: 0 3px 0 #92400e, 0 6px 16px rgba(234,179,8,0.15); }
    .dt-cta-enroll-text { position: relative; z-index: 1; }
    .dt-cta-enroll i,
    .dt-cta-retry i { margin-right: 0.5rem; }
    .dt-cta-retry {
        width: 100%;
        max-width: 22rem;
        padding: 0.8rem 1.5rem;
        border-radius: 12px;
        border: 1px solid rgba(148,163,184,0.15);
        background: transparent;
        color: #94a3b8;
        font-size: 0.82rem;
        font-weight: 700;
        cursor: pointer;
        transition: border-color 0.2s, color 0.2s, background 0.2s;
    }
    .dt-cta-retry:hover {
        border-color: rgba(253,224,71,0.4);
        color: #f1f5f9;
        background: rgba(253,224,71,0.04);
    }
    .dt-full-test-note {
        grid-column: 1 / -1;
        font-size: 0.64rem;
        color: #64748b;
        text-align: center;
        letter-spacing: 0.02em;
    }

    /* --- RESULT CARD: responsive + motion --- */
    @media (max-width: 899px) {
        .dt-rc-grid { grid-template-columns: minmax(0, 1fr); }
        .dt-rc-hero {
            border-right: 0;
            border-bottom: 1px solid rgba(255,255,255,0.06);
        }
    }
    @media (max-width: 640px) {
        .dt-rc-brand {
            flex-direction: column;
            align-items: flex-start;
            padding: 0.85rem 1rem;
        }
        .dt-rc-brand-meta { justify-content: flex-start; }
        .dt-rc-brand-name span {
            display: block;
            margin: 0.15rem 0 0;
        }
        .dt-rc-hero { padding: 1.1rem 1rem; }
        .dt-result-avatar-wrap {
            width: 9rem;
            height: 9rem;
        }
        .dt-rc-main { padding: 1rem; }
        .dt-rc-notices,
        .dt-result-cta-section { grid-template-columns: minmax(0, 1fr); }
    }
    @media (prefers-reduced-motion: reduce) {
        .dt-score-ring-fill,
        .dt-rc-split-ok { transition: none; }
        .dt-result-cta-section .dt-cta-enroll::after { animation: none; display: none; }
        .dt-stat-card:hover { transform: none; }
    }
    .hta-apply-cta {
        width:100%;
        margin-top:0.8rem;
        padding:0.85rem 1rem;
        border:none;
        border-radius:12px;
        background:linear-gradient(135deg,#fef9c3,#fde047,#eab308);
        color:#0a0c1a;
        font-size:0.82rem;
        font-weight:900;
        letter-spacing:0.05em;
        text-transform:uppercase;
        cursor:pointer;
        box-shadow:0 4px 0 #a16207, 0 8px 20px rgba(234,179,8,0.25);
        transition:transform 0.12s;
    }
    .hta-apply-cta:hover { transform:translateY(-2px); }

/* -------------------------------------------------------------------
   PROVINCIAL CHAMPIONS SECTION
   ------------------------------------------------------------------- */

        /* -- Section wrapper -- */
        .prov-champions-section {
            padding: 2.5rem 0 2rem;
            background:
                linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(10,12,26,0.96) 8%, rgba(10,12,26,0.96) 92%, rgba(15,23,42,0) 100%),
                radial-gradient(ellipse 70% 40% at 50% 0%, rgba(250,204,21,0.06) 0%, transparent 70%);
            position: relative;
        }
        .prov-champions-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                repeating-linear-gradient(
                    90deg,
                    transparent,
                    transparent 60px,
                    rgba(250,204,21,0.015) 60px,
                    rgba(250,204,21,0.015) 61px
                );
            pointer-events: none;
        }

        /* -- Section eyebrow + heading -- */
        .prov-section-eyebrow {
            display: block;
            text-align: center;
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #eab308;
            opacity: 0.9;
            margin-bottom: 0.6rem;
        }
        .prov-section-heading {
            text-align: center;
            font-family: 'Inter', sans-serif;
            font-size: clamp(1.7rem, 4vw, 2.6rem);
            font-weight: 900;
            color: #f8fafc;
            letter-spacing: -0.03em;
            line-height: 1.1;
            margin-bottom: 1.25rem;
        }
        .prov-heading-rule {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-end;
            width: 100%;
        }
        .prov-heading-word {
            flex: 0 0 auto;
            white-space: nowrap;
            padding-bottom: 0.22em;
            border-bottom: 3px solid;
        }
        .prov-heading-word--provincial {
            color: #f8fafc;
            border-bottom-color: #fde047;
            border-bottom-left-radius: 2px;
            padding-right: 0.14em;
        }
        .prov-heading-word--top {
            color: #fde047;
            border-bottom-color: #ffffff;
            border-bottom-right-radius: 2px;
            padding-left: 0.14em;
            margin-left: -1px;
        }
        .prov-section-sub {
            text-align: center;
            font-size: clamp(0.88rem, 1.8vw, 1rem);
            color: #94a3b8;
            max-width: 42rem;
            margin: 0 auto 2.25rem;
            line-height: 1.6;
        }
        @media (min-width: 900px) {
            #provincial-champions .prov-section-sub {
                max-width: none;
                white-space: nowrap;
            }
        }

        /* -- School Leadership Honors (national + per-province) -- */
        .otr-honors-section {
            padding: 2.25rem 0 3.25rem;
            background:
                linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(8, 12, 28, 0.92) 12%, rgba(8, 12, 28, 0.92) 88%, rgba(15, 23, 42, 0) 100%);
            border-top: 1px solid rgba(250, 204, 21, 0.12);
            border-bottom: 1px solid rgba(250, 204, 21, 0.12);
        }
        .otr-honors-eyebrow {
            text-align: center;
            font-size: 0.7rem;
            font-weight: 900;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: #fde68a;
            margin: 0 0 0.45rem;
        }
        .otr-honors-title {
            text-align: center;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
            font-size: clamp(1.55rem, 3.4vw, 2.35rem);
            font-weight: 900;
            letter-spacing: -0.02em;
            color: #eab308;
            margin: 0 0 0.7rem;
            text-shadow: none;
        }
        .otr-honors-hero-tagline {
            text-align: center;
            margin: 0 auto 1.9rem;
            padding: 0 0.35rem;
            max-width: 64rem;
            font-size: clamp(0.98rem, 2.35vw, 1.22rem);
            line-height: 1.56;
            font-weight: 750;
            color: rgba(241, 245, 249, 0.96);
            letter-spacing: 0.01em;
            text-wrap: balance;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
            text-shadow: none;
            filter: none;
        }
        .otr-honors-hero-tagline-highlight {
            color: #fde047;
            font-weight: 900;
            letter-spacing: 0.012em;
            text-shadow: none;
        }
        .otr-honors-root {
            display: flex;
            flex-direction: column;
            gap: 1.35rem;
        }
        .otr-honors-block-title {
            margin: 0 0 0.55rem;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #e2e8f0;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        .otr-honors-block-title--spotlight {
            text-align: center;
            margin: 0 auto 0.45rem;
            font-size: clamp(0.98rem, 2.5vw, 1.22rem);
            font-weight: 900;
            letter-spacing: 0.03em;
            text-transform: none;
            color: #fde047;
            text-shadow:
                0 0 32px rgba(250, 204, 21, 0.28),
                0 2px 12px rgba(0, 0, 0, 0.45);
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        .otr-honors-spotlight-tagline {
            text-align: center;
            margin: 0 auto 0.95rem;
            padding: 0 0.35rem;
            max-width: 58rem;
            font-size: clamp(0.78rem, 1.9vw, 0.96rem);
            line-height: 1.45;
            font-weight: 700;
            color: rgba(241, 245, 249, 0.94);
            letter-spacing: 0.02em;
            text-wrap: balance;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        @media (min-width: 1100px) {
            .otr-honors-spotlight-tagline {
                white-space: nowrap;
            }
        }
        .otr-honors-spotlight-folder,
        .otr-honors-prov-folder {
            position: relative;
            border-radius: 16px;
            border: 1px solid rgba(148, 163, 184, 0.34);
            background: linear-gradient(165deg, rgba(15, 23, 42, 0.95) 0%, rgba(2, 6, 23, 0.97) 100%);
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
            overflow: hidden;
        }
        .otr-honors-spotlight-folder::before,
        .otr-honors-prov-folder::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, rgba(250, 204, 21, 0.07), transparent 42%);
            pointer-events: none;
            z-index: 0;
        }
        .otr-honors-prov-folder::before {
            background: linear-gradient(120deg, rgba(56, 189, 248, 0.1), transparent 44%);
        }
        .otr-honors-spotlight-folder > summary,
        .otr-honors-prov-folder > summary {
            list-style: none;
            position: relative;
            z-index: 1;
        }
        .otr-honors-spotlight-folder > summary::-webkit-details-marker,
        .otr-honors-prov-folder > summary::-webkit-details-marker {
            display: none;
        }
        .otr-honors-spotlight-summary,
        .otr-honors-prov-folder-summary {
            cursor: pointer;
            margin: 0;
            padding: 0.85rem 0.95rem 0.88rem;
            outline: none;
        }
        .otr-honors-spotlight-summary:focus-visible {
            box-shadow: inset 0 0 0 2px rgba(250, 204, 21, 0.45);
            border-radius: 14px;
        }
        .otr-honors-prov-folder-summary:focus-visible {
            box-shadow: inset 0 0 0 2px rgba(56, 189, 248, 0.45);
            border-radius: 14px;
        }
        .otr-honors-spotlight-summary-inner,
        .otr-honors-prov-folder-summary-inner {
            max-width: 58rem;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 0.35rem;
            text-align: center;
        }
        .otr-honors-spotlight-summary-top,
        .otr-honors-prov-folder-summary-top {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.65rem;
        }
        .otr-honors-spotlight-summary-text,
        .otr-honors-prov-folder-summary-text {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.12rem;
            min-width: 0;
        }
        .otr-honors-spotlight-summary-kicker {
            display: block;
            font-size: clamp(1rem, 2.6vw, 1.28rem);
            font-weight: 900;
            letter-spacing: 0.02em;
            color: #fde047;
            text-shadow:
                0 0 28px rgba(250, 204, 21, 0.22),
                0 2px 10px rgba(0, 0, 0, 0.4);
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        .otr-honors-prov-folder-summary-kicker {
            display: block;
            font-size: clamp(0.95rem, 2.4vw, 1.12rem);
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #e2e8f0;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        .otr-honors-spotlight-summary-period,
        .otr-honors-prov-folder-summary-period {
            display: block;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(226, 232, 240, 0.88);
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        .otr-honors-spotlight-summary-hint,
        .otr-honors-prov-folder-summary-hint {
            display: block;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            color: #94a3b8;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        .otr-honors-spotlight-summary-chevron {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            border-radius: 9999px;
            border: 1px solid rgba(250, 204, 21, 0.35);
            color: #fde047;
            font-size: 0.72rem;
            transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
            background: rgba(2, 6, 23, 0.35);
        }
        .otr-honors-prov-folder-summary-chevron {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2rem;
            height: 2rem;
            border-radius: 9999px;
            border: 1px solid rgba(56, 189, 248, 0.38);
            color: #7dd3fc;
            font-size: 0.72rem;
            transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
            background: rgba(2, 6, 23, 0.35);
        }
        .otr-honors-spotlight-folder[open] .otr-honors-spotlight-summary-chevron {
            transform: rotate(180deg);
            border-color: rgba(250, 204, 21, 0.55);
            background: rgba(120, 53, 15, 0.22);
        }
        .otr-honors-prov-folder[open] .otr-honors-prov-folder-summary-chevron {
            transform: rotate(180deg);
            border-color: rgba(56, 189, 248, 0.55);
            background: rgba(14, 116, 144, 0.22);
        }
        .otr-honors-spotlight-body,
        .otr-honors-prov-folder-body {
            position: relative;
            z-index: 1;
            padding: 0 0.75rem 1rem;
            border-top: 1px dashed rgba(148, 163, 184, 0.28);
        }
        .otr-honors-spotlight-folder--static .otr-honors-spotlight-body--always {
            border-top: 0;
            padding-top: 0.85rem;
        }
        .otr-honors-spotlight-static-head {
            text-align: center;
            margin: 0 auto 0.62rem;
        }
        .otr-honors-spotlight-static-title {
            margin: 0;
            font-size: clamp(1rem, 2.6vw, 1.28rem);
            font-weight: 900;
            letter-spacing: 0.02em;
            color: #fde047;
            text-shadow: 0 0 28px rgba(250, 204, 21, 0.22), 0 2px 10px rgba(0, 0, 0, 0.4);
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
            white-space: nowrap;
        }
        .otr-honors-spotlight-static-title span {
            display: inline;
            margin-left: 0.3rem;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: rgba(226, 232, 240, 0.88);
        }
        .otr-honors-spotlight-static-hint {
            margin: 0.25rem 0 0;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            color: #94a3b8;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        @media (min-width: 640px) {
            .otr-honors-spotlight-body,
            .otr-honors-prov-folder-body {
                padding: 0 1rem 1.05rem;
            }
        }
        .otr-honors-spotlight-body .otr-honors-spotlight-tagline {
            margin-top: 0.75rem;
        }
        .otr-honors-prov-folder-body > .otr-honors-subline:first-child {
            margin-top: 0.7rem;
        }
        .otr-honors-spotlight-body .prov-top10-grid.otr-honors-national-grid {
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0.35rem;
            max-width: 100%;
        }
        @media (min-width: 900px) {
            .otr-honors-spotlight-body .prov-top10-grid.otr-honors-national-grid {
                display: grid;
                grid-template-columns: repeat(6, minmax(0, 1fr));
                justify-content: center;
                align-items: stretch;
                gap: 1rem 0.85rem;
                max-width: 86rem;
                width: 100%;
                flex-wrap: unset;
            }
            .otr-honors-spotlight-body .prov-top10-grid.otr-honors-national-grid .otr-honors-national-tile--minimal {
                flex: unset;
                width: 100%;
                max-width: none;
            }
        }
        .otr-honors-national-tile {
            min-height: 8.15rem;
        }
        .otr-honors-national-tile--minimal {
            min-height: 7.35rem;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.48rem 0.42rem;
            border-width: 1.5px;
            overflow: hidden;
            border-radius: 16px;
            isolation: isolate;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 8px 22px rgba(0, 0, 0, 0.38),
                0 0 18px color-mix(in srgb, var(--prov-accent) 14%, transparent);
        }
        .otr-honors-national-tile--minimal:hover,
        .otr-honors-national-tile--minimal:focus-visible {
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.14),
                0 12px 28px rgba(0, 0, 0, 0.45),
                0 0 28px color-mix(in srgb, var(--prov-accent) 28%, transparent);
        }
        /* National Hall grid: ICT tiles use the same premium rings as other provinces (no capital-card blue stack). */
        .otr-honors-spotlight-body .otr-honors-national-tile--minimal.prov-top10-btn--ict {
            animation: none;
            overflow: hidden;
            min-height: 7.35rem;
            border-width: 1.5px;
            background:
                linear-gradient(165deg, rgba(15, 23, 42, 0.95) 0%, rgba(2, 6, 23, 0.97) 100%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 8px 22px rgba(0, 0, 0, 0.38),
                0 0 18px color-mix(in srgb, var(--prov-accent) 14%, transparent);
        }
        .otr-honors-spotlight-body .otr-honors-national-tile--minimal.prov-top10-btn--ict::before {
            display: none;
        }
        .otr-honors-spotlight-body .otr-honors-national-tile--minimal.prov-top10-btn--ict:hover,
        .otr-honors-spotlight-body .otr-honors-national-tile--minimal.prov-top10-btn--ict:focus-visible {
            animation: none;
            transform: none;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.14),
                0 12px 28px rgba(0, 0, 0, 0.45),
                0 0 28px color-mix(in srgb, var(--prov-accent) 28%, transparent);
        }
        .otr-honors-spotlight-body .otr-honors-national-tile--minimal.prov-top10-btn--ict .prov-top10-btn-icon {
            margin-top: 0;
            width: 6.45rem;
            height: 6.45rem;
            border-width: 0;
            box-shadow:
                inset 0 2px 4px rgba(255, 255, 255, 0.14),
                inset 0 -3px 10px rgba(0, 0, 0, 0.48),
                0 10px 26px rgba(0, 0, 0, 0.44);
        }
        .otr-honors-spotlight-body .otr-honors-national-tile--minimal.prov-top10-btn--ict.otr-honors-national-tile--cp-1 .prov-top10-btn-icon {
            box-shadow:
                inset 0 0 0 2px rgba(253, 224, 71, 0.96),
                inset 0 0 0 5px rgba(15, 23, 42, 0.94),
                0 0 0 1px rgba(250, 204, 21, 0.55),
                0 0 36px rgba(250, 204, 21, 0.32),
                0 12px 28px rgba(0, 0, 0, 0.5);
        }
        .otr-honors-spotlight-body .otr-honors-national-tile--minimal.prov-top10-btn--ict.otr-honors-national-tile--cp-2 .prov-top10-btn-icon {
            box-shadow:
                inset 0 0 0 2px rgba(226, 232, 240, 0.94),
                inset 0 0 0 5px rgba(15, 23, 42, 0.94),
                0 0 0 1px rgba(148, 163, 184, 0.48),
                0 0 28px rgba(226, 232, 240, 0.16),
                0 12px 28px rgba(0, 0, 0, 0.5);
        }
        .otr-honors-spotlight-body .otr-honors-national-tile--minimal.prov-top10-btn--ict.otr-honors-national-tile--cp-3 .prov-top10-btn-icon {
            box-shadow:
                inset 0 0 0 2px rgba(251, 191, 36, 0.9),
                inset 0 0 0 5px rgba(15, 23, 42, 0.94),
                0 0 0 1px rgba(180, 83, 9, 0.42),
                0 0 26px rgba(251, 191, 36, 0.24),
                0 12px 28px rgba(0, 0, 0, 0.5);
        }
        .otr-honors-national-tile--minimal .prov-top10-btn-label,
        .otr-honors-national-tile--minimal .prov-top10-btn-sub,
        .otr-honors-national-tile--minimal .prov-top10-btn-capital-ribbon {
            display: none;
        }
        .otr-honors-national-tile .prov-top10-btn-label {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-size: clamp(0.74rem, 2vw, 0.88rem);
            line-height: 1.2;
            max-height: 2.55em;
            word-break: break-word;
        }
        .otr-honors-national-tile .prov-top10-btn-sub {
            max-width: 9.75rem;
            font-size: 0.55rem;
            padding: 0.12rem 0.42rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .otr-honors-national-tile .prov-top10-btn-icon {
            width: 3.65rem;
            height: 3.65rem;
            border-radius: 50%;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.26),
                inset 0 -2px 6px rgba(0, 0, 0, 0.35),
                0 0 0 2px color-mix(in srgb, var(--prov-accent) 48%, transparent),
                0 0 0 5px color-mix(in srgb, var(--prov-accent) 18%, transparent),
                0 0 0 9px color-mix(in srgb, var(--prov-accent) 9%, transparent),
                0 0 26px color-mix(in srgb, var(--prov-accent) 36%, transparent);
        }
        .otr-honors-national-tile--minimal .prov-top10-btn-icon {
            width: 6.45rem;
            height: 6.45rem;
            flex-direction: column;
            justify-content: center;
            gap: 0.14rem;
            overflow: hidden;
            isolation: isolate;
            background:
                radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.24) 0%, transparent 48%),
                linear-gradient(160deg, rgba(30, 41, 59, 0.96) 0%, rgba(15, 23, 42, 0.98) 100%);
            box-shadow:
                inset 0 2px 4px rgba(255, 255, 255, 0.14),
                inset 0 -3px 10px rgba(0, 0, 0, 0.48),
                0 10px 26px rgba(0, 0, 0, 0.44);
        }
        .otr-honors-national-tile--minimal.otr-honors-national-tile--cp-1 .prov-top10-btn-icon {
            box-shadow:
                inset 0 0 0 2px rgba(253, 224, 71, 0.96),
                inset 0 0 0 5px rgba(15, 23, 42, 0.94),
                0 0 0 1px rgba(250, 204, 21, 0.55),
                0 0 36px rgba(250, 204, 21, 0.32),
                0 12px 28px rgba(0, 0, 0, 0.5);
        }
        .otr-honors-national-tile--minimal.otr-honors-national-tile--cp-2 .prov-top10-btn-icon {
            box-shadow:
                inset 0 0 0 2px rgba(226, 232, 240, 0.94),
                inset 0 0 0 5px rgba(15, 23, 42, 0.94),
                0 0 0 1px rgba(148, 163, 184, 0.48),
                0 0 28px rgba(226, 232, 240, 0.16),
                0 12px 28px rgba(0, 0, 0, 0.5);
        }
        .otr-honors-national-tile--minimal.otr-honors-national-tile--cp-3 .prov-top10-btn-icon {
            box-shadow:
                inset 0 0 0 2px rgba(251, 191, 36, 0.9),
                inset 0 0 0 5px rgba(15, 23, 42, 0.94),
                0 0 0 1px rgba(180, 83, 9, 0.42),
                0 0 26px rgba(251, 191, 36, 0.24),
                0 12px 28px rgba(0, 0, 0, 0.5);
        }
        .otr-honors-national-tile--minimal:hover .prov-top10-btn-icon,
        .otr-honors-national-tile--minimal:focus-visible .prov-top10-btn-icon {
            transform: scale(1.03);
            transition: transform 0.22s ease, box-shadow 0.22s ease;
        }
        .otr-honors-national-tile.prov-top10-btn--ict .prov-top10-btn-icon {
            width: 3.85rem;
            height: 3.85rem;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.3),
                inset 0 -2px 7px rgba(0, 0, 0, 0.38),
                0 0 0 2px rgba(125, 211, 252, 0.55),
                0 0 0 6px rgba(56, 189, 248, 0.18),
                0 0 0 10px rgba(56, 189, 248, 0.1),
                0 0 32px rgba(56, 189, 248, 0.42);
        }
        .otr-honors-national-tile--minimal.prov-top10-btn--ict .prov-top10-btn-icon {
            width: 6.45rem;
            height: 6.45rem;
            box-shadow:
                inset 0 2px 0 rgba(255, 255, 255, 0.34),
                inset 0 -3px 9px rgba(0, 0, 0, 0.48),
                0 0 0 2px rgba(125, 211, 252, 0.62),
                0 0 0 8px rgba(56, 189, 248, 0.22),
                0 0 0 14px rgba(56, 189, 248, 0.1),
                0 0 40px rgba(56, 189, 248, 0.52);
        }
        .otr-honors-national-tile .otr-honors-national-tile__rank-img {
            display: block;
            width: 82%;
            height: 82%;
            object-fit: contain;
            object-position: center;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
            pointer-events: none;
        }
        .otr-honors-national-tile__icon {
            position: relative;
            overflow: hidden;
            padding: 0 !important;
            flex-direction: row !important;
            justify-content: center !important;
            gap: 0 !important;
        }
        .otr-honors-national-tile--minimal .otr-honors-national-tile__icon {
            overflow: hidden;
        }
        .otr-honors-national-tile .prov-top10-btn-icon img.otr-honors-national-tile__face {
            position: absolute;
            inset: 0;
            width: 100% !important;
            height: 100% !important;
            padding: 0 !important;
            margin: 0;
            border-radius: 50%;
            object-fit: cover;
            object-position: center 18%;
            background: rgba(15, 23, 42, 0.72) !important;
            display: block;
        }
        .otr-honors-national-tile__face--lead {
            object-position: center 22%;
        }
        .otr-honors-national-tile__rank-pill {
            position: absolute;
            right: -0.1rem;
            bottom: -0.06rem;
            z-index: 3;
            min-width: 1.5rem;
            padding: 0.16rem 0.38rem;
            border-radius: 9999px;
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.02em;
            line-height: 1;
            color: #0f172a;
            background: linear-gradient(160deg, #fef08a 0%, #facc15 52%, #d97706 100%);
            border: 1.5px solid rgba(255, 255, 255, 0.58);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.48);
            pointer-events: none;
        }
        .otr-honors-national-tile--minimal .otr-honors-national-tile__rank-pill {
            display: none;
        }
        .otr-honors-national-tile.prov-top10-btn--ict .otr-honors-national-tile__rank-pill {
            color: #082f49;
            border-color: rgba(186, 230, 253, 0.75);
        }
        .otr-honors-national-tile--minimal .otr-honors-national-tile__rank-img {
            width: 90%;
            height: 90%;
            filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
        }
        .otr-honors-national-tile__rank {
            display: none;
            font-size: clamp(1.02rem, 2.8vw, 1.34rem);
            font-weight: 950;
            letter-spacing: 0;
            word-spacing: 0.22em;
            line-height: 1;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
            color: color-mix(in srgb, var(--prov-accent) 88%, #fff 12%);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
        }
        .otr-honors-national-tile--minimal .otr-honors-national-tile__rank {
            display: none;
        }
        .otr-honors-national-tile__rank-img--ok ~ .otr-honors-national-tile__rank {
            display: none;
        }
        .otr-honors-national-tile.prov-top10-btn--ict .otr-honors-national-tile__rank {
            color: #f0f9ff;
            text-shadow: 0 0 16px rgba(56, 189, 248, 0.42), 0 1px 2px rgba(0, 0, 0, 0.5);
        }
        .otr-honors-card {
            position: relative;
            border-radius: 16px;
            border: 1px solid rgba(148, 163, 184, 0.34);
            background: linear-gradient(165deg, rgba(15, 23, 42, 0.95) 0%, rgba(2, 6, 23, 0.97) 100%);
            padding: 0.95rem 0.9rem 0.9rem;
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
            overflow: hidden;
        }
        .otr-honors-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, rgba(250, 204, 21, 0.08), transparent 45%);
            pointer-events: none;
        }
        .otr-honors-card > * {
            position: relative;
            z-index: 1;
        }
        .otr-honors-compact {
            transition: border-color 180ms ease, box-shadow 180ms ease;
        }
        .otr-honors-compact[open] {
            border-color: rgba(250, 204, 21, 0.55);
            box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45);
        }
        .otr-honors-summary {
            list-style: none;
            cursor: pointer;
            display: grid;
            grid-template-columns: auto 1fr auto auto;
            align-items: center;
            gap: 0.6rem;
            margin: -0.2rem -0.2rem 0;
            padding: 0.2rem 0.2rem 0.35rem;
        }
        .otr-honors-summary::-webkit-details-marker {
            display: none;
        }
        .otr-honors-summary-main {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.12rem;
            justify-content: center;
        }
        .otr-honors-summary-main .otr-honors-school {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            text-align: center;
        }
        .otr-honors-summary-stats {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 0.3rem 0.55rem;
            font-size: 0.67rem;
            color: #cbd5e1;
            white-space: nowrap;
        }
        .otr-honors-summary-stats b {
            color: #f8fafc;
            font-weight: 800;
        }
        .otr-honors-summary-action {
            font-size: 0.64rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #fde047;
            border: 1px solid rgba(250, 204, 21, 0.35);
            border-radius: 9999px;
            padding: 0.18rem 0.45rem;
            white-space: nowrap;
        }
        .otr-honors-summary--sm {
            grid-template-columns: 1fr auto auto;
        }
        .otr-honors-details {
            margin-top: 0.3rem;
            padding-top: 0.45rem;
            border-top: 1px dashed rgba(148, 163, 184, 0.28);
        }
        .otr-honors-showcase {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.65rem;
        }
        @media (min-width: 880px) {
            .otr-honors-showcase {
                grid-template-columns: minmax(220px, 260px) 1fr;
            }
        }
        .otr-honors-lead-panel {
            position: relative;
            border-radius: 16px;
            border: 1px solid rgba(250, 204, 21, 0.72);
            background: radial-gradient(circle at 75% 8%, rgba(250, 204, 21, 0.26), transparent 30%), linear-gradient(165deg, rgba(2, 6, 23, 0.98) 0%, rgba(15, 23, 42, 0.9) 52%, rgba(2, 6, 23, 0.98) 100%);
            overflow: hidden;
            box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(250, 204, 21, 0.16);
        }
        .otr-honors-lead-panel::before {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            height: 4px;
            background: linear-gradient(90deg, #b45309 0%, #fde68a 25%, #fef9c3 50%, #fde68a 75%, #b45309 100%);
            pointer-events: none;
            z-index: 2;
        }
        .otr-honors-lead-photo-wrap {
            position: relative;
            overflow: hidden;
        }
        .otr-honors-lead-photo-wrap::before,
        .otr-honors-lead-photo-wrap::after {
            content: "";
            position: absolute;
            width: 1.4rem;
            height: 1.4rem;
            pointer-events: none;
            z-index: 2;
        }
        .otr-honors-lead-photo-wrap::before {
            top: 0;
            left: 0;
            border-top: 2px solid #fde68a;
            border-left: 2px solid #fde68a;
            border-top-left-radius: 14px;
        }
        .otr-honors-lead-photo-wrap::after {
            top: 0;
            right: 0;
            border-top: 2px solid #fde68a;
            border-right: 2px solid #fde68a;
            border-top-right-radius: 14px;
        }
        .otr-honors-lead-photo {
            width: 100%;
            aspect-ratio: 4 / 3.4;
            object-fit: cover;
            object-position: center 18%;
            display: block;
            border-bottom: 1px solid rgba(250, 204, 21, 0.35);
            transition: transform 0.5s ease;
        }
        .otr-honors-lead-photo-wrap:hover .otr-honors-lead-photo {
            transform: scale(1.02);
        }
        .otr-honors-lead-photo-wrap > .otr-honors-lead-photo-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.18) 100%), radial-gradient(ellipse at 50% 0%, rgba(250, 204, 21, 0.16), transparent 55%);
            pointer-events: none;
        }
        .otr-honors-lead-emblem {
            position: absolute;
            right: 0.4rem;
            bottom: 0.4rem;
            width: 2.4rem;
            height: 2.4rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: transparent;
            filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
            z-index: 2;
        }
        .otr-honors-lead-emblem > i.fa-shield-alt {
            font-size: 2.4rem;
            background: linear-gradient(160deg, #fef9c3 0%, #facc15 40%, #b45309 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .otr-honors-lead-emblem-check {
            position: absolute;
            top: 42%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 0.85rem;
            color: #1c1004;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
        }
        .otr-honors-lead-panel-meta {
            position: relative;
            padding: 0.5rem 0.6rem 0.55rem;
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.38), rgba(2, 6, 23, 0.74));
            text-align: center;
        }
        .otr-honors-lead-panel-name {
            margin: 0;
            font-size: 1.05rem;
            font-weight: 600;
            color: var(--otr-gold);
            line-height: 1.15;
            text-transform: uppercase;
            letter-spacing: -0.01em;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .otr-honors-lead-panel-geo {
            text-align: left;
            display: flex;
            align-items: stretch;
            justify-content: space-between;
            gap: 0.65rem;
            margin: 0.22rem 0 0.28rem;
            padding: 0.38rem 0.4rem 0.4rem;
            border-radius: 10px;
            border: 1px solid rgba(250, 204, 21, 0.2);
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.5), rgba(2, 6, 23, 0.35));
        }
        .otr-honors-lead-geo-item {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 0.08rem;
        }
        .otr-honors-lead-geo-label {
            display: block;
            font-size: 0.58rem;
            font-weight: 800;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #fde047;
            line-height: 1.1;
        }
        .otr-honors-lead-geo-value {
            display: block;
            font-size: 0.76rem;
            font-weight: 400;
            color: #e2e8f0;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }
        .otr-honors-lead-geo-sep {
            width: 1px;
            align-self: stretch;
            margin: 0.1rem 0;
            background: linear-gradient(180deg, rgba(250, 204, 21, 0) 0%, rgba(250, 204, 21, 0.35) 45%, rgba(250, 204, 21, 0) 100%);
            flex-shrink: 0;
        }
        .otr-honors-lead-panel-role {
            margin: 0.24rem 0 0.12rem;
            font-size: 0.86rem;
            color: #fef08a;
            font-weight: 400;
            letter-spacing: 0.02em;
            line-height: 1.22;
            text-align: center;
        }
        .otr-honors-lead-panel-sublabel {
            margin: 0.05rem 0 0.28rem;
            font-size: 0.66rem;
            color: #cbd5e1;
            font-weight: 600;
            padding-bottom: 0.3rem;
            border-bottom: 1px solid rgba(250, 204, 21, 0.18);
        }
        .otr-honors-lead-panel-city {
            margin: 0.28rem 0 0;
            font-size: 0.76rem;
            color: #f8fafc;
            font-weight: 800;
            line-height: 1.2;
        }
        .otr-honors-lead-panel-district {
            margin: 0.12rem 0 0;
            font-size: 0.72rem;
            color: #cbd5e1;
            font-weight: 700;
            line-height: 1.2;
        }
        .otr-honors-verified-pill {
            display: inline-flex;
            align-items: center;
            gap: 0.32rem;
            margin-top: 0.42rem;
            padding: 0.18rem 0.5rem 0.18rem 0.22rem;
            border-radius: 9999px;
            border: 1px solid rgba(37, 99, 235, 0.45);
            background: linear-gradient(180deg, rgba(37, 99, 235, 0.18), rgba(29, 78, 216, 0.22));
            color: #bfdbfe;
            font-size: 0.66rem;
            font-weight: 800;
            letter-spacing: 0.02em;
        }
        .otr-honors-verified-pill-tick {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 0.95rem;
            height: 0.95rem;
            border-radius: 50%;
            background: linear-gradient(140deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
            color: #ffffff;
            font-size: 0.55rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.2);
        }
        .otr-honors-verified-bar-tick {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.85rem;
            height: 1.85rem;
            border-radius: 50%;
            background: linear-gradient(140deg, #60a5fa 0%, #2563eb 55%, #1d4ed8 100%);
            color: #ffffff;
            font-size: 0.85rem;
            font-weight: 900;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 0 0 1.5px rgba(255, 255, 255, 0.2);
            flex-shrink: 0;
        }
        .otr-honors-verified-bar-burst {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.05rem;
            height: 2.05rem;
            line-height: 1;
            flex-shrink: 0;
        }
        .otr-honors-verified-bar-burst-shape {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2.05rem;
            line-height: 1;
            background: linear-gradient(140deg, #60a5fa 0%, #2563eb 50%, #1d4ed8 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
        }
        .otr-honors-verified-bar-burst-check {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ffffff;
            font-size: 0.82rem;
            font-weight: 900;
            z-index: 2;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
        .otr-honors-insight {
            display: grid;
            gap: 0.45rem;
        }
        .otr-honors-podium-strip {
            position: relative;
            display: grid;
            grid-template-columns: 2rem minmax(0, 1fr) 7.4rem;
            align-items: center;
            column-gap: 0.75rem;
            border: 1px solid rgba(250, 204, 21, 0.42);
            border-radius: 12px;
            background: linear-gradient(102deg, rgba(24, 32, 52, 0.97) 0%, rgba(12, 18, 36, 0.98) 58%, rgba(28, 22, 12, 0.92) 100%);
            padding: 0.7rem 0.5rem 0.7rem 0.75rem;
            min-height: 0;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 14px rgba(0, 0, 0, 0.32);
            overflow: visible;
        }
        .otr-honors-podium-strip::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 94% 48%, rgba(250, 204, 21, 0.14), transparent 32%);
            pointer-events: none;
        }
        .otr-honors-podium-strip::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(253, 230, 138, 0.55), transparent);
            pointer-events: none;
        }
        .otr-honors-podium-strip > i {
            position: relative;
            grid-column: 1;
            grid-row: 1;
            align-self: start;
            margin-top: 0.2rem;
            width: 2rem;
            height: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            color: #1c1004;
            font-size: 0.95rem;
            background: radial-gradient(circle at 35% 30%, #fef9c3 0%, #facc15 45%, #b45309 100%);
            border: 1px solid rgba(180, 83, 9, 0.55);
            flex-shrink: 0;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), inset 0 0 6px rgba(255, 255, 255, 0.28);
        }
        .otr-honors-podium-copy {
            position: relative;
            grid-column: 2;
            grid-row: 1;
            min-width: 0;
            z-index: 2;
            padding: 0.05rem 0.25rem 0.05rem 0;
        }
        .otr-honors-podium-heading {
            display: block;
            margin: 0;
            color: #facc15;
            -webkit-text-fill-color: #facc15;
            font-size: clamp(0.88rem, 1.15vw, 1.02rem);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 900;
            line-height: 1.25;
        }
        .otr-honors-podium-message {
            margin: 0.4rem 0 0;
            color: #f1f5f9;
            font-size: clamp(0.84rem, 1.05vw, 0.94rem);
            font-weight: 500;
            line-height: 1.58;
            letter-spacing: 0.01em;
            text-wrap: pretty;
        }
        .otr-honors-podium-message .otr-honors-podium-otr {
            color: #facc15;
            -webkit-text-fill-color: #facc15;
            font-weight: 800;
            letter-spacing: 0.05em;
        }
        .otr-honors-podium-trophy {
            position: relative;
            grid-column: 3;
            grid-row: 1;
            width: 7.4rem;
            height: 5.1rem;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: -0.05rem;
            overflow: visible;
            z-index: 3;
        }
        .otr-honors-podium-trophy-img {
            position: relative;
            z-index: 2;
            display: block;
            height: 158%;
            width: auto;
            max-width: none;
            object-fit: cover;
            transform: translateY(8%);
            background: transparent;
            border: 0;
            box-shadow: none;
            filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.45)) drop-shadow(0 10px 18px rgba(217, 119, 6, 0.24));
        }
        .otr-honors-podium-trophy-star {
            position: absolute;
            top: -0.02rem;
            left: 50%;
            width: 0.58rem;
            height: 0.58rem;
            transform: translateX(-50%) rotate(45deg);
            background: linear-gradient(145deg, #fffbe8 0%, #fde68a 24%, #facc15 55%, #b45309 100%);
            border: 1px solid rgba(120, 53, 15, 0.72);
            clip-path: polygon(50% 0%, 62% 37%, 100% 50%, 62% 63%, 50% 100%, 38% 63%, 0% 50%, 38% 37%);
            z-index: 2;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.45);
        }
        .otr-honors-podium-trophy-cup {
            position: absolute;
            top: 0.6rem;
            left: 50%;
            width: 2.42rem;
            height: 1.68rem;
            transform: translateX(-50%);
            border-radius: 0 0 0.82rem 0.82rem;
            border: 1px solid rgba(120, 53, 15, 0.8);
            clip-path: polygon(8% 0%, 92% 0%, 82% 100%, 18% 100%);
            background:
                linear-gradient(90deg, rgba(120, 53, 15, 0.35) 0%, rgba(255, 255, 255, 0.06) 16%, rgba(255, 255, 255, 0.68) 34%, rgba(255, 255, 255, 0.1) 48%, rgba(120, 53, 15, 0.34) 63%, rgba(255, 255, 255, 0.55) 79%, rgba(120, 53, 15, 0.32) 100%),
                linear-gradient(180deg, #fffbe8 0%, #fde68a 17%, #facc15 46%, #d97706 72%, #92400e 100%);
            z-index: 2;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.54);
        }
        .otr-honors-podium-trophy-cup::before,
        .otr-honors-podium-trophy-cup::after {
            content: "";
            position: absolute;
            top: 0.18rem;
            width: 1.02rem;
            height: 1.1rem;
            border: 2px solid rgba(146, 64, 14, 0.92);
            border-top-color: rgba(255, 249, 196, 0.95);
            border-bottom-color: transparent;
            background: transparent;
            filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
        }
        .otr-honors-podium-trophy-cup::before {
            left: -0.84rem;
            border-right: 0;
            border-radius: 0.72rem 0 0 0.72rem;
        }
        .otr-honors-podium-trophy-cup::after {
            right: -0.84rem;
            border-left: 0;
            border-radius: 0 0.72rem 0.72rem 0;
        }
        .otr-honors-podium-trophy-stem {
            position: absolute;
            top: 2.3rem;
            left: 50%;
            width: 0.5rem;
            height: 1rem;
            transform: translateX(-50%);
            border: 1px solid rgba(120, 53, 15, 0.8);
            background: linear-gradient(180deg, #fff8d1 0%, #facc15 50%, #b45309 100%);
            border-radius: 0.24rem;
            z-index: 2;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
        }
        .otr-honors-podium-trophy-base {
            position: absolute;
            left: 50%;
            bottom: 0.28rem;
            width: 2.5rem;
            height: 0.84rem;
            transform: translateX(-50%);
            border-radius: 0.22rem;
            border: 1px solid rgba(7, 10, 18, 0.9);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 45%),
                linear-gradient(180deg, #2f3445 0%, #0b1020 100%);
            z-index: 2;
            box-shadow: 0 4px 9px rgba(0, 0, 0, 0.54);
        }
        .otr-honors-podium-trophy-base::before {
            content: "";
            position: absolute;
            top: -0.22rem;
            left: 50%;
            width: 1.45rem;
            height: 0.24rem;
            transform: translateX(-50%);
            border-radius: 0.2rem;
            border: 1px solid rgba(120, 53, 15, 0.8);
            background: linear-gradient(180deg, #fff7cc 0%, #facc15 70%, #b45309 100%);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
        }
        .otr-honors-podium-trophy::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 50% 50%, rgba(250, 204, 21, 0.62) 0%, rgba(250, 204, 21, 0.2) 36%, transparent 74%);
            border-radius: 50%;
            filter: blur(2px);
            pointer-events: none;
        }
        .otr-honors-podium-trophy::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 185%;
            height: 185%;
            transform: translate(-50%, -50%);
            background: conic-gradient(from 0deg, transparent 0deg, rgba(253, 230, 138, 0.2) 12deg, transparent 24deg, transparent 36deg, rgba(253, 230, 138, 0.2) 48deg, transparent 60deg, transparent 72deg, rgba(253, 230, 138, 0.2) 84deg, transparent 96deg, transparent 144deg, rgba(253, 230, 138, 0.2) 156deg, transparent 168deg, transparent 216deg, rgba(253, 230, 138, 0.2) 228deg, transparent 240deg, transparent 288deg, rgba(253, 230, 138, 0.2) 300deg, transparent 312deg, transparent 360deg);
            pointer-events: none;
        }
        .otr-honors-podium-spark {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #fef9c3;
            box-shadow: 0 0 6px rgba(254, 249, 195, 0.95), 0 0 12px rgba(250, 204, 21, 0.6);
            z-index: 3;
        }
        .otr-honors-podium-spark--1 { top: 12%; left: 18%; width: 3px; height: 3px; }
        .otr-honors-podium-spark--2 { top: 22%; right: 12%; }
        .otr-honors-podium-spark--3 { bottom: 24%; left: 8%; width: 2px; height: 2px; }
        .otr-honors-podium-spark--4 { bottom: 18%; right: 18%; width: 3px; height: 3px; }
        .otr-honors-context-grid--two {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.55rem;
        }
        @media (min-width: 860px) {
            .otr-honors-context-grid--two:not(.otr-honors-context-grid--single) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        .otr-honors-context-grid--single .otr-honors-ctx {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) max-content;
            align-items: center;
            column-gap: clamp(0.85rem, 2.8vw, 1.65rem);
            row-gap: 0;
        }
        .otr-honors-context-grid--single .otr-honors-ctx > span {
            grid-column: 2;
            grid-row: 1;
            align-self: center;
            justify-self: center;
            text-align: center;
            white-space: nowrap;
            margin: 0;
        }
        .otr-honors-context-grid--single .otr-honors-ctx > strong {
            grid-column: 3;
            grid-row: 1;
            align-self: center;
            justify-self: end;
            white-space: nowrap;
            margin: 0;
        }
        .otr-honors-context-grid--single .otr-honors-ctx em {
            grid-column: 2;
            grid-row: 3;
        }
        .otr-honors-context-grid--single .otr-honors-ctx b {
            grid-column: 3;
            grid-row: 1;
            align-self: center;
            justify-self: end;
        }
        .otr-honors-context-grid--single .otr-honors-ctx-icon {
            grid-column: 1;
            grid-row: 1;
            align-self: center;
            justify-self: start;
            margin: 0;
        }
        .otr-honors-context-grid--single .otr-honors-ctx--learners {
            position: relative;
            overflow: visible;
            border: 1px solid rgba(34, 197, 94, 0.55);
            border-radius: 13px;
            background:
                radial-gradient(ellipse at 0% 50%, rgba(16, 185, 129, 0.32) 0%, transparent 52%),
                radial-gradient(ellipse at 100% 40%, rgba(45, 212, 191, 0.14) 0%, transparent 48%),
                linear-gradient(92deg, rgba(6, 78, 59, 0.95) 0%, rgba(5, 46, 22, 0.82) 45%, rgba(2, 6, 23, 0.95) 100%);
            box-shadow:
                inset 0 0 34px rgba(16, 185, 129, 0.14),
                0 8px 22px rgba(0, 0, 0, 0.35),
                0 0 0 1px rgba(16, 185, 129, 0.18);
            padding: 0.62rem 1.35rem;
            min-height: 3.25rem;
        }
        .otr-honors-context-grid--single .otr-honors-ctx--learners > * {
            margin: 0;
        }
        .otr-honors-context-grid--single .otr-honors-ctx--learners::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(104deg, transparent 0%, rgba(255, 255, 255, 0.06) 46%, transparent 72%);
            pointer-events: none;
            z-index: 0;
        }
        .otr-honors-context-grid--single .otr-honors-ctx--learners::after {
            content: "";
            position: absolute;
            left: 0.75rem;
            right: 0.75rem;
            bottom: 0.45rem;
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.68) 48%, rgba(45, 212, 191, 0.8) 100%);
            pointer-events: none;
        }
        .otr-honors-context-grid--single .otr-honors-ctx--learners .otr-honors-ctx-icon {
            position: relative;
            z-index: 1;
            width: 3.35rem;
            height: 3.35rem;
            font-size: 1.5rem;
            /* Cool navy disc + light gold glyph: reads premium, separates from parent green/teal strip */
            color: #fde68a;
            background:
                radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.11) 0%, transparent 45%),
                linear-gradient(158deg, #0f172a 0%, #0b1424 52%, #050d18 100%);
            border: 1px solid rgba(253, 230, 138, 0.42);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 5px 16px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(100, 116, 139, 0.35),
                0 0 18px rgba(251, 191, 36, 0.12);
            text-shadow:
                0 1px 2px rgba(0, 0, 0, 0.9),
                0 0 10px rgba(253, 230, 138, 0.22);
            animation: otr-honors-learners-icon-breathe 2.2s ease-in-out infinite;
        }
        .otr-honors-context-grid--single .otr-honors-ctx--learners .otr-honors-ctx-icon i {
            position: relative;
            z-index: 2;
            filter:
                drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85))
                drop-shadow(0 0 8px rgba(253, 230, 138, 0.35));
        }
        .otr-honors-context-grid--single .otr-honors-ctx--learners .otr-honors-ctx-icon::before {
            content: "";
            position: absolute;
            inset: -9px;
            border-radius: 50%;
            /* Restrained halo: slate ? soft gold ? no rainbow cyan/lime noise */
            background: conic-gradient(
                from 0deg,
                rgba(148, 163, 184, 0.5) 0deg,
                rgba(251, 191, 36, 0.52) 90deg,
                rgba(226, 232, 240, 0.38) 180deg,
                rgba(251, 191, 36, 0.42) 270deg,
                rgba(148, 163, 184, 0.5) 360deg
            );
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            opacity: 0.92;
            pointer-events: none;
            filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.2));
            animation: otr-honors-learners-halo-spin 3.2s linear infinite;
        }
        .otr-honors-context-grid--single .otr-honors-ctx--learners .otr-honors-ctx-icon::after {
            content: "";
            position: absolute;
            inset: -18px;
            border-radius: 50%;
            border: 2px solid rgba(251, 191, 36, 0.42);
            box-shadow:
                0 0 12px rgba(251, 191, 36, 0.18),
                0 0 22px rgba(148, 163, 184, 0.12),
                inset 0 0 8px rgba(251, 191, 36, 0.06);
            pointer-events: none;
            animation: otr-honors-learners-pulse 1.7s ease-out infinite;
        }
        @keyframes otr-honors-learners-halo-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        @keyframes otr-honors-learners-pulse {
            0% {
                transform: scale(0.78);
                opacity: 1;
                border-color: rgba(251, 191, 36, 0.55);
                box-shadow: 0 0 12px rgba(251, 191, 36, 0.22), inset 0 0 8px rgba(251, 191, 36, 0.08);
            }
            65% {
                transform: scale(1.1);
                opacity: 0.38;
            }
            100% {
                transform: scale(1.26);
                opacity: 0;
                border-color: rgba(251, 191, 36, 0.06);
                box-shadow: 0 0 4px rgba(148, 163, 184, 0.12);
            }
        }
        @keyframes otr-honors-learners-icon-breathe {
            0%, 100% {
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.1),
                    0 5px 16px rgba(0, 0, 0, 0.5),
                    0 0 0 1px rgba(100, 116, 139, 0.35),
                    0 0 18px rgba(251, 191, 36, 0.12);
                text-shadow:
                    0 1px 2px rgba(0, 0, 0, 0.9),
                    0 0 10px rgba(253, 230, 138, 0.22);
            }
            50% {
                box-shadow:
                    inset 0 1px 0 rgba(255, 255, 255, 0.14),
                    0 6px 22px rgba(0, 0, 0, 0.55),
                    0 0 0 1px rgba(253, 230, 138, 0.38),
                    0 0 26px rgba(251, 191, 36, 0.2);
                text-shadow:
                    0 1px 2px rgba(0, 0, 0, 0.9),
                    0 0 14px rgba(253, 230, 138, 0.32),
                    0 0 4px rgba(251, 191, 36, 0.18);
            }
        }
        .otr-honors-context-grid--single .otr-honors-ctx--learners > span {
            position: relative;
            z-index: 1;
            color: #a7f3d0;
            font-size: 0.76rem;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            font-weight: 800;
            padding: 0 0.35rem;
            max-width: 100%;
        }
        .otr-honors-context-grid--single .otr-honors-ctx--learners > strong {
            position: relative;
            z-index: 1;
            font-size: 1.95rem;
            line-height: 1;
            color: #ffffff;
            letter-spacing: -0.03em;
            font-weight: 950;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 8px rgba(0, 0, 0, 0.45);
            padding: 0;
            border: 0;
            background: none;
            box-shadow: none;
        }
        .otr-honors-context-grid--two:not(.otr-honors-context-grid--single) .otr-honors-ctx {
            display: flex;
            flex-direction: column;
            gap: 0.22rem;
            min-height: 0;
            border: 1px solid rgba(56, 189, 248, 0.32);
            border-radius: 12px;
            background: radial-gradient(circle at 8% 12%, rgba(56, 189, 248, 0.2), transparent 40%), rgba(2, 6, 23, 0.78);
            padding: 0.5rem 0.65rem;
            box-shadow: inset 0 0 28px rgba(56, 189, 248, 0.06), 0 4px 12px rgba(0, 0, 0, 0.25);
        }
        .otr-honors-context-grid--two:not(.otr-honors-context-grid--single) .otr-honors-ctx--learners {
            border-color: rgba(34, 197, 94, 0.38);
            background: radial-gradient(circle at 8% 12%, rgba(34, 197, 94, 0.2), transparent 38%), rgba(5, 46, 22, 0.52);
        }
        .otr-honors-ctx-icon {
            width: 1.9rem;
            height: 1.9rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 0.9rem;
            color: #38bdf8;
            background: rgba(56, 189, 248, 0.2);
            border: 1px solid rgba(56, 189, 248, 0.45);
            flex-shrink: 0;
        }
        .otr-honors-ctx-icon--green {
            color: #86efac;
            background: rgba(34, 197, 94, 0.2);
            border-color: rgba(34, 197, 94, 0.45);
        }
        .otr-honors-context-grid--two:not(.otr-honors-context-grid--single) .otr-honors-ctx > span {
            color: #38bdf8;
            font-size: 0.66rem;
            font-weight: 900;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            line-height: 1.18;
        }
        .otr-honors-context-grid--two:not(.otr-honors-context-grid--single) .otr-honors-ctx--learners > span {
            color: #86efac;
        }
        .otr-honors-context-grid--two:not(.otr-honors-context-grid--single) .otr-honors-ctx > span small {
            display: inline;
            margin-left: 0.2rem;
            color: #93c5fd;
            font-size: 0.6rem;
            font-weight: 700;
            text-transform: none;
            letter-spacing: 0;
        }
        .otr-honors-context-grid--two:not(.otr-honors-context-grid--single) .otr-honors-ctx--learners > span small {
            color: #86efac;
        }
        .otr-honors-context-grid--two:not(.otr-honors-context-grid--single) .otr-honors-ctx--standing > strong {
            font-size: 0.85rem;
            line-height: 1.25;
            color: #f8fafc;
            font-weight: 800;
            margin-top: 0;
        }
        .otr-honors-context-grid--two:not(.otr-honors-context-grid--single) .otr-honors-ctx--learners > strong {
            font-size: 1.5rem;
            line-height: 1;
            color: #f8fafc;
            font-weight: 950;
            letter-spacing: -0.03em;
            margin-top: 0;
        }
        .otr-honors-context-grid--two:not(.otr-honors-context-grid--single) .otr-honors-ctx em {
            color: #e2e8f0;
            font-style: normal;
            font-size: 0.66rem;
            font-weight: 600;
        }
        .otr-honors-context-grid--two:not(.otr-honors-context-grid--single) .otr-honors-ctx b {
            display: inline-flex;
            align-self: flex-start;
            padding: 0.1rem 0.4rem;
            border-radius: 9999px;
            border: 1px solid rgba(34, 197, 94, 0.5);
            background: rgba(34, 197, 94, 0.14);
            color: #86efac;
            font-size: 0.6rem;
            font-weight: 800;
        }
        .otr-honors-metrics--three {
            grid-template-columns: 1fr;
            gap: 0.75rem;
        }
        @media (min-width: 860px) {
            .otr-honors-metrics--three {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
        .otr-honors-metrics-bars {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.34rem;
        }
        .otr-honors-disclaimer-inline {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin-top: 0.2rem;
            padding: 0.7rem 0.85rem;
            border-radius: 15px;
            border: 1px solid rgba(56, 189, 248, 0.28);
            background: rgba(2, 6, 23, 0.58);
            font-size: 0.78rem;
            line-height: 1.35;
            color: #cbd5e1;
            font-weight: 600;
        }
        .otr-honors-disclaimer-inline > i {
            width: 2.4rem;
            height: 2.4rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            color: #38bdf8;
            border: 1px solid rgba(56, 189, 248, 0.32);
            background: rgba(14, 165, 233, 0.12);
        }
        .otr-honors-disclaimer-inline strong {
            display: block;
            color: #38bdf8;
            font-size: 0.88rem;
            text-transform: capitalize;
        }
        .otr-honors-disclaimer-inline span {
            display: block;
            margin-top: 0.08rem;
        }
        .otr-honors-summary-btn {
            display: block;
            width: 100%;
            text-align: left;
            cursor: pointer;
            color: inherit;
            font-family: inherit;
            border-radius: 16px;
        }
        .otr-honors-summary-btn .otr-honors-summary {
            display: grid;
            grid-template-columns: auto 1fr auto auto;
            align-items: center;
            gap: 0.7rem;
            margin: 0;
            padding: 0;
        }
        .otr-honors-summary-btn .otr-honors-summary--sm {
            grid-template-columns: 1fr auto auto;
        }
        .otr-honors-summary-btn:hover {
            border-color: rgba(250, 204, 21, 0.55);
            box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
            transform: translateY(-1px);
        }
        .otr-honors-summary-btn:focus-visible {
            outline: 2px solid rgba(250, 204, 21, 0.7);
            outline-offset: 2px;
        }
        .otr-honors-prov-card.otr-honors-summary-btn {
            background: rgba(2, 6, 23, 0.62);
        }
        /* Honors detail modal */
        #otr-honors-detail-modal.modal {
            padding: 0.5rem;
            overflow: hidden;
            align-items: center;
            justify-content: center;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        #otr-honors-detail-modal.modal::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        #otr-honors-detail-modal .modal-content.otr-honors-modal-shell {
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 0;
            background: radial-gradient(ellipse at 50% -20%, rgba(250, 204, 21, 0.18), transparent 45%), radial-gradient(ellipse at 0% 100%, rgba(56, 189, 248, 0.1), transparent 42%), radial-gradient(ellipse at 100% 100%, rgba(217, 119, 6, 0.12), transparent 42%), linear-gradient(165deg, rgba(15, 23, 42, 0.99) 0%, rgba(2, 6, 23, 1) 100%);
            border: 1px solid transparent;
            background-clip: padding-box;
            border-radius: 20px;
            padding: 1.05rem 0.9rem 0.75rem;
            width: min(98vw, 1100px);
            max-width: 1100px;
            max-height: calc(100vh - 1rem);
            overflow: hidden;
            box-shadow: 0 34px 80px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(250, 204, 21, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
            color: #f8fafc;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        #otr-honors-detail-modal .modal-content.otr-honors-modal-shell::-webkit-scrollbar {
            width: 0;
            height: 0;
        }
        #otr-honors-detail-modal .modal-content.otr-honors-modal-shell::before {
            content: "";
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(135deg, rgba(250, 204, 21, 0.7) 0%, rgba(56, 189, 248, 0.45) 50%, rgba(250, 204, 21, 0.7) 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
        }
        .otr-honors-modal-close {
            position: absolute;
            top: 0.75rem;
            right: 0.85rem;
            width: 2rem;
            height: 2rem;
            border-radius: 9999px;
            border: 1px solid rgba(250, 204, 21, 0.45);
            background: rgba(2, 6, 23, 0.85);
            color: #fde047;
            font-size: 1.15rem;
            line-height: 1;
            cursor: pointer;
            z-index: 5;
        }
        .otr-honors-modal-close:hover {
            background: rgba(250, 204, 21, 0.15);
        }
        .otr-honors-modal-head {
            margin: 0 0 0.45rem;
            padding: 0.2rem 2.2rem 0 0;
            text-align: left;
        }
        .otr-honors-modal-titleline {
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: start;
            gap: 0.7rem;
            min-height: 3.7rem;
        }
        .otr-honors-modal-rank-wrap {
            position: relative;
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 0.48rem;
            min-height: 0;
            margin: 0 0.3rem 0 0;
            padding: 0.26rem 0.52rem;
            border: 1.5px solid rgba(250, 204, 21, 0.6);
            border-radius: 12px;
            background:
                radial-gradient(ellipse at 0% 0%, rgba(56, 189, 248, 0.15) 0%, transparent 55%),
                linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #0c1226 100%);
            box-shadow:
                0 10px 22px rgba(0, 0, 0, 0.5),
                inset 0 0 0 1px rgba(250, 204, 21, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
            justify-self: start;
            isolation: isolate;
        }
        .otr-honors-modal-rank-shine,
        .otr-honors-modal-rank-stars {
            display: none;
        }
        .otr-honors-modal-title-block {
            text-align: center;
            justify-self: stretch;
            min-width: 0;
        }
        .otr-honors-modal-title-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: baseline;
            column-gap: 0.65rem;
            width: 100%;
            min-width: 0;
            overflow: hidden;
        }
        .otr-honors-modal-title {
            margin: 0;
            font-size: clamp(1.25rem, 2.5vw, 1.75rem);
            font-weight: 900;
            color: #fde047;
            line-height: 1.12;
            letter-spacing: -0.01em;
            text-align: center;
            grid-column: 1;
            justify-self: stretch;
            width: auto;
            max-width: 100%;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
            box-sizing: border-box;
        }
        .otr-honors-title-tick {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 1.45rem;
            height: 1.45rem;
            margin-left: 0.5rem;
            vertical-align: 0.16rem;
            line-height: 1;
        }
        .otr-honors-title-tick-burst {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.45rem;
            line-height: 1;
            background: linear-gradient(140deg, #60a5fa 0%, #2563eb 50%, #1d4ed8 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
        }
        .otr-honors-title-tick-check {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ffffff;
            font-size: 0.62rem;
            font-weight: 900;
            z-index: 2;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
        }
        .otr-honors-modal-subtitle {
            margin: 0.22rem 0 0;
            font-size: 0.74rem;
            font-weight: 700;
            color: #64748b;
            letter-spacing: 0.07em;
            text-align: center;
        }
        .otr-honors-modal-subtitle i {
            color: #dc2626;
            margin-right: 0.2rem;
        }
        .otr-honors-modal-period {
            font-size: 0.82rem;
            font-weight: 700;
            color: rgba(226, 232, 240, 0.6);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            white-space: nowrap;
            grid-column: 2;
            justify-self: end;
            flex-shrink: 0;
            margin-right: 0.35rem;
            transform: none;
        }
        .otr-honors-modal-rank-label {
            position: relative;
            font-size: 0.62rem;
            font-weight: 900;
            line-height: 1.15;
            text-align: left;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: #fde047;
            margin: 0;
            padding: 0;
            background: transparent;
            border: 0;
            border-radius: 0;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
            box-shadow: none;
            z-index: 2;
        }
        .otr-honors-modal-rank-badge {
            position: relative;
            margin: 0;
            min-width: 0;
            width: 4.85rem;
            height: 4.85rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 3.05rem;
            line-height: 0.95;
            padding: 0 0.08rem;
            color: #0a0805;
            background:
                radial-gradient(circle at 32% 26%, #fffbeb 0%, #fef08a 18%, #facc15 42%, #d97706 82%, #78350f 100%);
            border: 2px solid #92400e;
            font-weight: 950;
            letter-spacing: 0;
            word-spacing: 0.22em;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
            box-shadow:
                0 5px 12px rgba(0, 0, 0, 0.5),
                inset 0 0 0 1.5px rgba(255, 255, 255, 0.4),
                inset 0 -5px 8px rgba(120, 53, 15, 0.45);
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 -1px 0 rgba(120, 53, 15, 0.45);
            z-index: 2;
        }
        #otr-honors-detail-modal .otr-honors-modal-head,
        #otr-honors-detail-modal .otr-honors-modal-footer {
            flex-shrink: 0;
        }
        .otr-honors-modal-body {
            margin: 0;
            flex: 1 1 auto;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
        #otr-honors-detail-modal .otr-honors-detail-pane,
        #otr-honors-detail-modal .otr-honors-showcase,
        #otr-honors-detail-modal .otr-honors-insight,
        #otr-honors-detail-modal .otr-honors-lead-panel,
        #otr-honors-detail-modal .otr-honors-metrics--three {
            min-width: 0;
            max-width: 100%;
        }
        @media (min-width: 880px) {
            #otr-honors-detail-modal .otr-honors-showcase {
                grid-template-columns: minmax(0, 236px) minmax(0, 1fr);
            }
        }
        #otr-honors-detail-modal .otr-honors-podium-strip {
            overflow: hidden;
            max-width: 100%;
            box-sizing: border-box;
            grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 6.5rem);
            column-gap: 0.55rem;
            padding-right: 0.4rem;
        }
        #otr-honors-detail-modal .otr-honors-podium-trophy {
            width: 100%;
            max-width: 6.5rem;
            margin-right: 0;
        }
        .otr-honors-detail-pane {
            position: relative;
            display: grid;
            gap: 0.55rem;
            padding-top: 0;
        }
        .otr-honors-modal-rank-badge.otr-honors-card-rank--prov {
            min-width: 0;
            padding: 0 0.6rem;
            background: linear-gradient(160deg, #93c5fd 0%, #38bdf8 50%, #0ea5e9 100%);
            color: #0f172a;
        }
        .otr-honors-modal-footer {
            margin-top: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.6rem;
            padding: 0.45rem 0.65rem;
            border-radius: 12px;
            border: 1px solid rgba(56, 189, 248, 0.3);
            background: rgba(2, 6, 23, 0.6);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        }
        .otr-honors-verified-bar {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            min-width: 0;
            flex: 1 1 auto;
        }
        .otr-honors-verified-bar strong {
            display: block;
            color: #60a5fa;
            font-size: 0.78rem;
            font-weight: 800;
        }
        .otr-honors-verified-bar span {
            display: block;
            margin-top: 0.02rem;
            color: #cbd5e1;
            font-size: 0.65rem;
            font-weight: 600;
            line-height: 1.22;
        }
        .otr-honors-modal-nav {
            display: inline-flex;
            gap: 0.4rem;
            flex-shrink: 0;
        }
        .otr-honors-nav-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.32rem;
            padding: 0.4rem 0.85rem;
            border-radius: 9999px;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(15, 23, 42, 0.85);
            color: #e2e8f0;
            font-weight: 700;
            font-size: 0.72rem;
            cursor: pointer;
            transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
        }
        .otr-honors-nav-btn:hover {
            border-color: rgba(250, 204, 21, 0.6);
            background: rgba(2, 6, 23, 0.95);
            transform: translateY(-1px);
        }
        .otr-honors-nav-btn--primary {
            border-color: rgba(250, 204, 21, 0.55);
            color: #0f172a;
            background: linear-gradient(160deg, #fef08a 0%, #facc15 50%, #d97706 100%);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
        }
        .otr-honors-nav-btn--primary:hover,
        .otr-honors-nav-btn--primary:active,
        .otr-honors-nav-btn--primary:focus {
            color: #0f172a;
            background: linear-gradient(160deg, #fef9c3 0%, #facc15 50%, #b45309 100%);
            border-color: rgba(217, 119, 6, 0.85);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
            transform: translateY(-1px);
        }
        .otr-honors-nav-btn:focus-visible {
            outline: 2px solid rgba(250, 204, 21, 0.65);
            outline-offset: 2px;
        }
        .otr-honors-metrics--summary {
            grid-template-columns: 1fr;
            gap: 0.32rem;
        }
        .otr-honors-metrics--summary .otr-honors-metric {
            min-height: 0;
            padding: 0.55rem 0.7rem;
        }
        .otr-honors-metrics--summary .otr-honors-metric strong {
            font-size: 0.9rem;
            letter-spacing: 0;
        }
        @media (min-width: 720px) {
            .otr-honors-metrics--summary {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
        .otr-honors-card-rank {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2.05rem;
            height: 1.85rem;
            padding: 0 0.2rem;
            border-radius: 8px;
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0;
            word-spacing: 0.2em;
            color: #0f172a;
            background: linear-gradient(160deg, #fef08a 0%, #facc15 45%, #d97706 100%);
            margin-bottom: 0.35rem;
        }
        .otr-honors-school {
            margin: 0 0 0.2rem;
            font-size: 0.98rem;
            font-weight: 800;
            color: #f8fafc;
            line-height: 1.25;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        .otr-honors-prov {
            margin: 0 0 0.45rem;
            font-size: 0.74rem;
            font-weight: 600;
            color: #94a3b8;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .otr-honors-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.28rem;
            margin-bottom: 0.45rem;
            min-height: 1.35rem;
        }
        .otr-honors-badge {
            font-size: 0.58rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 0.12rem 0.38rem;
            border-radius: 9999px;
            border: 1px solid rgba(56, 189, 248, 0.35);
            color: #bae6fd;
            background: rgba(14, 116, 144, 0.18);
        }
        .otr-honors-badge--gold {
            border-color: rgba(250, 204, 21, 0.42);
            color: #fef9c3;
            background: rgba(120, 53, 15, 0.2);
        }
        .otr-honors-card--rich {
            padding: 0.85rem 0.72rem 0.78rem;
        }
        .otr-honors-lead {
            display: flex;
            align-items: flex-start;
            gap: 0.55rem;
            margin: 0 0 0.55rem;
            padding: 0.5rem 0.45rem;
            border-radius: 10px;
            border: 1px solid rgba(148, 163, 184, 0.2);
            background: rgba(2, 6, 23, 0.45);
        }
        .otr-honors-lead--sm {
            padding: 0.35rem 0.4rem;
            margin-bottom: 0.4rem;
        }
        .otr-honors-lead--sm .otr-honors-lead-avatar {
            width: 2.1rem;
            height: 2.1rem;
            min-width: 2.1rem;
        }
        .otr-honors-lead--sm .otr-honors-lead-initials {
            font-size: 0.62rem;
        }
        .otr-honors-lead-avatar {
            width: 2.55rem;
            height: 2.55rem;
            min-width: 2.55rem;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(145deg, rgba(56, 189, 248, 0.28), rgba(250, 204, 21, 0.18));
            border: 1px solid rgba(250, 204, 21, 0.32);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
        }
        .otr-honors-lead-initials {
            font-size: 0.75rem;
            font-weight: 900;
            letter-spacing: 0.02em;
            color: #f8fafc;
        }
        .otr-honors-lead-copy {
            flex: 1 1 auto;
            min-width: 0;
        }
        .otr-honors-lead-proviso {
            font-size: 0.61rem;
            line-height: 1.3;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #94a3b8;
            margin: 0 0 0.2rem;
        }
        .otr-honors-lead-name {
            font-size: 0.93rem;
            font-weight: 600;
            color: var(--otr-gold);
            line-height: 1.2;
            margin: 0 0 0.1rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .otr-honors-lead-title {
            font-size: 0.7rem;
            line-height: 1.3;
            font-weight: 400;
            color: #cbd5e1;
            margin: 0;
        }
        .otr-honors-context-grid {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
            margin: 0.35rem 0 0.5rem;
        }
        .otr-honors-ctx {
            display: block;
            font-size: 0.67rem;
            line-height: 1.35;
            color: #94a3b8;
        }
        .otr-honors-ctx strong {
            display: block;
            font-size: 0.78rem;
            color: #e2e8f0;
            font-weight: 700;
            margin-top: 0.1rem;
        }
        .otr-honors-subline {
            margin: 0.15rem 0 0.65rem;
            max-width: 52rem;
            text-align: center;
            font-size: 0.8rem;
            line-height: 1.5;
            color: #b4c2d8;
            font-weight: 600;
            margin-left: auto;
            margin-right: auto;
        }
        .otr-honors-spotlight-tagline strong {
            color: #fde68a;
            font-weight: 800;
        }
        .otr-honors-prov-meta {
            font-size: 0.69rem;
            line-height: 1.4;
            color: #a8b7cd;
            margin: 0.2rem 0 0.15rem;
        }
        .otr-honors-prov-card--rich {
            padding: 0.6rem 0.52rem 0.55rem;
        }
        .otr-honors-footnote--full {
            text-align: left;
            max-width: 62rem;
            line-height: 1.62;
            font-size: 0.74rem;
            color: #8ea0bb;
        }
        .otr-honors-footnote--full em {
            font-style: normal;
            font-weight: 700;
            color: #cbd5e1;
        }
        .otr-honors-metrics {
            display: grid;
            gap: 0.28rem;
        }
        .otr-honors-metric {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 0.32rem;
            min-height: 0;
            padding: 0.5rem 0.65rem 0.55rem;
            border-radius: 12px;
            border: 1px solid rgba(250, 204, 21, 0.42);
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.92));
            color: #cbd5e1;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        .otr-honors-metric-label {
            display: block;
            color: #fde047;
            font-size: 0.64rem;
            line-height: 1.18;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .otr-honors-metric-label small {
            display: inline;
            margin-left: 0.2rem;
            color: #cbd5e1;
            font-size: 0.58rem;
            font-weight: 700;
            text-transform: none;
            letter-spacing: 0;
        }
        .otr-honors-metric-row {
            display: flex;
            align-items: center;
            gap: 0.55rem;
        }
        .otr-honors-metric-medal {
            width: 2.4rem;
            height: 2.4rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 0.92rem;
            font-weight: 950;
            color: #1f2937;
            flex-shrink: 0;
            position: relative;
        }
        .otr-honors-metric-medal--gold {
            background: radial-gradient(circle at 35% 28%, #fffbeb 0%, #fef08a 22%, #facc15 50%, #b45309 88%, #78350f 100%);
            border: 1.5px solid #92400e;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.32), inset 0 -3px 6px rgba(120, 53, 15, 0.55);
        }
        .otr-honors-metric-medal--chart {
            background: radial-gradient(circle at 35% 28%, #fffbeb 0%, #fef08a 22%, #facc15 50%, #b45309 88%, #78350f 100%);
            border: 1.5px solid #92400e;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.32), inset 0 -3px 6px rgba(120, 53, 15, 0.55);
            font-size: 1.02rem;
        }
        .otr-honors-metric-medal-ring {
            position: absolute;
            inset: 9%;
            border-radius: 50%;
            border: 1px dashed rgba(120, 53, 15, 0.55);
            pointer-events: none;
        }
        .otr-honors-metric-medal-ring::before,
        .otr-honors-metric-medal-ring::after {
            content: "";
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 0.55rem;
            height: 1.05rem;
            background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.3) 0%, transparent 50%), linear-gradient(160deg, #fef08a 0%, #ca8a04 60%, #78350f 100%);
            border: 1px solid #92400e;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
        }
        .otr-honors-metric-medal-ring::before {
            left: -0.32rem;
            border-radius: 80% 20% 80% 20% / 70% 30% 70% 30%;
            transform: translateY(-50%) rotate(-22deg);
        }
        .otr-honors-metric-medal-ring::after {
            right: -0.32rem;
            border-radius: 20% 80% 20% 80% / 30% 70% 30% 70%;
            transform: translateY(-50%) rotate(22deg);
        }
        .otr-honors-metric-medal-num {
            position: relative;
            z-index: 2;
            font-size: 0.95rem;
            font-weight: 950;
            color: #1c1004;
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45), 0 -1px 0 rgba(120, 53, 15, 0.4);
            line-height: 1;
        }
        .otr-honors-metric-figure {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }
        .otr-honors-metric-figure strong {
            color: #f8fafc;
            font-size: 1.35rem;
            line-height: 1;
            font-weight: 950;
            letter-spacing: -0.02em;
        }
        .otr-honors-metric-figure em {
            margin-top: 0.14rem;
            color: #dbeafe;
            font-size: 0.62rem;
            font-style: normal;
            font-weight: 600;
            line-height: 1.2;
        }
        .otr-honors-mini-bar {
            height: 0.32rem;
            border-radius: 9999px;
            background: rgba(30, 41, 59, 0.95);
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.16);
            margin-top: 0.08rem;
        }
        .otr-honors-mini-bar > span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #b45309 0%, #facc15 50%, #fef08a 100%);
        }
        .otr-honors-bar {
            height: 5px;
            border-radius: 9999px;
            background: rgba(30, 41, 59, 0.85);
            overflow: hidden;
            margin-top: 0.12rem;
        }
        .otr-honors-bar > span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #38bdf8, #fde047);
            min-width: 0;
        }
        .otr-honors-prov-grid {
            display: grid;
            grid-template-columns: repeat(1, minmax(0, 1fr));
            gap: 0.8rem;
        }
        @media (min-width: 680px) {
            .otr-honors-prov-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
        @media (min-width: 900px) {
            .otr-honors-prov-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }
        .otr-honors-prov-card {
            border-radius: 12px;
            border: 1px solid rgba(148, 163, 184, 0.26);
            background: rgba(2, 6, 23, 0.62);
            padding: 0.62rem 0.58rem;
        }
        .otr-honors-prov-name {
            margin: 0 0 0.35rem;
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #fde047;
        }
        .otr-honors-footnote {
            text-align: center;
            margin: 0.85rem 0 0;
            font-size: 0.65rem;
            line-height: 1.45;
            color: #64748b;
            max-width: 40rem;
            margin-left: auto;
            margin-right: auto;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
        }
        .otr-honors-footnote--left {
            text-align: left;
            margin-left: 0;
            margin-right: 0;
            max-width: none;
        }
        @media (max-width: 640px) {
            #otr-honors-detail-modal.modal.active {
                align-items: stretch;
                justify-content: flex-start;
                padding: 0;
                overflow: hidden;
            }
            #otr-honors-detail-modal .modal-content.otr-honors-modal-shell {
                width: 100%;
                max-width: 100%;
                height: 100dvh;
                max-height: 100dvh;
                min-height: 0;
                margin: 0;
                border-radius: 0;
                border-left: none;
                border-right: none;
                border-top: none;
                padding:
                    calc(0.55rem + env(safe-area-inset-top, 0px))
                    0.65rem
                    calc(0.55rem + env(safe-area-inset-bottom, 0px));
            }
            .otr-honors-modal-close {
                top: calc(0.55rem + env(safe-area-inset-top, 0px));
                right: 0.65rem;
            }
            .otr-honors-modal-head {
                padding-right: 2.35rem;
                margin-bottom: 0.35rem;
            }
            .otr-honors-modal-body {
                padding-right: 0.1rem;
            }
            .otr-honors-lead-photo {
                aspect-ratio: 1 / 1;
                max-height: min(52vw, 14rem);
                object-position: center 15%;
            }
            .otr-honors-lead-panel-name {
                font-size: 0.92rem;
                white-space: normal;
                line-height: 1.25;
            }
            .otr-honors-lead-panel-geo {
                flex-direction: column;
                gap: 0.35rem;
            }
            .otr-honors-lead-geo-sep {
                display: none;
            }
            .otr-honors-context-grid--two.otr-honors-context-grid--single {
                grid-template-columns: 1fr;
            }
            .otr-honors-metrics--three {
                grid-template-columns: 1fr;
                gap: 0.45rem;
            }
            .otr-honors-modal-footer {
                flex-direction: column;
                align-items: stretch;
                gap: 0.55rem;
                padding: 0.55rem 0.5rem;
            }
            .otr-honors-verified-bar span {
                font-size: 0.62rem;
            }
            .otr-honors-modal-nav {
                width: 100%;
                justify-content: space-between;
            }
            .otr-honors-nav-btn {
                flex: 1 1 0;
                min-height: 2.65rem;
                font-size: 0.74rem;
            }
            .otr-honors-modal-titleline {
                grid-template-columns: 1fr;
                justify-items: center;
                gap: 0.45rem;
            }
            .otr-honors-modal-rank-wrap {
                justify-self: center;
                margin-left: 0;
                margin-right: 0;
                margin-top: 0;
                border-radius: 14px;
            }
            .otr-honors-modal-title {
                white-space: normal;
            }
            .otr-honors-modal-title-row {
                grid-template-columns: 1fr;
                row-gap: 0.18rem;
            }
            .otr-honors-modal-title {
                grid-column: 1;
            }
            .otr-honors-modal-period {
                grid-column: 1;
                justify-self: center;
                margin-right: 0;
                transform: none;
            }
        }
        .prov-month-toolbar {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.65rem;
            flex-wrap: wrap;
            margin: 0 auto 1.35rem;
        }
        .prov-month-label {
            font-size: 0.72rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #cbd5e1;
            font-weight: 700;
        }
        .prov-month-select {
            min-width: 11.5rem;
            border-radius: 12px;
            border: 1px solid rgba(148, 163, 184, 0.42);
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(2, 6, 23, 0.98));
            color: #e2e8f0;
            color-scheme: dark;
            font-size: 0.84rem;
            padding: 0.5rem 0.75rem;
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .prov-month-select option {
            background: #0f172a;
            color: #e2e8f0;
        }
        .prov-month-select:focus {
            border-color: rgba(250, 204, 21, 0.62);
            box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.18);
        }
        .prov-month-apply-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            border-radius: 12px;
            border: 1px solid rgba(250, 204, 21, 0.45);
            background: linear-gradient(155deg, rgba(250, 204, 21, 0.18), rgba(15, 23, 42, 0.95));
            color: #fde047;
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            padding: 0.52rem 0.8rem;
            cursor: pointer;
            transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
        }
        .prov-month-apply-btn:hover {
            transform: translateY(-1px);
            border-color: rgba(250, 204, 21, 0.68);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), 0 0 12px rgba(250, 204, 21, 0.22);
        }
        .prov-month-notice {
            max-width: 44rem;
            margin: 0 auto 1.25rem;
            padding: 0.65rem 0.95rem;
            border-radius: 14px;
            border: 1px solid rgba(148, 163, 184, 0.35);
            background: rgba(15, 23, 42, 0.65);
            color: #cbd5e1;
            font-size: 0.84rem;
            line-height: 1.55;
            text-align: center;
        }
        .prov-month-notice--wait {
            border-color: rgba(250, 204, 21, 0.35);
            background: linear-gradient(160deg, rgba(250, 204, 21, 0.1), rgba(15, 23, 42, 0.92));
            color: #e2e8f0;
        }

        /* Horizontal strip scroll affordance (provincial Top 10 + honors carousel): edge fade only — no arrow chrome */
        .otr-x-scroll-hint {
            position: relative;
            width: 100%;
            box-sizing: border-box;
        }
        @media (max-width: 760px) {
            .otr-x-scroll-hint::after {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0.42rem;
                width: clamp(2rem, 8vw, 2.85rem);
                pointer-events: none;
                z-index: 3;
                border-radius: 0 14px 14px 0;
                background: linear-gradient(
                    270deg,
                    rgba(2, 6, 23, 0.97) 0%,
                    rgba(2, 6, 23, 0.72) 35%,
                    rgba(2, 6, 23, 0) 100%
                );
            }
            .otr-x-scroll-hint::before {
                content: "";
                position: absolute;
                top: 50%;
                right: 0.55rem;
                width: 2px;
                height: clamp(2rem, 28%, 3.25rem);
                margin-top: -0.65rem;
                pointer-events: none;
                z-index: 4;
                border-radius: 999px;
                background: linear-gradient(
                    180deg,
                    transparent,
                    rgba(250, 204, 21, 0.38),
                    rgba(253, 224, 71, 0.52),
                    rgba(250, 204, 21, 0.38),
                    transparent
                );
                opacity: 0.58;
            }
            .otr-x-scroll-hint--honors::after {
                bottom: 0.35rem;
            }
        }

        /* -- Provincial Top 10 Button Grid -- */
        .prov-top10-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: stretch;
            gap: 1.15rem;
            max-width: 86rem;
            margin: 0 auto 3.45rem;
            padding: 0 0.2rem;
        }
        #provincial-champions .prov-top10-grid {
            margin-bottom: 1.25rem;
        }

        .prov-top10-reward-hook {
            position: relative;
            z-index: 1;
            width: fit-content;
            max-width: calc(100% - 1.25rem);
            margin: clamp(1.75rem, 4vw, 2.75rem) auto clamp(2.5rem, 5vw, 3.25rem);
            padding: 0.72rem 1.05rem 0.78rem;
            text-align: center;
            border-radius: 12px;
            background: rgba(12, 18, 36, 0.94);
            border: 1px solid rgba(249, 115, 22, 0.38);
            border-top: none;
            box-shadow: none;
        }
        .prov-top10-reward-hook::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            border-radius: 12px 12px 0 0;
            background: linear-gradient(90deg, #fb923c 0%, #f97316 32%, #ef4444 68%, #fb923c 100%);
            pointer-events: none;
        }
        .prov-top10-reward-hook__q {
            margin: 0 0 0.45rem;
            font-size: clamp(0.88rem, 2vw, 1.02rem);
            font-weight: 600;
            line-height: 1.4;
            letter-spacing: 0.01em;
            color: #facc15;
            -webkit-text-fill-color: #facc15;
            text-shadow: none;
        }
        .prov-top10-reward-hook__a {
            margin: 0;
            font-size: clamp(0.76rem, 1.75vw, 0.86rem);
            font-weight: 400;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.88);
            -webkit-text-fill-color: rgba(255, 255, 255, 0.88);
            text-shadow: none;
        }
        .prov-top10-reward-hook__em {
            color: rgba(255, 255, 255, 0.96);
            -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
            font-weight: 500;
            text-shadow: none;
        }
        @media (min-width: 900px) {
            .prov-top10-reward-hook__a {
                white-space: nowrap;
                font-size: 0.82rem;
            }
        }
        @media (max-width: 899px) {
            .prov-top10-reward-hook {
                width: 100%;
                max-width: 36rem;
            }
        }
        @media (min-width: 761px) {
            #provincial-champions .prov-top10-grid {
                display: grid;
                grid-template-columns: repeat(8, 5.375rem);
                justify-content: center;
                column-gap: 0.55rem;
                row-gap: 1.15rem;
                max-width: 46rem;
                margin-left: auto;
                margin-right: auto;
                margin-bottom: 1.25rem;
            }
            #provincial-champions .prov-top10-btn {
                width: 100%;
                max-width: none;
            }
            #provincial-champions .prov-top10-btn--ict { grid-row: 1; grid-column: 2 / span 2; }
            #provincial-champions .prov-top10-btn--ajk { grid-row: 1; grid-column: 4 / span 2; }
            #provincial-champions .prov-top10-btn--gb { grid-row: 1; grid-column: 6 / span 2; }
            #provincial-champions .prov-top10-btn--punjab { grid-row: 2; grid-column: 1 / span 2; }
            #provincial-champions .prov-top10-btn--kpk { grid-row: 2; grid-column: 3 / span 2; }
            #provincial-champions .prov-top10-btn--sindh { grid-row: 2; grid-column: 5 / span 2; }
            #provincial-champions .prov-top10-btn--balochistan { grid-row: 2; grid-column: 7 / span 2; }
        }
        .prov-top10-btn {
            --prov-accent: #facc15;
            --prov-accent-soft: rgba(250, 204, 21, 0.26);
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            justify-items: center;
            row-gap: 0.5rem;
            width: 10.75rem;
            max-width: 12.5rem;
            min-width: 0;
            min-height: 7.6rem;
            flex: 0 0 auto;
            padding: 0.95rem 0.95rem 0.9rem;
            border-radius: 16px;
            border: 1px solid color-mix(in srgb, var(--prov-accent) 38%, rgba(148,163,184,0.4));
            cursor: pointer;
            font-family: inherit;
            text-align: center;
            overflow: hidden;
            background:
                linear-gradient(180deg, color-mix(in srgb, var(--prov-accent) 10%, transparent) 0%, transparent 42%),
                linear-gradient(150deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 55%, rgba(8, 14, 33, 1) 100%);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.14),
                inset 0 -1px 0 rgba(255,255,255,0.04),
                0 10px 20px rgba(0,0,0,0.42);
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
        }
        .prov-top10-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(250,204,21,0.12) 0%, transparent 55%);
            opacity: 0;
            transition: opacity 0.2s;
        }
        .prov-top10-btn::after {
            content: '';
            position: absolute;
            top: -120%;
            left: -40%;
            width: 50%;
            height: 260%;
            transform: rotate(22deg);
            background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.26) 48%, rgba(255,255,255,0) 100%);
            opacity: 0;
            transition: opacity 0.18s ease;
            pointer-events: none;
        }
        .prov-top10-btn:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--prov-accent) 62%, #fff 10%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(255,255,255,0.08), 0 14px 28px rgba(0,0,0,0.48), 0 0 14px color-mix(in srgb, var(--prov-accent) 18%, transparent); }
        .prov-top10-btn:hover::before { opacity: 1; }
        .prov-top10-btn:hover::after { opacity: 1; animation: prov-btn-sheen 860ms ease; }
        .prov-top10-btn:active { transform: translateY(1px); }
        .prov-top10-btn-icon {
            width: 2.8rem;
            height: 2.8rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.06rem;
            background: linear-gradient(140deg, color-mix(in srgb, var(--prov-accent) 28%, rgba(15,23,42,0.35)) 0%, rgba(15,23,42,0.22) 100%);
            border: 1px solid color-mix(in srgb, var(--prov-accent) 64%, transparent);
            color: color-mix(in srgb, var(--prov-accent) 84%, #fff 10%);
            flex-shrink: 0;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 0 4px color-mix(in srgb, var(--prov-accent) 14%, transparent);
        }
        .prov-top10-btn-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            object-position: center;
            padding: 0.2rem;
            background: rgba(15, 23, 42, 0.35);
            border-radius: 50%;
            display: block;
        }
        .prov-top10-btn-label {
            display: block;
            font-size: 0.94rem;
            font-weight: 900;
            letter-spacing: 0.02em;
            color: #ffffff;
            text-align: center;
            line-height: 1.22;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
            margin-top: 0.02rem;
        }
        .prov-top10-btn-sub {
            position: static;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 4.05rem;
            padding: 0.14rem 0.5rem;
            border-radius: 9999px;
            border: 1px solid color-mix(in srgb, var(--prov-accent) 55%, transparent);
            background: linear-gradient(145deg, color-mix(in srgb, var(--prov-accent) 20%, #0f172a 80%) 0%, rgba(2, 6, 23, 0.9) 100%);
            font-size: 0.6rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: color-mix(in srgb, var(--prov-accent) 84%, #fff 22%);
            opacity: 1;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
        }
        .prov-top10-btn--punjab { --prov-accent: #34d399; --prov-accent-soft: rgba(52, 211, 153, 0.33); }
        .prov-top10-btn--sindh { --prov-accent: #fbbf24; --prov-accent-soft: rgba(251, 191, 36, 0.33); }
        .prov-top10-btn--kpk { --prov-accent: #22d3ee; --prov-accent-soft: rgba(34, 211, 238, 0.33); }
        .prov-top10-btn--balochistan { --prov-accent: #c4b5fd; --prov-accent-soft: rgba(196, 181, 253, 0.33); }
        .prov-top10-btn--ajk { --prov-accent: #4ade80; --prov-accent-soft: rgba(74, 222, 128, 0.33); }
        .prov-top10-btn--gb { --prov-accent: #7dd3fc; --prov-accent-soft: rgba(125, 211, 252, 0.33); }
        .prov-top10-btn--ict {
            --prov-accent: #38bdf8;
            --prov-accent-soft: rgba(56, 189, 248, 0.4);
            /* Must stay overflow:hidden like other provinces so ::after sheen stays inside the card */
            overflow: hidden;
            z-index: 1;
            min-height: 8.1rem;
            border-width: 1.8px;
            background:
                linear-gradient(180deg, rgba(125, 211, 252, 0.2) 0%, transparent 40%),
                linear-gradient(150deg, rgba(14, 50, 88, 0.95) 0%, rgba(10, 28, 56, 0.98) 56%, rgba(5, 16, 37, 1) 100%);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.2),
                inset 0 -1px 0 rgba(255,255,255,0.08),
                0 12px 26px rgba(0,0,0,0.5),
                0 0 20px rgba(56, 189, 248, 0.28);
            animation: prov-ict-breathe 2.5s ease-in-out infinite;
        }
        @keyframes prov-ict-breathe {
            0%, 100% {
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.2),
                    inset 0 -1px 0 rgba(255,255,255,0.08),
                    0 12px 26px rgba(0,0,0,0.5),
                    0 0 18px rgba(56, 189, 248, 0.25);
            }
            50% {
                box-shadow:
                    inset 0 1px 0 rgba(255,255,255,0.24),
                    inset 0 -1px 0 rgba(255,255,255,0.1),
                    0 14px 30px rgba(0,0,0,0.55),
                    0 0 32px rgba(56, 189, 248, 0.45);
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .prov-top10-btn--ict { animation: none; }
        }
        .prov-top10-btn-capital-ribbon {
            position: absolute;
            top: 0.38rem;
            right: 0.45rem;
            z-index: 2;
            padding: 0.1rem 0.38rem 0.12rem;
            border-radius: 5px;
            font-size: 0.52rem;
            font-weight: 900;
            letter-spacing: 0.12em;
            line-height: 1;
            text-transform: uppercase;
            color: #1c1917;
            background: linear-gradient(180deg, #fef08a 0%, #eab308 48%, #ca8a04 100%);
            box-shadow:
                0 0 0 1px rgba(120, 53, 15, 0.35),
                0 2px 4px rgba(0,0,0,0.25),
                0 0 12px rgba(234, 179, 8, 0.4);
        }
        .prov-top10-btn--ict .prov-top10-btn-icon {
            margin-top: 0.15rem;
            width: 3rem;
            height: 3rem;
            font-size: 1.14rem;
            border-width: 1.3px;
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.28),
                0 0 0 5px rgba(56, 189, 248, 0.18),
                0 0 18px rgba(56, 189, 248, 0.28);
        }
        .prov-top10-btn--ict .prov-top10-btn-label {
            color: #e0f2fe;
            letter-spacing: 0.03em;
        }
        .prov-top10-btn--ict .prov-top10-btn-sub {
            border-color: rgba(56, 189, 248, 0.7);
            color: #bae6fd;
            background: linear-gradient(145deg, rgba(56, 189, 248, 0.28) 0%, rgba(2, 6, 23, 0.9) 100%);
        }
        .prov-top10-btn--ict::before {
            opacity: 1;
            background: linear-gradient(135deg, rgba(125, 211, 252, 0.24) 0%, transparent 58%);
        }
        .prov-top10-btn--ict:hover {
            animation: none;
            transform: translateY(-4px) scale(1.02);
            border-color: rgba(125, 211, 252, 0.9);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.24),
                inset 0 -1px 0 rgba(255,255,255,0.1),
                0 18px 36px rgba(0,0,0,0.58),
                0 0 40px rgba(56, 189, 248, 0.48);
        }
        @keyframes prov-btn-sheen {
            0% { transform: translateX(0) rotate(22deg); }
            100% { transform: translateX(280%) rotate(22deg); }
        }
        @media (max-width: 760px) {
            .prov-top10-grid {
                display: flex;
                flex-wrap: nowrap;
                justify-content: flex-start;
                overflow-x: auto;
                gap: 0.82rem;
                padding: 0 0.25rem 0.4rem;
                scrollbar-width: thin;
                scroll-padding-inline: 0.35rem;
                overscroll-behavior-x: contain;
                touch-action: pan-x pan-y;
            }
            .prov-top10-grid::-webkit-scrollbar { height: 8px; }
            .prov-top10-grid::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.6); border-radius: 9999px; }
            .prov-top10-grid::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.65); border-radius: 9999px; }
            .prov-top10-btn {
                flex: 0 0 10.6rem;
                min-height: 6.6rem;
                padding: 0.78rem 0.74rem 0.78rem;
            }
            .prov-top10-btn-icon {
                width: 2.65rem;
                height: 2.65rem;
            }
            .prov-top10-btn-label {
                font-size: 0.92rem;
            }
            .otr-honors-spotlight-body .prov-top10-grid .otr-honors-national-tile .prov-top10-btn-icon {
                width: 3.2rem;
                height: 3.2rem;
            }
            .otr-honors-spotlight-body .prov-top10-grid .otr-honors-national-tile--minimal .prov-top10-btn-icon {
                width: 4.25rem;
                height: 4.25rem;
            }
            .otr-honors-spotlight-body .prov-top10-grid .otr-honors-national-tile.prov-top10-btn--ict .prov-top10-btn-icon {
                width: 3.4rem;
                height: 3.4rem;
            }
            .otr-honors-spotlight-body .prov-top10-grid .otr-honors-national-tile--minimal.prov-top10-btn--ict .prov-top10-btn-icon {
                width: 4.45rem;
                height: 4.45rem;
            }
            .otr-honors-national-tile .otr-honors-national-tile__rank-img {
                width: 84%;
                height: 84%;
            }
            .otr-honors-national-tile .otr-honors-national-tile__rank-pill {
                font-size: 0.58rem;
                min-width: 1.35rem;
                padding: 0.14rem 0.32rem;
            }
            .otr-honors-national-tile .otr-honors-national-tile__rank {
                font-size: clamp(0.92rem, 4vw, 1.12rem);
            }
            .otr-honors-national-tile--minimal {
                flex: 0 0 5.85rem;
                min-height: 7.35rem;
                padding: 0.62rem 0.5rem;
            }
            .otr-honors-spotlight-body .prov-top10-grid .otr-honors-national-tile--minimal .prov-top10-btn-icon,
            .otr-honors-spotlight-body .prov-top10-grid .otr-honors-national-tile--minimal .otr-honors-national-tile__icon {
                width: 4.65rem;
                height: 4.65rem;
            }
            .otr-honors-spotlight-body .prov-top10-grid .otr-honors-national-tile--minimal.prov-top10-btn--ict .prov-top10-btn-icon,
            .otr-honors-spotlight-body .prov-top10-grid .otr-honors-national-tile--minimal.prov-top10-btn--ict .otr-honors-national-tile__icon {
                width: 4.65rem;
                height: 4.65rem;
            }
            .otr-honors-national-tile .prov-top10-btn-label {
                font-size: 0.78rem;
            }
        }

        /* -- Provincial Spotlight Grid -- */
        .prov-spotlight-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
            gap: 1.2rem;
            max-width: 90rem;
            margin: 0 auto;
            padding: 0 1rem;
        }
        @media (min-width: 1280px) { .prov-spotlight-grid { grid-template-columns: repeat(4, 1fr); } }
        @media (min-width: 1024px) and (max-width: 1279px) { .prov-spotlight-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (min-width: 640px) and (max-width: 1023px) { .prov-spotlight-grid { grid-template-columns: repeat(2, 1fr); } }

        /* -- Individual spotlight card -- */
        .prov-spotlight-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1.6rem 1.2rem 1.4rem;
            border-radius: 18px;
            border: 1px solid rgba(250,204,21,0.22);
            background:
                linear-gradient(155deg, rgba(250,204,21,0.06) 0%, rgba(15,23,42,0.94) 45%, rgba(10,12,26,0.96) 100%);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,0.06),
                0 10px 40px rgba(0,0,0,0.4);
            backdrop-filter: blur(12px);
            overflow: hidden;
            transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .prov-spotlight-card:hover {
            transform: translateY(-4px);
            border-color: rgba(250,204,21,0.45);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 48px rgba(0,0,0,0.5), 0 0 24px rgba(250,204,21,0.1);
        }
        .prov-spotlight-card::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, #fde047 30%, #eab308 70%, transparent);
            opacity: 0.6;
        }

        /* Province badge at top of card */
        .prov-spotlight-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.28rem 0.75rem;
            border-radius: 9999px;
            background: rgba(250,204,21,0.12);
            border: 1px solid rgba(250,204,21,0.3);
            font-size: 0.64rem;
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #fde047;
            margin-bottom: 1.1rem;
        }
        .prov-spotlight-badge-dot {
            width: 5px; height: 5px;
            border-radius: 50%;
            background: #fde047;
            flex-shrink: 0;
        }

        /* Photo */
        .prov-spotlight-photo-wrap {
            position: relative;
            margin-bottom: 1rem;
        }
        .prov-spotlight-photo {
            width: 76px;
            height: 76px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(250,204,21,0.5);
            box-shadow: 0 0 0 4px rgba(15,23,42,0.9), 0 8px 20px rgba(0,0,0,0.45);
            display: block;
        }
        .prov-spotlight-role-badge {
            position: absolute;
            bottom: -4px;
            right: -6px;
            background: linear-gradient(135deg, #fde047, #eab308);
            color: #0a0c1a;
            font-size: 0.52rem;
            font-weight: 900;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            padding: 0.18rem 0.45rem;
            border-radius: 9999px;
            border: 2px solid #0a0c1a;
            white-space: nowrap;
        }

        /* Name + school + location */
        .prov-spotlight-name {
            font-size: clamp(0.92rem, 1.8vw, 1.05rem);
            font-weight: 800;
            color: #f1f5f9;
            text-align: center;
            margin-bottom: 0.28rem;
            line-height: 1.25;
        }
        .prov-spotlight-school {
            font-size: 0.76rem;
            font-weight: 700;
            color: #fde047;
            text-align: center;
            line-height: 1.35;
            margin-bottom: 0.3rem;
            opacity: 0.95;
        }
        .prov-spotlight-district {
            font-size: 0.66rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            color: #64748b;
            text-align: center;
            text-transform: uppercase;
        }

        /* "Top 10" pill button at card bottom */
        .prov-spotlight-card-cta {
            margin-top: 1.1rem;
            width: 100%;
            padding: 0.55rem 1rem;
            border-radius: 9999px;
            border: 1px solid rgba(250,204,21,0.4);
            background: linear-gradient(165deg, #FFFDE7 0%, #FFEB3B 18%, #FFD700 42%, #C9A010 88%, #A67C00 100%);
            color: #0a0c1a;
            font-size: 0.68rem;
            font-weight: 900;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            cursor: pointer;
            font-family: inherit;
            box-shadow:
                inset 0 2px 0 rgba(255,255,255,0.6),
                inset 0 -2px 4px rgba(120,80,0,0.16),
                0 3px 0 #7A5A08,
                0 6px 16px rgba(0,0,0,0.28);
            transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
        }
        .prov-spotlight-card-cta:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: inset 0 2px 0 rgba(255,255,255,0.68), inset 0 -2px 4px rgba(120,80,0,0.12), 0 4px 0 #7A5A08, 0 10px 22px rgba(0,0,0,0.32); }
        .prov-spotlight-card-cta:active { transform: translateY(2px); filter: brightness(0.97); box-shadow: inset 0 2px 8px rgba(0,0,0,0.2), 0 1px 0 #7A5A08; }

        /* "Top Principal" heading above the grid */
        .prov-spotlight-subheading {
            text-align: center;
            font-size: clamp(1.1rem, 2.5vw, 1.5rem);
            font-weight: 800;
            color: #f8fafc;
            letter-spacing: -0.02em;
            margin-bottom: 0.35rem;
        }
        .prov-spotlight-subheading span { color: #fde047; }
        .prov-spotlight-subdesc {
            text-align: center;
            font-size: 0.85rem;
            color: #64748b;
            max-width: 36rem;
            margin: 0 auto 1.8rem;
            line-height: 1.6;
        }

        /* -- Provincial Top 10 Modal (distinct from home top10 carousel) -- */
        #prov-top10-modal {
            align-items: flex-start;
            padding: 1rem 0.75rem;
            overflow-y: auto;
        }
        .prov-top10-modal-shell {
            max-width: 880px;
            width: min(92vw, 880px);
            max-height: min(94vh, 54rem);
            overflow-y: auto;
            padding: 2.1rem 1.3rem 1.15rem;
            border-radius: 22px;
            border: 1px solid rgba(250, 204, 21, 0.38);
            background:
                radial-gradient(120% 100% at 0% 0%, rgba(250, 204, 21, 0.08) 0%, transparent 58%),
                linear-gradient(160deg, rgba(12, 18, 38, 0.96) 0%, rgba(8, 12, 28, 0.96) 100%);
            box-shadow: 0 24px 76px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            position: relative;
            margin: auto;
            box-sizing: border-box;
        }
        .prov-top10-modal-shell > .close {
            float: none;
            position: absolute;
            top: 0.45rem;
            right: 0.6rem;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            border-radius: 9999px;
            z-index: 8;
            background: rgba(15, 23, 42, 0.82);
            border: 1px solid rgba(250, 204, 21, 0.28);
        }
        .prov-top10-head {
            text-align: center;
            margin-bottom: 1rem;
        }
        .prov-top10-kicker {
            margin: 0 0 0.35rem;
            font-size: clamp(0.88rem, 1.7vw, 1.18rem);
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #facc15;
            text-shadow: none;
        }
        .prov-top10-heading {
            margin: 0;
            font-size: clamp(1.8rem, 4vw, 2.7rem);
            font-weight: 900;
            letter-spacing: -0.018em;
            color: #fef08a;
            text-shadow: none;
        }
        .prov-top10-sub {
            margin: 0.35rem 0 0;
            color: #cbd5e1;
            font-size: clamp(0.92rem, 1.7vw, 1.08rem);
        }
        .prov-top10-sub .prov-top10-sub-accent {
            color: #fef08a;
            font-weight: 800;
            text-shadow: none;
        }
        .prov-row-meta .prov-top10-sub-accent {
            color: #fef08a;
            font-weight: 700;
        }
        .prov-top10-unavailable {
            margin: 0 0 1rem;
            border-radius: 18px;
            border: 1px dashed rgba(250, 204, 21, 0.35);
            background: linear-gradient(165deg, rgba(250, 204, 21, 0.08), rgba(15, 23, 42, 0.96));
            padding: 1.35rem 1rem;
        }
        .prov-top10-unavailable-inner {
            max-width: 36rem;
            margin: 0 auto;
            text-align: center;
        }
        .prov-top10-unavailable-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 9999px;
            margin-bottom: 0.65rem;
            color: #fde047;
            background: rgba(250, 204, 21, 0.12);
            border: 1px solid rgba(250, 204, 21, 0.35);
            font-size: 1.1rem;
        }
        .prov-top10-unavailable-title {
            margin: 0 0 0.5rem;
            font-size: 1.05rem;
            font-weight: 900;
            color: #f8fafc;
            letter-spacing: -0.02em;
        }
        .prov-top10-unavailable-text {
            margin: 0;
            font-size: 0.92rem;
            line-height: 1.65;
            color: #cbd5e1;
        }
        .prov-top10-podium {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.95rem;
            margin-bottom: 1rem;
        }
        .prov-podium-card {
            position: relative;
            border: 1px solid rgba(250, 204, 21, 0.35);
            border-radius: 18px;
            padding: 0.88rem 0.75rem 0.9rem;
            text-align: center;
            background: linear-gradient(160deg, rgba(250, 204, 21, 0.13) 0%, rgba(15, 23, 42, 0.95) 82%);
            min-height: 186px;
        }
        .prov-podium-rank {
            position: absolute;
            top: 0.56rem;
            left: 0.58rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2.2rem;
            height: 2.2rem;
            border-radius: 9999px;
            font-size: 0.78rem;
            font-weight: 900;
            color: #0a0c1a;
            background: linear-gradient(160deg, #fef08a 0%, #facc15 45%, #d97706 100%);
            margin-bottom: 0;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
        }
        .prov-podium-avatar {
            width: 82px;
            height: 82px;
            border-radius: 50%;
            margin: 0.15rem auto 0.62rem;
            border: 2px solid rgba(250, 204, 21, 0.62);
            background: #0b122a;
            overflow: hidden;
            box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
        }
        .prov-podium-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .prov-podium-name {
            margin: 0;
            font-size: 0.9rem;
            font-weight: 700;
            color: #ffffff;
            line-height: 1.3;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
            text-shadow: none;
            letter-spacing: 0.002em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-feature-settings: "kern" 1;
            text-rendering: geometricPrecision;
        }
        .prov-podium-class {
            margin: 0.14rem 0 0;
            font-size: 0.72rem;
            font-weight: 700;
            color: rgba(248, 250, 252, 0.72);
            line-height: 1.3;
        }
        .prov-podium-score {
            margin: 0.18rem 0 0;
            font-size: 0.8rem;
            font-weight: 900;
            color: #fde047;
            letter-spacing: 0.01em;
            font-variant-numeric: tabular-nums;
        }
        .prov-podium-school {
            margin: 0.18rem 0 0;
            font-size: 0.74rem;
            font-weight: 700;
            color: #facc15;
            line-height: 1.35;
            white-space: normal;
            overflow-wrap: break-word;
            word-break: normal;
            hyphens: auto;
        }
        .prov-top10-list {
            max-height: 46vh;
            overflow: auto;
            padding-right: 0.2rem;
            display: grid;
            gap: 0.58rem;
        }
        .prov-top10-list::-webkit-scrollbar {
            width: 10px;
        }
        .prov-top10-list::-webkit-scrollbar-track {
            background: rgba(15, 23, 42, 0.65);
            border-radius: 9999px;
        }
        .prov-top10-list::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #fcd34d 0%, #eab308 100%);
            border-radius: 9999px;
            border: 2px solid rgba(15, 23, 42, 0.8);
        }
        .prov-row {
            display: grid;
            grid-template-columns: auto auto 1fr auto;
            align-items: center;
            gap: 0.72rem;
            padding: 0.66rem 0.75rem;
            border-radius: 12px;
            border: 1px solid rgba(148, 163, 184, 0.26);
            background: linear-gradient(90deg, rgba(15, 23, 42, 0.82) 0%, rgba(8, 21, 49, 0.72) 100%);
            animation: prov-row-in 260ms ease both;
        }
        .prov-row:hover {
            border-color: rgba(250, 204, 21, 0.46);
            background: linear-gradient(90deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.9) 100%);
        }
        .prov-podium-card[role="button"],
        .prov-row[role="button"] {
            cursor: pointer;
        }
        .prov-podium-card[role="button"]:focus-visible,
        .prov-row[role="button"]:focus-visible {
            outline: 2px solid rgba(250, 204, 21, 0.85);
            outline-offset: 2px;
        }
        .prov-row-rank {
            font-size: 0.86rem;
            font-weight: 900;
            letter-spacing: 0.03em;
            color: #facc15;
            width: 2.6rem;
            text-align: center;
        }
        .prov-row-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 2px solid rgba(250, 204, 21, 0.56);
            overflow: hidden;
            background: #0b122a;
            flex-shrink: 0;
        }
        .prov-row-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .prov-row-main {
            min-width: 0;
        }
        .prov-row-name {
            margin: 0;
            font-size: 0.92rem;
            font-weight: 700;
            color: #ffffff;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
            text-shadow: none;
            letter-spacing: 0.002em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-feature-settings: "kern" 1;
            text-rendering: geometricPrecision;
        }
        .prov-row-meta {
            margin: 0.18rem 0 0;
            font-size: 0.76rem;
            color: #cbd5e1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .prov-row-score {
            font-size: 0.86rem;
            font-weight: 900;
            color: #fde047;
            letter-spacing: 0.01em;
            min-width: 64px;
            text-align: right;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
            text-shadow: none;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-feature-settings: "kern" 1;
            font-variant-numeric: tabular-nums;
            text-rendering: geometricPrecision;
        }
        .prov-top10-focus {
            position: fixed;
            inset: 0;
            z-index: 55;
            background: rgba(2, 6, 23, 0.74);
            backdrop-filter: blur(3px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.95rem;
            opacity: 0;
            pointer-events: none;
            transition: opacity 220ms ease;
        }
        .prov-top10-focus.is-open {
            opacity: 1;
            pointer-events: auto;
        }
        .prov-top10-focus-card {
            width: min(94vw, 510px);
            position: relative;
            border-radius: 18px;
            border: 1px solid rgba(250, 204, 21, 0.45);
            background:
                radial-gradient(140% 120% at 0% 0%, rgba(250, 204, 21, 0.12) 0%, transparent 52%),
                linear-gradient(160deg, rgba(8, 14, 32, 0.98) 0%, rgba(10, 15, 35, 0.98) 100%);
            box-shadow: 0 22px 70px rgba(0, 0, 0, 0.58);
            padding: 0.95rem 0.95rem 0.85rem;
            transform: translateY(10px) scale(0.98);
            opacity: 0;
            transition: transform 240ms ease, opacity 240ms ease;
        }
        .prov-top10-focus.is-open .prov-top10-focus-card {
            transform: translateY(0) scale(1);
            opacity: 1;
        }
        .prov-top10-focus-close {
            position: absolute;
            top: 0.35rem;
            right: 0.4rem;
            width: 2rem;
            height: 2rem;
            border: 1px solid rgba(250, 204, 21, 0.42);
            border-radius: 9999px;
            color: #fef08a;
            background: rgba(15, 23, 42, 0.9);
            font-size: 1.25rem;
            line-height: 1;
            cursor: pointer;
            z-index: 2;
        }
        .prov-top10-focus-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.3rem;
            padding-right: 2.2rem;
        }
        .prov-top10-focus-rank-wrap {
            display: flex;
            align-items: center;
            gap: 0.42rem;
        }
        .prov-top10-focus-rank {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 3.15rem;
            height: 2rem;
            padding: 0 0.5rem;
            border-radius: 9999px;
            background: linear-gradient(145deg, #fef08a 0%, #facc15 40%, #d97706 100%);
            color: #0f172a;
            font-size: 0.9rem;
            font-weight: 900;
        }
        .prov-top10-focus-rank-label {
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(248, 250, 252, 0.7);
            font-family: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
            line-height: 1;
        }
        .prov-top10-focus-pager {
            font-size: 0.8rem;
            font-weight: 800;
            color: #cbd5e1;
            letter-spacing: 0.05em;
        }
        .prov-top10-focus-photo-wrap {
            width: 126px;
            height: 126px;
            border-radius: 50%;
            margin: 0.45rem auto 0.5rem;
            overflow: hidden;
            border: 3px solid rgba(250, 204, 21, 0.68);
            background: #0b122a;
            box-shadow: 0 12px 26px rgba(0, 0, 0, 0.48);
        }
        .prov-top10-focus-photo {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .prov-top10-focus-name {
            margin: 0;
            text-align: center;
            font-size: 1.28rem;
            font-weight: 900;
            color: #facc15;
            line-height: 1.2;
            font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
            text-shadow: none;
            letter-spacing: 0.002em;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-feature-settings: "kern" 1;
            text-rendering: geometricPrecision;
        }
        .prov-top10-focus-meta {
            margin: 0.14rem 0 0;
            text-align: center;
            font-size: 0.82rem;
            color: #cbd5e1;
            letter-spacing: 0.02em;
        }
        .prov-top10-focus-stats-row {
            display: flex;
            align-items: stretch;
            justify-content: center;
            gap: 0.42rem;
            margin: 0.65rem auto 0.72rem;
        }
        .prov-top10-focus-stat-pill {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.16rem;
            padding: 0.42rem 0.82rem;
            border-radius: 9999px;
            border: 1px solid rgba(37, 99, 235, 0.38);
            background: rgba(10, 22, 56, 0.92);
            min-width: 72px;
        }
        .prov-top10-focus-stat-pill--wide {
            min-width: 96px;
        }
        .prov-top10-focus-stat-label {
            font-size: 0.6rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.72);
            text-transform: uppercase;
            letter-spacing: 0.09em;
            line-height: 1;
        }
        .prov-top10-focus-stat-value {
            font-size: 0.93rem;
            font-weight: 400;
            color: #facc15;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.01em;
            line-height: 1.2;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-feature-settings: "kern" 1;
            text-rendering: geometricPrecision;
        }
        .prov-top10-focus-stat-value--sm {
            font-size: 0.74rem;
        }
        .prov-top10-focus-grid {
            margin: 0;
            display: grid;
            gap: 0.35rem;
        }
        .prov-top10-focus-row {
            margin: 0;
            display: grid;
            grid-template-columns: 82px 1fr;
            gap: 0.4rem;
            align-items: center;
            padding: 0.4rem 0.5rem;
            border-radius: 10px;
            border: 1px solid rgba(148, 163, 184, 0.25);
            background: rgba(15, 23, 42, 0.62);
        }
        .prov-top10-focus-row dt {
            margin: 0;
            font-size: 0.72rem;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .prov-top10-focus-row dd {
            margin: 0;
            font-size: 0.84rem;
            font-weight: 700;
            color: #f8fafc;
            line-height: 1.35;
        }
        .prov-top10-focus-actions {
            margin-top: 0.72rem;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.5rem;
        }
        .prov-top10-focus-nav {
            border: 1px solid rgba(250, 204, 21, 0.46);
            background: rgba(15, 23, 42, 0.82);
            color: #f8fafc;
            border-radius: 10px;
            padding: 0.48rem 0.5rem;
            font-size: 0.82rem;
            font-weight: 800;
            cursor: pointer;
        }
        .prov-top10-focus-nav:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        @keyframes prov-row-in {
            from { opacity: 0; transform: translateY(4px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 760px) {
            .prov-top10-podium {
                grid-template-columns: 1fr;
            }
            .prov-top10-modal-shell {
                width: min(95vw, 880px);
                padding: 1.1rem 0.85rem 0.95rem;
            }
            .prov-row {
                grid-template-columns: auto auto 1fr;
                gap: 0.58rem;
                padding: 0.58rem 0.6rem;
            }
            .prov-row-score {
                display: none;
            }
            .prov-row-name {
                font-size: 0.84rem;
            }
            .prov-row-meta {
                font-size: 0.68rem;
            }
            .prov-top10-focus-card {
                width: min(96vw, 510px);
                padding: 0.82rem 0.75rem 0.75rem;
            }
            .prov-top10-focus-close {
                right: 0.3rem;
            }
            .prov-top10-focus-photo-wrap {
                width: 108px;
                height: 108px;
            }
            .prov-top10-focus-name {
                font-size: 1.12rem;
            }
        }

        /* Teacher / principal session ribbon ? instant welcome + verification status (static site). */
        .otr-teacher-session-bar {
            position: relative;
            z-index: 45;
            border-bottom: 1px solid rgba(56, 189, 248, 0.28);
            background: linear-gradient(105deg, rgba(12, 18, 42, 0.96), rgba(15, 23, 42, 0.92));
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
            animation: otr-teacher-bar-in 0.38s ease-out;
        }
        @keyframes otr-teacher-bar-in {
            from {
                opacity: 0;
                transform: translateY(-6px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .otr-teacher-session-bar__inner {
            max-width: 80rem;
            margin: 0 auto;
            padding: 0.75rem 1rem;
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }
        @media (min-width: 640px) {
            .otr-teacher-session-bar__inner {
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                padding: 0.7rem 1.25rem;
            }
        }
        .otr-teacher-session-bar__title {
            margin: 0;
            font-size: 0.8rem;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #7dd3fc;
        }
        .otr-teacher-session-bar__detail {
            margin: 0.2rem 0 0;
            font-size: 0.8rem;
            line-height: 1.45;
            color: rgba(226, 232, 240, 0.92);
            max-width: 42rem;
        }
        .otr-teacher-session-bar__actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem;
        }
        .otr-teacher-session-pill {
            display: inline-flex;
            align-items: center;
            padding: 0.28rem 0.65rem;
            border-radius: 9999px;
            font-size: 0.7rem;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            border: 1px solid rgba(250, 204, 21, 0.45);
            color: #fef9c3;
            background: rgba(250, 204, 21, 0.12);
        }
        .otr-teacher-session-pill--live {
            border-color: rgba(52, 211, 153, 0.55);
            color: #bbf7d0;
            background: rgba(16, 185, 129, 0.15);
        }
        .otr-teacher-session-bar__link {
            font-size: 0.75rem;
            font-weight: 700;
            color: #e0f2fe;
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        .otr-teacher-session-bar__link:hover {
            color: #fff;
        }
        .otr-teacher-session-bar__signout {
            font-size: 0.75rem;
            font-weight: 700;
            padding: 0.35rem 0.75rem;
            border-radius: 9999px;
            border: 1px solid rgba(148, 163, 184, 0.45);
            background: rgba(15, 23, 42, 0.65);
            color: #e2e8f0;
            cursor: pointer;
        }
        .otr-teacher-session-bar__signout:hover {
            border-color: rgba(248, 250, 252, 0.55);
            color: #fff;
        }

/* ===================================================================
   OTR MOBILE HARDENING + PERFORMANCE STABILIZATION
   Root causes fixed:
   - html/body overflow-x containment (prevents viewport growth)
   - leader-card translateX overflow containment
   - backdrop-filter disabled on mobile (compositing cost)
   - Ken Burns animation disabled on mobile (GPU drain)
   - hero mesh animation reduced on mobile
   - glass-card hover lift disabled on touch (no hover on mobile)
   - heavy decorative animations reduced on mobile
   - section overflow containment
   =================================================================== */

        /* Global overflow containment ? prevents ANY element from forcing horizontal scroll */
        main,
        main > section,
        header,
        footer {
            max-width: 100%;
            overflow-x: clip;
        }

        /* leader-card: contain the translateX(-100px / 100px) entrance within the section */
        .leader-card {
            overflow: hidden;
        }
        .leader-card.left { transform: translateX(clamp(-100px, -8vw, -32px)); }
        .leader-card.right { transform: translateX(clamp(32px, 8vw, 100px)); }
        .leader-card.visible,
        .leader-card.left.visible,
        .leader-card.right.visible {
            transform: translateX(0);
        }

        /* ?? MOBILE: ?767px ?? */
        @media (max-width: 767px) {

            /* 1. Disable backdrop-filter on all glass-cards ? huge compositing win */
            .glass-card {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            /* 2. Disable glass-card hover lift ? touch devices don't have hover; stuck lift state looks broken */
            .glass-card:hover {
                transform: none;
                box-shadow: none;
            }

            /* 3. Disable Ken Burns on hero background ? continuous scale animation is the #1 GPU drain on mobile */
            #hero .background-layer {
                animation: none;
                transform: scale(1.06);
                will-change: auto;
            }

            /* 4. Disable hero mesh overlay animation on mobile */
            #hero::before {
                animation: none;
                will-change: auto;
            }

            /* 5. Disable district-vs backdrop-filter */
            .district-vs-card {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            /* 7. Contain sections to prevent any overflow leak */
            section {
                overflow-x: hidden;
                max-width: 100vw;
            }

            /* 8. Reduce leader-card animation complexity on mobile */
            .leader-card {
                transition: opacity 0.6s ease, transform 0.6s ease;
            }
            .leader-card.left,
            .leader-card.right {
                transform: translateX(0);
            }

            /* 9. Cap all images to viewport width */
            img {
                max-width: 100%;
            }

            /* 10. Prevent any flex row from overflowing on narrow widths */
            .hero-trust-strip__inner {
                flex-wrap: wrap;
            }

            /* 11. Disable prov-top10-focus backdrop-filter ? saves GPU on result card overlay */
            .prov-top10-focus {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            /* 12. Reduce portal-picker backdrop-filter */
            .portal-picker-card {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            /* 13. Disable auth ribbon particle drift animations on mobile */
            .otr-hero-auth-btn--login::before,
            .otr-hero-auth-btn--login::after,
            .otr-hero-auth-btn--create::before,
            .otr-hero-auth-btn--create::after {
                animation: none;
            }

            /* 14. Header: lighter glass on mobile (no blur — keep semi-transparent bar) */
            .otr-site-header {
                background-color: rgba(0, 0, 0, 0.78) !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }

            /* 15. Header brand: edge breathing room on narrow screens */
            .otr-header-brand-inner {
                padding-left: 0.75rem;
                padding-right: 0.75rem;
            }

            /* 16. Hamburger: right-align; the nav is hidden so the button is the only child */
            .otr-header-nav-row {
                justify-content: flex-end;
                padding-right: 0.75rem;
            }

            /* 17. Mobile nav drawer: readable links + reliable tap targets */
            #mobile-menu a {
                color: #fde047;
                position: relative;
                z-index: 1;
                min-height: 2.75rem;
                display: flex;
                align-items: center;
            }
            #mobile-menu .otr-hero-auth-btn {
                position: relative;
                z-index: 1;
                min-height: 2.75rem;
            }

            /* 18. Province top-10 horizontal grid: add scroll snap for swipeable UX */
            .prov-top10-grid {
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
            }
            .prov-top10-btn {
                scroll-snap-align: start;
            }
            .otr-honors-spotlight-body .prov-top10-grid.otr-honors-national-grid {
                scroll-snap-type: x mandatory;
            }
            .otr-honors-national-tile {
                scroll-snap-align: center;
            }

            /* 19. All form inputs: 16px minimum to prevent iOS auto-zoom on focus */
            input[type="text"],
            input[type="email"],
            input[type="password"],
            input[type="tel"],
            input[type="number"],
            input[type="search"],
            select,
            textarea {
                font-size: 16px;
            }

            /* 20. Demo result: single-column panels on mobile; stats 2-column */
            .dt-result-panels {
                grid-template-columns: 1fr;
            }
            .dt-result-stats {
                grid-template-columns: repeat(2, 1fr);
            }
            .dt-result-body {
                max-width: 100%;
                box-sizing: border-box;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }

            /* 21. Demo welcome: contain avatar so it doesn't push controls off-screen */
            .dt-welcome-avatar,
            .dt-welcome-photo {
                width: clamp(4.5rem, 18vw, 6.5rem);
                height: clamp(4.5rem, 18vw, 6.5rem);
            }

            #dt-screen-welcome { padding-left: 1rem; padding-right: 1rem; }
            /* Demo test top bar: clear the fixed close button (left) and keep brand + timer in one row */
            .dt-test-topbar {
                padding-left: 3.6rem;
                padding-right: 0.75rem;
                justify-content: space-between;
                flex-wrap: nowrap;
                gap: 0.5rem;
            }
            .dt-test-brand {
                flex: 1 1 auto;
                min-width: 0;
                max-width: none;
                justify-content: flex-start;
                gap: 0.45rem;
            }
            .dt-test-subject-pill {
                min-width: 0;
                white-space: normal;
                font-size: 0.66rem;
                letter-spacing: 0.03em;
                line-height: 1.25;
                padding: 0.24rem 0.5rem;
            }
            .dt-autosave-hint { display: none; }
            .dt-timer-wrap {
                top: auto;
                right: auto;
                transform: none;
                flex-shrink: 0;
            }
            #dt-screen-test.dt-screen-test--urdu .dt-timer-label {
                font-size: 0.62rem;
                line-height: 1.75;
                max-width: 8.5rem;
            }
            /* Demo navigator: grid collapses behind a toggle so the question keeps the screen */
            #dt-palette-wrap:not(.dt-palette-open) #dt-palette,
            #dt-palette-wrap:not(.dt-palette-open) #dt-palette-hint {
                display: none;
            }
            #dt-palette-wrap.dt-palette-open #dt-palette {
                max-height: 36vh;
                overflow-y: auto;
            }
            #dt-palette-wrap .dt-palette-header { margin-bottom: 0.2rem; }
            .dt-palette-toggle:not([hidden]) {
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;
                padding: 0.3rem 0.7rem;
                border-radius: 6px;
                border: 1px solid rgba(148, 163, 184, 0.28);
                background: #111827;
                color: #cbd5e1;
                font-size: 0.72rem;
                font-weight: 700;
                cursor: pointer;
            }
            .dt-test-footer { grid-template-columns: 1fr; row-gap: 0.5rem; }
            .dt-footer-center { min-width: 0; }

            /* 22. Awards tie rule: break onto its own line on mobile */
            .otr-tie-rule-detail {
                display: block;
            }

            /* 23. Honors section: prevent oversized header text overflow */
            .otr-honors-title {
                font-size: clamp(1.4rem, 6vw, 2.2rem);
                word-break: break-word;
            }
            .otr-honors-spotlight-summary-inner,
            .otr-honors-prov-folder-summary-inner {
                padding: 0.75rem;
            }
        }

        /* ?? SMALL MOBILE: ?480px ? tighten spacing that can cause overflow ?? */
        @media (max-width: 480px) {
            /* Ensure top10 grid doesn't overflow on 320px */
            .national-top10-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px;
            }

            /* Modal content: ensure it never exceeds viewport on tiny screens */
            .modal-content {
                width: 94%;
                max-width: 94vw;
                padding: 1.25rem;
                border-radius: 20px;
                box-sizing: border-box;
            }

            /* Registration modals: full containment */
            #student-signup-modal .modal-content,
            #teacher-signup-modal .modal-content {
                width: 96%;
                max-width: 96vw;
                padding: 1rem;
            }

            /* Hero CTA buttons: stack gracefully on 320px */
            .hero-cta-row {
                flex-wrap: wrap;
                justify-content: center;
            }
        }

        /* ?? TABLET 768?1023px: ensure no overflow from desktop-only elements ?? */
        @media (min-width: 768px) and (max-width: 1023px) {
            .glass-card {
                backdrop-filter: blur(6px);
                -webkit-backdrop-filter: blur(6px);
            }
        }