@font-face{font-family:"Thmanyah Sans";src:url("/static/fonts/thmanyahsans-Light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("/static/fonts/thmanyahsans-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("/static/fonts/thmanyahsans-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#0A1A4F; --paper:#F5F7FB; --card:#FFFFFF; --acc:#2E5BFF; --acc-soft:#EDF1FF; --acc-soft-hover:#E2E9FF;
  /* --mut must stay >= 4.5:1 on both --paper and --card (WCAG AA for body text):
     #5B6580 measures 5.4:1 on paper, 5.8:1 on white. */
  --mut:#5B6580; --line:#E2E6F0; --ok:#0F7B54; --bad:#B3261E;
  --sans:"Thmanyah Sans","Segoe UI",Tahoma,Arial,"Noto Sans",system-ui,sans-serif;
  --mono:"Cascadia Mono",Consolas,ui-monospace,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-weight:400;-webkit-font-smoothing:antialiased;
  font-variant-numeric:lining-nums tabular-nums}
[data-lang="ar"].page{text-align:right;direction:rtl}
.wrap{max-width:1000px;margin:0 auto;padding:0 28px}
/* `*` alone never matches pseudo-elements, so the ::before spinner ring below
   must be named explicitly or it keeps spinning for exactly these users. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
:focus-visible{outline:2.5px solid var(--acc);outline-offset:3px;border-radius:4px}

/* ---- masthead ---- */
.mast{padding:26px 0 0}
.mast .in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.mast img{height:26px;width:auto;display:block}
.mast nav{display:flex;gap:26px;font-size:14.5px;color:var(--mut)}
.mast nav a{color:inherit;text-decoration:none}
.mast nav a:hover{color:var(--ink)}

/* ---- hero ---- */
.hero{padding:64px 0 0}
.hero h1{font-size:clamp(34px,5.2vw,52px);font-weight:300;line-height:1.28;margin:0 0 14px;
  max-width:17ch;text-wrap:balance;letter-spacing:-.01em}
.hero h1 b{font-weight:700}
.hero p{font-size:17px;line-height:1.9;color:var(--mut);margin:0;max-width:46ch}

/* ---- vin cell input ---- */
.entry{padding:42px 0 0}
.ghost{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.cellwrap{display:flex;gap:18px;direction:ltr;flex-wrap:wrap;cursor:text;
  justify-content:flex-start;width:fit-content;margin-inline-start:auto}
/* The real input is invisible; show its focus ring on the decorative strip. */
.ghost:focus-visible+.cellwrap{outline:2.5px solid var(--acc);outline-offset:6px;border-radius:12px}
/* First-visit example VIN: dashed, muted cells until the visitor types. */
.cellwrap.demo .c{color:var(--mut);border-style:dashed}
.grp{display:flex;flex-direction:column;gap:9px}
.cells{display:flex;gap:6px}
.c{width:40px;height:56px;border-radius:9px;background:var(--card);
  border:1.5px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:20px;font-weight:700;color:var(--ink);
  transition:border-color .15s,background .15s}
.c.on{border-color:var(--acc);background:#fff}
.c.cur{border-color:var(--ink)}
.c.pop{animation:pop .17s ease-out}
@keyframes pop{from{transform:scale(.88)}to{transform:scale(1)}}
@media (max-width:860px){ .c{width:33px;height:48px;font-size:17px} .cellwrap{gap:12px} }

/* On small screens the 17 cells collapse into ONE full-width row:
   display:contents dissolves the group wrappers so every cell becomes a
   direct flex item of .cellwrap and they share the width evenly. */
@media (max-width:640px){
  .cellwrap{width:100%;margin-inline-start:0;gap:3px;flex-wrap:nowrap}
  .grp,.cells{display:contents}
  .c{flex:1 1 0;width:auto;min-width:0;height:44px;font-size:14px;border-radius:6px;
    border-width:1px}
  /* Keep the 3/6/8 rhythm as a slightly wider gap after each group
     (:last-child is per .cells, which still exists with display:contents). */
  .cells .c:last-child{margin-inline-end:5px}
  .grp:last-child .cells .c:last-child{margin-inline-end:0}
  .ghost:focus-visible+.cellwrap{outline-offset:4px}
  .hint{margin-inline-start:0;width:auto}
}
@media (max-width:400px){
  .c{height:38px;font-size:12px;border-radius:5px}
  .entry .wrap{padding:0 14px}
  .cellwrap{gap:2px}
}

.acts{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px}
.go{background:var(--ink);color:#fff;border:0;border-radius:11px;padding:16px 40px;
  font-family:var(--sans);font-size:16.5px;font-weight:700;cursor:pointer;
  transition:background .16s}
.go:disabled{background:#C6CBDA;cursor:not-allowed}
.go:not(:disabled):hover{background:var(--acc)}
.cnt{font-size:13.5px;color:var(--mut);font-variant-numeric:tabular-nums}
.lnk{background:none;border:0;font-family:var(--sans);font-size:14px;color:var(--acc);
  cursor:pointer;padding:8px 2px;text-decoration:underline;text-underline-offset:4px}
.lnk:hover{color:var(--ink)}
.lnk.clr{color:var(--mut);text-decoration:none}
.lnk.clr:hover{color:var(--ink);text-decoration:underline}
.lnk.clr[hidden]{display:none}
.helpbtn{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;
  background:none;border:0;font-family:var(--sans);font-size:14px;color:var(--mut);cursor:pointer;padding:8px 2px}
.helpbtn:hover{color:var(--ink)}
.helpbtn svg{width:17px;height:17px;flex:none}
.helpbtn .chev{transition:transform .25s}
.helpbtn[aria-expanded="true"] .chev{transform:rotate(180deg)}

/* ---- where is my VIN ---- */
.help{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden}
.help[hidden]{display:none}
.help .inner{display:grid;grid-template-columns:1.15fr .85fr;gap:0}
@media (max-width:800px){ .help .inner{grid-template-columns:1fr} }
.help .art{padding:22px 24px;border-inline-start:1px solid var(--line);background:#FBFCFE}
/* On one column the drawing goes FIRST so it stays in view while the
   location buttons below it are tapped. */
@media (max-width:800px){
  .help .art{order:-1;border-inline-start:0;border-top:0;border-bottom:1px solid var(--line);
    padding:14px 18px}
}
.help .art svg{width:100%;height:auto;display:block}
.help .txt{padding:24px 26px 26px}
.help h2{font-size:19px;font-weight:700;margin:0 0 7px}
.help .note{font-size:14px;line-height:1.85;color:var(--mut);margin:0 0 18px}
.spots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.spots li{margin:0}
.spot{width:100%;display:flex;align-items:flex-start;gap:12px;background:none;border:0;
  font-family:var(--sans);text-align:start;cursor:pointer;padding:11px 12px;border-radius:10px;
  transition:background .15s;color:inherit}
.spot:hover,.spot.sel{background:var(--acc-soft)}
.spot .n{width:23px;height:23px;border-radius:50%;background:var(--ink);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  font-variant-numeric:tabular-nums;margin-top:1px}
.spot.sel .n{background:var(--acc)}
.spot .b{font-size:15px;font-weight:700;display:block;line-height:1.5}
.spot .s{font-size:13px;color:var(--mut);display:block;line-height:1.65;margin-top:1px}
.loc{opacity:0;transition:opacity .3s}
.loc.show{opacity:1}
#carsvg .doorhit{pointer-events:all}
#carsvg .door{transform-box:fill-box;transform-origin:0% 50%;
  transition:transform .55s cubic-bezier(.4,.05,.2,1)}
#carsvg:has(.loc[data-l="1"].show) .door,
#carsvg .doorhit:hover~.door{transform:scaleX(.45) skewY(-6deg)}
#carsvg .wshit{pointer-events:all;cursor:zoom-in}
#carsvg .car{transform-box:view-box;transform-origin:172px 172px;
  transition:transform .8s cubic-bezier(.4,.08,.18,1)}
#carsvg:has(.loc[data-l="0"].show) .car,
#carsvg:has(.wshit:hover) .car{transform:scale(2.35)}
#carsvg .wsdetail{opacity:0;transition:opacity .35s ease}
#carsvg:has(.loc[data-l="0"].show) .wsdetail,
#carsvg:has(.wshit:hover) .wsdetail{opacity:1;transition-delay:.3s}
#carsvg .sweep{opacity:0;transform:translateX(-16px);
  transition:transform 1s ease .15s,opacity .4s ease .15s}
#carsvg:has(.loc[data-l="0"].show) .sweep,
#carsvg:has(.wshit:hover) .sweep{opacity:.35;transform:translateX(26px)}
@media (prefers-reduced-motion:reduce){
  #carsvg .door,#carsvg .car,#carsvg .wsdetail{transition:none}
  #carsvg .sweep{display:none}
}
.loc .halo{fill:var(--acc);opacity:.18;transform-box:fill-box;transform-origin:center}
.loc .dot{fill:var(--acc)}
.loc.show .halo{animation:ping 1.9s ease-out infinite}
.loc .lead{stroke:var(--acc);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:3 4}
.loc .tag{fill:var(--ink);font-size:13px;font-weight:700}
@keyframes ping{0%{transform:scale(.7);opacity:.5}70%{transform:scale(1.7);opacity:0}100%{opacity:0}}
.car{transition:opacity .3s}
svg.docmode .car{opacity:.22}
.idcard .hl{fill:none;stroke:var(--acc);stroke-width:2}
.idcard .vin{fill:var(--ink);font-size:12px;font-weight:700;letter-spacing:.08em}

/* ---- result ---- */
.out{padding:0 0 8px}
.res{margin-top:34px;background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:32px 34px 26px;animation:rise .42s cubic-bezier(.2,.9,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.res .top{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.logo{width:76px;height:76px;border-radius:18px;background:#F3F6FD;flex:none;
  display:flex;align-items:center;justify-content:center;padding:11px;border:1px solid var(--line)}
/* Provider logos are PNGs with an opaque white square baked in; multiply
   makes pure white vanish against the light tile (tile must never be dark). */
.logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;
  mix-blend-mode:multiply}
.nm{margin:0;font-size:clamp(24px,3.6vw,33px);font-weight:700;line-height:1.32}
/* Sub-line is the OTHER language's name: Latin under Arabic on /ar, Arabic
   under Latin on /en. Letter-spacing only for Latin (it breaks Arabic joins). */
.nm .sub{display:block;font-size:13px;font-weight:400;color:var(--mut);margin-top:6px;
  unicode-bidi:plaintext;letter-spacing:0}
[data-lang="ar"] .nm .sub{letter-spacing:.1em;direction:ltr;text-align:right}
[data-lang="en"] .nm .sub{direction:rtl;text-align:left;font-size:15px}
.yr{margin-inline-start:auto;text-align:center;flex:none;padding-inline-start:14px}
.yr b{display:block;font-size:42px;font-weight:300;line-height:1;font-variant-numeric:tabular-nums}
.yr span{font-size:12.5px;color:var(--mut);display:block;margin-top:6px}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;
  margin-top:26px;border-top:1px solid var(--line);padding-top:24px}
.chip{background:var(--paper);border-radius:12px;padding:14px 17px}
.chip span{display:block;font-size:12.5px;color:var(--mut);margin-bottom:6px}
.chip b{font-size:15.5px;font-weight:700;line-height:1.5}
.partial-note{margin-top:10px;font-size:12.5px;color:var(--mut)}
.vinline{margin-top:16px;font-family:var(--mono);font-size:12.5px;color:var(--mut);
  letter-spacing:.13em;direction:ltr;text-align:left}
[data-lang="ar"] .vinline{text-align:right}
/* temporary public promo card (app.js promoHtml; uiux hand-off 2026-10-26) */
.promo{margin-top:12px;background:var(--card);border:1px solid var(--line);border-radius:20px;
  overflow:hidden;animation:rise .42s cubic-bezier(.2,.9,.3,1) .12s both}
.promo-body{padding:22px 34px 24px}
.promo-head{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;
  flex-wrap:wrap;margin-bottom:16px}
.promo-title{margin:0;font-size:17px;font-weight:700;line-height:1.5}
.promo-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  color:var(--acc);background:var(--acc-soft);border-radius:999px;padding:5px 12px;
  line-height:1.5;white-space:nowrap}
.promo-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);
  flex:none;box-shadow:0 0 0 0 rgba(46,91,255,.45);animation:promo-ping 1.8s ease-out .6s 3}
@keyframes promo-ping{0%{box-shadow:0 0 0 0 rgba(46,91,255,.45)}
  80%,100%{box-shadow:0 0 0 7px rgba(46,91,255,0)}}
.promo-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0}
.promo-spec{background:var(--paper);border-radius:12px;padding:14px 17px;
  animation:rise .38s cubic-bezier(.2,.9,.3,1) both}
