/*
 * PC Tech Vault child-theme styles.
 *
 * Covers GPU Wiki archives, cards, tables, comparison UI, homepage sections,
 * vendor color theming, and responsive layout details layered on top of Blocksy.
 */

/* Keep featured images aligned across desktop blog and category archive rows. */
@media (min-width: 768px) {
    .entries article .entry-title {
        min-height: 4em !important;
        line-height: 1.3;
    }

    .entries article .ct-media-container {
        margin-top: 0 !important;
    }
}

.entries article .entry-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.nc-articles-intro {
    width: min(1290px, calc(100% - 40px));
    margin: 0 auto 2rem;
    padding: 1.5rem 0 1.75rem;
    border-bottom: 1px solid #dfe6ec;
}

.nc-articles-intro h1 {
    max-width: 760px;
    margin: 0.25rem 0 0.75rem;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 1.08;
}

.nc-articles-intro > p:last-child {
    max-width: 780px;
    margin: 0;
    color: var(--nc-muted);
    font-size: 1.02rem;
    line-height: 1.65;
}

:root {
    --nc-bg: #0b0f14;
    --nc-surface: #121923;
    --nc-surface-2: #182230;
    --nc-text: #f4f7fb;
    --nc-text-dark: #102633;
    --nc-muted: #6a7785;
    --nc-border: #d9e1e8;
    --nc-green: #63b821;
    --nc-green-dark: #2d7d19;
    --nc-radius: 8px;
    --vendor-nvidia: #76B900;
    --vendor-nvidia-outline-light: #5F9400;
    --vendor-amd: #E2231A;
    --vendor-ati: #B00020;
    --vendor-ati-outline-dark: #D90429;
    --vendor-intel: #0071C5;
    --vendor-others: #7C3AED;
    --vendor-mixed: #64748B;
    --gpu-vendor-accent: var(--vendor-nvidia);
    --gpu-vendor-contrast: #071000;
}

.gpu-vendor-nvidia,
.gpu-card--vendor-nvidia,
.gpu-table-row--vendor-nvidia,
.nc-badge--vendor-nvidia {
    --gpu-vendor-accent: var(--vendor-nvidia);
    --gpu-vendor-contrast: #071000;
}

/* Vendor classes let PHP choose one semantic class while CSS supplies the palette. */
.gpu-vendor-amd,
.gpu-card--vendor-amd,
.gpu-table-row--vendor-amd,
.nc-badge--vendor-amd {
    --gpu-vendor-accent: var(--vendor-amd);
    --gpu-vendor-contrast: #fff;
}

.gpu-vendor-ati,
.gpu-card--vendor-ati,
.gpu-table-row--vendor-ati,
.nc-badge--vendor-ati {
    --gpu-vendor-accent: var(--vendor-ati);
    --gpu-vendor-contrast: #fff;
}

.gpu-vendor-intel,
.gpu-card--vendor-intel,
.gpu-table-row--vendor-intel,
.nc-badge--vendor-intel {
    --gpu-vendor-accent: var(--vendor-intel);
    --gpu-vendor-contrast: #fff;
}

.gpu-vendor-others,
.gpu-card--vendor-others,
.gpu-table-row--vendor-others,
.nc-badge--vendor-others {
    --gpu-vendor-accent: var(--vendor-others);
    --gpu-vendor-contrast: #fff;
}

.gpu-vendor-all,
.gpu-vendor-mixed,
.gpu-card--vendor-mixed,
.gpu-table-row--vendor-mixed,
.nc-badge--vendor-mixed {
    --gpu-vendor-accent: var(--vendor-mixed);
    --gpu-vendor-contrast: #fff;
}

body {
    line-height: 1.62;
}

body.page-id-6 .hero-section.is-width-constrained {
    display: none;
}

/* Shared hero shell used by article/category archive pages and GPU archive pages.
   .nc-archive-header's own padding now lives on its inner .nc-wrap in
   design-system.css; keeping padding here too would double it. */
.nc-hero,
.nc-archive-header {
    background: linear-gradient(180deg, var(--nc-bg), #101720);
    color: var(--nc-text);
}

.nc-hero {
    padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.nc-wrap {
    width: min(1220px, calc(100% - 2rem));
    margin: 0 auto;
}

.nc-hero h1,
.nc-archive-header h1 {
    margin: 0 0 0.75rem;
    color: var(--nc-text);
}

.nc-hero p,
.nc-archive-header p {
    max-width: 720px;
    color: #c7d0da;
    font-size: 1.1rem;
}

.nc-kicker {
    margin: 0 0 0.35rem;
    color: var(--nc-green);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.nc-gpu-wiki-page .nc-kicker {
    color: var(--gpu-vendor-accent);
}

.nc-actions,
.nc-badge-row,
.nc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.nc-home-compare-spotlight {
    background:
        linear-gradient(135deg, rgba(99, 184, 33, 0.16), transparent 38%),
        linear-gradient(180deg, #101720, #0b0f14);
    color: var(--nc-text);
    padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}

.nc-home-compare-spotlight__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1rem, 4vw, 2rem);
}

.nc-home-compare-spotlight h2 {
    margin: 0 0 0.55rem;
    color: #fff;
    font-size: clamp(1.55rem, 3vw, 2.35rem);
    line-height: 1.12;
}

.nc-home-compare-spotlight p {
    max-width: 760px;
    margin: 0;
    color: #c7d0da;
}

.nc-home-compare-spotlight__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.7rem;
}

.nc-nav-main-item > a,
.nc-compare-menu-item > a,
.ncmw-menu-item > a {
    min-height: 36px;
}

#header .nc-nav-main-item > a,
#offcanvas .nc-nav-main-item > a,
#header .nc-compare-menu-item > a,
#offcanvas .nc-compare-menu-item > a,
#header .ncmw-menu-item > a,
#offcanvas .ncmw-menu-item > a {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: uppercase;
    box-shadow: inset 0 -2px 0 transparent;
}

#header .nc-nav-main-item > a .ct-menu-link-text,
#offcanvas .nc-nav-main-item > a .ct-menu-link-text,
#header .nc-compare-menu-item > a .ct-menu-link-text,
#offcanvas .nc-compare-menu-item > a .ct-menu-link-text,
#header .ncmw-menu-item > a .ct-menu-link-text,
#offcanvas .ncmw-menu-item > a .ct-menu-link-text {
    display: inline-flex;
    align-items: center;
    min-height: 1.7em;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

#header .nc-nav-main-item--feature > a,
#offcanvas .nc-nav-main-item--feature > a {
    font-weight: 900;
}

/* Feature nav items rely on weight alone; permanent underlines read as stray
   active-tab indicators, so only real :hover/:focus and the current page get one. */
#header .nc-nav-main-item--primary > a:hover,
#header .nc-nav-main-item--primary > a:focus,
#header .nc-nav-main-item--compare > a:hover,
#header .nc-nav-main-item--compare > a:focus,
#header .nc-nav-main-item--market > a:hover,
#header .nc-nav-main-item--market > a:focus,
#header .current-menu-item > a {
    box-shadow: inset 0 -2px 0 var(--nc-green);
}

#header .nc-nav-main-item--community > a,
#offcanvas .nc-nav-main-item--community > a {
    font-weight: 800;
}

#header .nc-nav-main-item--home > a,
#offcanvas .nc-nav-main-item--home > a {
    opacity: 0.72;
}

#header .nc-nav-main-item > a:hover,
#header .nc-nav-main-item > a:focus,
#offcanvas .nc-nav-main-item > a:hover,
#offcanvas .nc-nav-main-item > a:focus {
    box-shadow: inset 0 -2px 0 currentColor;
}

.nc-gpu-hierarchy {
    margin-top: 1rem;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    background: #fff;
    color: var(--nc-text-dark);
}

.nc-gpu-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid var(--nc-border);
    font-size: 0.92rem;
}

.nc-gpu-breadcrumb span,
.nc-gpu-breadcrumb strong,
.nc-gpu-children span {
    color: var(--nc-muted);
}

.nc-gpu-children {
    padding: 0.9rem;
}

.nc-gpu-children h2 {
    margin: 0 0 0.55rem;
    font-size: 1rem;
}

.nc-gpu-children ul {
    margin: 0;
    padding-left: 1.1rem;
}

.nc-gpu-children li {
    margin: 0.3rem 0;
}

.nc-gpu-children p {
    margin: 0;
    color: var(--nc-muted);
}

.nc-gpu-children span {
    font-size: 0.86rem;
}

.nc-archive-header form[role="search"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    max-width: 780px;
    margin-top: 1.5rem;
}

.nc-archive-header form[role="search"] label {
    display: block;
}

.nc-archive-header input[type="search"] {
    width: 100%;
    min-height: 46px;
    border: 1px solid #697789;
    border-radius: 6px;
    background: #0f1620;
    color: var(--nc-text);
    caret-color: var(--gpu-vendor-accent, var(--nc-green));
    padding: 0.7rem 0.9rem;
    font: inherit;
}

.nc-archive-header input[type="search"]::placeholder {
    color: #a8b4c2;
    opacity: 1;
}

.nc-archive-header input[type="search"]:focus {
    border-color: var(--gpu-vendor-accent, var(--nc-green));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gpu-vendor-accent, var(--nc-green)) 28%, transparent);
    outline: none;
}

.nc-archive-header form[role="search"] button {
    min-height: 46px;
    border: 1px solid var(--gpu-vendor-accent, var(--nc-green));
    border-radius: 6px;
    background: var(--gpu-vendor-accent, var(--nc-green));
    color: var(--gpu-vendor-contrast, #061107);
    padding: 0.7rem 1.05rem;
    font: inherit;
    font-weight: 700;
}

.nc-button,
.nc-correction-box a,
.nc-correction-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--nc-green);
    background: var(--nc-green);
    color: #061107;
    padding: 0.7rem 1rem;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
}

.nc-button.secondary {
    background: transparent;
    color: var(--nc-text);
}

.nc-section {
    padding: clamp(2rem, 4vw, 3.5rem) 0;
}

#gpu-results {
    scroll-margin-top: 120px;
}

#gpu-results:focus {
    outline: none;
}

#gpu-results.is-loading {
    opacity: 0.62;
    pointer-events: none;
    transition: opacity 0.16s ease;
}

.nc-gpu-entry {
    line-height: 1.65;
}

.nc-section h2 {
    margin-top: 0;
}

.nc-gpu-layout {
    display: block;
}

.nc-gpu-layout-series {
    display: block;
    max-width: 820px;
}

.nc-gpu-header .nc-at-a-glance {
    margin-top: 0.85rem;
}

.nc-gpu-header .nc-section-nav {
    margin-bottom: 0;
}

.nc-gpu-header + .nc-gpu-layout {
    margin-top: 1rem;
}

.nc-gpu-main {
    --nc-gpu-sidebar-width: min(360px, 38%);
    --nc-gpu-sidebar-gap: clamp(1.5rem, 4vw, 3rem);
    display: flow-root;
}

.nc-gpu-layout-has-sidebar .nc-gpu-main-intro,
.nc-gpu-layout-has-sidebar .nc-gpu-main-notes,
.nc-gpu-layout-has-sidebar .nc-gpu-main-after-specs {
    width: calc(100% - var(--nc-gpu-sidebar-width) - var(--nc-gpu-sidebar-gap));
}

