/* ═══════════════════════════════════════════════════════════════════
   /compare hub + /compare/<slug> pages — editorial layout
   Style language: matches /agents (numbered §N sections, TOC sidebar,
   dense magazine-tech voice, JetBrains Mono labels, Geist headlines).
   ═══════════════════════════════════════════════════════════════════ */


/* ─── HUB PAGE (/compare) ───────────────────────────────────── */
.cmp-hero{position:relative;background:var(--dk);color:#fff;overflow:hidden;isolation:isolate;min-height:340px}
.cmp-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;opacity:.55}
.cmp-hero::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(14,27,20,.55) 0%,rgba(14,27,20,.85) 80%,rgba(14,27,20,.92) 100%)}
.cmp-hero-in{position:relative;z-index:2;padding:64px 0 56px;max-width:880px}
@media (max-width:640px){.cmp-hero-in{padding:44px 0 36px}}
.cmp-hero-eb{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.7);margin-bottom:18px;padding:5px 11px 5px 9px;border:1px solid rgba(255,255,255,.14);border-radius:100px;background:rgba(255,255,255,.04)}
.cmp-hero-eb-dot{width:6px;height:6px;border-radius:50%;background:#34d399;flex-shrink:0;animation:cmpPulse 2s ease-in-out infinite}
@keyframes cmpPulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.6)}50%{box-shadow:0 0 0 5px rgba(52,211,153,0)}}
.cmp-hero-h1{font-family:var(--fd);font-size:clamp(30px,4.4vw,48px);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-bottom:16px;color:#fff}
.cmp-hero-h1 em{font-style:normal;background:linear-gradient(120deg,#34d399 0%,#a7f3d0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#34d399}
.cmp-hero-sub{font-size:15.5px;color:rgba(255,255,255,.78);line-height:1.65;max-width:720px;margin-bottom:14px}

/* Hub cards */
.cmp-list-sec{padding:48px 0 64px;background:var(--bg)}
.cmp-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:40px}
@media (max-width:880px){.cmp-list{grid-template-columns:1fr}}
.cmp-card{display:flex;flex-direction:column;gap:14px;padding:22px 22px 18px;background:var(--bg);border:1px solid var(--bd);border-radius:12px;text-decoration:none;color:var(--tx);transition:.18s;position:relative}
.cmp-card:hover{border-color:var(--ac);transform:translateY(-3px);box-shadow:0 14px 32px -14px rgba(14,107,74,.18)}
.cmp-card-hd{display:flex;align-items:flex-start;gap:14px}
.cmp-card-logo{flex-shrink:0;width:52px;height:52px;display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--bd2);border-radius:10px;padding:8px;overflow:hidden}
.cmp-card-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.cmp-card-id{flex:1;min-width:0}
.cmp-card-name{font-family:var(--fd);font-size:18px;font-weight:800;letter-spacing:-.015em;color:var(--tx);margin:0;line-height:1.2}
.cmp-card-name em{font-style:normal;color:var(--ac);font-weight:700}
.cmp-card-meta{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--tx3);margin-top:4px;letter-spacing:.04em}
.cmp-card-arrow{flex-shrink:0;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;color:var(--tx4);transition:.15s}
.cmp-card-arrow svg{width:16px;height:16px}
.cmp-card:hover .cmp-card-arrow{color:var(--ac);transform:translateX(3px)}
.cmp-card-desc{font-size:13.5px;color:var(--tx2);line-height:1.6;margin:0}
.cmp-card-tags{display:flex;flex-wrap:wrap;gap:6px}
.cmp-tag{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--tx3);background:var(--bg2);border:1px solid var(--bd2);padding:3px 9px;border-radius:4px;letter-spacing:.02em}
.cmp-tag strong{color:var(--tx);font-weight:700}
.cmp-methodology{margin-top:32px;padding:18px 22px;background:var(--bg2);border:1px solid var(--bd2);border-radius:10px}
.cmp-method-eb{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--ac);margin-bottom:8px}
.cmp-methodology p{font-size:13px;color:var(--tx2);line-height:1.6;margin:0}


/* ═══════════════════════════════════════════════════════════════════
   /compare/<slug> DETAIL PAGE — editorial v2
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero (dramatic dark face-off) ── */
.cmp2-hero{background:var(--dk);color:#fff;padding:40px 0 56px;position:relative;overflow:hidden}
.cmp2-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% 20%,rgba(52,211,153,.10) 0%,transparent 60%);pointer-events:none}
.cmp2-hero-in{position:relative;z-index:1}

