/* comparison pages — the "versus" family (2 pages).
   Loads after tokens.css, chrome.css and service.css; service.css supplies the shared
   body scaffolding (svcbody/svcmain/svcsec, tableband, related, endband). This sheet
   owns only what versus pages add: the split hero, the duel panel, the verdict chip,
   winner-cell table treatment, the twin choose-cards band and the verdict box. */

/* ---------- hero: versus ---------- */
.vshero{position:relative;overflow:clip;border-bottom:1px solid var(--line);background:
  radial-gradient(700px 400px at 22% 18%,rgba(29,130,198,.14),transparent 62%),
  radial-gradient(700px 400px at 78% 18%,rgba(41,170,227,.10),transparent 62%),var(--bg)}
.vshero .wrap{padding-top:60px;padding-bottom:60px}
/* the hero is a two-column band: the argument on the left, one real photograph on the
   right, so the width is used rather than padded. The lede narrows with the column and
   never exceeds the reading measure. */
.vshero .intro{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:var(--g5);align-items:center}
.vshero .vstext{min-width:0}
.vshero h1{margin-top:18px}
.vshero p.lede{margin:20px 0 0;color:var(--mut);font-size:15.5px;line-height:1.7;max-width:62ch}
.vshero .intro .btns{margin-top:26px}
.vshero .herophoto{margin:0}
.vshero .herophoto img{aspect-ratio:1/1;object-position:50% 55%}
@media (max-width:900px){
  .vshero .intro{grid-template-columns:minmax(0,1fr);gap:var(--g4)}
}

.verdictchip{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--g1);margin-top:20px;max-width:100%;
  font:500 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan2);
  border:1px solid rgba(76,196,255,.35);border-radius:999px;padding:8px 16px;
  background:rgba(41,170,227,.08)}
.verdictchip b{font-weight:500;color:var(--mut2)}

/* the duel — two contenders name-to-name across a vertical cyan divider.
   The badge is a real grid item (1fr auto 1fr), so the two contender blocks run out to
   the panel's own edges and the split spans the whole wrap instead of clustering in the
   middle. Padding is the card 24px, not the old 40px. */
.duel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;margin-top:40px;
  border:1px solid var(--line2);border-radius:var(--rad);overflow:hidden;
  background:linear-gradient(180deg,rgba(18,33,61,.55),rgba(12,24,48,.35))}
