/* safety net: hardcoded text box sizes */
h1[style*="width:"], h2[style*="width:"], h3[style*="width:"], p[style*="width:"] {
  max-width: 100%;
  height: auto !important;
  min-width: 0 !important;
}

/* Mobile + tablet reflow. Uses !important because the pages are inline-styled. */

@media (max-width: 860px) {

  /* ---------- global rhythm ---------- */
  section, header, footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  section, header { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* any multi-column grid collapses to one column */
  [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* grid/flex items default to min-width:auto, which lets one wide child
     blow the track out past the viewport - release it */
  [style*="grid-template-columns"] > *,
  [style*="display:flex"] > *, [style*="display: flex"] > * { min-width: 0 !important; }

  /* rows of cards / buttons wrap instead of overflowing */
  [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap !important; }

  /* nothing may force a horizontal scrollbar */
  html, body { overflow-x: hidden !important; }
  [style*="max-width"] { max-width: 100% !important; }

  /* ---------- nav ---------- */
  nav {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 8px !important;
    padding: 10px 14px !important;
  }
  nav > div:first-child {
    grid-column: auto !important;
    justify-self: auto !important;
    order: 1 !important;
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
  }
  nav > a:last-child {
    grid-column: auto !important;
    justify-self: auto !important;
    order: 2 !important;
    flex: 1 1 100% !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 16px !important;
    min-height: 40px !important;
  }
  nav img[alt="Seclyn"] { height: 36px !important; }
  nav a { font-size: 14px !important; }
  nav > div:first-child > div > a,
  nav .nav-item > a {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 36px !important;
    height: 36px !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  nav > div:first-child > a:first-child { min-height: 0 !important; }  /* logo */

  /* hover doesn't exist on touch: expose the solution links as a wrapped
     row of pills under the main nav instead of a hover dropdown */
  .nav-item { flex: 0 0 auto !important; align-items: center !important; flex-wrap: wrap !important; }
  .nav-item > a { display: inline-flex !important; align-items: center !important; min-height: 36px !important; line-height: 1 !important; }
  /* touch: hidden until the Solutions link is tapped (nav-mobile.js) */
  .mega { display: none !important; }
  .nav-item.open .mega {
    display: block !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding-top: 8px !important;
    width: 100% !important;
  }
  .nav-item.open { flex: 1 1 100% !important; }
  .mega > div {
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .mega-link {
    padding: 5px 9px !important;
    border-radius: 100px !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    background: rgba(255,255,255,0.05) !important;
    min-height: 0 !important;
  }
  .mega-link > div:first-child { font-size: 11px !important; line-height: 1.25 !important; color: #DDE1F0 !important; font-weight: 600 !important; }
  .mega-link > div:last-child  { display: none !important; }  /* subtitles are too much on a phone */

  /* ---------- type scale ---------- */
  h1, h2, h3, p, span, div { overflow-wrap: break-word !important; }
  /* headings/paragraphs given a hardcoded px width+height by direct edits
     must go fluid on a phone */
  h1[style*="width:"], h2[style*="width:"], h3[style*="width:"], p[style*="width:"],
  h1[style*="width: "], h2[style*="width: "], h3[style*="width: "], p[style*="width: "] {
    width: auto !important;
    height: auto !important;
  }
  h1 { font-size: 34px !important; line-height: 1.1 !important; }
  h2 { font-size: 27px !important; line-height: 1.15 !important; }
  h3 { font-size: 19px !important; }
  p  { font-size: 16px !important; }
  br { display: none; }

  /* oversized display numbers */
  [style*="font-size:52px"], [style*="font-size:50px"],
  [style*="font-size:46px"], [style*="font-size:42px"] { font-size: 30px !important; }

  /* ---------- components ---------- */
  /* cards and panels: tighter padding */
  [style*="padding:40px"], [style*="padding:38px"], [style*="padding:34px"],
  [style*="padding:32px"], [style*="padding:30px"] { padding: 22px !important; }
  [style*="padding:64px 48px"] { padding: 34px 22px !important; }

  /* horizontal connector arrows read poorly stacked */
  [style*="grid-template-columns:0.95fr 22px"] > div:nth-child(even) { display: none !important; }

  /* embedded animations keep their own ratio */
  iframe { width: 100% !important; }

  /* tap targets */
  nav a, a[style*="border-radius:11px"], a[style*="border-radius:12px"],
  button, input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { min-height: 44px !important; }
  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { font-size: 16px !important; } /* prevents iOS zoom-on-focus */
  /* comfortable tap area lives on the wrapping label, not the box itself */
  label:has(> input[type="checkbox"]) { min-height: 44px !important; align-items: center !important; }
}

@media (max-width: 520px) {
  h1 { font-size: 29px !important; }
  h2 { font-size: 24px !important; }
  section, header { padding-top: 40px !important; padding-bottom: 40px !important; }
  nav a { font-size: 13.5px !important; }
  nav > div:first-child { gap: 12px !important; }
}