:root {
  --mobile-header-height: 64px;
  --mobile-drawer-width: min(78vw, 300px);
}

.site-mobile-overlay,
.site-mobile-drawer {
  display: none;
}

.footer-accordion-toggle {
  display: none;
}

.footer-accordion-panel {
  display: contents;
}

/* The source export used a 1480px desktop canvas. Keep its composition at
   wide sizes, but make the canvas fluid as soon as the viewport is narrower. */
@media (max-width: 1479px) {
  html,
  body {
    width: 100%;
    min-width: 0 !important;
  }

  body > main,
  body > footer,
  main,
  main > section,
  .site-header,
  .site-footer,
  .hero,
  .highlights,
  .home-notice,
  .platform,
  .product-advantages,
  .platform-chain,
  .customer-feedback,
  .about-us {
    width: 100%;
    min-width: 0 !important;
    max-width: 100%;
  }

  .content-width,
  .nav-inner,
  .hero-inner,
  .highlight-grid {
    width: calc(100% - 48px) !important;
    max-width: 1480px !important;
  }

  .hero-media-frame,
  .hero-overlay {
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .site-header .nav-inner {
    grid-template-columns: minmax(170px, 1fr) minmax(0, 2.4fr) minmax(230px, 1fr) !important;
  }

  .site-header .primary-nav {
    gap: clamp(16px, 2.2vw, 32px) !important;
  }

  .site-header .nav-actions {
    gap: 10px !important;
  }

  .platform-chain-showcase {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(36px, 5vw, 72px);
  }

  .platform-chain-artwork,
  .platform-chain-artwork-shell,
  .platform-chain-artwork-shell > img,
  .platform-chain-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .platform-chain-artwork-shell > img {
    height: 100%;
    object-fit: contain;
  }
}

@media (max-width: 1279px) {
  .footer-grid {
    grid-template-columns:
      repeat(4, minmax(110px, 1fr))
      minmax(210px, 1.5fr)
      140px;
    justify-content: stretch;
    gap: clamp(14px, 1.5vw, 20px);
  }

  .footer-column,
  .footer-qr {
    min-width: 0;
  }

  .ceph-page .pd-hero {
    overflow: hidden;
  }

  .ceph-page .ceph-rights-board {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .ceph-page .ceph-plan-grid {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(150px, .72fr) repeat(3, minmax(0, 1fr));
  }

  .ceph-page .ceph-plan,
  .ceph-page .ceph-plan-corner {
    min-width: 0;
  }

  .ceph-page .ceph-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (min-width: 761px) and (max-width: 1279px) {
  .ceph-page .ceph-rights-table {
    width: 100%;
    min-width: 0;
  }

  .ceph-page .ceph-rights-table .ceph-feature-column {
    width: clamp(150px, 18vw, 190px);
  }
}

@media (max-width: 1180px) {
  html,
  body {
    width: 100%;
    min-width: 0 !important;
  }

  body {
    position: relative;
  }

  body.site-menu-open {
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.site-menu-open .xiaofang-idle,
  body.site-menu-open .xiaofang-speech,
  body.site-menu-open .xiaofang-chat,
  body.site-menu-open .xiaofang-chat-pet-slot {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body > main,
  body > footer,
  body > .site-footer,
  main,
  main > section,
  .site-footer {
    min-width: 0 !important;
    max-width: 100%;
  }

  body > main {
    padding-top: var(--mobile-header-height);
  }

  .content-width,
  .nav-inner,
  .hero-inner {
    width: min(100% - 48px, 100%) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  /* Product-detail.css gives its content shell a higher-specificity fixed
     width. Override that source-export rule at the same mobile breakpoint so
     cloud/DCIM/CEPH sections get a real viewport-sized content column. */
  .product-detail-page .content-width {
    width: min(100% - 48px, 100%) !important;
    max-width: 100% !important;
  }

  /* The homepage video was authored on a 1480px desktop canvas. The source
     rule kept a 1421px render width and a +144px translation even after the
     frame became fluid, so mobile only showed a cropped slice. Fit each video
     to the actual mobile frame and center the full source instead. */
  .hero-media-frame .hero-video {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    transform: none !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  .highlights .highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px;
  }

  .highlights .tilt-card-shell,
  .highlights .highlight-card {
    height: auto;
  }

  .feedback-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .feedback-card {
    min-width: 0;
    height: auto;
    min-height: 260px;
  }

  /* The source export uses a fixed 530px + 910px canvas for this section.
     On a narrow viewport the formal content must flow vertically so neither
     the list nor the visual stage is hidden by the section's overflow clip. */
  .product-advantages .content-width {
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-advantages .advantages-layout {
    width: 100%;
    min-width: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .product-advantages .advantages-list {
    width: 100%;
    height: auto;
    min-width: 0;
    padding: 0;
    gap: 8px;
  }

  .product-advantages .advantage-item,
  .product-advantages .advantage-item.is-active {
    width: 100%;
    min-width: 0;
    overflow: visible;
    border-radius: var(--radius-panel);
  }

  .product-advantages .advantage-trigger {
    min-width: 0;
    min-height: 76px;
    padding: 14px 16px;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 16px;
  }

  .product-advantages .advantage-item.is-active .advantage-trigger {
    padding: 18px 16px 10px;
  }

  .product-advantages .advantage-summary,
  .product-advantages .advantage-summary strong,
  .product-advantages .advantage-summary > span {
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }

  .product-advantages .advantage-summary > span {
    max-height: none;
  }

  .product-advantages .advantage-item.is-active .advantage-summary > span {
    max-height: none;
    opacity: 1;
    transform: none;
  }

  .product-advantages .advantage-detail,
  .product-advantages .advantage-item.is-active .advantage-detail {
    height: auto;
    max-height: none;
    margin-top: 0;
    overflow: visible;
    opacity: 1;
  }

  .product-advantages .advantage-detail > div {
    height: auto;
    overflow: visible;
  }

  .product-advantages .advantage-detail p {
    display: block;
    height: auto;
    max-height: none;
    padding: 0 16px 20px 88px;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    transform: none;
  }

  .product-advantages .advantages-stage {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: clamp(300px, 72vw, 740px);
    overflow: hidden;
  }

  .product-advantages .advantages-visual-stack,
  .product-advantages .advantages-illustration {
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  /* Business capability lab is another desktop split (460px nav + preview).
     Stack the selectable feature list above its demo on narrow screens so the
     preview never collapses to zero width. */
  .business-page .bms-capability-showcase {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  .business-page .bms-capability-nav,
  .business-page .bms-capability-preview {
    width: 100%;
    min-width: 0;
    grid-column: auto;
    grid-row: auto;
  }

  .business-page .bms-capability-nav {
    order: 1;
    height: auto;
  }

  .business-page .bms-capability-option {
    width: 100%;
    max-width: 100%;
    padding-left: 42px;
    transform: none;
  }

  .business-page .bms-capability-option.is-active {
    --capability-shift: 0px;
  }

  .business-page .bms-capability-option-copy,
  .business-page .bms-capability-option-copy > span {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .business-page .bms-capability-marker {
    left: 10px;
  }

  .business-page .bms-capability-preview {
    order: 2;
    height: auto;
    aspect-ratio: 1962 / 1080;
  }

  /* Business future-proofing section: the desktop 620px + 780px split must
     become a readable copy block followed by the illustration. */
  .business-page .bms-future-layout {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
  }

  .business-page .bms-future-copy {
    width: 100%;
    min-width: 0;
    padding: 0;
  }

  .business-page .bms-future-copy h3,
  .business-page .bms-future-description,
  .business-page .bms-future-points,
  .business-page .bms-future-point {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .business-page .bms-future-copy h3 {
    font-size: clamp(25px, 5.8vw, 32px);
    line-height: 1.45;
    text-align: left;
  }

  .business-page .bms-future-description {
    text-align: left;
    overflow-wrap: anywhere;
  }

  .business-page .bms-future-visual {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 300px;
    aspect-ratio: 750 / 550;
    justify-self: auto;
  }

  .business-page .bms-future-scene {
    width: min(389px, 86%);
    max-width: 100%;
  }

  /* Metric cells are a compact mobile grid, not a four-column table. Avoid
     leaving a misleading vertical rule through the middle of the grid. */
  .experience-page .company-metrics article {
    border-right: 0 !important;
  }

  /* Parallax transforms are useful on desktop but can translate the formal
     timeline copy outside a narrow viewport. Keep the text column stable on
     mobile; decorative depth layers may continue to animate independently. */
  .experience-page .depth-copy {
    width: 100%;
    max-width: 100%;
    transform: none !important;
  }

  .experience-page .depth-copy li.is-active {
    transform: none !important;
  }

  /* The source export also fixes this block at 685px + 685px and prevents
     each sentence from wrapping. Let copy and artwork stack on mobile. */
  .about-us .about-showcase {
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  .about-us .about-copy {
    width: 100%;
    height: auto;
    min-width: 0;
    padding: 0;
  }

  .about-us .about-copy > p {
    width: 100%;
    max-width: 100%;
    font-size: 17px;
    line-height: 1.9;
  }

  .about-us .about-copy > p span {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .about-us .about-cta {
    width: min(246px, 100%);
    max-width: 100%;
    margin-top: 28px;
  }

  .about-us .about-visual {
    width: 100%;
    height: auto;
    min-width: 0;
  }

  .about-us .about-visual img {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  /* About timeline cards are desktop-positioned left/right layers. On a
     narrow screen render every milestone as a normal full-width card so no
     historical detail is pushed outside the viewport. */
  .about-experience-page .about-depth-scene {
    min-height: 0;
    height: auto;
  }

  .about-experience-page .about-depth-scene .depth-sticky {
    position: relative;
    min-height: 0;
    height: auto;
    padding: 76px 0 84px;
  }

  .about-experience-page .about-depth-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 34px;
  }

  .about-experience-page .journey-stage {
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    transform: none !important;
  }

  .about-experience-page .journey-line,
  .about-experience-page .journey-orbit {
    display: none;
  }

  .about-experience-page .journey-card,
  .about-experience-page .journey-card-one,
  .about-experience-page .journey-card-two,
  .about-experience-page .journey-card-three,
  .about-experience-page .journey-card-four,
  .about-experience-page .journey-card-five {
    position: relative;
    inset: auto !important;
    width: 100%;
    min-height: 148px;
    margin: 0 0 16px;
    padding: 24px 22px 24px 82px;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .about-experience-page .journey-card:last-child {
    margin-bottom: 0;
  }

  /* Keep the floating helper from covering copy or card details on phones. */
  .xiaofang-idle,
  .xiaofang-idle.site-xiaofang-assistant {
    right: 8px;
    bottom: 8px;
    width: 82px;
    height: 82px;
  }

  .site-header {
    position: fixed !important;
    z-index: 1200 !important;
    top: 0 !important;
    right: 0;
    left: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--mobile-header-height) !important;
  }

  .site-header .nav-inner {
    height: var(--mobile-header-height) !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .site-header .brand {
    width: auto !important;
    max-width: 150px;
    display: flex;
    flex: 0 1 auto;
  }

  .site-header .brand img {
    width: auto;
    max-width: 128px;
    height: 30px;
  }

  .site-header .primary-nav,
  body:not(.support-page) .site-header .nav-inner > .nav-actions {
    display: none !important;
  }

  .site-header .menu-toggle {
    position: relative;
    z-index: 1402;
    width: 44px;
    height: 44px;
    display: grid !important;
    flex: 0 0 44px;
    padding: 0;
    place-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
  }

  .site-header .menu-toggle span {
    grid-area: 1 / 1;
    width: 24px;
    height: 2px;
    margin: 0;
    display: block;
    border-radius: 2px;
    background: #3a4459;
    transition: transform 220ms ease, opacity 180ms ease;
  }

  .site-header .menu-toggle span:first-child { transform: translateY(-7px); }
  .site-header .menu-toggle span:last-child { transform: translateY(7px); }
  body.site-menu-open .site-header .menu-toggle span:first-child { transform: rotate(45deg); }
  body.site-menu-open .site-header .menu-toggle span:nth-child(2) { opacity: 0; }
  body.site-menu-open .site-header .menu-toggle span:last-child { transform: rotate(-45deg); }

  .site-mobile-overlay {
    position: fixed;
    z-index: 1250;
    inset: 0;
    width: 100%;
    height: 100dvh;
    display: block;
    padding: 0;
    border: 0;
    background: rgba(22, 28, 43, .46);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 220ms ease, visibility 0s linear 220ms;
  }

  .site-mobile-drawer {
    position: fixed;
    z-index: 1300;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--mobile-drawer-width);
    height: 100dvh;
    max-width: calc(100vw - 64px);
    display: flex;
    flex-direction: column;
    color: #3a4459;
    background: #fff;
    box-shadow: -22px 0 54px rgba(30, 38, 56, .18);
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path 260ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 260ms;
  }

  body.site-menu-open .site-mobile-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  body.site-menu-open .site-mobile-drawer {
    clip-path: inset(0);
    visibility: visible;
    transition-delay: 0s;
  }

  .site-mobile-drawer-header {
    min-height: var(--mobile-header-height);
    display: flex;
    flex: 0 0 var(--mobile-header-height);
    align-items: center;
    justify-content: space-between;
    padding: 0 18px 0 24px;
    border-bottom: 1px solid #edf0f4;
  }

  .site-mobile-drawer-header strong {
    color: #313b50;
    font-size: 16px;
    font-weight: 650;
  }

  .site-mobile-drawer-close {
    position: relative;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
  }

  .site-mobile-drawer-close::before,
  .site-mobile-drawer-close::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 10px;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: #3a4459;
  }

  .site-mobile-drawer-close::before { transform: rotate(45deg); }
  .site-mobile-drawer-close::after { transform: rotate(-45deg); }

  .site-mobile-drawer-scroll {
    min-height: 0;
    flex: 1 1 auto;
    padding: 12px 24px 28px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-mobile-drawer .primary-nav {
    width: 100%;
    height: auto;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-mobile-drawer .nav-entry,
  .site-mobile-drawer .nav-menu-trigger {
    width: 100%;
    min-height: 52px;
    height: auto;
    display: flex;
    justify-content: space-between;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #edf0f4;
    color: #3f495d;
    background: transparent;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
  }

  .site-mobile-drawer .nav-link::after,
  .site-mobile-drawer .nav-label::after {
    display: none !important;
  }

  .site-mobile-drawer .nav-item {
    width: 100%;
    height: auto;
    display: block;
  }

  .site-mobile-drawer .nav-chevron {
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0;
    display: block;
    border: 0;
    transform: none;
    transform-origin: center;
  }

  .site-mobile-drawer .nav-chevron::before,
  .site-mobile-drawer .nav-chevron::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 3px;
    width: 12px;
    height: 1px;
    background: currentColor;
  }

  .site-mobile-drawer .nav-chevron::after {
    transform: rotate(90deg);
    transition: transform 180ms ease;
  }

  .site-mobile-drawer .nav-item.is-open .nav-chevron { transform: none; }
  .site-mobile-drawer .nav-item.is-open .nav-chevron::after { transform: rotate(0); }

  .site-mobile-drawer .nav-dropdown {
    position: static;
    width: 100%;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 0;
    inset: auto !important;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: #f7f8fa;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none !important;
    transition: max-height 220ms ease;
  }

  .site-mobile-drawer .nav-item.is-open .nav-dropdown { max-height: 320px; }
  .site-mobile-drawer .nav-dropdown-list {
    width: 100%;
    padding: 8px 0;
    clip-path: none !important;
    transform: none !important;
    opacity: 1;
  }
  .site-mobile-drawer .nav-dropdown-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: #6d7687;
    font-size: 14px;
    text-decoration: none;
  }

  .site-mobile-drawer .nav-actions {
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 24px;
  }

  .site-mobile-drawer .site-language-switcher {
    position: relative;
    grid-column: 1 / -1;
  }

  .site-mobile-drawer .language {
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
  }

  .site-mobile-drawer .site-language-menu {
    position: static;
    width: 100%;
    margin-top: 6px;
    box-shadow: none;
  }

  .site-mobile-drawer .login,
  .site-mobile-drawer .signup {
    width: 100% !important;
    min-width: 0;
    height: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e6ed;
    border-radius: 4px;
    text-decoration: none;
  }

  .site-mobile-drawer .signup {
    color: #fff;
    border-color: #ff6868;
    background: #ff6868;
  }

  .footer-grid {
    width: 100%;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .footer-column:not(.footer-contact) {
    width: 100%;
    display: block !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }

  .footer-column:not(.footer-contact) > h2 {
    display: none !important;
  }

  .footer-accordion-toggle {
    width: 100%;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    border: 0;
    color: #f2f2f3;
    background: transparent;
    font: 500 15px/1.3 var(--font, sans-serif);
    text-align: left;
    cursor: pointer;
  }

  .footer-accordion-toggle::after {
    content: "+";
    color: currentColor;
    font-size: 20px;
    font-weight: 300;
  }

  .footer-accordion-toggle[aria-expanded="true"]::after { content: "−"; }
  .footer-accordion-panel {
    width: 100%;
    display: none;
    padding: 0 0 12px 16px;
    box-sizing: border-box;
  }
  .footer-accordion-toggle[aria-expanded="true"] + .footer-accordion-panel { display: flex; flex-direction: column; }
  .site-footer .footer-column:not(.footer-contact) .footer-accordion-panel > a {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    color: #92959b;
    font-size: 14px;
    line-height: 1.45;
    text-decoration: none;
    white-space: normal;
  }

  .footer-contact {
    width: 100%;
    margin-top: 28px;
  }

  .footer-qr {
    margin-top: 26px;
    justify-self: start !important;
  }

  .footer-legal {
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 8px 12px !important;
    line-height: 1.7;
  }

  .footer-legal i { display: none; }

  .platform-chain-showcase {
    grid-template-columns: 1fr;
  }

  .platform-chain-artwork {
    height: auto;
  }

  .platform-chain-artwork-shell {
    margin-inline: auto;
  }

  .platform-chain-content {
    height: auto;
    grid-template-rows: auto auto;
  }
}

@media (max-width: 760px) {
  .footer-legal {
    min-height: 0;
    padding: 20px 0;
    box-sizing: border-box;
    justify-content: center !important;
    text-align: center;
  }

  .footer-legal > span,
  .footer-legal > a {
    text-align: center;
  }

  .home-notice-bar {
    grid-template-columns: 78px minmax(0, 1fr) 68px;
  }

  .home-notice-heading {
    padding: 0 10px;
  }

  .home-notice-channel {
    top: 50%;
    left: 88px;
  }

  .home-notice-more {
    font-size: 11px;
    margin-right: 10px;
  }

  .home-notice-list[data-announcement-feed] {
    position: relative;
    height: 34px;
    min-height: 34px;
    display: block;
    overflow: hidden;
  }

  .home-notice-list[data-announcement-feed] .home-notice-slide {
    height: 34px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 34px;
  }

  .home-notice-list[data-announcement-feed] .home-notice-item {
    width: 100%;
    border: 0 !important;
    display: grid;
  }

  .home-notice-list > .home-notice-item:first-child,
  .home-notice-list[data-announcement-feed] .home-notice-slide > .home-notice-item:first-child {
    padding-left: 44px;
  }

  .license-result-image {
    width: 100%;
    max-height: 150px;
  }
  .content-width,
  .nav-inner,
  .hero-inner {
    width: calc(100% - 32px) !important;
  }

  .highlights .highlight-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  .highlights .tilt-card-shell,
  .highlights .highlight-card {
    min-height: 112px;
    height: auto !important;
  }

  .highlights .highlight-card {
    grid-template-columns: 54px minmax(0, 1fr);
    padding: 20px;
  }

  .highlights .highlight-card h2,
  .highlights .highlight-card p {
    display: block;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    -webkit-line-clamp: unset;
  }

  .feedback-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .feedback-card {
    min-height: 0;
    padding: 24px;
  }

  .feedback-card blockquote p {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }

  body.business-page .content-width.bms-hero-inner,
  body.product-detail-page.cloud-page:not(.ceph-page) .content-width.cloud-hero-inner {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .product-detail-page .cloud-hero-card-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .product-detail-page .cloud-hero-card h2,
  .product-detail-page .cloud-hero-card p {
    white-space: normal;
  }

  body.business-page .bms-hero-copy,
  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-copy,
  body.product-detail-page.dcim-page .dcim-hero-copy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.business-page .bms-hero-copy h1,
  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-copy h1,
  body.product-detail-page.dcim-page .dcim-hero-copy h1 {
    width: 100%;
    max-width: 100% !important;
    white-space: normal !important;
  }

  /* Product landing heroes use an intentionally layered desktop composition.
     On a phone that composition puts the oversized equipment illustration
     directly under the copy, making the heading/description look obscured.
     Give the copy its own readable band first, then keep the artwork as a
     subdued lower visual. These rules are mobile-only; desktop keeps the
     original two-dimensional composition. */
  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-home-hero,
  body.product-detail-page.dcim-page .dcim-home-hero {
    height: 700px;
    min-height: 700px;
    overflow: hidden;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-inner,
  body.product-detail-page.dcim-page .dcim-home-hero .pd-hero-inner {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    height: 100%;
    align-items: flex-start;
    padding-top: 58px;
    box-sizing: border-box;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-copy,
  body.product-detail-page.dcim-page .dcim-hero-copy {
    top: 0;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-copy h1,
  body.product-detail-page.dcim-page .dcim-hero-copy h1 {
    margin-bottom: 16px;
    font-size: clamp(30px, 8.2vw, 36px);
    line-height: 1.34;
    letter-spacing: -.04em;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-description,
  body.product-detail-page.dcim-page .dcim-hero-description {
    width: 100% !important;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.85;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-actions,
  body.product-detail-page.dcim-page .dcim-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-art,
  body.product-detail-page.dcim-page .dcim-hero-art {
    top: auto;
    right: -170px;
    bottom: -72px;
    width: 700px;
    height: 470px;
    opacity: .78;
    transform: none;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-float,
  body.product-detail-page.dcim-page .dcim-hero-float {
    width: 100%;
    height: 100%;
    transform: scale(.92);
    transform-origin: right bottom;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-visual,
  body.product-detail-page.dcim-page .dcim-hero-visual {
    width: 700px;
    max-width: none;
    height: auto;
  }

  /* The homepage copy needs the same top breathing room as the product
     heroes. The exported desktop video is very wide, so on mobile it sits
     low as a complete, contained visual; keeping the copy near the header
     prevents a large empty band above the actual message. */
  body > main > .hero .hero-inner {
    align-items: flex-start;
    padding-top: 48px;
  }

  body > main > .hero .hero-copy {
    margin-top: 0;
  }

  body > main > .hero .hero-media-frame .hero-video {
    /* Keep the full ultra-wide source (contain), but lift it into the lower
       half of the hero so the mobile composition does not leave a dead void
       between the CTA and the feature cards. */
    object-position: center 68% !important;
  }

  /* Cloud's desktop capability matrix is a wide selector plus detail card.
     On phones, show all selectors first in a compact two-column grid and put
     the full-width detail card below it. */
  body.cloud-page .cloud-feature-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
  }

  body.cloud-page .cloud-feature-constellation {
    grid-row: 1;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 78px;
    gap: 9px;
    padding: 10px;
  }

  body.cloud-page .cloud-feature-tile {
    width: 100%;
    min-height: 0;
    height: 78px;
    padding: 11px 12px;
    justify-content: center;
    transform: none;
  }

  body.cloud-page .cloud-feature-tile:hover,
  body.cloud-page .cloud-feature-tile:focus-visible {
    transform: none;
  }

  body.cloud-page .cloud-feature-number {
    font-size: 9px;
  }

  body.cloud-page .cloud-feature-tile strong {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.28;
  }

  body.cloud-page .cloud-feature-tile small,
  body.cloud-page .cloud-feature-orbit,
  body.cloud-page .cloud-feature-tile::after {
    display: none;
  }

  body.cloud-page .cloud-feature-detail {
    grid-row: 2;
    width: 100%;
    min-height: 340px;
    padding: 24px 20px 22px;
  }

  body.cloud-page .cloud-feature-detail-signal {
    height: 54px;
    margin: 25px 0 18px;
  }

  body.cloud-page .cloud-feature-detail p {
    min-height: 0;
    margin-bottom: 22px;
  }

  /* DCIM owns the same selector/preview relationship. Keep the five choices
     in a compact horizontal row above the preview, instead of placing the
     preview first and making users discover the controls afterwards. */
  body.dcim-page .dcim-capabilities .bms-capability-showcase {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 22px;
  }

  body.dcim-page .dcim-capabilities .bms-capability-nav {
    order: 1;
    width: 100%;
    margin: 0;
    padding: 2px 2px 10px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  body.dcim-page .dcim-capabilities .bms-capability-route {
    display: none;
  }

  body.dcim-page .dcim-capabilities .bms-capability-option {
    --capability-shift: 0px;
    width: 170px;
    min-width: 170px;
    height: 116px;
    min-height: 116px;
    flex: 0 0 170px;
    padding: 15px 14px;
    overflow: hidden;
    border: 1px solid var(--site-outline);
    border-radius: 4px;
    background: #fff;
    transform: none;
    scroll-snap-align: start;
  }

  body.dcim-page .dcim-capabilities .bms-capability-option.is-active {
    border-color: rgba(var(--pd-accent-rgb), .42);
    background: rgba(var(--pd-accent-rgb), .045);
    box-shadow: inset 0 -3px 0 var(--pd-accent);
  }

  body.dcim-page .dcim-capabilities .bms-capability-marker {
    display: none;
  }

  body.dcim-page .dcim-capabilities .bms-capability-option-copy {
    padding-top: 0;
  }

  body.dcim-page .dcim-capabilities .bms-capability-option strong {
    margin-top: 0;
    font-size: 14px;
  }

  body.dcim-page .dcim-capabilities .bms-capability-option-copy > span {
    margin-top: 8px;
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: 11px;
    line-height: 1.55;
  }

  body.dcim-page .dcim-capabilities .bms-capability-preview {
    order: 2;
    width: 100%;
  }

  /* Service path cards: mobile readers need the explanation before the
     decorative system diagram. Keep every diagram as a compact, contained
     follow-up instead of preserving the oversized desktop canvas. */
  body.service-page .service-path-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  body.service-page .service-path-copy {
    order: 1;
    width: 100%;
    padding-right: 0;
  }

  body.service-page .service-path-visual {
    order: 2;
    width: 100%;
    height: 230px;
    max-height: 230px;
    flex: 0 0 230px;
  }

  body.service-page .service-eco-orbit-group {
    width: min(140px, 52%);
    transform: translate(-50%, -50%) !important;
  }

  body.service-page .service-eco-core {
    width: 88px;
    height: 88px;
    transform: translate(-50%, -50%) !important;
  }

  body.service-page .service-eco-core span {
    font-size: 23px;
  }

  body.service-page .service-eco-node {
    width: 76px;
    min-width: 0;
    padding: 9px 6px;
    font-size: 9px;
  }

  body.service-page .service-path-node-core,
  body.service-page .service-eco-pulse {
    transform: translate(-50%, -50%) !important;
  }

  /* The desktop depth scene relies on a 2100px sticky canvas and moves
     650px cards through off-screen coordinates. On phones, present the same
     four capabilities as ordinary readable cards so no stage is clipped. */
  body.service-page .service-depth-scene {
    height: auto;
    min-height: 0;
  }

  body.service-page .service-depth-scene .depth-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 76px 0 84px;
  }

  body.service-page .service-depth-scene .depth-layout {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 34px;
  }

  body.service-page .service-depth-scene .depth-copy {
    align-self: stretch;
  }

  body.service-page .service-depth-stack {
    width: 100%;
    height: auto;
    margin: 0;
    display: grid;
    gap: 14px;
    perspective: none;
    transform: none !important;
  }

  body.service-page .service-depth-stack .depth-plane {
    position: relative;
    inset: auto !important;
    width: 100% !important;
    height: auto;
    min-height: 128px;
    padding: 22px 20px;
    grid-template-columns: 76px minmax(0, 1fr);
    border-radius: 10px;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  body.service-page .service-depth-stack .depth-plane strong {
    font-size: 18px;
    line-height: 1.45;
  }

  body.service-page .service-depth-stack .depth-plane small {
    margin-top: 6px;
    line-height: 1.6;
  }

  body.service-page .service-depth-stack .depth-axis,
  body.service-page .service-depth-scene .depth-halo {
    display: none;
  }

  /* Do not squeeze the Ceph plan summaries into four 68px columns. The
     summaries stack as readable cards; only the detailed comparison table
     owns a local horizontal scroller. */
  body.ceph-page .ceph-plan-grid {
    position: static;
    grid-template-columns: 1fr;
  }

  body.ceph-page .ceph-plan-corner,
  body.ceph-page .ceph-plan {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  /* Product hero artwork is authored as a wide desktop canvas. On phones,
     keep the original animation and SVG coordinate systems intact, but put
     each complete canvas in normal flow below its copy and scale the canvas
     proportionally to the available content width. */
  body.business-page .bms-hero {
    height: auto;
    min-height: 0;
  }

  body.business-page .bms-hero-inner {
    height: auto;
    min-height: 0;
    padding: 48px 0 38px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    box-sizing: border-box;
  }

  body.business-page .bms-hero-copy {
    top: 0;
    width: 100%;
  }

  body.business-page .bms-hero-art {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1604 / 1020;
    flex: 0 0 auto;
  }

  body.business-page .bms-hero-visual {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-position: center;
    transform-origin: center;
  }

  body.business-page .bms-hero-highlights {
    margin-top: 0;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-home-hero,
  body.product-detail-page.dcim-page .dcim-home-hero,
  body.product-detail-page.ceph-page .ceph-hero {
    height: auto;
    min-height: 0;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-inner,
  body.product-detail-page.dcim-page .dcim-home-hero .pd-hero-inner,
  body.product-detail-page.ceph-page .cloud-hero-inner {
    height: auto;
    min-height: 0;
    padding: 48px 0 38px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    box-sizing: border-box;
  }

  body.product-detail-page.ceph-page .cloud-hero-copy {
    top: 0;
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

  body.product-detail-page.ceph-page .cloud-hero-copy h1,
  body.product-detail-page.ceph-page .cloud-hero-description {
    width: 100%;
    max-width: 100%;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-art,
  body.product-detail-page.dcim-page .dcim-hero-art,
  body.product-detail-page.ceph-page .cloud-hero-art {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1443 / 836;
    flex: 0 0 auto;
    opacity: 1;
    overflow: visible;
    transform: none;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-float,
  body.product-detail-page.dcim-page .dcim-hero-float,
  body.product-detail-page.ceph-page .cloud-hero-float {
    width: 100%;
    height: 100%;
    transform: none;
    transform-origin: center;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-visual,
  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-motion,
  body.product-detail-page.dcim-page .dcim-hero-visual,
  body.product-detail-page.ceph-page .cloud-hero-visual {
    width: 100%;
    height: auto;
    max-width: 100%;
    object-position: center;
    transform: none;
    transform-origin: center;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-motion {
    height: 100%;
  }

  body.product-detail-page.cloud-page:not(.ceph-page) .cloud-hero-highlights,
  body.product-detail-page.dcim-page .dcim-hero-highlights,
  body.product-detail-page.ceph-page .ceph-hero-highlights {
    margin-top: 0;
  }

  body.service-page .service-product-hero {
    height: auto;
    min-height: 0;
  }

  body.service-page .service-product-hero-inner {
    height: auto;
    min-height: 0;
    padding: 48px 0 38px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    box-sizing: border-box;
  }

  body.service-page .service-product-hero-copy {
    top: 0;
    width: 100%;
  }

  body.service-page .service-product-hero-art {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1494 / 865;
    flex: 0 0 auto;
    opacity: 1;
    transform: none;
  }

  body.service-page .service-product-hero-image {
    width: 100%;
    height: 100%;
    max-width: 100%;
  }

  body.service-page .service-hero-highlights {
    margin-top: 0;
  }

  body.about-experience-page .about-experience-hero {
    height: auto;
    min-height: 0;
  }

  body.about-experience-page .about-product-hero-inner {
    height: auto;
    min-height: 0;
    padding: 48px 0 38px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
    box-sizing: border-box;
  }

  body.about-experience-page .about-product-hero-copy {
    top: 0;
    width: 100%;
  }

  body.about-experience-page .about-hero-svg {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1452 / 842;
    margin: 0;
    flex: 0 0 auto;
    transform: none;
  }

  body.about-experience-page .about-hero-svg img,
  body.about-experience-page .about-hero-data-flow {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  body.about-experience-page .about-hero-highlights {
    margin-top: 0;
  }
}

@media (min-width: 1181px) {
  .site-mobile-overlay,
  .site-mobile-drawer {
    display: none !important;
  }

  body > main { padding-top: 0; }
  .footer-accordion-toggle { display: none !important; }
  .footer-accordion-panel { display: contents !important; }

  .site-footer .footer-accordion-panel > a {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    color: #92959b;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms ease;
  }

  .site-footer .footer-accordion-panel > a:hover { color: #e6e7e9; }

  .site-footer .footer-accordion-panel > a:focus-visible {
    outline: 1px solid rgba(255, 255, 255, .55);
    outline-offset: 3px;
  }

  .experience-page .site-footer .footer-accordion-panel > a { color: #7d8797; }
  .experience-page .site-footer .footer-accordion-panel > a:hover { color: var(--experience-coral); }
}

@media (prefers-reduced-motion: reduce) {
  .site-mobile-overlay,
  .site-mobile-drawer,
  .site-header .menu-toggle span,
  .site-mobile-drawer .nav-dropdown {
    transition: none !important;
  }
}