/* ═══════════════════════════════════════════════════════
   COMPARISON PAGES  (/compare/…)
   Ported from the Claude Design "Comparison Page Template".
   Prefixed ao-vs- throughout: the `cmp` prefix is already used by
   the homepage comparison block (data-cmp-* in assets/js/main.js).
   Standalone CSS — not Tailwind — so it needs no app.css rebuild.
═══════════════════════════════════════════════════════ */
.ao-vs {
  --aov-navy: #0f1829;
  --aov-ink: #031226;
  --aov-body: #12131c;
  --aov-accent: #4d6bfe;
  --aov-accent-light: #9ea8fb;
  --aov-glow: #7b94ff;
  --aov-border: #c8cfda;
  --aov-rule: #e6eaf0;
  --aov-muted: #7b8494;
  --aov-tint: rgba(158, 168, 251, .12);
  --aov-light-grad: linear-gradient(180deg, #f5f5f9, #d2e9ff);

  font-family: 'Montserrat', Helvetica, sans-serif;
  color: var(--aov-body);
  width: 100%;
}

/* ─── Section shells ─── */
.ao-vs-section { position: relative; padding: 96px 40px; background: #fff; }
.ao-vs-section--tight { padding-top: 0; }
.ao-vs-section--dark { background: var(--aov-navy); overflow: hidden; }
.ao-vs-section--grad { background: var(--aov-light-grad); }
.ao-vs-section--hero { background: var(--aov-navy); overflow: hidden; padding: 132px 40px 88px; }
.ao-vs-inner { position: relative; max-width: 1200px; margin: 0 auto; }
.ao-vs-inner--narrow { max-width: 1000px; }

/* ─── Ambient glow orbs ─── */
.ao-vs-orb {
  position: absolute;
  border-radius: 50%;
  background: var(--aov-glow);
  filter: blur(120px);
  pointer-events: none;
}
.ao-vs-orb--1 { width: 720px; height: 720px; opacity: .20; top: -280px; left: -180px; }
.ao-vs-orb--2 { width: 620px; height: 620px; opacity: .14; bottom: -320px; right: -140px; }
.ao-vs-orb--3 { width: 680px; height: 680px; opacity: .18; top: -220px; right: -160px; }
.ao-vs-orb--4 { width: 600px; height: 600px; opacity: .12; bottom: -300px; left: -180px; }
.ao-vs-orb--5 { width: 520px; height: 520px; opacity: .14; top: -260px; right: -140px; }

.ao-vs-streaks {
  position: absolute;
  inset: 0;
  opacity: .06;
  pointer-events: none;
  background: repeating-linear-gradient(115deg, #fff 0, #fff 1px, transparent 1px, transparent 46px);
}

/* ─── Typography ─── */
.ao-vs-eyebrow {
  font-family: 'Roboto', Helvetica, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--aov-accent);
  margin: 0 0 18px;
}
.ao-vs-eyebrow--light { color: var(--aov-accent-light); }

.ao-vs-h1 {
  font-weight: 800;
  font-size: clamp(2.25rem, 6vw, 68px);
  line-height: 1.05;
  letter-spacing: -2.4px;
  color: #fff;
  margin: 0 0 24px;
  text-wrap: pretty;
}
.ao-vs-h1 .ao-vs-vs {
  background: linear-gradient(100deg, var(--aov-accent), var(--aov-accent-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ao-vs-h1 small {
  display: block;
  font-size: clamp(1.25rem, 3.2vw, 34px);
  font-weight: 600;
  letter-spacing: -1.2px;
  line-height: 1.2;
  color: rgba(255, 255, 255, .62);
  margin-top: 16px;
}

.ao-vs-h2 {
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 40px);
  letter-spacing: -1.5px;
  line-height: 1.15;
  color: var(--aov-ink);
  margin: 0 0 16px;
}
.ao-vs-h2--onDark { color: #fff; }
.ao-vs-h3 {
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 24px);
  letter-spacing: -.8px;
  color: var(--aov-ink);
  margin: 0 0 26px;
}

.ao-vs-lede { font-size: 17px; line-height: 27px; color: var(--aov-body); opacity: .82; margin: 0; }
.ao-vs-lede--onDark { color: rgba(255, 255, 255, .72); opacity: 1; }
.ao-vs-head { max-width: 720px; margin-bottom: 56px; }
.ao-vs-head p:last-child { margin-bottom: 0; }

/* ─── Buttons & pills ─── */
.ao-vs-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
  padding: 16px 30px;
  border-radius: 9999px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  text-decoration: none;
}
.ao-vs-btn:hover { transform: scale(1.03); }
.ao-vs-btn--white { background: #fff; color: var(--aov-ink); }
.ao-vs-btn--dark { background: var(--aov-ink); color: #fff; }
.ao-vs-btn--outline { border: 1px solid rgba(255, 255, 255, .28); color: #fff; }
.ao-vs-btn--outline:hover { background: rgba(255, 255, 255, .09); transform: none; }
.ao-vs-btn--ghost { border: 1px solid var(--aov-border); color: var(--aov-ink); }
.ao-vs-btn--ghost:hover { background: #f5f5f9; transform: none; }
.ao-vs-btns { display: flex; gap: 14px; flex-wrap: wrap; }

.ao-vs-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 9999px;
  padding: 10px 20px;
  font-size: 13.5px;
  font-weight: 500;
}
.ao-vs-pill--glass {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, .9);
}
.ao-vs-pill--tint {
  background: rgba(158, 168, 251, .16);
  border: 1px solid var(--aov-accent-light);
  color: var(--aov-ink);
  font-weight: 600;
}
.ao-vs-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--aov-accent-light); }
.ao-vs-dot--accent { background: var(--aov-accent); }

/* ─── Logo slots ─── */
.ao-vs-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  background: #f5f5f9;
  border: 1px dashed var(--aov-border);
  border-radius: 10px;
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 9px;
  color: var(--aov-muted);
  width: 38px;
  height: 38px;
}
.ao-vs-logo img { width: 100%; height: 100%; object-fit: contain; }
.ao-vs-logo--lg { width: 42px; height: 42px; border-radius: 11px; }

/* Real artwork: the placeholder is a 38px square, but brand wordmarks run as
   wide as 6:1 and would be squashed to a few pixels tall inside it. With an
   image present, drop the placeholder chrome and size by height instead. */
.ao-vs-logo--img {
  width: auto;
  height: 26px;
  max-width: 150px;
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.ao-vs-logo--img img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.ao-vs-logo--img.ao-vs-logo--lg { height: 30px; max-width: 168px; }

/* The matrix header sits on the dark ink background and these wordmarks are
   dark, so they need a light chip behind them to stay legible. */
.ao-vs-logo--img.ao-vs-logo--sm {
  /* width must be restated: the .ao-vs-logo--sm square is declared later in this
     file at equal specificity, so it would otherwise win and pin this to 30px. */
  width: auto;
  /* border-box: the 5px padding comes out of this height, leaving an 18px logo. */
  height: 28px;
  max-width: 142px;
  padding: 5px 9px;
  background: #fff;
  border-radius: 6px;
}
.ao-vs-logo--sm {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .7);
  font-size: 8px;
}

/* ─── Hero ─── */
.ao-vs-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 44px;
}
.ao-vs-crumbs a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.ao-vs-crumbs a:hover { color: #fff; }
.ao-vs-crumbs [aria-current] { color: #fff; }

.ao-vs-hero-copy { max-width: 880px; }
.ao-vs-hero-copy .ao-vs-lede { max-width: 660px; margin-bottom: 36px; }

.ao-vs-versus { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 34px; }
/* position:relative: when a tool has a wordmark logo, angleout_vs_tool_label()
   hides its duplicate name with .ao-vs-sr, which positions absolutely. Without a
   positioned ancestor the hidden text lands in the page flow and widens
   scrollWidth — a horizontal scrollbar from invisible text. */
.ao-vs-versus-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 16px;
  padding: 16px 24px;
  min-width: 220px;
}
.ao-vs-versus-card span:last-child {
  font-family: 'Poppins', Helvetica, sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: var(--aov-ink);
}
.ao-vs-versus-mark {
  font-family: 'Poppins', Helvetica, sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--aov-accent-light);
  letter-spacing: .5px;
}

.ao-vs-byline {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.ao-vs-byline p { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, .65); }
.ao-vs-byline strong { color: #fff; font-weight: 600; }
.ao-vs-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex: none;
  overflow: hidden;
  background: rgba(255, 255, 255, .1);
  border: 1px dashed rgba(255, 255, 255, .3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 9px;
  color: rgba(255, 255, 255, .6);
}
.ao-vs-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ─── Shared grids ─── */
.ao-vs-duo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}

/* Three-way comparisons: narrower minimum so all three cards sit on one row on
   desktop, then fall to two-up and one-up on the way down. */
.ao-vs-duo--trio { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }

/* ─── Verdict ─── */
.ao-vs-sticker {
  position: absolute;
  top: -34px;
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  background: #fff;
  border: 3px solid var(--aov-ink);
  border-radius: 50%;
  padding: 14px 34px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--aov-ink);
  z-index: 5;
  white-space: nowrap;
  box-shadow: 0 6px 0 rgba(3, 18, 38, .08);
}
.ao-vs-verdict-card { border: 2px solid var(--aov-border); border-radius: 18px; padding: 38px 34px; }
.ao-vs-verdict-head { position: relative; display: flex; align-items: center; gap: 13px; margin-bottom: 24px; flex-wrap: wrap; }
.ao-vs-tool-name {
  font-family: 'Poppins', Helvetica, sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--aov-ink);
}
.ao-vs-tag {
  margin-left: auto;
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 9999px;
}
.ao-vs-claim {
  font-weight: 600;
  font-size: 21px;
  line-height: 31px;
  letter-spacing: -.5px;
  color: var(--aov-ink);
  margin: 0 0 26px;
}

