/* ==========================================================================
   access-security.css - pages/access-security.html
   Figma frame "Access & Security" 513:2130 (1920 x 9838).
   Note: the source file contains two identical frames for this page
   (448:4562 and 513:2130) and this build uses the latter. The layer name is
   misspelt "Secutity" in Figma; the spelling is corrected in all output.
   ========================================================================== */

.hero--access::before {
  background-image: url("../assets/shapes/access-hero-band.svg");
}

.hero--access .hero__media {
  max-width: 1237px;
}

/* Figma: this heading is Nunito Bold 50, between the section and row scales. */
.gated__title {
  font-family: var(--ff-display);
  font-size: clamp(30px, 3.4vw, 50px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink-strong);
  margin-bottom: var(--sp-6);
}

/* Single-column split: the copy sits alone on the left. */
.gated .split {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1100px;
}

.grid-answer {
  padding-bottom: 0;
  overflow: hidden;
}

.grid-answer .pill-row {
  margin-bottom: 0;
}

.grid-answer .bleed-figure {
  margin-top: var(--sp-9);
}