/* Allow the page to scroll so the web nav, quiz area, nav buttons, and web footer all stack naturally */
        body.quiz-body {
            height: auto !important;
            overflow: auto !important;
        }
        body.quiz-body .quiz-container {
            height: auto !important;
            min-height: calc(100vh - 80px) !important;
            overflow: visible !important;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        /* When the intro overlay is showing, the container needs enough room
           for the rich intro card. JS refines this further on load. */
        body.quiz-body .quiz-container.intro-active {
            min-height: 940px !important;
        }
        body.quiz-body .quiz-content {
            height: auto !important;
            overflow: visible !important;
        }
        body.quiz-body .question-area,
        body.quiz-body .answers-area {
            max-height: none !important;
            overflow-y: visible !important;
        }
        body.quiz-body .nav-buttons {
            position: static !important;
            left: auto !important;
            transform: none !important;
            width: 100% !important;
            max-width: 1200px !important;
            margin: 0 auto !important;
            box-sizing: border-box !important;
        }
        /* Quiz-container intro overlay shown ONCE before the quiz starts.
           Covers only the quiz area — site header/nav and footer stay clickable. */
        body.quiz-body .quiz-container { position: relative; }
        /* Intro overlay — clean single panel with subtle gradient accents */
        .quiz-intro-overlay {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 0% 0%, rgba(29, 78, 216, 0.06) 0%, transparent 55%),
                radial-gradient(circle at 100% 100%, rgba(29, 78, 216, 0.05) 0%, transparent 55%),
                #ffffff;
            z-index: 9000;
            display: none;
            align-items: flex-start;
            justify-content: center;
            padding: 2.5rem 1.5rem;
            overflow-y: auto;
        }
        .quiz-intro-overlay.is-active { display: flex; }
        @keyframes introFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .quiz-intro-overlay.is-active .quiz-intro-card { animation: introFadeIn 0.35s ease-out; }
        .quiz-intro-card {
            max-width: 960px;
            width: 100%;
            line-height: 1.6;
            text-align: left;
        }
        /* Hero 2-col layout fills the available space — title/CTA left, topics/approach right */
        .intro-hero-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.75rem 2.5rem;
            align-items: start;
        }
        @media (min-width: 720px) {
            .intro-hero-grid { grid-template-columns: 1.05fr 1fr; }
        }
        .intro-hero-right { padding-top: 0.25rem; }
        .intro-hero-right .intro-col + .intro-col { margin-top: 1.4rem; }
        .quiz-intro-card .intro-icon {
            width: 56px; height: 56px;
            border-radius: 14px;
            background: #dbeafe;
            color: #1d4ed8;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.6rem;
            margin-bottom: 1rem;
        }
        .quiz-intro-card h2 { font-weight: 800; margin-bottom: 0.4rem; color: #0f172a; font-size: 1.65rem; line-height: 1.25; }
        .quiz-intro-card .lead { color: #475569; font-size: 0.98rem; margin-bottom: 1.1rem; }
        /* Stat chips */
        .intro-stats { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
        .intro-stat {
            display: inline-flex; align-items: center; gap: 0.4rem;
            padding: 0.4rem 0.8rem;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 999px;
            font-size: 0.82rem;
            color: #475569;
            font-weight: 600;
        }
        .intro-stat i { color: #1d4ed8; font-size: 0.95rem; }
        /* Two-column section */
        .intro-two-col {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.25rem 1.5rem;
            margin-bottom: 1.5rem;
        }
        @media (min-width: 540px) {
            .intro-two-col { grid-template-columns: 1fr 1fr; }
        }
        .intro-col-title {
            font-weight: 700;
            color: #0f172a;
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.55rem;
        }
        .intro-col-title i { color: #1d4ed8; margin-right: 0.3rem; }
        .intro-col ul {
            padding-left: 0;
            list-style: none;
            margin: 0;
            color: #475569;
            font-size: 0.92rem;
        }
        .intro-col ul li {
            padding-left: 1.1rem;
            position: relative;
            margin-bottom: 0.4rem;
            line-height: 1.5;
        }
        .intro-col ul li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.55rem;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #1d4ed8;
        }
        .intro-col .topic-pill {
            display: inline-block;
            padding: 0.28rem 0.7rem;
            margin: 0.15rem 0.25rem 0.15rem 0;
            background: #dbeafe;
            color: #1d4ed8;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        .intro-cta-row { text-align: center; }
        .quiz-intro-card .btn-start {
            background: #1d4ed8;
            color: #fff;
            font-weight: 700;
            padding: 0.85rem 2.1rem;
            border-radius: 12px;
            border: none;
            font-size: 1.05rem;
            transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
            box-shadow: 0 6px 18px -6px rgba(29, 78, 216, 0.55);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .quiz-intro-card .btn-start:hover {
            background: #1e40af;
            transform: translateY(-1px);
            box-shadow: 0 8px 22px -6px rgba(29, 78, 216, 0.65);
        }
        .quiz-intro-card .btn-start i { transition: transform 0.15s ease; }
        .quiz-intro-card .btn-start:hover i { transform: translateX(2px); }
        /* Additional content sections below the hero */
        .intro-divider {
            height: 1px;
            background: linear-gradient(to right, transparent, #e2e8f0 25%, #e2e8f0 75%, transparent);
            margin: 2rem 0 1.75rem;
        }
        .intro-meta-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0.9rem;
            margin-bottom: 1.75rem;
        }
        @media (min-width: 720px) {
            .intro-meta-grid { grid-template-columns: repeat(3, 1fr); }
        }
        .intro-meta-card {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 1.1rem;
        }
        .intro-meta-card .meta-card-icon {
            width: 36px; height: 36px;
            border-radius: 8px;
            background: #dbeafe;
            color: #1d4ed8;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.05rem;
            margin-bottom: 0.6rem;
        }
        .intro-meta-card .meta-card-title {
            font-weight: 700;
            color: #0f172a;
            font-size: 0.94rem;
            margin-bottom: 0.35rem;
        }
        .intro-meta-card p {
            color: #475569;
            font-size: 0.86rem;
            line-height: 1.55;
            margin: 0;
        }
        .intro-related, .intro-also-try {
            display: flex; flex-wrap: wrap; gap: 0.4rem 0.85rem; align-items: center;
            font-size: 0.86rem;
        }
        .intro-related { margin-bottom: 0.9rem; }
        .intro-related-label, .intro-also-try-label {
            font-weight: 700;
            color: #475569;
        }
        .intro-related a {
            color: #1d4ed8;
            text-decoration: none;
            font-weight: 600;
        }
        .intro-related a:hover { text-decoration: underline; }
        .intro-also-chip {
            display: inline-flex; align-items: center; gap: 0.35rem;
            padding: 0.32rem 0.85rem;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 999px;
            font-weight: 600;
            color: #475569;
            text-decoration: none;
            transition: all 0.15s ease;
        }
        .intro-also-chip:hover {
            border-color: #1d4ed8;
            color: #1d4ed8;
            transform: translateY(-1px);
        }
        .intro-also-chip i { color: #1d4ed8; }
        /* Result modal: SVG score ring + verdict */
        .sample-score-ring { position: relative; display: inline-block; width: 90px; height: 90px; }
        .sample-score-ring svg { width: 100%; height: 100%; }
        .sample-score-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
        .sample-score-number { font-size: 1.7rem; font-weight: 800; line-height: 1; color: #0f172a; }
        .sample-score-frac { font-size: 0.7rem; color: #64748b; font-weight: 600; margin-top: 0.1rem; }
        #sample-score-ring-fill { transition: stroke-dashoffset 0.7s ease, stroke 0.2s ease; }
        #sample-score-ring-fill.score-low { stroke: #dc2626; }
        #sample-score-ring-fill.score-mid { stroke: #f59e0b; }
        #sample-score-ring-fill.score-high { stroke: #16a34a; }
        /* Subject chooser — three cards inside the intro overlay so /sample-quiz
           works as a hub. Reading is taken inline (this page); math + thinking-skills
           redirect to their dedicated sample-quiz URLs. */
        .subject-chooser { display: flex; flex-direction: column; gap: 0.65rem; margin: 1.25rem 0 0.5rem; }
        .subject-choice-btn {
            display: flex;
            align-items: center;
            gap: 1rem;
            background: #fff;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 0.85rem 1.1rem;
            text-align: left;
            cursor: pointer;
            transition: all 0.15s ease;
            text-decoration: none;
            color: inherit;
            font-family: inherit;
            width: 100%;
        }
        .subject-choice-btn:hover { border-color: #4f46e5; background: #f8fafc; transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(15, 23, 42, 0.1); }
        .subject-choice-btn .subject-icon {
            width: 44px; height: 44px;
            border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.3rem;
            flex-shrink: 0;
        }
        .subject-choice-btn[data-subject="reading"] .subject-icon { background: #dbeafe; color: #1d4ed8; }
        .subject-choice-btn[data-subject="math"] .subject-icon { background: #eef2ff; color: #4338ca; }
        .subject-choice-btn[data-subject="thinking-skills"] .subject-icon { background: #ecfdf5; color: #0d9488; }
        .subject-choice-btn .subject-text { flex: 1; min-width: 0; }
        .subject-choice-btn .subject-name { font-weight: 800; font-size: 1.02rem; color: #0f172a; }
        .subject-choice-btn .subject-meta { font-size: 0.82rem; color: #64748b; margin-top: 0.1rem; }
        .subject-choice-btn .arrow { color: #94a3b8; font-size: 1.1rem; flex-shrink: 0; }