/* Dealix Design System — component layer.
 *
 * Built on top of landing/styles.css design tokens (--ink-50..900,
 * --accent, --accent-2, --surface, --bg, --shadow-md, --radius,
 * --radius-lg, --font-ar, --font-lt). Honors [data-theme="dark"] so
 * pages get a coherent palette without bypassing the foundation.
 *
 * Usage: pages link both files:
 *   <link rel="stylesheet" href="/styles.css">
 *   <link rel="stylesheet" href="/assets/css/design-system.css">
 *
 * All component classes are prefixed `ds-` so they cannot collide
 * with existing landing styles. See /styleguide.html for live demos
 * of every component.
 *
 * Extends, never overrides, existing tokens.
 */

/* ─── Token scales (additive — extend, never override) ────────────── */
:root {
  /* Spacing — 8px grid */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* Typography scale — fluid (clamps for hero sizes) */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  15px;
  --fs-lg:  17px;
  --fs-xl:  20px;
  --fs-2xl: 24px;
  --fs-3xl: clamp(28px, 3vw, 34px);
  --fs-4xl: clamp(34px, 4vw, 46px);
  --fs-5xl: clamp(42px, 5vw, 62px);
  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.55;
  --lh-loose: 1.75;
  --tracking-tight: -0.02em;
  --tracking-base:   0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.08em;

  /* Motion — durations + easing curves */
  --dur-instant:    80ms;
  --dur-fast:       140ms;
  --dur-base:       200ms;
  --dur-slow:       320ms;
  --dur-deliberate: 480ms;
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-base:    1;
  --z-sticky:  50;
  --z-nav:     100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;

  /* Container widths */
  --container-narrow: 720px;
  --container-base:   980px;
  --container-wide:   1200px;
  --container-full:   1400px;

  /* Surface tones (work in both light and dark themes) */
  --ds-surface-1: rgba(255, 255, 255, 0.04);
  --ds-surface-2: rgba(255, 255, 255, 0.07);
  --ds-surface-3: rgba(255, 255, 255, 0.10);
  --ds-border:    rgba(148, 163, 184, 0.14);
  --ds-border-strong: rgba(148, 163, 184, 0.28);

  /* Status colors */
  --ds-status-ok-bg:        rgba(34, 197, 94, 0.18);
  --ds-status-ok-fg:        #4ade80;
  --ds-status-degraded-bg:  rgba(217, 158, 43, 0.18);
  --ds-status-degraded-fg:  #fbbf24;
  --ds-status-error-bg:     rgba(220, 38, 38, 0.20);
  --ds-status-error-fg:     #fca5a5;
  --ds-status-loading-bg:   rgba(148, 163, 184, 0.18);
  --ds-status-loading-fg:   #cbd5e1;

  /* Action mode colors (Constitution Article 5) */
  --ds-mode-suggest-bg:     rgba(34, 211, 238, 0.16);   /* suggest_only */
  --ds-mode-suggest-fg:     #22d3ee;
  --ds-mode-draft-bg:       rgba(168, 85, 247, 0.18);   /* draft_only */
  --ds-mode-draft-fg:       #c084fc;
  --ds-mode-approval-bg:    rgba(251, 191, 36, 0.18);   /* approval_required */
  --ds-mode-approval-fg:    #fbbf24;
  --ds-mode-approved-bg:    rgba(34, 197, 94, 0.18);    /* approved_manual */
  --ds-mode-approved-fg:    #4ade80;
  --ds-mode-blocked-bg:     rgba(220, 38, 38, 0.20);    /* blocked */
  --ds-mode-blocked-fg:     #fca5a5;

  /* Card aliases */
  --ds-card-glow:           0 0 0 1px var(--border, rgba(148, 163, 184, 0.18));
  --ds-card-elev:           0 12px 30px rgba(2, 6, 23, 0.5);
  --ds-grid-gap:            var(--space-5);

  /* Focus ring (WCAG AA, 2px solid + halo for visibility on any bg) */
  --ds-focus-ring: 0 0 0 2px var(--bg, #fff), 0 0 0 4px var(--accent-2, #22d3ee);
}

/* Reduced-motion respect: disable animations + transitions globally
 * for users who request it. Per WCAG 2.3 + Apple/MDN guidance. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ds-pulse,
  .ds-skeleton,
  .ds-spinner {
    animation: none !important;
  }
  .ds-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Dark-theme refinements. Keeps the design system aligned with the
 * Beast page palette without redefining the global tokens. */
[data-theme="dark"] {
  --ds-card-glow:           0 0 0 1px rgba(148, 163, 184, 0.18);
  --ds-card-elev:           0 18px 40px rgba(0, 0, 0, 0.5);
}

/* ─── ds-banner ─────────────────────────────────────────────────────
 * Hero/section banner with gradient stripe. Used at the top of large
 * showcase pages. Bilingual: title (Arabic primary), subtitle
 * (English secondary). */
.ds-banner {
  display: grid;
  gap: 12px;
  padding: 28px 32px;
  border-radius: var(--radius-lg, 20px);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.20), rgba(168, 85, 247, 0.18));
  border: 1px solid rgba(148, 163, 184, 0.20);
  font-family: var(--font-ar);
}
.ds-banner__title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  background: linear-gradient(90deg, var(--accent-2, #22d3ee), #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ds-banner__subtitle {
  margin: 0;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--text-muted, #94a3b8);
  font-family: var(--font-lt);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ─── ds-status (pill) ──────────────────────────────────────────────
 * Compact status pill. Add one variant: ok | degraded | error | loading. */
.ds-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-lt);
  background: var(--ds-status-loading-bg);
  color: var(--ds-status-loading-fg);
}
.ds-status--ok        { background: var(--ds-status-ok-bg);        color: var(--ds-status-ok-fg); }
.ds-status--degraded  { background: var(--ds-status-degraded-bg);  color: var(--ds-status-degraded-fg); }
.ds-status--error     { background: var(--ds-status-error-bg);     color: var(--ds-status-error-fg); }
.ds-status--loading   { background: var(--ds-status-loading-bg);   color: var(--ds-status-loading-fg); }

