.plate.story-plate{position:relative;isolation:isolate;overflow:hidden;padding:0;background:#fff!important;aspect-ratio:539/614}
.story-art{position:absolute;left:50%;top:50%;width:539px;height:614px;transform-origin:center;pointer-events:none}
.story-art iframe{display:block;width:539px;height:614px;border:0;background:transparent;pointer-events:none}
.story-motion-toggle{position:absolute;right:18px;bottom:18px;z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid #e3e8eb;background:#ffffffc9;color:#657581;box-shadow:inset 0 1px 1px #fff,0 4px 16px #2534400d;font:15px Selecta,Arial,sans-serif;cursor:pointer;touch-action:manipulation;transition:transform 160ms cubic-bezier(.2,.8,.2,1)}
.story-motion-toggle:active{transform:scale(.97)}
.story-motion-toggle:focus-visible{outline:2px solid #718898;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.story-motion-toggle:hover{background:#f6f9fb}}
@media(prefers-reduced-motion:reduce){.story-motion-toggle{transition:none}}

/* The first block is the actual swipeable use-case deck, including its apps. */
.story-interactive .story-art,.story-interactive .story-art iframe{pointer-events:auto}

/* The stacked chapter puts the actual phones directly on the page. The wider
   transparent artboard reserves room for the deck's rear phones and shadows. */
html[data-layout="stack"] .show .sec > .plate{margin-top:calc(clamp(8px,1.5vh,20px) * .7)}
html[data-layout="stack"] .show .sec > .plate.story-plate{
 --pw:min(700px,116vw);width:var(--pw);max-width:none;
 margin-inline:calc((100% - var(--pw))/2);
 /* The source phone begins 49px into its 539px artboard. Include that
    transparent inset when reducing the visible subhead-to-phone gap by 30%. */
 margin-top:calc(clamp(8px,1.5vh,20px) * .7 - var(--pw) * 49 / 539 * .3);
 background:transparent!important;box-shadow:none;border:0;border-radius:0;
}
html[data-layout="stack"] .story-motion-toggle{right:max(18px,calc((var(--pw) - 100vw)/2 + 18px))}

/* The use-case artboard is 539 × 614 with a 252px-wide centered phone.
   Match the hero's actual phone width, then remove the artboard's empty top
   inset so the glass starts 16px below the marquee's scrollport. */
html[data-layout="stack"] .show #sec-build > .plate.story-build{
 --pw:calc(var(--hero-phone-width) * 539 / 252);
 margin-top:calc(16px - (var(--pw) * 614 / 539 - var(--hero-phone-width) * 1562 / 760) / 2);
}
/* The transparent iframe now overlaps the rail's padding, not its hit targets. */
html[data-layout="stack"] #sec-build .block-case-marquee{
 z-index:2;
 /* Include the rail's 14px top inset in its 30% gap reduction. */
 margin-top:calc((26px + 14px) * .7 - 14px);
}

/* Optional larger ribbon framing. Match the hero's clear-to-white fade with
   an overlay so the glass keeps its depth and the ribbon stays interactive. */
html[data-layout="stack"] .show .sec > .plate.story-ribbon-fade{--pw:calc(var(--hero-phone-width) * 539 / 251.16)}
html[data-layout="stack"] .plate.story-ribbon-fade::after{
 content:"";position:absolute;inset:auto 0 0;height:calc(58% + 30px);z-index:3;
 background:linear-gradient(to bottom,#fff0 0%,#ffffff8c calc(30% - 9px),#fff calc(68% - 20.4px),#fff 100%);
 pointer-events:none;
}
@media(prefers-contrast:more){html[data-layout="stack"] .plate.story-ribbon-fade::after{height:24%}}

/* A single widget ribbon crosses the iOS screen. Its rim mask is measured from
   the real phone, never an approximate second phone illustration. */
html[data-layout=stack] #sec-ios{position:relative}
.ios-widget-ribbon{position:absolute;z-index:4;overflow:hidden;touch-action:pan-y pinch-zoom;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.ios-widget-ribbon[hidden]{display:none}
.ios-widget-ribbon.is-dragging{cursor:grabbing}
.ios-ribbon-belt{position:absolute;inset:0;pointer-events:none}
.ios-ribbon-widget{position:absolute;left:0;top:0;display:block;border:0;padding:0;background:none;color:inherit;cursor:inherit;pointer-events:auto;touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent}
.ios-ribbon-artwork{display:block;position:relative;width:100%;aspect-ratio:1;pointer-events:none}
.ios-ribbon-surface{display:block;position:absolute;left:0;top:0;width:170px;height:170px;transform-origin:0 0}
.ios-ribbon-face{display:block;position:relative;width:170px;height:170px;overflow:hidden}
.ios-ribbon-face>img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.ios-ribbon-rim{position:absolute;inset:0;pointer-events:none}
.ios-ribbon-label{display:block;margin-top:6px;font:500 9px/1.3 -apple-system,BlinkMacSystemFont,Arial,sans-serif;white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.ios-widget-ribbon:focus-visible{outline:0}
.ios-widget-ribbon:focus-visible::after{content:"";position:absolute;inset:8px max(12px,calc(50% - 160px));border-radius:24px;border:2px solid #246BFE;pointer-events:none}
.ios-ribbon-status{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}

/* Loading is a content state, including on the clean sharing site. */
.story-loading{position:absolute;z-index:6;left:50%;top:35%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;color:#737373;font:14px/1.4 Selecta,Arial,sans-serif;pointer-events:none}
.story-loading[hidden]{display:none}
.story-loading-spinner{width:18px;height:18px;box-sizing:border-box;border:2px solid #e5e5e5;border-top-color:#737373;border-radius:50%;animation:story-loading-spin .8s linear infinite;animation-play-state:paused}
[data-loading-active=true] .story-loading-spinner{animation-play-state:running}
@keyframes story-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.story-loading-spinner{animation:none}}
@media(forced-colors:active){.story-loading{color:CanvasText}.story-loading-spinner{border-color:GrayText;border-top-color:CanvasText}}

/* Native-size skeleton geometry, ready before any image, font or iframe. */
.story-skeleton{position:absolute;inset:0;z-index:2;pointer-events:none}
[data-art-ready=true]>.story-skeleton{display:none}
.story-skeleton-phone{position:absolute;left:26.7%;top:8%;width:46.6%;height:84%;box-sizing:border-box;border:1px solid #dedede;border-radius:17.3% / 8.4%;background:linear-gradient(155deg,#fafafa,#f5f5f5);box-shadow:inset 0 0 0 5px #fff,0 12px 24px -18px #0002;overflow:hidden}
.story-skeleton-island{position:absolute;left:36%;top:3.8%;width:28%;height:3.75%;border-radius:999px;background:#e3e3e3}
.story-skeleton-widgets{position:absolute;top:19%;left:10%;right:10%;display:grid;grid-template-columns:1fr 1fr;gap:8%}
.story-skeleton-widgets i{aspect-ratio:1;border-radius:23%;background:#eaeaea;box-shadow:inset 0 1px #fff}
.story-skeleton-icons{position:absolute;top:45%;left:10%;right:10%;display:flex;justify-content:space-between}
.story-skeleton-icons i{width:17%;aspect-ratio:1;border-radius:25%;background:#e8e8e8}
.story-skeleton-lines{position:absolute;top:59%;left:10%;right:10%;display:grid;gap:14px}
.story-skeleton-lines i{height:8px;border-radius:99px;background:#eaeaea}
.story-skeleton-lines i:nth-child(2){width:76%}.story-skeleton-lines i:last-child{width:48%}
.story-plate:not([data-art-ready=true]) .story-loading{top:70%}
@media(forced-colors:active){.story-skeleton-phone{border-color:GrayText}.story-skeleton-phone i{background:GrayText}}