/* ------------------------------------------------------------------
   v2 additions — layered on primer.css, which is unchanged.
   Kept in a separate file so the live page cannot be affected by
   anything here until index_v2.html replaces it deliberately.
   ------------------------------------------------------------------ */

/* ---------- comparison table ---------- */
.ctable-wrap{margin-top:48px;border:1px solid var(--line);border-radius:var(--r);overflow-x:auto}
.ctable{width:100%;border-collapse:collapse;min-width:820px;font-size:14.5px}
.ctable thead th{
  padding:20px 18px;text-align:left;vertical-align:bottom;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  font-weight:500;border-bottom:1px solid var(--line);background:var(--bg-1)}
.ctable thead th span{display:block;opacity:.6;letter-spacing:.08em}
.ctable thead th.us{color:var(--mint);background:var(--mint-soft)}
/* The row label STAYS PUT while the table scrolls sideways.
   Without this, a narrow screen shows "Yes / Yes / No" with the question scrolled off,
   which is worse than not showing the table at all — the reader cannot tell whether a
   "No" is good or bad. */
.ctable tbody th{
  padding:16px 18px;text-align:left;font-weight:560;font-size:14px;color:var(--ink);
  border-bottom:1px solid var(--line);width:210px;background:var(--bg-1);
  position:sticky;left:0;z-index:2}
.ctable thead th:first-child{position:sticky;left:0;z-index:3;background:var(--bg-1)}
.ctable tbody td{
  padding:16px 18px;color:var(--ink-3);border-bottom:1px solid var(--line);
  border-left:1px solid var(--line);line-height:1.4}
.ctable tbody td.us{color:var(--ink);background:var(--mint-soft);font-weight:520}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:none}

/* ---------- callout ---------- */
.callout{
  margin-top:44px;padding:30px 32px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);border-left:2px solid var(--mint)}
.callout h4{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mint);margin:0 0 14px;font-weight:500}
.callout p{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:0 0 14px}
.callout p:last-child{margin-bottom:0}
.callout .fine{margin-top:14px}

/* a command someone is meant to actually run */
.cmd{
  font-family:var(--mono);font-size:13px;color:var(--mint);background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:0 0 14px;
  overflow-x:auto;white-space:pre;line-height:1.5}

/* ---------- stat cards ---------- */
.scard.stat{text-align:left}
.scard.stat b{
  display:block;font-size:clamp(30px,4vw,40px);font-weight:640;color:var(--mint);
  line-height:1.05;margin-bottom:10px;letter-spacing:-.02em}
.scard.stat span{font-size:14px;color:var(--ink-2);line-height:1.45}

/* ---------- misc ---------- */
.wrap.narrow{max-width:760px}
#limits .scard h3{color:var(--amber)}
.gap-note{margin-top:40px}

@media (max-width:760px){
  .ctable-wrap{border-radius:10px}
  .ctable tbody th{width:150px}
}

/* ---------- by-design / in-build tags ---------- */
.tagline{
  display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 10px;border-radius:100px;margin-bottom:14px;
  border:1px solid var(--line)}
.tagline.by-design{color:var(--mint);background:var(--mint-soft);border-color:transparent}
.tagline.in-build{color:var(--amber);background:rgba(255,206,106,.09);border-color:transparent}
#limits .scard h3{color:var(--ink);margin-top:0}