.nc-gpu-sidebar {
    float: right;
    width: var(--nc-gpu-sidebar-width);
    margin: 0 0 1.5rem var(--nc-gpu-sidebar-gap);
    position: sticky;
    top: 1.5rem;
}

/* The specification card and the first card of the main column start on the
   same line. The main blocks carry no padding of their own, so a top margin on
   whatever leads them collapses out of the wrapper and takes the whole column
   down with it, leaving the two columns a margin apart. An empty notes wrapper
   is removed for the same reason: it would otherwise donate its child's margin
   to the column even with nothing in it. */
.nc-gpu-layout-has-sidebar .nc-gpu-main-notes:empty {
    display: none;
}

.nc-gpu-layout-has-sidebar .nc-gpu-main-notes > :first-child,
.nc-gpu-layout-has-sidebar .nc-gpu-main-after-specs > :first-child {
    margin-top: 0;
}

.nc-badge {
    display: inline-flex;
    background: #e8f2e3;
    border: 1px solid #c8dfbd;
    color: var(--nc-green-dark);
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.nc-entry-type-badge {
    background: #102018;
    border-color: rgba(99, 184, 33, 0.55);
    color: #dff5d4;
}

.nc-future-badge {
    background: #fff7df;
    border-color: #e4c45d;
    color: #594510;
}

.nc-badge.nc-badge--vendor {
    border-color: var(--gpu-vendor-accent, var(--nc-brand-nvidia));
    color: var(--gpu-vendor-accent, var(--nc-green-dark));
}

.nc-spec-table-wrap,
.nc-correction-box,
.nc-gpu-card,
.nc-form-message,
.nc-status-note,
.nc-compare-links {
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    background: #fff;
}

.nc-spec-table-wrap {
    overflow-x: auto;
}

.nc-spec-table-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem;
    border-bottom: 1px solid var(--nc-border);
}

.nc-spec-table-heading h2 {
    margin: 0;
    font-size: 1.1rem;
}

.nc-spec-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .625rem;
    flex-wrap: wrap;
}

.nc-spec-help-link {
    font-size: .84rem;
    font-weight: 700;
    color: var(--nc-green-dark);
    text-decoration: none;
}

.nc-spec-help-link:hover,
.nc-spec-help-link:focus {
    text-decoration: underline;
}

.nc-confidence {
    border-radius: 999px;
    background: var(--nc-surface-2);
    color: var(--nc-text);
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
    white-space: nowrap;
}

.nc-spec-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 320px;
}

.nc-spec-table th,
.nc-spec-table td {
    padding: 0.72rem 1rem;
    border-bottom: 1px solid var(--nc-border);
    text-align: left;
    vertical-align: top;
}

.nc-spec-table th {
    width: 42%;
    color: var(--nc-text-dark);
}

.nc-spec-group th {
    background: #eef3f6;
    color: var(--nc-text-dark);
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.nc-gpu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.nc-gpu-card {
    overflow: hidden;
    border-top: 3px solid var(--gpu-vendor-accent, var(--nc-green));
    box-shadow: 0 10px 28px rgba(11, 15, 20, 0.06);
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.nc-gpu-card:hover,
.nc-gpu-card:focus-within {
    border-color: var(--gpu-vendor-accent, var(--nc-green));
    box-shadow: 0 14px 32px rgba(11, 15, 20, 0.1), 0 0 0 2px color-mix(in srgb, var(--gpu-vendor-accent, var(--nc-green)) 18%, transparent);
}

.nc-gpu-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.nc-gpu-card__image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.nc-gpu-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.05rem;
}

.nc-gpu-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.nc-gpu-card__badges .nc-badge {
    padding: 0.2rem 0.5rem;
    font-size: 0.78rem;
}

.nc-gpu-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.nc-gpu-card__chips span {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border: 1px solid color-mix(in srgb, var(--gpu-vendor-accent, #d5e0e7) 55%, #d5e0e7);
    border-radius: 999px;
    background: #f6f9fb;
    color: #304150;
    padding: 0.2rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.25;
}

.nc-gpu-card__title {
    margin: 0;
    color: var(--nc-text-dark);
    font-size: 1.12rem;
    line-height: 1.25;
}

.nc-gpu-card__meta,
.nc-gpu-card__specs {
    color: var(--nc-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.nc-gpu-card__specs {
    color: #304150;
    font-weight: 700;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.nc-gpu-card__excerpt {
    margin: 0;
    color: #3f4f5d;
    font-size: 0.95rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}


.nc-quick-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.nc-quick-filters h2 {
    color: #eef6ff;
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.nc-quick-filters ul,
.nc-source-list ul {
    margin-left: 1.1rem;
}

.nc-quick-filters ul {
    max-height: 18rem;
    overflow: auto;
    border: 1px solid rgba(217, 225, 232, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    padding: 0.75rem 0.85rem 0.75rem 1.7rem;
    scrollbar-color: #6d7b89 #101720;
}

.nc-quick-filters li {
    color: #dbe7f3;
    line-height: 1.55;
}

.nc-quick-filters a {
    color: #8ebcff;
    text-decoration: none;
}

.nc-quick-filters a:hover,
.nc-quick-filters a:focus {
    color: #ffffff;
    text-decoration: underline;
}

.nc-correction-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.65rem 0.75rem;
    margin: 2rem 0;
}

.nc-correction-box p {
    margin: 0;
}

.nc-correction-box a {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    white-space: nowrap;
}

.nc-correction-box a:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--gpu-vendor-accent, var(--nc-green)) 55%, transparent);
    outline-offset: 3px;
}

@media (max-width: 520px) {
    .nc-correction-box {
        align-items: stretch;
        flex-direction: column;
    }

    .nc-correction-box a {
        align-self: flex-start;
    }
}

.nc-popular-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.75rem;
}

.nc-wiki-curated,
.nc-start-here {
    margin-top: 1.75rem;
}

.nc-section-heading--dark {
    align-items: end;
}

.nc-section-heading--dark h2,
.nc-start-here h2 {
    margin: 0;
    color: #eef6ff;
    font-size: 1.15rem;
}

.nc-section-heading--dark p {
    max-width: 560px;
    margin: 0;
    color: #c7d0da;
    font-size: 0.95rem;
}

.nc-wiki-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0.85rem;
}

.nc-wiki-card,
.nc-start-card {
    display: grid;
    gap: 0.35rem;
    border: 1px solid rgba(217, 225, 232, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
    color: #eef6ff;
    padding: 0.95rem;
    text-decoration: none;
}

.nc-wiki-card:hover,
.nc-wiki-card:focus,
.nc-start-card:hover,
.nc-start-card:focus {
    border-color: rgba(99, 184, 33, 0.85);
    background: rgba(255, 255, 255, 0.085);
    color: #fff;
}

.nc-wiki-card__title,
.nc-start-card span {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.25;
}

.nc-wiki-card__text,
.nc-start-card small {
    color: #c7d0da;
    font-size: 0.9rem;
    line-height: 1.45;
}

.nc-start-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.nc-filter-details {
    border: 1px solid rgba(217, 225, 232, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    padding: 0.85rem;
}

.nc-filter-details summary {
    cursor: pointer;
    color: #eef6ff;
    font-weight: 900;
}

.nc-filter-details .nc-advanced-filter-grid {
    margin-top: 1rem;
}

.nc-popular-filters h2,
.nc-filter-select-group label {
    margin: 0 0 0.65rem;
    color: #eef6ff;
    font-size: 0.98rem;
    font-weight: 800;
}

.nc-filter-select-group label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.nc-filter-count {
    flex: 0 0 auto;
    color: #b9c9d8;
    font-size: 0.82rem;
    font-weight: 800;
}

.nc-filter-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.nc-filter-chip-row.compact {
    gap: 0.45rem;
}

.nc-filter-chip {
    --gpu-chip-accent: var(--gpu-vendor-accent, var(--nc-green));
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border: 1px solid rgba(217, 225, 232, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #dbe7f3;
    padding: 0.38rem 0.68rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
}

.nc-filter-chip--vendor-nvidia { --gpu-chip-accent: var(--vendor-nvidia); }
.nc-filter-chip--vendor-amd { --gpu-chip-accent: var(--vendor-amd); }
.nc-filter-chip--vendor-ati { --gpu-chip-accent: var(--vendor-ati); }
.nc-filter-chip--vendor-intel { --gpu-chip-accent: var(--vendor-intel); }
.nc-filter-chip--vendor-others { --gpu-chip-accent: var(--vendor-others); }
.nc-filter-chip--vendor-mixed { --gpu-chip-accent: var(--vendor-mixed); }

.gpu-vendor-nvidia .nc-filter-chip--vendor-mixed { --gpu-chip-accent: var(--vendor-nvidia); }
.gpu-vendor-amd .nc-filter-chip--vendor-mixed { --gpu-chip-accent: var(--vendor-amd); }
.gpu-vendor-ati .nc-filter-chip--vendor-mixed { --gpu-chip-accent: var(--vendor-ati); }
.gpu-vendor-intel .nc-filter-chip--vendor-mixed { --gpu-chip-accent: var(--vendor-intel); }
.gpu-vendor-others .nc-filter-chip--vendor-mixed { --gpu-chip-accent: var(--vendor-others); }
.gpu-vendor-all .nc-filter-chip--vendor-mixed { --gpu-chip-accent: var(--vendor-mixed); }

.nc-filter-chip:hover,
.nc-filter-chip:focus {
    border-color: var(--gpu-chip-accent, var(--nc-green));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--gpu-chip-accent, var(--nc-green)) 24%, transparent);
    color: #ffffff;
    outline: none;
}

.nc-filter-select-panel {
    margin-top: 1.35rem;
}

.nc-advanced-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.nc-filter-select-grid {
    align-items: end;
}

.nc-filter-select-group {
    min-width: 0;
}

.nc-filter-select {
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(217, 225, 232, 0.34);
    border-radius: 6px;
    background: #0f1620;
    color: #eef6ff;
    padding: 0.45rem 0.6rem;
    font: inherit;
}

.nc-filter-select:focus {
    border-color: var(--gpu-vendor-accent, var(--nc-green));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gpu-vendor-accent, var(--nc-green)) 26%, transparent);
    outline: none;
}

.nc-gpu-controls {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(250px, max-content) minmax(150px, max-content) auto auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--nc-border);
    border-radius: 8px;
    background: #fff;
    padding: 0.85rem;
}

.nc-gpu-controls form {
    margin: 0;
}

.nc-gpu-search-control,
.nc-gpu-sort-control,
.nc-gpu-per-page-control {
    min-width: 0;
}

.nc-gpu-search-control {
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto auto;
    align-items: center;
    gap: 0.55rem;
}

