/* Compact the mobile header so the navigation control stays on screen. */
@media (max-width: 600px) {
  html body .site-header { padding-inline: 12px !important; gap: 6px !important; }
  html body .site-header .brand { flex: 0 1 120px !important; width: 120px !important; min-width: 84px !important; margin: 0 !important; }
  html body .site-header .brand img { width: 100% !important; }
  html body .site-header .header-tools { gap: 2px !important; min-width: 0; }
  html body .site-header .header-tools .contact-link { display: none !important; }
  html body .site-header .menu-btn { flex: 0 0 44px !important; margin: 0 !important; }
}
/* Mobile: keep content within the screen and provide readable diagrams. */
@media (max-width: 760px) {
  html body.page-payment-v2 .pay-hero-copy { left: auto !important; right: auto !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; }
  html body.page-payment-v2 .pay-pains { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  html body.page-payment-v2 .pay-pain { min-width: 0 !important; overflow-wrap: anywhere; }
  html body .solx-tabs { position: sticky; }
  html body .solx-tabs::after { content:""; position:absolute; top:0; right:0; bottom:0; width:24px; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.96)); }
  html body #arch[data-architecture-motion] .architecture-stage { width:100% !important; max-width:100% !important; height:auto !important; overflow-x:auto !important; overscroll-behavior-inline:contain; scrollbar-width:thin; }
  html body #arch[data-architecture-motion] .architecture-plane { position:relative !important; left:auto !important; top:auto !important; width:1200px !important; transform:none !important; }
  html body #arch[data-architecture-motion] > .pay-shell > .architecture-scroll { max-width:100%; overflow-x:auto !important; overscroll-behavior-inline:contain; scrollbar-width:thin; }
  html body #arch[data-architecture-motion] .architecture-scroll > .arch-fig { width:1200px !important; min-width:1200px !important; max-width:none !important; }
  html body #arch[data-architecture-motion] .architecture-stage::before,
  html body #arch[data-architecture-motion] > .pay-shell > .architecture-scroll::before { content:"← 左右滑动查看完整架构图 →"; display:block; position:sticky; left:0; width:calc(100vw - 24px); padding:0 4px 10px; color:#536a89; font-size:13px; line-height:1.5; text-align:center; }
  html[lang^="en"] body #arch[data-architecture-motion] .architecture-stage::before,
  html[lang^="en"] body #arch[data-architecture-motion] > .pay-shell > .architecture-scroll::before { content:"← Swipe to view the full architecture →"; }
}

