/* Content-driven tablet band includes narrow iPad split views. */
@media (min-width: 600px) and (max-width: 1100px) {
  body[data-loom="selected"] #integrations[data-arrangement="01"] {
    --tile-w: 120px;
    --tile-h: 84px;
    --gap: 28px;
    height: auto;
    min-height: min(760px, 100svh);
    padding: 100px 0 32px;
  }
  body[data-loom="selected"] #integrations .lm-heading { width: calc(100% - 48px); }
  body[data-loom="selected"] #integrations .lm-heading h2 { font-size: 40px; }
  body[data-loom="selected"] #integrations .lm-heading p { font-size: 16px; max-width: 42ch; }
  body[data-loom="selected"] #integrations .lm-stage { flex: auto; min-height: 440px; margin-top: 24px; }
  body[data-loom="selected"] #integrations .lm-conveyor { inset: 24px -64px; transform: rotateX(22deg) rotateZ(-13deg); gap: 28px; }
  body[data-loom="selected"] #integrations .lm-conveyor-viewport { mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  body[data-loom="selected"] #integrations .lm-tool { padding: 12px; }
  body[data-loom="selected"] #integrations .lm-tool img { width: 54px; height: 52px; }
  body[data-loom="selected"] #integrations .lm-salesforce img,
  body[data-loom="selected"] #integrations .lm-hubspot img,
  body[data-loom="selected"] #integrations .lm-zoho img { width: 94px; height: 58px; }
  body[data-loom="selected"] #integrations .lm-google-docs img { width: 38px; height: 50px; }

  body[data-loom="selected"] #platform-introduction {
    width: calc(100% - 48px);
    padding: 40px 28px;
  }
  body[data-loom="selected"] #platform-introduction h2 {
    margin-inline: auto;
    max-width: 28ch;
    font-size: 34px;
    line-height: 1.2;
    letter-spacing: 0;
  }
  body[data-loom="selected"] #platform-introduction ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 28px;
    font-size: 14px;
    line-height: 1.5;
    align-items: start;
  }
  body[data-loom="selected"] #connections {
    width: calc(100% - 48px);
    padding-top: 72px;
  }
  body[data-loom="selected"] #connections .section-heading { max-width: 650px; margin-bottom: 36px; }
  body[data-loom="selected"] #connections .section-heading h2 { font-size: 38px; line-height: 1.18; text-wrap: balance; }
  body[data-loom="selected"] #connections .section-heading > p { font-size: 16px; max-width: 42ch; }
  body[data-loom="selected"] #connections .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  body[data-loom="selected"] #connections .bento { min-width: 0; padding: 24px; }
  body[data-loom="selected"] #connections .bento-copy h3 { font-size: 24px; text-wrap: balance; }
  body[data-loom="selected"] #connections .bento-copy p { font-size: 14px; line-height: 1.55; }
  body[data-loom="selected"] #connections .sync-scene { transform: none; }
  body[data-loom="selected"] #connections .sync-scene > .crm-visual { padding: 16px; }
  body[data-loom="selected"] #connections .product-top { gap: 8px; }
  body[data-loom="selected"] #connections .fields > div { grid-template-columns: .8fr 1.2fr; gap: 8px; }
  body[data-loom="selected"] #connections .calendar-scene { padding: 14px; transform: none; }
  body[data-loom="selected"] #connections .calendar-days { gap: 4px; }
  body[data-loom="selected"] #connections .calendar-days > span { padding: 10px 7px; }
  body[data-loom="selected"] #connections .mini-record { padding: 12px; gap: 8px; }
  body[data-loom="selected"] #connections .handoff-scene { padding-block: 28px; }
}
@media (min-width: 600px) and (max-width: 1100px) and (orientation: landscape) {
  body[data-loom="selected"] #integrations[data-arrangement="01"] { min-height: 0; padding-top: 88px; }
  body[data-loom="selected"] #integrations .lm-stage { min-height: 360px; }
}