/* Moving Atoms: responsive layer for the exported pages (/, /scan-to-model/, /robots/). Loaded last.
   Below the xl breakpoint (1280px) the export falls back to a single-column layout drawn for a 375px
   phone: full-bleed cards in a tall 0.52 portrait, and large fixed paddings. These rules give that layout
   side gutters, card proportions that suit the screen, and calmer vertical spacing from 320px to 1279px.
   The desktop layout (1280px and up) is untouched. Root font scaling is capped in the 8333 chunk. */
:root { --ma-gutter: 16px; --ma-band: 64px; }
@media (min-width: 640px) { :root { --ma-gutter: 24px; --ma-band: 88px; } }
@media (min-width: 1024px) { :root { --ma-gutter: 32px; --ma-band: 104px; } }

@media (max-width: 1279px) {
  /* one set of side gutters for the header, page sections and footer */
  header.xl\:hidden { padding-left: var(--ma-gutter); padding-right: var(--ma-gutter); }
  #main-content .main-content { padding-left: var(--ma-gutter); padding-right: var(--ma-gutter); box-sizing: border-box; }
  footer .main-content { padding-left: var(--ma-gutter); padding-right: var(--ma-gutter); }
  #main-content .ma-cta { margin-left: 0; margin-right: 0; }

  /* statement band and section rhythm: proportionate rather than fixed 6rem slabs */
  #main-content .main-content.py-24 { padding-top: var(--ma-band); padding-bottom: var(--ma-band); }
  #main-content section.pt-10.pb-20 { padding-top: calc(var(--ma-band) * .6); padding-bottom: var(--ma-band); }

  /* product and partner cards: inset, rounded, and shaped for the screen instead of a 0.52 portrait */
  #main-content section.main-content > [id].relative { aspect-ratio: 4 / 5; min-height: 460px; max-height: 760px;
    border-radius: 20px; overflow: hidden; }
  #main-content section.main-content > [id].relative + [id].relative { margin-top: 16px; }
  /* the card copy slides in on scroll, triggered from positions measured for the old tall cards; keep it in place */
  #main-content section.main-content > [id].relative [data-aos] { transform: none !important; opacity: 1 !important; }
  #main-content section.main-content > [id].relative p { max-width: 640px; }

  /* statement paragraph carries its own 4rem top margin and 5rem bottom padding on top of the band */
  #main-content .main-content.py-24 p.mt-16 { margin-top: 0; padding-bottom: 0; }
  #main-content .main-content.py-24 .ma-backed { margin-bottom: 40px; }
  .ma-xh .ma-xh-eyebrow { letter-spacing: .1em; }
}
@media (min-width: 640px) and (max-width: 1279px) {
  #main-content section.main-content > [id].relative { aspect-ratio: 4 / 3; min-height: 420px; }
  #main-content section.main-content > [id].relative + [id].relative { margin-top: 24px; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  #main-content section.main-content > [id].relative { aspect-ratio: 16 / 10; }
}

/* homepage hero on phones and small tablets: copy, then the film, in normal flow. The absolutely
   positioned version left a viewport-dependent gap on tall phones and overlapped on short ones. */
@media (max-width: 899px) {
  html.ma-xh-mounted #main-content section.ma-xh-on { height: auto; min-height: 0; }
  html.ma-xh-mounted #main-content section.ma-xh-on > :not(.ma-xh) { display: none; }
  html.ma-xh-mounted #main-content .ma-xh { position: relative; inset: auto; }
  .ma-xh .ma-xh-vcard { position: relative; top: auto; right: auto; bottom: auto; left: auto;
    margin: 88px var(--ma-gutter) 0; padding: 28px 22px 22px; }
  .ma-xh .ma-xh-vcard .ma-xh-copy { position: relative; top: auto; right: auto; left: auto; transform: none; width: auto; max-width: 560px; }
  .ma-xh .ma-xh-vcard .ma-xh-vwrap { position: relative; top: auto; right: auto; bottom: auto; left: auto; transform: none;
    width: 100%; max-height: none; margin-top: 28px; }
  .ma-xh .ma-xh-backed { flex-wrap: wrap; row-gap: 12px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .ma-xh .ma-xh-vcard { padding: 36px 32px 32px; }
  .ma-xh .ma-xh-vcard .ma-xh-copy { max-width: 640px; }
  .ma-xh h1 { font-size: 44px; }
}
@media (max-width: 420px) {
  .ma-xh .ma-xh-eyebrow { font-size: 9.5px; letter-spacing: .06em; gap: 8px; }
  .ma-xh .ma-xh-vcard { padding: 24px 18px 18px; }
  .ma-xh .ma-xh-btn { padding: 12px 16px; }
}
@media (max-width: 359px) { .ma-xh .ma-xh-ctas { flex-wrap: wrap; } }