/**
 * Canonical CTA type treatment.
 *
 * The original hero button's type — Manrope 600 at 14px, no tracking — is the
 * reference. Caps are kept, and the cramped look they caused is fixed with
 * word-spacing rather than a different typeface: uppercase needs the words held
 * apart, which lowercase never did. Letter-spacing stays normal.
 *
 * TYPE ONLY. Each button keeps its own colour, fill, padding, radius and size
 * tier (primary vs secondary) from its existing rule — this class never sets
 * background, color, padding or border. Add it alongside the button's own class.
 *
 * Loaded by every page that renders a public CTA. Text inputs, links and the
 * admin tool are deliberately untouched.
 *
 * Keep in sync with .yp-runlink in scan-report.css, which carries the same
 * treatment for the demo-card button so every CTA on the site is identical.
 */
/* Selector weight is deliberate, not decorative. Page-level rules that would
 * otherwise win are: the homepage hero's `main.hero-preserved *` (0,1,1), which
 * forces its own font-family on everything inside it, and
 * /message-market-fit's `.cta .btn` (0,2,0). Doubling the class and qualifying
 * it by element gives (0,2,1), which beats both regardless of stylesheet order —
 * every CTA here is an <a> or a <button>. This is what it takes to avoid
 * !important. */
a.yp-cta-type.yp-cta-type,
button.yp-cta-type.yp-cta-type {
  font-family: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  word-spacing: 0.12em;
  text-transform: uppercase;
  text-rendering: optimizeLegibility;
}

/**
 * Secondary CTA fill. Same type and same box as the primary — the 1px border is
 * offset by 1px less padding so the rendered dimensions are identical, since an
 * auto-width button grows by its border regardless of box-sizing.
 * Pair with .yp-cta-type; the button's own class still supplies radius/layout.
 */
button.yp-cta-secondary.yp-cta-secondary,
a.yp-cta-secondary.yp-cta-secondary {
  background: #ffffff;
  color: var(--blue, #1E5BFF);
  border: 1px solid var(--blue, #1E5BFF);
  padding: 10px 19px;
}
button.yp-cta-secondary.yp-cta-secondary:hover,
a.yp-cta-secondary.yp-cta-secondary:hover {
  background: #ffffff;          /* fill deliberately unchanged on hover */
  color: var(--blue-deep, #1845C4);
  border-color: var(--blue-deep, #1845C4);
}
button.yp-cta-secondary.yp-cta-secondary:disabled {
  background: #ffffff;
  color: var(--slate-300, #c8cde0);
  border-color: var(--slate-300, #c8cde0);
  cursor: default;
}
