/* Zekal marketing site — responsive layer over the design's inline styles.
   Colours are the design's: ink #151D2A, paper #F8F7F4, fire #FF634A / #E8573F. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #F8F7F4; }
img { max-width: 100%; }
button, input { font-family: inherit; }
:focus-visible { outline: 2px solid #FF634A; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Demo shell: the design fixes it at 720px with a 232px sidebar and a 360px panel.
   Below 860px it stacks: sidebar becomes a horizontal strip, panel sits under the screen. */
@media (max-width: 860px) {
  .zk-demo { flex-direction: column !important; height: auto !important; }
  .zk-side { width: 100% !important; border-right: 0 !important; border-bottom: 1px solid #2A3545; padding: 12px 10px !important; }
  .zk-side > div:first-child { padding-bottom: 10px !important; }
  .zk-sidenav { flex-direction: row !important; overflow-x: auto !important; gap: 4px !important; padding-bottom: 4px; }
  .zk-sidenav button { width: auto !important; white-space: nowrap; }
  .zk-side > div:last-child { display: none !important; }
  .zk-demo > div { min-height: 520px; }
  .zk-panel { width: 100% !important; border-left: 0 !important; border-top: 1px solid #E1E4E2; }
  .zk-panel > div:nth-child(2) { max-height: 420px; }
}
@media (max-width: 600px) {
  h1 { font-size: clamp(40px, 11vw, 64px) !important; }
  .zk-demo > div:nth-child(2) > div:first-child { flex-wrap: wrap; }
}

/* Fixed multi-column rows collapse on phones */
@media (max-width: 700px) {
  .zk-feat { grid-template-columns: 40px minmax(0, 1fr) auto !important; row-gap: 6px !important; }
  .zk-feat > span:nth-child(3) { grid-column: 2 / 4; }
  .zk-row4 { grid-template-columns: 70px minmax(0, 1fr) !important; row-gap: 8px !important; }
  .zk-row4 > *:nth-child(3), .zk-row4 > *:nth-child(4) { grid-column: 2; }
  .zk-status3 > div { padding: 12px !important; }
  .zk-status3 > div > div:first-child { font-size: 26px !important; }
}