/* compare-duel-kit.css: shared kit for the Vornin-vs-competitor duel pages
   (/compare/vornin-vs-hostedscan, /compare/vornin-vs-intruder). Loads after compare.css,
   which owns the .compare-hero / .compare-faq / .compare-cta chrome. Owns every hs-* rule:
   page shell, tables, lifecycle figure, tool-stack figure, coverage tiles, duel blocks,
   screenshot frames, and the duel-chart block at the end (server-rendered SVG price chart).
   Class names keep the hs- prefix from when this was the HostedScan route file
   (vornin-vs-hostedscan.css, renamed 2026-10-07). Add page-specific rules here only when a
   second duel page can reuse them; otherwise give that page its own route file. */

.hs-page {
    overflow: clip;
}

.hs-page .section-head {
    max-width: 760px;
    margin-bottom: var(--space-6);
}

.hs-page .section-head .lede {
    max-width: 720px;
}

.hs-page .section-head h2:only-child {
    grid-column: 1 / -1;
}

.hs-page .hs-choice-section .section-head {
    max-width: none;
}

.hs-hero {
    padding-bottom: var(--space-8);
}

.hs-hero h1 {
    max-width: 900px;
}

.hs-hero .hs-hero-answer {
    max-width: 760px;
    color: var(--ink-soft);
    font-size: 1.125rem;
    line-height: 1.7;
}

.hs-breadcrumb {
    margin-bottom: var(--space-5);
}

.hs-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    color: var(--ink-3);
    font-size: 0.75rem;
    list-style: none;
}

.hs-breadcrumb li + li::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--border);
}

.hs-breadcrumb a {
    color: var(--ink-3);
}

.hs-breadcrumb a:hover {
    color: var(--teal);
}

.hs-actions {
    justify-content: center;
    margin-top: var(--space-6);
}

.hs-page a:focus-visible,
.hs-page summary:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 4px;
}

.hs-decision-section {
    padding-top: var(--space-8);
    background:
        radial-gradient(circle at 84% 16%, var(--teal-05), transparent 28%),
        linear-gradient(180deg, rgba(21, 27, 51, 0.34), transparent 72%);
}

.hs-decision-section .section-head {
    margin-bottom: var(--space-4);
}

.hs-decision-intro {
    max-width: 75ch;
    margin-bottom: var(--space-6);
    line-height: 1.65;
}

/* Header row sits on the page background; only the body is filled, so the
   column headings read as labels above the table. */
.hs-table-shell {
    overflow: hidden;
}

.hs-table tbody th,
.hs-table tbody td {
    background: var(--surface);
}

.hs-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.55;
}

.hs-table th,
.hs-table td {
    padding: 1em 1.25em;
    border-bottom: 1px dashed var(--border);
    vertical-align: top;
    overflow-wrap: break-word;
}

.hs-table tbody tr:last-child > * {
    border-bottom: 0;
}

.hs-table tr > * + * {
    border-left: 1px dashed var(--border);
}

.hs-table thead th {
    padding-top: 0;
    padding-bottom: 0.75em;
    vertical-align: bottom;
    border-bottom: 1px solid var(--border);
}

.hs-table thead tr > * + * {
    border-left: 0;
}

