/* Seven real cases, carried by the page scroll. App typography stays at native size. */
.mp[data-mp-story]{overflow:clip;overflow-anchor:none}
.mps-track,.mps-pin,.mps-panels{min-width:0}
.mp[data-mp-story]:not(.mp-ready) .mps-panels{display:grid;gap:90px}
.mp[data-mp-story] .mp-tabs button{font-size:14px}
.mp[data-mps-mode] .mp-tabs{gap:6px;margin:0 0 18px;padding:0;align-items:stretch}
.mp[data-mps-mode] .mp-tabs button{position:relative;min-width:0;min-height:44px;padding:12px 17px 14px;font-size:14px;line-height:1.45;white-space:normal;transition:color .25s,background .25s}
.mp[data-mps-mode] .mp-tabs button::after{content:'';position:absolute;left:17px;right:17px;bottom:6px;height:2px;border-radius:2px;background:currentColor;transform-origin:left;transform:scaleX(var(--mps-progress,0));opacity:.65}
.mp[data-mps-mode=pinned] .mps-track{position:relative;height:var(--mps-track-height,500vh)}
.mp[data-mps-mode=pinned] .mps-pin{position:sticky;top:100px;padding:8px 0 20px}
.mp[data-mps-mode=pinned] .mps-panels{height:var(--mps-stage-height,calc(100svh - 192px));position:relative;isolation:isolate}
.mp[data-mps-mode=pinned] [data-mp-panel]{height:100%;min-height:0;margin:0}
.mp[data-mps-mode=pinned] .mp-personal-panel{grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);gap:clamp(36px,5vw,70px);padding:12px 12px 16px}
.mp[data-mps-mode=pinned] .mp-case-copy{max-width:410px}
.mp[data-mps-mode=pinned] .mp-case-copy h3{font-size:clamp(36px,3.5vw,50px);margin-bottom:22px}
.mp[data-mps-mode=pinned] .mp-case-copy>p:not(.mp-eyebrow){font-size:16px;line-height:1.7}
.mp[data-mps-mode=pinned] .mp-context-note{margin-top:26px}
.mp[data-mps-mode=pinned] .mp-device-scene{height:100%;min-height:0;padding:0;margin:0;perspective:1200px}
.mp[data-mps-mode=pinned] .mp-phone{height:min(670px,calc(var(--mps-stage-height,100svh - 192px) - 28px));display:flex;flex-direction:column;flex:none}
.mp[data-mps-mode=pinned] .mp-phone-bar,.mp[data-mps-mode=pinned] .mp-phone-contact,.mp[data-mps-mode=pinned] .mp-phone-compose,.mp[data-mps-mode=pinned] .mp-home-indicator{flex:none}
.mp[data-mps-mode=pinned] .mp-messages{flex:1 1 0;min-height:0;overflow:hidden;scroll-behavior:auto;overflow-anchor:none}
.mp[data-mps-mode=pinned] .mp-messages>*{flex:none}
.mp[data-mps-mode=pinned] .mp-ambient-calendar{top:20%;left:1%;transform:translateY(calc(var(--mps-case-progress,0) * -26px)) rotate(-7deg)}
.mp[data-mps-mode=pinned] .mp-trip-pass{left:-2%;top:24%;transform:translateY(calc(var(--mps-case-progress,0) * -22px)) rotate(-8deg)}
.mp[data-mps-mode=pinned] .mp-browser{height:min(650px,calc(var(--mps-stage-height,100svh - 192px) - 28px));max-height:100%;display:flex;flex-direction:column}
.mp[data-mps-mode=pinned] .mp-browser-bar{flex:none}
.mp[data-mps-mode=pinned] .mp-document{flex:1 1 0;min-height:0;overflow:hidden;overflow-anchor:none}
.mp[data-mps-mode=pinned] .mp-team-panel{grid-template-columns:minmax(245px,.65fr) minmax(0,1.6fr);padding:22px;gap:32px;align-items:center;border-radius:28px}
.mp[data-mps-mode=pinned] .mp-contributions>.mp-eyebrow{margin-bottom:23px}
.mp[data-mps-mode=pinned] .mp-contribution{margin-bottom:27px}
.mp[data-mps-mode=pinned] .mp-contribution>p{font-size:16px;line-height:1.6}
.mp[data-mps-mode=pinned] .mta-window{height:100%;min-height:0;max-height:100%;display:grid;grid-template-rows:auto minmax(0,1fr)}
.mp[data-mps-mode=pinned] .mta-desktop,.mp[data-mps-mode=pinned] .mta-conversation{min-height:0}
.mp[data-mps-mode=pinned] .mta-window .mp-thread{min-height:0;flex:1 1 0;overflow:hidden;overflow-anchor:none;scroll-behavior:auto}
.mp[data-mps-mode=pinned] .mta-window .mp-team-top,.mp[data-mps-mode=pinned] .mta-window .mta-channel-tabs,.mp[data-mps-mode=pinned] .mta-window .mp-team-composer{flex:0 0 auto}
.mp[data-mps-mode=pinned] .mta-window .mp-thread-message,.mp[data-mps-mode=pinned] .mta-window .mta-day{flex:0 0 auto}
.mp[data-mps-mode=pinned] .mta-format{display:none}
.mp[data-mps-mode=pinned] .mta-window .mp-team-composer>.mta-composer-placeholder{padding:12px 12px 10px!important}
.mp[data-mps-mode=pinned] .mta-window .mta-compose-tools{padding-bottom:9px}
.mp[data-mps-mode=pinned] .mta-window .mp-deck-artifact{grid-template-columns:1.2fr 1fr}
.mp[data-mps-mode=pinned] [data-mps-active=true]>.mp-case-copy,.mp[data-mps-mode=pinned] [data-mps-active=true]>.mp-contributions{animation:mps-copy-arrive .7s cubic-bezier(.2,.7,.2,1) both}
.mp[data-mps-mode=pinned] [data-mps-active=true]>.mp-device-scene>.mp-phone,.mp[data-mps-mode=pinned] [data-mps-active=true]>.mp-browser,.mp[data-mps-mode=pinned] [data-mps-active=true]>.mta-window{animation:mps-app-arrive .85s cubic-bezier(.2,.7,.2,1) both}
@keyframes mps-copy-arrive{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:none}}
@keyframes mps-app-arrive{from{opacity:.15;transform:perspective(1200px) translateX(30px) rotateY(-2deg)}to{opacity:1;transform:none}}
/* Every example is an ordinary document section when a complete stage cannot fit. */
.mp[data-mps-mode=linear] .mps-track,.mp[data-mps-mode=linear] .mps-pin{height:auto;position:static;padding:0}
.mp[data-mps-mode=linear] .mps-panels{display:grid;gap:clamp(90px,10vw,150px)}
.mp[data-mps-mode=linear] [data-mp-panel]{scroll-margin-top:112px}
.mp[data-mps-mode=linear] .mp-tabs{margin-bottom:38px}
.mp[data-mps-mode=linear] .mp-tabs button::after{opacity:.35}
@media(max-width:900px){
 .mp[data-mps-mode] .mp-tabs button{font-size:12px;padding-inline:14px}
 .mp[data-mps-mode=linear] .mps-panels{gap:90px}
}
@media(max-width:600px){
 .mp[data-mps-mode] .mp-tabs{gap:5px;margin-inline:0}
 .mp[data-mps-mode] .mp-tabs button{font-size:11px;line-height:1.4;padding:10px 12px 13px;min-height:44px}
 .mp[data-mps-mode] .mp-tabs button::after{left:12px;right:12px;bottom:5px}
 .mp[data-mps-mode=linear] .mps-panels{gap:80px}
 .mp[data-mps-mode=linear] [data-mp-panel]{scroll-margin-top:92px}
}
@media(prefers-reduced-motion:reduce){
 .mp[data-mp-story] [data-mp-panel]>*{animation:none!important;transform:none!important}
 .mp[data-mp-story] .mp-phone,.mp[data-mp-story] .mp-tabs button,.mp[data-mp-story] .mp-tabs button::after{animation:none!important;transition:none!important;transform:none}
}

