/* ═══════════════════════════════════════════════════════════════════════
   Duwam marketing chrome — public/assets/marketing/chrome.css
   ONE floating glass pill nav + ONE footer for every marketing page, the
   landing included (owner decision 2026-09-04). Partials live in
   public/partials/, injected at serve time by lib/marketingChrome.js.

   Namespaced --mk-* tokens: the chrome must render identically on a Cairo
   page, a white page and a dark hero, so it never inherits page palette or
   page font. Glass = macOS-style blur(22px) saturate(1.5) — on a BACKING
   layer (.mk-pill::before), never on the element that holds the mega
   menus: a backdrop-filtered ancestor makes overflowing dropdowns composite
   translucently (landing rebuild lesson, 2026-08-03).

   ── THE PAGE CONTRACT (round 3, "foundation") ───────────────────────────
   Everything below is opt-in: nothing here restyles a page that has not
   reached for the class or the token. A page adopts as much or as little
   as it wants; nothing is silently overridden.

   Ground/surface tokens (defined above, both palettes) — point a page's own
   --ink/--bg/--border etc. at these instead of shipping a second neutral
   ramp:
     --mk-bg          page canvas
     --mk-surface     a card/panel raised off the canvas
     --mk-ink         body/heading text
     --mk-ink-2       secondary text (still reads as prose, quieter than --ink)
     --mk-muted       the quietest text the chrome prints (4.5:1-checked
                       against every ground the chrome itself paints — a page
                       ground the chrome does not use is the page's own guard)
     --mk-line        a hairline border
     --mk-line-strong a border that must read as a border, not a hairline

   Layout tokens:
     --mk-container   1200px — the OUTER box a full-bleed wrapper sizes to.
                       Pair it with padding-inline:var(--mk-gutter) (exactly
                       what .mk-nav and .mk-foot .mk-in already do, and what
                       erp.html/pos.html and the landing's own --container/
                       --gutter pair already match) and the wrapper's INNER
                       edge lands on the pill's inner edge — 1120px wide at
                       1440, verified against the live pill. A second,
                       differently-scoped "container" token was considered
                       and rejected: erp.html and pos.html already read
                       --mk-container this way and are already aligned: a
                       token carrying a different number under the same name
                       would misalign them silently, in files this round does
                       not touch.
     --mk-gutter      clamp(20px,4vw,40px) — the side padding that pairs with
                       --mk-container above.
     --mk-section-y   clamp(64px,9vw,120px) — vertical rhythm for a page's
                       top-level sections: padding-block:var(--mk-section-y).
     --mk-radius-card 20px — the landing/ERP/about card radius.

   Type scale (pages keep their own sizes if they have a reason to; this is
   the shared default for anyone who does not):
     --mk-h1          clamp(40px,5.2vw,64px)
     --mk-h2          clamp(28px,3.4vw,48px)
     --mk-h3          clamp(18px,1.5vw,22px)
     --mk-h1-utility  clamp(30px,3.4vw,40px) — /help, /status, /changelog,
                       /404: a page whose H1 is a utility label, not a pitch.

   Components (class-opt-in; see each rule for the exact markup shape):
     .mk-btn (+ .mk-btn--primary / .mk-btn--ghost / .mk-btn--on-dark) — its
                 colour and text-decoration are stated on the COMPOUND
                 selector (.mk-btn.mk-btn--primary, .mk-btn:hover), (0,2,0),
                 specifically so a page-wide `a{}`/`a:hover{}` reset cannot
                 win by accident. That still loses to a page reset with TWO
                 classes/attributes plus the anchor itself, e.g. a `:not()`
                 exclusion list at (0,2,1) — a page adopting .mk-btn inside
                 such a wrapper must add `:not(.mk-btn)` to its own reset
                 (crm.html's `.crm-wrap a:not([class*="crm-btn"])` will need
                 this the day CRM adopts .mk-btn — see .mk-btn--primary's
                 comment below).
     .mk-eyebrow
     .mk-section-head
     .mk-final   the dark closing-CTA band — see the landing's own /landing
                 for the reference instance
     .mk-card

   Heading floor: every h1–h6 on a page that loads this stylesheet, and that
   carries no line-height rule of its OWN, gets line-height:1.45 and
   text-wrap:balance from a :where() rule below — ZERO specificity, so a
   page's own rule for that heading (ANY specificity, even a bare `h1{}`)
   still wins outright and can go under 1.45 on purpose. This is a default,
   not a max(): a heading that INHERITED a taller line-height from an
   ancestor rather than deciding one for itself (e.g. the page body's own
   prose line-height) still gets set to 1.45 — an explicit :where() match
   always beats an inherited value, even at zero specificity — so the floor
   can lower as well as raise what a heading renders at.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --mk-bg:#F7F7F5; --mk-surface:#FFFFFF; --mk-sunken:#F2F2EF;
  /* --mk-muted is the quietest TEXT the chrome prints, so it must clear 4.5:1 on
     the quietest-looking ground it sits on: the sunken lead / hover / badge fill
     (#F2F2EF) and the current-page wash (#EEF3FE). #71717A measured 4.31:1 and
     4.35:1 there; #6B6B74 is 4.70:1 and 4.74:1 — same neutral, one step darker.
     There is no lighter "muted-2" text: #A1A1AA was 2.56:1 on white. */
  --mk-ink:#0A0A0A; --mk-ink-2:#3F3F46; --mk-muted:#6B6B74;
  --mk-line:#E7E7E3; --mk-line-strong:#D8D8D3;
  --mk-accent:#2F6BF2; --mk-accent-ink:#1D4ED8; --mk-accent-wash:#EEF3FE; --mk-on-accent:#FFFFFF;
  /* The CTA fill is its own token, not --mk-accent. The accent has to stay
     light enough to read AS text on a dark surface; the button has to stay
     dark enough to carry WHITE text. One value cannot do both. */
  --mk-cta-bg:#2F6BF2; --mk-cta-hover:#1D4ED8; --mk-cta-hover:#1D4ED8;
  --mk-shadow-ink:8 17 31;
  --mk-glass:rgba(255,255,255,.62); --mk-glass-strong:rgba(255,255,255,.80);
  --mk-glass-edge:rgba(255,255,255,.85); --mk-glass-ink-edge:rgba(10,31,61,.16);
  /* Two shadows on purpose: the tight one draws the pill's edge on a PURE WHITE
     page (help, terms, privacy…), where a translucent white pill on white is
     otherwise invisible — measured: every pixel of the pill and its border came
     back #FFFFFF. The wide one is the macOS-style lift. */
  --mk-glass-shadow:0 2px 10px -3px rgba(9,30,64,.14), 0 26px 70px -34px rgba(9,30,64,.34);
  --mk-container:1200px; --mk-gutter:clamp(20px,4vw,40px);
  --mk-r-sm:10px; --mk-r-lg:20px; --mk-pill:999px;
  /* type scale + card/section rhythm — see the contract comment above */
  --mk-h1:clamp(40px,5.2vw,64px); --mk-h2:clamp(28px,3.4vw,48px); --mk-h3:clamp(18px,1.5vw,22px);
  --mk-h1-utility:clamp(30px,3.4vw,40px);
  --mk-section-y:clamp(64px,9vw,120px); --mk-radius-card:20px;
  /* .mk-final's own dark ground + glow accent — deliberately NOT --mk-bg /
     --mk-accent: this card must read dark in EITHER site theme (like the
     landing's own --panel-dark, which these two values reproduce exactly,
     both palettes), where --mk-bg flips to the light canvas in light mode. */
  --mk-final-bg:#08111F; --mk-final-accent:#2F6BF2;
  --mk-ease:cubic-bezier(.22,1,.36,1); --mk-d1:180ms; --mk-d2:320ms;
  /* the trip from a trigger's bottom edge to its panel's top edge, and the
     grace a panel gets before it believes hover is really gone */
  --mk-mega-bridge:22px; --mk-mega-grace:80ms;
  /* --mk-ease is expo-out: 85% of the travel in the first fifth. Right for a
     panel that should feel instant, wrong for a height that should be read as
     moving — an answer opening on it looks like it stops early. */
  --mk-ease-even:cubic-bezier(.4,0,.2,1); --mk-d-faq:340ms;
  --mk-font:"IBM Plex Sans Arabic","Cairo",-apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mk-font-latin:Inter,ui-sans-serif,system-ui,sans-serif;
}
/* Dark: the site theme (data-theme on <html>) — or a page whose canvas is
   dark by design (body.mk-on-dark: /experience) so the pill reads on it. */