.promo-spec:nth-child(1){animation-delay:.18s} .promo-spec:nth-child(2){animation-delay:.22s}
.promo-spec:nth-child(3){animation-delay:.26s} .promo-spec:nth-child(4){animation-delay:.30s}
.promo-spec:nth-child(5){animation-delay:.34s} .promo-spec:nth-child(6){animation-delay:.38s}
.promo-spec dt{font-size:12.5px;color:var(--mut);margin:0 0 6px}
.promo-spec dd{margin:0;font-size:15.5px;font-weight:700;line-height:1.5}
.promo-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 34px 17px;background:var(--acc-soft);border-top:1px solid var(--line);
  color:var(--acc);font-size:15px;font-weight:700;text-decoration:none;line-height:1.6;
  transition:background .16s,color .16s}
.promo-cta:hover{background:var(--acc-soft-hover);color:var(--ink)}
.promo-cta:focus-visible{outline-offset:-3px;border-radius:0 0 20px 20px}
.promo-arr{width:20px;height:20px;flex:none;transition:transform .2s}
.promo-cta:hover .promo-arr{transform:translateX(3px)}
[data-lang="ar"] .promo-arr{transform:scaleX(-1)}
[data-lang="ar"] .promo-cta:hover .promo-arr{transform:scaleX(-1) translateX(3px)}
.promo--empty .promo-cta{border-top:0}
.promo--empty .promo-cta:focus-visible{border-radius:20px}
.promo-secs{margin-top:18px;border-top:1px solid var(--line)}
.promo-sec{border-bottom:1px solid var(--line)}
.promo-sec-t{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;
  list-style:none;padding:13px 2px;font-size:15px;font-weight:700;min-height:44px}
