/* Homepage: one section header pattern, one type scale, no hidden content. */

.immersive .eyebrow {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}
.immersive .section-kicker {
  margin: 0;
}
.immersive .section-header,
.immersive .how-head,
.immersive .systems-intro,
.immersive .security-head {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  grid-template-areas:
    "kicker kicker"
    "title lead";
  gap: 24px 48px;
  align-items: end;
  margin-bottom: clamp(48px, 5vw, 72px);
}
.immersive .section-header > .section-kicker,
.immersive .how-head > .section-kicker,
.immersive .systems-intro .section-kicker,
.immersive .security-head .section-kicker {
  grid-area: kicker;
  padding: 0;
}
.immersive .section-header > div:not(.case-studies-intro),
.immersive .systems-intro > div,
.immersive .security-head > div:first-child {
  display: contents;
}
.immersive .section-header h2,
.immersive .how-head > h2,
.immersive .systems-intro h2,
.immersive .security-head h2 {
  grid-area: title;
}
.immersive .section-header > div > p,
.immersive .how-head > .how-lead,
.immersive .systems-intro > p,
.immersive .security-head-aside {
  grid-area: lead;
}
.immersive .systems-intro {
  grid-template-areas:
    "kicker kicker"
    "title lead"
    "steps steps";
}
.immersive .systems-steps {
  grid-area: steps;
}
.immersive .case-studies-intro {
  grid-area: kicker;
  align-self: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.immersive .case-studies-intro .case-browse {
  margin: 0;
}
.immersive .security-head .section-kicker {
  margin-bottom: 0;
}

.immersive .section-header h2,
.immersive .how-head h2,
.immersive .systems-intro h2,
.immersive .security-head h2 {
  font-size: clamp(32px, 3.4vw, 48px);
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
  max-width: 640px;
}
.immersive .section-header p:not(.eyebrow),
.immersive .how-head .how-lead,
.immersive .systems-intro > p,
.immersive .security-description {
  max-width: 460px;
  margin: 0;
  padding: 0;
  font-size: 16px;
  line-height: 1.6;
}
.immersive .security-head-aside {
  gap: 24px;
  max-width: 460px;
}
.immersive .closing h2 {
  font-size: clamp(36px, 4.2vw, 60px);
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.immersive .closing p {
  font-size: 16px;
  line-height: 1.6;
}
.immersive .hero-content .hero-description {
  margin-top: 28px;
}

/* Body text on the homepage does not go below 14px. */
.immersive .systems-steps li,
.immersive .systems-steps span,
.immersive .industry-card p,
.immersive .industry-card .card-bottom,
.immersive .case-feature-copy > p:not(.eyebrow),
.immersive .case-story-copy > p:not(.eyebrow),
.immersive .case-metric span,
.immersive .case-read,
.immersive .stat span,
.immersive .security-item p,
.immersive .security-pillar p,
.immersive .agent-overview-copy > p:not(.eyebrow),
.immersive .agent-description,
.immersive .agent-process p,
.immersive .agent-detail .agent-cta,
.immersive .agent-section-note,
.immersive .agent-benefit,
.immersive .agent-more-description,
.immersive .agent-impact p,
.immersive .fit-outputs li div > span,
.immersive .fit-tool,
.immersive .fit-note,
.immersive .closing-note,
.immersive .footer-links,
.immersive .footer-bottom,
.immersive .backers .eyebrow {
  font-size: 14px;
}
.immersive .systems-steps span,
.immersive .case-metric span,
.immersive .fit-outputs li div > span,
.immersive .agent-benefit,
.immersive .closing-note,
.immersive .footer-bottom {
  line-height: 1.5;
}


@media (max-width: 760px) {
  .immersive .section-header,
  .immersive .how-head,
  .immersive .systems-intro,
  .immersive .security-head {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kicker"
      "title"
      "lead";
    gap: 16px;
  }
  .immersive .systems-intro {
    grid-template-areas:
      "kicker"
      "title"
      "lead"
      "steps";
  }
  .immersive .section-header h2,
  .immersive .how-head h2,
  .immersive .systems-intro h2,
  .immersive .security-head h2 {
    font-size: clamp(28px, 8vw, 36px);
  }
}