/* ===== 04-header.css ===== */
/* ===== mobile-nav.css ===== */
/* The menu button is only needed once the navigation collapses. */
.menu-toggle{display:none}

@media (max-width:900px){
  .site-header{height:72px;min-height:72px;padding:0 24px;gap:16px;align-items:center}
  .menu-toggle{display:grid;place-content:center;gap:5px;width:42px;height:42px;padding:0;border:1px solid var(--line);background:var(--white);color:var(--ink);cursor:pointer}
  .menu-toggle span{display:block;width:19px;height:2px;background:currentColor}
  .site-header nav{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;z-index:11;align-items:stretch;gap:0;padding:8px 24px 18px;background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 12px 20px #10163814}
  .site-header nav.open{display:flex;flex-direction:column}
  .site-header nav a{padding:13px 0;font-size:14px;border-bottom:1px solid var(--line)}
  .site-header nav .nav-cta{margin-top:10px;padding:12px 14px;text-align:center;border:1px solid var(--violet)}
}

@media (min-width:901px){
  .site-header .site-brand{gap:12px;font-size:19px;letter-spacing:-.5px}
  .site-header .site-brand img{width:42px;height:42px}
  .site-header .site-brand small{font-size:9px;letter-spacing:.13em}
}

@media (max-width:580px){
  .site-header{padding:0 20px}
  .site-header nav{padding:8px 20px 18px}

  .flow-section{padding:40px 0;overflow:visible}
  .flow-row{min-width:0;display:flex;flex-direction:column;align-items:stretch;padding:26px 24px;background:#fbfaf7}
  .flow-row div{display:grid;grid-template-columns:18px 1fr;gap:14px;align-items:center;width:auto;text-align:left;font-size:12px;line-height:1.35}
  .flow-row div:before{width:16px;height:16px;margin:0}
  .flow-row i{width:1px;height:22px;min-height:22px;flex:none;margin:5px 0 5px 7px;background:#d0ccd5}
  .flow-row .terminal{font-size:12px}
  .flow-section p{min-width:0;margin:20px 0 0;text-align:left;font-size:11px;line-height:1.6}
}