/* /compare/ only. The page reuses site.css's doc styles; this adds the cards, wide tables and the
   call to action. A file of its own so the other pages' cached site.css?v=12 stays valid.
   The CSP is style-src 'self', so nothing here can be inline. */
.cmp .doc-in{max-width:1120px}
.cmp .doc-lede{font-size:20px;line-height:31px;color:var(--paper);max-width:62ch}
.cmp-sub{margin-top:14px;color:var(--mute);font-size:15px;line-height:24px;max-width:72ch}
.cmp-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0 28px;padding:0;list-style:none}
.doc-body .cmp-cards{max-width:none;padding:0;list-style:none}
.doc-body .cmp-cards li{margin:0;padding:22px 24px;border:1px solid var(--rule-2);border-radius:14px;background:var(--glass)}
.cmp-cards h3{margin:0 0 8px;font-size:19px;line-height:1.25}
.cmp-cards p{margin:0;font-size:15px;line-height:24px;color:rgba(238,241,246,.86)}
.cmp-cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cmp-key{margin:28px 0;padding:26px 28px;border:1px solid rgba(255,181,71,.42);border-radius:16px;background:var(--glass)}
.doc-body .cmp-key p{max-width:72ch}
.cmp-key p:last-child{margin-bottom:0}
.cmp-key .cmp-big{font:600 clamp(21px,2.3vw,26px)/1.3 var(--f-display);letter-spacing:-.015em;color:var(--paper)}
.cmp .doc-table td,.cmp .doc-table tbody th{font-size:14.5px;line-height:1.5}
.cmp .doc-table tbody th{min-width:112px}
.cmp .doc-table tr.cmp-us th,.cmp .doc-table tr.cmp-us td{background:rgba(255,181,71,.06)}
.cmp .doc-table tr.cmp-us th{padding-left:12px;box-shadow:inset 2px 0 0 var(--amber)}
.cmp-note{font-size:14px;line-height:22px;color:var(--mute)}
.cmp-cta{margin:56px 0 8px;padding:32px;border:1px solid var(--rule-2);border-radius:18px;background:var(--glass);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.doc-body .cmp-cta p{margin:0;max-width:52ch}
.cmp-cta .btn{color:inherit;text-decoration:none}
.cmp-btns{display:flex;flex-wrap:wrap;gap:10px}
.cmp-cta b{display:block;font-size:22px;line-height:1.25;margin-bottom:6px}
/* Wide screens keep the columns readable; on the phone site.css stacks each row, so no min-width there. */
@media (min-width:861px){.cmp .doc-table table{table-layout:auto}}
/* On the phone site.css makes each row a card, so the highlight moves from the cells to the card. */
@media (max-width:699px){
  .cmp .doc-table tr.cmp-us{border-color:rgba(255,181,71,.55)}
  .cmp .doc-table tr.cmp-us th,.cmp .doc-table tr.cmp-us td{background:none}
  .cmp .doc-table tr.cmp-us th{padding-left:0;box-shadow:none}
}
@media (max-width:860px){
  .cmp-cards,.cmp-cards-3{grid-template-columns:minmax(0,1fr)}
  .cmp .doc-lede{font-size:18px;line-height:28px}
  .cmp-key{padding:20px}
  .cmp-cta{padding:22px}
}