[data-theme="dark"],.mk-on-dark{
  --mk-bg:#08111F; --mk-surface:#0E1B2E; --mk-sunken:#132540;
  --mk-ink:#F5F7FA; --mk-ink-2:#C9D2E0; --mk-muted:#8A97AA;
  --mk-line:rgba(255,255,255,.10); --mk-line-strong:rgba(255,255,255,.18);
  --mk-accent:#5B8DF6; --mk-accent-ink:#9DBCFF; --mk-accent-wash:rgba(47,107,242,.18);
  /* Owner instruction 2026-09-05: the ink on the blue button is WHITE, always.
     So the FILL carries the contrast, not the ink — #2563EB is 5.17:1 with
     white and 3.66:1 against the dark canvas, and the hover BRIGHTENS to
     #2F6BF2 (4.66:1 / 4.06:1). A control that darkens on a dark surface reads
     as pressed, not hovered. */
  --mk-cta-bg:#2563EB; --mk-cta-hover:#2F6BF2;
  /* .mk-final stays dark in EITHER theme, but a shade darker still once the
     rest of the page has already gone dark — same pair of values the
     landing's own --panel-dark/--accent used before this round. */
  --mk-final-bg:#060B14; --mk-final-accent:#4A80FF;
  --mk-shadow-ink:0 0 0;
  --mk-glass:rgba(14,27,46,.58); --mk-glass-strong:rgba(14,27,46,.82);
  --mk-glass-edge:rgba(255,255,255,.14); --mk-glass-ink-edge:rgba(255,255,255,.09);
  --mk-glass-shadow:0 2px 10px -3px rgba(0,0,0,.5), 0 26px 70px -30px rgba(0,0,0,.6);
}