.cmp2-back{display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:rgba(255,255,255,.55);text-decoration:none;margin-bottom:36px;letter-spacing:.04em;transition:.15s}
.cmp2-back svg{width:13px;height:13px}
.cmp2-back:hover{color:#34d399}

/* Two-logo face-off above the H1 */
.cmp2-faceoff{display:flex;align-items:center;justify-content:center;gap:18px;margin:0 auto 28px;max-width:560px}
@media (max-width:640px){.cmp2-faceoff{gap:10px}}
.cmp2-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:16px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);border-radius:12px;min-width:0;position:relative}
.cmp2-side-us{border-color:rgba(52,211,153,.30);background:rgba(52,211,153,.05)}
.cmp2-side-us::after{content:'';position:absolute;top:0;left:14%;right:14%;height:2px;background:linear-gradient(90deg,transparent 0%,#34d399 50%,transparent 100%);border-radius:0 0 2px 2px}
.cmp2-side-logo{display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:#fff;border-radius:10px;padding:8px;overflow:hidden}
.cmp2-side-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.cmp2-side-name{font-family:var(--fd);font-size:14px;font-weight:700;letter-spacing:-.012em;color:#fff;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cmp2-side-rating{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:#34d399;letter-spacing:.02em}
.cmp2-side-them .cmp2-side-rating{color:rgba(255,255,255,.5)}
.cmp2-side-rating small{font-size:10px;color:rgba(255,255,255,.4);font-weight:500;margin-left:2px}
.cmp2-faceoff-vs{font-family:var(--fd);font-size:36px;font-weight:800;color:rgba(255,255,255,.25);letter-spacing:-.02em;font-style:italic;flex-shrink:0;line-height:1}
@media (max-width:640px){.cmp2-faceoff-vs{font-size:26px}}

.cmp2-h1{font-family:var(--fd);font-size:clamp(28px,4.2vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.06;color:#fff;text-align:center;margin-bottom:16px;max-width:880px;margin-left:auto;margin-right:auto}
.cmp2-h1 em{font-style:normal;color:#34d399;font-weight:700}
.cmp2-sub{font-size:15px;color:rgba(255,255,255,.72);line-height:1.65;max-width:680px;margin:0 auto 26px;text-align:center}

/* Quick stats row */
.cmp2-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:680px;margin:0 auto 22px}
@media (max-width:640px){.cmp2-stats{grid-template-columns:repeat(2,1fr)}}
.cmp2-stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:8px;padding:12px 14px;text-align:center}
.cmp2-stat dt{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.5);margin-bottom:5px}
.cmp2-stat dd{font-family:var(--fd);font-size:18px;font-weight:800;color:#fff;letter-spacing:-.018em;margin:0;line-height:1.1}
.cmp2-stat dd small{font-family:var(--f);font-size:11px;font-weight:500;color:rgba(255,255,255,.45);margin-left:4px;letter-spacing:0}

.cmp2-meta{display:flex;justify-content:center;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:rgba(255,255,255,.45);letter-spacing:.06em}
.cmp2-meta-tag{text-transform:uppercase;font-weight:600}


/* ── Body grid: TOC sidebar + main content ── */
.cmp2-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:48px;padding:48px 0 72px;align-items:start}
@media (max-width:980px){.cmp2-body{grid-template-columns:1fr;gap:28px;padding:32px 0 48px}}

.cmp2-toc{font-family:'JetBrains Mono',ui-monospace,monospace}
.cmp2-toc-sticky{position:sticky;top:88px}
@media (max-width:980px){.cmp2-toc-sticky{position:static}.cmp2-toc{padding:16px 18px;background:var(--bg2);border:1px solid var(--bd2);border-radius:10px}}
.cmp2-toc-lbl{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--tx3);margin-bottom:10px}
.cmp2-toc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;font-size:12px;border-left:1px solid var(--bd2);padding-left:14px}
@media (max-width:980px){.cmp2-toc-list{border-left:0;padding-left:0;flex-direction:row;flex-wrap:wrap;gap:6px}}
.cmp2-toc-list li a{display:block;padding:5px 0;color:var(--tx2);text-decoration:none;transition:.12s;letter-spacing:.01em}
.cmp2-toc-list li a:hover{color:var(--ac)}
@media (max-width:980px){.cmp2-toc-list li a{padding:3px 9px;border:1px solid var(--bd2);border-radius:4px;background:var(--bg)}}


/* ── Sections (numbered §N like /agents) ── */
.cmp2-main{min-width:0}
.cmp2-sec{padding:0 0 36px;margin:0 0 30px;border-bottom:1px solid var(--bd2)}
.cmp2-sec:last-of-type{border-bottom:none}
.cmp2-sec p{font-size:14.5px;color:var(--tx2);line-height:1.75;margin:10px 0;max-width:720px}
.cmp2-sec p strong{color:var(--tx);font-weight:700}
.cmp2-sec a:not(.bt):not(.cmp2-other-card){color:var(--ac);text-decoration:none;border-bottom:1px solid transparent;transition:.12s}
.cmp2-sec a:not(.bt):not(.cmp2-other-card):hover{border-bottom-color:var(--ac)}
.cmp2-lead{font-size:15px;color:var(--tx2);line-height:1.7;margin:6px 0 22px;max-width:720px}
.cmp2-note{font-size:12.5px;color:var(--tx3);font-family:'JetBrains Mono',monospace;letter-spacing:.01em;margin-top:14px}

.cmp2-h{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.cmp2-n{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--ac);background:var(--ac-bg);letter-spacing:.06em;flex-shrink:0;padding:4px 9px;border-radius:5px;line-height:1}
.cmp2-h h2{font-family:var(--fd);font-size:24px;font-weight:800;letter-spacing:-.022em;color:var(--tx);line-height:1.2;margin:0}


/* ── §1 At a glance (paired cards) ── */
.cmp2-glance{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.cmp2-glance{grid-template-columns:1fr}}
.cmp2-glance-card{padding:22px 24px;background:var(--bg);border:1px solid var(--bd);border-radius:12px;position:relative}
.cmp2-glance-us{border-color:rgba(14,107,74,.30);background:linear-gradient(180deg,var(--ac-bg) 0%,var(--bg) 70%);box-shadow:0 6px 20px -10px rgba(14,107,74,.10)}
.cmp2-glance-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--tx3);background:var(--bg2);padding:3px 8px;border-radius:3px;margin-bottom:10px}
.cmp2-glance-us .cmp2-glance-tag{color:#fff;background:var(--ac)}
.cmp2-glance-name{display:block;font-family:var(--fd);font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--tx);margin-bottom:10px;line-height:1.1}
.cmp2-glance-us .cmp2-glance-name{color:var(--ac)}
.cmp2-glance-card p{font-size:13.5px;color:var(--tx2);line-height:1.65;margin:0;max-width:none}
.cmp2-glance-us p{color:var(--tx)}


