/* ==========================================================================
   compare — /compare route module. Compare-specific layout (hero, category
   map, comparison matrix, verdict grid, FAQ, CTA, state marks) plus the
   .compare-matrix overrides of the shared kit. Loads AFTER the kit, core-first:
   site.css -> pricing-compare.css -> compare.css. Compare no longer loads
   pricing.css, so the old inherited-mobile-chip behaviour is gone and these
   rules need no priority overrides — authored at natural specificity, zero of
   them (ticket 07 exit gate). Migrated out of site.css 2026-09-03 (ticket 07).
   ========================================================================== */

.compare-hero {
    padding: 112px 0 var(--space-7);
    text-align: center;
}
.compare-hero h1 {
    max-width: 820px;
    margin-inline: auto;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
}
.compare-hero .hero-sub {
    max-width: 650px;
    margin: var(--space-4) auto 0;
}
/* Hero CTA: centred below the lede at every width. Text-align:center on the hero
   does not centre a flex row, so justify it here; the ≤580px stack/centre + touch
   sizing comes from the global rollout-#08 rule. */
.compare-hero .hero-actions {
    justify-content: center;
    margin-top: var(--space-5);
    margin-bottom: 0;
}
.compare-breadcrumb {
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.compare-breadcrumb::before { content: none; }
.compare-breadcrumb a { color: inherit; }
.compare-breadcrumb a:hover { color: var(--teal); }
@media (max-width: 768px) {
    /* Only override the bottom rhythm: the shared `@media(max-width:768px){.hero{padding-top:112px}}`
       in site.css (which loads before this file) sets the 112px top, matching the pre-split render. */
    .compare-hero { padding-bottom: var(--space-6); }
    .compare-hero .hero-sub { font-size: 1rem; }
}

.compare-overview-section {
    position: relative;
    z-index: 1;
    overflow: visible;
    padding: var(--space-8) 0 var(--space-7);
    background:
        radial-gradient(circle at 84% 30%, var(--teal-05), transparent 32%),
        linear-gradient(180deg, transparent, rgba(21, 27, 51, 0.18) 52%, transparent);
}
.compare-overview-section::before {
    content: none;
}
.compare-overview-section > .container { position: relative; z-index: 2; }
.compare-overview-section .section-head { margin-bottom: var(--space-6); }
.compare-model-map {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: var(--space-5);
    background:
        radial-gradient(circle at 72% 28%, var(--teal-10), transparent 34%),
        linear-gradient(180deg, var(--card), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
/* The direct-comparison aside carries u-mt-60 (60px top gap). That utility lives in site.css,
   which now loads before this file, so .compare-model-map's margin shorthand above would zero it.
   Restore it at higher specificity to keep the aside's spacing pixel-identical. */
.compare-model-map.compare-direct-card { margin-top: 60px; }
/* Direct comparisons: one compact row per /compare/vornin-vs-* page; the whole row is the link. */
.compare-direct-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.compare-direct-item {
    position: relative;
    padding: var(--space-4);
    background: var(--bg-50);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    transition: border-color 0.2s ease;
}
.compare-direct-item:hover,
.compare-direct-item:focus-within { border-color: var(--teal-35); }
.compare-direct-item h3 {
    margin: 0 0 var(--space-1);
    font-size: 1rem;
    line-height: 1.35;
}
.compare-direct-link {
    color: var(--ink);
    text-decoration: none;
}
.compare-direct-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}
.compare-direct-arrow {
    display: inline-block;
    margin-left: var(--space-2);
    color: var(--teal);
    transition: transform 0.2s ease;
}
.compare-direct-item:hover .compare-direct-arrow { transform: translateX(3px); }
.compare-direct-item p {
    margin: 0;
    color: var(--ink-2);
    font-size: 0.875rem;
    line-height: 1.5;
}
@media (max-width: 680px) {
    .compare-direct-list { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .compare-model-map.compare-direct-card { padding: var(--space-4); }
    .compare-direct-item { padding: var(--space-3); }
    .compare-direct-arrow { margin-left: var(--space-1); }
}
@media (prefers-reduced-motion: reduce) {
    .compare-direct-arrow { transition: none; }
}
.compare-model-map::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 1px 0 var(--border-soft);
}
.compare-model-map::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 720px;
    aspect-ratio: 1;
    top: -500px;
    right: -500px;
    pointer-events: none;
    background: linear-gradient(135deg, transparent 8%, var(--ice) 44%, var(--teal) 62%, transparent 86%);
    opacity: 0.13;
    filter: drop-shadow(0 0 28px rgba(0, 191, 255, 0.12));
    -webkit-mask: url("/vornin-mark.svg") center / contain no-repeat;
    mask: url("/vornin-mark.svg") center / contain no-repeat;
}
@media (min-width: 681px) {
    .compare-model-map { max-width: none; }
}
.compare-map-summary {
    position: relative;
    z-index: 1;
    margin: 0 0 var(--space-4);
    color: var(--ink-soft);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.45;
}
.compare-map-chart {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) 80px;
    grid-template-areas:
        "evidence plot ."
        ". coverage .";
    gap: var(--space-3);
}
.compare-map-plot {
    grid-area: plot;
    position: relative;
    min-width: 0;
    min-height: 560px;
    border: 1px solid var(--border-soft);
}
.compare-map-grid {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.85;
    background:
        linear-gradient(to right, transparent 24.9%, var(--border-soft) 25%, transparent 25.1%),
        linear-gradient(to right, transparent 74.9%, var(--border-soft) 75%, transparent 75.1%),
        linear-gradient(to bottom, transparent 24.9%, var(--border-soft) 25%, transparent 25.1%),
        linear-gradient(to bottom, transparent 74.9%, var(--border-soft) 75%, transparent 75.1%);
}
.compare-map-grid::before,
.compare-map-grid::after {
    content: "";
    position: absolute;
    background: var(--ice-border);
    box-shadow: 0 0 14px rgba(181, 229, 255, 0.08);
}
.compare-map-grid::before {
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-1px);
}
.compare-map-grid::after {
    top: 50%;
    right: 0;
    left: 0;
    height: 2px;
    transform: translateY(-1px);
}
.compare-map-models { margin: 0; padding: 0; list-style: none; }
.compare-map-mobile-coverage-axis,
.compare-map-mobile-band { display: none; }
.compare-map-model {
    position: absolute;
    z-index: 3;
    width: 176px;
    padding: 10px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-card);
}
.compare-map-model strong,
.compare-map-model span { display: block; }
.compare-map-model strong { color: var(--ink-soft); font-size: 0.8125rem; }
.compare-map-model span { color: var(--ink-3); font-size: 0.6875rem; }
/* Specificity note: .compare-map-model span (below) sets display:block at (0,1,1);
   scope this to .compare-map-model to win at (0,2,0) by specificity alone. */
