/* Compact product-dashboard case study at 100% browser zoom. */
body.is-big-screen #app .bam-study h1 { font-size: 48px !important; line-height: 1.12 !important; }
body.is-big-screen #app .bam-study h2 { font-size: 30px !important; line-height: 1.3 !important; }
body.is-big-screen #app .bam-study h3 { font-size: 20px !important; line-height: 1.4 !important; }
body.is-big-screen #app .bam-study p,
body.is-big-screen #app .bam-study li { font-size: 16px !important; line-height: 1.68 !important; }

body.is-big-screen #app .bam-study .bam-section { padding: 80px 0 !important; }
body.is-big-screen #app .bam-study .bam-section > header { margin-bottom: 44px !important; }
body.is-big-screen #app .bam-study .bam-section > header > span,
body.is-big-screen #app .bam-study .bam-hero-copy > span { font-size: 14px !important; line-height: 1.5 !important; }
body.is-big-screen #app .bam-study .bam-section > header h2 { margin: 14px 0 12px !important; }

body.is-big-screen #app .bam-study .bam-hero {
  min-height: 760px !important;
  padding: 80px 0 90px !important;
}
body.is-big-screen #app .bam-study .bam-hero-devices { min-height: 650px !important; }
body.is-big-screen #app .bam-study .bam-hero-copy h1 { margin: 20px 0 !important; white-space: normal !important; }
body.is-big-screen #app .bam-study .bam-hero-copy p { font-size: 18px !important; line-height: 1.68 !important; }
body.is-big-screen #app .bam-study .bam-hero-copy > div { gap: 10px !important; margin-top: 26px !important; }
body.is-big-screen #app .bam-study .bam-hero-copy i { padding: 8px 12px !important; font-size: 14px !important; }

body.is-big-screen #app .bam-study .bam-overview-grid article {
  min-height: 250px !important;
  padding: 32px !important;
}
body.is-big-screen #app .bam-study .bam-overview-grid article b { margin-bottom: 16px !important; font-size: 20px !important; }
body.is-big-screen #app .bam-study .bam-overview-grid article p { font-size: 16px !important; line-height: 1.68 !important; }
body.is-big-screen #app .bam-study .bam-overview-grid aside {
  min-height: 0 !important;
  gap: 12px !important;
  padding: 28px 32px !important;
}
body.is-big-screen #app .bam-study .bam-overview-grid aside strong { font-size: 30px !important; }
body.is-big-screen #app .bam-study .bam-overview-grid aside span { padding-bottom: 3px !important; font-size: 15px !important; }
body.is-big-screen #app .bam-study .bam-strategy { gap: 16px !important; margin-top: 40px !important; }
body.is-big-screen #app .bam-study .bam-strategy span { min-height: 0 !important; padding: 17px !important; font-size: 16px !important; }

body.is-big-screen #app .bam-study .bam-spec-grid article {
  min-height: 340px !important;
  padding: 32px !important;
}
body.is-big-screen #app .bam-study .bam-spec-grid small,
body.is-big-screen #app .bam-study .bam-component-strip small { margin-bottom: 20px !important; font-size: 14px !important; }
body.is-big-screen #app .bam-study .bam-type > strong { font-size: 72px !important; }
body.is-big-screen #app .bam-study .bam-type > div { gap: 16px !important; margin-top: 26px !important; }
body.is-big-screen #app .bam-study .bam-type > div b { font-size: 22px !important; }
body.is-big-screen #app .bam-study .bam-type > div span,
body.is-big-screen #app .bam-study .bam-colors span,
body.is-big-screen #app .bam-study .bam-spacing p { font-size: 15px !important; }
body.is-big-screen #app .bam-study .bam-colors > div {
  grid-template-columns: 64px 100px 1fr !important;
  gap: 14px !important;
  margin: 14px 0 !important;
}
body.is-big-screen #app .bam-study .bam-colors i { width: 64px !important; height: 34px !important; }
body.is-big-screen #app .bam-study .bam-colors b,
body.is-big-screen #app .bam-study .bam-spacing > b { font-size: 15px !important; }

