/* The original mosaic remains the desktop composition. */
.capability-pin,.capability-window{display:contents}
.capability-rail-controls{display:none}
.opportunity-intro,.opportunity-prompts{display:none}
@media(max-width:960px){
 .capabilities[data-mobile-rail]{display:block;position:relative;min-height:0;padding:0;overflow:visible;scroll-margin-top:calc(64px + env(safe-area-inset-top,0px));--cap-pin-top:calc(64px + env(safe-area-inset-top,0px));--cap-pin-height:calc(100svh - 160px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));--cap-card-width:calc(100vw - 32px);overflow-anchor:none}
 .capabilities[data-mobile-rail="pinned"]{height:var(--cap-scroll-height)}
 .capabilities[data-mobile-rail] .capability-pin{position:sticky;top:var(--cap-pin-top);display:flex;flex-direction:column;justify-content:center;gap:10px;width:100%;height:var(--cap-pin-height);min-height:230px;padding:14px 0 5px;box-sizing:border-box;background:var(--site-bg)}
 .capabilities[data-mobile-rail] .capability-window{display:block;flex:1;min-height:0;width:100%;overflow:hidden;overflow:clip;scrollbar-width:none;scroll-behavior:auto;overflow-anchor:none;touch-action:pan-y pinch-zoom}
 .capability-window::-webkit-scrollbar{display:none}
 .capabilities[data-mobile-rail="pinned"] .mosaic-stage{will-change:transform}
 .capabilities[data-rail-dragging="true"] .capability-window{user-select:none}
 .capabilities[data-mobile-rail] .mosaic-stage{position:relative;display:flex;align-items:stretch;gap:16px;width:var(--cap-track-width);max-width:none;height:100%;min-height:0;padding:0 16px;box-sizing:border-box;margin:0}
 .capabilities[data-mobile-rail] .mosaic-stage>.card{flex:0 0 var(--cap-card-width);width:var(--cap-card-width);min-width:0;max-width:var(--cap-card-width);height:100%;min-height:0;max-height:100%;align-self:center;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:auto;touch-action:pan-y pinch-zoom}
 .capabilities[data-mobile-rail="pinned"] .mosaic-stage>.card{overflow:hidden;overflow:clip}
 .capabilities[data-mobile-rail] .mosaic-stage>.notif{display:grid;place-items:center;padding:20px}
 .capabilities[data-mobile-rail] .notif .toast-wrap{width:100%;height:94px}
 .capabilities[data-mobile-rail] .capability-rail-controls{display:flex;flex:none;align-items:center;gap:10px;padding:0 16px;min-height:44px;color:var(--site-muted);font:12px/1.3 var(--font-ui)}
 .capability-rail-count{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--site-ink)}
 .capability-rail-meter{flex:1;height:2px;max-width:140px;overflow:hidden;background:var(--site-line)}
 .capability-rail-meter i{display:block;width:100%;height:100%;background:var(--site-accent);transform-origin:left center;transform:scaleX(var(--cap-progress,0))}
 .capability-rail-controls button{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--site-line);border-radius:4px;background:var(--site-surface);color:var(--site-ink);font:22px/1 var(--font-action);cursor:pointer}
 .capability-rail-controls button:disabled{opacity:.35;cursor:default}
 .capabilities[data-mobile-rail="swipe"]{height:auto}
 .capabilities[data-mobile-rail="swipe"] .capability-pin{position:static;height:auto;min-height:0;padding-block:20px}
 .capabilities[data-mobile-rail="swipe"] .capability-window{flex:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:16px;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
 .capabilities[data-mobile-rail="swipe"] .mosaic-stage{height:auto;align-items:stretch}
 .capabilities[data-mobile-rail="swipe"] .mosaic-stage>.card{height:auto;max-height:none;scroll-snap-align:start}
 .capabilities[data-mobile-rail] .connect .integration-chips{margin-top:24px;gap:10px}
 .capabilities[data-mobile-rail] .chip-row{gap:8px}
 .capabilities[data-mobile-rail] .tech-chip{height:38px;min-height:38px;padding-inline:11px;font-size:14px}
}

