/* ==========================================================================
   OUR APP
   --------------------------------------------------------------------------
   Loaded on the Our App page only, beside site.css. The phone drawing, the
   benefit icon and the store badges are the homepage App section's own styles
   in styles.css.
   ========================================================================== */

.apphero {
  position: relative;
  overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(28px, 4vw, 56px)) clamp(36px, 4.5vw, 64px);
  background: linear-gradient(180deg, var(--ink-0), var(--ink-1));
}
.apphero__grid { display: grid; gap: 32px; }
.apphero__title { font-size: clamp(2.6rem, 1.3rem + 5vw, 5.4rem); margin-bottom: clamp(14px, 1.4vw, 20px); }
.apphero__lede { max-width: 34rem; color: var(--mute); font-size: clamp(1rem, .96rem + .2vw, 1.12rem); }
.apphero__lede p { margin: 0; }
.apphero__stores { scroll-margin-top: calc(var(--header-h) + 16px); }
.apphero__phone .phone { width: min(236px, 66vw); }

@media (min-width: 900px) {
  .apphero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); align-items: center; gap: clamp(32px, 4vw, 72px); }
  .apphero__phone .phone { width: 248px; }
}

/* Benefits */
.appperks { padding-block: clamp(36px, 4.5vw, 64px); background: var(--ink-1); border-top: 1px solid var(--line); }
.appperks__title { margin: 0 0 clamp(18px, 2vw, 28px); font-family: var(--f-body); font-size: clamp(1.15rem, 1.05rem + .4vw, 1.4rem); font-weight: 800; color: var(--white); }
.appperks__list { display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.appperks__item h3 { margin: 12px 0 4px; font-family: var(--f-body); font-size: 1.02rem; font-weight: 800; color: var(--white); }
.appperks__item p { margin: 0; color: var(--mute); font-size: .94rem; }

@media (min-width: 600px) { .appperks__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } }
@media (min-width: 1024px) { .appperks__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Closing line */
.appclose { padding-block: clamp(36px, 4.5vw, 64px); background: var(--ink-2); border-top: 1px solid var(--line); }
.appclose__title { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); margin: 0; }
.appclose .store-badges { margin-top: 18px; }

@media (min-width: 768px) {
  .appclose__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
  .appclose .store-badges { margin-top: 0; }
}

/* ==========================================================================
   THE GET APP BAR
   --------------------------------------------------------------------------
   Phones only. It is fixed, so opening it never moves the page. The store links
   come after the button in the document, so the keyboard reaches them next, and
   the panel opens upward. While closed they cannot take focus.
   ========================================================================== */
.getapp { display: none; }

@media (max-width: 767px) {
  .getapp {
    display: block;
    position: fixed;
    z-index: 60;
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
  }
  .getapp__card {
    display: flex;
    flex-direction: column-reverse;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-lg);
    background: var(--ink-2);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  }
  .getapp__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; }
  .getapp__label { margin: 0; min-width: 0; font-size: .8rem; font-weight: 800; letter-spacing: .05em; line-height: 1.2; text-transform: uppercase; color: var(--white); }
  .getapp__btn { flex: none; min-height: 44px; text-transform: uppercase; }

  .getapp__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .26s var(--ease-out), visibility 0s linear .26s;
  }
  .getapp.is-open .getapp__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows .26s var(--ease-out), visibility 0s;
  }
  .getapp__stores { min-height: 0; overflow: hidden; }
  .getapp__stores .store-badges { margin: 0; padding: 10px 10px 2px; }
  html.js .getapp__stores .reveal { opacity: 1; transform: none; transition: none; }
  .getapp__stores .store-badge { flex: 1 1 124px; justify-content: center; gap: 7px; padding-inline: 8px; white-space: nowrap; }

  html.nav-open .getapp { visibility: hidden; }

  /* The footer's legal links stay clear of the bar. */
  .bcx-page-app .footer { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .getapp__panel, .getapp.is-open .getapp__panel { transition: none; }
}