/* ============================================================
   Comparison pages: /alternatives/<name>/ and /coaches/cost/.
   Layered on switcher.css (tokens) and product.css (nav, bands,
   buttons, faq). No inline styles: the CSP drops them.
   ============================================================ */

.cmp-hero{padding-bottom:clamp(28px,4vh,48px)}
.cmp-hero .wrap{display:block;max-width:860px}
.cmp-hero h1{font-size:clamp(30px,4.6vw,48px)}
.cmp-hero .lede{max-width:none}
.crumbs{font-size:13px;color:var(--muted);margin:0 0 18px;font-family:var(--mono);letter-spacing:.04em}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--text)}
.checked{color:var(--muted);font-size:14px;margin:0 0 22px}

/* Tables scroll inside their own box on a phone, never the page. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg-raised)}
.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.cmp.wide{min-width:760px}
.cmp caption{text-align:left;padding:14px 18px 0;color:var(--muted);font-size:13px;
  font-family:var(--mono);letter-spacing:.06em;caption-side:top}
.cmp th,.cmp td{padding:14px 18px;text-align:left;vertical-align:top;border-top:1px solid var(--line)}
.cmp thead th{border-top:0;font-size:13px;color:var(--muted);font-weight:600;
  font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.cmp tbody th{color:var(--text);font-weight:600;width:24%}
.cmp td{color:var(--text-body)}
/* Fullrack PT is the first data column on /alternatives/ pages and the
   first row on /coaches/cost/. */
.cmp:not(.wide) td:nth-child(2){color:var(--text)}
.cmp.wide tbody tr:first-child{background:rgba(43,217,169,.06)}
.cmp a{color:var(--accent)}
.cmp b{color:var(--text)}

.pnote.left{text-align:left;max-width:820px;margin-left:0}

.cmp-two{display:grid;gap:clamp(24px,4vw,56px);grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.cmp-two h2{font-size:clamp(20px,2.6vw,26px)}
.ticks{list-style:none;margin:0;padding:0}
.ticks li{padding:12px 0 12px 26px;border-bottom:1px solid var(--line);position:relative;
  color:var(--text-body);font-size:15px}
.ticks li:before{content:"";position:absolute;left:2px;top:19px;width:9px;height:5px;
  border:solid var(--accent);border-width:0 0 2px 2px;transform:rotate(-45deg)}

.srcs{margin:0 0 18px;padding-left:20px;color:var(--text-body);font-size:15px}
.srcs li{margin:6px 0}
.srcs a,.altlinks a{color:var(--accent)}
.altlinks{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.altlinks a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);text-decoration:none;font-weight:600}
.altlinks a:hover{border-color:var(--line-hi)}

/* Phones: the two-product table fits without sideways scrolling; the wide
   cost tables keep their own scroll box. */
@media (max-width:640px){
  .cmp:not(.wide){min-width:0;font-size:14px}
  .cmp:not(.wide) th,.cmp:not(.wide) td{padding:12px 10px}
  .cmp:not(.wide) tbody th{width:30%}
  .cmp caption{padding:12px 10px 0}
}