.nc-gpu-sort-control {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.nc-gpu-per-page-control {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.nc-gpu-sort-fields {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.nc-gpu-controls label {
    color: var(--nc-text-dark);
    font-weight: 800;
}

.nc-gpu-search-control input[type="search"] {
    min-width: 0;
    width: 100%;
    min-height: 38px;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
    background: #fff;
    padding: 0.35rem 0.55rem;
    font: inherit;
}

.nc-gpu-controls select {
    min-height: 38px;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
    background: #fff;
    padding: 0.35rem 0.55rem;
}

.nc-gpu-sort-fields select {
    min-width: 230px;
}

.nc-gpu-per-page-control select {
    min-width: 130px;
}

.nc-gpu-controls button {
    min-height: 38px;
    border: 1px solid var(--gpu-vendor-accent, var(--nc-green));
    border-radius: 6px;
    background: var(--gpu-vendor-accent, var(--nc-green));
    color: var(--gpu-vendor-contrast, #061107);
    padding: 0.35rem 0.8rem;
    font-weight: 800;
}

.nc-js .nc-gpu-sort-control button[type="submit"],
.nc-js .nc-gpu-per-page-control button[type="submit"] {
    display: none;
}

.nc-gpu-results-heading {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: end;
    margin: 0 0 1rem;
}

.nc-gpu-results-heading > div {
    flex: 1 1 auto;
    min-width: 0;
}

.nc-gpu-results-heading h2 {
    margin: 0 0 0.28rem;
    color: var(--nc-text-dark);
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.15;
}

.nc-gpu-results-heading p:not(.nc-kicker) {
    max-width: 1080px;
    margin: 0;
    color: var(--nc-muted);
}

.nc-inline-reset {
    color: var(--gpu-vendor-accent, var(--nc-green-dark));
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.nc-filter-reset {
    align-self: center;
    justify-self: end;
    white-space: nowrap;
}

.nc-inline-reset:hover,
.nc-inline-reset:focus {
    text-decoration: underline;
}

.nc-view-toggle {
    display: inline-flex;
    align-self: end;
    justify-self: end;
    overflow: hidden;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
}

.nc-view-toggle a {
    background: #fff;
    color: var(--nc-text-dark);
    padding: 0.45rem 0.75rem;
    text-decoration: none;
}

.nc-view-toggle a + a {
    border-left: 1px solid var(--nc-border);
}

.nc-view-toggle a.is-active {
    background: var(--nc-surface-2);
    color: var(--nc-text);
}

.nc-gpu-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--nc-border);
    border-radius: 8px;
    background: #fff;
}

.nc-gpu-table {
    width: 100%;
    min-width: 860px;
    border-collapse: collapse;
}

.nc-gpu-table th,
.nc-gpu-table td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--nc-border);
    text-align: left;
    vertical-align: top;
}

.nc-gpu-table thead th {
    background: #eef3f6;
    color: var(--nc-text-dark);
    font-size: 0.84rem;
    text-transform: uppercase;
}

.nc-gpu-table-sort a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
}

.nc-gpu-table-sort a:hover,
.nc-gpu-table-sort a:focus {
    color: var(--gpu-vendor-accent, var(--nc-green-dark));
    text-decoration: underline;
}

.nc-gpu-table-sort span {
    font-size: 0.72rem;
    opacity: 0.72;
}

.nc-gpu-table-sort.is-active span {
    opacity: 1;
}

.nc-gpu-table tbody tr[class*="gpu-table-row--vendor"] th:first-child {
    border-left: 4px solid var(--gpu-vendor-accent, var(--nc-green));
}

.nc-gpu-table tbody tr[class*="gpu-table-row--vendor"] th:first-child a:focus,
.nc-gpu-table tbody tr[class*="gpu-table-row--vendor"] th:first-child a:hover {
    color: var(--gpu-vendor-accent, var(--nc-green-dark));
}

.nc-empty-value {
    color: #9aa5b1;
}

.nc-series-facts,
.nc-at-a-glance,
.nc-series-overview,
.nc-architecture-overview,
.nc-architecture-facts,
.nc-architecture-changed,
.nc-series-stack-intro,
.nc-source-list,
.nc-gpu-reviews,
.nc-related-gpus {
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    background: #fff;
    margin-bottom: 1.25rem;
    padding: 1rem;
}

.nc-gpu-card-group {
    margin-bottom: 2rem;
}

.nc-group-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.nc-gpu-card-group h2,
.nc-group-heading h2 {
    margin: 0 0 0.85rem;
    color: var(--nc-text-dark);
    font-size: 1.15rem;
}

.nc-group-heading h2 {
    margin: 0;
}

.nc-group-heading span {
    border-radius: 999px;
    background: #eef3f6;
    color: #425363;
    padding: 0.25rem 0.55rem;
    font-size: 0.82rem;
    font-weight: 900;
}

.nc-series-overview h2,
.nc-architecture-overview h2,
.nc-architecture-facts h2,
.nc-architecture-changed h2 {
    margin: 0 0 0.65rem;
    font-size: 1.15rem;
}

.nc-series-overview h3,
.nc-architecture-changed h3 {
    margin: 1rem 0 0.35rem;
    font-size: 1rem;
}

.nc-architecture-changed h3:first-child {
    margin-top: 0;
}

.nc-series-overview p:last-child,
.nc-architecture-overview p:last-child,
.nc-architecture-changed p:last-child {
    margin-bottom: 0;
}

.nc-series-facts h2,
.nc-at-a-glance h2 {
    margin: 0 0 0.8rem;
    font-size: 1.1rem;
}

.nc-series-facts dl,
.nc-at-a-glance dl,
.nc-architecture-facts dl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.85rem;
    margin: 0;
}

.nc-series-fact,
.nc-glance-item,
.nc-architecture-fact {
    border-left: 3px solid var(--nc-green);
    padding-left: 0.7rem;
}

.nc-series-fact dt,
.nc-glance-item dt,
.nc-architecture-fact dt {
    color: var(--nc-muted);
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
}

.nc-series-fact dd,
.nc-glance-item dd,
.nc-architecture-fact dd {
    margin: 0.15rem 0 0;
    color: var(--nc-text-dark);
    font-weight: 700;
}

.nc-series-facts dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nc-series-fact--context {
    grid-column: span 3;
    padding: 0.85rem 1rem;
    border-left-width: 4px;
    border-radius: 8px;
    background: #f7fafc;
}

.nc-series-fact--context dd {
    max-width: 72ch;
    font-weight: 650;
}

.nc-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

.nc-section-nav a {
    border: 1px solid var(--nc-border);
    border-radius: 999px;
    background: #fff;
    color: var(--nc-text-dark);
    padding: 0.35rem 0.65rem;
    font-size: 0.88rem;
    font-weight: 800;
    text-decoration: none;
}

.nc-section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.8rem;
}

.nc-section-heading h2 {
    margin: 0;
}

.nc-section-heading span {
    border-radius: 999px;
    background: #eef3f6;
    color: #425363;
    padding: 0.25rem 0.55rem;
    font-size: 0.82rem;
    font-weight: 900;
}

.nc-gpu-notes + .nc-related-gpus,
.nc-gpu-reviews,
.nc-related-gpus {
    margin-top: 1.25rem;
}

.nc-gpu-reviews__intro {
    max-width: 62ch;
    margin: 0 0 0.9rem;
    color: var(--nc-muted);
}

.nc-gpu-review-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.8rem;
}

.nc-gpu-review-card a {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    height: 100%;
    border: 1px solid var(--nc-border);
    border-left: 3px solid var(--gpu-vendor-accent, var(--nc-green));
    border-radius: 8px;
    background: #f7fafc;
    color: inherit;
    padding: 0.85rem;
    text-decoration: none;
}

.nc-gpu-review-card a:hover,
.nc-gpu-review-card a:focus {
    border-color: color-mix(in srgb, var(--gpu-vendor-accent, var(--nc-green)) 62%, var(--nc-border));
    box-shadow: 0 10px 24px rgba(11, 15, 20, 0.08);
    outline: none;
}

