/* Websites page liquid blue (meridian-ads-main, Evan 2026-10-04: blue is allowed on this page only).
   .wlq sections get a moving liquid LED blue (WebGL, js/web-liquid.js) with wavy edges into the sections above and
   below. These sections and the ones right above them (#work, #standard) are not .sf-slide, so both waves always
   show. Without WebGL or with reduced motion they are flat deep blue. Two of them, never next to each other:
   #learn (big words) and #launch. */
.wlq { position: relative; background: #0b2bd6; color: #fff; }
.wlq > canvas.wlq-gl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.wlq > :not(canvas) { position: relative; z-index: 1; }
.wlq.wlq-live { background: transparent; }

/* #learn: "No packages. No presets. Only what your business needs." in big words, each line rising out of a mask */
.wlw { padding-block: clamp(170px, 17vw, 260px); }
.wlw-k { margin: 0 0 clamp(20px, 2vw, 32px); font-size: 15px; color: rgba(255, 255, 255, .72); }
.wlw-h { margin: 0; font-size: clamp(52px, 9.6vw, 164px); font-weight: 500; line-height: .98; letter-spacing: -.045em; color: #fff; }
.wlw-ln { display: block; overflow: hidden; padding-bottom: .06em; }
.wlw-ln > span { display: block; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.7, 0, .3, 1); transition-delay: calc(var(--i) * .12s); }
.wlw.wlw-in .wlw-ln > span { transform: none; }
.wlw-ln.dim > span { color: rgba(255, 255, 255, .55); }

/* #launch on the liquid: greys become soft white, all three words white */
#launch.wlq { padding-block: clamp(170px, 16vw, 240px); }
#launch.wlq .wla-eye, #launch.wlq .wla-cap, #launch.wlq .wla-say p span { color: rgba(255, 255, 255, .72); }
#launch.wlq .wla-ln { border-color: rgba(255, 255, 255, .28); }

/* The nav inverts what is under it (difference blend), which turns white into yellow over blue.
   While a liquid section is under the nav it stops blending and stays plain white. */
html.nav-on-blue .header-position-absolute-wrapper { mix-blend-mode: normal !important; }
html.nav-on-blue .header-position-absolute-wrapper .btn-primary.white { color: #0b2bd6; }

@media (prefers-reduced-motion: reduce) { .wlw-ln > span { transform: none; transition: none; } }

/* No edge lines around the liquid (Evan): the shared depth layer draws a hairline at the top and bottom of every
   section; on the liquid sections and the sections touching them it is turned off, so only the waves divide them. */
.wlq, .wlq + section, section:has(+ .wlq) { box-shadow: none !important; }