/* ==========================================================================
   Fyndol: For agencies page (/agencies/)
   Loads after site.css. Phone rules first (max-width: 734px), then the
   tablet/desktop rules that used to be inline style="" attributes.
   Desktop (1068px+) looks exactly as before.
   ========================================================================== */

/* ---------- Reveal stagger (was style="--i:N" on each card/tile) ---------- */
.cards > li:nth-child(4n + 2) { --i: 1; }
.cards > li:nth-child(4n + 3) { --i: 2; }
.cards > li:nth-child(4n) { --i: 3; }
.tiles.cols-3 > li:nth-child(3n + 2) { --i: 1; }
.tiles.cols-3 > li:nth-child(3n) { --i: 2; }

/* ---------- Step 5 phone frame (was inline flex + max-width) ---------- */
.step-phone {
  display: flex;
  justify-content: center;
}

/* ---------- Phones ---------- */
@media (max-width: 734px) {
  /* Hero: a peek of the product right under the buttons (the first screen shows the app).
     Cropped a little at the bottom (empty card space) to keep the page short. */
  .hero-peek {
    margin-top: 40px;
    text-align: left;
  }
  .hero-peek .shot img {
    aspect-ratio: 1080 / 1160;
    object-fit: cover;
    object-position: top;
  }
  /* The peek's soft shadow paints over the next section instead of being cut off in a hard line */
  .page-hero {
    z-index: 1;
  }
  .how {
    padding-top: 16px;
    padding-bottom: 0; /* the step 5 phone sits flush on the next section, Apple-style */
  }
  /* Fewer lonely last words in short paragraphs */
  .step-copy p,
  .cards p,
  .tile p {
    text-wrap: pretty;
  }

  /* Steps: tighter rhythm; the bullet lists fold into "What's included" rows */
  .steps {
    gap: 56px;
  }
  .step {
    gap: 24px;
  }
  .step-copy .acc-m > summary {
    margin-top: 18px;
  }
  .step-copy .acc-m ul {
    margin-top: 12px;
    padding-bottom: 16px;
  }

  /* Niche cards: one swipe row (site.css) */
  .cards li {
    padding: 24px 22px 26px;
  }
  .cards .niche {
    margin-bottom: 10px;
  }
}

/* ---------- Tablet + desktop: same spacing as before ---------- */
@media (min-width: 735px) {
  .page-hero {
    padding-bottom: var(--pad);
  }
  .step-phone .phone {
    max-width: 280px;
  }
}

/* ---------- Short screens (phones turned sideways, 844x390): buttons stay in the first screen ---------- */
@media (min-width: 735px) and (max-height: 500px) {
  .page-hero {
    padding-top: 28px;
  }
  .page-hero .h-hero {
    font-size: 44px;
  }
  .page-hero .lead .d-only {
    display: none;
  }
  .page-hero .btn-row {
    margin-top: 24px;
  }
}