/*
  The /vs/ comparison pages (tools/vs/build.mjs), on the site shell (public/shared/site/: its frame, type, section heads
  and buttons) and the tokens (/marketing/shared/adam-v1.css, raspberry accent). This file holds only the comparison's own parts;
  the archived /learn/ guides (tools/learn/) used them too.
  Every band is self-contained: each rule sits under .vs-s (the class every section carries), so a band lifts on its
  own. The comparison is two columns all the way down, Adam on the left and the other product on the right; on a
  phone each pair stacks with Adam first.
  Picks (14 Oct): the skeleton and the line-by-line rows from /layouts/v3/adam-vs-x.html (vsx.css), without the sky;
  At a glance from the security band's stat-row (the ink box split by a rule) and control-cards (numbered facts).
*/

/* ---------------------------------------------------------------- base, scoped */
.vs-s {
  --vs-stick: 56px;                                  /* the scrolled header bar's height: sticky column heads sit under it */
  position: relative; background: var(--bg); color: var(--ink); font-family: var(--font-body);
}
.vs-s *, .vs-s *::before, .vs-s *::after { box-sizing: border-box; }
.vs-s a:not(.site-btn) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.vs-s a:not(.site-btn):hover { text-decoration-color: var(--link-hover-line, var(--accent)); }
.vs-s .vs-nw { white-space: nowrap; }
.vs-s :focus-visible { outline: var(--focus-ring, 2px solid var(--focus)); outline-offset: var(--focus-offset, 2px); }
.vs-s .ic { width: 16px; height: 16px; flex: none; }
.vs-s .vs-sq { display: inline-block; width: .3em; height: .3em; margin-right: .32em; vertical-align: .2em; background: var(--accent); }
.vs-s :is(h1, h2, h3) { text-wrap: balance; }
.vs-s :is(p, li, td, dd, summary, caption) { text-wrap: pretty; }

/* the mono labels: section heads, numbers, captions, eyebrows */
.vs-s :is(.vs-hero-k, .vs-meta, .vs-toc a, .vs-facts-n, .vs-table caption, .vs-table tbody th, .vs-grp th, .vs-q-n, .vs-src summary, .vs-src-t, .vs-src-u, .vs-link) {
  font-family: var(--font-mono); font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: .04em;
}
.vs-s :is(.vs-hero-k, .vs-meta, .vs-toc a, .vs-table tbody th, .vs-grp th, .vs-src summary, .vs-src-t, .vs-link) { text-transform: uppercase; }

/* placeholders: copy to confirm with Aaron; a dotted underline, the meaning in the tooltip (Tong, 15 Oct: 8.4; ?clean hides it) */
.vs-s mark.ph { padding: 0; background: none; color: inherit; text-decoration: underline dotted currentColor 1px; text-decoration-skip-ink: none; text-underline-offset: .24em; }   /* title: "Placeholder: to confirm" */
.clean .vs-s mark.ph { text-decoration: none; }

/* footnotes: the numbered sources */
.vs-s .vs-fn { margin-left: 3px; font: 400 10px/1 var(--font-mono); vertical-align: .5em; white-space: nowrap; }
.vs-s .vs-fn a { display: inline-block; min-width: 16px; margin-left: 2px; padding: 2px 3px; border: 1px solid var(--line); color: var(--ink-2); text-align: center; text-decoration: none; }
.vs-s .vs-fn a:hover { border-color: var(--ink); color: var(--ink); }

/* buttons are the shell's (.site-btn); a row of them, and the quiet text link */
.vs-s .vs-act { margin: 0; }
.vs-s .vs-link { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; background: linear-gradient(var(--ink), var(--ink)) left bottom / 100% 1px no-repeat; transition: background-size .32s cubic-bezier(.22, 1, .36, 1); }
.vs-s .vs-link:hover { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 100% 2px; }

/* ---------------------------------------------------------------- type is the shell's (.site-h1, .site-h2, .site-lead, .site-label) */
.vs-s .site-h1 .vs-vs { color: var(--accent); }
.vs-s .vs-rows .vs-vs { color: var(--muted); }   /* pink only in the H1 and the H2s; a list of links stays ink */

