/* ==========================================================================
   lms-alternative.css — page-scoped styles for lms-alternative.html
   Loaded AFTER styles.css. Scoped under body.lms so the shared design system
   is untouched. Two new components the shared sheet doesn't have:
     1. .cmp  — a PopScript-vs-LMS comparison table (dense data area: borders +
                offset shadow, no tilts, per design.md).
     2. .alt  — "named alternative" cards (Axonify / Myagi / Rallyware / Attensi)
                that capture the per-competitor search queries.
   Reuses existing tokens — no new fonts, no inline CSS.
   ========================================================================== */

/* -- Hero: dark plum, matches the sibling persona pages -------------------- */
.lms .hero{
  background:linear-gradient(140deg,#2C1F4E 0%,#1E1733 52%,#151024 100%);
  border-bottom:var(--bd)
}
.lms .hero h1{color:#fff}
.lms .hero p.sub{color:rgba(255,255,255,.82)}

/* -- Comparison table ----------------------------------------------------- */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 4px 8px}
.cmp{
  width:100%;min-width:620px;border-collapse:separate;border-spacing:0;
  background:#fff;border:var(--bd);border-radius:18px;box-shadow:var(--sh-lg);
  overflow:hidden
}
.cmp th,.cmp td{padding:16px 18px;text-align:left;border-bottom:var(--bd);vertical-align:middle}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp thead th{font-family:var(--disp);font-weight:800;font-size:15px;letter-spacing:-.01em;background:var(--paper)}
.cmp thead th.c-pop{background:var(--coral);color:#fff}
.cmp thead th.c-lms{color:var(--g500)}
.cmp tbody th{font-family:var(--body);font-weight:700;font-size:14.5px;color:var(--ink);width:38%}
.cmp td{font-size:14px;font-weight:600;color:var(--g500)}
.cmp td.c-pop{background:rgba(203,242,78,.16);color:var(--ink);font-weight:700;border-left:var(--bd);border-right:var(--bd)}
.cmp tbody tr:last-child td.c-pop{border-bottom:0}
.cmp .ico{display:inline-flex;width:20px;height:20px;flex:none;margin-right:9px;vertical-align:-4px}
.cmp .ico svg{width:20px;height:20px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cmp .yes svg{stroke:#1f9d55}
.cmp .no svg{stroke:#d1495b}
.cmp-note{margin-top:14px;font-size:12.5px;color:var(--g400);font-weight:600;text-align:center}

/* -- Named-alternative cards ---------------------------------------------- */
.alt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:8px}
.alt-card{background:#fff;border:var(--bd);border-radius:18px;box-shadow:var(--sh);padding:24px 22px}
.alt-card h3{font-family:var(--disp);font-weight:800;font-size:19px;letter-spacing:-.02em;margin-bottom:10px}
.alt-card h3 b{color:var(--coral)}
.alt-card p{color:var(--g500);font-size:14.5px;font-weight:600;line-height:1.55;margin-bottom:14px}
.alt-card .who{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--g400)}

/* -- Responsive ----------------------------------------------------------- */
@media(max-width:760px){
  .alt-grid{grid-template-columns:1fr}
}