/**
 * Semantic text styles — adopted from the design handoff, scoped to the
 * homepage.
 *
 * Every selector is prefixed with `.dc-homepage` on purpose. The source sheet
 * styles bare `html` and bare class names (.h1, .body, .caption, …); dropped
 * into this theme unscoped they would collide with bootstrap_barrio and reach
 * the whole site, including admin pages and the topup flow that is still live.
 * Scoping keeps the brochure self-contained.
 *
 * Headlines and CTAs are Title Case (brand p. 16); body is sentence case.
 */

.dc-homepage {
  font-family: var(--font-brand);
  color: var(--fg-primary);
  -webkit-font-smoothing: antialiased;
}

.dc-homepage .h-display {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(48px, 7vw, var(--text-6xl));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-headline);
  color: var(--digicel-red);
}
.dc-homepage .h1 {
  font-family: var(--font-brand);
  font-weight: var(--weight-black);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-headline);
}
.dc-homepage .h2 {
  font-family: var(--font-brand);
  font-weight: var(--weight-black);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-headline);
}
.dc-homepage .h3 {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-body);
}
.dc-homepage .h4 {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-body);
}
.dc-homepage .h5 {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-body);
}

.dc-homepage .eyebrow {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-xs);
  line-height: 1;
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
  color: var(--digicel-red);
}

.dc-homepage .body {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);          /* Brand p. 17: body is Bold */
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-body);
  color: var(--fg-primary);
}
.dc-homepage .body-lg { font-size: var(--text-md); line-height: var(--leading-normal); }
.dc-homepage .body-sm { font-size: var(--text-sm); line-height: var(--leading-normal); }

.dc-homepage .caption {
  font-family: var(--font-brand);
  font-weight: var(--weight-semibold);      /* Fine detail → SemiBold */
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-body);
  color: var(--fg-primary);
}

.dc-homepage .cta-label {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  line-height: 1;
  letter-spacing: var(--tracking-body);
  color: var(--digicel-red);
}

/* Prices and numeric values — brand p. 18 calls for numbers to be
   set at tracking 0 (headline) or tracking 00 (body) so figures don't
   develop visible gaps. .price is the headline form. */
.dc-homepage .price {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-5xl);
  line-height: 0.95;
  letter-spacing: var(--tracking-numbers-display);
  color: var(--digicel-red);
}
/* Inline numeric span inside body copy — slightly tighter, so prices in
   sentences ("$5 for 5GB") don't gap. */
.dc-homepage .price-inline {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-numbers-body);
}

/* Keyword / callout style — brand p. 25
   "Key Words/Callouts in Body Copy: Hurme Geometric Sans 2 Bold Oblique,
    Color Digicel Red, Title Case." */
.dc-homepage .callout {
  font-family: var(--font-brand);
  font-weight: var(--weight-bold);
  font-style: oblique 10deg;
  color: var(--digicel-red);
  letter-spacing: var(--tracking-body);
}

/* Utility helpers (kept narrow — every value traces to a brand colour) */
.dc-homepage .u-red        { color: var(--digicel-red); }
.dc-homepage .u-dark-grey  { color: var(--digicel-dark-grey); }
.dc-homepage .u-light-grey { color: var(--digicel-light-grey); }
.dc-homepage .u-blue       { color: var(--digicel-blue); }
.dc-homepage .u-white      { color: var(--digicel-white); }
.dc-homepage .u-title-case { text-transform: none; }