.hs-table thead th:first-child {
    padding-left: calc(1.25em / 0.75);
    color: var(--ink-3);
    font-size: 0.75em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hs-table--comparison thead th:nth-child(2) {
    border-bottom-color: var(--teal-40);
}

.hs-table th {
    color: var(--ink-soft);
    font-weight: 600;
    text-align: left;
}

.hs-table-brand {
    display: inline-block;
    width: 6.5em;
    height: auto;
    vertical-align: middle;
}

/* Wordmark used in place of the word "Vornin" in labels; sized to the
   surrounding cap height so it reads as part of the heading. */
.hs-inline-logo {
    display: inline-block;
    width: auto;
    height: 0.95em;
    margin-inline: 0.22em;
    vertical-align: -0.1em;
}

.hs-platform h3 .hs-inline-logo {
    margin-left: 0;
}

.hs-table strong {
    color: var(--ink);
}

.hs-table--comparison .hs-col-criterion {
    width: 20%;
}

.hs-table--capabilities .hs-col-criterion {
    width: 36%;
}

.hs-table--capabilities th,
.hs-page .hs-table--capabilities tbody td::before {
    font-weight: 500;
}

.hs-table--capabilities th,
.hs-table--capabilities td {
    padding-block: 0.8em;
}

.hs-table tbody .hs-table-group th {
    padding-block: 1.75em 0.75em;
    padding-left: calc(1.25em / 0.75);
    color: var(--ink-3);
    border-bottom-style: solid;
    font-size: 0.75em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hs-table tbody .hs-table-group:first-child th {
    padding-top: 1em;
}

/* Table markers share the duel's 1em icons: tick, verified gap (cross),
   partial (dashed ring). Vornin's column ticks are teal. */
.hs-page {
    --hs-icon-partial: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='7' stroke-dasharray='3 3.6'/%3E%3C/svg%3E");
}

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

.hs-cell-list li + li {
    margin-top: 0.5em;
}

.hs-cell-list li,
.hs-mark {
    position: relative;
    display: block;
    padding-left: 1.6em;
}

.hs-cell-list li::before,
.hs-mark::before {
    content: "";
    position: absolute;
    top: 0.275em;
    left: 0;
    width: 1em;
    height: 1em;
    background: var(--ink-2);
    -webkit-mask: var(--hs-icon-check) center / contain no-repeat;
    mask: var(--hs-icon-check) center / contain no-repeat;
}

.hs-table--comparison td:nth-child(2) li::before,
.hs-table--comparison td:nth-child(2) .hs-mark::before,
.hs-table--pricing tbody tr:first-child li::before {
    background: var(--teal);
}

.hs-cell-list li.is-gap,
.hs-mark.is-gap,
.hs-mark.is-partial {
    color: var(--ink-3);
}

.hs-table td .hs-cell-list li.is-gap::before,
.hs-table td .hs-mark.is-gap::before,
.hs-legend .hs-mark.is-gap::before {
    background: var(--ink-3);
    -webkit-mask-image: var(--hs-icon-x);
    mask-image: var(--hs-icon-x);
}

.hs-table td .hs-mark.is-partial::before,
.hs-legend .hs-mark.is-partial::before {
    background: var(--ink-2);
    -webkit-mask-image: var(--hs-icon-partial);
    mask-image: var(--hs-icon-partial);
}

.hs-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: var(--space-4) 0 0;
    color: var(--ink-2);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.hs-legend .hs-mark {
    color: var(--ink-2);
}

.hs-legend + .hs-table-note {
    margin-top: var(--space-2);
}

.hs-table-note {
    max-width: 780px;
    margin: var(--space-4) 0 0;
    color: var(--ink-3);
    font-size: 0.75rem;
    line-height: 1.55;
}

.hs-platform-section,
.hs-choice-section,
.hs-method-section {
    background: rgba(21, 27, 51, 0.18);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}

/* Platform pair: two raised cards with the "vs" node between them. */
.hs-platform-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--space-8) minmax(0, 1fr);
    align-items: stretch;
}

.hs-platform {
    padding: clamp(var(--space-5), 4vw, var(--space-7));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}

.hs-platform--vornin {
    background: linear-gradient(145deg, var(--teal-10), transparent 68%), var(--surface);
    border-color: var(--teal-25);
}

.hs-platform-grid .hs-duel-vs {
    align-self: center;
}

/* Choice pair: open columns on the shared dashed seam + "vs" node. */
.hs-choice-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--space-8) minmax(0, 1fr);
}

.hs-choice-grid::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    border-left: 1px dashed var(--border);
}

.hs-platform-grid .hs-duel-vs,
.hs-choice-grid .hs-duel-vs {
    grid-column: 2;
    grid-row: 1;
}

.hs-choice-grid .hs-duel-vs {
    align-self: start;
}

.hs-platform,
.hs-choice {
    grid-row: 1;
    grid-column: 3;
}

.hs-platform--vornin,
.hs-choice--vornin {
    grid-column: 1;
}

.hs-choice h3 {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border);
}

.hs-choice--vornin h3 {
    border-bottom-color: var(--teal-40);
}

.hs-platform h3,
.hs-choice h3,
.hs-differences h3,
.hs-pricing-notes h3 {
    margin-bottom: var(--space-4);
    color: var(--ink-soft);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.hs-platform p {
    margin: 0;
    line-height: 1.75;
}

/* Stack diagram: what you run to get the same coverage. Vornin is one box;
   HostedScan is its box plus a dashed box of separate tools feeding results in. */
.hs-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--space-8) minmax(0, 1fr);
    grid-template-rows: auto auto;
    margin: var(--space-7) 0 0;
}

