.output-panels{position:relative}
.showcase-pagination[hidden]{display:none}
@media(max-width:650px){
  /* Use native scroll physics and keep both the current item and next destination clear. */
  .output-showcase.is-carousel{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
  .output-showcase.is-carousel .tabs{
    position:sticky;top:calc(var(--site-header-height) + 4px);z-index:12;
    display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;
    margin:0 0 12px;padding:4px 0 8px;border:0;background:var(--bg);
  }
  .output-showcase.is-carousel .tabs::-webkit-scrollbar,.output-showcase.is-carousel .output-panels::-webkit-scrollbar{display:none}
  .output-showcase.is-carousel .tabs button{flex:0 0 auto;min-height:44px;padding:9px 16px;border:1px solid var(--ln);border-radius:999px;background:var(--card);font-size:14px;line-height:1.4;white-space:nowrap;touch-action:manipulation}
  .output-showcase.is-carousel .tabs button[aria-selected="true"]{background:var(--tx);border-color:var(--tx);color:var(--bg);box-shadow:none}
  .output-showcase.is-carousel .tabs button:focus-visible{outline:2px solid var(--cta);outline-offset:2px}
  .output-showcase.is-carousel .output-panels{
    display:flex;align-items:flex-start;gap:12px;width:calc(100% + 32px);margin-inline:-16px;padding:0 16px 16px;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;scrollbar-width:none;overflow-anchor:none;
  }
  .output-showcase.is-carousel [role="tabpanel"]{
    flex:0 0 calc(100% - 16px);display:flex;flex-direction:column;min-width:0;
    border:1px solid var(--ln);border-radius:16px;background:var(--card);overflow:hidden;scroll-snap-align:start;
  }
  .output-showcase.is-carousel .output-preview{padding:22px 20px 18px;min-height:360px}
  .output-showcase.is-carousel .output-preview h3{font-size:22px;margin-bottom:18px}
  .output-showcase.is-carousel .output-files li{padding-block:12px}
  .output-showcase.is-carousel .output-files li:first-child{padding-top:0}
  .output-showcase.is-carousel .output-files strong{font-size:15px}
  .output-showcase.is-carousel .output-files span{font-size:13.5px;line-height:1.55;margin-top:4px}
  .output-showcase.is-carousel .output-preview > a{min-height:44px;padding-top:18px;font-size:14px;touch-action:manipulation}
  .output-showcase.is-carousel .risk-coverage{margin-bottom:18px}
  .output-showcase.is-carousel .shot{border-left:0;border-top:1px solid var(--ln)}
  .output-showcase.is-carousel .output-screen-label{padding:10px 14px;font-size:11px;gap:3px 10px}
  .output-showcase.is-carousel .shot picture{height:clamp(240px,80vw,320px);overflow:hidden}
  .showcase-pagination{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:var(--mu);line-height:1.5}
  .showcase-position{font-weight:600;color:var(--bd)}
  .hero .cta{display:grid;grid-template-columns:1fr;gap:12px;max-width:400px;margin-inline:auto}
  .hero .cta a{display:flex;align-items:center;justify-content:center;min-height:52px;width:100%;touch-action:manipulation}
  .hero .or{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:4px}
  .hero .or a{display:inline-flex;align-items:center;min-height:44px;margin-left:0;padding-inline:4px;touch-action:manipulation}
  .signup-panel label.check{min-height:48px;align-items:center;padding-block:8px;gap:12px;cursor:pointer;touch-action:manipulation}
  .signup-panel label.check input{flex-shrink:0}
  #faq summary{min-height:56px;touch-action:manipulation}
  footer .fcol a{display:flex;align-items:center;min-height:44px;width:fit-content;touch-action:manipulation}
  .signup-panel #form{scroll-margin-top:calc(var(--site-header-height) + 12px)}
}
@media(prefers-reduced-motion:reduce){.output-showcase.is-carousel *{scroll-behavior:auto!important}}

@media(max-width:650px){.output-showcase.is-carousel #p-context .shot picture,.output-showcase.is-carousel #p-usecases .shot picture{height:auto;overflow:visible}}

@media(max-width:650px){.output-showcase.is-carousel :is(#p-context,#p-usecases) .shot{order:-1;border-top:0;border-bottom:1px solid var(--ln)}.output-showcase.is-carousel :is(#p-context,#p-usecases) .output-preview{min-height:0}}