/* ---------- Comparison ---------- */
.vs-wrap{overflow-x:auto}
.vs{width:100%;border-collapse:collapse;table-layout:fixed;min-width:980px}
.vs col{width:auto}
.vs thead th{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-align:left;vertical-align:bottom;color:var(--steel);padding:0 22px 20px;border-bottom:1px solid var(--ink);line-height:1.5}
.vs thead th:first-child{padding-left:0;width:17%}
.vs thead th.us{color:var(--copper);background:var(--night);padding-top:22px;border-bottom-color:var(--night)}
.vs tbody th{font-size:clamp(18px,1.5vw,22px);font-weight:400;letter-spacing:-.015em;text-align:left;vertical-align:top;padding:26px 22px 26px 0;border-bottom:1px solid var(--line);line-height:1.25;transition:color .4s var(--ease)}
.vs td{vertical-align:top;padding:26px 22px;border-bottom:1px solid var(--line);font-size:16px;line-height:1.45;color:var(--steel);transition:background .4s var(--ease),color .4s var(--ease)}
.vs td.us{background:var(--night);color:var(--paper);font-size:clamp(17px,1.35vw,20px);font-weight:300;letter-spacing:-.01em;border-bottom-color:var(--line-dark);position:relative}
.vs td.us::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:2px;background:var(--copper);transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--ease)}
.vs tbody tr:last-child td.us{border-bottom-color:var(--night)}
.vs tbody tr:hover td:not(.us){background:rgba(13,16,19,.04);color:var(--ink)}
.vs tbody tr:hover td.us::before{transform:scaleY(1)}
.vs tbody tr:hover th{color:var(--copper)}
@media (max-width:860px){
  .vs{min-width:0;table-layout:auto}
  .vs thead{display:none}
  .vs tr{display:block;border-top:1px solid var(--ink);padding:22px 0 6px}
  .vs tbody th{display:block;padding:0 0 14px;border:0;font-size:22px}
  .vs td{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,11fr);gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
  .vs td::before{content:attr(data-label);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);padding-top:3px}
  .vs td.us{padding:14px 14px;border-bottom:0}
  .vs td.us::before{content:attr(data-label);position:static;width:auto;background:none;transform:none;color:var(--copper)}
}
/* Why this matters: The Store grid, three columns */
.why-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.why-grid .store h3{font-size:clamp(26px,2.4vw,36px);line-height:1.1;text-wrap:balance}
.why-grid .store p{font-size:17px;max-width:34ch}
@media (max-width:960px){.why-grid{grid-template-columns:1fr}.why-grid .store{padding-left:clamp(20px,2.4vw,34px)!important;border-left:0!important}.why-grid .store+.store{border-top:1px solid var(--line-dark)}}
#moat .lede{max-width:56ch}
/* H1 sized so each sentence holds its own line on wide screens */
#comparison h1{font-size:clamp(36px,4.5vw,68px)}
/* v2: Equilibrium column in pale grey with bold copper text, same size as the rest */
.vs thead th.us{background:var(--paper-2);color:var(--copper);border-bottom-color:var(--ink)}
.vs td.us{background:var(--paper-2);color:var(--copper);font-size:16px;font-weight:600;letter-spacing:0;border-bottom-color:var(--line)}
.vs tbody tr:last-child td.us{border-bottom-color:var(--line)}
.vs td.us::before{background:var(--ink)}
.vs tbody tr:hover td.us{background:#DDE0E3}
@media (max-width:860px){.vs td.us{font-size:16px}.vs td.us::before{background:none;color:var(--copper)}}
.vs tbody tr:hover th{color:var(--ink)}