/* Keep the evidence arc on the open side of the page. Logical positioning
   mirrors the composition in English; the hero is deliberately untouched. */
.understand-section{
 --mesh-start:auto;
 --mesh-end:-330px;
 --mesh-top:28%;
 --mesh-mask:radial-gradient(ellipse at 49% 54%,#000 21%,#000d 46%,transparent 74%);
}
/* These reading windows stay fixed while the texture underneath drifts. */
.understand-section .explain-heading,
.understand-section .explain-selectors{position:relative;isolation:isolate}
.understand-section .explain-heading::before,
.understand-section .explain-selectors::before{
 content:'';position:absolute;z-index:-1;pointer-events:none;inset:-20px -32px;
 background:linear-gradient(to left,var(--bg) 0%,color-mix(in srgb,var(--bg) 98.8%,transparent) 48%,color-mix(in srgb,var(--bg) 85.1%,transparent) 67%,transparent 91%);
}
html[dir=ltr] .understand-section .explain-heading::before,
html[dir=ltr] .understand-section .explain-selectors::before{
 background:linear-gradient(to right,var(--bg) 0%,color-mix(in srgb,var(--bg) 98.8%,transparent) 48%,color-mix(in srgb,var(--bg) 85.1%,transparent) 67%,transparent 91%);
}
@media(min-width:1800px){.understand-section{--mesh-end:-150px}}
@media(max-width:1100px){.understand-section{--mesh-end:-390px;--mesh-top:31%}}
@media(max-width:760px){
 .understand-section{--mesh-end:-570px;--mesh-top:33%;--mesh-mask:radial-gradient(ellipse at 51% 54%,#000 23%,#000d 46%,transparent 74%)}
 .understand-section .explain-heading::before,
 .understand-section .explain-selectors::before,
 html[dir=ltr] .understand-section .explain-heading::before,
 html[dir=ltr] .understand-section .explain-selectors::before{
  inset:-18px -28px;background:linear-gradient(color-mix(in srgb,var(--bg) 99.2%,transparent) 72%,color-mix(in srgb,var(--bg) 92.9%,transparent) 88%,transparent);
 }
}
@media(max-width:350px){.understand-section{--mesh-end:-620px}}