/* Keep the entire wide hero media visible on phones, with copy below it. */
@media (max-width: 760px) {
  .home-page .hero-carousel { height:calc(100vw * 9 / 16 + 246px) !important; }
  .home-page .hero-slide { display:block !important; background-color:#122743; background-repeat:no-repeat !important; background-size:100% auto !important; background-position:center top !important; }
  .home-page .hero-slide::after { display:none !important; }
  .home-page .hero-slide .hero-media { top:0 !important; left:0 !important; right:auto !important; bottom:auto !important; width:100% !important; height:auto !important; aspect-ratio:16 / 9; object-fit:contain !important; }
  .home-page .hero-slide .hero-content,
  .home-page [data-hero-slide="libra"] .hero-content { position:absolute !important; top:calc(100vw * 9 / 16 + 12px) !important; left:50% !important; width:calc(100% - 32px) !important; margin:0 !important; padding:0 !important; transform:translateX(-50%) !important; color:#fff !important; text-align:center !important; }
  .home-page .hero-slide :is(h1,.slide-title),
  .home-page [data-hero-slide="dimensions"] .dimensions-title { margin:0 !important; color:#fff !important; font-size:clamp(24px,6vw,30px) !important; line-height:1.2 !important; gap:3px !important; }
  .home-page [data-hero-slide="dimensions"] .dimensions-title .dimensions-title-en { font-size:16px !important; }
  .home-page .hero-slide .hero-subtitle,
  .home-page [data-hero-slide="dimensions"] p { margin:7px auto 0 !important; color:#fff !important; font-size:14px !important; line-height:1.45 !important; letter-spacing:0 !important; }
  .home-page [data-hero-slide="libra"] .hero-release { display:block !important; margin:5px 0 0 !important; color:#d5e5f9 !important; font-size:13px !important; }
  .home-page .home-hero-actions { gap:8px 14px !important; margin-top:10px !important; }
  .home-page .hero-slide .pill-btn { min-height:40px !important; min-width:0 !important; margin-top:10px !important; padding:8px 20px !important; font-size:14px !important; }
  .home-page [data-hero-slide="dimensions"] .home-hero-actions .pill-btn { margin-top:0 !important; }
  .home-page .hero-consult-link { min-height:40px !important; font-size:14px !important; }
  .home-page .carousel-arrow { top:auto !important; bottom:5px !important; width:44px !important; height:44px !important; transform:none !important; }
  .home-page .carousel-arrow.prev { left:12px !important; right:auto !important; }
  .home-page .carousel-arrow.next { right:12px !important; left:auto !important; }
  .home-page .carousel-dots { bottom:5px !important; left:50% !important; gap:5px !important; }
  .home-page .carousel-dots button { width:32px !important; }
  .home-page .home-motion-toggle:not([hidden]) { bottom:52px !important; right:8px !important; }
}

/* Phone hero: preserve the full-width artwork with compact overlaid copy. */
@media (max-width:760px) {
 .home-page .hero-carousel { height:auto !important; aspect-ratio:16 / 9; }
 .home-page .hero-slide { height:100%; }
 .home-page .hero-slide::after { display:block !important; background:linear-gradient(90deg,rgba(5,17,32,.5),rgba(5,17,32,.23)) !important; }
 .home-page [data-hero-slide="libra"]::after { background:linear-gradient(90deg,rgba(213,230,250,.65),rgba(213,230,250,0) 62%) !important; }
 .home-page .hero-slide .hero-content,
 .home-page [data-hero-slide="libra"] .hero-content { top:50% !important; left:50% !important; width:calc(100% - 92px) !important; transform:translate(-50%,-55%) !important; }
 .home-page [data-hero-slide="libra"] .hero-content { left:16px !important; width:45% !important; transform:translateY(-55%) !important; text-align:left !important; color:#102139 !important; }
 .home-page .hero-slide :is(h1,.slide-title),
 .home-page [data-hero-slide="dimensions"] .dimensions-title { font-size:clamp(19px,5.5vw,25px) !important; line-height:1.15 !important; gap:2px !important; }
 .home-page [data-hero-slide="dimensions"] .dimensions-title .dimensions-title-en { font-size:clamp(12px,3.5vw,15px) !important; }
 .home-page .hero-slide .hero-subtitle,
 .home-page [data-hero-slide="dimensions"] p { margin:5px auto 0 !important; font-size:clamp(11px,3vw,13px) !important; line-height:1.3 !important; }
 .home-page [data-hero-slide="libra"] :is(.slide-title,.hero-subtitle) { color:#102139 !important; }
 .home-page [data-hero-slide="libra"] .hero-subtitle { margin-left:0 !important; margin-right:0 !important; }
 .home-page [data-hero-slide="libra"] .hero-release { margin:3px 0 0 !important; color:#1a3556 !important; font-size:11px !important; }
 .home-page .home-hero-actions { gap:4px 8px !important; margin-top:5px !important; flex-wrap:nowrap !important; }
 .home-page .hero-slide .pill-btn { min-height:32px !important; margin-top:6px !important; padding:5px 11px !important; font-size:12px !important; white-space:nowrap; }
 .home-page [data-hero-slide="dimensions"] .home-hero-actions .pill-btn { margin-top:0 !important; }
 .home-page .hero-consult-link { min-height:32px !important; padding:5px 8px !important; font-size:12px !important; white-space:nowrap; }
 .home-page .carousel-arrow { bottom:0 !important; width:44px !important; height:44px !important; background:transparent !important; }
 .home-page .carousel-arrow.prev { left:2px !important; }
 .home-page .carousel-arrow.next { right:2px !important; }
 .home-page .carousel-arrow span { width:11px !important; height:11px !important; filter:drop-shadow(0 1px 2px #102139); }
 .home-page .carousel-dots { bottom:0 !important; }
 .home-page .carousel-dots button { width:24px !important; height:36px !important; }
 .home-page .home-motion-toggle:not([hidden]) { bottom:0 !important; right:44px !important; }
}
@media (max-width:760px) {
 .home-page .hero-slide-center .slide-title { text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
 .home-page .hero-slide .pill-btn::after { width:6px !important; height:6px !important; margin-left:6px !important; flex:0 0 auto; }
 .home-page [data-hero-slide="dimensions"] .home-hero-actions .pill-btn { width:auto !important; flex:0 0 auto !important; }
}

/* Mobile payment examples: one consistent frame without cropping the source. */
@media (max-width: 760px) {
 body.page-payment-v2 #cases .pay-case--img:has(img[src*="/v2/pay/"]) {
  width:100% !important; min-height:0 !important; height:auto !important; padding:0 !important;
  aspect-ratio:16 / 9; overflow:hidden; border-radius:12px; background:#f1f4f8;
 }
 body.page-payment-v2 #cases .pay-case--img img[src*="/v2/pay/"] {
  display:block; width:100% !important; max-width:100% !important; height:100% !important;
  object-fit:contain !important; object-position:center; border-radius:0 !important;
 }
}