/* ─── Check lists ─── */
.ao-vs-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ao-vs-checks--wide { gap: 16px; }
.ao-vs-checks li { display: flex; gap: 12px; font-size: 16px; line-height: 25px; color: var(--aov-body); }
.ao-vs-check {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--aov-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  margin-top: 3px;
}

/* ─── Scoreboard ─── */
.ao-vs-split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}
.ao-vs-split > div { max-width: 620px; }
.ao-vs-split .ao-vs-h2 { margin-bottom: 0; }
.ao-vs-split-note { margin: 0; font-size: 14px; color: var(--aov-body); opacity: .65; max-width: 300px; }

.ao-vs-board { background: #fff; border: 1px solid var(--aov-border); border-radius: 18px; overflow: hidden; }
.ao-vs-board-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr);
  border-top: 1px solid var(--aov-rule);
}
.ao-vs-board-head {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr);
  background: var(--aov-ink);
  color: #fff;
}
.ao-vs-board--trio .ao-vs-board-row,
.ao-vs-board--trio .ao-vs-board-head {
  grid-template-columns: minmax(140px, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1.15fr);
}
.ao-vs-board-head > div { padding: 18px 26px; font-family: 'Poppins', Helvetica, sans-serif; font-weight: 600; font-size: 16px; }
.ao-vs-colhead {
  font-family: 'Roboto', Helvetica, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.ao-vs-board-label { padding: 26px; font-weight: 600; font-size: 15px; color: var(--aov-ink); }
.ao-vs-board-cell { padding: 26px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ao-vs-board-cell.is-win { background: var(--aov-tint); }
.ao-vs-stat {
  font-family: 'Poppins', Helvetica, sans-serif;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -.5px;
  color: var(--aov-ink);
}
.ao-vs-stat-note { font-size: 13.5px; color: var(--aov-body); opacity: .6; }
.ao-vs-stat-win { font-size: 12px; font-weight: 700; color: var(--aov-ink); }

/* ─── Matrix ─── */
.ao-vs-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 34px; padding-left: 6px; }
.ao-vs-chip {
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', Helvetica, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 18px;
  border-radius: 10px;
  background: var(--aov-border);
  color: var(--aov-ink);
  transition: transform .18s ease, background .18s ease, color .18s ease;
  transform: rotate(-6deg);
}
.ao-vs-chip:nth-child(even) { transform: rotate(-1deg); }
.ao-vs-chip.is-active { background: #1e1e1e; color: #fff; transform: rotate(-6deg) scale(1.1); }
.ao-vs-chip.is-active:nth-child(even) { transform: rotate(-1deg) scale(1.1); }

.ao-vs-matrix { position: relative; border: 1px solid var(--aov-border); border-radius: 18px; overflow: hidden; }
.ao-vs-matrix-scroll { overflow-x: auto; }

/* A third tool column needs more room before the table starts scrolling. */
.ao-vs-table--trio { min-width: 1080px; }
.ao-vs-versus--trio { gap: 16px; }
.ao-vs-versus--trio .ao-vs-versus-card { min-width: 190px; }
.ao-vs-versus--trio .ao-vs-versus-mark { font-size: 21px; }

.ao-vs-table {
  min-width: 860px;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}
.ao-vs-table th,
.ao-vs-table td { border-top: 1px solid var(--aov-rule); }
.ao-vs-table thead th { border-top: 0; }

.ao-vs-table thead th {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--aov-ink);
  color: #fff;
  padding: 16px 26px;
  font-family: 'Poppins', Helvetica, sans-serif;
  font-weight: 600;
  font-size: 16px;
  vertical-align: middle;
}
.ao-vs-table thead th:first-child {
  left: 0;
  z-index: 21;
  width: 320px;
  min-width: 320px;
  padding: 20px 26px;
}
.ao-vs-matrix-tool { position: relative; display: flex; align-items: center; gap: 11px; }

/* Zebra is set per row in PHP rather than with nth-of-type, because group
   header rows sit in the same flow and would otherwise offset the striping. */
.ao-vs-row { background: #fff; }
.ao-vs-row--alt { background: rgba(3, 18, 38, .025); }
/* Explicit so the filter's hidden attribute always wins over display:table-row. */
.ao-vs-table tr[hidden] { display: none; }

.ao-vs-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 10;
  background: inherit;
  width: 320px;
  min-width: 320px;
  padding: 22px 26px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -.2px;
  color: var(--aov-body);
  border-right: 1px solid var(--aov-rule);
  vertical-align: middle;
}
.ao-vs-table td {
  min-width: 230px;
  padding: 22px 26px;
  font-size: 15px;
  line-height: 23px;
  color: var(--aov-body);
  vertical-align: middle;
}
.ao-vs-table td.is-win { background: var(--aov-tint); }
/* position:relative so the absolutely-positioned .ao-vs-sr label inside resolves
   against this cell. Without it the label's containing block is .ao-vs-inner,
   and its static position inside the 860px-wide table pushes the page's
   scrollWidth out — a horizontal scrollbar from invisible text. */
.ao-vs-cell { display: flex; align-items: center; gap: 9px; position: relative; }
.ao-vs-icon { font-family: 'Poppins', Helvetica, sans-serif; font-weight: 600; font-size: 15px; line-height: 1; flex: none; }
.ao-vs-icon--yes { color: var(--aov-ink); }
.ao-vs-icon--partial { color: #5a6474; }
.ao-vs-icon--no { color: var(--aov-muted); }
.ao-vs-icon--text { display: none; }

.ao-vs-group { background: #f0f2f7; }
.ao-vs-group th {
  position: sticky;
  left: 0;
  background: #f0f2f7;
  padding: 16px 26px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--aov-ink);
}

/* Visible only to screen readers — carries the ✓ / ~ / — meaning as words. */
.ao-vs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ao-vs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  padding: 18px 26px;
  border-top: 1px solid var(--aov-rule);
  background: #fafbfd;
  font-size: 13px;
  color: var(--aov-body);
}
.ao-vs-legend span { display: flex; align-items: center; gap: 7px; }
.ao-vs-legend-hint { margin-left: auto; opacity: .6; }
.ao-vs-legend-partial { background: var(--aov-border); color: var(--aov-ink); border-radius: 6px; padding: 2px 7px; font-size: 11px; font-weight: 700; }

/* ─── Deep dives ─── */
.ao-vs-dives { display: flex; flex-direction: column; gap: 96px; }
.ao-vs-dive { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 64px; align-items: center; }
.ao-vs-dive p { font-size: 17px; line-height: 27px; color: var(--aov-body); opacity: .85; margin: 0 0 18px; }
.ao-vs-dive p:last-of-type { margin-bottom: 28px; }
.ao-vs-dive--flip .ao-vs-dive-media { order: 2; }
.ao-vs-dive--flip .ao-vs-dive-copy { order: 1; }
.ao-vs-dive-media {
  border: 2px solid var(--aov-body);
  border-radius: 12px;
  box-shadow: 8px 8px 0 var(--aov-body);
  background: #f5f5f9;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow: hidden;
}
.ao-vs-dive-media img { width: 100%; height: 100%; object-fit: cover; }
.ao-vs-slot {
  font-family: 'Roboto', Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--aov-muted);
}
.ao-vs-slot-caption { font-size: 14px; color: var(--aov-body); opacity: .6; }
.ao-vs-edge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(158, 168, 251, .18);
  border: 1px solid var(--aov-accent-light);
  color: var(--aov-ink);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 9999px;
}

