/* Soft section edges: rolling hills, a cloud bank, a gentle wave. Two layers each (a far one a shade deeper, and a near one),
   painted in the NEXT section's colour so the edge reads as part of it. SVG masks, colour from tokens.
   <div class="db-divider db-divider--hills" style="--db-divider-fill:var(--db-page)" aria-hidden="true"></div>
   Default: sits on the bottom edge of its positioned section and rises up. --top: hangs from the top edge.
   --flip mirrors left to right. --static puts it in normal flow. Height: --db-divider-h. */
.db-divider{--db-divider-fill:var(--db-night-bottom);--db-divider-h:clamp(56px,4vw + 34px,124px);
  position:absolute;left:0;right:0;bottom:-1px;height:var(--db-divider-h);z-index:1;pointer-events:none;
  --m-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 74C170 34 330 22 520 46S860 98 1060 62 1330 30 1440 52V120H0Z'/%3E%3C/svg%3E");
  --m-front:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 100C150 76 300 66 470 84S780 120 980 92 1260 64 1440 88V120H0Z'/%3E%3C/svg%3E")}
.db-divider::before,.db-divider::after{content:"";position:absolute;inset:0;
  -webkit-mask:var(--m) bottom/100% 100% no-repeat;mask:var(--m) bottom/100% 100% no-repeat}
/* far layer: the same colour a shade deeper, like a painted distant hill (override with --db-divider-back) */
.db-divider::before{--m:var(--m-back);background:var(--db-divider-back,color-mix(in srgb,var(--db-divider-fill) 86%,rgba(4,6,20,1)))}
.db-divider::after{--m:var(--m-front);background:var(--db-divider-fill)}
.db-divider--clouds{
  --m-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cellipse cx='-60' cy='77' rx='57' ry='45'/%3E%3Cellipse cx='26' cy='81' rx='60' ry='48'/%3E%3Cellipse cx='118' cy='81' rx='59' ry='47'/%3E%3Cellipse cx='208' cy='70' rx='43' ry='35'/%3E%3Cellipse cx='273' cy='77' rx='64' ry='51'/%3E%3Cellipse cx='370' cy='68' rx='63' ry='50'/%3E%3Cellipse cx='465' cy='69' rx='53' ry='42'/%3E%3Cellipse cx='546' cy='74' rx='55' ry='44'/%3E%3Cellipse cx='629' cy='66' rx='43' ry='34'/%3E%3Cellipse cx='694' cy='78' rx='49' ry='39'/%3E%3Cellipse cx='769' cy='68' rx='60' ry='48'/%3E%3Cellipse cx='859' cy='68' rx='60' ry='48'/%3E%3Cellipse cx='951' cy='67' rx='56' ry='45'/%3E%3Cellipse cx='1037' cy='76' rx='43' ry='34'/%3E%3Cellipse cx='1102' cy='67' rx='47' ry='38'/%3E%3Cellipse cx='1173' cy='81' rx='65' ry='52'/%3E%3Cellipse cx='1272' cy='79' rx='49' ry='39'/%3E%3Cellipse cx='1346' cy='76' rx='55' ry='44'/%3E%3Cellipse cx='1429' cy='78' rx='47' ry='38'/%3E%3Cellipse cx='1501' cy='81' rx='58' ry='46'/%3E%3Crect x='0' y='72' width='1440' height='48'/%3E%3C/svg%3E");
  --m-front:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cellipse cx='-60' cy='99' rx='34' ry='27'/%3E%3Cellipse cx='-5' cy='100' rx='41' ry='33'/%3E%3Cellipse cx='61' cy='100' rx='35' ry='28'/%3E%3Cellipse cx='117' cy='98' rx='30' ry='24'/%3E%3Cellipse cx='166' cy='102' rx='37' ry='30'/%3E%3Cellipse cx='225' cy='96' rx='29' ry='23'/%3E%3Cellipse cx='271' cy='101' rx='29' ry='23'/%3E%3Cellipse cx='317' cy='95' rx='38' ry='30'/%3E%3Cellipse cx='378' cy='105' rx='42' ry='34'/%3E%3Cellipse cx='445' cy='101' rx='37' ry='30'/%3E%3Cellipse cx='505' cy='93' rx='30' ry='24'/%3E%3Cellipse cx='553' cy='95' rx='35' ry='28'/%3E%3Cellipse cx='610' cy='95' rx='30' ry='24'/%3E%3Cellipse cx='658' cy='97' rx='28' ry='22'/%3E%3Cellipse cx='703' cy='102' rx='34' ry='27'/%3E%3Cellipse cx='757' cy='100' rx='35' ry='28'/%3E%3Cellipse cx='814' cy='101' rx='35' ry='28'/%3E%3Cellipse cx='870' cy='97' rx='34' ry='27'/%3E%3Cellipse cx='925' cy='105' rx='42' ry='34'/%3E%3Cellipse cx='993' cy='102' rx='40' ry='32'/%3E%3Cellipse cx='1057' cy='96' rx='32' ry='26'/%3E%3Cellipse cx='1109' cy='94' rx='32' ry='25'/%3E%3Cellipse cx='1159' cy='99' rx='39' ry='31'/%3E%3Cellipse cx='1222' cy='99' rx='40' ry='32'/%3E%3Cellipse cx='1286' cy='104' rx='42' ry='33'/%3E%3Cellipse cx='1353' cy='95' rx='28' ry='22'/%3E%3Cellipse cx='1397' cy='100' rx='41' ry='33'/%3E%3Cellipse cx='1463' cy='99' rx='42' ry='34'/%3E%3Crect x='0' y='102' width='1440' height='18'/%3E%3C/svg%3E")}
.db-divider--wave{
  --m-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 58C120 38 240 30 360 42S600 84 720 84 960 44 1080 40 1320 62 1440 52V120H0Z'/%3E%3C/svg%3E");
  --m-front:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 86C140 70 260 64 400 76S640 108 780 104 1040 72 1180 72 1370 88 1440 92V120H0Z'/%3E%3C/svg%3E")}
.db-divider--top{top:-1px;bottom:auto;transform:scaleY(-1)}
.db-divider--flip{transform:scaleX(-1)}
.db-divider--top.db-divider--flip{transform:scale(-1,-1)}
.db-divider--static{position:relative;display:block;left:auto;right:auto;bottom:auto;top:auto}