.nc-gpu-review-card__type {
    justify-self: start;
    border-radius: 999px;
    background: color-mix(in srgb, var(--gpu-vendor-accent, var(--nc-green)) 14%, #fff);
    color: color-mix(in srgb, var(--gpu-vendor-accent, var(--nc-green)) 62%, #18222b);
    padding: 0.16rem 0.48rem;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

.nc-gpu-review-card__type--video {
    background: #fff1f1;
    color: #a32020;
}

.nc-gpu-review-card h3 {
    margin: 0;
    color: var(--nc-text-dark);
    font-size: 0.94rem;
    line-height: 1.3;
}

.nc-gpu-review-card p {
    margin: 0;
    color: #425363;
    font-size: 0.84rem;
    line-height: 1.45;
}

.nc-gpu-review-card__meta {
    color: var(--nc-muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.nc-gpu-overview {
    margin-bottom: 1.25rem;
}

.nc-gpu-overview-body > :first-child {
    margin-top: 0;
}

.nc-gpu-overview-body > :last-child {
    margin-bottom: 0;
}

.nc-source-list--collapsed,
.nc-gpu-reviews--collapsed,
.nc-related-gpus--collapsed {
    padding: 0;
}

.nc-source-details,
.nc-gpu-review-details,
.nc-related-details {
    padding: 0;
}

.nc-source-summary,
.nc-gpu-review-summary,
.nc-related-summary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    cursor: pointer;
    list-style: none;
}

.nc-source-summary::-webkit-details-marker,
.nc-gpu-review-summary::-webkit-details-marker,
.nc-related-summary::-webkit-details-marker {
    display: none;
}

.nc-source-summary::before,
.nc-gpu-review-summary::before,
.nc-related-summary::before {
    content: "\25B8";
    display: inline-flex;
    flex: 0 0 1.7rem;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 1px solid #b8d9b0;
    border-radius: 999px;
    background: #eef8eb;
    color: var(--nc-green-dark);
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.nc-source-summary:hover::before,
.nc-source-summary:focus-visible::before,
.nc-gpu-review-summary:hover::before,
.nc-gpu-review-summary:focus-visible::before,
.nc-related-summary:hover::before,
.nc-related-summary:focus-visible::before {
    border-color: var(--nc-green);
    background: var(--nc-green);
    color: #fff;
}

.nc-source-details[open] > .nc-source-summary::before,
.nc-gpu-review-details[open] > .nc-gpu-review-summary::before,
.nc-related-details[open] > .nc-related-summary::before {
    transform: rotate(90deg);
}

.nc-source-summary-title,
.nc-gpu-review-summary-title,
.nc-related-summary-title {
    flex: 1 1 auto;
    color: var(--nc-text-dark);
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.25;
}

.nc-gpu-review-summary-count {
    border-radius: 999px;
    background: #eef3f6;
    color: #425363;
    padding: 0.22rem 0.5rem;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.2;
    white-space: nowrap;
}

.nc-source-detail-body {
    padding: 0 1rem 1rem;
}

.nc-gpu-review-detail-body {
    padding: 0 1rem 1rem;
}

.nc-related-detail-body {
    padding: 0 1rem 1rem;
}

.nc-source-details:not([open]) > .nc-source-detail-body,
.nc-gpu-review-details:not([open]) > .nc-gpu-review-detail-body,
.nc-related-details:not([open]) > .nc-related-detail-body {
    display: none !important;
}

.nc-source-list ol {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding-left: 1.25rem;
}

.nc-source-group {
    margin-top: 1rem;
}

.nc-source-curation-status {
    margin: 0 0 1rem;
    border: 1px solid #d5e0e7;
    border-radius: 8px;
    background: #f7fafc;
    padding: 0.85rem 1rem;
}

.nc-source-curation-status h3 {
    margin: 0 0 0.45rem;
    color: var(--nc-text-dark);
    font-size: 1rem;
}

.nc-source-curation-status p {
    margin: 0.45rem 0;
}

.nc-source-curation-status p:first-of-type {
    margin-top: 0;
}

.nc-source-curation-status p:last-child,
.nc-source-curation-status ul:last-child {
    margin-bottom: 0;
}

.nc-source-group:first-of-type {
    margin-top: 0;
}

.nc-source-group h3 {
    margin: 0 0 0.55rem;
    color: var(--nc-text-dark);
    font-size: 1rem;
}

.nc-source-list li {
    padding-left: 0.25rem;
}

.nc-source-list strong,
.nc-source-note,
.nc-source-list a {
    display: block;
}

.nc-source-note {
    color: var(--nc-muted);
    font-size: 0.92rem;
}

.nc-source-status {
    margin: -0.2rem 0 0.9rem;
    color: #425363;
    font-size: 0.94rem;
}

.nc-confidence-help {
    margin: 0 0 0.9rem;
    border: 1px solid #d5e0e7;
    border-radius: 8px;
    background: #f7fafc;
    padding: 0.75rem 0.85rem;
}

.nc-confidence-help summary {
    cursor: pointer;
    color: var(--nc-text-dark);
    font-weight: 900;
}

.nc-confidence-help p {
    margin: 0.55rem 0;
}

.nc-confidence-help ul {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
}

.nc-source-reviewed {
    margin: -0.15rem 0 0.9rem;
    color: #425363;
    font-size: 0.94rem;
    font-weight: 700;
}

.nc-related-back {
    margin: 0;
}

.nc-related-series-nav,
.nc-compare-links ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.nc-related-series-nav {
    margin: 0 0 1rem;
}

.nc-related-series-nav a,
.nc-compare-links a {
    border: 1px solid var(--nc-border);
    border-radius: 999px;
    color: var(--nc-text-dark);
    padding: 0.35rem 0.65rem;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.nc-compare-links {
    margin: 2rem 0;
    padding: 1rem;
}

.nc-compare-links h2 {
    margin: 0 0 0.8rem;
    font-size: 1.1rem;
}

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

.nc-gpu-compare-cta {
    display: grid;
    gap: 0.7rem;
    margin: 0.85rem 0;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    background: #fff;
    padding: 0.7rem 0.85rem;
}

.nc-gpu-compare-cta__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1rem;
}

.nc-gpu-compare-primary.secondary {
    border-color: var(--nc-border);
    background: #f7fafc;
    color: var(--nc-text-dark);
}

.nc-gpu-compare-helper {
    flex: 1 1 260px;
    margin: 0;
    color: #425363;
    font-size: 0.95rem;
    font-weight: 700;
}

.nc-compare-inline-search {
    border-top: 1px solid var(--nc-border);
    padding-top: 0.75rem;
    margin-top: 0.1rem;
}

.nc-compare-inline-search[hidden] {
    display: none;
}

.nc-compare-inline-search__label {
    margin: 0 0 0.4rem;
    color: var(--nc-muted);
    font-size: 0.88rem;
    font-weight: 700;
}

.nc-gpu-compare-tray {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-top: 1px solid var(--nc-border);
    padding-top: 0.8rem;
}

.nc-gpu-compare-tray[hidden] {
    display: none;
}

.nc-gpu-compare-status {
    margin: 0;
    color: var(--nc-text-dark);
    font-weight: 800;
}

.nc-gpu-compare-tray__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

/* Colors come from the shared .nc-button / .nc-compare-action-btn classes on
   the tray controls; this rule only compacts their size. */
.nc-gpu-compare-tray__actions a,
.nc-gpu-compare-tray__actions button {
    min-height: 36px;
    padding: 0.3rem 0.75rem;
    font-size: 0.9rem;
    text-decoration: none;
}

.nc-gpu-compare-tray__actions button[hidden] {
    display: none;
}

.nc-gpu-compare-page {
    --gpu-vendor-accent: var(--vendor-mixed);
    --gpu-vendor-contrast: #fff;
    background: #f4f7fa;
}

.nc-gpu-compare-form,
.nc-compare-empty-state,
.nc-compare-legend {
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    background: #fff;
}

.nc-gpu-compare-form {
    margin-bottom: 1rem;
    padding: 1rem;
}

.nc-compare-selector-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.nc-compare-selector {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
}

.nc-compare-selector label {
    color: var(--nc-text-dark);
    font-weight: 900;
}

.nc-compare-selector input[type="search"] {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
    background: #fff;
    padding: 0.5rem 0.65rem;
    font: inherit;
}

.nc-compare-selector input[type="search"]:focus {
    border-color: var(--gpu-vendor-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gpu-vendor-accent) 22%, transparent);
    outline: none;
}

.nc-compare-selected,
.nc-compare-empty {
    min-height: 32px;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
    background: #f7fafc;
    color: var(--nc-text-dark);
    padding: 0.35rem 0.55rem;
    font-size: 0.92rem;
    font-weight: 800;
    text-decoration: none;
}

.nc-compare-empty {
    color: var(--nc-muted);
}

.nc-compare-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.9rem;
}

.nc-compare-action-primary {
    min-height: 40px;
    border: 1px solid var(--gpu-vendor-accent);
    border-radius: 6px;
    background: var(--gpu-vendor-accent);
    color: var(--gpu-vendor-contrast);
    padding: 0.45rem 0.95rem;
    font: inherit;
    font-weight: 900;
    cursor: pointer;
}

.nc-compare-action-primary:hover,
.nc-compare-action-primary:focus {
    background: #475569;
    border-color: #475569;
    outline: none;
}

/* Secondary group: transparent on desktop so children join the parent flex row */
.nc-compare-actions__secondary {
    display: contents;
}

.nc-compare-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
    background: #fff;
    color: var(--nc-text-dark);
    padding: 0.45rem 0.95rem;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.nc-compare-action-btn:hover,
.nc-compare-action-btn:focus {
    border-color: var(--nc-green);
    color: var(--nc-text-dark);
    outline: none;
}

.nc-compare-results {
    scroll-margin-top: 120px;
}

.nc-compare-results:focus {
    outline: none;
}

.nc-compare-empty-state {
    padding: 1.2rem;
}

.nc-compare-empty-state h2 {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
}

.nc-compare-empty-state p {
    margin: 0;
    color: #425363;
}

.nc-compare-legend {
    margin-bottom: 0.8rem;
    padding: 0.75rem 0.9rem;
    color: #425363;
    font-size: 0.95rem;
    font-weight: 700;
}

.nc-compare-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    background: #fff;
}

.nc-compare-table {
    width: 100%;
    min-width: 880px;
    /* border-collapse: collapse combined with position: sticky cells is a
       well-documented cross-browser rendering hazard (stale/ghosted paint of
       scrolled-past cells, especially in WebKit); border-spacing: 0 keeps the
       same visual border layout without that hazard. */
    border-collapse: separate;
    border-spacing: 0;
}

.nc-compare-table th,
.nc-compare-table td {
    padding: 0.78rem 0.9rem;
    border-bottom: 1px solid var(--nc-border);
    text-align: left;
    vertical-align: top;
}

.nc-compare-table thead th {
    background: #eef3f6;
    color: var(--nc-text-dark);
    font-size: 0.84rem;
    text-transform: uppercase;
}

.nc-compare-table th:first-child {
    width: 28%;
}

.nc-compare-section-row th {
    background: var(--nc-surface-2);
    color: var(--nc-text);
    font-size: 0.92rem;
    text-transform: uppercase;
}

.nc-compare-table th small,
.nc-compare-cell small {
    display: block;
    margin-top: 0.25rem;
    color: var(--nc-muted);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
}

.nc-compare-brand-badge {
    display: block;
    margin-top: 0.2rem;
    color: var(--nc-muted);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.nc-compare-cross-vendor-note {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    font-weight: 400;
    color: #8a7060;
    line-height: 1.3;
}

.nc-compare-vendor-term {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--nc-muted);
    line-height: 1.3;
}

.nc-compare-cell--unknown {
    color: #778390;
    background: #f8fafb;
}

.nc-compare-cell--not-applicable {
    color: #66717c;
    background: #f2f4f6;
}

.nc-compare-cell--incompatible {
    color: #59636e;
    background: #eef1f3;
}

.nc-compare-cell--better {
    box-shadow: inset 3px 0 0 var(--nc-green);
    background: #f3faef;
}

.nc-compare-cell--better small {
    color: #416134;
}

/* Performance bar — shown in rows with bar:true */
.nc-compare-cell--has-bar,
.nc-compare-stacked-value.nc-compare-cell--has-bar {
    position: relative;
    padding-bottom: 1.65rem;
}

.nc-compare-bar {
    position: absolute;
    bottom: 0.5rem;
    left: 0.9rem;
    right: 0.9rem;
    height: 3px;
    background: var(--nc-border);
    border-radius: 2px;
    overflow: hidden;
    display: block;
}

.nc-compare-bar::before {
    content: '';
    display: block;
    height: 100%;
    width: calc(var(--nc-bar-val, 0) / var(--nc-bar-max, 1) * 100%);
    background: rgba(99, 184, 33, 0.38);
    border-radius: 2px;
}

.nc-compare-cell--better .nc-compare-bar::before {
    background: var(--nc-green);
}

.nc-status-note {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    border-color: #c9d8bd;
    background: #f5faf2;
    color: #253624;
    font-weight: 700;
}

.nc-confidence-banner {
    margin: 0.85rem 0 0;
    border: 1px solid #dfc66b;
    border-radius: 8px;
    background: #fff8df;
    color: #48390f;
    padding: 0.55rem 0.8rem;
    font-size: 0.92rem;
    font-weight: 700;
}

.nc-confidence-banner--verified {
    border-color: #b8d9b0;
    background: #f1f8ee;
    color: #203f1f;
}

.nc-confidence-banner--needs_review,
.nc-confidence-banner--stub {
    border-color: #d7b6a7;
    background: #fff3ee;
    color: #56321f;
}

.nc-gpu-notes {
    display: grid;
    gap: 1rem;
    margin: 1.5rem 0;
}

.nc-gpu-note {
    border: 1px solid var(--nc-border);
    border-radius: 8px;
    background: #fff;
    padding: 1rem;
}

.nc-gpu-note h2 {
    margin: 0 0 0.55rem;
    color: var(--nc-text-dark);
    font-size: 1.1rem;
}

.nc-gpu-note p:last-child {
    margin-bottom: 0;
}

.nc-priority-gpu-notes {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.nc-priority-note {
    min-height: 100%;
}

.nc-pending-topic-list {
    margin: 0.4rem 0 0;
    padding-left: 1.15rem;
    color: var(--nc-muted);
}

.nc-pending-topic-list li + li {
    margin-top: 0.15rem;
}

.navigation.pagination,
.pagination {
    margin-top: 1.5rem;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
    background: #fff;
    color: var(--nc-text-dark);
    padding: 0.35rem 0.65rem;
    font-weight: 800;
    text-decoration: none;
}

.page-numbers.current {
    background: var(--nc-surface-2);
    color: var(--nc-text);
}

.nc-empty-state {
    border: 1px solid var(--nc-border);
    border-radius: 8px;
    background: #fff;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.nc-empty-state h2 {
    margin-top: 0;
}

.nc-correction-form {
    max-width: 720px;
}

.nc-correction-form label {
    display: grid;
    gap: 0.35rem;
    font-weight: 700;
}

.nc-correction-form input,
.nc-correction-form select,
.nc-correction-form textarea {
    width: 100%;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
    padding: 0.65rem 0.75rem;
    font: inherit;
}

.nc-hp-field {
    position: absolute;
    left: -10000px;
}

.nc-form-message {
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.nc-form-success {
    border-color: #b8d9a5;
    background: #f0f8ed;
}

.nc-form-error {
    border-color: #e5b6b6;
    background: #fff1f1;
}

.ct-footer-copyright,
.ct-footer [data-id="copyright"],
.ct-footer [class*="copyright"],
.site-footer [class*="copyright"] {
    display: none !important;
}

/* Shared site footer injected by the Core plugin. */
.nc-site-footer {
    background: var(--nc-bg);
    color: #c7d0da;
    padding: 1.25rem 0;
    text-align: center;
    font-size: 0.88rem;
}

.nc-footer-copyright,
.nc-footer-disclaimer {
    margin: 0;
}

.nc-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.8rem;
    margin: 0.65rem 0;
}

.nc-footer-links a {
    color: #e6eef7;
    font-weight: 700;
    text-decoration: none;
}

.nc-footer-links a:hover,
.nc-footer-links a:focus {
    color: #fff;
    text-decoration: underline;
}

body.page-id-2800 .entry-content,
.nc-gpu-wiki-help {
    box-sizing: border-box;
    width: min(760px, calc(100vw - 2rem));
    max-width: 100%;
    margin-inline: auto;
}

.nc-gpu-wiki-help {
    color: var(--nc-text-dark);
}

.nc-gpu-wiki-help > * {
    max-width: 100%;
}

.nc-gpu-wiki-help p,
.nc-gpu-wiki-help li {
    overflow-wrap: break-word;
}

.nc-gpu-wiki-help ul {
    padding-inline-start: 1.25rem;
}

.nc-gpu-wiki-help li + li {
    margin-top: 0.35rem;
}

@media (max-width: 860px) {
    .nc-gpu-main {
        display: flex;
        flex-direction: column;
    }

    .nc-gpu-layout-has-sidebar .nc-gpu-main-intro,
    .nc-gpu-layout-has-sidebar .nc-gpu-main-notes,
    .nc-gpu-layout-has-sidebar .nc-gpu-main-after-specs {
        width: 100%;
    }

    /* Specs directly after the header on small screens; the narrative follows
       the specification groups. Reset desktop stickiness so the full table stays
       in normal flow and cannot cover later GPU Wiki sections. */
    .nc-gpu-sidebar {
        float: none;
        order: 1;
        width: 100%;
        margin: 0 0 1.25rem;
        position: static;
        top: auto;
    }

    .nc-gpu-main-intro {
        order: 2;
    }

    .nc-gpu-main-notes {
        order: 3;
    }

    .nc-gpu-main-after-specs {
        order: 4;
    }

    .nc-series-facts dl {
        grid-template-columns: 1fr;
    }

    .nc-series-fact--context {
        grid-column: auto;
    }

    .nc-popular-filters {
        grid-template-columns: 1fr;
    }

    /* Two-up control rows instead of a six-control vertical stack. */
    .nc-gpu-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .nc-gpu-search-control {
        grid-column: 1 / -1;
    }

    .nc-gpu-sort-fields select,
    .nc-gpu-per-page-control select {
        min-width: 0;
        width: 100%;
    }

    .nc-compare-selector-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nc-view-toggle,
    .nc-filter-reset {
        justify-self: start;
    }

    .nc-section-heading--dark {
        align-items: start;
    }

    .nc-home-compare-spotlight__inner {
        grid-template-columns: 1fr;
    }

    .nc-home-compare-spotlight__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .nc-archive-header form[role="search"] {
        grid-template-columns: 1fr;
    }

    .nc-spec-table-heading {
        align-items: flex-start;
        flex-direction: column;
        gap: .5rem;
    }

    .nc-spec-heading-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .nc-gpu-search-control {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .nc-gpu-search-control label {
        grid-column: 1 / -1;
    }

    .nc-gpu-sort-control,
    .nc-gpu-sort-fields,
    .nc-gpu-per-page-control {
        align-items: stretch;
        flex-direction: column;
    }

    .nc-gpu-search-control input[type="search"],
    .nc-gpu-sort-fields select,
    .nc-gpu-per-page-control select {
        width: 100%;
    }

    .nc-compare-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .nc-compare-action-primary {
        width: 100%;
    }

    .nc-compare-actions__secondary {
        display: flex;
        gap: 0.5rem;
        width: 100%;
    }

    .nc-compare-actions__secondary .nc-compare-action-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .nc-gpu-compare-cta__main,
    .nc-gpu-compare-tray {
        align-items: stretch;
        flex-direction: column;
    }

    /* flex-basis 260px is a width in the desktop row layout, but in this
       column layout it turned into 260px of empty height under the helper. */
    .nc-gpu-compare-helper {
        flex-basis: auto;
    }

    .nc-gpu-compare-primary {
        width: 100%;
    }

    /* View comparison takes its own row; Swap, Remove, and Clear share one
       compact row instead of stacking full-width. */
    .nc-gpu-compare-tray__actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.45rem;
    }

    .nc-gpu-compare-tray__actions a {
        flex: 1 1 100%;
    }

    .nc-gpu-compare-tray__actions button {
        flex: 1 1 0;
        min-width: 0;
    }

    .nc-compare-table {
        min-width: 720px;
    }

    .nc-filter-chip-row {
        gap: 0.45rem;
    }

    .nc-filter-chip {
        max-width: 100%;
        justify-content: center;
        text-align: center;
        white-space: normal;
    }

    .nc-advanced-filter-grid {
        grid-template-columns: 1fr;
    }

    body.page-id-2800 .entry-content,
    .nc-gpu-wiki-help {
        width: min(100%, calc(100vw - 2rem));
    }

    .nc-gpu-wiki-help h1 {
        font-size: 2rem;
        line-height: 1.2;
    }

    .nc-gpu-wiki-help h2 {
        font-size: 1.6rem;
        line-height: 1.25;
    }

    .nc-gpu-wiki-help p,
    .nc-gpu-wiki-help li {
        line-height: 1.58;
    }

    .nc-home-compare-spotlight__actions,
    .nc-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .nc-home-compare-spotlight__actions .nc-button,
    .nc-hero-actions .nc-button {
        width: 100%;
    }
}

/* ============================================================
   GPU Compare — New styles (revamp)
   All styles below are append-only additions.
   ============================================================ */

/* ── Selector grid: two visible slots; slots 3 and 4 live in the disclosure ── */
.nc-compare-selector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ── Combobox ── */
.nc-combobox {
    position: relative;
}

.nc-combobox__input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.nc-combobox__input {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
    background: #fff;
    padding: 0.5rem 2.2rem 0.5rem 0.65rem;
    font: inherit;
    color: var(--nc-text-dark);
}

.nc-combobox__input:focus {
    border-color: var(--gpu-vendor-accent, var(--vendor-mixed));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gpu-vendor-accent, var(--vendor-mixed)) 22%, transparent);
    outline: none;
}

.nc-combobox__clear {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border: none;
    background: none;
    color: var(--nc-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.nc-combobox__clear:hover,
.nc-combobox__clear:focus {
    color: var(--nc-danger);
}

.nc-combobox__clear[hidden] {
    display: none;
}

.nc-combobox-list {
    position: absolute;
    z-index: 100;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0.3rem 0;
    list-style: none;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(11, 15, 20, 0.12);
    scrollbar-color: #b0bec8 #f4f7fa;
}

.nc-combobox-list[hidden] {
    display: none;
}

.nc-combobox-list__option {
    display: flex;
    flex-direction: column;
    padding: 0.48rem 0.75rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--nc-text-dark);
    line-height: 1.35;
}

.nc-combobox-list__option small {
    color: var(--nc-muted);
    font-size: 0.8rem;
}

.nc-combobox-list__option:hover,
.nc-combobox-list__option.is-active,
.nc-combobox-list__option[aria-selected="true"] {
    background: #eef3f6;
    color: var(--nc-text-dark);
}

.nc-combobox-list__empty {
    padding: 0.55rem 0.75rem;
    color: var(--nc-muted);
    font-size: 0.9rem;
    font-style: italic;
    cursor: default;
}

.nc-search-suggestions {
    position: static;
    margin-top: 0.35rem;
}

.nc-gpu-hero-search-control .nc-search-suggestions {
    grid-column: 1 / -1;
}

.nc-home-hero__search .nc-search-suggestions,
.nc-home-search .nc-search-suggestions {
    border-color: #2d3f55;
    background: #111a26;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

.nc-home-hero__search .nc-combobox-list__option,
.nc-home-search .nc-combobox-list__option {
    color: var(--nc-text);
}

.nc-home-hero__search .nc-combobox-list__option small,
.nc-home-search .nc-combobox-list__option small {
    color: #8faabb;
}

.nc-home-hero__search .nc-combobox-list__option:hover,
.nc-home-hero__search .nc-combobox-list__option.is-active,
.nc-home-hero__search .nc-combobox-list__option[aria-selected="true"],
.nc-home-search .nc-combobox-list__option:hover,
.nc-home-search .nc-combobox-list__option.is-active,
.nc-home-search .nc-combobox-list__option[aria-selected="true"] {
    background: rgba(99, 184, 33, 0.16);
    color: var(--nc-text);
}

/* ── Export button ── */
.nc-compare-export-btn[hidden] {
    display: none;
}

/* ── View controls bar ── */
.nc-compare-view-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-bottom: 0.75rem;
}

.nc-compare-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}

.nc-compare-row-order {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.nc-compare-view-btn,
.nc-compare-order-btn {
    min-height: 34px;
    border: 1px solid var(--nc-border);
    border-radius: 999px;
    background: #fff;
    color: var(--nc-text-dark);
    padding: 0.3rem 0.75rem;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
}

.nc-compare-view-btn.is-active,
.nc-compare-order-btn.is-active {
    background: var(--nc-surface-2);
    color: var(--nc-text);
    border-color: var(--nc-surface-2);
}

.nc-compare-view-btn:hover:not(.is-active),
.nc-compare-order-btn:hover:not(.is-active),
.nc-compare-view-btn:focus,
.nc-compare-order-btn:focus {
    border-color: var(--gpu-vendor-accent, var(--vendor-mixed));
    outline: none;
}

.nc-compare-row-order__select {
    min-height: 34px;
    min-width: 0;
    border: 1px solid var(--nc-border);
    border-radius: 6px;
    background: #fff;
    color: var(--nc-text-dark);
    padding: 0.25rem 0.5rem;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.nc-compare-row-order__select:focus {
    border-color: var(--gpu-vendor-accent, var(--vendor-mixed));
    outline: none;
}

/* ── Table: dynamic column widths ── */
.nc-compare-table {
    min-width: calc(var(--nc-spec-col-width, 280px) + var(--nc-gpu-count, 2) * 300px);
}

/* ── Key Differences ── */
.nc-compare-key-diffs {
    margin-bottom: 1rem;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    background: #fff;
    padding: 0.85rem 1rem;
}

.nc-compare-key-diffs--empty {
    background: #f7fafc;
}

.nc-compare-key-diffs--empty p {
    margin: 0;
    color: var(--nc-muted);
    font-size: 0.95rem;
}

/* The panel sits between the GPU pickers and the table a reader came for, so it
   stays short: the measured result, then three specifications. Every extra line
   here is a line of table pushed below the fold on a phone. */
.nc-compare-key-diffs__title {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--nc-muted);
}

.nc-compare-key-diffs__list {
    margin: 0;
    padding-left: 1.15rem;
    display: grid;
    gap: 0.3rem;
}

.nc-compare-key-diffs__list li {
    font-size: 0.95rem;
    color: #304150;
    line-height: 1.45;
}

/* A comparison is read by jumping between columns, so the card being talked
   about is named in its own vendor colour: green for GeForce, red for Radeon. */
.nc-gpu-name {
    font-weight: 600;
    color: var(--gpu-vendor-accent);
}

/* Method note under the table. Small, but not the fine print that hides a
   catch: it discloses the one equivalence the frame-rate rows make. */
.nc-compare-method-note {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--nc-muted);
    max-width: 76ch;
}

/* Two-line row label for the gaming rows: resolution first at size, qualifier
   under it. The spec column is the widest on the page, and this lets it shrink
   to the width of "performance" instead of "1440p gaming performance" while
   using height the FPS cells opposite already occupy. */
.nc-compare-row-label {
    display: block;
}

.nc-compare-row-label__lead {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.15;
}

.nc-compare-row-label__sub {
    display: block;
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.25;
    color: var(--nc-muted);
}

/* The 1% low, directly under the average it belongs to. Quieter than the
   headline number but not a footnote: it is the figure that decides whether the
   frame rate actually feels smooth. */
.nc-compare-cell__sub {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.78rem;
    color: var(--nc-muted);
}

/* ── Blank state ── */
.nc-compare-blank-state {
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    background: #fff;
    padding: clamp(1.25rem, 3vw, 2rem);
}

.nc-compare-blank-state__intro h2 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

.nc-compare-blank-state__intro p {
    margin: 0 0 1.25rem;
    color: #425363;
}

.nc-compare-blank-state__steps {
    margin: 0 0 1.5rem;
    padding-left: 1.35rem;
    display: grid;
    gap: 0.75rem;
}

.nc-compare-blank-state__steps li {
    color: var(--nc-text-dark);
    line-height: 1.5;
}

.nc-compare-blank-state__steps strong {
    display: block;
    font-size: 0.97rem;
}

.nc-compare-blank-state__steps span {
    color: #425363;
    font-size: 0.92rem;
}

.nc-compare-blank-state__presets h3 {
    margin: 0 0 0.7rem;
    font-size: 1rem;
}

.nc-compare-preset-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

/* Vendor colors come from server-rendered data attributes and classes. */
.nc-compare-preset-card {
    --nc-va-color: var(--vendor-nvidia);
    --nc-vb-color: var(--vendor-nvidia);
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 999px;
    background:
        linear-gradient(#f7fafc, #f7fafc) padding-box,
        linear-gradient(to right, var(--nc-va-color, var(--vendor-nvidia)) 50%, var(--nc-vb-color, var(--vendor-nvidia)) 50%) border-box;
    color: var(--nc-text-dark);
    padding: 0.4rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.14s ease, box-shadow 0.14s ease;
}

.compare-pill[data-vendor-a="nvidia"] { --nc-va-color: var(--vendor-nvidia); }
.compare-pill[data-vendor-a="amd"] { --nc-va-color: var(--vendor-amd); }
.compare-pill[data-vendor-a="ati"] { --nc-va-color: var(--vendor-ati); }
.compare-pill[data-vendor-a="intel"] { --nc-va-color: var(--vendor-intel); }
.compare-pill[data-vendor-a="others"] { --nc-va-color: var(--vendor-others); }
.compare-pill[data-vendor-a="mixed"] { --nc-va-color: var(--vendor-mixed); }
.compare-pill[data-vendor-b="nvidia"] { --nc-vb-color: var(--vendor-nvidia); }
.compare-pill[data-vendor-b="amd"] { --nc-vb-color: var(--vendor-amd); }
.compare-pill[data-vendor-b="ati"] { --nc-vb-color: var(--vendor-ati); }
.compare-pill[data-vendor-b="intel"] { --nc-vb-color: var(--vendor-intel); }
.compare-pill[data-vendor-b="others"] { --nc-vb-color: var(--vendor-others); }
.compare-pill[data-vendor-b="mixed"] { --nc-vb-color: var(--vendor-mixed); }

/* The comparison result itself carries the same left-to-right vendor order as
   the selected GPUs. This restores vendor identity beyond the preset links. */
.nc-compare-table-wrap--vendor-pair,
.nc-compare-stacked--vendor-pair {
    --nc-va-color: var(--vendor-nvidia);
    --nc-vb-color: var(--vendor-nvidia);
}

.nc-compare-table-wrap--vendor-pair[data-vendor-a="nvidia"],
.nc-compare-stacked--vendor-pair[data-vendor-a="nvidia"] { --nc-va-color: var(--vendor-nvidia); }
.nc-compare-table-wrap--vendor-pair[data-vendor-a="amd"],
.nc-compare-stacked--vendor-pair[data-vendor-a="amd"] { --nc-va-color: var(--vendor-amd); }
.nc-compare-table-wrap--vendor-pair[data-vendor-a="ati"],
.nc-compare-stacked--vendor-pair[data-vendor-a="ati"] { --nc-va-color: var(--vendor-ati); }
.nc-compare-table-wrap--vendor-pair[data-vendor-a="intel"],
.nc-compare-stacked--vendor-pair[data-vendor-a="intel"] { --nc-va-color: var(--vendor-intel); }
.nc-compare-table-wrap--vendor-pair[data-vendor-b="nvidia"],
.nc-compare-stacked--vendor-pair[data-vendor-b="nvidia"] { --nc-vb-color: var(--vendor-nvidia); }
.nc-compare-table-wrap--vendor-pair[data-vendor-b="amd"],
.nc-compare-stacked--vendor-pair[data-vendor-b="amd"] { --nc-vb-color: var(--vendor-amd); }
.nc-compare-table-wrap--vendor-pair[data-vendor-b="ati"],
.nc-compare-stacked--vendor-pair[data-vendor-b="ati"] { --nc-vb-color: var(--vendor-ati); }
.nc-compare-table-wrap--vendor-pair[data-vendor-b="intel"],
.nc-compare-stacked--vendor-pair[data-vendor-b="intel"] { --nc-vb-color: var(--vendor-intel); }

.nc-compare-table-wrap--vendor-pair {
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(to right, var(--nc-va-color) 50%, var(--nc-vb-color) 50%) border-box;
}

.nc-compare-stacked--vendor-pair {
    border-top: 3px solid transparent;
    background:
        linear-gradient(var(--nc-bg), var(--nc-bg)) padding-box,
        linear-gradient(to right, var(--nc-va-color) 50%, var(--nc-vb-color) 50%) border-box;
}

.nc-compare-preset-card:hover,
.nc-compare-preset-card:focus {
    background:
        linear-gradient(#eef3f6, #eef3f6) padding-box,
        linear-gradient(to right, var(--nc-va-color, var(--vendor-nvidia)) 50%, var(--nc-vb-color, var(--vendor-nvidia)) 50%) border-box;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--nc-va-color, var(--vendor-nvidia)) 14%, transparent);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Pills on the dark homepage spotlight section. The interior must be opaque:
   a translucent first layer lets the vendor border gradient bleed through and
   the pills render as solid red/green blocks. */
.nc-home-compare-spotlight .nc-compare-preset-card {
    background:
        linear-gradient(#141c25, #141c25) padding-box,
        linear-gradient(to right, var(--nc-va-color, var(--vendor-nvidia)) 50%, var(--nc-vb-color, var(--vendor-nvidia)) 50%) border-box;
    color: var(--nc-text);
}

.nc-home-compare-spotlight .nc-compare-preset-card:hover,
.nc-home-compare-spotlight .nc-compare-preset-card:focus {
    background:
        linear-gradient(#1d2937, #1d2937) padding-box,
        linear-gradient(to right, var(--nc-va-color, var(--vendor-nvidia)) 50%, var(--nc-vb-color, var(--vendor-nvidia)) 50%) border-box;
    color: var(--nc-text);
}

/* ── Stacked view ── */
.nc-compare-stacked {
    display: grid;
    gap: 1.5rem;
}

.nc-compare-stacked[hidden] {
    display: none;
}

.nc-compare-stacked-section__title {
    margin: 0 0 0.65rem;
    font-size: 0.9rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--nc-text-muted);
}

.nc-compare-stacked-row {
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    background: var(--nc-surface-1);
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.nc-compare-stacked-row__label {
    padding: 0.6rem 0.9rem;
    background: var(--nc-surface-3);
    color: var(--nc-text-strong);
    font-weight: 800;
    font-size: 0.92rem;
}

.nc-compare-stacked-row__label small {
    display: block;
    color: var(--nc-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}

.nc-compare-stacked-row__values {
    display: grid;
}

.nc-compare-stacked-value {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-top: 1px solid var(--nc-border-soft);
    background: var(--nc-surface-1);
    color: var(--nc-text);
    font-size: 0.93rem;
}

.nc-compare-stacked-value:first-child {
    border-top: none;
}

.nc-compare-stacked-value__gpu {
    flex: 0 0 auto;
    min-width: 140px;
    color: var(--nc-text-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.nc-compare-stacked-value__data {
    flex: 1 1 auto;
    color: var(--nc-text-strong);
    font-weight: 700;
}

.nc-compare-stacked-value.nc-compare-cell--better {
    box-shadow: inset 3px 0 0 var(--nc-green);
    background: color-mix(in srgb, var(--nc-green) 9%, var(--nc-surface-1));
}

.nc-compare-stacked-value.nc-compare-cell--unknown,
.nc-compare-stacked-value.nc-compare-cell--not-applicable,
.nc-compare-stacked-value.nc-compare-cell--incompatible {
    opacity: 0.6;
}

/* ── nc-compare-cell--ok (used by row ordering JS querySelector) ── */
.nc-compare-cell--ok {
    /* no override needed — serves as presence marker */
}

/* ── Responsive: stacked selector grid below 860 ── */
@media (max-width: 860px) {
    .nc-compare-stacked-value__gpu {
        min-width: 100px;
    }

    .nc-compare-view-controls {
        gap: 0.55rem 1rem;
    }
}

@media (max-width: 620px) {
    /* Table pill, Stacked pill, and the row-order select stay one compact
       row instead of stacking: the toggle keeps its natural width and the
       select flexes into whatever room is left, shrinking (with ellipsis)
       rather than wrapping or overflowing. */
    .nc-compare-view-controls {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .nc-compare-row-order {
        flex: 1 1 auto;
        min-width: 0;
    }

    .nc-compare-row-order__select {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .nc-compare-preset-grid {
        flex-direction: column;
    }

    .nc-compare-preset-card {
        border-radius: 6px;
        justify-content: center;
        text-align: center;
    }

    .nc-combobox-list {
        max-height: 220px;
    }
}

/* ── Mobile table: compact for all GPU counts ── */
@media (max-width: 640px) {
    .nc-compare-table-wrap .nc-compare-table {
        font-size: 0.78rem;
        word-break: break-word;
        /* table-layout: auto treats a cell's width/max-width as mere hints
           that get overridden once other cells' content demands more room
           (confirmed: the 40%/max-width:150px attempt below still rendered
           at 271px). Fixed layout makes the first row's cell widths
           authoritative instead. */
        table-layout: fixed;
    }

    .nc-compare-table-wrap .nc-compare-table th,
    .nc-compare-table-wrap .nc-compare-table td {
        padding: 0.42rem 0.5rem;
    }

    .nc-compare-table-wrap .nc-compare-table thead th {
        font-size: 0.72rem;
    }

    .nc-compare-table-wrap .nc-compare-table th:first-child {
        /* Was 36%; with table-layout: fixed a percentage still resolves
           against the table's own (now-bounded) min-width, so this uses an
           explicit pixel width instead for a truly stable SPEC column. */
        width: 140px;
    }

    .nc-compare-table-wrap .nc-compare-table small {
        font-size: 0.72rem;
    }

    /* The mobile td padding above (0.42rem 0.5rem) collapses the bottom
       padding a bar cell needs below 0.42rem, while .nc-compare-bar still
       sits bottom: 0.5rem up from the padding edge. With less padding-bottom
       reserved than that offset, the bar renders above the padding edge and
       lands on top of the "N games" note instead of below it. Restore enough
       bottom padding on mobile to clear the bar (0.5rem offset + 3px height)
       with a bit of breathing room above the note. */
    .nc-compare-table-wrap .nc-compare-table td.nc-compare-cell--has-bar {
        padding-bottom: 1.1rem;
    }

    /* Per-count min-widths: 2-GPU fits without scroll; 3-4 GPU scroll but stay compact */
    .nc-compare-table-wrap[data-gpu-count="2"] .nc-compare-table {
        min-width: 0;
    }

    .nc-compare-table-wrap[data-gpu-count="3"] .nc-compare-table {
        min-width: 580px;
    }

    .nc-compare-table-wrap[data-gpu-count="4"] .nc-compare-table {
        min-width: 740px;
    }
}

/* ══════════════════════════════════════════════
   HOMEPAGE REDESIGN
══════════════════════════════════════════════ */

/* ── Hero ── */
.nc-home-hero {
    background: linear-gradient(160deg, #0d1520 0%, var(--nc-bg) 55%, #0e1a10 100%);
    color: var(--nc-text);
    /* Vertical rhythm lives on .nc-home-hero__inner in design-system.css;
       outer padding here would double it. */
    padding: 0;
}

.nc-home-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem 4rem;
    align-items: center;
}

.nc-home-hero__h1 {
    margin: 0 0 0.9rem;
    color: var(--nc-text);
    font-size: clamp(1.75rem, 3.5vw, 2.6rem);
    line-height: 1.2;
}

.nc-home-hero__sub {
    color: #c7d0da;
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0;
}

/* .nc-home-proof's actual styling now lives entirely in design-system.css
   (which loads after this file and wins ties at equal specificity): a single
   compact row instead of the old 3-column grid this file used to describe. */

/* ── Hero search ── */
.nc-home-hero__search {
    width: 100%;
}

.nc-home-search-row {
    display: flex;
    align-items: center;
    background: #182130;
    border: 1px solid #2d3f55;
    border-radius: 10px;
    padding: 0.1rem 0.1rem 0.1rem 0.85rem;
    gap: 0.5rem;
    transition: border-color 0.15s;
}

.nc-home-search-row:focus-within {
    border-color: var(--nc-green);
}

.nc-home-search-icon {
    color: var(--nc-muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.nc-home-search-row input[type="search"] {
    flex: 1 1 auto;
    background: transparent;
    border: none;
    outline: none;
    color: var(--nc-text);
    font-size: 1rem;
    padding: 0.6rem 0;
    min-width: 0;
}

.nc-home-search-row input[type="search"]::placeholder {
    color: #6a7d90;
}

.nc-home-search-row button {
    flex-shrink: 0;
    background: var(--nc-green);
    color: #fff;
    border: none;
    border-radius: 7px;
    padding: 0.5rem 1.1rem;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
    transition: background 0.14s;
}

.nc-home-search-row button:hover {
    background: var(--nc-green-dark);
}

.nc-home-search-hints {
    margin: 0.6rem 0 0;
    font-size: 0.86rem;
    color: #7a8fa3;
}

.nc-home-search-hints a {
    color: #91aec5;
    text-decoration: none;
}

.nc-home-search-hints a:hover {
    color: var(--nc-green);
}

/* ── Generic section ── */
.nc-home-section {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.nc-home-section--light {
    background: #f7f9fb;
}

.nc-home-section--dark {
    background: linear-gradient(180deg, #101720, #0b0f14);
    color: var(--nc-text);
}

.nc-home-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.nc-home-section-head h2 {
    margin: 0;
    font-size: clamp(1.25rem, 2.5vw, 1.65rem);
    color: var(--nc-text-dark);
}

.nc-home-section-head--dark h2 {
    color: var(--nc-text);
}

.nc-home-section-head--dark .nc-kicker {
    color: var(--nc-green);
}

.nc-section-more {
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--nc-green-dark);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.14s;
}

.nc-section-more:hover {
    border-color: var(--nc-green-dark);
}

/* .nc-home-arch-chips / .nc-home-arch-chip: removed in the 2026-09 homepage
   editorial redesign (the "Browse by GPU architecture" chip wall). */

.nc-chip-count {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0 0.45rem;
    color: #b0c8d8;
}

/* ── Article grid ── */
.nc-article-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.nc-article-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s;
}

.nc-article-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
}

.nc-article-card__thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #e4edf4;
}

.nc-article-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.22s;
}

.nc-article-card:hover .nc-article-card__thumb img {
    transform: scale(1.04);
}

.nc-article-card__thumb--empty {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #dce8f0, #eef3f6);
}

.nc-article-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1rem 1.1rem 1.2rem;
    gap: 0.35rem;
}

.nc-article-card__date {
    font-size: 0.8rem;
    color: var(--nc-muted);
    font-weight: 600;
}

.nc-article-card__title {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.35;
}

.nc-article-card__title a {
    color: var(--nc-text-dark);
    text-decoration: none;
}

.nc-article-card__title a:hover {
    color: var(--nc-green-dark);
}

.nc-article-card__excerpt {
    margin: 0;
    font-size: 0.88rem;
    color: var(--nc-muted);
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

/* ── Vendor pills ── */
.nc-vendor-pills {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.1rem;
    margin-bottom: 1.4rem;
}

.nc-vendor-pills::-webkit-scrollbar {
    display: none;
}

.nc-vendor-pill {
    --vendor-tab-accent: var(--vendor-mixed);
    --vendor-tab-contrast: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    color: var(--nc-text);
    background: transparent;
    transition: background 0.13s, border-color 0.13s, color 0.13s;
}

.nc-vendor-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    height: 1.45rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    color: currentColor;
    font-size: 0.72rem;
    line-height: 1;
}

.vendor-tab--nvidia {
    --vendor-tab-accent: var(--vendor-nvidia);
    --vendor-tab-contrast: #071000;
}

.vendor-tab--amd {
    --vendor-tab-accent: var(--vendor-amd);
    --vendor-tab-contrast: #fff;
}

.vendor-tab--ati {
    --vendor-tab-accent: var(--vendor-ati);
    --vendor-tab-contrast: #fff;
}

.vendor-tab--intel {
    --vendor-tab-accent: var(--vendor-intel);
    --vendor-tab-contrast: #fff;
}

.vendor-tab--others {
    --vendor-tab-accent: var(--vendor-others);
    --vendor-tab-contrast: #fff;
}

.vendor-tab--all {
    --vendor-tab-accent: var(--vendor-mixed);
    --vendor-tab-contrast: #fff;
}

.nc-vendor-pill.is-active {
    background: var(--vendor-tab-accent);
    border-color: var(--vendor-tab-accent);
    color: var(--vendor-tab-contrast);
}

.nc-vendor-pill.is-active .nc-vendor-pill-count {
    background: color-mix(in srgb, currentColor 18%, transparent);
}

/* ── Vendor blurb ── */
.nc-vendor-blurb-wrap {
    margin-bottom: 0.75rem;
}

.nc-vendor-blurb {
    font-size: 0.85rem;
    color: var(--nc-muted);
    line-height: 1.55;
    max-width: 56rem;
    border-left: 2px solid rgba(255, 255, 255, 0.15);
    padding-left: 0.85rem;
    margin: 0;
}

/* ── All-view popular series compact grid ── */
.nc-popular-series-all {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.nc-popular-series-vendor-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.nc-popular-series-vendor-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gpu-vendor-accent, var(--nc-muted));
    margin: 0;
}

/* ── Start here grid ── */
.nc-start-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.nc-start-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--nc-radius);
    padding: 1.2rem 1.3rem;
    text-decoration: none;
    transition: background 0.14s, border-color 0.14s;
}

.nc-start-card:hover,
.nc-start-card:focus {
    background: rgba(99, 184, 33, 0.1);
    border-color: rgba(99, 184, 33, 0.45);
    outline: none;
}

.nc-start-card__title {
    color: var(--nc-text);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

.nc-start-card__desc {
    color: #8faabb;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ── Homepage responsive ── */
@media (max-width: 900px) {
    .nc-home-hero__inner {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .nc-home-hero__sub {
        max-width: none;
    }

    .nc-article-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nc-start-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {
    .nc-home-section-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .nc-article-grid {
        grid-template-columns: 1fr;
    }

    .nc-start-grid {
        grid-template-columns: 1fr;
    }
}

/* Coming-soon vendor tiles (Others page subbrand list) */
.nc-coming-soon-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.nc-coming-soon-tile {
    border: 1px solid rgba(217, 225, 232, 0.18);
    border-radius: 6px;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    opacity: 0.7;
}

.nc-coming-soon-tile__badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #9aabb8;
    background: rgba(154, 171, 184, 0.12);
    border-radius: 3px;
    padding: 0.1em 0.45em;
    margin-bottom: 0.35rem;
}

.nc-coming-soon-tile p {
    margin: 0;
    font-size: 0.88rem;
    color: #9aabb8;
    line-height: 1.4;
}

/* Board partner card variants (single GPU page section) */
.nc-gpu-board-partners {
    margin: 1.25rem 0;
}

.nc-gpu-board-partners .nc-partner-intro {
    margin: 0 0 1rem;
    color: var(--nc-muted);
    font-size: 0.92rem;
}

.nc-partner-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.nc-partner-card {
    border: 1px solid var(--nc-border);
    border-radius: var(--nc-radius);
    background: #fff;
    padding: 0.9rem;
}

.nc-partner-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    cursor: pointer;
    list-style: none;
}

.nc-partner-card-header::-webkit-details-marker {
    display: none;
}

.nc-partner-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--nc-text-dark);
    flex: 1 1 auto;
    min-width: 0;
}

.nc-partner-toggle::before {
    content: "\25B8";
    display: inline-block;
    color: var(--nc-muted);
    font-size: 0.85rem;
    transition: transform 0.15s ease;
}

.nc-partner-card[open] .nc-partner-toggle::before {
    transform: rotate(90deg);
}

.nc-partner-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding-top: 0.8rem;
}

.nc-partner-full-link-row {
    margin: 0;
    font-size: 0.84rem;
}

.nc-partner-badge,
.nc-partner-oc-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.nc-partner-badge {
    background: var(--nc-surface-2);
    color: var(--nc-text);
}

.nc-partner-oc-badge {
    background: var(--nc-green);
    color: #0b0f14;
}

.nc-partner-full-link {
    margin-left: auto;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--nc-green-dark);
}

.nc-partner-meta {
    margin: 0;
    font-size: 0.84rem;
    color: var(--nc-muted);
}

.nc-partner-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.nc-partner-gallery img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--nc-border);
    display: block;
}