.mps-compact-heading{display:none}
/* Short laptops keep the story clock. Remove duplicate decoration and spare
   spacing; the controller still checks every chapter at its readable size. */
@media(min-width:1100px) and (max-height:819px){
 .mp[data-mps-mode=pinned] .mp-tabs button{font-size:14px;padding-block:10px 12px}
 .mp[data-mps-mode=pinned] .mp-case-copy>.mp-eyebrow,.mp[data-mps-mode=pinned] .mp-contributions>.mp-eyebrow{font-size:14px;line-height:1.4;margin-bottom:12px;letter-spacing:.04em}
 .mp[data-mps-mode=pinned] .mp-case-copy h3{font-size:36px;margin-bottom:14px}
 .mp[data-mps-mode=pinned] .mp-case-copy>p:not(.mp-eyebrow){font-size:16px;line-height:1.55}
 .mp[data-mps-mode=pinned] .mp-context-note{font-size:16px;line-height:1.55;margin-top:16px}
 .mp[data-mps-mode=pinned] .mp-contribution{margin-bottom:18px}
 .mp[data-mps-mode=pinned] .mp-person-label,.mp[data-mps-mode=pinned] .mp-person-label small,.mp[data-mps-mode=pinned] .mp-brain-bridge span{font-size:14px;line-height:1.4}
 .mp[data-mps-mode=pinned] .mp-brain-bridge strong{font-size:16px}
 .mp[data-mps-mode=pinned] .mp-bug-capture{display:none}
 .mp[data-mps-mode=pinned] .me-companion{margin-top:14px}
 .mp[data-mps-mode=pinned] .me-companion-top,.mp[data-mps-mode=pinned] .me-companion-top>span,.mp[data-mps-mode=pinned] .me-companion-foot{font-size:14px}
 .mp[data-mps-mode=pinned] .me-companion-top{padding:12px 17px 9px}
 .mp[data-mps-mode=pinned] .me-companion-request{font-size:16px;line-height:1.45;padding:9px 11px;margin-bottom:10px}
 .mp[data-mps-mode=pinned] .me-companion-body{padding-bottom:12px}
 .mp[data-mps-mode=pinned] .me-companion-foot{padding-block:7px}
}
/* Short screens traverse the same complete examples with progressive reveals. */
.mp.mp-ready[data-mps-flow=true] [data-mp-step]{opacity:var(--mps-flow-reveal,0);transform:translateY(calc(12px*(1 - var(--mps-flow-reveal,0))));transition:none;filter:none}
 .mp.mp-ready[data-mps-flow=true] [data-mp-step]:focus-within{opacity:1;transform:none}
