/* Head-to-head pages (public/compare/<a>-vs-<b>/): split verdict card, side-by-side table, price calculator.
   They also load guide.css and review.css. Site-wide styles are in /assets/site.css. */

/* Split verdict card: one half per tool, "vs" on the seam */
.vs{border-radius:var(--r);overflow:hidden}
.vs__side{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:clamp(22px,2.4vw,30px);color:var(--ink)}
.vs__side--sun{background:var(--sun)}
.vs__side--white{background:var(--white)}
.vs__name{font:900 clamp(3rem,2rem + 2.4vw,4.4rem)/.86 var(--display)}
.vs__pick{max-width:24em;font-size:1.0625rem;font-weight:700;line-height:1.4;text-wrap:pretty}
.vs__side .pill{min-height:44px;margin-top:4px;padding:0 1.1rem;font-size:.9375rem}
.vs__badge{position:absolute;top:0;right:clamp(22px,2.4vw,30px);display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--ink);color:var(--sun);font:900 1.7rem/1 var(--display);transform:translateY(-50%)}
.vs__aff{padding:12px clamp(22px,2.4vw,30px);background:var(--ink);color:var(--mist);font-size:.8125rem}

/* Side by side: tools as columns, the row that decides it in sun */
.vs-hint{display:none;margin-top:18px;font-size:.875rem;font-weight:700;color:var(--ink-2)}
.plans--vs{min-width:560px}
.plans--vs thead th{font:900 1.9rem/1 var(--display)}
.plans--vs tbody th{font:900 1.3rem/1.05 var(--display)}
.plans--vs th:first-child{position:sticky;left:0;z-index:1;width:10rem;background:var(--white);box-shadow:1px 0 0 var(--line)}
.plans--vs .is-key > *{background:var(--sun)}
@media (max-width:700px){.vs-hint{display:block}.plans--vs th:first-child{width:7.5rem}}
/* Phones: each row is its label, then both tools side by side, each cell named (--a and --b are set on the table) */
@media (max-width:600px){
  .vs-hint,.plans--vs thead{display:none}
  .plans--vs,.plans--vs tbody{display:block;min-width:0}
  .plans--vs tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans--vs tbody th:first-child{position:static;grid-column:1/-1;width:auto;padding-bottom:0;border-bottom:0;box-shadow:none}
  .plans--vs td + td{box-shadow:inset 1px 0 0 var(--line)}
  .plans--vs td::before{display:block;margin-bottom:4px;font-size:.75rem;font-weight:800;color:var(--ink-2)}
  .plans--vs td:nth-of-type(1)::before{content:var(--a)}
  .plans--vs td:nth-of-type(2)::before{content:var(--b)}
}

/* Price at your volume: an ink card, the cheaper tool in sun */
.pricer__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pricer .result__verdict{margin-top:24px}
.pricer__out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.pricer__tool{display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:16px;background:var(--night)}
.pricer__tool.is-pick{background:var(--sun);color:var(--ink)}
.pricer__name{font-size:.9375rem;font-weight:800}
.pricer__plan{font:900 clamp(1.9rem,1.5rem + 1vw,2.5rem)/.95 var(--display)}
.pricer__price b{font:900 2.2rem/1 var(--display)}
.pricer__line,.pricer__note{font-size:.875rem;line-height:1.45;color:var(--mist)}
.pricer__tool.is-pick .pricer__line,.pricer__tool.is-pick .pricer__note{color:var(--ink-2)}
@media (max-width:600px){.pricer__fields,.pricer__out{grid-template-columns:minmax(0,1fr)}}

/* Which to pick: the second card is tint */
.fit__card--tint{background:var(--tint);color:var(--ink)}