/* ── §2 Specs table (face-off, /agents-style dense) ── */
.cmp2-tbl{width:100%;border-collapse:collapse;font-size:13.5px;font-family:'JetBrains Mono',ui-monospace,monospace;background:var(--bg);border:1px solid var(--bd2);border-radius:10px;overflow:hidden;margin-top:6px}
.cmp2-tbl thead th{text-align:left;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--bd2);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.10em;color:var(--tx3);font-family:'JetBrains Mono',monospace}
.cmp2-tbl th.cmp2-tbl-us{color:var(--ac)}
.cmp2-tbl tbody td{padding:12px 16px;border-bottom:1px solid var(--bd2);color:var(--tx2);vertical-align:top}
.cmp2-tbl tbody td:first-child{font-family:var(--f);color:var(--tx);font-weight:500;background:var(--bg2);width:38%}
.cmp2-tbl tr:last-child td{border-bottom:none}
.cmp2-tbl tr:hover td{background:var(--bg2)}
.cmp2-tbl td.cmp2-win{color:var(--ac);font-weight:700;position:relative}
.cmp2-tbl td.cmp2-win::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ac);margin-right:8px;vertical-align:middle;animation:cmpPulse 2.4s ease-in-out infinite}
.cmp2-tbl td a{color:var(--ac);text-decoration:none}
.cmp2-tbl td a:hover{text-decoration:underline}


