* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --navy: #1e3a8a;
            --navy-dark: #162a5c;
            --white: #ffffff;
            --off-white: #fafbfc;
            --border: #e5e7eb;
            --border-dark: #d1d5db;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --blue-bg: #eff6ff;
            --blue-text: #1e40af;
        }

        html { scrollbar-gutter: stable; }
        body {
            font-family: 'Source Sans 3', sans-serif;
            background-color: var(--off-white);
            color: var(--text-primary);
            line-height: 1.65;
            font-size: 15px;
        }

        .header {
            background-color: var(--navy);
            color: var(--white);
            padding: 2rem 0;
            position: relative;
            overflow: hidden;
        }

        .header-pattern {
            position: absolute;
            top: 0;
            right: 0;
            width: 55%;
            height: 100%;
            pointer-events: none;
        }

        .header-content {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .header h1 {
            font-size: 1.75rem;
            font-weight: 600;
            letter-spacing: -0.02em;
            margin-bottom: 0.25rem;
        }

        .header p {
            font-size: 0.875rem;
            opacity: 0.9;
            font-weight: 400;
        }

        .nav-tabs {
            background-color: var(--white);
            border-bottom: 1px solid var(--border);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .nav-tabs-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            gap: 0;
            overflow-x: auto;
            align-items: center;
        }

        /* Inline nav search */
        .nav-search-wrapper {
            position: relative;
            margin-left: auto;
            flex-shrink: 0;
            display: flex;
            align-items: center;
        }
        .nav-search-icon {
            position: absolute;
            left: 0.6rem;
            color: #9ca3af;
            pointer-events: none;
            z-index: 1;
        }
        .nav-search-input {
            width: 220px;
            padding: 0.45rem 2.5rem 0.45rem 2rem;
            border: 1px solid var(--border);
            border-radius: 6px;
            font-size: 0.8125rem;
            color: var(--text-primary);
            background: var(--off-white);
            outline: none;
            transition: border-color 0.15s, width 0.25s, background 0.15s;
        }
        .nav-search-input:focus {
            width: 300px;
            border-color: var(--navy);
            background: #fff;
        }
        .nav-search-input::placeholder { color: #9ca3af; }
        .nav-search-kbd {
            position: absolute;
            right: 0.5rem;
            font-size: 0.68rem;
            padding: 0.1rem 0.35rem;
            background: #fff;
            border: 1px solid #d1d5db;
            border-radius: 3px;
            color: #9ca3af;
            pointer-events: none;
            font-family: inherit;
        }
        .nav-search-input:focus + .nav-search-kbd { display: none; }
        .nav-search-dropdown {
            display: none;
            position: fixed;
            width: 480px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 8px 40px rgba(0,0,0,0.18);
            overflow-y: auto;
            z-index: 10000;
            max-height: 70vh;
        }
        .nav-search-dropdown.open { display: block; }
        .nav-search-result {
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #f3f4f6;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            transition: background 0.1s;
        }
        .nav-search-result:last-child { border-bottom: none; }
        .nav-search-result:hover, .nav-search-result.selected { background: #f3f4f6; }
        .nav-search-result-title { font-weight: 500; font-size: 0.875rem; color: #1f2937; }
        .nav-search-result-sub { font-size: 0.8rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .nav-search-footer { padding: 0.5rem 1rem; background: #f9fafb; border-top: 1px solid #e5e7eb; font-size: 0.75rem; color: #9ca3af; display: flex; gap: 0.75rem; }

        .nav-tab {
            padding: 0.875rem 1.5rem;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 0.8125rem;
            font-weight: 500;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
            white-space: nowrap;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .nav-tab:hover {
            color: var(--navy);
            background-color: var(--off-white);
        }

        .nav-tab.active {
            color: var(--navy);
            border-bottom-color: var(--navy);
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 1.25rem 2rem; /* Reduced from 2.5rem - PHASE 1.1 */
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* Typography defaults - PHASE 1.5 improved readability */
        h2 {
            font-size: 2rem !important;
            color: var(--navy) !important;
            margin-bottom: 1rem !important; /* Reduced from 2rem */
            font-weight: 600;
            letter-spacing: -0.02em;
        }

        h3 {
            font-size: 1.125rem !important;
            color: var(--navy) !important;
            margin-bottom: 0.75rem !important; /* Reduced from 1rem */
            font-weight: 600;
        }

        h4 {
            font-size: 1rem !important;
            color: var(--navy) !important;
            margin-bottom: 0.5rem !important; /* Reduced from 0.75rem */
            font-weight: 600;
        }

        p {
            margin-bottom: 0.85rem; /* Slightly reduced from 1rem */
            font-size: 0.875rem;
            line-height: 1.8; /* Increased from 1.7 for better readability */
        }

        ul {
            margin-left: 1.5rem;
            margin-bottom: 1rem;
        }

        ol {
            margin-left: 1.5rem;
            margin-bottom: 1rem;
        }

        li {
            margin-bottom: 0.6rem; /* Increased from 0.5rem */
            font-size: 0.875rem;
            line-height: 1.8; /* Increased from 1.7 */
        }

        strong {
            font-weight: 600;
            color: var(--text-primary);
        }

        /* Home Page Grid */
        .conditions-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 2rem;
        }

        .condition-category {
            background-color: var(--white);
            border: 1px solid var(--border);
            transition: border-color 0.2s ease;
        }

        .condition-category:hover {
            border-color: var(--navy);
        }

        .category-header {
            padding: 1.25rem 1.5rem;
            font-size: 0.8125rem !important;
            font-weight: 600;
            color: var(--navy) !important;
            border-bottom: 1px solid var(--border);
            text-transform: uppercase;
            letter-spacing: 0.075em;
            background-color: var(--off-white);
            margin-bottom: 0 !important;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .category-items {
            padding: 1rem;
        }

        .condition-item {
            padding: 0.75rem 1rem;
            margin: 0.5rem 0;
            background-color: var(--white);
            border: 1px solid var(--border);
            cursor: pointer;
            transition: all 0.2s ease;
            font-weight: 400;
            font-size: 0.875rem;
            color: var(--text-primary);
        }

        .condition-item:hover {
            border-color: var(--navy);
            background-color: var(--off-white);
        }

        /* Group-colour hover: fill item with category colour, invert text to white */
        .cardiomyopathies  .condition-item:hover { background-color: #16a34a; border-color: #16a34a; color: #ffffff; }
        .channelopathies   .condition-item:hover { background-color: #2563eb; border-color: #2563eb; color: #ffffff; }
        .aortopathies      .condition-item:hover { background-color: #dc2626; border-color: #dc2626; color: #ffffff; }
        .metabolic         .condition-item:hover { background-color: #d97706; border-color: #d97706; color: #ffffff; }
        .neuromuscular     .condition-item:hover { background-color: #7c3aed; border-color: #7c3aed; color: #ffffff; }

        /* Tint the category header to match group colour - hover only */

        /* Detail View */
        .back-button {
            background-color: var(--white);
            color: var(--navy);
            border: 1px solid var(--navy);
            padding: 0.625rem 1.25rem;
            font-size: 0.8125rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-bottom: 2rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .back-button:hover {
            background-color: var(--navy);
            color: var(--white);
        }

        /* Condition Sticky Header */
        .condition-sticky-header {
            position: sticky;
            top: 51px; /* Below main nav tabs */
            background-color: var(--white);
            z-index: 90;
            padding: 1rem 1.25rem 0 1.25rem;
            margin: -1rem -1.25rem 1.25rem -1.25rem;
            border-bottom: 1px solid var(--border);
        }

        .condition-title {
            font-size: 1.75rem;
            font-weight: 600;
            color: var(--navy);
            margin: 0 0 0.75rem 0; /* Reduced from 1rem */
            letter-spacing: -0.02em;
        }

        .condition-subtitle {
            display: none; /* Hidden - not used */
        }

        /* Condition Submenu Navigation */
        .condition-submenu {
            display: flex;
            gap: 0;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid var(--border);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            background-color: var(--white);
        }

        .condition-submenu-item {
            padding: 0.75rem 1.25rem;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
            white-space: nowrap;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .condition-submenu-item:hover {
            color: var(--navy);
            background-color: var(--off-white);
        }

        .condition-submenu-item:active {
            color: var(--navy);
            border-bottom-color: var(--navy);
        }

        /* PHASE 1.3 - Active state for submenu highlighting */
        .condition-submenu-item.active {
            color: var(--navy);
            border-bottom-color: var(--navy);
            font-weight: 600;
        }

        /* Page Sticky Header (for Genetic Testing, Exercise, DVLA pages) */
        .page-sticky-header {
            position: sticky;
            top: 51px; /* Below main nav tabs */
            background-color: var(--white);
            z-index: 90;
            padding: 1rem 1.25rem 0 1.25rem;
            margin: -1.25rem -1.25rem 1.25rem -1.25rem;
            border-bottom: 1px solid var(--border);
        }

        .page-title {
            font-size: 1.75rem;
            font-weight: 600;
            color: var(--navy);
            margin: 0 0 0.75rem 0;
            letter-spacing: -0.02em;
        }

        .page-submenu {
            display: flex;
            gap: 0;
            margin: 0;
            padding: 0;
            border-bottom: 1px solid var(--border);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            background-color: var(--white);
        }

        .page-submenu-item {
            padding: 0.75rem 1.25rem;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
            white-space: nowrap;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .page-submenu-item:hover {
            color: var(--navy);
            background-color: var(--off-white);
        }

        .page-submenu-item:active {
            color: var(--navy);
            border-bottom-color: var(--navy);
        }

        /* PHASE 1.3 - Active state for page submenu highlighting */
        .page-submenu-item.active {
            color: var(--navy);
            border-bottom-color: var(--navy);
            font-weight: 600;
        }

        .condition-header {
            margin-bottom: 2.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--border);
        }

        .condition-header h2 {
            font-size: 2rem !important;
            font-weight: 600;
            color: var(--navy) !important;
            margin-bottom: 0.5rem !important;
            letter-spacing: -0.02em;
        }

        .condition-header p {
            color: var(--text-secondary);
            font-size: 0.9375rem;
        }

        .detail-sections {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
        }

        /* PHASE 1.4 - Quick Summary Box */
        .quick-summary {
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            border: 1px solid #bae6fd;
            border-left: 4px solid #0284c7;
            border-radius: 8px;
            padding: 1.25rem 1.5rem;
            margin-bottom: 1.5rem;
        }

        .quick-summary-title {
            font-size: 0.75rem;
            font-weight: 600;
            color: #0369a1;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.75rem;
        }

        .quick-summary ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .quick-summary li {
            padding-left: 1.25rem;
            position: relative;
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
            line-height: 1.6;
            color: #075985;
        }

        .quick-summary li:before {
            content: "→";
            position: absolute;
            left: 0;
            color: #0284c7;
            font-weight: 600;
        }

        .quick-summary li strong {
            color: #0c4a6e;
            font-weight: 600;
        }

        /* PHASE 2.7 - Cross-link boxes */
        .cross-links {
            background-color: #fef3c7;
            border-left: 4px solid #f59e0b;
            border-radius: 6px;
            padding: 1rem 1.25rem;
            margin: 1.5rem 0;
        }

        .cross-links-title {
            font-size: 0.75rem;
            font-weight: 600;
            color: #92400e;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
        }

        .cross-links ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .cross-links li {
            margin-bottom: 0.4rem;
            font-size: 0.875rem;
        }

        .cross-link {
            color: #92400e;
            text-decoration: none;
            font-weight: 500;
            border-bottom: 1px solid transparent;
            transition: all 0.2s ease;
            cursor: pointer;
        }

        .cross-link:hover {
            color: #78350f;
            border-bottom-color: #78350f;
        }

        .cross-link:before {
            content: "→ ";
            color: #f59e0b;
            font-weight: 600;
        }

        /* PHASE 2.9 - Collapsible criteria sections */
        .collapsible-section {
            border: 1px solid var(--border);
            border-radius: 6px;
            margin-bottom: 1.5rem;
            overflow: hidden;
        }

        .collapsible-header {
            background: var(--navy);
            padding: 1rem 1.25rem;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s ease;
            user-select: none;
        }

        .collapsible-header:hover {
            background: var(--navy-dark);
        }

        .collapsible-title {
            font-size: 1rem;
            font-weight: 600;
            color: #ffffff !important;
            margin: 0;
        }

        .collapsible-toggle {
            font-size: 1.25rem;
            color: rgba(255,255,255,0.75);
            transition: transform 0.2s ease;
        }

        .collapsible-header.active .collapsible-toggle {
            transform: rotate(180deg);
        }

        .collapsible-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }

        .collapsible-content.active {
            max-height: 5000px; /* Large enough for content */
        }

        .collapsible-inner {
            padding: 1.25rem;
        }

        .detail-section {
            background-color: var(--white);
            border: 1px solid var(--border);
            padding: 1.75rem;
        }

        .detail-section h3 {
            font-size: 0.8125rem !important;
            font-weight: 600;
            color: var(--navy) !important;
            margin-bottom: 1.125rem !important;
            text-transform: uppercase;
            letter-spacing: 0.075em;
        }

        .detail-section p {
            margin-bottom: 1rem;
            font-size: 0.875rem;
            line-height: 1.7;
        }

        .detail-section p:last-child {
            margin-bottom: 0;
        }

        .detail-section ul {
            margin-left: 1.5rem;
            margin-bottom: 1rem;
        }

        .detail-section li {
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
            line-height: 1.7;
        }

        .full-width {
            grid-column: 1 / -1;
        }

        /* Section boxes */
        .section {
            margin: 2rem 0;
            padding: 1.75rem;
            background-color: var(--white);
            border: 1px solid var(--border);
        }

        .section-title {
            font-size: 0.8125rem !important;
            font-weight: 600;
            color: var(--navy) !important;
            margin-bottom: 1.125rem !important;
            text-transform: uppercase;
            letter-spacing: 0.075em;
        }

        .section-content {
            background-color: var(--white);
            padding: 1.75rem;
            border: 1px solid var(--border);
        }

        /* Info boxes */
        .info-box {
            background-color: var(--white);
            border: 1px solid var(--border);
            padding: 1.75rem;
            margin-bottom: 2rem;
        }

        .info-box-title {
            font-size: 0.8125rem;
            font-weight: 600;
            color: var(--navy);
            margin-bottom: 1.125rem;
            text-transform: uppercase;
            letter-spacing: 0.075em;
        }

        .info-box-content p {
            margin-bottom: 0.75rem;
            font-size: 0.875rem;
            line-height: 1.7;
        }

        .info-box-content p:last-child {
            margin-bottom: 0;
        }

        /* Clinical figures section */
        .figure-embed {
            margin-bottom: 1.5rem;
        }
        .figure-embed img.clinical-figure {
            width: 100%;
            max-width: 680px;
            display: block;
            margin: 0 auto 1rem;
            border: 1px solid var(--border);
            border-radius: 3px;
        }
        .figure-legend {
            font-size: 0.875rem;
            line-height: 1.65;
            color: var(--text);
            margin-bottom: 0.75rem;
        }
        .figure-attribution {
            font-size: 0.75rem;
            color: #64748b;
            border-top: 1px solid var(--border);
            padding-top: 0.625rem;
            margin-top: 0.25rem;
            line-height: 1.55;
        }
        .figure-attribution a { color: var(--navy); }
        .figure-attribution em { font-style: italic; }

        /* Testing criteria sections */
        .testing-criteria {
            margin-bottom: 2rem;
        }

        .criteria-section {
            background-color: var(--white);
            border: 1px solid var(--border);
            padding: 1.75rem;
            margin-bottom: 1.5rem;
        }

        .criteria-section h3 {
            font-size: 0.8125rem !important;
            font-weight: 600;
            color: var(--navy) !important;
            margin-bottom: 1.125rem !important;
            text-transform: uppercase;
            letter-spacing: 0.075em;
        }

        .criteria-list {
            margin-left: 1.5rem;
            margin-bottom: 0;
        }

        .criteria-list li {
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
            line-height: 1.7;
        }

        /* Exercise definition cards */
        .exercise-definition-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
            margin-bottom: 2rem;
        }

        .exercise-def-card {
            background-color: var(--white);
            border: 1px solid var(--border);
            padding: 1.75rem;
        }

        .exercise-def-card h3 {
            font-size: 0.8125rem !important;
            font-weight: 600;
            color: var(--navy) !important;
            margin-bottom: 1.125rem !important;
            text-transform: uppercase;
            letter-spacing: 0.075em;
        }

        .exercise-def-card ul {
            margin-left: 1.5rem;
        }

        .exercise-def-card li {
            margin-bottom: 0.5rem;
            font-size: 0.875rem;
            line-height: 1.7;
        }

        .exercise-def-card p {
            margin-bottom: 0.75rem;
            font-size: 0.875rem;
            line-height: 1.7;
        }

        /* Exercise condition cards */
        .exercise-condition-card {
            background-color: var(--white);
            border: 1px solid var(--border);
            padding: 1.75rem;
            margin-bottom: 2rem;
        }

        .exercise-condition-card h3 {
            font-size: 1rem !important;
            font-weight: 600;
            color: var(--navy) !important;
            margin-bottom: 1rem !important;
        }

        .exercise-recommendation {
            display: flex;
            gap: 1rem;
            margin-bottom: 1.5rem;
            padding: 1.5rem;
            background-color: var(--off-white);
            border: 1px solid var(--border);
        }

        .exercise-icon {
            font-size: 1.5rem;
            font-weight: bold;
            color: #166534;
        }

        /* Sub-tabs */
        .sub-tabs {
            display: flex;
            gap: 0;
            margin-bottom: 2rem;
            border-bottom: 1px solid var(--border);
        }

        .sub-tab {
            padding: 0.75rem 1.25rem;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 0.8125rem;
            font-weight: 500;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .sub-tab:hover {
            color: var(--navy);
        }

        .sub-tab.active {
            color: var(--navy);
            border-bottom-color: var(--navy);
        }

        .sub-tab-content {
            display: none;
        }

        .sub-tab-content.active {
            display: block;
        }

        /* Guidelines */
        .guidelines-list {
            display: grid;
            gap: 0.5rem;
        }

        .guideline-card {
            background-color: var(--white);
            padding: 0.8rem 1.1rem;
            border: 1px solid var(--border);
            transition: border-color 0.2s ease;
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-rows: auto auto;
            align-items: center;
            gap: 0 1rem;
        }

        .guideline-card:hover {
            border-color: var(--navy);
        }

        .guideline-title {
            grid-column: 1;
            grid-row: 1;
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--navy);
            margin-bottom: 0.15rem;
        }

        .guideline-org {
            grid-column: 1;
            grid-row: 2;
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 0;
        }

        .guideline-link {
            grid-column: 2;
            grid-row: 1 / span 2;
            display: inline-block;
            padding: 0.375rem 0.875rem;
            background-color: var(--navy);
            color: var(--white);
            text-decoration: none;
            font-size: 0.75rem;
            font-weight: 500;
            transition: background-color 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            white-space: nowrap;
            align-self: center;
        }

        .guideline-link:hover {
            background-color: var(--navy-dark);
        }


        /* Useful Websites */
        .website-list {
            display: grid;
            gap: 0.5rem;
        }

        .website-card {
            background-color: var(--white);
            border: 1px solid var(--border);
            border-radius: 0;
            padding: 0.8rem 1.1rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1.25rem;
            transition: border-color 0.2s ease;
        }

        .website-card:hover {
            border-color: var(--navy);
        }

        .website-info {
            flex: 1;
        }

        .website-info h3 {
            font-size: 0.9375rem !important;
            font-weight: 600 !important;
            color: var(--navy) !important;
            margin-bottom: 0.15rem !important;
            text-transform: none !important;
            letter-spacing: 0 !important;
        }

        .website-info p {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 0;
            line-height: 1.4;
        }

        .website-link {
            display: inline-block;
            padding: 0.375rem 0.875rem;
            background-color: var(--navy);
            color: var(--white);
            text-decoration: none;
            font-size: 0.75rem;
            font-weight: 500;
            transition: background-color 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .website-link:hover {
            background-color: var(--navy-dark);
        }

        @media (max-width: 640px) {
            .website-card {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.75rem;
            }
        }

        /* Category groupings */
        .category-section {
            margin-bottom: 1.5rem;
        }
        .category-section:last-child {
            margin-bottom: 0;
        }
        .category-label {
            font-size: 0.6875rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: var(--text-secondary);
            margin-bottom: 0.4rem;
            padding-bottom: 0.35rem;
            border-bottom: 1px solid var(--border);
        }

        /* Category-specific border colors - handled by full-border rules above */


        /* Exercise recommendation matrix */
        .exercise-matrix {
            background-color: var(--white);
            border: 1px solid var(--border);
            overflow-x: auto;
            margin: 2rem 0;
            position: relative;
        }

        .exercise-matrix table {
            width: 100%;
            border-collapse: collapse;
        }

        .exercise-matrix th {
            background-color: var(--navy);
            color: var(--white);
            font-size: 0.8125rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 1rem;
            text-align: left;
            border-bottom: 2px solid var(--navy-dark);
        }

        /* Sticky first column */
        .exercise-matrix th:first-child,
        .exercise-matrix td:first-child {
            position: sticky;
            left: 0;
            background-color: #eef2f9;
            z-index: 10;
        }

        .exercise-matrix th:first-child {
            background-color: var(--navy-dark);
            z-index: 11;
        }

        /* Row hover highlight */
        .exercise-matrix tbody tr {
            transition: background-color 0.15s ease;
        }

        .exercise-matrix tbody tr:hover td {
            filter: brightness(0.96);
        }

        .exercise-matrix tbody tr:hover td:first-child {
            background-color: #dce5f5;
            filter: none;
        }

        .exercise-matrix td {
            padding: 1rem;
            font-size: 0.875rem;
            border-bottom: 1px solid var(--border);
            vertical-align: top;
        }

        .exercise-matrix tr:last-child td {
            border-bottom: none;
        }

        .exercise-matrix .condition-name {
            font-weight: 600;
            color: var(--navy);
            min-width: 180px;
        }

        .exercise-matrix .permitted {
            color: #065f46;
            font-weight: 600;
            background-color: #ecfdf5;
        }

        .exercise-matrix .restricted {
            color: #92400e;
            font-weight: 600;
            background-color: #fffbeb;
        }

        .exercise-matrix .contraindicated {
            color: #991b1b;
            font-weight: 600;
            background-color: #fef2f2;
        }

        .exercise-matrix ul {
            margin: 0;
            padding-left: 1.25rem;
        }

        .exercise-matrix li {
            margin-bottom: 0.375rem;
            line-height: 1.6;
        }


        /* Gene badges */
        .gene-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.75rem;
        }

        .gene-badge {
            display: inline-block;
            padding: 0.375rem 0.75rem;
            background-color: var(--off-white);
            border: 1px solid var(--border);
            font-size: 0.8125rem;
            font-weight: 500;
            color: var(--navy);
        }

        /* Responsive */
        /* ============================================================
           PHASE 3.15 - ENHANCED MOBILE RESPONSIVENESS
           ============================================================ */

        @media (max-width: 1024px) {
            .conditions-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .detail-sections {
                grid-template-columns: 1fr;
            }
            .exercise-definition-grid {
                grid-template-columns: 1fr;
            }
            
            /* Better submenu scrolling on tablets */
            .condition-submenu, .page-submenu {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .condition-submenu::-webkit-scrollbar,
            .page-submenu::-webkit-scrollbar {
                display: none;
            }
        }

        @media (max-width: 640px) {
            .conditions-grid {
                grid-template-columns: 1fr;
            }
            body {
                font-size: 14px;
            }
            .header h1 {
                font-size: 1.5rem;
            }
            .container {
                padding: 1.25rem 1rem; /* PHASE 1 - reduced from 1.5rem */
            }
            
            /* Mobile navigation */
            .nav-tabs {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: thin;
                padding-bottom: 0.5rem;
            }
            
            .tab {
                white-space: nowrap;
                font-size: 0.875rem;
                padding: 0.625rem 1rem;
            }
            
            /* Mobile sticky headers */
            .condition-sticky-header,
            .page-sticky-header {
                padding: 0.75rem 1rem;
            }
            
            .condition-title,
            .page-title {
                font-size: 1.25rem;
            }
            
            /* Mobile submenus with horizontal scroll */
            .condition-submenu,
            .page-submenu {
                gap: 0.5rem;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                padding-bottom: 0.5rem;
            }
            
            .condition-submenu::-webkit-scrollbar,
            .page-submenu::-webkit-scrollbar {
                display: none;
            }
            
            .condition-submenu-item,
            .page-submenu-item {
                white-space: nowrap;
                font-size: 0.8125rem;
                padding: 0.5rem 0.875rem;
            }
            
            /* Mobile quick summaries */
            .quick-summary {
                padding: 1rem;
                font-size: 0.875rem;
            }
            
            .quick-summary ul {
                margin-left: 1.25rem;
            }
            
            /* Mobile cross-links */
            .cross-links {
                padding: 0.875rem 1rem;
                font-size: 0.875rem;
            }
            
            /* Mobile exercise matrix - ensure horizontal scroll works */
            .exercise-matrix-container {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                margin: 0 -1rem;
                padding: 0 1rem;
            }
            
            .exercise-matrix {
                max-width: 100%;
                font-size: 0.8125rem;
            }

            .exercise-matrix table {
                min-width: 600px;
            }
            
            .exercise-matrix th,
            .exercise-matrix td {
                padding: 0.5rem;
            }
            
            /* Mobile info boxes */
            .info-box {
                padding: 0.875rem 1rem;
                font-size: 0.875rem;
            }
            
            .info-box-title {
                font-size: 0.9375rem;
            }
            
            /* Mobile gene badges */
            .gene-badge {
                font-size: 0.75rem;
                padding: 0.25rem 0.5rem;
            }
            
            /* Mobile collapsible sections */
            .collapsible-header {
                padding: 0.875rem 1rem;
            }
            
            .collapsible-title {
                font-size: 1rem;
            }
            
            .collapsible-inner {
                padding: 1rem;
                font-size: 0.875rem;
            }
            
            /* Mobile tables - make them scrollable */
            .tab-content table:not(.exercise-matrix) {
                display: block;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            /* Data tables in condition sections */
            .data-table {
                display: block;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                max-width: 100%;
            }

            /* Gene variants table */
            .gv-table-wrap {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            /* Search row wraps on mobile */
            .gv-search-row {
                flex-wrap: wrap;
            }

            /* Reduce section title sizes on mobile */
            .section-title {
                font-size: 1.25rem;
            }

            h3 {
                font-size: 1.125rem;
            }

            h4 {
                font-size: 1rem;
            }
        }
        
        /* Ultra-small screens (iPhone SE, etc) */
        @media (max-width: 375px) {
            .container {
                padding: 1rem 0.75rem;
            }
            
            .header h1 {
                font-size: 1.25rem;
            }
            
            .tab {
                font-size: 0.8125rem;
                padding: 0.5rem 0.75rem;
            }
            
            .condition-submenu-item,
            .page-submenu-item {
                font-size: 0.75rem;
                padding: 0.4rem 0.75rem;
            }
            
            .quick-summary,
            .cross-links,
            .info-box {
                font-size: 0.8125rem;
            }
        }
            h2 {
                font-size: 1.5rem !important;
            }
        }

        /* ============================================================
           MODERN REDESIGN LAYER
           ============================================================ */

        /* Updated tokens */
        :root {
            --navy: #1e3a8a;
            --navy-dark: #162a5c;
            --navy-mid: #2d4fa1;
            --off-white: #f5f7fa;
            --border: #e4e8ef;
            --border-dark: #cdd3de;
            --shadow-sm: 0 1px 3px rgba(30,58,138,0.06), 0 1px 2px rgba(0,0,0,0.04);
            --shadow-md: 0 4px 12px rgba(30,58,138,0.08), 0 2px 6px rgba(0,0,0,0.05);
            --shadow-lg: 0 8px 24px rgba(30,58,138,0.10), 0 4px 10px rgba(0,0,0,0.06);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
        }

        /* Body */
        body {
            background-color: #f0f3f8;
            background-image: none;
        }

        /* Header - gradient + more breathing room */
        .header {
            background: linear-gradient(135deg, #162a5c 0%, #1e3a8a 50%, #2d4fa1 100%);
            padding: 2.5rem 0 2.25rem;
            border-bottom: none;
        }
        .header-pattern { display: none; }

        .header h1 {
            font-size: 2rem;
            font-weight: 600;
            letter-spacing: -0.02em;
        }

        .header p {
            font-size: 0.9375rem;
            opacity: 0.85;
            margin-top: 0.25rem;
        }

        /* Sticky nav - cleaner, slight shadow */
        .nav-tabs {
            background-color: #fff;
            box-shadow: 0 1px 0 var(--border), var(--shadow-sm);
        }

        .nav-tab {
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            padding: 1rem 1.25rem;
            border-bottom-width: 3px;
            transition: color 0.15s, border-color 0.15s, background-color 0.15s;
        }

        .nav-tab:hover {
            background-color: #f5f7fb;
            color: var(--navy);
        }

        .nav-tab.active {
            color: var(--navy);
            border-bottom-color: var(--navy);
        }

        /* Main container */
        .container {
            padding: 2rem 2rem 4rem;
        }

        /* Conditions grid - tighter gap */
        .conditions-grid {
            gap: 1.25rem;
            margin-top: 1.5rem;
        }

        /* Category cards */
        .condition-category {
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            transition: box-shadow 0.2s, border-color 0.2s, transform 0.2s;
        }

        .condition-category:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--border-dark);
            transform: translateY(-2px);
        }

        .category-header {
            padding: 0.875rem 1.25rem;
            font-size: 0.75rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            background: linear-gradient(to right, #f8faff, #f0f4fc);
            border-bottom: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.625rem;
        }

        .category-logo {
            width: 32px;
            height: 32px;
            border-radius: 7px;
            object-fit: cover;
            flex-shrink: 0;
            display: block;
        }

        /* Category accent colours on the left border */
        .cardiomyopathies  { border-left: 4px solid #16a34a; }
        .channelopathies   { border-left: 4px solid #2563eb; }
        .metabolic         { border-left: 4px solid #d97706; }
        .aortopathies      { border-left: 4px solid #dc2626; }
        .neuromuscular     { border-left: 4px solid #7c3aed; }

        .cardiomyopathies  .category-header { color: #14532d; }
        .channelopathies   .category-header { color: #1e3a8a; }
        .metabolic         .category-header { color: #78350f; }
        .aortopathies      .category-header { color: #7f1d1d; }
        .neuromuscular     .category-header { color: #4c1d95; }

        .category-items { padding: 0.75rem; }

        /* Condition items */
        .condition-item {
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            padding: 0.8rem 1rem;
            margin: 0.4rem 0;
            font-size: 0.875rem;
            font-weight: 500;
            transition: all 0.15s ease;
            background: #fff;
        }

        /* Back button */
        .back-button {
            border-radius: var(--radius-sm);
            font-size: 0.8125rem;
            font-weight: 600;
            padding: 0.625rem 1.25rem;
            letter-spacing: 0.04em;
            transition: all 0.15s ease;
        }

        /* Sticky condition header */
        .condition-sticky-header,
        .page-sticky-header {
            border-bottom: 1px solid var(--border);
            background: rgba(255,255,255,0.97);
            backdrop-filter: blur(6px);
        }

        /* Section boxes */
        .section {
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
            padding: 1.75rem;
            background: #fff;
            overflow: visible;
        }

        .section-title {
            font-size: 0.7rem !important;
            letter-spacing: 0.1em !important;
        }

        /* Detail sections */
        .detail-section {
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
            overflow: visible;
        }

        /* Info boxes */
        .info-box {
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        /* Quick summary */
        .quick-summary {
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
        }

        /* Cross-links */
        .cross-links {
            border-radius: var(--radius-sm);
        }

        /* Collapsible */
        .collapsible-section {
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            margin-bottom: 1rem;
            transition: box-shadow 0.2s;
        }

        .collapsible-section:hover {
            box-shadow: var(--shadow-md);
        }

        .collapsible-header {
            background: var(--navy);
            transition: background 0.15s;
        }

        .collapsible-header:hover {
            background: var(--navy-dark);
        }

        /* Gene badges */
        .gene-badge {
            border-radius: 6px;
            background: #eef2ff;
            border: 1px solid #c7d2fe;
            color: var(--navy);
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.02em;
        }

        /* Guideline cards */
        .guideline-card {
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
            transition: box-shadow 0.2s, border-color 0.2s;
            padding: 0.8rem 1.1rem;
        }

        .guideline-card:hover {
            box-shadow: var(--shadow-md);
            border-color: var(--navy-mid);
        }

        .guideline-link {
            border-radius: var(--radius-sm);
            padding: 0.375rem 0.875rem;
            font-size: 0.75rem;
            letter-spacing: 0.05em;
            background: var(--navy);
            transition: background 0.15s;
        }

        .guideline-link:hover {
            background: var(--navy-dark);
        }

        /* Website cards */
        .website-card {
            border-radius: var(--radius-sm) !important;
            box-shadow: var(--shadow-sm);
            transition: box-shadow 0.2s, border-color 0.2s;
        }

        .website-card:hover {
            box-shadow: var(--shadow-md) !important;
        }

        .website-link {
            border-radius: var(--radius-sm) !important;
            transition: background 0.15s !important;
        }

        .website-link:hover {
            background: var(--navy-dark) !important;
        }

        /* Exercise matrix */
        .exercise-matrix {
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        /* Exercise condition cards */
        .exercise-condition-card {
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
            padding: 1.75rem;
            transition: box-shadow 0.2s;
        }

        .exercise-condition-card:hover {
            box-shadow: var(--shadow-md);
        }

        /* Exercise def cards */
        .exercise-def-card {
            border-radius: var(--radius-md);
            border: 1px solid var(--border);
            box-shadow: var(--shadow-sm);
        }

        /* Exercise recommendation boxes */
        .exercise-recommendation {
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
        }

        /* Page/condition submenu pills */
        .condition-submenu-item,
        .page-submenu-item {
            border-radius: 6px 6px 0 0;
            transition: color 0.15s, background 0.15s;
        }

        /* Sub-tabs */
        .sub-tab {
            border-radius: 6px 6px 0 0;
        }

        /* Footer */
        .footer {
            background: linear-gradient(135deg, #162a5c 0%, #1e3a8a 100%);
            color: rgba(255,255,255,0.7);
            font-size: 0.8125rem;
            padding: 1.5rem 2rem;
            text-align: center;
        }

        /* Stretched-link: entire card clickable */
        .guideline-card { position: relative; cursor: pointer; }
        .guideline-card .guideline-link::after { content: ''; position: absolute; inset: 0; }
        .website-card { position: relative; cursor: pointer; }
        .website-card .website-link::after { content: ''; position: absolute; inset: 0; }

        /* Back-to-top button */
        #back-to-top {
            position: fixed; bottom: 2rem; right: 2rem;
            background: var(--navy); color: #fff;
            border: none; border-radius: 50%;
            width: 2.75rem; height: 2.75rem;
            font-size: 1.1rem; cursor: pointer;
            display: none; align-items: center; justify-content: center;
            box-shadow: 0 3px 10px rgba(0,0,0,0.25);
            z-index: 999; transition: background 0.15s, transform 0.15s;
        }
        #back-to-top:hover { background: var(--navy-dark); transform: translateY(-2px); }


        /* Last-reviewed badge */
        .last-reviewed {
            display: inline-block;
            font-size: 0.7rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.07em;
            background: rgba(255,255,255,0.15);
            color: rgba(255,255,255,0.8);
            padding: 0.2rem 0.6rem; border-radius: 20px;
            margin-left: 0.75rem; vertical-align: middle;
        }

        /* Expand / collapse all button */
        .expand-collapse-btn {
            font-size: 0.75rem; font-weight: 600;
            text-transform: uppercase; letter-spacing: 0.06em;
            background: rgba(255,255,255,0.12);
            color: rgba(255,255,255,0.85);
            border: 1px solid rgba(255,255,255,0.25);
            border-radius: var(--radius-sm);
            padding: 0.3rem 0.75rem; cursor: pointer;
            transition: background 0.15s;
            margin-left: auto; flex-shrink: 0;
        }
        .expand-collapse-btn:hover { background: rgba(255,255,255,0.22); }

        /* Exercise matrix footnote */
        .matrix-footnote {
            font-size: 0.78rem; color: var(--text-secondary);
            margin-top: 0.75rem; padding: 0.6rem 0.875rem;
            border-left: 3px solid var(--border);
            background: var(--off-white);
        }

        /* HCM calculator */
        .hcm-calc {
            background: #f0f9ff; border: 1px solid #bae6fd;
            border-radius: var(--radius-md); padding: 1.25rem 1.5rem;
            margin-top: 1.5rem;
        }
        .hcm-calc h4 { color: #0369a1; font-size: 0.9375rem; margin-bottom: 1rem; }
        .hcm-calc-grid {
            display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1.5rem;
        }
        .hcm-calc-field label {
            display: block; font-size: 0.8rem; font-weight: 600;
            color: var(--text-secondary); margin-bottom: 0.25rem;
        }
        .hcm-calc-field input, .hcm-calc-field select {
            width: 100%; padding: 0.4rem 0.6rem;
            border: 1px solid #bae6fd; border-radius: 4px;
            font-size: 0.875rem; background: #fff;
        }
        .hcm-calc-result {
            margin-top: 1rem; padding: 0.75rem 1rem;
            border-radius: var(--radius-sm); font-weight: 600; font-size: 0.9rem;
            display: none;
        }
        .hcm-calc-result.low { background: #ecfdf5; color: #065f46; }
        .hcm-calc-result.intermediate { background: #fffbeb; color: #92400e; }
        .hcm-calc-result.high { background: #fef2f2; color: #991b1b; }

        @media (max-width: 600px) {
            .hcm-calc-grid { grid-template-columns: 1fr; }
        }

        /* ============================================================
           VISUAL HIERARCHY REFRESH - Elegant, Consistent Typography
           Goals: clear h-level hierarchy, unified palette, ≤2 highlight styles
           ============================================================ */

        /* ── Card / section headings ──
           These are the section titles at the top of each white card
           (e.g. "Genetics", "Treatments", "Risk Stratification").
           Currently 0.81 rem uppercase - smaller than 0.875 rem body text.
           Fix: promote to 1 rem, remove uppercase, add bottom-border divider. */
        .detail-section h3,
        .section-title,
        .criteria-section h3,
        .exercise-def-card h3 {
            font-size: 1rem !important;
            font-weight: 700 !important;
            color: var(--navy) !important;
            text-transform: none !important;
            letter-spacing: -0.01em !important;
            padding-bottom: 0.625rem !important;
            margin-bottom: 1.125rem !important;
            border-bottom: 1px solid var(--border) !important;
        }

        /* ── Content sub-headings ──
           Pattern: <p><strong>Heading:</strong></p> immediately before <ul>
           These act as section sub-headers within cards. Make them
           clearly a step above body weight without adding a new element. */
        .detail-section p:has(+ ul), .detail-section p:has(+ table),
        .collapsible-inner p:has(+ ul), .collapsible-inner p:has(+ table),
        .info-box-content p:has(+ ul), .info-box-content p:has(+ table),
        .section p:has(+ ul), .section p:has(+ table),
        .criteria-section p:has(+ ul), .criteria-section p:has(+ table),
        .exercise-condition-card p:has(+ ul), .exercise-condition-card p:has(+ table) {
            font-size: 0.9375rem !important;
            font-weight: 600 !important;
            color: var(--navy) !important;
            margin-top: 1.25rem !important;
            margin-bottom: 0.3rem !important;
        }
        /* The <strong> inside a sub-heading paragraph would otherwise force black +
           weight 600, making the sub-heading identical to the bold labels in the
           bullets beneath it (no hierarchy). Render it as the maroon heading it is. */
        .detail-section p:has(+ ul) strong, .detail-section p:has(+ table) strong,
        .collapsible-inner p:has(+ ul) strong, .collapsible-inner p:has(+ table) strong,
        .info-box-content p:has(+ ul) strong, .info-box-content p:has(+ table) strong,
        .section p:has(+ ul) strong, .section p:has(+ table) strong,
        .criteria-section p:has(+ ul) strong, .criteria-section p:has(+ table) strong,
        .exercise-condition-card p:has(+ ul) strong, .exercise-condition-card p:has(+ table) strong {
            color: var(--navy) !important;
            font-weight: 700 !important;
        }
        /* Same sub-heading treatment for numbered lists (<ol>), excluding reference
           lists (.ref-list) so "Last reviewed" / reference sub-labels stay as-is.
           Fixes headings before treatment ladders rendering black, not maroon. */
        .detail-section p:has(+ ol:not(.ref-list)), .collapsible-inner p:has(+ ol:not(.ref-list)),
        .info-box-content p:has(+ ol:not(.ref-list)), .section p:has(+ ol:not(.ref-list)),
        .criteria-section p:has(+ ol:not(.ref-list)), .exercise-condition-card p:has(+ ol:not(.ref-list)) {
            font-size: 0.9375rem !important;
            font-weight: 600 !important;
            color: var(--navy) !important;
            margin-top: 1.25rem !important;
            margin-bottom: 0.3rem !important;
        }
        .detail-section p:has(+ ol:not(.ref-list)) strong, .collapsible-inner p:has(+ ol:not(.ref-list)) strong,
        .info-box-content p:has(+ ol:not(.ref-list)) strong, .section p:has(+ ol:not(.ref-list)) strong,
        .criteria-section p:has(+ ol:not(.ref-list)) strong, .exercise-condition-card p:has(+ ol:not(.ref-list)) strong {
            color: var(--navy) !important;
            font-weight: 700 !important;
        }
        /* No extra top margin on the very first sub-heading in a container */
        .detail-section > p:first-child:has(+ ul),
        .collapsible-inner > p:first-child:has(+ ul), .collapsible-inner > p:first-child:has(+ table),
        .info-box-content > p:first-child:has(+ ul), .info-box-content > p:first-child:has(+ table) {
            margin-top: 0 !important;
        }
        /* Follow-up definition lines (G+/P− and Advanced/complicated): the line
           directly before the table is otherwise picked up by the caption-accent
           rule above (maroon + 600). Render it as plain body text instead.
           ID specificity beats the .section rule, so no source-order dependence. */
        #detail-followup p:has(+ table) {
            color: inherit !important;
            font-weight: 400 !important;
            font-size: inherit !important;
        }

        /* ── Info boxes - unified style ──
           Was: 6+ different background/border colours (blue, pink, amber, green, grey, red).
           Now: one clean neutral style. Clinical importance is communicated
           through the box title text and emoji, not background colour. */
        .info-box {
            background-color: var(--off-white) !important;
            border: 1px solid var(--border) !important;
            border-left: 3px solid var(--navy) !important;
            box-shadow: none !important;
            padding: 1.25rem 1.5rem !important;
            overflow: visible !important;
        }
        .info-box-title {
            font-size: 0.7rem !important;
            font-weight: 700 !important;
            color: var(--navy) !important;
            text-transform: uppercase !important;
            letter-spacing: 0.08em !important;
            margin-bottom: 0.75rem !important;
            padding-bottom: 0 !important;
            border-bottom: none !important;
        }

        /* ── Quick summary - blue tint background ── */
        .quick-summary {
            background: #dbeafe !important;
            border: 1px solid #93c5fd !important;
            border-left: 4px solid var(--navy) !important;
            box-shadow: none !important;
        }
        .quick-summary-title {
            font-size: 0.7rem !important;
            font-weight: 700 !important;
            color: var(--navy) !important;
            text-transform: uppercase !important;
            letter-spacing: 0.08em !important;
        }
        .quick-summary li { color: #1e3a5f !important; }
        .quick-summary li:before { content: "–" !important; color: var(--navy) !important; font-weight: 600 !important; }
        .quick-summary li strong { color: var(--navy) !important; }

        /* ── Do Not Forget / Key Points - amber tint ── */
        .section-donot-box {
            background-color: #fefce8 !important;
            border: 1px solid #fde68a !important;
            border-left: 4px solid #d97706 !important;
            box-shadow: none !important;
        }
        .section-donot-box .info-box-title {
            color: #92400e !important;
        }

        /* ── Pregnancy section - no coloured left bar (matches other sections) ── */
        #section-pregnancy {
            border-left: none !important;
        }

        /* ── References section ── */
        .section-references {
            background: var(--off-white) !important;
        }
        .section-references .section-title {
            font-size: 0.875rem !important;
            font-weight: 700 !important;
            color: var(--text-secondary) !important;
            border-bottom-color: var(--border) !important;
        }
        .ref-list {
            margin: 0;
            padding-left: 1.25rem;
        }
        .ref-list li {
            font-size: 0.8125rem;
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
            line-height: 1.6;
        }
        .ref-list li em { font-style: italic; }
        /* ── Inline citation superscripts ── */
        sup.cite { font-size: 0.7em; line-height: 0; vertical-align: super; }
        sup.cite a.cite-link {
            color: var(--navy);
            text-decoration: none;
            font-weight: 700;
            font-size: 0.85em;
            padding: 0 1px;
            border-bottom: 1px solid transparent;
        }
        sup.cite a.cite-link:hover { border-bottom-color: var(--navy); }
        @keyframes ref-flash {
            0%   { background: #bfdbfe; }
            100% { background: transparent; }
        }
        .ref-list li.ref-highlight { animation: ref-flash 2s ease-out forwards; border-radius: 3px; }
        .ref-list li a.doi-link {
            font-size: 0.75em;
            color: #2563eb;
            text-decoration: none;
            margin-left: 0.4em;
            white-space: nowrap;
        }
        .ref-list li a.doi-link:hover { text-decoration: underline; }

        /* ── Genotype / data tables ── */
        .data-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.8125rem;
            margin-top: 0.75rem;
            margin-bottom: 0.5rem;
        }
        .data-table thead tr {
            background: var(--navy);
            color: #fff;
        }
        .data-table thead th {
            padding: 0.5rem 0.75rem;
            text-align: left;
            font-weight: 600;
            font-size: 0.75rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .data-table tbody tr { border-bottom: 1px solid var(--border); }
        .data-table tbody tr:last-child { border-bottom: none; }
        .data-table tbody tr:nth-child(even) { background: var(--off-white); }
        .data-table td {
            padding: 0.5rem 0.75rem;
            vertical-align: top;
            line-height: 1.5;
        }
        .data-table td:first-child { font-weight: 600; white-space: nowrap; }
        .risk-high  { color: #b91c1c; font-weight: 600; }
        .risk-mod   { color: #b45309; font-weight: 600; }
        .risk-std   { color: #15803d; font-weight: 600; }
        .risk-low   { color: #4b5563; font-weight: 600; }
        .ref-reviewed {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--border);
        }

        /* ── Cross-links - remove amber, neutral ── */
        .cross-links {
            background: var(--off-white) !important;
            border: 1px solid var(--border) !important;
            border-left: 3px solid var(--border-dark) !important;
        }
        .cross-links-title { color: var(--text-secondary) !important; font-size: 0.7rem !important; font-weight: 700 !important; letter-spacing: 0.08em !important; }
        .cross-link { color: var(--navy) !important; }
        .cross-link:hover { color: var(--navy-dark) !important; border-bottom-color: var(--navy) !important; }
        .cross-link:before { color: var(--navy) !important; }

        /* ── Collapsible sections - light header by default ── */
        .collapsible-header {
            background: var(--off-white) !important;
            border-bottom: 1px solid var(--border);
        }
        .collapsible-header:hover { background: #edf0f7 !important; }
        .collapsible-title {
            font-size: 0.9375rem !important;
            font-weight: 600 !important;
            color: var(--navy) !important;
        }
        .collapsible-toggle { color: var(--navy) !important; opacity: 0.55; font-size: 0.875rem; }

        /* ── Gene Panels - restore navy headers ── */
        #testing-eligibility .collapsible-header {
            background: var(--navy) !important;
            border-bottom: none;
        }
        #testing-eligibility .collapsible-header:hover {
            background: var(--thead) !important; /* darker maroon, was hardcoded navy #162d6e */
        }
        #testing-eligibility .collapsible-title {
            color: #fff !important;
        }
        #testing-eligibility .collapsible-toggle {
            color: rgba(255,255,255,0.75) !important;
            opacity: 1;
        }
        /* ── Gene Panels - compact, flat boxes (were oversized with shadows) ── */
        #testing-eligibility .collapsible-section {
            box-shadow: none !important;
            margin-bottom: 0.5rem !important;
            border-radius: 6px !important;
        }
        #testing-eligibility .collapsible-section:hover { box-shadow: none !important; }
        #testing-eligibility .collapsible-header {
            padding: 0.55rem 1rem !important;
        }
        #testing-eligibility .collapsible-title {
            font-size: 0.9375rem !important;
        }

        /* ── Last-reviewed badge - currently invisible on white bg ── */
        .last-reviewed {
            background: var(--off-white) !important;
            color: var(--text-secondary) !important;
            border: 1px solid var(--border) !important;
            margin-left: 0.5rem !important;
        }

        /* ── Expand/collapse all button - currently invisible on white bg ── */
        .expand-collapse-btn {
            background: var(--off-white) !important;
            color: var(--navy) !important;
            border: 1px solid var(--border-dark) !important;
        }
        .expand-collapse-btn:hover {
            background: #edf0f7 !important;
            border-color: var(--navy) !important;
        }

        /* ── HCM calculator - consistent with info-box ── */
        .hcm-calc {
            background: var(--off-white) !important;
            border: 1px solid var(--border) !important;
            border-left: 3px solid var(--navy) !important;
        }
        .hcm-calc h4 {
            color: var(--navy) !important;
            font-size: 0.875rem !important;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--border);
            margin-bottom: 0.875rem !important;
        }
        .hcm-calc-field input,
        .hcm-calc-field select { border-color: var(--border) !important; }

        /* ── Gene Variants Interactive Table ──────────────── */
        .gv-intro { color:var(--text); line-height:1.75; margin-bottom:1.5rem; font-size:0.92rem; }
        .gv-filters-bar { background:var(--off-white); border:1px solid var(--border); border-radius:10px; padding:1rem 1.25rem; margin-bottom:1.25rem; }
        .gv-filter-group { display:flex; align-items:center; flex-wrap:wrap; gap:0.4rem; margin-bottom:0.55rem; }
        .gv-filter-group:last-child { margin-bottom:0; }
        .gv-filter-label { font-size:0.71rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.06em; min-width:110px; flex-shrink:0; }
        .gv-pill { display:inline-flex; align-items:center; padding:0.28rem 0.72rem; border-radius:99px; border:1px solid var(--border); background:var(--white); color:var(--text); font-size:0.77rem; cursor:pointer; transition:all 0.15s; font-weight:500; line-height:1; }
        .gv-pill:hover { border-color:var(--navy); color:var(--navy); background:#f0f4ff; }
        .gv-pill.active { background:var(--navy); color:#fff; border-color:var(--navy); }
        .gv-search-row { display:flex; align-items:center; gap:0.75rem; }
        .gv-filters-toggle { display:inline-flex; align-items:center; gap:0.35rem; padding:0.38rem 0.85rem; border-radius:8px; border:1px solid var(--border); background:var(--white); color:var(--navy); font-size:0.8rem; font-weight:600; cursor:pointer; white-space:nowrap; transition:background 0.15s, border-color 0.15s; font-family:inherit; }
        .gv-filters-toggle:hover { background:#f0f4ff; border-color:var(--navy); }
        .gv-filters-toggle.active { background:var(--navy); color:#fff; border-color:var(--navy); }
        .gv-filters-active-dot { display:inline-block; width:6px; height:6px; background:#f59e0b; border-radius:50%; margin-left:2px; vertical-align:middle; }
        .gv-filters-groups { padding-top:0.85rem; border-top:1px solid var(--border); margin-top:0.75rem; display:flex; flex-direction:column; gap:0; }
        .gv-search { flex:1; padding:0.45rem 0.9rem; border:1px solid var(--border); border-radius:8px; font-size:0.85rem; outline:none; background:var(--white); font-family:inherit; }
        .gv-search:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(30,58,138,0.08); }
        .gv-count { font-size:0.8rem; color:var(--text-muted); white-space:nowrap; }
        .gv-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:10px; margin-bottom:2.5rem; }
        .gv-table { width:100%; border-collapse:collapse; font-size:0.83rem; }
        .gv-table thead th { background:#0f2461; color:#fff; padding:0.7rem 1rem; text-align:left; font-weight:600; font-size:0.79rem; white-space:nowrap; }
        .gv-table tbody tr { border-bottom:1px solid var(--border); transition:background 0.1s; background:#fff; }
        .gv-table tbody tr:last-child { border-bottom:none; }
        .gv-table tbody tr:hover { background:#eef3ff; }
        .gv-table tbody td { padding:0.7rem 1rem; vertical-align:top; line-height:1.5; }
        .gv-table tr.gv-hidden { display:none; }
        .gv-gene { font-weight:700; color:var(--navy); font-size:0.82rem; font-style:italic; }
        .gv-badge { display:inline-block; padding:0.18rem 0.5rem; border-radius:5px; font-size:0.71rem; font-weight:600; white-space:nowrap; }
        .gv-cond-HCM   { background:#dbeafe; color:#1e40af; }
        .gv-cond-DCM   { background:#ede9fe; color:#5b21b6; }
        .gv-cond-ARVC  { background:#fce7f3; color:#9d174d; }
        .gv-cond-LQT   { background:#d1fae5; color:#065f46; }
        .gv-cond-BrS   { background:#fee2e2; color:#991b1b; }
        .gv-cond-CPVT  { background:#ffedd5; color:#9a3412; }
        .gv-cond-FH    { background:#fef9c3; color:#854d0e; }
        .gv-cond-Aorta   { background:#e0f2fe; color:#0c4a6e; }
        .gv-cond-Storage { background:#f3f4f6; color:#374151; }
        .gv-badge[class*="gv-cond-"] { font-weight:700; }
        .gv-inh-AD  { background:#ede9fe; color:#4c1d95; }
        .gv-inh-AR  { background:#fee2e2; color:#7f1d1d; }
        .gv-inh-XLD { background:#fef3c7; color:#78350f; }
        .gv-inh-XLR { background:#ffedd5; color:#7c2d12; }
        .gv-inh-Mit { background:#d1fae5; color:#064e3b; }
        .gv-mut-Missense   { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
        .gv-mut-Truncating { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
        .gv-eff-GoF { background:#fffbeb; color:#92400e; border:1px solid #fde68a; }
        .gv-eff-LoF { background:#eff6ff; color:#1e40af; border:1px solid #bfdbfe; }
        .gv-eff-HI  { background:#fdf4ff; color:#6b21a8; border:1px solid #e9d5ff; }
        .gv-eff-DN  { background:#fff1f2; color:#9f1239; border:1px solid #fecdd3; }
        .gv-no-results { text-align:center; padding:2.5rem; color:var(--text-muted); font-style:italic; }
        .gv-group-header td { background:#f0f4ff; color:var(--navy); font-weight:800; font-size:0.95rem; text-transform:uppercase; letter-spacing:0.06em; padding:0.6rem 1rem; border-top:3px solid var(--navy); border-bottom:3px solid var(--navy); }
        .gv-bullets { margin:0; padding-left:1.2rem; }
        .gv-bullets li { margin-bottom:0.4rem; font-size:0.82rem; line-height:1.55; }
        .gv-bullets li:last-child { margin-bottom:0; }
        .gv-mut-Mixed { background:#fff7ed; color:#7c2d12; border:1px solid #fed7aa; }
        .gv-concepts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:1rem; margin-top:1.25rem; }
        .gv-concept-card { background:var(--off-white); border:1px solid var(--border); border-radius:10px; padding:1rem 1.2rem; }
        .gv-concept-title { font-weight:700; color:var(--navy); font-size:0.9rem; margin-bottom:0.2rem; }
        .gv-concept-sub { font-size:0.73rem; color:var(--text-muted); font-style:italic; margin-bottom:0.5rem; }
        .gv-concept-body { font-size:0.82rem; color:var(--text); line-height:1.65; }
        .gv-concept-eg { font-size:0.78rem; color:#1e40af; margin-top:0.45rem; font-style:italic; }
        /* Glossary */
        .gv-gloss-cat { margin-bottom:1.75rem; }
        .gv-gloss-cat:last-child { margin-bottom:0; }
        .gv-gloss-cat-title { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--navy); padding-bottom:0.45rem; border-bottom:2px solid var(--navy); margin-bottom:0.8rem; }
        .gv-glossary-grid { display:block; border-top:1px solid var(--border); }
        details.gv-glossary-item { background:var(--off-white); border:1px solid var(--border); border-radius:10px; overflow:hidden; transition:box-shadow 0.15s; }
        details.gv-glossary-item:hover { box-shadow:0 2px 8px rgba(30,58,138,0.09); }
        details.gv-glossary-item summary { padding:0.8rem 1rem; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:flex-start; gap:0.5rem; }
        details.gv-glossary-item summary::-webkit-details-marker,
        details.gv-glossary-item summary::marker { display:none; }
        details.gv-glossary-item summary::after { content:'▾'; font-size:0.85rem; color:var(--text-muted); flex-shrink:0; line-height:1.2; transition:color 0.15s; }
        details.gv-glossary-item[open] summary { background:var(--navy); border-bottom:1px solid rgba(255,255,255,0.15); border-radius:9px 9px 0 0; }
        details.gv-glossary-item[open] summary::after { content:'▴'; color:rgba(255,255,255,0.7); }
        .gv-gloss-titles { flex:1; }
        .gv-gloss-name { font-weight:700; color:var(--navy); font-size:0.88rem; display:block; transition:color 0.15s; }
        details.gv-glossary-item[open] summary .gv-gloss-name { color:#fff; }
        .gv-gloss-sub { font-size:0.73rem; color:var(--text-muted); font-style:italic; display:block; margin-top:0.1rem; transition:color 0.15s; }
        details.gv-glossary-item[open] summary .gv-gloss-sub { color:rgba(255,255,255,0.65); }
        .gv-gloss-body { padding:0.8rem 1rem; font-size:0.82rem; line-height:1.65; color:var(--text); }
        .gv-gloss-eg { font-size:0.78rem; color:#1e40af; margin-top:0.5rem; font-style:italic; border-top:1px solid var(--border); padding-top:0.45rem; }
        /* Always-expanded (static) glossary cards, merged Genetics Glossary */
        .gv-glossary-item.gv-glossary-item--static { display:grid; grid-template-columns:210px 1fr; gap:0 1.5rem; align-items:start; background:transparent; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:0.7rem 0.25rem; }
        .gv-glossary-item--static:hover { box-shadow:none; }
        .gv-glossary-item--static .gv-gloss-head { padding:0; }
        .gv-glossary-item--static .gv-gloss-body { padding:0; border-top:none; font-size:0.82rem; line-height:1.65; }
        @media (max-width:640px) { .gv-glossary-item.gv-glossary-item--static { grid-template-columns:1fr; gap:0.2rem 0; padding:0.6rem 0.25rem; } }
        /* Affected component badges */
        .gv-comp-Sarcomere    { background:#dbeafe; color:#1e40af; }
        .gv-comp-Ca           { background:#fce7f3; color:#9d174d; }
        .gv-comp-Ion          { background:#d1fae5; color:#065f46; }
        .gv-comp-Desmosome    { background:#fef9c3; color:#854d0e; }
        .gv-comp-Nuclear      { background:#ede9fe; color:#4c1d95; }
        .gv-comp-Cytoskeleton { background:#ffedd5; color:#9a3412; }
        .gv-comp-Lipid        { background:#f3f4f6; color:#374151; }
        .gv-comp-ECM          { background:#e0f2fe; color:#0c4a6e; }
        .gv-comp-Lysosomal    { background:#fef2f2; color:#991b1b; }
        .gv-comp-Mitochondria { background:#d1fae5; color:#064e3b; }
        /* ── Genetic Assays - type section headers ── */
        .ga-type-section { margin-bottom: 2.25rem; }
        .ga-type-header { font-weight: 700; color: var(--navy); font-size: 0.92rem; padding: 0.5rem 1rem; background: #f0f4ff; border-left: 4px solid var(--navy); margin-bottom: 0.6rem; }
        .ga-type-scale { font-weight: 500; font-size: 0.74rem; color: #5b6b9c; margin-left: 0.6rem; white-space: nowrap; }
        /* ── Genetic Assays - collapsible panels ── */
        details.ga-collapse { margin-bottom: 1.75rem; }
        details.ga-collapse > summary.ga-type-header { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; user-select:none; margin-bottom:0; }
        details.ga-collapse > summary.ga-type-header::-webkit-details-marker { display:none; }
        details.ga-collapse > summary.ga-type-header::after { content:'▸'; font-size:0.85rem; flex-shrink:0; margin-left:0.75rem; }
        details.ga-collapse[open] > summary.ga-type-header { margin-bottom:0.6rem; }
        details.ga-collapse[open] > summary.ga-type-header::after { content:'▾'; }
        .ga-type-desc { font-size: 0.83rem; color: var(--text-secondary); margin-bottom: 0.7rem; line-height: 1.55; }
        /* ── Genetic Assays - testing tier guide ── */
        .ga-tier-guide { margin-bottom: 1.75rem; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
        .ga-tier-row { display: flex; gap: 1rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--border); align-items: flex-start; background: var(--white); }
        .ga-tier-row.ga-tier-post { background: #f0fdff; border-bottom: none; }
        .ga-tier-connector { text-align: center; font-size: 0.74rem; color: var(--text-muted); padding: 0.3rem 1rem; background: var(--off-white); border-bottom: 1px solid var(--border); font-style: italic; letter-spacing: 0.02em; }
        .ga-tier-num { font-size: 0.72rem; font-weight: 800; background: var(--navy); color: #fff; min-width: 1.55rem; height: 1.55rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 0.05rem; }
        .ga-tier-num-post { background: #0891b2; font-size: 0.9rem; }
        .ga-tier-label { font-weight: 700; color: var(--navy); font-size: 0.88rem; margin-bottom: 0.25rem; }
        .ga-tier-body { font-size: 0.82rem; color: var(--text); line-height: 1.6; }
        .ga-tier-body ul { margin: 0.3rem 0 0; padding-left: 1.15rem; }
        .ga-tier-body li { margin-bottom: 0.25rem; }
        .ga-tier-1 { border-left: 3px solid #16a34a; }
        .ga-tier-2 { border-left: 3px solid #2563eb; }
        .ga-tier-3 { border-left: 3px solid #d97706; }
        .ga-tier-post { border-left: 3px solid #0891b2; }
        /* ── Clinical Calculators category accent ── */
        .category-section.calc-section { margin-bottom: 2rem; }
        .category-section.calc-section .category-label { color: #0891b2; border-bottom-color: rgba(8,145,178,0.28); }
        .website-card.calc-card { border-left: 2px solid #bae6fd; }
        .website-card.calc-card:hover { border-color: #0891b2; }
        .calc-tag { display:inline-block; font-size:0.68rem; font-weight:600; padding:0.1rem 0.45rem; border-radius:4px; margin-left:0.35rem; vertical-align:middle; background:#e0f2fe; color:#0369a1; }
        /* ── Genetic Assays ── */
        .gv-table tr.ga-hidden { display:none; }
        .ga-freq-vc  { background:#d1fae5; color:#065f46; }
        .ga-freq-c   { background:#dbeafe; color:#1e40af; }
        .ga-freq-uc  { background:#fef9c3; color:#854d0e; }
        .ga-freq-r   { background:#f3f4f6; color:#374151; }
        .ga-type-seq  { background:#ede9fe; color:#4c1d95; }
        .ga-type-trio { background:#fce7f3; color:#9d174d; }
        .ga-type-cyto { background:#ffedd5; color:#9a3412; }
        .ga-type-cnv  { background:#fef9c3; color:#854d0e; }
        .ga-type-trans { background:#d1fae5; color:#065f46; }
        .ga-no-results { text-align:center; padding:2.5rem; color:var(--text-muted); font-style:italic; }
        .ga-strategy-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; margin-top:0.75rem; }
        .ga-strategy-card { background:var(--off-white); border:1px solid var(--border); border-radius:10px; padding:1.1rem 1.2rem; }
        .ga-strategy-card.ga-sc-highlight { background:#f0f4ff; border-color:#bfdbfe; }
        .ga-strategy-title { font-weight:700; color:var(--navy); font-size:0.9rem; margin-bottom:0.2rem; }
        .ga-strategy-sub { font-size:0.73rem; color:var(--text-muted); font-style:italic; margin-bottom:0.55rem; }
        .ga-strategy-body { font-size:0.82rem; color:var(--text); line-height:1.65; }
        .ga-strategy-eg { font-size:0.78rem; color:#1e40af; margin-top:0.45rem; font-style:italic; border-top:1px solid var(--border); padding-top:0.4rem; }

        /* ══════════════════════════════════════════════════════════════
           UI/UX OPTIMISATION LAYER
           ══════════════════════════════════════════════════════════════ */

        /* 1. Header - no pattern */
        .header-pattern { display: none !important; }
        .header { padding: 2.5rem 0 2.25rem; }

        /* 2. Stats strip below conditions grid */
        .home-stats-strip {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.875rem;
            flex-wrap: wrap;
            padding: 0.875rem 1rem;
            margin-top: 1.25rem;
            border-top: 1px solid var(--border);
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        .home-stats-strip strong { color: var(--navy); font-weight: 700; }
        .hss-sep { color: var(--border-dark); font-size: 0.7rem; }

        /* 4. Category header - per-category tint */
        .cardiomyopathies  .category-header { background: linear-gradient(to right, #f0fdf4, #dcfce7) !important; }
        .channelopathies   .category-header { background: linear-gradient(to right, #eff6ff, #dbeafe) !important; }
        .metabolic         .category-header { background: linear-gradient(to right, #fffbeb, #fef3c7) !important; }
        .aortopathies      .category-header { background: linear-gradient(to right, #fef2f2, #fee2e2) !important; }
        .neuromuscular     .category-header { background: linear-gradient(to right, #faf5ff, #ede9fe) !important; }

        /* 5. Condition items - arrow affordance */
        .condition-item {
            display: flex !important;
            justify-content: space-between;
            align-items: center;
            gap: 0.5rem;
        }
        .condition-item::after {
            content: '›';
            font-size: 1.15rem;
            line-height: 1;
            opacity: 0.3;
            flex-shrink: 0;
            transition: opacity 0.15s, transform 0.15s;
        }
        .condition-item:hover::after { opacity: 0.85; transform: translateX(3px); }
        /* Arrow matches the hover text colour (maroon) */
        .cardiomyopathies .condition-item:hover::after,
        .channelopathies  .condition-item:hover::after,
        .aortopathies     .condition-item:hover::after,
        .metabolic        .condition-item:hover::after,
        .neuromuscular    .condition-item:hover::after { color: var(--accent); opacity: 1; }

        /* 6. Improved footer */
        footer.icc-footer {
            background: linear-gradient(135deg, #162a5c 0%, #1e3a8a 100%);
            color: rgba(255,255,255,0.65);
            padding: 1.75rem 0;
            margin-top: 4rem;
            border-top: 1px solid rgba(255,255,255,0.08);
        }
        .icc-footer-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
            flex-wrap: wrap;
        }
        .icc-footer-brand {
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
            letter-spacing: -0.01em;
            margin-bottom: 0.25rem;
        }
        .icc-footer-disclaimer {
            font-size: 0.73rem;
            color: rgba(255,255,255,0.55);
            max-width: 500px;
            line-height: 1.5;
            margin: 0;
        }
        .icc-footer-meta {
            text-align: right;
            flex-shrink: 0;
        }
        .icc-footer-meta span {
            display: block;
            font-size: 0.73rem;
            color: rgba(255,255,255,0.45);
            line-height: 1.6;
        }
        .icc-footer-meta span strong { color: rgba(255,255,255,0.75); font-weight: 600; }
        @media (max-width: 640px) {
            .icc-footer-inner { flex-direction: column; gap: 1rem; align-items: flex-start; }
            .icc-footer-meta { text-align: left; }
        }

        /* 7. Conditions grid title bar */
        .conditions-title-bar {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin-bottom: 0.25rem;
        }
        .conditions-title-bar h2 {
            font-size: 1.25rem !important;
            color: var(--navy) !important;
            font-weight: 700 !important;
            margin: 0 !important;
            border: none !important;
        }
        .conditions-title-bar span {
            font-size: 0.78rem;
            color: var(--text-secondary);
        }

        /* 8. Slight polish to nav search on focus */
        .nav-search-input:focus {
            box-shadow: 0 0 0 3px rgba(30,58,138,0.1);
        }

        /* ══════════════════════════════════════════════════════════════
           UI/UX PRO MAX - APPLIED RECOMMENDATIONS
           Source: Medical Clinic product type
           Style: Accessible & Ethical + Trust & Authority
           Typography: Corporate Trust (Lexend + Source Sans 3)
           Colour: #1E3A8A navy confirmed + #B45309 amber accent
           ══════════════════════════════════════════════════════════════ */

        /* ── Typography: Corporate Trust ─────────────────────────────
           Lexend headings (designed for readability/dyslexia-friendliness)
           Source Sans 3 body (optimised for long-form clinical reading)   */
        body {
            font-family: 'Source Sans 3', sans-serif;
            font-size: 16px;
        }
        h1, h2, h3, h4, h5, h6,
        .header h1,
        .condition-title,
        .page-title,
        .collapsible-title,
        .section-title,
        .detail-section h3,
        .info-box-title,
        .category-header,
        .nav-tab,
        .condition-submenu-item,
        .page-submenu-item {
            font-family: 'Lexend', sans-serif;
        }

        /* ── Colour: WCAG AAA contrast fix ────────────────────────────
           UUPX HIGH: "gray text on gray background" - severity: High
           #64748b on #f5f7fa = 4.48:1 (fails AAA). Fix: #475569 = 5.8:1  */
        :root {
            --text-secondary: #475569;   /* was #64748b - improved contrast */
            --amber-accent: #B45309;     /* UUPX Trust & Authority gold accent */
        }

        /* ── Accessibility: Focus rings (WCAG 2.4.11) ─────────────────
           UUPX: 3-4px focus ring required, must be visible on all elements */
        :focus-visible {
            outline: 3px solid var(--navy);
            outline-offset: 2px;
            border-radius: 3px;
        }
        .condition-item:focus-visible,
        .nav-tab:focus-visible,
        .condition-submenu-item:focus-visible,
        .page-submenu-item:focus-visible,
        .back-button:focus-visible,
        .guideline-link:focus-visible,
        .website-link:focus-visible {
            outline: 3px solid var(--navy);
            outline-offset: 2px;
        }

        /* ── Accessibility: Touch targets ≥ 44×44px ──────────────────
           UUPX: Accessible & Ethical - 44px touch targets required        */
        .condition-item {
            min-height: 44px;
        }
        .nav-tab {
            min-height: 44px;
            display: inline-flex;
            align-items: center;
        }
        .condition-submenu-item,
        .page-submenu-item {
            min-height: 44px;
            display: inline-flex;
            align-items: center;
        }
        .back-button {
            min-height: 44px;
        }

        /* ── Accessibility: Reduced motion ────────────────────────────
           UUPX: prefers-reduced-motion must be respected                  */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ── Skip to main content link ────────────────────────────────
           UUPX navigation: "100 tabs to reach content" anti-pattern fix   */
        .skip-link {
            position: absolute;
            top: -100px;
            left: 1rem;
            background: var(--navy);
            color: #fff;
            padding: 0.75rem 1.25rem;
            border-radius: 0 0 var(--radius-sm) var(--radius-sm);
            font-family: 'Lexend', sans-serif;
            font-size: 0.875rem;
            font-weight: 600;
            text-decoration: none;
            z-index: 9999;
            transition: top 0.15s;
        }
        .skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; }

        /* ── Trust & Authority: amber accent on key interactive elements */
        .guideline-link, .website-link {
            background: var(--navy) !important;
        }
        .guideline-link:hover, .website-link:hover {
            background: var(--amber-accent) !important;
        }

        /* ── Body text contrast bump in muted contexts ────────────────  */
        .ref-list li {
            color: var(--text-secondary);
        }
        .guideline-org,
        .website-info p {
            color: var(--text-secondary);
        }

        /* ── Font smoothing for Lexend ────────────────────────────────  */
        h1, h2, h3, h4, h5, h6 {
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* ════════════════════════════════════════════════════════════════
           REDESIGN v2 - "clinical reference" flat system (prototype)
           Goal: kill gradients/glossy cards, hairlines over shadows,
           sentence case, one accent, capped reading measure, quiet tables.
           ════════════════════════════════════════════════════════════════ */
        :root {
            --ink:        #1b1b1b;   /* near-black body text */
            --ink-soft:   #5c5256;   /* warm secondary text */
            --rule:       #e1d8db;   /* warm hairline */
            --rule-soft:  #ece4e7;
            --surface:    #f8ecef;   /* whisper blush (callouts, stripes, hover) */
            --accent:     #9b1c25;   /* deep maroon brand accent */
            --accent-ink: #7d161d;
            --navy:       #9b1c25;   /* legacy var redefined → maroon (recolours
                                        the many inline color:var(--navy) headings) */
            --danger:     #d12027;   /* bright red - reserved for danger only */
            --cl-bd:      #d8acb2;   /* soft maroon - full callout border */
            --dn-bd:      #e0a0a0;   /* soft red - full danger border */
            --page:       #f7f5f6;   /* soft warm off-white page - lets white cards lift */
            --card:       #ffffff;   /* crisp white card surface - lifts off off-white page */
            --measure:    52rem;     /* ~70ch reading width */
        }
        body { background:var(--page) !important; color:var(--ink) !important; }

        /* ---- Masthead: warm grey, hairline, no hero gradient ---- */
        .header {
            background:var(--page) !important;
            color:var(--ink) !important;
            padding:1.15rem 0 1.05rem !important;
            border-bottom:1px solid var(--rule) !important;
            box-shadow:none !important;
        }
        .header-pattern { display:none !important; }
        .header h1 {
            color:var(--accent) !important;
            font-size:2.45rem !important;
            font-weight:800 !important;
            letter-spacing:-0.02em !important;
            line-height:1.1 !important;
            margin:0 0 0.3rem !important;
        }
        .header h1 .logo-icc   { color:var(--accent) !important; font-weight:800 !important; }
        .header h1 .logo-notes { color:#7a7570 !important; font-weight:500 !important; }
        .header p {
            color:var(--ink-soft) !important;
            font-size:0.85rem !important;
            opacity:1 !important;
        }

        /* ---- Top nav: sentence case, hairline active underline ---- */
        .nav-tabs { box-shadow:none !important; border-bottom:1px solid var(--rule) !important; }
        .nav-tab {
            text-transform:none !important;
            letter-spacing:0 !important;
            font-size:0.85rem !important;
            font-weight:500 !important;
            color:var(--ink-soft) !important;
            padding:0.8rem 1.1rem !important;
        }
        .nav-tab:hover { background:transparent !important; color:var(--accent) !important; }
        .nav-tab.active { color:var(--accent) !important; border-bottom-color:var(--accent) !important; }

        /* ---- Page bg: warm light grey ---- */
        .container, body { background:var(--page) !important; }
        .nav-tabs { background:var(--page) !important; }

        /* ---- Home grid: flat cards, hairline, colored left rule only ---- */
        .conditions-grid { gap:1.5rem !important; }
        .condition-category {
            background:var(--card) !important;
            border:1px solid var(--rule) !important;
            border-radius:6px !important;
            box-shadow:none !important;
            overflow:hidden !important;
        }
        .condition-category:hover { box-shadow:none !important; border-color:var(--rule) !important; transform:none !important; }
        .category-header {
            background:var(--card) !important;
            color:var(--ink) !important;
            text-transform:none !important;
            letter-spacing:0 !important;
            font-size:0.95rem !important;
            font-weight:700 !important;
            padding:0.85rem 1.1rem !important;
            border-bottom:1px solid var(--rule) !important;
            border-left:3px solid var(--cat, var(--accent)) !important;
            border-radius:0 !important;
        }
        .cardiomyopathies  { --cat:#16a34a; }
        .channelopathies   { --cat:#2563eb; }
        .metabolic         { --cat:#d97706; }
        .aortopathies      { --cat:#dc2626; }
        .neuromuscular     { --cat:#7c3aed; }
        .cardiomyopathies  .category-header,
        .channelopathies   .category-header,
        .metabolic         .category-header,
        .aortopathies      .category-header,
        .neuromuscular     .category-header { background:var(--card) !important; color:var(--ink) !important; }
        .category-logo { width:18px !important; height:18px !important; opacity:0.75 !important; }

        .condition-item {
            border:none !important;
            border-bottom:1px solid var(--rule-soft) !important;
            border-radius:0 !important;
            padding:0.7rem 1.1rem !important;
            font-size:0.875rem !important;
            color:var(--ink) !important;
            background:var(--card) !important;
        }
        .condition-item:hover { background:var(--surface) !important; color:var(--accent-ink) !important; border-color:var(--rule-soft) !important; }
        .cardiomyopathies .condition-item:hover,
        .channelopathies  .condition-item:hover,
        .aortopathies     .condition-item:hover,
        .metabolic        .condition-item:hover,
        .neuromuscular    .condition-item:hover { background:var(--surface) !important; color:var(--accent-ink) !important; border-color:var(--rule-soft) !important; }

        /* ---- Detail page: capped reading measure ---- */
        .condition-detail .section-title,
        .condition-detail .section-content,
        .condition-detail .quick-summary,
        .condition-detail .info-box { max-width:var(--measure) !important; }

        /* Back button: quiet link */
        .back-button {
            background:var(--card) !important; border:1px solid var(--rule) !important;
            color:var(--ink-soft) !important; box-shadow:none !important;
            text-transform:none !important; letter-spacing:0 !important;
            font-weight:500 !important; border-radius:5px !important;
        }
        .back-button:hover { background:var(--surface) !important; color:var(--accent) !important; }

        /* Sticky title block: flat (both condition + non-condition page headers) */
        .condition-sticky-header,
        .page-sticky-header { background:var(--page) !important; box-shadow:none !important; backdrop-filter:none !important; border-bottom:1px solid var(--rule) !important; border-radius:0 !important; }
        .condition-title { color:var(--accent) !important; font-weight:700 !important; letter-spacing:-0.015em !important; }

        /* Sub-menu: flat text links, hairline divider - no pills */
        .condition-submenu {
            border:none !important;
            border-bottom:1px solid var(--rule) !important;
            gap:0 !important;
            padding-bottom:0 !important;
            margin-top:0.85rem !important;
        }
        /* breathing room between the condition title and the menu beneath it */
        .condition-title { margin-bottom:0.5rem !important; }
        .condition-submenu-item {
            text-transform:none !important; letter-spacing:0 !important;
            font-size:0.82rem !important; font-weight:500 !important;
            color:var(--ink-soft) !important; background:transparent !important;
            border:none !important; border-radius:0 !important;
            border-bottom:2px solid transparent !important;
            padding:0.45rem 0.9rem !important; margin:0 !important;
        }
        .condition-submenu-item:hover {
            color:var(--accent) !important; background:transparent !important;
            border-bottom-color:var(--rule) !important;
        }
        .condition-submenu-item.active {
            color:var(--accent) !important;
            border-bottom-color:var(--accent) !important;
        }

        /* ---- Sections: no card chrome, hairline separators ---- */
        .section {
            background:transparent !important;
            border:none !important;
            border-radius:0 !important;
            box-shadow:none !important;
            padding:0 !important;
            margin-bottom:2.5rem !important;
            border-top:1px solid var(--rule) !important;
            padding-top:1.6rem !important;
        }
        .section-title {
            color:var(--accent) !important;
            font-size:1.25rem !important;
            font-weight:700 !important;
            text-transform:none !important;
            letter-spacing:-0.01em !important;
            border:none !important;
            margin-bottom:0.9rem !important;
        }
        .section-content { background:transparent !important; border:none !important; padding:0 !important; }

        /* ---- Quick summary: quiet callout, no gradient / no lightning ---- */
        .quick-summary {
            background:var(--surface) !important;
            border:1px solid var(--cl-bd) !important;
            border-radius:6px !important;
            box-shadow:none !important;
        }
        .quick-summary-title {
            text-transform:uppercase !important;
            letter-spacing:0.06em !important;
            font-size:0.7rem !important;
            color:var(--ink-soft) !important;
        }
        .quick-summary-title svg, .quick-summary-title img, .quick-summary-title .icon { display:none !important; }
        .quick-summary li strong, .quick-summary li { color:var(--ink) !important; }
        .quick-summary li:before { color:var(--accent) !important; }

        /* ---- Info / Key-points boxes: flat bordered callout ---- */
        .info-box {
            background:var(--surface) !important;
            border:1px solid var(--cl-bd) !important;
            border-radius:6px !important;
            box-shadow:none !important;
        }
        .section-donot-box, #section-donot .info-box {
            border:1px solid var(--dn-bd) !important;
            background:#fbeaea !important;
        }
        .section-donot-box .info-box-title, #section-donot .info-box-title { color:var(--danger) !important; }
        .info-box-title { text-transform:none !important; letter-spacing:0 !important; }

        /* ---- Tables: quiet header, hairline rows ---- */
        .data-table, .gv-table, .exercise-matrix table {
            border:1px solid var(--rule) !important;
            border-radius:6px !important;
            box-shadow:none !important;
            overflow:hidden !important;
            font-size:0.84rem !important;
            background:var(--card) !important;
        }
        .data-table thead th, .gv-table thead th, .exercise-matrix thead th {
            background:var(--surface) !important;
            color:var(--ink) !important;
            font-weight:600 !important;
            text-transform:none !important;
            letter-spacing:0 !important;
            border-bottom:1px solid var(--rule) !important;
        }
        .data-table tbody tr, .gv-table tbody tr { border-bottom:1px solid var(--rule-soft) !important; }
        .data-table tbody tr:nth-child(even) { background:var(--surface) !important; }
        .data-table tbody tr:hover, .gv-table tbody tr:hover { background:var(--surface) !important; }
        .gv-table-wrap { border:1px solid var(--rule) !important; border-radius:6px !important; }

        /* ---- Global de-gloss: tame radius + shadows everywhere ---- */
        .references, .section-references { box-shadow:none !important; border:none !important; }

        /* Standardise EVERY table header to maroon (beats inline light-blue
           headers scattered through the clinical content). */
        #condition-detail thead th, #condition-detail thead tr,
        .tab-content thead th,    .tab-content thead tr {
            background:var(--thead) !important;
            color:#fff !important;
            border-color:rgba(255,255,255,0.18) !important;
        }

        /* Footer: retint to deep maroon + shorter height */
        footer.icc-footer {
            background:#45131a !important;
            border-top:1px solid rgba(255,255,255,0.08) !important;
            padding:0.85rem 0 !important;
            margin-top:2.25rem !important;
        }
        .icc-footer-disclaimer { font-size:0.66rem !important; line-height:1.45 !important; max-width:560px !important; }

        /* ════════════════════════════════════════════════════════════════
           Tighten top: title + submenu sit immediately below the top nav
           ════════════════════════════════════════════════════════════════ */
        .tab-content .container, .container { padding-top:0.5rem !important; }
        /* compact back link, minimal gap above title */
        .back-button { margin:0 0 0.6rem 0 !important; padding:0.32rem 0.7rem !important; }
        .condition-sticky-header { margin-top:0 !important; padding-top:0.35rem !important; }
        /* Title bar sticks flush under the nav - kill the 6px content-leak gap.
           Nav is ~45px; tuck the title bar 1px under it so no band can show. */
        .nav-tabs { height:45px !important; }
        .condition-sticky-header, .page-sticky-header { top:44px !important; }
        /* page-level h2 titles (Exercise, Pregnancy, etc.) hug the top too */
        .tab-content > .container > h2:first-child,
        .tab-content .container > h2:first-child { margin-top:0 !important; }

        /* ════════════════════════════════════════════════════════════════
           Table header contrast - deep maroon header row, white text
           ════════════════════════════════════════════════════════════════ */
        :root { --thead:#6e151c; }
        .data-table thead th,
        .gv-table thead th,
        .exercise-matrix thead th,
        .tab-content table:not(.exercise-matrix) thead th {
            background:var(--thead) !important;
            color:#fff !important;
            font-weight:600 !important;
            border-bottom:none !important;
        }
        .data-table thead tr, .gv-table thead tr { background:var(--thead) !important; }

        /* ════════════════════════════════════════════════════════════════
           TYPE SCALE - one disciplined ramp; each level distinct by
           SIZE + WEIGHT + COLOUR so nesting is always legible.
             L1 page/condition title  1.5rem  / 700 / maroon
             L2 section (h2)           1.2rem  / 700 / maroon
             L3 subhead (h3)           1.05rem / 700 / maroon
             L4 sub-subhead (h4-h6)    0.95rem / 700 / ink (colour drop = lower)
             body                      0.875rem/ 400 / ink
             meta / caption            0.78rem / 500
           ════════════════════════════════════════════════════════════════ */
        :root {
            --fs-1:1.5rem; --fs-2:1.2rem; --fs-3:1.05rem;
            --fs-h4:0.95rem; --fs-4:0.875rem; --fs-5:0.78rem;
        }
        /* L1 - page-level titles (maroon) */
        .condition-title,
        .tab-content > h2,
        .tab-content > .section > h2:first-child:not(.section-title) {
            font-size:var(--fs-1) !important; font-weight:700 !important;
            line-height:1.25 !important; color:var(--accent) !important;
        }
        /* L2 - section / page h2 (maroon) */
        h2, .section-title {
            font-size:var(--fs-2) !important; font-weight:700 !important;
            line-height:1.3 !important; color:var(--accent) !important;
        }
        /* L3 - major subheads h3 (maroon) */
        h3 {
            font-size:var(--fs-3) !important; font-weight:700 !important;
            line-height:1.35 !important; color:var(--accent) !important;
        }
        /* L4 - sub-subheads h4-h6 (dark ink + bold; colour drop signals the
           lower level even when the size step is small) */
        h4, h5, h6 {
            font-size:var(--fs-h4) !important; font-weight:700 !important;
            line-height:1.4 !important; color:var(--ink) !important;
        }
        /* Box labels */
        .info-box-title { font-size:var(--fs-h4) !important; font-weight:700 !important; color:var(--accent) !important; }
        .quick-summary-title { font-size:var(--fs-5) !important; }
        /* Body copy, lists, table cells */
        body, p, li, td, .section-content, .condition-item,
        .data-table td, .gv-table tbody td {
            font-size:var(--fs-4) !important; line-height:1.65 !important;
        }
        /* Meta, nav, captions, table headers, footnotes */
        .nav-tab, .condition-submenu-item, .header p,
        .data-table thead th, .gv-table thead th, .exercise-matrix thead th,
        .nav-search-input, figcaption, .figure-caption, .hss-link, .footer, .footer * {
            font-size:var(--fs-5) !important;
        }
        /* Neutralise stray inline font-sizes in content → body; headings keep level */
        .condition-detail [style*="font-size"],
        .tab-content [style*="font-size"] {
            font-size:var(--fs-4) !important;
        }
        .condition-detail h2[style*="font-size"], .tab-content h2[style*="font-size"] { font-size:var(--fs-2) !important; }
        .condition-detail h3[style*="font-size"], .tab-content h3[style*="font-size"] { font-size:var(--fs-3) !important; }
        .condition-detail h4[style*="font-size"], .tab-content h4[style*="font-size"] { font-size:var(--fs-h4) !important; }
        /* content h4 default level */
        .section-content h4, .info-box-content h4, .collapsible-inner h4 { font-size:var(--fs-h4) !important; }
        /* Citations / sub-superscripts: one small relative size, not a scale step */
        .condition-detail sup, .condition-detail sub,
        .tab-content sup, .tab-content sub,
        sup, sub, .cite, .cite-link { font-size:0.72em !important; }
        /* strong/em inherit body size (kill stray 15px) */
        strong, b, em, i { font-size:inherit !important; }
        /* id-level override: legacy ".section-content p" (0,1,1) out-specifies a
           bare p rule, so pin body text with #condition-detail (1,0,x). */
        #condition-detail p, #condition-detail li, #condition-detail td,
        #condition-detail strong, #condition-detail em, #condition-detail b,
        #condition-detail i,
        #condition-detail span:not(.cite):not(.cite-link),
        #condition-detail a:not(.doi-link):not(.cite-link):not(.condition-submenu-item) {
            font-size:var(--fs-4) !important;
        }
        /* Peripheral controls → L5 meta */
        .back-button, label, .cross-links-title, .doi-link { font-size:var(--fs-5) !important; }

        /* ════════════════════════════════════════════════════════════════
           UNIFIED BOX SYSTEM - only three treatments allowed:
             1. Callout  → blush surface + maroon left rule  (.info-box, .quick-summary, note <p>)
             2. Card     → soft surface + hairline border    (all *-card, criteria-section)
             3. Danger   → light red + red left rule         (.section-donot-box, contraindicated)
           Genuinely semantic table cells (risk / exercise green-amber-red) are kept.
           ════════════════════════════════════════════════════════════════ */

        /* 2 - Cards: one neutral surface, hairline border, NO coloured accent.
           Kills the assorted light-blue / grey / off-white card borders. */
        .website-card, .calc-card, .guideline-card,
        .exercise-condition-card, .exercise-def-card, .ga-strategy-card,
        .criteria-section, .testing-criteria, .condition-category {
            background:var(--card) !important;
            border:1px solid var(--rule) !important;
            box-shadow:none !important;
            border-radius:6px !important;
        }
        /* card titles / links pick up the maroon accent, not stray blues */
        .website-card a, .calc-card a, .guideline-card a { color:var(--accent) !important; }

        /* Badges: collapse the blue / purple / green / red chip rainbow into one
           neutral blush+maroon chip (the text already says what it is). */
        .gene-badge, .calc-tag, .gv-badge {
            background:var(--surface) !important;
            color:var(--accent) !important;
            border:1px solid var(--rule) !important;
        }

        /* 1 - Note paragraphs with an inline background → unify to blush callout */
        #condition-detail p[style*="background"], .tab-content p[style*="background"] {
            background:var(--surface) !important;
            border:1px solid var(--cl-bd) !important;
            border-radius:5px !important;
        }

        /* ════════════════════════════════════════════════════════════════
           PREGNANCY section - collapsible + clearly delineated phases
           ════════════════════════════════════════════════════════════════ */

        /* Phase subheadings (PRECONCEPTION / PREGNANCY MANAGEMENT / LABOUR &
           DELIVERY / POSTPARTUM) - lift out of body text, divide each phase. */
        #detail-pregnancy .info-box-content > p { margin:0 !important; }
        #detail-pregnancy .info-box-content > p > strong {
            display:block !important;
            font-size:1rem !important;
            font-weight:700 !important;
            color:var(--accent) !important;
            letter-spacing:0.03em !important;
            margin-top:1.4rem !important;
            padding-top:0.9rem !important;
            border-top:1px solid var(--cl-bd) !important;
        }
        #detail-pregnancy .info-box-content > p:first-of-type > strong {
            margin-top:0.2rem !important; padding-top:0 !important; border-top:none !important;
        }
        /* keep the sub-labels (li > strong) clearly BELOW phase headings:
           body size, dark ink, not maroon - so the levels don't compete */
        #detail-pregnancy li > strong:first-child { color:var(--ink) !important; font-weight:700 !important; }
        /* a little breathing room under each phase heading before its list */
        #detail-pregnancy .info-box-content > p > strong + * { margin-top:0.5rem !important; }

        /* ── Tab-page titles: breathing room below the top nav ────────────── */
        .page-sticky-header { padding-top:1.1rem !important; margin-top:0 !important; }
        .page-title { margin-top:0 !important; }

        /* ── Remove hover highlight on tables (keep zebra / semantic bg) ───── */
        .data-table tbody tr:hover { background:transparent !important; }
        .data-table tbody tr:nth-child(even):hover { background:var(--surface) !important; }
        .gv-table tbody tr:hover { background:transparent !important; }

        /* ── Drug Safety table: risk-ordered rows, BLACK text, colour highlight
              (coloured font had poor contrast - use cell highlighting instead) ── */
        .drug-safety-table tr.ds-safe    > td { background:#e6f3ea !important; }
        .drug-safety-table tr.ds-caution > td { background:#f8efd8 !important; }
        .drug-safety-table tr.ds-avoid   > td { background:#f4e3e3 !important; }
        .drug-safety-table td,
        .drug-safety-table .risk-std,
        .drug-safety-table .risk-mod,
        .drug-safety-table .risk-high { color:var(--ink) !important; }

        /* ════════════════════════════════════════════════════════════════
           BATCH UI IMPROVEMENTS
           ════════════════════════════════════════════════════════════════ */

        /* 3 - Cap reading measure on tab pages too (tables stay full width) */
        .tab-content p, .tab-content li { max-width:var(--measure); }
        .tab-content td p, .tab-content td li,
        .data-table p, .gv-table p, .tab-content p.matrix-footnote { max-width:none; }

        /* 4 - Home category icons removed */
        .category-logo { display:none !important; }

        /* 6 - Tabular figures so numbers line up vertically in tables */
        .data-table td, .gv-table td, .drug-safety-table td,
        .exercise-matrix td, table td { font-variant-numeric:tabular-nums; }

        /* 7 - Link + focus states */
        #condition-detail a:not(.cite-link):not(.doi-link):not(.condition-submenu-item),
        .tab-content a.cross-link, .cross-link, .website-card a, .calc-card a {
            color:var(--accent); text-decoration:none;
        }
        #condition-detail a:not(.cite-link):not(.doi-link):not(.condition-submenu-item):hover,
        .cross-link:hover, .website-card a:hover, .calc-card a:hover { text-decoration:underline; }
        a:focus-visible, button:focus-visible, .nav-tab:focus-visible,
        .condition-submenu-item:focus-visible, .section-title:focus-visible,
        input:focus-visible, [role="button"]:focus-visible {
            outline:2px solid var(--accent) !important; outline-offset:2px !important; border-radius:3px;
        }


        /* 5 - PRINT: black-on-white, drop chrome */
        @media print {
            .nav-tabs, .header, .icc-footer, .back-button, .condition-submenu,
            .nav-search-wrapper, .skip-link, #back-to-top, .sub-tabs { display:none !important; }
            html, body, .container, .section, .tab-content { background:#fff !important; }
            * { color:#000 !important; box-shadow:none !important; }
            a { text-decoration:none !important; }
            .section, .info-box, .quick-summary, .website-card, .calc-card,
            tr, .data-table, .gv-table { page-break-inside:avoid; }
            .info-box, .quick-summary { border:1px solid #999 !important; background:#fff !important; }
            .data-table thead th, .gv-table thead th, .drug-safety-table thead th { background:#eee !important; color:#000 !important; }
            .drug-safety-table tr.ds-safe > td { background:#e6f3ea !important; }
            .drug-safety-table tr.ds-caution > td { background:#f8efd8 !important; }
            .drug-safety-table tr.ds-avoid > td { background:#f4e3e3 !important; }
            .condition-detail .section-content, .tab-content p, .tab-content li { max-width:none !important; }
        }

        /* ── Conditions hover dropdown (quick-nav without leaving the page) ── */
        .nav-conditions-menu {
            position:fixed; z-index:10000; display:none;
            background:var(--card); border:1px solid var(--rule); border-radius:8px;
            box-shadow:0 12px 34px rgba(0,0,0,0.14);
            padding:0.85rem 1rem; max-width:640px;
            column-count:2; column-gap:1.75rem;
        }
        .nav-conditions-menu.open { display:block; }
        .ncm-group { break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:0.6rem; }
        .ncm-group-title {
            font-size:0.82rem; text-transform:uppercase; letter-spacing:0.06em;
            color:var(--ink-soft); font-weight:700; padding:0.2rem 0.5rem; white-space:nowrap;
        }
        .ncm-item {
            display:block; padding:0.2rem 0.5rem; font-size:0.72rem;
            color:var(--ink); border-radius:4px; cursor:pointer; white-space:nowrap;
            text-decoration:none;
        }
        .ncm-item:hover { background:var(--surface); color:var(--accent); }
        /* Sub-tab quick-jump menus (Genetic Testing, Pregnancy): same format, single column */
        .nav-subtab-menu { column-count:1; }
        /* Mobile: disable the nav-tab hover/tap dropdowns entirely (no hover on touch; tapping
           a tab navigates directly, and the conditions grid / sub-tab buttons are the browse UI).
           Covers the Conditions menu and the Genetic Testing / Pregnancy sub-tab quick-jump menus. */
        @media(max-width:640px){
            .nav-conditions-menu { display:none !important; }
        }

        /* ── Useful Websites: retint calculator cyan → maroon; no hover effects ── */
        #websites .calc-section { border-left:none !important; padding-left:0 !important; }
        #websites .calc-section .category-label {
            color:var(--accent) !important; border-bottom-color:rgba(155,28,37,0.25) !important;
        }
        #websites .website-card.calc-card { border-left-color:var(--rule) !important; }
        /* external calc cards match the embedded HCM risk calculator grey (#fafbfc) */
        #websites .website-card.calc-card {
            background:var(--off-white) !important;
        }
        #websites .website-card:hover, #websites .calc-card:hover {
            border-color:var(--rule) !important; box-shadow:none !important;
            transform:none !important; background:var(--off-white) !important;
        }
        #websites a, #websites a:hover, #websites .website-card a:hover,
        #websites .calc-card a:hover { text-decoration:none !important; }
        /* link box: white text on a consistent maroon button (some had inline orange) */
        .website-link, #websites .website-link, #websites .website-card a.website-link {
            color:#fff !important; background-color:var(--accent) !important;
        }

        /* ── Guidelines: match Useful Websites buttons + fix type hierarchy ── */
        /* Button: white text on maroon, identical to .website-link
           (base rule + line ~2866 left it maroon-on-maroon → invisible label) */
        .guideline-link, #guidelines .guideline-link,
        #guidelines .guideline-card a.guideline-link {
            color:#fff !important; background-color:var(--accent) !important;
        }
        /* Hierarchy: page title (1.2) > category subheading (1.05) > guideline
           title (0.95) > org (0.78). The h3 guideline titles were being pulled
           up to 1.05rem maroon by the global h3 rule, making them larger than
           their own category subheading. */
        #guidelines .category-label {
            font-size:var(--fs-3) !important;
            color:var(--accent) !important;
            border-bottom-color:rgba(155,28,37,0.25) !important;
        }
        #guidelines .guideline-title {
            font-size:var(--fs-h4) !important;
            font-weight:600 !important;
            color:var(--ink) !important;
        }
        #guidelines .guideline-org {
            font-size:var(--fs-5) !important;
        }

        /* ── Nav tabs: never smaller than body text (was --fs-5 0.78rem) ── */
        .nav-tab { font-size:var(--fs-4) !important; }

        /* ════════════════════════════════════════════════════════════════
           REDESIGN v3 - MONOCHROME SIMPLIFICATION
           Off-white surfaces · BLACK + RED(maroon) text only · maroon
           headers/titles · pink featured boxes · no greys / no semantic
           cell colour · strict type hierarchy.
           ════════════════════════════════════════════════════════════════ */
        :root {
            /* text → black; greys eliminated */
            --ink:            #000000;
            --ink-soft:       #000000;
            --text-primary:   #000000;
            --text-secondary: #000000;
            --text-muted:     #000000;
            --text-light:     #000000;
            /* surfaces → pure white */
            --card:           #ffffff;
            /* strict 5-step scale: page > section > subsection > h4 > body > meta */
            --fs-1:1.6rem; --fs-2:1.25rem; --fs-3:1.05rem;
            --fs-h4:0.95rem; --fs-4:0.9rem; --fs-5:0.8rem;
        }

        /* 1 ─ Text: black everywhere except maroon titles/accents ─────────── */
        body, p, li, td, dt, dd, span, strong, em, b, i,
        h4, h5, h6, .section-content, .info-box-content,
        .guideline-org, .website-info p, .ref-list li, .ref-reviewed,
        .quick-summary li, figcaption, .figure-caption, .last-reviewed,
        .gv-gloss-cat dd, .meta, .data-table td, .gv-table td {
            color:#000 !important;
        }
        h1, h2, h3, .section-title, .condition-title, .page-title,
        .gv-gloss-cat-title, .category-label, .category-header,
        .guideline-title, a.cite-link, a.doi-link {
            color:var(--accent) !important;
        }
        .guideline-title { color:var(--ink) !important; } /* keep its sub-level ink */
        .risk-high { color:var(--accent) !important; }     /* red */
        .risk-mod, .risk-std, .risk-low { color:#000 !important; }
        /* any leftover inline-styled grey text → black (slate greys, any tag) */
        [style*="#64748b" i], [style*="#475569" i], [style*="#334155" i],
        [style*="#9ca3af" i], [style*="#6b7280" i], [style*="#4b5563" i],
        [style*="#94a3b8" i], [style*="#1e293b" i], [style*="#1f2937" i],
        [style*="#475467" i], [style*="#71717a" i], [style*="#5c5256" i] {
            color:#000 !important;
        }

        /* 2 ─ Tables: off-white cells, maroon header, no zebra / semantic tint ── */
        thead th, .data-table thead th, .gv-table thead th,
        .exercise-matrix thead th, .drug-safety-table thead th,
        #condition-detail thead th, .tab-content thead th {
            background:var(--accent) !important; color:#fff !important;
            border-color:rgba(255,255,255,0.2) !important;
            text-transform:none !important; letter-spacing:0 !important;
        }
        thead th *, .data-table thead th * { color:#fff !important; }
        #condition-detail table tbody tr, #condition-detail table tbody td,
        .tab-content table tbody tr,      .tab-content table tbody td,
        .data-table tbody tr, .data-table tbody td,
        .gv-table tbody tr,   .gv-table tbody td,
        .exercise-matrix tbody td,
        .data-table tbody tr:nth-child(even),
        .data-table tbody tr:hover, .gv-table tbody tr:hover,
        .data-table tbody tr:nth-child(even):hover,
        .drug-safety-table tr > td,
        .drug-safety-table tr.ds-safe > td,
        .drug-safety-table tr.ds-caution > td,
        .drug-safety-table tr.ds-avoid > td {
            background:var(--page) !important;
        }
        .gv-group-header td {
            background:var(--page) !important; color:var(--accent) !important;
            font-weight:800 !important;
            border-top-color:var(--accent) !important; border-bottom-color:var(--accent) !important;
        }

        /* 3 ─ Featured boxes (info / quick-summary / classifications / do-not):
              maroon header bar + pink body ─────────────────────────────────── */
        .info-box, .quick-summary,
        .section-donot-box, #section-donot .info-box {
            background:var(--surface) !important;   /* pink */
            border:1px solid var(--cl-bd) !important;
            border-left:1px solid var(--cl-bd) !important;
            border-radius:6px !important; overflow:hidden !important;
            padding:0 !important; box-shadow:none !important;
        }
        .info-box-title, .quick-summary-title,
        .section-donot-box .info-box-title, #section-donot .info-box-title {
            background:var(--accent) !important; color:#fff !important;
            margin:0 !important; padding:0.5rem 0.95rem !important;
            font-size:var(--fs-h4) !important; font-weight:700 !important;
            text-transform:none !important; letter-spacing:0 !important; border:none !important;
        }
        .info-box-title *, .quick-summary-title * { color:#fff !important; }
        .info-box .info-box-content { padding:0.85rem 0.95rem !important; }
        .info-box > p, .info-box > ul, .info-box > ol {
            margin:0 !important; padding:0.85rem 0.95rem 0.85rem 1.85rem !important;
        }
        .quick-summary > ul { margin:0 !important; padding:0.85rem 0.95rem 0.85rem 1.9rem !important; }
        .quick-summary > p  { margin:0 !important; padding:0.5rem 0.95rem !important; }
        .info-box-content > *:last-child, .quick-summary > ul > li:last-child { margin-bottom:0 !important; }
        /* One-line classic definition at the top of a Quick Summary */
        .quick-summary > p.qs-definition {
            font-size:0.95rem !important; line-height:1.5 !important;
            color:var(--ink) !important;
            padding:0.7rem 0.95rem 0.65rem !important;
            border-bottom:1px solid rgba(155,28,37,0.2) !important;
        }
        .quick-summary > p.qs-definition strong { color:var(--ink) !important; font-weight:700 !important; }

        /* 4 ─ Kill remaining category colour-coding → maroon (only black + red).
              --cat drives the card + header left rules; retint it. */
        .cardiomyopathies, .channelopathies, .metabolic,
        .aortopathies, .neuromuscular { --cat:var(--accent) !important; }
        .condition-category, .condition-category .category-header {
            border-left-color:var(--accent) !important;
        }

        /* 5 ─ Footer is an inverted maroon region - keep its text legible (light) */
        .icc-footer, .icc-footer p, .icc-footer span, .icc-footer div,
        .icc-footer a, .icc-footer strong { color:rgba(255,255,255,0.85) !important; }

        /* ════════════════════════════════════════════════════════════════
           FONT SYSTEM - Inter (UI / content) + IBM Plex Mono (measurements)
             Logo / headings → Inter SemiBold 600 · Body → Inter 400
             Tables → Inter · Drug doses → Inter Medium 500 (.dose)
             ECG/CMR measurement boxes → IBM Plex Mono (.measure-box / .mono)
           ════════════════════════════════════════════════════════════════ */
        body, input, select, textarea, button,
        table, td, th, .data-table, .gv-table, .drug-safety-table,
        .data-table td, .gv-table td, p, li, dd, dt, .section-content {
            font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
        }
        body, p, li, td, dd, dt, .section-content { font-weight:400 !important; }

        /* Logo + all headings → Inter SemiBold */
        .header h1,
        h1, h2, h3, h4, h5, h6,
        .condition-title, .page-title, .section-title, .collapsible-title,
        .info-box-title, .quick-summary-title, .category-header, .category-label,
        .guideline-title, .gv-gloss-cat-title, .nav-tab {
            font-family:'Inter', system-ui, sans-serif !important;
            font-weight:600 !important;
        }

        /* Drug doses → Inter Medium */
        .dose {
            font-family:'Inter', system-ui, sans-serif !important;
            font-weight:500 !important;
            font-variant-numeric:tabular-nums;
        }

        /* ECG / CMR measurement values → IBM Plex Mono (use sparingly) */
        .mono, .measure, .measure-box {
            font-family:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace !important;
            font-weight:400 !important;
            font-variant-numeric:tabular-nums;
        }
        .measure-box {
            display:inline-block;
            padding:0.04rem 0.42rem;
            font-size:0.88em;
            line-height:1.5;
            color:var(--ink);
            background:var(--page);
            border:1px solid var(--rule);
            border-radius:4px;
        }

        /* ── Calculator cards: collapse description to first line by default ── */
        .calc-card.calc-collapsed .website-info p {
            display:-webkit-box; -webkit-box-orient:vertical;
            -webkit-line-clamp:1; line-clamp:1; overflow:hidden;
        }
        .calc-more {
            display:inline-block; margin-top:0.35rem;
            position:relative; z-index:2;           /* above the stretched-link overlay */
            font-family:'Inter', sans-serif; font-size:0.8rem; font-weight:600;
            color:var(--accent); background:none; border:none; padding:0; cursor:pointer;
        }
        .calc-more:hover { text-decoration:underline; }

        /* ── Hierarchy fixes ──────────────────────────────────────────────
           • condition / page submenu must read LARGER than body text
           • home category title must clearly dominate its condition items  */
        .condition-submenu-item, .page-submenu-item {
            font-size:1rem !important;        /* > body (0.9rem) */
            font-weight:500 !important;
        }
        .category-header {
            font-size:1.15rem !important;     /* clearly > condition items */
            font-weight:600 !important;
            letter-spacing:0 !important;
        }
        .condition-item { font-size:0.9rem !important; }  /* = body, < category title */

        /* ── Gene Panels: drop redundant outer box + group headings ── */
        #testing-eligibility .testing-criteria {
            background:transparent !important; border:none !important;
            box-shadow:none !important; padding:0 !important; border-radius:0 !important;
        }
        .gt-group {
            font-size:0.95rem !important; font-weight:700 !important;
            text-transform:uppercase; letter-spacing:0.05em;
            color:var(--accent) !important; margin:1.75rem 0 0.75rem;
            padding-bottom:0.3rem; border-bottom:1px solid var(--rule);
        }
        .gt-group.gt-group-first { margin-top:0.5rem; }
        /* Distinct panel reference codes (R131 etc.) as a badge on the maroon header */
        .collapsible-title .panel-code {
            display:inline-block; background:#fff; color:var(--accent) !important;
            font-weight:700; font-size:0.8em; letter-spacing:0.02em;
            padding:0.05rem 0.5rem; border-radius:4px; margin-right:0.6rem;
        }

        /* ── Gene symbol links in condition pages → gene variant table ── */
        .gene-link {
            color:var(--accent) !important; cursor:pointer;
            text-decoration:none !important;
            border-bottom:1px dotted var(--accent);
        }
        .gene-link:hover { border-bottom-style:solid; background:var(--surface); }
        #gv-tbody tr.gv-flash > td { background:#fde68a !important; transition:background 0.4s ease; }

        /* ── Gene Variants: grey key-point highlight inside cell text ── */
        .kp { background:#e4e4e4 !important; border-radius:2px;
              padding:0.02em 0.22em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

        /* ── Re-enable colour-coding on two specific tables (rest stay mono) ──
           Exercise Recommendation Matrix + Cardiac Drug Safety in Pregnancy   */
        .exercise-matrix td.permitted {
            background-color:#e6f3ea !important; color:#065f46 !important; font-weight:600 !important;
        }
        .exercise-matrix td.restricted {
            background-color:#f8efd8 !important; color:#92400e !important; font-weight:600 !important;
        }
        .exercise-matrix td.contraindicated {
            background-color:#f4e3e3 !important; color:#991b1b !important; font-weight:600 !important;
        }
        #pregnancy-tab .drug-safety-table tr.ds-safe    > td { background-color:#e6f3ea !important; }
        #pregnancy-tab .drug-safety-table tr.ds-caution > td { background-color:#f8efd8 !important; }
        #pregnancy-tab .drug-safety-table tr.ds-avoid   > td { background-color:#f4e3e3 !important; }
        /* Driving rules matrix: soft, muted traffic-light cells */
        .driving-matrix td.dr-ok      { background-color:#e6f3ea !important; }
        .driving-matrix td.dr-caution { background-color:#f8efd8 !important; }
        .driving-matrix td.dr-no      { background-color:#f4e3e3 !important; }
        .driving-matrix thead th { padding:0.85rem 1rem !important; }
        .driving-matrix td       { padding:0.85rem 1rem !important; vertical-align:top; line-height:1.55 !important; }
        .driving-matrix td small { display:block; margin-top:0.5rem; font-size:0.92em; line-height:1.5; color:#475569 !important; opacity:1; }
        .driving-matrix td small span { color:#334155 !important; }

        /* 2 - RESPONSIVE / MOBILE pass */
        @media (max-width: 768px) {
            /* Layout */
            .container { padding-left:1rem !important; padding-right:1rem !important; }
            .conditions-grid { grid-template-columns:1fr !important; gap:1rem !important; }

            /* Typography */
            .condition-title { font-size:1.2rem !important; }
            .header h1 { font-size:1.9rem !important; }
            .header p { font-size:0.8rem !important; }
            .page-title { font-size:1.3rem !important; }
            .section-title { font-size:1rem !important; }
            h2 { font-size:1.1rem !important; }
            h3 { font-size:0.95rem !important; }
            body, p, li, td { font-size:0.875rem !important; }

            /* Nav - compact tabs, horizontal scroll, hide kbd hint */
            .nav-tabs { height:auto !important; }
            .nav-tabs-container { padding:0 0.5rem !important; overflow-x:auto !important;
                -webkit-overflow-scrolling:touch; scrollbar-width:none; }
            .nav-tabs-container::-webkit-scrollbar { display:none; }
            .nav-tab { padding:0.7rem 0.9rem !important; font-size:0.86rem !important;
                letter-spacing:0.01em !important; }
            .nav-search-kbd { display:none !important; }
            .nav-search-input { width:100px !important; }
            .nav-search-input:focus { width:130px !important; }

            /* Full-width content blocks */
            .condition-detail .section-content, .condition-detail .section-title,
            .condition-detail .quick-summary, .condition-detail .info-box,
            .tab-content p, .tab-content li { max-width:100% !important; }

            /* Section submenu - horizontal scroll */
            .condition-submenu { overflow-x:auto !important; flex-wrap:nowrap !important;
                -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
            .condition-submenu::-webkit-scrollbar { display:none; }
            .condition-submenu-item { white-space:nowrap !important;
                font-size:0.78rem !important; padding:0.35rem 0.6rem !important; }

            /* Tables scroll horizontally */
            .section, .info-box-content, .gv-table-wrap { overflow-x:auto !important;
                -webkit-overflow-scrolling:touch; }
            .data-table, .gv-table, .drug-safety-table, .exercise-matrix table,
            .tab-content table:not(.exercise-matrix) { min-width:560px !important; }

            /* Calculator grid → single column */
            .hcm-calc-grid { grid-template-columns:1fr !important; }

            /* GV filter bar stacks */
            .gv-filter-group { flex-direction:column !important; align-items:flex-start !important; }

            /* Driving / exercise matrix: smaller text in cells */
            .driving-matrix td, .driving-matrix th,
            .exercise-matrix td, .exercise-matrix th { font-size:0.75rem !important;
                padding:0.5rem 0.6rem !important; }

            /* Website / calc cards: stack on mobile */
            .website-card, .calc-card { flex-direction:column !important;
                align-items:flex-start !important; gap:0.6rem !important; }

            /* Panel codes: wrap on small screens */
            .collapsible-title { font-size:0.88rem !important; }

            /* Back button touch target */
            .back-button { padding:0.55rem 1rem !important; font-size:0.82rem !important; }

            /* Info boxes: tighter padding */
            .info-box-content { padding:0.75rem 0.9rem !important; }
        }

        @media (max-width: 480px) {
            .header-content { padding:0.6rem 1rem !important; }
            .header p { display:none !important; }   /* hide subtitle on very small screens */
            .nav-tab { padding:0.6rem 0.7rem !important; font-size:0.8rem !important; }
            .nav-search-wrapper { display:none !important; }  /* hide search on tiny screens */
            .condition-title { font-size:1.05rem !important; }
            .conditions-grid { gap:0.75rem !important; }
            .category-header { font-size:0.95rem !important; }
            .condition-item { font-size:0.82rem !important; padding:0.45rem 0.75rem !important; }
            .data-table, .gv-table, .drug-safety-table,
            .exercise-matrix table, .tab-content table { min-width:480px !important; }
        }

        /* Restore horizontal scroll on mobile. The global ".data-table { overflow:hidden }"
           rule (used to clip rounded corners) otherwise clips off-screen columns on narrow
           viewports with no way to reach them. Placed last so it wins the cascade. */
        @media (max-width: 640px) {
            .data-table, .gv-table, .drug-safety-table,
            .exercise-matrix table, .tab-content table:not(.exercise-matrix) {
                display:block !important;
                overflow-x:auto !important;
                -webkit-overflow-scrolling:touch;
            }
        }