/* ── Scope reset: the chrome owns its font, rhythm and link styling ─── */
.mk-nav,.mk-mobile,.mk-scrim,.mk-foot{font-family:var(--mk-font);line-height:1.5;direction:rtl;text-align:start;color:var(--mk-ink);box-sizing:border-box}
.mk-nav *,.mk-mobile *,.mk-foot *{box-sizing:border-box}
.mk-nav a,.mk-mobile a,.mk-foot a{text-decoration:none}
/* `color:inherit` is scoped to UNCLASSED elements on purpose. As a blanket
   `.mk-nav a` it is (0,2,0) and outranks every component rule below — which is
   how «ابدأ مجاناً» ended up in dark nav ink on the blue button. A reset must
   never outrank the thing it resets. */
.mk-nav a:not([class]),.mk-mobile a:not([class]),.mk-foot a:not([class]){color:inherit}
.mk-nav button,.mk-mobile button{font:inherit;background:none;border:0;cursor:pointer;margin:0}
.mk-nav button:not([class]),.mk-mobile button:not([class]){color:inherit}
.mk-nav svg,.mk-foot svg{display:block;flex:none}

/* ── Skip link ───────────────────────────────────────────────────────────
   The first Tab stop on every chrome page (audit 2026-09-25: it used to be the
   brand link, and the one skip link on the site was the landing's 39th stop).
   Parked above the viewport rather than display:none — a hidden element is not
   focusable, so it could never be the first stop. It sits outside .mk-nav, so it
   states its own font and direction instead of inheriting the page's. */
.mk-skip{position:fixed;inset-block-start:12px;inset-inline-start:16px;z-index:100;transform:translateY(-200%);display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:var(--mk-pill);background:var(--mk-surface);color:var(--mk-ink);border:1px solid var(--mk-line-strong);box-shadow:var(--mk-glass-shadow);font:700 14px/1.5 var(--mk-font);direction:rtl;text-decoration:none;white-space:nowrap;transition:transform var(--mk-d1) var(--mk-ease)}
.mk-skip:focus{transform:none}
.mk-skip:focus-visible{outline:2px solid var(--mk-accent);outline-offset:2px}
/* the element the skip link lands on is a region, not a control — it takes focus
   so the NEXT Tab starts inside it, and does not wear a ring around the page */
[data-mk-skipped]:focus{outline:none}

/* ── The pill ────────────────────────────────────────────────────────── */
/* align-self/width/flex-none: pos.html and erp.html center their whole body
   as a flex column, which shrank the pill to its content width and pushed
   it to the middle of the viewport. The chrome defends itself. */
.mk-nav{position:sticky;inset-block-start:14px;z-index:50;width:100%;max-width:var(--mk-container);margin:14px auto 0;padding-inline:var(--mk-gutter);align-self:stretch;flex:0 0 auto}
.mk-pill{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding-inline:18px 12px;border-radius:var(--mk-pill)}
.mk-pill::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;background:var(--mk-glass);-webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border:1px solid var(--mk-glass-ink-edge);box-shadow:inset 0 1px 0 var(--mk-glass-edge),var(--mk-glass-shadow)}

.mk-brand{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:18px;color:var(--mk-ink);flex:none}
.mk-brand svg{width:30px;height:30px;color:var(--mk-accent)}

.mk-links{display:flex;align-items:center;justify-content:center;gap:2px;flex:1;min-width:0}
.mk-links>a,.mk-nav .mk-trigger{position:relative;display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 13px;border-radius:var(--mk-pill);color:var(--mk-ink-2);font-weight:600;font-size:14.5px;white-space:nowrap;transition:color var(--mk-d1) var(--mk-ease),background var(--mk-d1) var(--mk-ease)}
.mk-links>a:hover,.mk-nav .mk-trigger:hover,.has-mega:focus-within>.mk-trigger{color:var(--mk-ink);background:color-mix(in srgb,var(--mk-accent) 10%,transparent)}
.mk-links [aria-current="page"]{color:var(--mk-accent-ink);background:var(--mk-accent-wash)}
.mk-trigger .chev{width:14px;height:14px;transition:transform var(--mk-d2) var(--mk-ease)}
.has-mega:hover .chev,.has-mega.is-open .chev{transform:rotate(180deg)}
/* caret under the open trigger — the panel is anchored to the pill, the
   caret tells the eye which trigger it belongs to */
