/* === css/variables.css === */
/**
 * Haplic — Unified Design Tokens
 * Azure: #0090f0 | Cyan: #4db8ff | Navy: #0b1120
 */
:root {
  /* Tells the browser this is a dark UI: native scrollbars, <select> dropdowns,
     date pickers and autofill stop rendering as light panels over the dark theme. */
  color-scheme: dark;

  /* Backgrounds */
  --color-bg-base: #060911;
  --color-bg-surface: #0b1120;
  --color-bg-card: rgba(14, 22, 39, 0.75);

  /* Brand Colors */
  --color-green: #0090f0;
  --color-green-glow: rgba(0,144,240, 0.4);
  --color-cyan: #4db8ff;
  --color-cyan-light: #51b6f9;
  --color-cyan-glow: rgba(77,184,255, 0.35);
  --color-gold: #fbbf24;
  --color-gold-light: #fde68a;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #2563eb;
  --color-success: #10b981;
  /* Promoted out of the legacy `emerald` aliases, which were the only place these two
     values lived. three_d.css is their one remaining user. */
  --color-success-dark: #047857;
  --color-success-glow: rgba(16, 185, 129, 0.35);

  /* Text */
  --color-text: #f8fafc;
  --color-text-muted: #94a3b8;
  /* Was #64748b, which failed AA on all three surfaces (4.18 base / 3.96 surface /
     3.80 card). #7a879c is the least visual shift that clears 4.5:1 on the card too
     (5.47 / 5.18 / 4.97). It is only ever used as a text colour, never a background
     or border, so raising it cannot weaken contrast anywhere else. */
  --color-text-dim: #7a879c;
  --color-text-strong: #e2e8f0;

  /* Borders & Glass */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  /* The brand green at a quieter alpha. Used as written for hairline edges and soft
     glows — both are the same intent: the green as a hairline, not as a highlight. */
  --color-border-green: rgba(0,144,240, 0.3);

  /* Typography Scale — 9 steps.
     `2xs` and `3xl` were added after measuring the real usage: tiny badges and meta labels
     cluster at ~9.9px, and the display numerals at 38.4px, so both had been hand-written
     because the scale simply had no name for them. */
  --text-2xs: 0.62rem;
  --text-xs: 0.72rem;
  --text-sm: 0.82rem;
  --text-base: 0.92rem;
  --text-md: 1.05rem;
  --text-lg: 1.25rem;
  --text-xl: 1.55rem;
  --text-2xl: 1.85rem;
  --text-3xl: 2.4rem;
  /* The scale stopped at 38.4px, so the landing H1 (--text-2xl, 29.6px) was SMALLER than
     its own 600px override (2rem = 32px) and tied with a mid-page section heading — an
     inverted scale with no display step. `4xl` is that missing step: the hero headline is
     the largest type on the page at every width. */
  --text-4xl: 3rem;

  /* Section headings. The page had one step (--text-2xl) doing three jobs: hero, section
     title and sub-heading all resolved to the same 29.6px, so nothing read as a hierarchy.
     These two name the middle steps so the ladder is 48 / 28 / 20. */
  --text-h2: 1.75rem;
  --text-h3: 1.25rem;

  /* Weight ladder. Measured across the built bundles: 700x47, 800x40, 900x31 against
     400x3 — nearly every string on the site was bold, so weight carried no meaning and
     hierarchy fell to size alone. Four named rungs, used consistently:
     body copy → label/metadata → card & section titles → hero and display numerals. */
  --weight-body: 500;
  --weight-label: 600;
  --weight-title: 700;
  --weight-display: 900;

  /* Font */
  --font-main: 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Latin runs (the tagline, `REQ_…` ids, unit counts) render in Cairo's Latin glyphs,
     which are cramped. This stack is the fallback for those runs only. */
  --font-latin: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;

  /* Radius — 3 sizes only */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-full: 9999px;
  /* Was hand-written ~15 times as 4/6/9/11px for icon tiles and chips. */
  --radius-xs: 6px;

  /* Shadows — the raised step the cards were missing (they only had the flat card drop). */
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
  --shadow-raised: 0 18px 44px -14px rgba(0, 0, 0, 0.78);

  /* Glow — three intents instead of the eight ad-hoc green glows in the stylesheets.
     The design direction for this product is minimal glow: the accent earns attention
     because it is rare, so only the primary CTA and keyboard focus may use it. */
  --glow-soft: 0 0 16px rgba(0,144,240, 0.18);
  --glow-cta: 0 0 22px rgba(0,144,240, 0.32);
  --glow-focus: 0 0 0 3px rgba(0,144,240, 0.22);

  /* Spacing — 8px rhythm. Section padding had been written by hand at 12/34/45/36/8/4px
     with no relationship between them; these five rungs cover the same ranges. */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
}

/* === css/base.css === */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

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

html {
  font-family: var(--font-main);
  background-color: var(--color-bg-base);
  color: var(--color-text);
  direction: rtl;
  text-align: right;
  line-height: 1.6;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-base);
  background-image: 
    radial-gradient(circle at 15% 15%, rgba(0,144,240, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(30, 58, 138, 0.2) 0%, transparent 45%),
    radial-gradient(circle at 50% 80%, rgba(77,184,255, 0.08) 0%, transparent 50%),
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  background-attachment: fixed;
}

.container {
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 20px;
}

/* privacy.html, terms.html and withdrawal.html all declare .legal-page and no rule
   defined it, so the global reset left their headings at browser defaults with no
   spacing above or below. This is the page shell only — each page styles its own body. */
.legal-page { padding-block: 36px 56px; }
.legal-page h1 {
  margin-bottom: 16px;
  font-size: var(--text-2xl);
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.4px;
}
.legal-page h2 { margin: 26px 0 10px; font-size: var(--text-lg); font-weight: 800; }
.legal-page p {
  max-width: 900px;
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.9;
}
.legal-page .section-eyebrow { display: block; margin-bottom: 8px; }

/* Haplic Bold Topbar */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #050b14;
  border-bottom: 1px solid rgba(0,144,240, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.site-header::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--color-green) 0%, #4db8ff 60%, var(--color-cyan-light) 100%);
}
/* The sticky header sat on the heading of every in-page link («المشاريع» landed at 4px,
   «كيف نعمل» at 46px). scroll-padding insets the scrollport, so hash links, the modal's
   scrollIntoView and focus scrolling all clear it. 70px bar + air, and 20px more because a
   section still waiting for its reveal is measured 20px lower, landing that much higher. */
