/* ==========================================================================
   Zettabyte — responsive layer
   --------------------------------------------------------------------------
   The page markup is Claude Design canvas output, so nearly every rule lives
   in an element `style` attribute. Inline styles outrank stylesheet rules, so
   the overrides below use `!important` and target elements by the inline value
   they carry (e.g. [style*="grid-template-columns: 1fr 1fr"]).

   Breakpoints
     <= 900px   tablet / small laptop — multi-column grids collapse
     <= 820px   mobile navigation takes over (hamburger)
     <= 620px   phone — single column, tighter padding, smaller display type
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global safety — nothing should ever push the page sideways
   -------------------------------------------------------------------------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Mobile navigation
   Desktop keeps the inline flex row; below 820px the links collapse into a
   panel toggled by the hamburger button.
   -------------------------------------------------------------------------- */
[data-nav="toggle"] {
  display: none;
}

@media (max-width: 820px) {
  [data-nav="toggle"] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #f5f5f7;
    cursor: pointer;
  }

  [data-nav="toggle"]:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  [data-nav="toggle"] .nav-icon-close {
    display: none;
  }

  [data-nav="bar"][data-open="true"] [data-nav="toggle"] .nav-icon-open {
    display: none;
  }

  [data-nav="bar"][data-open="true"] [data-nav="toggle"] .nav-icon-close {
    display: block;
  }

  /* the link cluster becomes a dropdown panel under the header bar */
  [data-nav="links"] {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 10px 16px 18px !important;
    /* fully opaque: at 0.96 the hero type bled through the panel */
    background: #000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
  }

  [data-nav="bar"][data-open="true"] [data-nav="links"] {
    display: flex !important;
  }

  [data-nav="links"] > a {
    height: 50px !important;
    padding: 0 12px !important;
    margin-left: 0 !important;
    font-size: 16px !important;
    justify-content: flex-start !important;
    border-radius: 12px !important;
  }

  /* the Contact CTA keeps its accent pill, full width at the bottom */
  [data-nav="links"] > a:last-child {
    height: 48px !important;
    margin-top: 8px !important;
    justify-content: center !important;
    font-weight: 600 !important;
  }
}

/* --------------------------------------------------------------------------
   Layout — collapse the multi-column grids
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: 0.9fr 1.1fr"],
  [style*="grid-template-columns: 1.6fr 1fr 1fr"],
  [style*="grid-template-columns: 1.2fr 1fr 1fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* stat rows stay two-up rather than becoming a long ladder */
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
  }
}

@media (max-width: 620px) {
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* --------------------------------------------------------------------------
   Comparison table → labelled cards
   The "Which one fits where" table on /products is a 3-column grid holding 12
   flat cells. Collapsing it to one column leaves the values (“Continuously”,
   “Per operation”…) stranded with no column header, so the header row is
   dropped and each value is re-labelled inline instead.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  [style*="grid-template-columns: 1.2fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* the original header row ("Product / Best for / Runs") */
  [style*="grid-template-columns: 1.2fr 1fr 1fr"] > :nth-child(-n + 3) {
    display: none !important;
  }

  /* product name becomes the card title */
  [style*="grid-template-columns: 1.2fr 1fr 1fr"] > :nth-child(3n + 1) {
    padding: 20px 20px 4px !important;
    font-size: 18px !important;
  }

  /* hairline between products (not above the first one). The 1px margin lets
     the container's rgba(0,0,0,0.1) background show through as the rule. */
  [style*="grid-template-columns: 1.2fr 1fr 1fr"] > :nth-child(3n + 1):not(:nth-child(4)) {
    margin-top: 1px !important;
    padding-top: 22px !important;
  }

  [style*="grid-template-columns: 1.2fr 1fr 1fr"] > :nth-child(3n + 2),
  [style*="grid-template-columns: 1.2fr 1fr 1fr"] > :nth-child(3n) {
    padding: 6px 20px !important;
  }

  [style*="grid-template-columns: 1.2fr 1fr 1fr"] > :nth-child(3n):last-child {
    padding-bottom: 22px !important;
  }

  /* give each value back the column header it lost */
  [style*="grid-template-columns: 1.2fr 1fr 1fr"] > :nth-child(3n + 2)::before,
  [style*="grid-template-columns: 1.2fr 1fr 1fr"] > :nth-child(3n)::before {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #86868b;
  }

  [style*="grid-template-columns: 1.2fr 1fr 1fr"] > :nth-child(3n + 2)::before {
    content: "Best for";
  }

  [style*="grid-template-columns: 1.2fr 1fr 1fr"] > :nth-child(3n)::before {
    content: "Runs";
  }
}

/* --------------------------------------------------------------------------
   Tap targets — footer links render at 17px tall, below the 44px HIG minimum
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  footer a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
  }

  /* the 12px column gap plus 44px targets makes the footer very tall */
  footer [style*="gap: 12px"] {
    gap: 2px !important;
  }
}

/* --------------------------------------------------------------------------
   Spacing — sections breathe less on a phone
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  /* home hero — was still running desktop padding (128px top) on a phone,
     which alone made the hero taller than the viewport */
  [style*="padding: 128px 24px"] {
    padding: 76px 20px 56px !important;
  }

  /* page heroes on Services / Products / Company / Contact */
  [style*="padding: 104px 24px 80px"] {
    padding: 64px 20px 52px !important;
  }

  [style*="padding: 96px 24px"] {
    padding: 64px 20px !important;
  }

  [style*="padding: 104px 24px"] {
    padding: 66px 20px !important;
  }

  [style*="padding: 88px 24px"] {
    padding: 56px 20px !important;
  }

  [style*="padding: 120px 24px"] {
    padding: 72px 20px !important;
  }

  [style*="padding: 40px"] {
    padding: 26px !important;
  }

  [style*="padding-top: 72px"] {
    padding-top: 48px !important;
  }
}

/* --------------------------------------------------------------------------
   Typography — the fixed px display sizes that clamp() never covered
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  [style*="font-size: 40px"] {
    font-size: 30px !important;
  }

  [style*="font-size: 32px"] {
    font-size: 26px !important;
  }

  [style*="font-size: 19px"] {
    font-size: 17px !important;
  }

  /* long labels must be allowed to wrap instead of running off-screen */
  [style*="white-space: nowrap"] {
    white-space: normal !important;
  }
}