.nc-partner-delta {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.nc-partner-delta th,
.nc-partner-delta td {
    text-align: left;
    padding: 0.3rem 0.45rem;
    border-bottom: 1px solid var(--nc-border);
    color: var(--nc-text-dark);
}

.nc-partner-delta thead th {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--nc-muted);
}

.nc-partner-delta tbody th {
    font-weight: 600;
    white-space: nowrap;
}

.nc-partner-bundle h4,
.nc-partner-collector h4 {
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
    color: var(--nc-text-dark);
}

.nc-partner-bundle,
.nc-partner-collector,
.nc-partner-notes {
    font-size: 0.86rem;
    color: var(--nc-text-dark);
}

.nc-partner-bundle p,
.nc-partner-collector p,
.nc-partner-notes p {
    margin: 0 0 0.4rem;
}

.nc-partner-parent-link {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--nc-muted);
}

.nc-partner-parent-link a {
    color: var(--nc-green);
    font-weight: 600;
}

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

/* ── 2026-07 presentation pass ─────────────────────────────────────────────── */

/* Fully dark homepage: adjacent dark sections need a faint seam to stay legible
   as separate bands. */
.nc-home .nc-home-section--dark,
.nc-home .nc-home-compare-spotlight,
.nc-home .nc-home-start {
    border-top: 1px solid #1b2530;
}