.hs-stack::before {
    content: "";
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    border-left: 1px dashed var(--border);
}

.hs-stack .hs-duel-vs {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
}

.hs-stack-caption {
    grid-column: 1 / -1;
    margin-bottom: var(--space-5);
    color: var(--ink-soft);
    font-size: 1.125rem;
    font-weight: 500;
}

.hs-stack-col {
    grid-row: 2;
    grid-column: 3;
}

.hs-stack-col--vornin {
    grid-column: 1;
}

.hs-stack-label {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    margin: 0 0 var(--space-2);
    color: var(--ink-soft);
    font-size: 0.875rem;
    font-weight: 600;
}

.hs-stack-label--tools {
    color: var(--ink-3);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hs-stack-box {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-4);
    list-style: none;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.hs-stack-col--vornin .hs-stack-box {
    background: var(--teal-05);
    border-color: var(--teal-25);
}

/* Hatched fill marks the box as outside the HostedScan subscription. */
.hs-stack-box--tools {
    background: repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--ink-2) 7%, transparent) 7px 8px);
    border-style: dashed;
    border-color: color-mix(in srgb, var(--ink-2) 40%, transparent);
}

.hs-stack-box--tools li {
    color: var(--ink-3);
    background: var(--bg);
    border-style: dashed;
}

.hs-stack-label--tools {
    gap: var(--space-3);
}

.hs-stack-tag {
    margin-left: auto;
    padding: 0.15em 0.6em;
    color: var(--ink-2);
    border: 1px dashed color-mix(in srgb, var(--ink-2) 45%, transparent);
    border-radius: 999px;
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.hs-stack-box li {
    padding: 0.3em 0.7em;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.hs-stack-col--vornin .hs-stack-box li {
    color: var(--ink-soft);
}

.hs-stack-box li.is-gap {
    position: relative;
    padding-left: 1.9em;
    color: var(--ink-3);
    background: transparent;
    border-style: dashed;
}

.hs-stack-box li.is-gap::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.65em;
    width: 1em;
    height: 1em;
    background: var(--ink-3);
    transform: translateY(-50%);
    -webkit-mask: var(--hs-icon-x) center / contain no-repeat;
    mask: var(--hs-icon-x) center / contain no-repeat;
}

.hs-stack-box li.is-addon {
    background: transparent;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--ink-2) 45%, transparent);
}

/* Dashed connector from the separate tools up into HostedScan. */
.hs-stack-link {
    position: relative;
    margin: 0;
    padding: var(--space-4) 0 var(--space-4) var(--space-6);
    color: var(--ink-3);
    font-size: 0.75rem;
    line-height: 1.4;
}

.hs-stack-link::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--space-4);
    border-left: 1px dashed var(--ink-3);
}

.hs-stack-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(var(--space-4) - 4px);
    border: 4px solid transparent;
    border-top: 0;
    border-bottom: 6px solid var(--ink-3);
}

/* Coverage map: the same surface grid on both sides of a dashed seam, so
   coverage differences read as filled vs empty tiles. */
.hs-cov {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--space-8) minmax(0, 1fr);
    margin: 0 0 var(--space-7);
}

.hs-cov::before {
    content: "";
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    border-left: 1px dashed var(--border);
}

.hs-cov .hs-duel-vs {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
}

.hs-cov-side {
    grid-row: 1;
    grid-column: 3;
}

.hs-cov-side--vornin {
    grid-column: 1;
}

.hs-cov-head {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    margin: 0;
    padding-bottom: var(--space-3);
    color: var(--ink-soft);
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    font-weight: 600;
}

.hs-cov-side--vornin .hs-cov-head {
    border-bottom-color: var(--teal-40);
}

