*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Strip all browser outlines; restore a styled one only for keyboard nav */
* {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--bx-color-jade);
    outline-offset: 3px;
}

:root {
    --bx-font-latin:  "Geist", -apple-system, sans-serif;
    --bx-font-arabic: "Tajawal", "Almarai", system-ui, sans-serif;
    --bx-font-mono:   "IBM Plex Mono", ui-monospace, monospace;
    /* Muted text contrast lift for marketing light sections */
    --bx-text-muted:  #4A4430;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 64px;
}

body {
    font-family: var(--bx-font-latin);
    background: var(--bx-surface-bg);
    color: var(--bx-text);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* Form controls don't inherit font by default; force inheritance so the body
   font (Geist) applies consistently. Explicitly declaring font-family on each
   button can leave Chromium painting the fallback even after the webfont
   swaps in — sharing the resolved family via the cascade avoids that. */
button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

.wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--bx-space-8);
}

/* Scroll reveal */
.reveal {
    opacity: 0.4;
    transform: translateY(20px);
    transition: opacity 0.6s var(--bx-ease-decelerate), transform 0.6s var(--bx-ease-decelerate);
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

@media (max-width: 768px) {
    .wrap {
        padding: 0 var(--bx-space-5);
    }
}

/* ── RTL global typography ────────────────────────────────────────────────── */
html[dir="rtl"] {
    font-family: var(--bx-font-arabic);
}

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] p,
html[dir="rtl"] a,
html[dir="rtl"] button,
html[dir="rtl"] label,
html[dir="rtl"] span {
    font-family: var(--bx-font-arabic);
    line-height: 1.6;
}

/* Button classes use `font-family: inherit` (so Geist applies reliably in LTR).
   That defeats the RTL `button` rule above on specificity, so re-assert the
   Arabic font explicitly for these buttons in RTL. */
html[dir="rtl"] .btn,
html[dir="rtl"] .btn-ghost,
html[dir="rtl"] .signin-btn {
    font-family: var(--bx-font-arabic);
}

/* ── RTL: Arabic-content "mono" labels → Arabic body font ────────────────
   IBM Plex Mono has no Arabic glyphs; the system mono fallback breaks
   joining/shaping and is unreadable. These selectors hold Arabic text in
   the AR resources, so render them in Tajawal with natural RTL flow and
   zero the Latin-only letter-spacing/uppercasing. */
html[dir="rtl"] .overline,
html[dir="rtl"] .caps-overline,
html[dir="rtl"] .fw-overline,
html[dir="rtl"] .cta-over,
html[dir="rtl"] .cta-note,
html[dir="rtl"] .broc-module,
html[dir="rtl"] .broc-tag,
html[dir="rtl"] .soon-module,
html[dir="rtl"] .soon-eta,
html[dir="rtl"] .soon-badge,
html[dir="rtl"] .why-num,
html[dir="rtl"] .proof-label,
html[dir="rtl"] .badge-text,
html[dir="rtl"] .footer-legal,
html[dir="rtl"] .pill,
html[dir="rtl"] .badge-soon,
html[dir="rtl"] .badge-live,
html[dir="rtl"] .di-badge,
html[dir="rtl"] .dd-label,
html[dir="rtl"] .cap-tag,
html[dir="rtl"] .fas-pill,
html[dir="rtl"] .whom-role,
html[dir="rtl"] .shot-label,
html[dir="rtl"] .ledger-header,
html[dir="rtl"] .ledger-head,
html[dir="rtl"] .ledger-footer {
    font-family: var(--bx-font-arabic);
    letter-spacing: 0;
    text-transform: none;
    direction: rtl;
    unicode-bidi: normal;
}

/* ── RTL legibility: bump micro-label font sizes so Tajawal's dots and
   diacritics remain readable. Latin mono looks fine at 9–11 px; Arabic
   needs ~2 px more vertical space for the same perceived legibility. */
html[dir="rtl"] .overline,
html[dir="rtl"] .caps-overline,
html[dir="rtl"] .fw-overline,
html[dir="rtl"] .cta-over,
html[dir="rtl"] .broc-module,
html[dir="rtl"] .broc-tag,
html[dir="rtl"] .soon-module,
html[dir="rtl"] .why-num,
html[dir="rtl"] .proof-label,
html[dir="rtl"] .badge-text,
html[dir="rtl"] .footer-legal,
html[dir="rtl"] .pill,
html[dir="rtl"] .cap-tag,
html[dir="rtl"] .whom-role,
html[dir="rtl"] .cta-note {
    font-size: 13px;
    line-height: 1.5;
}

html[dir="rtl"] .di-badge,
html[dir="rtl"] .dd-label,
html[dir="rtl"] .shot-label,
html[dir="rtl"] .badge-soon,
html[dir="rtl"] .badge-live,
html[dir="rtl"] .ledger-head {
    font-size: 12px;
    line-height: 1.45;
}

html[dir="rtl"] .soon-badge,
html[dir="rtl"] .soon-eta,
html[dir="rtl"] .fas-pill,
html[dir="rtl"] .ledger-header,
html[dir="rtl"] .ledger-footer {
    font-size: 11px;
    line-height: 1.4;
}

/* Latin/numeric strings that must stay in mono LTR even in RTL context */
html[dir="rtl"] .bx-mono,
html[dir="rtl"] code,
html[dir="rtl"] .phi-label,
html[dir="rtl"] .footer-bottom-t,
html[dir="rtl"] .shot-url,
html[dir="rtl"] .why-callout-meta,
html[dir="rtl"] .btn-outline,
html[dir="rtl"] .ledger-row .debit,
html[dir="rtl"] .ledger-row .credit,
html[dir="rtl"] .ledger-row .dim,
html[dir="rtl"] .ledger-total span + span {
    font-family: var(--bx-font-mono);
    direction: ltr;
    unicode-bidi: embed;
}

/* Ledger account-name column (first cell of each row) is Arabic in AR */
html[dir="rtl"] .ledger-row > span:first-child,
html[dir="rtl"] .ledger-total > span:first-child {
    font-family: var(--bx-font-arabic);
    direction: rtl;
    unicode-bidi: normal;
    letter-spacing: 0;
}

/* Footer grid reverses naturally with dir=rtl on the html element */
html[dir="rtl"] .footer-grid {
    direction: rtl;
}

/* Tajawal semibold equivalent is 700 (IBM Plex Sans Arabic used 600) */
html[dir="rtl"] {
    --bx-fw-semibold: 700;
}