/* Quiet background shapes on the main pages (David 2026-10-30: backgrounds looked empty, keep it little). Thin lines and
   triangles from the logo sit in the corners, behind the content. The brand book says no patterns; the owner chose this.
   Masks, so one drawing works on white, tinted and blue sections. Decorative only: never takes clicks. */
.hero, .explore, .why, .steps, .cta, .lib-hero, .price__hero { position: relative; isolation: isolate; }
.hero::before, .hero::after,
.explore::before,
.why::after,
.steps::before, .steps::after,
.cta::after,
.lib-hero::before, .lib-hero::after,
.price__hero::before, .price__hero::after {
	content: ""; position: absolute; z-index: -1; top: 0; width: clamp(150px, 26vw, 460px); aspect-ratio: 520 / 420;
	background-color: var(--color-primary); opacity: .1; pointer-events: none;
	-webkit-mask: var(--motif) no-repeat center / contain; mask: var(--motif) no-repeat center / contain;
}
.hero::before, .explore::before, .steps::before, .lib-hero::before, .price__hero::before { left: 0; --motif: url('../assets/images/motif-left.svg'); }
.hero::after, .why::after, .steps::after, .cta::after, .lib-hero::after, .price__hero::after { right: 0; --motif: url('../assets/images/motif-right.svg'); }

/* Blue bands: white shapes. In the steps band they stay small in the top corners, clear of the title and the steps. */
.steps::before, .steps::after, .cta::after { background-color: #FFFFFF; opacity: .12; }
.steps::before, .steps::after { width: clamp(120px, 14vw, 220px); }
.steps::after { transform: scaleY(-1); }
.cta::after { top: auto; bottom: 0; }

/* Explore: thinner and upside down, so three sections in a row never show the same drawing. */
.explore::before { width: clamp(120px, 15vw, 240px); transform: scaleY(-1); }

/* Why: under the editor picture on the left, never behind the text on the right. */
.why::after { right: auto; left: 0; top: auto; bottom: 0; width: clamp(150px, 18vw, 300px); transform: scaleX(-1); }

/* The gallery band is tinted: softer there. */
.lib-hero::before, .lib-hero::after { opacity: .06; }

/* The pricing hero sits inside the page gutter: let the shapes reach the page edges. */
.price__hero::before { left: calc(-1 * var(--page-inline)); }
.price__hero::after { right: calc(-1 * var(--page-inline)); }

/* Phones: smaller and fainter, so nothing competes with the text. */
@media (max-width: 767px) {
	.hero::before, .hero::after, .explore::before, .lib-hero::before, .lib-hero::after, .price__hero::before, .price__hero::after { width: 130px; opacity: .05; }
	.cta::after { width: 130px; opacity: .09; }
	.steps::before, .steps::after, .why::after { display: none; } /* stacked text fills these sections */
}
@media (max-width: 1023px) { .why::after { display: none; } }