/* ---------------------------------------------------------------------------
   responsive.css — ADDITION, not part of the Claude Design export.
   ---------------------------------------------------------------------------
   The exported design was authored at desktop width. Two elements overflowed
   the viewport below ~1024px, giving the page a horizontal scrollbar:

     1. The header row (logo + 5 nav links + CTA) is a non-wrapping flex row
        with 64px gaps, so it measured 864px regardless of viewport.
     2. ContactBand's grid uses `minmax(420px, 1fr)`, wider than the space
        available on a phone once page gutters are subtracted.

   This file corrects only that overflow. It is purely additive and changes
   nothing at >=1024px, so desktop still renders byte-identically to the
   export. Delete the file and its <link> in index.html to revert.

   Both fixes follow the design system's own rules rather than inventing new
   ones: tokens/spacing.css defines --gutter-page (24px) for narrow screens
   against --gutter-page-lg (48px) for wide, and the readme specifies
   "gutters 24px mobile / 48px desktop". The site components hardcode the
   48px token, so the first rule below simply restores the documented mobile
   value at the token level, which every section picks up at once.
--------------------------------------------------------------------------- */

@media (max-width: 1023px) {
  /* Restore the design system's documented mobile gutter. Because every
     section reads var(--gutter-page-lg), redefining it here fixes page
     padding everywhere without touching a single component. */
  :root {
    --gutter-page-lg: var(--gutter-page);
  }

  /* Header: keep all five nav links reachable by letting the nav scroll
     within its own track rather than pushing the row wide. No links are
     hidden and no mobile menu is invented. */
  header > div {
    gap: var(--space-5) !important;
  }

  header nav {
    flex: 1 1 0 !important;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  header nav::-webkit-scrollbar {
    display: none;
  }

  /* The CTA keeps its full width; only the nav absorbs the squeeze. */
  header > div > button {
    flex: none !important;
  }
}

@media (max-width: 767px) {
  /* On a phone the CTA alone consumes most of the row, leaving the nav a
     ~40px scroll track. Wrap the header into two rows instead: brand + CTA
     on the first, the full nav on the second. All five links stay present
     and no mobile menu pattern is invented. */
  header > div {
    height: auto !important;
    flex-wrap: wrap;
    padding-top: var(--space-4) !important;
    padding-bottom: var(--space-4) !important;
    row-gap: var(--space-4) !important;
  }

  header > div > a:first-child {
    flex: 1 1 auto;
  }

  header nav {
    order: 3;
    flex: 1 0 100% !important;
    gap: var(--space-6) !important;
  }

  /* The hero's circle motif is positioned with fixed pixel offsets tuned to
     a 1440px canvas. At phone width the filled amber circle lands on top of
     the "See the platform" button, and because that button is an outline
     variant with a transparent fill, the circle reads straight through it.
     Hide the two filled circles below 768px and keep the large outlined ones,
     which still carry the motif. Judgement call on brand decoration rather
     than a functional defect — delete this rule to restore all four. */
  #top > div[aria-hidden="true"] > div:nth-child(3),
  #top > div[aria-hidden="true"] > div:nth-child(4) {
    display: none;
  }

  /* ContactBand is the one grid whose 420px minimum cannot fit a phone.
     Collapse it to a single column; every other grid on the page has a
     minimum that already fits once the gutter above is corrected. */
  #contact > div:not([aria-hidden="true"]) {
    grid-template-columns: 1fr !important;
    gap: var(--space-10) !important;
  }

  /* The Verticals detail panel nests 64px of its own padding inside the page
     gutter, which leaves less room than its 340px grid minimum needs. Ease
     the padding and stack the two columns. */
  #verticals > div > div:last-child {
    grid-template-columns: 1fr !important;
    gap: var(--space-9) !important;
    padding: var(--space-7) !important;
  }

  /* The careers band nests its own padding inside the page gutter, same as
     the Verticals panel above, leaving less than its 320px column minimum. */
  #careers {
    grid-template-columns: 1fr !important;
    gap: var(--space-7) !important;
    padding: var(--space-7) !important;
  }

  /* Section rhythm tightens on small screens, per the 96px/128px pairing
     the spacing scale already defines. */
  :root {
    --section-y-lg: var(--section-y);
  }
}