/* The /vs/ comparison pages (#3164, #3248, #3247): the docs shell (tokens.css, info.css) plus the hero, the compact table, the caught
   cards, the battle cards and the CTA. Tokens only. */
.omb-page .vs-label { font: 550 11px/1.5 var(--omb-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--omb-muted); margin: 0 0 12px; }
.omb-page .vs-center { text-align: center; margin-top: 56px; }

/* The hero (#3247): the question, the example month, the CTA. Raspberry (--accent) uses a seat, credits or money; emerald (--brand) is $0. */
.omb-page .vs-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 28px 0 36px; }
.omb-page .vs-hero-text { min-width: 0; }
.omb-page .vs-chip { display: inline-block; font: 550 11px/1.5 var(--omb-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-text); border: 1px solid var(--omb-line); border-radius: 999px; padding: 4px 12px; }
.omb-page .vs-hero h1 { font: 550 clamp(32px, 3.9vw, 50px)/1.08 var(--omb-sans); letter-spacing: -.045em; margin: 16px 0 18px; text-wrap: balance; }
.omb-page .vs-hero h1 em { font-style: normal; color: var(--brand-text); }
.omb-page .vs-hero .omb-deck { font-size: 17px; }
.omb-page .vs-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 24px 0 0; font-size: 15px; }
.omb-page .vs-hero-cta .omb-small-cta { padding: 12px 20px; font-weight: 550; }

.omb-page .vs-fig { margin: 0; min-width: 0; border: 1px solid var(--omb-line); border-radius: 14px; padding: 22px; display: grid; gap: 20px;
  background-image: radial-gradient(var(--omb-line) 1px, transparent 1px); background-size: 16px 16px; }
