/* ===========================================================
   OUTMATE vs EVERYONE — comparison pages
   =========================================================== */

.cmp-hero{
  padding: clamp(28px,5vw,64px) clamp(20px,4vw,72px) clamp(20px,3vw,40px);
  border-bottom: 1px solid var(--line);
}
.cmp-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid var(--line-soft); border-radius:999px;
  padding:7px 14px; background:var(--paper-2);
}
.cmp-eyebrow img{ width:16px; height:16px; border-radius:4px; object-fit:cover; }
.cmp-h1{
  margin:22px 0 0; font-family:var(--sans); font-weight:800;
  letter-spacing:-.03em; line-height:1.0;
  font-size:clamp(34px,6vw,72px); color:var(--ink);
  display:flex; align-items:center; gap:clamp(10px,1.6vw,20px); flex-wrap:wrap;
}
.cmp-h1 .vs{ color:var(--muted); font-weight:400; }
.cmp-h1 .om{ color:var(--accent); }
.cmp-h1 img{ width:clamp(40px,6vw,72px); height:clamp(40px,6vw,72px); border-radius:14px; object-fit:cover; flex:0 0 auto; }
.cmp-sub{ margin:18px 0 0; max-width:62ch; font-family:var(--body); font-size:clamp(15px,1.4vw,18px); line-height:1.55; color:var(--muted); }
.cmp-hero-cta{ display:flex; gap:12px; margin-top:26px; flex-wrap:wrap; }

/* win badge */
.cmp-winrow{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px; }
.cmp-stat{ border:1px solid var(--line-soft); border-radius:12px; padding:16px 20px; background:var(--paper-2); min-width:120px; }
.cmp-stat .n{ font-family:var(--sans); font-weight:800; font-size:clamp(24px,3vw,34px); letter-spacing:-.02em; color:var(--ink); }
.cmp-stat .n.acc{ color:var(--accent); }
.cmp-stat .l{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:6px; }

