/* ═══════════════════════════════════════════════════════════════════════
   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{
  /* 2026-11-05: the chrome's ground, ink and accent ARE the identity's
     (--dw-bg/--dw-ink/--dw-brand below — the same hexes, written out so the
     contrast tests can measure them; the guard pins the equality) — nav, footer and every page on this contract
     follow the «تقني رقمي، هادئ ونقي» look in both themes. */
  --mk-bg:#F4F6FC; --mk-surface:#FFFFFF; --mk-sunken:#EDEFF9;
  /* --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:#0E1A3D; --mk-ink-2:#2B3759; --mk-muted:#4A5677;
  --mk-line:#D9E1F6; --mk-line-strong:#C2CDEF;
  --mk-accent:#1B3AB5; --mk-accent-ink:#163094; --mk-accent-wash:#EDEFF9; --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:#1B3AB5; --mk-cta-hover:#163094;
  --mk-shadow-ink:14 26 61;
  --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(27,58,181,.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. */
  /* owner feedback 2026-11-05: back to the deep navy with the galaxy arc —
     the brand blue band did not sit with the rest; the navy is tinted toward
     the brand blue so it reads as the same family */
  --mk-final-bg:#0A1546; --mk-final-accent:#5B83FF;
  --mk-ease:cubic-bezier(.22,1,.36,1); --mk-d1:180ms; --mk-d2:320ms;
  /* tawk roadmap 23: three icon sizes and one stroke (Lucide's 24-grid at 2),
     as tawk.to sets 14 / 16-18 / 24 — read through .mk-ic, never loose px. */
  --mk-ic-sm:14px; --mk-ic:18px; --mk-ic-lg:24px; --mk-ic-stroke:2;
  /* 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:"Readex Pro",-apple-system,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mk-font-latin:Inter,ui-sans-serif,system-ui,sans-serif;
  --mk-font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
/* 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{
  /* 2026-11-05: the dark theme IS the brand blue (--dw-bg), not a navy. The
     surface is the identity's card (.07 white over the blue) made opaque, so
     a mega panel or a sheet stays readable over whatever it covers. */
  --mk-bg:#1B3AB5; --mk-surface:#2A47BB; --mk-sunken:#16309A;
  --mk-ink:#FFFFFF; --mk-ink-2:#E4EAFA; --mk-muted:#BECAED;
  --mk-line:rgba(217,225,246,.24); --mk-line-strong:rgba(217,225,246,.38);
  --mk-accent:#D9E1F6; --mk-accent-ink:#FFFFFF; --mk-accent-wash:rgba(5,12,50,.30);
  /* Owner instruction 2026-09-05: the ink on the blue button is WHITE, always,
     so the FILL carries the contrast. On the blue canvas (2026-11-05) the fill
     goes DEEPER, #122676 (white 12.7:1), and the hover lifts toward the canvas,
     #163094 — a control that darkens on a dark surface reads as pressed. */
  --mk-cta-bg:#122676; --mk-cta-hover:#163094;
  /* .mk-final stays the deep navy in EITHER theme, a shade deeper once the
     rest of the page has already gone blue (owner feedback 2026-11-05). */
  --mk-final-bg:#070F36; --mk-final-accent:#6F95FF;
  --mk-shadow-ink:5 12 50;
  --mk-glass:rgba(21,46,150,.58); --mk-glass-strong:rgba(21,46,150,.84);
  --mk-glass-edge:rgba(217,225,246,.18); --mk-glass-ink-edge:rgba(217,225,246,.16);
  --mk-glass-shadow:0 2px 10px -3px rgba(5,12,50,.5), 0 26px 70px -30px rgba(5,12,50,.6);
}

/* ── The identity: «تقني رقمي، هادئ ونقي» (owner brief 2026-11-05) ────────
   The social carousels' look, carried to the site so a visitor from Instagram
   lands in the same place. ONE set of tokens, two themes; the theme stamp in
   marketing-head.html (duwam_theme → data-theme) is unchanged. Values are the
   brief's, pinned by test/identityTech2026.guard.test.js. The --mk-* tokens
   above read these, so the chrome and every page on its contract follow.
   Colour beyond the two blues comes only from its OWNER: a channel's own
   colour where that channel is named (--dw-ch-*), and the status colours in
   attendance, stock and alerts. Nothing decorative besides. */
:root,:root[data-theme="light"]{
  --dw-bg:#F4F6FC; --dw-bg-image:none;
  --dw-ink:#0E1A3D; --dw-muted:#4A5677; --dw-faint:#7A86A8;
  --dw-brand:#1B3AB5; --dw-soft:#D9E1F6;
  --dw-card:#FFFFFF; --dw-card-line:#D9E1F6;
  --dw-ring:rgba(27,58,181,.09); --dw-ring-strong:rgba(27,58,181,.135); --dw-dot:rgba(27,58,181,.16); --dw-node:rgba(27,58,181,.34);
  --dw-label:rgba(27,58,181,.55);
  --dw-chip-bg:#1B3AB5; --dw-chip-ink:#FFFFFF;
  --dw-shadow:0 30px 60px -30px rgba(14,26,61,.35);
  --dw-ok:#16A34A; --dw-ok-bg:#E3F6EA; --dw-warn:#D97706; --dw-warn-bg:#FDF1DE; --dw-bad:#E11D48; --dw-bad-bg:#FDE6EB;
  /* the WORDS on a status chip: the brief's colours measure 2.9 / 2.9 / 4.0:1 on
     their own backgrounds, under AA for 13.5px text, so the dot keeps the brief's
     colour and the words take a deeper shade of it (6.3 / 6.4 / 5.3:1, pinned) */
  --dw-ok-ink:#166534; --dw-warn-ink:#92400E; --dw-bad-ink:#BE123C; --dw-status-base:transparent;
  --dw-frame-bar:#EDEFF9;
}
:root[data-theme="dark"],.mk-on-dark{
  --dw-bg:#1B3AB5; --dw-bg-image:radial-gradient(1100px 900px at 50% 38%,#2348D3 0%,#1B3AB5 48%,#152E96 100%);
  --dw-ink:#FFFFFF; --dw-muted:rgba(217,225,246,.86); --dw-faint:rgba(217,225,246,.62);
  --dw-brand:#D9E1F6; --dw-soft:rgba(217,225,246,.16);
  --dw-card:rgba(255,255,255,.07); --dw-card-line:rgba(217,225,246,.24);
  --dw-ring:rgba(217,225,246,.11); --dw-ring-strong:rgba(217,225,246,.165); --dw-dot:rgba(217,225,246,.18); --dw-node:rgba(217,225,246,.42);
  --dw-label:rgba(217,225,246,.5);
  --dw-chip-bg:#D9E1F6; --dw-chip-ink:#1B3AB5;
  --dw-shadow:0 40px 80px -30px rgba(5,12,50,.55);
  --dw-ok:#4ADE80; --dw-ok-bg:rgba(74,222,128,.16); --dw-warn:#FBBF24; --dw-warn-bg:rgba(251,191,36,.16); --dw-bad:#FB7185; --dw-bad-bg:rgba(251,113,133,.16);
  /* on the blue a 16% tint under bright words measures 2.4–4.5:1, so the tint
     sits on a deep base (#0E1C5E) and the rose words lift (#FDA4AF): ≥6:1, pinned */
  --dw-ok-ink:#4ADE80; --dw-warn-ink:#FBBF24; --dw-bad-ink:#FDA4AF; --dw-status-base:#0E1C5E;
  --dw-frame-bar:rgba(255,255,255,.10);
  /* the website-chat moon: the brand blue vanished on the blue canvas */
  --dw-ch-web:#3B63F2;
}
/* Channel colours — the owner's own, used ONLY where that channel is named,
   as a filled circle under a generic white message icon (never a drawn logo). */