/* Homepage wiki grid: six entries should split 3+3, not 4+2. */
@media (min-width: 1024px) {
    .nc-home .nc-gpu-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Section "more" links on dark sections */
.nc-home-section--dark .nc-section-more {
    color: var(--nc-green);
}

/* Article cards keep their light body on the dark section; give the border a
   dark-friendly tone so cards don't glow at the edges. */
.nc-home-section--dark .nc-article-card {
    border-color: #223041;
}

/* Keep legacy article layout helpers on the shared dark reading surface. */
body.single-post {
    background: var(--nc-bg);
}

/* Body copy shares the same column width as article figures/media (900px),
   so text and comparison stills line up instead of a narrow prose gutter. */
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > blockquote,
.single-post .entry-content > h2,
.single-post .entry-content > h3,
.single-post .entry-content > h4 {
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
}

.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > blockquote {
    color: var(--nc-text);
}

.nc-article-breadcrumb {
    width: min(900px, 100%);
    margin-right: auto;
    margin-left: auto;
}

.nc-article-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    margin-bottom: 1.2rem;
    color: var(--nc-text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
}

.nc-article-breadcrumb a {
    font-weight: 700;
    text-decoration: none;
}

.nc-article-related {
    width: min(1100px, 100%);
    margin: 4rem auto 0;
    padding: 2rem;
    border-top: 3px solid var(--nc-green);
    background: var(--nc-surface-1);
}

.nc-article-related__heading {
    margin-bottom: 1.25rem;
}

.nc-article-related__heading h2 {
    margin: 0;
    color: var(--nc-text-strong);
    font-size: 1.6rem;
}

.nc-article-related__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.nc-article-related-card {
    overflow: hidden;
    border: 1px solid var(--nc-border);
    background: var(--nc-surface-2);
}

.nc-article-related-card__image {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #0b0f14;
}

.nc-article-related-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nc-article-related-card__body {
    padding: 1rem;
}

.nc-article-related-card h3 {
    margin: 0 0 0.55rem;
    font-size: 1rem;
    line-height: 1.35;
}

.nc-article-related-card h3 a {
    color: var(--nc-text-strong);
    text-decoration: none;
}

.nc-article-related-card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--nc-text-secondary);
    font-size: 0.86rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.nc-article-next-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.4rem;
}

