/* ==========================================================================
   responsive.css - media queries (always loaded last)
   ========================================================================== */

@media (max-width:900px){
  /* Navigation */
  .links,.nav-r{display:none}
  .menu-b{display:block}
  nav.top.open .links,
  nav.top.open .nav-r{display:flex;position:absolute;top:70px;left:0;right:0;background:#fff;flex-direction:column;padding:18px 24px;gap:14px;align-items:flex-start;border-bottom:1px solid var(--border)}
  nav.top.open .nav-r{top:auto;position:static;border:0;padding-top:0}
  .dd-m{position:static;display:block;border:0;box-shadow:none;padding:0 0 0 12px}

  /* Stacked layouts */
  .hero .wrap,.qs .wrap,.cgrid,.arena-w{grid-template-columns:1fr}
  .flow-c{grid-template-columns:1fr;gap:6px}
  .wire{width:4px;height:44px;margin:auto;background:repeating-linear-gradient(180deg,var(--green-dark) 0 10px,transparent 10px 20px)}
  .demo{grid-template-columns:1fr}
  .phone{max-width:230px;margin:auto}

  /* Grids */
  .bento,.demos,.sgrid,.uc{grid-template-columns:1fr 1fr}
  .c2,.c3,.c4{grid-column:span 2}
}

@media (max-width:560px){
  .bento,.demos,.sgrid,.uc,form .f{grid-template-columns:1fr}
  .c2,.c3,.c4{grid-column:auto}
}

/* Documentation pages */
@media (max-width:900px){
  .doc-layout{grid-template-columns:1fr;gap:20px;padding-top:28px}
  .doc-side{position:static;flex-direction:row;overflow-x:auto;max-height:none;padding:8px}
  .doc-side strong{display:none}
  .doc-side a{white-space:nowrap;border-left:0}
  .doc-main{padding:4px 22px}
}

@media (max-width:560px){
  .doc-grid{grid-template-columns:1fr}
}

/* Feature pages */
@media (max-width:900px){
  .fhero .wrap{grid-template-columns:1fr}
  .fsec{padding:52px 0}
}