:root{
  --dw-ch-whatsapp:#25D366; --dw-ch-waapi:#128C7E;
  --dw-ch-instagram:linear-gradient(45deg,#FEDA75,#FA7E1E,#D62976,#962FBF,#4F5BD5);
  --dw-ch-messenger:linear-gradient(45deg,#0099FF,#A033FF,#FF5280);
  --dw-ch-tiktok:#010101;
  --dw-ch-web:#1B3AB5;
}
/* Pages built on the app's duwam.css name their faces through --font-body /
   --font-display. html:root (0,1,1) out-ranks duwam.css's :root here, on the
   marketing pages only (this file loads nowhere else), so they read the
   identity's faces without touching the app's stylesheet. */
html:root{--font-body:var(--mk-font);--font-display:var(--mk-font);--font-numeric:Inter,"Readex Pro",ui-sans-serif,system-ui,sans-serif}

/* ── 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;transition:transform var(--mk-d2) var(--mk-ease),opacity var(--mk-d2) var(--mk-ease)}
/* Site roadmap 46: the pill steps aside while the reader scrolls down and is
   back on the first scroll up (chrome.js navAway/navPinned). Moved, never
   display:none — the mega panels and the skip link still measure against it —
   and out of reach of the pointer while it is up there. 14px top offset + 60px
   pill + a few px of shadow: -100% alone leaves the shadow peeking in. */
.mk-nav.is-away{transform:translateY(calc(-100% - 24px));opacity:0;pointer-events:none}
.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)}
/* Site roadmap 53: liquid glass — Chromium only (liquid-glass.js adds .mk-lg when
   it can render it). The rim bends the page behind it. 10px, not 22px: at 22px
   the blur erases the bend completely (measured — identical to the frosted
   pill); at 10px the bend shows at the rim and the links stayed readable over
   black-and-white stripes, the worst ground there is, in both themes. */
