/**
 * Competitor comparison pages — style-guide-native design system.
 * Scoped under .shr-comp so it doesn't leak into the rest of the site.
 */

.shr-comp {
  --shr-blue:   #38b6ff;
  --shr-pink:   #e14586;
  --shr-indigo: #5672fa;
  --shr-ink:    #18181b;
  --shr-ink2:   #3f3f46;
  --shr-muted:  #71717a;
  --shr-line:   #e4e4e7;
  --shr-bg:     #f9f9fb;

  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--shr-ink);
}

.shr-comp *, .shr-comp *::before, .shr-comp *::after { box-sizing: border-box; }

/* Signature gradient bar (top of hero) */
.shr-comp__accent-bar {
  height: 6px;
  background: linear-gradient(90deg, var(--shr-blue) 0%, var(--shr-pink) 60%, var(--shr-indigo) 100%);
}

/* Hero section — width/gutter delegated to Bootstrap .container + .col-lg-8 */
.shr-comp__hero {
  padding: 32px 0 16px;
  background: #ffffff;
}
.shr-comp__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--shr-indigo);
  margin-bottom: 8px;
}
/* Override .page h1 { margin: 8rem 0; } from child theme's style.css.
   Using compound selector to beat its specificity. */
.shr-comp h1.shr-comp__headline {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--shr-ink);
  margin: 0 0 20px;
  max-width: 780px;
}
.shr-comp__lede {
  font-size: 15px;
  color: var(--shr-ink2);
  line-height: 1.6;
  max-width: 620px;
  margin: 0 0 40px;
}

/* Logo matchup row */
.shr-comp__matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 20px 20px;
  background: var(--shr-bg);
  border: 1px solid var(--shr-line);
  border-radius: 10px;
}
.shr-comp__slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
}
.shr-comp__competitor-logo {
  max-height: 70px;
  max-width: 320px;
  width: auto;
  height: auto;
}
.shr-comp__shr-logo {
  max-height: 90px;
  max-width: 90px;
  width: auto;
  height: auto;
}

/* VS badge — pink spotlight */
.shr-comp__vs {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--shr-pink);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  box-shadow: 0 6px 20px rgba(225, 69, 134, 0.3);
}

/* Mobile */
@media (max-width: 767px) {
  .shr-comp__hero { padding: 36px 0 32px; }
  .shr-comp__headline { font-size: 28px; }
  .shr-comp__lede { font-size: 14px; margin-bottom: 24px; }
  .shr-comp__matchup { padding: 20px 12px; gap: 12px; }
  .shr-comp__competitor-logo { max-height: 48px; max-width: 200px; }
  .shr-comp__shr-logo { max-height: 56px; max-width: 56px; }
  .shr-comp__vs { width: 40px; height: 40px; font-size: 10px; }
}