/* ─── ds-mode (action mode pill) ────────────────────────────────────
 * One of the 5 canonical action modes (Constitution Article 5).
 * Variants: suggest | draft | approval | approved | blocked. */
.ds-mode {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-lt);
}
.ds-mode--suggest   { background: var(--ds-mode-suggest-bg);   color: var(--ds-mode-suggest-fg); }
.ds-mode--draft     { background: var(--ds-mode-draft-bg);     color: var(--ds-mode-draft-fg); }
.ds-mode--approval  { background: var(--ds-mode-approval-bg);  color: var(--ds-mode-approval-fg); }
.ds-mode--approved  { background: var(--ds-mode-approved-bg);  color: var(--ds-mode-approved-fg); }
.ds-mode--blocked   { background: var(--ds-mode-blocked-bg);   color: var(--ds-mode-blocked-fg); }

/* ─── ds-pulse (live indicator) ────────────────────────────────────
 * Small pulsing dot for "live", "auto-refresh", "monitoring" cues. */
.ds-pulse {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6);
  animation: ds-pulse-anim 2s infinite;
}
@keyframes ds-pulse-anim {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ─── ds-card (feature/beast-layer card) ───────────────────────────
 * Generic content card with hover lift. Used for Beast layers, role
 * cards, ladder rungs, KPI tiles. */
.ds-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  background: var(--surface, #ffffff);
  border-radius: var(--radius, 14px);
  box-shadow: var(--ds-card-glow), var(--ds-card-elev);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
[data-theme="dark"] .ds-card {
  background: rgba(15, 23, 42, 0.7);
  backdrop-filter: blur(8px);
}
.ds-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4), 0 22px 50px rgba(2, 6, 23, 0.6);
}
.ds-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #0f172a);
  font-family: var(--font-ar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ds-card__sub {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted, #64748b);
  font-family: var(--font-lt);
  letter-spacing: 0.02em;
}

/* ─── ds-card--clickable (interactive variant) ─────────────────── */
.ds-card--clickable {
  cursor: pointer;
}
.ds-card--clickable:focus-visible {
  outline: 2px solid var(--accent, #0ea5e9);
  outline-offset: 3px;
}

/* ─── ds-grid (responsive auto-fit grid) ────────────────────────── */
.ds-grid {
  display: grid;
  gap: var(--ds-grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.ds-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ds-grid--wide   { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ─── ds-kpi (number + label tile) ────────────────────────────────
 * Hero stat tile. Number is large and gradient; label is small. */
.ds-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--surface, #ffffff);
  border-radius: var(--radius, 14px);
  box-shadow: var(--ds-card-glow);
}
[data-theme="dark"] .ds-kpi { background: rgba(15, 23, 42, 0.55); }
.ds-kpi__num {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  font-family: var(--font-lt);
  background: linear-gradient(90deg, var(--accent-2, #22d3ee), #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}
.ds-kpi__label {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-lt);
}

/* ─── ds-endpoint (inline API path tag) ───────────────────────── */
.ds-endpoint {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(34, 211, 238, 0.12);
  color: var(--accent-2, #22d3ee);
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ─── ds-chip (constitution article ref / category tag) ─────────── */
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(168, 85, 247, 0.14);
  color: #c084fc;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-lt);
  letter-spacing: 0.03em;
}
.ds-chip--accent { background: rgba(34, 211, 238, 0.14); color: var(--accent-2, #22d3ee); }
.ds-chip--warn   { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }

/* ─── ds-gate (immutable hard-gate row) ──────────────────────────
 * Used to render NO_LIVE_SEND, NO_FAKE_REVENUE, etc. Pre-styled
 * with a lock glyph slot and red-tinted background. */
.ds-gate {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.10);
  border: 1px solid rgba(220, 38, 38, 0.22);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  color: #fca5a5;
  letter-spacing: 0.04em;
  direction: ltr;
  unicode-bidi: isolate;
}
.ds-gate::before {
  content: "🔒";
  font-size: 11px;
}

/* ─── ds-code (preformatted block) ──────────────────────────────── */
.ds-code {
  margin: 0;
  padding: 14px 16px;
  background: rgba(2, 6, 23, 0.5);
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(148, 163, 184, 0.14);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text, #cbd5e1);
  overflow-x: auto;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ─── ds-section (section wrapper with title bar) ───────────────── */
.ds-section {
  display: grid;
  gap: 14px;
}
.ds-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ds-section__title {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  font-family: var(--font-ar);
}
.ds-section__meta {
  font-size: 12px;
  color: var(--text-muted, #64748b);
  font-family: var(--font-lt);
}

/* ─── ds-list-clean (reset bullets, keep spacing) ─────────────── */
.ds-list-clean {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  font-size: 13px;
  line-height: 1.7;
}
.ds-list-clean li::before {
  content: "·";
  margin-inline-end: 6px;
  color: var(--accent-2, #22d3ee);
  font-weight: 800;
}

/* ─── ds-divider (subtle horizontal rule) ──────────────────────── */
.ds-divider {
  height: 1px;
  width: 100%;
  background: rgba(148, 163, 184, 0.14);
  margin: 24px 0;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════════════
 * v2 components — Tier-1 polish (G2)
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── ds-skip-link (accessibility primitive) ────────────────────── */
.ds-skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: var(--space-4);
  z-index: var(--z-modal);
  padding: var(--space-2) var(--space-4);
  background: var(--accent, #0ea5e9);
  color: #fff;
  border-radius: var(--radius-sm, 8px);
  font-family: var(--font-ar);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out-quart);
}
.ds-skip-link:focus,
.ds-skip-link:focus-visible {
  transform: translateY(0);
  outline: none;
  box-shadow: var(--ds-focus-ring);
}

/* ─── ds-focus-ring (WCAG AA focus utility) ─────────────────────── */
.ds-focus-ring:focus-visible,
.ds-card--clickable:focus-visible,
.ds-btn:focus-visible,
.ds-link:focus-visible,
.ds-input:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--radius-sm, 8px);
}

/* ─── ds-sr-only (screen-reader only) ────────────────────────────── */
.ds-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ─── ds-btn (button component, extends .btn from styles.css) ─────
 * Use .ds-btn alone OR alongside .btn for legacy compat. */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius, 14px);
  border: 1px solid transparent;
  background: var(--accent, #0ea5e9);
  color: #fff;
  font-family: var(--font-ar);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: var(--tracking-base);
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--dur-fast) var(--ease-out-quart),
    box-shadow var(--dur-fast) var(--ease-out-quart),
    background var(--dur-fast) var(--ease-out-quart);
}
.ds-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.3);
}
.ds-btn:active { transform: translateY(0); }
.ds-btn--ghost {
  background: transparent;
  color: var(--accent, #0ea5e9);
  border-color: var(--ds-border-strong);
}
.ds-btn--ghost:hover {
  background: var(--ds-surface-2);
  box-shadow: none;
}
.ds-btn--subtle {
  background: var(--ds-surface-2);
  color: var(--text, var(--ink-900));
  border-color: var(--ds-border);
}
.ds-btn--subtle:hover {
  background: var(--ds-surface-3);
  box-shadow: none;
}
.ds-btn--danger {
  background: var(--danger, #dc2626);
}
.ds-btn--danger:hover { box-shadow: 0 8px 24px rgba(220, 38, 38, 0.3); }
.ds-btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  border-radius: var(--radius-sm, 8px);
}
.ds-btn--lg {
  padding: var(--space-4) var(--space-7);
  font-size: var(--fs-lg);
  border-radius: var(--radius, 14px);
}
.ds-btn--block { display: flex; width: 100%; }
.ds-btn--icon {
  padding: var(--space-3);
  aspect-ratio: 1;
}
.ds-btn[disabled],
.ds-btn--disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── ds-link (animated underline link) ─────────────────────────── */
.ds-link {
  position: relative;
  color: var(--accent-2, #22d3ee);
  text-decoration: none;
  font-weight: 600;
}
.ds-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: var(--link-origin, right);
  transition: transform var(--dur-base) var(--ease-out-quart);
}
[dir="ltr"] .ds-link::after { --link-origin: left; }
.ds-link:hover::after,
.ds-link:focus-visible::after { transform: scaleX(1); }
.ds-link--quiet { color: var(--text-muted, #94a3b8); }
.ds-link--quiet:hover { color: var(--accent-2, #22d3ee); }

/* ─── ds-input (form input wrapper) ─────────────────────────────── */
.ds-input {
  display: grid;
  gap: var(--space-2);
  font-family: var(--font-ar);
}
.ds-input__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text, var(--ink-900));
}
.ds-input__field {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm, 8px);
  border: 1px solid var(--ds-border-strong);
  background: var(--ds-surface-1);
  color: var(--text, var(--ink-900));
  font-family: inherit;
  font-size: var(--fs-md);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
[data-theme="dark"] .ds-input__field { background: rgba(15, 23, 42, 0.55); }
.ds-input__field::placeholder { color: var(--text-muted, #94a3b8); }
.ds-input__field:focus {
  outline: none;
  border-color: var(--accent-2, #22d3ee);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.15);
}
.ds-input__hint {
  font-size: var(--fs-xs);
  color: var(--text-muted, #94a3b8);
}
.ds-input--error .ds-input__field {
  border-color: var(--danger, #dc2626);
}
.ds-input--error .ds-input__hint { color: #fca5a5; }

/* ─── ds-skeleton (loading placeholder) ─────────────────────────── */
.ds-skeleton {
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--ds-surface-1) 0%,
    var(--ds-surface-3) 50%,
    var(--ds-surface-1) 100%
  );
  background-size: 200% 100%;
  border-radius: var(--radius-sm, 8px);
  animation: ds-shimmer 1.4s linear infinite;
  vertical-align: middle;
}
.ds-skeleton--text  { width: 100%; height: 1em; border-radius: 4px; }
.ds-skeleton--block { width: 100%; height: 80px; }
.ds-skeleton--circle{ width: 36px; height: 36px; border-radius: 50%; }
@keyframes ds-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── ds-spinner ────────────────────────────────────────────────── */
.ds-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--ds-border);
  border-top-color: var(--accent-2, #22d3ee);
  border-radius: 50%;
  animation: ds-spin 0.7s linear infinite;
  vertical-align: middle;
}
.ds-spinner--sm { width: 14px; height: 14px; border-width: 1.5px; }
.ds-spinner--lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes ds-spin {
  to { transform: rotate(360deg); }
}

/* ─── ds-feature (marketing feature card) ────────────────────────
 * Icon + title + description. Used on marketing pages to enumerate
 * capabilities. Variants: icon at top vs. icon at side. */
.ds-feature {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg, 20px);
  background: var(--surface, #fff);
  box-shadow: var(--ds-card-glow);
  transition: transform var(--dur-base) var(--ease-out-quart),
              box-shadow var(--dur-base) var(--ease-out-quart);
}
[data-theme="dark"] .ds-feature {
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(8px);
}
.ds-feature:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.35), 0 22px 50px rgba(2, 6, 23, 0.5);
}
.ds-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius, 14px);
  background: linear-gradient(135deg, rgba(14,165,233,0.15), rgba(168,85,247,0.15));
  font-size: 22px;
}
.ds-feature__title {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
  line-height: var(--lh-snug);
}
.ds-feature__desc {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: var(--lh-base);
}
.ds-feature--icon-side {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-5);
}

/* ─── ds-stat (big-number tile w/ delta) ─────────────────────────
 * Like ds-kpi but with a delta-up/down indicator. */
.ds-stat {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius, 14px);
  background: var(--surface, #fff);
  box-shadow: var(--ds-card-glow);
}
[data-theme="dark"] .ds-stat { background: rgba(15, 23, 42, 0.55); }
.ds-stat__num {
  font-family: var(--font-lt);
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  background: linear-gradient(90deg, var(--accent-2, #22d3ee), #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ds-stat__label {
  font-family: var(--font-lt);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
}
.ds-stat__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-lt);
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-top: var(--space-2);
}
.ds-stat--up    .ds-stat__delta { color: #4ade80; }
.ds-stat--down  .ds-stat__delta { color: #fca5a5; }
.ds-stat--neutral .ds-stat__delta { color: var(--text-muted); }

/* ─── ds-quote (testimonial / quote block) ───────────────────── */
.ds-quote {
  position: relative;
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-lg, 20px);
  background: var(--ds-surface-1);
  border: 1px solid var(--ds-border);
  font-family: var(--font-ar);
}
.ds-quote::before {
  content: "“";
  position: absolute;
  top: -8px; inset-inline-start: var(--space-5);
  font-family: var(--font-lt);
  font-size: 56px;
  color: var(--accent-2, #22d3ee);
  line-height: 1;
}
.ds-quote__text {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--text);
}
.ds-quote__cite {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.ds-quote__cite strong { color: var(--text); font-weight: 700; }
.ds-quote--centered { text-align: center; }
.ds-quote--centered::before { inset-inline-start: 50%; transform: translateX(-50%); }
.ds-quote--centered .ds-quote__cite { justify-content: center; }

/* ─── ds-faq (accessible accordion with <details>) ─────────────── */
.ds-faq {
  display: grid;
  gap: var(--space-2);
}
.ds-faq__item {
  border: 1px solid var(--ds-border);
  border-radius: var(--radius, 14px);
  background: var(--ds-surface-1);
  overflow: hidden;
}
.ds-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-ar);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  transition: background var(--dur-fast);
}
.ds-faq__item summary::-webkit-details-marker { display: none; }
.ds-faq__item summary::after {
  content: "+";
  font-size: 22px;
  color: var(--accent-2, #22d3ee);
  transition: transform var(--dur-base) var(--ease-out-quart);
}
.ds-faq__item[open] summary::after { transform: rotate(45deg); }
.ds-faq__item summary:hover { background: var(--ds-surface-2); }
.ds-faq__body {
  padding: 0 var(--space-5) var(--space-5) var(--space-5);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--text-muted);
}

/* ─── ds-tabs (horizontal tabs) ────────────────────────────────── */
.ds-tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-1);
  border-radius: 999px;
  width: fit-content;
}
.ds-tabs__tab {
  padding: var(--space-2) var(--space-5);
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-family: var(--font-ar);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.ds-tabs__tab:hover { color: var(--text); }
.ds-tabs__tab[aria-selected="true"] {
  background: var(--accent, #0ea5e9);
  color: #fff;
}

/* ─── ds-breadcrumb (RTL-aware trail) ─────────────────────────── */
.ds-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-ar);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.ds-breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.ds-breadcrumb a:hover { color: var(--accent-2, #22d3ee); }
.ds-breadcrumb__sep {
  color: var(--ds-border-strong);
  user-select: none;
}
[dir="rtl"] .ds-breadcrumb__sep::before { content: "›"; transform: scaleX(-1); display: inline-block; }
[dir="ltr"] .ds-breadcrumb__sep::before { content: "›"; }
.ds-breadcrumb [aria-current="page"] {
  color: var(--text);
  font-weight: 600;
}

/* ─── ds-footer (marketing footer) ─────────────────────────────── */
.ds-footer {
  margin-top: var(--space-11);
  padding: var(--space-9) var(--space-6) var(--space-7);
  border-top: 1px solid var(--ds-border);
  background: var(--ds-surface-1);
  font-family: var(--font-ar);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.ds-footer__cols {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-width: var(--container-wide);
  margin: 0 auto var(--space-7);
}
.ds-footer__col h4 {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.ds-footer__col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: var(--space-2);
}
.ds-footer__col a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.ds-footer__col a:hover { color: var(--accent-2, #22d3ee); }
.ds-footer__bottom {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--ds-border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-xs);
}

/* ─── Layout containers ─────────────────────────────────────── */
.ds-container       { max-width: var(--container-wide);   margin: 0 auto; padding: 0 var(--space-6); }
.ds-container--full { max-width: var(--container-full);   margin: 0 auto; padding: 0 var(--space-6); }
.ds-container--base { max-width: var(--container-base);   margin: 0 auto; padding: 0 var(--space-6); }
.ds-container--narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--space-5); }

/* ─── Stack utility ─────────────────────────────────────────── */
.ds-stack       { display: grid; gap: var(--space-5); }
.ds-stack--xs   { gap: var(--space-2); }
.ds-stack--sm   { gap: var(--space-3); }
.ds-stack--md   { gap: var(--space-5); }
.ds-stack--lg   { gap: var(--space-7); }
.ds-stack--xl   { gap: var(--space-9); }

/* ─── ds-row (inline cluster) ──────────────────────────────── */
.ds-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* ─── Motion utilities ──────────────────────────────────────── */
.ds-hover-lift {
  transition: transform var(--dur-base) var(--ease-out-quart);
}
.ds-hover-lift:hover { transform: translateY(-2px); }

.ds-reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-deliberate) var(--ease-out-quart),
    transform var(--dur-deliberate) var(--ease-out-quart);
}
.ds-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ─── Typography utilities ──────────────────────────────────── */
.ds-eyebrow {
  display: inline-block;
  font-family: var(--font-lt);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-2, #22d3ee);
  font-weight: 700;
}
.ds-headline {
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 800;
  margin: 0;
}
.ds-headline--hero {
  font-size: var(--fs-5xl);
}
.ds-lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--text-muted);
  margin: 0;
}

/* ─── ds-glass (frosted surface) ─────────────────────────────── */
.ds-glass {
  background: var(--ds-surface-2);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-lg, 20px);
}

/* ─── ds-toast (notification) ────────────────────────────────── */
.ds-toast {
  position: fixed;
  inset-inline-end: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius, 14px);
  background: var(--ds-surface-3);
  border: 1px solid var(--ds-border-strong);
  color: var(--text);
  font-family: var(--font-ar);
  font-size: var(--fs-sm);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
  max-width: 360px;
}

/* ═══════════════════════════════════════════════════════════════════
 * Tier-1 Revenue Command Center components (additive — May 2026)
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── ds-trust-strip (above-the-fold proof chips) ─────────────────
 * Horizontal row of trust signals; sits directly under the hero.
 * Variants: --hero (light bg) | --inline (form-side compact). */
.ds-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: 999px;
  background: var(--ds-surface-1);
  border: 1px solid var(--ds-border);
  align-items: center;
  font-family: var(--font-ar);
  font-size: var(--fs-sm);
  color: var(--text);
}
.ds-trust-strip__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}
.ds-trust-strip__chip strong {
  font-family: var(--font-lt);
  font-weight: 800;
  color: var(--accent-2, #22d3ee);
  font-size: var(--fs-md);
  letter-spacing: var(--tracking-tight);
}
.ds-trust-strip__sep {
  color: var(--ds-border-strong);
  user-select: none;
}
.ds-trust-strip--inline {
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-xs);
}

