/* Standard shell: 1240px / 1120px, 36 -> 18px gutters (aligns with every other page) */
:root{--container:1240px;--av-app-gutter:36px;--av-tech-gutter:36px}
@media(max-width:1320px){:root{--container:1120px;--av-app-gutter:30px;--av-tech-gutter:30px}}
@media(max-width:420px){:root{--av-app-gutter:18px;--av-tech-gutter:18px}}
.story-section__inner,.flow-section__inner{padding-inline:0}
.gs-final-cta{margin-top:clamp(56px,7.4vw,128px)}
.resources{grid-template-columns:4fr 8fr;grid-template-areas:"docs related"}
@media(max-width:900px){.resources{grid-template-columns:1fr;grid-template-areas:"related" "docs"}}

/* Unified full-bleed hero: breadcrumbs and product hero share one band edge to edge */
#page-root .hero{width:100%;max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;background:linear-gradient(180deg,#fff 0%,#f3f8ff 100%);overflow:hidden;padding-inline:max(var(--av-app-gutter),calc((100% - var(--container)) / 2))}
#page-root .hero .breadcrumbs{grid-column:1/-1;padding-top:6px;min-height:0}
#page-root .product-tabs{margin-top:18px}
#page-root .hero{min-height:0;padding-top:12px;padding-bottom:28px;row-gap:0}
#page-root .hero .breadcrumbs{padding-top:0;margin-bottom:6px}
@media(max-width:1040px){#page-root .hero{padding-top:12px;padding-bottom:24px}}

/* Hero CTA: standard placement (64px under the paragraph) and size */
#page-root .hero .hero-actions{margin-top:64px}
#page-root .hero .hero-actions .button{min-height:54px;padding-inline:26px;border-radius:8px;border:1.5px solid #2382ff;background:#1174f6;color:#fff;box-shadow:0 8px 18px rgba(13,104,235,.22)}
@media(max-width:1040px){#page-root .hero .hero-actions{margin-top:32px}}

/* Hero image: full-band, extends toward the copy, soft edges on the text side and top/bottom */
#page-root .hero{position:relative}
#page-root .hero:before,#page-root .hero:after{display:none}
#page-root .hero .hero-media{position:absolute;left:0;top:0;bottom:0;width:62%;display:block;z-index:0;grid-column:auto;pointer-events:none}
#page-root .hero .hero-media img{position:absolute;left:12.5vw;top:-2%;width:auto;height:104%;max-width:none;max-height:none;object-fit:contain;filter:none;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent 100%);mask-composite:intersect}
#page-root .hero .hero-copy{position:relative;z-index:2;grid-column:1/-1;max-width:600px;margin-inline-start:0}
#page-root .hero{min-height:470px;align-content:center}
@media(min-width:1041px){#page-root .hero{min-height:500px}}
@media(max-width:1040px){
  #page-root .hero .hero-media{position:relative;left:auto;top:auto;bottom:auto;width:100%;order:2;margin-top:8px}
  #page-root .hero .hero-media img{position:relative;left:auto;top:auto;width:100%;height:auto;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 100%);-webkit-mask-composite:source-over;mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 100%);mask-composite:add}
  #page-root .hero{min-height:0}
}
#page-root .hero{align-content:stretch;grid-template-rows:auto 1fr}
#page-root .hero .hero-copy{align-self:center}
@media(max-width:1040px){#page-root .hero{grid-template-rows:none}}
@media(min-width:1041px){#page-root .hero .hero-intro{max-width:500px}}

/* Hero backdrop: faint isometric grid and soft rings, echoing the 3D building illustration */
#page-root .hero{isolation:isolate}
#page-root .hero:before{display:block;content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:0;border-radius:0;width:auto;height:auto;left:0;top:0;transform:none;background:repeating-linear-gradient(30deg,transparent 0 46px,rgba(32,107,238,.06) 46px 47px),repeating-linear-gradient(150deg,transparent 0 46px,rgba(32,107,238,.06) 46px 47px),repeating-radial-gradient(ellipse 46% 34% at 36% 54%,transparent 0 70px,rgba(32,107,238,.07) 70px 71px);-webkit-mask-image:radial-gradient(ellipse 75% 95% at 38% 55%,#000 0,rgba(0,0,0,.6) 55%,transparent 100%);mask-image:radial-gradient(ellipse 75% 95% at 38% 55%,#000 0,rgba(0,0,0,.6) 55%,transparent 100%)}
@media(max-width:1040px){#page-root .hero:before{background:repeating-linear-gradient(30deg,transparent 0 38px,rgba(32,107,238,.06) 38px 39px),repeating-linear-gradient(150deg,transparent 0 38px,rgba(32,107,238,.06) 38px 39px);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40%,#000 100%);mask-image:linear-gradient(180deg,transparent 0,#000 40%,#000 100%)}}
