:root {
  --content-frame-curve-art: url("pricing-corner-curves.svg");
  --content-frame-curve-width: clamp(64px, 7vw, 88px);
}

:where(
  .pain-point-grid article,
  .knowledge-grid article,
  .experience-grid article,
  .diagnosis-path article,
  .diagnosis-contrast article,
  .leverage-principle,
  .capability-list article,
  .engagement-output,
  .market-card > div,
  .join-panel,
  .case-fit-grid article,
  .after-request,
  .consult-rule,
  .consult form,
  .faq details,
  .pricing-example header,
  .pricing-example a > span
) {
  position: relative;
  isolation: isolate;
}

:where(
  .pain-point-grid article,
  .knowledge-grid article,
  .experience-grid article,
  .diagnosis-path article,
  .diagnosis-contrast article,
  .leverage-principle,
  .capability-list article,
  .engagement-output,
  .market-card > div,
  .join-panel,
  .case-fit-grid article,
  .after-request,
  .consult-rule,
  .consult form,
  .faq details,
  .pricing-example header,
  .pricing-example a > span
)::before,
:where(
  .pain-point-grid article,
  .knowledge-grid article,
  .experience-grid article,
  .diagnosis-path article,
  .diagnosis-contrast article,
  .leverage-principle,
  .capability-list article,
  .engagement-output,
  .market-card > div,
  .join-panel,
  .case-fit-grid article,
  .after-request,
  .consult-rule,
  .consult form,
  .faq details,
  .pricing-example header,
  .pricing-example a > span
)::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: var(--content-frame-curve-width);
  aspect-ratio: 128 / 200;
  background: var(--content-frame-curve-art) center / 100% 100% no-repeat;
  pointer-events: none;
}

:where(
  .pain-point-grid article,
  .knowledge-grid article,
  .experience-grid article,
  .diagnosis-path article,
  .diagnosis-contrast article,
  .leverage-principle,
  .capability-list article,
  .engagement-output,
  .market-card > div,
  .join-panel,
  .case-fit-grid article,
  .after-request,
  .consult-rule,
  .consult form,
  .faq details,
  .pricing-example header,
  .pricing-example a > span
)::before {
  top: 0;
  right: 0;
}

:where(
  .pain-point-grid article,
  .knowledge-grid article,
  .experience-grid article,
  .diagnosis-path article,
  .diagnosis-contrast article,
  .leverage-principle,
  .capability-list article,
  .engagement-output,
  .market-card > div,
  .join-panel,
  .case-fit-grid article,
  .after-request,
  .consult-rule,
  .consult form,
  .faq details,
  .pricing-example header,
  .pricing-example a > span
)::after {
  bottom: 0;
  left: 0;
  transform: rotate(180deg);
}

/* These compact strips border screenshots; keep the curves inside the text-only areas. */
.pricing-example header,
.pricing-example a > span {
  --content-frame-curve-width: 52px;
  overflow: hidden;
}

.faq details {
  --content-frame-curve-width: 42px;
}

/* Preserve the existing ::after separator on every engagement step. */
.engagement-path article {
  isolation: isolate;
  background-image: var(--content-frame-curve-art);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: var(--content-frame-curve-width) auto;
}

.engagement-path article::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: var(--content-frame-curve-width);
  aspect-ratio: 128 / 200;
  background: var(--content-frame-curve-art) center / 100% 100% no-repeat;
  transform: rotate(180deg);
  pointer-events: none;
}

@media (max-width: 560px) {
  :root {
    --content-frame-curve-width: 60px;
  }

  .pricing-example header,
  .pricing-example a > span {
    --content-frame-curve-width: 46px;
  }

  .faq details {
    --content-frame-curve-width: 38px;
  }
}