/* Approved centered hero and chapter-bounded navigation. */
:root body.cohesive-site.modern-layout.component-experience .shared-hero {
 position:relative;isolation:isolate;width:calc(100% - 96px);max-width:1080px;
 grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;
 padding-block:96px 64px;margin-inline:auto;
}
:root body.cohesive-site.modern-layout.component-experience .shared-hero > .hero-intro {position:relative;z-index:1;max-width:480px;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero > .development-world {position:relative;z-index:1;max-width:480px;justify-self:end;align-self:center;width:100%;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero h1 {font-size:clamp(40px,4.5vw,60px);max-width:16ch;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .slide-explanation {padding-inline:20px;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .toolkit-preview-controls {padding-inline:20px;}
/* The rail is naturally bounded by its three chapters, not the entire main. */
.toolkit-chapters {display:flex;flex-direction:column;gap:40px;position:relative;padding-block-end:0;}
:root body.cohesive-site.modern-layout.component-experience .toolkit-chapters > :is(.toolkit-overview,.component-section) {margin-block:0!important;flex:none;}
:root body.cohesive-site.modern-layout.component-experience .toolkit-overview {border-radius:0;}
:root body.cohesive-site.modern-layout.component-experience .toolkit-overview::before {border-radius:0;}
:root body.cohesive-site.modern-layout.component-experience .toolkit-overview a {border-radius:0;}
:root body.cohesive-site.modern-layout.component-experience .toolkit-overview {padding:4px;gap:4px;}
:root body.cohesive-site.modern-layout.component-experience .toolkit-overview::before {inset:0;}
:root body.cohesive-site.modern-layout.component-experience .toolkit-overview a {min-height:44px;}
@media(max-width:900px){
 :root body.cohesive-site.modern-layout.component-experience .shared-hero {width:calc(100% - 64px);max-width:640px;grid-template-columns:minmax(0,1fr);gap:24px;padding-block:56px 40px;}
 :root body.cohesive-site.modern-layout.component-experience .shared-hero > .hero-intro {max-width:100%;}
 :root body.cohesive-site.modern-layout.component-experience .shared-hero > .development-world {max-width:480px;justify-self:center;}
 :root body.cohesive-site.modern-layout.component-experience .shared-hero .slide-explanation,
 :root body.cohesive-site.modern-layout.component-experience .shared-hero .toolkit-preview-controls {padding-inline:0;}
}
@media(max-width:640px){
 :root body.cohesive-site.modern-layout.component-experience .shared-hero {width:calc(100% - 40px);padding-block:48px 40px; padding-inline:0;gap:20px;}
 :root body.cohesive-site.modern-layout.component-experience .shared-hero h1 {font-size:40px;max-width:17ch;}
 .toolkit-chapters {gap:24px;}
}
@media(forced-colors:active){.shared-hero::before,.shared-hero::after{display:none;}}
/* One explicit horizontal frame for the visible art, caption and step buttons. */
:root body.cohesive-site.modern-layout.component-experience .shared-hero > .development-world {max-width:400px;justify-self:start;align-self:start;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .component-illustration {width:100%;max-width:none;height:var(--hero-art-height,428px);aspect-ratio:auto;margin-block-start:var(--hero-art-offset,0px);overflow:clip;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .slide-explanation {width:100%;padding-inline:0;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .toolkit-preview-slide {gap:24px;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .toolkit-preview-controls {width:100%;padding-inline:0;display:flex;flex-wrap:nowrap;justify-content:center;gap:4px;padding-block-start:12px;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .toolkit-preview-controls > button {width:44px;min-width:44px;height:44px;min-height:44px;flex:0 0 44px;padding:0;background:transparent;color:var(--text-secondary);border-radius:50%;}
@media(min-width:901px){
 :root body.cohesive-site.modern-layout.component-experience .shared-hero {align-items:start;padding-block-start:96px;}
}
@media(max-width:900px){
 :root body.cohesive-site.modern-layout.component-experience .shared-hero > .development-world {justify-self:center;}
}

/* Flowing texture field. Original artwork is not modified. */
.shared-hero::before,.shared-hero::after{display:none;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero > .hero-intro{max-width:520px;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero h1{font-size:56px;line-height:64px;letter-spacing:-2.3px;max-width:520px;}
.shared-hero h1 .hero-title-line{display:block;}
.hero-workspace-background{position:absolute;inset-block-start:16px;inset-block-end:0;inset-inline-start:-68px;inset-inline-end:-40px;aspect-ratio:auto;z-index:0;pointer-events:none;background-size:1188px 616px;background-position:center top;background-repeat:no-repeat;}
[dir="rtl"] .hero-workspace-background{transform:scaleX(-1);}
.hero-workspace-background{background-image:url("/toolkit-art/hero-texture-light.svg");}
[data-theme="dark"] .hero-workspace-background{background-image:url("/toolkit-art/hero-texture-dark.svg");}
@media(max-width:900px){.hero-workspace-background{inset:12px -16px 12px;aspect-ratio:auto;}}
@media(max-width:640px){
 .hero-workspace-background{inset:4px -10px 12px;opacity:.8;}
 :root body.cohesive-site.modern-layout.component-experience .shared-hero h1{font-size:35px;line-height:43px;letter-spacing:-.8px;max-width:100%;}
}
@media(forced-colors:active){.hero-workspace-background{display:none;}}

/* Preserve optical bounds with or without the enhancement script. Long translated
   controls wrap inside their own segment rather than crossing adjacent edges. */
:root body.cohesive-site.modern-layout.component-experience .shared-hero .component-illustration{height:var(--hero-art-height,auto);aspect-ratio:905/968;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .toolkit-preview-controls > button{overflow-wrap:anywhere;}
/* Visibility changes preserve the rail's reserved space and the chapter heights. */
:root body.cohesive-site.component-experience .toolkit-overview[data-outside-chapters="true"]{visibility:hidden;pointer-events:none;}
@media(max-width:900px){
 /* Native-size marks keep their circular/square geometry on the stacked hero.
    The transparent field repeats vertically, with a soft horizontal edge. */
 .hero-workspace-background{background-size:1188px 616px;background-position:center top;background-repeat:repeat-y;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);}
}

/* Root scroll padding already reserves space. Subtract it from these target
   margins, and override legacy ID rules that otherwise add another160px. */
:root body.cohesive-site.component-experience #how-it-works{scroll-margin-top:calc(var(--component-nav-top) + 16px - var(--component-scroll-padding,100px));}
:root body.cohesive-site.component-experience :is(.component-section,.anchor-alias,.simulation-scenarios,#data-collection,#simulated-entities,#monitoring-improvement,#workflow-extraction,#time-savings){scroll-margin-top:calc(var(--component-anchor-offset) - var(--component-scroll-padding,100px));}
@media(max-width:640px){.component-experience{--component-scroll-padding:82px;}}

/* The stacked hero shares one centerline, without centering the copy itself. */
@media(max-width:900px){
 :root body.cohesive-site.modern-layout.component-experience .shared-hero>.hero-intro{width:100%;justify-self:center}
}

/* Narrow only the carousel contents; keep its outer column, texture and type. */
:root body.cohesive-site.modern-layout.component-experience .shared-hero :is(.component-illustration,.slide-explanation,.toolkit-preview-controls){width:70%;margin-inline:auto;}
/* Three compact caption lines, with room for every translated description. */
:root body.cohesive-site.modern-layout.component-experience .shared-hero .slide-explanation{width:100%;text-align:center;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .slide-explanation h3{font-size:20px;line-height:1.25;margin:0 0 4px;text-wrap:wrap;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .slide-explanation p{font-size:14px;line-height:1.4;margin:0 0 6px;max-width:none;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .slide-explanation .text-link{font-size:13px;line-height:1.5;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .toolkit-preview-controls{padding-block-start:4px;}

/* Align optical image edges, not transparent source canvases. Reserve only
   the current slide envelope, not the obsolete full-width artwork stage. */
:root body.cohesive-site.modern-layout.component-experience .shared-hero > .development-world{align-items:flex-start;min-height:0;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .toolkit-preview-window{min-height:var(--hero-preview-height,0px);}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .component-illustration{height:auto;aspect-ratio:6/5;animation:none;}
:root[data-theme="dark"] body.cohesive-site.modern-layout.component-experience .shared-hero .component-illustration{aspect-ratio:6/5;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .toolkit-preview-slide{gap:16px;animation-name:hero-content-reveal;}
@keyframes hero-content-reveal{from{opacity:0}to{opacity:1}}

/* Selection changes color, not text metrics or the reserved carousel height. */
:root body.cohesive-site.modern-layout.component-experience .shared-hero .toolkit-preview-controls > [data-preview-index]{font-weight:600;}

/* Compact points, with full-sized touch targets and localized hidden labels. */
:root body.cohesive-site.modern-layout.component-experience .shared-hero .toolkit-preview-controls > button:is(:hover,[aria-pressed="true"]){background:transparent;color:var(--text);}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .toolkit-preview-controls > button:focus-visible{outline:2px solid var(--text);outline-offset:-5px;}
.carousel-dot{display:block;width:8px;height:8px;border:0;border-radius:50%;background:currentColor;}
[aria-pressed="true"]>.carousel-dot{width:10px;height:10px;background:var(--accent);}
@media(forced-colors:active){
 .carousel-dot{border-color:ButtonText;}
 [aria-pressed="true"]>.carousel-dot{background:Highlight;border-color:Highlight;forced-color-adjust:none;}
}


/* Balance the title naturally, with one shared left edge for the copy and CTAs. */
:root body.cohesive-site.modern-layout.component-experience .shared-hero > .hero-intro{text-align:left;justify-self:start;align-items:flex-start;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero :is(h1,.hero-description){text-align:left;margin-inline:0;text-wrap:balance;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .actions{justify-content:flex-start;align-self:flex-start;margin-inline:0;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .slide-explanation{text-align:center;padding-inline:0;}
@media(min-width:901px){
 :root body.cohesive-site.modern-layout.component-experience .shared-hero:lang(en){grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);}
 :root body.cohesive-site.modern-layout.component-experience .shared-hero:lang(en) > .hero-intro{max-width:620px;}
 :root body.cohesive-site.modern-layout.component-experience .shared-hero:lang(en) h1{max-width:620px;}
 :root body.cohesive-site.modern-layout.component-experience .shared-hero > .development-world{justify-self:center;}
}
/* Preserve native Hebrew reading alignment. */
:root body.cohesive-site.modern-layout.component-experience .shared-hero:lang(he) :is(.hero-intro,h1,.hero-description,.slide-explanation){text-align:right;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero .toolkit-preview-controls > button{border:0;box-shadow:none;}

/* Give the headline breathing room without scaling the background artwork. */
:root body.cohesive-site.modern-layout.component-experience .shared-hero h1{margin-block:0 40px;}
@media(max-width:900px){
 :root body.cohesive-site.modern-layout.component-experience .shared-hero h1{margin-block-end:32px;}
}

/* Keep texture within the carousel, clear of the headline and action buttons. */
.hero-workspace-background{display:none;}
:root body.cohesive-site .shared-hero > .development-world::before,
:root body.cohesive-site .closing::before {
 content:"";position:absolute;inset:0;pointer-events:none;
 background-image:url("/toolkit-art/hero-texture-light.svg");
 background-size:1188px 616px;background-position:center;background-repeat:no-repeat;
}
:root body.cohesive-site .shared-hero > .development-world::before {
 z-index:-1;mask-image:linear-gradient(transparent,#000 12%,#000 80%,transparent);
}
:root body.cohesive-site .closing::before{z-index:0;opacity:.65;}
:root[data-theme="dark"] body.cohesive-site .shared-hero > .development-world::before,
:root[data-theme="dark"] body.cohesive-site .closing::before {
 background-image:url("/toolkit-art/hero-texture-dark.svg");
}
@media(forced-colors:active){
 :root body.cohesive-site .shared-hero > .development-world::before,
 :root body.cohesive-site .closing::before{display:none;}
}

/* Match the financial-services headline scale and weight. */
:root body.cohesive-site.modern-layout.component-experience .shared-hero h1{font-size:clamp(38px,4vw,55px);line-height:1.15;letter-spacing:-1.8px;font-weight:750;}
@media(max-width:760px){
 :root body.cohesive-site.modern-layout.component-experience .shared-hero h1{font-size:38px;letter-spacing:-1.2px;}
}
:root body.cohesive-site.modern-layout.component-experience .shared-hero:lang(he) h1{letter-spacing:-.8px;}

/* Keep the performance phrase intact, including on narrow screens. */
:root body.cohesive-site.modern-layout.component-experience .shared-hero:lang(en) .hero-intro{width:100%;min-width:0;container-type:inline-size;}
:root body.cohesive-site.modern-layout.component-experience .shared-hero:lang(en) h1{font-size:clamp(24px,8.7cqi,55px);text-wrap:wrap;}
.shared-hero h1 .hero-title-phrase{white-space:nowrap;}