.promo-sec-t::-webkit-details-marker{display:none}
.promo-sec-t::after{content:"";width:8px;height:8px;border:solid var(--mut);border-width:0 2px 2px 0;
  transform:rotate(45deg);flex:none;margin-inline-start:4px;transition:transform .2s}
.promo-sec[open] .promo-sec-t::after{transform:rotate(-135deg)}
.promo-sec-t:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:6px}
.promo-sec-n{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--mut);
  background:var(--paper);border-radius:999px;padding:2px 9px}
.promo-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;margin:0 0 12px}
.promo-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.promo-row dt{font-size:13px;color:var(--mut);margin:0}
.promo-row dd{margin:0;font-size:14.5px;font-weight:700;text-align:end;line-height:1.5}
@media (prefers-reduced-motion:reduce){ .promo-sec-t::after{transition:none} }
@media (max-width:640px){ .promo-list{grid-template-columns:1fr} }
.out[aria-busy="true"] .promo{opacity:.45;transition:opacity .2s}
@media (max-width:860px){ .promo-specs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){
  .promo{border-radius:16px}
  .promo-body{padding:18px 20px 6px}
  .promo-head{margin-bottom:6px}
  .promo-title{font-size:16px}
  .promo-specs{grid-template-columns:1fr;gap:0}
  .promo-spec{background:none;border-radius:0;padding:12px 0;display:flex;
    align-items:baseline;justify-content:space-between;gap:16px;
    border-bottom:1px solid var(--line)}
  .promo-spec:last-child{border-bottom:0}
  .promo-spec dt{margin:0;flex:none}
  .promo-spec dd{text-align:end;font-size:15px}
  .promo-cta{padding:15px 20px 16px;font-size:14.5px}
}
.cta{margin-top:20px;border-top:1px solid var(--line);padding-top:18px;font-size:14px;color:var(--mut)}
.cta a{color:var(--acc);font-weight:700;text-decoration:none}
.cta a:hover{text-decoration:underline;text-underline-offset:3px}