.hs-cov-group {
    margin: var(--space-5) 0 var(--space-3);
    color: var(--ink-3);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hs-cov-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hs-cov-tile {
    position: relative;
    padding: 0.6em 0.75em 0.6em 2.1em;
    color: var(--ink-2);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: 0.875rem;
    line-height: 1.4;
}

.hs-cov-tile::before {
    content: "";
    position: absolute;
    top: calc(0.6em + 0.2em);
    left: 0.75em;
    width: 1em;
    height: 1em;
    background: var(--ink-2);
    -webkit-mask: var(--hs-icon-check) center / contain no-repeat;
    mask: var(--hs-icon-check) center / contain no-repeat;
}

.hs-cov-side--vornin .hs-cov-tile:not(.is-gap) {
    color: var(--ink-soft);
    background: var(--teal-05);
    border-color: var(--teal-25);
}

.hs-cov-side--vornin .hs-cov-tile:not(.is-gap)::before {
    background: var(--teal);
}

.hs-cov-tile.is-partial {
    background: transparent;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--ink-2) 45%, transparent);
}

.hs-cov-tile.is-partial::before {
    -webkit-mask-image: var(--hs-icon-partial);
    mask-image: var(--hs-icon-partial);
}

.hs-cov-tile.is-gap {
    color: var(--ink-3);
    background: transparent;
    border-style: dashed;
    border-color: var(--border);
}

.hs-cov-tile.is-gap::before {
    background: var(--ink-3);
    -webkit-mask-image: var(--hs-icon-x);
    mask-image: var(--hs-icon-x);
}

/* Lifecycle diagram: stages run left to right, one lane per platform. Vornin's
   lane is a solid line; HostedScan's is dashed, with hollow nodes for partial
   stages and an empty slot where a stage is missing. */
