/**
 * Help hero.
 *
 * The tinted background sits on the section so it spans the full page width,
 * while the padding and the measure live on the inner wrapper — the same split
 * the prototype uses. Putting the padding on the section instead would confine
 * the tint to the container.
 */

.dc-help-hero {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
}

.dc-help-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 20px 36px;
}

.dc-help-hero__eyebrow {
  color: var(--digicel-red);
  font-size: 12px;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
}

.dc-help-hero__title {
  margin: 12px 0 16px;
  color: var(--digicel-red);
  font-size: 34px;
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-headline);
  line-height: var(--leading-tight);
}

.dc-help-hero__subtitle {
  max-width: 560px;
  margin: 0 auto;
  color: var(--fg-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
}

@media (min-width: 768px) {
  .dc-help-hero__inner {
    padding: 72px 32px 64px;
  }

  .dc-help-hero__title {
    font-size: clamp(40px, 5vw, 60px);
  }

  .dc-help-hero__subtitle {
    margin-top: 14px;
  }
}