/* ==========================================================================
   Responsive — two breakpoints.
   Replaces the old [style*="…"] selectors, which matched against inline
   style text and broke the moment styling moved into classes.
   ========================================================================== */

/* ---- Tablet ------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root { --pad-x: 48px; }

  /* The 12-column grid collapses to a single stacked column */
  .grid12 {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }
  .col-4, .col-5, .col-7,
  .col-6-7, .col-7-6, .col-9-4 {
    grid-column: auto;
    width: 100%;
  }

  .product { display: flex; flex-direction: column; gap: 48px; padding: 48px 40px; }
  .product .phones { order: 2; }

  .phones {
    height: auto;
    min-height: 600px;
    width: 470px;
    max-width: 100%;
    margin: 0 auto;
  }
  .phones--hero { min-height: 612px; }

  .h1 { font-size: 68px; }

  /* Only the rows that were designed to reflow — not every .cluster */
  .row { flex-wrap: wrap; gap: 24px; }

  .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
  .grid-3 { grid-template-columns: 1fr; }
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 760px) {
  :root { --pad-x: 20px; --section-y: 64px; }

  /* Header wraps; the nav becomes a horizontal scroller */
  .site-header {
    height: auto;
    flex-wrap: wrap;
    padding-top: 14px;
    padding-bottom: 12px;
    /* No row-gap here: .row above sets 24px and the header carries .row.
       The original declared 12px, but its .row rule was !important and won. */
  }
  .brand__enso     { height: 36px; }
  .brand__wordmark { height: 27px; }

  .site-nav {
    width: 100%;
    gap: 22px;
    font-size: var(--t-xs);
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    padding-bottom: 2px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav .btn { display: none; }   /* the "Let's talk" pill */

  /* On mobile every section collapses to the same rhythm — the original
     rule was `section.pad { padding: 64px 20px }`, with the hero 56px on top. */
  .section      { padding-block: 64px; }
  .section--hero { padding-block: 56px 64px; }

  .h1 { font-size: 46px; line-height: 1.02; }
  .h2, .h2--lg, .h2--xl { font-size: 38px; line-height: 1.05; }
  .product .h3 { font-size: 32px; }

  /* Both wordmark sizes collapse to the same mobile treatment. */
  .wordmark, .wordmark--sm { font-size: 30px; letter-spacing: 6px; }
  .wordmark span { font-size: 20px; letter-spacing: 3px; }

  /* The original applied `p { font-size: 17px !important }` to every paragraph,
     the form note included. Kept for parity — see README for the caveat. */
  .lead, .prose, .prose--lg, .form-note { font-size: var(--t-body); }

  .row {
    flex-direction: column;
    align-items: flex-start;
  }

  .grid-2, .grid-3, .grid-5 { grid-template-columns: 1fr; row-gap: 28px; }
  .pairs { grid-template-columns: 1fr; row-gap: 28px; }

  /* The three 48px-gap sections tighten to 24px and align left.
     .g-48 marks exactly the elements the original targeted by inline style. */
  .g-48 { --gap: 24px; }
  .section.g-48 { align-items: flex-start; }

  .mt-8 { flex-wrap: wrap; row-gap: 14px; }
  /* The hero's two buttons wrap rather than squash on narrow phones. */
  .section--hero .mt-12 { flex-wrap: wrap; }

  /* Only the product articles tighten up here. The original rule was scoped to
     .card, which in the old markup meant exactly these three articles. */
  .product { padding: 32px 22px; border-radius: var(--r-lg); }

  .phones { zoom: 0.72; min-height: 600px; }
  .phones--hero { min-height: 612px; }
  .phone--static { width: 240px; height: 460px; }

  .bg-mark { width: 320px; right: -60px; top: 20px; }

  .site-footer { align-items: flex-start; gap: 28px; }
  .site-footer__logo { height: 56px; }

  .section--hero .btn--solid,
  .section--hero .btn--outline { padding: 14px 22px; font-size: var(--t-sm); }

  .seal--lg { width: 44px; height: 84px; font-size: 27px; }

  .definition { font-size: 24px; }

  .form { padding: 24px; }

  .notfound .h1 { font-size: 46px; }

  .legal { padding-block: 64px 96px; }
  .legal__body .h1 { font-size: 46px; }
  .legal__body h2 { margin-top: 48px; font-size: 26px; }
}