/* ==========================================================================
   RESPONSIVE OVERRIDES
   
   Existing breakpoint (untouched, stays in styles.css): the nav's
   hamburger/drawer switch at max-width: 900px. The breakpoints below are
   independent of that and don't rely on its markup.

   Breakpoints used here:
     1024px — tablet: multi-column rows that get cramped, not broken, start
              easing up (trio, proof-stats, leaders, workflow cards).
     768px  — large phones / small tablets: rows that genuinely don't work
              side-by-side anymore switch to stacked layouts (accordion +
              image rows, trio, newsletter, footer address block).
     480px  — small phones: type scale and padding come down another notch;
              a couple of fixed pixel widths (review cards, stage tabs)
              get a lighter touch since they were sized for desktop.
   ========================================================================== */

/* ==========================================================================
   1024px — tablet
   ========================================================================== */
@media (max-width: 1024px) {

  /* --- Trio (Diagnose / Know / Move) ---
     Fix for: "wraps too much" at lower resolutions. flex:1 columns with
     32px side padding and a border-left were forcing 3 columns into a
     shrinking row, so every heading and paragraph wrapped hard. Loosen
     the side padding first — full stacking doesn't kick in until 768px. */
  .trio__col {
    padding: 0 16px;
  }

  /* --- Proof Stats (4-column stat row) ---
     Same shrinking-column problem as the trio; ease the side padding
     before the 768px stack. */
  .proof-stats__item {
    padding: 0 16px;
  }

  /* --- Leaders (Trusted by Industry Leaders logos) ---
     4 flex:1 cards get uncomfortably narrow before they break outright —
     move to a 2x2 grid so each logo keeps a sane minimum width. */
  .leaders__row {
    flex-wrap: wrap;
  }

  .leaders__card {
    flex: 1 1 calc(50% - 8px);
    min-width: 220px;
  }

  /* --- Workflow (Built for the way you actually work) cards row ---
     3 flex:1 cards of body copy get tight; ease the padding first. */
  .workflow__card {
    padding: 32px 16px;
  }
}

/* ==========================================================================
   768px — large phone / small tablet
   ========================================================================== */
@media (max-width: 768px) {

  /* --- Hero --- */
  .hero__heading {
    font-size: 36px;
    letter-spacing: -1.1px;
  }

  .hero__subhead {
    font-size: 17px;
  }

  .hero__ratings {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  /* --- Trio (Diagnose / Know / Move) ---
     Fix for: "wraps too much" at lower resolutions. A 3-up row of short
     phrases is what was causing the cramped wrapping — full-width stacked
     columns read far better than a squeezed row once space is this tight.
     Divider moves from a side border to a top border between stacked
     items. */
  .trio {
    flex-direction: column;
    gap: 24px;
    padding: 28px 20px;
  }

  .trio__col {
    padding: 0;
    border-left: none;
    border-top: 1px solid var(--color-border);
    padding-top: 24px;
  }

  .trio__col:first-child {
    border-top: none;
    padding-top: 0;
  }

  /* --- Stages heading + sticky tab bar --- */
  .stages__title {
    font-size: 32px;
    letter-spacing: -0.9px;
  }

  .stages__subhead {
    font-size: 17px;
  }

  .stages__tab {
    padding: 14px 20px;
    font-size: 16px;
  }

  /* --- Observe / Analyze / Understand / Act rows ---
     Fix for: pull the image to the top of the accordion. Stack the row
     and force the mockup first regardless of source order — two of the
     four sections have the accordion first in the markup (alternating
     layout was intentional for the desktop row direction), so `order`
     is what makes this consistent across all four rather than relying
     on DOM order. */
  .observe__row {
    flex-direction: column;
    gap: 24px;
  }

  .observe__mockup {
    order: -1;
    width: 100%;
  }

  .accordion {
    width: 100%;
  }

  .observe__title {
    font-size: 28px;
    margin-bottom: 32px;
  }

  /* --- Proof Stats ---
     Full stack: a 4-across row of stat blocks has no readable middle
     ground once phone widths are reached. 2x2 keeps some density without
     the column-shrink problem the 1024px rule above was easing. */
  .proof-stats__inner {
    flex-wrap: wrap;
    row-gap: 24px;
  }

  .proof-stats__item {
    flex: 1 1 calc(50% - 16px);
    border-left: none;
    padding: 0;
  }

  .proof-stats__item:nth-child(odd) {
    padding-right: 16px;
  }

  .proof-stats__item:nth-child(even) {
    padding-left: 16px;
    border-left: 1px solid var(--color-core-neutral-100);
  }

  /* --- Workflow (Built for the way you actually work) --- */
  .workflow__title {
    font-size: 32px;
    letter-spacing: -0.9px;
  }

  .workflow__cards {
    flex-direction: column;
  }

  .workflow__card {
    padding: 24px 0;
    border-top: none;
    border-bottom: 2px solid var(--color-core-neutral-100);
  }

  .workflow__card:last-child {
    border-bottom: none;
  }

  .workflow__card--active {
    border-top: none;
    border-bottom: 2px solid var(--color-core-700);
  }

  .workflow__mockup-count {
    font-size: 28px;
  }

  /* --- Newsletter banner --- */
  .newsletter__inner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .newsletter__left {
    flex-direction: column;
    text-align: center;
  }

  .newsletter__form {
    flex-direction: column;
  }

  .newsletter__input {
    width: 100%;
  }

  /* --- Footer --- */
  .footer__top {
    flex-direction: column;
    gap: 40px;
  }

  .footer__brand {
    max-width: none;
  }

  .footer__addresses {
    flex-direction: column;
    gap: var(--space-4);
  }

  .footer__col {
    width: 100%;
  }

  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ==========================================================================
   480px — small phone
   ========================================================================== */
@media (max-width: 480px) {

  /* --- Hero --- */
  .hero__heading {
    font-size: 28px;
  }

  .hero__ctas {
    flex-direction: column;
    width: 100%;
  }

  .hero__ctas .btn {
    width: 100%;
    justify-content: center;
  }

  /* --- Stages sticky tab bar ---
     4 tabs at any reasonable padding no longer fit a ~360-390px screen
     without wrapping into a second row, which breaks the sticky bar's
     fixed height the JS relies on. Scrolling the row horizontally keeps
     the bar's height predictable and the tabs fully legible. */
  .stages__tabs-inner {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .stages__tab {
    padding: 14px 16px;
    white-space: nowrap;
  }

  /* --- Proof Stats: 2x2 grid is still workable down to small phones,
     no further change needed beyond the 768px rules above. --- */

  /* --- Reviews marquee ---
     380px cards leave almost nothing of the next card visible on a
     ~360-390px viewport; narrower cards keep the "next card peeking in"
     effect the marquee depends on for readability. */
  .review-card {
    width: 280px;
    padding: 20px 20px;
  }

  /* --- FAQ --- */
  .faq__question {
    padding: 20px 16px 20px 20px;
    font-size: 17px;
  }

  .faq__answer-text {
    padding: 0 20px 20px 20px;
  }

  /* --- Footer --- */
  .footer {
    padding-left: 16px;
    padding-right: 16px;
  }

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