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

        :root {
            --otr-bg-deep: #050818;
            --otr-bg: #0a0c1a;
            --otr-surface: #0f172a;
            --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;
        }

        ::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;
            box-shadow:
                0 4px 28px rgba(0, 0, 0, 0.5),
                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 lives inside the fixed 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.01ms;
            }
            #otr-site-header.otr-site-header--hidden-y {
                transform: translate3d(0, 0, 0);
                pointer-events: auto;
            }
        }
        .otr-header-layout-anchor {
            width: 100%;
            flex-shrink: 0;
            pointer-events: none;
            margin: 0;
            padding: 0;
            /* Approximate masthead footprint until JS assigns exact height ? avoids overlap under fixed nav. */
            min-height: 6.25rem;
        }

        /* 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(-2px) !important;
        }
        .otr-hero-badge-auth-center .otr-hero-platform-badge--in-row:active {
            transform: translateY(1px) !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;
        }
        .otr-hero-auth-btn--login {
            color: #0a0a0a;
            font-size: 1rem;
            font-weight: 800;
            background: linear-gradient(180deg, #fde047 0%, #eab308 100%);
            border-color: rgba(161, 98, 7, 0.55);
        }
        .otr-hero-auth-btn--login:hover {
            color: #ffef62;
            font-weight: 900;
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.72),
                0 1px 5px rgba(0, 0, 0, 0.55),
                0 3px 8px rgba(0, 0, 0, 0.35);
            border: 1px solid transparent;
            transform: translateY(-1px);
            background-image:
                linear-gradient(165deg, #0f1c30 0%, #071222 45%, #03080f 100%),
                linear-gradient(
                    122deg,
                    rgba(0, 0, 0, 0) 0% 28%,
                    rgba(253, 224, 71, 0.65) 36%,
                    rgba(255, 255, 255, 0.92) 42%,
                    rgba(254, 226, 226, 0.85) 47%,
                    rgba(248, 113, 113, 0.88) 51%,
                    rgba(239, 68, 68, 0.82) 54%,
                    rgba(186, 230, 253, 0.9) 58%,
                    rgba(56, 189, 248, 0.88) 62%,
                    rgba(125, 211, 252, 0.75) 66%,
                    rgba(253, 224, 71, 0.55) 70%,
                    rgba(0, 0, 0, 0) 78% 100%
                );
            background-size: auto, 380% 380%;
            background-origin: padding-box, padding-box;
            background-clip: padding-box, padding-box;
            background-repeat: no-repeat, no-repeat;
            background-position: 0 0, 52% 48%;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        .otr-hero-auth-btn--login:hover::before {
            opacity: 1;
            animation:
                otr-auth-login-twinkle 1.05s cubic-bezier(0.42, 0, 0.58, 1) infinite,
                otr-auth-login-particle-drift 5.5s ease-in-out infinite;
        }
        .otr-hero-auth-btn--login:hover::after {
            opacity: 1;
            will-change: transform;
            animation: otr-auth-login-rim-spin 8.5s linear infinite;
        }
        .otr-hero-auth-btn--login:active {
            color: #052e16;
            animation: none;
            transform: translateY(1px);
            text-shadow: none;
            background: linear-gradient(148deg, #34d399 0%, #15803d 100%);
            border: 1px solid rgba(21, 128, 61, 0.95);
            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        .otr-hero-auth-btn--login:active::before,
        .otr-hero-auth-btn--login:active::after {
            opacity: 0.65;
            animation: none;
        }
        @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 {
            color: #042f2e;
            background: linear-gradient(180deg, #5eead4 0%, #2dd4bf 42%, #14b8a6 100%);
            border-color: rgba(13, 148, 136, 0.85);
        }
        .otr-hero-auth-btn--create:hover {
            color: #000000;
            border: 1px solid transparent;
            transform: translateY(-1px);
            background-image:
                linear-gradient(180deg, #ffffff 0%, #fafafa 40%, #f4f4f5 100%),
                linear-gradient(
                    118deg,
                    rgba(0, 0, 0, 0) 0% 26%,
                    rgba(253, 224, 71, 0.55) 34%,
                    rgba(255, 255, 255, 0.95) 40%,
                    rgba(254, 226, 226, 0.8) 46%,
                    rgba(248, 113, 113, 0.82) 50%,
                    rgba(239, 68, 68, 0.72) 53%,
                    rgba(186, 230, 253, 0.88) 57%,
                    rgba(56, 189, 248, 0.85) 61%,
                    rgba(125, 211, 252, 0.72) 65%,
                    rgba(253, 224, 71, 0.48) 69%,
                    rgba(0, 0, 0, 0) 76% 100%
                );
            background-size: auto, 400% 400%;
            background-origin: padding-box, padding-box;
            background-clip: padding-box, padding-box;
            background-repeat: no-repeat, no-repeat;
            background-position: 0 0, 48% 52%;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
        }
        .otr-hero-auth-btn--create:hover::before {
            opacity: 1;
            animation:
                otr-auth-create-twinkle 1s cubic-bezier(0.42, 0, 0.58, 1) infinite,
                otr-auth-create-particle-drift 6.2s ease-in-out infinite;
        }
        .otr-hero-auth-btn--create:hover::after {
            opacity: 1;
            will-change: transform;
            animation: otr-auth-create-rim-spin 9.25s linear infinite;
        }
        .otr-hero-auth-btn--create:active {
            color: #0a0a0a;
            animation: none;
            background: linear-gradient(180deg, #e4e4e7 0%, #d4d4d8 100%);
            border: 1px solid rgba(161, 161, 170, 0.9);
            box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.12);
            transform: translateY(1px);
        }
        .otr-hero-auth-btn--create:active::before,
        .otr-hero-auth-btn--create:active::after {
            opacity: 0.55;
            animation: none;
        }
        @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;
            }
            .otr-hero-auth-btn--login:hover {
                animation: none;
                transform: none;
                will-change: auto;
                color: #ffef62;
                font-weight: 900;
                text-shadow:
                    0 1px 0 rgba(0, 0, 0, 0.72),
                    0 1px 5px rgba(0, 0, 0, 0.55),
                    0 3px 8px rgba(0, 0, 0, 0.35);
                background: linear-gradient(165deg, #0f1c30 0%, #071222 45%, #03080f 100%);
                border: 1px solid rgba(52, 211, 153, 0.9);
                box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
            }
            .otr-hero-auth-btn--create:hover {
                animation: none;
                transform: none;
                will-change: auto;
                background: linear-gradient(180deg, #ffffff 0%, #fafafa 40%, #f4f4f5 100%);
                border: 1px solid rgba(255, 255, 255, 0.95);
            }
        }

        .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;
        }
        /* Fairness banner: compact trust strip (not full-bleed dull pill) */
        #pricing .pricing-fairness-guarantee {
            box-shadow: none;
            max-width: min(96vw, 52rem);
            margin-left: auto;
            margin-right: auto;
            padding: 0;
            border-radius: 1.125rem;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background-color: #0a1628;
            overflow: hidden;
        }
        #pricing .pricing-fairness-guarantee__inner {
            padding: 0.95rem 1.25rem 1.05rem;
        }
        #pricing .pricing-fairness-guarantee__row {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 0.85rem;
            text-align: left;
        }
        @media (max-width: 520px) {
            #pricing .pricing-fairness-guarantee__row {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            #pricing .pricing-fairness-guarantee__copy {
                text-align: center;
            }
        }
        #pricing .pricing-fairness-guarantee__icon-wrap {
            flex: 0 0 auto;
            width: 2.75rem;
            height: 2.75rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 1.15rem;
            color: #0a0c1a;
            background: linear-gradient(165deg, #fef9c3 0%, #fde047 42%, #eab308 100%);
            box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.35);
        }
        #pricing .pricing-fairness-guarantee__copy {
            flex: 1 1 auto;
            min-width: 0;
        }
        #pricing .pricing-fairness-guarantee__kicker {
            margin: 0 0 0.4rem;
        }
        #pricing .pricing-fairness-guarantee__kicker-txt {
            display: inline-block;
            font-size: 0.6875rem;
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: #f8fafc;
            padding: 0.32rem 0.72rem;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }
        #pricing .pricing-fairness-guarantee__text {
            margin: 0;
            font-size: 0.9375rem;
            line-height: 1.55;
            font-weight: 500;
            letter-spacing: 0.01em;
            color: #f1f5f9;
            text-wrap: balance;
        }
        @media (min-width: 1024px) {
            #pricing .pricing-fairness-guarantee {
                max-width: min(94vw, 68rem);
            }
            #pricing .pricing-fairness-guarantee__inner {
                padding: 0.88rem 1.5rem 0.95rem;
            }
            #pricing .pricing-fairness-guarantee__text {
                white-space: nowrap;
                font-size: clamp(0.8125rem, 0.72rem + 0.42vw, 0.9375rem);
                line-height: 1.35;
            }
        }
        #pricing .pricing-fairness-guarantee:hover {
            transform: translateY(-4px);
            box-shadow: none;
            border-color: rgba(255, 255, 255, 0.16);
        }

        /* 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;
        }

        /* 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;
        }

        /* Pricing: one-line tier title + left icon (no outer glow) */
        #pricing .pricing-tier-card {
            text-align: left;
        }
        #pricing .pricing-tier-head {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
            gap: 0.42rem;
            margin-bottom: 0.85rem;
            min-height: 0;
        }
        /* Icons only: no frame/box ? larger, gradient-filled glyphs + tight inset from card edge */
        #pricing .pricing-tier-icon {
            flex: 0 0 2.2rem;
            width: 2.2rem;
            min-width: 2.2rem;
            flex-shrink: 0;
            order: 1;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            height: auto;
            margin: 0 0.05rem 0 -0.28rem;
            padding: 0;
            line-height: 1;
            background: none;
            border: none;
            border-radius: 0;
            box-shadow: none;
        }
        #pricing .pricing-tier-icon i {
            display: inline-block;
            font-weight: 900;
            font-size: clamp(1.52rem, 2.75vw, 2rem);
            line-height: 1;
            -webkit-font-smoothing: antialiased;
        }
        #pricing .pricing-tier-icon--core i {
            background: linear-gradient(188deg, #f0f9ff 0%, #7dd3fc 38%, #0ea5e9 72%, #075985 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.72));
        }
        #pricing .pricing-tier-icon--advanced i {
            background: linear-gradient(192deg, #fffbeb 0%, #fde047 35%, #eab308 68%, #a16207 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.72));
        }
        #pricing .pricing-tier-icon--elite i {
            background: linear-gradient(175deg, #fffef5 0%, #fef08a 22%, #facc15 48%, #d97706 82%, #92400e 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.72));
        }
        #pricing .pricing-tier-card--popular .pricing-tier-head {
            padding-top: 0.2rem;
        }
        #pricing .pricing-tier-title {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
            gap: 0.55rem;
            flex: 1 1 auto;
            order: 2;
            min-width: 0;
            margin: 0;
            min-height: 0;
        }
        #pricing .pricing-tier-name {
            flex: 1 1 auto;
            min-width: 0;
            margin: 0;
            font-weight: 800;
            font-size: clamp(0.92rem, 1.85vw, 1.38rem);
            letter-spacing: -0.02em;
            line-height: 1.2;
            color: #facc15;
            text-align: center;
            white-space: nowrap;
        }
        @media (max-width: 420px) {
            #pricing .pricing-tier-name {
                white-space: normal;
            }
        }
        /* Original single-pill sweep (same curve embedded in chase-* for sequential tiers) */
        @keyframes pricing-tier-wire-pulse {
            0% {
                transform: translateX(-168%);
                opacity: 0;
            }
            10% {
                opacity: 0.35;
            }
            24% {
                opacity: 1;
            }
            76% {
                opacity: 1;
            }
            92% {
                opacity: 0.3;
            }
            100% {
                transform: translateX(232%);
                opacity: 0;
            }
        }
        /* Price pill wire: one sweep per tier, sequential (1 ? 2 ? 3 ? repeat), no gap between cycles */
        @keyframes pricing-tier-wire-chase-1 {
            0% {
                transform: translateX(-168%);
                opacity: 0;
            }
            3.333% {
                opacity: 0.35;
            }
            8% {
                opacity: 1;
            }
            25.333% {
                opacity: 1;
            }
            30.667% {
                opacity: 0.3;
            }
            33.333% {
                transform: translateX(232%);
                opacity: 0;
            }
            33.34%,
            100% {
                transform: translateX(-168%);
                opacity: 0;
            }
        }
        @keyframes pricing-tier-wire-chase-2 {
            0%,
            33.32% {
                transform: translateX(-168%);
                opacity: 0;
            }
            33.333% {
                transform: translateX(-168%);
                opacity: 0;
            }
            36.666% {
                opacity: 0.35;
            }
            41.333% {
                opacity: 1;
            }
            58.666% {
                opacity: 1;
            }
            64% {
                opacity: 0.3;
            }
            66.666% {
                transform: translateX(232%);
                opacity: 0;
            }
            66.67%,
            100% {
                transform: translateX(-168%);
                opacity: 0;
            }
        }
        @keyframes pricing-tier-wire-chase-3 {
            0%,
            66.65% {
                transform: translateX(-168%);
                opacity: 0;
            }
            66.666% {
                transform: translateX(-168%);
                opacity: 0;
            }
            70% {
                opacity: 0.35;
            }
            74.666% {
                opacity: 1;
            }
            92% {
                opacity: 1;
            }
            97.333% {
                opacity: 0.3;
            }
            100% {
                transform: translateX(232%);
                opacity: 0;
            }
        }
        /* Bottom wire: reverse of forward sweep, second half of each tier?s slot (= original 2.625s offset in 5.25s) */
        @keyframes pricing-tier-wire-chase-1-after {
            0%,
            16.665% {
                transform: translateX(-168%);
                opacity: 0;
            }
            16.666% {
                transform: translateX(232%);
                opacity: 0;
            }
            17.999% {
                opacity: 0.3;
            }
            20.666% {
                opacity: 1;
            }
            29.332% {
                opacity: 1;
            }
            31.666% {
                opacity: 0.35;
            }
            33.333% {
                transform: translateX(-168%);
                opacity: 0;
            }
            33.334%,
            100% {
                transform: translateX(-168%);
                opacity: 0;
            }
        }
        @keyframes pricing-tier-wire-chase-2-after {
            0%,
            49.999% {
                transform: translateX(-168%);
                opacity: 0;
            }
            50% {
                transform: translateX(232%);
                opacity: 0;
            }
            51.332% {
                opacity: 0.3;
            }
            53.999% {
                opacity: 1;
            }
            62.665% {
                opacity: 1;
            }
            64.999% {
                opacity: 0.35;
            }
            66.666% {
                transform: translateX(-168%);
                opacity: 0;
            }
            66.667%,
            100% {
                transform: translateX(-168%);
                opacity: 0;
            }
        }
        @keyframes pricing-tier-wire-chase-3-after {
            0%,
            83.332% {
                transform: translateX(-168%);
                opacity: 0;
            }
            83.333% {
                transform: translateX(232%);
                opacity: 0;
            }
            84.665% {
                opacity: 0.3;
            }
            87.332% {
                opacity: 1;
            }
            95.998% {
                opacity: 1;
            }
            98.332% {
                opacity: 0.35;
            }
            100% {
                transform: translateX(-168%);
                opacity: 0;
            }
        }
        /* Price pill: dark navy 3D face + yellow wire + ?current? sweep (national-program style) */
        #pricing .pricing-tier-price-pill {
            position: relative;
            z-index: 0;
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 0.15rem;
            padding: 0.38rem 1.05rem;
            border-radius: 9999px;
            font-size: clamp(0.9rem, 1.15vw, 1rem);
            line-height: 1.25;
            font-weight: 800;
            letter-spacing: 0.04em;
            white-space: nowrap;
            color: #ffffff;
            background: linear-gradient(168deg, #243154 0%, #151f35 38%, #0c1222 72%, #070b14 100%);
            border: 2px solid rgba(234, 179, 8, 0.68);
            overflow: hidden;
            box-shadow:
                inset 0 1px 0 rgba(148, 163, 184, 0.22),
                inset 0 -3px 10px rgba(0, 0, 0, 0.55),
                inset 1px 1px 0 rgba(255, 255, 255, 0.06),
                0 3px 10px rgba(0, 0, 0, 0.45),
                0 1px 0 rgba(250, 204, 21, 0.12);
        }
        #pricing .pricing-tier-price-pill__txt {
            position: relative;
            z-index: 2;
            font-variant-numeric: tabular-nums;
            -webkit-font-smoothing: antialiased;
            text-rendering: geometricPrecision;
            text-shadow:
                0 1px 0 rgba(0, 0, 0, 0.75),
                0 0 12px rgba(0, 0, 0, 0.45),
                0 0 1px rgba(0, 0, 0, 0.9);
        }
        #pricing .pricing-tier-price-pill::before,
        #pricing .pricing-tier-price-pill::after {
            content: "";
            position: absolute;
            width: 72%;
            height: 5px;
            z-index: 1;
            pointer-events: none;
            border-radius: 9999px;
            will-change: transform, opacity;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(253, 224, 71, 0) 5%,
                rgba(253, 224, 71, 0.14) 16%,
                rgba(254, 240, 138, 0.5) 34%,
                rgba(255, 251, 235, 1) 50%,
                rgba(254, 240, 138, 0.5) 66%,
                rgba(253, 224, 71, 0.14) 84%,
                rgba(253, 224, 71, 0) 95%,
                transparent 100%
            );
            box-shadow:
                0 0 22px rgba(253, 224, 71, 0.14),
                0 0 10px rgba(254, 249, 195, 0.22),
                0 1px 0 rgba(255, 255, 255, 0.35);
        }
        #pricing .pricing-tier-price-pill::before {
            top: -1px;
            left: 0;
            transform: translateX(-168%);
        }
        #pricing .pricing-tier-price-pill::after {
            bottom: -1px;
            left: 0;
            transform: translateX(-168%);
        }
        /* Sequential chase: Core ? Advanced ? Elite (15.75s = 3 ? 5.25s; top = forward, bottom = reverse like original) */
        #pricing .max-w-7xl > .grid > .pricing-tier-card:nth-child(1) .pricing-tier-price-pill::before {
            animation: pricing-tier-wire-chase-1 15.75s cubic-bezier(0.22, 0.06, 0.18, 1) infinite;
        }
        #pricing .max-w-7xl > .grid > .pricing-tier-card:nth-child(1) .pricing-tier-price-pill::after {
            animation: pricing-tier-wire-chase-1-after 15.75s cubic-bezier(0.22, 0.06, 0.18, 1) infinite;
        }
        #pricing .max-w-7xl > .grid > .pricing-tier-card:nth-child(2) .pricing-tier-price-pill::before {
            animation: pricing-tier-wire-chase-2 15.75s cubic-bezier(0.22, 0.06, 0.18, 1) infinite;
        }
        #pricing .max-w-7xl > .grid > .pricing-tier-card:nth-child(2) .pricing-tier-price-pill::after {
            animation: pricing-tier-wire-chase-2-after 15.75s cubic-bezier(0.22, 0.06, 0.18, 1) infinite;
        }
        #pricing .max-w-7xl > .grid > .pricing-tier-card:nth-child(3) .pricing-tier-price-pill::before {
            animation: pricing-tier-wire-chase-3 15.75s cubic-bezier(0.22, 0.06, 0.18, 1) infinite;
        }
        #pricing .max-w-7xl > .grid > .pricing-tier-card:nth-child(3) .pricing-tier-price-pill::after {
            animation: pricing-tier-wire-chase-3-after 15.75s cubic-bezier(0.22, 0.06, 0.18, 1) infinite;
        }
        @media (prefers-reduced-motion: reduce) {
            #pricing .pricing-tier-price-pill::before,
            #pricing .pricing-tier-price-pill::after {
                display: none;
            }
        }

        #portals .otr-portals-institutional-lead {
            text-wrap: balance;
        }

        /* Portal cards: no hover glow (keep lift transition from .glass-card) */
        #portals .glass-card {
            box-shadow: none;
        }
        #portals .glass-card:hover {
            box-shadow: none;
        }

        /* Portals: compact 3D gold CTAs (student + teacher cards only) */
        #portals .otr-portals-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.62rem;
            min-height: 3rem;
            padding: 0.72rem 1.65rem 0.78rem;
            margin-left: auto;
            margin-right: auto;
            max-width: min(100%, 20rem);
            font-size: clamp(0.88rem, 2.1vw, 1rem);
            font-weight: 800;
            letter-spacing: 0.02em;
            line-height: 1.2;
            color: #0a0c1a;
            cursor: pointer;
            border: none;
            border-radius: 9999px;
            background: linear-gradient(165deg, #fef9c3 0%, #fde047 38%, #eab308 72%, #ca8a04 100%);
            box-shadow:
                0 5px 0 #854d0e,
                0 10px 28px rgba(0, 0, 0, 0.42),
                inset 0 2px 0 rgba(255, 250, 220, 0.65),
                inset 0 -3px 8px rgba(133, 77, 14, 0.35);
            transform: translateY(0);
            transition:
                transform 0.18s ease,
                box-shadow 0.18s ease,
                filter 0.18s ease;
        }
        #portals .otr-portals-cta i {
            font-size: 1.08em;
            opacity: 0.95;
            filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45));
        }
        #portals .otr-portals-cta:hover {
            filter: brightness(1.06);
            transform: translateY(-3px);
            box-shadow:
                0 7px 0 #854d0e,
                0 14px 36px rgba(0, 0, 0, 0.48),
                inset 0 2px 0 rgba(255, 250, 220, 0.72),
                inset 0 -3px 8px rgba(133, 77, 14, 0.28);
        }
        #portals .otr-portals-cta:active {
            transform: translateY(2px);
            filter: brightness(0.98);
            box-shadow:
                0 2px 0 #854d0e,
                0 6px 18px rgba(0, 0, 0, 0.38),
                inset 0 3px 10px rgba(0, 0, 0, 0.2);
        }
        #portals .otr-portals-cta:focus-visible {
            outline: 2px solid #fde047;
            outline-offset: 3px;
        }

        /* ?? 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: 46rem;
            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: 40rem;
            margin-left: auto;
            margin-right: auto;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.15rem;
            align-items: stretch;
        }
        @media (min-width: 768px) {
            .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
        }
        @media (min-width: 980px) {
            .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.35rem; }
        }
        @media (min-width: 1360px) {
            .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem; }
        }
        .feature-card--spotlight {
            border-color: rgba(253, 224, 71, 0.62) !important;
            background:
                linear-gradient(165deg, rgba(45, 38, 12, 0.45) 0%, rgba(15, 23, 42, 0.94) 42%, rgba(2, 6, 23, 0.99) 100%);
            box-shadow:
                inset 0 1px 0 rgba(253, 224, 71, 0.14),
                inset 0 -1px 0 rgba(0, 0, 0, 0.35),
                0 14px 36px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(253, 224, 71, 0.12);
        }
        .glass-card.feature-card.feature-card--spotlight:hover {
            border-color: rgba(253, 224, 71, 0.88) !important;
            box-shadow:
                inset 0 1px 0 rgba(253, 224, 71, 0.18),
                0 22px 48px rgba(0, 0, 0, 0.52),
                0 0 0 1px rgba(253, 224, 71, 0.22),
                0 0 40px rgba(250, 204, 21, 0.14);
        }

        .glass-card.feature-card {
            display: flex;
            flex-direction: column;
            height: 100%;
            text-align: center;
            min-height: clamp(15.5rem, 36vw, 22rem);
            padding: 1.45rem 1.2rem 1.35rem;
            border-radius: 20px;
            border: 1px solid rgba(253, 224, 71, 0.55);
            background:
                linear-gradient(165deg, rgba(30, 41, 59, 0.5) 0%, rgba(15, 23, 42, 0.94) 40%, rgba(11, 14, 26, 0.99) 100%);
            box-shadow:
                inset 0 1px 0 rgba(253, 224, 71, 0.1),
                inset 0 -1px 0 rgba(0, 0, 0, 0.38),
                0 14px 36px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(253, 224, 71, 0.08);
            transition:
                transform 260ms var(--otr-ease-smooth),
                border-color 260ms ease,
                box-shadow 260ms ease;
        }
        .glass-card.feature-card:hover {
            transform: translateY(-5px);
            border-color: rgba(253, 224, 71, 0.78);
            box-shadow:
                inset 0 1px 0 rgba(253, 224, 71, 0.12),
                0 22px 48px rgba(0, 0, 0, 0.5),
                0 0 0 1px rgba(253, 224, 71, 0.14),
                0 0 32px rgba(250, 204, 21, 0.1);
        }
        .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: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            gap: 0.95rem;
            margin-bottom: 0.75rem;
        }

        /*
         * 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-radius: clamp(0.62rem, 1.65vw, 0.82rem);
            --feature-icon-s: clamp(3.95rem, 5.45vw, 4.65rem);
            flex-shrink: 0;
            width: var(--feature-icon-s);
            height: var(--feature-icon-s);
            border-radius: var(--feature-icon-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 0.32rem;
            box-sizing: border-box;
            isolation: isolate;
            color: #fde047;
            background:
                linear-gradient(155deg, rgba(55, 48, 28, 0.55) 0%, rgba(18, 16, 12, 0.92) 45%, rgba(6, 8, 16, 1) 100%);
            border: 1px solid rgba(253, 224, 71, 0.52);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.11),
                0 0 0 1px rgba(0, 0, 0, 0.38),
                0 4px 14px rgba(0, 0, 0, 0.4);
            transition:
                border-color 0.3s ease,
                box-shadow 0.3s ease;
        }
        .feature-card:hover .feature-card-icon {
            border-color: rgba(253, 224, 71, 0.82);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.16),
                0 0 0 1px rgba(250, 204, 21, 0.2),
                0 6px 18px rgba(0, 0, 0, 0.46),
                0 0 22px rgba(250, 204, 21, 0.12);
        }
        .feature-card .feature-card-icon-surface {
            flex: 1 1 auto;
            align-self: stretch;
            min-width: 0;
            min-height: 0;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            border-radius: calc(var(--feature-icon-radius) - 2px);
            overflow: hidden;
            background: linear-gradient(168deg, #1a4a72 0%, #143a58 42%, #0f2d48 72%, #0b2238 100%);
        }
        /* 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;
            }
        }
        .feature-card .feature-card-icon::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: var(--feature-icon-radius);
            pointer-events: none;
            z-index: 3;
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.1),
                inset 0 -8px 20px rgba(0, 0, 0, 0.22),
                inset 0 5px 14px rgba(255, 255, 255, 0.05);
        }

        .feature-card.feature-card--accent .feature-card-icon {
            color: #7dd3fc;
            background:
                radial-gradient(circle at 32% 28%, rgba(20, 45, 70, 0.95), rgba(4, 6, 14, 1) 72%);
            border-color: rgba(125, 211, 252, 0.55);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.14),
                0 0 0 1px rgba(0, 0, 0, 0.4),
                0 4px 16px rgba(0, 0, 0, 0.42);
        }
        .feature-card.feature-card--accent:hover .feature-card-icon {
            border-color: rgba(125, 211, 252, 0.85);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.18),
                0 0 0 1px rgba(56, 189, 248, 0.2),
                0 6px 20px rgba(0, 0, 0, 0.48),
                0 0 26px rgba(56, 189, 248, 0.16);
        }

        .feature-card-heading {
            font-size: clamp(0.78rem, 1vw, 0.9rem);
            font-weight: 800;
            line-height: 1.45;
            color: #fde047;
            letter-spacing: 0.03em;
            text-transform: none;
            margin: 0;
            padding: 0 0.35rem;
            min-height: 0;
            max-width: 17.5rem;
            display: block;
            text-align: center;
            text-wrap: balance;
        }
        .feature-card-heading--gold {
            letter-spacing: -0.02em;
            font-size: clamp(0.9rem, 1.12vw, 1.02rem);
            font-weight: 800;
            line-height: 1.35;
            max-width: 17rem;
        }
        /* 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.55rem;
            padding: 0.62rem 1.45rem 0.56rem;
            border-radius: 9999px;
            border: 1px solid rgba(255, 255, 255, 0.55);
            overflow: hidden;
            background: linear-gradient(
                110deg,
                #fffef8 0%,
                #fef9c3 14%,
                #fef08a 28%,
                #fde047 40%,
                #facc15 52%,
                #eab308 64%,
                #ca8a04 78%,
                #92400e 88%,
                #713f12 96%,
                #fffef8 100%
            );
            background-size: 320% 320%;
            animation: hero-platform-fill 5.8s ease-in-out infinite;
            color: #0f172a;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            box-shadow:
                inset 0 2px 1px rgba(255, 255, 255, 0.9),
                inset 0 -3px 10px rgba(113, 63, 18, 0.4),
                0 6px 0 #4a2508,
                0 10px 24px rgba(0, 0, 0, 0.42),
                0 0 0 1px rgba(0, 0, 0, 0.22);
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
            transform: translateY(-80%);
            transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
            cursor: default;
            position: relative;
        }
        .hero-platform-badge::before {
            content: '';
            position: absolute;
            left: 10%;
            right: 10%;
            top: 5px;
            height: 40%;
            border-radius: 9999px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, transparent 92%);
            pointer-events: none;
            opacity: 0.55;
            z-index: 1;
        }
        .hero-platform-badge::after {
            content: '';
            position: absolute;
            left: -55%;
            top: -25%;
            width: 48%;
            height: 150%;
            border-radius: 45%;
            pointer-events: none;
            z-index: 1;
            background: linear-gradient(
                95deg,
                transparent 0%,
                rgba(255, 255, 255, 0.08) 25%,
                rgba(254, 249, 195, 0.55) 42%,
                rgba(253, 224, 71, 0.5) 52%,
                rgba(251, 191, 36, 0.35) 62%,
                rgba(255, 255, 255, 0.12) 78%,
                transparent 100%
            );
            transform: translate3d(0, 0, 0) rotate(20deg);
            animation: hero-platform-sweep 3.6s cubic-bezier(0.42, 0.02, 0.2, 1) infinite;
            opacity: 0.95;
        }
        .hero-platform-badge .fa-crown {
            position: relative;
            z-index: 2;
            font-size: 1.1rem;
            color: #713f12;
            filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.65));
            animation: hero-platform-crown 2.6s ease-in-out infinite;
        }
        .hero-platform-badge-text {
            position: relative;
            z-index: 2;
            font-size: clamp(0.68rem, 2vw, 0.84rem);
            line-height: 1.25;
        }
        .hero-platform-badge:hover {
            filter: brightness(1.06);
            transform: translateY(calc(-80% - 3px));
            box-shadow:
                inset 0 2px 1px rgba(255, 255, 255, 0.95),
                inset 0 -3px 10px rgba(113, 63, 18, 0.35),
                0 8px 0 #4a2508,
                0 14px 32px rgba(0, 0, 0, 0.45),
                0 0 0 1px rgba(0, 0, 0, 0.2);
        }
        .hero-platform-badge:active {
            filter: brightness(0.98);
            transform: translateY(calc(-80% + 2px));
            box-shadow:
                inset 0 4px 10px rgba(0, 0, 0, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.35),
                0 3px 0 #4a2508,
                0 5px 14px rgba(0, 0, 0, 0.32),
                0 0 0 1px rgba(0, 0, 0, 0.2);
        }
        @keyframes hero-platform-crown {
            0%, 100% { transform: rotate(-6deg) scale(1); }
            50% { transform: rotate(6deg) scale(1.08); }
        }
        @keyframes hero-platform-fill {
            0%, 100% { background-position: 2% 42%; }
            50% { background-position: 98% 58%; }
        }
        @keyframes hero-platform-sweep {
            0% { transform: translate3d(-8%, 0, 0) rotate(20deg); opacity: 0.35; }
            18% { opacity: 1; }
            100% { transform: translate3d(320%, 0, 0) rotate(20deg); opacity: 0.45; }
        }
        @media (prefers-reduced-motion: reduce) {
            .hero-platform-badge {
                animation: none;
                background-size: 100% 100%;
                background-position: center;
            }
            .hero-platform-badge::after {
                display: none;
            }
            .hero-platform-badge .fa-crown {
                animation: none;
            }
            .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));
            }
        }
        .district-vs-strip {
            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;
            background:
                linear-gradient(180deg, rgba(250, 204, 21, 0.07) 0%, transparent 38%),
                linear-gradient(155deg, rgba(15, 23, 42, 0.94) 0%, rgba(22, 20, 48, 0.88) 45%, rgba(15, 23, 42, 0.92) 100%);
            border: 1px solid rgba(250, 204, 21, 0.4);
            border-radius: 16px;
            padding: 1.05rem 1.1rem 1.15rem;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.09),
                0 12px 40px rgba(0, 0, 0, 0.42),
                0 0 0 1px rgba(0, 0, 0, 0.2),
                0 0 32px rgba(250, 204, 21, 0.08);
            backdrop-filter: blur(14px);
        }
        .district-vs-inner {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            min-height: 0;
        }
        .district-vs-head {
            text-align: center;
            padding: 0.2rem 0.5rem 0.75rem;
            margin: 0 -0.15rem 0.15rem;
            border-bottom: 1px solid rgba(250, 204, 21, 0.28);
            box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
        }
        .province-vs-subtitle {
            margin: 0.35rem 0 0;
            font-size: 0.68rem;
            font-weight: 700;
            letter-spacing: 0.04em;
            color: rgba(226, 232, 240, 0.9);
        }
        .district-vs-select-panel {
            background: rgba(2, 6, 23, 0.52);
            border: 1px solid rgba(255, 215, 0, 0.22);
            border-radius: 12px;
            padding: 0.85rem 0.75rem;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
            margin-top: 1.1rem;
        }
        .district-vs-actions {
            margin-top: 3.25rem;
            padding-top: 0;
        }
        .district-vs-title {
            text-align: center;
            font-size: 0.875rem;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            line-height: 1.35;
            margin: 0;
            padding: 0;
        }
        .district-vs-title .district-vs-district-word {
            font-family: 'Inter', system-ui, sans-serif;
            font-weight: 900;
            letter-spacing: 0.12em;
            color: #FFD700;
        }
        .district-vs-title .district-vs-vs-word {
            display: inline-block;
            position: relative;
            font-family: 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
            font-weight: 400;
            font-size: 1.45em;
            line-height: 1;
            letter-spacing: 0.32em;
            text-indent: 0.14em;
            padding: 0.22em 0.7em 0.16em;
            margin: 0 0.22em;
            vertical-align: middle;
            text-transform: uppercase;
            font-style: normal;
            color: #ffffff;
            background: linear-gradient(165deg, #1e293b 0%, #0f172a 55%, #020617 100%);
            border: 2px solid #FFD700;
            border-radius: 6px;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 3px 0 rgba(0, 0, 0, 0.5);
            transform: skewX(-7deg);
        }
        .district-vs-title .district-vs-vs-inner {
            display: inline-block;
            transform: skewX(7deg);
        }
        .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-vs {
            flex-shrink: 0;
            align-self: center;
            font-size: 0.68rem;
            font-weight: 900;
            color: #fef08a;
            letter-spacing: 0.12em;
            padding: 0.42rem 0.55rem;
            border-radius: 9999px;
            background: linear-gradient(180deg, rgba(250, 204, 21, 0.22) 0%, rgba(120, 53, 15, 0.12) 100%);
            border: 1px solid rgba(253, 224, 71, 0.45);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                0 2px 6px rgba(0, 0, 0, 0.25);
        }
        .district-vs-select-wrap {
            flex: 1 1 0;
            min-width: 0;
            max-width: 11rem;
        }
        .district-select {
            width: 100%;
            max-width: 100%;
            background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(10, 12, 28, 0.96) 100%);
            color: #f8fafc;
            border: 1px solid rgba(255, 215, 0, 0.45);
            border-radius: 10px;
            padding: 0.42rem 0.55rem;
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s ease;
            appearance: auto;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
            /* Native dropdown list: avoid white list + inherited white text (Windows/Edge/Chrome) */
            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);
        }
        .district-compare-btn {
            flex-shrink: 0;
            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.45);
            cursor: pointer;
            color: #0a0c1a;
            background: linear-gradient(165deg, #FFFDE7 0%, #FFEB3B 14%, #FFD700 38%, #C9A010 88%, #A67C00 100%);
            box-shadow:
                inset 0 2px 0 rgba(255, 255, 255, 0.65),
                inset 0 -2px 4px rgba(120, 80, 0, 0.18),
                0 3px 0 #7A5A08,
                0 5px 12px rgba(0, 0, 0, 0.28);
            transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
        }
        .district-compare-btn:hover {
            filter: brightness(1.04);
            transform: translateY(-1px);
            box-shadow:
                inset 0 2px 0 rgba(255, 255, 255, 0.72),
                inset 0 -2px 4px rgba(120, 80, 0, 0.14),
                0 4px 0 #7A5A08,
                0 8px 16px rgba(0, 0, 0, 0.3);
        }
        .district-compare-btn:active {
            filter: brightness(0.98);
            transform: translateY(2px);
            box-shadow:
                inset 0 2px 6px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.35),
                0 1px 0 #7A5A08,
                0 2px 8px rgba(0, 0, 0, 0.22);
        }
        #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-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;
            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: 9999px;
            line-height: 1.35;
            letter-spacing: 0.02em;
            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-right: 0.15rem;
            box-sizing: border-box;
            text-align: center;
            overflow-x: auto;
            overflow-y: visible;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }
        .top10-preview-school {
            margin-top: 0;
            white-space: nowrap;
            width: max-content;
            max-width: none;
        }
        .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 {
            font-size: 0.64rem;
            color: rgba(250, 204, 21, 0.95);
            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;
        }
        @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.1rem;
            box-sizing: border-box;
            text-align: center;
            overflow-x: auto;
            overflow-y: visible;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: thin;
        }
        .top10-slide .top10-school-highlight {
            width: max-content;
            max-width: none;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 0;
            white-space: nowrap;
            overflow: visible;
            text-overflow: clip;
            word-break: normal;
            overflow-wrap: normal;
            hyphens: manual;
            text-align: center;
            padding: 0.4rem 1rem;
            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;
        }
        
        .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-brand-inner {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            padding: 0 5.5rem;
        }
        @media (min-width: 640px) {
            .otr-header-brand-inner {
                padding: 0 7.5rem;
            }
            .otr-header-ntn-slot {
                max-width: 13rem;
            }
        }
        .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-visible.otr-header-typewriter-visible--typing {
            color: transparent;
            background-image: linear-gradient(
                118deg,
                #fafaf9 0%,
                #f5f5f4 14%,
                #fffbeb 28%,
                #fcd34d 42%,
                #fafaf9 52%,
                #fbbf24 64%,
                #fefce8 76%,
                #fde68a 88%,
                #fafaf9 100%
            );
            background-size: 280% auto;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: otr-typewriter-gold-flow 4.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
            filter:
                drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55))
                drop-shadow(0 0 18px rgba(251, 191, 36, 0.22));
        }
        @keyframes otr-typewriter-gold-flow {
            0% {
                background-position: 0% center;
            }
            100% {
                background-position: 280% center;
            }
        }
        .otr-header-typewriter-visible--done {
            color: #fafaf9;
            background-image: none;
            -webkit-text-fill-color: #fafaf9;
            animation:
                otr-header-tagline-settle 1.25s cubic-bezier(0.22, 1, 0.36, 1) forwards,
                otr-header-tagline-shine 3.4s ease-in-out infinite 1.15s;
        }
        @keyframes otr-header-tagline-settle {
            0% {
                text-shadow: 0 0 0 transparent;
            }
            100% {
                text-shadow:
                    0 1px 2px rgba(0, 0, 0, 0.55),
                    0 0 28px rgba(251, 191, 36, 0.22),
                    0 0 52px rgba(245, 158, 11, 0.1),
                    0 0 1px rgba(255, 255, 255, 0.35);
            }
        }
        @keyframes otr-header-tagline-shine {
            0%,
            100% {
                filter: brightness(1) saturate(1);
            }
            50% {
                filter: brightness(1.05) saturate(1.06);
            }
        }
        .otr-header-tagline-wrap--hot {
            animation: otr-header-tagline-pulse 1.9s cubic-bezier(0.45, 0, 0.55, 1) infinite;
        }
        .otr-header-tagline-wrap--hot::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -0.3rem;
            height: 1px;
            border-radius: 999px;
            background: linear-gradient(
                90deg,
                transparent 0%,
                rgba(251, 191, 36, 0) 18%,
                rgba(251, 191, 36, 0.65) 48%,
                rgba(253, 224, 71, 0.45) 58%,
                transparent 100%
            );
            background-size: 200% 100%;
            animation: otr-header-tagline-underline 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
            pointer-events: none;
            box-shadow: 0 0 10px rgba(251, 191, 36, 0.35);
        }
        @keyframes otr-header-tagline-underline {
            0%,
            100% {
                background-position: 0% center;
                opacity: 0.55;
            }
            50% {
                background-position: 100% center;
                opacity: 0.95;
            }
        }
        .otr-header-tagline-wrap--complete {
            animation: otr-header-tagline-idle-halo 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
        }
        @keyframes otr-header-tagline-idle-halo {
            0%,
            100% {
                filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.12));
            }
            50% {
                filter: drop-shadow(0 0 17px rgba(251, 191, 36, 0.32));
            }
        }
        @keyframes otr-header-tagline-pulse {
            0%,
            100% {
                filter: brightness(1.02) drop-shadow(0 0 10px rgba(251, 191, 36, 0.28));
                transform: scale(1);
            }
            50% {
                filter: brightness(1.09) drop-shadow(0 0 19px rgba(251, 191, 36, 0.48));
                transform: scale(1.012);
            }
        }
        .otr-header-typewriter-cursor {
            display: inline-block;
            width: 2px;
            height: 0.92em;
            margin-left: 3px;
            vertical-align: -0.08em;
            border-radius: 1px;
            background: linear-gradient(180deg, #fafaf9 0%, #fcd34d 48%, #d97706 100%);
            box-shadow:
                0 0 8px rgba(251, 191, 36, 0.75),
                0 0 16px rgba(245, 158, 11, 0.28);
            animation: otr-header-cursor-blink 0.88s cubic-bezier(0.45, 0, 0.55, 1) infinite;
        }
        .otr-header-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 12px rgba(251, 191, 36, 0.92),
                0 0 22px rgba(245, 158, 11, 0.32);
        }
        @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 {
                animation: none;
                opacity: 0;
                width: 0;
                margin: 0;
            }
            .otr-header-typewriter-visible--typing {
                animation: none;
                color: #f8fafc;
                background-image: none;
                -webkit-text-fill-color: #f8fafc;
                filter: none;
            }
            .otr-header-typewriter-visible--done {
                animation: none;
                text-shadow: none;
                filter: none;
            }
            .otr-header-tagline-wrap--hot {
                animation: none;
                filter: none;
                transform: none;
            }
            .otr-header-tagline-wrap--hot::after {
                display: none;
            }
            .otr-header-tagline-wrap--complete {
                animation: none;
                filter: 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-header-typewriter-visible--typing {
            animation: none;
            background-position: 52% center;
            filter:
                drop-shadow(0 1px 1px rgba(0, 0, 0, 0.55))
                drop-shadow(0 0 12px rgba(251, 191, 36, 0.2));
        }
        html.otr-marquee-heavy-header-idle .otr-header-typewriter-visible--done {
            animation: none;
            filter: none;
            text-shadow:
                0 1px 2px rgba(0, 0, 0, 0.55),
                0 0 26px rgba(251, 191, 36, 0.2),
                0 0 42px rgba(245, 158, 11, 0.1),
                0 0 1px rgba(255, 255, 255, 0.32);
        }
        html.otr-marquee-heavy-header-idle .otr-header-tagline-wrap--hot {
            animation: none;
            filter:
                brightness(1.048)
                drop-shadow(0 0 13px rgba(251, 191, 36, 0.32));
            transform: none;
        }
        html.otr-marquee-heavy-header-idle .otr-header-tagline-wrap--hot::after {
            animation: none;
            background-position: 50% center;
            opacity: 0.82;
        }
        html.otr-marquee-heavy-header-idle .otr-header-tagline-wrap--complete {
            animation: none;
            filter: drop-shadow(0 0 12px rgba(251, 191, 36,0.28));
        }
        html.otr-marquee-heavy-header-idle #otr-site-header.otr-site-header {
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            background-color: rgba(5, 8, 22, 0.94);
        }
        
        /* 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 .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;
        }
        @media (prefers-reduced-motion: reduce) {
            #testimonials .testimonial-track.otr-marquee-motion--ready {
                transform: none;
            }
        }
        #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;
        }
        @media (prefers-reduced-motion: reduce) {
            .school-marquee.otr-marquee-motion--ready {
                transform: none;
            }
        }
        .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 prompts: normal weight for readability; .faq-answer copy unchanged */
        #faq .faq-question > span:first-of-type {
            font-weight: 400;
        }
        .faq-answer { display: none; }
        .faq-answer.show { display: block; }

        /* FAQ card: hairline edge accent only when an item is open ? no interior glow / no spread */
        #faq .glass-card {
            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-info-card {
            display: flex;
            flex-direction: column;
            min-height: 0;
            justify-content: flex-start;
            align-items: stretch;
        }
        #contact .otr-contact-info-head {
            flex-shrink: 0;
            margin: 0 0 1rem;
            padding-right: 0.15rem;
        }
        #contact .otr-contact-form-card {
            min-height: 0;
            align-items: stretch;
        }
        #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: modern sky CTA ? high-contrast black on brand sky */
        #contact .otr-contact-submit-btn.btn-primary {
            appearance: none;
            -webkit-appearance: none;
            border-radius: 0.875rem;
            padding-top: 0.95rem;
            padding-bottom: 0.95rem;
            letter-spacing: 0.02em;
            font-weight: 700;
            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:
                0 1px 0 rgba(255, 255, 255, 0.35) inset,
                0 10px 24px rgba(14, 165, 233, 0.22),
                0 2px 6px rgba(15, 23, 42, 0.18);
            transition:
                background 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.2s ease,
                border-color 0.2s ease,
                transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
                color 0.18s ease;
        }
        #contact .otr-contact-submit-btn.btn-primary:hover:not(:disabled) {
            filter: none;
            transform: translateY(-1px);
            color: #000000;
            background: linear-gradient(
                165deg,
                #7dd3fc 0%,
                #53c4ff 45%,
                #38bdf8 100%
            );
            border-color: rgba(8, 47, 73, 0.32);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.42) inset,
                0 12px 28px rgba(14, 165, 233, 0.3),
                0 4px 10px rgba(15, 23, 42, 0.2);
        }
        #contact .otr-contact-submit-btn.btn-primary:active:not(:disabled) {
            transform: translateY(0);
            color: #0a0a0a;
            background: linear-gradient(165deg, #38bdf8 0%, #0284c7 100%);
            box-shadow:
                0 1px 3px rgba(0, 0, 0, 0.12) inset,
                0 4px 12px rgba(14, 165, 233, 0.2);
        }
        #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(14, 165, 233, 0.95);
            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: 22rem;
            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: clamp(0.55rem, 3.5vmin, 0.95rem);
            justify-content: space-evenly;
            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-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: #e2e8f0;
        }
        #contact .otr-contact-info-row--address .otr-contact-info-text {
            line-height: 1.45;
        }
        #contact .otr-contact-info-place {
            display: block;
            font-size: 1rem;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: #fffbeb;
            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(186, 198, 214, 0.95);
            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: #fffbeb;
            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;
        }

        .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; }
        /* Wonderchat: hidden only during active MCQ; prominent on all other public surfaces. */
        html[data-otr-wonderchat-off="1"] #wonderchat-seo-wrapper,
        html[data-otr-wonderchat-off="1"] #placeholder-wonderchat-button,
        html[data-otr-wonderchat-off="1"] [id*="wonderchat" i],
        html[data-otr-wonderchat-off="1"] [class*="wonderchat" i],
        html[data-otr-wonderchat-off="1"] iframe[src*="wonderchat" i],
        html[data-otr-wonderchat-off="1"] iframe[src*="app.wonderchat.io" i] {
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transition: opacity 0.15s ease, visibility 0.15s ease;
        }
        html[data-otr-wonderchat-prominent="1"]:not([data-otr-wonderchat-off="1"]) #wonderchat-seo-wrapper,
        html[data-otr-wonderchat-prominent="1"]:not([data-otr-wonderchat-off="1"]) #placeholder-wonderchat-button,
        html[data-otr-wonderchat-prominent="1"]:not([data-otr-wonderchat-off="1"]) [id*="wonderchat" i],
        html[data-otr-wonderchat-prominent="1"]:not([data-otr-wonderchat-off="1"]) [class*="wonderchat" i] {
            z-index: 2050 !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
            transition: opacity 0.25s ease, transform 0.25s ease;
        }
        @media (max-width: 768px) {
            html[data-otr-wonderchat-prominent="1"]:not([data-otr-wonderchat-off="1"]) #wonderchat-seo-wrapper,
            html[data-otr-wonderchat-prominent="1"]:not([data-otr-wonderchat-off="1"]) #placeholder-wonderchat-button {
                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; }
        .syllabus-modal-shell {
            position: relative;
            max-width: min(44rem, 96vw);
            width: 92%;
            max-height: min(94vh, 52rem);
            min-height: 0;
            padding: 1.4rem 1.35rem 1rem;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border-radius: 24px;
            border: 1px solid rgba(253, 224, 71, 0.28);
            background:
                radial-gradient(ellipse 100% 50% at 50% -20%, rgba(253, 224, 71, 0.1) 0%, transparent 55%),
                linear-gradient(168deg, #0c1222 0%, #070b14 45%, #050810 100%);
            box-shadow: 0 32px 72px rgba(0, 0, 0, 0.6);
            text-align: left;
        }
        .syllabus-modal-shell > .syllabus-modal-title,
        .syllabus-modal-shell > .syllabus-modal-lead,
        .syllabus-modal-shell > .syllabus-pickers {
            flex-shrink: 0;
        }
        .syllabus-modal-shell > .close {
            float: none;
            position: absolute;
            top: 0.7rem;
            right: 0.75rem;
            z-index: 5;
            width: 2.25rem;
            height: 2.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-size: 1.35rem;
            line-height: 1;
            background: rgba(15, 23, 42, 0.9);
            border: 1px solid rgba(253, 224, 71, 0.25);
        }
        .syllabus-modal-title {
            font-size: 1.1rem;
            font-weight: 900;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: #fde047;
            margin: 0 2.2rem 0.5rem 0;
            text-shadow: none;
        }
        .syllabus-modal-lead {
            font-size: 0.8rem;
            line-height: 1.52;
            color: #a8b4c4;
            margin: 0 0 0.65rem;
        }
        .syllabus-section-heading,
        .syllabus-class-label,
        .syllabus-chips-title {
            color: #fde047;
            text-shadow: none;
        }
        /* Syllabi picker: class pill left, chips wrap alongside */
        .syllabus-pickers {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.4rem;
            margin-bottom: 0.35rem;
        }
        /* CLASS label + dropdown live side-by-side in one pill-style group */
        .syl-class-group {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            background: rgba(253, 224, 71, 0.07);
            border: 1.5px solid rgba(253, 224, 71, 0.55);
            border-radius: 10px;
            padding: 0.28rem 0.5rem 0.28rem 0.65rem;
            flex-shrink: 0;
            box-shadow: 0 0 10px rgba(253, 224, 71, 0.1);
        }
        .syllabus-class-label {
            display: inline;
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            white-space: nowrap;
            margin-bottom: 0;
            cursor: default;
            line-height: 1;
        }
        .syllabus-class-select {
            width: auto;
            min-width: 5.2rem;
            padding: 0.22rem 0.4rem;
            font-size: 0.84rem;
            font-weight: 600;
            border-radius: 7px;
            border: 1px solid rgba(148, 163, 184, 0.25);
            background: rgba(15, 23, 42, 0.0);
            color: #fde047;
            cursor: pointer;
            outline: none;
        }
        .syllabus-class-select:focus {
            border-color: rgba(253, 224, 71, 0.55);
            box-shadow: 0 0 0 2px rgba(253, 224, 71, 0.12);
        }
        /* Fix: option text must be dark on the browser's native white dropdown */
        .syllabus-class-select option {
            color: #1e293b;
            background: #f8fafc;
        }
        /* chips container becomes invisible to flex (children flow directly) */
        .syllabus-subject-chips {
            display: contents;
        }
        .syllabus-subject-chips button {
            padding: 0.4rem 0.52rem;
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 0.03em;
            text-transform: none;
            border-radius: 8px;
            border: 1px solid rgba(148, 163, 184, 0.3);
            background: rgba(15, 23, 42, 0.6);
            color: #c8d0dd;
            cursor: pointer;
            transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
        }
        .syllabus-subject-chips button:hover {
            color: #e2e8f0;
            border-color: rgba(253, 224, 71, 0.35);
        }
        .syllabus-subject-chips button.syl-subject-active {
            color: #0f172a;
            background: linear-gradient(135deg, #fef9c3, #fde047, #eab308);
            border-color: rgba(253, 224, 71, 0.5);
            box-shadow: 0 2px 10px rgba(234, 179, 8, 0.2);
        }
        .syllabus-topic-heading {
            font-size: 0.78rem;
            font-weight: 800;
            letter-spacing: 0.11em;
            text-transform: uppercase;
            margin: 0 0 0.12rem;
            padding: 0;
            line-height: 1.25;
            flex-shrink: 0;
        }
        .syllabus-topic-subline {
            margin: 0 0 0.6rem;
            padding: 0;
            font-size: 0.66rem;
            font-weight: 600;
            letter-spacing: 0.05em;
            color: #4e6075;
            text-transform: uppercase;
            flex-shrink: 0;
        }
        /* -- Download PDF button & header row -- */
        .syllabus-topic-header-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.5rem;
            flex-shrink: 0;
            flex-wrap: wrap;
            padding: 0.8rem 0.85rem 0 0.85rem;
        }
        .syl-download-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.38rem 0.85rem;
            border-radius: 8px;
            border: 1.5px solid rgba(253,224,71,0.55);
            background: rgba(253,224,71,0.08);
            color: #fde047;
            font-size: 0.72rem;
            font-weight: 800;
            letter-spacing: 0.07em;
            text-transform: uppercase;
            cursor: pointer;
            white-space: nowrap;
            flex-shrink: 0;
            transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.12s;
            box-shadow: 0 0 8px rgba(253,224,71,0.08);
        }
        .syl-download-btn:hover {
            background: rgba(253,224,71,0.16);
            border-color: rgba(253,224,71,0.85);
            box-shadow: 0 0 16px rgba(253,224,71,0.22);
            transform: translateY(-1px);
        }
        .syl-download-btn:active {
            transform: translateY(0);
            background: rgba(253,224,71,0.22);
        }
        .syl-download-btn i { font-size: 0.68rem; }
        .syl-action-row {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            flex-wrap: wrap;
        }
        .syl-info-chip {
            cursor: default;
            background: #0c1a3d;
            border-color: #1e3a6e;
            color: #fde047;
            text-transform: none;
            font-weight: 600;
            letter-spacing: 0.02em;
            box-shadow: none;
        }
        .syl-info-chip:hover {
            transform: none;
            background: #0c1a3d;
            border-color: #1e3a6e;
            box-shadow: none;
        }
        #syl-download-btn {
            background: #0ea5e9;
            border-color: #000;
            color: #000;
            text-transform: uppercase;
            font-weight: 700;
            letter-spacing: 0.07em;
            box-shadow: none;
            margin-left: 0.55rem;
        }
        #syl-download-btn:hover {
            background: #38bdf8;
            border-color: #000;
            color: #000;
            box-shadow: none;
            transform: translateY(-1px);
        }
        #syl-download-btn:active {
            background: #0284c7;
            color: #000;
            transform: translateY(0);
        }
        .syllabus-topic-block {
            position: relative;
            margin-top: 0.3rem;
            padding: 0;
            border-radius: 16px;
            border: 1px solid rgba(253, 224, 71, 0.2);
            background:
                linear-gradient(180deg, rgba(253, 224, 71, 0.055) 0%, transparent 38%),
                linear-gradient(160deg, rgba(20, 27, 50, 0.95) 0%, rgba(7, 10, 18, 0.98) 100%);
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.05),
                0 16px 48px rgba(0, 0, 0, 0.4);
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        /* Fade-out gradient at the bottom to signal more content */
        .syllabus-topic-block::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4.5rem;
            background: linear-gradient(to bottom, transparent 0%, rgba(7, 10, 18, 0.96) 100%);
            pointer-events: none;
            z-index: 2;
            border-radius: 0 0 15px 15px;
        }
        .syllabus-topic-scroll {
            flex: 1 1 auto;
            min-height: 0;
            max-height: none;
            direction: ltr;
            overflow-y: scroll;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
            padding: 0.1rem 1.4rem 4rem 0.05rem;
            scroll-padding-bottom: 3rem;
            scrollbar-width: thin;
            scrollbar-color: rgba(253, 224, 71, 0.45) transparent;
        }
        .syllabus-topic-scroll::-webkit-scrollbar {
            width: 5px;
        }
        .syllabus-topic-scroll::-webkit-scrollbar-track {
            background: transparent;
        }
        .syllabus-topic-scroll::-webkit-scrollbar-thumb {
            background: rgba(253, 224, 71, 0.38);
            border-radius: 999px;
        }
        .syllabus-topic-scroll::-webkit-scrollbar-thumb:hover {
            background: rgba(253, 224, 71, 0.65);
        }
        .syllabus-urdu-class-note {
            display: block;
            margin: 0 0 0.9rem;
            padding: 0.55rem 0.7rem 0.6rem 0.6rem;
            border-radius: 10px;
            border-right: 3px solid rgba(253, 224, 71, 0.4);
            background: rgba(253, 224, 71, 0.05);
            font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Nafees Web Naskh", serif;
            font-size: clamp(0.8rem, 0.78rem + 0.2vw, 0.86rem);
            line-height: 1.9;
            font-weight: 500;
            color: #d1dae6;
            text-align: right;
            direction: rtl;
            text-rendering: optimizeLegibility;
        }
        .syllabus-topic-ol {
            margin: 0;
            padding: 0 0 3.5rem 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0;
            counter-reset: syl-ltr;
        }
        .syllabus-topic-ol li:not(.urdu-syllabus-line) {
            counter-increment: syl-ltr;
            position: relative;
            padding: 0.62rem 0.6rem 0.62rem 2.7rem;
            border-bottom: 1px solid rgba(148, 163, 184, 0.08);
            transition: background 0.15s;
        }
        .syllabus-topic-ol li:not(.urdu-syllabus-line):last-child {
            border-bottom: none;
        }
        .syllabus-topic-ol li:not(.urdu-syllabus-line):hover {
            background: rgba(253, 224, 71, 0.04);
            border-radius: 8px;
        }
        .syllabus-topic-ol li:not(.urdu-syllabus-line)::before {
            content: counter(syl-ltr);
            position: absolute;
            left: 0.45rem;
            top: 50%;
            transform: translateY(-50%);
            width: 1.6rem;
            height: 1.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            background: rgba(253, 224, 71, 0.08);
            border: 1px solid rgba(253, 224, 71, 0.15);
            font-family: "Inter", system-ui, sans-serif;
            font-size: 0.68rem;
            font-weight: 800;
            color: #fde047;
            text-shadow: none;
            line-height: 1;
        }
        .syllabus-topic-ol.urdu-syllabus {
            list-style: none;
            padding: 0 0 1.5rem 0;
            margin: 0;
            display: block;
            counter-reset: syl-ur;
        }
        .syllabus-topic-ol.urdu-syllabus li.urdu-syllabus-line {
            counter-increment: syl-ur;
            position: relative;
            list-style: none;
            display: block;
            padding: 0.15rem 2.65rem 0.2rem 0.35rem;
            margin: 0 0 0.88rem;
            min-height: 1em;
            text-align: right;
            unicode-bidi: isolate;
            white-space: normal;
            word-break: normal;
            line-break: normal;
        }
        .syllabus-topic-ol.urdu-syllabus li.urdu-syllabus-line:last-child {
            margin-bottom: 0;
        }
        .syllabus-topic-ol.urdu-syllabus li.urdu-syllabus-line::before {
            content: counter(syl-ur);
            position: absolute;
            right: 0.05rem;
            top: 0.12em;
            width: 1.9rem;
            text-align: center;
            font-family: "Inter", system-ui, sans-serif;
            font-size: 0.72rem;
            font-weight: 800;
            line-height: 1.4;
            color: #fef08a;
            opacity: 0.95;
            text-shadow: none;
            pointer-events: none;
        }
        .urdu-syllabus-line,
        .urdu-syllabus {
            font-family: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Nafees Web Naskh", serif;
            font-size: clamp(0.82rem, 0.8rem + 0.22vw, 0.9rem);
            line-height: 1.95;
            font-weight: 500;
            word-spacing: 0.02em;
            text-rendering: optimizeLegibility;
        }
        .urdu-syllabus-line { color: #e8edf5; }
        .syllabus-topic-ol li:not(.urdu-syllabus-line) {
            font-size: clamp(0.83rem, 0.82rem + 0.2vw, 0.92rem);
            line-height: 1.52;
            font-weight: 500;
            letter-spacing: 0.01em;
            color: #ccd6e0;
            text-rendering: optimizeLegibility;
        }
        .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-picker-shell {
            max-width: 460px;
            width: 92%;
            padding: 0;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 28px;
            background:
                radial-gradient(ellipse 120% 85% at 50% -25%, rgba(253, 224, 71, 0.09) 0%, transparent 52%),
                linear-gradient(168deg, #0e1428 0%, #070b14 42%, #050810 100%);
            box-shadow:
                0 0 0 1px rgba(255, 255, 255, 0.05) inset,
                0 32px 72px rgba(0, 0, 0, 0.58),
                0 0 64px rgba(234, 179, 8, 0.04);
        }
        /* Beat generic .modal-content gold frame on portal chooser */
        .modal-content.portal-picker-shell {
            border: 1px solid rgba(255, 255, 255, 0.1);
            background:
                radial-gradient(ellipse 120% 85% at 50% -25%, rgba(253, 224, 71, 0.09) 0%, transparent 52%),
                linear-gradient(168deg, #0e1428 0%, #070b14 42%, #050810 100%);
            padding: 0;
            border-radius: 28px;
        }
        .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.85rem 1.2rem 1.35rem;
        }
        .portal-picker-header {
            text-align: center;
            padding: 0.2rem 1.25rem 0.95rem;
            border-bottom: 1px solid rgba(148, 163, 184, 0.12);
            margin-bottom: 1rem;
        }
        .portal-picker-kicker {
            margin: 0 0 0.28rem;
            font-size: 0.58rem;
            font-weight: 800;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(253, 224, 71, 0.72);
        }
        .portal-picker-shell .portal-picker-title {
            margin: 0;
            font-size: 1.35rem;
            font-weight: 900;
            letter-spacing: -0.02em;
            background: linear-gradient(105deg, #fef9c3 0%, #fde047 35%, #eab308 70%, #fbbf24 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 8px 32px rgba(234, 179, 8, 0.25);
        }
        .portal-picker-lead {
            margin: 0.4rem auto 0;
            font-size: 0.76rem;
            line-height: 1.35;
            color: #94a3b8;
            max-width: 26rem;
        }
        .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: 560px;
            }
            .portal-picker-grid {
                grid-template-columns: 1fr 1fr;
                gap: 1.15rem;
            }
        }
        .portal-picker-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            height: 100%;
            min-height: 0;
            padding: 1.2rem 1.1rem 1.05rem;
            border-radius: 18px;
            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: "";
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 68%;
            max-width: 11rem;
            height: 2px;
            border-radius: 0 0 4px 4px;
            opacity: 0.78;
            pointer-events: none;
            z-index: 4;
        }
        .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: translateY(-4px);
        }
        .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.55rem;
            height: 3.55rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.38rem;
            margin: 0 auto 0.9rem;
            border: 1px solid rgba(255, 255, 255, 0.14);
            box-shadow:
                0 4px 14px rgba(0, 0, 0, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.22);
        }
        .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.06rem;
            font-weight: 800;
            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.74rem;
            line-height: 1.45;
            color: #a8b4c9;
            font-weight: 500;
            text-align: center;
        }
        .portal-picker-cta-row {
            position: relative;
            z-index: 2;
            margin-top: auto;
            padding-top: 1rem;
            width: 100%;
        }
        .portal-picker-cta-pill {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            width: 100%;
            padding: 0.65rem 1rem;
            border-radius: 12px;
            font-size: 0.8125rem;
            font-weight: 700;
            letter-spacing: 0.02em;
            line-height: 1.2;
            transition:
                background 0.22s ease,
                border-color 0.22s ease,
                color 0.22s ease,
                box-shadow 0.22s ease;
        }
        .portal-picker-card--student .portal-picker-cta-pill {
            color: #fffbeb;
            background: linear-gradient(180deg, rgba(251, 191, 36, 0.22) 0%, rgba(217, 119, 6, 0.12) 100%);
            border: 1px solid rgba(253, 224, 71, 0.35);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.14) inset,
                0 6px 16px rgba(0, 0, 0, 0.28);
        }
        .portal-picker-card--student:hover .portal-picker-cta-pill {
            background: linear-gradient(180deg, rgba(251, 191, 36, 0.32) 0%, rgba(217, 119, 6, 0.18) 100%);
            border-color: rgba(253, 224, 71, 0.48);
            color: #ffffff;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.18) inset,
                0 8px 22px rgba(0, 0, 0, 0.32),
                0 0 24px rgba(234, 179, 8, 0.12);
        }
        .portal-picker-card--school .portal-picker-cta-pill {
            color: #eff6ff;
            background: linear-gradient(180deg, rgba(59, 130, 246, 0.28) 0%, rgba(30, 64, 175, 0.14) 100%);
            border: 1px solid rgba(147, 197, 253, 0.4);
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.12) inset,
                0 6px 16px rgba(0, 0, 0, 0.28);
        }
        .portal-picker-card--school:hover .portal-picker-cta-pill {
            background: linear-gradient(180deg, rgba(96, 165, 250, 0.38) 0%, rgba(30, 64, 175, 0.22) 100%);
            border-color: rgba(191, 219, 254, 0.55);
            color: #ffffff;
            box-shadow:
                0 1px 0 rgba(255, 255, 255, 0.16) inset,
                0 8px 22px rgba(0, 0, 0, 0.32),
                0 0 24px rgba(59, 130, 246, 0.14);
        }
        .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.85rem 1rem 1.25rem;
            }
            .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;
        }
        .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;
        }
        .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 select {
            border-radius: 10px !important;
            border: 1px solid rgba(71, 85, 105, 0.65) !important;
            background: rgba(15, 23, 42, 0.72) !important;
            transition: border-color 0.15s ease;
        }
        .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 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;
        }
        .reg-form input[readonly] {
            opacity: 0.92;
            cursor: not-allowed;
            background: rgba(30, 41, 59, 0.85);
        }
        .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);
        }
        .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;
            border: 1px solid rgba(71, 85, 105, 0.65) !important;
            background: rgba(15, 23, 42, 0.72) !important;
            transition: border-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;
            border-top: 1px solid rgba(51, 65, 85, 0.45);
        }
        /* 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;
        }
        .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;
        }
        #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;
        }

        /* 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: calc(3.05rem / 2 + 0.35rem);
            }
        }
        .otr-footer-premium__brand {
            min-width: 0;
        }
        .otr-footer-premium__brand-kicker {
            display: flex;
            flex-direction: row;
            align-items: center;
            flex-wrap: nowrap;
            gap: 0.82rem;
            margin: 0 0 0.85rem;
        }
        .otr-footer-premium__logo {
            flex-shrink: 0;
            width: 3.05rem;
            height: 3.05rem;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 30%, rgba(28, 32, 48, 1), #05070f 72%);
            color: #facc15;
            border: 1px solid rgba(250, 204, 21, 0.38);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            font-size: 0.92rem;
            letter-spacing: 0.06em;
            margin-bottom: 0;
            box-shadow:
                inset 0 1px 0 rgba(253, 224, 71, 0.12),
                0 8px 24px rgba(0, 0, 0, 0.45);
        }
        .otr-footer-premium__logo span {
            transform: translateY(0.5px);
        }
        .otr-footer-premium__brand-sub {
            margin: 0;
            flex: 1 1 auto;
            min-width: 0;
            font-size: 0.6875rem;
            font-weight: 700;
            letter-spacing: 0.28em;
            text-transform: uppercase;
            color: rgba(226, 232, 240, 0.75);
        }
        .otr-footer-premium__lead,
        .otr-footer-premium__about {
            font-size: 0.875rem;
            font-weight: 500;
            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;
        }
        @media (min-width: 1024px) {
            .otr-footer-premium__entity.otr-footer-premium__entity--registry {
                white-space: nowrap;
                font-size: 0.8125rem;
            }
        }
        .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__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__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.35rem;
            padding-bottom: 0.2rem;
        }
        @media (min-width: 768px) {
            #hero .otr-hero-auth-ribbon {
                padding-top: 0.45rem;
                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;
        }
        #pricing.otr-pricing--offscreen .pricing-tier-price-pill::before,
        #pricing.otr-pricing--offscreen .pricing-tier-price-pill::after {
            animation-play-state: paused !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);
    }
    .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--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;
        background:linear-gradient(165deg, rgba(15,23,42,0.92) 0%, rgba(8,15,33,0.9) 100%);
        border:1px solid rgba(253,224,71,0.26);
        border-radius:22px; padding:1.75rem 1.65rem 1.5rem;
        width:min(32rem,96vw); max-width:100%; backdrop-filter:blur(14px);
        box-shadow:0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(56,189,248,0.12) inset;
        margin-bottom: 0.5rem;
    }
    .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 {
        font-size: 1.05rem;
        font-weight: 800;
        color: #f1f5f9;
        margin: 0;
        flex: 1;
        min-width: 0;
        letter-spacing: 0.04em;
        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-kicker {
        margin:0 0 1rem;
        font-size:0.72rem;
        letter-spacing:0.06em;
        color:#93c5fd;
    }
    .dt-field { display:flex; flex-direction:column; gap:0.32rem; margin-bottom:0.75rem; }
    .dt-field select:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }
    .dt-field label {
        font-size:0.68rem; font-weight:800; letter-spacing:0.1em;
        text-transform:uppercase; color:#fde047;
    }
    .dt-field input, .dt-field select {
        background:rgba(5,8,15,0.7); border:1px solid rgba(148,163,184,0.25);
        border-radius:10px; padding:0.6rem 0.75rem; color:#e2e8f0;
        font-size:0.9rem; font-family:'Inter',sans-serif; outline:none;
        transition:border-color 0.2s;
    }
    .dt-field input:focus, .dt-field select:focus {
        border-color:rgba(253,224,71,0.5);
    }
    .dt-field-hint {
        margin: -0.15rem 0 0.35rem;
        font-size: 0.72rem;
        line-height: 1.45;
        color: #94a3b8;
    }
    .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(56,189,248,0.5);
        box-shadow:0 0 0 3px rgba(56,189,248,0.18);
        display:none;
    }
    .dt-start-entry-btn {
        width:100%; padding:0.85rem; border-radius:12px; border:none;
        background:linear-gradient(135deg,#fef9c3,#fde047,#eab308);
        color:#0a0c1a; font-size:1rem; font-weight:900;
        letter-spacing:0.06em; cursor:pointer; margin-top:0.4rem;
        transition:transform 0.15s, box-shadow 0.15s;
        box-shadow:0 4px 0 #a16207, 0 8px 20px rgba(234,179,8,0.3);
    }
    .dt-start-entry-btn:hover { transform:translateY(-2px); }
    .dt-start-entry-btn:active { transform:translateY(2px); box-shadow:0 2px 0 #a16207; }
    .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-left: 4.6rem;
        padding-right: 1rem;
        padding-top: 1.25rem;
        padding-bottom: 1rem;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        min-height: 0;
    }
    /* -------------------------------------------------------
       WELCOME SCREEN ? Premium Redesign
       ------------------------------------------------------- */
    .dt-welcome-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        align-items: center;
        max-width: min(54rem, 94vw);
        margin: 0 auto;
        position: relative;
        z-index: 2;
        width: 100%;
        box-sizing: border-box;
        padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 4vw, 2.5rem);
        border-radius: 26px;
        background:
            linear-gradient(160deg, rgba(14,20,42,0.96) 0%, rgba(8,12,28,0.94) 50%, rgba(16,28,52,0.90) 100%);
        border: 1px solid rgba(253,224,71,0.32);
        box-shadow:
            0 0 0 1px rgba(56,189,248,0.12) inset,
            0 32px 72px rgba(0,0,0,0.6),
            0 0 100px rgba(253,224,71,0.18),
            0 0 40px rgba(56,189,248,0.08);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
    .dt-welcome-col { min-width: 0; }
    @media (min-width: 768px) {
        .dt-welcome-layout {
            grid-template-columns: minmax(12rem, 1fr) minmax(18rem, 1.45fr);
            gap: 2.25rem;
        }
        .dt-welcome-col--visual { text-align: center; }
        .dt-welcome-col--copy { text-align: left; }
        .dt-welcome-col--copy .dt-welcome-inspire { margin-left: 0; margin-right: 0; }
        .dt-welcome-pill-row { justify-content: flex-start; }
    }

    /* --- 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: clamp(0.78rem, 2.2vw, 1rem);
        font-weight: 700;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        color: #94a3b8;
        animation: dt-name-in 0.5s 0.1s both;
    }
    .dt-welcome-otr {
        font-size: clamp(2.6rem, 8vw, 4.2rem);
        font-weight: 900;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        background: linear-gradient(135deg, #fff9c4, #fde047, #f59e0b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: dt-pulse-glow 2s ease-in-out infinite, dt-name-in 0.5s 0.2s both;
        line-height: 1;
        position: relative;
        z-index: 2;
    }
    @keyframes dt-pulse-glow {
        0%,100% { filter: drop-shadow(0 0 14px rgba(253,224,71,0.55)); }
        50%     { filter: drop-shadow(0 0 36px rgba(253,224,71,1)); }
    }
    .dt-welcome-badge {
        font-size: 0.68rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: #475569;
        margin-top: 0.1rem;
        animation: dt-name-in 0.5s 0.3s both;
        position: relative;
        z-index: 2;
    }

    /* --- Divider --- */
    .dt-welcome-divider {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        margin: 0.8rem 0;
        width: 80%;
        align-self: center;
        animation: dt-name-in 0.5s 0.4s both;
        position: relative;
        z-index: 2;
    }
    .dt-welcome-divider span {
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(253,224,71,0.45), transparent);
    }
    .dt-welcome-divider i {
        color: #fde047;
        font-size: 0.6rem;
        opacity: 0.9;
        animation: dt-pulse-glow 2s ease-in-out infinite;
    }

    /* --- Avatar --- */
    .dt-welcome-avatar-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
    }
    .dt-welcome-avatar-ring {
        position: absolute;
        inset: -8px;
        border-radius: 50%;
        border: 2px solid rgba(253,224,71,0.35);
        animation: dt-avatar-ring-spin 8s linear infinite;
        background: conic-gradient(from 0deg, rgba(253,224,71,0.5), transparent 60%, rgba(56,189,248,0.4), transparent);
        border: none;
    }
    @keyframes dt-avatar-ring-spin {
        from { transform: rotate(0deg); }
        to   { transform: rotate(360deg); }
    }
    .dt-welcome-avatar {
        width: clamp(5.5rem, 15vw, 8rem);
        height: clamp(5.5rem, 15vw, 8rem);
        border-radius: 50%;
        background: linear-gradient(135deg, #1e3a5f, #1e40af);
        border: 3px solid rgba(253,224,71,0.7);
        box-shadow:
            0 0 0 6px rgba(253,224,71,0.12),
            0 0 50px rgba(253,224,71,0.3),
            0 8px 32px rgba(0,0,0,0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: clamp(2rem, 6vw, 3rem);
        font-weight: 900;
        color: #fff;
        animation: dt-avatar-in 0.7s 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
        position: relative;
        z-index: 1;
    }
    .dt-welcome-photo {
        display: none;
        width: clamp(5.5rem, 15vw, 8rem);
        height: clamp(5.5rem, 15vw, 8rem);
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid rgba(253,224,71,0.7);
        box-shadow:
            0 0 0 6px rgba(253,224,71,0.12),
            0 0 50px rgba(56,189,248,0.35),
            0 8px 32px rgba(0,0,0,0.45);
        animation: dt-avatar-in 0.7s 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
        position: relative;
        z-index: 1;
    }
    @keyframes dt-avatar-in {
        0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
        100% { transform: scale(1) rotate(0deg);  opacity: 1; }
    }
    .dt-welcome-demo-title {
        font-size: clamp(0.7rem, 2.2vw, 0.88rem);
        font-weight: 900;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #38bdf8;
        margin: 0.65rem 0 0;
        position: relative;
        z-index: 2;
        animation: dt-name-in 0.5s 0.7s both;
        filter: drop-shadow(0 0 12px rgba(56,189,248,0.45));
    }

    /* --- Copy column --- */
    @keyframes dt-name-in {
        0%   { opacity: 0; transform: translateY(18px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    .dt-welcome-greeting {
        font-size: clamp(0.82rem, 2.5vw, 1rem);
        font-weight: 600;
        color: #64748b;
        letter-spacing: 0.04em;
        animation: dt-name-in 0.5s 0.3s both;
        position: relative;
        z-index: 2;
    }
    .dt-welcome-name {
        font-size: clamp(1.8rem, 5.5vw, 3.2rem);
        font-weight: 900;
        color: #f1f5f9;
        letter-spacing: -0.03em;
        line-height: 1.1;
        animation: dt-name-in 0.5s 0.45s both;
        position: relative;
        z-index: 2;
        text-shadow: 0 4px 32px rgba(0,0,0,0.6), 0 0 60px rgba(253,224,71,0.12);
    }
    #dt-screen-welcome .dt-welcome-name {
        text-shadow: 0 4px 28px rgba(0,0,0,0.55), 0 0 48px rgba(253,224,71,0.14);
    }
    .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.95rem;
        color: #fde047;
        font-weight: 800;
        animation: dt-name-in 0.5s 0.6s both;
        position: relative;
        z-index: 2;
        margin-top: 0.15rem;
    }
    .dt-welcome-countdown {
        margin-top: 0.9rem;
        font-size: clamp(1.2rem, 4vw, 1.65rem);
        font-weight: 900;
        font-variant-numeric: tabular-nums;
        color: #fef08a;
        letter-spacing: 0.04em;
        text-shadow: 0 0 28px rgba(253,224,71,0.45);
        min-height: 1.6em;
        position: relative;
        z-index: 2;
        animation: dt-name-in 0.5s 0.75s both;
    }
    .dt-welcome-countdown--pulse {
        animation: dt-welcome-cd-pulse 0.9s ease-in-out infinite;
    }
    @keyframes dt-welcome-cd-pulse {
        0%,100% { opacity: 1; transform: scale(1); }
        50%     { opacity: 0.82; transform: scale(1.04); }
    }
    .dt-welcome-inspire {
        max-width: min(36rem, 92vw);
        margin: 0.6rem auto 0;
        color: #94a3b8;
        font-size: 0.88rem;
        line-height: 1.7;
        animation: dt-name-in 0.55s 0.9s both;
        position: relative;
        z-index: 2;
        border-left: 2px solid rgba(253,224,71,0.35);
        padding-left: 0.85rem;
    }
    @media (max-width: 767px) {
        .dt-welcome-inspire {
            border-left: none;
            padding-left: 0;
            text-align: center;
        }
    }
    .dt-welcome-pill-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 1rem;
        animation: dt-name-in 0.55s 1.05s both;
    }
    .dt-welcome-pill {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.38rem 0.78rem;
        border-radius: 999px;
        border: 1px solid rgba(253,224,71,0.28);
        background: rgba(253,224,71,0.06);
        color: #fde047;
        font-size: 0.64rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        backdrop-filter: blur(4px);
        transition: background 0.2s, border-color 0.2s;
    }
    .dt-welcome-pill:hover {
        background: rgba(253,224,71,0.12);
        border-color: rgba(253,224,71,0.5);
    }
    .dt-welcome-pill i { font-size: 0.6rem; opacity: 0.8; }
    .dt-welcome-cls-note {
        font-size: 0.68rem;
        color: #334155;
        margin-top: 0.5rem;
        letter-spacing: 0.06em;
        animation: dt-name-in 0.5s 1.15s 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 {
        /* Full-bleed test UI (avoid double-padding from `.dt-screen`) */
        padding:0 !important;
        flex:1 1 auto;
        min-height:0;
        max-height:100vh;
        max-height:100dvh;
        overflow:hidden;
        flex-direction:column;
        align-items:stretch;
        justify-content:flex-start;
        background:
            radial-gradient(ellipse 80% 40% at 50% -5%, rgba(253,224,71,0.06) 0%, transparent 60%),
            #05080f;
    }
    /* Test UI: top bar */
    .dt-test-topbar {
        flex-shrink:0; display:flex; align-items:center;
        /* Left padding keeps the header clear of the top-left close control */
        padding:0.68rem 1.35rem 0.62rem 4.6rem;
        border-bottom:1px solid rgba(255,255,255,0.06);
        background:linear-gradient(180deg, rgba(2,6,23,0.95), rgba(2,6,23,0.8));
        gap:0.9rem;
    }
    .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.45);
        background:linear-gradient(90deg, rgba(127,29,29,0.55), rgba(69,10,10,0.92));
        color:#fecaca;
        animation:dt-integrity-bar-pulse 1.2s ease-in-out infinite alternate;
    }
    @keyframes dt-integrity-bar-pulse {
        to { box-shadow:inset 0 0 0 1px rgba(248,113,113,0.35); }
    }
    #otr-demo-overlay.otr-demo-overlay--integrity-alert {
        box-shadow:inset 0 0 0 3px rgba(248,113,113,0.55), 0 0 48px rgba(239,68,68,0.22);
    }
    #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 3px rgba(248,113,113,0.55); }
        50% { box-shadow:inset 0 0 0 5px rgba(239,68,68,0.95), 0 0 64px rgba(239,68,68,0.35); }
    }
    #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; gap:0.5rem;
    }
    .dt-test-logo {
        font-size:1rem; font-weight:900; letter-spacing:0.18em;
        background:linear-gradient(135deg,#fef9c3,#fde047);
        -webkit-background-clip:text; -webkit-text-fill-color:transparent;
        background-clip:text;
    }
    .dt-test-subject-pill {
        padding:0.18rem 0.6rem; border-radius:20px;
        background:rgba(56,189,248,0.12); border:1px solid rgba(56,189,248,0.25);
        color:#7dd3fc; font-size:0.62rem; font-weight:800;
        letter-spacing:0.08em; text-transform:uppercase;
    }
    .dt-autosave-hint {
        font-size:0.58rem; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
        color:rgba(110,231,183,0);
        margin-left:0.35rem;
        transition:color 0.22s ease, text-shadow 0.22s ease;
        white-space:nowrap;
    }
    .dt-autosave-hint--visible {
        color:#6ee7b7;
        text-shadow:0 0 14px rgba(110,231,183,0.35);
    }
    /* Test UI: timer */
    .dt-timer-wrap {
        margin-left:auto; display:flex; align-items:center; gap:0.45rem;
        background:linear-gradient(140deg, rgba(15,23,42,0.95), rgba(30,41,59,0.9));
        border:1px solid rgba(56,189,248,0.5);
        border-radius:12px; padding:0.44rem 0.9rem 0.44rem 0.7rem;
        box-shadow:0 0 0 2px rgba(15,23,42,0.8), 0 8px 22px rgba(14,116,144,0.25);
        position:relative;
        z-index:12;
        max-width:min(52vw, 16.5rem);
        flex-wrap:wrap;
        row-gap:0.15rem;
    }
    .dt-timer-icon { font-size:1rem; opacity:0.85; }
    .dt-timer {
        font-size:1.22rem; font-weight:900; font-variant-numeric:tabular-nums;
        color:#f8fafc; letter-spacing:0.08em;
        font-family:'Inter',ui-monospace,monospace;
        text-shadow:none;
    }
    .dt-timer-amber { color:#fbbf24 !important; }
    .dt-timer-red   {
        color:#f87171 !important;
        animation:dt-pulse-timer 0.5s ease-in-out infinite alternate;
    }
    .dt-timer-wrap.dt-timer-red { border-color:rgba(248,113,113,0.4); background:rgba(127,29,29,0.25); }
    @keyframes dt-pulse-timer { to { transform:scale(1.06); } }
    /* Test UI: progress bar */
    .dt-progress-track {
        height:4px; background:rgba(255,255,255,0.06); flex-shrink:0;
        position:relative; overflow:hidden;
    }
    #dt-progress-bar {
        height:100%; position:relative;
        background:linear-gradient(90deg,#fde047 0%,#38bdf8 100%);
        transition:width 0.45s cubic-bezier(0.34,1.56,0.64,1);
    }
    #dt-progress-bar::after {
        content:''; position:absolute; right:0; top:0; bottom:0; width:4px;
        background:rgba(255,255,255,0.8); border-radius:0 2px 2px 0;
        box-shadow:0 0 8px rgba(253,224,71,0.7);
    }
    /* Test UI: question header strip */
    .dt-q-meta-bar {
        flex-shrink:0; display:flex; align-items:center; gap:0.65rem;
        padding:0.45rem 1.4rem 0;
    }
    .dt-q-counter {
        font-size:0.7rem; font-weight:800; letter-spacing:0.1em;
        text-transform:uppercase; color:#475569;
    }
    .dt-q-counter strong { color:#94a3b8; }
    .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:auto; cursor:pointer; font-size:1rem; opacity:0.4;
        transition:opacity 0.15s, transform 0.15s; user-select:none;
    }
    .dt-flag-btn:hover { opacity:0.9; transform:scale(1.15); }
    .dt-flag-btn.dt-flagged { opacity:1; }
    /* Test UI: question card */
    .dt-test-body {
        flex:1 1 0;
        min-height:0;
        overflow-y:auto;
        overflow-x:hidden;
        display:flex;
        flex-direction:column;
        padding:0.55rem 1.35rem 1rem;
        scroll-padding-bottom:2rem;
        gap:0.65rem;
        scrollbar-width:thin; scrollbar-color:rgba(253,224,71,0.2) transparent;
        -webkit-overflow-scrolling:touch;
    }
    .dt-q-card {
        background:linear-gradient(160deg, rgba(20,27,50,0.9) 0%, rgba(10,14,28,0.9) 100%);
        border:1px solid rgba(255,255,255,0.08);
        border-radius:16px; padding:0.9rem 1.15rem;
        box-shadow:0 4px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05);
        flex-shrink:0; position:relative; overflow:hidden;
    }
    .dt-q-card::before {
        content:''; position:absolute; top:0; left:0; right:0; height:2px;
        background:linear-gradient(90deg, rgba(253,224,71,0.5), rgba(56,189,248,0.4), transparent);
        border-radius:16px 16px 0 0;
    }
    .dt-q-card--urdu::before {
        background:linear-gradient(270deg, rgba(253,224,71,0.5), rgba(56,189,248,0.4), transparent);
    }
    #dt-q-text {
        font-size:clamp(0.97rem,2.4vw,1.12rem); font-weight:600; line-height:1.65;
        color:#f0f4f8; margin:0;
    }
    /* Test UI: answer options */
    #dt-options { display:flex; flex-direction:column; gap:0.45rem; flex-shrink:0; padding-bottom:0.35rem; }
    /* 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-opt-btn {
        width:100%; display:flex; align-items:center; gap:0.75rem;
        background:rgba(15,22,40,0.6);
        border:1.5px solid rgba(148,163,184,0.14);
        border-radius:12px; padding:0.62rem 0.95rem;
        cursor:pointer; text-align:left;
        transition:border-color 0.18s, background 0.18s, transform 0.14s, box-shadow 0.18s;
        position:relative; overflow:hidden;
    }
    .dt-opt-btn::before {
        content:''; position:absolute; inset:0; border-radius:11px;
        background:linear-gradient(90deg, rgba(253,224,71,0) 0%, rgba(253,224,71,0.04) 100%);
        opacity:0; transition:opacity 0.18s;
    }
    .dt-opt-btn:hover { border-color:rgba(253,224,71,0.4); transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,0.25); }
    .dt-opt-btn:hover::before { opacity:1; }
    .dt-opt-btn.dt-opt-selected {
        border-color:#fde047;
        background:rgba(253,224,71,0.09);
        box-shadow:0 0 0 1px rgba(253,224,71,0.2), 0 6px 20px rgba(253,224,71,0.12);
        transform:translateY(-1px);
    }
    .dt-opt-btn.dt-opt-selected::before { opacity:1; }
    .dt-opt-letter {
        flex-shrink:0; width:2rem; height:2rem; border-radius:8px;
        background:rgba(255,255,255,0.06); border:1.5px solid rgba(148,163,184,0.18);
        display:flex; align-items:center; justify-content:center;
        font-size:0.75rem; font-weight:900; color:#64748b; letter-spacing:0.04em;
        transition:background 0.18s, color 0.18s, border-color 0.18s;
    }
    .dt-opt-btn:hover .dt-opt-letter {
        border-color:rgba(253,224,71,0.35); color:#fde047;
    }
    .dt-opt-btn.dt-opt-selected .dt-opt-letter {
        background:linear-gradient(135deg,#fef9c3,#fde047);
        color:#0a0c1a; border-color:#fde047;
        box-shadow:0 2px 8px rgba(253,224,71,0.35);
    }
    .dt-opt-text {
        font-size:clamp(0.84rem,2vw,0.93rem); font-weight:500;
        color:#b0bec8; line-height:1.5; flex:1;
        transition:color 0.18s;
    }
    .dt-opt-btn:hover .dt-opt-text { color:#e2e8f0; }
    .dt-opt-btn.dt-opt-selected .dt-opt-text { color:#f0f4f8; 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 { transform:none; box-shadow:none; border-color:rgba(148,163,184,0.10); }
    .dt-opt-btn.dt-opt-selected.dt-opt-locked {
        opacity:0.82;
        border-color:rgba(253,224,71,0.35);
        background:rgba(253,224,71,0.07);
        box-shadow:0 0 0 1px rgba(253,224,71,0.12);
    }
    .dt-opt-btn.dt-opt-selected.dt-opt-locked .dt-opt-letter {
        background:linear-gradient(135deg,rgba(254,249,195,0.7),rgba(253,224,71,0.7));
        color:#0a0c1a; border-color:rgba(253,224,71,0.55);
    }
    /* 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.55rem 1.35rem 0.65rem;
        border-top:1px solid rgba(255,255,255,0.06);
        background:rgba(5,8,15,0.6);
    }
    .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.25rem; border-radius:11px;
        border:1.5px solid rgba(148,163,184,0.2);
        background:rgba(15,23,42,0.7); color:#64748b;
        font-size:0.8rem; font-weight:800; letter-spacing:0.04em;
        cursor:pointer; display:inline-flex; align-items:center; gap:0.4rem;
        transition:border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s;
    }
    .dt-nav-btn:hover:not(:disabled) {
        border-color:rgba(253,224,71,0.45); color:#fde047;
        background:rgba(253,224,71,0.06); transform:translateY(-1px);
    }
    .dt-nav-btn:disabled { opacity:0.25; cursor:default; }
    /* NEXT button glows gold once an option is picked */
    .dt-nav-btn.dt-next-ready {
        border-color:rgba(253,224,71,0.75);
        color:#fde047;
        background:rgba(253,224,71,0.08);
        box-shadow:0 0 14px rgba(253,224,71,0.22), inset 0 0 0 1px rgba(253,224,71,0.12);
        transition:border-color 0.18s, color 0.18s, background 0.18s, box-shadow 0.18s;
    }
    .dt-submit-btn {
        padding:0.62rem 1.5rem; border-radius:11px; border:none;
        background:linear-gradient(135deg,#fef9c3,#fde047,#eab308);
        color:#0a0c1a; font-size:0.82rem; font-weight:900; letter-spacing:0.04em;
        cursor:pointer; display:none; align-items:center; gap:0.5rem;
        box-shadow:0 4px 0 #a16207, 0 6px 18px rgba(234,179,8,0.3);
        transition:transform 0.12s, box-shadow 0.12s;
    }
    .dt-submit-btn:hover { transform:translateY(-2px); box-shadow:0 6px 0 #a16207, 0 10px 24px rgba(234,179,8,0.35); }
    .dt-submit-btn:active { transform:translateY(2px); box-shadow:0 2px 0 #a16207; }
    /* Test UI: question palette */
    #dt-palette-wrap {
        flex-shrink:0; padding:0.38rem 1.35rem 0.5rem;
        border-top:1px solid rgba(255,255,255,0.05);
        background:rgba(5,8,15,0.5);
    }
    .dt-palette-header {
        display:flex; align-items:center; justify-content:space-between;
        margin-bottom:0.35rem;
    }
    .dt-palette-label {
        font-size:0.6rem; font-weight:800; letter-spacing:0.12em;
        text-transform:uppercase; color:#334155;
    }
    .dt-palette-legend {
        display:flex; gap:0.6rem; font-size:0.6rem; font-weight:700; color:#475569;
    }
    .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 { display:flex; flex-wrap:wrap; gap:0.4rem; }
    .dt-pq {
        width:2.1rem; height:2.1rem; border-radius:8px;
        border:1.5px solid transparent;
        font-size:0.68rem; font-weight:800; cursor:pointer;
        display:flex; align-items:center; justify-content:center;
        transition:transform 0.12s, box-shadow 0.12s;
    }
    .dt-pq:hover { transform:scale(1.15); }
    .dt-pq-unanswered {
        background:rgba(255,255,255,0.04); border-color:rgba(148,163,184,0.15);
        color:#334155;
    }
    .dt-pq-answered {
        background:rgba(74,222,128,0.13); border-color:rgba(74,222,128,0.35);
        color:#4ade80;
    }
    .dt-pq-flagged {
        background:rgba(253,224,71,0.13); border-color:rgba(253,224,71,0.38);
        color:#fde047;
    }
    .dt-pq-current {
        box-shadow:0 0 0 2.5px #fde047, 0 0 12px rgba(253,224,71,0.3);
        transform:scale(1.12);
    }
    /* Demo test: result screen ? scrollable, top-aligned so tall content is not cropped */
    #dt-screen-result {
        justify-content: flex-start;
        align-items: center;
        padding: 2rem 1rem 1.25rem;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        gap: 0.85rem;
        min-height: 0;
    }
    .dt-result-body {
        width: 100%;
        max-width: min(42rem, calc(100vw - 2rem));
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0 0 1rem;
        box-sizing: border-box;
    }
    .dt-result-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: 100%;
        align-items: stretch;
        border-radius: 20px;
        overflow: hidden;
        background: linear-gradient(175deg, rgba(10,14,30,0.97) 0%, rgba(6,8,20,0.99) 100%);
        border: 1px solid rgba(255,255,255,0.06);
        box-shadow: 0 24px 80px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
    }

    /* --- HERO PANEL --- */
    .dt-result-hero-panel {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 2.5rem 1.5rem 1.75rem;
        overflow: hidden;
    }
    .dt-result-hero-glow {
        position: absolute;
        top: -60%;
        left: 50%;
        transform: translateX(-50%);
        width: 22rem;
        height: 22rem;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(250,204,21,0.12) 0%, rgba(250,204,21,0.04) 40%, transparent 70%);
        pointer-events: none;
        animation: dt-glow-pulse 4s ease-in-out infinite alternate;
    }
    @keyframes dt-glow-pulse {
        0% { opacity: 0.7; transform: translateX(-50%) scale(1); }
        100% { opacity: 1; transform: translateX(-50%) scale(1.08); }
    }
    .dt-result-hero-row {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.25rem;
        margin-bottom: 1.25rem;
    }
    .dt-score-ring-wrap {
        position: relative;
        width: 7.5rem;
        height: 7.5rem;
        flex-shrink: 0;
    }
    .dt-score-ring {
        width: 100%;
        height: 100%;
        transform: rotate(-90deg);
        display: block;
        filter: drop-shadow(0 0 8px rgba(250,204,21,0.2));
    }
    .dt-score-ring-fill {
        transition: stroke-dasharray 1.2s cubic-bezier(0.4,0,0.2,1);
    }
    .dt-score-center {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .dt-score-num {
        font-size: 2rem;
        font-weight: 900;
        color: #fff;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        letter-spacing: -0.02em;
    }
    .dt-score-pct {
        font-size: 0.7rem;
        color: #64748b;
        font-weight: 600;
        margin-top: 0.15rem;
    }
    .dt-result-grade {
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        font-weight: 900;
        letter-spacing: -0.02em;
        box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    }
    .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, #f87171, #dc2626); color: #fff; }

    /* --- AVATAR (same size as score ring) --- */
    .dt-result-avatar-wrap {
        flex-shrink: 0;
        width: 7.5rem;
        height: 7.5rem;
    }
    .dt-result-avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: linear-gradient(135deg, #1e3a5f, #1e40af);
        border: 3px solid rgba(253,224,71,0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.2rem;
        font-weight: 900;
        color: #fff;
        box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    }
    .dt-result-photo {
        object-fit: cover;
        border-radius: 50%;
    }
    /* --- IDENTITY TEXT (below hero row) --- */
    .dt-result-identity-text {
        text-align: center;
        position: relative;
    }
    .dt-result-name {
        font-size: 1.2rem;
        font-weight: 800;
        color: #f8fafc;
        line-height: 1.2;
    }
    .dt-result-sub {
        font-size: 0.78rem;
        color: #64748b;
        margin-top: 0.2rem;
        font-weight: 500;
    }

    /* --- STATS ROW --- */
    .dt-result-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        background: rgba(255,255,255,0.04);
        border-top: 1px solid rgba(255,255,255,0.06);
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    @media (max-width: 480px) {
        .dt-result-stats { grid-template-columns: repeat(2, 1fr); }
    }
    .dt-stat-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 1.25rem 0.5rem;
        background: rgba(6,8,20,0.95);
        text-align: center;
        transition: background 0.2s;
    }
    .dt-stat-card:hover { background: rgba(15,23,42,0.8); }
    .dt-stat-value {
        font-size: 1.5rem;
        font-weight: 900;
        line-height: 1.1;
        font-variant-numeric: tabular-nums;
        margin-bottom: 0.3rem;
    }
    .dt-stat-label {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #64748b;
    }
    .dt-stat-green .dt-stat-value { color: #4ade80; }
    .dt-stat-red .dt-stat-value   { color: #f87171; }
    .dt-stat-amber .dt-stat-value { color: #fbbf24; }
    .dt-stat-slate .dt-stat-value { color: #94a3b8; }

    /* --- PANELS (Rank + Signal) --- */
    .dt-result-panels {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: rgba(255,255,255,0.04);
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    @media (max-width: 560px) {
        .dt-result-panels { grid-template-columns: 1fr; }
    }
    .dt-panel {
        padding: 1.4rem 1.5rem;
        background: rgba(6,8,20,0.95);
    }
    .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: 700;
        color: #e2e8f0;
        line-height: 1.45;
        text-transform: capitalize;
    }
    .dt-panel-rank-note {
        font-size: 0.62rem;
        color: #475569;
        margin-top: 0.5rem;
        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 {
        padding: 1.3rem 2rem;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        background: rgba(6,8,20,0.95);
    }
    .dt-result-trajectory p {
        margin: 0;
        font-size: 0.88rem;
        color: #94a3b8;
        line-height: 1.6;
        font-style: italic;
        max-width: 34rem;
        margin: 0 auto;
    }
    .dt-result-email-success {
        margin: 0 2rem 0.5rem;
        padding: 0.85rem 1rem;
        border-radius: 12px;
        background: rgba(34,197,94,0.12);
        border: 1px solid rgba(34,197,94,0.35);
        color: #bbf7d0;
        font-size: 0.88rem;
        font-weight: 700;
        text-align: center;
    }
    .dt-result-email-warn {
        margin: 0 2rem 0.5rem;
        padding: 0.85rem 1rem;
        border-radius: 12px;
        background: rgba(251,191,36,0.1);
        border: 1px solid rgba(251,191,36,0.28);
        color: #fde68a;
        font-size: 0.84rem;
        text-align: center;
    }
    .dt-result-integrity-notice {
        margin: 0 2rem 0.75rem;
        padding: 0.85rem 1rem;
        border-radius: 12px;
        background: rgba(34,197,94,0.08);
        border: 1px solid rgba(34,197,94,0.22);
        color: #86efac;
        font-size: 0.84rem;
        text-align: center;
        line-height: 1.45;
    }
    .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: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
        padding: 1.75rem 1.5rem 1.5rem;
        background: rgba(6,8,20,0.95);
    }
    .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 {
        font-size: 0.62rem;
        color: #334155;
        text-align: center;
        margin-top: 0.25rem;
        letter-spacing: 0.02em;
    }
    .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 5rem;
            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: 0.5rem;
        }
        .prov-section-heading span { color: #fde047; }
        .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;
        }

        /* -- 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%;
        }
        .otr-honors-national-tile {
            min-height: 8.15rem;
        }
        .otr-honors-national-tile--minimal {
            min-height: 8.65rem;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.9rem;
        }
        .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: 5.05rem;
            height: 5.05rem;
            flex-direction: column;
            justify-content: center;
            gap: 0.14rem;
            box-shadow:
                inset 0 2px 0 rgba(255, 255, 255, 0.32),
                inset 0 -3px 8px rgba(0, 0, 0, 0.45),
                0 0 0 2px color-mix(in srgb, var(--prov-accent) 55%, transparent),
                0 0 0 8px color-mix(in srgb, var(--prov-accent) 20%, transparent),
                0 0 0 14px color-mix(in srgb, var(--prov-accent) 9%, transparent),
                0 0 34px color-mix(in srgb, var(--prov-accent) 45%, transparent);
        }
        .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: 5.25rem;
            height: 5.25rem;
            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--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: block;
            flex-shrink: 0;
            margin-top: 0.06rem;
            font-size: clamp(0.88rem, 2.6vw, 1.08rem);
            letter-spacing: 0.03em;
            word-spacing: 0;
        }
        .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: flex;
            align-items: center;
            gap: 0.65rem;
            border: 1px solid rgba(253, 230, 138, 0.55);
            border-radius: 12px;
            background: linear-gradient(120deg, rgba(120, 53, 15, 0.45) 0%, rgba(180, 83, 9, 0.32) 35%, rgba(15, 23, 42, 0.85) 100%);
            padding: 0.45rem 0.7rem;
            min-height: 0;
            box-shadow: inset 0 0 32px rgba(250, 204, 21, 0.12), 0 6px 16px rgba(0, 0, 0, 0.35);
            overflow: visible;
        }
        .otr-honors-podium-strip::before {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 92% 50%, rgba(250, 204, 21, 0.26), transparent 28%);
            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;
            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 4px 12px rgba(180, 83, 9, 0.45), inset 0 0 6px rgba(255, 255, 255, 0.35);
        }
        .otr-honors-podium-strip > div:not(.otr-honors-podium-trophy) {
            position: relative;
            flex: 1 1 auto;
            min-width: 0;
            z-index: 2;
        }
        .otr-honors-podium-trophy {
            position: relative;
            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-podium-strip strong {
            display: block;
            color: #fde047;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            font-weight: 900;
        }
        .otr-honors-podium-strip span {
            display: block;
            margin-top: 0.04rem;
            color: #e2e8f0;
            font-size: 0.72rem;
            font-weight: 600;
        }
        .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: 0.6rem 0.75rem 0.6rem;
            width: min(98vw, 1060px);
            max-width: 1060px;
            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-right: 2.2rem;
            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 minmax(0, 1fr);
            align-items: baseline;
            column-gap: 0.45rem;
            width: 100%;
            min-width: 0;
        }
        .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: 2;
            justify-self: center;
            max-width: 100%;
            min-width: 0;
            white-space: nowrap;
            overflow: hidden;
        }
        .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: 3;
            justify-self: end;
            margin-right: 0.35rem;
            transform: translateX(-0.22rem);
        }
        .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-y: auto;
            overscroll-behavior: contain;
            -webkit-overflow-scrolling: touch;
        }
        .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-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;
        }
        .prov-section-divider {
            width: 3.5rem;
            height: 3px;
            background: linear-gradient(90deg, #fde047, #eab308);
            border-radius: 2px;
            margin: 0.85rem auto 1.25rem;
        }

        /* 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;
        }
        .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--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 {
                font-size: clamp(0.92rem, 4vw, 1.12rem);
            }
            .otr-honors-national-tile--minimal {
                min-height: 7.5rem;
                padding: 0.72rem 0.58rem;
            }
            .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: #fef08a;
            text-shadow: 0 0 16px rgba(250, 204, 21, 0.5);
        }
        .prov-top10-heading {
            margin: 0;
            font-size: clamp(1.8rem, 4vw, 2.7rem);
            font-weight: 900;
            letter-spacing: -0.018em;
            color: #f8fafc;
            background: linear-gradient(90deg, #f8fafc 0%, #fde047 52%, #f8fafc 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: provTop10HeadingGlow 4.8s linear infinite;
        }
        .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: #fde047;
            font-weight: 800;
            text-shadow: 0 0 12px rgba(250, 204, 21, 0.35);
        }
        .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;
        }
        @keyframes provTop10HeadingGlow {
            0% { background-position: 0% 50%; filter: drop-shadow(0 0 0 rgba(250, 204, 21, 0.1)); }
            50% { background-position: 100% 50%; filter: drop-shadow(0 0 8px rgba(250, 204, 21, 0.22)); }
            100% { background-position: 0% 50%; filter: drop-shadow(0 0 0 rgba(250, 204, 21, 0.1)); }
        }
        .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;
        }
        .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 pricing wire animations on mobile ? 6 simultaneous running animations */
            #pricing .pricing-tier-price-pill::before,
            #pricing .pricing-tier-price-pill::after {
                display: none;
            }

            /* 6. 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 backdrop-filter: most expensive single GPU cost on mobile — disable it */
            .otr-site-header {
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
            }

            /* 15. Header brand: reduce padding so NTN slot does not collide with centered logo */
            .otr-header-brand-inner {
                padding-left: 3.25rem;
                padding-right: 3.25rem;
            }

            /* 15. NTN slot: shrink on narrow screens */
            .otr-header-ntn-slot {
                max-width: 5rem;
            }
            .otr-header-ntn-label {
                font-size: 0.46rem;
                letter-spacing: 0.14em;
            }
            .otr-header-ntn-value {
                font-size: 0.54rem;
            }

            /* 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 overlay links: ensure visible yellow color (CSS backup) */
            #mobile-menu a {
                color: #fde047;
            }

            /* 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;
            }

            /* 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; }
            .dt-test-topbar { padding-left: 3.25rem; flex-wrap: wrap; gap: 0.5rem; }
            .dt-test-footer { grid-template-columns: 1fr; row-gap: 0.5rem; }
            .dt-footer-center { min-width: 0; }
            .dt-result-email-success,
            .dt-result-email-warn { margin-left: 0.75rem; margin-right: 0.75rem; }
            .dt-result-hero-row { flex-wrap: wrap; justify-content: center; }

            /* 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);
            }
        }