@media(max-width:960px){
 /* Reflow the drawing into available space instead of leaving its desktop coordinates. */
 .capabilities[data-mobile-rail] .mosaic-stage>.automate{display:flex;flex-direction:column;gap:12px;max-height:100%;align-self:center;padding:20px}
 .capabilities[data-mobile-rail] .automate-copy{flex:none;padding:0}
 .capabilities[data-mobile-rail] .automate-copy h2{font-size:clamp(23px,6vw,28px);line-height:1.15}
 .capabilities[data-mobile-rail] .automate-copy .sub{font-size:14px;line-height:1.4;margin-top:12px}
 .capabilities[data-mobile-rail] .workflow-status{position:static;flex:none;min-height:44px;gap:6px;font-size:10px}
 .capabilities[data-mobile-rail] .workflow-status>#workflow-label{flex:1;min-width:0}
 .capabilities[data-mobile-rail] .workflow-track{flex:none;gap:3px}
 .capabilities[data-mobile-rail] .workflow-track i{width:10px;height:2px}
 .capabilities[data-mobile-rail] .workflow-replay{width:44px;height:44px;min-width:44px;margin:0}
 .capabilities[data-mobile-rail] .mosaic-illo{position:relative;inset:auto;top:auto;flex:1;min-height:0;width:100%;height:auto;scale:1;translate:0}
 .capabilities[data-mobile-rail] .win-back{left:8%;top:7%;width:75%;height:69%;rotate:-6deg}
 .capabilities[data-mobile-rail] .win-front{left:17%;top:22%;width:77%;height:70%;rotate:4deg}
 .capabilities[data-mobile-rail] .win-body{height:calc(100% - 13.4rem);padding-top:14rem}
 .capabilities[data-mobile-rail] .window-label{font-size:9px;margin-bottom:7px}
 .capabilities[data-mobile-rail] .window-rule{height:4px;margin-block:7px}
 .capabilities[data-mobile-rail] .window-flow{margin-top:12px;gap:5px}
 .capabilities[data-mobile-rail] .window-flow i{width:27px;height:22px}
 .capabilities[data-mobile-rail] .window-chart{height:43%;margin-top:12px;gap:6px}
 .capabilities[data-mobile-rail] .window-chart i{width:18px;max-height:100%}
 .capabilities[data-mobile-rail] .pill-wf{left:auto;right:0;top:42%;height:28px;padding-inline:5px 9px;font-size:9px}
 .capabilities[data-mobile-rail] .pill-ai{left:0;top:64%;width:118px;height:44px;padding:0 10px;gap:6px}
 .capabilities[data-mobile-rail] .mosaic-cursor{left:auto;right:1%;top:82%;width:22px;height:26px}
 .capabilities[data-mobile-rail="swipe"] .mosaic-illo{flex:none;height:240px}
 /* A compact brief card, rather than a full-height empty pink sheet. */
 .capabilities[data-mobile-rail] .mosaic-stage>.search{height:100%;max-height:100%;min-height:0;align-self:center;justify-content:center;gap:12px;padding:22px}
 .capabilities[data-mobile-rail] .search h2{font-size:clamp(22px,6vw,28px);line-height:1.15}
 .capabilities[data-mobile-rail] .search h2 br{display:block}
 .capabilities[data-mobile-rail] .opportunity-intro{display:block;font:12px/1.4 var(--font-ui);color:var(--site-muted)}
 .capabilities[data-mobile-rail] .search .bar-search{flex:none;width:100%;height:52px;margin:0}
 .capabilities[data-mobile-rail] .search .bar-search input{font-size:16px}
 .capabilities[data-mobile-rail] .opportunity-prompts{display:grid;grid-template-columns:1fr 1fr;gap:7px}
 .opportunity-prompts button{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;min-height:44px;padding:7px 9px;border:1px solid var(--site-line);border-radius:4px;background:var(--site-surface);color:var(--site-ink);font:11px/1.3 var(--font-ui);text-align:left}
 .opportunity-prompts button[aria-pressed="true"]{border-color:var(--site-accent);background:var(--site-accent-soft)}
 :root[data-style="sketch"] .opportunity-prompts button{border-radius:4px 8px 5px 7px;box-shadow:1px 1px 0 var(--site-line)}
}
@media(max-width:960px) and (max-height:700px){
 .capabilities[data-mobile-rail] .mosaic-stage>.automate{padding:14px;gap:7px}
 .capabilities[data-mobile-rail] .automate-copy h2{font-size:22px}
 .capabilities[data-mobile-rail] .automate-copy .sub{font-size:12px;line-height:1.35;margin-top:8px}
 .capabilities[data-mobile-rail] .mosaic-stage>.search{padding:10px;gap:4px}
 .capabilities[data-mobile-rail] .search h2{font-size:20px}
 .capabilities[data-mobile-rail] .opportunity-intro{font-size:11px}
 .capabilities[data-mobile-rail] .opportunity-prompts button{min-height:44px;padding:5px 7px;font-size:10px}
 .capabilities[data-mobile-rail] .search .bar-search{height:48px}
}
@media(max-width:960px) and (max-height:700px){
 .capabilities[data-mobile-rail] .mosaic-stage>.connect{min-height:0;padding:18px}
 .capabilities[data-mobile-rail] .connect h2{font-size:23px}
 .capabilities[data-mobile-rail] .connect .sub{font-size:14px;line-height:1.4}
 .capabilities[data-mobile-rail] .connect .integration-chips{margin-top:16px;gap:8px}
 .capabilities[data-mobile-rail] .connect .chip-slack{margin-top:13px}
}
@media(prefers-reduced-motion:reduce){.capability-window{scroll-behavior:auto!important}}

