/* ============================================================
   page-level composition
   Centred stack: section headers are centred, body copy stays
   start-aligned (centred paragraphs hurt Arabic readability).
   ============================================================ */

/* ---- centred section header ---- */
.sec-head{
  display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;
  max-width:64ch;margin-inline:auto;
}
.sec-head .lede{max-width:60ch}

/* ---- hero: split — copy at the inline start, product shot opposite ---- */
.hero{padding-block:clamp(3rem,7vw,5rem) clamp(2.5rem,6vw,4rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2rem,5vw,3.5rem);align-items:center}
@media (min-width:980px){.hero-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}}
.hero h1{max-width:16ch}
.hero .lede{max-width:48ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.page-hero{padding-block:clamp(3rem,7vw,5rem) clamp(2rem,5vw,3.5rem)}
.page-hero h1{max-width:20ch;margin-inline:auto}
.page-hero .lede{max-width:58ch;margin-inline:auto}

/* the gold thread centres with everything else */
.center .thread,.sec-head .thread{margin-inline:auto}

/* hero screenshot: wide, centred, the anchor of the page */
.shot-hero{width:100%;max-width:1000px;margin-inline:auto;margin-block-start:clamp(1rem,3vw,2rem)}

/* ---- proof strip ---- */
.proof{
  list-style:none;margin:clamp(2rem,5vw,3rem) 0 0;padding:0;width:100%;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;
}
@media (min-width:760px){.proof{grid-template-columns:repeat(4,minmax(0,1fr))}}
.proof li{background:var(--surface);padding:20px 16px;display:flex;flex-direction:column;
  gap:4px;align-items:center;text-align:center}
.proof b{font-size:var(--fs-24);font-weight:700;color:var(--ink-1);line-height:1.1}
.proof span{font-size:var(--fs-13);color:var(--ink-3);line-height:1.5}

/* ---- steps ---- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.steps li{background:var(--surface);padding:clamp(1.2rem,3vw,1.75rem);display:flex;gap:16px;align-items:flex-start}
.step-n{
  flex:0 0 auto;width:34px;height:34px;border-radius:999px;
  display:grid;place-items:center;font-size:var(--fs-14);font-weight:700;
  background:var(--gold-light);color:var(--gold-deep);border:1px solid rgba(197,160,89,.35);
}

/* ---- split ---- */
.split{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,4vw,3rem);align-items:start}
@media (min-width:900px){.split{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- tafqeet: a cheque line, centred ---- */
.tafqeet-demo{
  margin:0 auto;width:100%;max-width:760px;
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);
  padding:clamp(1.2rem,3vw,2rem);
  background-image:
    linear-gradient(to bottom,rgba(27,50,77,.03) 1px,transparent 1px),
    linear-gradient(to left,rgba(27,50,77,.03) 1px,transparent 1px);
  background-size:8px 8px,8px 8px;
}
.tq-row{display:flex;flex-direction:column;gap:6px}
.tq-label{font-size:var(--fs-12);font-weight:600;letter-spacing:.06em;color:var(--ink-4);
  font-family:var(--f-num);text-transform:uppercase}
.tq-amount{font-size:var(--fs-32);font-weight:700;color:var(--ink-1);line-height:1.1;display:block}
.tq-line{height:1px;background:var(--line);margin-block:18px}
.tq-words p{margin:0;font-size:var(--fs-18);line-height:1.9;color:var(--ink-1);max-width:none}
.tq-words strong{color:var(--gold-deep);font-weight:700}
.tq-notes{max-width:64ch;margin-inline:auto;display:flex;flex-direction:column;gap:12px;text-align:center}
.tq-notes p{margin-inline:auto}

/* ---- checks ---- */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.checks li{position:relative;padding-inline-start:30px;color:var(--ink-2);
  font-size:var(--fs-14);line-height:1.7;max-width:70ch}
.checks li::before{
  content:"";position:absolute;inset-inline-start:0;top:9px;
  width:14px;height:8px;border-inline-start:2px solid var(--gold);border-block-end:2px solid var(--gold);
  transform:rotate(-45deg);
}

/* ---- gold-threaded note card ---- */
.note-gold{border-inline-start:3px solid var(--gold)}

/* ---- features page groups ---- */
.fgroup{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);padding:clamp(1.3rem,3.5vw,2rem);
  display:flex;flex-direction:column;gap:16px;
}
.fgroup h2{font-size:var(--fs-24)}

