/* A rising brand gesture frames the closed parcel; the shared header gradient stays continuous. */
/* Extend the decorative edge into the strip without changing its layout height. */
body{--hero-edge-height:60px;--hero-edge-overlap:18px}
body::before{height:calc(var(--intro-canvas-height,0px) + var(--hero-edge-overlap))}
.module-story{isolation:isolate}
.hero-art{position:absolute;inset:0 0 auto;height:var(--hero-art-height,100%);overflow:hidden;pointer-events:none;z-index:-1;transition:opacity 650ms ease}
.hero-growth{position:absolute;width:min(77vw,1330px);height:100%;right:calc(-1% - clamp(0px,calc(30vw - 432px),123px));top:4%;overflow:visible}
.hero-edge{position:absolute;bottom:calc(-1 * var(--hero-edge-overlap));left:0;width:100%;height:var(--hero-edge-height);pointer-events:none;z-index:-1}
.module-story+.technology{background:linear-gradient(to bottom,transparent var(--hero-edge-overlap),#fff var(--hero-edge-overlap),#F5FAFD 70%,#EDF6FA 100%)}
.technology+.customer-cloud{margin-top:0}
.technology+.customer-cloud .customer-cloud-inner{padding-top:26px;padding-bottom:26px}
/* The scene keeps its framing while the gallery space grows along the opening timeline. */
.module-story-heading{display:grid;grid-template-columns:1fr;--hero-heading-offset:92px}
.module-story-heading :is(h1,h2){grid-area:1/1;margin:0;color:#fff;font-size:clamp(42px,4.05vw,68px);font-weight:550;line-height:1.07;letter-spacing:-.05em;transition:font-size 350ms ease}
.hero-presentation,.module-story-heading .module-story-summary{grid-area:2/1;align-self:start;transition:opacity 200ms ease}
.module-story-heading .module-story-intro{margin-top:27px;color:#C0DEEA;font-size:16px;font-weight:400;line-height:1.7;letter-spacing:0}
.module-story-heading .module-story-summary{opacity:0;visibility:hidden;margin-top:12px;color:#BEDAE6;font-size:13px}
.box-open-label{bottom:-52px;left:55%;display:inline-flex;align-items:center;justify-content:center;gap:11px;min-height:44px;padding:6px 10px;border:0;border-radius:0;background:transparent;color:#EDF6FA;font-size:14px;font-weight:500;line-height:1.4;box-shadow:none;transition:color 180ms ease}
.box-open-label>svg{width:23px;height:23px;flex:none;transition:transform 180ms ease}
.box-open:hover .box-open-label,.box-open:focus-visible .box-open-label{background:transparent;border:0;color:#FFADB4;box-shadow:none}
.box-open:hover .box-open-label>svg,.box-open:focus-visible .box-open-label>svg{transform:rotate(90deg)}
.module-board{scroll-margin-top:calc(var(--story-top,108px) + 18px)}
@media(min-width:981px){
 .module-story-stage{min-height:0;padding:22px 0 38px}
 .module-story-heading{position:absolute;left:0;top:22px;width:43%;margin:0}
 .module-board{height:clamp(460px,calc(100svh - 380px),590px)}
 .module-gallery{top:150px}
 .module-story .module-story-footer{margin-top:calc(18px + var(--reveal-space,0px))}
 .is-opening .hero-presentation,.gallery-ready .hero-presentation{opacity:0;visibility:hidden;pointer-events:none}
 .is-opening .hero-title-break,.gallery-ready .hero-title-break{display:none}
 .is-opening .module-story-heading :is(h1,h2),.gallery-ready .module-story-heading :is(h1,h2){font-size:clamp(30px,2.6vw,40px);line-height:1.15;letter-spacing:-.045em}
 .is-opening .module-story-summary,.gallery-ready .module-story-summary{opacity:1;visibility:visible}
}
@media(min-width:981px) and (max-width:1250px){
 .module-story-heading{--hero-heading-offset:76px}
 .module-story-heading .module-story-intro{font-size:14px}
}
@media(max-width:980px){
 .module-story-stage{padding:26px 0 58px}
 .module-story-heading{width:100%;margin:0 0 12px}
 .module-story-heading :is(h1,h2){font-size:clamp(38px,6.2vw,52px);transition:none}
 .module-story-heading .module-story-intro{margin-top:20px;font-size:14px}
 .module-story-intro br{display:none}
 .hero-growth{width:1050px;height:680px;top:70px;right:-440px;opacity:.8}
 body{--hero-edge-height:40px;--hero-edge-overlap:11.5px}
 .module-story-footer{margin-top:22px}
 .box-open-label{left:50%}
}
@media(max-width:480px){
 .module-story-heading :is(h1,h2){font-size:clamp(36px,10.2vw,42px)}
 .hero-growth{width:810px;height:520px;right:-380px;top:160px}
 .hero-edge{width:100%;left:0}
 .box-open-label{bottom:-50px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.hero-art,.module-story-heading :is(h1,h2),.hero-presentation,.box-open-label,.box-open-label>svg{transition:none}}

/* The parcel is the center of a three-part introduction. */
.hero-support{color:#C0DEEA;pointer-events:none;transition:opacity 350ms ease,transform 450ms ease,visibility 0s linear 350ms}
.hero-support h2{color:#fff;font-family:Manrope,Inter,sans-serif;font-size:clamp(22px,1.7vw,30px);font-weight:500;line-height:1.3;letter-spacing:-.035em;margin:0}
.hero-support p{font-size:15px;line-height:1.75;margin-top:20px;max-width:290px}
.is-opening .hero-support,.gallery-ready .hero-support{opacity:0;visibility:hidden;transform:translateX(16px)}
@media(min-width:981px){
 .module-story-heading{width:25%;--hero-heading-offset:100px}
 .module-story-heading :is(h1,h2){font-size:clamp(34px,3.1vw,54px)}
 .hero-support{position:absolute;right:0;top:calc(22px + 100px);width:23%;z-index:4}
 .module-story-heading .module-story-intro{font-size:15px;max-width:270px}
 .box-open-label{left:50%}
 .hero-presentation{transition:opacity 350ms ease,visibility 0s linear 350ms}
 .is-opening .module-story-heading,.gallery-ready .module-story-heading{width:100%}
}
@media(min-width:981px) and (max-width:1250px){
 .module-story-heading{--hero-heading-offset:100px;width:25%}
 .module-story-heading :is(h1,h2){font-size:34px}
 .hero-support h2{font-size:23px}.hero-support p{font-size:14px}
 .module-story-heading .module-story-intro{font-size:14px}
}
@media(max-width:980px){
 .hero-support{position:relative;margin:0 0 8px;max-width:580px}
 .hero-support h2{font-size:20px}.hero-support h2 br{display:none}
 .hero-support p{display:none}
 .module-story-heading .module-story-intro{margin-top:16px}
 .is-opening .hero-support,.gallery-ready .hero-support{display:none}
 .is-opening .hero-presentation,.gallery-ready .hero-presentation{display:none}
 .is-opening .module-story-summary,.gallery-ready .module-story-summary{opacity:1;visibility:visible}
}
@media(prefers-reduced-motion:reduce){.hero-support,.hero-presentation{transition:none}}

/* Shipping-label typography and a compact contents manifest. */
.hero-open-title{display:none}.hero-label-title{display:block}
.hero-label-title small,.hero-label-caption,.hero-task-number,.hero-label-bottom{font-family:Inter,Arial,sans-serif;font-weight:500;letter-spacing:.13em;font-size:10px;line-height:1.5;color:#A7D1E3}
.hero-label-title small{display:block;margin-bottom:20px;letter-spacing:.16em}
.hero-title-dot{color:#FF7885}
.hero-destination{margin-top:28px;padding-top:13px;border-top:1px solid #8CC9E65C;max-width:290px}
.hero-destination ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.hero-destination li{font-size:15px;color:#EDF6FA;line-height:1.5}.hero-destination li>span{display:inline-block;width:28px;font-size:10px;color:#FF96A0;letter-spacing:.06em}
.hero-label-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #8CC9E63D;margin-top:17px;padding-top:13px;font-size:8px;letter-spacing:.1em}.hero-label-bottom svg{width:78px;height:16px;color:#8CC9E6;opacity:.7}
.hero-support h2{margin-top:12px;font-size:clamp(24px,1.85vw,32px)}
.hero-contents{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:0}
.hero-contents li{position:relative;display:flex;align-items:center;gap:14px;padding:17px 0;border-top:1px solid #8CC9E63D}
.hero-contents li::before{content:'';position:absolute;width:40px;height:1px;right:calc(100% + 14px);top:50%;background:linear-gradient(90deg,#FF788500,#FF788599)}
.hero-contents li::after{content:'';position:absolute;width:4px;height:4px;border-radius:50%;right:calc(100% + 12px);top:calc(50% - 1.5px);background:#FF7885}
.hero-task-art{width:46px;height:46px;flex:none}.hero-contents li>div{display:flex;flex-direction:column;gap:4px;min-width:0}.hero-contents strong{font-family:Manrope,Inter,sans-serif;font-weight:550;font-size:17px;letter-spacing:-.025em;color:#fff;line-height:1.3}.hero-contents div>span:last-child{color:#B9D9E7;font-size:11px;line-height:1.6}.hero-task-number{font-size:8px;letter-spacing:.1em}
.is-opening .hero-label-title,.gallery-ready .hero-label-title{display:none}.is-opening .hero-open-title,.gallery-ready .hero-open-title{display:block}
@media(min-width:981px){.module-story-heading{--hero-heading-offset:62px}.module-story-heading :is(h1,h2){font-size:clamp(32px,2.6vw,46px);line-height:1.12}.hero-support{top:84px;width:23%}.module-story-heading .hero-presentation{transition:opacity 350ms ease,visibility 0s linear 350ms}}
@media(min-width:981px) and (max-width:1250px){.module-story-heading{--hero-heading-offset:62px}.module-story-heading :is(h1,h2){font-size:31px}.hero-support h2{font-size:24px}.hero-task-art{width:34px;height:38px}.hero-contents li{gap:9px}.hero-contents strong{font-size:15px}.hero-contents li::before{width:20px;right:calc(100% + 8px)}.hero-contents li::after{right:calc(100% + 6px)}}
@media(max-width:980px){.hero-label-title small{margin-bottom:14px}.hero-label-title br{display:none}.hero-destination{max-width:none;margin-top:20px;padding-top:10px}.hero-destination ul{flex-direction:row;flex-wrap:wrap;gap:8px 16px}.hero-destination li{font-size:13px}.hero-destination li>span{width:auto;margin-right:5px}.hero-label-bottom{display:none}.hero-support{display:none}.module-story-heading :is(h1,h2){font-size:clamp(33px,5.4vw,45px)}.box-open-label{font-size:12px}}

.hero-continue{color:#B9D9E7;font-size:11px;text-decoration:none;display:inline-flex;gap:12px;align-items:center;min-height:32px}.hero-continue span{color:#FF96A0;font-size:17px}.hero-continue:hover{color:#fff}
.module-story:not(.gallery-ready) .module-hint:empty{display:none}
.is-opening .hero-continue,.gallery-ready .hero-continue{display:none}

/* More breathing room below the parcel action, without enlarging the scene. */
@media(min-width:981px){.module-story-stage{padding-bottom:94px}}
@media(max-width:980px){.module-story-stage{padding-bottom:82px}}

/* A coral illustrated opening gives the module catalog its own visual identity. */
.module-banner-art{display:none;pointer-events:none}
.hero-open-title small{display:block;font-family:Inter,Arial,sans-serif;font-size:9px;font-weight:600;letter-spacing:.13em;line-height:1.5;margin-bottom:10px;color:#17394B}
.catalog-dot{color:#FFF2EA}
@media(min-width:981px){
 .is-opening .module-story-heading,.gallery-ready .module-story-heading{display:block;box-sizing:border-box;height:132px;padding:22px 30px;background:#FF7680;border-radius:22px 22px 56px 22px;overflow:hidden}
 .is-opening .module-story-heading :is(h1,h2),.gallery-ready .module-story-heading :is(h1,h2){font-size:clamp(29px,2.45vw,42px);line-height:1.1;max-width:68%;color:#123246;position:relative;z-index:1}
 .module-story-heading .module-story-summary{position:absolute;left:30px;top:99px;grid-area:auto;margin:0;font-size:12px;line-height:1.5;color:#17394B;max-width:62%;z-index:1}
 .is-opening .module-banner-art,.gallery-ready .module-banner-art{display:block;position:absolute;right:28px;top:-3px;width:35%;height:139px}
}
@media(min-width:981px) and (max-width:1250px){.is-opening .module-story-heading,.gallery-ready .module-story-heading{padding-left:22px}.module-story-heading .module-story-summary{left:22px;font-size:10px}.module-banner-art{right:12px!important;width:32%!important}}
@media(max-width:980px){
 .is-opening .module-story-heading,.gallery-ready .module-story-heading{display:block;box-sizing:border-box;padding:20px;background:#FF7680;border-radius:20px 20px 38px 20px;margin-bottom:20px;overflow:hidden}
 .is-opening .module-story-heading :is(h1,h2),.gallery-ready .module-story-heading :is(h1,h2){font-size:30px;line-height:1.1;color:#123246}
 .module-story-heading .module-story-summary{display:none}
 .is-opening .module-banner-art,.gallery-ready .module-banner-art{display:block;width:210px;height:72px;margin:14px 0 -13px auto}
 .hero-open-title small{font-size:8px;letter-spacing:.09em}
}

/* Softer coral, ink typography and room for the illustration. */
.is-opening .module-story-heading,.gallery-ready .module-story-heading{background:linear-gradient(110deg,#F4A1A5 0%,#F18F98 60%,#E88B97 100%);border:1px solid #F8C5C530;box-shadow:0 12px 30px #041C2B12}
.hero-open-title small{letter-spacing:.17em;font-weight:500;color:#27485A}
.catalog-dot{color:#123246}
.module-banner-art{opacity:.9}
@media(min-width:981px){
 .is-opening .module-story-heading,.gallery-ready .module-story-heading{height:132px;padding:24px 32px;border-radius:20px 20px 42px 20px}
 .is-opening .module-story-heading :is(h1,h2),.gallery-ready .module-story-heading :is(h1,h2){font-size:clamp(29px,2.2vw,38px);font-weight:550;letter-spacing:-.045em}
 .module-story-heading .module-story-summary{left:32px;top:96px;color:#27485A;font-size:12px}
 .is-opening .module-banner-art,.gallery-ready .module-banner-art{top:10px;right:38px;width:33%;height:112px}
}
@media(min-width:981px) and (max-width:1250px){.is-opening .module-story-heading,.gallery-ready .module-story-heading{padding-left:24px}.module-story-heading .module-story-summary{left:24px;max-width:60%;font-size:10px}.is-opening .module-banner-art,.gallery-ready .module-banner-art{right:20px!important}}
@media(max-width:980px){
 .is-opening .module-story-heading,.gallery-ready .module-story-heading{padding:22px;border-radius:20px 20px 34px 20px}
 .is-opening .module-story-heading :is(h1,h2),.gallery-ready .module-story-heading :is(h1,h2){font-size:28px;font-weight:550;letter-spacing:-.045em}
 .is-opening .module-banner-art,.gallery-ready .module-banner-art{width:205px;height:70px;margin:17px 0 -8px auto}
}

/* Brand blue; the timeline reveals a fixed top panel from its center outward. */
.is-opening .module-story-heading,.gallery-ready .module-story-heading{background:#2D8FC4;border-color:#8DD0EE40;box-shadow:0 10px 26px #041C2B12;transform-origin:50% 0;transition:none}
.is-opening .module-story-heading :is(h1,h2),.gallery-ready .module-story-heading :is(h1,h2){color:#fff}
.hero-open-title small{color:#DBF0FA}.catalog-dot{color:#FFC0C6}
.is-opening .module-story-heading .module-story-summary,.gallery-ready .module-story-heading .module-story-summary{color:#E4F4FB}
.is-opening .module-story-heading>h1,.is-opening .module-story-summary,.is-opening .module-banner-art{opacity:var(--banner-content,0)!important;transition:none!important}
.gallery-ready .module-banner-art{opacity:1}
@media(prefers-reduced-motion:reduce){.module-story-heading{clip-path:none!important}}

/* Let the question and illustrations lead, with fewer label rules. */
.hero-support h2{font-size:clamp(30px,2.45vw,42px);line-height:1.13;margin-top:0;font-weight:550;letter-spacing:-.045em}
.hero-box-emphasis{color:#FF5262}
.hero-contents{margin-top:27px;gap:12px}.hero-contents li{border-top:0;padding:10px 0}
.hero-destination{border-top:0;padding-top:0;margin-top:26px}
.hero-destination ul{gap:10px;margin:0}
.hero-destination li{display:flex;align-items:center;gap:11px;font-size:15px}
.hero-destination li::before{content:'';width:5px;height:5px;background:#FF7885;border-radius:50%;flex:none}
.hero-label-bottom{border-top:0;margin-top:24px;padding-top:0}
@media(min-width:981px) and (max-width:1250px){.hero-support h2{font-size:31px}.hero-contents{gap:8px}}
@media(max-width:980px){.hero-destination{margin-top:20px}.hero-destination ul{gap:9px 17px}.hero-destination li{font-size:13px;gap:7px}}

/* A connected operation, with the question acting as another way to open the parcel. */
.hero-question{font:inherit;letter-spacing:inherit;line-height:inherit;color:inherit;padding:0;margin:0;text-align:left;pointer-events:auto;cursor:pointer}
.hero-question:focus-visible{outline:2px solid #8CC9E6;outline-offset:9px;border-radius:4px}
.hero-box-emphasis{position:relative;display:inline-block;transition:color 180ms ease}
.hero-box-emphasis>svg{position:absolute;width:100%;height:12px;left:0;bottom:-8px;opacity:.8;transition:transform 180ms ease}
.hero-question:hover .hero-box-emphasis{color:#FF929D}.hero-question:hover .hero-box-emphasis>svg{transform:translateY(3px)}
.hero-contents{position:relative;margin-top:38px;gap:17px}
.hero-contents::before{content:'';position:absolute;left:29px;top:42px;bottom:42px;width:1px;background:linear-gradient(#8CC9E655,#8CC9E61A)}
.hero-contents li{padding:7px 0;gap:17px}.hero-contents li::before,.hero-contents li::after{display:none}
.hero-task-art{width:60px;height:60px;position:relative;flex:none;filter:drop-shadow(0 4px 8px #082B4022)}
.hero-contents strong{font-size:18px;line-height:1.35}.hero-contents li>div{gap:5px}.hero-task-number{color:#8CC9E6;letter-spacing:.14em;font-size:8px}
.hero-contents div>span:last-child{font-size:12px;color:#BCDCE9}
.hero-destination{margin-top:30px}.hero-destination li{font-size:16px;gap:12px}.hero-destination ul{gap:12px}
@media(min-width:981px) and (max-width:1250px){.hero-task-art{width:44px;height:48px}.hero-contents::before{left:21px}.hero-contents li{gap:12px}.hero-contents strong{font-size:15px}.hero-contents div>span:last-child{font-size:10px}.hero-contents{gap:20px}}
@media(max-width:980px){.hero-destination{margin-top:22px}.hero-destination li{font-size:13px;gap:7px}.hero-destination ul{gap:9px 17px}}
@media(prefers-reduced-motion:reduce){.hero-box-emphasis,.hero-box-emphasis>svg{transition:none}}

/* Give the invitation to open the box more presence. */
.hero-support h2{font-size:clamp(34px,3.05vw,56px);line-height:1.08}
@media(min-width:981px) and (max-width:1250px){.hero-support h2{font-size:34px}}

/* More space between the parcel and its invitation. */
.box-open-label{bottom:-76px}
@media(max-width:980px){.box-open-label{bottom:-66px}}