/* ─── Pricing ─── */
.ao-vs-price-card { background: #fff; border-radius: 20px; padding: 36px 32px; }
.ao-vs-price-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--aov-rule);
}
.ao-vs-price-head span:last-child {
  font-family: 'Poppins', Helvetica, sans-serif;
  font-weight: 600;
  font-size: 21px;
  color: var(--aov-ink);
}
.ao-vs-tiers { display: flex; flex-direction: column; gap: 26px; }
.ao-vs-tier-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ao-vs-tier-name { font-weight: 600; font-size: 17px; color: var(--aov-ink); }
.ao-vs-tier-price { font-family: 'Poppins', Helvetica, sans-serif; font-weight: 600; font-size: 24px; color: var(--aov-ink); }
.ao-vs-tier-price small { font-size: 13px; font-weight: 400; opacity: .6; }
.ao-vs-tier-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 14.5px;
  color: var(--aov-body);
  opacity: .8;
}
.ao-vs-note {
  margin-top: 28px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 18px 26px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .78);
}

/* ─── Decision guide ─── */
.ao-vs-guide-card { background: #fff; border: 1px solid var(--aov-border); border-radius: 18px; padding: 36px 32px; }
.ao-vs-callout {
  margin-top: 32px;
  background: var(--aov-ink);
  border-radius: 18px;
  padding: 40px;
  text-align: center;
}
.ao-vs-callout p {
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 22px);
  line-height: 33px;
  letter-spacing: -.6px;
  color: #fff;
  margin: 0 auto;
  max-width: 760px;
}

