:root {
  --mobile-page-gutter: 20px;
}

@media (max-width: 980px) {

  /* Mobile float sidebar: hide the collapse/expand toggle button only.
     Sidebar reveal follows the same scroll-gating as desktop (no forced display). */
  .float-widget,
  .float-widget.is-dock-collapsed {
    --float-dock-toggle-width: 0px;
  }

  /* Hide the collapse/expand toggle button only */
  .float-dock-toggle,
  .float-widget .float-dock-toggle,
  .float-widget.is-dock-collapsed .float-dock-toggle {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Never allow collapsed state to hide the tools panel on mobile.
     (is-dock-collapsed is a no-op on mobile since the toggle is gone.) */
  .float-widget.is-dock-collapsed .float-tools {
    transform: none !important;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    min-width: 0 !important;
    -webkit-text-size-adjust: 100%;
  }

  .site-page,
  main,
  section,
  header,
  footer {
    max-width: 100%;
  }

  img,
  video,
  canvas,
  svg {
    max-width: 100%;
  }

  iframe {
    max-width: 100%;
  }

  .container,
  .home-section-inner,
  .section-inner,
  .news-list-inner,
  .detail-heading-inner,
  .detail-content,
  .about-section-inner,
  .site-footer-container {
    width: min(100% - 40px, var(--container, 1745px)) !important;
    max-width: calc(100% - 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .topbar.is-compact-nav,
  .topbar {
    height: 72px !important;
  }

  .topbar.is-compact-nav .topbar-inner,
  .topbar .topbar-inner {
    height: 72px !important;
    padding: 0 var(--mobile-page-gutter) !important;
    gap: 0 !important;
  }

  .topbar.is-compact-nav .site-mobile-nav {
    top: 72px;
    max-height: calc(100vh - 72px);
  }

  .topbar.is-compact-nav .logo-wrap,
  .topbar.is-compact-nav .logo {
    width: min(205px, calc(100vw - 104px)) !important;
    height: auto !important;
    flex-basis: min(205px, calc(100vw - 104px)) !important;
  }

  .topbar.is-compact-nav .mobile-nav-toggle {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  .topbar.is-compact-nav .nav>a,
  .topbar.is-compact-nav .product-menu-trigger,
  .topbar.is-compact-nav .solution-menu-trigger {
    min-height: 58px;
    padding: 15px 22px !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
  }

  .topbar.is-compact-nav .product-menu-trigger::before,
  .topbar.is-compact-nav .solution-menu-trigger::before {
    top: 23px;
    right: 24px;
  }

  .topbar.is-compact-nav .product-menu-title {
    padding: 10px 22px 4px 34px;
  }

  .topbar.is-compact-nav .nav .product-menu-panel a,
  .topbar.is-compact-nav .nav .product-menu-panel span,
  .topbar.is-compact-nav .nav .solution-menu-item,
  .topbar.is-compact-nav.is-light .nav .product-menu-panel a,
  .topbar.is-compact-nav.is-light .nav .product-menu-panel span,
  .topbar.is-compact-nav.is-light .nav .solution-menu-item {
    min-height: 48px;
    padding: 12px 22px 12px 34px;
    font-size: 15px;
    line-height: 1.45;
  }

  .topbar.is-compact-nav .header-links {
    min-height: 58px;
    flex-basis: 58px;
  }

  .hero,
  .home-hero,
  [class$="-hero"],
  [class*="-hero "] {
    min-height: 520px !important;
    height: auto !important;
  }

  .hero-content,
  .home-hero .hero-content,
  .news-hero-inner,
  .detail-heading-inner {
    width: auto !important;
    max-width: none !important;
  }

  .section-title,
  .section-heading,
  .home-title {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 38px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
  }

  .section-title h1,
  .section-title h2,
  .section-heading h1,
  .section-heading h2,
  .home-title h2,
  .hero h1,
  .news-hero h1,
  .detail-title,
  .detail-title h1 {
    max-width: 100% !important;
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.22 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
  }

  .section-title p,
  .section-heading p,
  .home-section-copy,
  .hero p,
  .news-hero p,
  .detail-meta,
  .breadcrumb {
    max-width: 100% !important;
    font-size: clamp(14px, 4vw, 17px) !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
  }

  .home-product-grid,
  .home-solution-grid,
  .home-core-grid,
  .home-news-grid,
  .news-grid,
  .policy-grid,
  .mode-grid,
  .service-grid,
  .system-grid,
  .process-grid,
  .culture-grid,
  .contact-grid,
  .value-grid,
  .arch-grid,
  .industry-grid,
  .feature-grid,
  .function-grid,
  .capability-grid,
  .scenario-grid,
  .solution-grid {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  .feature-card,
  .solution-card,
  .home-product-card,
  .home-solution-card,
  .home-core-card,
  .home-news-card,
  .news-card,
  .policy-card,
  .mode-card,
  .service-card,
  .system-card,
  .process-card,
  .culture-card,
  .contact-card,
  .value-card,
  .arch-card,
  .industry-card,
  .function-card,
  .capability-card,
  .scenario-card,
  .tech-card,
  .detail-card,
  .detail-article-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  .feature-card h2,
  .feature-card h3,
  .solution-card h2,
  .solution-card h3,
  .home-product-card h2,
  .home-product-card h3,
  .home-solution-card h2,
  .home-solution-card h3,
  .news-card h2,
  .policy-card h3,
  .value-card h3,
  .arch-card h3,
  .industry-card h3,
  .function-card h3,
  .capability-card h3,
  .scenario-card h3,
  .tech-card h3 {
    font-size: clamp(18px, 5vw, 26px) !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    overflow-wrap: anywhere;
  }

  .feature-card p,
  .solution-card p,
  .home-product-card p,
  .home-solution-card p,
  .news-card p,
  .policy-card p,
  .value-card p,
  .arch-card p,
  .industry-card p,
  .function-card p,
  .capability-card p,
  .scenario-card p,
  .tech-card p {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;
  }

  .solution-showcase {
    width: 100% !important;
    max-width: 100% !important;
    gap: 18px !important;
  }

  .solution-card,
  .solution-showcase:hover .solution-card,
  .solution-showcase:focus-within .solution-card,
  .solution-showcase.has-active .solution-card {
    flex: 1 1 100% !important;
    transform: none !important;
  }

  .solution-visual,
  .solution-card.is-featured .solution-visual,
  .solution-card:hover .solution-visual,
  .solution-card:focus-visible .solution-visual,
  .solution-showcase.has-active .solution-card.is-active .solution-visual {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }

  .solution-visual img,
  .news-card-media img,
  .policy-image img,
  .service-card img,
  .system-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  .pagination,
  .news-tabs,
  .tabs,
  .feature-tabs {
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  .pagination a,
  .pagination span,
  .news-tabs a,
  .tabs button,
  .feature-tabs button,
  .feature-tab {
    min-width: 0 !important;
    min-height: 40px !important;
    padding: 8px 14px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .cms-article-content {
    font-size: 16px;
    line-height: 1.8;
  }

  .cms-article-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
  }

  .float-widget {
    --float-dock-width: 34px;
  }
}

@media (max-width: 768px) {
  :root {
    --mobile-page-gutter: 16px;
  }

  .container,
  .home-section-inner,
  .section-inner,
  .news-list-inner,
  .detail-heading-inner,
  .detail-content,
  .about-section-inner,
  .site-footer-container {
    width: min(100% - 32px, var(--container, 1745px)) !important;
    max-width: calc(100% - 32px) !important;
  }

  .topbar.is-compact-nav,
  .topbar {
    height: 68px !important;
  }

  .topbar.is-compact-nav .topbar-inner,
  .topbar .topbar-inner {
    height: 68px !important;
  }

  .topbar.is-compact-nav .site-mobile-nav {
    top: 68px;
    max-height: calc(100vh - 68px);
  }

  .hero,
  .home-hero,
  [class$="-hero"],
  [class*="-hero "] {
    min-height: 460px !important;
    padding-top: 88px !important;
    padding-bottom: 56px !important;
  }

  .home-hero .hero-content {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: var(--mobile-page-gutter);
    padding-right: var(--mobile-page-gutter);
    z-index: 2;
  }

  .home-product-grid,
  .home-solution-grid,
  .home-core-grid,
  .home-news-grid,
  .news-grid,
  .policy-grid,
  .mode-grid,
  .service-grid,
  .system-grid,
  .process-grid,
  .culture-grid,
  .contact-grid,
  .value-grid,
  .arch-grid,
  .industry-grid,
  .feature-grid,
  .function-grid,
  .capability-grid,
  .scenario-grid,
  .solution-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .news-card,
  .policy-card,
  .detail-pager,
  .contact-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .news-card-media {
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }

  .detail-pager {
    gap: 14px !important;
  }

  .pager-link {
    width: 100% !important;
  }

  .footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    text-align: center;
    justify-items: center;
  }

  .footer .footer-brand {
    grid-column: auto !important;
    text-align: center !important;
    justify-self: center;
  }

  .footer .footer-brand .footer-phone,
  .footer .footer-brand .footer-address,
  .footer .footer-brand .footer-icp {
    text-align: center !important;
  }

  .footer .footer-nav-groups {
    grid-column: auto !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 20px !important;
    padding-top: 0 !important;
    justify-self: center !important;
    width: 100% !important;
    justify-items: center !important;
  }

  .footer .footer-brand-logo img {
    left: 50%;
    transform: translateX(-50%);
    object-position: center;
  }

  .footer .footer-list {
    align-items: center;
  }
}

@media (max-width: 680px) {
  :root {
    --mobile-page-gutter: 14px;
  }

  .container,
  .home-section-inner,
  .section-inner,
  .news-list-inner,
  .detail-heading-inner,
  .detail-content,
  .about-section-inner,
  .site-footer-container {
    width: min(100% - 28px, var(--container, 1745px)) !important;
    max-width: calc(100% - 28px) !important;
  }

  .section-title h1,
  .section-title h2,
  .section-heading h1,
  .section-heading h2,
  .home-title h2,
  .hero h1,
  .news-hero h1,
  .detail-title,
  .detail-title h1 {
    font-size: clamp(26px, 7.6vw, 38px) !important;
    text-wrap: balance;
  }

  body[data-cms-page="home"] .home-hero .home-hero-title {
    font-size: clamp(26px, 6.6vw, 33px) !important;
    letter-spacing: 0 !important;
    overflow-wrap: normal !important;
  }

  .hero,
  .home-hero,
  [class$="-hero"],
  [class*="-hero "] {
    min-height: 440px !important;
    padding-top: 84px !important;
    padding-bottom: 50px !important;
  }

  .topbar.is-compact-nav,
  .topbar {
    height: 64px !important;
  }

  .topbar.is-compact-nav .topbar-inner,
  .topbar .topbar-inner {
    height: 64px !important;
  }

  .topbar.is-compact-nav .site-mobile-nav {
    top: 64px;
    max-height: calc(100vh - 64px);
  }

  .topbar.is-compact-nav .logo-wrap,
  .topbar.is-compact-nav .logo {
    width: min(196px, calc(100vw - 96px)) !important;
    flex-basis: min(196px, calc(100vw - 96px)) !important;
  }

  .home-hero .home-hero-actions,
  .hero-actions,
  .home-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .home-hero .home-btn,
  .hero-actions .home-btn {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 10px !important;
    font-size: 15px !important;
  }

  .footer .footer-nav-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 18px !important;
    justify-items: center !important;
  }

  .footer .footer-column {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .footer .footer-column h4 {
    text-align: center !important;
  }

  .footer .footer-list {
    align-items: center !important;
    text-align: center !important;
  }
}

@media (max-width: 520px) {

  body[data-cms-page="partners"] .join {
    width: 100%;
    overflow-x: hidden;
  }

  body[data-cms-page="partners"] .join .section-heading {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
  }

  body[data-cms-page="partners"] .join-grid-frame {
    width: calc(100% - 28px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  body[data-cms-page="partners"] .join-grid {
    width: 100% !important;
    justify-items: center;
  }

  body[data-cms-page="partners"] .join-card {
    width: min(376px, 100%) !important;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
  }

  .login-wrapper,
  .register-wrapper {
    min-height: 100dvh;
    padding: 24px 14px !important;
  }

  .login-brand,
  .register-brand {
    margin-bottom: 20px !important;
  }

  .login-brand img,
  .register-brand img {
    max-width: min(260px, calc(100vw - 40px));
    height: auto !important;
  }

  .login-card,
  .register-card {
    width: 100% !important;
    max-width: 430px !important;
    padding: 24px 18px !important;
  }

  .form-options,
  .form-group-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .forgot-link {
    text-align: left;
  }

  .code-group {
    width: 100%;
  }

  .login-copyright,
  .register-copyright {
    max-width: calc(100vw - 40px);
    line-height: 1.6;
  }

  .section-title h1,
  .section-title h2,
  .section-heading h1,
  .section-heading h2,
  .home-title h2,
  .hero h1,
  .news-hero h1,
  .detail-title,
  .detail-title h1 {
    font-size: clamp(26px, 8.2vw, 34px) !important;
  }

  .hero,
  .home-hero,
  [class$="-hero"],
  [class*="-hero "] {
    min-height: 420px !important;
  }

  .topbar.is-compact-nav .nav>a,
  .topbar.is-compact-nav .product-menu-trigger,
  .topbar.is-compact-nav .solution-menu-trigger {
    min-height: 54px;
    padding: 13px 20px !important;
    font-size: 16px !important;
  }

  .feature-card,
  .solution-card,
  .home-product-card,
  .home-solution-card,
  .home-core-card,
  .home-news-card,
  .news-card,
  .policy-card,
  .mode-card,
  .service-card,
  .system-card,
  .process-card,
  .culture-card,
  .contact-card,
  .value-card,
  .arch-card,
  .industry-card,
  .function-card,
  .capability-card,
  .scenario-card,
  .tech-card,
  .detail-card,
  .detail-article-card {
    border-radius: 8px !important;
  }

  .pagination a,
  .pagination span {
    min-width: 40px !important;
    padding: 7px 12px !important;
    font-size: 14px !important;
  }

  .footer {
    padding-top: 32px !important;
    padding-bottom: 30px !important;
  }

  .footer .footer-nav-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 18px !important;
  }

  .footer .footer-column h4 {
    line-height: 1.4 !important;
  }
}

@media (max-width: 430px) {
  :root {
    --mobile-page-gutter: 14px;
  }

  .container,
  .home-section-inner,
  .section-inner,
  .news-list-inner,
  .detail-heading-inner,
  .detail-content,
  .about-section-inner,
  .site-footer-container {
    width: min(100% - 28px, var(--container, 1745px)) !important;
    max-width: calc(100% - 28px) !important;
  }

  .topbar.is-compact-nav .logo-wrap,
  .topbar.is-compact-nav .logo {
    width: min(190px, calc(100vw - 88px)) !important;
    flex-basis: min(190px, calc(100vw - 88px)) !important;
  }

  .hero,
  .home-hero,
  [class$="-hero"],
  [class*="-hero "] {
    min-height: 398px !important;
    padding-top: 82px !important;
    padding-bottom: 44px !important;
  }

  .section-title,
  .section-heading,
  .home-title {
    margin-bottom: 30px !important;
  }

  .footer .footer-nav-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px 14px !important;
  }

  .footer .footer-brand .footer-phone {
    white-space: normal;
  }
}

@media (max-width: 402px) {

  .topbar.is-compact-nav .logo-wrap,
  .topbar.is-compact-nav .logo {
    width: min(176px, calc(100vw - 84px)) !important;
    flex-basis: min(176px, calc(100vw - 84px)) !important;
  }

  .section-title h1,
  .section-title h2,
  .section-heading h1,
  .section-heading h2,
  .home-title h2,
  .hero h1,
  .news-hero h1,
  .detail-title,
  .detail-title h1 {
    font-size: clamp(24px, 8vw, 32px) !important;
  }

  .home-hero .home-hero-actions,
  .hero-actions,
  .home-hero-actions {
    grid-template-columns: 1fr !important;
  }
}

/* ============ Product & Solution Pages Mobile Fixes ============ */

@media (max-width: 900px) {

  /* Fix text wrapping for product/solution page headings */
  .product-heading,
  .section-heading {
    height: auto !important;
    min-height: 54px;
    padding: 0 16px !important;
  }

  .product-heading h2,
  .section-heading h2 {
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Section copy on solution pages */
  .section-copy {
    width: calc(100% - 32px) !important;
    font-size: clamp(15px, 4.2vw, 18px) !important;
    line-height: 1.65 !important;
    padding: 0 16px !important;
    text-align: left !important;
  }

  /* Tech cards (product listing page) */
  .tech-card h3 {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Tech card icon: center horizontally on mobile */
  .tech-icon {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 16px auto 4px !important;
    display: block !important;
  }

  /* Tech card title/text: align left on mobile, ignore per-card absolute offsets */
  .tech-card h3,
  .tech-card p {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .tech-card p {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.6 !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Feature cards */
  .feature-card {
    height: auto !important;
    min-height: 380px !important;
    padding-bottom: 18px;
  }

  .feature-card h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .feature-card p {
    font-size: clamp(14px, 3.6vw, 16px) !important;
    line-height: 1.6 !important;
    -webkit-line-clamp: 4 !important;
  }

  .feature-panel {
    padding: 60px 20px 20px !important;
    height: auto !important;
    min-height: 180px;
  }

  .feature-icon {
    top: 20px;
    width: 160px;
    height: 150px;
  }

  /* Benefit items */
  .benefit-title h3 {
    font-size: clamp(20px, 5.5vw, 24px) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .benefit-item p,
  .benefit-item li {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.6 !important;
  }

  /* Industry cards (solution pages) */
  .industry-card {
    width: auto !important;
    height: auto !important;
    padding: 20px !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
  }

  .industry-card h3 {
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(20px, 5.5vw, 24px) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .industry-card p {
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.6 !important;
  }

  /* Arch cards (solution pages) */
  .arch-card h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .arch-card p {
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.6 !important;
  }

  /* Value cards */
  .value-card h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .value-card p {
    font-size: clamp(14px, 3.6vw, 16px) !important;
    line-height: 1.6 !important;
  }

  /* Hero text for product/solution pages */
  .hero h1 {
    font-size: clamp(24px, 7vw, 34px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    overflow-wrap: break-word !important;
  }

  .hero p {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 768px) {

  /* Further reduce font sizes for small tablets and large phones */
  .product-heading h2,
  .section-heading h2 {
    font-size: clamp(20px, 5.5vw, 26px) !important;
    line-height: 1.3 !important;
  }

  .section-copy {
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.6 !important;
  }

  .tech-card h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.35 !important;
  }

  .tech-card p {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.55 !important;
  }

  .feature-card h3 {
    font-size: clamp(17px, 4.8vw, 20px) !important;
  }

  .feature-card p {
    font-size: clamp(13px, 3.4vw, 15px) !important;
    line-height: 1.55 !important;
  }

  .benefit-title h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
  }

  .benefit-item p,
  .benefit-item li {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.55 !important;
  }

  .industry-card h3 {
    font-size: clamp(18px, 5vw, 22px) !important;
  }

  .industry-card p {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.55 !important;
  }

  .arch-card h3 {
    font-size: clamp(17px, 4.8vw, 20px) !important;
  }

  .arch-card p {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.55 !important;
  }

  .value-card h3 {
    font-size: clamp(17px, 4.8vw, 20px) !important;
  }

  .value-card p {
    font-size: clamp(13px, 3.4vw, 15px) !important;
    line-height: 1.55 !important;
  }

  .hero h1 {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.22 !important;
  }

  .hero p {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 520px) {

  /* Mobile phone specific optimizations */
  .product-heading,
  .section-heading {
    padding: 0 12px !important;
  }

  .product-heading h2,
  .section-heading h2 {
    font-size: clamp(18px, 5.2vw, 24px) !important;
    line-height: 1.3 !important;
  }

  .section-copy {
    width: calc(100% - 24px) !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .tech-card {
    padding: 24px 20px 130px !important;
  }

  .tech-card h3 {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  .tech-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .feature-card {
    min-height: 340px !important;
  }

  .feature-card h3 {
    font-size: 17px !important;
    line-height: 1.3 !important;
  }

  .feature-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .feature-panel {
    padding: 50px 16px 16px !important;
    min-height: 160px;
  }

  .feature-icon {
    width: 130px;
    height: 120px;
  }

  .benefit-title h3 {
    font-size: 18px !important;
  }

  .benefit-item p,
  .benefit-item li {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .industry-card {
    padding: 16px !important;
  }

  .industry-card h3 {
    font-size: 18px !important;
  }

  .industry-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .arch-card h3 {
    font-size: 17px !important;
  }

  .arch-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .value-card h3 {
    font-size: 17px !important;
  }

  .value-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .hero h1 {
    font-size: clamp(20px, 6.2vw, 26px) !important;
    line-height: 1.2 !important;
  }

  .hero p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
}

/* ============ Benefits Panel Mobile Override (text baked into bg on desktop) ============ */

@media (max-width: 900px) {
  .benefit-panel {
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    aspect-ratio: auto !important;
    height: auto !important;
    padding: 20px 0 !important;
    background: none !important;
    display: grid !important;
    gap: 24px !important;
  }

  .benefits-section .section-title {
    margin-bottom: 20px !important;
  }

  .benefit-item {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 150px !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    background: #fff !important;
    border: 1px solid rgba(58, 110, 200, .15) !important;
    border-radius: 10px !important;
  }

  .benefit-title {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
  }

  .benefit-title h3,
  .benefit-item p,
  .benefit-item ul {
    position: static !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
  }

  .benefit-title img {
    width: 32px !important;
    height: 35px !important;
    flex-shrink: 0;
  }

  .benefit-title h3 {
    margin: 0 !important;
    font-size: clamp(16px, 4.5vw, 20px) !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    color: #133264 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .benefit-item p,
  .benefit-item li {
    color: #555 !important;
    font-size: clamp(13px, 3.5vw, 15px) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
  }

  .benefit-item ul {
    margin: 4px 0 0 !important;
    padding-left: 1.2em !important;
  }

  .benefit-item li {
    margin-bottom: 2px !important;
  }

  /* Bottom links: desktop uses positioned links on background image */
  .bottom-links {
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    aspect-ratio: auto !important;
    height: auto !important;
    background: none !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 20px 0 !important;
  }

  .bottom-links::before {
    display: none !important;
  }

  .bottom-link {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    background: linear-gradient(135deg, #28489f, #1a56db) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    text-decoration: none !important;
    overflow: visible !important;
  }

  .bottom-link img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Product pager: keep desktop button style, only fix inner text size/position on mobile */
  .bottom-links[data-product-pager] .product-pager-copy {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .bottom-links[data-product-pager] .product-pager-kicker {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .bottom-links[data-product-pager] .product-pager-name {
    height: auto !important;
    padding-top: 2px !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  /* Hero height fix for product/solution detail pages */
  .hero {
    min-height: auto !important;
    height: auto !important;
    padding-top: 84px !important;
    padding-bottom: 40px !important;
  }

  .hero-content {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  .hero-title {
    font-size: clamp(20px, 6vw, 28px) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    margin-bottom: 12px !important;
  }

  .hero-content>p,
  .hero-content p:not(.home-hero-desc) {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.6 !important;
    margin-top: 10px !important;
  }

  /* Intro section */
  .intro {
    padding: 30px 0 !important;
  }

  .intro p {
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.65 !important;
  }

  /* Dark band */
  .dark-band {
    height: auto !important;
    min-height: 180px !important;
  }

  .dark-band-copy {
    position: relative !important;
    inset: auto !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 30px 0 !important;
    height: auto !important;
  }
}

@media (max-width: 520px) {
  .benefit-panel {
    max-width: calc(100% - 24px) !important;
    gap: 16px !important;
  }

  .benefit-item {
    padding: 14px !important;
  }

  .benefit-title img {
    width: 28px !important;
    height: 30px !important;
  }

  .benefit-title h3 {
    font-size: 16px !important;
  }

  .benefit-item p,
  .benefit-item li {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .bottom-links {
    max-width: calc(100% - 24px) !important;
  }

  .bottom-link {
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  .hero-content {
    width: calc(100% - 28px) !important;
  }

  .hero-title {
    font-size: clamp(20px, 5.8vw, 24px) !important;
  }

  .intro p {
    max-width: calc(100% - 24px) !important;
  }
}

/* ============ Solution Pages: Industry Section Mobile Fixes ============ */

@media (max-width: 900px) {

  /* Solution hero */
  .solution-hero {
    height: auto !important;
    min-height: 360px !important;
    padding-top: 84px !important;
    padding-bottom: 40px !important;
  }

  .solution-hero .hero-content,
  .solution-hero .hero-content.reveal {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    padding-top: 20px !important;
  }

  .solution-hero .hero-content h1 {
    font-size: clamp(22px, 6.5vw, 30px) !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    letter-spacing: 0 !important;
  }

  .solution-hero .hero-content p {
    width: auto !important;
    max-width: 100% !important;
    margin-top: 12px !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 1.6 !important;
  }

  /* Industry section container */
  .industry,
  .solution-section.industry {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 30px !important;
    padding: 44px 0 20px !important;
  }

  .industry-grid {
    position: relative !important;
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    height: auto !important;
    margin: 30px auto 0 !important;
  }

  .industry-canvas {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    display: grid !important;
    gap: 18px !important;
  }

  /* Industry cards: convert from absolute positioning to normal flow */
  .industry-card,
  .industry-card:nth-child(1),
  .industry-card:nth-child(2),
  .industry-card:nth-child(3),
  .industry-card:nth-child(4) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 20px !important;
    overflow: visible !important;
    background: #fff !important;
    border: 1px solid rgba(58, 110, 200, .15) !important;
    border-radius: 12px !important;
    -webkit-mask: none !important;
    mask: none !important;
    transition: transform .28s ease, box-shadow .28s ease !important;
  }

  .industry-card::after {
    display: none !important;
  }

  .industry-card:hover,
  .industry-card:focus-visible {
    transform: translateY(-4px) !important;
    filter: none !important;
    box-shadow: 0 8px 24px rgba(60, 92, 179, .12) !important;
  }

  .industry-num {
    margin-bottom: 10px !important;
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.3 !important;
    color: #28489f !important;
  }

  .industry-card h3 {
    width: auto !important;
    max-width: 100% !important;
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .industry-card p {
    width: auto !important;
    max-width: 100% !important;
    margin-top: 8px !important;
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.6 !important;
  }

  /* Arch section - solution pages */
  .architecture {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .arch-grid {
    width: auto !important;
    max-width: calc(100% - 32px) !important;
    height: auto !important;
    margin: 30px auto 0 !important;
  }

  .arch-canvas {
    gap: 18px !important;
  }

  .arch-card,
  .arch-card:nth-child(1),
  .arch-card:nth-child(2),
  .arch-card:nth-child(3),
  .arch-card:nth-child(4),
  .arch-card:nth-child(5),
  .arch-card:nth-child(6) {
    min-height: 0 !important;
    padding: 16px 16px 16px 68px !important;
  }

  .arch-card h3 {
    font-size: clamp(17px, 4.8vw, 20px) !important;
    line-height: 1.35 !important;
  }

  .arch-card p {
    font-size: clamp(13px, 3.6vw, 15px) !important;
    line-height: 1.55 !important;
  }

  /* Feature band (solution) */
  .feature-band {
    padding: 44px 16px !important;
  }

  .feature-layout {
    gap: 24px !important;
  }

  .feature-tabs {
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  .feature-tab {
    font-size: clamp(14px, 4vw, 16px) !important;
    line-height: 1.4 !important;
    padding: 8px 14px !important;
    min-height: 36px !important;
  }

  .feature-card {
    padding: 16px !important;
  }

  .feature-card h3 {
    font-size: clamp(17px, 4.8vw, 20px) !important;
    line-height: 1.35 !important;
  }

  .feature-card p {
    margin-top: 10px !important;
    font-size: clamp(13px, 3.5vw, 15px) !important;
    line-height: 1.55 !important;
  }

  .feature-active-icon {
    width: 60px !important;
    height: 60px !important;
    margin-bottom: 16px !important;
  }

  .feature-active-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* AI section */
  .ai-section {
    min-height: auto !important;
    padding-bottom: 44px !important;
  }

  /* Value cards on solution pages */
  .value-card {
    padding: 16px !important;
  }
}

@media (max-width: 520px) {
  .solution-hero {
    min-height: 300px !important;
    padding-top: 80px !important;
    padding-bottom: 32px !important;
  }

  .solution-hero .hero-content {
    width: calc(100% - 28px) !important;
    padding-top: 10px !important;
  }

  .solution-hero .hero-content h1 {
    font-size: clamp(20px, 6vw, 24px) !important;
  }

  .solution-hero .hero-content p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .industry-grid {
    max-width: calc(100% - 24px) !important;
    margin-top: 20px !important;
  }

  .industry-canvas {
    gap: 14px !important;
  }

  .industry-card,
  .industry-card:nth-child(1),
  .industry-card:nth-child(2),
  .industry-card:nth-child(3),
  .industry-card:nth-child(4) {
    padding: 16px !important;
    border-radius: 10px !important;
  }

  .industry-num {
    margin-bottom: 8px !important;
    font-size: 22px !important;
  }

  .industry-card h3 {
    font-size: 17px !important;
  }

  .industry-card p {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .arch-grid {
    max-width: calc(100% - 24px) !important;
  }

  .arch-card,
  .arch-card:nth-child(1),
  .arch-card:nth-child(2),
  .arch-card:nth-child(3),
  .arch-card:nth-child(4),
  .arch-card:nth-child(5),
  .arch-card:nth-child(6) {
    padding: 14px 14px 14px 60px !important;
  }

  .arch-card h3 {
    font-size: 17px !important;
  }

  .arch-card p {
    font-size: 13px !important;
  }

  .feature-band {
    padding: 36px 12px !important;
  }

  .feature-tab {
    font-size: 14px !important;
    padding: 7px 12px !important;
  }
}

/* ============ Home Page Hero / Carousel Mobile Fixes ============ */

@media (max-width: 900px) {

  /* Home hero: shrink height, stack content below topbar */
  .home-hero {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 84px !important;
    padding-bottom: 44px !important;
  }

  .home-hero .hero-content {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 10px 16px 0 !important;
    z-index: 2;
  }

  .home-hero .home-hero-kicker,
  .home-hero .home-hero-title {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-size: clamp(26px, 6.8vw, 36px) !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  .home-hero .home-hero-kicker {
    margin: 0 0 8px !important;
  }

  .home-hero .home-hero-title {
    margin: 0 0 12px !important;
  }

  .home-hero .home-hero-tagline {
    width: auto !important;
    margin: 0 0 12px !important;
    color: rgba(255, 255, 255, .96) !important;
    font-size: clamp(16px, 4.2vw, 20px) !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .home-hero .home-hero-desc {
    width: auto !important;
    max-width: none !important;
    margin: 0 0 18px !important;
    font-size: clamp(14px, 3.6vw, 17px) !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, .9) !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  .home-hero-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .home-hero-actions .home-btn,
  .home-btn-primary,
  .home-btn-ghost {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 46px !important;
    height: auto !important;
    padding: 0 16px !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 46px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* Hide carousel arrows on mobile (touch swipe is enough) */
  .home-hero-arrow,
  .home-hero-arrow-left,
  .home-hero-arrow-right {
    display: none !important;
  }

  /* Carousel dots: make them larger & reposition for mobile */
  .home-hero-dots {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 18px auto 0 !important;
    width: 100% !important;
  }

  .home-hero-dots button {
    width: 28px !important;
    height: 4px !important;
    border-radius: 2px !important;
    opacity: .6 !important;
  }

  .home-hero-dots button.is-active {
    width: 36px !important;
    opacity: 1 !important;
  }

  /* Chinese locale mobile tuning */
  html[data-locale="zh-CN"] .home-hero .home-hero-title {
    font-size: clamp(24px, 6.2vw, 32px) !important;
  }

  html[data-locale="zh-CN"] .home-hero .home-hero-tagline {
    font-size: clamp(14px, 3.6vw, 17px) !important;
  }

  html[data-locale="zh-CN"] .home-hero .home-hero-desc {
    font-size: clamp(13px, 3.4vw, 15px) !important;
  }

  html[data-locale="zh-CN"] .home-hero .home-btn {
    font-size: 14px !important;
  }
}

@media (max-width: 520px) {

  .home-hero {
    padding-top: 80px !important;
    padding-bottom: 36px !important;
  }

  .home-hero .hero-content {
    padding: 8px 14px 0 !important;
  }

  .home-hero .home-hero-kicker,
  .home-hero .home-hero-title {
    font-size: clamp(22px, 6.6vw, 28px) !important;
  }

  .home-hero .home-hero-tagline {
    font-size: clamp(15px, 4.2vw, 18px) !important;
    letter-spacing: 0 !important;
  }

  .home-hero .home-hero-desc {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin-bottom: 14px !important;
  }

  .home-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .home-hero-actions .home-btn,
  .home-btn-primary,
  .home-btn-ghost {
    min-height: 42px !important;
    line-height: 42px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
  }

  html[data-locale="zh-CN"] .home-hero .home-hero-title {
    font-size: clamp(22px, 6.4vw, 27px) !important;
  }

  html[data-locale="zh-CN"] .home-hero .home-hero-tagline {
    font-size: 14px !important;
  }

  html[data-locale="zh-CN"] .home-hero .home-hero-desc {
    font-size: 12px !important;
  }

  html[data-locale="zh-CN"] .home-hero .home-btn {
    font-size: 13px !important;
  }
}

@media (max-width: 402px) {

  .home-hero-actions {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .home-hero-actions .home-btn,
  .home-btn-primary,
  .home-btn-ghost {
    width: 100% !important;
  }
}

/* ============ Buttons Mobile Fixes ============ */

@media (max-width: 900px) {

  /* Hero action buttons */
  .home-hero-actions,
  .hero-actions {
    gap: 12px !important;
  }

  .home-btn,
  .hero-actions .home-btn,
  .hero-actions a,
  .btn-primary,
  .btn-outline,
  .btn {
    width: auto !important;
    min-width: 0 !important;
    min-height: 44px !important;
    padding: 0 22px !important;
    font-size: clamp(14px, 3.8vw, 16px) !important;
    line-height: 44px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
  }

  /* Pagination buttons */
  .pagination a,
  .pagination span {
    min-height: 38px !important;
    min-width: 38px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    line-height: 38px !important;
  }

  /* News tabs / feature tabs */
  .news-tabs a,
  .tabs button {
    min-height: 38px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
  }

  /* Bottom product/solution pager links */
  .bottom-link,
  .pager-link,
  .product-pager a,
  .solution-pager a {
    min-height: 46px !important;
    padding: 12px 18px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Contact / CTA buttons */
  .consult-btn,
  .trial-btn,
  .contact-btn,
  a.btn,
  button.btn {
    min-height: 42px !important;
    padding: 0 20px !important;
    font-size: 15px !important;
    line-height: 42px !important;
  }
}

@media (max-width: 520px) {

  .home-btn,
  .hero-actions .home-btn,
  .hero-actions a,
  .btn-primary,
  .btn-outline,
  .btn {
    min-height: 40px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    line-height: 40px !important;
  }

  .bottom-link,
  .pager-link,
  .product-pager a,
  .solution-pager a {
    min-height: 42px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
}

/* ============ Solution Pager (product-links) Mobile Fixes ============ */

@media (max-width: 900px) {
  .product-links[data-solution-pager] {
    aspect-ratio: auto !important;
    padding: 14px 16px !important;
  }

  .product-links[data-solution-pager]::before {
    display: none !important;
  }

  .product-links[data-solution-pager]>.product-link {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 64px !important;
    padding: 12px 16px !important;
  }

  .product-links[data-solution-pager]>.product-link.prev {
    margin-bottom: 12px !important;
  }

  .product-links[data-solution-pager]>.product-link.next {
    flex-direction: row-reverse !important;
  }

  .product-links[data-solution-pager] .solution-pager-art {
    display: none !important;
  }

  .product-links[data-solution-pager] .solution-pager-arrow {
    position: static !important;
    flex: 0 0 auto !important;
    width: 22px !important;
  }

  .product-links[data-solution-pager] .solution-pager-copy {
    position: static !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 2px !important;
  }

  .product-links[data-solution-pager]>.product-link.next .solution-pager-copy {
    align-items: flex-end !important;
    text-align: right !important;
  }

  .product-links[data-solution-pager] .solution-pager-kicker,
  .product-links[data-solution-pager] .solution-pager-name {
    max-width: 100% !important;
  }

  .product-links[data-solution-pager] .solution-pager-kicker {
    font-size: 12px !important;
    line-height: 18px !important;
  }

  .product-links[data-solution-pager] .solution-pager-name {
    height: auto !important;
    padding-top: 0 !important;
    font-size: 15px !important;
    line-height: 22px !important;
  }
}

/* ============ News List Page Mobile Fixes ============ */

@media (max-width: 900px) {

  /* Hero section */
  .news-hero {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 84px !important;
    padding-bottom: 40px !important;
  }

  .news-hero::after {
    inset: 84px 0 0 !important;
  }

  .news-hero-inner {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    padding-top: 36px !important;
  }

  .news-hero h1 {
    font-size: clamp(26px, 6.5vw, 36px) !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  .news-hero p {
    width: auto !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.55 !important;
    margin-top: 10px !important;
  }

  /* Tabs */
  .news-tabs-section {
    padding: 32px 16px !important;
  }

  .news-tabs {
    gap: 10px !important;
  }

  .news-tabs a {
    min-height: 48px !important;
    padding: 6px 16px !important;
    font-size: clamp(14px, 3.8vw, 18px) !important;
    line-height: 28px !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* List section */
  .news-list-section {
    padding: 24px 16px 56px !important;
  }

  .news-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .news-card {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .news-card-media {
    height: 200px !important;
    min-height: 200px !important;
  }

  .news-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .news-card-body {
    min-height: 0 !important;
    padding: 16px 18px 20px !important;
    flex: 1 1 auto !important;
  }

  .news-date {
    font-size: 14px !important;
    line-height: 22px !important;
    margin-bottom: 8px !important;
  }

  .news-card h2 {
    height: auto !important;
    min-height: 0 !important;
    font-size: clamp(18px, 4.8vw, 22px) !important;
    line-height: 1.45 !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .news-summary {
    height: auto !important;
    min-height: 0 !important;
    font-size: clamp(14px, 3.6vw, 16px) !important;
    line-height: 1.6 !important;
    margin-bottom: 14px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .read-more {
    font-size: 14px !important;
    line-height: 22px !important;
  }

  .read-more::after {
    width: 18px !important;
    height: 18px !important;
    background-size: 18px 18px !important;
  }
}

@media (max-width: 520px) {

  .news-hero {
    padding-top: 76px !important;
    padding-bottom: 32px !important;
  }

  .news-hero h1 {
    font-size: clamp(22px, 6.8vw, 28px) !important;
  }

  .news-hero p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .news-card-media {
    height: 180px !important;
    min-height: 180px !important;
  }

  .news-card-body {
    padding: 14px 16px 18px !important;
  }

  .news-card h2 {
    font-size: 18px !important;
    line-height: 26px !important;
  }

  .news-summary {
    font-size: 14px !important;
    line-height: 22px !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* ============ News Detail Page Mobile Fixes ============ */

@media (max-width: 900px) {

  .detail-heading {
    padding: 16px 16px 20px !important;
    border-bottom: 1px solid #eee !important;
  }

  .breadcrumb {
    font-size: 14px !important;
    line-height: 22px !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    gap: 6px !important;
  }

  .breadcrumb a {
    word-break: break-all !important;
  }

  .detail-title {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
    margin-top: 14px !important;
    margin-bottom: 0 !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  .detail-meta {
    flex-wrap: wrap !important;
    white-space: normal !important;
    gap: 10px 14px !important;
    margin-top: 12px !important;
    font-size: 14px !important;
    line-height: 22px !important;
    color: #888 !important;
  }

  .detail-meta span {
    white-space: normal !important;
    gap: 4px !important;
  }

  .detail-meta img {
    width: 16px !important;
    height: 16px !important;
  }

  .detail-content {
    padding: 20px 16px 56px !important;
  }

  .detail-card {
    padding: 20px 16px !important;
    border-radius: 10px !important;
  }

  .article-copy.cms-article-content {
    margin-top: 0 !important;
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.7 !important;
    text-align: left !important;
  }

  /* Images inside article content */
  .cms-article-content img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 16px auto !important;
    border-radius: 6px !important;
  }

  .cms-article-content p,
  .cms-article-content h1,
  .cms-article-content h2,
  .cms-article-content h3,
  .cms-article-content h4 {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Image fallback: if image fails to load, show placeholder */
  .cms-article-content img,
  .news-card-media img {
    background: #f0f0f0 !important;
    min-height: 120px !important;
  }

  .cms-article-content img::before,
  .news-card-media img::before {
    content: '' !important;
    display: none !important;
  }

  /* Pager section */
  .detail-divider {
    margin-top: 28px !important;
    padding-top: 20px !important;
  }

  .detail-pager {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .pager-card,
  .pager-link {
    min-height: 0 !important;
    padding: 14px !important;
    gap: 10px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
  }

  .pager-card.next {
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .pager-icon {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 auto !important;
  }

  .pager-text,
  .pager-link span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .pager-text small,
  .pager-link small {
    font-size: 13px !important;
    line-height: 20px !important;
    display: block !important;
    margin-bottom: 2px !important;
  }

  .pager-text strong,
  .pager-link strong {
    font-size: 16px !important;
    line-height: 24px !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
}

@media (max-width: 520px) {

  .detail-heading {
    padding: 14px 14px 16px !important;
  }

  .detail-title {
    font-size: 20px !important;
    line-height: 28px !important;
  }

  .detail-meta {
    font-size: 13px !important;
    gap: 8px 12px !important;
  }

  .detail-content {
    padding: 16px 12px 48px !important;
  }

  .detail-card {
    padding: 16px 14px !important;
  }

  .article-copy.cms-article-content {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  .pager-link,
  .pager-card {
    padding: 12px !important;
  }

  .pager-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .pager-text strong,
  .pager-link strong {
    font-size: 15px !important;
    line-height: 22px !important;
  }

  .pager-text small,
  .pager-link small {
    font-size: 12px !important;
    line-height: 18px !important;
  }
}