/* download-page.css — page-scoped styles extracted from /assets/css/duwam.css.
 * perf-03: /download loaded the full 1.15 MB app stylesheet for
 * ~3.5% actual usage (measured with Chrome's CSS coverage, light+dark
 * theme, 1440x900+390x844, full scroll + reveal + hover/focus sweep).
 * This file is that used subset — the page's :root design tokens plus the
 * handful of base-element rules this page's own markup actually reaches —
 * filtered mechanically from the coverage report, in the ORIGINAL file's
 * order (so cascade/overrides stay correct), comments stripped.
 * Regenerate: see .superpowers/website-pro/ round-2 perf package notes, or
 * re-run a CSS-coverage pass against duwam.css for this page and re-filter.
 * Do not hand-edit component rules here — edit duwam.css and regenerate;
 * the font-stack + @font-face fallback block below ARE hand-tuned (perf-02/
 * perf-09) and should stay that way. */

/* perf-02: a metric-matched fallback for IBM Plex Sans Arabic (the
 * chrome's one Google Fonts request — see public/partials/marketing-head.html),
 * so the fallback occupies the SAME box a first-time visitor's browser
 * paints before the swap, killing the reflow when the webfont arrives.
 *
 * size-adjust is NOT the textbook xAvgCharWidth/unitsPerEm ratio (the usual
 * Capsize/Fontaine formula) — that OS/2 field is a LATIN lowercase average,
 * and using it here made Tahoma render this Arabic body copy ~1.5x TOO
 * WIDE, wrapping /crm's lede to 6 lines instead of 4 (measured: a 0.12-0.16
 * CLS from the resulting reflow when Plex then loaded and re-wrapped it to
 * 4 — worse than doing nothing). Measured instead, directly: render the
 * SAME real Arabic sentences (from crm/download/pricing/desktop's own copy)
 * on a <canvas> in both PlexReal and TahomaLocal at 16px and take the width
 * ratio — 88.7-92.9% across 4 samples, avg 90.315%. ascent-override /
 * descent-override then use that verified size-adjust in the standard
 * formula (unaffected by the width-vs-xAvgCharWidth issue — line-height
 * matched exactly, 28.48px, before this fix): plex.sTypoAscender / unitsPerEm
 * / size-adjust, plex.|sTypoDescender| / unitsPerEm / size-adjust.
 *
 * Geeza Pro (macOS's other Arabic UI face) is NOT used: its local() match
 * failed to load in every test here (it ships as a .ttc collection, which
 * local() matching does not reliably resolve) — shipping an unverified
 * value would be exactly the mistake above. Systems without Tahoma (macOS
 * without the legacy Office-compat font, most Linux) fall through to the
 * chrome's --mk-font-latin, then generic sans-serif — Plex still resolves
 * for Arabic either way; this only shortens the gap before it does. */
@font-face {
  font-family: 'Plex Fallback';
  src: local('Tahoma');
  size-adjust: 90.315%;
  ascent-override: 120.135%;
  descent-override: 45.950%;
  line-gap-override: 0%;
}