.mk-nav.mk-lg .mk-pill::before{backdrop-filter:url(#mk-lg-filter) blur(10px) saturate(1.5)}

.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(var(--mk-caret-x,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(var(--mk-caret-x,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(var(--mk-caret-x,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{touch-action:manipulation;-webkit-tap-highlight-color:transparent;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);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* The press (tawk roadmap 24) is at the end of this file, with phase 1. */
.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)}
/* On a brand-blue ground — the whole page in dark, the closing band in either
   theme (2026-11-05) — the blue button goes DEEP (white ink 12.7:1, the owner's
   rule) and wears a light-blue ring, so the control still reads as a control on
   a ground of nearly its own hue. */
[data-theme="dark"] .mk-btn.mk-btn--primary,.mk-final .mk-btn.mk-btn--primary{box-shadow:inset 0 0 0 1.5px rgba(217,225,246,.42)}
.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{--mk-cta-bg:#2F55E0;--mk-cta-hover:#3A62F0;position:relative;overflow:hidden;isolation:isolate;border-radius:28px;background:var(--mk-final-bg);background-image:radial-gradient(90% 70% at 50% -10%,color-mix(in srgb,var(--mk-final-accent) 26%,transparent),transparent 70%),radial-gradient(60% 60% at 0% 100%,color-mix(in srgb,var(--mk-final-accent) 16%,transparent),transparent 70%);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{--mk-bg:#0A1546;--mk-surface:#111F5C;--mk-ink:#FFFFFF;--mk-ink-2:#E4EAFA;--mk-muted:#B4C2EE;--mk-line:rgba(180,194,238,.18);--mk-line-strong:rgba(180,194,238,.34);--mk-accent:#7C9BFF;--mk-accent-ink:#FFFFFF;border-block-start:1px solid var(--mk-line);background:var(--mk-bg);background-image:radial-gradient(70% 120% at 100% 0%,rgba(91,131,255,.16),transparent 60%),radial-gradient(50% 90% at 0% 100%,rgba(91,131,255,.10),transparent 70%);color:var(--mk-ink);position:relative;isolation:isolate}
/* Site roadmap 50: the «attendance» dot field (foot-field.js makes the canvas).
   Under the footer content, never in the way of the pointer, never printed. */
.mk-foot-field{position:absolute;inset:0;z-index:-1;pointer-events:none;display:block}
@media print{.mk-foot-field{display:none}}
.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)}
/* Site roadmap 14: «جديد» beside «سجل التغييرات» for a week after a release (chrome.js). */
.mk-new{display:inline-block;margin-inline-start:8px;padding:0 8px;border-radius:var(--mk-pill);background:var(--mk-accent-wash);color:var(--mk-accent-ink);font-size:11px;font-weight:700;line-height:1.7;vertical-align:middle}
/* Site roadmap 51: «اسأل الذكاء الاصطناعي عن دوام» — a row above the legal bar
   (made by chrome.js mountAskAi). Quiet chips; the question opens in a new tab. */
.mk-ask-ai{margin-block-start:36px;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;font-size:13.5px;color:var(--mk-ink-2)}
.mk-ask-ai-title{font-weight:600;color:var(--mk-ink)}
.mk-ask-ai-links{display:flex;gap:8px;flex-wrap:wrap}
.mk-ask-ai a{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--mk-line);border-radius:var(--mk-pill);color:var(--mk-ink-2);font-size:13px;font-weight:600;transition:color var(--mk-d1),border-color var(--mk-d1)}
.mk-ask-ai a:hover{color:var(--mk-ink);border-color:color-mix(in srgb,var(--mk-accent) 45%,transparent)}
.mk-ask-ai a svg{width:12px;height:12px}

/* ── 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 *,.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}}

/* ── Site chat + phone sign-up bar (site roadmap 9 & 10; owner 2026-11-04) ──
   The site's one corner button is Duwam's own chat: the chrome's foot carries
   /w/<key>/boot.js (lib/siteChat.js), which draws its launcher inside a shadow
   root at z-index 2147483000 — right for a tenant's site, where it must win
   over everything. Here the host is pinned into a stacking context at 30,
   under the scrim (40), the sheet (45) and the nav (50), and it steps aside
   while a mega menu is open (the panel and the launcher genuinely collide on
   laptop viewports — measured 2026-09-05). The WhatsApp corner button that held
   this spot is gone from every page; WhatsApp links inside content remain.
   The bar is a phone thing: under 640px the pill's own «ابدأ مجاناً» is hidden
   (hide-md), which is the gap it fills. Its edges are --mk-bar-left/right,
   which chrome.js fitStickyBar sets from the launcher's measured box (the side
   and the width are the company's widget settings, changeable without a
   deploy); 16px when nothing is there to keep clear. */
[data-duwam-chat]{position:relative;z-index:30}
html:has(.has-mega:hover) [data-duwam-chat],html:has(.has-mega.is-open) [data-duwam-chat]{opacity:0;pointer-events:none;transition:opacity var(--mk-d1) var(--mk-ease)}
.mk-sticky-cta a:focus-visible{outline:2px solid var(--mk-cta-bg);outline-offset:3px}
.mk-sticky-cta{display:none}
@media (max-width:640px){
  .mk-sticky-cta{display:flex;position:fixed;z-index:30;inset-block-end:16px;left:var(--mk-bar-left,16px);right:var(--mk-bar-right,16px);align-items:center;gap:10px;height:52px;padding-inline:6px 14px;border-radius:var(--mk-pill);background:var(--mk-surface);border:1px solid var(--mk-line);box-shadow:0 14px 34px -14px rgb(var(--mk-shadow-ink) / .35);font-family:var(--mk-font);line-height:1.5;direction:rtl;transform:translateY(calc(100% + 24px));opacity:0;visibility:hidden;transition:transform var(--mk-d2) var(--mk-ease),opacity var(--mk-d2) var(--mk-ease),visibility 0s linear var(--mk-d2)}
  .mk-sticky-cta.is-shown{transform:none;opacity:1;visibility:visible;transition:transform var(--mk-d2) var(--mk-ease),opacity var(--mk-d2) var(--mk-ease)}
  .mk-sticky-cta a{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:var(--mk-pill);background:var(--mk-cta-bg);color:var(--mk-on-accent);font-size:15px;font-weight:700;white-space:nowrap;text-decoration:none}
  .mk-sticky-cta span{font-size:12.5px;color:var(--mk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
}
@media (prefers-reduced-motion:reduce){.mk-sticky-cta,.mk-sticky-cta.is-shown,[data-duwam-chat]{transition:none!important}}
@media print{.mk-sticky-cta,[data-duwam-chat]{display:none!important}}

/* ── Site roadmap 48: sections come in as the reader reaches them ───────
   A page opts in ONCE, on its <main data-reveal="sections">; every section
   after the first in its container rises in (a nested section rides with its
   parent). The section tags themselves stay exactly as written — tests across
   the repo pin their markup. The landing, /crm, /download, /desktop and
   /experience keep their own reveal and do not opt in. CSS only: a view()
   timeline advances with scroll, so nothing runs on the main thread, and a
   browser without it, a reader who asked for less motion, and print all get
   the page exactly as written. After abdulosama.com's motion.js.
   test/siteRevealEverywhere.test.js */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    main[data-reveal="sections"] section:not(:first-of-type):not(section section){animation:mk-rise linear both;animation-timeline:view();animation-range:entry 0% entry 28%}
  }
}
@keyframes mk-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media print{main[data-reveal="sections"] section{animation:none}}
@media print{main[data-reveal="sections"] section.mk-rv-wait{opacity:1;transform:none}}
/* Site roadmap 58: the same rise where view() does not run (Safari, Firefox).
   chrome.js mountRevealFallback adds .mk-rv-wait only to sections still below
   the fold, and .mk-rv-in when the reader reaches them. */
@supports not (animation-timeline:view()){
  main[data-reveal="sections"] section.mk-rv-wait{opacity:0;transform:translateY(12px);transition:opacity .6s var(--mk-ease),transform .6s var(--mk-ease)}
  main[data-reveal="sections"] section.mk-rv-wait.mk-rv-in{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){main[data-reveal="sections"] section.mk-rv-wait{opacity:1;transform:none;transition:none}}
/* The English edition (site roadmap 17): the chrome reads left to right. Its
   logical properties flip on their own; the rules that pinned direction:rtl
   and the caret's centring offset are mirrored here. */
html[lang="en"] :is(.mk-nav,.mk-mobile,.mk-scrim,.mk-foot,.mk-skip,.mk-sticky-cta){direction:ltr}
html[lang="en"] .mk-nav{--mk-caret-x:-50%}
/* Line figures (hairline, owner's request 2026-10-19; assets/marketing/figures.js).
   The box is reserved at the figure's own 5:4 so nothing shifts when it draws.
   Plate = the ground it sits on (a page on a card sets --mk-figure-plate);
   lit lines are Duwam's accent ink, the rest blue-tinted greys of the chrome. */
.mk-figure{display:block;aspect-ratio:5/4;max-width:100%;pointer-events:auto;--hairline-plate:var(--mk-figure-plate,var(--mk-bg));--hairline-hi:var(--mk-accent-ink);--hairline-edge:#9AA6B8;--hairline-mid:#C5CEDB;--hairline-lo:#E2E7EF;--hairline-stroke:1}
[data-theme="dark"] .mk-figure,.mk-on-dark .mk-figure{--hairline-edge:#5B6B82;--hairline-mid:#34445E;--hairline-lo:#1E2C42}

/* ── tawk roadmap, phase 1 (2026-10-21) ─────────────────────────────────
   Shapes and motion borrowed from tawk.to's site, kept on Duwam's tokens.
   Everything that moves sits inside prefers-reduced-motion:no-preference,
   so a reader who asked for less motion — and print — gets the finished,
   still picture. test/tawkPhase1.test.js */
/* tawk roadmap 24: the button gives under the finger — scale(.97), the same
   press the app uses (.94–.97) and tawk.to's active:scale-95 — instead of a
   1px drop. touch-action:manipulation drops the double-tap-zoom wait, and the
   grey tap flash goes. A reader who asked for less motion gets no movement. */
@media (prefers-reduced-motion:no-preference){.mk-btn:active{transform:scale(.97)}}
@media (prefers-reduced-motion:reduce){.mk-btn:active{transform:none}}
.mk-ic{width:var(--mk-ic);height:var(--mk-ic);stroke-width:var(--mk-ic-stroke);flex:none}
.mk-ic--sm{width:var(--mk-ic-sm);height:var(--mk-ic-sm)}
.mk-ic--lg{width:var(--mk-ic-lg);height:var(--mk-ic-lg)}
.mk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 25 · live signals. The dot pings from a copy of itself; the three typing
   dots rise in turn; the count is a pill whose digits never shift width. */
.mk-live{position:relative;display:inline-block;width:8px;height:8px;border-radius:50%;background:#22C55E;flex:none}
.mk-live::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;opacity:0}
.mk-typing{display:inline-flex;align-items:center;gap:4px;padding:11px 13px;border-radius:14px;background:var(--mk-sunken)}
.mk-typing i{display:block;width:6px;height:6px;border-radius:50%;background:var(--mk-muted);opacity:.6}
.mk-typing i:nth-child(2){animation-delay:.15s}
.mk-typing i:nth-child(3){animation-delay:.3s}
.mk-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--mk-pill);background:#E5484D;color:#fff;font-family:var(--mk-font-latin);font-size:11px;font-weight:700;line-height:1.5;font-variant-numeric:tabular-nums;flex:none}
@keyframes mk-ping{0%{transform:scale(1);opacity:.55}75%,100%{transform:scale(2.6);opacity:0}}
@keyframes mk-typing{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-3px);opacity:1}}

/* 19 · tool sprawl: the tools a company juggles before Duwam, tilted like
   papers on a desk and tied by dashed wires. Hover squares them up. */
.mk-sprawl{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 12px;padding:6px 2px}
.mk-sprawl-wire{position:absolute;inset:0;width:100%;height:100%;stroke:var(--mk-line-strong);pointer-events:none;overflow:visible}
.mk-tool{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 10px;padding:10px 12px;border-radius:14px;background:var(--mk-surface);border:1px solid var(--mk-line);box-shadow:0 12px 26px -18px rgb(var(--mk-shadow-ink) / .45);transform:rotate(var(--tilt,0deg));transition:transform var(--mk-d2) var(--mk-ease)}
.mk-tool:last-of-type{grid-column:1/-1;justify-self:center;width:min(100%,260px)}
.mk-tool-ic{grid-row:span 2;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--mk-sunken);color:var(--mk-ink-2)}
.mk-tool b{font-size:13px;font-weight:600;line-height:1.5;color:var(--mk-ink)}
.mk-tool .mk-count{position:absolute;top:-8px;inset-inline-end:-8px;box-shadow:0 0 0 2px var(--mk-surface)}
.mk-tool-st{grid-column:2;font-size:11.5px;line-height:1.5;color:var(--mk-muted)}

/* 21 · the AI loop: a customer writes, the assistant types, a suggestion
   lands, a person approves it, it goes out. One 12-second timeline. Still,
   the card shows the finished exchange (the typing dots stay hidden). */
.mk-ailoop{display:grid;gap:10px;width:100%;max-width:440px;margin-inline:auto;padding:18px;border-radius:var(--mk-r-lg);background:var(--mk-surface);border:1px solid var(--mk-line);box-shadow:var(--mk-glass-shadow);font-family:var(--mk-font);line-height:1.6;color:var(--mk-ink)}
.mk-ailoop-head{display:flex;align-items:center;gap:8px;padding-block-end:10px;border-block-end:1px solid var(--mk-line);font-size:13px;color:var(--mk-muted)}
.mk-ailoop-head b{color:var(--mk-ink);font-weight:600}
.mk-ailoop-in,.mk-ailoop-out{max-width:82%;padding:10px 13px;border-radius:16px;font-size:14px}
.mk-ailoop-in{justify-self:start;background:var(--mk-sunken);border-start-start-radius:4px}
.mk-ailoop-out{justify-self:end;display:flex;align-items:flex-end;gap:6px;background:var(--mk-accent);color:var(--mk-on-accent);border-start-end-radius:4px}
.mk-ailoop-out svg{opacity:.85}
.mk-ailoop-slot{display:grid}
.mk-ailoop-slot>*{grid-area:1/1}
.mk-ailoop-slot .mk-typing{justify-self:end;align-self:start;opacity:0}
.mk-ailoop-draft{padding:11px 13px;border-radius:14px;border:1px dashed var(--mk-accent);background:var(--mk-accent-wash);font-size:14px}
.mk-ailoop-draft span{display:flex;align-items:center;gap:6px;margin-block-end:4px;font-size:12px;font-weight:600;color:var(--mk-accent-ink)}
.mk-ailoop-ok{display:flex;justify-content:flex-end;gap:8px}
.mk-ailoop-ok span{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:var(--mk-pill);font-size:12.5px;font-weight:600;border:1px solid var(--mk-line-strong);color:var(--mk-ink-2)}
.mk-ailoop-ok .mk-ailoop-send{background:var(--mk-cta-bg);border-color:transparent;color:var(--mk-on-accent)}
@keyframes mk-ailoop-in{0%{opacity:0;transform:translateY(6px)}4%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes mk-ailoop-typing{0%,9%{opacity:0}12%,24%{opacity:1}27%,100%{opacity:0}}
@keyframes mk-ailoop-draft{0%,25%{opacity:0;transform:translateY(6px)}30%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}
@keyframes mk-ailoop-ok{0%,34%{opacity:0}38%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes mk-ailoop-press{0%,47%{transform:none}50%{transform:scale(.94)}53%,100%{transform:none}}
@keyframes mk-ailoop-out{0%,54%{opacity:0;transform:translateY(6px)}58%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:none}}

/* 20 · the sticky journey: numbered steps on one side, a window on the
   other that shows the step being read (chrome.js mountJourney). On a
   phone the window goes and the steps read as a plain list. */
.mk-journey-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:start}
.mk-jsteps{position:relative;list-style:none;margin:0;padding:0}
.mk-jsteps::before{content:"";position:absolute;inset-block:20px 40px;inset-inline-start:19px;border-inline-start:2px dashed var(--mk-line-strong)}
.mk-jstep{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-content:start;min-height:46vh;opacity:.5;transition:opacity var(--mk-d2) var(--mk-ease)}
.mk-jstep:last-child{min-height:0;padding-block-end:8vh}
.mk-jstep.is-on{opacity:1}
.mk-jnum{position:relative;grid-row:span 2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--mk-bg);border:1px solid var(--mk-line-strong);color:var(--mk-muted);font-family:var(--mk-font-latin);font-size:14px;font-weight:700;line-height:1.5;transition:background var(--mk-d2) var(--mk-ease),color var(--mk-d2) var(--mk-ease),border-color var(--mk-d2) var(--mk-ease)}
.mk-jstep.is-on .mk-jnum{background:var(--mk-accent);border-color:var(--mk-accent);color:var(--mk-on-accent)}
.mk-jstep h3{margin:6px 0 0;font-size:var(--mk-h3);font-weight:700;line-height:1.45;color:var(--mk-ink)}
.mk-jstep p{margin:6px 0 0;max-width:42ch;font-size:15.5px;line-height:1.8;color:var(--mk-ink-2)}
.mk-jwin{position:sticky;top:clamp(88px,16vh,150px);border-radius:var(--mk-r-lg);background:var(--mk-surface);border:1px solid var(--mk-line);box-shadow:var(--mk-glass-shadow);overflow:hidden;font-family:var(--mk-font);line-height:1.6;color:var(--mk-ink)}
.mk-jwin-bar{display:flex;align-items:center;gap:6px;height:40px;padding-inline:14px;border-block-end:1px solid var(--mk-line);font-size:12px;color:var(--mk-muted)}
.mk-jwin-bar i{width:9px;height:9px;border-radius:50%;background:var(--mk-line-strong)}
.mk-jwin-bar span{margin-inline-start:8px}
.mk-jpanes{display:grid;padding:18px;min-height:320px}
.mk-jpane{grid-area:1/1;display:grid;align-content:start;gap:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity var(--mk-d2) var(--mk-ease),transform var(--mk-d2) var(--mk-ease),visibility 0s linear var(--mk-d2)}
.mk-jpane.is-on{opacity:1;visibility:visible;transform:none;transition:opacity var(--mk-d2) var(--mk-ease),transform var(--mk-d2) var(--mk-ease)}
.mk-jpane-t{font-size:12px;font-weight:600;color:var(--mk-muted)}
.mk-jrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:10px 12px;border-radius:14px;border:1px solid var(--mk-line);background:var(--mk-bg)}
.mk-jrow.is-hot{border-color:var(--mk-accent);background:var(--mk-accent-wash)}
.mk-jav{grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--mk-sunken);color:var(--mk-ink-2);font-size:13px;font-weight:700}
.mk-jrow b{font-size:13.5px;font-weight:600;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-jrow small{grid-column:2;font-size:12px;line-height:1.5;color:var(--mk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-jrow>.mk-count,.mk-jrow>.mk-live,.mk-jrow>.mk-jtag{grid-column:3;grid-row:1/span 2}
.mk-jtag{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--mk-pill);background:var(--mk-accent-wash);color:var(--mk-accent-ink);font-size:11.5px;font-weight:600;white-space:nowrap}
.mk-jarrow{justify-self:center;color:var(--mk-muted)}
.mk-jinput{display:flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:var(--mk-pill);border:1px solid var(--mk-line-strong);font-size:14px}
.mk-jinput i{width:2px;height:18px;background:var(--mk-accent)}
.mk-jmenu{display:grid;gap:2px;padding:6px;border-radius:14px;border:1px solid var(--mk-line);background:var(--mk-surface);box-shadow:0 18px 40px -24px rgb(var(--mk-shadow-ink) / .45)}
.mk-jmenu span{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:10px;font-size:13px}
.mk-jmenu span small{color:var(--mk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-jmenu span:first-child{background:var(--mk-accent-wash)}
.mk-jboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mk-jcol{display:grid;align-content:start;gap:8px;min-height:180px;padding:8px;border-radius:12px;background:var(--mk-sunken)}
.mk-jcol>b{font-size:12px;font-weight:600;color:var(--mk-muted)}
.mk-jcard{padding:8px 10px;border-radius:10px;background:var(--mk-surface);border:1px solid var(--mk-line);font-size:12.5px;line-height:1.5}
.mk-jcard small{display:block;color:var(--mk-muted);font-family:var(--mk-font-latin);font-variant-numeric:tabular-nums}
.mk-jcard.is-won{border-color:#22C55E;box-shadow:0 0 0 3px rgb(34 197 94 / .15)}
@media (max-width:820px){.mk-journey-grid{grid-template-columns:1fr}.mk-jwin{display:none}.mk-jstep{min-height:0;padding-block-end:28px;opacity:1}.mk-jstep:last-child{padding-block-end:0}}

@media (prefers-reduced-motion:no-preference){
  .mk-live::after{animation:mk-ping 1.6s cubic-bezier(0,0,.2,1) infinite}
  .mk-typing i{animation:mk-typing 1s ease-in-out infinite}
  .mk-sprawl:hover .mk-tool{transform:none}
  .mk-ailoop .mk-ailoop-in{animation:mk-ailoop-in 12s var(--mk-ease) infinite}
  .mk-ailoop .mk-typing{animation:mk-ailoop-typing 12s linear infinite}
  .mk-ailoop .mk-ailoop-draft{animation:mk-ailoop-draft 12s var(--mk-ease) infinite}
  .mk-ailoop .mk-ailoop-ok{animation:mk-ailoop-ok 12s var(--mk-ease) infinite}
  .mk-ailoop .mk-ailoop-send{animation:mk-ailoop-press 12s var(--mk-ease) infinite}
  .mk-ailoop .mk-ailoop-out{animation:mk-ailoop-out 12s var(--mk-ease) infinite}
}
@media (prefers-reduced-motion:reduce){.mk-tool,.mk-jstep,.mk-jnum,.mk-jpane,.mk-jpane.is-on{transition:none}}
@media print{.mk-jwin{display:none}.mk-jstep{min-height:0;opacity:1}}

/* ── tawk roadmap, phase 2: «جرّبها بنفسك» (try-it demos) ────────────────
   One frame for every demo (tryit.js): a bar that says it is sample data, a
   three-step guide that ticks itself off, and the stage the visitor plays
   with. Built from phase 1's parts (.mk-jrow, .mk-jtag, .mk-jboard, .mk-live)
   so a demo looks like the product, not like a form. test/tawkPhase2.client.test.js */
.mk-try-sec{padding-block:clamp(48px,7vw,96px)}
.mk-try-wrap{max-width:var(--mk-container);margin-inline:auto;padding-inline:var(--mk-gutter)}
.mk-try-head{max-width:720px;margin:0 auto clamp(24px,4vw,36px);text-align:center;font-family:var(--mk-font)}
.mk-try-kicker{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--mk-pill);background:var(--mk-accent-wash);color:var(--mk-accent-ink);font-size:13px;font-weight:600;line-height:1.5}
.mk-try-head h2{margin:12px 0 0;font-size:var(--mk-h2);font-weight:700;line-height:1.45;color:var(--mk-ink);text-wrap:balance}
.mk-try-head p{margin:12px auto 0;max-width:60ch;font-size:16px;line-height:1.8;color:var(--mk-ink-2)}
/* [hidden] must win over the display each part sets below — measured: the
   saved-replies menu, the leave step and the journal all showed while hidden. */
.mk-try [hidden]{display:none!important}
.mk-try{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);border-radius:var(--mk-r-lg);background:var(--mk-surface);border:1px solid var(--mk-line);box-shadow:var(--mk-glass-shadow);overflow:hidden;font-family:var(--mk-font);line-height:1.6;color:var(--mk-ink);text-align:start}
.mk-try-bar{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:46px;padding:8px 18px;border-block-end:1px solid var(--mk-line);font-size:12.5px;color:var(--mk-muted)}
.mk-try-reset{margin-inline-start:auto;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--mk-pill);border:1px solid var(--mk-line-strong);background:transparent;color:var(--mk-ink-2);font:600 12.5px/1.5 var(--mk-font);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background var(--mk-d1) var(--mk-ease)}
.mk-try-reset:hover{background:var(--mk-sunken)}
.mk-try-reset:focus-visible,.mk-try button:focus-visible,.mk-try input:focus-visible,.mk-try select:focus-visible{outline:2px solid var(--mk-accent);outline-offset:2px}
.mk-try-guide{list-style:none;margin:0;padding:22px;display:grid;align-content:start;gap:18px;background:var(--mk-sunken);border-inline-end:1px solid var(--mk-line)}
.mk-try-guide li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;font-size:14.5px;line-height:1.7;color:var(--mk-ink-2)}
.mk-try-n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--mk-line-strong);background:var(--mk-surface);color:var(--mk-muted);font:700 13px/1.5 var(--mk-font-latin);transition:background var(--mk-d2) var(--mk-ease),color var(--mk-d2) var(--mk-ease),border-color var(--mk-d2) var(--mk-ease)}
.mk-try-n svg{display:none;width:var(--mk-ic-sm);height:var(--mk-ic-sm);stroke-width:2.5}
.mk-try-guide li[data-done] .mk-try-n{background:#16A34A;border-color:#16A34A;color:#fff}
.mk-try-guide li[data-done] .mk-try-n b{display:none}
.mk-try-guide li[data-done] .mk-try-n svg{display:block}
.mk-try-guide li[data-done]{color:var(--mk-ink)}
.mk-try-stage{display:grid;align-content:start;gap:14px;min-height:380px;padding:22px}
.mk-try-step{display:grid;gap:10px}
.mk-try-label{font-size:13px;font-weight:600;color:var(--mk-muted)}
.mk-try-note{margin:0;font-size:13px;line-height:1.6;color:var(--mk-muted)}
.mk-try-sum{margin:0;padding:12px 14px;border-radius:14px;background:var(--mk-accent-wash);color:var(--mk-accent-ink);font-size:14px;font-weight:600;line-height:1.6}
.mk-try-err{margin:0;font-size:13px;color:#B42318}
[data-theme="dark"] .mk-try-err{color:#FDA29B}
.mk-try-opts{display:flex;flex-wrap:wrap;gap:8px}
.mk-try-opts label{position:relative;cursor:pointer}
.mk-try-opts input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.mk-try-opts span{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:var(--mk-pill);border:1px solid var(--mk-line-strong);font:600 14px/1.5 var(--mk-font-latin);font-variant-numeric:tabular-nums;color:var(--mk-ink-2);transition:background var(--mk-d1) var(--mk-ease),border-color var(--mk-d1) var(--mk-ease)}
.mk-try-opts input:checked+span{background:var(--mk-accent-wash);border-color:var(--mk-accent);color:var(--mk-accent-ink)}
.mk-try-opts input:focus-visible+span{outline:2px solid var(--mk-accent);outline-offset:2px}
.mk-try .mk-btn{height:42px;padding:0 18px;font-size:15px;justify-self:start}
.mk-try .mk-btn:disabled{opacity:.45;cursor:not-allowed}
.mk-try-log{display:grid;gap:8px}
.mk-try-log:empty{display:none}
.mk-jtag.is-ok{background:rgb(22 163 74 / .12);color:#15803D}
.mk-jtag.is-warn{background:rgb(217 119 6 / .14);color:#B45309}
.mk-jtag.is-bad{background:rgb(220 38 38 / .12);color:#B91C1C}
[data-theme="dark"] .mk-jtag.is-ok{color:#86EFAC}
[data-theme="dark"] .mk-jtag.is-warn{color:#FCD34D}
[data-theme="dark"] .mk-jtag.is-bad{color:#FCA5A5}
/* POS */
.mk-pos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.mk-pos-scan{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px dashed var(--mk-line-strong);font-size:13px;color:var(--mk-muted)}
.mk-pos-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
.mk-pos-item{display:grid;gap:2px;justify-items:start;padding:12px;border-radius:14px;border:1px solid var(--mk-line);background:var(--mk-bg);color:var(--mk-ink);font:600 13.5px/1.5 var(--mk-font);text-align:start;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:border-color var(--mk-d1) var(--mk-ease),transform var(--mk-d1) var(--mk-ease)}
.mk-pos-item:hover{border-color:var(--mk-accent)}
.mk-pos-item small{font:500 12.5px/1.5 var(--mk-font-latin);color:var(--mk-muted);font-variant-numeric:tabular-nums}
.mk-pos-item svg{width:100%;height:14px;margin-block-start:6px;color:var(--mk-muted);opacity:.7}
.mk-pos-cart{display:grid;align-content:start;gap:10px;padding:14px;border-radius:14px;background:var(--mk-sunken)}
.mk-pos-lines{display:grid;gap:6px}
.mk-pos-lines:empty{display:none}
.mk-pos-line{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.mk-pos-line small{color:var(--mk-muted);font-family:var(--mk-font-latin)}
.mk-pos-line b{font:600 13.5px/1.6 var(--mk-font-latin);font-variant-numeric:tabular-nums}
.mk-pos-tot{margin:0;display:grid;gap:4px;padding-block-start:10px;border-block-start:1px solid var(--mk-line)}
.mk-pos-tot div{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--mk-ink-2)}
.mk-pos-tot dd{margin:0;font-family:var(--mk-font-latin);font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-pos-tot .is-total{font-size:15px;font-weight:700;color:var(--mk-ink)}
.mk-pos-cart .mk-btn{justify-self:stretch}
/* ERP */
.mk-erp-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mk-try-field{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--mk-muted)}
.mk-try-field input,.mk-try-field select{height:42px;padding:0 12px;border-radius:12px;border:1px solid var(--mk-line-strong);background:var(--mk-bg);color:var(--mk-ink);font:500 15px/1.5 var(--mk-font);min-width:0}
.mk-try-field input[data-k]{font-family:var(--mk-font-latin);font-variant-numeric:tabular-nums}
.mk-try-table{width:100%;border-collapse:collapse;font-size:13.5px}
.mk-try-table th,.mk-try-table td{padding:9px 10px;border-block-end:1px solid var(--mk-line);text-align:start}
.mk-try-table th{font-size:12px;font-weight:600;color:var(--mk-muted)}
.mk-try-table td+td,.mk-try-table th+th,.mk-try-table tfoot td{font-family:var(--mk-font-latin);font-variant-numeric:tabular-nums;text-align:end}
.mk-try-table tfoot th,.mk-try-table tfoot td{font-weight:700;color:var(--mk-ink);border-block-end:0}
.mk-erp-j{display:grid;gap:10px;padding:14px;border-radius:14px;background:var(--mk-sunken)}
.mk-erp-j .mk-jtag{justify-self:start}
/* CRM */
.mk-try-thread{display:grid;gap:8px}
.mk-try-thread .mk-ailoop-out{animation:none}
.mk-try-compose{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center}
.mk-try-slash{width:42px;height:42px;border-radius:12px;border:1px solid var(--mk-line-strong);background:var(--mk-bg);color:var(--mk-accent-ink);font:700 18px/1.5 var(--mk-font-latin);cursor:pointer;touch-action:manipulation}
.mk-try-compose input{height:42px;padding:0 14px;border-radius:var(--mk-pill);border:1px solid var(--mk-line-strong);background:var(--mk-bg);color:var(--mk-ink);font:500 14px/1.5 var(--mk-font);min-width:0}
.mk-try-compose .mk-jmenu{position:absolute;inset-block-end:calc(100% + 6px);inset-inline:0;z-index:2}
.mk-jmenu button{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--mk-ink);font:500 13px/1.5 var(--mk-font);text-align:start;cursor:pointer}
.mk-jmenu button:hover,.mk-jmenu button:focus-visible{background:var(--mk-accent-wash)}
.mk-jmenu button small{color:var(--mk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-try-deal{cursor:grab;touch-action:none;user-select:none;position:relative;z-index:1}
.mk-try-deal.is-drag{cursor:grabbing;z-index:3;box-shadow:0 18px 36px -16px rgb(var(--mk-shadow-ink) / .5)}
.mk-jcard.is-won small{color:#15803D}
.mk-jcol[data-col]{min-height:120px}
.mk-try-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (max-width:820px){.mk-try{grid-template-columns:1fr}.mk-try-guide{border-inline-end:0;border-block-end:1px solid var(--mk-line)}.mk-pos,.mk-erp-form{grid-template-columns:1fr}.mk-try-stage{min-height:0}}
@media (prefers-reduced-motion:reduce){.mk-try-n,.mk-pos-item,.mk-try-reset,.mk-try-opts span{transition:none}}
@media (prefers-reduced-motion:no-preference){.mk-pos-item.is-hit{animation:mk-pos-hit .32s var(--mk-ease)}.mk-pos-item:active{transform:scale(.97)}}
@keyframes mk-pos-hit{0%{box-shadow:0 0 0 0 rgb(47 107 242 / .45)}100%{box-shadow:0 0 0 10px rgb(47 107 242 / 0)}}

/* ═══ Identity components (owner brief 2026-11-05) — opt-in, .dw-* ════════
   The carousels' building blocks for the pages. Nothing here restyles a page
   that has not reached for the class. */

/* The canvas: flat brand blue under a radial glow in dark, the pale ground in
   light. */
.dw-canvas{background-color:var(--dw-bg);background-image:var(--dw-bg-image);background-attachment:fixed;color:var(--dw-ink)}

/* The technical background — lib/techBg.js renders the markup. The section
   that holds it becomes position:relative + isolation:isolate (below), and
   this layer sits at z-index -1 inside it: above its background, under all
   of its content. The
   ring centre is put ON the anchor (a 1980px square, -990px off two edges), so
   only the quarter or half inside the section shows. End = left in RTL. */
.dw-tech{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;--dw-end:0%;--dw-start:100%;--dw-flip:none;--dw-reach:990px}
html[lang="en"] .dw-tech{--dw-end:100%;--dw-start:0%;--dw-flip:scaleX(-1)}
.dw-tech-rings{position:absolute;width:1980px;height:1980px;max-width:none;transform:var(--dw-flip);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0,#000 calc(var(--dw-reach) * .68),transparent var(--dw-reach));mask-image:radial-gradient(circle at 50% 50%,#000 0,#000 calc(var(--dw-reach) * .68),transparent var(--dw-reach))}
/* a phone stacks a section tall, so the outer rings climbed into the heading
   (measured: r=800 under the hero h1 at 390px) — the default reach shrinks */
@media (max-width:640px){.dw-tech{--dw-reach:720px}}
.dw-tech[data-at="bottom"] .dw-tech-rings{inset-block-end:-990px;inset-inline-start:calc(50% - 990px)}
.dw-tech[data-at="bottom-end"] .dw-tech-rings{inset-block-end:-990px;inset-inline-end:-990px}
.dw-tech[data-at="bottom-start"] .dw-tech-rings{inset-block-end:-990px;inset-inline-start:-990px}
.dw-tech[data-at="top-end"] .dw-tech-rings{inset-block-start:-990px;inset-inline-end:-990px}
.dw-tech[data-at="top-start"] .dw-tech-rings{inset-block-start:-990px;inset-inline-start:-990px}
.dw-tech-dots{position:absolute;inset:0;background-image:radial-gradient(circle,var(--dw-dot) 1.3px,transparent 1.6px);background-size:26px 26px;--dw-at:50% 100%;
  -webkit-mask-image:radial-gradient(900px 700px at var(--dw-at),#000 0,rgba(0,0,0,.55) 45%,transparent 78%);mask-image:radial-gradient(900px 700px at var(--dw-at),#000 0,rgba(0,0,0,.55) 45%,transparent 78%)}
.dw-tech[data-at="bottom-end"] .dw-tech-dots{--dw-at:var(--dw-end) 100%}
.dw-tech[data-at="bottom-start"] .dw-tech-dots{--dw-at:var(--dw-start) 100%}
.dw-tech[data-at="top-end"] .dw-tech-dots{--dw-at:var(--dw-end) 0%}
.dw-tech[data-at="top-start"] .dw-tech-dots{--dw-at:var(--dw-start) 0%}
/* the host becomes its own stacking context, so the layer at -1 sits above
   the host's background and under every child, positioned or not */
:where(:has(>.dw-tech)){position:relative;isolation:isolate}

/* The small technical label — «CRM · INBOX», «01 · PROBLEM». Decoration: its
   brief colour sits under 4.5:1, so every one carries aria-hidden="true"
   (pinned). Capitals are written in the text itself, never by script. */
.dw-label{display:inline-block;font-family:var(--mk-font-mono);font-weight:500;font-size:12px;line-height:1.5;color:var(--dw-label);letter-spacing:.18em;direction:ltr;unicode-bidi:isolate}

/* A heading with ONE highlighted phrase — «4 قنوات.. و<span class="dw-hl">صندوقٌ واحد</span>».
   The phrase in brand ink over a soft bar under its lower half. */
.dw-hl{color:var(--dw-brand);background-image:linear-gradient(var(--dw-soft),var(--dw-soft));background-repeat:no-repeat;background-size:100% .34em;background-position:0 88%;padding-inline:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* The card. */
.dw-card{background:var(--dw-card);border:1.5px solid var(--dw-card-line);border-radius:30px;box-shadow:var(--dw-shadow);padding:clamp(22px,2.6vw,30px);color:var(--dw-ink)}
.dw-card h3{font-weight:600;font-size:var(--mk-h3);line-height:1.5;margin:16px 0 6px}
.dw-card p{color:var(--dw-muted);line-height:1.8;margin:0}
.dw-ic{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--dw-soft);color:var(--dw-brand);flex:none}
.dw-ic svg{width:var(--mk-ic-lg);height:var(--mk-ic-lg)}

/* The browser frame around a real screenshot. The shot swaps with the theme:
   <img class="dw-shot-light"> and <img class="dw-shot-dark"> inside one frame. */
.dw-frame{border-radius:28px;overflow:hidden;background:var(--dw-card);border:1.5px solid var(--dw-card-line);box-shadow:var(--dw-shadow)}
.dw-frame-bar{display:flex;align-items:center;gap:7px;height:40px;padding-inline:16px;background:var(--dw-frame-bar);direction:ltr}
.dw-frame-bar i{width:10px;height:10px;border-radius:50%;background:var(--dw-card-line)}
.dw-frame-bar span{margin-inline-start:12px;font-family:var(--mk-font-mono);font-size:12px;color:var(--dw-muted);letter-spacing:.04em}
.dw-frame img{display:block;width:100%;height:auto}
.dw-shot-dark{display:none!important}
[data-theme="dark"] .dw-shot-dark{display:block!important}
[data-theme="dark"] .dw-shot-light{display:none!important}

/* Chips: solid or outlined pills. */
.dw-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:var(--mk-pill);background:var(--dw-chip-bg);color:var(--dw-chip-ink);font-size:13.5px;font-weight:600;line-height:1.5;white-space:nowrap}
.dw-chip--line{background:transparent;color:var(--dw-brand);border:1.5px solid var(--dw-card-line)}

/* Status chips: a coloured dot, then the words. */
.dw-status{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:var(--mk-pill);font-size:13.5px;font-weight:600;line-height:1.5;white-space:nowrap}
.dw-status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dw-dot-c);flex:none}
.dw-status--ok{--dw-dot-c:var(--dw-ok);background:linear-gradient(var(--dw-ok-bg),var(--dw-ok-bg)),var(--dw-status-base);color:var(--dw-ok-ink)}
.dw-status--warn{--dw-dot-c:var(--dw-warn);background:linear-gradient(var(--dw-warn-bg),var(--dw-warn-bg)),var(--dw-status-base);color:var(--dw-warn-ink)}
.dw-status--bad{--dw-dot-c:var(--dw-bad);background:linear-gradient(var(--dw-bad-bg),var(--dw-bad-bg)),var(--dw-status-base);color:var(--dw-bad-ink)}
.dw-status b{font-family:var(--mk-font-latin);font-variant-numeric:tabular-nums}

/* Big figures. */
.dw-num{font-family:var(--mk-font-latin);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1;direction:ltr;unicode-bidi:isolate}

/* The trial badge: «جرّب 14 يوم مجاناً — بدون بطاقة» with a clock. */
.dw-trial{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:var(--mk-pill);background:var(--dw-soft);color:var(--dw-brand);font-size:13.5px;font-weight:600;line-height:1.5}
.dw-trial svg{width:16px;height:16px;flex:none}

/* A channel, in its owner's colour: a filled circle, a generic white message
   icon (Lucide message-circle). Never a drawn logo. */
.dw-ch{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#FFFFFF;flex:none}
.dw-ch svg{width:22px;height:22px}
.dw-ch--whatsapp{background:var(--dw-ch-whatsapp)}
/* the WhatsApp Business API line — WhatsApp's own teal, so it reads as WhatsApp's */
.dw-ch--waapi{background:var(--dw-ch-waapi)}
.dw-ch--instagram{background:var(--dw-ch-instagram)}
.dw-ch--messenger{background:var(--dw-ch-messenger)}
.dw-ch--tiktok{background:var(--dw-ch-tiktok);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18)}
.dw-ch--web{background:var(--dw-ch-web);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}

/* The wordmark in the nav and the footer: the outlined Aref Ruqaa «دوام», in
   brand ink — light blue on the dark canvas, the official blue on the light. */
.mk-wordmark{display:block;height:32px;width:auto;color:var(--dw-brand)}
.mk-foot .mk-wordmark{height:30px}
/* the English pages' Latin name (no Arabic on them — test/siteEnglish) wears the
   same class, so both navs keep one structure */
span.mk-wordmark[data-brand-name]{display:inline;height:auto;color:var(--dw-brand);font-family:var(--mk-font-latin);letter-spacing:-.01em}
@media (prefers-reduced-motion:reduce){.dw-tech *{animation:none!important;transition:none!important}}

/* ── The galaxy (owner feedback 2026-11-05; lib/galaxy.js renders it) ─────
   Slow orbits from a corner of a section, carrying a figure and a word each.
   The orbit turns; its labels turn back at the same rate, so they stay
   upright. Transform-only (the compositor's work, not the page's), CSS only,
   and still under reduce-motion. data-at follows the reading direction like
   .dw-tech: end = left in Arabic, right in English. */
.dw-galaxy{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;--gx-x:0%;--gx-y:100%;--gx-k:1;--gx-in:calc(var(--gx-k) * 560px);--gx-out:calc(var(--gx-k) * 720px);
  /* the orbits fade with distance, and a satellite fades in from the section's
     edge rather than being cut by it */
  -webkit-mask-image:radial-gradient(circle at var(--gx-x) var(--gx-y),#000 0,#000 var(--gx-in),transparent var(--gx-out)),linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent);-webkit-mask-composite:source-in;
  mask-image:radial-gradient(circle at var(--gx-x) var(--gx-y),#000 0,#000 var(--gx-in),transparent var(--gx-out)),linear-gradient(90deg,transparent,#000 72px,#000 calc(100% - 72px),transparent);mask-composite:intersect}
:where(:has(>.dw-galaxy)){position:relative;isolation:isolate}
.dw-galaxy[data-at="bottom-start"]{--gx-x:100%}
.dw-galaxy[data-at="bottom"]{--gx-x:50%}
.dw-galaxy[data-at="top-end"]{--gx-y:0%}
.dw-galaxy[data-at="top-start"]{--gx-x:100%;--gx-y:0%}
html[lang="en"] .dw-galaxy[data-at="bottom-end"],html[lang="en"] .dw-galaxy[data-at="top-end"]{--gx-x:100%}
html[lang="en"] .dw-galaxy[data-at="bottom-start"],html[lang="en"] .dw-galaxy[data-at="top-start"]{--gx-x:0%}
.dw-galaxy::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--dw-dot) 1.2px,transparent 1.6px);background-size:26px 26px}
.dw-gx-core{position:absolute;left:var(--gx-x);top:var(--gx-y);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--dw-node);box-shadow:0 0 0 10px var(--dw-ring),0 0 60px 24px var(--dw-ring-strong)}
.dw-gx-orbit{position:absolute;left:var(--gx-x);top:var(--gx-y);width:calc(var(--r) * 2 * var(--gx-k));height:calc(var(--r) * 2 * var(--gx-k));margin:calc(var(--r) * -1 * var(--gx-k)) 0 0 calc(var(--r) * -1 * var(--gx-k));border-radius:50%;border:1px solid var(--dw-ring-strong);animation:dw-gx-spin var(--t) linear infinite}
.dw-gx-orbit:nth-child(3){border-style:dashed;border-color:var(--dw-ring)}
.dw-gx-sat{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(calc(var(--r) * var(--gx-k))) rotate(calc(var(--a) * -1))}
.dw-gx-sat>i{position:absolute;display:block;animation:dw-gx-spin var(--t) linear infinite reverse}
.dw-gx-label{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:5px 11px;border-radius:999px;font:500 12.5px/1.5 var(--mk-font);font-style:normal;color:var(--mk-muted);background:color-mix(in srgb,var(--mk-bg) 82%,transparent);border:1px solid var(--dw-ring-strong);box-shadow:0 6px 18px -10px rgb(var(--mk-shadow-ink) / .35)}
.dw-gx-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dw-node);flex:none}
.dw-gx-label b{font:600 12px/1.5 var(--mk-font-mono);color:var(--mk-accent-ink);letter-spacing:.02em}
@keyframes dw-gx-spin{to{transform:rotate(360deg)}}
/* the closing band is navy in either theme, so its galaxy reads the dark set */
.mk-final .dw-galaxy{--dw-ring:rgba(124,155,255,.14);--dw-ring-strong:rgba(124,155,255,.24);--dw-dot:rgba(180,194,238,.12);--dw-node:rgba(140,168,255,.7)}
.mk-final .dw-gx-label{color:rgba(228,234,250,.78);background:rgba(10,21,70,.62);border-color:rgba(124,155,255,.26)}
.mk-final .dw-gx-label b{color:#A9BFFF}
.dw-galaxy[data-size="band"]{--gx-in:230px;--gx-out:300px}
.dw-galaxy[data-size="page"]{--gx-in:calc(var(--gx-k) * 480px);--gx-out:calc(var(--gx-k) * 600px)}
@media (max-width:640px){
  .dw-galaxy{--gx-k:.62}
  /* on a phone the band's content runs edge to edge: orbits only, no words */
  .dw-galaxy[data-size="band"] .dw-gx-sat{display:none}
}
@media (prefers-reduced-motion:reduce){.dw-gx-orbit,.dw-gx-sat>i{animation:none}}
@media print{.dw-galaxy{display:none}}