/* ─── ds-problem-card (red-tinted feature card for empathy section) */
.ds-problem-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius, 14px);
  background: rgba(220, 38, 38, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.18);
  font-family: var(--font-ar);
  transition: transform var(--dur-base) var(--ease-out-quart);
}
[data-theme="dark"] .ds-problem-card {
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.28);
}
.ds-problem-card:hover {
  transform: translateY(-2px);
}
.ds-problem-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(220, 38, 38, 0.12);
  color: #fca5a5;
  font-size: 18px;
}
.ds-problem-card__title {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text);
  line-height: var(--lh-snug);
}
.ds-problem-card__desc {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

/* ─── ds-evidence-level (L1→L5 horizontal step indicator) ───────── */
.ds-evidence-ladder {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  position: relative;
}
.ds-evidence-ladder::before {
  content: "";
  position: absolute;
  inset-inline: 8%;
  top: 18px;
  height: 2px;
  background: linear-gradient(90deg, #94a3b8, #22d3ee 30%, #a855f7 70%, #4ade80);
  z-index: 0;
}
.ds-evidence-level {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  text-align: center;
  font-family: var(--font-ar);
}
.ds-evidence-level__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  margin: 0 auto;
  border-radius: 50%;
  font-family: var(--font-lt);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
  background: var(--surface, #fff);
  border: 2px solid var(--ds-border-strong);
}
.ds-evidence-level--l1 .ds-evidence-level__num { color: #94a3b8; border-color: #94a3b8; }
.ds-evidence-level--l2 .ds-evidence-level__num { color: #22d3ee; border-color: #22d3ee; }
.ds-evidence-level--l3 .ds-evidence-level__num { color: #60a5fa; border-color: #60a5fa; }
.ds-evidence-level--l4 .ds-evidence-level__num { color: #a855f7; border-color: #a855f7; }
.ds-evidence-level--l5 .ds-evidence-level__num { color: #4ade80; border-color: #4ade80; }
.ds-evidence-level__title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text);
}
.ds-evidence-level__desc {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-base);
}
@media (max-width: 768px) {
  .ds-evidence-ladder {
    grid-template-columns: 1fr;
  }
  .ds-evidence-ladder::before { display: none; }
  .ds-evidence-level {
    text-align: start;
    grid-template-columns: 36px 1fr;
    gap: var(--space-3);
    align-items: center;
  }
  .ds-evidence-level__num { margin: 0; }
}

/* ─── ds-pricing-row (anchor-pricing tier card with badges) ─────── */
.ds-pricing-row {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-7);
  border-radius: var(--radius-lg, 20px);
  background: var(--surface, #fff);
  border: 1px solid var(--ds-border);
  font-family: var(--font-ar);
  position: relative;
  transition: transform var(--dur-base) var(--ease-out-quart),
              box-shadow var(--dur-base) var(--ease-out-quart);
}
[data-theme="dark"] .ds-pricing-row {
  background: rgba(15, 23, 42, 0.65);
}
.ds-pricing-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.4);
}
.ds-pricing-row--featured {
  border: 2px solid var(--accent-2, #22d3ee);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4),
              0 24px 60px rgba(2, 6, 23, 0.5);
}
.ds-pricing-row--recommended {
  border-color: rgba(34, 197, 94, 0.4);
}
.ds-pricing-row__badge {
  position: absolute;
  inset-inline-end: var(--space-5);
  top: -12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-2, #22d3ee), #a855f7);
  color: #ffffff;
  font-family: var(--font-ar);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(34, 211, 238, 0.25);
}
.ds-pricing-row--recommended .ds-pricing-row__badge {
  background: linear-gradient(135deg, #4ade80, #22d3ee);
}
.ds-pricing-row--free .ds-pricing-row__badge {
  background: linear-gradient(135deg, #fbbf24, #f97316);
}
.ds-pricing-row__title {
  margin: 0;
  font-size: var(--fs-2xl);
  font-weight: 800;
  color: var(--text);
}
.ds-pricing-row__price {
  font-family: var(--font-lt);
  font-size: var(--fs-3xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.ds-pricing-row__price small {
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--text-muted);
}
.ds-pricing-row__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-base);
}
.ds-pricing-row__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.ds-pricing-row__list li::before {
  content: "✓";
  color: var(--accent-2, #22d3ee);
  font-weight: 700;
  margin-top: 2px;
}

/* ─── ds-mega-menu (dropdown nav for Resources) ────────────────── */
.ds-mega-menu {
  position: relative;
}
.ds-mega-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: 0;
  font-family: var(--font-ar);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.ds-mega-menu__trigger::after {
  content: "▾";
  font-size: 10px;
  color: var(--text-muted);
  transition: transform var(--dur-fast);
}
.ds-mega-menu[data-open="true"] .ds-mega-menu__trigger::after {
  transform: rotate(180deg);
}
.ds-mega-menu__panel {
  position: absolute;
  inset-inline-start: 0;
  top: calc(100% + 8px);
  z-index: var(--z-overlay);
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
  min-width: 640px;
  max-width: 860px;
  padding: var(--space-6);
  background: var(--surface, #fff);
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-lg, 20px);
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.35);
  font-family: var(--font-ar);
}
[data-theme="dark"] .ds-mega-menu__panel {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
}
.ds-mega-menu[data-open="true"] .ds-mega-menu__panel {
  display: grid;
}
.ds-mega-menu__col h4 {
  margin: 0 0 var(--space-3) 0;
  font-family: var(--font-lt);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-2, #22d3ee);
}
.ds-mega-menu__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}
.ds-mega-menu__col a {
  font-size: var(--fs-sm);
  color: var(--text);
  text-decoration: none;
  transition: color var(--dur-fast);
}
.ds-mega-menu__col a:hover {
  color: var(--accent-2, #22d3ee);
}
@media (max-width: 768px) {
  .ds-mega-menu__panel {
    position: static;
    min-width: 0;
    grid-template-columns: 1fr;
    box-shadow: none;
    border: 0;
    padding: var(--space-3) 0 0;
  }
}

/* ─── ds-portal-deep (collapsible wrapper for ops console below fold) */
details.ds-portal-deep {
  border: 1px solid var(--ds-border);
  border-radius: var(--radius, 14px);
  padding: 0;
  margin-top: var(--space-7);
  background: var(--ds-surface-1);
}
details.ds-portal-deep > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-ar);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.ds-portal-deep > summary::-webkit-details-marker { display: none; }
details.ds-portal-deep > summary::after {
  content: "▾";
  color: var(--accent-2, #22d3ee);
  font-size: 14px;
  transition: transform var(--dur-base);
}
details.ds-portal-deep[open] > summary::after {
  transform: rotate(180deg);
}
details.ds-portal-deep > .ds-portal-deep__body {
  padding: 0 var(--space-6) var(--space-6);
}

/* ─── ds-wadl (WhatsApp Decision Layer — killer differentiator) ─
 * NOTE: this is a UX presentation of LIVE capabilities (WhatsApp
 * channel + approval engine) — NOT a new service entry. Do not add
 * "wadl" to docs/registry/SERVICE_READINESS_MATRIX.yaml. */
.ds-wadl {
  display: grid;
  gap: var(--space-7);
}
.ds-wadl__lede {
  font-family: var(--font-ar);
  font-size: var(--fs-lg);
  color: var(--text-muted);
  line-height: var(--lh-base);
  margin: 0;
  max-width: 720px;
}
.ds-wadl__stage {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--space-9);
  align-items: center;
}
@media (max-width: 880px) {
  .ds-wadl__stage {
    grid-template-columns: 1fr;
    gap: var(--space-7);
  }
  .ds-wadl__phone { margin: 0 auto; }
}

/* WhatsApp-style phone frame */
.ds-wadl__phone {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: var(--space-4);
  background: #0b141a;
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(2, 6, 23, 0.5),
              0 0 0 1px rgba(148, 163, 184, 0.18);
  font-family: var(--font-ar);
  direction: rtl;
}
.ds-wadl__phone::before {
  content: "Dealix";
  display: block;
  padding: var(--space-2) var(--space-3);
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3);
  background: #1f2c34;
  color: #e9edef;
  border-radius: 24px 24px 0 0;
  font-family: var(--font-lt);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.ds-wadl__msg {
  position: relative;
  padding: var(--space-3) var(--space-4);
  border-radius: 14px;
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  max-width: 90%;
}
.ds-wadl__msg--inbound {
  background: #1f2c34;
  color: #e9edef;
  border-end-start-radius: 4px;
  margin-inline-end: auto;
}
.ds-wadl__msg--outbound {
  background: #005c4b;
  color: #e9edef;
  border-end-end-radius: 4px;
  margin-inline-start: auto;
}
.ds-wadl__msg--system {
  background: rgba(34, 197, 94, 0.16);
  color: #4ade80;
  font-family: var(--font-lt);
  font-size: var(--fs-xs);
  text-align: center;
  margin: var(--space-2) auto;
  border-radius: 8px;
  padding: var(--space-2) var(--space-3);
  max-width: 80%;
  letter-spacing: 0.02em;
}
.ds-wadl__time {
  display: block;
  font-family: var(--font-lt);
  font-size: 10px;
  color: rgba(233, 237, 239, 0.55);
  margin-top: var(--space-1);
  letter-spacing: 0.04em;
}
.ds-wadl__demo-pill {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(168, 85, 247, 0.25);
  color: #c084fc;
  font-family: var(--font-lt);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 4px;
  margin-inline-end: 6px;
  vertical-align: 1px;
}
.ds-wadl__flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 12px;
  margin-bottom: var(--space-3);
}
.ds-wadl__chip {
  flex: 1 1 auto;
  min-width: 88px;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: rgba(34, 211, 238, 0.16);
  color: #22d3ee;
  border: 1px solid rgba(34, 211, 238, 0.32);
  border-radius: 10px;
  font-family: var(--font-ar);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring),
              background var(--dur-fast);
}
.ds-wadl__chip:hover {
  transform: translateY(-1px);
  background: rgba(34, 211, 238, 0.26);
}
.ds-wadl__chip:active { transform: translateY(0); }
.ds-wadl__chip--reject {
  background: rgba(220, 38, 38, 0.14);
  color: #fca5a5;
  border-color: rgba(220, 38, 38, 0.28);
}
.ds-wadl__chip--reject:hover { background: rgba(220, 38, 38, 0.22); }
.ds-wadl__chip--edit {
  background: rgba(168, 85, 247, 0.14);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.28);
}
.ds-wadl__chip--edit:hover { background: rgba(168, 85, 247, 0.22); }

