/* Base styles from the Knobiq mockups; layout lives inline in the page markup. */
html{scroll-behavior:smooth}
body{margin:0;background:#0b0c10;color:#e6e8ee;-webkit-font-smoothing:antialiased}
a{color:#5ecbe0;text-decoration:none}
a:hover{color:#8fdcec}
::selection{background:#5ecbe0;color:#0b0c10}
input::placeholder{color:#6f7686}
input:focus,select:focus{outline:none;border-color:#5ecbe0 !important}
input::placeholder,textarea::placeholder{color:#6f7686}
input:focus,textarea:focus,select:focus{outline:none;border-color:#5ecbe0 !important}
[data-if]{display:contents}
[hidden],[data-if][hidden],[data-doc][hidden]{display:none !important}
[data-tab],[data-cell],[data-pad],[data-tier],[data-method],[data-consent],[data-chip],[data-go],[data-act]{-webkit-tap-highlight-color:transparent;user-select:none}
[role="button"]:focus-visible,[data-tab]:focus-visible,[data-cell]:focus-visible{outline:2px solid #5ecbe0;outline-offset:2px}

/* Mobile menu: the nav links fold into a toggle on narrow screens. */
.nav-toggle{display:none}
@media (max-width:820px){
  .nav-bar{gap:12px !important;padding:12px 20px !important}
  .nav-bar>a:first-child{margin-right:auto}
  .nav-toggle{order:3;display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:42px;height:38px;padding:0 11px;border:1px solid #2b2f39;border-radius:9px;background:#14161b;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .nav-toggle span{display:block;height:2px;border-radius:1px;background:#c8cdd8;transition:transform .2s,opacity .2s}
  .nav-bar.open .nav-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .nav-bar.open .nav-toggle span:nth-child(2){opacity:0}
  .nav-bar.open .nav-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .nav-links{display:none !important;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0 !important;padding:4px 20px 12px;background:#0b0c10;border-bottom:1px solid #1b1e25;box-shadow:0 18px 30px rgba(0,0,0,.5)}
  .nav-bar.open .nav-links{display:flex !important}
  .nav-links a{padding:13px 2px;font-size:14px !important;border-bottom:1px solid #1b1e25}
  .nav-links a:last-child{border-bottom:0}
}
.nav-toggle:focus-visible{outline:2px solid #5ecbe0;outline-offset:2px}

/* Tighter vertical rhythm and layouts that fit a phone. */
@media (max-width:640px){
  .sec{padding-top:84px !important;padding-left:20px !important;padding-right:20px !important}
  #top>section:first-of-type{padding:40px 20px 0 !important}
  #panel>div,#routing>div,#surface>div,#roadmap>div{gap:36px !important}
  footer{margin-top:96px !important}
  .fig-note{display:none}
  .rm-head{flex-direction:column;align-items:flex-start !important;gap:6px !important}
  .route-wrap{padding:10px !important}
  .route-grid{grid-template-columns:54px repeat(7,minmax(0,1fr)) !important;gap:3px !important;min-width:0 !important}
  .route-h{font-size:7px !important;letter-spacing:0 !important}
  .route-cell{height:34px !important;border-radius:6px !important;font-size:6.5px !important}
  .video-box{aspect-ratio:4/3 !important}
}