html:has(.site-header) { scroll-padding-top: 100px; }
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 66px;
}
.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand-logo img {
  height: 38px;
  width: auto;
  object-fit: contain;
}
.brand-title {
  font-size: var(--text-lg);
  font-weight: 900;
  letter-spacing: -0.5px;
  display: inline-flex;
  align-items: center;
  direction: ltr;
}
.brand-dz { color: var(--color-green); }
.brand-vest { color: #e2f4ff; }

/* On a phone the wordmark was squeezed to 68px and broke onto two lines inside a
   70px header. Keep it on one line; the size steps below live in dzpartner.css, which
   owns .brand-ar and loads after this file. */
@media (max-width: 640px) {
  .brand-logo { gap: 7px; }
  .brand-ar { white-space: nowrap; }
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-full);
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #cbd5e1;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  transition: all 0.2s ease;
}
.nav-links a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.07);
}
.nav-links a.active {
  color: #03130c;
  background: linear-gradient(135deg, var(--color-green) 0%, #4db8ff 100%);
  box-shadow: 0 4px 14px var(--color-green-glow);
}
.partner-link-text svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.btn-nav-join {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--color-green) 0%, #4db8ff 100%);
  color: #03130c !important;
  font-weight: 800 !important;
  font-size: var(--text-base);
  text-decoration: none;
  border-radius: var(--radius-full) !important;
  padding: 10px 22px !important;
  box-shadow: 0 6px 20px var(--color-green-glow);
  white-space: nowrap;
  transition: all 0.25s ease;
}
.btn-nav-join:hover {
  box-shadow: 0 8px 26px rgba(0,144,240, 0.6);
  transform: translateY(-1px);
}

