/* Compact two-sided introduction, with a separate chapter divider. */
.setup-explainer{--banner-height:112px;min-height:calc(100svh - var(--s4-nav,60px) - var(--banner-height));padding:22px 5% 20px;box-sizing:border-box}
.setup-number{font-size:clamp(34px,3.7vw,48px);margin-bottom:10px}
.setup-side h3{font-size:clamp(18px,2vw,27px);min-height:0;line-height:1.2;white-space:nowrap;margin-bottom:12px}
.setup-description{font-size:14px;line-height:1.45;min-height:42px}
.setup-static,.setup-render{max-width:min(420px,calc(100svh - var(--s4-nav,60px) - 330px));margin-top:10px}
.back-feature-banner{height:auto;min-height:56px;padding-block:6px;margin-bottom:24px;box-sizing:border-box;background:#2e4939;color:#f1f4e9;display:flex;align-items:center;overflow:hidden;position:relative;isolation:isolate}
.back-banner-track{display:flex;flex:none;width:max-content;transform:translate3d(var(--banner-x,-400px),0,0);font-size:clamp(24px,2.8vw,38px);font-weight:500;letter-spacing:-.04em;line-height:1.15;white-space:nowrap}
.back-banner-track span{display:flex;align-items:center;gap:60px;padding-right:60px}.back-banner-track b{font-size:.55em;color:#a6c3a8;font-weight:400}
.back-feature-banner+.story:not(.is-static){margin-top:0!important}
/* Short landscape copy extends above its stage; keep the divider clear. */
@media(max-height:550px) and (min-width:701px){.back-feature-banner{margin-bottom:40px}}
.flow-awareness .color-key span{justify-content:center;text-align:center}
.hero-copy .explore-features{margin-top:58px}
@media(max-width:700px){
 .setup-explainer{--banner-height:88px;padding:14px 3% 20px}
 .setup-number{font-size:clamp(27px,8vw,32px);margin-bottom:9px}
 .setup-side h3{font-size:clamp(10.5px,3.15vw,16px);margin-bottom:8px;letter-spacing:-.04em}
 .setup-static,.setup-render{width:100%;max-width:none;height:min(62vw,calc(100svh - var(--s4-nav,60px) - 295px));min-height:155px;aspect-ratio:auto;margin:0}
 .setup-static img,.setup-render canvas,.setup-render .setup-poster{width:160%;height:auto}
 .setup-description{font-size:clamp(12px,3.5vw,14px);line-height:1.45;min-height:0;margin-top:10px}
 .back-feature-banner{min-height:56px}.back-banner-track{font-size:20px}.back-banner-track span{gap:35px;padding-right:35px}
 .inky-nav .inky-tagline{font-size:9px;line-height:1.3}
}
@media(max-width:1000px) and (max-aspect-ratio:1/1){
 .hero{grid-template-rows:auto minmax(0,1fr) auto!important;row-gap:12px}
 .hero>.explore-features{grid-row:3!important;margin-top:20px;align-self:end}
}
@media(max-height:650px) and (min-width:701px){.setup-explainer{padding-block:14px}.setup-number{font-size:31px}.setup-side h3{font-size:20px;margin-bottom:8px}.setup-description{font-size:12px;min-height:36px}.setup-static,.setup-render{max-width:200px;margin-top:4px}}
@media(prefers-reduced-motion:reduce){.back-banner-track{transform:translate3d(0,0,0)}}

/* Front-first copy and the existing sandbox, within the original panel footprint. */
.setup-panel-front{border-left:0}.setup-panel-back{border-left:1px solid #e1e8df}
.setup-front h3{font-size:clamp(16px,1.7vw,24px);height:calc(clamp(18px,2vw,27px)*1.2);display:flex;align-items:center;justify-content:center}
/* The former hero sequence now lives in the existing front-panel footprint. */
.setup-hero-render{isolation:isolate;touch-action:pan-y;cursor:default}
.setup-hero-render.sequence-ready .hero-poster{visibility:hidden}
.setup-hero-render canvas{pointer-events:none}
@media(max-width:700px){
 .setup-front{position:relative}.setup-front h3{font-size:clamp(8px,2.55vw,14px);height:calc(clamp(10.5px,3.15vw,16px)*1.2);letter-spacing:-.04em}
}
@media(max-height:650px) and (min-width:701px){.setup-front h3{font-size:16px;height:24px}}

/* Keep the two-line phone divider readable while it follows vertical scrolling. */
@media(max-width:700px){
 .back-feature-banner{justify-content:center;padding-inline:24px;box-sizing:border-box}
 .back-banner-track{width:100%;max-width:340px;transform:translate3d(var(--banner-x,0px),0,0);font-size:clamp(18px,4.65vw,20px);line-height:1.15;white-space:normal;text-align:center;letter-spacing:-.025em}
 .back-banner-track span{display:block;padding:0;text-wrap:balance}
 .back-banner-track span+span,.back-banner-track b{display:none}
}

@media(max-width:700px) and (prefers-reduced-motion:reduce){.back-banner-track{transform:none}}

/* Annotation only: no extra WebGL draw, media, or idle animation. */
.feature-button-ring{position:absolute;left:0;top:0;box-sizing:border-box;border:2.5px solid #75a45b;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.85);pointer-events:none;z-index:4;opacity:0}
.story.is-static .feature-button-ring{display:none}