.compare-map-model .compare-map-metrics { display: grid; gap: 3px; margin-top: var(--space-2); }
.compare-map-metrics span { margin: 0; }
.compare-map-metrics b {
    display: block;
    margin-bottom: 1px;
    color: var(--ink-2);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.compare-map-model--specialist { left: 3%; top: 60%; }
.compare-map-model--diy { left: 28%; top: 70%; }
.compare-map-model--self-serve { left: 53%; top: 57%; width: 180px; }
.compare-map-model--enterprise { right: 3%; top: 6%; width: 190px; }
.compare-map-model--grc { left: 3%; top: 6%; width: 190px; }
.compare-map-model--vornin {
    left: 53%;
    top: 30%;
    width: 180px;
    background: var(--teal-dim);
    border-color: var(--teal-35);
    box-shadow: inset 0 1px 0 var(--teal-20), var(--glow-teal-soft);
}
.compare-map-model--vornin strong { color: var(--ink); }
.compare-map-model--vornin span { color: var(--teal); }
.compare-map-model--vornin .compare-map-model-type {
    margin-top: 5px;
    color: var(--ink-soft);
    font-size: 0.6875rem;
}
.compare-map-wordmark {
    display: block;
    width: 86px;
    height: auto;
}
.compare-map-scale {
    color: var(--ink-3);
    font-size: 0.6875rem;
    line-height: 1.35;
}
.compare-map-scale > span {
    font-weight: 700;
}
.compare-map-end--high { color: var(--ice); }
.compare-map-end--low { color: var(--ink-3); }
.compare-map-scale strong {
    color: var(--ink-2);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}
.compare-map-scale--evidence {
    grid-area: evidence;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    justify-items: end;
    padding: 3px 0;
    text-align: right;
}
.compare-map-scale--evidence .compare-map-end--high { align-self: start; }
.compare-map-scale--evidence strong { align-self: center; }
.compare-map-scale--evidence .compare-map-end--low { align-self: end; }
.compare-map-scale--coverage {
    grid-area: coverage;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
}
.compare-map-scale--coverage span:last-child {
    text-align: right;
}
.compare-map-note {
    max-width: 780px;
    margin: var(--space-3) auto 0;
    color: var(--ink-3);
    font-size: 0.6875rem;
    line-height: 1.45;
    text-align: center;
}
.compare-map-definitions {
    max-width: 980px;
    margin: var(--space-6) auto 0;
}
.compare-map-definitions h3 {
    margin: 0 0 var(--space-4);
    color: var(--ink);
    font-size: 1.25rem;
}
.compare-map-definitions dl,
.compare-map-definitions dd {
    margin: 0;
}
.compare-map-definitions dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
}
.compare-map-definitions dl > div {
    padding-top: var(--space-3);
    border-top: 1px solid var(--ice-border);
}
.compare-map-definitions dt {
    margin-bottom: var(--space-2);
    color: var(--ink-soft);
    font-size: 0.8125rem;
    font-weight: 700;
}
.compare-map-definitions dd {
    color: var(--ink-3);
    font-size: 0.75rem;
    line-height: 1.55;
}
@media (max-width: 680px) {
    .compare-overview-section { padding: var(--space-7) 0 var(--space-6); }
    .compare-model-map::after { width: 520px; top: -360px; right: -370px; }
    .compare-model-map { padding: var(--space-5); }
    .compare-map-chart { display: block; }
    .compare-map-scale,
    .compare-map-grid { display: none; }
    .compare-map-plot {
        min-height: 0;
        border: 0;
    }
    .compare-map-models {
        position: relative;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3) var(--space-2);
    }
    .compare-map-mobile-coverage-axis {
        display: flex;
        grid-column: 1 / -1;
        justify-content: space-between;
        gap: var(--space-3);
        color: var(--ink-3);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }
    .compare-map-mobile-coverage-axis span {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .compare-map-mobile-coverage-axis i {
        color: var(--ice);
        font-size: 0.875rem;
        font-style: normal;
        line-height: 1;
    }
    .compare-map-mobile-band {
        display: block;
        grid-column: 1 / -1;
        margin-top: var(--space-2);
        padding: 0 0 var(--space-2);
        color: var(--ice);
        border-bottom: 1px solid var(--ice-border);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.055em;
        text-transform: uppercase;
    }
    .compare-map-model {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: var(--space-3);
        transform: none;
    }
    .compare-map-model strong { font-size: 0.75rem; }
    .compare-map-model span { font-size: 0.625rem; }
    .compare-map-wordmark { max-width: 100%; }
    .compare-map-model--grc,
    .compare-map-model--specialist {
        grid-column: 1;
    }
    .compare-map-model--enterprise,
    .compare-map-model--vornin,
    .compare-map-model--self-serve,
    .compare-map-model--diy {
        grid-column: 2;
    }
    .compare-map-definitions {
        margin-top: var(--space-5);
    }
    .compare-map-definitions dl {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
}

.compare-matrix .pricing-bar,
.compare-matrix .pricing-compare-header,
.compare-matrix .pricing-compare-row {
    grid-template-columns: minmax(0, 2.2fr) repeat(5, minmax(0, 1fr));
}
.compare-matrix-section {
    position: relative;
    overflow: visible;
    padding: var(--space-7) 0 var(--space-8);
    background:
        radial-gradient(circle at 8% 52%, rgba(77, 148, 255, 0.045), transparent 28%),
        radial-gradient(circle at 88% 14%, var(--teal-05), transparent 24%);
}
.compare-matrix-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.055;
    background-image: url("/img/blacktrianglegrid20.svg");
    background-size: 220px 220px;
    background-position: right -60px top -80px;
    filter: invert(1);
    -webkit-mask-image: linear-gradient(135deg, transparent 0%, transparent 58%, #000 100%);
    mask-image: linear-gradient(135deg, transparent 0%, transparent 58%, #000 100%);
}
.compare-matrix-section > .container { position: relative; z-index: 2; }
.compare-matrix-section .section-head { margin-bottom: var(--space-6); }
.compare-matrix--baseline {
    margin-top: 0;
    padding: var(--space-5);
    background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 18%), var(--surface);
    border-color: var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}
.compare-matrix--baseline:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
}
.compare-matrix--baseline .pricing-compare-header {
    overflow: hidden;
    gap: 0;
    padding: 0 0 var(--space-3);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    box-shadow: none;
}
.compare-matrix--baseline .pricing-bar-spacer {
    padding: 0;
    background: transparent;
    border-right: 0;
}
.compare-matrix--baseline .pricing-compare-row {
    overflow: hidden;
    border-radius: 0;
    transition: background var(--dur-instant) var(--ease-base);
}
.compare-matrix--baseline .pricing-compare-row:nth-child(even) { background: transparent; }
.compare-matrix--baseline .pricing-compare-row:hover { background: rgba(255, 255, 255, 0.018); }
.compare-matrix--baseline .pricing-compare-feature {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-left: var(--space-4);
    background: transparent;
    border-right: 0;
}
.compare-matrix--baseline .pricing-compare-feature::before {
    content: "\2713";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border-radius: 999px;
    color: var(--teal);
    background: var(--teal-10);
    font-size: 0.75rem;
    font-weight: 800;
    box-shadow: 0 0 14px rgba(0, 191, 255, 0.08);
}
@media (max-width: 1024px) {
    .compare-matrix .pricing-bar,
    .compare-matrix .pricing-compare-header,
    .compare-matrix .pricing-compare-row {
        grid-template-columns: minmax(0, 1.9fr) repeat(5, minmax(0, 1fr));
    }
}
/* Sub-category headers stay neutral; icons are section markers, not status. */
.compare-matrix .pricing-compare-group-title { color: var(--ink-3); }
.compare-matrix .pricing-group-icon,
.compare-matrix .pricing-compare-group:nth-of-type(even) .pricing-group-icon {
    color: var(--ink-3);
}
.compare-matrix--baseline .pricing-compare-feature-name {
    color: var(--ink-soft);
    font-weight: 500;
    line-height: 1.35;
}
.compare-vornin-logo {
    display: block;
    width: 104px;
    max-width: 100%;
    height: auto;
}
.compare-scroll-hint {
    display: none;
    margin: 0 0 var(--space-2);
    color: var(--ink-3);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: right;
    text-transform: uppercase;
}
/* Matrix groups reuse semantic <details>; desktop headings stay inert. */
.compare-matrix summary.pricing-compare-group-title { list-style: none; cursor: default; pointer-events: none; }
.compare-matrix summary.pricing-compare-group-title::-webkit-details-marker { display: none; }
.compare-matrix summary.pricing-compare-group-title::marker { content: ""; }
/* Mobile matrix: no chip soup. Each row is a feature heading followed by a clean
   "model label -> value" list, so uneven archetype labels never blend together.
   Groups collapse (native <details>) to keep the page skimmable. Desktop grid
   above 768px is untouched. Overrides beat the inherited pricing.css chip rules
   by specificity /. */