body.is-big-screen #app .bam-study .bam-component-strip { margin-top: 28px !important; }
body.is-big-screen #app .bam-study .bam-component-strip article {
  min-height: 230px !important;
  padding: 28px 24px !important;
}
body.is-big-screen #app .bam-study .bam-component-strip button {
  height: 44px !important;
  margin: 5px 0 !important;
}
body.is-big-screen #app .bam-study .bam-component-strip button,
body.is-big-screen #app .bam-study .bam-component-strip label,
body.is-big-screen #app .bam-study .bam-component-strip article:nth-child(2) i { font-size: 14px !important; }
body.is-big-screen #app .bam-study .bam-component-strip label { padding: 10px 0 !important; }
body.is-big-screen #app .bam-study .bam-icons b {
  width: 44px !important;
  height: 44px !important;
  font-size: 20px !important;
}

body.is-big-screen #app .bam-study .bam-core-layout { gap: 4vw !important; }
body.is-big-screen #app .bam-study .bam-home-focus { gap: 34px !important; }
body.is-big-screen #app .bam-study .bam-home-focus aside > span { font-size: 14px !important; }
body.is-big-screen #app .bam-study .bam-home-focus aside h3 { margin: 14px 0 !important; font-size: 22px !important; }
body.is-big-screen #app .bam-study .bam-home-focus aside p,
body.is-big-screen #app .bam-study .bam-home-focus li { font-size: 16px !important; }
body.is-big-screen #app .bam-study .bam-home-focus ul { margin-top: 20px !important; }

@media (min-width: 1401px) {
  body.is-big-screen #app .bam-study .bam-home-focus {
    grid-template-columns: minmax(360px, 400px) minmax(0, 1fr) !important;
    gap: 64px !important;
  }

  body.is-big-screen #app .bam-study .bam-home-focus > .bam-phone {
    width: 100% !important;
    max-width: 400px !important;
  }
}
body.is-big-screen #app .bam-study .bam-order-flow { gap: 38px 28px !important; }
body.is-big-screen #app .bam-study .bam-order-flow article > span { margin-top: 12px !important; font-size: 14px !important; }
body.is-big-screen #app .bam-study .bam-order-flow article > b { font-size: 18px !important; }
body.is-big-screen #app .bam-study .bam-flow-line { margin-bottom: 40px !important; }
body.is-big-screen #app .bam-study .bam-flow-line span { font-size: 15px !important; }
body.is-big-screen #app .bam-study .bam-delivery-grid { gap: 42px 4vw !important; }
body.is-big-screen #app .bam-study .bam-delivery-grid figcaption { padding-top: 14px !important; }
body.is-big-screen #app .bam-study .bam-delivery-grid figcaption span { font-size: 16px !important; }

body.is-big-screen #app .bam-study .bam-data-stage { gap: 3vw !important; }
body.is-big-screen #app .bam-study .bam-data-stack { gap: 24px !important; }
body.is-big-screen #app .bam-study .bam-data-stack figcaption,
body.is-big-screen #app .bam-study .bam-waterfall figcaption { font-size: 15px !important; }
body.is-big-screen #app .bam-study .bam-data-stage aside {
  position: static !important;
  top: auto !important;
  padding-top: 20px !important;
}
body.is-big-screen #app .bam-study .bam-data-stage aside b { margin: 16px 0 !important; font-size: 22px !important; }
body.is-big-screen #app .bam-study .bam-data-stage aside p { font-size: 16px !important; }

@media (min-width: 1001px) {
  body.is-big-screen #app .bam-study .bam-data-stage > .is-long {
    grid-row: 1 !important;
  }

  body.is-big-screen #app .bam-study .bam-data-extra {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 64px !important;
    margin-top: 64px !important;
  }

  body.is-big-screen #app .bam-study .bam-data-extra figure {
    width: 100% !important;
    max-width: 360px !important;
    align-self: start !important;
  }
}

body.is-big-screen #app .bam-study .bam-breakdown {
  grid-template-columns: .72fr .72fr 1fr !important;
  gap: 3vw !important;
  align-items: start !important;
}
body.is-big-screen #app .bam-study .bam-breakdown li {
  grid-template-columns: 36px 1fr !important;
  padding: 16px 0 !important;
}
body.is-big-screen #app .bam-study .bam-breakdown li b { font-size: 15px !important; }
body.is-big-screen #app .bam-study .bam-breakdown li strong { font-size: 20px !important; line-height: 1.4 !important; }
body.is-big-screen #app .bam-study .bam-breakdown li span {
  margin-top: 5px !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
}
body.is-big-screen #app .bam-study .bam-crops { gap: 18px !important; }
body.is-big-screen #app .bam-study .bam-crops figure { height: 190px !important; }
body.is-big-screen #app .bam-study .bam-waterfall figure { margin-bottom: 44px !important; }