.hs-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.hs-lc {
    --hs-lc-node: 0.875rem;
    --hs-lc-top: var(--space-5);
    display: grid;
    grid-template-columns: 8.5rem repeat(6, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    margin: var(--space-7) 0 0;
}

.hs-lc-lanes,
.hs-lc-stages,
.hs-lc-stage {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
}

.hs-lc-lanes { grid-column: 1; }

.hs-lc-stages {
    grid-column: 2 / -1;
    grid-template-columns: subgrid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hs-lc-lane {
    padding-top: calc(var(--hs-lc-top) - 0.15rem);
    color: var(--ink-soft);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
}

.hs-lc-lane + .hs-lc-lane,
.hs-lc-cell--hs {
    border-top: 1px solid var(--border-soft);
}

.hs-lc-name {
    padding-bottom: var(--space-3);
    color: var(--ink-3);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

.hs-lc-cell {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: var(--space-3);
    padding: var(--hs-lc-top) var(--space-2) var(--space-5);
}

.hs-lc-cell::before {
    content: "";
    position: absolute;
    top: calc(var(--hs-lc-top) + var(--hs-lc-node) / 2 - 1px);
    left: 50%;
    right: -50%;
    border-top: 2px solid var(--teal-40);
}

.hs-lc-cell--hs::before {
    border-top: 2px dashed color-mix(in srgb, var(--ink-2) 35%, transparent);
}

.hs-lc-stage:last-child .hs-lc-cell::before {
    content: none;
}

.hs-lc-node {
    position: relative;
    z-index: 1;
    width: var(--hs-lc-node);
    height: var(--hs-lc-node);
    background: var(--ink-2);
    border-radius: 50%;
}

.hs-lc-cell--vornin .hs-lc-node {
    background: var(--teal);
    box-shadow: 0 0 0 4px var(--teal-10);
}

.hs-lc-cell[data-state="partial"] .hs-lc-node {
    background: var(--bg);
    border: 2px dashed var(--ink-2);
}

.hs-lc-cell[data-state="no"] .hs-lc-node {
    background: var(--bg);
    border: 1px dashed var(--ink-3);
}

.hs-lc-note {
    max-width: 14ch;
    color: var(--ink-2);
    font-size: 0.8125rem;
    line-height: 1.4;
    text-align: center;
}

.hs-lc-cell--vornin .hs-lc-note {
    color: var(--ink-soft);
}

.hs-lc-cell[data-state="no"] .hs-lc-note {
    color: var(--ink-3);
}

.hs-shot {
    max-width: 880px;
    margin: var(--space-7) auto 0;
}

.hs-shot-frame {
    position: relative;
    overflow: hidden;
    padding: var(--space-3);
    background: linear-gradient(160deg, var(--card), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}

.hs-shot-frame::before {
    content: "";
    position: absolute;
    inset: var(--space-3);
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    pointer-events: none;
}

.hs-shot-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--r-sm);
}

.hs-shot figcaption {
    min-height: var(--space-7);
    padding: var(--space-3) 0 0;
    color: var(--ink-3);
    font-size: 0.75rem;
}

.hs-pricing-section {
    background:
        radial-gradient(circle at 10% 24%, rgba(77, 148, 255, 0.05), transparent 30%),
        var(--bg);
}

.hs-table--pricing thead th:nth-child(1) { width: 20%; }
.hs-table--pricing thead th:nth-child(2) { width: 20%; }
.hs-table--pricing thead th:nth-child(3) { width: 60%; }

.hs-table--pricing td:nth-child(2) {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.hs-table--pricing td:nth-child(2) strong {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.hs-table--comparison tbody tr:last-child strong {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hs-pricing-notes {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}

.hs-pricing-notes article {
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.8fr);
    gap: var(--space-3) var(--space-7);
}

.hs-pricing-notes article + article {
    padding-top: var(--space-5);
    border-top: 1px dashed var(--border);
}

.hs-pricing-notes h3 {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 1.125rem;
}

.hs-note-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-top: -0.3rem;
    color: var(--teal);
    background: var(--teal-05);
    border: 1px solid var(--teal-20);
    border-radius: var(--r-sm);
}

.hs-pricing-notes p {
    grid-column: 2;
    max-width: 75ch;
    margin: 0;
    line-height: 1.65;
}

.hs-choice ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.hs-choice li {
    position: relative;
    padding: var(--space-4) 0 var(--space-4) 1.75em;
    line-height: 1.6;
}

.hs-choice li + li {
    border-top: 1px dashed var(--border-soft);
}

.hs-choice li::before {
    content: "";
    position: absolute;
    top: calc(var(--space-4) + 0.3em);
    left: 0;
    width: 1em;
    height: 1em;
    background: var(--ink-2);
    -webkit-mask: var(--hs-icon-check) center / contain no-repeat;
    mask: var(--hs-icon-check) center / contain no-repeat;
}

.hs-choice--vornin li::before {
    background: var(--teal);
}

.hs-differences-section {
    padding-bottom: var(--space-8);
}

/* Blocks are separated by space plus a short accent rule over each heading,
   not full-width lines. */
.hs-differences article {
    padding: var(--space-7) 0 var(--space-5);
}

.hs-differences article + article {
    padding-top: var(--space-8);
}

.hs-duel h3::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 2px;
    margin-bottom: var(--space-4);
    background: linear-gradient(90deg, var(--teal-40), transparent);
    border-radius: 1px;
}

.hs-differences p {
    margin: 0;
    max-width: 70ch;
    line-height: 1.65;
}

/* Head-to-head duel: two sides on a shared row grid (subgrid), so matched
   points line up across a dashed centre seam with a "vs" node. */
.hs-duel h3 {
    margin-bottom: var(--space-5);
}

.hs-duel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--space-8) minmax(0, 1fr);
}

.hs-duel--r2 { grid-template-rows: auto repeat(2, auto); }
.hs-duel--r3 { grid-template-rows: auto repeat(3, auto); }
.hs-duel--r4 { grid-template-rows: auto repeat(4, auto); }

.hs-duel-grid::before {
    content: "";
    grid-column: 2;
    grid-row: 1 / -1;
    justify-self: center;
    border-left: 1px dashed var(--border);
}

