/* ============================================================
   FORTUNE100.CSS — Fortune 100 Sonar Report claim page
   Single block: banner, headline, credentials form.
   The form component itself lives in global.css (.fh-form).
   ============================================================ */

.f100-hero {
  /* Clears the fixed nav so the banner never sits behind it. */
  padding-block: calc(72px + var(--space-lg)) var(--space-3xl);
  text-align: center;
}

.f100-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-2xl);
}

.f100-hero h1 {
  font-size: var(--text-3xl);
  max-width: 24ch;
}

.f100-sub {
  margin-top: var(--space-lg);
  max-width: 58ch;
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
}

.f100-hero .fh-form {
  width: 100%;
}

.f100-back a {
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-secondary);
}

.f100-back a:hover {
  color: var(--color-accent-gold);
}

@media (max-width: 768px) {
  .f100-hero {
    padding-block: calc(64px + var(--space-md)) var(--space-2xl);
  }

  .f100-content {
    margin-top: var(--space-xl);
  }

  .f100-hero h1 {
    font-size: var(--text-2xl);
  }

  .fh-form {
    padding: var(--space-md);
  }
}