/* ---------------------------------------------------------------- hero (Tong, 15 Oct: 8.2, 9.2): one template for /vs/ and /learn/
   On the site's hero grid: the breadcrumb and the page's tag on one mono line; the H1 (a size under the shell's, so a
   name or a guide's title keeps to the left seven columns) and the lead in columns 1–7; the button pair, then the
   "checked" line. The drawing fills columns 8–12 from the H1's cap height (text-box trims the H1 to its caps) to the
   buttons' foot. On a phone it all stacks, the drawing last. (Picked over a stacked hero with the drawing as a band:
   references/vs/hero-ab-2026-10-15/.) */
.vs-s.vs-hero { --vs-hero-h1: clamp(40px, 5.56vw, 80px); padding-block: clamp(24px, 2.8vw, 40px) 0; }
.vs-hero .vs-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.vs-hero .vs-hero-grid > * { grid-column: 1 / -1; min-width: 0; }
.vs-hero .vs-hero-k { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0 0 clamp(40px, 5.5vw, 80px); color: var(--muted); }
.vs-hero .vs-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; list-style: none; }
.vs-hero .vs-crumbs li + li::before { content: "/"; margin-right: 8px; }
.vs-hero .vs-hero-tag::before { content: "·"; margin-right: 8px; }
.vs-hero .vs-crumbs a { text-decoration: none; }
.vs-hero .vs-crumbs a:hover { color: var(--ink); }
.vs-hero .vs-crumbs [aria-current] { color: var(--ink); }
.vs-hero .site-h1 { margin: 0; font-size: var(--vs-hero-h1); text-box: trim-both cap alphabetic; }
.vs-hero .site-lead { max-width: none; margin: 32px 0 0; }
.vs-hero .vs-act { margin: 40px 0 0; }
.vs-hero .vs-meta { margin: 24px 0 0; color: var(--muted); }
.vs-hero .vs-meta a { color: inherit; text-decoration-color: currentColor; }   /* one weight: the link is the line's own grey, underlined */
@media (min-width: 768px) {
  .vs-hero .vs-hero-grid > :is(.site-h1, .site-lead, .vs-act, .vs-meta) { grid-column: 1 / span 7; padding-right: 32px; }
  .vs-hero .vs-hero-grid > .site-h1 { grid-row: 2; }
  .vs-hero .vs-hero-grid > .site-lead { grid-row: 3; }
  .vs-hero .vs-hero-grid > .vs-act { grid-row: 4; }
  .vs-hero .vs-hero-grid > .vs-meta { grid-row: 5; }
  /* the small drawing (Tong, 15 Oct: "small and quick"): under the text on a tablet, beside it from 1024 (columns 8–12),
     four columns from 1280, its top on the H1's caps */
  .vs-s.vs-hero .vs-part { grid-column: 1 / span 7; grid-row: 6; max-width: 440px; margin-top: 40px; }
}
@media (min-width: 1024px) {
  .vs-s.vs-hero .vs-part { grid-column: 8 / span 5; grid-row: 2 / 6; max-width: none; margin-top: 0; }
}
@media (min-width: 1280px) {
  .vs-s.vs-hero .vs-part { grid-column: 9 / span 4; }
}
/* on this page: a hairline row, closing on the first section's rule as the home hero's proof row does */
.vs-hero .vs-toc { display: grid; grid-template-columns: repeat(var(--toc-n, 6), minmax(0, 1fr)); margin: clamp(56px, 6.7vw, 96px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.vs-hero .vs-toc li + li { border-left: 1px solid var(--line); }
.vs-hero .vs-toc a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 16px 18px; text-decoration: none; }
.vs-hero .vs-toc li:first-child a { padding-left: 0; }
.vs-hero .vs-toc-n { color: var(--muted); }
.vs-hero .vs-toc a:hover .vs-toc-n { color: var(--accent); }
.vs-s.vs-hero:not(:has(.vs-toc)) { padding-bottom: var(--sec-gap); }   /* no contents row to close on the next rule: the site's section gap (site.css) */

/* the hero's drawing on grid paper (visuals.js's small drawings, below). Light or dark, it's all tokens (dark mode,
   docs/dark-mode.md): the paper is --surface, and its lines are --ink at 5% and 8.5%, exactly today's light greys and
   the same strength as light lines on the dark paper. (The shell's --grid-minor / --grid-major are opaque greys for
   grid on --bg; on this --surface paper they'd fade the light lines and all but lose the dark ones.) */
.vs-hero .vs-part {
  --thumb-grid-1: color-mix(in srgb, var(--ink) 5%, transparent);
  --thumb-grid-2: color-mix(in srgb, var(--ink) 8.5%, transparent);
  position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden;
  background-color: var(--surface);
  background-image:
    linear-gradient(to right, var(--thumb-grid-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--thumb-grid-2) 1px, transparent 1px),
    linear-gradient(to right, var(--thumb-grid-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--thumb-grid-1) 1px, transparent 1px);
  background-size: calc(100% / 8) calc(100% / 6), calc(100% / 8) calc(100% / 6), calc(100% / 40) calc(100% / 30), calc(100% / 40) calc(100% / 30);
  background-position: -.5px -.5px;
}
/* the small drawings (visuals.js), in 400 × 300 units on the paper's 8 × 6 squares: hairlines, dotted hidden lines,
   mono labels, cards with a face of the page's own ground (--bg), and pink only for the one thing that matters; every
   colour is a token, so a drawing flips with the page, live, with no script. Text keeps its pixel size at
   any width: --vv-s is the drawing's px per unit (visuals.js), so 11 px labels and 12 px values, up to the sizes the
   layouts are set for (a 390 phone's) */
.vs-hero .vv { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.vs-hero .vv path, .vs-hero .vv circle { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vs-hero .vv .vv-face { fill: var(--bg); stroke: var(--muted); stroke-width: .75; stroke-opacity: .7; transition: stroke .3s ease, stroke-opacity .3s ease; }
.vs-hero .vv .vv-hair { stroke: var(--muted); stroke-width: .75; stroke-opacity: .7; }
.vs-hero .vv .vv-ink { stroke: var(--ink); stroke-width: 1; stroke-opacity: 1; }
.vs-hero .vv .vv-thick { stroke-width: 1.4; }
.vs-hero .vv .vv-dash { stroke-dasharray: 3 3; }
.vs-hero .vv .vv-hid { stroke: var(--muted); stroke-width: .8; stroke-dasharray: 1 2.4; }
.vs-hero .vv .vv-center { stroke-dasharray: 10 3 2 3; stroke-opacity: .5; }
.vs-hero .vv .vv-mesh { stroke: var(--muted); stroke-width: .5; stroke-opacity: .45; }
.vs-hero .vv .vv-pink { stroke: var(--accent); stroke-width: 1.4; }
.vs-hero .vv .vv-ring { stroke-width: 1; }
.vs-hero .vv .vv-sq, .vs-hero .vv .vv-dot { fill: var(--accent); stroke: none; }
.vs-hero .vv .vv-pin { fill: var(--bg); stroke: var(--muted); stroke-width: .75; }
.vs-hero .vv .vv-wipe { fill: #000; }   /* a clip mask's rect: never seen, so no token */
.vs-hero .vv text { stroke: none; }
.vs-hero .vv .vv-l { font-family: var(--font-mono); font-weight: 400; font-size: min(12.7px, calc(11px / var(--vv-s, 1))); letter-spacing: .04em; fill: var(--muted); }
.vs-hero .vv .vv-l-ink { fill: var(--ink); }
.vs-hero .vv .vv-pinkt { fill: var(--accent); }
.vs-hero .vv .vv-v { font-family: var(--font-body); font-weight: 400; font-size: min(13.8px, calc(12px / var(--vv-s, 1))); fill: var(--ink); }
/* the x-rays of Aaron's parts (tools/vs/xray.mjs): edges stay hairline whatever the scale */
.vs-hero .vv .vv-x { vector-effect: non-scaling-stroke; }
.vs-hero .vv .vv-xv { stroke: var(--ink); stroke-width: .7; }
.vs-hero .vv .vv-xt { stroke: var(--muted); stroke-width: .5; stroke-opacity: .55; }
.vs-hero .vv .vv-xh { stroke: var(--muted); stroke-width: .6; stroke-dasharray: 1 2.2; stroke-opacity: .7; }
.vs-hero .vv .vv-xf { stroke: var(--accent); stroke-width: 1.3; opacity: 0; }
.vs-hero .vv .vv-xf.vv-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .vs-hero .vv .vv-face { transition: none; }
}

/* ---------------------------------------------------------------- two sides: At a glance and Which to choose
   One grid across both sides (subgrid), so the name, the line and each numbered item sit level with their counterpart. */
.vs-s .vs-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vs-s .vs-side { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; row-gap: 0; }
.vs-s .vs-name { margin: 0 0 16px; font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.1; letter-spacing: -.02em; }
.vs-s .vs-line { margin: 0 0 24px; font-size: 17px; line-height: 1.5; }
.vs-s .vs-facts { display: grid; grid-row: span 3; grid-template-rows: subgrid; margin: 0; padding: 0; list-style: none; }
.vs-s .vs-facts li { display: grid; grid-template-columns: 36px minmax(0, 1fr); padding: 12px 0 14px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.vs-s .vs-facts-n { padding-top: 2px; color: var(--muted); }

/* At a glance: the stat-row box, two cells split by an ink rule */
.vs-glance .vs-pair { border: 1px solid var(--line); }   /* every hairline is --line; ink is for type and drawings (Tong, 15 Oct) */
.vs-glance .vs-side { padding: 20px 28px 12px; }
.vs-glance .vs-side + .vs-side { border-left: 1px solid var(--line); }
.vs-glance .vs-facts li:last-child { padding-bottom: 12px; }

/* Which to choose: open, one ink rule across both columns */
.vs-choose .vs-pair { border-top: 1px solid var(--line); }
.vs-choose .vs-side { padding: 20px 32px 0 0; }
.vs-choose .vs-side + .vs-side { padding-right: 0; }
.vs-choose .vs-facts li:last-child { border-bottom: 1px solid var(--line); }
.vs-choose .vs-act { align-self: start; margin-top: 28px; }

/* ---------------------------------------------------------------- Compared: the table as two columns
   Real table markup (row headers for search and screen readers); each row is its label on a hairline, then Adam's
   claim on the left facing the other product's on the right. The column heads stay under the header as you scroll. */
.vs-cmp .vs-table { display: block; width: 100%; border-collapse: separate; border-spacing: 0; }
.vs-cmp .vs-table caption { display: block; margin: 0 0 24px; color: var(--muted); text-align: left; text-transform: uppercase; }
.vs-cmp .vs-table :is(thead, tbody) { display: block; }
.vs-cmp .vs-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vs-cmp .vs-table thead { position: sticky; top: var(--vs-stick); z-index: 2; background: var(--bg); }
.vs-cmp .vs-table thead th { padding: 16px 32px 14px 0; border-bottom: 1px solid var(--line); text-align: left; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: -.02em; }
.vs-cmp .vs-table thead .vs-th-k { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vs-cmp .vs-table .vs-grp th { grid-column: 1 / -1; padding: 44px 0 12px; text-align: left; }
.vs-cmp .vs-table tbody:first-of-type .vs-grp th { padding-top: 28px; }
.vs-cmp .vs-grp-n { display: inline-block; min-width: 36px; color: var(--muted); }
.vs-cmp .vs-table tbody tr:not(.vs-grp) { border-top: 1px solid var(--line); }
.vs-cmp .vs-table tbody th[scope="row"] { grid-column: 1 / -1; padding: 16px 0 8px; color: var(--muted); text-align: left; }
.vs-cmp .vs-table td { padding: 0 32px 22px 0; font-size: 16px; line-height: 1.5; vertical-align: top; }
.vs-cmp .vs-table td + td { padding-right: 0; }

/* ---------------------------------------------------------------- FAQ: the home page's numbered list, from column 5 */
.vs-faq .vs-qs { border-top: 1px solid var(--line); }
.vs-faq .vs-q { border-bottom: 1px solid var(--line); }
.vs-faq .vs-q summary { display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 16px; align-items: start; padding: 20px 0; cursor: pointer; list-style: none; }
.vs-faq .vs-q summary::-webkit-details-marker { display: none; }
.vs-faq .vs-q-n { padding-top: 4px; color: var(--muted); }
.vs-faq .vs-q-t { font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 1.32vw, 19px); line-height: 26px; letter-spacing: -.01em; text-wrap: balance; }
.vs-s .vs-q-i { position: relative; width: 16px; height: 16px; margin-top: 5px; color: var(--ink); transition: color .3s ease; }
.vs-s .vs-q-i::before, .vs-s .vs-q-i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 7.5px; height: 1px; background: currentColor; transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
.vs-s .vs-q-i::after { transform: rotate(90deg); }
.vs-s summary:hover .vs-q-i, .vs-s [open] > summary .vs-q-i { color: var(--accent); }
.vs-s [open] > summary .vs-q-i::after { transform: rotate(0deg); }
.vs-faq .vs-q p { max-width: 780px; margin: 0; padding: 0 48px 26px 52px; font-size: 16px; line-height: 24px; color: var(--muted); }

/* ---------------------------------------------------------------- Sources: one closed disclosure at the bottom (Tong, 15 Oct: 8.5)
   "Sources · N" on a hairline; open, the numbered sources in two mono columns (name, link), the "tell us" line in its
   foot. A marker in the rows, or the hero's Sources link, opens it and scrolls to the entry (compare.js). */
.vs-s.vs-more:has(+ .vs-srcs) { padding-bottom: 56px; }
.vs-s.vs-srcs { padding-bottom: clamp(72px, 7.8vw, 112px); }
.vs-srcs .vs-src { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--vs-stick) + 16px); }
.vs-srcs .vs-src summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 51px; padding: 14px 0; cursor: pointer; list-style: none; }
.vs-srcs .vs-src summary::-webkit-details-marker { display: none; }
.vs-srcs .vs-src summary .vs-q-i { margin-top: 0; }
.vs-srcs .vs-src-list { margin: 0; padding: 0; list-style: none; }
.vs-srcs .vs-src-list li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--vs-stick) + 96px); }
.vs-srcs .vs-src-list li:target { background: var(--surface); }
.vs-srcs .vs-src-t { grid-column: 1 / span 6; padding-right: 24px; }
.vs-srcs .vs-src-n { display: inline-block; min-width: 36px; color: var(--muted); }
.vs-srcs .vs-src-u { grid-column: 7 / span 6; min-width: 0; overflow: hidden; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }   /* one line; the link holds the whole address */
.vs-srcs .vs-src-note { max-width: 680px; margin: 0; padding: 14px 0 18px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--muted); }

