/*
  Growth Positioning V1 — "the direct-hire advantage" selling angle.
  Four new components, all built on existing tokens (no new colors/type),
  all driven by the same generic data-field/data-list/data-show-when-field
  conventions content-loader.js and edit-mode.js already implement — no
  hydrator changes were needed for any of these. See
  tools/GROWTH_POSITIONING_V1_PLAN.md for the reasoning.
*/

/* ------------------------------------------------------------------
   Comparison matrix — Mega Canadian vs. the typical alternatives, across
   the same differentiator dimensions. A real <table> (not a CSS-grid
   fake) since this is genuinely tabular data and screen-reader users
   benefit from real th/scope semantics here. Wrapped in an overflow-x:
   auto container rather than trying to force 5 columns to reflow at
   mobile widths -- a horizontally-scrollable table is the standard,
   accessible pattern for a comparison matrix and keeps this session's
   zero-page-level-overflow rule intact (the scroll is contained inside
   the wrapper, never the page).
   ------------------------------------------------------------------ */
.compare-matrix-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.compare-matrix {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--color-surface-default);
}

.compare-matrix th,
.compare-matrix td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
  vertical-align: middle;
}

.compare-matrix thead th {
  color: var(--color-text-primary);
  font-family: var(--font-family-heading);
  font-size: var(--font-small);
  font-weight: 700;
}

.compare-matrix tbody th {
  color: var(--color-text-primary);
  font-weight: 700;
  text-align: left;
}

.compare-matrix__hint {
  display: none;
  margin: 0 0 var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--font-small);
  font-weight: 700;
  text-align: right;
}

/* Below the table's own 640px min-width, the wrapper's overflow-x:auto
   scrolls it -- contained, so it never overflows the page -- but a
   phone visitor got no signal that there was more to see, and the
   first (row-label) column scrolled away with everything else, so a
   mark seen after scrolling had no visible label anymore (2026-08-09
   mobile audit). A visible "swipe to compare" hint (markup, in
   index.html, EN/FR text) plus a sticky, opaque first column and a
   fade at the scrollable edge fix both. */
@media (max-width: 900px) {
  .compare-matrix__hint {
    display: block;
  }

  .compare-matrix-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    background: linear-gradient(to right, transparent, var(--color-surface-default));
    pointer-events: none;
  }

  .compare-matrix thead th:first-child,
  .compare-matrix tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-surface-default);
    box-shadow: 1px 0 0 var(--color-border);
  }
}

.compare-matrix tbody tr:last-child th,
.compare-matrix tbody tr:last-child td {
  border-bottom: 0;
}

.compare-matrix__col--featured {
  background: var(--color-surface-alt);
}

.compare-matrix__cell--featured {
  background: var(--color-surface-alt);
}

.matrix-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  font-size: var(--font-small);
  font-weight: 700;
}

.matrix-mark--yes {
  background: rgba(26, 127, 75, 0.12);
  color: var(--color-success);
}

.matrix-mark--no {
  background: rgba(107, 101, 92, 0.12);
  color: var(--color-text-secondary);
}

/* The "yes" mark is the one gated by data-show-when-field -- when hidden
   (value false), this sibling rule reveals the always-present "no" mark
   next to it. See applyConditionalVisibility in content-loader.js: it
   sets [hidden] on the yes-mark per row/column boolean, nothing custom
   needed here beyond this CSS toggle. */
.matrix-mark--yes:not([hidden]) ~ .matrix-mark--no {
  display: none;
}

@media (max-width: 640px) {
  .compare-matrix th,
  .compare-matrix td {
    padding: var(--space-3);
    font-size: var(--font-small);
  }
}

/* ------------------------------------------------------------------
   Guarantee banner — elevates the already-true "free replacement
   recruiting" fact (Services standard list, FAQs) into a standalone
   trust callout. Deliberately not a new color -- brand-primary border
   on the cream surface-alt background, matching .pricing-note's
   restrained register rather than introducing a loud new accent.
   ------------------------------------------------------------------ */
.guarantee-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--color-brand-primary);
  border-radius: var(--radius-card);
  background: var(--color-surface-alt);
}

.guarantee-banner__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 999px;
  background: var(--color-brand-primary);
  color: var(--color-text-on-brand);
}

.guarantee-banner__icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.guarantee-banner__heading {
  font-family: var(--font-family-heading);
  font-size: var(--font-h3);
}

.guarantee-banner__body {
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
}

@media (max-width: 640px) {
  .guarantee-banner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

/* ------------------------------------------------------------------
   Testimonial cards — built and styled now; content ships with
   visible: false placeholder items (see content/why-mega-canadian.json)
   so nothing fabricated goes live. The generic per-item hide/restore
   convention (applyList in content-loader.js) governs visibility --
   flip `visible: true` and fill real quotes through either editor once
   they exist.
   ------------------------------------------------------------------ */
.testimonial-card {
  position: relative;
  padding-top: var(--space-7);
}

.testimonial-card::before {
  position: absolute;
  top: var(--space-3);
  left: var(--space-5);
  color: var(--color-brand-primary);
  font-family: var(--font-family-heading);
  font-size: 3rem;
  line-height: 1;
  opacity: 0.35;
  content: "\201C";
}

.testimonial-card__quote {
  color: var(--color-text-primary);
  font-family: var(--font-family-heading);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.testimonial-card__byline {
  display: grid;
  gap: 0.15rem;
  margin-top: var(--space-2);
}

.testimonial-card__name {
  color: var(--color-text-primary);
  font-weight: 700;
}

.testimonial-card__role {
  color: var(--color-text-secondary);
  font-size: var(--font-small);
}