/* ─── Bridge ─── */
.ao-vs-bridge {
  border: 2px solid var(--aov-body);
  border-radius: 24px;
  box-shadow: 10px 10px 0 var(--aov-body);
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.ao-vs-bridge-inner { position: relative; max-width: 700px; }
.ao-vs-bridge-inner .ao-vs-lede { margin-bottom: 30px; }
.ao-vs-bridge-inner .ao-vs-pill { margin-bottom: 34px; }

.ao-vs-marquee {
  margin-top: 44px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ao-vs-marquee-track { display: flex; gap: 56px; width: max-content; animation: ao-vs-marquee 34s linear infinite; }
.ao-vs-marquee-item {
  flex: none;
  width: 132px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The bundled client logos are white-on-transparent PNGs (they normally sit on
   the dark hero). This section is white, so knock them to a muted dark mark. */
.ao-vs-marquee-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: brightness(0);
  opacity: .42;
}
@keyframes ao-vs-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── FAQ ─── */
.ao-vs-faq { border-top: 1px solid #c2c2c2; }
.ao-vs-faq details { border-bottom: 1px solid #c2c2c2; }
.ao-vs-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 4px;
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 22px);
  letter-spacing: -.5px;
  color: var(--aov-ink);
}
.ao-vs-faq summary::-webkit-details-marker { display: none; }
.ao-vs-faq summary > span:first-child { flex: 1; }
.ao-vs-plus { flex: none; font-size: 22px; font-weight: 400; color: var(--aov-accent); transition: transform .25s ease; }
.ao-vs-faq details[open] .ao-vs-plus { transform: rotate(45deg); }
.ao-vs-faq p { margin: 0; padding: 0 4px 28px; font-size: 16.5px; line-height: 27px; color: var(--aov-body); opacity: .85; max-width: 800px; }

/* ─── Related ─── */
.ao-vs-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.ao-vs-related-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--aov-border);
  border-radius: 14px;
  padding: 20px 22px;
  color: var(--aov-ink);
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.ao-vs-related-card:hover { border-color: var(--aov-accent); transform: translateY(-2px); }
.ao-vs-related-card > span:nth-child(2) { flex: 1; font-weight: 600; font-size: 15.5px; letter-spacing: -.3px; }
.ao-vs-related-arrow { flex: none; font-size: 15px; color: var(--aov-accent); }
.ao-vs-dots { display: flex; flex: none; }
.ao-vs-dots span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; display: block; background: var(--aov-border); }
.ao-vs-dots span + span { background: var(--aov-accent-light); margin-left: -8px; }
.ao-vs-link { font-weight: 600; font-size: 15px; color: var(--aov-accent); text-decoration: none; }
.ao-vs-link:hover { color: var(--aov-ink); }