:root {

  --canvas: #0B1526;  --surface-2: #111E36;
  --ink: #EDF2FB;
  --primary-700: #4D90F0;  --primary-600: #2F80ED;  --primary-500: #2F80ED;
  --primary-300: #6E9BEA;  --primary-100: #C9DBF9;  --primary-50:  #16294A;
  --border-strong: #2E4066;

  --field-bg: var(--surface-2);
  --field-border: var(--border-strong);
  --chart-1: #24406E;  --chart-2: #2F5FB3;  --chart-3: #4D90F0;  --chart-4: #9DC4F8;
  --viz-violet: rgb(108, 92, 231);
  --spark: #FFC81A;  --spark-bg: #3A2F0A;  --spark-text: #FFD75E;
  --icon-ink: var(--text-2);
  --icon-idle: var(--icon-ink);

  --ink-accent: var(--accent);
  --ink-warn:   var(--warn);
  --ink-danger: var(--danger);
  --icon-stroke: 2;
  --wa: #25D366;
  --rmm-wall-cap: #3a3a50;
  --rmm-wall-shadow: rgba(26, 24, 44, .24);
  --rmm-site-far: #2c5238;

  --rail-surface: #16253E;
  --rail-hover:   #1E3050;
  --rail-active:  #243A60;
  --rail-line:    #2B3E5C;
  --rail-ink:     #EDF2FB;
  --rail-ink-2:   #9FB0CC;
  --rail-ink-3:   #93A5C2;

  --rail-icon:    #C3CFE4;
  --rail-accent:  #6BA6FF;

  --rail-warn:    #FBBF24;
  --rail-danger:  #FF9494;

  --rail-divider: #4E6BA0;

  --rail-recess:  #111E36;

  --tooltip-bg:  rgba(20, 24, 28, .96);
  --tooltip-ink: #F3F4F6;
  --rmm-void: #232020;

  --bg: var(--canvas);
  --bg-2: var(--surface-2);
  --bg-3: color-mix(in srgb, var(--surface-2) 90%, var(--ink) 10%);
  --card: var(--canvas);
  --card-2: var(--surface-2);

  --workspace-canvas: var(--canvas);
  --workspace-pane: var(--surface-2);

  --pane-hover: color-mix(in srgb, var(--workspace-pane) 94%, var(--ink) 6%);

  --pane-band: var(--workspace-canvas);
  --border: #23324F;

  --divider: #556481;

  --surface-sunken: #070D18;
  --border-2: var(--border-strong);
  --text: var(--ink);
  --text-2: #93A3BF;
  --text-3: #64748B;

  --accent: var(--primary-600);
  --accent-fg: #FFFFFF;
  --accent-2: var(--primary-700);
  --accent-grad: var(--primary-500);
  --accent-soft: var(--primary-50);
  --accent-soft-border: color-mix(in srgb, var(--primary-600) 34%, transparent);
  --brand: var(--accent);
  --brand-text: var(--primary-700);
  --brand-hover: var(--primary-700);
  --brand-pressed: #5FA0F2;
  --brand-soft: var(--accent-soft);

  --success: #16A34A;  --success-bg: rgba(22, 163, 74, 0.16);
  --warn: #D97706;     --warn-bg: rgba(217, 119, 6, 0.16);
  --danger: #DC2626;   --danger-bg: rgba(220, 38, 38, 0.16);
  --info: var(--primary-500);

  --tag-slate-bg:   rgba(148, 163, 184, .16); --tag-slate-fg:   #94A3B8;
  --tag-blue-bg:    rgba(56, 189, 248, .16);  --tag-blue-fg:    #38BDF8;
  --tag-green-bg:   rgba(74, 222, 128, .16);  --tag-green-fg:   #4ADE80;

  --tag-amber-bg:   rgba(251, 146, 60, .16);  --tag-amber-fg:   #FB923C;
  --tag-red-bg:     rgba(251, 113, 133, .16); --tag-red-fg:     #FB7185;
  --tag-violet-bg:  rgba(196, 181, 253, .16); --tag-violet-fg:  #C4B5FD;
  --tag-teal-bg:    rgba(20, 184, 166, .16);  --tag-teal-fg:    #14B8A6;
  --tag-pink-bg:    rgba(244, 114, 182, .16); --tag-pink-fg:    #F472B6;
  --tag-yellow-bg:  rgba(234, 179, 8, .16);   --tag-yellow-fg:  #EAB308;
  --tag-fuchsia-bg: rgba(232, 121, 249, .16); --tag-fuchsia-fg: #E879F9;

  --panel: var(--card);
  --panel-muted: var(--bg-3);
  --primary: var(--accent);

  --radius: 8px;
  --radius-lg: 10px;
  --radius-card: 8px;
  --radius-sm: 6px;

  --field-h: 32px;

  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");

  --topbar-h: 56px;

  --viewport-h: 100vh;

  --safe-b: env(safe-area-inset-bottom, 0px);

  --page-head-h: 0px;

  --shadow-1: none;
  --shadow-2: 0 8px 24px rgba(0, 0, 0, .5);

  --btn-edge: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 -1px 0 rgba(0, 0, 0, .35);
  --btn-edge-on: inset 0 1px 0 rgba(255, 255, 255, .20), inset 0 -1px 0 rgba(0, 0, 0, .30);
  --btn-edge-pressed: inset 0 1px 3px rgba(0, 0, 0, .40);
  --btn-sheen: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .05));

  --dur-1: .12s;
  --dur-2: .18s;
  --dur-3: .28s;
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.32, .72, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --blur: 0px;
  --ring: var(--primary-500);

  --ring-glow: rgba(47, 128, 237, 0.14);

  --font-display: 'IBM Plex Sans Arabic', 'Plex Fallback', var(--mk-font-latin);
  --font-body: 'IBM Plex Sans Arabic', 'Plex Fallback', var(--mk-font-latin);
  --font-numeric: Inter, 'IBM Plex Sans Arabic', 'Plex Fallback', ui-sans-serif, system-ui, sans-serif;

  --display-mega: 900 clamp(3.5rem, 8vw, 6rem) / 1.05 var(--font-display);
  --display-xxl:  900 clamp(2.8rem, 6vw, 4.5rem) / 1.08 var(--font-display);
  --display-xl:   900 clamp(2.2rem, 4.8vw, 3.5rem) / 1.15 var(--font-display);
  --display-sub:  600 clamp(1.05rem, 2vw, 1.25rem) / 1.6 var(--font-display);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  --radius-pill: 999px;

  --radius-overlay: 5px;

  --z-portal: 2500;

  --z-toast: 2600;

  --z-impersonation: 100100;

  --imp-banner-h: 34px;
  --radius-btn: 5px;

  --radius-field: 4px;

  --hairline: var(--border);
  --hairline-strong: var(--border-2);
  --shadow-float: var(--shadow-2);
  --cta-ring: var(--bg);

  --t-large-title:   600 1.5rem/1.3 var(--font-display);
  --t-title-2:       600 1.375rem/1.3 var(--font-display);
  --t-headline:      600 1.0625rem/1.35 var(--font-body);
  --t-body:          400 1rem/1.6 var(--font-body);
  --t-callout:       500 0.9375rem/1.6 var(--font-body);
  --t-subhead:       600 0.8125rem/1.45 var(--font-body);
  --t-section-label: 600 0.75rem/1.35 var(--font-body);
  --t-caption:       500 0.75rem/1.4 var(--font-body);
}

