/* Opt-in markers: TOP hero, TOP About copy, and the two Why Design sections. */
.marker-word {
  position: relative;
  display: inline-block;
  isolation: isolate;
  color: inherit;
  background: none;
  white-space: nowrap;
  --marker-paper: #ffec58;
  --marker-ink: var(--ink);
  --marker-x: 0em;
  --marker-top: 0em;
  --marker-bottom: .157em;
}
.marker-word-reveal {
  position: absolute;
  inset: calc(-1 * var(--marker-top)) calc(-1 * var(--marker-x)) calc(-1 * var(--marker-bottom));
  padding: var(--marker-top) var(--marker-x) var(--marker-bottom);
  background: var(--marker-paper);
  color: var(--marker-ink);
  font: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  clip-path: inset(0);
}
.hero-title .marker-word {
  --marker-paper: #f0f0f0;
  --marker-ink: var(--orange);
  --marker-x: .09322em;
  --marker-top: .21186em;
  --marker-bottom: .21186em;
}
.about-title .marker-word {
  --marker-paper: var(--orange);
  --marker-ink: #000;
  --marker-top: 0em;
  --marker-bottom: 0em;
  line-height: 1.4166667;
}
.why-design-lead .marker-word {
  --marker-x: .05em;
  --marker-top: -.05em;
  --marker-bottom: -.075em;
}
.why-design-lead .marker-word-reveal {
  /* End the band after the comma's ink, rather than its full-width advance. */
  right: .575em;
  padding-right: 0;
}
[data-marker-lines] { position: relative; isolation: isolate; }
.marker-stroke {
  position: absolute;
  z-index: -1;
  background: #ffec58;
  transform-origin: left center;
  pointer-events: none;
  user-select: none;
}
[data-marker-state="waiting"] > .marker-word-reveal { clip-path: inset(0 100% 0 0); }
[data-marker-state="waiting"] > .marker-stroke { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) {
  [data-marker-state] > .marker-word-reveal { clip-path: inset(0); }
  [data-marker-state] > .marker-stroke { transform: none; }
}
@media (forced-colors: active) {
  .marker-word-reveal, .marker-stroke { display: none; }
}