/* ========== JobChecked Mobile Refinement Layer ========== */
/* Desktop remains unchanged. Mobile only. */

@media (max-width: 980px){
  .site-header .header-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    gap:.55rem !important;
    padding:.9rem 0 !important;
  }

  .site-header .brand{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.7rem !important;
    text-align:left !important;
    margin:0 auto !important;
  }

  .site-header .brand-lockup{
    min-width:0 !important;
  }

  .site-header .nav{
    width:100% !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:.55rem !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    overflow:visible !important;
    padding:.05rem 0 0 0 !important;
    grid-auto-rows:1fr !important;
  }

  .site-header .nav-link{
    display:flex !important;
    width:100% !important;
    min-height:40px !important;
    align-items:center !important;
    justify-content:center !important;
    padding:.68rem .7rem !important;
    text-align:center !important;
    line-height:1.18 !important;
    border:1.5px solid rgba(21,154,148,.65) !important;
    border-radius:16px !important;
    background:#fff !important;
    white-space:normal !important;
    font-size:.88rem !important;
  }
}

@media (max-width: 768px){
  html{
    -webkit-text-size-adjust:100%;
  }

  body{
    font-size:15px;
  }

  .container{
    width:100% !important;
    padding-left:1rem !important;
    padding-right:1rem !important;
  }

  .site-header .brand-emblem{
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    transform:none !important;
    border:2px solid var(--jc-teal) !important;
    box-shadow:0 0 0 2px rgba(21,154,148,.12) !important;
  }

  .site-header .brand-wordmark-img{
    height:auto !important;
    max-height:28px !important;
    width:min(68vw,230px) !important;
  }

  

  .hero{
    padding:1.2rem 0 1.05rem !important;
  }

  h1{
    font-size:1.9rem !important;
    line-height:1.16 !important;
    margin:0 0 .85rem !important;
  }

  h2{
    font-size:1.45rem !important;
    line-height:1.2 !important;
  }

  h3{
    font-size:1.15rem !important;
    line-height:1.25 !important;
  }

  p,
  li{
    font-size:1rem !important;
    line-height:1.55 !important;
  }

  .lede{
    font-size:1rem !important;
    line-height:1.55 !important;
  }

  section.container,
  .band .container{
    padding-top:1.1rem !important;
    padding-bottom:1.1rem !important;
  }

  .cta-row{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:.6rem !important;
    align-items:stretch !important;
  }

  .cta-row .btn{
    width:100% !important;
    text-align:center !important;
    padding:.65rem .6rem !important;
    font-size:.88rem !important;
  }

  .btn{
    min-height:40px !important;
  }

  .grid,
  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-5,
  .two-col,
  .article-grid,
  .form-grid,
  .help-grid,
  .report-meta{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:.85rem !important;
  }

  .card,
  .article-card,
  .panel,
  .help-card,
  .confirm-card,
  .report-meta-item,
  .recommendation-box,
  .notes-box,
  .payment-box{
    padding:1rem !important;
    border-radius:18px !important;
  }

  .jc-list{
    gap:.7rem !important;
  }

  .jc-list li,
  .checklist li,
  .checkbox-item{
    display:grid !important;
    grid-template-columns:14px minmax(0,1fr) !important;
    align-items:start !important;
    gap:.55rem !important;
  }

  .jc-copy{
    min-width:0 !important;
  }

  .jc-copy strong{
    display:inline !important;
  }

  .jc-bullet{
    width:14px !important;
    height:14px !important;
    flex:0 0 14px !important;
    margin-top:.28rem !important;
  }

  .pill,
  .status-pill,
  .report-badge{
    display:inline-block !important;
    white-space:normal !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="file"],
  input[type="url"],
  textarea,
  select{
    max-width:100% !important;
  }

  .footer-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:.5rem !important;
  }

  .article-shell{
    max-width:100% !important;
  }

  .report-actions{
    display:flex !important;
    flex-direction:column !important;
    gap:.7rem !important;
  }
}



.step-card{
  display:flex !important;
  align-items:flex-start !important;
  gap:.6rem !important;
}
.step-number{
  flex:0 0 auto !important;
}

.jc-list li{
  align-items:flex-start !important;
}
.jc-copy{
  display:block !important;
}