/* ---- spec list (download) ---- */
.spec{margin:0;display:flex;flex-direction:column;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.spec>div{background:var(--surface);display:flex;flex-wrap:wrap;gap:8px 16px;
  justify-content:space-between;padding:14px 18px}
.spec dt{color:var(--ink-3);font-size:var(--fs-14);margin:0}
.spec dd{margin:0;color:var(--ink-1);font-size:var(--fs-14);font-weight:600}

/* ---- pricing ---- */
.price-grid{align-items:stretch;max-width:820px;margin-inline:auto;width:100%}
.plan{justify-content:space-between}
.plan-featured{border-color:var(--gold);box-shadow:var(--shadow-lift)}
.price{margin:0;font-size:var(--fs-32);font-weight:700;color:var(--ink-1);line-height:1.1;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.price .fine{font-weight:400}

.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-card);
  background:var(--surface);max-width:820px;margin-inline:auto;width:100%}
.cmp{width:100%;border-collapse:collapse;font-size:var(--fs-14);min-width:480px}
.cmp caption{padding:14px 16px 0;text-align:start}
.cmp th,.cmp td{padding:12px 16px;text-align:start;border-block-end:1px solid var(--line)}
.cmp thead th{font-size:var(--fs-12);font-weight:700;color:var(--ink-3);
  letter-spacing:.04em;background:#fbfcfe;white-space:nowrap}
.cmp tbody th{font-weight:400;color:var(--ink-2)}
.cmp td{color:var(--ink-1);width:22%;text-align:center}
.cmp thead th:not(:first-child){text-align:center}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-block-end:0}
.cmp .y{color:var(--ok);font-weight:700}
.cmp .n{color:var(--ink-4)}

/* ---- faq ---- */
.faq{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);
  overflow:hidden;max-width:860px;margin-inline:auto;width:100%}
.faq details{border-block-end:1px solid var(--line)}
.faq details:last-child{border-block-end:0}
.faq summary{
  cursor:pointer;padding:16px clamp(1rem,3vw,1.5rem);font-weight:600;color:var(--ink-1);
  list-style:none;display:flex;align-items:center;gap:12px;min-height:44px;
  transition:background var(--t-fast) var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:#fbfcfe}
.faq summary::before{
  content:"";flex:0 0 auto;width:8px;height:8px;
  border-inline-end:2px solid var(--gold-deep);border-block-end:2px solid var(--gold-deep);
  transform:rotate(-45deg);transition:transform var(--t-base) var(--ease);
}
.faq details[open] summary::before{transform:rotate(45deg)}
.faq details p{padding:0 clamp(1rem,3vw,1.5rem) 18px;margin:0;max-width:72ch}

/* ---- 404 ---- */
.nf{min-height:60svh;display:grid;align-items:center}
.nf-code{font-size:clamp(4rem,14vw,8rem);font-weight:700;color:var(--line-strong);line-height:1}
.nf-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}

/* ---- narrow screens ---- */
@media (max-width:520px){
  .hero-cta{flex-direction:column;align-items:stretch;width:100%}
  .hero-cta .btn{width:100%}
  .nf-links{flex-direction:column;align-items:stretch}
}

/* ---- legal documents ---- */
.legal-doc{max-width:74ch;margin-inline:auto;display:flex;flex-direction:column;gap:clamp(1.8rem,4vw,2.6rem)}
.legal-sec{display:flex;flex-direction:column;gap:12px;padding-block:0}
.legal-sec h2{font-size:var(--fs-24)}
.legal-sec p{color:var(--ink-2);max-width:none}
.seller-note{max-width:60ch;margin-inline:auto}

