/* ── Compare page, reviewed (site_compare.py) ── */
/* 1. The key: what the dot and "Not listed" mean, next to the control that uses them */
.vs-key{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;font-size:14px;line-height:20px;color:var(--paper-ink-2)}
.vs-key__i--dot{display:inline-flex;align-items:center;gap:8px}
.vs-key .vs-dot{margin:0}
.vs-key--stage{margin-top:12px}
.vs-key--table{display:none}
.vs-intro > .vs-seg--stage + .vs-key{margin-top:-20px}
/* 2. Pickers on wide screens: the raised pill phones already have, so the name reads as a control */
@media (min-width:761px){
  .vs-pick{margin:0 0 8px;padding:0 12px 0 16px;background:var(--paper-raised)}
  .vs-pick:hover{background:#e3e1da}
  .vs-pick__name{font-size:clamp(1.25rem,1rem + .7vw,1.75rem)}
  /* 4. Photos: one width for both, on a shared baseline */
  .vs-dev__pic{height:auto}
  .vs-dev__pic img{width:min(100%,320px);height:auto;max-height:112px;object-fit:contain;object-position:left bottom}
  .vs-swap{min-height:44px}
}
/* 5. The closing row: the same three columns as the table */
.vs-end{display:grid;grid-template-columns:28% 36% 36%;align-items:start;margin-top:clamp(40px,5vw,56px);padding-top:24px;border-top:1px solid var(--paper-ink)}
.vs-end__intro{padding-right:32px}
.vs-end__t{margin:0;font-size:clamp(1.5rem,1.3rem + .5vw,1.75rem);line-height:1.2;font-weight:600;letter-spacing:-.02em;color:var(--paper-ink)}
.vs-end__lead{margin:8px 0 0;font-size:15px;line-height:22px;color:var(--paper-ink-2)}
.vs-end__dev{display:grid;justify-items:start;gap:4px;min-width:0;padding-right:24px}
.vs-end__name{margin:0;font-size:20px;line-height:28px;font-weight:600;color:var(--paper-ink)}
.vs-end__dev .vs-dev__price{margin-top:0;font-size:17px;line-height:24px}
.vs-end__dev .vs-dev__stock{font-size:15px;line-height:22px}
.vs-end__dev .vs-dev__acts{margin-top:8px}
@media (max-width:760px){
  .vs-key--stage{display:none}
  .vs-key--table{display:flex;margin:0 0 4px;padding-top:4px}
  /* 3. The dot sits inline, before the label, inside the page margin */
  .vt tr.is-diff > th::before{position:static;display:inline-block;width:7px;height:7px;margin:0 8px 0 0;vertical-align:1px}
  .vs-dev__acts .link::after{inset:-10px -4px}
  .vs-end{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;row-gap:16px}
  .vs-end__intro{grid-column:1 / -1;padding-right:0}
  .vs-end__dev{padding-right:0}
  .vs-end__name{font-size:17px;line-height:24px}
  .vs-end__dev .vs-dev__acts .btn{min-height:44px;padding:0 16px}
  /* 6. Popular comparisons: all four on one screen, two by two */
  .vs-pop__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible;scroll-snap-type:none;margin-inline:0;padding:0}
  .vs-pop__list > li{flex:none}
  .vs-card{gap:10px;padding:28px 12px 16px}
  .vs-card__pics{gap:8px;height:36px}
  .vs-card__t{font-size:15px;line-height:20px}
  .vs-card__now{top:8px;right:8px;padding:0 6px;font-size:11px;line-height:18px}
}