/* Central Fleet — public marketing site
   responsive.css
   Part of the approved design. Load order matters: see src/pages/index.html. */

@media(max-width:1000px){
  /* Must beat #login.cf-auth-page / #signup.cf-auth-page (2-col desktop grid) */
  #login,#signup,
  #login.cf-auth-page,#signup.cf-auth-page{
    grid-template-columns:1fr!important;
    overflow-y:auto;
  }
  .lg-art{display:none}
  .lg-form{
    padding:28px 22px 40px;
    width:100%;
    max-width:100%;
    min-width:0;
    box-sizing:border-box;
  }
  .lg-mlogo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:28px;
  }
  .lg-mlogo img{height:44px;width:auto}
  .lg-mlogo-brand{display:block;line-height:0;flex:0 1 auto;min-width:0}
  .lg-back-chip{
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    min-height:42px;
    padding:10px 14px;
    border:1.5px solid var(--rule2);
    border-radius:10px;
    background:var(--white);
    color:var(--ink)!important;
    font-size:13.5px;
    font-weight:600;
    white-space:nowrap;
    box-shadow:0 1px 2px rgba(13,18,17,.04);
  }
  .lg-back-chip:hover{
    border-color:#B4BEB9;
    background:var(--paper2);
    color:var(--ink)!important;
  }
  .lg-topbar{display:none}
  .lg-box,.su-box{
    margin:26px auto 0;
    max-width:100%;
    width:100%;
    box-sizing:border-box;
    padding-left:0;
    padding-right:0;
  }
  .lg-box h2{font-size:26px}
  .lg-field,.lg-in,.lg-submit{width:100%;max-width:100%;box-sizing:border-box}
  .lg-in input,.lg-in .inp{width:100%!important;max-width:100%;box-sizing:border-box}
  html.on-login body,html.on-signup body{overflow:auto}
  /* Keep EN|FR visible in the mobile auth header (was incorrectly hidden) */
  .lg-mlogo .lang,
  .lg-mlogo .cf-lang-switch{
    display:flex!important;
    visibility:visible!important;
    align-items:center;
  }
  .su-mbens{display:flex;flex-wrap:wrap;gap:7px 8px;margin:-14px 0 26px}
  .su-mbens span{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--gd);background:var(--gt);border:1px solid var(--gt2);border-radius:999px;padding:6px 11px}
  .su-box,.lg-box{margin-top:12px}
  .su-2col{grid-template-columns:1fr;gap:0}
  .su-acts .btn{flex:1 1 100%}
}
@media(max-width:420px){
  .lg-form{padding:22px 16px 36px}
  .su-acts .btn{flex:1 1 100%}
}
@media(max-width:1080px){
  .hgrid{grid-template-columns:1fr;gap:48px;padding-block:156px 84px}
  .qp{max-width:520px}
  .cov,.pgrid,.ppl{grid-template-columns:1fr;gap:44px}
  .strip .wrap{grid-template-columns:1fr 1fr}
  .bn{border-bottom:1px solid var(--rule);padding:26px 26px 26px 0}
  .bn:nth-child(2n){border-right:0;padding-left:26px}
  .bn:nth-child(2n+1){padding-left:0}
  .bn:nth-last-child(-n+2){border-bottom:0}
  .uc{grid-template-columns:1fr 1fr}
  .tl-step{padding-right:22px}
  .fgrid{grid-template-columns:1fr 1fr;gap:40px}
}
@media(max-width:760px){
  .wrap{padding-inline:20px}

  html.compact .hd,html.compact header.stuck .hd{height:72px}
  html.compact .mnav{top:72px}
  html.compact .logo img,html.compact header.stuck .logo img{height:34px}
  section{padding:64px 0}
  .hgrid{padding-block:104px 52px;gap:30px}
  .hero{background:var(--paper)}
  .hero .ph{height:560px;bottom:auto}
  .hero .scrim{height:660px;bottom:auto;background:linear-gradient(180deg,rgba(8,12,11,.74) 0%,rgba(8,12,11,.5) 34%,rgba(8,12,11,.72) 62%,rgba(8,12,11,.9) 80%,var(--paper) 100%)}
  .hero .ph{object-position:62% 58%}
  h1{font-size:clamp(34px,9.2vw,46px)}
  .hsub{font-size:16.5px}
  .hcta{flex-direction:column;align-items:stretch}
  .hcta .btn{width:100%}
  .qp{max-width:100%;width:100%;margin-inline:0}
  .qstep,.qhd{padding-inline:20px}
  .inp,.lg-in input{max-width:100%;box-sizing:border-box}
  .strip .wrap,.uc,.fgrid{grid-template-columns:1fr}
  .bn{border-right:0;padding:22px 0!important}
  .bn:last-child{border-bottom:0}
  .tl-d{display:none}
  .tl-m{display:block}
  .chips{display:flex}
  .mkt.sec{display:none}
  .mkt:not(.m5) .clab{display:none}
  .mkt.m5 .clab{font-size:19px;stroke-width:5}
  .mkt .pin{transform-box:fill-box;transform-origin:50% 100%;transform:scale(1.35)}
  .ppane{min-height:0}
  .shead{margin-bottom:32px}
  .mcta{display:block}
  .band{padding:70px 0}
  .accb p{padding-right:8px}
}
@media(max-width:420px){ .row2,.seg{grid-template-columns:1fr} }
@media(prefers-reduced-motion:reduce){.lg-pane{animation:none}}