/* ═══════════════════════════════════════════════════════════════
   PragatiCRM — Comparison page styles (vs-*.html, loads after css/home.css)
   ═══════════════════════════════════════════════════════════════ */

/* ─── Hero ──────────────────────────────────────────────────────── */
.cmp-hero{padding:9rem 0 3.5rem;position:relative;overflow:hidden;
  background:
    radial-gradient(900px 460px at 85% 0%,rgba(240,122,48,.12),transparent 60%),
    radial-gradient(700px 420px at -5% 100%,rgba(30,58,95,.06),transparent 55%),
    var(--bg)}
.cmp-hero::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(60,38,15,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(60,38,15,.045) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(700px 480px at 75% 30%,#000 20%,transparent 75%);
  mask-image:radial-gradient(700px 480px at 75% 30%,#000 20%,transparent 75%);
  pointer-events:none}
.cmp-hero-inner{position:relative;z-index:1;max-width:760px}
.cmp-hero h1{margin:1.1rem 0 1.2rem}
.cmp-hero-sub{font-size:1.1rem;color:var(--ink-2);margin-bottom:2rem}
.cmp-honest{margin-top:2rem;padding:1.25rem 1.5rem;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-sm);font-size:.88rem;color:var(--ink-2);line-height:1.7}
.cmp-honest strong{color:var(--ink)}

/* ─── Diff cards ────────────────────────────────────────────────── */
.diff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.25rem;margin-top:2rem}
.diff-card{background:var(--bg-card);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r-sm);padding:1.5rem;transition:transform .25s ease,box-shadow .25s ease}
.diff-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.diff-badge{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;background:var(--brand-soft);color:var(--brand-text);padding:.2rem .6rem;border-radius:100px;display:inline-block;margin-bottom:.7rem}
.diff-card h4{font-size:1rem;font-weight:700;color:var(--ink);margin-bottom:.5rem;font-family:var(--font-display)}
.diff-card p{font-size:.85rem;color:var(--ink-2);line-height:1.65}

/* ─── Comparison table ──────────────────────────────────────────── */
.cmp-table-wrap{overflow-x:auto;margin-top:2rem;border-radius:var(--r-sm)}
.compare-table{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.compare-table th{padding:.9rem 1.25rem;text-align:left;font-size:.82rem;font-weight:700;border-bottom:1px solid var(--line)}
.compare-table th:first-child{background:var(--bg-warm);color:var(--ink)}
.compare-table th.col-pragati{background:var(--brand);color:#fff;text-align:center}
.compare-table th.col-rival{background:var(--bg-warm);color:var(--ink-2);text-align:center}
.compare-table td{padding:.75rem 1.25rem;border-bottom:1px solid var(--line);font-size:.83rem;vertical-align:middle}
.compare-table tr:last-child td{border-bottom:none}
.compare-table td:first-child{font-weight:600;color:var(--ink);background:var(--bg-warm)}
.compare-table td.cell-pragati{text-align:center;background:var(--brand-softer)}
.compare-table td.cell-rival{text-align:center;color:var(--ink-2)}
.compare-table .cell-note{display:block;font-size:.72rem;color:var(--muted);margin-top:.2rem}
.check-yes{color:var(--green);font-weight:700}
.check-no{color:var(--red);font-weight:600;font-size:.83rem}
.check-partial{color:var(--amber);font-weight:600;font-size:.83rem}

/* ─── Who it suits ──────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
.verdict-card{border-radius:var(--r);padding:2rem}
.verdict-card.is-rival{background:var(--bg-warm);border:1px solid var(--line)}
.verdict-card.is-pragati{background:var(--brand-softer);border:2px solid #F0C7A8}
.verdict-card h3{font-size:.95rem;font-family:'Inter',sans-serif;font-weight:700;margin-bottom:1.1rem}
.verdict-card.is-rival h3{color:var(--ink-2)}
.verdict-card.is-pragati h3{color:var(--brand-text)}
.verdict-list{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.verdict-list li{font-size:.87rem;color:var(--ink-2);display:flex;align-items:flex-start;gap:.6rem;line-height:1.55}
.verdict-list li::before{content:'→';font-weight:700;flex-shrink:0;color:var(--muted)}
.verdict-card.is-pragati .verdict-list li::before{color:var(--brand)}

/* ─── Migration steps ───────────────────────────────────────────── */
.mig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:2rem}
.mig-step{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r-sm);padding:1.75rem;text-align:center}
.mig-num{width:44px;height:44px;background:var(--brand-soft);color:var(--brand-text);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;font-size:1.1rem;font-weight:700;font-family:var(--font-display)}
.mig-num.is-done{background:var(--green-soft);color:var(--green)}
.mig-step h4{font-size:.92rem;margin-bottom:.5rem}
.mig-step p{font-size:.82rem;color:var(--ink-2)}

/* ─── Migration — two-column variant (steps + summary card) ─────── */
.mig-two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.mig-two-col-intro{font-size:.9rem;color:var(--ink-2);line-height:1.7;margin-bottom:1.5rem}
.mig-list{display:flex;flex-direction:column;gap:1rem}
.mig-list-item{display:flex;gap:1rem;align-items:flex-start}
.mig-list-num{width:32px;height:32px;background:var(--brand-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--brand-text);flex-shrink:0;font-size:.85rem;font-family:var(--font-display)}
.mig-list-num.is-done{background:var(--green-soft);color:var(--green)}
.mig-list-title{font-size:.88rem;font-weight:700;color:var(--ink)}
.mig-list-desc{font-size:.82rem;color:var(--ink-2)}
.mig-side-card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--r);padding:2rem}
.mig-side-card h3{font-size:.95rem;margin-bottom:1.25rem;color:var(--ink);font-family:'Inter',sans-serif;font-weight:700}
.mig-side-list{list-style:none;display:flex;flex-direction:column;gap:.625rem}
.mig-side-list li{font-size:.85rem;color:var(--ink-2);display:flex;align-items:center;gap:.5rem}
.mig-side-list svg{color:var(--green);flex-shrink:0}

/* ─── Responsive ────────────────────────────────────────────────── */
@media(max-width:1024px){
  .cmp-hero{padding:8rem 0 3rem}
}
@media(max-width:768px){
  .cmp-hero{padding:7.5rem 0 2.5rem}
  .grid-2,.mig-grid,.mig-two-col{grid-template-columns:1fr}
  .compare-table{font-size:.76rem}
  .compare-table th,.compare-table td{padding:.55rem .8rem}
}