/* Mizan: price checker, Q2 2026 scan and method. Builds on /assets/site.css tokens and glass. */

:not(html)[lang=ar]{font-family:"SF Arabic","Geeza Pro","Noto Sans Arabic",var(--sans);letter-spacing:0;font-feature-settings:normal;unicode-bidi:isolate}
span[lang=ar]{white-space:nowrap}
.ar{color:var(--ink-3);font-weight:450}

/* ===== Head ===== */
.mz-head{margin-bottom:56px}
.mz-mark{width:48px;height:48px;padding:8px;border-radius:12px;background:none;box-shadow:inset 0 0 0 1px var(--line);
  fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mz-mark .pan{fill:color-mix(in srgb,var(--accent) 18%,transparent)}
.mz-head h1{font-size:clamp(1.9rem,1.6rem + 1.2vw,2.4rem);font-weight:600;letter-spacing:-.025em;margin-top:16px}
.mz-head h1 span span{font-weight:600;color:var(--ink-3);margin-inline-start:.15em}
.mz-head>p{color:var(--ink-2);margin-top:12px;font-size:1.12rem;max-width:56ch}
.mz-head .btns{margin-top:24px}

.mz-sec{margin-top:72px;scroll-margin-top:90px}
.sec-head{margin-bottom:18px}
.sec-head h2{font-size:clamp(1.35rem,1.2rem + .6vw,1.6rem);font-weight:600}
.sec-head p{color:var(--ink-2);margin-top:6px;max-width:60ch}

/* ===== Form ===== */
.check{padding:24px}
.form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 16px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.wide{grid-column:span 2}
.field .label span{text-transform:none;letter-spacing:0;font-weight:500}
.form input{width:100%;font:500 16px var(--sans);color:var(--ink);padding:10px 13px;border-radius:9px;border:0;outline:0;
  background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s var(--ease)}
.form input:focus{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 70%,transparent)}
.form input::placeholder{color:var(--ink-3)}
.form input[aria-invalid=true]{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--warn) 70%,transparent)}
.form .seg{align-self:flex-start;max-width:100%}
.form .seg button span span{color:var(--ink-3);margin-inline-start:4px;font-weight:500}
.field.use{grid-column:span 2}
@media (max-width:820px){.form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.form{gap:16px 12px}.check{padding:18px}}

.combo{position:relative}
.combo ul{position:absolute;left:0;right:0;top:100%;margin-top:6px;z-index:30;max-height:288px;overflow:auto;list-style:none;padding:6px;border-radius:12px;
  background:var(--surface);box-shadow:0 10px 30px rgba(0,0,0,.1),inset 0 0 0 1px var(--line);overscroll-behavior:contain}
.combo li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 12px;border-radius:10px;cursor:pointer;font-size:15px}
.combo li .ar{font-size:15px}
.combo li small{color:var(--ink-3);font-size:12px;font-family:var(--mono);margin-inline-start:auto;padding-inline-start:8px}
.combo li[aria-selected=true],.combo li:hover{background:var(--surface-2)}
.combo li.none{color:var(--ink-3);cursor:default}

.examples{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.examples>div{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:0;font:500 13.5px var(--sans);padding:5px 11px;border-radius:7px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .35s var(--spring),background-color .2s}
.chip:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent)}
.chip span{color:var(--ink-3);margin-inline-start:5px}