@media (max-width: 768px) {
    .compare-matrix summary.pricing-compare-group-title {
        cursor: pointer;
        padding: 16px 2px;
        border-bottom: 1px solid var(--teal-20);
    }
    .compare-matrix summary.pricing-compare-group-title::after {
        content: ""; width: 9px; height: 9px; margin-left: auto; flex-shrink: 0;
        border-right: 2px solid var(--ice); border-bottom: 2px solid var(--ice);
        transform: rotate(45deg); transition: transform 0.2s ease;
    }
    .compare-matrix details[open] > summary.pricing-compare-group-title::after {
        transform: rotate(-135deg);
    }
    .compare-matrix .pricing-compare-row {
        display: block;
        padding: 12px 2px 14px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .compare-matrix .pricing-compare-feature { padding: 0 0 6px; }
    .compare-matrix .pricing-compare-cell,
    .compare-matrix .pricing-compare-cell[data-state="no"],
    .compare-matrix .pricing-compare-cell[data-state="partial"],
    .compare-matrix .pricing-compare-cell[data-state="extra"],
    .compare-matrix .pricing-compare-cell[data-state="yes"] {
        display: flex;
        justify-content: space-between; align-items: center; gap: 12px;
        width: auto; margin: 0; padding: 5px 0; min-height: 0;
        background: transparent; border: 0; border-radius: 0;
        font-size: 0.85rem;
    }
    .compare-matrix .pricing-compare-cell::before {
        content: attr(data-tier-label);
        color: var(--ink-3); font-weight: 500; font-size: 0.8125rem;
        letter-spacing: 0; text-align: left; flex: 0 0 auto;
    }
    /* pricing.css appends " · " on partial and drops the marks — undo both. */
    .compare-matrix .pricing-compare-cell[data-state="partial"]::before,
    .compare-matrix .pricing-compare-cell[data-state="yes"]::before {
        content: attr(data-tier-label);
    }
}
/* Matrix legend. */
.compare-legend {
    display: flex; flex-wrap: wrap; gap: 12px 24px;
    margin: 0 0 20px; padding: 0; list-style: none;
    font-size: 0.8125rem; color: var(--ink-2);
}
.compare-legend li { display: flex; align-items: center; gap: 8px; }

.compare-verdict { margin-top: var(--space-8); }
.compare-verdict .section-head { margin-bottom: var(--space-5); }
.compare-verdict-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-4);
}
.compare-verdict-card {
    grid-column: span 2;
    padding: var(--space-5);
    background: rgba(21, 27, 51, 0.72);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    box-shadow: inset 0 1px 0 var(--border-soft);
}
.compare-verdict-card--vornin {
    background: linear-gradient(135deg, var(--teal-10), transparent 56%), rgba(21, 27, 51, 0.82);
    border-color: var(--teal-25);
}
.compare-verdict-icon {
    width: 24px;
    height: 24px;
    color: var(--ice);
}
.compare-verdict-wordmark {
    display: block;
    width: 104px;
    height: 71px;
    object-fit: contain;
    object-position: left top;
}
.compare-verdict-card h3 {
    margin: var(--space-3) 0 var(--space-4);
    color: var(--ink-soft);
    font-size: 1rem;
}
.compare-verdict-card dl,
.compare-verdict-card dd { margin: 0; }
.compare-verdict-card dl { display: grid; gap: var(--space-3); }
.compare-verdict-card dl > div {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    gap: var(--space-3);
}
.compare-verdict-card dt {
    color: var(--teal);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.compare-verdict-card dd {
    color: var(--ink-2);
    font-size: 0.8125rem;
    line-height: 1.45;
}
@media (max-width: 820px) {
    .compare-verdict-card { grid-column: span 3; }
}
@media (max-width: 560px) {
    .compare-verdict { margin-top: var(--space-7); }
    .compare-verdict-grid { grid-template-columns: 1fr; gap: var(--space-3); }
    .compare-verdict-card { grid-column: 1; }
    .compare-verdict-card { padding: var(--space-4); }
}

.compare-faq-section { padding: var(--space-8) 0; }
.compare-faq-section .section-head { margin-bottom: var(--space-6); }
.compare-faq { display: grid; gap: var(--space-3); }
.compare-faq-item {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: border-color var(--dur-instant) var(--ease-base), background var(--dur-instant) var(--ease-base);
}
.compare-faq-item:hover,
.compare-faq-item[open] {
    background: var(--card);
    border-color: var(--ice-border);
}
.compare-faq-item summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    color: var(--ink-soft);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.compare-faq-item summary::-webkit-details-marker { display: none; }
.compare-faq-item summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    flex: 0 0 auto;
    border-right: 2px solid var(--ice);
    border-bottom: 2px solid var(--ice);
    transform: rotate(45deg);
    transition: transform var(--dur-quick) var(--ease-base);
}
.compare-faq-item[open] summary::after { transform: rotate(-135deg); }
.compare-faq-answer {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--ink-2);
    font-size: 0.9375rem;
    line-height: 1.65;
}
.compare-faq-answer p,
.compare-faq-answer ul { margin: 0; }
.compare-faq-answer ul { padding-left: var(--space-5); }
.compare-faq-answer li + li { margin-top: var(--space-2); }
.compare-faq-answer strong { color: var(--ink-soft); }