/* ---------------------------------------------------------------- rows that link out: the /vs/ index, More comparisons, the guides' lists
   One rhythm (Tong, 15 Oct: 8.1): on the 12 columns, the title in 1–6, the text in 7–11, the arrow in 12 at the edge,
   all on the row's top line; 32 px above and below; the H2 48 px above the first rule. (The date before the arrow is
   gone: Tong, 15 Oct, "remove this".)
   The hover (7.3): the row's hairline draws pink left to right, the arrow goes pink, and both drain back on leave. */
.vs-s .site-h2 + .vs-rows { margin-top: 16px; }
/* the /vs/ index: a group's H2 and its small drawing (Blog figures', when it lands), the drawing's foot on the H2's baseline */
/* the index's group heading (Tong, 15 Oct, second pass: 8.2): the heading on the band's left edge, its drawing on the
   right edge, centred on each other (the heading trimmed to its caps and baseline), and the same space above the
   band as below it, down to the rows' first rule */
.vs-s.vs-list .site-grid { padding-top: 0; row-gap: 0; }
.vs-s .vs-ghead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-block: 48px; }
.vs-s .vs-ghead .site-h2 { text-box: trim-both cap alphabetic; }
.vs-s .vs-ghead + .vs-rows { margin-top: 0; }
.vs-s .vs-gfig { margin: 0; }
.vs-s .vs-gfig .bf-art { position: relative; width: 160px; aspect-ratio: 16 / 10; overflow: hidden; }
.vs-s .vs-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
/* (Tong, 15 Oct, second pass: 8.3) the two sizes have different line boxes, so each text is trimmed to its cap height
   and its last baseline (text-box) and the row aligns their tops: the title's caps and the description's first line's
   caps hang from one line, 32 px under the rule, the arrow's middle on the middle of those description caps, and the
   last baseline sits 32 px above the next */
