@import url("./readability-20260921-base.css");

/* Mobile storefront refinement · 2026-09-28
   Keep the official KAIT mark visible, remove redundant top call CTA on phones,
   show the same nine links as desktop in two rows, with four product shortcuts. */
@media(max-width:640px){
  body:not(.rate-page) .top .nav{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:7px 10px;
    padding-top:9px;
    padding-bottom:9px;
  }

  body:not(.rate-page) .top .brand{
    grid-column:1;
    grid-row:1;
    min-width:0;
    margin:0;
  }

  body:not(.rate-page) .top .brand-copy{
    font-size:1.08rem;
    line-height:1.1;
  }

  body:not(.rate-page) .top .brand-copy small{
    font-size:.58rem;
  }

  body:not(.rate-page) .top .precon-badge{
    grid-column:2;
    grid-row:1;
    align-self:center;
  }

  body:not(.rate-page) .top .precon-official-mark{
    width:72px;
  }

  /* The mobile bottom bar already has a persistent phone CTA. */
  body:not(.rate-page) .top .nav>.btn{
    display:none;
  }

  body:not(.rate-page) .top .menu{
    grid-column:1 / -1;
    grid-row:2;
    display:grid!important;
    grid-template-columns:repeat(20,minmax(0,1fr));
    align-items:stretch;
    gap:4px;
    width:100%;
    min-width:0;
    overflow:visible;
  }

  body:not(.rate-page) .top .menu a{
    display:flex!important;
    align-items:center;
    grid-column:span 5;
    min-width:0;
    min-height:44px;
    justify-content:center;
    padding:7px 2px;
    border:1px solid rgba(16,60,82,.12);
    border-radius:10px;
    background:rgba(255,255,255,.78);
    font-size:clamp(11.5px,3.2vw,14px)!important;
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.04em;
    text-align:center;
    white-space:normal;
    overflow-wrap:normal;
  }

  body:not(.rate-page) .top .menu a:nth-child(5),
  body:not(.rate-page) .top .menu a:nth-child(7){grid-column:span 4}
  body:not(.rate-page) .top .menu a:nth-child(6){grid-column:span 2}

  body:not(.rate-page) .service-tags{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
  }

  body:not(.rate-page) .service-tags li{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
    padding:9px 3px;
    font-size:clamp(.76rem,3.1vw,.86rem);
    line-height:1.2;
    letter-spacing:-.04em;
    white-space:nowrap;
  }
}

@media(max-width:380px){
  body:not(.rate-page) .top .menu{
    gap:3px;
  }

  body:not(.rate-page) .top .menu a{
    font-size:11.5px!important;
    padding-left:1px;
    padding-right:1px;
  }

  body:not(.rate-page) .top .precon-official-mark{
    width:68px;
  }

  body:not(.rate-page) .service-tags{
    gap:5px;
  }

  body:not(.rate-page) .service-tags li{
    padding:8px 2px;
    font-size:.76rem;
  }
}