: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;
}

/* Leave the page artwork visible through the header until scrolling starts.
   Each page retains its existing background and scroll effects below the top. */
body .site-header.is-at-top {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 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: #165dff;
    background: #165dff;
  }

  .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); }
}

/* Desktop content and navigation share a 70px minimum gutter. The original
   1480px canvas resumes naturally at 1620px; tablet/mobile rules stay above. */
@media (min-width: 1181px) {
  .content-width,
  .nav-inner,
  .hero-inner,
  .highlight-grid,
  .business-page .content-width,
  .business-page .nav-inner,
  .experience-page .content-width,
  .experience-page .nav-inner,
  .product-detail-page .content-width,
  html.dcim-document body.dcim-page .content-width,
  html.dcim-document body.dcim-page .nav-inner,
  html.ceph-document body.ceph-page .content-width,
  html.ceph-document body.ceph-page .nav-inner {
    width: min(1480px, calc(100% - 140px)) !important;
  }

  .notice-container {
    width: min(var(--notice-content), calc(100% - 140px));
  }
}

/* The desktop export also fixes widths inside individual page containers.
   Fit both columns and their original artwork before the mobile layout starts. */
@media (min-width: 1181px) and (max-width: 1619px) {
  .product-advantages .advantages-layout {
    padding: 0;
    grid-template-columns: 530px minmax(0, 1fr);
  }

  .product-advantages .advantages-list,
  .product-advantages .advantages-stage {
    min-width: 0;
    width: 100%;
  }

  .product-advantages .advantages-illustration {
    width: 100%;
    height: 100%;
  }

  .platform-chain-showcase,
  .about-us .about-showcase {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(36px, 5vw, 80px);
  }

  .platform-chain-content {
    width: 100%;
    min-width: 0;
  }

  .about-us .about-showcase {
    align-items: center;
  }

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

  .about-us .about-copy > p {
    line-height: 2.1;
  }

  .about-us .about-copy > p span {
    display: inline;
    white-space: normal;
  }

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

  .business-page .bms-future-layout {
    grid-template-columns: minmax(0, 620fr) minmax(0, 780fr);
  }

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

  .business-page .bms-future-scene {
    max-width: 86%;
  }

  .business-page .bms-capability-option {
    min-width: 0;
  }

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

  /* Keep reading columns aligned and reserve space for animated cards' travel. */
  .experience-page .depth-copy {
    transform: translateY(var(--depth-y, 0px)) !important;
  }

  .about-experience-page .journey-stage {
    margin-right: 120px;
  }

  .service-page .service-depth-stack {
    margin-right: 140px;
  }

  .service-page .service-depth-stack .depth-plane {
    width: min(610px, calc(100% - 210px));
    grid-template-columns: minmax(105px, .44fr) minmax(0, 1fr);
    padding-inline: 24px;
  }

  .service-page .service-depth-stack .depth-plane-one { left: 0; }
  .service-page .service-depth-stack .depth-plane-two { left: 54px; }
  .service-page .service-depth-stack .depth-plane-three { left: 108px; }
  .service-page .service-depth-stack .depth-plane-four { left: 162px; }

  /* Keep Ceph's original illustration proportional; its source has a wide
     transparent grid margin, so align the visible machinery with the cards. */
  body.ceph-page .cloud-hero-art {
    --ceph-hero-width: min(78%, 1000px);
    width: var(--ceph-hero-width);
    height: auto;
    aspect-ratio: 1487 / 860;
    right: calc(var(--ceph-hero-width) * -.2);
    top: 80px;
  }

  body.ceph-page .cloud-hero-float {
    height: auto;
    transform: none;
  }

  body.ceph-page .cloud-hero-visual {
    width: 100%;
    height: auto;
    transform: none;
  }
}

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

/* -------------------------------------------------------------------------
   Hero, tablet band (761–1180px)

   The homepage hero is authored on a 1480 × 620 canvas: copy on the left
   680px, isometric datacenter on the right. When the viewport drops below
   1180px the video is re-fitted to the frame with object-fit: contain, so the
   artwork keeps its 1480-canvas proportions and its left edge lands at about
   47% of the viewport — while the copy still claims 680px. The subtitle ends
   up printed on top of the illustration.

   Two coordinated fixes:
   1. Shrink the video to 80% of the frame and anchor it bottom-right, which
      pushes the artwork's left edge out to ~58% of the viewport and frees a
      real column for the copy.
   2. Let the copy track the viewport (max 560px) with a fluid type scale, so
      the headline stays a single line down to 761px.
   The overlay gradient is strengthened on the same band as a safety scrim for
   any residual contact at the artwork's soft left edge.
   ------------------------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1180px) {
  .hero-media-frame .hero-video {
    right: 0 !important;
    left: auto !important;
    width: 80% !important;
    max-width: 80% !important;
    height: 100% !important;
    transform: none !important;
    object-fit: contain !important;
    object-position: 100% 50% !important;
  }

  .hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(245, 249, 255, .96) 0%,
        rgba(247, 250, 255, .88) 40%,
        rgba(250, 252, 255, .42) 56%,
        transparent 70%
      ),
      linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 34%, rgba(255, 255, 255, .08));
  }

  .hero-copy {
    width: min(52%, 560px) !important;
    margin-top: 8px;
  }

  /* Hero type is driven by design-system tokens, which resolve at :root and
     outrank any local font-size declaration. Re-declaring the two tokens on
     the hero itself is the documented way to re-scale this composition
     without touching the other page heroes that share the same tokens. */
  .hero {
    --site-font-hero: clamp(28px, 3.5vw, 40px);
    --site-font-body-lg: clamp(15px, 1.45vw, 17px);
  }

  .hero-copy h1 {
    white-space: nowrap;
  }

  .hero-copy > p {
    max-width: 100%;
    margin-bottom: 30px;
    line-height: 1.62;
    /* Avoid a one-character last line when the copy column narrows. */
    text-wrap: pretty;
  }

  .hero-cta {
    width: 176px;
    height: 54px;
    font-size: 17px;
  }

  /* Two-column highlight grid puts the second card row at ~743px on a 900px
     screen — inside the first screen, but below the reveal observer's
     rootMargin line (bottom -24%), so it stayed at opacity 0 until the first
     scroll and read as a blank band. Skip the entrance animation for the
     cards in this band; the tilt/hover motion is untouched. */
  .scroll-motion-ready .highlights .scroll-reveal {
    opacity: 1;
    translate: none;
  }

  .scroll-motion-ready .highlights .scroll-reveal.is-scroll-visible {
    animation: none;
    opacity: 1;
    translate: none;
  }
}