/* ============================================================
   Arabic typography overrides — applied only when locale = ar
   Loaded after landing.css and landing-rtl.css.

   Strategy: the English design uses Latin-tuned typography —
   negative letter-spacing on display, uppercase-tracked labels
   (0.08em–0.18em), very tight line-heights (1.02–1.05), and
   small-px mock chrome (8.5–10px). All of these read poorly
   with Arabic glyphs (kills kerning, clips diacritics, breaks
   ligatures, and tracks letters apart in a way Arabic doesn't
   do). This file neutralizes those for Arabic without removing
   the design intent.

   Stack:
     - Body / paragraph:      Noto Sans Arabic
     - UI / labels / buttons: Tajawal
     - Display / editorial:   Markazi Text (replaces Instrument Serif)
============================================================ */

:root {
    --font-ar-body:    'Noto Sans Arabic', 'Segoe UI', 'Tahoma', system-ui, sans-serif;
    --font-ar-ui:      'Tajawal', 'Noto Sans Arabic', 'Segoe UI', 'Tahoma', system-ui, sans-serif;
    --font-ar-display: 'Markazi Text', 'Noto Sans Arabic', Georgia, serif;
}

html, body {
    font-family: var(--font-ar-body);
    line-height: 1.75;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

/* ============================================================
   GLOBAL RESETS
   Negative letter-spacing and forced uppercase are Latin idioms;
   neutralize them everywhere by default. Specific elements re-tune
   below when needed.
============================================================ */

/* Latin negative tracking is poison for Arabic ligatures. */
h1, h2, h3, h4,
.hero h1, .stats-head h2, .shift-head h2,
.buyers-head h2, .wf-head h2, .wf-text h3,
.inside-head h2, .inside-card-title,
.oman-head h2, .pilot-head h2, .pricing-head h2,
.faq-h, .final-h,
.h-screen-title, .ic-cockpit-h,
.hp-kpi-v, .ic-kpi-v, .h-kpi-value,
.stat-num, .price-num, .price-tagline,
.buyer-h, .shift-action, .tl-h,
.oman-feat-h, .hero-ai-text,
.faq-q, .mock-bill-title, .mock-rec-title,
.mock-col-head, .mock-cl-title,
.btn, .btn-link {
    letter-spacing: 0;
}

/* Arabic doesn't have case — uppercase is a no-op, but Latin
   tracking applied to it (0.08–0.18em) spaces Arabic letters
   apart unnaturally. Reset tracking on every label class. */
.eyebrow, .num-eyebrow, .cap-label,
.hp-bar-title, .hp-kpi-l, .hp-list-h, .hp-wb-h,
.h-screen-title-sub, .h-screen-period,
.h-section-label, .h-kpi-label,
.shift-col-eyebrow, .wf-flow-tag,
.stat-tag, .buyer-role, .tl-week,
.mock-field-label, .mock-bill-conf,
.mock-col-sub, .mock-cl-flag,
.inside-card-eyebrow, .ic-bottom-h,
.ic-period-pill, .ic-kpi-l, .ic-chart-title,
.price-tier, .price-tag,
.footer-col-h, .footer-region,
.hero-ai-label {
    letter-spacing: 0.02em;
    text-transform: none;
}

/* The locale toggle label keeps a touch of tracking for "EN/ع". */
.nav-locale-btn { letter-spacing: 0.04em; }

/* ============================================================
   DISPLAY HEADLINES — map English Instrument Serif role to Markazi.
   English design uses 1.02–1.15 line-heights; Arabic glyphs with
   diacritics need 1.25–1.4 minimum to avoid clipping.
============================================================ */
h1, h2, h3, h4,
.display, .num-display, .h-display,
.hero h1,
.stats-head h2, .shift-head h2,
.buyers-head h2, .wf-head h2, .wf-text h3,
.inside-head h2, .inside-card-title,
.oman-head h2, .pilot-head h2, .pricing-head h2,
.faq-h, .final-h,
.buyer-h, .shift-row .shift-action,
.oman-feat-h, .tl-h,
.faq-q, .price-tagline,
.hero-ai-text,
.h-screen-title, .ic-cockpit-h,
.mock-bill-title, .mock-rec-title,
.mock-col-head, .mock-cl-title {
    font-family: var(--font-ar-display);
    font-weight: 600;
}

/* Per-element line-height + weight tuning for Markazi. */
.hero h1            { line-height: 1.3; font-weight: 600; }
.stats-head h2,
.shift-head h2,
.buyers-head h2,
.wf-head h2,
.inside-head h2,
.oman-head h2,
.pilot-head h2,
.pricing-head h2    { line-height: 1.25; font-weight: 600; }
.wf-text h3         { line-height: 1.25; font-weight: 600; }
.faq-h              { line-height: 1.25; font-weight: 600; }
.final-h            { line-height: 1.2;  font-weight: 600; }
.buyer-h            { line-height: 1.35; font-weight: 600; max-width: 380px; }
.shift-row .shift-action { line-height: 1.4; font-weight: 600; }
.faq-q              { line-height: 1.45; font-weight: 600; }
.tl-h               { line-height: 1.35; font-weight: 600; }
.oman-feat-h        { line-height: 1.35; font-weight: 600; }
.price-tagline      { line-height: 1.45; font-weight: 500; min-height: 72px; }
.hero-ai-text       { line-height: 1.5;  font-weight: 500; }
.inside-card-title  { line-height: 1.3;  font-weight: 600; }

/* Mock-internal display titles read smaller — looser leading helps. */
.mock-bill-title,
.mock-rec-title,
.mock-col-head,
.mock-cl-title,
.h-screen-title,
.ic-cockpit-h       { line-height: 1.4;  font-weight: 600; }

/* ============================================================
   ITALIC EMPHASIS (<i> / <em>)
   Markazi has no italic glyph — using browser default fakes it
   with a slant which renders as garbage. Force upright everywhere
   and convey emphasis with weight + color instead.
============================================================ */
i, em { font-style: normal; }

/* Light sections — primary tint emphasis. */
h1 i, h2 i, h3 i, h4 i,
.hero h1 i,
.stats-head h2 i,
.shift-head h2 i,
.buyers-head h2 i,
.wf-head h2 i,
.wf-text h3 i,
.inside-head h2 i,
.inside-card-title i,
.pilot-head h2 i,
.pricing-head h2 i,
.faq-h i,
.shift-row .shift-action i,
.tl-h i, .tl-d i,
.shift-detail i,
.price-tagline i {
    font-weight: 700;
    color: var(--primary);
}

.hero h1 i { color: var(--primary-mid); }

/* Hero AI card — sits on a dark gradient. Inherit the original
   light-lavender treatment so emphasis stays visible. */
.hero-ai-text i { font-weight: 600; color: #B8A0DA; }

/* Dark-background sections — primary navy is invisible on navy.
   Re-assert each as inherited or the existing light tint. */
.oman-head h2 i,
.oman-feat-h i,
.final-h i,
.buyer-card .buyer-h em,
.buyer-card .buyer-h i,
.price-col.featured .price-tagline i,
.price-col.featured .price-tier i,
footer i, footer em {
    font-weight: 700;
    color: inherit;
}

.buyer-card.owner   .buyer-h em { color: rgba(236, 197, 255, 0.85); }
.buyer-card.finance .buyer-h em { color: rgba(186, 230, 235, 0.9); }
.buyer-h em                     { color: rgba(255, 255, 255, 0.85); }
.oman-head h2 i                 { color: #9ca3af; }
.oman-feat-h i                  { color: #9ca3af; }
.final-h i                      { color: rgba(255, 255, 255, 0.7); }
.price-col.featured .price-tagline i { color: rgba(255, 255, 255, 0.7); }

/* Hero accent word — keep upright, weight + accent color. */
.accent-word {
    font-family: var(--font-ar-display);
    font-weight: 700;
    font-style: normal;
    color: var(--accent);
}

/* ============================================================
   BODY COPY — Noto Sans Arabic.
   English line-heights of 1.5–1.65 leave Arabic feeling cramped;
   bump to 1.75–1.85.
============================================================ */
p, li, .lead,
.shift-detail, .wf-flow-text, .tl-d, .faq-a-inner,
.buyer-quote, .buyer-list, .price-feats, .oman-feat-p,
.footer-tagline, .footer-col-list,
.faq-help, .pricing-foot,
.pilot-head p, .stats-head p, .shift-head p,
.buyers-head p, .wf-head p, .inside-head p,
.pricing-head p,
.hero-sub, .stat-label, .final-sub,
.inside-card-sub, .anno {
    font-family: var(--font-ar-body);
    font-weight: 400;
}

.hero-sub        { font-size: 17px; line-height: 1.85; max-width: 520px; }
.lead            { line-height: 1.85; }

/* ============================================================
   HERO SCREEN LAYOUT
   Arabic labels and list rows run longer than the English mock.
   Give the layered scene more vertical room, then flatten it
   earlier once the hero collapses to a single-column layout.
============================================================ */
.hero-screen-wrap { height: 620px; }

@media (max-width: 1100px) {
    .hero-screen-wrap {
        height: auto;
        max-width: 620px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .hero-panel-owner,
    .hero-panel-finance,
    .hero-ai-card {
        position: static;
        width: 100%;
        transform: none;
        animation: none;
    }
}
.faq-a-inner     { line-height: 1.85; }
.oman-feat-p     { line-height: 1.8; }
.final-sub       { line-height: 1.8; }
.footer-tagline  { line-height: 1.85; max-width: 320px; }
.stat-label      { line-height: 1.7; max-width: 220px; }
.buyer-quote     { line-height: 1.75; }
.wf-text p       { line-height: 1.8; max-width: 480px; }
.shift-detail    { line-height: 1.7; }
.tl-d            { line-height: 1.7; }
.inside-card-sub { line-height: 1.7; }

/* Quotes — Markazi can't render italic, so swap to body Noto Sans
   and rely on weight + color contrast. */
.buyer-quote {
    font-family: var(--font-ar-body);
    font-style: normal;
    font-weight: 500;
}

body { font-variant-numeric: tabular-nums; }

/* ============================================================
   EYEBROWS / SMALL UI LABELS — Tajawal
============================================================ */
.eyebrow {
    font-family: var(--font-ar-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
}
.num-eyebrow {
    font-style: normal;
    font-family: var(--font-ar-display);
    font-weight: 600;
}
.cap-label {
    font-family: var(--font-ar-ui);
    font-size: 12px;
    font-weight: 600;
}

/* ============================================================
   BUTTONS / NAV / PRICING TAGS — Tajawal
============================================================ */
.btn, .btn-link, .nav-signin, .nav-locale-btn,
.mock-btn,
.price-tier, .price-tag, .price-period, .price-note {
    font-family: var(--font-ar-ui);
    font-weight: 600;
}
.btn { font-size: 14.5px; }
.nav-links a { font-family: var(--font-ar-ui); font-weight: 500; }

/* ============================================================
   MOCK UI CHROME — Tajawal
   Many of these are 8.5–10px in the Latin design. At those sizes
   Arabic Tajawal is illegible; bump up by 1–1.5px and loosen
   tracking. Numerics (KPI values, amounts) stay where they are.
============================================================ */
.hp-bar-title,
.hp-kpi-l,
.hp-list-h,
.hp-wb-h,
.h-screen-title-sub,
.h-section-label,
.h-kpi-label,
.shift-col-eyebrow,
.wf-flow-tag,
.stat-tag,
.tl-week,
.mock-field-label,
.mock-col-sub,
.inside-card-eyebrow,
.ic-bottom-h,
.ic-period-pill,
.ic-kpi-l,
.ic-chart-title,
.buyer-role,
.hero-ai-label,
.footer-col-h,
.footer-region,
.hp-list-pill,
.mock-bill-conf,
.mock-rec-pct,
.mock-cl-flag,
.stat-tag, .stat-label,
.hp-list-name, .hp-wb-name, .hp-wb-sub, .hp-list-amount,
.mock-rec-desc, .mock-rec-bulk-text,
.mock-col-name, .mock-col-meta, .mock-col-suggest,
.mock-cl-progress, .mock-cl-text,
.h-list-name, .h-list-pill,
.ic-wb-name, .ic-wb-sub,
.hero-ai-action,
.buyer-list, .buyer-list-more,
.nav-cta {
    font-family: var(--font-ar-ui);
}

/* Tiny chrome label legibility bump. */
.hp-bar-title       { font-size: 10px;  font-weight: 600; }
.hp-kpi-l           { font-size: 10px;  font-weight: 600; }
.hp-kpi-d           { font-size: 9.5px; }
.hp-list-h          { font-size: 10px;  font-weight: 700; }
.hp-list-pill       { font-size: 9.5px; font-weight: 700; padding: 3px 7px; }
.hp-wb-h            { font-size: 10px;  font-weight: 700; }
.hp-wb-name         { font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.hp-wb-sub          { font-size: 9.5px; line-height: 1.4; }
.hp-list-name       { font-size: 11px;  font-weight: 500; line-height: 1.4; }
.shift-col-eyebrow  { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; }
.stat-tag           { font-size: 11px;  font-weight: 700; letter-spacing: 0.04em; }
.tl-week            { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; }
.buyer-role         { font-size: 12px;  font-weight: 700; letter-spacing: 0.04em; }
.hero-ai-label      { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; }
.footer-col-h       { font-size: 12px;  font-weight: 700; letter-spacing: 0.04em; }
.footer-region      { font-size: 13px; }
.mock-field-label   { font-size: 10.5px; font-weight: 700; }
.mock-bill-conf     { font-size: 10.5px; font-weight: 700; }
.mock-col-sub       { font-size: 11.5px; font-weight: 600; }
.mock-cl-flag       { font-size: 10.5px; font-weight: 700; }
.inside-card-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.ic-bottom-h        { font-size: 11.5px; font-weight: 700; }
.ic-kpi-l           { font-size: 11px;  font-weight: 700; }
.ic-chart-title     { font-size: 12px;  font-weight: 700; }
.h-kpi-label        { font-size: 11px;  font-weight: 700; }
.h-screen-title-sub { font-size: 11.5px; font-weight: 600; }
.h-section-label    { font-size: 11px;  font-weight: 700; }
.wf-flow-tag        { font-size: 11px;  font-weight: 700; }
.cap-item           { font-size: 14px; }

/* Buyer-list bullets — Arabic reads better at slightly larger size. */
.buyer-list li     { font-size: 14px; line-height: 1.7; padding-right: 18px; }
.buyer-list-more   { font-style: normal; }

/* Pricing fine-tuning. */
.price-feats li    { font-family: var(--font-ar-body); font-size: 14px; line-height: 1.65; padding: 8px 0; }
.price-tier        { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.price-period      { font-size: 14px; }
.price-note        { font-size: 12.5px; line-height: 1.55; }
.pricing-foot      { font-family: var(--font-ar-body); font-size: 13.5px; }
.price-tag         { font-family: var(--font-ar-ui); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; }
.price-col.featured { padding-top: 60px; }
.price-tag {
    left: 14px;
    right: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 28px);
    white-space: nowrap;
    line-height: 1.15;
    text-transform: none;
}
.price-col.featured .price-tagline,
.price-col.featured .price-tier,
.price-col.featured .price-period,
.price-col.featured .price-note { color: rgba(255, 255, 255, 0.85); }

/* ============================================================
   LTR-ISOLATED RUNS — numbers, currency, codes, brand
   Numerals stay Latin/Western Arabic and align LTR even inside
   an RTL paragraph. Without this, a vendor row's amount drifts
   into the wrong place visually.
============================================================ */
.chrome-url {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
    font-family: 'JetBrains Mono', monospace;
}

.hp-kpi-v, .ic-kpi-v, .h-kpi-value,
.doc-total, .mock-rec-amt, .mock-col-amt,
.price-amount, .hp-list-amount, .h-list-amount,
.stat-num, .price-num, .price-currency,
.mock-rec-pct, .mock-bill-conf,
.hp-wb-count, .ic-wb-count,
.hp-kpi-d, .ic-kpi-d, .h-kpi-trend,
.hp-list-pill {
    direction: ltr;
    unicode-bidi: isolate;
    font-feature-settings: "tnum" 1, "lnum" 1;
}

/* But pills with Arabic time labels ("61 يومًا") need to stay
   in their natural reading order — override per pill content. */
.hp-list-pill {
    direction: rtl;
    unicode-bidi: plaintext;
    font-family: var(--font-ar-ui);
}

/* Small Latin runs that should not flip or get Arabic font. */
.stat-num, .stat-num i, .approx,
.wf-num,
.tl-marker,
.doc-line, .doc-divider {
    direction: ltr;
    unicode-bidi: isolate;
}
.wf-num, .tl-marker { font-family: 'Instrument Serif', serif; font-style: italic; }

/* Workflow step numbers are editorial numerals, but the Arabic layout
   needs the decorative dash to sit on the opposite side of the digits. */
.wf-num {
    display: inline-flex;
    align-items: baseline;
    gap: 0.15em;
    white-space: nowrap;
}

.wf-num::before {
    content: none;
}

.wf-num::after {
    content: '\2014';
    color: var(--slate-mute);
    font-style: normal;
    font-size: 26px;
    line-height: 1;
}

/* Numeric KPI values keep Instrument Serif weight/size — they're
   numbers, not Arabic words, and the editorial tone matches. */
.hp-kpi-v, .ic-kpi-v, .h-kpi-value,
.stat-num, .price-num,
.hp-wb-count, .ic-wb-count {
    font-family: 'Instrument Serif', serif;
    font-style: normal;
}

/* Arabic words embedded inside numeric/editorial display runs need
   the Arabic display stack instead of browser fallback serif. */
.stat-num .ar-display-run,
.stat-num i.ar-display-run,
.price-num.ar-display-run,
.price-num .ar-display-run {
    direction: rtl;
    unicode-bidi: plaintext;
    font-family: var(--font-ar-display);
    font-style: normal;
    font-weight: 600;
}

.doc-total .ar-ui-run {
    direction: rtl;
    unicode-bidi: plaintext;
    font-family: var(--font-ar-ui);
    font-style: normal;
    font-weight: 700;
}

/* ============================================================
   GRID/LAYOUT FIXES — Arabic vendor names are often longer than
   English ones; tighten overflow handling so they don't break
   the row grids.
============================================================ */
.hp-list-row { font-size: 11px; }
.hp-list-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.h-list-row { font-size: 13.5px; }
.h-list-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The hero h1 fixed clamp is fine, but Arabic at the top end
   feels tight — pull max down a touch. */
.hero h1 {
    font-size: clamp(36px, 4.6vw, 68px);
    margin-bottom: 32px;
}

/* The buyers head paragraph — bigger for readability. */
.buyers-head p,
.wf-head p,
.inside-head p,
.pricing-head p,
.pilot-head p,
.shift-head p { font-size: 17px; line-height: 1.8; }

/* Pricing tagline min-height fits 2 wrapped Arabic lines. */
.price-tagline { min-height: 72px; }

/* Buyer-h max-width gives a touch more room for Arabic line wrap. */
.buyer-h { max-width: 380px; }

/* FAQ question button — Arabic question marks render at the
   start in RTL; ensure the right-side icon never gets crushed. */
.faq-q { font-size: 19px; gap: 20px; padding: 22px 0; }

/* Mock chrome titles slightly smaller in Markazi (which reads
   bigger per em than Instrument Serif at the same px). */
.mock-bill-title,
.mock-rec-title,
.mock-col-head,
.mock-cl-title,
.h-screen-title,
.ic-cockpit-h { font-size: 17px; }

/* Inside card headline pacing. */
.inside-card-title { font-size: 22px; }

/* ============================================================
   DIRECTION-SENSITIVE ICONS
   The HTML hardcodes "→" as a forward-pointing arrow in CTAs and
   AI cards. In RTL, "forward" reads as left-pointing; mirror via
   transform so the arrow follows the Arabic reading direction.
============================================================ */
.btn-arrow { display: inline-block; transform: scaleX(-1); }
.btn:hover .btn-arrow,
.btn-link:hover .btn-arrow { transform: scaleX(-1) translateX(3px); }
.hero-ai-action span:last-child { display: inline-block; transform: scaleX(-1); }

/* ============================================================
   ANIMATIONS — the keyframes for hero-ai-card use translate
   values that aren't aware of RTL transforms. The RTL build
   already redefines them with mirrored translates, but the
   underlying animation is shared, so re-assert the float here
   to guarantee correct direction in Arabic.
============================================================ */
@keyframes hero-float-rtl {
    0%, 100% { transform: translate(50%, -50%) translateY(0); }
    50%      { transform: translate(50%, -50%) translateY(-6px); }
}
.hero-ai-card { animation-name: hero-float-rtl; }

/* ============================================================
   RESPONSIVE — keep Arabic readable on small screens.
============================================================ */
@media (max-width: 880px) {
    .hero h1            { font-size: clamp(32px, 7vw, 48px); line-height: 1.3; }
    .stats-head h2,
    .shift-head h2,
    .buyers-head h2,
    .wf-head h2,
    .inside-head h2,
    .oman-head h2,
    .pilot-head h2,
    .pricing-head h2    { font-size: clamp(26px, 6vw, 36px); line-height: 1.3; }
    .final-h            { font-size: clamp(28px, 7vw, 40px); line-height: 1.25; }
    .faq-h              { font-size: clamp(24px, 6vw, 32px); line-height: 1.3; }
    .buyer-h            { font-size: 26px; max-width: none; }
    .price-tagline      { min-height: 0; }
    .hero-sub           { font-size: 16px; }
}