/* ── §3 Strengths (asymmetric grid) ── */
.cmp2-strengths{display:grid;grid-template-columns:1.15fr 1fr;gap:14px}
@media (max-width:768px){.cmp2-strengths{grid-template-columns:1fr}}
.cmp2-strength{padding:22px 24px;background:var(--bg);border:1px solid var(--bd2);border-radius:12px}
.cmp2-strength-us{border-color:rgba(14,107,74,.30);background:linear-gradient(180deg,var(--ac-bg) 0%,var(--bg) 60%)}
.cmp2-strength-h{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.cmp2-strength-tag{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--tx3);background:var(--bg2);padding:3px 8px;border-radius:3px}
.cmp2-strength-us .cmp2-strength-tag{color:#fff;background:var(--ac)}
.cmp2-strength-h h3{font-family:var(--fd);font-size:17px;font-weight:800;letter-spacing:-.015em;color:var(--tx);margin:0;line-height:1.2}
.cmp2-strength-us .cmp2-strength-h h3{color:var(--ac)}
.cmp2-strength-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--tx2);line-height:1.65}
.cmp2-strength-list li{padding-left:22px;position:relative}
.cmp2-strength-list li::before{content:'';position:absolute;left:0;top:8px;width:10px;height:10px;border-radius:50%;background:var(--ac);box-shadow:0 0 0 3px var(--ac-bg)}
.cmp2-strength-them .cmp2-strength-list li::before{background:var(--tx4);box-shadow:0 0 0 3px var(--bg2)}


/* ── §4 Verdict (magazine pull-quote) ── */
.cmp2-sec-verdict{padding-bottom:40px}
.cmp2-verdict{margin:6px 0 22px;padding:32px 36px 28px;background:linear-gradient(135deg,var(--ac-bg) 0%,var(--bg2) 100%);border:1px solid var(--bd2);border-left:4px solid var(--ac);border-radius:0 12px 12px 0;position:relative}
@media (max-width:640px){.cmp2-verdict{padding:24px 22px 20px}}
.cmp2-verdict-quote{position:absolute;top:18px;right:22px;width:48px;height:48px;color:var(--ac);opacity:.12}
.cmp2-verdict p{font-family:var(--fd);font-size:18px;font-weight:600;color:var(--tx);line-height:1.55;letter-spacing:-.01em;margin:0 0 14px;max-width:none}
@media (max-width:640px){.cmp2-verdict p{font-size:16px}}
.cmp2-verdict-foot{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--tx3);letter-spacing:.04em}
.cmp2-verdict-acts{display:flex;gap:10px;flex-wrap:wrap}


/* ── §5 When to choose what (paired use-case cards) ── */
.cmp2-when{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:768px){.cmp2-when{grid-template-columns:1fr}}
.cmp2-when-card{padding:22px 24px;background:var(--bg);border:1px solid var(--bd2);border-radius:12px}
.cmp2-when-us{border-color:rgba(14,107,74,.30);background:linear-gradient(180deg,var(--ac-bg) 0%,var(--bg) 80%)}
.cmp2-when-card h3{font-family:var(--fd);font-size:16px;font-weight:800;letter-spacing:-.015em;color:var(--tx);margin:0 0 14px;line-height:1.2}
.cmp2-when-us h3{color:var(--ac)}
.cmp2-when-card ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:var(--tx2);line-height:1.65}
.cmp2-when-card li{padding-left:20px;position:relative}
.cmp2-when-card li::before{content:'›';position:absolute;left:0;top:-2px;color:var(--ac);font-weight:700;font-size:16px}
.cmp2-when-them li::before{color:var(--tx3)}


/* ── §6 Migration (numbered steps) ── */
.cmp2-steps{list-style:none;padding:0;margin:18px 0 0;counter-reset:cmpstep;display:flex;flex-direction:column;gap:8px}
.cmp2-steps li{counter-increment:cmpstep;position:relative;padding:12px 16px 12px 48px;background:var(--bg2);border:1px solid var(--bd2);border-radius:8px;font-size:13.5px;color:var(--tx);line-height:1.55;max-width:720px}
.cmp2-steps li::before{content:counter(cmpstep, decimal-leading-zero);position:absolute;left:14px;top:50%;transform:translateY(-50%);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--ac);background:#fff;padding:3px 6px;border-radius:3px;border:1px solid var(--bd2);line-height:1}


/* ── §7 Methodology (muted block) ── */
.cmp2-sec-method{padding:22px 24px;background:var(--bg2);border:1px solid var(--bd2);border-radius:10px;border-top:1px solid var(--bd2);margin-top:8px}
.cmp2-sec-method .cmp2-h{margin-bottom:10px}
.cmp2-sec-method .cmp2-h h2{font-size:16px;color:var(--tx3);font-weight:700}
.cmp2-sec-method .cmp2-n{background:transparent;color:var(--tx4);border:1px solid var(--bd);padding:3px 8px}
.cmp2-sec-method p{font-size:13px;color:var(--tx3);line-height:1.7;margin:0;max-width:none}