.hs-duel-vs {
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
    place-self: center;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    color: var(--ink-3);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.hs-duel-side {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
}

.hs-duel-side--vornin { grid-column: 1; }
.hs-duel-side:not(.hs-duel-side--vornin) { grid-column: 3; }

.hs-duel-head {
    display: flex;
    align-items: center;
    min-height: 2.25rem;
    margin: 0;
    padding-bottom: var(--space-3);
    color: var(--ink-soft);
    border-bottom: 1px solid var(--border);
    font-size: 1rem;
    font-weight: 600;
}

.hs-duel-side--vornin .hs-duel-head {
    border-bottom-color: var(--teal-40);
}

.hs-duel-brand {
    width: 6.5em;
    height: auto;
}

.hs-duel-side ul {
    display: grid;
    grid-row: 2 / -1;
    grid-template-rows: subgrid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hs-duel-side li {
    position: relative;
    padding: var(--space-4) 0 var(--space-4) 1.75em;
    color: var(--ink-2);
    line-height: 1.6;
}

.hs-duel-side li + li {
    border-top: 1px dashed var(--border-soft);
}

/* Markers: one 1em icon box for every tick and cross, so all marks share a
   size. Vornin teal tick, HostedScan neutral tick, verified gaps a muted cross. */
.hs-page {
    --hs-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
    --hs-icon-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 5.5l13 13M18.5 5.5l-13 13'/%3E%3C/svg%3E");
}

.hs-duel-side li::before {
    content: "";
    position: absolute;
    top: calc(var(--space-4) + 0.3em);
    left: 0;
    width: 1em;
    height: 1em;
    background: var(--ink-2);
    -webkit-mask: var(--hs-icon-check) center / contain no-repeat;
    mask: var(--hs-icon-check) center / contain no-repeat;
}

.hs-duel-side--vornin li::before {
    background: var(--teal);
}

.hs-duel-side li.is-gap {
    color: var(--ink-3);
}

.hs-duel-side li.is-gap::before {
    background: var(--ink-3);
    -webkit-mask-image: var(--hs-icon-x);
    mask-image: var(--hs-icon-x);
}

.hs-duel-side li.is-partial {
    color: var(--ink-3);
}

.hs-duel-side li.is-partial::before {
    -webkit-mask-image: var(--hs-icon-partial);
    mask-image: var(--hs-icon-partial);
}

.hs-differences .hs-difference-takeaway {
    max-width: none;
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    color: var(--ink-soft);
    border: 1px dashed color-mix(in srgb, var(--ink-2) 28%, transparent);
    border-radius: var(--r-sm);
    font-size: 0.9375rem;
}

.hs-faq-section {
    border-top: 1px solid var(--border-soft);
}

.hs-method-section p {
    max-width: 75ch;
    line-height: 1.75;
}

.hs-source-note a {
    font-size: 0.875rem;
    font-weight: 600;
}

/* Source link on a cited fact inside body copy: reads as a citation, not a CTA. */
.hs-cite {
    color: inherit;
    text-decoration: underline dotted;
    text-decoration-color: var(--ink-2);
    text-underline-offset: 3px;
}

.hs-cite:hover {
    text-decoration-style: solid;
}

.hs-related-links a {
    color: var(--ink-2);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 3px;
}

.hs-related-links a:hover {
    color: var(--ink);
    text-decoration-color: var(--ink-2);
}

.hs-page .compare-faq-answer p + ul {
    margin-top: var(--space-3);
}

.hs-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-5);
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-soft);
}

.hs-page .compare-final-cta .data-trust {
    margin-top: 0;
}