/* gaps that must never survive to publish — loud on purpose */
.gap{
  display:inline-block;padding:2px 8px;border-radius:var(--radius-ctl);
  font-family:var(--f-num);font-size:var(--fs-13);font-weight:600;
}
.gap-missing{background:#fee2e2;color:#991b1b;border:1px dashed #dc2626}
.gap-draft{background:#fef3c7;color:#92400e;border:1px dashed #d97706}

/* ---- tafqeet tool (tafqeet.html): the cheque line becomes the instrument ---- */
.tq-form{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-block-end:18px}
@media (min-width:760px){.tq-form{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}}
.tq-field{display:flex;flex-direction:column;gap:8px}
.tq-field label{font-size:var(--fs-13);font-weight:600;color:var(--ink-3)}
.tq-input,.tq-select{
  width:100%;min-height:52px;padding:0 14px;border-radius:var(--radius-ctl);
  border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-1);
  font-family:var(--f-ar);font-size:var(--fs-16);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.tq-input{font-family:var(--f-num);font-size:var(--fs-24);font-weight:600;font-variant-numeric:tabular-nums;direction:ltr;text-align:start}
.tq-input::placeholder{color:var(--ink-4);font-weight:400}
.tq-input:hover,.tq-select:hover{border-color:var(--brand-500)}
.tq-input:focus-visible,.tq-select:focus-visible{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 3px rgba(27,50,77,.15)}
.tq-input[aria-invalid="true"]{border-color:var(--danger)}
.tq-select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 14px center}
.tq-words-out{font-size:var(--fs-24);line-height:1.8;color:var(--ink-1);margin:0;min-height:2.2em;overflow-wrap:anywhere}
.tq-words-out .guard{color:var(--gold-deep)}
.tq-words-en{font-family:var(--f-num);font-size:var(--fs-16);line-height:1.6;color:var(--ink-2);margin:0;direction:ltr;text-align:start;min-height:1.6em}
.tq-out-row{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between}
.tq-out-row>div{flex:1 1 320px;min-width:0}
.tq-copy{flex:0 0 auto;min-height:40px;padding:0 14px;font-size:var(--fs-13)}
.tq-copy[data-state="loading"]{opacity:.7;pointer-events:none}
.tq-copy[data-state="done"]{border-color:var(--ok);color:var(--ok)}
.tq-error{color:var(--danger);font-size:var(--fs-13);margin:0;min-height:1.4em}
.tq-hint{color:var(--ink-4);font-size:var(--fs-13);margin:0}

/* worked examples: digits ↔ words, the single contrast of the page */
.ex-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
@media (min-width:760px){.ex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ex-grid li{background:var(--surface);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.ex-grid .ex-n{font-family:var(--f-num);font-variant-numeric:tabular-nums;font-size:var(--fs-18);font-weight:600;color:var(--ink-1);direction:ltr;text-align:end}
.ex-grid .ex-w{font-size:var(--fs-16);color:var(--ink-1);line-height:1.8;margin:0}
.ex-grid .ex-why{font-size:var(--fs-13);color:var(--ink-3);margin:0}
/* ---- print-test (print-test.html): the calibration sheet, on screen and on paper ---- */
.sheet-wrap{position:relative;width:100%;max-width:520px;margin-inline:auto;aspect-ratio:210/297;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-card);
  box-shadow:var(--shadow-lift);overflow:hidden}
.sheet{position:absolute;top:0;left:0;width:210mm;height:297mm;background:#fff;direction:ltr;
  transform-origin:top left;font-family:var(--f-ar);color:var(--ink-1)}
.sheet-grid{position:absolute;left:10mm;top:10mm;width:190mm;height:277mm;
  background-image:
    linear-gradient(to right,rgba(14,27,43,.45) 0 .2mm,transparent .2mm),
    linear-gradient(to bottom,rgba(14,27,43,.45) 0 .2mm,transparent .2mm),
    linear-gradient(to right,rgba(14,27,43,.14) 0 .1mm,transparent .1mm),
    linear-gradient(to bottom,rgba(14,27,43,.14) 0 .1mm,transparent .1mm);
  background-size:10mm 10mm,10mm 10mm,1mm 1mm,1mm 1mm;
  border-right:.2mm solid rgba(14,27,43,.45);border-bottom:.2mm solid rgba(14,27,43,.45)}
.sheet-bar{position:absolute;background:#0e1b2b}
.sheet-bar.h{left:10mm;top:10mm;width:100mm;height:.6mm}
.sheet-bar.v{left:10mm;top:10mm;width:.6mm;height:100mm}
.sheet-tick{position:absolute;background:#0e1b2b}
.sheet-tick.h1{left:10mm;top:8mm;width:.4mm;height:4.6mm}.sheet-tick.h2{left:109.6mm;top:8mm;width:.4mm;height:4.6mm}
.sheet-tick.v1{left:8mm;top:10mm;width:4.6mm;height:.4mm}.sheet-tick.v2{left:8mm;top:109.6mm;width:4.6mm;height:.4mm}
.sheet-lbl{position:absolute;font-size:3.2mm;line-height:1.3;color:#0e1b2b;direction:rtl;white-space:nowrap}
.sheet-lbl.bar-h{left:40mm;top:12mm}
.sheet-lbl.bar-v{left:13mm;top:60mm;writing-mode:vertical-rl;transform:rotate(180deg)}
.sheet-cheque{position:absolute;left:22mm;top:150mm;width:166mm;height:82mm;
  border:.45mm solid #0e1b2b;background:rgba(197,160,89,.06)}
.sheet-cheque .sheet-lbl{left:4mm;top:3mm}
.sheet-cheque .sheet-lbl.sub{top:9mm;font-size:2.8mm;color:#334155}
.sheet-cheque .micr{position:absolute;left:0;right:0;bottom:0;height:16mm;
  border-top:.25mm dashed rgba(14,27,43,.5);background:repeating-linear-gradient(45deg,transparent 0 2mm,rgba(14,27,43,.06) 2mm 2.5mm)}
.sheet-cheque .micr .sheet-lbl{left:4mm;top:auto;bottom:3mm;font-size:2.6mm;color:#334155}
.sheet-head{position:absolute;right:10mm;top:118mm;width:120mm;text-align:right;direction:rtl}
.sheet-head b{display:block;font-size:4.2mm;font-weight:700;margin-bottom:1.5mm}
.sheet-head p{margin:0;font-size:3mm;line-height:1.6;color:#334155}
.sheet-foot{position:absolute;left:10mm;right:10mm;bottom:6mm;display:flex;justify-content:space-between;
  font-size:2.8mm;color:#64748b;font-family:var(--f-num);direction:ltr}
.measure-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:760px){.measure-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.verdict{border-radius:var(--radius-ctl);padding:16px 18px;background:var(--gold-light);
  border:1px solid rgba(197,160,89,.35);display:flex;flex-direction:column;gap:8px}
.verdict[hidden]{display:none}
.verdict b{font-size:var(--fs-18);color:var(--ink-1)}
.verdict p{margin:0;color:var(--ink-2);font-size:var(--fs-14);line-height:1.75;max-width:none}
.verdict .ok{color:var(--ok)}
.verdict .bad{color:var(--danger)}
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff !important;margin:0;width:210mm}
  body>*:not(main){display:none !important}
  main>*:not(.print-host){display:none !important}
  .print-host>.wrap>*:not(.sheet-wrap){display:none !important}
  .print-host,.print-host>.wrap{display:block !important;padding:0 !important;margin:0 !important;max-width:none !important}
  .rv{opacity:1 !important;transform:none !important}
  .sheet-wrap{display:block !important;position:relative;max-width:none;aspect-ratio:auto;
    border:0;box-shadow:none;border-radius:0;overflow:visible;width:210mm;height:297mm;margin:0}
  .sheet{position:absolute;left:0;top:0;transform:none !important}
  .grid-bg{display:none !important}
}
/* tafqeet tool on the English (LTR) page: arrow on the end side, Arabic output keeps its own direction */
html[dir="ltr"] .tq-select{background-position:right 14px center}
html[dir="ltr"] .ex-grid .ex-n{text-align:start}
html[dir="ltr"] .tq-words-out[lang="ar"],html[dir="ltr"] .ex-w[lang="ar"]{direction:rtl;text-align:start}
.ex-grid .ex-en{font-family:var(--f-num);font-size:var(--fs-14);color:var(--ink-2);line-height:1.6;margin:0}
/* printer-test sheet on the English page: labels read left-to-right */
html[dir="ltr"] .sheet-lbl,html[dir="ltr"] .sheet-head{direction:ltr;text-align:left}