/* ==========================================================================
   Home page only (index.html). Loads right after site.css.
   Phone rules live in (max-width: 734px). Desktop (735px+) is unchanged.
   Shared pieces (swipe rows, sticky bar, menu, reveals) are in site.css.
   ========================================================================== */

/* Logo above the final call to action (was an inline style) */
.cta-logo {
  display: block;
  height: 22px;
  width: auto;
  margin: 0 auto 32px;
}

@media (max-width: 734px) {
  /* ---------- Hero: headline, two big buttons and a peek of the product in the first screen ---------- */
  .hero {
    padding-top: 28px;
  }
  .hero .lead {
    text-wrap: balance;
  }
  .hero .btn-row {
    margin-top: 28px;
  }
  .hero-note {
    margin-top: 14px;
    font-size: 15px;
    text-wrap: balance;
  }
  .hero-shot {
    margin-top: 28px;
  }
  /* The phone crop ends in an empty strip under the chart: trim it */
  #hero-shot .shot img {
    aspect-ratio: 1080 / 1160;
    object-fit: cover;
    object-position: 50% 0;
  }

  /* "AI that asks first" highlight: the phone crop (retaken Oct 19, with the current
     "Changes and texts always need your Confirm" footer) starts with an empty strip.
     Trim the top 110 of 1080 rows; the chat text starts at row 125. */
  .hl-media.crop-top {
    aspect-ratio: 1080 / 970;
  }
  .hl-media.crop-top .shot img {
    object-position: 50% 100%;
  }

  /* Fewer one-word last lines in short copy */
  .hl-card p,
  .tile p,
  .allin p {
    text-wrap: pretty;
  }

  /* ---------- One login: a compact one-column list instead of 2-column cards ---------- */
  .allin {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .allin li {
    background: none;
    border-radius: 0;
    border-top: 1px solid var(--line);
    padding: 16px 0;
    gap: 2px;
  }
  .allin li:last-child {
    border-bottom: 1px solid var(--line);
  }
  .allin .k {
    overflow-wrap: anywhere;
  }

  /* ---------- Final call to action ---------- */
  .cta-logo {
    margin-bottom: 24px;
  }
}

/* Landscape phones: keep the buttons in the first screen */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    padding-top: 20px;
  }
  .hero-shot {
    margin-top: 32px; /* a peek of the product under the buttons */
  }
  .hero .h-hero {
    font-size: clamp(32px, 5vw, 44px);
  }
}