/* components.css — the canonical button system for the home page.
 *
 * Loaded LAST so it normalizes every per-band CTA class into ONE system:
 *   • primary   = filled indigo, white label   (matches the nav "Get Started")
 *   • secondary = outline, hairline border, fills on hover
 * Both share the same box (padding / radius / weight / transition), so buttons
 * sitting side by side line up and behave identically in light and dark.
 *
 * Text-arrow links (.cvb-cta, .bottom-cta-link) and card affordances
 * (.target-cta, .part-cta) are intentionally NOT buttons and keep their own
 * link styling. The nav "Get Started" (.nav-cta) is the reference primary and
 * is left to its own (height-driven) sizing in the header. */

/* shared geometry — every real button is the same box */
.css-band-cta,
.www-cta,
.bwg-foot-cta,
.cvb-cta,
.hero-secondary,
.ent-cta,
.mosaic-cta,
.forteams-cta,
.compare-link,
.demo-cta,
.gauge-cta,
.bwg-foot-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-family: var(--font-sans);
  font-size: var(--fs-base-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}

/* ── primary — filled indigo, white label ── */
.css-band-cta,
.www-cta,
.bwg-foot-cta,
.cvb-cta {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #fff;
}
.css-band-cta:hover,
.www-cta:hover,
.bwg-foot-cta:hover,
.cvb-cta:hover {
  background: var(--accent-primary-hover);
  border-color: var(--accent-primary-hover);
  color: #fff;
}

/* ── secondary — outline on theme-aware bands ── */
.hero-secondary,
.ent-cta,
.mosaic-cta,
.forteams-cta,
.compare-link,
.demo-cta,
.gauge-cta {
  background: transparent;
  border-color: var(--border-hairline);
  color: var(--text-strong);
}
.hero-secondary:hover,
.ent-cta:hover,
.mosaic-cta:hover,
.forteams-cta:hover,
.compare-link:hover,
.demo-cta:hover,
.gauge-cta:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text-strong);
}

/* ── secondary on the always-dark "Built with GEA" band ── */
.bwg-foot-link {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.bwg-foot-link:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* ── eyebrows — one mono kicker for every section ──────────────
 * Several bands rolled their own (weights 500/700, tracking 0.08–0.14em,
 * neutral colors). Collapse them onto the global .eyebrow: mono · 12px · 600 ·
 * 0.12em · accent. Only typography is set here so each kicker keeps its own
 * layout (enterprise's flex-shrink, the CSS-engine dashed bar + mobile shrink). */
.eyebrow,
.ent-eyebrow,
.cvb-eyebrow,
.css-band-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-primary-3);
}
/* CSS-engine kicker lives in a flex bar with a mobile font-size override —
   touch only weight/tracking/color so the bar + responsive size survive. */
.css-band-top {
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--accent-primary-3);
}