/* Fora Intro measurements: centered 640px column (560px below 1280),
   36px group gap, 30px chip. Paragraph type and copy remain unchanged. */
.intro .intro-grid {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  width:calc(100% - 48px);
  max-width:640px;
  margin-inline:auto;
  gap:36px;
}
.intro .intro-copy {width:100%;gap:36px}
.intro .intro-grid > .eyebrow,
.materials-section .section-heading .eyebrow,
.benefits-section > .container > .section-heading .eyebrow {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  gap:12px;
  height:30px;
  padding:4px 16px;
  margin:0;
  border:0;
  border-radius:393px;
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.65);
  font-family:Inter,Arial,sans-serif;
  font-size:14px;
  font-weight:400;
  line-height:21px;
  letter-spacing:-.02em;
  font-feature-settings:'blwf' on;
}
.intro .intro-grid > .eyebrow::after,
.materials-section .section-heading .eyebrow::after,
.benefits-section > .container > .section-heading .eyebrow::after {
  content:'';
  position:absolute;
  inset:0;
  border:1px solid rgba(255,255,255,.1);
  border-radius:inherit;
  pointer-events:none;
}
.intro .intro-grid > .eyebrow::before,
.materials-section .section-heading .eyebrow::before,
.benefits-section > .container > .section-heading .eyebrow::before {
  content:'';
  display:block;
  flex:none;
  width:7px;
  height:7px;
  margin:0;
  border-radius:215px;
  background:#fff3f0;
  opacity:1;
  animation:intro-dot-pulse 1s linear infinite alternate;
}
@keyframes intro-dot-pulse {from{opacity:1}to{opacity:0}}
.materials-section .section-heading .eyebrow,
.benefits-section > .container > .section-heading .eyebrow {
  color:rgba(255,255,255,.8);
  margin-bottom:24px;
}
.materials-section .section-heading h2 > span,
.benefits-section .section-heading h2 > span {color:rgba(255,255,255,.65)}
.materials-section .section-heading > p {color:rgba(255,255,255,.8)}
@media(max-width:809px) {
  .materials-section .section-heading .eyebrow,
.benefits-section > .container > .section-heading .eyebrow {margin-bottom:20px}
}
@media(max-width:1279.98px) {
  .intro .intro-grid {max-width:560px}
}
@media(prefers-reduced-motion:reduce) {
  .intro .intro-grid > .eyebrow::before,
  .materials-section .section-heading .eyebrow::before,
.benefits-section > .container > .section-heading .eyebrow::before {animation:none}
}

/* The What You Get chip keeps the source 24px title gap at every breakpoint. */
.benefits-section > .container > .section-heading .eyebrow {margin-bottom:24px}