/* ---------------------------------------------------------------------------
   Mobile / tablet layout.

   The exported site carries no width-based media queries at all — the only ones
   it ships are `print` and `prefers-reduced-motion` — and every layout decision
   lives in an inline `style` attribute. So at 375px the header needed ~829px
   and pushed the nav and the language/theme controls off-screen, and the hero
   stayed a two-column grid with a 156px text column beside a 115px phone.

   Because the declarations being overridden are inline, these rules need
   `!important`; a plain stylesheet cannot outrank a style attribute. Selectors
   therefore match on the inline value itself (`[style*="..."]`), which is what
   keeps this file additive — nothing in the generated output is edited, so a
   re-export of the design system does not clobber it.
   --------------------------------------------------------------------------- */

/* ---- Tablet and below: stop pretending there is a wide canvas ---- */
@media (max-width: 1024px) {
  /* Every inline grid collapses to a single column. The generated columns are
     fixed fr pairs/quads with no minmax(auto-fit), so they can only squeeze. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Desktop gutters between columns become dead vertical space once stacked. */
  [style*="gap: 56px"] { gap: 32px !important; }
  [style*="gap: 48px"] { gap: 28px !important; }
  [style*="gap: 40px"] { gap: 24px !important; }

  /* The header bar is flex/nowrap with logo + nav + actions. Let it wrap, and
     put the section links on their own full-width row so nothing is unreachable. */
  header > div {
    flex-wrap: wrap !important;
    /* The bar carries an inline `height: 68px`. Left fixed, the wrapped nav row
       spills straight out of the sticky header and floats over the hero. */
    height: auto !important;
    min-height: 68px !important;
    row-gap: 8px !important;
    column-gap: 12px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  header > div > a:first-child { order: 1; }
  header > div > div:last-child { order: 2; margin-inline-start: auto !important; }
  header > div > nav {
    order: 3;
    flex: 0 0 100% !important;
    /* Its inline `margin-inline-start: auto` shoves a full-width row sideways. */
    margin-inline-start: 0 !important;
    height: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start !important;
    gap: 14px !important;
  }
  header > div > nav::-webkit-scrollbar { display: none; }
  /* One scrolling line, rather than links wrapping into a 69px-tall block. */
  header > div > nav > * { white-space: nowrap !important; flex: 0 0 auto !important; }

  /* Decorative callouts pinned to the phone mockup with negative insets
     ("session starts in 10 minutes", "summary ready"). Once the hero stacks
     they hang outside their container and land on the payment line, and one
     sits partly off the left edge — visible at tablet width too, not just on
     phones. They are garnish, so drop them rather than re-anchoring them. */
  [style*="position: absolute"][style*="inset-inline-start: -28px"],
  [style*="position: absolute"][style*="inset-inline-end: -28px"] {
    display: none !important;
  }
}

/* ---- Phones ---- */
@media (max-width: 640px) {
  /* 24px side gutters are tight at 375px once cards add their own padding. */
  [style*="padding: 88px 24px"],
  [style*="padding: 0px 24px"],
  [style*="padding: 24px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  [style*="padding: 88px 24px"] { padding-top: 48px !important; }

  /* The hero headline is sized for a 1200px canvas; at 375px it wrapped to
     four lines and collided with the phone mockup. */
  h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.2 !important; }
  h2 { font-size: clamp(22px, 6.2vw, 30px) !important; line-height: 1.25 !important; }

  /* Keep the actions row from forcing a horizontal overflow: the download CTA
     is the widest item in the header. */
  header > div > div:last-child a,
  header > div > div:last-child button {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 13px !important;
    white-space: nowrap;
  }
  /* logo + actions were overflowing the row by a single pixel */
  header > div { column-gap: 8px !important; }
  header > div > div:last-child { gap: 6px !important; }

  /* The logo is a wide horizontal lockup, so WIDTH is what stops it sharing a
     row with the actions (141 + 228 + gap in ~327px of usable bar). Capping the
     width takes the header from three rows to two. */
  header > div > a:first-child img,
  header > div > a:first-child svg {
    height: 24px !important;
    width: auto !important;
    max-width: 92px !important;
    object-fit: contain;
  }

  /* Nothing should be able to push the document sideways. */
  html, body { max-width: 100% !important; overflow-x: hidden !important; }

  /* Media and cards must never exceed their column. */
  img, svg, video { max-width: 100% !important; height: auto; }
}

/* ---- Very small phones ---- */
@media (max-width: 380px) {
  [style*="gap: 32px"] { gap: 20px !important; }
}