/* Reuse the shared feature-page hero/frame and canonical workflow layout. */
.f27-how-it-works-page .fw27 { padding-top: 0; }
/* The action follows both text and artwork in the DOM and spans the complete
   grid, including after the artwork when the workflow stacks on mobile. */
.f27-how-it-works-page .fw27__row { row-gap: 24px; }
.f27-how-it-works-page .fw27__feature-actions { grid-column: 1 / -1; display: flex; justify-content: center; }
.f27-how-it-works-page .fw27__feature-link { max-width: 100%; }

/* Reuse the real CTA grid, canvas and static fallback; retain this page's
   existing compact hero geometry rather than inheriting CTA section height. */
.f27-how-it-works-hero .f27-how-it-works-hero__field { display: block; min-height: 0; padding: 0; }
.f27-how-it-works-hero__copy :is(.f27-feature__eyebrow, h1, .f27-feature__lead) { position: relative; isolation: isolate; }
.f27-how-it-works-hero__copy .f27-feature__eyebrow { width: fit-content; margin-inline: auto; }
.f27-how-it-works-hero__copy :is(.f27-feature__eyebrow, h1, .f27-feature__lead)::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -.65rem -1.5rem;
  background: radial-gradient(ellipse at center, var(--f27-paper, #F9F9F6) 0%, var(--f27-paper, #F9F9F6) 38%, transparent 78%);
}
.f27-how-it-works-hero__copy h1::before { inset: -.45em -.7em; }
.f27-how-it-works-hero__copy .f27-feature__lead { background: var(--f27-paper, #F9F9F6); }
.f27-how-it-works-hero__copy .f27-feature__lead::before {
  inset: -1rem -2rem;
  background: radial-gradient(ellipse at center, var(--f27-paper, #F9F9F6) 0%, var(--f27-paper, #F9F9F6) 58%, transparent 100%);
}

@media (max-width: 1199px) {
  .f27-how-it-works-hero__copy { text-align: left; margin-inline: 0; }
  .f27-how-it-works-hero__copy :is(.f27-feature__eyebrow, h1, .f27-feature__lead) { margin-inline: 0; text-align: left; }
  .f27-how-it-works-page .fw27__row { text-align: left; }
  .f27-how-it-works-page .fw27__feature-actions { justify-content: flex-start; }
}