.vs-s .vs-row { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; padding: 32px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.vs-s :is(.vs-row-t, .vs-row-d) { text-box: trim-both cap alphabetic; }
/* trimmed to their fonts' cap-height metrics, Switzer's capitals still sit 0.08 em below the box (measured, 3 px at 40 and
   1.3 px at 16) where Paper Mono's sit on it: Switzer moves up by that, so the inked caps share one line */
.vs-s :is(.vs-row-t, .vs-row-d) { margin-top: -.08em; }
.vs-s .vs-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.vs-s .vs-row:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.vs-s .vs-row-t { grid-column: 1 / span 6; padding-right: 32px; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.05; letter-spacing: -.02em; }
.vs-s .vs-row-d { grid-column: 7 / span 5; padding-right: 24px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.vs-s .vs-row-d:empty { visibility: hidden; }
.vs-s .vs-row-k { grid-column: 12 / span 1; display: flex; align-items: flex-start; justify-content: flex-end; font-size: 16px; }   /* the description's size: .5cap below is half its caps */
.vs-s .vs-row-k .ic { flex: none; position: relative; top: calc(.5cap - 8px); color: var(--ink); transition: color .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1); }   /* the arrow's middle (8 of its 16 px) on the middle of the description's caps */
.vs-s .vs-row:is(:hover, :focus-visible) .vs-row-k .ic { color: var(--accent); transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .vs-s :is(.vs-link, .vs-q-i, .vs-q-i::before, .vs-q-i::after, .ic, .vs-row::after) { transition: none; }
}

/* ---------------------------------------------------------------- tablet */
@media (max-width: 1199px) {
  .vs-hero .vs-toc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vs-hero .vs-toc li:nth-child(3n + 1) { border-left: 0; }
  .vs-hero .vs-toc li:nth-child(3n + 1) a { padding-left: 0; }
  .vs-hero .vs-toc li:nth-child(n + 4) { border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------------------- phone: each pair stacks, Adam first */
@media (max-width: 767px) {
  .vs-hero .vs-part { width: 100%; margin-top: 40px; }
  .vs-hero .vs-toc { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
  .vs-hero .vs-toc li:nth-child(n) { border-left: 0; border-top: 0; }
  .vs-hero .vs-toc li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .vs-hero .vs-toc li:nth-child(2n) { border-left: 1px solid var(--line); }
  .vs-hero .vs-toc li:nth-child(n) a { padding: 12px 12px 14px; }
  .vs-hero .vs-toc li:nth-child(2n + 1) a { padding-left: 0; }
  .vs-hero .vs-toc li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .vs-s .vs-act .site-btn { flex: 1 1 212px; }
  .vs-s .vs-pair { grid-template-columns: minmax(0, 1fr); }
  .vs-glance .vs-side { padding: 18px 16px 8px; }
  .vs-glance .vs-side + .vs-side { border-left: 0; border-top: 1px solid var(--line); }
  .vs-choose .vs-side { padding: 20px 0 0; }
  .vs-choose .vs-side + .vs-side { margin-top: 48px; border-top: 1px solid var(--line); }
  .vs-s .vs-facts li { grid-template-columns: 32px minmax(0, 1fr); }
  .vs-cmp .vs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .vs-cmp .vs-table tr { grid-template-columns: minmax(0, 1fr); }
  .vs-cmp .vs-table td { padding: 0 0 16px; }
  .vs-cmp .vs-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font: 400 12px/18px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  .vs-cmp .vs-table td:first-of-type::before { color: var(--ink); }
  .vs-faq .vs-q summary { grid-template-columns: 28px minmax(0, 1fr) 16px; gap: 12px; }
  .vs-faq .vs-q p { padding: 0 0 24px 40px; }
  .vs-s .vs-ghead { flex-direction: column-reverse; align-items: flex-start; padding-block: 32px; }
  .vs-s .vs-row { padding: 24px 0; }
  /* a phone: the arrow beside the title, its middle on the middle of the title's first-line caps; the text below */
  .vs-s .vs-row-t { grid-column: 1 / -1; grid-row: 1; padding-right: 40px; }
  .vs-s .vs-row-d { grid-column: 1 / -1; grid-row: 2; margin-top: 16px; padding-right: 0; }
  .vs-s .vs-row-d:empty { display: none; }
  .vs-s .vs-row-k { grid-column: 1 / -1; grid-row: 1; font-family: var(--font-display); font-size: clamp(28px, 2.8vw, 40px); }
  .vs-srcs .vs-src-list li { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .vs-srcs .vs-src-t, .vs-srcs .vs-src-u { grid-column: 1; padding-right: 0; }
  .vs-srcs .vs-src-u { padding-left: 36px; }
}

/* each comparison row keeps its number (the balloons it once matched are gone) */
.vs-s .vs-table .vs-rn { display: inline-block; min-width: 32px; color: var(--muted); }