@media (max-width: 820px) {
    .hs-page .section {
        padding: var(--space-8) 0;
    }

    .hs-stack {
        display: block;
    }

    .hs-stack::before,
    .hs-stack .hs-duel-vs {
        display: none;
    }

    .hs-stack-col + .hs-duel-vs + .hs-stack-col {
        margin-top: var(--space-5);
    }

    .hs-cov {
        display: block;
    }

    .hs-cov::before,
    .hs-cov .hs-duel-vs {
        display: none;
    }

    .hs-cov-side + .hs-duel-vs + .hs-cov-side {
        margin-top: var(--space-6);
    }

    /* Lifecycle: transpose so stages run top to bottom, lanes side by side. */
    .hs-lc {
        display: block;
    }

    .hs-lc-lanes,
    .hs-lc-stage {
        grid-template-columns: 6.5rem repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
    }

    .hs-lc-lanes {
        padding-bottom: var(--space-3);
        border-bottom: 1px solid var(--border);
    }

    .hs-lc-lane {
        padding-top: 0;
    }

    .hs-lc-lane + .hs-lc-lane,
    .hs-lc-cell--hs {
        border-top: 0;
    }

    .hs-lc-stages {
        display: block;
    }

    .hs-lc-name {
        padding: var(--space-4) var(--space-2) 0 0;
        text-align: left;
    }

    .hs-lc-cell {
        --hs-lc-top: var(--space-4);
        justify-items: start;
        padding: var(--hs-lc-top) var(--space-2) var(--space-4) calc(var(--hs-lc-node) + var(--space-3));
    }

    .hs-lc-node {
        position: absolute;
        top: var(--hs-lc-top);
        left: 0;
    }

    .hs-lc-cell::before {
        top: calc(var(--hs-lc-top) + var(--hs-lc-node) / 2);
        bottom: calc(-1 * (var(--hs-lc-top) + var(--hs-lc-node) / 2));
        left: calc(var(--hs-lc-node) / 2 - 1px);
        right: auto;
        border-top: 0;
        border-left: 2px solid var(--teal-40);
    }

    .hs-lc-cell--hs::before {
        border-top: 0;
        border-left: 2px dashed color-mix(in srgb, var(--ink-2) 35%, transparent);
    }

    .hs-lc-note {
        max-width: none;
        text-align: left;
    }

    .hs-platform-grid,
    .hs-choice-grid,
    .hs-pricing-notes {
        grid-template-columns: 1fr;
    }

    .hs-platform-grid,
    .hs-choice-grid {
        display: block;
    }

    .hs-choice-grid::before,
    .hs-choice-grid .hs-duel-vs {
        display: none;
    }

    .hs-platform-grid .hs-duel-vs {
        margin: var(--space-3) auto;
    }

    .hs-duel-vs + .hs-choice {
        margin-top: var(--space-6);
    }

    .hs-duel-grid {
        display: block;
    }

    .hs-duel-grid::before,
    .hs-duel-vs {
        display: none;
    }

    .hs-duel-side,
    .hs-duel-side ul {
        display: block;
    }

    .hs-duel-side + .hs-duel-side,
    .hs-duel-vs + .hs-duel-side {
        margin-top: var(--space-5);
    }

    .hs-pricing-notes article {
        display: block;
    }

    .hs-pricing-notes h3 {
        margin-bottom: var(--space-3);
    }

    .hs-pricing-notes p + p {
        margin-top: var(--space-3);
    }
}

@media (max-width: 720px) {
    .hs-table-shell {
        overflow: visible;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .hs-table,
    .hs-table tbody,
    .hs-table tr,
    .hs-table th,
    .hs-table td {
        display: block;
        width: 100%;
    }

    .hs-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .hs-table tbody tr {
        overflow: hidden;
        margin-bottom: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        border-radius: 0;
    }

    .hs-table tbody th {
        padding: var(--space-4);
        color: var(--ink);
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--border);
        font-size: 0.9375rem;
    }

    .hs-table tbody td {
        display: block;
        padding: var(--space-4);
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--border-soft);
        font-size: 0.9375rem;
    }

    .hs-table tbody td:last-child {
        border-bottom: 0;
    }

    .hs-table tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: var(--space-2);
        color: var(--ink-soft);
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .hs-table tbody tr:last-child {
        border-bottom: 0;
    }

    .hs-table--capabilities tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hs-table--capabilities tbody th {
        grid-column: 1 / -1;
        background: transparent;
        border-bottom: 0;
        padding-bottom: var(--space-2);
    }

    .hs-table--capabilities tbody td {
        border-bottom: 0;
        padding-top: var(--space-3);
    }

    .hs-table--capabilities tbody td + td {
        border-left: 1px solid var(--border-soft);
    }

    .hs-table--capabilities tbody .hs-table-group th {
        padding: var(--space-6) var(--space-4) var(--space-3);
        background: none;
    }

    /* Capabilities: the two column heads become one sticky bar that pins under the
       floating nav (45px tall once the page scrolls) for as long as the table is in
       view, so the cells no longer repeat "Vornin" / competitor labels. The labels stay
       in the cells for screen readers, visually hidden. */
    .hs-table--capabilities thead {
        position: sticky;
        top: 45px;
        z-index: 5;
        display: block;
        width: auto;
        height: auto;
        overflow: visible;
        clip: auto;
        clip-path: none;
        white-space: normal;
        background: var(--bg-92);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border);
    }

    .hs-table--capabilities thead tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hs-table--capabilities thead th {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: var(--space-2) var(--space-4);
        border: 0;
        color: var(--ink);
        font-size: 0.875rem;
    }

    .hs-table--capabilities thead th:first-child {
        display: none;
    }

    .hs-table--capabilities thead th:nth-child(2) {
        box-shadow: inset 0 -2px 0 var(--teal-40);
    }

    .hs-table--capabilities thead th + th + th {
        border-left: 1px solid var(--border-soft);
    }

    .hs-table--capabilities thead .hs-table-brand {
        width: 5.5em;
    }

    .hs-page .hs-table--capabilities tbody td::before {
        content: attr(data-label) ": ";
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .hs-table--capabilities tbody td {
        position: relative;
    }
}

