/* ORiON — responsive layer.
   The site is authored with inline styles, so every rule here needs !important
   to win. Selectors match on inline style content because there are no classes. */

/* Mobile nav pieces are hidden until a breakpoint turns them on */
[data-nav-toggle] { display: none !important; }
[data-nav-panel] { display: none !important; }

/* Horizontal overflow guard for the product mockups */
[data-mock] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

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

  /* Multi-column grids collapse to two, except mockup internals */
  [style*="grid-template-columns"]:not([data-mock] *) {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Sidebar + content layouts (table of contents pages) go single column */
  [style*="grid-template-columns: 220px"],
  [style*="grid-template-columns:220px"],
  [style*="grid-template-columns: 1.4fr"],
  [style*="grid-template-columns: 1.3fr"],
  [style*="grid-template-columns: 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  /* Sticky tables of contents shouldn't stick once they're above the content */
  [style*="position: sticky"],
  [style*="position:sticky"] {
    position: static !important;
    top: auto !important;
  }

  /* Section gutters */
  main > section,
  footer {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  [style*="padding: 180px 56px"] { padding-top: 140px !important; }
  [style*="padding: 160px 56px"] { padding-top: 110px !important; padding-bottom: 110px !important; }
  [style*="padding: 120px 56px"] { padding-top: 90px !important; padding-bottom: 90px !important; }
  [style*="padding: 100px 56px"] { padding-top: 80px !important; padding-bottom: 80px !important; }

  /* Inner blocks that carried the 56px gutter */
  [style*="padding: 28px 56px 0"] { padding-left: 32px !important; padding-right: 32px !important; }
  [style*="padding: 0 56px"] { padding-left: 32px !important; padding-right: 32px !important; }

  /* Card padding eases off */
  [style*="padding: 56px 48px"] { padding: 40px 32px !important; }
  [style*="padding: 48px 44px"] { padding: 36px 28px !important; }
  [style*="padding: 72px 64px"] { padding: 48px 36px !important; }
  [style*="padding: 72px 56px"] { padding: 48px 32px !important; }

  /* Two-up rows stack rather than squeeze */
  [style*="justify-content: space-between"]:not(nav):not([data-nav-panel]) {
    flex-wrap: wrap !important;
  }

  /* Footer link columns */
  footer [style*="gap: 56px"] { gap: 32px !important; }
}

/* ============================================================
   MOBILE NAV  —  <= 860px
   ============================================================ */
@media (max-width: 860px) {

  nav { padding-left: 20px !important; padding-right: 20px !important; }

  [data-nav-links] { display: none !important; }
  [data-nav-actions] { display: none !important; }

  [data-nav-toggle] {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    align-items: flex-end;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
  }

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

/* ============================================================
   PHONE  —  <= 720px
   ============================================================ */
@media (max-width: 720px) {

  /* Everything to one column */
  [style*="grid-template-columns"]:not([data-mock] *) {
    grid-template-columns: 1fr !important;
  }

  main > section,
  footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  [style*="padding: 180px 56px"] { padding-top: 116px !important; padding-bottom: 56px !important; }
  [style*="padding: 160px 56px"] { padding-top: 80px !important; padding-bottom: 80px !important; }
  [style*="padding: 120px 56px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [style*="padding: 100px 56px"] { padding-top: 56px !important; padding-bottom: 56px !important; }

  [style*="padding: 28px 56px 0"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding: 0 56px"] { padding-left: 20px !important; padding-right: 20px !important; }

  [style*="padding: 56px 48px"] { padding: 32px 22px !important; }
  [style*="padding: 48px 44px"] { padding: 30px 22px !important; }
  [style*="padding: 48px 36px"] { padding: 30px 22px !important; }
  [style*="padding: 44px 38px"] { padding: 30px 22px !important; }
  [style*="padding: 40px 32px"] { padding: 28px 22px !important; }
  [style*="padding: 72px 64px"] { padding: 32px 22px !important; }
  [style*="padding: 72px 56px"] { padding: 36px 22px !important; }
  [style*="padding: 36px 32px"] { padding: 26px 22px !important; }
  [style*="padding: 30px 34px"] { padding: 24px 20px !important; }
  [style*="padding: 28px 32px"] { padding: 22px 20px !important; }
  [style*="padding: 26px 28px"] { padding: 22px 20px !important; }
  [style*="padding: 24px 28px"] { padding: 20px 18px !important; }
  [style*="padding: 22px 26px"] { padding: 20px 18px !important; }

  /* Hero and display type — keep the lower bound sane on a narrow screen */
  h1 { font-size: clamp(34px, 11vw, 60px) !important; }
  h2 { font-size: clamp(24px, 7.2vw, 40px) !important; }
  blockquote { font-size: clamp(18px, 5.6vw, 28px) !important; }

  /* Hero bottom row: copy above buttons, full-width CTAs */
  [data-hero-row] { flex-direction: column !important; align-items: stretch !important; gap: 32px !important; }
  [data-hero-row] > div { align-items: stretch !important; }
  [data-hero-row] a { text-align: center !important; }

  /* Scroll cue eats space on a short viewport */
  [data-scroll-cue] { display: none !important; }

  /* Section header rows (title beside intro paragraph) */
  [style*="justify-content: space-between"]:not(nav):not([data-nav-panel]) {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  [style*="justify-content: space-between"] > p { max-width: 100% !important; }

  /* Any max-width constraint gives way to the viewport */
  [style*="max-width: 340px"],
  [style*="max-width: 400px"],
  [style*="max-width: 420px"],
  [style*="max-width: 520px"],
  [style*="max-width: 620px"],
  [style*="max-width: 660px"],
  [style*="max-width: 700px"],
  [style*="max-width: 760px"],
  [style*="max-width: 820px"],
  [style*="max-width: 840px"],
  [style*="max-width: 900px"],
  [style*="max-width: 920px"],
  [style*="max-width: 1000px"],
  [style*="max-width: 1100px"],
  [style*="max-width: 1200px"] { max-width: 100% !important; }

  /* Buttons reach a comfortable tap target and stack full width */
  main a[style*="padding: 16px 40px"],
  main button[style*="padding: 16px 40px"] {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 18px 24px !important;
  }

  /* CTA button rows */
  [style*="justify-content: center"][style*="gap: 20px"] {
    flex-direction: column !important;
    width: 100% !important;
    gap: 18px !important;
  }

  /* Footer stacks */
  footer { flex-direction: column !important; align-items: flex-start !important; }
  footer [style*="gap: 56px"] { gap: 28px !important; width: 100% !important; }

  /* Product mockups scroll sideways instead of crushing */
  [data-mock] > * { min-width: 860px !important; }

  /* Form fields */
  input, select, textarea { font-size: 16px !important; } /* stops iOS zoom-on-focus */

  /* Ticker chips */
  [style*="padding: 8px 20px"] { padding: 7px 14px !important; }
}

/* ============================================================
   NARROW PHONE  —  <= 400px
   ============================================================ */
@media (max-width: 400px) {
  main > section, footer { padding-left: 16px !important; padding-right: 16px !important; }
  [style*="padding: 0 56px"] { padding-left: 16px !important; padding-right: 16px !important; }
}