.compare-cta-section {
    overflow: hidden;
    padding: 0;
    background:
        radial-gradient(circle at 76% 0, var(--teal-05), transparent 34%),
        linear-gradient(180deg, rgba(21, 27, 51, 0.5), var(--bg));
    border-top: 1px solid var(--teal-20);
}
.compare-final-cta {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "eyebrow"
        "headline"
        "description"
        "actions"
        "trust";
    justify-items: center;
    align-items: center;
    row-gap: 0;
    padding: 72px 0;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.compare-final-cta::before {
    content: none;
}
.compare-final-cta::after {
    content: "";
    position: absolute;
    width: 620px;
    aspect-ratio: 1;
    right: -450px;
    top: -430px;
    transform: rotate(7deg);
    pointer-events: none;
    background: linear-gradient(135deg, transparent 6%, var(--ice) 42%, var(--teal) 62%, transparent 86%);
    opacity: 0.14;
    -webkit-mask: url("/vornin-mark.svg") center / contain no-repeat;
    mask: url("/vornin-mark.svg") center / contain no-repeat;
}
.compare-final-cta > * { position: relative; }
.compare-final-cta .eyebrow {
    grid-area: eyebrow;
    justify-content: center;
    margin-bottom: var(--space-3);
}
.compare-final-cta h2 {
    grid-area: headline;
    max-width: 680px;
    margin: 0 auto var(--space-4);
}
.compare-cta-description {
    grid-area: description;
    max-width: 520px;
    margin: 0 auto var(--space-6);
    color: var(--ink-2);
    line-height: 1.6;
}
.compare-final-cta .hero-actions {
    grid-area: actions;
    justify-content: center;
    margin: 0 0 var(--space-3);
}
.compare-final-cta .data-trust {
    grid-area: trust;
    margin: 0;
    color: var(--ink-3);
    font-size: 0.6875rem;
}
@media (max-width: 680px) {
    .compare-faq-section { padding: var(--space-7) 0; }
    .compare-faq-item summary { padding: var(--space-4); }
    .compare-faq-answer { padding: 0 var(--space-4) var(--space-4); }
    .compare-final-cta {
        grid-template-columns: 1fr;
        grid-template-areas:
            "eyebrow"
            "headline"
            "description"
            "actions"
            "trust";
        gap: 0;
        padding: var(--space-7) 0;
    }
    .compare-final-cta .eyebrow {
        width: max-content;
        max-width: 100%;
        flex-wrap: nowrap;
        gap: 8px;
        white-space: nowrap;
        font-size: 0.625rem;
        letter-spacing: 0.12em;
    }
    .compare-final-cta::after {
        width: 430px;
        right: -325px;
        top: -305px;
    }
    .compare-cta-section { padding-bottom: 0; }
}

.compare-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    color: var(--ink-2);
    background: var(--card);
    font-size: 0;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}
