/* brand.css — the single source of brand tokens (2026-07-22).
   Before this the site ran two unrelated design systems: the homepage on --ink/--paper
   (near-black + cream, Fraunces) and the other 1057 pages on --primary #4f46e5 (bright indigo,
   Outfit). Buttons differed by 33% in size and were completely different colours, so moving from
   the homepage to a service page felt like changing company.

   Direction: premium/professional for a B2B fintech vendor selling to brokers and institutions —
   ink black carries the weight and the logo's teal is the single accent. Bright indigo reads as
   a generic SaaS template and has been retired.

   This file is loaded LAST so it wins the cascade. To re-skin the whole site, change the values
   in :root here and nothing else. */

:root {
  /* brand */
  /* Buttons are INK, not navy (2026-07-22): navy fought the homepage's warm cream/black hero —
     the owner saw "Book Free Demo" turn blue and it looked pasted on. Ink is the homepage's own
     colour, so the homepage is untouched and the other 1057 pages come to IT instead. Reads as
     premium (black + one accent) rather than generic-SaaS indigo. Navy stays in the logo mark. */
  --brand-ink:   #15160F;   /* primary — matches the homepage exactly */
  --brand-ink-d: #2c2d22;   /* hover */
  --brand-navy:  #17356b;   /* logo mark gradient only, not a UI colour */
  --brand-navy-d:#0f2447;
  --brand-teal:  #0f766e;   /* logo accent, also the wordmark colour */
  --brand-teal-l:#14b8a6;
  --brand-green: #34d399;   /* the logo's growth arrow — success states only */

  /* remap the inner-page system (style.css / service-page.css) */
  --primary:       var(--brand-ink);
  --primary-light: #3d3e33;
  --primary-glow:  rgba(21, 22, 15, 0.14);
  --accent:        var(--brand-teal);

  /* one button geometry everywhere: was 13x24px on the homepage and 16x32px elsewhere */
  --btn-pad-y: 0.9rem;
  --btn-pad-x: 1.9rem;
  --btn-radius: 11px;
  --btn-size: 0.95rem;
}

/* ── shared button geometry ─────────────────────────────────────────────── */
.btn, .btn-primary, .btn-outline, .nav-cta {
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  font-size: var(--btn-size);
  font-weight: 600;
  line-height: 1.15;
}
.nav-cta { padding: 0.68rem 1.5rem; font-size: 0.9rem; }

.btn-primary, .nav-cta {
  background: var(--brand-ink);
  color: #fff !important;
  border: 1px solid var(--brand-ink);
}
.btn-primary:hover, .nav-cta:hover { background: var(--brand-ink-d); border-color: var(--brand-ink-d); }

.btn-outline {
  background: transparent;
  border: 1.5px solid rgba(21, 22, 15, 0.25);
  color: var(--brand-ink);
}
.btn-outline:hover { border-color: var(--brand-ink); background: rgba(21, 22, 15, 0.04); }

/* the CTA band is an ink-to-teal gradient, so its buttons invert */
.scta-box .btn-primary { background: #fff; color: var(--brand-ink) !important; border-color: #fff; }
.scta-box .btn-outline { border-color: rgba(255,255,255,0.45); color: #fff; }

/* ── homepage: same tokens, its own dark surface ───────────────────────── */
/* homepage keeps its own ghost/primary treatment — the tokens above already match it */
.logo span { color: var(--brand-teal); }

/* accents that used to be indigo */
a:hover { color: var(--brand-teal); }
.section-tag { color: var(--brand-teal); }
.fc-icon { background: rgba(15, 118, 110, 0.10); color: var(--brand-teal); }

/* CTA band: was --primary -> #818cf8 (black to light indigo, a leftover). Ink to teal. */
.scta-box { background: linear-gradient(135deg, var(--brand-ink), var(--brand-teal)) !important; }

/* ── one canvas everywhere (2026-07-22) ───────────────────────────────────
   The buttons and accents matched, but the PAGE itself did not: the homepage sat on cream
   --paper #F4F1E9 while the other 1057 pages sat on white #ffffff, so every visitor crossing
   from the homepage saw the background change. The homepage's cream is the odd one out (1 page
   vs 1057), so it moves to white; its alternating band takes the same soft grey the inner pages
   already use for theirs.
   --paper also paints text on ink buttons and the form fields, and white works for both. */
:root {
  --paper:  #ffffff;
  --paper2: #f8fafc;
}

/* ── one typeface system (2026-07-22) ─────────────────────────────────────
   Last visible split: the homepage set h1/h2/h3 in Fraunces (serif, weight 500) while the other
   1057 pages set them in Outfit (geometric sans, weight 800) — the same brand in two voices.
   Serif headlines are what separates a premium vendor from a SaaS template, and the homepage
   already had them, so the serif wins and the rest of the site follows.
   Weight is capped at 600 because that is the heaviest Fraunces cut we self-host; 800 would be
   synthesised and look smeared. Body copy stays Inter everywhere. */
:root { --font-heading: 'Fraunces', Georgia, serif; }

h1, h2, .section-title, .sh-text h1, .scta-box h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.015em;
}
/* card and step headings stay in the sans — the homepage does this too */
.feature-card h3, .card h3, .step h3, .why .w h3 { font-family: 'Inter', system-ui, sans-serif; font-weight: 600; }