@media(max-width:960px){
 /* Keep chart content inside its card too, without introducing another Y scroller. */
 .capabilities[data-mobile-rail="pinned"] .delivery-chart{flex:1;min-height:0;height:auto;margin-top:14px}
 .capabilities[data-mobile-rail="pinned"] .delivery-col{height:100%;justify-content:flex-end}
 .capabilities[data-mobile-rail="pinned"] .delivery-bar{flex:none;height:calc((100% - 24px)*var(--delivery-fraction));max-height:none}
 .capabilities[data-mobile-rail="pinned"] .delivery-day{margin-top:8px;font-size:clamp(8.5px,2.2vw,11px);line-height:12px}
}

/* The section's contain range is exactly its sticky travel: pin-height + travel.
   Browser-driven transforms keep following native scroll while JavaScript is busy. */
@media(max-width:960px) and (prefers-reduced-motion:no-preference){
 @supports (animation-timeline: --portfolio-rail) and (animation-range: contain){
  [data-mobile-rail="pinned"][data-rail-driver="timeline"]{
   view-timeline-name:--portfolio-rail;
   view-timeline-axis:block;
   view-timeline-inset:var(--cap-timeline-top) calc(100% - var(--cap-timeline-top) - var(--cap-timeline-height));
  }
  [data-rail-driver="timeline"] [data-rail-track]{
   animation:portfolio-rail-travel linear both;
   animation-duration:auto;
   animation-timeline:--portfolio-rail;
   animation-range:contain;
  }
  [data-rail-driver="timeline"] .capability-rail-meter i{
   animation:portfolio-rail-progress linear both;
   animation-duration:auto;
   animation-timeline:--portfolio-rail;
   animation-range:contain;
  }
 }
}
@media(max-width:960px){html{overscroll-behavior-x:none}}
@keyframes portfolio-rail-travel{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(0px - var(--cap-travel)),0,0)}}
@keyframes portfolio-rail-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}