/* Temporary interaction review; preserve the original render assets. */
#modes.story:not(.is-static){height:calc(200svh - var(--s4-nav,60px));margin-top:0}
#modes.story[data-scroll-mode="scrub"]:not(.is-static){height:calc(215svh - var(--s4-nav,60px))}
.feature-scroll-review{position:fixed;z-index:90;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:3px;padding:4px 5px;border:1px solid #cbd8ca;border-radius:24px;background:#fffffff2;box-shadow:0 3px 18px #183b2520;backdrop-filter:blur(8px);white-space:nowrap;font-family:inherit}
.feature-scroll-review[hidden]{display:none}
.feature-scroll-review>span{font-size:9px;letter-spacing:.09em;color:#768772;padding:0 7px}
.feature-scroll-review button{font-family:inherit;font-size:12px;line-height:1.2;font-weight:500;min-height:34px;padding:7px 12px;color:#52664f;border:0;background:transparent;border-radius:20px;cursor:pointer}
.feature-scroll-review button[aria-pressed="true"]{background:#e6eedf;color:#244b33}
.feature-scroll-review button:focus-visible{outline:2px solid #36734c;outline-offset:1px}
#modes #features .feature-tiles{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:0 0 6px;max-width:100%;touch-action:pan-x pan-y}
#modes #features .feature-tiles li{flex:1 0 58px;min-height:59px;font-size:11px;line-height:1.2;gap:6px;white-space:nowrap;padding-inline:4px;border-radius:9px}
#modes #features .feature-tiles svg{width:24px;height:24px}
#modes #features .feature-tiles:focus-visible{outline:2px solid #5f8b61;outline-offset:3px}
#modes #features .feature-options{margin-top:16px;padding-top:12px}
#modes:not(.is-static) .sticky{height:calc(100svh - var(--s4-nav,60px));top:var(--s4-nav,60px)}
.feature-flow-visual{display:none}
#modes[data-scroll-mode="flow"]:not(.is-static){height:auto;min-height:0}
#modes[data-scroll-mode="flow"]:not(.is-static) .sticky{position:relative;top:0;height:auto;overflow:visible}
#modes[data-scroll-mode="flow"]:not(.is-static) .visual{display:none}
#modes[data-scroll-mode="flow"]:not(.is-static) .copy-stack{position:relative;inset:auto;width:100%;max-width:none;display:block;transform:none;margin:0}
#modes[data-scroll-mode="flow"]:not(.is-static) .feature{position:relative;inset:auto!important;width:100%;max-width:none;min-height:calc(100svh - var(--s4-nav,60px));padding:48px 6% 64px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:4%;align-content:center;opacity:1!important;visibility:visible!important;transform:none}
#modes[data-scroll-mode="flow"]:not(.is-static) .feature>*{grid-column:1;min-width:0}
#modes[data-scroll-mode="flow"]:not(.is-static) .feature>.feature-still{display:none}
#modes[data-scroll-mode="flow"]:not(.is-static) .feature>.feature-flow-visual{display:block;position:relative;grid-column:2;grid-row:1/8;align-self:center;aspect-ratio:1;overflow:visible;min-width:0;width:100%;pointer-events:none}
#modes[data-scroll-mode="flow"] .feature-flow-visual>img{display:block;width:100%;height:100%;object-fit:contain}
#modes[data-scroll-mode="flow"] .feature-flow-visual>canvas{position:absolute;left:0;top:0;width:512px;height:512px;transform-origin:0 0;pointer-events:none}
#modes[data-scroll-mode="flow"]:not(.is-static) .feature-scroll-cue{display:none}
#modes.is-static .feature-flow-visual{display:none}
#control,#features,#rest-section,#locked-in-reports{scroll-margin-top:calc(var(--s4-nav,60px) + 16px)}
@media(min-width:1001px){#modes:not(.is-static):not([data-scroll-mode="flow"]) .copy-stack{top:9%;width:39%;max-width:560px;left:6%;transform:none}}
@media(max-width:1000px) and (max-aspect-ratio:1/1){
 #modes #features .feature-tiles li{flex-basis:68px;font-size:11px;min-height:53px}
 #modes[data-scroll-mode="flow"]:not(.is-static) .feature{display:flex;flex-direction:column;padding:28px 6% 64px;min-height:calc(100svh - var(--s4-nav,60px))}
 #modes[data-scroll-mode="flow"]:not(.is-static) .feature>.feature-flow-visual{order:10;width:min(100%,470px);height:auto;max-height:48svh;aspect-ratio:1;margin:16px auto 0}
 .feature-scroll-review button{min-height:36px;padding-inline:10px}
}
@media(max-height:550px) and (orientation:landscape){
 #modes #features .feature-tiles li{min-height:46px;flex-basis:62px}
 #modes[data-scroll-mode="flow"]:not(.is-static) .feature{padding-block:26px 64px;min-height:calc(100svh - var(--s4-nav,60px))}
}
@media(prefers-reduced-motion:reduce){#modes.story{height:auto}.feature-scroll-review{backdrop-filter:none}}

#modes:not(.is-static):not([data-scroll-mode="flow"]) .feature{transform:none}

@media(max-height:550px) and (orientation:landscape){#modes:not(.is-static):not([data-scroll-mode="flow"]) .copy-stack{top:20px;left:5%;width:43%;transform:none}.feature-scroll-review{left:auto;right:12px;transform:none}}

/* Coherent Page 3/4 hierarchy and all landscape widths, including laptop windows. */
#modes #features #productivity-title,#modes #rest-section>h2{font-size:clamp(32px,3.3vw,46px);line-height:1.05;letter-spacing:-.045em;font-weight:600;margin:0 0 16px;max-width:none;text-wrap:balance}
@media(min-width:1001px),(min-aspect-ratio:1001/1000){
 #modes:not(.is-static):not([data-scroll-mode="flow"]) .copy-stack{top:clamp(24px,7svh,64px);left:6%;width:40%;max-width:560px;transform:none}
}
@media(max-width:1000px) and (max-aspect-ratio:1/1){
 #modes #features #productivity-title,#modes #rest-section>h2{font-size:clamp(28px,7.7vw,36px);margin-bottom:14px}
}
@media(max-width:700px) and (orientation:portrait) and (min-height:700px){
 #modes #features .focus-mode{min-height:126px}
 #modes #features .focus-mode-copy strong{font-size:13px}
 #modes #features .focus-mode-copy>span{font-size:11px}
}
@media(max-height:550px) and (orientation:landscape){
 #modes #features #productivity-title,#modes #rest-section>h2{font-size:28px;margin-bottom:10px}
 #modes:not(.is-static):not([data-scroll-mode="flow"]) .copy-stack{top:20px;width:43%}
}
#rest-section .screen-previews canvas{max-height:none;max-width:100%;margin-inline:auto;aspect-ratio:720/1065;object-fit:contain}
@media(max-width:700px) and (max-height:740px){#rest-section .screen-previews canvas{width:min(100%,45px)}}
@media(max-height:550px) and (orientation:landscape){#rest-section .screen-previews canvas{width:min(100%,42px)}}

/* Selected Flow: editorial copy alongside a contained original device; natural mobile rows. */
#modes[data-scroll-mode="flow"]:not(.is-static) .feature{max-width:1440px;margin-inline:auto;column-gap:6%;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
#modes[data-scroll-mode="flow"]:not(.is-static) .feature>.feature-flow-visual{width:min(100%,620px);justify-self:center;max-height:74svh}
@media(max-width:1000px) and (max-aspect-ratio:1/1){
 #modes[data-scroll-mode="flow"]:not(.is-static) .feature{padding:36px 6% 44px;min-height:0}
 #modes[data-scroll-mode="flow"]:not(.is-static) .feature>.feature-flow-visual{width:min(100%,420px);max-height:none;margin:20px auto 0}
}

#modes[data-scroll-mode="flow"]:not(.is-static) .feature{align-content:start;padding-top:clamp(36px,7svh,64px)}
@media(max-width:1000px){#modes #features .feature-options:after{content:"Scroll across for more activities →";display:block;margin-top:5px;font-size:10px;line-height:1.4;color:#6c7e6c}}
@media(max-width:1000px) and (max-aspect-ratio:1/1){#modes[data-scroll-mode="flow"]:not(.is-static) #features>.feature-flow-visual{margin-top:-24px}}