/* ---------- comparison table ---------- */
.cmp-table-wrap{ padding: clamp(20px,3vw,44px) clamp(16px,4vw,72px) clamp(40px,6vw,90px); }
.cmptable{ width:100%; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 36px 70px -50px rgba(24,22,60,.4); }
.cmp-thead{
  display:grid; grid-template-columns: 1.7fr 1fr 1fr;
  position:static; z-index:5;
  background:var(--ink); color:#fff;
}
.cmp-thead > div{ padding:18px clamp(12px,1.6vw,22px); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; display:flex; align-items:center; }
.cmp-thead .om{ background:var(--accent); color:#fff; font-weight:700; gap:8px; }
.cmp-thead .om img{ width:18px; height:18px; border-radius:4px; object-fit:cover; }
.cmp-thead .ct{ color:rgba(255,255,255,.6); }

.cmp-cat{
  grid-column:1 / -1; padding:15px clamp(14px,1.6vw,22px);
  background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  display:flex; align-items:center; gap:10px;
}
.cmp-cat::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
.cmp-row{ display:grid; grid-template-columns:1.7fr 1fr 1fr; border-top:1px solid var(--line-soft); }
.cmp-row:nth-child(even){ background:#fafafb; }
.cmp-row:hover{ background:#f5f5fa; }
.cmp-row > div{ padding:15px clamp(12px,1.6vw,22px); font-size:clamp(13px,1.1vw,14.5px); line-height:1.45; display:flex; align-items:flex-start; gap:9px; }
.cmp-row .feat{ font-family:var(--sans); font-weight:600; color:var(--ink); }
.cmp-row .om{ background:rgba(80,70,230,.06); font-family:var(--body); color:var(--ink); border-left:1.5px solid rgba(80,70,230,.22); border-right:1.5px solid rgba(80,70,230,.22); }
.cmp-row:hover .om{ background:rgba(80,70,230,.11); }
.cmp-row .comp{ font-family:var(--body); color:var(--muted); }

.mk{ flex:0 0 auto; font-family:var(--sans); font-weight:800; font-size:11px; line-height:1; width:19px; height:19px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; }
.mk.yes{ color:#16a34a; background:rgba(22,163,74,.13); }
.mk.part{ color:#b45309; background:rgba(217,119,6,.14); }
.mk.no{ color:#c2c2cc; background:transparent; width:auto; height:auto; font-size:13px; }
.cmp-row .om .mk.yes{ color:var(--accent); background:rgba(80,70,230,.15); }
/* RB2B (competitor) column — make the "not available" marks red, not faint white */
.cmp-row .comp .mk.no{ color:#dc2626; background:rgba(220,38,38,.12); width:19px; height:19px; border-radius:50%; font-size:11px; }
.cmp-val{ display:inline; }

/* inline tags inside cells */
.cmp-tag{ display:inline-block; font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; padding:2px 6px; border-radius:5px; vertical-align:middle; margin-left:2px; font-weight:700; }
.cmp-tag.beta{ background:rgba(80,70,230,.12); color:var(--accent); }
.cmp-tag.soon{ background:rgba(217,119,6,.12); color:#b45309; }

/* ---------- honest trade-offs ---------- */
.cmp-trade{ padding: clamp(40px,6vw,90px) clamp(16px,4vw,72px) clamp(56px,7vw,104px); border-top:1px solid var(--line); background:var(--paper); }
.cmp-sec-head{ text-align:center; max-width:30ch; margin:0 auto clamp(28px,4vw,48px); }
.cmp-sec-head h2{ font-family:var(--sans); font-weight:800; letter-spacing:-.03em; line-height:1.08; font-size:clamp(26px,3.6vw,42px); color:var(--ink); margin:0; }
.cmp-sec-head h2 .acc{ color:var(--accent); }
.cmp-trade-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1080px; margin:0 auto; align-items:start; }
.cmp-tcard{ border:1px solid var(--line-soft); border-radius:18px; padding:clamp(22px,3vw,34px); background:var(--paper-2); }
.cmp-tcard.omwin{ border-color:rgba(80,70,230,.3); background:rgba(80,70,230,.04); }
.cmp-tcard h3{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin:0 0 18px; color:var(--muted); display:flex; align-items:center; gap:8px; }
.cmp-tcard.omwin h3{ color:var(--accent); }
.cmp-tcard ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.cmp-tcard li{ display:block; }
.cmp-tcard li b{ display:block; font-family:var(--sans); font-weight:700; font-size:15px; color:var(--ink); letter-spacing:-.01em; margin-bottom:4px; }
.cmp-tcard li span{ display:block; font-family:var(--body); font-size:14px; line-height:1.5; color:var(--muted); }

/* ---------- why teams switch ---------- */
.cmp-switch{ position:relative; z-index:2; padding: clamp(40px,6vw,90px) clamp(16px,4vw,72px); border-top:1px solid var(--line); background:var(--ink); }
.cmp-switch .cmp-sec-head h2{ color:#fff; }
.cmp-switch .cmp-sec-head{ max-width:38ch; }
/* trade-offs heading on a single line */
.cmp-trade .cmp-sec-head{ max-width:none; }
.cmp-trade .cmp-sec-head h2{ white-space:nowrap; font-size:clamp(18px,3vw,38px); }
@media (max-width:680px){ .cmp-trade .cmp-sec-head h2{ white-space:normal; } }
.cmp-switch-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:1000px; margin:0 auto; }
.cmp-scard{ border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:26px; background:rgba(255,255,255,.03); }
.cmp-scard .q{ font-family:var(--sans); font-weight:700; font-size:16px; color:#fff; letter-spacing:-.01em; margin:0 0 10px; }
.cmp-scard .q::before{ content:"“"; color:var(--accent); }
.cmp-scard .q::after{ content:"”"; color:var(--accent); }
.cmp-scard p{ font-family:var(--body); font-size:14px; line-height:1.55; color:rgba(255,255,255,.62); margin:0; }

/* ---------- faq ---------- */
.cmp-faq{ padding: clamp(40px,6vw,90px) clamp(16px,4vw,72px); border-top:1px solid var(--line); }
.cmp-faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.cmp-qa{ border:1px solid var(--line-soft); border-radius:14px; padding:22px 24px; background:#fff; }
.cmp-qa h4{ font-family:var(--sans); font-weight:700; font-size:16px; color:var(--ink); letter-spacing:-.01em; margin:0 0 10px; }
.cmp-qa p{ font-family:var(--body); font-size:14.5px; line-height:1.6; color:var(--muted); margin:0; }

/* ---------- final cta ---------- */
.cmp-finalcta{ padding: clamp(50px,7vw,100px) clamp(16px,4vw,72px); text-align:center; border-top:1px solid var(--line); }
.cmp-finalcta h2{ font-family:var(--sans); font-weight:800; letter-spacing:-.03em; font-size:clamp(30px,4.6vw,56px); color:var(--ink); margin:0; line-height:1.05; }
.cmp-finalcta h2 .acc{ color:var(--accent); }
.cmp-finalcta p{ font-family:var(--body); font-size:clamp(15px,1.4vw,18px); color:var(--muted); margin:16px 0 0; }
.cmp-finalcta .cmp-hero-cta{ justify-content:center; margin-top:30px; }

/* ---------- hub grid (comparison cards) ---------- */
.vs-intro{ padding: 0 clamp(16px,4vw,72px); max-width:60ch; }
.vs-intro p{ font-family:var(--body); font-size:clamp(14px,1.3vw,16px); line-height:1.6; color:var(--muted); margin:0; }
/* ---------- vs hub (Outmate vs Everyone) ---------- */
.vs-section{ padding: clamp(10px,2vw,24px) clamp(16px,4vw,72px) 0; }
.vs-label{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 18px; display:flex; align-items:center; gap:10px; }
.vs-label::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); flex:0 0 auto; }
.vs-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;
  max-width:900px;
}
.vc-badge{ align-self:flex-start; font-family:var(--mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:#16a34a; background:rgba(22,163,74,.1); border:1px solid rgba(22,163,74,.25); border-radius:999px; padding:4px 11px; }
.vs-card.feat{ border-color:rgba(80,70,230,.3); }
.vs-card.feat:hover{ box-shadow:0 30px 55px -26px rgba(80,70,230,.45); }
.vs-why{ padding: clamp(40px,5.5vw,80px) clamp(16px,4vw,72px) clamp(20px,3vw,40px); }
.vs-why .cmp-sec-head{ text-align:left; margin:0 0 clamp(20px,2.5vw,32px); }
.vs-why .cmp-sec-head h2{ font-size:clamp(24px,3.2vw,40px); }
.vs-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.vw-card{ border:1px solid var(--line-soft); border-radius:16px; padding:24px; background:var(--paper-2); }
.vw-card .vw-ico{ width:42px; height:42px; border-radius:11px; background:#fff; border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; font-size:18px; color:var(--accent); margin-bottom:16px; }
.vw-card h3{ font-family:var(--sans); font-weight:700; font-size:16px; letter-spacing:-.01em; margin:0 0 8px; color:var(--ink); }
.vw-card p{ font-family:var(--body); font-size:13.5px; line-height:1.5; color:var(--muted); margin:0; }
@media (max-width:760px){ .vs-grid{ grid-template-columns:1fr; } }
@media (max-width:900px){ .vs-why-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .vs-why-grid{ grid-template-columns:1fr; } }
.vs-grid-legacy{
  padding: clamp(20px,3vw,40px) clamp(16px,4vw,72px) clamp(40px,6vw,90px);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px;
}
.vs-card{
  display:flex; flex-direction:column; gap:14px;
  border:1px solid var(--line); border-radius:18px; padding:28px;
  text-decoration:none; color:var(--ink); background:#fff;
  box-shadow:0 30px 60px -50px rgba(24,22,60,.4);
  transition:border-color .18s, transform .18s, box-shadow .18s;
}
.vs-card:hover{ border-color:var(--accent); transform:translateY(-4px); box-shadow:0 30px 55px -28px rgba(80,70,230,.38); }
.vs-card .vc-logos{ display:flex; align-items:center; gap:14px; }
.vs-card .vc-logo{ width:46px; height:46px; border-radius:13px; object-fit:contain; background:#fff; border:1px solid var(--line-soft); padding:7px; flex:0 0 auto; }
.vs-card .vc-x{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.vs-card .vc-soon{ width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--paper-2); border:1px dashed var(--line); color:var(--muted); font-size:22px; font-weight:300; flex:0 0 auto; }
.vs-card .vc-title{ font-family:var(--sans); font-weight:800; font-size:21px; letter-spacing:-.02em; margin:2px 0 0; color:var(--ink); }
.vs-card .vc-title .om{ color:var(--accent); }
.vs-card .vc-desc{ font-family:var(--body); font-size:14.5px; line-height:1.55; color:var(--muted); margin:0; }
.vs-card .vc-go{ margin-top:auto; padding-top:6px; font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }
.vs-card.soon{ background:var(--paper-2); box-shadow:none; }
.vs-card.soon:hover{ border-color:var(--accent); transform:translateY(-4px); }

@media (max-width:820px){
  .cmp-trade-grid, .cmp-switch-grid{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .cmp-thead, .cmp-row{ grid-template-columns:1.4fr 1fr 1fr; }
  .cmp-thead > div, .cmp-row > div{ padding:11px 10px; }
  .cmp-thead{ position:static; top:auto; }
}
@media (max-width:480px){
  .cmp-table-wrap{ padding-left:10px; padding-right:10px; }
  .cmp-thead, .cmp-row{ grid-template-columns:1.5fr 1fr 1fr; }
  .cmp-thead > div, .cmp-row > div{ padding:10px 7px; font-size:12px; gap:6px; }
  .cmp-thead > div{ font-size:9px; letter-spacing:.03em; }
  .cmp-thead .om img{ width:15px; height:15px; }
  .mk{ width:13px; font-size:13px; }
  .cmp-stat{ flex:1 1 40%; min-width:0; padding:12px 14px; }
  .cmp-h1 img{ width:38px; height:38px; }
}