@media (max-width: 480px) {
    .hs-hero {
        padding-top: calc(var(--space-8) + var(--space-5));
        padding-bottom: var(--space-7);
    }

    /* Lifecycle at phone width: a narrower stage column and a smaller lane logo, so the
       two lane heads and their notes fit 320px without colliding or clipping. */
    .hs-lc-lanes,
    .hs-lc-stage {
        grid-template-columns: 5.25rem repeat(2, minmax(0, 1fr));
    }

    .hs-lc-name {
        font-size: 0.6875rem;
        letter-spacing: 0.04em;
    }

    .hs-lc-lane .hs-table-brand {
        width: 72px;
        height: auto;
    }

    .hs-hero .hs-hero-answer {
        font-size: 1rem;
        line-height: 1.65;
    }

    .hs-actions {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .hs-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .hs-shot-frame {
        padding: var(--space-2);
    }

    .hs-shot-frame::before {
        inset: 8px;
    }

    .hs-related-links {
        display: grid;
        justify-items: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hs-page * {
        scroll-behavior: auto;
    }
}

/* Screenshot placeholder: reserves the final frame size until the competitor capture lands.
   Draft pages only; a placeholder never ships on an indexed page. */
.hs-shot-placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 1636 / 885;
    border: 1px dashed var(--border);
    border-radius: var(--r-sm);
    color: var(--ink-3);
    font-size: 0.875rem;
}

.hs-shot-placeholder--wide {
    aspect-ratio: 1716 / 813;
}

/* ---- duel-chart: server-rendered SVG price chart ----
   All geometry is in percent of the SVG box, so strokes, markers and labels keep their
   pixel size at every width (no viewBox scaling). Vornin is the teal series; the
   competitor series uses --orange, never teal. Text wears ink tokens; the coloured
   end markers carry series identity next to each direct label. */
.duel-chart {
    position: relative;
    max-width: 880px;
    margin: var(--space-6) auto 0;
    padding: var(--space-4) var(--space-4) var(--space-3);
    background: linear-gradient(160deg, var(--card), var(--surface));
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.duel-chart-lede {
    max-width: 760px;
    margin: var(--space-6) 0 0;
    color: var(--ink-2);
}

.duel-chart-svg {
    display: block;
    width: 100%;
    height: 300px;
    overflow: visible;
    font-family: var(--font-body);
}

.duel-chart-grid {
    stroke: var(--border-soft);
    stroke-width: 1;
}

.duel-chart-axis {
    stroke: var(--border);
    stroke-width: 1;
}

.duel-chart-tick {
    fill: var(--ink-3);
    font-size: 12px;
}

.duel-chart-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.duel-chart-line--vornin {
    stroke: var(--teal);
}

.duel-chart-line--rival {
    stroke: var(--orange);
}

.duel-chart-dot {
    stroke: var(--surface);
    stroke-width: 2;
}

.duel-chart-dot--vornin {
    fill: var(--teal);
}

.duel-chart-dot--rival {
    fill: var(--orange);
}

.duel-chart-label {
    fill: var(--ink);
    font-size: 13px;
    font-weight: 600;
}

.duel-chart-label tspan.duel-chart-label-value {
    fill: var(--ink-2);
    font-weight: 500;
}

.duel-chart figcaption {
    padding-top: var(--space-3);
    color: var(--ink-3);
    font-size: 0.75rem;
}

@media (max-width: 480px) {
    .duel-chart {
        padding: var(--space-3) var(--space-2) var(--space-2);
    }

    .duel-chart-svg {
        height: 260px;
    }

    .duel-chart-label {
        font-size: 12px;
    }

    .duel-chart-tick--minor {
        display: none;
    }
}

@media (forced-colors: active) {
    .duel-chart-line--vornin,
    .duel-chart-line--rival {
        stroke: CanvasText;
    }

    .duel-chart-line--rival {
        stroke-dasharray: 6 4;
    }

    .duel-chart-dot--vornin,
    .duel-chart-dot--rival {
        fill: CanvasText;
    }
}