/* Features page only (loads after site.css). Shared components (.swipe, chip sub-nav,
   sticky bar, reveals, buttons) live in site.css; this file only tunes this page. */

.page-hero .lead {
  max-width: 720px;
}

/* (44px chip widths, the chip-bar pill's tap area and the centered "Developer docs" link
   now live in site.css.) */

/* Tablets: each wide screenshot tile (b-4) shares its row with the small tile next to it
   (b-2), both showing the readable phone crop, so no half-width tile is left on its own. */
@media (min-width: 735px) and (max-width: 1067px) {
  .bento .b-4 {
    grid-column: span 3;
  }
}

/* Landscape phones (short touch screens): a compact hero so the button is in the first screen */
@media (min-width: 735px) and (max-height: 500px) and (pointer: coarse) {
  .page-hero {
    padding-top: 24px;
    padding-bottom: 48px;
  }
  .page-hero .eyebrow {
    margin-bottom: 8px;
  }
  .page-hero .h-giant {
    font-size: 44px;
  }
  .page-hero .lead {
    margin-top: 12px;
  }
  .page-hero .btn-row {
    margin-top: 20px;
  }
}

/* Phones */
@media (max-width: 734px) {
  /* Hero: CTA in the first screen with a peek of the product right under it */
  .page-hero .lead {
    margin-top: 16px;
  }
  .page-hero .btn-row {
    margin-top: 24px;
  }
  .page-hero {
    padding-bottom: 48px;
  }
  .f-peek {
    margin-top: 28px;
  }
  /* Chip jumps: the section heading lands just under the chip bar, not 130px below it */
  #main > .section:not(.cont)[id] {
    scroll-margin-top: -40px;
  }
  /* Screenshot tiles: even side padding on the text, a little less air above the shot */
  .tile-media .tm-copy {
    padding-right: 22px;
  }
  .tile-media .tm-shot {
    margin-top: 20px;
  }
  /* The swipe row after a screenshot tile gets a touch more space */
  .bento > .swipe {
    margin-top: 4px;
  }
}