/* CarIndex design ("05 · Car brands index") — page-only rules (on top of site.css), scoped to <main class="pg">. */
@media (max-width:1080px){.pg .prose .facts{grid-template-columns:repeat(2,minmax(0,1fr))}.pg .srow{grid-template-columns:minmax(0,1fr);gap:10px}}

/* ---- shared by the three car pages (cars.css, car-make.css, car-model.css carry the same block) ---- */
.pg .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pg [hidden]{display:none!important}
.pg .car-mono{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:#111214;color:#fff;font-family:'TSO Dirham','Saira Condensed',sans-serif;font-weight:700;font-size:22px;letter-spacing:0.02em;flex:none}
.pg .car-logo-box{width:96px;height:96px;border-radius:24px;background:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.pg .car-logo-box img{max-width:66px;max-height:52px;object-fit:contain}
.pg .car-logo-box .car-mono{width:64px;height:64px;font-size:24px}
.pg .car-logo-box--sm{width:56px;height:56px;border-radius:16px}
.pg .car-logo-box--sm img{max-width:40px;max-height:30px}
.pg .car-logo-box--sm .car-mono{width:40px;height:40px;font-size:16px}
.pg .car-search{display:flex;align-items:center;gap:12px;height:56px;padding:0 22px;border-radius:999px;background:#fff;border:1px solid rgba(17,18,20,0.14);color:#111214;flex:1 1 320px;max-width:620px}
.pg .car-search input{flex:1;min-width:0;height:100%;background:transparent;border:0;outline:none;color:inherit;font-family:'TSO Dirham','Archivo',sans-serif;font-size:16px}
.pg .car-search:focus-within{border-color:#111214;box-shadow:0 0 0 3px rgba(17,18,20,0.08)}
.pg .car-none{margin:0;font-size:15px;color:#5F636B}
.pg .car-none a{color:#D7261E;text-decoration:underline}
.pg .car-lt-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pg .lt{transition:border-color .2s ease,box-shadow .2s ease}
.pg .lt:hover{border-color:#111214;box-shadow:0 14px 30px -22px rgba(0,0,0,0.5)}
.pg .car-about p{margin:0}
.pg .car-about a:not(.btn){color:#D7261E;text-decoration:underline}
.pg .car-lead strong{color:#fff}
@media (max-width:760px){.pg .car-logo-box{width:72px;height:72px;border-radius:18px}.pg .car-logo-box img{max-width:52px;max-height:40px}.pg .car-search{height:52px;padding:0 18px;flex-basis:100%}}
@media (max-width:420px){.pg .car-lt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* hero */
.pg .car-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pg .car-stats > span{display:flex;flex-direction:column;gap:4px}
.pg .car-stats .disp{font-size:clamp(34px,3.4vw,46px)}
.pg .car-stats .disp + span{font-size:13px;color:#9A9EA6}
.pg .car-pick .inp select{background:#fff;width:100%}
.pg .car-pick .inp select:disabled{opacity:.55}
.pg .car-go{background:rgba(255,255,255,0.1);color:#9A9EA6;transition:background .2s ease}
.pg .car-go[aria-disabled="true"]{cursor:not-allowed}
.pg .car-go.btn-red{background:#D7261E;color:#fff}
/* make tiles */
.pg .car-mk-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pg .mk{min-height:132px;justify-content:center}
.pg .mk img{height:56px;width:auto;max-width:80%;object-fit:contain}
.pg .mk:hover .car-mono{background:#D7261E}
/* A–Z */
.pg .car-az-bar{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.pg .car-az-bar .car-search{flex:none;width:100%}
.pg .car-az-bar .az a{width:40px}
.pg .az a{cursor:pointer}
.pg .az a:hover:not(.off){background:#111214;color:#fff}
.pg .car-az-row{grid-template-columns:80px minmax(0,1fr);align-items:start;scroll-margin-top:20px}
.pg .car-az-l{font-size:64px;font-weight:800;line-height:0.8}
@media (max-width:1080px){.pg .car-mk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.pg .car-az-row{grid-template-columns:56px minmax(0,1fr)}.pg .car-az-l{font-size:48px}}
@media (max-width:760px){
.pg .car-mk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pg .mk{min-height:112px;padding:14px 6px 12px;border-radius:14px}
.pg .mk img{height:40px}
.pg .mk .car-mono{width:44px;height:44px;font-size:18px}
.pg .car-az-row{grid-template-columns:minmax(0,1fr)}
.pg .car-az-l{font-size:40px}
.pg .az{gap:4px}
.pg .car-az-bar .az a{width:34px;height:38px;border-radius:10px;font-size:13px}
.pg .car-stats{gap:8px}
}
@media (max-width:340px){.pg .car-mk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}