.compare-state::before {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}
.compare-state--included {
    color: var(--green);
    background: var(--green-dim);
    border-color: var(--border-soft);
}
.compare-state--included::before { content: "\2713"; }
.compare-state--partial {
    color: var(--ink-3);
    background: var(--card);
    border-color: var(--border-soft);
}
.compare-state--partial::before { content: "\25D0"; }
.compare-state--extra {
    color: var(--orange);
    background: var(--orange-dim);
    border-color: var(--border-soft);
}
.compare-state--extra::before { content: "\20AC"; }
.compare-state--no {
    color: var(--red);
    background: var(--red-dim);
    border-color: var(--red-border);
}
.compare-state--no::before { content: "\2715"; }
@media (max-width: 768px) {
    .compare-scroll-hint { display: block; }
    .compare-matrix--baseline {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: var(--space-4);
        scroll-snap-type: x proximity;
    }
    .compare-matrix--baseline .pricing-compare-header {
        display: grid;
        overflow: visible;
    }
    .compare-matrix--baseline .pricing-bar,
    .compare-matrix--baseline .pricing-compare-header,
    .compare-matrix--baseline .pricing-compare-row {
        display: grid;
        grid-template-columns: minmax(170px, 1.8fr) repeat(5, minmax(124px, 1fr));
        min-width: 790px;
    }
    .compare-matrix--baseline summary.pricing-compare-group-title {
        position: sticky;
        left: 0;
        z-index: 4;
        cursor: default;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        background: var(--surface);
        border-bottom-color: var(--border-soft);
        box-shadow: calc(-1 * var(--space-4)) 0 0 var(--surface);
    }
    .compare-matrix--baseline summary.pricing-compare-group-title::after {
        content: none;
    }
    .compare-matrix--baseline .pricing-compare-row {
        /* Cancel the kit's `margin: 0 -16px` bleed at ≤768px (the pre-split render got margin:0
           from pricing.css's mobile row rule, which Compare no longer loads). */
        margin: 0;
        padding: 0;
        overflow: visible;
    }
    .compare-matrix--baseline .pricing-compare-feature {
        position: sticky;
        left: 0;
        z-index: 2;
        padding: 14px 12px;
        background: var(--surface);
        box-shadow: calc(-1 * var(--space-4)) 0 0 var(--surface), 1px 0 0 var(--border-soft);
    }
    .compare-matrix--baseline .pricing-bar-spacer {
        position: sticky;
        left: 0;
        z-index: 3;
        background: var(--surface);
        box-shadow: calc(-1 * var(--space-4)) 0 0 var(--surface), 1px 0 0 var(--border-soft);
    }
    .compare-matrix--baseline .pricing-compare-cell,
    .compare-matrix--baseline .pricing-compare-cell[data-state="no"],
    .compare-matrix--baseline .pricing-compare-cell[data-state="partial"],
    .compare-matrix--baseline .pricing-compare-cell[data-state="extra"],
    .compare-matrix--baseline .pricing-compare-cell[data-state="yes"] {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;
        width: auto;
        margin: 0;
        padding: 14px 12px;
        background: transparent;
        border: 0;
        border-radius: 0;
        scroll-snap-align: start;
    }
    .compare-matrix--baseline .pricing-compare-cell::before,
    .compare-matrix--baseline .pricing-compare-cell[data-state="partial"]::before,
    .compare-matrix--baseline .pricing-compare-cell[data-state="extra"]::before,
    .compare-matrix--baseline .pricing-compare-cell[data-state="yes"]::before {
        content: none;
    }
}