/* Accessibility helpers: visible focus and skip-link */
                .skip-link {
                    position: absolute;
                    left: -999px;
                    top: auto;
                    width: 1px;
                    height: 1px;
                    overflow: hidden;
                    z-index: -1;
                }

                .skip-link:focus {
                    left: 1rem;
                    top: 1rem;
                    width: auto;
                    height: auto;
                    padding: 0.5rem 0.75rem;
                    background: var(--primary-blue);
                    color: #fff;
                    border-radius: 4px;
                    z-index: 3000;
                }

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

                /* Focus styles for interactive elements */
                .media-btn:focus, .play-btn:focus, .nav-item:focus, .search-input:focus, button:focus, a:focus {
                    outline: 3px solid var(--primary-blue);
                    outline-offset: 2px;
                }
                /* --- Visual Polish & Typography --- */
                html {
                    scroll-behavior: smooth;
                }

                /* --- HEADER FIXES (Spacing & Contrast) --- */
                #interactive-scrum-guide .page-header p {
                    color: var(--primary-text); /* Fixes the "Invisible" dark text */
                    margin-top: 0.1em;          /* tightens space below the line */
                    margin-bottom: 0.5em;       /* tightens space above the next line */
                    opacity: 0.9;               /* Make it slightly softer than pure white */
                }

                /* --- TYPOGRAPHY NORMALIZATION (Fixes the large list items) --- */
                #interactive-scrum-guide p {
                    font-size: 1.2rem; /* Sets them to the exact same size (Adjust number to taste) */
                    line-height: 1.7;   /* Ensures they have the same breathing room */
                }

                #interactive-scrum-guide li {
                    font-size: 1.2rem; /* Sets them to the exact same size (Adjust number to taste) */
                    line-height: 1.1;   /* Ensures they have the same breathing room */
                }

                /* Ensure the numbers in the list match the text */
                #interactive-scrum-guide ol,
                #interactive-scrum-guide ul {
                    font-size: 1.2rem;
                }

                /* --- FIX TOC BULLETS & SPACING (V17) --- */
                /* 1. Base Table of Contents Style */
                #interactive-scrum-guide nav#table_of_contents ul {
                    list-style-type: disc !important;
                    padding-left: 1.5rem;
                    margin-left: 0;
                    margin-top: 0.5rem;
                    margin-bottom: 0.5rem;
                }

                /* 2. Spacing between Main Items */
                #interactive-scrum-guide nav#table_of_contents > ul > li {
                    margin-bottom: 0.75rem; /* Space between major sections */
                    font-weight: 500; /* Make parent items slightly bolder */
                }

                /* 3. Nested List Styling */
                #interactive-scrum-guide nav#table_of_contents ul ul {
                    list-style-type: circle !important;
                    margin-top: 0.25rem; /* Tiny space between Parent and Children */
                    margin-bottom: 0;    /* No extra space at bottom of sub-list */
                    padding-left: 1.5rem;
                }

                /* 4. Nested Item Styling */
                #interactive-scrum-guide nav#table_of_contents ul ul li {
                    margin-bottom: 0.35rem; /* Tighter spacing for sub-items */
                    font-weight: 400; /* Normal weight for children */
                    font-size: 1.1rem; /* Slightly smaller for hierarchy */
                }

                #interactive-scrum-guide .page-header h3 {
                    margin-top: 0.5rem !important; /* Overrides the global "2em" gap */
                    margin-bottom: 1.7rem;         /* Adds breathing room before the player */
                }

                /* These two replace what used to be <h3>/<h5> tags picked
                   purely for visual size (a real heading-order WCAG
                   failure — see the comment in interactive-scrum-guide.astro
                   at the same spot). Values here replicate their prior
                   rendering exactly: .page-header-byline matches the global
                   "h3 { font-size: 1.4rem }" rule plus the page-header h3
                   margin override above; .page-header-credit matches a
                   plain browser-default <h5> (this page's stylesheet never
                   styled h5 at all, so that's genuinely what it looked
                   like). Both still inherit centered text from .page-header. */
                #interactive-scrum-guide .page-header-byline {
                    font-size: 1.4rem;
                    line-height: 1.2;
                    color: var(--heading-color);
                    margin-top: 0.5rem;
                    margin-bottom: 1.7rem;
                }

                #interactive-scrum-guide .page-header-credit {
                    font-size: 0.83em;
                    font-weight: bold;
                    margin: 1.67em 0;
                }

                #interactive-scrum-guide {
                    /* --- BRAND UPDATE: Strategic Blue --- */
                    --primary-text: #1f2937;            /* Gray 800 */
                    --secondary-text: #4b5563;          /* Gray 600 */

                    --primary-blue: #0056b3;            /* CHANGED to Strategic Blue */
                    --primary-blue-hover: #004494;      /* CHANGED to Darker Blue */

                    --light-blue-bg: #f0f7ff;           /* Lighter, crisper blue background */
                    --light-gray-bg: #f9fafb;           /* Gray 50 */
                    --border-color: #e5e7eb;            /* Gray 200 */
                    --body-bg: #ffffff;
                    --heading-color: #111827;           /* Gray 900 */

                    /* --- PERFORMANCE UPDATE: System Fonts --- */
                    --body-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
                    --ui-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

                    /* Highlights (Unchanged) */
                    --highlight-bg: #fde047;
                    --highlight-text: #000000;
                    --role-highlight-bg: #dbeafe;
                    --pitfall-color: #fbbf24;
                    --tip-color: #22c55e;

                    color-scheme: light dark;
                }

                html {
                    scroll-behavior: smooth;
                }

                #interactive-scrum-guide {
                    /* --body-font was defined above but never actually
                       applied anywhere in this stylesheet — real body
                       text was silently falling back to the browser's
                       default serif (Times), not the intended system-ui
                       sans-serif, and looking inconsistent with the rest
                       of the page's own UI elements (which do use
                       --ui-font, the same value). Pure typography fix,
                       no functional change. */
                    font-family: var(--body-font);
                    background-color: var(--body-bg);
                    color: var(--primary-text);
                    text-align: left;
                }

                #interactive-scrum-guide .scrum-guide-container {
                    max-width: 1000px;
                    margin: 1rem auto;
                    padding: 0 1rem;
                }

                #interactive-scrum-guide .page-header {
                    text-align: center;
                    padding: 0rem;
                    max-width: 1000px;
                    margin: 0 auto;
                }

                #interactive-scrum-guide .page-header h1 {
                    border-bottom: none;
                }

                #interactive-scrum-guide h1,
                #interactive-scrum-guide h2,
                #interactive-scrum-guide h3,
                #interactive-scrum-guide h4 {
                    line-height: 1.2;
                    margin-top: 0em;
                    margin-bottom: 0.8em;
                    color: var(--heading-color);
                    text-align: left;
                }

                #interactive-scrum-guide .page-header h1,
                #interactive-scrum-guide .page-header h2,
                #interactive-scrum-guide .page-header h3 {
                    text-align: center;
                }

                #interactive-scrum-guide h1 {
                    font-size: 2.2rem;
                }

                #interactive-scrum-guide nav h1,
                #interactive-scrum-guide main h1 {
                    border-bottom: 2px solid var(--border-color);
                    padding-bottom: 0.3em;
                }

                #interactive-scrum-guide h2 {
                    font-size: 1.8rem;
                    border-bottom: 1px solid var(--border-color);
                    padding-bottom: 0.3em;
                }

                #interactive-scrum-guide h3 {
                    font-size: 1.4rem;
                }

                #interactive-scrum-guide h4 {
                    font-size: 1.1rem;
                }

                #interactive-scrum-guide p,
                #interactive-scrum-guide ul,
                #interactive-scrum-guide ol,
                #interactive-scrum-guide blockquote {
                    margin-bottom: 1.2em;
                }

                /* --- V18 FIX: UNDERLINE LINKS FOR ACCESSIBILITY --- */
                #interactive-scrum-guide a {
                    color: var(--primary-blue);
                    text-decoration: underline; /* Restored underline */
                    text-decoration-thickness: 1px;
                    text-underline-offset: 2px;
                    transition: color 0.2s ease-in-out;
                }

                #interactive-scrum-guide a:hover,
                #interactive-scrum-guide a:focus {
                    color: var(--primary-blue);
                    text-decoration-thickness: 2px;
                }

                /* Remove underline from specific UI controls so they stay clean */
                #interactive-scrum-guide .media-btn,
                #interactive-scrum-guide .cta-button,
                #interactive-scrum-guide .print-button,
                #interactive-scrum-guide .nav-item,
                #interactive-scrum-guide .download-link {
                    text-decoration: none !important;
                }

                #interactive-scrum-guide .glossary-tooltip button.compare-link {
                    display: block;
                    margin-top: 0.8em;
                    font-weight: bold;
                    cursor: pointer;
                    background: none;
                    border: none;
                    padding: 0;
                    color: var(--primary-blue);
                    font-family: inherit;
                    font-size: inherit;
                    text-decoration: underline;
                }

                #interactive-scrum-guide ul,
                #interactive-scrum-guide ol {
                    padding-left: 2em;
                }

                #interactive-scrum-guide li {
                    margin-bottom: 0.5em;
                }

                #interactive-scrum-guide nav#table_of_contents ul ul {
                    padding-left: 2em;
                }

                #interactive-scrum-guide blockquote {
                    border-left: 4px solid var(--primary-blue);
                    padding-left: 1.5em;
                    margin-left: 0;
                    font-style: italic;
                    color: var(--secondary-text);
                }

                /* --- MODERN MEDIA TOOLBAR --- */
                .media-toolbar {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 0.75rem; /* Space between buttons */
                    margin: 1rem 0 2rem 0; /* Space above/below */
                    align-items: center;
                }

                .media-btn {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5rem; /* Space between icon and text */
                    padding: 0.4rem 0.8rem;
                    font-size: 0.85rem;
                    font-weight: 500;
                    font-family: var(--ui-font);
                    color: var(--secondary-text);
                    background: transparent; /* Ghost style */
                    border: 1px solid var(--border-color);
                    border-radius: 8px; /* Pill shape */
                    text-decoration: none;
                    transition: all 0.2s ease;
                    cursor: pointer;
                }

                /* Hover State */
                .media-btn:hover {
                    color: var(--primary-blue);
                    border-color: var(--primary-blue);
                    background-color: rgba(31, 77, 67, 0.05); /* Very subtle accent tint */
                    text-decoration: none;
                    transform: translateY(-1px);
                }

                .media-btn svg {
                    width: 16px;
                    height: 16px;
                }

                /* Dark Mode Tweaks (Automatic via vars, but ensuring contrast) */
                body.dark-mode .media-btn:hover {
                    background-color: rgba(37, 99, 235, 0.15);
                }

                /* --- BUTTON GROUP (Forces Horizontal Layout) --- */
                .control-group {
                    display: flex;
                    align-items: center;
                    gap: 12px; /* Nice spacing between arrows and play button */
                    margin-right: 15px; /* Spacing between the buttons and the slider */
                    flex-shrink: 0; /* Prevents buttons from squishing */
                }

                #interactive-scrum-guide .cta-box {
                    background-color: var(--light-blue-bg);
                    border: 2px solid var(--primary-blue);
                    padding: 1.5em;
                    margin: 3em 0;
                    text-align: center;
                    border-radius: 8px;
                }

                #interactive-scrum-guide .cta-box h3 {
                    margin-top: 0;
                    font-size: 1.5rem;
                    text-align: center;
                }

                #interactive-scrum-guide .cta-box p {
                    font-size: 1.1rem;
                    margin-bottom: 1.5em;
                }

                #interactive-scrum-guide .cta-button {
                    display: inline-block;
                    background-color: var(--primary-blue);
                    color: #ffffff;
                    padding: 0.8em 1.5em;
                    border-radius: 5px;
                    font-weight: bold;
                    text-decoration: none;
                    transition: background-color 0.2s ease-in-out;
                    margin: 0.5em;
                }

                #interactive-scrum-guide .cta-button:hover,
                #interactive-scrum-guide .cta-button:focus {
                    background-color: var(--primary-blue-hover);
                    color: #ffffff;
                    text-decoration: none;
                }

                /* --primary-blue is #8ab4f8 in dark mode (see the token
                   block below) — a pale accent meant for link/text color
                   on a dark background, not something white text should
                   sit on top of: only 2.1:1 contrast, a real WCAG AA
                   failure caught by a dark-mode axe-core audit. These 5
                   CTA buttons all share .cta-button, so this one override
                   fixes all of them. Distinct default/hover shades, same
                   darken-on-hover pattern as light mode above. */
                body.dark-mode #interactive-scrum-guide .cta-button {
                    background-color: #1d4ed8;
                }

                body.dark-mode #interactive-scrum-guide .cta-button:hover,
                body.dark-mode #interactive-scrum-guide .cta-button:focus {
                    background-color: #1e40af;
                }

                #interactive-scrum-guide footer {
                    text-align: center;
                }

                #interactive-scrum-guide #progress-bar {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 0%;
                    height: 5px;
                    background-color: var(--primary-blue);
                    z-index: 100;
                    transition: width 0.1s linear;
                }

                #interactive-scrum-guide .content-wrapper {
                    max-width: 1200px;
                    margin: 0 auto;
                }

                #interactive-scrum-guide .print-button-container {
                    margin-bottom: 1.5em;
                    text-align: right;
                }

                #interactive-scrum-guide .print-button {
                    display: inline-block;
                    background-color: var(--light-gray-bg);
                    border: 1px solid var(--border-color);
                    padding: 0.5em 1em;
                    border-radius: 6px;
                    font-size: 0.9em;
                    font-weight: 500;
                    color: var(--primary-text);
                    text-decoration: none;
                    cursor: pointer;
                }

                #interactive-scrum-guide .print-button:hover {
                    background-color: var(--light-gray-bg);
                    text-decoration: none;
                    color: var(--primary-text);
                }

                /* --- Spotlight Search Styles --- */
                .search-modal-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: rgba(0, 0, 0, 0.5);
                    backdrop-filter: blur(4px);
                    z-index: 2000;
                    display: flex;
                    justify-content: center;
                    align-items: flex-start;
                    padding-top: 10vh;
                }

                .search-modal {
                    background-color: var(--body-bg);
                    width: 100%;
                    max-width: 600px;
                    border-radius: 12px;
                    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
                    overflow: hidden;
                    border: 1px solid var(--border-color);
                    display: flex;
                    flex-direction: column;
                    max-height: 70vh;
                }

                .search-header {
                    display: flex;
                    align-items: center;
                    padding: 1rem;
                    border-bottom: 1px solid var(--border-color);
                }

                .search-header svg {
                    color: var(--secondary-text);
                    margin-right: 0.75rem;
                }

                .search-input {
                    flex: 1;
                    border: none;
                    font-size: 1.1rem;
                    outline: none;
                    background: transparent;
                    color: var(--primary-text);
                    font-family: var(--ui-font);
                }

                .close-search {
                    background: none;
                    border: none;
                    font-size: 1.5rem;
                    cursor: pointer;
                    color: var(--secondary-text);
                }

                .search-results {
                    overflow-y: auto;
                    padding: 0.5rem;
                }

                .search-result-item {
                    padding: 0.75rem 1rem;
                    border-radius: 8px;
                    cursor: pointer;
                    transition: background-color 0.2s;
                }

                .search-result-item:hover {
                    background-color: var(--light-gray-bg);
                }

                .search-result-item h4 {
                    margin: 0 0 0.25rem 0;
                    font-size: 1rem;
                    color: var(--primary-blue);
                    font-family: var(--ui-font);
                }

                .search-result-item p {
                    margin: 0;
                    font-size: 0.9rem;
                    color: var(--secondary-text);
                    line-height: 1.4;
                    display: -webkit-box;
                    line-clamp: 2;2
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }

                .search-empty {
                    padding: 2rem;
                    text-align: center;
                    color: var(--secondary-text);
                }

                .search-footer {
                    padding: 0.75rem 1rem;
                    background-color: var(--light-gray-bg);
                    border-top: 1px solid var(--border-color);
                    display: flex;
                    justify-content: flex-end;
                    gap: 1rem;
                    font-size: 0.8rem;
                    color: var(--secondary-text);
                }

                kbd {
                    background-color: #fff;
                    border: 1px solid var(--border-color);
                    border-radius: 4px;
                    padding: 0.1rem 0.3rem;
                    font-family: monospace;
                    font-size: 0.7rem;
                    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
                }

                .floating-search-btn {
                    position: fixed;
                    bottom: 1rem;
                    right: 4rem;
                    /* Next to other toggles */
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-color: var(--primary-blue);
                    color: white;
                    border: none;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                    cursor: pointer;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 1000;
                    transition: transform 0.2s;
                }

                .floating-search-btn:hover {
                    transform: scale(1.2);
                    background-color: var(--primary-blue-hover);
                }

                /* Ensure content doesn't get hidden behind the mobile bottom bar */
                @media screen and (max-width: 767px) {
                    body {
                        padding-bottom: 80px !important; /* Pushes everything up */
                    }
                }

                /* --- Mobile Navigation Styles --- */
                .mobile-bottom-bar {
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background-color: var(--body-bg);
                    border-top: 1px solid var(--border-color);
                    display: flex;
                    justify-content: space-around;
                    padding: 0.5rem 0;
                    z-index: 1000;
                    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
                }

                .nav-item {
                    background: none;
                    border: none;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    font-size: 0.7rem;
                    color: var(--secondary-text);
                    cursor: pointer;
                    gap: 4px;
                }

                .nav-item svg {
                    width: 24px;
                    height: 24px;
                }

                .nav-item:active,
                .nav-item:hover {
                    color: var(--primary-blue);
                }

                /* Active state for theme toggle */
                .nav-item.theme-active {
                    color: var(--primary-blue);
                }

                .drawer-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: rgba(0, 0, 0, 0.5);
                    z-index: 2000;
                    backdrop-filter: blur(2px);
                }

                .mobile-drawer {
                    position: fixed;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background-color: var(--body-bg);
                    border-top-left-radius: 16px;
                    border-top-right-radius: 16px;
                    height: 70vh;
                    z-index: 2001;
                    transform: translateY(100%);
                    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                    display: flex;
                    flex-direction: column;
                    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
                }

                /* Pre-existing bug, fixed 2026-07-24: this override used to
                   sit BEFORE the base .mobile-bottom-bar/.mobile-drawer
                   rules above, so their unconditional `display` always won
                   the cascade (same specificity, later source order wins)
                   — meaning the mobile bottom bar has actually been visible
                   at every viewport width, not just <768px, this whole
                   time. Moved after the rules it needs to override; no
                   property values changed, just the position of this
                   block. This also matters for the new .desktop-toc-rail
                   below: without this fix, both the mobile bar and the
                   desktop rail would show at once on wide viewports. */
                @media (min-width: 768px) {
                    .mobile-bottom-bar {
                        display: none;
                    }

                    .mobile-drawer {
                        display: none;
                    }
                }

                .mobile-drawer.open {
                    transform: translateY(0);
                }

                .drawer-header {
                    padding: 1rem;
                    border-bottom: 1px solid var(--border-color);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .drawer-header h3 {
                    margin: 0;
                    font-size: 1.1rem;
                }

                .drawer-header button {
                    background: none;
                    border: none;
                    font-size: 1.5rem;
                    padding: 0.5rem;
                    cursor: pointer;
                    color: var(--secondary-text);
                }

                .drawer-content {
                    overflow-y: auto;
                    flex: 1;
                    padding: 1rem;
                }

                .drawer-list {
                    list-style: none;
                    padding: 0;
                    margin: 0;
                }

                .drawer-list li {
                    margin-bottom: 0.5rem;
                }

                .drawer-list a {
                    display: block;
                    padding: 0.75rem;
                    color: var(--primary-text);
                    text-decoration: none;
                    border-radius: 8px;
                    font-weight: 500;
                }

                .drawer-list a:active {
                    background-color: var(--light-blue-bg);
                    color: var(--primary-blue);
                }

                /* --- Glossary Styles --- */
                #interactive-scrum-guide .glossary-term {
                    border-bottom: 2px dotted var(--primary-blue);
                    cursor: help;
                    position: relative;
                    display: inline-block;
                }

                /* Originally `position: absolute` anchored to the term
                   itself (bottom:100%; left:50%; translateX(-50%)),
                   sized 300px wide. A term positioned near either edge of
                   ANY viewport pushes that box past the edge — first
                   found on mobile (confirmed: scrollWidth 490px vs.
                   clientWidth 390px on a 390px viewport, before any
                   tooltip was even triggered, since even `visibility:
                   hidden` boxes still contribute to scrollable overflow)
                   and "fixed" with a `@media (max-width: 767px)`
                   override — which only proved the same bug exists at
                   every width: re-checked at a 1440px desktop viewport
                   and found 27px of overflow there too (~280 glossary
                   terms on this page; it only takes one sitting close
                   enough to an edge). That's what a horizontal trackpad
                   swipe was revealing — scrollable in one direction,
                   clamped at 0 in the other, exactly matching "fixed
                   swiping one way, not the other." Rather than patch a
                   second breakpoint, this is now unconditionally
                   `position: fixed` and centered on the viewport itself
                   (matching this page's own `.comparison-modal-overlay`
                   pattern further up this file) — detached from the
                   anchor term entirely, so overflow is structurally
                   impossible regardless of viewport size or where in the
                   text a term sits. */
                #interactive-scrum-guide .glossary-tooltip {
                    position: fixed;
                    left: 50%;
                    bottom: 2rem;
                    top: auto;
                    transform: translateX(-50%) translateY(-10px);
                    width: min(320px, calc(100vw - 2rem));
                    padding: 1em;
                    background-color: var(--body-bg);
                    border: 1px solid var(--border-color);
                    border-radius: 8px;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                    font-size: 0.9em;
                    line-height: 1.5;
                    z-index: 1001;
                    visibility: hidden;
                    opacity: 0;
                    transition: opacity 0.2s, visibility 0.2s;
                }

                @media (max-width: 767px) {
                    #interactive-scrum-guide .glossary-tooltip {
                        bottom: 5.5rem; /* clears the mobile bottom bar */
                    }
                }

                #interactive-scrum-guide .glossary-term:hover .glossary-tooltip {
                    visibility: visible;
                    opacity: 1;
                }

                #interactive-scrum-guide .glossary-tooltip p {
                    margin: 0;
                }

                #interactive-scrum-guide .glossary-tooltip a.compare-link {
                    display: block;
                    margin-top: 0.8em;
                    font-weight: bold;
                    cursor: pointer;
                }

                #interactive-scrum-guide .comparison-modal-overlay {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background-color: rgba(0, 0, 0, 0.6);
                    z-index: 2000;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    opacity: 0;
                    visibility: hidden;
                    transition: opacity 0.3s, visibility 0.3s;
                }

                #interactive-scrum-guide .comparison-modal-overlay.show {
                    opacity: 1;
                    visibility: visible;
                }

                #interactive-scrum-guide .comparison-modal {
                    background-color: var(--body-bg);
                    padding: 2em;
                    border-radius: 10px;
                    max-width: 90%;
                    width: 700px;
                    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
                    position: relative;
                }

                #interactive-scrum-guide .comparison-modal-close {
                    position: absolute;
                    top: 10px;
                    right: 15px;
                    font-size: 1.8em;
                    font-weight: bold;
                    cursor: pointer;
                    color: var(--primary-text);
                }

                #interactive-scrum-guide .comparison-grid {
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    gap: 2em;
                }

                #interactive-scrum-guide .comparison-item h3 {
                    margin-top: 0;
                    border-bottom: 1px solid var(--border-color);
                    padding-bottom: 0.5em;
                }

                /* --- Pitfall/Tip Callout Styles --- */
                #interactive-scrum-guide .callout-icon {
                    display: inline-block;
                    margin-left: 0.3em;
                    cursor: pointer;
                    font-size: 0.8em;
                    vertical-align: super;
                }

                #interactive-scrum-guide .callout-box {
                    display: block;
                    max-height: 0;
                    overflow: hidden;
                    background-color: var(--light-gray-bg);
                    border-left: 4px solid;
                    padding: 0 1.5em;
                    margin: 0.5em 0 1em 0;
                    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
                    font-size: 0.9em;
                }

                #interactive-scrum-guide .callout-box.show {
                    max-height: 500px;
                    padding: 1em 1.5em;
                }

                #interactive-scrum-guide .callout-box.pitfall {
                    border-color: var(--pitfall-color);
                }

                #interactive-scrum-guide .callout-box.tip {
                    border-color: var(--tip-color);
                }

                #interactive-scrum-guide .callout-box p {
                    margin: 0;
                }

                #interactive-scrum-guide .callout-box .callout-source {
                    display: block;
                    margin-top: 0.8em;
                    font-style: italic;
                    font-size: 0.9em;
                }

                #interactive-scrum-guide .callout-source a {
                    font-weight: bold;
                }

                /* --- Role Highlighting Styles --- */
                #interactive-scrum-guide .role-highlight-container {
                    margin-bottom: 1em;
                    padding-bottom: 1em;
                    border-bottom: 1px solid var(--border-color);
                }

                #interactive-scrum-guide #role-selector {
                    width: 100%;
                    padding: 0.6em;
                    font-size: 1em;
                    border: 1px solid var(--border-color);
                    border-radius: 4px;
                    background-color: var(--body-bg);
                    color: var(--primary-text);
                }

                #interactive-scrum-guide .role-highlight {
                    background-color: var(--role-highlight-bg) !important;
                    transition: background-color 0.3s ease-in-out;
                    border-radius: 4px;
                    padding: 0.1em 0.3em;
                    margin: -0.1em -0.3em;
                }

                /* --- MODERN SLIM PLAYER --- */
                .audio-player-container {
                    background: var(--body-bg); /* matches the page background */
                    border: 1px solid var(--border-color);
                    border-radius: 16px; /* Softer, rounder corners */
                    padding: 1rem 1.25rem; /* Reduced padding (was 1.5rem) */
                    margin: 1.5rem 0; /* Reduced margin */
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025); /* Elegant floating shadow */
                    display: flex; /* Flexbox for desktop alignment */
                    flex-direction: column;
                    gap: 0.75rem;
                }

                body.dark-mode .audio-player-container {
                    background: #1f2937; /* Dark mode card color */
                    border-color: #374151;
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
                }

                /* --- PLAYER CONTROLS LAYOUT (Horizontal Force) --- */
                .player-controls {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    flex-wrap: nowrap !important; /* Force single line */
                    gap: 15px; /* Spacing between groups */
                }

                /* 1. The Button Group (Left) */
                .control-group {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    flex-shrink: 0; /* Prevent buttons from squishing */
                }

                /* 2. The Slider (Middle - Fills Space) */
                /* --- PLAYER CONTROLS LAYOUT (Horizontal Force) --- */
                .player-controls {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    flex-wrap: nowrap !important; /* Force single line */
                    gap: 15px; /* Spacing between groups */
                }

                /* 1. The Button Group (Left) */
                .control-group {
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    flex-shrink: 0; /* Prevent buttons from squishing */
                }

                /* 2. The Slider (Middle - Fills Space) */
                .progress-range {
                    flex-grow: 1; /* Takes up all remaining space */
                    width: auto;  /* Overrides default 100% width */
                    height: 6px;
                    background: #d1d5db;
                    border-radius: 3px;
                    outline: none;
                    cursor: pointer;
                    flex-shrink: 1; /* Allows it to shrink if needed */
                }

                /* 3. The Time (Right) */
                .time-display {
                    font-family: var(--ui-font);
                    font-variant-numeric: tabular-nums;
                    font-size: 0.85rem;
                    color: var(--secondary-text);
                    white-space: nowrap;
                    flex-shrink: 0; /* Never wrap the time to next line */
                    min-width: 80px; /* Ensures numbers don't jitter */
                    text-align: right;
                }

                .play-btn {
                    width: 42px; /* Slightly smaller button (was 50px) */
                    height: 42px;
                    box-shadow: 0 4px 6px rgba(31, 77, 67, 0.3); /* Glow effect on button */
                }

                    /* --- Skip Buttons --- */
                    .skip-btn {
                        background: none;
                        border: none;
                        color: var(--secondary-text); /* Subtle gray */
                        cursor: pointer;
                        padding: 4px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        transition: color 0.2s, transform 0.1s;
                        border-radius: 50%;
                    }

                    .skip-btn:hover {
                        color: var(--primary-blue);
                        background-color: rgba(31, 77, 67, 0.1);
                    }

                    .skip-btn:active {
                        transform: scale(0.95);
                    }

                    .skip-btn svg {
                        width: 24px;
                        height: 24px;
                    }

                /* Cleaner Footer */
                .player-footer {
                    padding-top: 0.75rem; /* Tighter footer */
                    border-top: 1px dashed var(--border-color); /* Subtle dashed line separator */
                }

                /* Custom Range Slider (Progress Bar) */
                .progress-range {
                    appearance: none;
                    width: 100%;
                    height: 6px;
                    background: #d1d5db;
                    border-radius: 3px;
                    outline: none;
                    cursor: pointer;
                }

                body.dark-mode .progress-range {
                    background: #4b5563;
                }

                .progress-range::-webkit-slider-thumb {
                    appearance: none;
                    width: 16px;
                    height: 16px;
                    border-radius: 50%;
                    background: var(--primary-blue);
                    cursor: pointer;
                    transition: transform 0.1s;
                }

                .progress-range::-webkit-slider-thumb:hover {
                    transform: scale(1.2);
                }

                .player-footer {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 1rem;
                    font-size: 0.9rem;
                    border-top: 1px solid rgba(0,0,0,0.1);
                    padding-top: 1rem;
                }

                body.dark-mode .player-footer {
                    border-top-color: rgba(255,255,255,0.1);
                }

                .speed-control select {
                    background: transparent;
                    border: 1px solid var(--border-color);
                    color: var(--primary-text);
                    padding: 0.2rem 0.5rem;
                    border-radius: 4px;
                    font-family: var(--ui-font);
                    cursor: pointer;
                }

                .download-link {
                    color: var(--primary-blue);
                    font-weight: 500;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    font-size: 0.9rem;
                }

                body.dark-mode #interactive-scrum-guide {
                    --primary-text: #c9c9c9;
                    --secondary-text: #a1a1aa;
                    /* Zinc 400 */
                    --primary-blue: #8ab4f8;
                    --primary-blue-hover: #60a5fa;
                    /* Blue 400 */
                    --light-blue-bg: #1e3a5f;
                    /* Blue 900 */
                    --light-gray-bg: #282828;
                    --border-color: #444444;
                    --body-bg: #121212;
                    --heading-color: #ffffff;
                    --highlight-bg: #fbbf24;
                    /* Amber 400 */
                    --highlight-text: #000000;
                    --role-highlight-bg: #1e3a5f;
                    /* Darker blue for role highlight */
                    --pitfall-color: #fbbf24;
                    /* Amber 400 */
                    --tip-color: #22c55e;
                    /* Green 500 */
                    color-scheme: dark;
                }

                body.dark-mode #interactive-scrum-guide .quick-access-button:hover,
                body.dark-mode #interactive-scrum-guide .cta-button:hover {
                    color: #000;
                }

                body.dark-mode #interactive-scrum-guide blockquote {
                    color: #aaa;
                }

                body.dark-mode #interactive-scrum-guide #role-selector {
                    background-color: #2d3748;
                    color: #e2e8f0;
                    border-color: #4a5568;
                }

                /* --- Focus Mode Styles --- */
                body.focus-mode #interactive-scrum-guide main>section:not(.focus-active) {
                    opacity: 0.3;
                    filter: grayscale(100%);
                    transition: opacity 0.5s ease, filter 0.5s ease;
                }

                body.focus-mode #interactive-scrum-guide main>section.focus-active {
                    opacity: 1;
                    filter: none;
                    box-shadow: -4px 0 0 var(--primary-blue);
                    padding-left: 1em;
                }

                /* --- Anchor Links (Copy to Clipboard) --- */
                #interactive-scrum-guide .anchor-link {
                    opacity: 0;
                    margin-left: 0.5em;
                    color: var(--primary-blue);
                    text-decoration: none;
                    font-size: 0.8em;
                    cursor: pointer;
                    transition: opacity 0.2s;
                    vertical-align: middle;
                }

                #interactive-scrum-guide h1:hover .anchor-link,
                #interactive-scrum-guide h2:hover .anchor-link,
                #interactive-scrum-guide h3:hover .anchor-link {
                    opacity: 1;
                }

                #interactive-scrum-guide .anchor-link:focus {
                    opacity: 1;
                }

                /* Tooltip for "Copied!" */
                #interactive-scrum-guide .copy-tooltip {
                    position: fixed;
                    background: #333;
                    color: #fff;
                    padding: 5px 10px;
                    border-radius: 4px;
                    font-size: 12px;
                    pointer-events: none;
                    opacity: 0;
                    transition: opacity 0.3s;
                    z-index: 3000;
                }

                #interactive-scrum-guide .copy-tooltip.show {
                    opacity: 1;
                }

                /* Print helper: hide print-hidden elements */
                @media print {
                    .print-hidden { display: none !important; }
                }

            /* --- UTILITY BAR (Role + Print) --- */
                /* --- UTILITY BAR (Clean Version) --- */
                .utility-bar {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-wrap: wrap;
                    gap: 1rem;
                    margin-bottom: 1.5rem; /* Increased whitespace slightly for breathing room */
                    padding: 0.5rem 0;
                    /* border-bottom: 1px solid var(--border-color);  <-- DELETED THIS LINE */
                }

                /* Dark Mode Toggle Button (Desktop Only) */
                .theme-toggle {
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5rem;
                    padding: 0.5rem 0.75rem;
                    border: 1px solid var(--border-color);
                    border-radius: 6px;
                    background-color: var(--body-bg);
                    color: var(--primary-text);
                    font-size: 0.9rem;
                    font-family: var(--ui-font);
                    cursor: pointer;
                    transition: all 0.2s;
                    white-space: nowrap;
                }

                .theme-toggle:hover {
                    background-color: var(--light-gray-bg);
                    border-color: var(--primary-blue);
                }

                .theme-toggle.active {
                    background-color: var(--primary-blue);
                    color: white;
                    border-color: var(--primary-blue);
                }

                /* Hide on mobile - users rely on system preference */
                @media (max-width: 767px) {
                    .utility-bar { display: none; }
                }

                .role-group {
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                    flex: 1; /* Takes up available space */
                }

                .role-group label {
                    font-weight: 600;
                    font-size: 0.9rem;
                    white-space: nowrap;
                }

                .role-group select {
                    padding: 0.5rem;
                    border: 1px solid var(--border-color);
                    border-radius: 6px;
                    background-color: var(--body-bg);
                    color: var(--primary-text);
                    font-size: 0.95rem;
                    flex-grow: 1; /* Expands to fill space */
                    max-width: 250px; /* Prevents it from getting too huge */
                }

                .print-button {
                    font-size: 0.9rem;
                    white-space: nowrap;
                    /* (Existing print-button styles will apply here too) */
                }

                /* Dark mode support uses inherited vars, so it works automatically */

                /* --- REAL WORLD DEEP DIVE SECTION --- */
                .real-world-container {
                    margin-top: 2rem;
                    padding: 1.5rem;
                    background-color: var(--light-gray-bg);
                    border-left: 4px solid var(--primary-blue);
                    border-radius: 4px;
                }

                /* [UPDATED 2026-07 - MV] Extended to h4: some of these callouts are now
                   nested one level deeper (h4) as part of the heading hierarchy fix,
                   so this rule needs to match both to keep the same visual style. */
                .real-world-container h3,
                .real-world-container h4 {
                    margin-top: 0;
                    font-size: 1.2rem;
                    color: var(--primary-blue);
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }

                .real-world-video {
                    position: relative;
                    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
                    height: 0;
                    overflow: hidden;
                    margin-bottom: 1rem;
                    border-radius: 8px;
                    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
                }

                .real-world-video iframe {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border: 0;
                }

                /* --- CTA BUTTON STYLING (Split Layout) --- */
                .opt-in-hook {
                    margin-top: 1.5rem;
                    text-align: center;
                    display: flex;          /* Stacks items vertically */
                    flex-direction: column;
                    align-items: center;
                    gap: 0.5rem;            /* Space between button and text */
                }

                .opt-in-hook a {
                    display: inline-block;
                    background-color: var(--primary-blue);
                    color: #ffffff !important;
                    padding: 0.6rem 1.2rem;  /* Slightly smaller padding for a tighter look */
                    border-radius: 8px;
                    font-weight: 600;
                    font-size: 0.9rem;       /* Professional button size */
                    text-decoration: none;
                    transition: all 0.2s ease-in-out;
                    box-shadow: 0 4px 6px rgba(31, 77, 67, 0.2);
                    border: 2px solid transparent;
                }

                .opt-in-hook a:hover {
                    transform: translateY(-2px);
                    background-color: var(--primary-blue-hover);
                    box-shadow: 0 6px 12px rgba(31, 77, 67, 0.3);
                    color: #ffffff !important;
                }

                /* The Caption Text (Cartoons) */
                .opt-in-subtext {
                    font-size: 0.8rem;
                    color: var(--secondary-text);
                    font-family: var(--ui-font);
                    opacity: 0.85;
                    max-width: 90%;
                    line-height: 1.4;
                }

                /* Dark Mode Tweaks */
                body.dark-mode .opt-in-hook a {
                    background-color: var(--primary-blue);
                    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
                }

            /* --- PRO FOOTER STYLES --- */
                footer {
                    margin-top: 4rem;
                    padding-top: 2rem;
                    border-top: 1px solid var(--border-color);
                    background-color: var(--light-gray-bg); /* subtle separation */
                }

                .footer-content-wrapper {
                    max-width: 1000px;
                    margin: 0 auto;
                    padding: 2rem 1rem;
                }

                .footer-links-grid {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 1rem;
                    margin: 2rem 0;
                }

                @media (min-width: 600px) {
                    .footer-links-grid {
                        grid-template-columns: 1fr 1fr; /* 2 columns on tablet+ */
                    }
                }

                .footer-link-card {
                    display: flex;
                    align-items: center;
                    padding: 1rem;
                    background: var(--body-bg);
                    border: 1px solid var(--border-color);
                    border-radius: 8px;
                    text-decoration: none !important; /* No underline */
                    color: var(--primary-text);
                    font-weight: 500;
                    transition: all 0.2s ease;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
                }

                .footer-link-card:hover {
                    transform: translateY(-2px);
                    border-color: var(--primary-blue);
                    box-shadow: 0 4px 8px rgba(31, 77, 67, 0.1);
                    color: var(--primary-blue);
                }

                .footer-link-icon {
                    margin-right: 0.75rem;
                    font-size: 1.2rem;
                }

                .legal-section {
                    /* No opacity here (there was one; removed) — it washed
                       --secondary-text's already-fine 7.23:1 contrast down
                       to 4.4:1, just under WCAG AA's 4.5:1 minimum (caught
                       by an axe-core audit). font-size: 0.8rem already
                       de-emphasizes this fine print appropriately without
                       also needing to fade its color. */
                    text-align: center;
                    font-size: 0.8rem;
                    color: var(--secondary-text);
                    margin-top: 3rem;
                    padding-top: 2rem;
                    border-top: 1px solid var(--border-color);
                }

                .legal-section p {
                    margin-bottom: 0.75rem;
                }

                /* Dark Mode adjustments for footer */
                body.dark-mode .footer-link-card {
                    background: #1f2937; /* Darker card background */
                    border-color: #374151;
                }

                body.dark-mode .footer-link-card:hover {
                    background: #374151;
                }

                /* --- Desktop TOC/Search/Study-Kit rail (added 2026-07-24) ---
                   Hidden below 1180px — the existing .mobile-bottom-bar
                   above covers narrower viewports, untouched. 1180px gives
                   enough room for a 220px rail alongside the page's
                   existing 1200px-max centered content without cramping
                   either. Fixed (not sticky) so it doesn't require
                   restructuring this page's existing DOM nesting; its `top`
                   offset clears the site Header (~78px tall, see
                   Header.astro) so it never overlaps it, even though the
                   Header itself isn't sticky and scrolls away. */
                .desktop-toc-rail {
                    display: none;
                }

                @media (min-width: 1180px) {
                    .desktop-toc-rail {
                        display: flex;
                        flex-direction: column;
                        gap: 1.5rem;
                        position: fixed;
                        top: 96px;
                        left: 1.5rem;
                        width: 220px;
                        max-height: calc(100vh - 120px);
                        overflow-y: auto;
                        background-color: var(--body-bg);
                        border: 1px solid var(--border-color);
                        border-radius: 12px;
                        padding: 1.25rem;
                        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
                        z-index: 500;
                    }

                    /* Shift the guide's own content right to make room for
                       the rail, without touching any child's own centering
                       or max-width — #interactive-scrum-guide wraps
                       everything the guide renders (but not the site
                       Header/Footer, which sit outside it), so this affects
                       only the guide's reading content. */
                    #interactive-scrum-guide {
                        padding-left: 260px;
                    }
                }

                .desktop-toc-rail-section h2 {
                    font-size: 0.95rem;
                    text-transform: uppercase;
                    letter-spacing: 0.03em;
                    color: var(--secondary-text);
                    margin: 0 0 0.75rem;
                }

                .desktop-toc-list {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    gap: 0.4rem;
                }

                /* #interactive-scrum-guide-prefixed: the guide's own
                   `#interactive-scrum-guide a { color: var(--primary-blue) }`
                   rule (an ID selector) otherwise beats a class-only rule
                   here regardless of source order, no matter what color
                   this sets. */
                #interactive-scrum-guide .desktop-toc-list a {
                    display: block;
                    font-size: 0.85rem;
                    color: var(--primary-text);
                    text-decoration: none;
                    padding: 0.25rem 0;
                }

                #interactive-scrum-guide .desktop-toc-list a:hover {
                    color: var(--primary-blue);
                    text-decoration: underline;
                }

                .desktop-toc-rail-actions {
                    display: flex;
                    flex-direction: column;
                    gap: 0.6rem;
                    padding-top: 1rem;
                    border-top: 1px solid var(--border-color);
                }

                .desktop-toc-rail-button {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 0.4rem;
                    font-size: 0.85rem;
                    font-weight: 600;
                    padding: 0.55rem 0.75rem;
                    border-radius: 8px;
                    border: 1px solid var(--border-color);
                    background: var(--light-gray-bg);
                    color: var(--primary-text);
                    cursor: pointer;
                    text-decoration: none;
                }

                .desktop-toc-rail-button:hover {
                    background: var(--light-gray-bg);
                }

                .desktop-toc-rail-button kbd {
                    margin-left: auto;
                }

                /* #interactive-scrum-guide-prefixed for the same reason as
                   .desktop-toc-list a above — this is an <a>, and the ID
                   selector on the guide's own link-color rule otherwise
                   overrides the white text regardless of source order. */
                #interactive-scrum-guide .desktop-toc-rail-button--accent {
                    background-color: var(--primary-blue);
                    color: #fff;
                    border-color: var(--primary-blue);
                }

                #interactive-scrum-guide .desktop-toc-rail-button--accent:hover {
                    background-color: var(--primary-blue-hover);
                }