.nc-article-next-actions a {
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--nc-border);
    background: var(--nc-surface-inset);
    color: var(--nc-text-strong) !important;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.nc-article-next-actions a:hover {
    border-color: var(--nc-border-strong);
    color: var(--nc-link-hover) !important;
}

.single-post .entry-content a:not(.nc-button):not(.wp-block-button__link) {
    color: var(--nc-link);
    text-decoration-color: color-mix(in srgb, var(--nc-link) 45%, transparent);
}

.single-post .entry-content a:not(.nc-button):not(.wp-block-button__link):hover {
    color: var(--nc-link-hover);
}

/* Market Watch pages: the plugin renders its own hero, so the theme page title
   above it duplicates the same message. Same treatment the homepage already uses. */
body.page-id-5242 .hero-section.is-width-constrained {
    display: none;
}

@media (max-width: 689px) {
    .single-post .hero-section .page-title {
        line-height: 1.2;
    }

    .nc-article-related {
        margin-top: 3rem;
        padding: 1.25rem 1rem;
    }

    .nc-article-related__grid {
        grid-template-columns: 1fr;
    }
}

/* ── 2026-07-27 discovery and mobile polish ─────────────────────────────── */

/* Give the latest archive story a clear lead position without changing the
   semantic article order or hiding subsequent stories from search engines. */