:root { color-scheme: dark; }

:root.light {
  color-scheme: light;

  --canvas: #FFFFFF;  --surface-2: #F7F9FC;
  --ink: #0A1F3D;
  --primary-700: #14479F;  --primary-600: #1D5FD6;  --primary-500: #2F80ED;
  --primary-300: #6E9BEA;  --primary-100: #C9DBF9;  --primary-50:  #E7EEFC;
  --border-strong: #D7DEEA;

  --field-bg: var(--canvas);
  --field-border: var(--border-strong);

  --tooltip-bg:  #FFFFFF;
  --tooltip-ink: #0A1F3D;
  --chart-1: #C9DBF9;  --chart-2: #6E9BEA;  --chart-3: #3D77DE;  --chart-4: #14479F;
  --spark: #FFC81A;  --spark-bg: #FFF3C4;  --spark-text: #8A6400;
  --icon-ink: color-mix(in srgb, var(--ink) 78%, var(--text-2));
  --icon-idle: var(--icon-ink);
  --bg: var(--canvas);
  --bg-2: var(--surface-2);
  --bg-3: var(--surface-2);
  --card: #FFFFFF;
  --card-2: var(--surface-2);

  --workspace-canvas: #F7F8FA;
  --workspace-pane: var(--canvas);
  --border: #E6EAF2;
  --divider: #B4BFD3;

  --surface-sunken: var(--surface-2);
  --border-2: var(--border-strong);
  --text: var(--ink);
  --text-2: #64748B;
  --text-3: #94A3B8;
  --shadow-1: none;
  --shadow-2: 0 8px 24px rgba(10, 31, 61, .10);

  --btn-edge: inset 0 1px 0 rgba(255, 255, 255, .70), inset 0 -1px 0 rgba(10, 31, 61, .08);
  --btn-edge-on: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(10, 31, 61, .22);
  --btn-edge-pressed: inset 0 1px 3px rgba(10, 31, 61, .18);
  --btn-sheen: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .04));
  --accent: var(--primary-600);
  --accent-fg: #FFFFFF;
  --accent-2: var(--primary-700);
  --accent-grad: var(--primary-500);
  --accent-soft: var(--primary-50);
  --accent-soft-border: var(--primary-100);
  --brand: var(--accent);
  --brand-text: var(--brand);
  --brand-hover: var(--primary-700);
  --brand-pressed: #103A85;
  --brand-soft: var(--accent-soft);
  --success: #16A34A;  --success-bg: #E8F7EE;
  --warn: #D97706;     --warn-bg: #FEF3E2;
  --danger: #DC2626;   --danger-bg: #FDEAEA;
  --info: var(--primary-500);

  --tag-slate-bg:   #F1F5F9; --tag-slate-fg:   #475569;
  --tag-blue-bg:    #E0F2FE; --tag-blue-fg:    #0284C7;
  --tag-green-bg:   #ECFDF5; --tag-green-fg:   #15803D;
  --tag-amber-bg:   #FFEDD5; --tag-amber-fg:   #C2410C;
  --tag-red-bg:     #FFF1F2; --tag-red-fg:     #E11D48;
  --tag-violet-bg:  #F5F3FF; --tag-violet-fg:  #5B21B6;
  --tag-teal-bg:    #F0FDFA; --tag-teal-fg:    #0D9488;
  --tag-pink-bg:    #FDF2F8; --tag-pink-fg:    #DB2777;
  --tag-yellow-bg:  #FEF9C3; --tag-yellow-fg:  #A16207;
  --tag-fuchsia-bg: #FAE8FF; --tag-fuchsia-fg: #86198F;
  --ring: var(--primary-500);

  --ring-glow: rgba(47, 128, 237, 0.14);

  --shadow-float: var(--shadow-2);
}
@supports (height: 100dvh) {

  :root { --viewport-h: 100dvh; }
}

* { box-sizing: border-box; }

html { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); height: var(--viewport-h); overflow: hidden; overscroll-behavior-y: contain; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media (min-width: 721px) {
 html { font-size: 15px; }
}

h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: -0.01em; }

body > * { position: relative; z-index: 1; }

a { color: var(--accent-2); text-decoration: none; }

button, input, select, textarea {
  color: inherit;
  font-family: inherit;
}

.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;
}

:root {

  --tk-gold:        var(--accent);
  --tk-gold-soft:   var(--accent-soft);
}

:root {
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px; --space-6: 24px;  --space-7: 32px;  --space-8: 44px;
}
@media (max-width: 720px) {

  :root:not(.light) body { background: var(--bg); }

  :root.light body { background: var(--bg); }
}

:root { --ws-ctl-h: 34px; --crm-ct-ctl-h: var(--ws-ctl-h); }

:root { --ws-row-h: 48px; --crm-ct-row-h: var(--ws-row-h); }