/* Continuous chapter atmosphere. Original static point meshes are page backgrounds,
   not card decorations; every layer is clipped, passive and outside the hero. */
.source-strip,.demo-section,#approach,#platforms.platform-section,.understand-section,#questions.faq-section,.production-coverage,.production-downloads,.download-strip,.footer{position:relative;isolation:isolate;overflow:hidden}
.source-strip::before,.demo-section::before,#approach::before,#platforms.platform-section::before,.understand-section::before,#questions.faq-section::before,.production-coverage::before,.production-downloads::before,.download-strip::before,.footer::before{
 content:'';position:absolute;z-index:-1;pointer-events:none;inset:auto;
 width:var(--mesh-width,1400px);height:var(--mesh-height,850px);
 inset-inline-start:var(--mesh-start,auto);inset-inline-end:var(--mesh-end,auto);
 top:var(--mesh-top,auto);bottom:var(--mesh-bottom,auto);
 background-image:var(--mesh-image);background-position:center;background-size:100% 100%;background-repeat:no-repeat;
 opacity:var(--mesh-opacity,.85);transform:var(--mesh-transform,none);
 mask-image:var(--mesh-mask,radial-gradient(ellipse,#000 25%,#000e 48%,transparent 76%));
 -webkit-mask-image:var(--mesh-mask,radial-gradient(ellipse,#000 25%,#000e 48%,transparent 76%));
}
/* The source strip carries only the outer ends; the logo row stays clear. */
.source-strip{--mesh-image:url('/assets/chapter-ribbon.svg');--mesh-width:max(1500px,110vw);--mesh-height:430px;--mesh-top:-150px;--mesh-start:-130px;--mesh-opacity:.56;--mesh-transform:rotate(-4deg);--mesh-mask:linear-gradient(90deg,#000,transparent 37%,transparent 63%,#000)}
/* Fold rolls up from the opposite edge to the heading. */
.demo-section{--mesh-image:url('/assets/chapter-fold.svg');--mesh-width:1450px;--mesh-height:940px;--mesh-end:-410px;--mesh-bottom:-290px;--mesh-opacity:.94;--mesh-transform:rotate(25deg);--mesh-mask:radial-gradient(ellipse at 35% 73%,#000 18%,#000d 45%,transparent 76%)}
/* The source chapter's ribbon crosses its full page edge, not just the excerpt. */
#approach{--mesh-image:url('/assets/chapter-ribbon.svg');--mesh-width:1460px;--mesh-height:900px;--mesh-start:-360px;--mesh-top:23%;--mesh-opacity:.91;--mesh-transform:rotate(-24deg);--mesh-mask:radial-gradient(ellipse at 58% 48%,#000 26%,#000d 48%,transparent 77%)}
/* A broad fan sweeps underneath the device chapter and opens toward the margin. */
#platforms.platform-section{--mesh-image:url('/assets/chapter-fan.svg');--mesh-width:1480px;--mesh-height:970px;--mesh-end:-380px;--mesh-bottom:-210px;--mesh-opacity:.94;--mesh-transform:rotate(19deg);--mesh-mask:radial-gradient(ellipse at 36% 56%,#000 24%,#000d 49%,transparent 76%)}
/* A shallow diagonal arc gives the evidence chapter a different horizon. */
.understand-section{--mesh-image:url('/assets/chapter-arc.svg');--mesh-width:1530px;--mesh-height:960px;--mesh-start:-430px;--mesh-top:18%;--mesh-opacity:.91;--mesh-transform:rotate(-26deg);--mesh-mask:radial-gradient(ellipse at 58% 50%,#000 22%,#000d 49%,transparent 77%)}
/* The open saddle stays strongest on the heading side, away from the answer column. */
#questions.faq-section{--mesh-image:url('/assets/chapter-saddle.svg');--mesh-width:1460px;--mesh-height:930px;--mesh-start:-470px;--mesh-top:-135px;--mesh-opacity:.87;--mesh-transform:rotate(22deg);--mesh-mask:radial-gradient(ellipse at 63% 54%,#000 25%,#000d 48%,transparent 75%)}
/* A long converging current closes the chapter underneath the action. */
.download-strip{--mesh-image:url('/assets/chapter-current.svg');--mesh-width:max(1640px,115vw);--mesh-height:860px;--mesh-end:-260px;--mesh-top:-210px;--mesh-opacity:.94;--mesh-transform:rotate(-16deg);--mesh-mask:radial-gradient(ellipse at 45% 53%,#000 28%,#000c 52%,transparent 79%)}
.production-coverage{--mesh-image:url('/assets/chapter-ribbon.svg');--mesh-width:max(1460px,110vw);--mesh-height:850px;--mesh-start:-300px;--mesh-top:-200px;--mesh-opacity:.78;--mesh-transform:rotate(-18deg);--mesh-mask:radial-gradient(ellipse at 60% 48%,#000 24%,#000c 50%,transparent 77%)}
.production-downloads{--mesh-image:url('/assets/chapter-fan.svg');--mesh-width:1480px;--mesh-height:1100px;--mesh-end:-350px;--mesh-top:-80px;--mesh-opacity:.84;--mesh-transform:rotate(19deg);--mesh-mask:radial-gradient(ellipse at 40% 50%,#000 24%,#000d 49%,transparent 76%)}
.footer{--mesh-image:url('/assets/chapter-arc.svg');--mesh-width:max(1500px,115vw);--mesh-height:calc(100% + 160px);--mesh-start:-290px;--mesh-top:-80px;--mesh-bottom:auto;--mesh-opacity:.66;--mesh-transform:rotate(8deg);--mesh-mask:linear-gradient(#000b,#000 47%,#000b)}

/* Specimen-local point layers are removed so the broad waves remain coherent. */
#approach .source-panel::before,.understand-section .explain-workbench::before,.understand-section::after,#platforms .dp-preview::before,#platforms .device-preview::before{content:none}
/* Keep the familiar folded material inside the compact demo at a quieter level. */
.demo-section .studio-stage::before{content:'';position:absolute;inset:-18% -38%;z-index:-1;pointer-events:none;background:url('/assets/chapter-fold.svg') center/cover no-repeat;opacity:.43;transform:rotate(-6deg);mask-image:radial-gradient(ellipse,#000 24%,#000b 55%,transparent 79%);-webkit-mask-image:radial-gradient(ellipse,#000 24%,#000b 55%,transparent 79%)}

@media(min-width:1800px){
 .demo-section{--mesh-end:-280px}
 #approach{--mesh-start:-220px}
 #platforms.platform-section{--mesh-end:-260px}
 .understand-section{--mesh-start:-260px}
 #questions.faq-section{--mesh-start:-300px}
}
@media(max-width:1100px){
 .demo-section{--mesh-width:1300px;--mesh-end:-510px;--mesh-bottom:-220px}
 #approach{--mesh-width:1280px;--mesh-start:-490px;--mesh-top:28%}
 #platforms.platform-section{--mesh-width:1300px;--mesh-end:-490px;--mesh-bottom:-160px}
 .understand-section{--mesh-width:1360px;--mesh-start:-550px;--mesh-top:25%}
 #questions.faq-section{--mesh-width:1250px;--mesh-start:-580px;--mesh-top:-90px}
 .download-strip{--mesh-width:1500px;--mesh-end:-500px;--mesh-top:-200px}
 .production-coverage{--mesh-width:1280px;--mesh-start:-390px}
 .production-downloads{--mesh-width:1300px;--mesh-end:-450px}
 .footer{--mesh-start:-350px}
}
@media(max-width:760px){
 .source-strip{--mesh-width:1000px;--mesh-height:450px;--mesh-start:-300px;--mesh-top:-75px;--mesh-opacity:.61;--mesh-transform:rotate(18deg);--mesh-mask:linear-gradient(90deg,#000,transparent 39%,transparent 62%,#000)}
 .demo-section{--mesh-width:1060px;--mesh-height:1000px;--mesh-end:-505px;--mesh-bottom:-210px;--mesh-opacity:.85;--mesh-transform:rotate(27deg);--mesh-mask:radial-gradient(ellipse at 35% 60%,#000 15%,#000d 47%,transparent 76%)}
 #approach{--mesh-width:1020px;--mesh-height:990px;--mesh-start:-560px;--mesh-top:8%;--mesh-opacity:.85;--mesh-transform:rotate(-37deg);--mesh-mask:radial-gradient(ellipse at 65% 50%,#000 20%,#000c 47%,transparent 75%)}
 #platforms.platform-section{--mesh-width:1120px;--mesh-height:1140px;--mesh-end:-580px;--mesh-bottom:-80px;--mesh-opacity:.85;--mesh-transform:rotate(29deg);--mesh-mask:radial-gradient(ellipse at 32% 56%,#000 18%,#000d 48%,transparent 76%)}
 .understand-section{--mesh-width:1080px;--mesh-height:1100px;--mesh-start:-610px;--mesh-top:14%;--mesh-opacity:.85;--mesh-transform:rotate(-38deg);--mesh-mask:radial-gradient(ellipse at 66% 54%,#000 20%,#000d 47%,transparent 76%)}
 #questions.faq-section{--mesh-width:1080px;--mesh-height:930px;--mesh-start:-660px;--mesh-top:-50px;--mesh-opacity:.85;--mesh-transform:rotate(34deg);--mesh-mask:radial-gradient(ellipse at 68% 50%,#000 20%,#000b 45%,transparent 73%)}
 .download-strip{--mesh-width:1130px;--mesh-height:800px;--mesh-end:-520px;--mesh-top:-150px;--mesh-opacity:.88;--mesh-transform:rotate(-27deg);--mesh-mask:radial-gradient(ellipse at 35% 55%,#000 22%,#000d 48%,transparent 77%)}
 .production-coverage{--mesh-width:1000px;--mesh-height:calc(100% + 200px);--mesh-start:-490px;--mesh-top:-90px;--mesh-opacity:.68;--mesh-transform:rotate(-24deg)}
 .production-downloads{--mesh-width:1100px;--mesh-height:calc(100% + 160px);--mesh-end:-560px;--mesh-top:-60px;--mesh-opacity:.72;--mesh-transform:rotate(24deg)}
 .footer{--mesh-width:1000px;--mesh-height:calc(100% + 120px);--mesh-start:-470px;--mesh-top:-60px;--mesh-bottom:auto;--mesh-opacity:.67;--mesh-transform:rotate(13deg)}
 .demo-section .studio-stage::before{inset:-18% -68%;background-size:auto 100%;opacity:.38;transform:rotate(-8deg)}
}
@media(max-width:350px){
 .demo-section{--mesh-end:-540px}
 #approach{--mesh-start:-600px}
 #platforms.platform-section{--mesh-end:-630px}
 .understand-section{--mesh-start:-650px}
 #questions.faq-section{--mesh-start:-700px}
 .download-strip{--mesh-end:-580px}
 .footer{--mesh-start:-520px}
}
/* Soft reading windows keep point crests out of the actual words without
   cutting the broad wave into a card-sized decoration. No box edge is drawn. */
.studio-copy,#approach .source-answer,#platforms .dp-content,.understand-section .explain-result,#questions .faq-layout>div:first-child,#questions .faq-list{position:relative;isolation:isolate}
.studio-copy::after,#approach .source-answer::after,#platforms .dp-content::after,.understand-section .explain-result::after,#questions .faq-layout>div:first-child::after,#questions .faq-list::after{content:'';position:absolute;pointer-events:none;z-index:-1;inset:-24px -30px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--bg) 98%,transparent) 28%,color-mix(in srgb,var(--bg) 94.9%,transparent) 58%,color-mix(in srgb,var(--bg) 78.8%,transparent) 77%,transparent 99%)}
@media(max-width:760px){
 .studio-copy::after,#approach .source-answer::after,#platforms .dp-content::after,.understand-section .explain-result::after,#questions .faq-layout>div:first-child::after,#questions .faq-list::after{inset:-18px -26px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--bg) 99.2%,transparent) 30%,color-mix(in srgb,var(--bg) 96.8%,transparent) 62%,color-mix(in srgb,var(--bg) 81.2%,transparent) 80%,transparent 100%)}
}

/* Point positions deform inside each fixed canvas. The existing SVG stays
   visible until its local renderer is ready, and in reduced-motion mode. */
.chapter-point-canvas{
 position:absolute;z-index:-1;pointer-events:none;display:block;visibility:hidden;
 width:var(--mesh-width,1400px);height:var(--mesh-height,850px);
 inset-inline-start:var(--mesh-start,auto);inset-inline-end:var(--mesh-end,auto);
 top:var(--mesh-top,auto);bottom:var(--mesh-bottom,auto);
 opacity:var(--mesh-opacity,.85);transform:var(--mesh-transform,none);
 mask-image:var(--mesh-mask,radial-gradient(ellipse,#000 25%,#000e 48%,transparent 76%));
 -webkit-mask-image:var(--mesh-mask,radial-gradient(ellipse,#000 25%,#000e 48%,transparent 76%));
}
.chapter-field-ready::before{visibility:hidden}
.chapter-field-ready>.chapter-point-canvas{visibility:visible}
.demo-section .studio-stage>.chapter-point-canvas{
 inset:-18% -38%;width:176%;height:136%;opacity:.43;transform:rotate(-6deg);
 mask-image:radial-gradient(ellipse,#000 24%,#000b 55%,transparent 79%);
 -webkit-mask-image:radial-gradient(ellipse,#000 24%,#000b 55%,transparent 79%);
}
.about-page>.chapter-point-canvas{
 inset:-110px -18% auto;width:136%;height:650px;opacity:.4;
 transform:var(--mesh-transform,none);transform-origin:50% 20%;
 mask-image:linear-gradient(#0008 0%,#000b 30%,transparent 87%);
 -webkit-mask-image:linear-gradient(#0008 0%,#000b 30%,transparent 87%);
}
@media(max-width:760px){
 .demo-section .studio-stage>.chapter-point-canvas{inset:-18% -68%;width:236%;height:136%;opacity:.38;transform:rotate(-8deg)}
 .about-page>.chapter-point-canvas{inset:-30px -58% auto;width:216%;height:470px;opacity:.38;mask-image:linear-gradient(#0008,#0005 40%,transparent 87%);-webkit-mask-image:linear-gradient(#0008,#0005 40%,transparent 87%)}
}
.chapter-drift-static>.chapter-point-canvas{visibility:hidden}

/* Soft reading windows match the FAQ while leaving the waves visible around it. */
.production-coverage>.container>:is(h2,p),
.production-downloads>.container>:is(h1,h2,.download-intro),
.contact-intro,.contact-form{position:relative;isolation:isolate}
.production-coverage>.container>:is(h2,p)::after,
.production-downloads>.container>:is(h1,h2,.download-intro)::after,
.contact-intro::after,.contact-form::after{
 content:'';position:absolute;z-index:-1;pointer-events:none;inset:-18px -26px;
 background:radial-gradient(ellipse at center,color-mix(in srgb,var(--bg) 97%,transparent) 30%,color-mix(in srgb,var(--bg) 92%,transparent) 62%,color-mix(in srgb,var(--bg) 72%,transparent) 80%,transparent 100%);
}