.duel::before{content:"";position:absolute;left:50%;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,transparent,var(--cyan) 22%,var(--cyan) 78%,transparent)}
.duel .side{padding:28px 24px;min-width:0}
.duel .side:first-of-type{text-align:right}
.duel .slabel{display:block;font:500 12px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mut2);margin-bottom:12px}
.duel .sname{display:block;font:600 clamp(20px,2.3vw,27px)/1.2 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.duel .idline{margin-top:10px;font-size:14px;line-height:1.6;color:var(--mut);max-width:none}
.vsbadge{position:relative;z-index:1;margin:0 4px;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font:500 12px var(--mono);letter-spacing:.08em;color:var(--cyan2);
  background:#0B1830;border:1px solid var(--line-strong);
  box-shadow:0 0 26px rgba(41,170,227,.3)}
@media (max-width:900px){
  .duel{grid-template-columns:minmax(0,1fr)}
  .duel::before{display:none}
  .duel .side{padding:26px 24px}
  .duel .side:first-of-type{text-align:left;border-bottom:1px solid var(--line2)}
  .vsbadge{justify-self:center;margin:-23px 0}
}

/* ---------- body measure ---------- */
/* Versus pages carry no sticky rail (the split IS the width story), so the prose column
   centres under the full-width bands instead of hugging the left gutter.
   TWO widths only on these pages: the 760px measure (prose + the verdict panel) and the
   1092px wrap (versus panel, criteria table, twin choose-cards AND the related row —
   which is why .related sits beside .svcmain in the wrap, not inside the measure). */
/* The stylesheet comment claimed this column CENTRES under the full-width bands. It
   never did -- there was no margin-inline, so it hugged the left gutter and left 392px
   of black down the right of the longest pages on the site. (B-D1) */
/* min(px,ch) so the measure cannot exceed 68 characters at any width; a bare 760px
   here re-declared and beat service.css's cap. (round 4, A #5) */
/* removed: service.css owns the measure */
.svcbody--solo>.wrap>.related{margin-top:0}

/* ---------- winner cells in the comparison table ---------- */
.cmp td.win{box-shadow:inset 3px 0 0 var(--cyan);background:rgba(41,170,227,.06);color:var(--ink)}
/* The tick was an inline pseudo, so a wrapped second line returned to the cell's left
   padding instead of hanging under the first line's text. (B-D7) */
.cmp td.win::before{content:"✓";position:absolute;left:18px;top:13px;color:var(--cyan);font-weight:600}
/* table-layout:auto gave the two things being compared DIFFERENT widths -- criterion
   230px, Gate 480px, Ball 440px. On a versus page the two columns must be equal, or
   the layout is making an argument the content is not. (B-D7) */
.cmp table{font-size:15.5px;table-layout:fixed}
.cmp td{position:relative;width:calc((100% - 200px)/2);min-width:0;white-space:normal}
.cmp th:first-child,.cmp td:first-child{width:200px}
.cmp td.win{padding-left:42px}
/* At 390 a 230px min-width meant only ONE side was ever on screen, so comparing A to B
   required horizontal scrolling while holding the other column in memory -- on a page
   whose entire product is the comparison. Stacked per criterion, from the same table
   element, so it stays crawlable. (B-D7) */
@media (max-width:700px){
  .cmp table,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp th:first-child,.cmp td:first-child{width:auto}
  /* With the table switched to display:block the caption loses its table context
     and shrink-wraps to one word per line. It has to be told it is a block. */
  .cmp caption{display:block;position:static;max-width:none;white-space:normal;padding:14px 4px 12px}
  .cmp thead{position:absolute;left:-9999px}
  .cmp tr{border:1px solid var(--line2);border-radius:var(--rad-s);margin-bottom:var(--g2);padding:4px 0}
  .cmp td::after{content:attr(data-label);display:block;order:-1;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut2);margin-bottom:5px}
  .cmp td{display:flex;flex-direction:column}
  /* The tick is absolute so it does not become a flex row of its own, and it sits
     inside the padding rather than on the 3px cyan rule -- at left:0 it straddled
     the border and read as a mark on it. (round 3, B R-4) */
  .cmp td.win{position:relative;padding-left:30px}
  .cmp td.win::before{position:absolute;left:11px;top:26px;margin:0}
}

/* ---------- twin choose-cards + verdict band ---------- */
.twinband{background:var(--bg2);border-block:1px solid var(--line);padding:var(--band) 0;margin:0 0 72px}
.twinband .kicker{margin-bottom:14px}
.twinband h2{font:600 clamp(24px,2.8vw,32px)/1.2 var(--disp);margin-bottom:26px}
.choosetwins{display:grid;grid-template-columns:1fr 1fr;gap:var(--g2)}
.choosetwins .card{padding:26px 26px}
.choosetwins .card:hover{transform:none}
.choosetwins .chead{display:block;font:500 12px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);margin-bottom:16px}
.choosetwins ul{display:grid;gap:var(--g1)}
.choosetwins li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.55;color:var(--mut)}
.choosetwins li::before{content:"";position:absolute;left:0;top:.58em;width:13px;height:2px;background:var(--cyan)}
@media (max-width:700px){.choosetwins{grid-template-columns:1fr}}

.verdictbox{border:1px solid var(--line2);border-left:3px solid var(--cyan);border-radius:var(--rad-s);
  background:linear-gradient(180deg,rgba(18,33,61,.6),rgba(12,24,48,.4));
  padding:28px 30px;margin-top:16px}
.verdictbox .vtag{display:inline-block;font:500 12px var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan2);margin-bottom:12px}
.verdictbox p{color:var(--ink);font-size:16px;line-height:1.7;margin:0}
.verdictbox p+p{margin-top:12px}