@media (min-width: 1000px) {
    body.blog .entries {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.blog .entries > .entry-card:first-child {
        grid-column: span 2;
    }

    body.blog .entries > .entry-card:first-child .entry-title {
        font-size: clamp(1.35rem, 2vw, 1.85rem);
    }
}

/* Long-form prose uses a narrower measure than wide technical media so readers
   can reliably find the next line without making diagrams or tables cramped. */
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > blockquote {
    font-size: 1.125rem;
    line-height: 1.75;
}

.single-post .entry-content > .wp-block-table,
.single-post .entry-content > table,
.single-post .entry-content > figure,
.single-post .entry-content > .wp-block-html {
    width: min(900px, 100%);
    max-width: 900px;
    margin-right: auto;
    margin-left: auto;
}

/* The figure box above centers itself in the column, but that leaves an
   <img> narrower than 900px sitting at the box's left edge, since a block
   image has no auto horizontal centering of its own. A full-bleed screenshot
   (>=900px wide) never showed this; a smaller vendor thumbnail did. */
.single-post .entry-content > figure img {
    display: block;
    margin-inline: auto;
}

/* The full filter catalog is a disclosure on every viewport now; the compact
   quick-browse rail plus search carry the common cases. Summary styling lives
   in design-system.css. */
.nc-wiki-filters {
    margin-top: 0;
}

.nc-compare-optional {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(217, 225, 232, 0.18);
    padding-top: 0.75rem;
}

.nc-compare-optional > summary {
    /* Matches the GPU selector inputs' own box (min-height, border, radius,
       inset) so the collapsed row reads as part of the same selector stack
       instead of a smaller, unboxed line of text. display: flex (needed to
       center the marker and text together) overrides summary's native
       display: list-item, which silently drops the native ::marker triangle
       -- so the arrow below is a hand-drawn replacement, not decoration. */
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--nc-border-strong);
    border-radius: var(--nc-radius-sm);
    background: var(--nc-surface-inset);
    padding-inline: 0.65rem;
    color: var(--nc-green);
    cursor: pointer;
    font-size: 0.88rem;
    font-weight: 800;
    list-style: none;
}

.nc-compare-optional > summary::-webkit-details-marker {
    display: none;
}

.nc-compare-optional > summary::before {
    content: "";
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent currentColor;
    transition: transform 0.15s ease;
}

.nc-compare-optional[open] > summary::before {
    transform: rotate(90deg);
}

.nc-compare-optional__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-top: 0.75rem;
}

@media (max-width: 689px) {
    .single-post .entry-content > p,
    .single-post .entry-content > ul,
    .single-post .entry-content > ol,
    .single-post .entry-content > blockquote {
        font-size: 1.0625rem;
        line-height: 1.72;
    }

    .nc-home-hero__inner {
        gap: 1rem;
    }

    .nc-home-hero__sub {
        font-size: 0.94rem;
        line-height: 1.5;
    }

    .nc-home-search-hints {
        display: none;
    }

    .nc-gpu-wiki-utility {
        padding-top: 1.1rem;
        padding-bottom: 1.1rem;
    }

    .nc-gpu-hero-search-control {
        margin: 0 0 0.85rem;
    }

    .nc-vendor-pills {
        margin-bottom: 0.65rem;
    }

    .nc-vendor-blurb-wrap {
        display: none;
    }

    .nc-compare-optional__grid {
        grid-template-columns: 1fr;
    }

    .nc-gpu-header .nc-at-a-glance {
        margin-top: 1rem;
    }

    .nc-gpu-header .nc-confidence-banner,
    .nc-gpu-header .nc-gpu-compare-cta {
        padding: 0.7rem 0.8rem;
        font-size: 0.86rem;
    }

    .nc-articles-intro {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .nc-articles-intro > p:last-child {
        display: -webkit-box;
        overflow: hidden;
        line-height: 1.55;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    .nc-article-breadcrumb {
        flex-wrap: nowrap;
        overflow: hidden;
        white-space: nowrap;
    }

    .nc-article-breadcrumb span:last-of-type,
    .nc-article-breadcrumb span:last-of-type + * {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* Useful, low-maintenance landing cards for secondary sections. */
.nc-page-lead {
    max-width: 760px;
    color: #425363;
    font-size: 1.12rem;
    line-height: 1.65;
}

.nc-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.nc-hub-card {
    display: grid;
    gap: 0.45rem;
    border: 1px solid #d9e1e8;
    border-left: 4px solid var(--nc-green);
    border-radius: 7px;
    background: #fff;
    color: var(--nc-text-dark);
    padding: 1.1rem 1.2rem;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(11, 15, 20, 0.05);
}

.nc-hub-card:hover,
.nc-hub-card:focus {
    border-color: var(--nc-green);
    color: var(--nc-text-dark);
    transform: translateY(-2px);
}

.nc-hub-card strong {
    font-size: 1.05rem;
}

.nc-hub-card span {
    color: var(--nc-muted);
    font-size: 0.92rem;
    line-height: 1.55;
}

.nc-forum-intro {
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--nc-green);
    background: #f3f6f8;
    padding: 1.25rem 1.4rem;
}

.nc-forum-intro h2 {
    margin: 0 0 0.45rem;
    color: var(--nc-text-strong);
}

.nc-forum-intro p:last-child {
    margin-bottom: 0;
    color: var(--nc-text-secondary);
}

body.page-id-5209 #wpforo {
    --wpf-color: #102633;
    font-family: inherit;
}

body.page-id-5209 #wpforo #wpforo-wrap {
    border-color: #d9e1e8;
    box-shadow: 0 10px 28px rgba(11, 15, 20, 0.07);
}

@media (max-width: 689px) {
    .nc-hub-grid {
        grid-template-columns: 1fr;
    }
}