/* quazar.org — /alternatives comparison pages only.
   Loaded after site.css on the hub and the six vendor pages. site.css has no table
   styling and its h2 scale is built for short marketing headings, so both live here
   rather than growing the shared sheet. Tokens come from site.css :root. */

/* Headings: the comparison H1s and question-style H2s are long. Same scale as the
   /insights article pages, so long-form reads consistently across the site. */
.cmp-head h1{font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.08;letter-spacing:-.03em}
.cmp h2{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.18;letter-spacing:-.02em;
  margin:56px 0 18px;scroll-margin-top:110px}
.cmp > h2:first-child{margin-top:24px}
.cmp h3{margin-top:28px}

/* Lists */
.cmp ol,.cmp ul{max-width:70ch;margin:0 0 19px;padding-left:1.3em;color:var(--body)}
.cmp li{margin-bottom:9px}
.cmp li::marker{color:var(--brand)}

/* Tables. Opaque panel: the canvas animation reads straight through a translucent
   one (same issue .ffab had). On desktop the panel breaks out of the ~830px prose
   column, up to 1180px; on phones rows stack (see the media query below). */
.cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:8px 0 28px;
  border-radius:14px;background:#0b0d14;border:1px solid var(--line);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.9)}
@media (min-width:900px){
  .cmp-scroll{position:relative;left:50%;transform:translateX(-50%);
    width:min(1180px,calc(100vw - 2*clamp(20px,5vw,54px)))}
}
.cmp-scroll:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.cmp table{width:100%;min-width:680px;border-collapse:collapse;font-size:.92rem;line-height:1.5}
.cmp th,.cmp td{padding:14px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);color:var(--body)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp th{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);background:rgba(255,131,0,.06)}
.cmp td:first-child{color:var(--ink);font-weight:500;min-width:150px}
/* the Quazar row / column reads as ours without colour alone carrying meaning */
.cmp tr.is-quazar td{background:rgba(255,131,0,.07)}
.cmp tr.is-quazar td:first-child{box-shadow:inset 3px 0 0 var(--brand)}

/* Links inside tables are not covered by site.css's .pagebody p/li a rule and
   would fall back to browser blue (2.17:1 on this background). */
.cmp td a{color:var(--brand);text-decoration:none;border-bottom:1px solid rgba(255,131,0,.38);
  transition:border-color .2s,color .2s}
.cmp td a:hover,.cmp td a:focus-visible{color:#ffa138;border-bottom-color:var(--brand)}

/* Footnote markers */
.cmp sup{font-size:.68em;line-height:0;margin-left:1px}
.cmp sup a{border-bottom:0 !important}
.cmp-sources li{font-size:.9rem;margin-bottom:7px;scroll-margin-top:110px;word-break:break-word}
.cmp-sources + p{font-size:.9rem;color:var(--dim)}

/* Related links row */
.cmp-related{font-size:.95rem}

/* Text shadow from .wrap * muddies small table text; tables sit on their own panel */
.cmp-scroll,.cmp-scroll *{text-shadow:none}

/* Phones: each row becomes a card. The first cell is the card's heading; every other
   cell carries its column name from data-label, set by the build from the <th>s. */
@media (max-width:760px){
  .cmp-scroll{overflow:visible;background:transparent;border:0;box-shadow:none;border-radius:0}
  .cmp table,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%;min-width:0}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp tr{background:#0b0d14;border:1px solid var(--line);border-radius:14px;
    padding:6px 0;margin-bottom:12px}
  .cmp td{border:0;padding:8px 16px}
  .cmp td:first-child{font-size:1rem;padding-top:12px;min-width:0}
  .cmp td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;
    font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--brand);margin-bottom:3px}
  .cmp tr.is-quazar td:first-child{box-shadow:none}
  .cmp tr.is-quazar{border-color:var(--brand)}
}