/* ===== Result ===== */
.result{margin-top:18px;padding:26px;min-height:120px}
.result .empty{color:var(--ink-3)}
.verdict{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 22px}
.gap{font-size:clamp(3rem,2rem + 4vw,4.6rem);font-weight:600;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.gap small{font-size:.32em;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);margin-inline-start:.3em}
.band{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:7px;font-size:13.5px;font-weight:500;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.band i{width:8px;height:8px;border-radius:50%;background:var(--ink-3)}
.band.well-below i,.band.below i{background:var(--accent)}
.band.check i{background:var(--warn)}
.as-of{margin-inline-start:auto;font-size:13px;color:var(--ink-3)}
.sentence{margin-top:16px;font-size:1.06rem;color:var(--ink-2);max-width:70ch}
.sentence b{color:var(--ink);font-weight:600}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px;padding:0;list-style:none}
.stats li{padding:12px 14px;border-radius:16px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.stats span{display:block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.stats b{display:block;margin-top:4px;font:500 1.08rem var(--mono);font-variant-numeric:tabular-nums}
.stats b em{font-style:normal;font-family:var(--sans);font-size:13px;color:var(--ink-3);font-weight:500}
@media (max-width:720px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.result{padding:18px}}

.charts{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;margin-top:20px}
@media (max-width:820px){.charts{grid-template-columns:minmax(0,1fr)}}
.chart{margin:0;padding:14px 14px 8px;border-radius:18px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.chart figcaption,.hist-fig figcaption{display:flex;flex-direction:column;gap:2px;font-size:14px}
.chart figcaption span,.hist-fig figcaption span{color:var(--ink-3);font-size:13px}
.chart svg,#hist svg{display:block;width:100%;height:auto;overflow:visible;margin-top:8px}
svg .ax{stroke:var(--line);stroke-width:1}
svg .tk{font:400 10.5px var(--mono);fill:var(--ink-3)}
svg .tk.mid{text-anchor:middle}
svg .tk.end{text-anchor:end}
svg .iqr{fill:color-mix(in srgb,var(--accent) 10%,transparent)}
svg .dot{fill:var(--ink-3);stroke:var(--surface);stroke-width:1.5;opacity:.75}
svg .dot:hover,svg .dot.on{fill:var(--ink);opacity:1}
svg .med{stroke:var(--ink);stroke-width:2;stroke-linecap:round}
svg .subj{stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
svg .subj-dot{fill:var(--accent);stroke:var(--surface);stroke-width:2}
svg .lab{font:600 11.5px var(--sans);fill:var(--ink-2)}
svg .lab.acc{fill:var(--accent)}
svg .line{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
svg .pt{fill:var(--surface);stroke:var(--ink-2);stroke-width:2}
svg .ref{stroke:var(--accent);stroke-width:1.5;stroke-dasharray:4 4}
svg .hit{fill:transparent;cursor:default}
svg .bar{fill:color-mix(in srgb,var(--ink) 22%,transparent)}
svg .bar.ok{fill:var(--accent)}
svg .bar.warn{fill:var(--warn)}
svg .bar.on{opacity:.75}

.notes{margin-top:18px;padding:0;list-style:none;display:grid;gap:8px}
.notes li{position:relative;padding-inline-start:22px;font-size:14.5px;color:var(--ink-2)}
.notes li::before{content:"";position:absolute;inset-inline-start:4px;top:.6em;width:7px;height:7px;border-radius:2px;background:var(--ink-3)}
.notes li.warn::before{background:var(--warn)}
.notes li.acc::before{background:var(--accent)}

.tip{position:fixed;z-index:70;pointer-events:none;padding:8px 11px;border-radius:12px;font-size:13px;line-height:1.4;max-width:240px;
  background:var(--ink);color:var(--bg);box-shadow:0 6px 20px rgba(0,0,0,.2);font-variant-numeric:tabular-nums}
.tip b{font-weight:650}

/* ===== Scan ===== */
.scan-top{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
.funnel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0 6px;padding:0;list-style:none}
.funnel li{position:relative;padding:14px 16px;border-radius:18px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.funnel b{display:block;font:600 clamp(1.5rem,1.2rem + 1vw,2rem) var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.funnel span{display:block;font-size:13.5px;color:var(--ink-2);margin-top:2px}
.funnel li.hl b{color:var(--accent)}
@media (max-width:720px){.funnel{grid-template-columns:repeat(2,minmax(0,1fr))}}
.hist-fig{margin:22px 0 0}
.key{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;padding:0;list-style:none;font-size:13px;color:var(--ink-2)}
.key i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-inline-end:6px;vertical-align:-1px}
.k-ok{background:var(--accent)}.k-warn{background:var(--warn)}.k-rest{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.takeaway{margin-top:18px;max-width:70ch;color:var(--ink-2)}
.takeaway b{color:var(--ink)}

.list{margin-top:18px}
.list-head h3{font-size:1.35rem;font-weight:600}
.list-head p{color:var(--ink-2);margin-top:4px;font-size:15px;max-width:72ch}
.tbl-wrap{margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;font-variant-numeric:tabular-nums}
.tbl th{text-align:start;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl .n{text-align:end;font-family:var(--mono);font-size:13.5px}
.tbl td .ar{margin-inline-start:6px}
.tbl td.gapc{color:var(--accent);font-weight:500}
.tbl tr:last-child td{border-bottom:0}
.tbl .go{border:0;padding:5px 11px;border-radius:7px;font:500 13px var(--sans);background:var(--glass-inset);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .2s}
.tbl .go:hover{background:var(--key-top)}
.more{margin-top:14px}
@media (max-width:620px){.tbl .hide-s{display:none}.tbl td,.tbl th{padding-left:6px;padding-right:6px}.tbl td:first-child{white-space:normal;min-width:7.5em}}

/* ===== How ===== */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0;list-style:none}
.steps li{padding:20px;border-radius:var(--r-lg)}
.steps b{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;font:600 14px var(--mono);color:var(--accent);background:var(--glass-inset);box-shadow:inset 0 0 0 1px var(--line)}
.steps h3{font-size:1.15rem;font-weight:600;margin-top:14px}
.steps p{color:var(--ink-2);font-size:14.5px;margin-top:6px}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.steps{grid-template-columns:minmax(0,1fr)}}
.faq{display:grid;gap:12px;margin-top:22px}
.faq details{border-radius:var(--r-lg);padding:0}
.faq summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:600;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-3);font-weight:500;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 20px 18px;color:var(--ink-2);max-width:72ch}
.faq a{color:var(--accent)}
.fine{margin-top:22px;font-size:13.5px;color:var(--ink-3);max-width:72ch}

/* Arabic: signed numbers and amounts keep their own direction (−32% stays −32%) */
:root[dir=rtl] :is(.gap,.tbl .n,.stats b,.funnel b,.sentence b){unicode-bidi:plaintext}