/* ============================================================
   compare.css — the "Compare school MIS" page (6 Aug 2026)
   ------------------------------------------------------------
   Built for SEO/AEO: this page exists to answer "which MIS
   should we choose" and "SIMS alternative" style searches.

   Reuses the site's existing .mtx comparison table rather than
   inventing a second one. Two things had to be added:

   1. A scroll wrapper. The site's .mtx tables have 3 product
      columns; this one has 4 vendors + a label column, which
      overflows below ~900px. The mobile tab mechanism in
      home-v2.css can't be reused because it is keyed to the
      literal values one/onsite/classroom, so the table scrolls
      inside its own box instead. Zero page overflow, per the
      iPad/mobile standard.
   2. A sourcing note component. Every competitor claim on this
      page has to carry a "checked on" date, or it isn't
      defensible.

   Loads AFTER home-v2.css (which owns .mtx) and BEFORE
   modular.css, which must always load last.
   ============================================================ */

/* ---- 1. scroll wrapper -------------------------------------- */
.cmp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* room for the focus ring on keyboard-scrolled tables */
  padding: 4px;
  margin: 0 -4px;
}

.cmp-scroll:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.45);
  border-radius: var(--radius-xl, 24px);
}

/* the table itself must not shrink its columns to fit */
.cmp-scroll .mtx__table { min-width: 860px; }

/* GroupEd's own column carries a soft tint so the eye lands on it.
   Uses the pale sky already used by .mark pills, so no new colour
   enters the palette. */
.cmp .mtx__table th[data-cmp="ge"],
.cmp .mtx__table td[data-cmp="ge"] { background: #D9F4FF; }

.cmp .mtx__table td[data-cmp="ge"] { font-weight: 400; color: #0F1438; }

/* vendor column headings: plain text, not logo chips — we must not
   reproduce competitors' trade marks as branded chips */
.cmp .mtx__vendor {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #0F1438;
  line-height: 1.3;
}
.cmp .mtx__vendor small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #4A5876;
  margin-top: 2px;
}

/* cells on this table are short sentences, not ticks, so they need
   left alignment and a readable measure */
.cmp .mtx__table td {
  text-align: left;
  vertical-align: top;
  font-size: 15px;
  line-height: 1.45;
}

/* ---- 2. sourcing note --------------------------------------- */
.cmp-source {
  margin-top: var(--sp-6, 24px);
  padding: 20px 24px;
  border: 1px solid #E6ECF4;
  border-radius: 16px;
  background: #fff;
}
.cmp-source p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #4A5876;
}
.cmp-source p + p { margin-top: 10px; }
.cmp-source a { color: #1B367E; }
.cmp-source a:hover { color: #0F1438; }

/* ---- 3. "what we don't do" honesty block -------------------- */
.cmp-scope { margin-top: var(--sp-8, 32px); }

.cmp-scope__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-6, 24px);
}
@media (max-width: 700px) {
  .cmp-scope__grid { grid-template-columns: minmax(0, 1fr); }
}

.cmp-scope__card {
  background: #fff;
  border: 1px solid #E6ECF4;
  border-radius: var(--radius-xl, 24px);
  padding: 32px;
}
.cmp-scope__card h3 { margin: 0 0 12px; font-size: 22px; }
.cmp-scope__card p { margin: 0; color: #4A5876; }
.cmp-scope__card ul { margin: 12px 0 0; padding: 0; list-style: none; }
.cmp-scope__card li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  color: #4A5876;
}
.cmp-scope__card li:last-child { margin-bottom: 0; }

/* navy disc + white glyph — the site-wide tick, per the design rules */
.cmp-scope__card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #0F1438
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
}

/* the "not us" card uses a neutral dash, not a red cross — this is a
   scope statement, not a failure */
.cmp-scope__card--not li::before {
  background: #E6ECF4
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5876' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E")
    center / 12px 12px no-repeat;
}

/* ---- 4. question blocks (the AEO pattern) -------------------- */
.cmp-qa { margin-top: var(--sp-8, 32px); }
.cmp-qa__item + .cmp-qa__item {
  margin-top: var(--sp-7, 28px);
  padding-top: var(--sp-7, 28px);
  border-top: 1px solid #E6ECF4;
}
.cmp-qa h3 {
  margin: 0 0 10px;
  font-size: 22px;
  max-width: 34ch;
}
.cmp-qa p { margin: 0; max-width: 68ch; color: #4A5876; }
.cmp-qa p + p { margin-top: 10px; }