/* "Introducing" section under the hero, plus the hero's edge ring. */

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  border-radius: inherit;
  corner-shape: superellipse(var(--squircle-factor));
  box-shadow: inset 0 0 0 1px #0000000f;
  pointer-events: none;
}


/* Grid rails: a full-width bottom rule and hairline side borders on the content column. */
.rail { border-bottom: 1px solid #0000000f; }
.rail-inner {
  max-width: var(--breakpoint-2xl);
  margin: 0 auto;
  padding: 0 calc(var(--spacing) * 4);
}
.rail-cell {
  border-inline: 1px solid #0000000f;
  padding: calc(var(--spacing) * 12) calc(var(--spacing) * 6);
}
.intro-section .rail-cell { padding-top: calc(var(--spacing) * 24); }

/* Sits 38px up under the hero card, like the original's sticky-nav offsets. */
.intro-section { margin-top: -38px; }

.eyebrow-col { flex-shrink: 0; width: calc(var(--spacing) * 64); margin-bottom: calc(var(--spacing) * 8); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing) * .5);
  color: var(--brand-content);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  text-decoration-color: color-mix(in oklab, var(--brand) 50%, transparent);
  text-decoration-style: dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.eyebrow:hover { text-decoration-line: underline; }
.eyebrow svg { width: 16px; height: 16px; }

.statement { display: flex; flex-direction: column; gap: calc(var(--spacing) * 8); }
.statement p {
  color: var(--muted-foreground);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--text-base--line-height);
}
.statement strong { color: var(--primary); font-weight: 450; }

@media (min-width: 40rem) {
  .rail-inner { padding-inline: calc(var(--spacing) * 6); }
  .rail-cell { padding: calc(var(--spacing) * 16) calc(var(--spacing) * 8); }
  .statement p { font-size: var(--text-lg); line-height: var(--text-lg--line-height); }
}
@media (min-width: 48rem) {
  .rail-cell { padding: calc(var(--spacing) * 16) calc(var(--spacing) * 14); }
  .intro-section .rail-cell { padding-top: calc(var(--spacing) * 28); }
  .eyebrow { font-size: var(--text-base); }
}
@media (min-width: 64rem) {
  .rail-inner { padding-inline: calc(var(--spacing) * 12); }
  .intro-section .rail-cell { display: flex; gap: calc(var(--spacing) * 16); }
}
@media (min-width: 80rem) {
  .rail-inner { padding-inline: calc(var(--spacing) * 24); }
  .rail-cell { padding-inline: calc(var(--spacing) * 36); }
  .statement p { font-size: var(--text-xl); line-height: var(--text-xl--line-height); }
}