.omb-page .vs-lane { background: var(--omb-paper); border: 1px solid var(--omb-line); border-radius: 10px; padding: 14px 14px 16px; }
.omb-page .vs-lane-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 0 0 12px; }
.omb-page .vs-count { margin: 0; text-align: right; font: 550 11px/1.2 var(--omb-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--omb-muted); }
.omb-page .vs-count b { display: block; font: 600 30px/1 var(--omb-sans); letter-spacing: -.04em; color: var(--accent); }
.omb-page .vs-lane-h { margin: 0; font-size: 14px; line-height: 1.4; display: flex; flex-direction: column; gap: 2px; }
.omb-page .vs-lane-h span { font: 550 11px/1.5 var(--omb-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--omb-muted); }
.omb-page .vs-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.omb-page .vs-tile { border-radius: 6px; padding: 7px 4px 6px; text-align: center; font: 500 10px/1.3 var(--omb-mono); letter-spacing: .04em; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.omb-page .vs-tile b { font: 600 14px/1.2 var(--omb-mono); letter-spacing: 0; }
.omb-page .vs-billed { background: color-mix(in srgb, var(--accent) 14%, var(--omb-paper)); color: var(--omb-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.omb-page .vs-free { background: color-mix(in srgb, var(--brand) 10%, var(--omb-paper)); color: var(--omb-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 40%, transparent); }
.omb-page .vs-tiles:has(.vs-seat) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* A seat: a head and shoulders, drawn in the billed colour. */
.omb-page .vs-glyph { width: 14px; height: 15px; position: relative; display: block; margin-bottom: 1px; }
.omb-page .vs-glyph::before { content: ""; position: absolute; left: 4px; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.omb-page .vs-glyph::after { content: ""; position: absolute; left: 1px; top: 7px; width: 12px; height: 7px; border-radius: 6px 6px 2px 2px; background: var(--accent); }
.omb-page .vs-fig figcaption { font-size: 12px; color: var(--omb-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.omb-page .vs-key { display: inline-flex; align-items: center; gap: 6px; font: 550 11px/1.5 var(--omb-mono); }
.omb-page .vs-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.omb-page .vs-key-billed::before { background: var(--accent); }
.omb-page .vs-key-free::before { background: var(--brand); }
.omb-page .vs-lane-note { margin: 10px 0 0; font-size: 12px; color: var(--omb-muted); }

/* The compact table, right under the cover. */
.omb-page .vs-glance { margin: 8px 0 24px; border: 1px solid var(--omb-line); border-radius: 14px; padding: 20px 22px 14px; }
.omb-page .vs-quick th, .omb-page .vs-quick td { padding-top: 11px; padding-bottom: 11px; }
.omb-page .vs-quick th[scope="row"] { width: 22%; }
.omb-page .vs-quick td { font-size: 15px; }

/* Quality on ReviewBench (#3240): two plain bars per tool, the CTA beside them. Bars are emerald for us, ink for them. */
.omb-page .vs-quality { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 20px; margin: 8px 0 24px; }
.omb-page .vs-q-main { border: 1px solid var(--omb-line); border-radius: 14px; padding: 20px 22px 16px; min-width: 0; }
.omb-page .vs-rb { display: grid; gap: 14px; margin-bottom: 12px; }
.omb-page .vs-rb + .vs-note + .vs-rb { margin-top: 20px; }
.omb-page .vs-rb-row { display: grid; gap: 8px; }
.omb-page .vs-rb-name { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.omb-page .vs-rb-name b { font: 550 17px/1.3 var(--omb-sans); }
.omb-page .vs-rb-name span { font: 500 11px/1.5 var(--omb-mono); letter-spacing: .06em; color: var(--omb-muted); }
.omb-page .vs-bar { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 4.2em; align-items: center; gap: 12px; font-size: 13px; }
.omb-page .vs-bar-k { color: var(--omb-muted); }
.omb-page .vs-bar-track { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--omb-ink) 8%, transparent); overflow: hidden; }
.omb-page .vs-bar-fill { display: block; height: 100%; border-radius: 999px; background: color-mix(in srgb, var(--omb-ink) 55%, transparent); }
.omb-page .vs-rb-us .vs-bar-fill { background: var(--brand); }
.omb-page .vs-bar b { font: 600 14px/1 var(--omb-mono); text-align: right; }
.omb-page .vs-rb-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--omb-muted); border-left: 2px solid var(--brand); padding-left: 10px; }
.omb-page .vs-rb-none { margin: 0; font-size: 14px; color: var(--omb-muted); border-top: 1px dashed var(--omb-line); padding-top: 12px; }
.omb-page .vs-q-cta { border-radius: 14px; padding: 22px; background: color-mix(in srgb, var(--brand) 8%, var(--omb-paper)); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.omb-page .vs-q-cta p { margin: 0; color: var(--omb-muted); font-size: 15px; }
.omb-page .vs-q-cta .vs-q-cta-h { font: 550 21px/1.25 var(--omb-sans); letter-spacing: -.02em; color: var(--omb-ink); }
.omb-page .vs-q-cta .omb-small-cta { align-self: flex-start; padding: 12px 20px; font-weight: 550; }
@media (max-width: 900px) {
  .omb-page .vs-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 12px; }
  .omb-page .vs-quality { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .omb-page .vs-bar { grid-template-columns: minmax(0, 1fr) 4.2em; gap: 4px 10px; }
  .omb-page .vs-bar-k { grid-column: 1 / -1; }
  .omb-page .vs-q-main { padding: 14px; }
}
/* Caught before the fix (#3220): public replays, each with its advisory. */
.omb-page .vs-caught { margin: 8px 0 24px; }
.omb-page .vs-caught-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-bottom: 10px; }
.omb-page .vs-caught-card { border: 1px solid var(--omb-line); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.omb-page .vs-caught-card h3 { font: 550 18px/1.3 var(--omb-sans); margin: 0; }
.omb-page .vs-caught-card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--omb-muted); }
.omb-page .vs-caught-card .vs-caught-repo { font: 550 12px/1.5 var(--omb-mono); }
.omb-page .vs-caught-card .vs-caught-adv { font: 500 12px/1.5 var(--omb-mono); }
/* Below the fold: the detail, in calm bands. */
.omb-page .vs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; margin: 8px 0 40px; }
.omb-page .vs-card { border: 1px solid var(--omb-line); border-top: 3px solid var(--brand); border-radius: 0 0 10px 10px; padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.omb-page .vs-card h3 { font: 550 21px/1.25 var(--omb-sans); letter-spacing: -.02em; margin: 0; }
.omb-page .vs-card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--omb-muted); }
.omb-page .vs-card .vs-them { font-size: 13px; border-top: 1px dashed var(--omb-line); padding-top: 10px; }
.omb-page .vs-card .vs-ci { font-size: 13px; }
.omb-page .vs-band { background: color-mix(in srgb, var(--brand) 5%, var(--omb-paper)); border-radius: 16px; padding: 36px clamp(18px, 4vw, 44px); }
.omb-page .vs-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 24px; margin: 8px 0 32px; }
.omb-page .vs-fit h3 { font: 550 17px/1.3 var(--omb-sans); margin: 0 0 8px; }
.omb-page .vs-fit ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.omb-page .vs-fit .vs-us h3 { color: var(--omb-accent); }
.omb-page .vs-table-wrap { overflow-x: auto; }
/* The OhMyBug column is tinted, so the eye reads one side down the table. */
.omb-page .vs-table td[data-label="OhMyBug"] { background: color-mix(in srgb, var(--brand) 6%, transparent); }
/* Phones: each row stacks, and each cell names its side, so neither column scrolls out of view. */
@media (max-width: 640px) {
  /* The header row stays in the accessibility tree (visually hidden), and the role= attributes keep table semantics on block layout. */
  .omb-page .vs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .omb-page .vs-table, .omb-page .vs-table tbody, .omb-page .vs-table tr, .omb-page .vs-table th, .omb-page .vs-table td { display: block; width: auto; }
  .omb-page .vs-quick th[scope="row"] { width: auto; }
  .omb-page .vs-table tr { border-bottom: 1px solid var(--omb-line); padding: 8px 0; }
  .omb-page .vs-table th, .omb-page .vs-table td { border-bottom: 0; padding: 6px 0; }
  .omb-page .vs-table td[data-label="OhMyBug"] { padding: 6px 8px; border-radius: 6px; }
  .omb-page .vs-table td::before { content: attr(data-label); display: block; font: 550 11px/1.5 var(--omb-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--omb-muted); margin-bottom: 2px; }
}
@media (max-width: 420px) {
  .omb-page .vs-fig { padding: 14px; }
  .omb-page .vs-hero .omb-deck { font-size: 16px; }
  .omb-page .vs-tile { font-size: 9px; padding: 6px 2px 5px; }
  .omb-page .vs-tile b { font-size: 12px; }
  .omb-page .vs-glance { padding: 14px; }
}
.omb-page .vs-src { font-size: 12px; color: var(--omb-muted); }
.omb-page .vs-note { font-size: 12px; line-height: 1.5; color: var(--omb-muted); margin: 0; }
.omb-page .vs-asof { font: 550 11px/1.5 var(--omb-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--omb-muted); }
.omb-page .vs-cta { border: 1px solid var(--omb-line); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; padding: 22px; margin: 40px 0; }
.omb-page .vs-cta pre { overflow-x: auto; font: 13px/1.6 var(--omb-mono); margin: 12px 0; }
.omb-page .vs-cta .omb-small-cta { display: inline-block; margin-top: 4px; }
.omb-page .vs-legal { font-size: 12px; color: var(--omb-muted); margin: 32px 0 0; }
.omb-page section.vs-section { margin: 48px 0; }
.omb-page section.vs-section > h2 { font: 550 26px/1.2 var(--omb-sans); letter-spacing: -.03em; margin: 0 0 14px; }
.omb-page .vs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.omb-page .vs-compare { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; padding: 14px 0; }
.omb-page .vs-compare [aria-current] { color: var(--omb-muted); font-weight: 600; text-decoration: none; }
/* The smallest phones: a tile must still hold "credits" (#3247). */
@media (max-width: 360px) {
  .omb-page .vs-fig { padding: 10px; }
  .omb-page .vs-lane { padding: 10px 8px 12px; }
  .omb-page .vs-tiles { gap: 4px; }
  .omb-page .vs-tile { letter-spacing: 0; padding-inline: 1px; }
}