@media (max-width:640px){
  .mast .in{flex-direction:column;align-items:flex-start;gap:14px}
  .mast nav{gap:14px;flex-wrap:wrap;font-size:13.5px}
  .hero{padding:38px 0 0}
  .acts{gap:12px}
  .acts .go{width:100%;order:-1}
  .helpbtn{margin-inline-start:0}
  .res{padding:24px 20px 20px;border-radius:16px}
  .res .top{gap:14px}
  .yr{margin-inline-start:0;width:100%;text-align:left;display:flex;align-items:baseline;
    gap:9px;border-top:1px solid var(--line);padding:14px 0 0}
  [data-lang="ar"] .yr{text-align:right}
  .yr b{font-size:34px}
  .yr span{margin-top:0}
  .cta a{display:block;margin-top:6px}
  .info{padding:40px 0 0}
  .banner p{flex:1 1 100%}
}

.err{margin-top:30px;background:#FEF3F2;border:1px solid #F4CFCC;border-radius:14px;
  padding:19px 22px;max-width:620px;animation:rise .3s ease-out}
.err b{display:block;font-size:16px;font-weight:700;color:var(--bad);margin-bottom:5px}
.err span{display:block;font-size:14.5px;line-height:1.8;color:#7A3B36}
.err .lnk{margin-top:8px;padding-inline:0}

/* While a lookup is in flight the previous answer dims instead of vanishing. */
.out[aria-busy="true"] .res,.out[aria-busy="true"] .err{opacity:.45;transition:opacity .2s}

.hint{margin:14px 0 0;font-size:13.5px;line-height:1.7;color:var(--acc);
  background:var(--acc-soft);border-radius:9px;padding:10px 14px;width:fit-content;
  margin-inline-start:auto;max-width:100%}
.hint[hidden]{display:none}

.info{padding:56px 0 0}
.info h2{font-size:21px;font-weight:700;margin:0 0 10px}
.info p{font-size:15.5px;line-height:1.9;color:var(--mut);margin:0;max-width:56ch}
.info .btn{display:inline-block;margin-top:18px;background:var(--ink);color:#fff;
  border-radius:11px;padding:13px 28px;font-size:15px;font-weight:700;text-decoration:none}
.info .btn:hover{background:var(--acc)}

.foot{margin-top:60px;border-top:1px solid var(--line);padding:22px 0 44px;
  font-size:13px;color:var(--mut)}
.footin{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;align-items:center}
.footin a{color:var(--acc);text-decoration:none;font-weight:700;direction:ltr}
.footin a:hover{text-decoration:underline;text-underline-offset:3px}

/* language switch in the mast */
.mast nav a.lang{border:1px solid var(--line);border-radius:8px;padding:5px 12px}

/* lead-gen banner */
.banner{background:var(--acc-soft);border-bottom:1px solid var(--line);padding:10px 0}
.banner[hidden]{display:none}
.banner .in{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.banner p{margin:0;font-size:14px;color:var(--ink)}
.banner-cta{color:var(--acc);font-weight:700;text-decoration:none;font-size:14px}
.banner-cta:hover{text-decoration:underline;text-underline-offset:3px}
.banner-x{margin-inline-start:auto;background:none;border:0;font-size:18px;color:var(--mut);
  cursor:pointer;padding:0;min-width:44px;min-height:44px;display:inline-flex;
  align-items:center;justify-content:center}
.banner-x:hover{color:var(--ink)}

/* contact form */
.contact form{display:flex;flex-direction:column;gap:14px;max-width:560px;margin-top:18px}
.contact label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:700}
.contact input,.contact select,.contact textarea{font-family:var(--sans);font-size:15px;
  border:1.5px solid var(--line);border-radius:9px;padding:11px 13px;background:var(--card);
  color:var(--ink)}
.contact :is(input,select,textarea):focus-visible{border-color:var(--acc);outline:0;
  box-shadow:0 0 0 3px var(--acc-soft)}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}
