:root {
            /* Sophont default light theme (body.theme-light in sophont.med styles.css) */
            --bg: #F8F5FA;
            --bg-raised: #EAEAF3;
            --bg-raised-hover: #dfdfec;
            --bg-panel: #ffffff;
            --fg: #08082a;
            --fg-soft: #3a4468;
            --fg-mute: #7a84aa;
            --rule: rgba(8, 8, 42, 0.07);
            --rule-strong: rgba(8, 8, 42, 0.16);
            --electric: #2233bb;
            --electric-soft: rgba(34, 51, 187, 0.10);
            /* Quiet-neutral header fill: bg-raised nudged toward the panel white
               so the header reads as chrome, not a tinted surface */
            --thead-bg: color-mix(in oklab, var(--bg-raised) 45%, var(--bg-panel));
            /* Sophont accent — sophont.med :root --magenta; soft lilac that stays
               in the lavender family (their mint reads green against this page).
               Used only by the footer wash. */
            --lilac: #cc88ff;
            --logo-filter: none;
            --font-display: 'Manrope', system-ui, sans-serif;
            --font-body: 'Manrope', system-ui, sans-serif;
            --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
            --ease: cubic-bezier(.2, .7, .1, 1);
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-body);
            background: var(--bg);
            color: var(--fg-soft);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }

        a {
            color: inherit;
        }

        /* ---------- Nav ---------- */
        .nav {
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            row-gap: 0.75rem;
            gap: 1rem;
            padding: 1.1rem clamp(1rem, 4vw, 2.5rem);
            background: rgba(248, 245, 250, 0.94);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid var(--rule);
        }

        .nav-brands {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .nav-brand {
            display: flex;
            align-items: center;
            text-decoration: none;
        }

        .nav-brand img {
            display: block;
            height: 34px;
            width: auto;
            filter: var(--logo-filter);
            transition: opacity 0.2s var(--ease);
        }

        .nav-brand:hover img {
            opacity: 0.72;
        }

        /* MedARC wordmark fills its image; Sophont's has padding — size down so cap heights match */
        .nav-brand img[alt="MedARC"] {
            height: 26px;
        }

        .nav-brand-divider {
            width: 1px;
            height: 22px;
            background: var(--rule-strong);
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: clamp(1rem, 2.5vw, 1.75rem);
            font-family: var(--font-mono);
            font-size: 13px;
            font-weight: 400;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--fg-soft);
        }

        .nav-links a {
            position: relative;
            text-decoration: none;
            transition: color 0.2s var(--ease);
        }

        .nav-links a:hover {
            color: var(--fg);
        }

        .nav-links a:hover::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 100%;
            height: 1px;
            background: var(--electric);
        }

        /* ---------- Hero ---------- */
        .hero {
            position: relative;
            overflow: hidden;
            text-align: center;
            padding: 2.5rem clamp(1rem, 4vw, 2.5rem) 2rem;
        }

        /* Soft electric wash behind the hero title — sophont.med's .hero-c
           .artifact radial (color-mix electric 30% → transparent 70%), toned
           down with their light-theme orb treatment (opacity .14, blur 64px) */
        .hero::before {
            content: '';
            position: absolute;
            inset: -40% -10%;
            background: radial-gradient(ellipse at 50% 45%, color-mix(in oklab, var(--electric) 30%, transparent), transparent 70%);
            opacity: 0.14;
            filter: blur(64px);
            pointer-events: none;
            z-index: 0;
        }

        .hero > * {
            position: relative;
            z-index: 1;
        }

        /* Ambient edge glow — sophont.med's .ambient .orb-* radial washes,
           light-theme colorway (#c0dcff / #e0d8f0, opacity .14, blur 64px),
           made static: no drift animation. */
        /* Page-wide ambient layer — sophont.med's .ambient, static (no float animation) */
        .ambient {
            position: fixed;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
            /* Pull the wash back to the hero: fade the whole ambient layer out
               before it reaches the table so indigo stays off the data chrome */
            mask-image: linear-gradient(to bottom, black 0, black 420px, transparent 950px);
            -webkit-mask-image: linear-gradient(to bottom, black 0, black 420px, transparent 950px);
        }

        /* Faint grid — sophont.med's .ambient .grid at their light-theme opacity */
        .ambient .grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(var(--rule) 1px, transparent 1px),
                linear-gradient(90deg, var(--rule) 1px, transparent 1px);
            background-size: 80px 80px;
            mask-image: radial-gradient(circle at 50% 40%, black 30%, transparent 75%);
            -webkit-mask-image: radial-gradient(circle at 50% 40%, black 30%, transparent 75%);
            opacity: 0.25;
        }

        .ambient .orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(64px);
            opacity: 0.14;
        }

        .ambient .orb-1 {
            width: 700px;
            height: 700px;
            background: radial-gradient(circle, #c0dcff 0%, transparent 60%);
            top: -15%;
            left: -15%;
        }

        .ambient .orb-2 {
            width: 900px;
            height: 900px;
            background: radial-gradient(circle, #e0d8f0 0%, transparent 55%);
            top: 25%;
            right: -25%;
        }

        .ambient .orb-3 {
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, #c0dcff 0%, transparent 60%);
            bottom: -15%;
            left: 25%;
        }

        /* keep page content above the fixed ambient layer */
        .container,
        .site-footer {
            position: relative;
            z-index: 1;
        }

        /* Kicker pill — values from sophont.med .hero-kicker / .hero-d-kicker */
        .hero-kicker {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 7px 14px;
            border: 1px solid rgba(8, 8, 42, 0.16);
            border-radius: 999px;
            background: rgba(248, 245, 250, 0.78);
            /* Glass — sophont.med .hero-d-kicker (bg 78% + blur 6px) */
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            color: var(--fg-soft);
            font-family: var(--font-mono);
            font-size: 11px;
            font-weight: 400;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            margin-bottom: 22px;
        }

        .hero-kicker-sep {
            color: var(--fg-mute);
        }

        /* Title — values from sophont.med .hero-c-title */
        .hero-title {
            font-family: var(--font-display);
            font-weight: 400;
            font-size: clamp(38px, 4.9vw, 68px);
            line-height: 1.05;
            letter-spacing: -0.025em;
            color: var(--fg);
            margin: 0 auto 26px;
            max-width: 24ch;
            text-wrap: balance;
        }

        .hero-title .accent {
            color: var(--electric);
        }

        .hero-buttons {
            display: flex;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        /* Buttons — sophont.med .btn pills, sized down for this page */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 999px;
            font-family: var(--font-mono);
            font-size: 12px;
            font-weight: 400;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            text-decoration: none;
            transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
        }

        .btn-primary {
            border: 1.5px solid transparent;
            background: var(--electric);
            color: #ffffff;
            box-shadow: 0 0 0 0 rgba(34, 51, 187, 0.4);
        }

        .btn-primary:hover {
            box-shadow: 0 0 0 8px rgba(34, 51, 187, 0.2);
            transform: translateY(-1px);
        }

        .btn-ghost {
            border: 1.5px solid var(--rule-strong);
            color: var(--fg);
            box-shadow: 0 0 0 0 rgba(34, 51, 187, 0.4);
        }

        .btn-ghost:hover {
            border-color: var(--electric);
            background: var(--electric);
            color: #ffffff;
            box-shadow: 0 0 0 8px rgba(34, 51, 187, 0.2);
            transform: translateY(-1px);
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        /* ---------- Section labels (News / Acknowledgements) ---------- */
        .section-label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: var(--font-mono);
            font-size: 0.72rem;
            font-weight: 500;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--fg-mute);
            margin-bottom: 0.85rem;
        }

        .section-label::before {
            content: '';
            width: 22px;
            height: 1px;
            background: var(--electric);
        }

        .section-title {
            font-family: var(--font-display);
            font-size: 2rem;
            font-weight: 700;
            color: var(--fg);
            margin-bottom: 0.5rem;
        }

        .rule {
            height: 1px;
            background: var(--rule-strong);
            margin-bottom: 1.5rem;
            border: 0;
        }

        /* ---------- Tabs ---------- */
        .tabs {
            display: flex;
            gap: 0;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid var(--rule-strong);
        }

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

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

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

        /* Glass pill groups — sophont.med .hero-d-kicker recipe:
           translucent bg (color-mix bg 78%) + blur(6px) + fg-16% hairline */
        /* View toggle + model/configuration count share one row; the count
           sits at the right edge, above the table's Win Rate column */
        .view-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
        }

        .view-toggle {
            display: flex;
            gap: 0.5rem;
            padding: 0.25rem;
            background: var(--bg-raised);
            background: color-mix(in oklab, var(--bg) 78%, transparent);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border: 1px solid var(--rule-strong);
            border-color: color-mix(in oklab, var(--fg) 16%, transparent);
            border-radius: 999px;
            width: fit-content;
        }

        .view-btn {
            padding: 0.5rem 1.1rem;
            background: none;
            border: none;
            font-family: var(--font-mono);
            font-size: 0.72rem;
            font-weight: 500;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--fg-mute);
            cursor: pointer;
            border-radius: 999px;
            transition: all 0.2s var(--ease);
        }

        .view-btn:hover {
            color: var(--fg);
        }

        .view-btn.active {
            background: #ffffff;
            color: var(--electric);
            box-shadow: 0 1px 4px rgba(8, 8, 42, 0.16);
        }

        .filters-container {
            display: flex;
            gap: 1.75rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .filter-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .filter-label {
            font-family: var(--font-mono);
            font-size: 0.72rem;
            font-weight: 500;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: var(--fg-soft);
        }

        .size-filters {
            display: flex;
            gap: 0.25rem;
            padding: 0.25rem;
            background: var(--bg-raised);
            background: color-mix(in oklab, var(--bg) 78%, transparent);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            border: 1px solid var(--rule-strong);
            border-color: color-mix(in oklab, var(--fg) 16%, transparent);
            border-radius: 999px;
        }

        .size-btn {
            padding: 0.4rem 0.85rem;
            background: none;
            border: none;
            font-family: var(--font-mono);
            font-size: 0.68rem;
            font-weight: 500;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: var(--fg-mute);
            cursor: pointer;
            border-radius: 999px;
            transition: all 0.2s var(--ease);
        }

        .size-btn:hover {
            color: var(--fg);
        }

        .size-btn.active {
            background: #ffffff;
            color: var(--electric);
            box-shadow: 0 1px 4px rgba(8, 8, 42, 0.16);
        }

        .search-box {
            position: relative;
            flex: 1;
            min-width: 200px;
            max-width: 300px;
        }

        .search-box input {
            width: 100%;
            padding: 0.5rem 0.75rem 0.5rem 2.25rem;
            border: 1px solid var(--rule-strong);
            border-radius: 999px;
            font-family: var(--font-body);
            font-size: 0.85rem;
            /* Glass input — same kicker recipe over the white panel tone */
            background: #ffffff;
            background: color-mix(in oklab, var(--bg-panel) 78%, transparent);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            color: var(--fg);
            transition: all 0.2s var(--ease);
        }

        .search-box input::placeholder {
            color: var(--fg-mute);
        }

        .search-box input:focus {
            outline: none;
            border-color: var(--electric);
            /* Focus ring — sophont.med form-field focus (electric 14%) */
            box-shadow: 0 0 0 3px var(--electric-soft);
            box-shadow: 0 0 0 3px color-mix(in oklab, var(--electric) 14%, transparent);
        }

        .search-icon {
            position: absolute;
            left: 0.85rem;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            color: var(--fg-mute);
            font-size: 0.85rem;
        }

        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }

        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--rule-strong);
            transition: 0.3s;
            border-radius: 24px;
        }

        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: white;
            transition: 0.3s;
            border-radius: 50%;
        }

        input:checked + .toggle-slider {
            background-color: var(--electric);
        }

        input:checked + .toggle-slider:before {
            transform: translateX(20px);
        }

        .filter-count {
            font-family: var(--font-mono);
            font-size: 0.7rem;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: var(--fg-soft);
            margin-left: auto;
        }

        .tab-content {
            display: none;
        }

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

        .view-content {
            display: none;
        }

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

        /* Panel — plain white chrome. Indigo is a state, not a surface, so the
           table sits on a neutral panel; the Sophont panel shadow stays.
           Plus their .journal-calendar-frame panel shadow. */
        .table-wrapper {
            background: var(--bg-panel);
            border: 1px solid var(--rule-strong);
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 28px 70px -52px rgba(8, 8, 42, 0.55);
        }

        /* Combined-view scatter: same panel chrome as the tables. The panel
           is width-capped and centered so the plot area stays square. */
        .chart-panel {
            background: var(--bg-panel);
            border: 1px solid var(--rule-strong);
            border-radius: 10px;
            box-shadow: 0 28px 70px -52px rgba(8, 8, 42, 0.55);
            padding: 1.25rem 1.5rem 1rem;
            max-width: 760px;
            margin: 0 auto;
        }

        /* Chart.js needs a positioned, size-bounded box to size the canvas;
           1:1 so both win-rate axes get the same visual scale and the parity
           line runs at 45 degrees */
        .chart-wrapper {
            position: relative;
            aspect-ratio: 1 / 1;
        }

        #combined .info {
            max-width: 760px;
            margin-left: auto;
            margin-right: auto;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        /* Header strip — quiet opaque neutral (chrome, not a tinted surface) */
        thead {
            background: var(--thead-bg);
            border-bottom: 1px solid var(--rule-strong);
        }

        th {
            padding: 0.85rem 1rem;
            text-align: left;
            font-family: var(--font-mono);
            font-weight: 500;
            font-size: 0.72rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--fg-soft);
            white-space: nowrap;
        }

        th:first-child {
            width: 60px;
        }

        /* Right-align numeric header labels (Win Rate + benchmark columns) */
        th.num-col {
            text-align: right;
        }

        th.sortable {
            cursor: pointer;
            user-select: none;
            transition: background 0.15s var(--ease);
        }

        th.sortable:hover {
            background: var(--electric-soft);
        }

        /* Sort arrow sits inline right after the header text (not absolutely
           positioned at the column's far edge) */
        th.sortable::after {
            content: '⇅';
            display: inline-block;
            margin-left: 0.4em;
            opacity: 0.4;
            font-size: 0.7em;
            color: var(--electric);
        }

        th.sortable.asc::after {
            content: '↑';
            opacity: 0.9;
        }

        th.sortable.desc::after {
            content: '↓';
            opacity: 0.9;
        }

        tbody tr {
            border-bottom: 1px solid var(--rule);
        }

        tbody tr:last-child {
            border-bottom: none;
        }

        tbody tr:hover {
            background: var(--electric-soft);
        }

        td {
            padding: 0.85rem 1rem;
            font-size: 0.9rem;
            color: var(--fg-soft);
        }

        /* Tighter rows on the overview table so more models fit (~30% less) */
        table:not(.detailed-table) td {
            padding: 0.58rem 1rem;
        }

        .rank {
            color: var(--fg-mute);
            font-weight: 600;
            font-family: var(--font-mono);
        }

        /* Rank badge — ranks 1-3 get a filled electric-blue rounded square */
        .rank-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 20px;
            font-family: var(--font-mono);
            font-weight: 600;
        }

        .rank-badge.rank-top {
            min-width: 22px;
            height: 22px;
            padding: 0 5px;
            background: var(--electric);
            color: #ffffff;
            border-radius: 6px;
            font-size: 0.75rem;
        }

        .model-name {
            color: var(--fg);
            font-weight: 600;
        }

        /* Overview tables use fixed column widths (Model flexes) so the
           Verified and Open-Ended tabs align identically instead of each
           auto-sizing to its own content */
        .overview-table {
            table-layout: fixed;
        }

        .overview-table th:first-child {
            width: 90px;
        }

        .overview-table th.col-dev {
            width: 170px;
        }

        .overview-table th.col-size {
            width: 120px;
        }

        .overview-table th.num-col {
            width: 200px;
        }

        .dev-cell {
            color: var(--fg-soft);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Size category pill — rectangle, hairline border, mono uppercase */
        .size-cell {
            text-align: left;
        }

        .size-pill {
            display: inline-block;
            padding: 2px 8px;
            border: 1px solid var(--rule-strong);
            border-radius: 5px;
            font-family: var(--font-mono);
            font-size: 0.64rem;
            font-weight: 500;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            line-height: 1.5;
            white-space: nowrap;
        }

        /* Both pill variants share one neutral chrome look */
        .size-pill-open,
        .size-pill-api {
            background: var(--bg-raised);
            border-color: var(--rule-strong);
            color: var(--fg-soft);
        }

        .score {
            text-align: right;
            font-variant-numeric: tabular-nums;
            font-family: var(--font-mono);
            color: var(--fg-soft);
        }

        /* Win-rate cell: right-aligned figure above a thin data-scaled bar */
        .wr-cell {
            text-align: right;
            white-space: nowrap;
        }

        .wr-num {
            display: block;
            font-family: var(--font-mono);
            font-variant-numeric: tabular-nums;
            font-weight: 500;
            color: var(--fg);
        }

        .wr-bar {
            display: block;
            width: 100%;
            max-width: 120px;
            height: 5px;
            margin: 4px 0 0 auto;
            border-radius: 2px;
            background: var(--rule);
            overflow: hidden;
        }

        .wr-bar-fill {
            display: block;
            height: 100%;
            border-radius: 2px;
            background: var(--electric);
        }

        .info {
            margin-top: 1.5rem;
            padding: 1rem;
            /* Callout strip — neutral raised surface with a small electric accent */
            background: var(--bg-raised);
            border-left: 3px solid var(--electric);
            border-radius: 0 8px 8px 0;
            font-size: 0.85rem;
            color: var(--fg-soft);
        }

        /* The detailed heatmap needs an exact white base (inline cell tints +
           opaque sticky columns), so it skips the diagonal panel wash */
        .detailed-table-wrapper {
            overflow-x: auto;
            background: var(--bg-panel);
        }

        .detailed-table {
            min-width: 100%;
        }

        /* Outer shell around the scrollable detailed wrapper: hosts the
           right-edge fade cue that appears when more columns exist off-screen */
        .detailed-table-shell {
            position: relative;
            border-radius: 10px;
        }

        .detailed-table-shell::after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 48px;
            background: linear-gradient(to right, transparent, var(--bg-panel));
            border-top-right-radius: inherit;
            border-bottom-right-radius: inherit;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.15s var(--ease);
        }

        .detailed-table-shell.has-more-right::after {
            opacity: 1;
        }

        /* Breathing room on the last column so digits don't clip at the edge */
        .detailed-table th:last-child,
        .detailed-table td:last-child {
            padding-right: 1.25rem;
        }

        /* Header and row rhythm match the overview table (same font sizes and
           vertical padding); only the horizontal padding stays compact so the
           many benchmark columns fit */
        .detailed-table th {
            white-space: nowrap;
            padding: 0.85rem 0.6rem;
            /* Opaque quiet-neutral fill, identical to the sticky Rank/Model
               headers so they occlude scrolled columns seamlessly */
            background: var(--thead-bg);
        }

        .detailed-table td {
            padding: 0.58rem 0.6rem;
        }

        /* Detailed sort arrows: hidden until the header is hovered or actively
           sorted, so they stop crowding the benchmark labels */
        .detailed-table th.sortable::after {
            opacity: 0;
            transition: opacity 0.15s var(--ease);
        }

        /* …except Rank and Model, which keep their arrows visible to match
           the overview table */
        .detailed-table th.sortable:nth-child(-n+2)::after {
            opacity: 0.4;
        }

        .detailed-table th.sortable:hover::after {
            opacity: 0.5;
        }

        .detailed-table th.sortable.asc::after,
        .detailed-table th.sortable.desc::after {
            opacity: 0.9;
        }

        /* Heatmap score cells — tint is set inline from JS on a white→blue scale */
        .detailed-table td.heat {
            color: var(--fg-soft);
        }

        /* Sticky Rank + Model columns.
           Rank column matches the overview table's 90px; Model column is
           offset by exactly that width so the two sticky columns meet with
           no gap. Both carry the overview's 1rem horizontal padding so the
           left edge of the table is identical across the two views. */
        .detailed-table th:nth-child(1),
        .detailed-table td:nth-child(1) {
            position: sticky;
            left: 0;
            width: 90px;
            min-width: 90px;
            max-width: 90px;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .detailed-table th:nth-child(2),
        .detailed-table td:nth-child(2) {
            position: sticky;
            left: 90px;
            min-width: 170px;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        /* Header sticky cells carry the same opaque vertical wash as the rest
           of the header row (so they occlude scrolled columns seamlessly);
           body sticky cells are white to match the rows */
        .detailed-table th:nth-child(1),
        .detailed-table th:nth-child(2) {
            background: var(--thead-bg);
            z-index: 3;
        }

        .detailed-table td:nth-child(1),
        .detailed-table td:nth-child(2) {
            background: var(--bg-panel);
            z-index: 2;
        }

        /* Hover: sticky cells pick up the same light-blue wash a hovered row
           gets (electric-soft composited over white) so they stay consistent */
        .detailed-table tbody tr:hover td:nth-child(1),
        .detailed-table tbody tr:hover td:nth-child(2) {
            background: #e9ebf8;
        }

        /* Right-edge scroll shadow on the sticky Model column, shown only while
           the wrapper is scrolled horizontally (class toggled from JS) */
        .detailed-table-wrapper.is-scrolled .detailed-table th:nth-child(2),
        .detailed-table-wrapper.is-scrolled .detailed-table td:nth-child(2) {
            box-shadow: 8px 0 10px -8px rgba(8, 8, 42, 0.28);
            clip-path: inset(0 -14px 0 0);
        }

        /* ---------- News / Acknowledgements ---------- */
        .news-list {
            list-style: disc;
            padding-left: 1.5rem;
            margin: 0;
        }

        .news-list li {
            font-size: 0.95rem;
            color: var(--fg-soft);
            padding: 0.3rem 0;
            line-height: 1.6;
        }

        .news-list a,
        .ack-text a {
            color: var(--electric);
            text-decoration: none;
        }

        .news-list a:hover,
        .ack-text a:hover {
            text-decoration: underline;
        }

        .ack-text {
            font-size: 0.95rem;
            color: var(--fg-soft);
            line-height: 1.8;
            margin: 0;
        }

        .ack-text.strong {
            margin-top: 0.75rem;
            font-weight: 700;
            color: var(--fg);
        }

        /* ---------- Footer ---------- */
        .site-footer {
            /* Faint diagonal wash — sophont.med .card.is-featured-project
               recipe (electric → base → lilac, 135deg) over the page bg */
            background: var(--bg);
            background: linear-gradient(135deg,
                color-mix(in oklab, var(--electric) 4%, var(--bg)) 0%,
                var(--bg) 60%,
                color-mix(in oklab, var(--lilac) 5%, var(--bg)) 100%);
            border-top: 1px solid var(--rule);
            padding: 2.5rem 1.5rem 2rem;
            margin-top: 4rem;
        }

        .footer-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr repeat(3, 1fr);
            gap: 1.75rem;
            font-size: 0.9rem;
            color: var(--fg-soft);
        }

        .footer-brand-logos {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 0.85rem;
        }

        .footer-brand-logos img {
            display: block;
            height: 28px;
            width: auto;
            filter: var(--logo-filter);
        }

        .footer-brand-logos img[alt="MedARC"] {
            height: 22px;
        }

        .footer-brand-divider {
            width: 1px;
            height: 20px;
            background: var(--rule-strong);
        }

        .footer-col strong {
            display: block;
            font-family: var(--font-mono);
            font-size: 0.7rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--fg-mute);
            margin-bottom: 0.6rem;
        }

        .footer-col a {
            display: block;
            color: var(--fg-soft);
            text-decoration: none;
            margin-bottom: 0.4rem;
            transition: color 0.2s var(--ease);
        }

        .footer-col a:hover {
            color: var(--electric);
        }

        .footer-meta {
            max-width: 1200px;
            margin: 1.5rem auto 0;
            padding-top: 1rem;
            border-top: 1px solid var(--rule-strong);
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: space-between;
            font-family: var(--font-mono);
            font-size: 0.7rem;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--fg-mute);
        }

        .footer-meta a {
            color: inherit;
            text-decoration: none;
        }

        .footer-meta a:hover {
            color: var(--electric);
        }

        @media (max-width: 768px) {
            .nav {
                padding: 0.9rem 1rem;
            }

            .nav-brand img {
                height: 26px;
            }

            .nav-brand img[alt="MedARC"] {
                height: 20px;
            }

            .hero {
                padding: 1.75rem 1rem 1.5rem;
            }

            .hero-title {
                font-size: clamp(26px, 8.4vw, 44px);
            }

            .btn {
                font-size: 11px;
                padding: 9px 15px;
            }

            .tab {
                padding: 0.6rem 1rem;
                font-size: 0.72rem;
            }

            th,
            td {
                padding: 0.7rem 0.5rem;
                font-size: 0.8rem;
            }

            table:not(.detailed-table) td {
                padding: 0.5rem 0.5rem;
            }

            .wr-bar {
                max-width: 90px;
            }

            .overview-table th:first-child {
                width: 72px;
            }

            .overview-table th.col-dev {
                width: 110px;
            }

            .overview-table th.col-size {
                width: 90px;
            }

            .overview-table th.num-col {
                width: 130px;
            }

            /* Keep the detailed table's shared anatomy in step with the
               overview at this breakpoint */
            .detailed-table th {
                padding: 0.7rem 0.5rem;
            }

            .detailed-table td {
                padding: 0.5rem 0.5rem;
            }

            .detailed-table th:nth-child(1),
            .detailed-table td:nth-child(1) {
                width: 72px;
                min-width: 72px;
                max-width: 72px;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }

            .detailed-table th:nth-child(2),
            .detailed-table td:nth-child(2) {
                left: 72px;
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 1.5rem;
            }
        }

        @media (max-width: 480px) {
            .nav-links {
                gap: 0.85rem;
                font-size: 11px;
            }

            /* Drop the Size and Developer columns on very narrow screens
               (cells stay in the DOM so column indexes and sorting are
               unaffected) */
            .col-size,
            .size-cell,
            .col-dev,
            .dev-cell {
                display: none;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }
        }