/* ===================== MOBILE LAYER ===================== */
.nav-burger{display:none;border:none;background:transparent;color:var(--ink);width:34px;height:34px;border-radius:9px;cursor:pointer;align-items:center;justify-content:center}
.nav-burger svg{width:20px;height:20px}
.drawer-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:59}
.drawer-overlay.show{display:block}

@media(max-width:820px){
  /* top bar */
  .bhead{padding:0 14px;gap:10px}
  .bhead .bname{font-size:18px}
  .bhead-nav a{display:none}
  .nav-burger{display:inline-flex}
  .theme-toggle{width:34px;height:34px}

  /* sidebar -> drawer */
  .app>.sidebar,body.app .sidebar{position:fixed;left:0;top:0;width:250px;height:100vh;z-index:60;background:var(--bg);border-right:1px solid #e2e0db;transform:translateX(-100%);transition:transform .25s ease;padding:70px 16px 20px}
  html[data-theme="dark"] .app>.sidebar{background:#15171a;border-color:#2a2d31}
  .sidebar.open{transform:translateX(0)}
  .app>.main,body.app .main{margin-left:0 !important;padding:20px 16px 40px}

  /* page head */
  .page-head{flex-direction:column;align-items:stretch;gap:12px}
  .page-title{font-size:26px}

  /* company sticky header */
  .co-sticky{top:52px}
  .co-head{flex-wrap:wrap;gap:12px}
  .co-head-info h1{font-size:22px}
  .co-head-logo{width:46px;height:46px;flex:0 0 46px}
  .tabs{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto}

  /* stat row */
  .stat-row{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:16px}
  .stat-n{font-size:24px}

  /* panel spacing */
  .panel2{padding:18px}
  .panel2-head{flex-direction:column;gap:2px}

  /* row forms stack */
  .row-form{flex-direction:column;align-items:stretch}
  .row-form input,.row-form select,.row-form .btn{width:100%}

  /* ===== TABLES -> STACKED CARDS ===== */
  .tbl thead{display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{border:1px solid #e2e0db;border-radius:14px;padding:14px;margin-bottom:12px;position:relative}
  html[data-theme="dark"] .tbl tr{border-color:#2a2d31}
  .tbl td{border:none;padding:4px 0;white-space:normal}
  .tbl td:before{content:attr(data-l) " · ";color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
  .tbl .c-act{position:absolute;top:10px;right:10px;padding:0;width:auto}
  .tbl .c-act:before{display:none}
  .th-act{display:none}

  /* modal full-width */
  .modal-overlay{padding:0;align-items:flex-end}
  .modal-box{max-width:100%;border-radius:18px 18px 0 0;padding:22px;max-height:90vh;overflow-y:auto}

  /* folder grid */
  .folder-grid{grid-template-columns:1fr 1fr;gap:10px}

  /* employee rows */
  .emp-search{font-size:16px}

  /* cards grid */
  .co-grid{grid-template-columns:1fr}
  .co-create .btn{width:100%}

  /* form card */
  .form-card{max-width:100%;padding:22px}

  /* landing */
  .wrap{padding:0 18px}
  .hero{padding:44px 0 30px}
  h1.hero-h{font-size:36px;letter-spacing:-1px}
  .hero-inner{display:block}
  .lead{font-size:16px}
  .hero-cta{flex-direction:column;gap:10px}
  .hero-cta .btn{width:100%}
  .feat{grid-template-columns:1fr;gap:32px}
  .cmp{grid-template-columns:1fr}
  .flow-bottom{grid-template-columns:1fr;gap:30px}
  .sec-head{gap:10px}
  .section-title{font-size:26px}
  .price-card{max-width:100%;padding:24px}
  .final-cta h2{font-size:28px}
  .nav-inner{flex-wrap:wrap;gap:10px;height:auto;padding:10px 0}
  .nav-links{order:3;width:100%;display:flex;gap:16px;justify-content:center;font-size:13.5px}
  .flow-arrow-down,.flow-arrow-up{display:none}
  .nav-inner{padding-left:14px;padding-right:14px}
  .mform .f{min-width:0 !important}
  .mform{flex-wrap:wrap}
  .m-input{overflow:hidden;text-overflow:ellipsis;min-width:0}
  #s3-emp-panel table{table-layout:fixed;width:100%}
  #s3-emp-panel th,#s3-emp-panel td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #s3-emp-panel th:nth-child(1),#s3-emp-panel td:nth-child(1){width:28%}
  #s3-emp-panel th:nth-child(2),#s3-emp-panel td:nth-child(2){width:26%}
  #s3-emp-panel th:nth-child(3),#s3-emp-panel td:nth-child(3){width:16%}
  #s3-emp-panel th:nth-child(4),#s3-emp-panel td:nth-child(4){width:30%}
  #s3-emp-panel th:nth-child(5),#s3-emp-panel td:nth-child(5){display:none}
  .flow-bottom{justify-items:center}
  .flow-side{align-items:center;text-align:center}
  .nav-cta{margin-left:auto}
  .foot-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .foot-inner nav{margin-left:0}

  /* how-it-works chat */
  .chatmock .cm-body{height:520px;padding:20px 14px}
  .cm-a-wrap{max-width:92%}

  /* auth */
  .auth-box{max-width:100%;padding:24px}

  /* emma/company panes */
  .panel2 + .panel2{margin-top:16px}
}

@media(max-width:480px){
  .stat-row{grid-template-columns:1fr}
  .folder-grid{grid-template-columns:1fr}
  h1.hero-h{font-size:30px}
  .tabs .tab{padding:8px 14px;font-size:13px}
}