.brand-partner{font-size:.74em;letter-spacing:-1px}.brand-logo .brand-title{gap:1px}.brand-logo .brand-partner{font-size:.66em;letter-spacing:-1.2px}.brand-ar{color:#e2f4ff;font-size:var(--text-lg)}

/* === css/global.css === */
/**
 * Haplic — Cross-cutting rules
 * Behaviour every page needs regardless of which components it uses: the overflow
 * guard, the `hidden` guard, the focus ring and placeholder tone. Loaded immediately
 * after base.css in every bundle, so page-specific files still win ties.
 */

/* Decorative layers (orbits, the carousel track, fixed bars) are wider than a phone.
   Nothing clips them, so the document grew to 424px inside a 390px viewport and the
   whole body sat 33px off-origin, cutting the left edge. `clip` rather than `hidden`:
   it stops the overflow without creating a scroll container, so sticky still works. */
html, body {
  overflow-x: clip;
}

/* The `hidden` attribute is a UA rule, so any author `display` outranks it. That is how
   three unconfigured social buttons in the footer kept rendering as dead 34x34 boxes.
   One global guard beats a per-component fix; the sole rule that outranks it by
   specificity is .social-links a in dzpartner.css, handled there. */
[hidden] {
  display: none !important;
}

/* Keyboard focus was only ever styled inside the admin workspace, so the public pages
   fell back to the UA ring — nearly invisible on this palette. Fields that ship their
   own indicator (.form-control, the admin form controls) still override this. */
:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

/* Nothing styled placeholders outside the admin command palette, so the UA default
   (#757575, ~4.3:1) set the tone and — since only some fields have placeholders —
   empty inputs read as pre-filled. Dimmer than a real value, still AA. */
::placeholder {
  color: var(--color-text-dim);
  opacity: 1; /* Firefox dims placeholders by default; the token is the intent. */
}

/* === css/components.css === */
/**
 * Modern Venture Fintech Components
 */
.card {
  background: var(--color-bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: all 0.3s ease;
}
/* Category Filter Bar */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.filter-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  padding: 8px 18px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s ease;
}
.filter-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.filter-btn.active {
  background: rgba(77,184,255, 0.15);
  border-color: var(--color-cyan);
  color: var(--color-cyan-light);
  box-shadow: 0 0 15px rgba(77,184,255, 0.3);
}
/* Digital Shareholder Certificate */
.certificate-preview {
  background: linear-gradient(135deg, #0c1220 0%, #080c16 100%);
  border: 1px solid rgba(77,184,255, 0.3);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 16px;
  box-shadow: var(--shadow-card);
}
.cert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.cert-serial {
  font-family: monospace;
  font-size: var(--text-sm);
  color: var(--color-cyan-light);
  letter-spacing: 1px;
}
.cert-body h4 {
  font-size: var(--text-lg);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 6px;
}
.cert-body p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
}
/* Modern Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--color-cyan) 0%, #097dca 100%);
  color: #03141f;
  border: none;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-size: var(--text-md);
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(77,184,255, 0.4);
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #4db8ff 0%, var(--color-cyan) 100%);
  box-shadow: 0 6px 28px rgba(77,184,255, 0.6);
  transform: translateY(-2px);
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border: 1px solid var(--color-border);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: all 0.25s ease;
}
.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}
/* The quiet third button, kept beside the other two. Two places already referenced
   .btn-subtle — the partner portal's logout and the link that closes the registration
   success panel — while no rule defined it, so each drew as a raw browser button. */
.btn-subtle{display:inline-flex;align-items:center;padding:8px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:transparent;color:var(--color-text-muted);font-family:var(--font-main);font-size:var(--text-sm);font-weight:700;text-decoration:none;cursor:pointer;transition:all .2s ease}
.btn-subtle:hover{background:rgba(255,255,255,.06);border-color:var(--color-border-strong);color:var(--color-text)}
/* Closes the registration flow on the home page: the step after the form is submitted. */
.success-card{margin-top:18px;padding:22px;border:1px solid var(--color-border-green);border-radius:var(--radius-md);background:rgba(16,185,129,.08);text-align:right}
.success-card strong{display:block;margin-bottom:8px;color:var(--color-green);font-size:var(--text-md)}
.success-card p{margin:0 0 8px;color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.8}
.success-card .btn-subtle{margin-top:6px}
/* Form Controls */
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: var(--text-base);
  color: #cbd5e1;
  margin-bottom: 6px;
  font-weight: 700;
}
.form-control {
  width: 100%;
  background: rgba(8, 12, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  color: #ffffff;
  font-size: var(--text-base);
  font-family: var(--font-main);
  direction: rtl;
  transition: all 0.25s ease;
}
.form-control:focus {
  outline: none;
  border-color: var(--color-cyan);
  box-shadow: 0 0 0 3px var(--color-cyan-glow);
}
/* Notification card */
.form-message {
  margin-top: 16px;
  padding: 16px;
  border-radius: var(--radius-md);
}
.form-message.success-state {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid var(--color-success);
  color: #34d399;
}
.form-message.error-state {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid var(--color-danger);
  color: #f87171;
}

/* === css/home_enhancements.css === */
/* Haplic public page enhancements */
.carousel-card{scroll-snap-align:start}
.nav-actions{display:flex;align-items:center;gap:10px}.menu-toggle{place-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(255,255,255,.06);color:#fff}
/* The hamburger's resting state, and it has to be stated *above* the query at the end of this
   file rather than beside the rule above. Written after that query it won on source order alone
   — same selector, later in the sheet — and left `.menu-toggle` at `display:none` at every width.
   The nav it opens is `visibility:hidden` below the breakpoint, so with no toggle on screen the
   four nav links were unreachable on every phone, and the markup, the JS and the `.open` rule
   below were all dead weight. */
.menu-toggle{position:relative;display:none;padding:9px;cursor:pointer}
/* 36–38px drawn, 44px reachable at every width the toggle shows: the circle keeps the size the
   header row can afford and the target grows 4px past it each way. Nothing sits within 6px. */
.menu-toggle::after{content:'';position:absolute;inset:-4px}
.menu-toggle span{width:17px;height:2px;background:currentColor;border-radius:2px}.menu-toggle.is-open span:nth-child(1){transform:translateY(5px) rotate(45deg)}.menu-toggle.is-open span:nth-child(2){opacity:0}.menu-toggle.is-open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
.value-section,.faq-section{padding:12px 0 34px}.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.value-grid article{min-height:190px;padding:20px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:rgba(14,22,39,.58)}.value-grid span,.section-eyebrow{color:var(--color-green);font-weight:800;font-size:var(--text-xs);letter-spacing:.08em}.value-grid h3{margin:15px 0 6px;color:#fff;font-size:var(--text-md)}.value-grid p{color:#b6c2d2;font-size:var(--text-sm);line-height:1.75}
.risk-disclosure{display:flex;justify-content:space-between;align-items:center;gap:28px;margin:18px 0 25px;padding:25px 28px;border:1px solid rgba(251,191,36,.32);border-radius:var(--radius-md);background:linear-gradient(110deg,rgba(251,191,36,.1),rgba(14,22,39,.65))}.risk-disclosure h2{color:#fff;font-size:var(--text-lg);margin:6px 0}.risk-disclosure p{max-width:820px;color:#c1c9d6;font-size:.87rem;line-height:1.8}.risk-disclosure .btn-secondary{flex:none}
@media(max-width:980px){.value-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.carousel-card{width:258px}}

/* ---------- The nav becomes a dropdown behind the toggle ---------- */
/* 860px, where it was 760: on screen the header row needs ~840px — wordmark, four nav links, the
   join button and the portal toggle — so between 761 and 839 the row was wider than the viewport
   and pushed «دخول» off the leading edge. It was clipped, not scrollable: the document reported no
   horizontal overflow and no hamburger appeared to offer another way in. Below 860 there is no
   room for the row, so the links move into the dropdown. */
@media(max-width:860px){.nav-wrap nav{display:block;position:absolute;top:70px;right:12px;left:12px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.2s;z-index:1001}.nav-wrap nav.open{opacity:1;visibility:visible;transform:translateY(0)}.nav-links{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:10px;border:1px solid rgba(0,144,240,.25);border-radius:var(--radius-md);background:#050b14;box-shadow:0 16px 36px rgba(0,0,0,.55)}.nav-links a{display:flex;align-items:center;min-height:44px}.menu-toggle{display:grid}.nav-actions .btn-nav-join{padding:8px 14px!important;font-size:var(--text-sm)}}
/* Footer lockup: emblem above, "Haplic" wordmark below, then the tagline paragraph.
   The name uses the same type weight/direction as the header wordmark so the two
   lockups read as the same brand. */
.footer-brand-name{display:block;margin:-4px 0 10px;color:#e2f4ff;font-size:var(--text-xl);font-weight:900;letter-spacing:-.5px;direction:ltr}

/* === css/refined_ui.css === */
/* Haplic — Utility classes (tokens moved to variables.css) */
.numeric-value{display:inline-block;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;white-space:nowrap}
#display-equity-pct{min-width:4.8ch;text-align:left}
.amount-chips button{direction:ltr;unicode-bidi:isolate}
.hidden{display:none!important}
.text-right{direction:rtl;text-align:right}
.text-left{direction:ltr;text-align:left}

/* === css/withdrawal.css === */
/* ==========================================================================
   Haplic — Withdrawal
   Two halves, one subject: withdrawal.html explains the process, and the card at
   the bottom styles the form a partner uses inside the portal to start it. Shared
   by the legal bundle (the page) and the portal bundle (the card).
   ========================================================================== */

/* --- withdrawal.html: the explainer page --------------------------------- */
.wd-hero {
  padding: 30px 0 34px;
  border-bottom: 1px solid var(--color-border);
}
.wd-hero h1 { font-size: var(--text-3xl); }
.wd-hero p {
  max-width: 820px;
  color: #b9c6d6;
  font-size: var(--text-md);
  line-height: 1.95;
}
.wd-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.wd-block { padding: 34px 0; border-bottom: 1px solid var(--color-border); }
.wd-block > h2 { margin: 0 0 8px; }

/* Eligibility, as three plain facts rather than a paragraph nobody reads. */
.wd-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.wd-facts article {
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(14, 22, 39, 0.58);
}
.wd-facts span { color: var(--color-green); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.06em; }
.wd-facts strong { display: block; margin: 9px 0 7px; color: #fff; font-size: var(--text-md); }
.wd-facts p { max-width: none; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.8; }

/* The steps, in order — the same five the admin panel moves a request through. */
.wd-steps { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: wd; }
.wd-steps li { display: flex; gap: 15px; align-items: flex-start; }
.wd-steps b {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border-green);
  border-radius: 50%;
  background: rgba(0,144,240, 0.1);
  color: var(--color-green);
  font-size: var(--text-sm);
  font-weight: 900;
}
.wd-steps strong { color: #fff; font-size: var(--text-base); }
.wd-steps p { max-width: none; margin-top: 5px; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.8; }

/* Expected timings — and the per-project terms, which are the same shape: a label on the
   right, a value on the left, one row each. Two lists, one look, so they share rules. */
.wd-timeline,
.wd-terms { list-style: none; margin: 20px 0 0; padding: 0; }
.wd-timeline li,
.wd-terms li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--color-border);
}
.wd-timeline li:last-child,
.wd-terms li:last-child { border-bottom: 0; }
.wd-timeline span,
.wd-terms span { color: var(--color-text-muted); font-size: var(--text-base); }
.wd-timeline b,
.wd-terms b { flex: none; color: var(--color-green); font-size: var(--text-sm); font-weight: 800; }

.wd-block .faq-list { margin: 20px 0 0; }
.wd-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 34px;
  padding: 28px;
  border: 1px solid var(--color-border-green);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(0,144,240, 0.1), rgba(77,184,255, 0.05));
}
.wd-cta h2 { margin: 0 0 6px; font-size: var(--text-lg); color: #fff; }
.wd-cta p { max-width: 620px; margin: 0; color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.8; }

/* --- Partner portal: the withdrawal card --------------------------------- */
.wd-card {
  margin-top: 20px;
  padding: 22px;
  border: 1px solid var(--color-border-green);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, #0c1a30 0%, #071120 60%, #0a1a2e 100%);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
}
.wd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.wd-eyebrow { display: block; margin-bottom: 4px; color: var(--color-green); font-size: var(--text-2xs); font-weight: 800; letter-spacing: 0.08em; }
.wd-head h2 { margin: 0; color: #fff; font-size: var(--text-lg); }
.wd-chip {
  flex: none;
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 800;
  white-space: nowrap;
}
.wd-chip.ok { border-color: var(--color-border-green); background: rgba(0,144,240, 0.14); color: #75bbe9; }
.wd-chip.open { border-color: rgba(77,184,255, 0.42); background: rgba(77,184,255, 0.14); color: #67e8f9; }
.wd-chip.wait { border-color: rgba(245, 158, 11, 0.42); background: rgba(245, 158, 11, 0.13); color: #fcd34d; }
.wd-chip.done { background: rgba(255, 255, 255, 0.05); color: var(--color-text-muted); }
.wd-chip.no { border-color: rgba(239, 68, 68, 0.42); background: rgba(239, 68, 68, 0.12); color: #fca5a5; }

.wd-lead { margin: 0 0 12px; color: #b9c6d6; font-size: var(--text-base); line-height: 1.85; }
.wd-lead strong { color: var(--color-green); }
.wd-note-line { margin: 0; color: var(--color-text-dim); font-size: var(--text-sm); line-height: 1.8; }

.wd-form { margin-top: 6px; }
.wd-form label { display: block; margin-bottom: 7px; color: var(--color-text-strong); font-size: var(--text-sm); font-weight: 700; }
.wd-form textarea { min-height: 88px; resize: vertical; }
.wd-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 13px; }
.wd-hint { flex: 1; min-width: 210px; color: var(--color-text-dim); font-size: var(--text-xs); line-height: 1.75; }

.wd-notice { margin-bottom: 14px; padding: 12px 14px; border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.75; }
.wd-notice.ok { border: 1px solid var(--color-border-green); background: rgba(0,144,240, 0.1); color: #bfdff4; }
.wd-notice.no { border: 1px solid rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.1); color: #fca5a5; }

.wd-history { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.wd-history h3 { margin: 0 0 12px; color: var(--color-text-strong); font-size: var(--text-base); }
.wd-history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.wd-history li {
  display: flex;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.025);
}
.wd-history li > div { flex: 1; min-width: 0; }
.wd-history strong { color: var(--color-text); font-size: var(--text-sm); }
.wd-history p { margin: 5px 0 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.7; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .wd-facts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .wd-hero h1 { font-size: var(--text-2xl); }
  .wd-cta { flex-direction: column; align-items: stretch; }
  .wd-cta .btn-primary { text-align: center; }
}
@media (max-width: 560px) {
  .wd-head { flex-direction: column; }
  .wd-actions { flex-direction: column; align-items: stretch; }
  .wd-actions .btn-primary { width: 100%; }
  .wd-timeline li,
  .wd-terms li { flex-direction: column; gap: 4px; }
}

/* === css/dzpartner.css === */
/* Haplic all missing styles - single unified file */
/* Estimator */
.partnership-estimator{margin:48px 0 65px;padding:32px;border:1px solid rgba(0,144,240,.22);border-radius:var(--radius-lg);background:radial-gradient(circle at 0 0,rgba(0,144,240,.1),transparent 33%),linear-gradient(135deg,rgba(16,36,62,.88),rgba(7,16,31,.9));box-shadow:0 18px 55px rgba(0,0,0,.27)}
.estimator-intro{max-width:760px;margin-bottom:25px}
.estimator-intro h2{margin:6px 0;color:#fff;font-size:var(--text-2xl)}
.estimator-intro p{color:#afbdd0;font-size:var(--text-base);line-height:1.8}
.estimator-layout{display:grid;grid-template-columns:minmax(330px,.85fr) minmax(0,1.15fr);gap:16px}
.estimator-control{padding:22px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:rgba(5,13,27,.52)}
.estimator-head{display:flex;justify-content:space-between;gap:12px;padding-bottom:15px;margin-bottom:17px;border-bottom:1px solid var(--color-border-strong)}
.estimator-head div{display:flex;flex-direction:column;gap:3px}
.estimator-head span{color:#91c6e9;font-size:var(--text-xs);font-weight:700}
.estimator-head strong{color:#fff;font-size:var(--text-base)}
.estimator-head>b{align-self:start;color:#b8d6f2;font-size:.67rem;text-align:left;max-width:155px;line-height:1.6}
.unit-input{position:relative;display:grid;grid-template-columns:44px 1fr 44px;min-height:58px;margin-bottom:12px;overflow:hidden;border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-md);background:#081223}
.unit-input button{border:0;background:rgba(255,255,255,.06);color:#7fbfea;font-size:1.7rem;cursor:pointer}
.unit-input input{min-width:0;border:0;background:transparent;color:#fff;font:800 1.45rem var(--font-main);text-align:center;outline:none}
.unit-input::after{content:'دج';display:flex;align-items:center;justify-content:center;position:absolute;left:54px;top:50%;transform:translateY(-50%);min-width:34px;height:24px;padding:0 5px;border-radius:6px;background:rgba(0,144,240,.14);color:#83c2ec;font-size:var(--text-xs);font-weight:900;pointer-events:none}
.unit-input input{padding-left:52px;font-variant-numeric:tabular-nums}
/* The field clips its children (overflow:hidden), so a focus outline on the input or on
   the +/- buttons is cut off at the edges. Signal focus on the wrapper instead. */
.unit-input:focus-within{border-color:var(--color-green);box-shadow:0 0 0 3px rgba(0,144,240,.16)}
.unit-hint{margin-top:11px;color:#9aabc1;font-size:var(--text-xs)}
.unit-hint strong{color:#fff}
.estimator-results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.result-card{display:flex;min-height:170px;flex-direction:column;justify-content:space-between;padding:18px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:rgba(255,255,255,.04)}
.result-card.primary{border-color:rgba(0,144,240,.42);background:linear-gradient(145deg,rgba(0,144,240,.16),rgba(255,255,255,.03))}
.result-card span{color:#adbed1;font-size:var(--text-xs)}
.result-card strong{color:#fff;font-size:var(--text-xl);line-height:1.4;font-variant-numeric:tabular-nums}
.result-card.primary strong{color:#7dc1ee;font-size:var(--text-2xl);letter-spacing:.4px}
.result-card small{color:#7f95ad;font-size:var(--text-xs);line-height:1.65}
.estimator-formula{margin-top:17px;padding:15px 17px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:rgba(0,0,0,.16);color:#b5c3d6;font-size:var(--text-sm);line-height:1.85;font-variant-numeric:tabular-nums}
.estimator-formula>span{color:#88c4ec;font-weight:800}
.estimator-formula p{margin:4px 0}
.estimator-formula b{color:#effff}
.estimator-formula small{color:#8da0b7}

/* Amount chips */
.amount-chips{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:13px 0}
.amount-chips button{min-height:44px;border:1px solid rgba(137,194,233,.22);border-radius:9px;background:rgba(0,144,240,.07);color:#deeffa;font:800 var(--text-xs) var(--font-main);cursor:pointer;transition:all .2s}
.amount-chips button:hover,.amount-chips button.active{border-color:#6eb8e9;background:rgba(0,144,240,.19);color:#fff}

/* Institution note */
.institution-note{display:flex;flex-direction:column;gap:5px;margin-bottom:16px;padding:13px 15px;border:1px solid rgba(0,144,240,.28);border-radius:var(--radius-md);background:rgba(0,144,240,.07);color:#d1e4f1;font-size:var(--text-sm)}
.institution-note strong{color:#75bbe9;font-size:.86rem}

/* Registration */
.register-section{padding:45px 0}
.register-card{max-width:720px;margin:0 auto;padding:30px;border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);background:rgba(14,22,39,.85);box-shadow:0 18px 55px rgba(0,0,0,.27)}
.register-card>h2{margin:6px 0;color:#fff;font-size:var(--text-xl)}
.register-card>p{margin-bottom:18px;color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.7}
/* The funnel's last step carries .btn-primary, which is cyan system-wide, so the one control
   that actually submits a request was the only cyan button a visitor saw — the header CTA,
   the hero CTA and the active nav pill are all the green brand gradient. Matches .btn-nav-join
   including the hover, or .btn-primary:hover would put the cyan straight back. */
.register-submit{display:block;width:100%;text-align:center;text-decoration:none;background:linear-gradient(135deg,var(--color-green) 0%,#4db8ff 100%);color:#03130c;box-shadow:0 6px 20px var(--color-green-glow)}
.register-submit:hover{background:linear-gradient(135deg,#45a7e9 0%,#4db8ff 100%);box-shadow:0 8px 26px rgba(0,144,240,.6)}
.register-note{margin:12px 0 0!important;color:#8da0b7!important;font-size:var(--text-xs)!important;text-align:center}
.registration-summary{display:none;margin-bottom:16px;padding:10px 12px;border:1px solid var(--color-border-green);border-radius:var(--radius-sm);background:rgba(0,144,240,.07);color:#edf6fc;font-size:var(--text-sm)}
.registration-summary strong{color:var(--color-green)}
.terms-check{display:flex;gap:8px;align-items:flex-start;color:#b6c2d2;font-size:var(--text-xs);line-height:1.65;margin:-2px 0 16px}
.terms-check input{margin-top:5px;accent-color:var(--color-green)}

/* FAQ */
.faq-list{max-width:980px;margin:auto}
.faq-list details{margin-bottom:8px;border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:rgba(255,255,255,.025)}
.faq-list summary{padding:17px;color:#fff;font-size:var(--text-base);font-weight:700;cursor:pointer;list-style:none}
.faq-list summary::before{content:'+';display:inline-block;width:22px;color:var(--color-green);font-size:var(--text-lg)}
.faq-list details[open] summary::before{content:'−'}
.faq-list p{padding:0 40px 18px;color:#b6c2d2;font-size:var(--text-sm);line-height:1.8}

/* Footer — shell rules moved here from base.css so every footer style, including the
   grid and social links below, lives in one file. Written as one-liners like the rest of
   this file rather than in base.css's braces-per-line style.
   34px was the only padding value in the system on no scale; 40/28 is the 8px rhythm. */
.site-footer{margin-top:auto;border-top:1px solid var(--color-border);background:#05070d;padding:40px 0 28px;text-align:center;color:var(--color-text-dim);font-size:var(--text-base)}

.footer-logo {
  height: 70px;
  width: auto;
  object-fit: contain;
  margin-bottom: 12px;
  /* A 16px green drop-shadow used to sit here. It was the one glow in the stylesheets that
     was neither the primary CTA nor keyboard focus — exactly what the glow tokens reserve. */
}

/* .footer-tagline-ar was dropped during the move: no page or component ever rendered it. */

/* The rule belongs to the tagline only when a footer grid sits above it to be separated
   from. privacy.html, terms.html and withdrawal.html carry the tagline alone, and a hairline
   over a single line of text reads as a mistake. */
.footer-grid + .footer-tagline-en {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
}

.footer-tagline-en {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  letter-spacing: 1.5px;
}

/* Footer grid */
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:24px;text-align:right}
.footer-brand p{color:var(--color-text-muted);font-size:var(--text-sm);max-width:270px}
.footer-grid h3{margin-bottom:9px;color:var(--color-text-strong);font-size:var(--text-base)}
.footer-grid a{display:block;margin:5px 0;color:var(--color-text-muted);text-decoration:none;font-size:var(--text-sm)}
.footer-grid a:hover{color:var(--color-green)}
/* The rule above makes ~32px blocks 5px apart; these are the tightest targets a thumb gets. */
@media(max-width:640px){.footer-grid a{display:flex;align-items:center;min-height:44px;margin:0}}

/* Ventures section spacing */
.ventures-section{padding:4px 0 24px}

/* Social links */
.social-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center}
.social-links a{display:grid!important;place-items:center;width:34px;height:34px;padding:0!important;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);background:rgba(255,255,255,.055);transition:transform .2s,background .2s}
/* `display:grid!important` above outranks the global [hidden] guard on specificity, so a
   social network the company has not configured would still draw its empty box. */
.social-links a[hidden]{display:none!important}
.social-links a svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.social-links a[data-company-facebook]{color:#8fd2ff}.social-links a[data-company-facebook] svg{fill:currentColor;stroke:none}
.social-links a[data-company-instagram]{color:#f28aab}
.social-links a[data-company-linkedin]{color:#82c5f2}
.social-links a[data-company-whatsapp]{color:#7ebde7}
.social-links a .social-fill{fill:currentColor;stroke:none}
.social-links a:hover{transform:translateY(-3px);background:rgba(255,255,255,.12)}
.social-links a[data-company-address]{color:var(--color-text-muted);font-size:var(--text-xs);line-height:1.7}

/* Footer grid p address */
.footer-grid p[data-company-address]{color:var(--color-text-muted);font-size:var(--text-xs);line-height:1.7}

/* Mobile CTA */
.mobile-cta{display:none}
.mobile-cta-main{background:linear-gradient(135deg,#4ba4e0,#4ac5e8);color:#042235!important}

/* Portal login menu */
.portal-menu{position:relative}
.portal-toggle{position:relative;display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(0,144,240,.45);border-radius:var(--radius-full);background:rgba(0,144,240,.1);color:#75bbe9;font:800 var(--text-sm) var(--font-main);padding:9px 16px;cursor:pointer;white-space:nowrap;transition:all .2s}
.portal-toggle:hover{background:rgba(0,144,240,.2);color:#fff}
.portal-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}
.portal-dropdown{position:absolute;left:0;top:calc(100% + 10px);min-width:225px;margin:0;padding:7px;list-style:none;border:1px solid rgba(0,144,240,.28);border-radius:var(--radius-md);background:#071120;box-shadow:0 18px 40px rgba(0,0,0,.55);z-index:1200}
.portal-dropdown a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--radius-sm);color:var(--color-text-strong);text-decoration:none;font-size:var(--text-sm);font-weight:700;line-height:1.5;transition:background .15s}
.portal-dropdown a:hover{background:rgba(0,144,240,.12)}
.portal-dropdown a svg{flex:none;width:17px;height:17px;fill:none;stroke:var(--color-green);stroke-width:1.7}
.portal-dropdown a small{display:block;color:#8da0b7;font-size:var(--text-xs);font-weight:400}
@media(max-width:760px){.portal-toggle{padding:8px 13px!important;font-size:var(--text-xs)}.portal-dropdown{position:fixed;right:12px;left:12px;top:70px;min-width:0}}

/* Two targets in this header come out under 44px: «دخول» at 34–39px tall, and the join CTA at 37.
   Both get a hit box that reaches past them without moving a pixel on screen — the same `::after`
   the carousel's arrows and dots use. The toggle's reach is 3px sideways, half the 6px gap it sits
   in, so it stops just short of the hamburger's own expanded area. */
.portal-toggle::after{content:'';position:absolute;inset:-5px -3px}
/* Height only, and only where the row can spare it: the header is 66px tall and the pill is
   centred in it, so a 44px target costs no width anywhere — and width is what is scarce here. */
.site-header .btn-nav-join{min-height:44px}

/* Below 430 the header row is the wordmark, the join button, «دخول» and the hamburger, and
   together they want ~404px — 14px more than a 390px phone gives and 44px more than a 360px
   one, which is where «دخول» and then the hamburger were pushed off the leading edge and
   clipped. It is all bought back from padding and type size; no label is dropped, and the
   header keeps all four controls. */
@media(max-width:430px){
  .site-header .nav-wrap{padding-inline:12px}
  .site-header .nav-actions{gap:6px}
  .site-header .menu-toggle{width:36px;height:36px;padding:8px}
  .site-header .brand-logo img{height:32px}
  .site-header .nav-actions .btn-nav-join{padding:7px 10px!important;font-size:var(--text-xs)}
}
/* «دخول» gives up its text here and keeps its name in the aria-label; the wordmark takes its
   last size step down. */
@media(max-width:400px){.portal-toggle{font-size:0!important;gap:0;padding:10px!important}.portal-toggle svg{width:17px;height:17px}.brand-ar{font-size:var(--text-md)}.brand-logo{gap:5px}}
@media(max-width:340px){.brand-ar{font-size:var(--text-sm)}}
@media(max-width:328px){.brand-title{display:none}}

/* Responsive */
@media(max-width:900px){.estimator-layout{grid-template-columns:1fr}.estimator-results{grid-template-columns:repeat(3,1fr)}.footer-grid{grid-template-columns:repeat(2,1fr)}.footer-brand{grid-column:span 2}}
@media(max-width:640px){.partnership-estimator{margin:34px -3px 45px;padding:20px;border-radius:18px}.estimator-intro h2{font-size:1.5rem}.estimator-results{grid-template-columns:1fr}.result-card{min-height:118px}.register-card{padding:22px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.mobile-cta{position:fixed;z-index:1200;right:10px;bottom:10px;left:10px;display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:7px;padding:7px;border:1px solid rgba(255,255,255,.13);border-radius:var(--radius-md);background:rgba(7,16,31,.94);backdrop-filter:blur(18px);box-shadow:0 14px 32px rgba(0,0,0,.42)}.mobile-cta a{display:grid;place-items:center;min-height:44px;border-radius:var(--radius-sm);color:#afbdd0;text-decoration:none;font-size:var(--text-xs);font-weight:800}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* === css/contact_fab.css === */
/**
 * Haplic — the floating contact button
 *
 * company_info_component.js has always appended <aside class="floating-contact"> to every page
 * that loads the company settings — index, investor, privacy, terms and withdrawal — and no
 * stylesheet in the project ever defined the class. The widget therefore rendered as a bare row
 * of default-styled links at the very bottom of the document, in the browser's own link colour,
 * on a fixed dark page: `position:static`, no surface, no order between the two actions and the
 * button that is meant to reveal them. This is that widget's stylesheet.
 */

.floating-contact{
  position:fixed;
  /* Below the portal dropdown (1200) and the mobile action bar, above page content. */
  z-index:1230;
  /* The trailing edge, so it clears the reading side on both an RTL and an LTR page. */
  inset-inline-end:16px;
  inset-block-end:16px;
  inset-block-end:calc(16px + env(safe-area-inset-bottom,0px));
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

/* Closed by default; the button below opens it. display:none rather than a transform keeps the
   two links out of the tab order until they are actually reachable on screen. */
/* Full width of the pill below it, so the two actions and the button stack as one column
   instead of the button overhanging a narrower pair. */
.floating-contact-actions{display:none;width:100%;gap:8px}
.floating-contact.open .floating-contact-actions{display:grid}

.floating-contact-actions a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border:1px solid var(--color-border-green);
  border-radius:var(--radius-full);
  background:rgba(7,17,32,.94);
  backdrop-filter:blur(14px);
  color:var(--color-text-strong);
  text-decoration:none;
  font-size:var(--text-sm);
  font-weight:var(--weight-label);
  white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.floating-contact-actions a:hover{background:rgba(0,144,240,.16);border-color:var(--color-green);color:#fff}

/* The page's one persistent control. It carries an elevation shadow, not the CTA glow: the
   glow tokens are reserved for the single primary action on a screen and for keyboard focus,
   and a button that is always on screen would spend them on every page at once. */
.floating-contact-toggle{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:48px;
  padding:0 20px;
  border:0;
  border-radius:var(--radius-full);
  background:linear-gradient(135deg,var(--color-green) 0%,#4db8ff 100%);
  color:#03130c;
  font-family:var(--font-main);
  font-size:var(--text-sm);
  font-weight:var(--weight-title);
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:background .18s ease;
}
.floating-contact-toggle:hover{background:linear-gradient(135deg,#45a7e9 0%,#4db8ff 100%)}
.floating-contact-toggle:focus-visible{outline:none;box-shadow:var(--glow-focus),0 10px 26px rgba(0,0,0,.45)}
/* A chevron, drawn rather than fetched: it points up at the actions when they are closed and
   back down at the button when they are open. Empty content, so it says nothing to a reader.
   The two borders are physical, not logical: top plus left is what turns into a ∧ under a
   45° rotation, and it has to stay that shape whichever way the document runs. */
.floating-contact-toggle::after{
  content:'';
  width:7px;
  height:7px;
  border-top:2px solid currentColor;
  border-left:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform .18s ease;
}
.floating-contact.open .floating-contact-toggle::after{transform:rotate(225deg)}

/* index.html already carries a fixed three-link action bar along the bottom of a phone screen,
   and a second floating control there would sit on top of it. Every other page has neither.
   `:has()` matches the element in the DOM and says nothing about whether it is laid out, and
   that bar is only displayed below 640px, so the test has to be scoped to the same width —
   unscoped, it would hide this pill on tablets where the bar is not on screen at all. */
@media(max-width:640px){
  body:has(.mobile-cta) .floating-contact{display:none}
}

@media(max-width:720px){
  .floating-contact{inset-inline-end:12px}
  /* Whatever is pinned to the bottom of the screen — this pill, or index.html's action bar —
     would otherwise come to rest on top of the footer's last line at the end of the scroll. */
  body:has(.floating-contact) .site-footer,
  body:has(.mobile-cta) .site-footer{padding-block-end:96px}
}

/* === css/type_scale.css === */
/**
 * Haplic — Type scale & weight ladder
 *
 * Loaded LAST in every bundle (after dzpartner.css) because it exists to overrule the
 * values those files set. Two measured problems it fixes:
 *
 * 1. No display step. The scale stopped at --text-3xl but nothing used it for headings:
 *    the hero H1 and a mid-page section title both resolved to 29.6px, and the hero's own
 *    600px override (2rem = 32px) made the phone headline LARGER than the desktop one.
 *    The ladder is now 48 / 28 / 20 and the hero is the biggest type at every width.
 *
 * 2. No weight contrast. Across both bundles: 700x47, 800x40, 900x31 against 400x3 —
 *    nearly everything was bold, so weight carried no meaning and hierarchy fell to size
 *    alone. 900 is now reserved for the page's display line and its display numerals;
 *    titles sit at 700 and labels at 600. See variables.css for the named rungs.
 */

/* ---- The ladder ----
   The disclosure band and the register card are callouts rather than page sections: their
   headings are set with their own surface in landing_polish.css. */
.section-divider-title h2,
.estimator-intro h2,
.faq-section h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-title);
  line-height: 1.28;
  letter-spacing: -0.3px;
  color: #fff;
}
/* The supporting line under a section title is context, not a heading. */
.section-divider-title p,
.estimator-intro p,
.register-copy > p {
  font-weight: 400;
}

/* ---- Titles: card and panel headings step down from 800/900 to 700 ---- */
.trust-pillar-title,
.card-app-name,
.card-price-value,
.startup-title,
.overview-projects b,
.toast-body b,
.sheet-head strong,
.empty-state b,
.admin-side-brand b,
.modal-head h3,
.panel-heading h2,
.legal-page h2 { font-weight: var(--weight-title); }

/* Page titles inside a workspace are not display type — the display weight is spent on
   the numbers those pages exist to show. */
.admin-topbar h1,
.dashboard-header h1,
.pv-title,
.partner-identity h2 { font-weight: var(--weight-title); }

/* ---- Labels: pills, eyebrows and metadata drop to 600 so they read as annotations ---- */
.hero-badge-text,
.section-eyebrow,
.value-grid span,
.wd-eyebrow,
.wd-facts span,
.estimator-head span { font-weight: var(--weight-label); }

/* ---- Display numerals: the one place 900 still earns its keep ---- */
.overview-stat strong,
.capital-meter strong,
.stat-number,
.detail-amount,
.partner-figures strong,
.result-card strong { font-weight: var(--weight-display); }

/* Digits must not reflow while the estimator updates them, and must line up in columns.
   Home and portal already had this on the elements they animate; tables never did. */
.data-table td,
.audit-table td,
.capital-meter strong,
.partner-figures strong {
  font-variant-numeric: tabular-nums;
}

/* ---- Latin runs ----
   The taglines and the request ids are Latin text rendered in Cairo's Latin glyphs, which
   are cramped and were set with 1.5-2px of letter-spacing to compensate. This stack is for
   those runs only, so no second Arabic family is introduced and no extra font is
   downloaded: 'IBM Plex Sans' is used when the machine already has it, otherwise the
   system UI font — both roomier than the fallback they replace. */
.footer-tagline-en,
.hero-tagline-en,
.kpi-pill strong,
[dir="ltr"].req-id {
  font-family: var(--font-latin);
}
.footer-tagline-en { letter-spacing: 0.6px; }

/* ---- Long Arabic headings ----
   `text-wrap: balance` stops a 2-line heading from leaving one word on the second line.
   Progressive enhancement: browsers without it keep the current wrapping. */
.section-divider-title h2,
.estimator-intro h2,
.register-copy h2,
.faq-section h2,
.welcome-title { text-wrap: balance; }

/* === css/legal_polish.css === */
/**
 * Haplic — Legal pages polish
 * The final word on privacy.html, terms.html and withdrawal.html.
 *
 * The three pages had three different column widths and none of them was the reading
 * column: prose was capped at 820px but pinned to the right edge of a 1400px container, the
 * fact cards, the step list and the two key/value lists ran the full 1400px, and the FAQ sat
 * centred at 980px. A step's own description therefore measured ~1350px — roughly 180
 * characters to the line. Everything here puts all three pages on one 840px measure, and
 * turns the two key/value lists into tables instead of two words at opposite ends of the
 * screen with 1400px of empty row between them.
 */

/* ---------- 1. One reading column ---------- */
.legal-page{max-width:880px;margin-inline:auto}
/* .wd-hero h1 was the only 38.4px (--text-3xl) heading on the site and sat off the 48/28/20
   ladder. A page title is the ladder's middle rung, which is what the portal uses too. */
.legal-page h1{font-size:var(--text-h2);font-weight:var(--weight-title);line-height:1.3;letter-spacing:-.3px}
/* base.css capped paragraphs at 900px, which inside the new 840px measure was a no-op that
   only ever mattered because it disagreed with the lists below it. */
.legal-page p{max-width:none}

/* ---------- 2. Sections as cards ---------- */
.wd-block{margin-top:18px;padding:22px 24px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:rgba(14,22,39,.5)}
.wd-block>h2{margin:0 0 8px}
/* privacy.html and terms.html are one heading and two paragraphs with no sections at all.
   Given only a reading column they read as loose text adrift on a wide dark field, so they
   get the same surface as the withdrawal page's sections. */
.legal-note{padding:26px 30px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:rgba(14,22,39,.5)}

/* ---------- 3. Key/value lists: a table, not two words at opposite edges ---------- */
.wd-timeline,.wd-terms{margin-top:18px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:rgba(255,255,255,.02)}
.wd-timeline li,.wd-terms li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:baseline;padding:13px 16px;border-bottom:1px solid var(--color-border)}
.wd-timeline li:last-child,.wd-terms li:last-child{border-bottom:0}
/* The value was set a size below its own label, so the row read as label-then-footnote. */
.wd-timeline span,.wd-terms span{font-size:var(--text-base)}
.wd-timeline b,.wd-terms b{font-size:var(--text-base);font-weight:var(--weight-title)}

/* ---------- 4. Steps: a rail, so five steps read as one sequence ---------- */
.wd-steps{gap:0;margin-top:20px}
.wd-steps li{position:relative;padding-bottom:18px}
.wd-steps li:last-child{padding-bottom:0}
/* Bridges the step gap so the numbered circles are joined rather than merely stacked. It
   stops just inside the next circle instead of stopping short at the list item's edge. */
.wd-steps li:not(:last-child)::after{content:'';position:absolute;inset-inline-start:16px;top:38px;bottom:4px;width:2px;background:var(--color-border-green)}
.wd-steps b{font-weight:var(--weight-title)}
.wd-steps strong{font-weight:var(--weight-title)}
.wd-steps p{max-width:none}

/* ---------- 5. Facts and the FAQ on the same measure as the prose ---------- */
.wd-facts{gap:12px}
.wd-facts article{padding:16px}
.wd-facts span{font-weight:var(--weight-label)}
.wd-block .faq-list{max-width:none}

/* ---------- 6. The one button these pages carry is the funnel's entry point ---------- */
.legal-page .btn-primary{background:linear-gradient(135deg,var(--color-green) 0%,#4db8ff 100%);color:#03130c;box-shadow:0 6px 20px var(--color-green-glow)}
.legal-page .btn-primary:hover{background:linear-gradient(135deg,#45a7e9 0%,#4db8ff 100%);box-shadow:0 8px 26px rgba(0,144,240,.6)}

/* ---------- 7. Phones: the fact row stacks and the cards lose their inset ---------- */
@media(max-width:700px){
  .legal-page{padding-block:24px 40px}
  .wd-block,.legal-note{padding:18px 16px}
  .wd-facts{grid-template-columns:1fr}
  .wd-timeline li,.wd-terms li{gap:12px;padding:12px 14px}
  .wd-steps li{padding-bottom:16px}
  .wd-steps li:not(:last-child)::after{bottom:2px}
}