/* One mobile swipe completes one slide. Native scrolling remains the fallback;
   complete reading states keep the artwork legible when each slide settles. */
.mobile-copy,.mobile-source-label,.mobile-os-layer,.foundation-info,.foundation-detail,.mobile-complete-label{display:none}

@media(max-width:1000px){
  .desktop-copy,.desktop-source-label{display:none}
  .mobile-copy,.mobile-source-label{display:inline}
  .nav-wrap{padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
  .site-header{padding-top:var(--safe-top)}
  .story-ready .copy-track{left:max(24px,env(safe-area-inset-left,0px));right:max(24px,env(safe-area-inset-right,0px));overflow:clip}
  .story-ready .chapter{padding-top:calc(106px + var(--safe-top))}
  .story-ready .copy p{font-size:18px;line-height:1.5;margin-top:17px}
  .story-ready .visual-stage{inset-inline:4px;bottom:calc(27px + var(--safe-bottom));max-width:680px}
  .story-ready .next-scene{right:10px;bottom:calc(7px + var(--safe-bottom));background:color-mix(in srgb,var(--page) 85%,transparent)}
  .story-ready .finale{padding-top:calc(100px + var(--safe-top));padding-bottom:calc(90px + var(--safe-bottom))}
  .story-ready .finale .site-footer{padding-bottom:calc(17px + var(--safe-bottom))}
  /* Keep record labels continuous when fitting the art changes its scale. */
  .world[data-detail="compact"] .record-heading>span{opacity:var(--record-reading,1)}

  /* Flatten just this paper stack into one moving surface on phones. Its
     nested faces otherwise need re-sorting as it passes behind other cards. */
  .supplier-record{transform-style:flat;backface-visibility:hidden}
  .supplier-record .record-content{z-index:2}
  .supplier-record::before{z-index:0}
  .supplier-record::after{z-index:1}

  /* Keep the three layers recognizable at a glance; the OS is a compact cap. */
  .system-layer-label{display:none}
  .mobile-os-layer{position:absolute;inset:0;padding:19px 21px;display:flex;align-items:center;justify-content:space-between;gap:16px;opacity:0}
  .mobile-os-layer>span{font-size:22px;font-weight:500;letter-spacing:-.035em;line-height:1.3;max-width:250px}
  .mobile-os-layer>svg{width:82px;height:54px;flex:none;overflow:visible}
  .mobile-os-layer rect{fill:var(--surface);stroke:var(--edge);stroke-width:1.2}
  .mobile-os-layer rect:first-child{fill:var(--wash)}
  .mobile-os-layer path{stroke:var(--blue);stroke-width:1.6;fill:none;opacity:.65}
  .deck-title{top:17px;left:20px;right:20px;font-size:22px}
  .data-title .source-marks{display:none}
  .connected-sources{left:19px;right:19px;top:60px;bottom:15px;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:11px 9px}
  .connected-sources>.source-group{grid-column:span 2;gap:8px}
  .connected-sources>.source-group:nth-child(n+4){grid-column:span 3}
  .connected-sources>.source-group>span{display:block;font-size:14px;line-height:1.3;min-height:0;white-space:nowrap;letter-spacing:-.025em;color:var(--body)}
  .connected-sources .source-stack{height:31px;padding-left:11px}
  .connected-sources .source-stack>i{height:31px;width:31px;margin-left:-11px;border-radius:9px}
  .connected-sources .source-stack img{height:21px;width:21px}.connected-sources .source-stack img[src$="ebay.svg"]{width:25px}
  .execution-path{top:57px;left:18px;right:18px;gap:10px}
  .execution-path>button{height:44px;min-width:0;font-size:16px;padding-inline:8px;gap:8px}
  .execution-path>button>img,.execution-path>button>svg:not(.concept-info){display:none}
  .execution-path>button>.concept-info{width:18px;height:18px}
  /* The selected execution face expands in screen pixels, outside the scaled
     illustration. It stays beside the layers instead of becoming a modal. */
  .execution-deck.is-explaining .execution-base{visibility:hidden}
  .execution-explanation.mobile-execution-explanation{inset:auto 14px auto;z-index:20;max-height:calc(100% - 24px);padding:22px 50px 22px 22px;border-radius:18px;background:var(--surface);box-shadow:0 8px 28px var(--shadow),inset 0 1px 0 var(--highlight);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;justify-content:flex-start}
  .mobile-execution-explanation h3{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mobile-execution-explanation p{font-size:18px;line-height:1.5;letter-spacing:-.015em;max-width:none}
  .mobile-execution-explanation .explanation-close{width:44px;height:44px;max-width:none;max-height:none;top:3px;right:3px;background:transparent;font-size:26px}

  /* Four clear capabilities. The longer explanation occupies this same card. */
  .core-header{top:13px;left:23px;right:23px;height:48px}
  .core-components{left:18px;right:18px;top:81px;bottom:20px;gap:12px}
  .foundation-part{position:relative;padding:19px 17px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border-radius:15px}
  .foundation-part .part-symbol{height:28px;gap:8px;margin-bottom:13px}
  .foundation-part .part-symbol>img,.foundation-part .part-symbol>svg{height:25px;width:25px}
  .foundation-part .source-symbol>img:nth-child(n+4){display:none}
  .foundation-part h3{font-size:18px;line-height:1.3;max-width:145px;margin:0;letter-spacing:-.025em}
  .foundation-part>p{display:none}
  .foundation-info{display:grid;place-items:center;position:absolute;right:3px;top:3px;height:calc(44px / var(--world-scale,1));width:calc(44px / var(--world-scale,1));max-height:66px;max-width:66px;border:0;border-radius:50%;background:transparent;color:var(--quiet);font-size:19px;font-weight:500;font-style:normal}
  .foundation-info::before{content:'';position:absolute;height:23px;width:23px;border:1px solid var(--line);border-radius:50%}
  .foundation-info:hover,.foundation-info:focus-visible{color:var(--blue)}
  .platform-core.is-interactive .foundation-info,.platform-core.is-interactive .foundation-detail{pointer-events:auto}
  .platform-core.is-explaining .core-components{visibility:hidden}
  .foundation-detail{position:absolute;left:19px;right:19px;top:81px;bottom:20px;padding:31px 26px 25px;display:flex;flex-direction:column;justify-content:center;background:var(--surface);border-radius:16px;color:var(--ink);user-select:text}
  .foundation-detail[hidden]{display:none}
  .foundation-detail h3{font-size:23px;line-height:1.25;font-weight:500;letter-spacing:-.03em;margin:0 35px 15px 0}
  .foundation-detail p{font-size:19px;line-height:1.55;letter-spacing:-.015em;color:var(--body)}
  .foundation-close{position:absolute;top:5px;right:5px;height:calc(44px / var(--world-scale,1));width:calc(44px / var(--world-scale,1));border:0;background:transparent;color:var(--quiet);font-size:28px;border-radius:50%}
  .foundation-detail:focus{outline:none}.foundation-detail:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

  /* Six larger company systems make the shared foundation easier to see. */
  .company-instance .mini-topbar{height:19%;font-size:10px;padding-inline:7%;gap:6%}
  .company-instance .mini-topbar>span{font-size:inherit;width:auto;height:auto}
  .company-instance .mini-side{top:19%;width:21%;padding:9% 5%;gap:11%}
  .company-instance .mini-body{top:28%;left:27%;right:7%;bottom:11%;grid-template-rows:29% 1fr;gap:7%}
  .foundation-network{stroke-width:1.7;opacity:.3}
  .plinth-header{top:6px;height:44px;font-size:22px;left:21px;right:21px}
  .plinth-header .foundation-wordmark{width:110px;height:44px}
  .plinth-connections{top:56px;bottom:12px;gap:7px}.plinth-connections>div{padding-block:6px}.plinth-connections>div>span{font-size:11px;line-height:1.25;min-height:28px;display:flex;align-items:center;justify-content:center}
  .plinth-connections .source-stack{height:27px}.plinth-connections .source-stack>i{height:27px;width:27px}
  .plinth-connections .source-stack img{height:18px;width:18px}

  /* One completed change: message, green acknowledgment, updated application. */
  .change-request{box-shadow:0 12px 32px var(--shadow)}
  .change-request .request-cursor,.change-request .click-ripple,.change-request .reaction-wait{display:none}
  .change-request .slack-reaction{display:inline-flex;vertical-align:middle;margin-right:8px;border-color:color-mix(in srgb,#3b9a6b 25%,var(--surface));background:color-mix(in srgb,#3b9a6b 10%,var(--surface))}
  .mobile-complete-label{display:inline-block;vertical-align:middle;margin-top:10px;font-size:12px;color:#32835c}
  [data-theme="dark"] .mobile-complete-label{color:#8fd7b2}
  .mobile-system-updated .finance-review{background:color-mix(in srgb,#3b9a6b 9%,var(--surface));border-color:color-mix(in srgb,#3b9a6b 27%,var(--surface))}
  .mobile-system-updated .review-icon{background:color-mix(in srgb,#3b9a6b 15%,var(--surface));color:#32835c}
  [data-theme="dark"] .mobile-system-updated .review-icon{color:#8fd7b2}

  /* A wide reading band follows the words, rather than a tall viewport-shaped
     ellipse. The fade still reaches the screen edges without a visible box. */
  .finale-haze{background:radial-gradient(ellipse var(--finale-haze-width,100vw) var(--finale-haze-height,250px) at 50% var(--finale-haze-center,50%),var(--page) 12%,color-mix(in srgb,var(--page) 96%,transparent) 48%,color-mix(in srgb,var(--page) 65%,transparent) 72%,transparent 100%)}

  /* Field dimensions come from the viewport, including its rotated corners. */
  .finale-brand>img,.finale-brand>svg{max-width:100%;height:57px;width:145px}
  .finale-brand.nfl-mark>svg{height:72px;width:103px}
}

@media(max-width:480px){
  .brand,.brand img{width:108px}.brand img{height:44px}
  .nav-actions{gap:10px}.contact-link,.login-link{font-size:13px}
  .contact-link{gap:6px}.contact-link svg{width:15px;height:15px}
}
@media(max-width:380px){
  .nav-wrap{padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
  .brand,.brand img{width:96px}.brand img{height:39px}
  .nav-actions{gap:8px}
}
@media(max-width:340px){.brand,.brand img{width:88px}.brand img{height:36px}}

@media(max-width:1000px) and (max-height:700px){
  .story-ready .chapter{padding-top:calc(88px + var(--safe-top))}
  .story-ready .copy h1,.story-ready .copy h2{font-size:27px;line-height:1.24}
  .story-ready .copy p{font-size:17px;line-height:1.45;margin-top:13px}
}