@media (max-width:768px){
  .site-header .header-inner{
    gap:.4rem !important;
    padding:1rem 0 .7rem 0 !important;
  }

  .site-header .brand{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.8rem !important;
    margin:0 auto !important;
    text-align:left !important;
  }

  .site-header .brand-emblem{
    width:52px !important;
    height:52px !important;
    flex:0 0 52px !important;
    transform:none !important;
  }

  .site-header .brand-wordmark-img{
    width:auto !important;
    height:auto !important;
    max-height:36px !important;
    max-width:72vw !important;
    object-fit:contain !important;
  }

  .site-header .brand-lockup{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
  }

  .site-header .nav{
    gap:.4rem !important;
  }

  .site-header .nav-link{
    min-height:34px !important;
    padding:.46rem .45rem !important;
    font-size:.80rem !important;
    line-height:1.12 !important;
    border-radius:13px !important;
  }

  /* Step number beside title, not above */
  .mobile-step{
    display:grid !important;
    grid-template-columns:30px minmax(0,1fr) !important;
    column-gap:.65rem !important;
    row-gap:.15rem !important;
    align-items:start !important;
  }

  .mobile-step-number{
    grid-column:1 !important;
    grid-row:1 !important;
    margin:0 !important;
    width:30px !important;
    height:30px !important;
    align-self:start !important;
  }

  .mobile-step > p:first-of-type{
    grid-column:2 !important;
    grid-row:1 !important;
    margin:.1rem 0 0 0 !important;
    align-self:center !important;
  }

  .mobile-step > p:first-of-type strong{
    display:inline !important;
  }

  .mobile-step > p:last-of-type{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:.15rem 0 0 0 !important;
  }
}

@media (max-width:768px){

  .site-header .header-inner{
    padding:.6rem 0 .4rem 0 !important;
    gap:.3rem !important;
  }

  section.container,
  .band .container{
    padding-top:.7rem !important;
    padding-bottom:.7rem !important;
  }

  .card,
  .panel{
    padding:.7rem !important;
    border-radius:14px !important;
  }

  h1{margin-bottom:.5rem !important;}
  h2{margin-bottom:.4rem !important;}
  p{margin:.25rem 0 !important;}

  .nav{gap:.3rem !important;}

  .nav-link{
    min-height:32px !important;
    padding:.4rem .4rem !important;
    font-size:.78rem !important;
  }

  .cta-row{gap:.4rem !important;}
}


@media (max-width:768px){
  .site-header .brand-emblem{
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    min-height:52px !important;
    max-width:52px !important;
    max-height:52px !important;
    flex:0 0 52px !important;
    aspect-ratio:1 / 1 !important;
    object-fit:contain !important;
    display:block !important;
  }

  .site-header .brand-wordmark-img{
    width:auto !important;
    height:auto !important;
    max-height:36px !important;
    max-width:72vw !important;
    object-fit:contain !important;
    display:block !important;
  }
}


@media (max-width:768px){
  .site-header .brand-lockup{
    gap:2px !important;
  }

  .site-header .brand-tagline{
    display:block !important;
    font-size:11px !important;
    line-height:1.1 !important;
    letter-spacing:.15px !important;
    white-space:nowrap !important;
    margin:0 !important;
  }

  .site-header .brand-tagline-img{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-height:12px !important;
    max-width:52vw !important;
    object-fit:contain !important;
  }
}


@media (max-width:768px){

  /* Add breathing room above header */
  .site-header{
    padding-top:1rem !important;
  }

  /* Ensure header content not cramped */
  .site-header .header-inner{
    padding-left:1rem !important;
    padding-right:1rem !important;
  }

  /* Improve reading margins across site */
  .container{
    padding-left:1.2rem !important;
    padding-right:1.2rem !important;
  }

  /* Prevent text from touching edges */
  main{
    padding-left:.2rem !important;
    padding-right:.2rem !important;
  }

}


@media (max-width:768px){

  /* add space above nav */
  .site-header .brand{
    margin-bottom:.6rem !important;
  }

  /* 3 buttons across */
  .site-header .nav{
    display:grid !important;
    grid-template-columns:repeat(3, 1fr) !important;
    gap:.4rem !important;
    justify-content:center !important;
  }

  /* tighten buttons */
  .site-header .nav-link{
    min-height:34px !important;
    padding:.4rem .35rem !important;
    font-size:.78rem !important;
  }
@media (max-width:768px){
  .help-card{
    background:var(--jc-teal-050) !important;
    border:1px solid var(--jc-line) !important;
    border-radius:18px !important;
    padding:1rem !important;
    box-shadow:0 8px 24px rgba(13,27,30,.05) !important;
  }
}
}