/* ─── Archive ─── */
.ao-vs-archive-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.ao-vs-empty { text-align: center; font-size: 17px; color: var(--aov-body); opacity: .7; }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .ao-vs-section,
  .ao-vs-section--dark,
  .ao-vs-section--grad { padding: 64px 20px; }
  .ao-vs-section--tight { padding-top: 0; }
  .ao-vs-section--hero { padding: 116px 20px 64px; }
  .ao-vs-dives { gap: 64px; }
  .ao-vs-dive { gap: 36px; }
  .ao-vs-dive--flip .ao-vs-dive-media { order: 0; }
  .ao-vs-dive--flip .ao-vs-dive-copy { order: 0; }
  .ao-vs-bridge { padding: 40px 26px; box-shadow: 6px 6px 0 var(--aov-body); }
  .ao-vs-callout { padding: 28px 22px; }
  .ao-vs-sticker { position: static; transform: rotate(-3deg); white-space: normal; text-align: center; margin: 0 auto 12px; display: block; width: fit-content; }
  .ao-vs-board-head, .ao-vs-board-row { grid-template-columns: 1fr 1fr; }
  /* Same stacked treatment for three-way boards — the label spans the row and
     the value cells sit side by side underneath it. */
  /* minmax(0, …) so a long value wraps instead of widening its track and
     knocking the value cells out of line with the header. */
  .ao-vs-board--trio .ao-vs-board-head,
  .ao-vs-board--trio .ao-vs-board-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ao-vs-board-head > div:first-child { display: none; }
  .ao-vs-board-label { grid-column: 1 / -1; padding: 18px 20px 0; }
  .ao-vs-board-cell { padding: 14px 20px 20px; }
  .ao-vs-split { margin-bottom: 32px; }
  .ao-vs-legend-hint { margin-left: 0; flex-basis: 100%; }
}

@media (max-width: 600px) {
  .ao-vs-table thead th:first-child,
  .ao-vs-table tbody th[scope="row"] { width: 200px; min-width: 200px; }
  /* Stack the two tools so the VS mark sits between them, not beside one. */
  .ao-vs-versus { flex-direction: column; align-items: stretch; gap: 12px; }
  .ao-vs-versus-card { min-width: 0; }
  .ao-vs-versus-mark { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ao-vs-marquee-track { animation: none; }
  .ao-vs-btn:hover,
  .ao-vs-related-card:hover { transform: none; }
  .ao-vs-plus { transition: none; }
}