/* ── Other comparisons (horizontal cards) ── */
.cmp2-other{padding-top:32px;border-top:1px solid var(--bd2);margin-top:8px}
.cmp2-other-eb{display:block;font-family:'JetBrains Mono',monospace;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--tx3);margin-bottom:14px}
.cmp2-other-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (max-width:640px){.cmp2-other-grid{grid-template-columns:1fr}}
.cmp2-other-card{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg);border:1px solid var(--bd2);border-radius:8px;text-decoration:none;color:var(--tx);font-size:13px;transition:.15s}
.cmp2-other-card:hover{border-color:var(--ac);transform:translateX(3px)}
.cmp2-other-logo{flex-shrink:0;width:30px;height:30px;background:#fff;border-radius:5px;padding:4px;border:1px solid var(--bd2);display:inline-flex;align-items:center;justify-content:center}
.cmp2-other-logo img{max-width:100%;max-height:100%;object-fit:contain}
.cmp2-other-name{flex:1;font-family:var(--f);font-weight:600}
.cmp2-other-name em{font-style:normal;color:var(--ac);font-weight:700}
.cmp2-other-arrow{flex-shrink:0;width:16px;height:16px;color:var(--tx4);transition:.15s}
.cmp2-other-card:hover .cmp2-other-arrow{color:var(--ac);transform:translateX(2px)}


/* ─── Mobile spacing fixes (≤640px) ───────────────────────────── */
@media (max-width:640px){
  /* Slightly more breathing room on the .w wrapper for these editorial pages */
  .cmp2-hero, .cmp2-body{padding-left:0;padding-right:0}
  .cmp2-hero-in, .cmp2-body{padding-left:24px;padding-right:24px;box-sizing:border-box}
  
  /* Hero cards: reduce inner padding to keep face-off readable */
  .cmp2-side{padding:14px 10px;gap:5px}
  .cmp2-side-logo{width:48px;height:48px;padding:6px}
  .cmp2-side-name{font-size:12.5px}
  .cmp2-side-rating{font-size:12px}
  .cmp2-faceoff{gap:8px;margin-bottom:22px}
  
  /* Stats tiles — tighter padding */
  .cmp2-stats{gap:6px;margin-bottom:18px}
  .cmp2-stat{padding:10px 8px}
  .cmp2-stat dd{font-size:16px}
  
  /* Section padding-bottom */
  .cmp2-sec{padding-bottom:28px;margin-bottom:24px}
  .cmp2-h h2{font-size:20px}
  .cmp2-h{gap:10px;margin-bottom:16px}
  
  /* Glance/strength/when cards — slightly less inner padding */
  .cmp2-glance-card, .cmp2-strength, .cmp2-when-card{padding:20px 20px}
  .cmp2-glance-name{font-size:17px}
  
  /* Verdict pull-quote — much tighter */
  .cmp2-verdict{padding:22px 20px 20px}
  .cmp2-verdict p{font-size:15px}
  .cmp2-verdict-quote{top:14px;right:16px;width:32px;height:32px}
  
  /* Migration steps */
  .cmp2-steps li{padding:10px 12px 10px 42px;font-size:13px}
  .cmp2-steps li::before{left:10px}
  
  /* Methodology block */
  .cmp2-sec-method{padding:20px 20px}
  
  /* Table — make horizontally scrollable so it never overflows */
  .cmp2-tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:normal;border-radius:8px}
  .cmp2-tbl thead, .cmp2-tbl tbody{display:table;width:100%;table-layout:fixed}
  .cmp2-tbl th, .cmp2-tbl td{padding:10px 12px;font-size:12.5px}
  .cmp2-tbl tbody td:first-child{width:42%}
  
  /* Other comparisons cards */
  .cmp2-other-card{padding:10px 12px;font-size:12.5px}
  
  /* TOC on mobile already collapses to row chips — make sure padding works */
  .cmp2-toc{padding:14px 16px}
  
  /* H1 — slightly tighter */
  .cmp2-h1{font-size:26px;line-height:1.1;padding:0 4px}
  .cmp2-sub{font-size:14px;padding:0 4px}
}

/* Even smaller screens */
@media (max-width:380px){
  .cmp2-hero-in, .cmp2-body{padding-left:18px;padding-right:18px}
  .cmp2-faceoff-vs{font-size:22px}
  .cmp2-side-name{font-size:11.5px}
}


/* ─── Hub page mobile padding (compare landing) ─── */
@media (max-width:640px){
  .cmp-hero-in, .cmp-list-sec .w{padding-left:24px;padding-right:24px;box-sizing:border-box}
  .cmp-card{padding:18px 18px 16px}
  .cmp-card-hd{gap:12px}
  .cmp-methodology{padding:16px 18px}
}