/* Homepage product stories. The native replicas keep their own scoped palettes. */
.home-products{background:#111;color:#fff;position:relative;overflow:clip;isolation:isolate;overflow-anchor:none;font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}
.home-products::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 65% 35% at 50% 45%,rgba(99,102,241,.1),transparent 75%)}
.home-products *{box-sizing:border-box}
.hp-track{position:relative;z-index:1;height:auto}
.hp-sticky{display:flex;flex-direction:column;align-items:center;padding:110px 24px 60px;gap:20px}
.hp-tabs{display:flex;align-items:center;gap:5px;padding:5px;background:#1c1d22;border:1px solid #30323a;border-radius:100px;flex:none}
.hp-tabs button{border:0;background:transparent;color:#a7a9b5;line-height:1.2;font-family:inherit;font-size:14px;font-weight:600;min-height:42px;padding:10px 24px;border-radius:100px;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .25s,color .25s,box-shadow .25s;white-space:nowrap}
.hp-tabs button[aria-selected=true]{background:#353641;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 8px rgba(0,0,0,.15)}
.hp-tab-dot{flex:none;width:6px;height:6px;border-radius:50%;background:#696b79;transition:background .25s}
.hp-tabs button[aria-selected=true] .hp-tab-dot{background:#a5b4fc;box-shadow:0 0 10px rgba(165,180,252,.25)}
.hp-tabs button[data-product-tab=malls][aria-selected=true] .hp-tab-dot{background:#91cbb8}
.hp-tabs button[data-product-tab=hotels][aria-selected=true] .hp-tab-dot{background:#e6c360}
.hp-tabs button[data-product-tab=airports][aria-selected=true] .hp-tab-dot{background:#8bb7ff}
.home-products button:focus-visible,.home-products a:focus-visible,.home-product-panel:focus-visible{outline:2px solid #b9c7ff;outline-offset:4px}
.hp-panels{width:100%;max-width:1120px;min-width:0}
.home-product-panel{display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0;--hp-scene:0}
.home-product-panel + .home-product-panel{margin-top:100px}
.hp-panel-head{text-align:center;width:100%;max-width:960px;flex:none}
.hp-panel-head h2{font-size:clamp(28px,3.6vw,46px);font-weight:900;letter-spacing:-.035em;line-height:1.1;margin:4px 0 12px;color:#fff}
.hp-descriptions{min-height:48px;max-width:810px;margin:0 auto;position:relative}
.hp-descriptions p{font-size:16px;line-height:1.6;color:#a6a6b1;margin:0}
.hp-descriptions p:not(.on){display:none}
.hp-viewport{width:100%;position:relative;min-width:0}
.hp-carousel{display:grid;gap:32px;width:100%}
.product-native-frame{width:100%;min-width:0;height:580px;position:relative;border-radius:16px;overflow:hidden;text-align:left;background:#f4f7fc;border:1px solid rgba(255,255,255,.12);box-shadow:0 26px 72px rgba(0,0,0,.35)}
.hp-utility-row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:36px;gap:18px;flex:none}
.hp-channel-space{height:34px;display:flex;align-items:center;justify-content:center;flex:none}
.hp-channels{display:flex;gap:4px;padding:3px;border:1px solid #34353e;border-radius:100px;background:#202127;opacity:0;visibility:hidden;transition:opacity .2s}
.home-product-panel[data-scene="2"] .hp-channels{opacity:1;visibility:visible}
.hp-channels button{border:0;border-radius:100px;padding:7px 15px;color:#a9aab5;background:transparent;font:600 12px/1.2 Inter,sans-serif;min-height:34px;cursor:pointer}
.hp-channels button[aria-pressed=true]{background:#42434d;color:#fff}
.hp-file-formats{display:flex;gap:7px;color:#b9b9c6;font-size:11px;font-weight:600}
.hp-file-formats span{padding:5px 9px;border:1px solid #33353e;border-radius:6px}
.hp-panel-foot{height:28px;display:flex;align-items:center;justify-content:center;flex:none}
.hp-product-link{color:#d8dcff;text-decoration:none;font-size:14px;font-weight:600;display:flex;gap:9px;align-items:center}
.hp-product-link:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
.hp-controls{display:none;gap:12px;align-items:center;flex:none}
.hp-scenes{display:flex;gap:5px;padding:4px;border:1px solid #32333c;background:#1b1c21;border-radius:100px}
.hp-scenes button{border:0;background:transparent;color:#a4a5b1;display:flex;align-items:center;gap:7px;border-radius:100px;min-height:34px;padding:8px 15px;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.hp-scenes button[aria-pressed=true]{background:#353640;color:#fff}
.hp-scene-dot{display:none;width:5px;height:5px;border-radius:50%;background:#b5bfff}
.hp-scenes button[aria-pressed=true] .hp-scene-dot{display:block}
.hp-playback{width:42px;height:42px;border-radius:50%;background:#202127;color:#d6d7df;border:1px solid #34353d;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.hp-playback:hover{background:#373842;color:#fff}
.hp-play-icon{display:none}
.hp-playback[aria-pressed=true] .hp-pause-icon{display:none}
.hp-playback[aria-pressed=true] .hp-play-icon{display:block}
.hp-preview-note{color:#747681;font-size:10px;line-height:1.5;text-align:center;flex:none}
/* Enhancement is applied only after the controls and resize observers mount. */
.hp-ready .hp-sticky{position:relative;height:min(900px,100svh);padding:96px 24px 22px;gap:10px;overflow:clip}
.hp-ready .hp-panel-head h2{font-size:clamp(28px,3.3vw,43px);margin-bottom:9px}
.hp-ready .hp-descriptions{min-height:30px}
.hp-ready .hp-panels{flex:1;min-height:0;display:flex;align-items:stretch}
.hp-ready .home-product-panel{width:100%;height:100%;gap:10px;margin:0}
.hp-ready .home-product-panel[hidden]{display:none!important}
.hp-ready .hp-viewport{flex:1;min-height:0;max-height:580px}
.hp-ready .hp-carousel{display:flex;position:absolute;inset:0;height:100%;gap:32px;transform:translateX(calc(var(--hp-scene) * -1 * (100% + 32px)));transition:transform .85s cubic-bezier(.25,.8,.3,1);will-change:transform}
.hp-ready .product-native-frame{flex:0 0 100%;height:100%;opacity:.35;transition:opacity .65s}
.hp-ready .product-native-frame[aria-hidden=false]{opacity:1}
.hp-ready .hp-controls{display:flex}
.home-products [data-running=false] *,.home-products [data-product-scene][aria-hidden=true] *{animation-play-state:paused!important}
/* All previews retain the original desktop canvas at every viewport. */
.home-products .office-frame{width:100%;border-radius:16px}
.home-products .of-scalewrap{height:100%;overflow:hidden}
.home-products .of-design{height:640px}
.home-products .of-toast{bottom:14px}
.home-products .os3 #osCard{transform:translateX(calc(200% + 80px))}
.home-products .rp-spin{animation-duration:1.5s}
.home-products .office-frame .rp-main{padding:22px 28px}
@media(max-width:719px){
 .hp-sticky{padding:94px 16px 40px;gap:14px}
 .hp-tabs{gap:2px;padding:4px;max-width:100%}
 .hp-tabs button{padding:10px 8px;min-height:44px;font-size:12px;gap:5px;min-width:0}
 .hp-tab-dot{width:5px;height:5px}
 .hp-ready .hp-sticky{padding:90px 16px 18px;gap:10px}
 .hp-ready .home-product-panel{gap:10px}
 .hp-panel-head h2{font-size:27px;line-height:1.12;margin:2px 0 8px;letter-spacing:-.04em}
 .hp-ready .hp-panel-head h2{font-size:27px;margin-bottom:8px;min-height:2.24em;display:flex;align-items:center;justify-content:center}
 .hp-descriptions{min-height:58px;max-width:420px}
 .hp-ready .hp-descriptions{font-size:13px;min-height:4.5em}
 .hp-utility-row{flex-direction:column;gap:8px;min-height:0}
 .hp-descriptions p{font-size:13px;line-height:1.5}
 .hp-ready .hp-carousel{gap:20px;transform:translateX(calc(var(--hp-scene) * -1 * (100% + 20px)))}
 .product-native-frame{height:420px;border-radius:14px}
 .hp-channel-space{height:42px}
 .hp-channels button{font-size:11px;padding:7px 14px;min-height:36px}
 .hp-panel-foot{height:25px}
 .hp-product-link{font-size:12px}
 .hp-controls{gap:8px;width:100%;max-width:420px;justify-content:center}
 .hp-scenes{gap:1px;padding:3px;min-width:0;flex:1;justify-content:center}
 .hp-scenes button{font-size:10px;padding:7px 8px;gap:5px;min-height:40px}
 .hp-playback{width:44px;height:44px}
 .hp-preview-note{font-size:9px}

}
@media(max-height:760px) and (min-width:720px){
 .hp-ready .hp-sticky{padding-top:86px}
 .hp-panel-head h2{font-size:32px;margin-bottom:8px}
 .hp-descriptions{min-height:36px}
 .hp-descriptions p{font-size:14px}
 .hp-panel-foot{height:24px}
 .hp-channel-space{height:30px}
 .hp-preview-note{display:none}
}
@media(max-height:720px) and (max-width:719px){
 .hp-ready .hp-sticky{padding-top:82px;gap:7px}
 .hp-panel-head h2{font-size:24px}
 .hp-ready .hp-panel-head h2{font-size:24px}
 .hp-descriptions{min-height:46px}
 .hp-ready .hp-descriptions{font-size:12px;min-height:4.5em}
 .hp-utility-row{gap:4px}
 .hp-descriptions p{font-size:12px}
 .hp-ready .home-product-panel{gap:7px}
 .hp-file-formats span{padding:3px 7px}
 .hp-panel-foot{height:21px}
 .hp-channel-space{height:42px}
 .hp-preview-note{display:none}
}
/* Short landscape screens scroll through the same natural section. */
@media(max-height:569px){
 .hp-ready .hp-sticky{height:auto;padding:80px 24px 32px}
 .hp-ready .hp-panels{flex:none;height:490px}
}
@media(max-height:569px) and (max-width:719px){.hp-ready .hp-sticky{padding:80px 16px 24px}}
.home-products[data-reduced-motion=true] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){.home-products *{animation:none!important;transition:none!important}}
.home-products #officeStage2[aria-hidden=false],.home-products #officeStage3[aria-hidden=false]{opacity:1}
.hp-playback:disabled{opacity:.4;cursor:default}
/* The legacy hero's rotated cards must not widen the homepage scrollport. */
html:has(#product-showcase),body:has(#product-showcase){overflow-x:clip}

.home-products:not(.hp-ready) .product-native-frame{height:580px;min-height:0}

/* Each desktop product uses the same1120×640 canvas as the original Office story. */
.hp-native-design{position:absolute;left:0;top:0;width:1120px;height:640px;transform-origin:top left;container-type:inline-size;container-name:hp-preview}
.home-products:not(.hp-ready) .hp-native-design{position:relative;width:100%;height:100%;transform:none}
@media(max-width:340px){.hp-tabs button{font-size:11px;gap:4px;padding-inline:7px}.hp-tab-dot{width:4px;height:4px}}

/* Paused previews include decorative pseudo-elements. */
.home-products [data-running="false"] *::before,.home-products [data-running="false"] *::after{animation-play-state:paused!important}

/* Explicit slide navigation retains the full scene labels on every screen. */
.hp-carousel-arrow{width:44px;height:44px;flex:none;display:grid;place-items:center;border:1px solid #34353d;border-radius:50%;background:#202127;color:#d6d7df;cursor:pointer;transition:background .2s,color .2s}
.hp-carousel-arrow:hover{background:#373842;color:#fff}
@media(max-width:719px){
 .hp-ready .hp-sticky{height:calc(min(900px,100svh) + 52px)}
 .hp-ready .hp-controls{display:grid;grid-template-columns:1fr 44px 1fr;grid-template-rows:auto 44px;gap:8px;width:100%;max-width:420px}
 .hp-controls .hp-scenes{grid-column:1/-1;grid-row:1;width:100%}
 .hp-carousel-prev{grid-column:1;grid-row:2;justify-self:end}
 .hp-carousel-next{grid-column:3;grid-row:2;justify-self:start}
 .hp-controls .hp-playback{grid-column:2;grid-row:2}
}
@media(max-height:569px){.hp-ready .hp-sticky{height:auto}}

/* Office covers connected workflows as well as document formats. */
.home-product-panel[data-product="office"] .hp-channel-space{flex:1;min-width:0}
.hp-office-connections{flex-wrap:wrap;justify-content:center;gap:5px;max-width:100%;font-size:10px;line-height:12px}
.hp-office-connections span{white-space:nowrap;padding:4px 7px}
@media(max-height:760px) and (min-width:720px){.hp-office-connections{font-size:9px;line-height:11px;gap:3px}.hp-office-connections span{padding:1px 5px}}
@media(max-width:719px){
 .home-product-panel[data-product="office"] .hp-channel-space{flex:none;width:100%}
 .hp-office-connections{font-size:9px;line-height:12px;gap:4px}
 .hp-office-connections span{padding:2px 6px}
}

/* Name the industry showcase without reducing the dashboard canvas. */
.hp-header-row{display:flex;align-items:center;justify-content:center;gap:20px;flex:none;width:100%}
.hp-section-label{color:#a7a9b5;font-size:14px;font-weight:600;line-height:1.2;margin:0;letter-spacing:0}
@media(max-width:719px){
 .hp-header-row{flex-direction:column;gap:6px}
 .hp-section-label{font-size:12px;line-height:14px}
 .hp-ready .hp-sticky{height:calc(min(900px,100svh) + 72px)}
}
@media(max-height:569px){.hp-ready .hp-sticky{height:auto}}

/* Phones show the same complete 1120×640 composition, uniformly scaled. */
.home-products .of-design{container-type:inline-size;container-name:hp-preview}
@media(max-width:719px){
 .hp-ready .hp-sticky{height:auto;overflow:clip}
 .hp-ready .hp-panels{flex:none;height:auto}
 .hp-ready .home-product-panel{height:auto}
 .hp-ready .hp-viewport{flex:none;aspect-ratio:1120/640;max-height:none}
}