
:root {
  --sdm-bg: #f4f7fb;
  --sdm-card: #ffffff;
  --sdm-text: #071a34;
  --sdm-muted: #66758a;
  --sdm-blue: #0057d8;
  --sdm-border: #dfe8f4;
  --sdm-shadow: 0 14px 36px rgba(10, 30, 58, .08);
}

/* Smart Delivery final mobile version */
@media (max-width: 900px) {
  html,
  body {
    overflow-x: hidden !important;
    background: var(--sdm-bg) !important;
  }

  body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  .container {
    width: min(calc(100% - 28px), 1280px) !important;
  }

  /* Header */
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    height: auto !important;
    background: rgba(255, 255, 255, .95) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(14, 31, 61, .06) !important;
    box-shadow: 0 4px 20px rgba(12, 28, 53, .05);
  }

  .header-inner {
    position: relative !important;
    min-height: 66px !important;
    height: auto !important;
    padding: 11px 0 !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .brand {
    min-width: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .brand img {
    width: auto !important;
    max-width: 166px !important;
    height: 28px !important;
    object-fit: contain !important;
  }

  .nav-toggle {
    margin-left: auto !important;
    width: 42px !important;
    height: 42px !important;
    border: 1px solid var(--sdm-border) !important;
    border-radius: 12px !important;
    background: #fff !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 18px rgba(9, 28, 56, .05);
    padding: 0 !important;
  }

  .nav-toggle span {
    display: block !important;
    width: 18px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #193152 !important;
    transition: transform .22s ease, opacity .22s ease;
  }

  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-header .main-nav {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 9px) !important;
    display: none !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
    padding: 8px 16px !important;
    background: rgba(255,255,255,.98) !important;
    border: 1px solid var(--sdm-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 44px rgba(10, 29, 57, .11) !important;
    gap: 0 !important;
    overflow: hidden !important;
    z-index: 30;
  }

  .site-header .main-nav.is-open { display: flex !important; }

  .site-header .main-nav a {
    display: flex !important;
    align-items: center !important;
    min-height: 46px !important;
    height: auto !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    color: var(--sdm-text) !important;
    border-top: 1px solid #edf2f8 !important;
    white-space: normal !important;
  }

  .site-header .main-nav a:first-child { border-top: 0 !important; }

  .site-header .main-nav a.active,
  .site-header .main-nav a[aria-current="page"] { color: var(--sdm-blue) !important; }

  .site-header .main-nav a.active::after,
  .site-header .main-nav a[aria-current="page"]::after { display: none !important; }

  .site-header .header-cta { display: none !important; }

  /* Hero: pure mobile-specific image */
  .sd-managed-hero.sd-hero-frame-1920x610,
  .home-hero.sd-managed-hero.sd-hero-frame-1920x610,
  .solutions-hero.sd-managed-hero.sd-hero-frame-1920x610,
  .technology-hero.sd-managed-hero.sd-hero-frame-1920x610,
  .series-hero.sd-managed-hero.sd-hero-frame-1920x610,
  .impact-hero.sd-managed-hero.sd-hero-frame-1920x610,
  .production-hero.sd-managed-hero.sd-hero-frame-1920x610 {
    width: 100% !important;
    margin: 0 !important;
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .sd-hero-panorama-image,
  .sd-managed-hero.sd-hero-frame-1920x610 .sd-hero-panorama-image {
    object-fit: cover !important;
    object-position: center center !important;
    background: #fff !important;
  }

  .sd-managed-hero .hero-copy,
  .sd-managed-hero .hero-actions,
  .impact-hero-panel { display: none !important; }

  /* Page rhythm */
  .section,
  .commitment-section,
  .welfare-section,
  .story-section,
  .values-section,
  .applications-cta-section,
  .platform-section,
  .sensing-section,
  .workflow-section,
  .quality-section,
  .roadmap-section,
  .unified-platform-section,
  .production-strip-section,
  .apps-section,
  .robot-section,
  .environment-section,
  .value {
    padding-top: 22px !important;
  }

  .section-head,
  .section-row-head,
  .section-left {
    margin-bottom: 14px !important;
  }

  .section-title,
  .section-row-head h2,
  .values-section h2,
  .app-cta h2,
  .production-copy h2,
  .story-content h2,
  .commitment-card h2,
  .cta-title,
  .validation-card h2,
  .workflow-section h2,
  .quality-section h2,
  .platform-title {
    font-size: 27px !important;
    line-height: 1.12 !important;
    letter-spacing: -0.04em !important;
  }

  p,
  .card-text,
  .section-subtitle,
  .story-content p,
  .commitment-card p,
  .production-copy p,
  .app-cta p,
  .cta-text {
    font-size: 14px !important;
    line-height: 1.62 !important;
  }

  .card,
  .feature-card,
  .image-card,
  .welfare-card,
  .value-card,
  .commitment-card,
  .story-card,
  .app-cta,
  .production-strip,
  .validation-card,
  .workflow-card,
  .workflow-step,
  .flow-card,
  .metric-card,
  .scenario-card,
  .platform-card,
  .stack-card,
  .capability-card,
  .reliability-card,
  .robot-card,
  .solution-card,
  .app-tile,
  .spec-card,
  .deployment-card {
    border-radius: 18px !important;
    box-shadow: 0 10px 30px rgba(14, 31, 61, .06) !important;
  }

  /* No duplicated navigation blocks on home */
  .feature-wrap,
  .environment-section {
    display: none !important;
  }

  /* Horizontal swipe for image/multi-element modules */
  .app-grid,
  .deployment-grid,
  .metric-grid,
  .platform-flow,
  .welfare-grid,
  .value-grid,
  .workflow-grid,
  .quality-grid,
  .scenario-grid,
  .platform-grid,
  .model-grid,
  .robot-grid,
  .series-grid,
  .card-grid,
  .env-mini-grid,
  .tech-stack,
  .capability-grid,
  .roadmap-grid,
  .timeline-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 14px 14px !important;
    margin-left: -14px !important;
    margin-right: -14px !important;
  }

  .app-grid::-webkit-scrollbar,
  .deployment-grid::-webkit-scrollbar,
  .metric-grid::-webkit-scrollbar,
  .platform-flow::-webkit-scrollbar,
  .welfare-grid::-webkit-scrollbar,
  .value-grid::-webkit-scrollbar,
  .workflow-grid::-webkit-scrollbar,
  .quality-grid::-webkit-scrollbar,
  .scenario-grid::-webkit-scrollbar,
  .platform-grid::-webkit-scrollbar,
  .model-grid::-webkit-scrollbar,
  .robot-grid::-webkit-scrollbar,
  .series-grid::-webkit-scrollbar,
  .card-grid::-webkit-scrollbar,
  .env-mini-grid::-webkit-scrollbar,
  .tech-stack::-webkit-scrollbar,
  .capability-grid::-webkit-scrollbar,
  .roadmap-grid::-webkit-scrollbar,
  .timeline-grid::-webkit-scrollbar {
    display: none;
  }

  .app-grid > *,
  .deployment-grid > *,
  .metric-grid > *,
  .platform-flow > *,
  .welfare-grid > *,
  .value-grid > *,
  .workflow-grid > *,
  .quality-grid > *,
  .scenario-grid > *,
  .platform-grid > *,
  .model-grid > *,
  .robot-grid > *,
  .series-grid > *,
  .card-grid > *,
  .env-mini-grid > *,
  .tech-stack > *,
  .capability-grid > *,
  .roadmap-grid > *,
  .timeline-grid > * {
    flex: 0 0 84% !important;
    max-width: 84% !important;
    scroll-snap-align: start !important;
  }

  .workflow-grid > *,
  .metric-grid > *,
  .platform-flow > *,
  .value-grid > * {
    flex-basis: 78% !important;
    max-width: 78% !important;
  }

  .robot-grid > *,
  .model-grid > *,
  .series-grid > * {
    flex-basis: 82% !important;
    max-width: 82% !important;
  }

  .image-card,
  .deployment-grid .image-card,
  .welfare-card {
    overflow: hidden !important;
  }

  .image-card img,
  .welfare-image img,
  .deployment-card img,
  .scenario-card img,
  .production-visual img,
  .story-image img,
  .robot-card img,
  .robot-card-image img,
  .model-image img {
    width: 100% !important;
    display: block !important;
  }

  .image-card img,
  .welfare-image img,
  .deployment-card .image-top,
  .deployment-card img,
  .scenario-card img,
  .production-visual img {
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    object-fit: cover !important;
  }

  .robot-card img,
  .robot-card-image img,
  .model-image img,
  .series-card img {
    object-fit: contain !important;
    background: #ffffff !important;
  }

  /* Home product cards are presentation, not tap targets */
  .robot-card-image,
  .app-grid .image-card {
    pointer-events: none !important;
  }

  /* CTA/image-text modules */
  .production-strip,
  .app-cta,
  .cta-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    min-height: 0 !important;
    padding: 18px !important;
    align-items: start !important;
  }

  .production-strip .production-visual {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .production-strip .production-copy h2,
  .cta-title,
  .app-cta h2 {
    font-size: 21px !important;
    line-height: 1.18 !important;
    margin: 0 0 8px !important;
  }

  .production-strip .production-copy p,
  .cta-text,
  .app-cta p {
    font-size: 13.5px !important;
    line-height: 1.58 !important;
    margin: 0 0 12px !important;
  }

  .production-strip .btn,
  .cta-strip .btn,
  .app-cta .btn,
  .cta-section .btn {
    width: 100% !important;
  }

  /* Reading-heavy story: mobile cards/slides instead of one huge block */
  .story-section.is-mobile-story-ready .story-card {
    display: none !important;
  }

  .sd-mobile-story-slider {
    display: flex !important;
    gap: 14px !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 14px 14px !important;
    margin: 0 -14px !important;
  }

  .sd-mobile-story-slider::-webkit-scrollbar { display: none; }

  .sd-mobile-story-card {
    flex: 0 0 86%;
    max-width: 86%;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid var(--sdm-border);
    border-radius: 20px;
    box-shadow: var(--sdm-shadow);
    overflow: hidden;
  }

  .sd-mobile-story-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
  }

  .sd-mobile-story-copy {
    padding: 16px;
  }

  .sd-mobile-story-copy h3 {
    margin: 0;
    font-size: 20px;
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: var(--sdm-text);
  }

  .sd-mobile-story-copy p {
    margin: 10px 0 0;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: var(--sdm-muted);
  }

  /* Footer mobile: two horizontal groups */
  .site-footer.sd-managed-footer {
    margin-top: 28px !important;
    padding: 26px 0 18px !important;
  }

  .sd-footer-managed-inner {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .sd-managed-footer .sd-footer-logo {
    width: 188px !important;
    max-width: 188px !important;
  }

  .sd-managed-footer .sd-footer-tagline {
    max-width: none !important;
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    opacity: .72 !important;
  }

  .sd-mobile-footer-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .sd-mobile-footer-tab {
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.76);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
  }

  .sd-mobile-footer-tab.is-active {
    background: #ffffff;
    color: #0A3561;
  }

  .sd-managed-footer .sd-footer-menu-board {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 16px !important;
    min-height: 148px;
  }

  .sd-managed-footer .sd-footer-menu-link {
    display: none !important;
    min-height: 34px !important;
    font-size: 13px !important;
    line-height: 1.36 !important;
  }

  .sd-managed-footer .sd-footer-menu-link.is-mobile-footer-visible {
    display: inline-flex !important;
  }

  .sd-managed-footer .footer-bottom {
    margin-top: 18px !important;
    padding-top: 12px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* Footer popup mobile */
  .release-footer-modal-root {
    padding: 12px !important;
  }

  .release-footer-modal-card {
    width: min(100%, 96vw) !important;
    max-height: 90vh !important;
    border-radius: 22px !important;
  }

  .release-footer-modal-content {
    padding: 22px 18px 20px !important;
  }

  .release-footer-modal-title,
  .release-footer-modal-card h2 {
    white-space: normal !important;
    font-size: 28px !important;
    line-height: 1.12 !important;
  }

  .release-footer-modal-subtitle {
    font-size: 14px !important;
  }

  .release-footer-modal-body {
    max-height: 48vh !important;
    font-size: 14px !important;
    line-height: 1.68 !important;
  }

  .release-footer-modal-card.has-certificate .release-footer-modal-content {
    display: block !important;
  }

  .release-footer-modal-card.has-certificate .release-footer-modal-body p {
    white-space: normal !important;
  }

  .release-footer-modal-card.has-certificate .release-footer-modal-certificate {
    margin-top: 18px !important;
  }

  .release-footer-modal-certificate img {
    max-height: 58vh !important;
    object-fit: contain !important;
  }
}

@media (max-width: 480px) {
  .app-grid > *,
  .deployment-grid > *,
  .welfare-grid > *,
  .robot-grid > *,
  .model-grid > *,
  .series-grid > *,
  .sd-mobile-story-card {
    flex-basis: 88% !important;
    max-width: 88% !important;
  }

  .workflow-grid > *,
  .metric-grid > *,
  .platform-flow > *,
  .value-grid > * {
    flex-basis: 84% !important;
    max-width: 84% !important;
  }
}


/* Desktop isolation: mobile footer tabs must never affect desktop footer */
.sd-mobile-footer-tabs {
  display: none !important;
}

@media (min-width: 901px) {
  .sd-mobile-footer-tabs {
    display: none !important;
  }

  .sd-managed-footer .sd-footer-menu-board {
    display: grid !important;
    grid-template-columns: repeat(var(--sd-footer-menu-items-per-row, 4), minmax(0, 1fr)) !important;
  }

  .sd-managed-footer .sd-footer-menu-link {
    display: inline-flex !important;
  }
}


@media (max-width: 900px) {
  .sd-mobile-footer-tabs {
    display: grid !important;
  }
}