.mk-trigger::after{content:"";position:absolute;inset-inline-start:50%;inset-block-start:calc(100% + 6px);width:10px;height:10px;transform:translateX(50%) rotate(45deg) scale(0);background:var(--mk-surface);border:1px solid var(--mk-line);border-inline-end:0;border-block-end:0;transition:transform var(--mk-d2) var(--mk-ease);z-index:62}
.has-mega:hover>.mk-trigger::after,.has-mega.is-open>.mk-trigger::after{transform:translateX(50%) rotate(45deg) scale(1)}
/* The pointer must not lose .has-mega on its way down to the panel. Measured
   on production: the trigger's bottom edge sits 11px above the pill's, the
   panel opens 4px below the pill, and the only bridge — .mega::before — came
   12px up from the panel. THREE dead pixels, directly under every trigger,
   crossed first on every downward trip: `:hover` read 1111111 000 1111111 and
   the panel dived to 5% opacity. This one hangs off the TRIGGER, so it is a
   descendant of .has-mega and hover holds the whole way; measuring it from
   the trigger also means a taller pill cannot silently reopen the hole. */
.has-mega>.mk-trigger::before{content:none;position:absolute;inset-inline:0;inset-block-start:100%;height:var(--mk-mega-bridge)}
/* It exists only while the item is already hovered, so the four strips it
   hangs below the pill cannot swallow a click on the page underneath when
   no menu is open. Self-sustaining: you are on the trigger when it appears,
   and stepping into it keeps .has-mega hovered, which keeps it there. */
.has-mega:hover>.mk-trigger::before,.has-mega.is-open>.mk-trigger::before{content:""}

/* ── Mega menus: hover for the pointer, a disclosure for the keyboard ──
   Anchored to the pill's full width, so the hover bridge (::before) sits
   under EVERY trigger and the panel never overflows the viewport.
   Three states, all set by chrome.js except the first:
     :hover         the pointer rests on it (with the intent delay below)
     .is-open       the trigger was pressed — click, Enter or Space
     .is-dismissed  Escape; beats :hover until the pointer leaves
   It used to open on :focus-within as well. That made focusing a trigger
   open its panel, so Tab walked every one of the 29 panel links, and there
   was no state for Escape to clear (audit 2026-09-25). */
.has-mega{position:static}
/* pointer-events:none on the CLOSED panel is the fix for the pointer steal.
   `visibility 0s linear 320ms` keeps a closing panel visible AND hittable for
   the whole fade, and all four panels shared z-index 60 — so hit-testing fell
   back to DOM order and, travelling one way, the OUTGOING panel won. Measured:
   the user aims at «المنتج», sees «المنتج», and gets «الأنظمة». */
.mega{position:absolute;inset-inline:0;inset-block-start:calc(100% + 10px);z-index:60;pointer-events:none;background:var(--mk-surface);border:1px solid var(--mk-line);border-radius:var(--mk-r-lg);box-shadow:0 24px 64px -32px rgb(var(--mk-shadow-ink) / .28);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--mk-d2) var(--mk-ease) var(--mk-mega-grace),transform var(--mk-d2) var(--mk-ease) var(--mk-mega-grace),visibility 0s linear calc(var(--mk-d2) + var(--mk-mega-grace))}
.mega::before{content:"";position:absolute;inset-inline:0;inset-block-start:-12px;height:12px}
/* The open panel is raised so paint order stops depending on DOM order, and
   the 90ms delay is CSS-only hover intent: a trigger merely crossed on the way
   somewhere else never starts its fade. Keyboard focus stays instant. */
.has-mega:hover>.mega,.has-mega.is-open>.mega{opacity:1;visibility:visible;pointer-events:auto;z-index:61;transform:none;transition-delay:90ms}
.has-mega.is-open>.mega{transition-delay:0s}
/* Escape must be able to close what the pointer opened (WCAG 1.4.13), so the
   dismissed state out-ranks every open rule: (0,4,0) against (0,3,0). It is
   cleared when the pointer leaves the item or the trigger is pressed again. */
.mk-nav .has-mega.is-dismissed>.mega{opacity:0;visibility:hidden;pointer-events:none;z-index:60;transform:translateY(-6px);transition:opacity var(--mk-d1) var(--mk-ease),transform var(--mk-d1) var(--mk-ease),visibility 0s linear var(--mk-d1)}
.mk-nav .has-mega.is-dismissed .chev{transform:none}
.mk-nav .has-mega.is-dismissed>.mk-trigger::after{transform:translateX(50%) rotate(45deg) scale(0)}
.mk-nav .has-mega.is-dismissed>.mk-trigger::before{content:none}
.mega-grid{display:grid;grid-template-columns:minmax(240px,1.1fr) repeat(auto-fit,minmax(240px,1fr))}
.mega-lead{padding:28px;border-inline-end:1px solid var(--mk-line);background:var(--mk-sunken);border-start-start-radius:var(--mk-r-lg);border-end-start-radius:var(--mk-r-lg);position:relative;overflow:hidden}
/* The panel's title is text, not a heading: the nav is injected above every
   page's <h1>, and four <h4>s used to open every page's outline. The trigger
   already names the panel (role=group, aria-label). */
