/* Type and shape layer: Playfair Display headings with an italic accent phrase, Raleway tracked capitals for
   labels, buttons and the menu, Inter for text. Loaded last on every page so it is the one place to adjust the look. */

h1, h2, h3, h4, .hs-title, .brand-name, .brand-sub, .foot-name, .foot-tag, .hero-tagline, .cred dd, .pay-mpesa {
  font-family: var(--display); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: lining-nums;
}
h1, .hs-title { line-height: 1.1; }
h1, h2, h3, .hs-title { text-wrap: pretty; }
.card-body h3 { font-size: 1.45rem; text-wrap: wrap; }
.pick-side h1 { font-size: clamp(2rem, 3.4vw, 2.6rem); }
h2 { line-height: 1.14; }
.brand-name { font-weight: 700; letter-spacing: 0; }
.cred dd, .pay-mpesa { letter-spacing: .02em; }

/* Italic accent phrase in headings: blue on light, marigold on dark bands */
h1 em, h2 em, h3 em, .hs-title em { font-style: italic; font-weight: 500; color: var(--accent); }
.hero em, .band-hero em, .band-dark em, .ab-hero em, .pick-side em, .pp-hero em { color: var(--sun); }
.ln { display: block; }

/* Small tracked capitals for anything that works like a label or a button */
.btn, .chip, .badge, .tag, .status, .ab-tag, .flabel, .head-cta, .nav a, .nav-pick, .tabs button, .pill span,
.hs-kicker, .cl-label, .foot-h {
  font-family: var(--label); font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
}
.btn { font-size: .78rem; border-radius: 2px; }
.btn-sm { font-size: .72rem; }
.chip, .tabs button, .pill span { font-size: .7rem; }
.chip { padding-inline: .8rem; letter-spacing: .1em; gap: 6px; }
.search { padding-inline: .8rem; }
.chip .n { font-family: var(--text); letter-spacing: 0; }
.badge, .tag, .ab-tag, .status { font-size: .68rem; letter-spacing: .1em; }
.hs-kicker { font-size: .78rem; letter-spacing: .16em; }
.flabel, .cl-label { font-size: .75rem; letter-spacing: .14em; }
.foot-h { font-size: .8rem; letter-spacing: .16em; }
.nav a { font-size: .95rem; letter-spacing: .1em; }
@media (min-width: 900px) { .nav a { font-size: .72rem; letter-spacing: .13em; } }
.nav-pick { font-size: .95rem; }

/* Body text reads best a little looser in Inter */
body { line-height: 1.62; }