.ds-wadl__rail {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-5);
  font-family: var(--font-ar);
}
.ds-wadl__step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.ds-wadl__step::before {
  content: attr(data-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.18), rgba(168, 85, 247, 0.18));
  color: var(--accent-2, #22d3ee);
  font-family: var(--font-lt);
  font-size: var(--fs-sm);
  font-weight: 800;
  border: 1px solid rgba(34, 211, 238, 0.3);
}
.ds-wadl__step strong {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-1);
}
.ds-wadl__step span {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

/* ─── ds-section--tier1 (large rhythm wrapper) ───────────────── */
.ds-section--tier1 {
  padding-block: clamp(48px, 8vw, 96px);
}
.ds-section--tier1 > .ds-container,
.ds-section--tier1 > .ds-container--wide,
.ds-section--tier1 > .ds-container--base {
  display: grid;
  gap: var(--space-7);
}

/* ─── ds-h1-ar / ds-h1-en (Arabic +4pt rule) ──────────────────── */
.ds-h1-ar {
  font-family: var(--font-ar);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0;
}
.ds-h1-en {
  font-family: var(--font-lt);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
  margin: 0;
}

/* ─── ds-disclaimer (negation-safe wording block) ─────────────── */
.ds-disclaimer {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-sm, 8px);
  background: rgba(251, 191, 36, 0.06);
  border: 1px solid rgba(251, 191, 36, 0.20);
  font-family: var(--font-ar);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-base);
}
.ds-disclaimer strong {
  display: block;
  color: var(--text);
  margin-bottom: var(--space-1);
  font-size: var(--fs-md);
}