/* story-mobile.css — story.css living under /mobile.css (FBMCPF-511/512).
 *
 * The main-site pages that use the story skin (/featureboard/, /products/)
 * also load /mobile.css, which the mobile_layout test requires. That layer
 * was written for the home page and reaches for the same generic class names
 * the skin uses — .hero, .eyebrow, .card, a.btn — with !important. Load this
 * file AFTER /mobile.css to give those names their story meaning back on
 * phones. /nativecad/ does not load mobile.css and does not need this.
 */
@media (max-width: 720px) {
  /* the hero is a grid with its own gutter from .wrap; mobile.css pads .hero itself */
  .hero { padding: 40px 0 40px !important; gap: 0 !important; }
  /* one-line family strip: mobile.css forces wrap */
  .pl-family .pl-family-inner { flex-wrap: nowrap !important; }
  /* mobile.css makes every a.btn full-width (good for the hero and outro
     CTAs); inside a card or a chapter rail the buttons stay inline pills */
  .card .links a.btn, .ch-head .links a.btn, .product .cta a.btn, .band .links a.btn, .downloads a.btn {
    width: auto !important; max-width: none !important; display: inline-flex !important;
    padding-top: 9px !important; padding-bottom: 9px !important; min-height: 44px;
  }
  .card .links, .product .cta, .band .links, .downloads { display: flex; flex-direction: row; flex-wrap: wrap; }
}