body.is-big-screen #app .bam-study .bam-ai-flow article {
  min-height: 190px !important;
  padding: 28px 24px !important;
}
body.is-big-screen #app .bam-study .bam-ai-flow article b { font-size: 14px !important; }
body.is-big-screen #app .bam-study .bam-ai-flow article h3 { margin: 18px 0 10px !important; font-size: 20px !important; }
body.is-big-screen #app .bam-study .bam-ai-flow article p { font-size: 16px !important; }
body.is-big-screen #app .bam-study .bam-summary article { padding: 32px 28px !important; }
body.is-big-screen #app .bam-study .bam-summary article b { font-size: 28px !important; }
body.is-big-screen #app .bam-study .bam-summary article p { margin-top: 12px !important; font-size: 16px !important; }

body.is-big-screen #app .bam-study .bam-summary {
  padding-top: 56px !important;
  padding-bottom: 46px !important;
}

body.is-big-screen #app .bam-study .bam-summary > header {
  margin-bottom: 30px !important;
}

body.is-big-screen #app .bam-study .bam-summary > div {
  min-height: 0 !important;
}

body.is-big-screen #app .bam-study .bam-summary article {
  min-height: 138px !important;
  padding: 28px 34px !important;
}

body.is-big-screen #app .bam-study > .big-screen-footer {
  min-height: 0 !important;
  padding-top: 34px !important;
  padding-bottom: 48px !important;
}

@media (max-width: 900px) {
  body.is-big-screen #app .bam-study .bam-section { padding: 60px 0 !important; }
  body.is-big-screen #app .bam-study .bam-hero { min-height: 0 !important; padding: 65px 0 !important; }
  body.is-big-screen #app .bam-study .bam-spec-grid article,
  body.is-big-screen #app .bam-study .bam-component-strip article { min-height: 0 !important; }
}

/* Keep Black Ant mobile mockups complete inside the phone frame. */
body.is-big-screen #app .bam-study .bam-hero {
  min-height: 660px !important;
  padding-top: 0 !important;
  padding-bottom: 40px !important;
  overflow: visible !important;
}

body.is-big-screen #app .bam-study .bam-hero-devices {
  min-height: 600px !important;
  overflow: visible !important;
}

body.is-big-screen #app .bam-study .bam-hero-copy {
  align-self: center !important;
  transform: translateY(-28px) !important;
}

body.is-big-screen #app .bam-study .bam-hero-devices .bam-phone {
  width: min(23vw, 292px) !important;
}

body.is-big-screen #app .bam-study .bam-hero-devices .is-main {
  top: 0 !important;
  left: 38% !important;
  width: min(24vw, 306px) !important;
  transform: rotateY(-5deg) scale(.9) !important;
}

body.is-big-screen #app .bam-study .bam-hero-devices .is-side {
  top: 17% !important;
  left: 10% !important;
  width: min(20vw, 255px) !important;
  transform: rotateY(10deg) rotateZ(-2deg) scale(.88) !important;
}

body.is-big-screen #app .bam-study .bam-hero-devices .is-back {
  top: 22% !important;
  right: 8% !important;
  width: min(18vw, 230px) !important;
  transform: rotateY(-10deg) rotateZ(3deg) scale(.88) !important;
}

body.is-big-screen #app .bam-study .bam-phone > div,
body.is-big-screen #app .bam-study .bam-delivery-grid .bam-screen {
  aspect-ratio: 390 / 844 !important;
  overflow: hidden !important;
}

body.is-big-screen #app .bam-study .bam-phone img,
body.is-big-screen #app .bam-study .bam-order-flow .bam-phone img,
body.is-big-screen #app .bam-study .bam-break-phone .bam-phone img,
body.is-big-screen #app .bam-study .bam-delivery-grid .bam-screen img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

body.is-big-screen #app .bam-study .bam-hero-devices .bam-phone img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}