/* PayCroft marketing — shared brand tokens.
 * Every page links this; do not redefine these rules in per-page <style> blocks.
 * Tailwind is loaded separately for layout/utility classes.
 */

html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
}

/* Brand color tokens */
.brand-blue-text  { color: #1e5fa8; }
.brand-green-text { color: #3fb34f; }

/* Gradient text headline accent */
.gradient-text {
  background: linear-gradient(90deg, #1e5fa8 0%, #2a7bc7 45%, #3fb34f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Primary brand button — blue gradient */
.btn-primary {
  background: linear-gradient(90deg, #1e5fa8 0%, #2a7bc7 100%);
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 6px 18px rgba(30,95,168,0.25);
}
.btn-primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(30,95,168,0.32);
}

/* Accent button — green gradient */
.btn-accent {
  background: linear-gradient(90deg, #3fb34f 0%, #5cc45a 100%);
  color: #fff;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: 0 6px 18px rgba(63,179,79,0.25);
}
.btn-accent:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Hero background — soft brand-tinted radial gradients */
.hero-bg {
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(63,179,79,0.14), transparent 60%),
    radial-gradient(1100px 480px at 5% -10%, rgba(30,95,168,0.16), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fd 100%);
}

/* Surfaces */
.card-shadow {
  box-shadow: 0 1px 2px rgba(15,23,42,0.04), 0 10px 28px rgba(15,23,42,0.07);
}

/* Brand-colored thin divider used under section eyebrows */
.brand-divider {
  height: 4px;
  width: 56px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #1e5fa8, #3fb34f);
}

/* Inline checkmark pill — used in feature lists */
.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  background: #d8f2db;
  color: #2f8d3e;
  font-weight: 700;
  flex-shrink: 0;
}
/* Variant used on V2I page where the check sits on a tinted card */
.check-blend {
  background: linear-gradient(135deg, #d9e8f6, #d8f2db);
}

/* Numbered step badge — large brand gradient circle */
.step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #1e5fa8, #3fb34f);
  flex-shrink: 0;
}

/* Section eyebrow chip — replaces inline `style="background:linear-gradient(...)"` */
.brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, #1e5fa8, #3fb34f);
}

/* Tinted icon tile for category badges (e.g. "Who it's for" cards) */
.icon-tile-blue  { background: #eef5fc; color: #1e5fa8; }
.icon-tile-green { background: #effaf0; color: #2f8d3e; }

/* Subtle alternating section background — replaces inline `style="background:#f4f8fc"` */
.section-tint { background: #f4f8fc; }