/*
 * Elementor gives every shape fill `transform: rotateY(0deg)`, which promotes the path to its own
 * 3D layer. At some odd viewport widths that layer's edge column renders about 9 percent short, so a
 * flipped cap leaves a faint 1px tint where it meets the next section. The identity transform does
 * nothing, so drop it for our own waves only (marked by the de26-wave class on the svg root).
 * Selectors here start with .elementor-shape, not [data-de26], because Elementor owns this markup.
 */
.elementor-shape svg.de26-wave .elementor-shape-fill {
	transform: none;
}

/*
 * A positioned widget (the Hero, for one) paints over a shape divider that comes earlier in the DOM,
 * which leaves the cap hidden under the widget's background. Lift our waves above the section content;
 * they are decorative and must never take clicks.
 */
.elementor-shape:has(> svg.de26-wave) {
	z-index: 1;
	pointer-events: none;
}