@media(max-width:1099px){
 .mp[data-mps-compact=true] .mp-wrap{width:min(760px,calc(100% - 32px))}
 .mp[data-mps-compact=true] .mps-pin{top:80px;padding:8px 0 10px}
 .mp[data-mps-compact=true] .mp-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:5px;margin:0 0 10px;overscroll-behavior-x:contain}
 .mp[data-mps-compact=true] .mp-tabs::-webkit-scrollbar{display:none}
 .mp[data-mps-compact=true] .mp-tabs button{flex:none;max-width:210px;white-space:nowrap;min-height:42px;font-size:14px;padding:10px 13px 12px}
 .mp[data-mps-compact=true] [data-mp-panel]:not([hidden]){display:flex;flex-direction:column;align-items:stretch;gap:12px;height:100%;padding:0;min-height:0;background:transparent;border-radius:0;overflow:visible}
 .mp[data-mps-compact=true] .mp-case-copy{flex:none;max-width:none;padding:0 4px}
 .mp[data-mps-compact=true] .mp-case-copy>.mp-eyebrow{display:none}
 .mp[data-mps-compact=true] .mp-case-copy h3{font-size:clamp(25px,5vw,36px);line-height:1.1;margin:0 0 10px}
 .mp[data-mps-compact=true] .mp-case-copy h3 br{display:block}
 .mp[data-mps-compact=true] .mp-case-copy>p:not(.mp-eyebrow){max-width:530px;max-height:calc(220px*(1 - var(--mps-summary-progress,0)));overflow:hidden;opacity:calc(1 - var(--mps-summary-progress,0));margin:0}
 .mp[data-mps-compact=true] .mp-context-note,.mp[data-mps-compact=true] .mp-small-ask{max-width:480px;max-height:calc(160px*(1 - var(--mps-summary-progress,0)));overflow:hidden;opacity:calc(1 - var(--mps-summary-progress,0));margin-top:calc(8px*(1 - var(--mps-summary-progress,0)));padding:0}
 .mp[data-mps-compact=true] .mp-device-scene{flex:1;min-height:0;height:auto;padding:0 0 10px}
 .mp[data-mps-compact=true] .mp-phone{height:100%;max-height:650px;max-width:360px;width:100%;margin:auto}
 .mp[data-mps-compact=true] .mp-ambient-calendar,.mp[data-mps-compact=true] .mp-trip-pass{display:none}
 .mp[data-mps-compact=true] .mp-browser{flex:1;min-height:0;height:auto;max-height:none}
 .mp[data-mps-compact=true] .mp-document{padding:25px 24px}
 .mp[data-mps-compact=true] .mps-compact-heading{display:block;flex:none;font-size:clamp(26px,5vw,36px);font-weight:400;line-height:1.13;letter-spacing:-.045em;margin:0 3px}
 .mp[data-mps-compact=true] .mp-contributions{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:0 17px;padding:0 3px;max-height:calc(var(--mps-context-height,600px)*(1 - var(--mps-summary-progress,0)));opacity:calc(1 - var(--mps-summary-progress,0));overflow:hidden}
 .mp[data-mps-compact=true] .mp-contributions>.mp-eyebrow{display:none}
 .mp[data-mps-compact=true] .mp-contribution{margin-bottom:10px}
 .mp[data-mps-compact=true] .mp-person-label{gap:5px}
 .mp[data-mps-compact=true] .mp-person-label i,.mp[data-mps-compact=true] .mp-bug-capture{display:none}
 .mp[data-mps-compact=true] .mp-person-label small{padding-left:0;margin:3px 0 0;width:100%}
 .mp[data-mps-compact=true] .mp-contribution>p{margin-top:7px}
 .mp[data-mps-compact=true] .mp-brain-bridge{grid-column:1/-1;padding:0;gap:9px}
 .mp[data-mps-compact=true] .mp-brain-bridge>svg{display:none}
 .mp[data-mps-compact=true] .mta-window{flex:1;min-height:0;height:auto;border-radius:16px;box-shadow:0 14px 40px -25px #0004}
 .mp[data-mps-compact=true] .mta-desktop{display:flex;min-height:0}
 .mp[data-mps-compact=true] .mta-conversation{flex:1;min-height:0;overflow:hidden}
 .mp[data-mps-compact=true] .mta-sidebar,.mp[data-mps-compact=true] .mta-app-rail{display:none}
 .mp[data-mps-compact=true] .mta-window .mp-team-top{padding:10px 14px;min-height:42px}
 .mp[data-mps-compact=true] .mta-channel-tabs{min-height:27px}
 .mp[data-mps-compact=true] .mta-channel-tabs>span{padding-block:5px}
 .mp[data-mps-compact=true] .mta-window .mp-team-composer{margin:0 12px 11px}
 .mp[data-mps-compact=true] .mta-window .mp-team-composer>.mta-composer-placeholder{padding:9px 10px!important}
 .mp[data-mps-compact=true] .mta-compose-tools{display:none}
 .mp[data-mps-compact=true] .mta-window .mp-deck-artifact{grid-template-columns:1fr}
 /* Keep the same readable text in held chapters, progressive flow and no-JS.
    The app expands after the full introduction; no copy is shrunk to fit. */
 .mp[data-mp-story] .mp-case-copy>p:not(.mp-eyebrow),.mp[data-mp-story] .mp-context-note,.mp[data-mp-story] .mp-small-ask,.mp[data-mp-story] .mp-contribution>p,.mp[data-mp-story] .mp-brain-bridge span{font-size:16px;line-height:1.45}
 .mp[data-mp-story] .mp-case-copy>.mp-eyebrow,.mp[data-mp-story] .mp-contributions>.mp-eyebrow,.mp[data-mp-story] .mp-person-label,.mp[data-mp-story] .mp-person-label small{font-size:14px;line-height:1.4;letter-spacing:0}
 .mp[data-mp-story] .mp-brain-bridge strong{font-size:16px;line-height:1.4}
 .mp[data-mps-compact=true] .me-companion{margin-top:10px}
 .mp[data-mp-story] .me-companion-top,.mp[data-mp-story] .me-companion-top>span,.mp[data-mp-story] .me-companion-foot{font-size:14px}
 .mp[data-mps-compact=true] .me-companion-top{padding:9px 13px 7px}
 .mp[data-mps-compact=true] .me-companion-body{padding:0 13px 11px}
 .mp[data-mp-story] .me-companion-request{font-size:16px;line-height:1.4}
 .mp[data-mps-compact=true] .me-companion-request{padding:7px 9px;margin:0 0 7px}
 .mp[data-mps-compact=true] .me-companion-foot{display:none}
 .mp[data-mp-story] .mp-bubble,.mp[data-mp-story] .mp-bubble>p,.mp[data-mp-story] .mp-thread-message p,.mp[data-mp-story] .mp-inline-detail p,.mp[data-mp-story] .mp-document-sub{font-size:16px;line-height:1.45}
 .mp[data-mp-story] .mp-receipt,.mp[data-mp-story] .mp-inline-detail summary,.mp[data-mp-story] .mp-inline-detail small,.mp[data-mp-story] .mp-author,.mp[data-mp-story] .mp-outcome,.mp[data-mp-story] .mp-document-status,.mp[data-mp-story] .mp-form-row,.mp[data-mp-story] .mp-signature-block>span,.mp[data-mp-story] .mp-signature-block small{font-size:14px;line-height:1.45}
 .mp[data-mp-story] .mp-pr-artifact>div,.mp[data-mp-story] .mp-pr-artifact ul,.mp[data-mp-story] .mp-pr-check,.mp[data-mp-story] .mp-deck-slide>span,.mp[data-mp-story] .mp-deck-side>span,.mp[data-mp-story] .mp-rollout-mini,.mp[data-mp-story] .mp-artifact-file,.mp[data-mp-story] .mp-artifact-file small,.mp[data-mp-story] .mp-chart-artifact figcaption span,.mp[data-mp-story] .mp-chart-artifact>small,.mp[data-mp-story] .mp-cohort-chart strong,.mp[data-mp-story] .mp-cohort-chart span{font-size:14px;line-height:1.45}
 .mp[data-mp-story] .mp-chart-artifact figcaption strong,.mp[data-mp-story] .mp-chart-artifact>p{font-size:16px;line-height:1.45}
}