.mega-lead .mega-title{margin:0 0 8px;font:600 14px/1.5 var(--mk-font);letter-spacing:normal;color:var(--mk-muted);text-align:start;max-width:none}
.mega-lead p{margin:0;font-size:15px;line-height:1.9;color:var(--mk-ink-2);font-style:normal}
.mega-lead .mark{position:absolute;inset-inline-end:-20px;inset-block-end:-20px;width:144px;height:144px;color:var(--mk-line-strong);opacity:.9}
.mega-col{padding:16px 8px}
.mega-col-wide{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));align-content:start;gap:0 8px}
.mega-cat{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px;font-weight:600;color:var(--mk-muted)}
.mega-tag{font-family:var(--mk-font-latin);font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:1px 8px;border-radius:var(--mk-pill);background:var(--mk-accent-wash);color:var(--mk-accent-ink)}
.mega-item{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:var(--mk-r-sm);transition:background var(--mk-d1) var(--mk-ease)}
.mega-item:hover{background:var(--mk-sunken)}
.mega-item svg{width:20px;height:20px;margin-block-start:4px;color:var(--mk-ink-2);stroke-width:1.5}
.mega-item b{display:block;font-weight:600;font-size:15px;color:var(--mk-ink);line-height:1.5}
.mega-item span{display:block;font-size:13px;color:var(--mk-muted);line-height:1.6}
/* A system tag or a «قريباً» badge can sit inside an item's own title (the
   الأنظمة column names each system inline: "نظام العمليات ERP قريباً"). Both
   chips are (0,1,0); the title's own `.mega-item b`/`.mega-item span` rules
   above are (0,1,1) and, being a descendant selector, reach INTO the title and
   flatten the nested chip to a full-width bar under it (measured on /pricing:
   display:block, 138px/153px wide). These restate the chip at (0,2,0) or
   higher, scoped to .mega-item so a bare .mega-tag/.soon-badge elsewhere
   (the .mega-cat row) is untouched. */
.mega-item .mega-tag{display:inline-block;font-weight:700;font-size:10.5px;color:var(--mk-accent-ink);line-height:1.5}
.mega-item.is-soon{cursor:default} .mega-item.is-soon:hover{background:transparent}
.soon-badge{display:inline-block;width:auto;margin-inline-start:8px;font-size:11px;font-weight:600;padding:1px 8px;border-radius:var(--mk-pill);background:var(--mk-sunken);border:1px solid var(--mk-line);color:var(--mk-muted);vertical-align:middle;line-height:1.5}
.mega-item .soon-badge{display:inline-block;font-weight:600;font-size:11px;color:var(--mk-muted);line-height:1.5}
.mega-foot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;border-block-start:1px solid var(--mk-line);font-size:13.5px;color:var(--mk-muted)}
.mega-foot a{color:var(--mk-ink-2);font-weight:600} .mega-foot a:hover{color:var(--mk-ink)}

/* ── Actions ─────────────────────────────────────────────────────────── */
.mk-actions{display:flex;align-items:center;gap:8px;flex:none}
.mk-nav .mk-ghost,.mk-mobile .mk-ghost{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 15px;border-radius:var(--mk-pill);border:1px solid var(--mk-glass-ink-edge);background:color-mix(in srgb,var(--mk-glass-strong) 55%,transparent);color:var(--mk-ink-2);font-size:13.5px;font-weight:700;white-space:nowrap;transition:color var(--mk-d1),border-color var(--mk-d1),transform var(--mk-d1)}
.mk-nav .mk-ghost:hover,.mk-mobile .mk-ghost:hover{color:var(--mk-ink);border-color:color-mix(in srgb,var(--mk-accent) 45%,transparent);transform:translateY(-1px)}
/* .mk-nav .mk-ghost pads its buttons 0 15px at (0,2,0). A bare .mk-icon is
   (0,1,0) and loses, so the square button kept 30px of horizontal padding:
   38 − 30 − 2 = a 6px content box, and the 16px icon collapsed into it.
   Measured on production: the theme toggle's sun rendered 6×16. A modifier
   has to out-rank every rule it overrides, not merely follow it. */
.mk-nav .mk-icon,.mk-mobile .mk-icon{width:38px;padding:0}
.mk-icon svg{width:16px;height:16px}
/* A page that is dark by design (body.mk-on-dark: /experience, /pos, /erp)
   has no light half — so it does not get a switch that would recolour the
   pill and nothing else. /pricing is NOT one of them: its light half lives in
   the linked duwam.css. */
body.mk-on-dark .mk-theme{display:none}
.mk-theme .moon{display:none}
[data-theme="dark"] .mk-theme .sun{display:none}
[data-theme="dark"] .mk-theme .moon{display:block}
.mk-nav .mk-cta,.mk-mobile .mk-cta{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;border-radius:var(--mk-pill);background:var(--mk-cta-bg);color:var(--mk-on-accent);font-size:13.5px;font-weight:700;white-space:nowrap;transition:background var(--mk-d1),transform var(--mk-d1)}
.mk-nav .mk-cta:hover,.mk-mobile .mk-cta:hover{background:var(--mk-cta-hover);transform:translateY(-1px)}
/* The white ink once more, at (0,3,1) — above any `.page-class a` reset a page
   ships. Measured on /crm: `.crm a:not([class*="crm-btn"]){color:inherit}` is
   (0,2,1), beat the rule above, and painted «ابدأ مجاناً» in near-black on the
   blue fill (4.25:1). test/marketingChromeA11y.test.js reads every chrome
   page's anchor resets and keeps this rule above all of them. */