.form-note{font-size:14px;padding:10px 14px;border-radius:9px}
.form-note.ok{background:#EAF7F0;color:var(--ok)}
.form-note.bad{background:#FEF3F2;color:var(--bad)}

/* loading state on the primary button: label swaps to "Looking up…" (app.js)
   and a small ring spins before it. Under prefers-reduced-motion the global
   rule at the top stops the animation; the ring stays as a static arc. */
.go[data-loading="1"]{opacity:.85;cursor:progress;display:inline-flex;align-items:center;
  justify-content:center;gap:10px}
.go[data-loading="1"]::before{content:"";width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* not-found page */
.nf{padding:72px 0 40px}
.nf h1{font-size:clamp(30px,4.5vw,44px);font-weight:300;margin:0 0 12px;letter-spacing:-.01em}
.nf h1 b{font-weight:700}
.nf p{font-size:16px;line-height:1.9;color:var(--mut);margin:0 0 22px;max-width:46ch}
.nf .links{display:flex;gap:14px;flex-wrap:wrap}
.nf .links a{display:inline-block;background:var(--ink);color:#fff;border-radius:11px;
  padding:12px 26px;font-size:15px;font-weight:700;text-decoration:none}
.nf .links a:hover{background:var(--acc)}
.nf .links a.alt{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.nf .links a.alt:hover{background:var(--acc-soft)}

/* maker-logo fallback tile (sandbox fixtures carry no logo) */
.logo-fallback{font-size:26px;font-weight:700;color:var(--ink)}