/* Small additions on top of the compiled Tailwind stylesheet in /_next/static/css. */

/* Fade-in on scroll (only when JS is running, so content is never hidden without it) */
.js .fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.js .fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Pricing cards: show only the active billing cycle */
[data-pricing][data-active-cycle="monthly"] [data-cycle="yearly"],
[data-pricing][data-active-cycle="yearly"] [data-cycle="monthly"] {
  display: none;
}
[data-pricing-controls][hidden] {
  display: none;
}

/* reCAPTCHA v3 badge sits at the bottom-right. The form also shows the required text notice. */

/* ──────────────────────────────────────────────────────────────────────────
   /compare/ pages.

   Hand-written rather than Tailwind utilities on purpose: the stylesheet in
   /_next/static/css is COMPILED from the Next app's export, so a class that
   app never used is simply absent (align-top, grid-cols-3 and tabular-nums
   all are). Anything new here would render unstyled. One semantic table
   serves both layouts - the matrix text must appear in the HTML exactly once,
   so a desktop table plus a mobile card list is not an option.
   ────────────────────────────────────────────────────────────────────────── */

.cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
.cmp-table caption {
  caption-side: top;
  text-align: left;
  font-size: 13px;
  color: #64748b;
  padding-bottom: 10px;
}
.cmp-table th,
.cmp-table td {
  vertical-align: top;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
}
.cmp-table thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
  z-index: 1;
}
.cmp-table tbody th {
  font-weight: 700;
  color: #1e293b;
  width: 30%;
}
.cmp-table tbody tr:hover { background: #f8fafc; }

.cmp-group th {
  background: #0f172a;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-bottom: 0;
}

/* Three states. Never a bare cross: an unverified negative is the failure mode
   this whole page type is designed to avoid. */
.cmp-v { display: block; font-weight: 700; }
.cmp-yes     { color: #0d7a6f; }
.cmp-no      { color: #9f1239; }
.cmp-unclear { color: #64748b; font-weight: 600; }

.cmp-avail {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 9999px;
  background: #eef2f7;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.cmp-note  { display: block; margin-top: 5px; font-size: 13px; color: #64748b; }
.cmp-quote { display: block; margin-top: 5px; font-size: 13px; color: #475569; font-style: italic; }

/* Footnote references. Numbered to one source list per page, so a 60-row matrix
   does not spray dozens of identical outbound links at a competitor's domain. */
.cmp-ref {
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
  color: #0d9488;
  margin-left: 4px;
  vertical-align: super;
}
.cmp-ref:hover,
.cmp-ref:focus-visible { text-decoration: underline; }
.cmp-ref:focus-visible { outline: 2px solid #0d9488; outline-offset: 2px; border-radius: 2px; }

/* Tailwind's preflight sets ol,ul{list-style:none}, so the numbering the footnote
   references point at has to be re-declared or the list silently loses it. */
.cmp-sources { margin: 0; padding-left: 22px; font-size: 14px; color: #475569; list-style: decimal; }
.cmp-sources li::marker { color: #94a3b8; font-weight: 700; }
.cmp-sources li { margin-bottom: 8px; }
.cmp-sources a { color: #0f766e; }
.cmp-sources .cmp-stype {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  font-weight: 700;
}

.cmp-pricecard {
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 22px;
  background: #fff;
}
.cmp-price { font-size: 30px; font-weight: 900; color: #0f172a; letter-spacing: -0.01em; }
.cmp-price-asof { display: block; margin-top: 4px; font-size: 12px; color: #94a3b8; }
.cmp-basis { margin-top: 10px; font-size: 14px; color: #475569; }
.cmp-flag {
  display: inline-block;
  margin-top: 12px;
  padding: 3px 9px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cmp-flag-norm { background: #fef3c7; color: #92400e; }
.cmp-flag-not  { background: #eef2f7; color: #475569; }
.cmp-flag-direct { background: #d1fae5; color: #065f46; }

/* ── Phone: the same table, stacked. Labels come from data-label so no text
      is duplicated in the markup. ───────────────────────────────────────── */
@media (max-width: 767px) {
  .cmp-table thead { display: none; }
  .cmp-table,
  .cmp-table tbody,
  .cmp-table tr,
  .cmp-table th,
  .cmp-table td { display: block; width: auto; }
  .cmp-table tbody tr {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 14px;
    padding: 4px 0;
  }
  .cmp-table tbody tr.cmp-group {
    border: 0;
    border-radius: 0;
    margin: 18px 0 8px;
    padding: 0;
  }
  .cmp-table tbody th { width: auto; border-bottom: 0; padding-bottom: 4px; }
  .cmp-table td { border-bottom: 0; padding-top: 8px; padding-bottom: 8px; }
  .cmp-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
  }
  .cmp-table tbody tr:hover { background: transparent; }
}

/* ──────────────────────────────────────────────────────────────────────────
   /compare/best-mentoring-software/ - the six-column grid.

   Feature and MentoraHQ stay put; the four competitor columns scroll under
   them. Hand-written for the same reason as .cmp-* : the Tailwind build in
   /_next/static/css is compiled from the Next export, so any utility that app
   never emitted simply does not exist.

   THREE THINGS THAT BREAK STICKY TABLE COLUMNS, handled here:
     1. border-collapse:collapse drops borders on sticky cells in WebKit, so
        this uses `separate` and draws every rule as a cell border.
     2. a sticky cell needs an OPAQUE background or scrolled content shows
        through it.
     3. a sticky header row crossing two sticky columns means the two corner
        cells sit in both planes and need the highest z-index of all.
   ────────────────────────────────────────────────────────────────────────── */

.cgrid-wrap { --cg-feat: 260px; --cg-col: 232px; }

.cgrid-scroll {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
}
.cgrid-scroll:focus-visible { outline: 2px solid #0D9488; outline-offset: 2px; }

.cgrid {
  border-collapse: separate;
  border-spacing: 0;
  width: max-content;
  min-width: 100%;
  font-size: 15px;
  line-height: 1.5;
}

.cgrid th,
.cgrid td {
  vertical-align: top;
  text-align: left;
  padding: 16px 18px;
  border-bottom: 1px solid #e8edf2;
  background: #fff;
  width: var(--cg-col);
  min-width: var(--cg-col);
}

/* Column 1 - the capability. Frozen. */
.cgrid .cg-feat {
  position: sticky;
  left: 0;
  z-index: 3;
  width: var(--cg-feat);
  min-width: var(--cg-feat);
  background: #fbfdfc;
}

/* Column 2 - MentoraHQ. Frozen beside it, and the only tinted column. */
.cgrid .cg-us {
  position: sticky;
  left: var(--cg-feat);
  z-index: 3;
  background: #f1fbf8;
  box-shadow: 10px 0 14px -10px rgba(15, 23, 42, 0.18);
}

/* NO `position: sticky; top: 0` HERE, and it is not an oversight.
   overflow-x:auto forces the computed overflow-y to auto, so the thead would stick to a
   container that never scrolls vertically - measured: the header ends up 1767px above the
   viewport and is simply gone. Rather than ship a rule that does nothing, the column names
   repeat in every group band, which re-orients the reader every few rows without JS. */
.cgrid thead th {
  z-index: 4;
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  padding-top: 18px;
  padding-bottom: 18px;
}
.cgrid thead .cg-feat { z-index: 6; background: #f4f7f9; }
.cgrid thead .cg-us   { z-index: 6; background: #0f766e; color: #fff; border-bottom-color: #0f766e; }

.cg-head-name  { font-size: 17px; font-weight: 900; letter-spacing: -0.01em; }
.cg-head-sub   { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: #64748b; }
.cgrid thead .cg-us .cg-head-sub { color: #99f6e4; }

/* Group bands. These carry the column names again rather than spanning the table, because
   the header row cannot stick (see above) and by row twelve nobody remembers which column
   is which. Frozen cells need their own opaque background or rows show through them. */
.cg-group th,
.cg-group td {
  background: #0f172a;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-bottom: 0;
}
.cg-group .cg-feat { position: sticky; left: 0; z-index: 3; background: #0f172a; }
.cg-group .cg-us   { position: sticky; left: var(--cg-feat); z-index: 3; background: #115e59;
                     box-shadow: 10px 0 14px -10px rgba(15, 23, 42, 0.5); }
.cg-group td       { color: #94a3b8; font-weight: 700; }
.cg-group .cg-us   { color: #ccfbf1; }

.cg-label { font-weight: 800; color: #0f172a; }
.cg-blurb { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: #64748b; }

/* Status lines. Never a red cross - not on us, not on a competitor. */
.cg-status { display: block; font-weight: 800; font-size: 14px; }
.cg-ok    { color: #0f766e; }
.cg-alt   { color: #0f766e; }
.cg-soft  { color: #475569; }
.cg-none  { color: #64748b; }
.cg-unk   { color: #94a3b8; font-weight: 600; }
.cg-detail { display: block; margin-top: 5px; font-size: 13px; color: #64748b; }
.cg-quote  { display: block; margin-top: 5px; font-size: 13px; color: #475569; font-style: italic; }

.cg-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 9999px;
  background: #ede9fe;
  color: #5b21b6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: 2px;
}
.cg-pill-alt { background: #ccfbf1; color: #0f766e; }

.cg-ref {
  font-size: 11px; font-weight: 800; text-decoration: none;
  color: #0d9488; margin-left: 4px; vertical-align: super;
}
.cg-ref:hover, .cg-ref:focus-visible { text-decoration: underline; }

/* Scroll affordance. Without this nobody discovers the other columns exist. */
.cgrid-hint {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; font-size: 13px; color: #64748b;
}
.cgrid-hint span { font-weight: 700; color: #0f766e; }

/* ── Category filters, CSS-only ────────────────────────────────────────────
   Radios plus :has(). Where :has() is unsupported the rules never match and
   every row stays visible, which is the correct failure direction. */
.cg-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.cg-filters input { position: absolute; opacity: 0; pointer-events: none; }
.cg-filters label {
  cursor: pointer;
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  background: #fff;
  user-select: none;
}
.cg-filters label:hover { border-color: #0d9488; color: #0f766e; }
.cg-filters input:focus-visible + label { outline: 2px solid #0D9488; outline-offset: 2px; }
.cg-filters input:checked + label { background: #0f766e; border-color: #0f766e; color: #fff; }

@supports selector(:has(*)) {
  .cgrid-wrap:has(#cgf-matching:checked)    tbody tr:not([data-g="Matching"]),
  .cgrid-wrap:has(#cgf-programme:checked)   tbody tr:not([data-g="Programme design"]),
  .cgrid-wrap:has(#cgf-commercial:checked)  tbody tr:not([data-g="Commercial"]),
  .cgrid-wrap:has(#cgf-branding:checked)    tbody tr:not([data-g="Branding"]),
  .cgrid-wrap:has(#cgf-integrations:checked) tbody tr:not([data-g="Integrations & identity"]),
  .cgrid-wrap:has(#cgf-reporting:checked)   tbody tr:not([data-g="Reporting & reach"]) {
    display: none;
  }
}

/* ── Phone and small tablet ────────────────────────────────────────────────
   Frozen columns are the wrong answer below ~900px: two of them consume the
   whole viewport. The table becomes one card per capability, MentoraHQ first
   and prominent, competitors revealed per row. All content stays in the HTML -
   nothing is removed, only collapsed - so it remains crawlable and findable
   with in-page search when expanded. */
@media (max-width: 899px) {
  .cgrid-scroll { overflow-x: visible; border: 0; background: transparent; border-radius: 0; }
  .cgrid, .cgrid tbody, .cgrid tr, .cgrid th, .cgrid td { display: block; width: auto; min-width: 0; }
  .cgrid thead { display: none; }
  .cgrid-hint { display: none; }

  .cgrid tbody tr {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    background: #fff;
  }
  .cgrid tbody tr.cg-group {
    border: 0; border-radius: 0; margin: 20px 0 10px; background: transparent;
  }
  /* The repeated column names are a desktop device. On a phone each cell already carries its
     vendor name via data-vendor, so the band collapses back to a plain heading. */
  .cg-group td { display: none; }
  .cg-group th { border-radius: 10px; }
  .cgrid .cg-feat,
  .cgrid .cg-us,
  .cgrid td { position: static; box-shadow: none; border-bottom: 0; }
  .cgrid .cg-feat { background: #fff; padding-bottom: 6px; }
  .cgrid .cg-us   { background: #f1fbf8; border-top: 1px solid #d7f0e8; }

  .cgrid td.cg-comp::before {
    content: attr(data-vendor);
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
  }
  .cgrid td.cg-comp { border-top: 1px solid #eef2f6; padding-top: 10px; padding-bottom: 10px; }

  /* Per-row reveal. The checkbox sits in the capability cell. */
  .cg-toggle { position: absolute; opacity: 0; pointer-events: none; }
  .cg-toggle-label {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 800;
    color: #0f766e;
    cursor: pointer;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    padding: 5px 12px;
  }
  .cg-toggle:focus-visible + .cg-toggle-label { outline: 2px solid #0D9488; outline-offset: 2px; }
  .cg-toggle-label .cg-less { display: none; }
  @supports selector(:has(*)) {
    tr:not(:has(.cg-toggle:checked)) .cg-comp { display: none; }
    tr:has(.cg-toggle:checked) .cg-toggle-label .cg-more { display: none; }
    tr:has(.cg-toggle:checked) .cg-toggle-label .cg-less { display: inline; }
  }
}

/* Desktop: the per-row reveal control has no job. */
@media (min-width: 900px) {
  .cg-toggle, .cg-toggle-label { display: none; }
}

/* ── Advantage cards and verdicts ─────────────────────────────────────────── */
.cg-adv {
  border: 1px solid #d7f0e8;
  border-radius: 16px;
  padding: 22px;
  background: #f7fdfb;
  height: 100%;
}
.cg-adv h3 { font-size: 17px; font-weight: 900; color: #0f172a; }
.cg-adv p  { margin-top: 8px; font-size: 14px; line-height: 1.6; color: #475569; }
.cg-adv .cg-adv-proof {
  display: block; margin-top: 10px; font-size: 12px; color: #0f766e; font-weight: 700;
}

.cg-verdict { border: 1px solid #e2e8f0; border-radius: 16px; padding: 24px; background: #fff; }
.cg-verdict dt { font-size: 12px; font-weight: 800; text-transform: uppercase;
                 letter-spacing: 0.05em; color: #94a3b8; margin-top: 14px; }
.cg-verdict dd { margin: 5px 0 0; font-size: 14px; line-height: 1.6; color: #475569; }

.cg-coverage {
  border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px 20px;
  background: #f8fafc; font-size: 14px; line-height: 1.6; color: #475569;
}
.cg-coverage strong { color: #0f172a; }

/* The icon sits inline with the capability name. */
.cg-icon { display: inline-block; vertical-align: -4px; margin-right: 7px; color: #0f766e; }

/* Visually-hidden text. The compiled Tailwind build DOES ship .sr-only (checked: one
   occurrence in 7b668fa5badf6541.css), so this is belt and braces rather than a fix - it
   guarantees the table caption stays hidden if that build is ever regenerated without it.
   The caption is the right place for the long description a screen reader needs. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ── Careers application form ───────────────────────────────────────────────
 *
 * scroll-margin so a jump from the step navigation does not land the heading
 * under the sticky site header. Written here rather than as scroll-mt-8,
 * which the compiled Tailwind build does not carry -- the same reason the
 * /compare/ matrix is hand-written CSS under its own namespace.
 */
.car-anchor { scroll-margin-top: 6rem; }

/* Radio and checkbox controls on the application form.
   Hand-written because accent-brand-600 does not exist in the compiled Tailwind build -- that
   build is an export from the old Next app and only carries utilities that app emitted, so an
   invented one renders as nothing at all. accent-color is the whole styling job for a native
   control, and keeping the native control is what keeps keyboard support and the browser's own
   required-field messaging working. */
.car-choice {
  width: 1rem;
  height: 1rem;
  accent-color: #1f4a63;
  flex: none;
  cursor: pointer;
}