.mk-nav .mk-actions a.mk-cta,.mk-mobile .nm-cta a.mk-cta{color:var(--mk-on-accent)}

/* ── Burger + mobile sheet ───────────────────────────────────────────── */
/* 44×44 (WCAG 2.5.5 / Apple HIG), not the drawn icon's own size — the three
   bars stay their original width/gap, the hit area grows around them. */
.mk-burger{display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:12px;border:1px solid var(--mk-glass-ink-edge);background:color-mix(in srgb,var(--mk-glass-strong) 55%,transparent)}
.mk-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--mk-ink);transition:transform var(--mk-d2) var(--mk-ease),opacity var(--mk-d1)}
.mk-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mk-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.mk-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mk-scrim{position:fixed;inset:0;z-index:40;background:rgb(var(--mk-shadow-ink) / .32);opacity:0;visibility:hidden;transition:opacity var(--mk-d2) var(--mk-ease),visibility 0s linear var(--mk-d2)}
.mk-scrim.show{opacity:1;visibility:visible;transition-delay:0s}
.mk-mobile{position:absolute;inset-inline:var(--mk-gutter);inset-block-start:calc(100% + 8px);z-index:45;background:var(--mk-surface);border:1px solid var(--mk-line);border-radius:var(--mk-r-lg);box-shadow:0 24px 64px -32px rgb(var(--mk-shadow-ink) / .32);display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows var(--mk-d2) var(--mk-ease),opacity var(--mk-d2) var(--mk-ease),visibility 0s linear var(--mk-d2)}
.mk-mobile.open{grid-template-rows:1fr;opacity:1;visibility:visible;transition-delay:0s}
.nm-inner{overflow:hidden;min-height:0}
.nm-inner>div{padding:8px;max-height:min(76vh,620px);overflow-y:auto}
.nm-link{border-block-start:1px solid var(--mk-line);display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-weight:600;color:var(--mk-ink)}
.nm-link:hover{background:var(--mk-sunken)}
.nm-acc{border-block-start:1px solid var(--mk-line)} .nm-acc:first-child{border:0}
.nm-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-weight:600;color:var(--mk-ink)}
.nm-acc summary::-webkit-details-marker{display:none}
.nm-acc summary svg{width:16px;height:16px;color:var(--mk-muted);transition:transform var(--mk-d2) var(--mk-ease)}
.nm-acc[open] summary svg{transform:rotate(180deg)}
.nm-acc a{display:block;padding:8px 16px 8px 28px;color:var(--mk-ink-2);font-size:15px;border-radius:var(--mk-r-sm)}
.nm-acc a:hover{background:var(--mk-sunken);color:var(--mk-ink)}
.nm-cta{display:grid;gap:8px;padding:12px 8px 4px;border-block-start:1px solid var(--mk-line);margin-block-start:8px}
.nm-cta .mk-cta,.nm-cta .mk-ghost{height:44px;font-size:15px}

/* ── FAQ accordion (shared: the landing and the pricing page opt in with
   data-faq) ──────────────────────────────────────────────────────────────
   A native <details> snaps open and shut. grid-template-rows 0fr→1fr is the
   one technique that animates to an UNKNOWN content height — the same one the
   mobile sheet uses. The script keeps [open] on until the collapse finishes,
   because removing it immediately hides the content and the animation is
   never seen. */
[data-faq] details .faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--mk-d-faq) var(--mk-ease-even),opacity var(--mk-d1) var(--mk-ease-even);opacity:0}
[data-faq] details[open] .faq-body{grid-template-rows:1fr;opacity:1}
/* held open ONLY so the collapse can be seen — the script drops [open] on
   transitionend */
[data-faq] details[open].is-collapsed .faq-body{grid-template-rows:0fr;opacity:0}
[data-faq] details .faq-body>*{overflow:hidden;min-height:0}

/* ── Heading floor ───────────────────────────────────────────────────────
   :where() carries ZERO specificity, so a page's own `h1{line-height:1.25}`
   — element selector, (0,0,1) — still wins outright and can sit under 1.45
   on purpose (that is the page's own call, tracked per-page in
   test/marketingHeadingFloor.test.js). This is a DEFAULT applied wherever a
   heading has no rule of its own, not a max(): a heading that only
   INHERITED a taller line-height (no rule of its own — e.g. the page
   body's prose line-height) is still matched and set to 1.45, because an
   explicit :where() match always beats an inherited value regardless of
   specificity — so this can lower a heading as often as it raises one.
   Either way: Arabic dots and descenders never clip under 1.45, and a
   wrapped multi-word heading never orphans its last word. Pages keep their
   own sizes and weights. */
:where(h1,h2,h3,h4,h5,h6){line-height:1.45;text-wrap:balance}

/* ── Shared components (opt-in — a page reaches for the class; nothing
   here restyles a page that has not) ───────────────────────────────────── */

/* .mk-btn — the one primary/ghost button shape. Bare .mk-btn carries no
   colour: pair it with --primary or --ghost. --on-dark is a THIRD class,
   combined with --ghost (`mk-btn mk-btn--ghost mk-btn--on-dark`), for a
   ghost button sitting on a canvas that is dark regardless of site theme
   (.mk-final; a page's own dark hero). --primary reuses the exact tokens
   .mk-cta already carries (and this file already proves ≥4.5:1 in both
   palettes for) rather than a second "primary blue" — the two are meant to
   be the SAME button. */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:14px;border:1px solid transparent;font:600 16px/1.5 var(--mk-font);white-space:nowrap;text-decoration:none;cursor:pointer;transition:background var(--mk-d1) var(--mk-ease),border-color var(--mk-d1) var(--mk-ease),color var(--mk-d1) var(--mk-ease),transform var(--mk-d1) var(--mk-ease)}
.mk-btn:active{transform:translateY(1px)}
.mk-btn:focus-visible{outline:2px solid var(--mk-accent);outline-offset:2px}
/* The base rule's text-decoration:none sits at (0,1,0). A page's own
   `a:hover{text-decoration:underline}` is (0,1,1) — one type selector
   heavier — and wins on hover: measured underlined .mk-btn labels on
   /pricing, /about, /security and /help (about.html:50, security.html:46,
   duwam.css:787 all carry that rule). Restated at (0,2,0) below. */
.mk-btn:hover,.mk-btn:focus-visible{text-decoration:none}
/* Colour and background are stated on the COMPOUND selector (.mk-btn plus
   the modifier), (0,2,0), not on the bare modifier class alone, (0,1,0) —
   see the contract note above .mk-btn in the header comment. A bare
   .mk-btn--primary lost to /crm's `.crm-wrap a:not([class*="crm-btn"])`,
   (0,2,1): the anchor's colour fell back to `inherit`, painting the white
   label near-black on the blue fill (3.53:1 at rest, 2.46:1 on hover in
   light — both under the 4.5:1 the button promises). (0,2,0) still cannot
   out-rank that specific (0,2,1) reset — see the header comment for the
   handoff a page in that situation owes .mk-btn. */
.mk-btn.mk-btn--primary{background:var(--mk-cta-bg);color:var(--mk-on-accent)}
.mk-btn.mk-btn--primary:hover{background:var(--mk-cta-hover)}
.mk-btn.mk-btn--ghost{background:transparent;color:var(--mk-ink-2);border-color:var(--mk-line-strong)}
.mk-btn.mk-btn--ghost:hover{color:var(--mk-ink);border-color:var(--mk-ink-2)}
.mk-btn.mk-btn--on-dark.mk-btn--ghost{color:#FFFFFF;border-color:rgba(255,255,255,.28)}
.mk-btn.mk-btn--on-dark.mk-btn--ghost:hover{border-color:#FFFFFF}

/* .mk-eyebrow — the landing's tinted pill label, lifted verbatim (13px/600,
   accent ink on the accent wash). .mk-section-head sizes and aligns the
   heading that follows it; it does not select the heading itself, because a
   page's own h2 rule must still decide the weight/spacing it wants — set
   font-size:var(--mk-h2) on that h2 where a page adopts the shared scale. */
.mk-eyebrow{display:inline-flex;align-items:center;gap:6px;padding:8px 16px 8px 12px;border-radius:var(--mk-pill);background:var(--mk-accent-wash);color:var(--mk-accent-ink);font:600 13px/1.5 var(--mk-font);letter-spacing:normal}
.mk-section-head{max-width:720px;text-align:start;margin-block-end:40px}

/* .mk-card — the landing/ERP/about card: flat, one hairline, no shadow. */
.mk-card{background:var(--mk-surface);border:1px solid var(--mk-line);border-radius:var(--mk-radius-card);box-shadow:none}

/* .mk-final — the dark closing-CTA band. Reference instance: the landing's
   own final section (public/landing-embed.html), lifted here verbatim —
   background, arc glow, radius, copy sizes and the ghost button's on-dark
   ink all reproduce its exact values in both themes. TWO deliberate
   differences from a pixel diff of the old markup, both intentional and
   both kept: (1) its primary button now carries --mk-cta-bg/--mk-cta-hover
   (design2-03's fix) instead of the landing's own former --accent/
   --accent-ink pair, which in dark mode was a second, slightly different
   blue (#4A80FF vs #2563EB) — the exact "two blues" defect this button
   exists to remove; light mode the two pairs were already equal, so
   nothing moves there. (2) .mk-btn's own locked spec is `600 16px/1.5`
   (the brief's number), where the landing's old .btn/.btn-lg had no
   line-height of its own and inherited the page body's 1.85 — a 24px vs
   29.6px line box shifts the label's glyph row by 1px once rounded to a
   device pixel, in both themes; it is not fixable without either
   un-locking the button's line-height or leaving the page's ambient prose
   value on a component that must also render right at 48px tall on every
   other page. The heading owns its own box (margin, letter-spacing,
   weight) below so a host page cannot leak its own values in — the
   landing's own `h1,h2,h3{margin:0;letter-spacing:0;font-weight:700}`
   already computed the same numbers, so nothing moves there either.
   Markup shape:
     <div class="mk-final">
       <h2>…</h2><p>…</p>
       <div class="mk-final-row">
         <a class="mk-btn mk-btn--primary" href="…">…</a>
         <a class="mk-btn mk-btn--ghost mk-btn--on-dark" href="…">…</a>
       </div>
     </div> */
.mk-final{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;background:var(--mk-final-bg);color:#FFFFFF;text-align:center;padding:clamp(56px,7vw,96px) var(--mk-gutter)}
.mk-final::before{content:"";position:absolute;inset-inline:-10%;inset-block-start:-160%;height:220%;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,transparent 78%,color-mix(in srgb,var(--mk-final-accent) 34%,transparent) 84%,transparent 92%);animation:mk-final-arc 18s ease-in-out infinite alternate}
@keyframes mk-final-arc{from{transform:translateY(0)}to{transform:translateY(3%)}}
/* margin/letter-spacing/weight stated here, not left to the host page: off
   the landing (no `h1,h2,h3{margin:0;…}` rule of its own) this h2 fell back
   to the UA default h2 margin — measured ~41.5px top+bottom, making the
   band ~83px taller than the landing's — plus whatever letter-spacing and
   weight that page's own type rules happened to carry (design2-02). */
.mk-final h2{color:#FFFFFF;font-size:clamp(28px,3.8vw,50px);font-weight:700;letter-spacing:0;max-width:22ch;margin:0 auto}
.mk-final p{margin:16px auto 0;max-width:60ch;color:color-mix(in srgb,#FFFFFF 72%,transparent);font-size:clamp(16px,1.25vw,18px);line-height:1.9}
.mk-final-row{margin-block-start:32px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
/* the landing's own .btn-lg carried `width:100%` at this breakpoint (a
   page-wide rule keyed on that class, not on being inside the CTA); .mk-btn
   is a different class, so .mk-final states the same stacking itself,
   scoped to its own row rather than every .mk-btn on the page. */
@media (max-width:640px){.mk-final{border-radius:20px}.mk-final-row .mk-btn{width:100%}}

/* ── Footer ──────────────────────────────────────────────────────────── */
.mk-in{max-width:var(--mk-container);margin-inline:auto;padding-inline:var(--mk-gutter)}
.mk-foot{border-block-start:1px solid var(--mk-line);background:var(--mk-bg);color:var(--mk-ink)}
.mk-foot .mk-in{padding-block:56px 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
/* h2, not h4: the footer sits under the page's content, one level below its
   title, and an outline must not skip from h2 to h4. It states its own type
   because pages style their h2s (Changa, tracking) and would bleed in. */
.mk-foot .foot-title{margin:0 0 16px;font:600 13px/1.5 var(--mk-font);letter-spacing:normal;text-transform:none;color:var(--mk-ink);text-align:start;max-width:none}
.mk-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mk-foot li a{font-size:14px;color:var(--mk-muted);transition:color var(--mk-d1)} .mk-foot li a:hover{color:var(--mk-ink)}
.mk-foot .mk-brand svg{width:26px;height:26px}
.mk-foot .about{margin:12px 0 0;font-size:14px;color:var(--mk-muted);max-width:30ch;line-height:1.8}
.mk-foot .social{display:flex;gap:8px;margin-block-start:16px}
.mk-foot .social a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--mk-line);border-radius:var(--mk-r-sm);color:var(--mk-ink-2);transition:color var(--mk-d1),border-color var(--mk-d1)}
.mk-foot .social a:hover{color:var(--mk-ink);border-color:var(--mk-line-strong)}
.mk-foot .social svg{width:18px;height:18px}
.foot-bar{margin-block-start:40px;padding-block-start:20px;border-block-start:1px solid var(--mk-line);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--mk-muted)}
.foot-bar .links{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.foot-bar a:hover{color:var(--mk-ink)}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width:1200px){.mega-grid{grid-template-columns:1fr}.mega-lead{display:none}}
@media (max-width:900px){
  .mk-links,.mk-actions .hide-md{display:none}
  .mk-burger{display:inline-flex}
  .mk-pill{padding-inline:14px 10px;gap:8px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  .mk-nav{inset-block-start:10px;margin-block-start:10px}
  .mk-brand{font-size:17px}
  /* NOT grid-template-columns:1fr here (design2-14): the ≤900px rule two
     rules up already gives 1fr 1fr with the brand block spanning both, and
     the link labels are short enough for a ~167px column at 390 — a single
     column was about 1.5 screens of plain links with nothing to scan. */
  .foot-grid{gap:24px 16px}
}
@media (prefers-reduced-motion:reduce){
  .mk-nav *,.mk-nav *::before,.mk-nav *::after,.mk-mobile,.mk-mobile *,.mk-scrim,.mk-foot *,.mk-skip,[data-faq] details .faq-body,.mk-final,.mk-final::before,.mk-btn{transition:none!important;animation:none!important}
}
@media print{.mk-nav,.mk-scrim{display:none}}