@font-face {
  font-family: "Jakarta";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  /* format("woff2"), not format("woff2-variations"). The latter was an early proposal
     that Chrome never shipped and now rejects, which silently drops the whole @font-face
     rule -- the page renders in the fallback and nothing anywhere reports an error. */
  src: url("/assets/fonts/plus-jakarta-sans-latin-wght-normal-153fc85b70.woff2") format("woff2");
}
@font-face {
  font-family: "InterVar";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  /* format("woff2"), not format("woff2-variations"). The latter was an early proposal
     that Chrome never shipped and now rejects, which silently drops the whole @font-face
     rule -- the page renders in the fallback and nothing anywhere reports an error. */
  src: url("/assets/fonts/inter-latin-wght-normal-3100e775e8.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrainsMono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  /* format("woff2"), not format("woff2-variations"). The latter was an early proposal
     that Chrome never shipped and now rejects, which silently drops the whole @font-face
     rule -- the page renders in the fallback and nothing anywhere reports an error. */
  src: url("/assets/fonts/jetbrains-mono-latin-wght-normal-18be452724.woff2") format("woff2");
}
@font-face {
  font-family: "Vazirmatn";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  /* format("woff2"), not format("woff2-variations"). The latter was an early proposal
     that Chrome never shipped and now rejects, which silently drops the whole @font-face
     rule -- the page renders in the fallback and nothing anywhere reports an error. */
  src: url("/assets/fonts/vazirmatn-arabic-wght-normal-84a382e46c.woff2") format("woff2");
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC;
}

/* ---------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */
:root {
  /* Self-hosted variable faces; see ui/fonts.ts for why they are not on a CDN. The
     fallbacks are the closest metric match available everywhere, so the swap when the
     woff2 lands shifts as little as possible. */
  --font-sans: "InterVar", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-display: "Jakarta", "InterVar", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrainsMono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type. The display sizes are clamped so a hero reads as a hero on a laptop and
     does not become a billboard on a 4K monitor. */
  --step--1: 0.8125rem;
  --step-0:  0.9375rem;
  --step-1:  1.0625rem;
  --step-2:  1.375rem;
  --step-3:  clamp(1.5rem, 1.2rem + 1.1vw, 1.95rem);
  --step-4:  clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  --step-5:  clamp(2.4rem, 1.3rem + 4.4vw, 4.3rem);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;
  --sp-9: 112px;

  --r-1: 7px; --r-2: 11px; --r-3: 16px; --r-4: 24px; --r-full: 999px;

  --sidebar: 256px;
  --rail: 68px;
  --topbar: 60px;

  --t-fast: 130ms cubic-bezier(0.2, 0, 0.2, 1);
  --t-med: 260ms cubic-bezier(0.2, 0, 0.2, 1);

  color-scheme: light;

  /* Light. A cool, slightly blue paper rather than pure grey, a vivid but not neon blue
     as the primary, and a sky tint as its gradient partner. */
  --bg:            #f5f7fc;
  --bg-2:          #e9eefb;
  --surface:       #ffffff;
  --surface-2:     #f2f5fc;
  --surface-3:     #e7edf8;
  --border:        #dde4f1;
  --border-strong: #c2cde1;
  --ink:           #0a1220;
  --ink-dim:       #4c5a72;
  --ink-faint:     #7c8aa2;

  --accent:        #2355f0;
  --accent-hover:  #1a45cf;
  --accent-ink:    #ffffff;
  --accent-soft:   #e9eeff;
  --accent-line:   #c3d1ff;
  --accent-2:      #3fa6ff;
  --accent-grad:   linear-gradient(135deg, #2355f0, #3fa6ff);

  --ok:        #0e7a53;
  --ok-soft:   #e2f5ed;
  --ok-line:   #b0e0cd;
  --warn:      #96620f;
  --warn-soft: #fcf2e1;
  --warn-line: #eed9ab;
  --bad:       #c42a3d;
  --bad-soft:  #fdebee;
  --bad-line:  #f3c3cb;
  --info:      #1d5fb8;
  --info-soft: #e8f0fd;
  --info-line: #bfd5f5;

  --shadow-sm: 0 1px 2px rgba(10, 18, 32, 0.05), 0 1px 1px rgba(10, 18, 32, 0.03);
  --shadow-md: 0 2px 4px rgba(10, 18, 32, 0.04), 0 10px 28px -10px rgba(10, 18, 32, 0.16);
  --shadow-lg: 0 4px 8px rgba(10, 18, 32, 0.05), 0 28px 60px -18px rgba(13, 32, 76, 0.26);
  --shadow-accent: 0 6px 18px -6px rgba(35, 85, 240, 0.45);
  --ring: 0 0 0 3px var(--accent-line);
  --glow: none;
}

/* The dark palette, declared once and applied by two selectors.
   Once for the viewer who has chosen nothing and whose system prefers dark, and once for
   the viewer who asked for dark explicitly -- which has to win even on a light system.
   The :not([data-theme="light"]) guard is what lets an explicit light choice override a
   dark system.
   Not a filter or an inversion: the greys are picked separately, because an inverted
   shadow is a glow and an inverted border vanishes. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #060a14;
    --bg-2:          #0a1020;
    --surface:       #0d1322;
    --surface-2:     #121a2d;
    --surface-3:     #18223a;
    --border:        #1d2742;
    --border-strong: #2d3c5e;
    --ink:           #e8edf9;
    --ink-dim:       #94a3bf;
    --ink-faint:     #64728d;

    --accent:        #6a93ff;
    --accent-hover:  #89a9ff;
    --accent-ink:    #050a16;
    --accent-soft:   #111d3e;
    --accent-line:   #27396e;
    --accent-2:      #58c6ff;
    --accent-grad:   linear-gradient(135deg, #5f8cff, #58c6ff);

    --ok:        #3ed49a;
    --ok-soft:   #072419;
    --ok-line:   #15503a;
    --warn:      #e5b457;
    --warn-soft: #241c0c;
    --warn-line: #4d3a13;
    --bad:       #fb7f90;
    --bad-soft:  #2a1219;
    --bad-line:  #56222f;
    --info:      #6bb2f5;
    --info-soft: #0a1b2e;
    --info-line: #1c3a5e;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.65);
    --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.55), 0 18px 44px -14px rgba(0, 0, 0, 0.75);
    --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.55), 0 36px 80px -22px rgba(0, 0, 0, 0.85);
    --shadow-accent: 0 8px 24px -8px rgba(106, 147, 255, 0.5);
    /* Dark surfaces get a faint rim light instead of a shadow: an inverted shadow is a
       glow, and a glow where a shadow should be is what makes dark themes look cheap. */
    --glow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #060a14;
  --bg-2:          #0a1020;
  --surface:       #0d1322;
  --surface-2:     #121a2d;
  --surface-3:     #18223a;
  --border:        #1d2742;
  --border-strong: #2d3c5e;
  --ink:           #e8edf9;
  --ink-dim:       #94a3bf;
  --ink-faint:     #64728d;

  --accent:        #6a93ff;
  --accent-hover:  #89a9ff;
  --accent-ink:    #050a16;
  --accent-soft:   #111d3e;
  --accent-line:   #27396e;
  --accent-2:      #58c6ff;
  --accent-grad:   linear-gradient(135deg, #5f8cff, #58c6ff);

  --ok:        #3ed49a;
  --ok-soft:   #072419;
  --ok-line:   #15503a;
  --warn:      #e5b457;
  --warn-soft: #241c0c;
  --warn-line: #4d3a13;
  --bad:       #fb7f90;
  --bad-soft:  #2a1219;
  --bad-line:  #56222f;
  --info:      #6bb2f5;
  --info-soft: #0a1b2e;
  --info-line: #1c3a5e;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.65);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.55), 0 18px 44px -14px rgba(0, 0, 0, 0.75);
  --shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.55), 0 36px 80px -22px rgba(0, 0, 0, 0.85);
  --shadow-accent: 0 8px 24px -8px rgba(106, 147, 255, 0.5);
  /* Dark surfaces get a faint rim light instead of a shadow: an inverted shadow is a
     glow, and a glow where a shadow should be is what makes dark themes look cheap. */
  --glow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---------------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--ink);
  /* A ground with some depth to it: two very soft radial washes over the base colour.
     Fixed, so it does not slide around while a long table scrolls. */
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 520px at 88% -8%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(700px 460px at 4% 2%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 68%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  margin: 0; font-family: var(--font-display); font-weight: 650;
  letter-spacing: -0.022em; line-height: 1.16; text-wrap: balance;
}
/* Inter ships an optical-size axis; letting the browser drive it is the whole reason to
   use a variable font for body copy. */
body { font-optical-sizing: auto; font-synthesis: none; }
.num, td.num, th.num, .stat-value, .fact-value, input[type="number"] {
  font-variant-numeric: tabular-nums;
}
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
svg { display: block; flex: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-1); }

/* ---------------------------------------------------------------------------
   Utility: the small, closed set this app needs
   --------------------------------------------------------------------------- */
.mono { font-family: var(--font-mono); font-size: 0.9em; font-variant-ligatures: none; letter-spacing: -0.01em; }
.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.break { word-break: break-all; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack      { display: flex; flex-direction: column; gap: var(--sp-3); }
.stack-lg   { display: flex; flex-direction: column; gap: var(--sp-5); }
.row        { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row-end    { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.spread     { display: flex; gap: var(--sp-4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow       { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------------------
   Shell
   --------------------------------------------------------------------------- */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  min-height: 100vh;
}
.shell.rail { grid-template-columns: var(--rail) minmax(0, 1fr); }

.sidebar {
  grid-row: 1 / -1;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.brand {
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--topbar); padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: var(--ink); font-weight: 650; letter-spacing: -0.02em;
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background-image: var(--accent-grad);
  color: var(--accent-ink);
  display: grid; place-items: center; flex: none;
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 55%, transparent);
}
.rail .brand-name, .rail .nav-label, .rail .nav-group-title, .rail .sidebar-foot-text { display: none; }
.rail .brand { justify-content: center; padding: 0; }
.rail .nav-item { justify-content: center; padding: 0; width: 40px; }
.rail .nav-count { display: none; }

.nav { padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-5); flex: 1 1 auto; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group-title {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); padding: 0 var(--sp-3) var(--sp-2);
}
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 38px; padding: 0 var(--sp-3);
  border-radius: var(--r-1);
  color: var(--ink-dim); font-size: var(--step-0); font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}
.nav-item:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav-item[aria-current="page"] {
  background: linear-gradient(to right, var(--accent-soft), transparent 140%);
  color: var(--accent); font-weight: 560;
}
.nav-item[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); width: 3px; height: 18px;
  background: var(--accent); border-radius: 0 3px 3px 0;
}
.nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-count {
  font-size: var(--step--1); font-variant-numeric: tabular-nums;
  background: var(--warn-soft); color: var(--warn);
  border: 1px solid var(--warn-line);
  border-radius: var(--r-full); padding: 0 7px; line-height: 18px;
}
.sidebar-foot {
  padding: var(--sp-3); border-top: 1px solid var(--border); flex: none;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.sidebar-foot-text { font-size: var(--step--1); color: var(--ink-faint); }
/* The documentation lives on its own host, so this leaves the console. Underlined on
   hover rather than always, because the sidebar foot is chrome and should stay quiet. */
.sidebar-foot-link { display: block; text-decoration: none; margin-bottom: 4px; }
.sidebar-foot-link:hover { color: var(--ink); text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Topbar
   --------------------------------------------------------------------------- */
.topbar {
  height: var(--topbar);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5);
  position: sticky; top: 0; z-index: 10;
}
.topbar-title { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; }
.topbar-org {
  font-size: var(--step--1); color: var(--ink-dim);
  padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border);
  border-radius: var(--r-full); background: var(--surface);
}

/* The theme control: a three-state segmented group of submit buttons. No script. */
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-1); padding: 2px; gap: 2px; }
.seg button {
  display: grid; place-items: center; width: 30px; height: 26px;
  background: none; border: none; border-radius: 5px; cursor: pointer;
  color: var(--ink-faint); padding: 0;
  transition: background var(--t-fast), color var(--t-fast);
}
.seg button:hover { color: var(--ink); background: var(--surface-3); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

.main { display: flex; flex-direction: column; min-width: 0; }
.content { padding: var(--sp-5); width: 100%; max-width: 1180px; margin: 0 auto; }
.content.wide { max-width: 1480px; }
.page-head { margin-bottom: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.page-head h1 { font-size: var(--step-3); }
.page-lede { color: var(--ink-dim); max-width: 76ch; }

/* ---------------------------------------------------------------------------
   Card
   --------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-sm), var(--glow);
  overflow: hidden;
  transition: box-shadow var(--t-med), transform var(--t-med), border-color var(--t-med);
}
.card:hover { box-shadow: var(--shadow-md), var(--glow); }
/* A card with a tone gets a hairline of that colour down its leading edge, which reads
   faster than a tinted border on its own. */
.card.tone-ok, .card.tone-warn, .card.tone-bad { border-left-width: 3px; }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
  background: linear-gradient(to bottom, var(--surface-2), var(--surface));
}
.card-head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card-title { font-size: var(--step-0); font-weight: 620; letter-spacing: -0.01em; }
.card-sub { font-size: var(--step--1); color: var(--ink-dim); }
.card-body { padding: var(--sp-5); }
.card-body.flush { padding: 0; }
.card-foot {
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--border);
  background: var(--surface-2); font-size: var(--step--1); color: var(--ink-dim);
}
.card.tone-ok   { border-color: var(--ok-line); }
.card.tone-warn { border-color: var(--warn-line); }
.card.tone-bad  { border-color: var(--bad-line); }

.grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: start; }
.grid-2 {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.grid-2 > .card { display: flex; flex-direction: column; }
.grid-2 > .card > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 980px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------------------
   Stats
   --------------------------------------------------------------------------- */
.stats { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-1);
  box-shadow: var(--shadow-sm), var(--glow);
  position: relative; overflow: hidden;
}
.stat::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 2px;
  background: var(--accent); opacity: 0.5;
}
.stat.tone-ok::after { background: var(--ok); }
.stat.tone-warn::after { background: var(--warn); }
.stat.tone-bad::after { background: var(--bad); }
.stat-label { font-size: var(--step--1); color: var(--ink-dim); font-weight: 500; }
.stat-value {
  font-family: var(--font-display); font-size: var(--step-3); font-weight: 640;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat-note { font-size: var(--step--1); color: var(--ink-faint); }
.stat.tone-warn .stat-value { color: var(--warn); }
.stat.tone-bad .stat-value { color: var(--bad); }
.stat.tone-ok .stat-value { color: var(--ok); }

/* ---------------------------------------------------------------------------
   Badge
   --------------------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--step--1); font-weight: 500; line-height: 1.4;
  padding: 2px 9px; border-radius: var(--r-full);
  border: 1px solid transparent; white-space: nowrap;
}
.badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex: none; }
.badge.plain::before { display: none; }
.badge-ok   { color: var(--ok);   background: var(--ok-soft);   border-color: var(--ok-line); }
.badge-warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.badge-bad  { color: var(--bad);  background: var(--bad-soft);  border-color: var(--bad-line); }
.badge-info { color: var(--info); background: var(--info-soft); border-color: var(--info-line); }
.badge-mute { color: var(--ink-dim); background: var(--surface-2); border-color: var(--border); }

/* ---------------------------------------------------------------------------
   Banner
   --------------------------------------------------------------------------- */
.banner {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); border-radius: var(--r-2);
  border: 1px solid; font-size: var(--step-0);
}
.banner-text { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.banner-title { font-weight: 600; }
.banner-body { color: var(--ink-dim); }
.banner-ok   { background: var(--ok-soft);   border-color: var(--ok-line);   color: var(--ok); }
.banner-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.banner-bad  { background: var(--bad-soft);  border-color: var(--bad-line);  color: var(--bad); }
.banner-info { background: var(--info-soft); border-color: var(--info-line); color: var(--info); }
.banner .banner-title { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Table
   --------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--step--1); }
thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--surface-2);
  text-align: left; font-weight: 600; color: var(--ink-dim);
  padding: var(--sp-3) var(--sp-4); white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-main { font-weight: 500; }
.cell-sub { color: var(--ink-faint); font-size: 0.9em; }

.empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--ink-dim);
}
.empty-icon {
  width: 40px; height: 40px; border-radius: var(--r-2);
  background: var(--surface-2); color: var(--ink-faint);
  display: grid; place-items: center;
}

/* ---------------------------------------------------------------------------
   Controls
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 40px; padding: 0 var(--sp-5);
  border-radius: var(--r-2); border: 1px solid transparent;
  background-image: var(--accent-grad);
  background-color: var(--accent);
  color: var(--accent-ink);
  font: inherit; font-size: var(--step-0); font-weight: 580; letter-spacing: -0.005em;
  cursor: pointer; white-space: nowrap; position: relative; isolation: isolate;
  box-shadow: var(--shadow-accent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast),
              background-color var(--t-fast), border-color var(--t-fast);
}
.btn:hover {
  text-decoration: none; filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: var(--shadow-accent), 0 10px 26px -8px rgba(35, 85, 240, 0.5),
              inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn:active { transform: translateY(0); filter: brightness(0.97); }
.btn:disabled {
  opacity: 0.45; cursor: not-allowed; transform: none; filter: none;
  box-shadow: none; background-image: none; background-color: var(--border-strong);
  color: var(--ink-faint);
}

/* Secondary: a real surface with a border, not a washed-out primary. */
.btn-secondary {
  background-image: none; background-color: var(--surface);
  color: var(--ink); border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background-color: var(--surface-2); border-color: var(--ink-faint);
  filter: none; box-shadow: var(--shadow-sm);
}

.btn-ghost {
  background-image: none; background-color: transparent;
  border-color: transparent; color: var(--ink-dim); box-shadow: none;
}
.btn-ghost:hover {
  background-color: var(--surface-2); color: var(--ink);
  filter: none; box-shadow: none; transform: none;
}

.btn-danger {
  background-image: none; background-color: transparent;
  color: var(--bad); border-color: var(--bad-line); box-shadow: none;
}
.btn-danger:hover {
  background-color: var(--bad-soft); border-color: var(--bad);
  filter: none; box-shadow: none;
}

.btn-sm { height: 32px; padding: 0 var(--sp-3); font-size: var(--step--1); border-radius: var(--r-1); }
.btn-xl { height: 52px; padding: 0 var(--sp-6); font-size: var(--step-1); border-radius: var(--r-2); }

.btn-link {
  background: none; border: none; padding: 0; height: auto;
  color: var(--accent); font: inherit; font-size: var(--step--1); cursor: pointer;
  box-shadow: none; font-weight: 500;
}
.btn-link:hover { text-decoration: underline; background: none; transform: none; filter: none; box-shadow: none; }

.field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.field-label { font-size: var(--step--1); font-weight: 550; color: var(--ink); }
.field-hint { font-size: var(--step--1); color: var(--ink-dim); }
.field-row { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="url"], input[type="search"], select, textarea {
  width: 100%; height: 36px; padding: 0 var(--sp-3);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--r-1);
  font: inherit; font-size: var(--step-0);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
textarea { height: auto; min-height: 120px; padding: var(--sp-3); font-family: var(--font-mono); font-size: var(--step--1); }
input::placeholder { color: var(--ink-faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
input[type="file"] {
  width: 100%; padding: var(--sp-3); background: var(--surface-2);
  border: 1px dashed var(--border-strong); border-radius: var(--r-1); font: inherit; font-size: var(--step--1);
}
select { appearance: none; padding-right: var(--sp-5); }
.check { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--step-0); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 3px 0 0; accent-color: var(--accent); flex: none; }

.toolbar { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }
.toolbar .field { flex: 1 1 200px; }
.search-wrap { position: relative; }
.search-wrap input { padding-left: 34px; }
.search-icon { position: absolute; left: 10px; top: 9px; color: var(--ink-faint); pointer-events: none; }

.tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-4); }
.tab {
  padding: var(--sp-3) var(--sp-4); font-size: var(--step--1); font-weight: 550;
  color: var(--ink-dim); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------------------------------------------------------------------------
   Charts (SVG geometry, so no inline styles are needed anywhere)
   --------------------------------------------------------------------------- */
.chart { width: 100%; }
.chart text { font-family: var(--font-sans); font-size: 10px; fill: var(--ink-faint); }
.chart .axis-line { stroke: var(--border); stroke-width: 1; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.s-ok   { fill: var(--ok); }
.s-bad  { fill: var(--bad); }
.s-warn { fill: var(--warn); }
.s-info { fill: var(--info); }
.s-accent { fill: var(--accent); }
.s-track { fill: var(--surface-3); }
.chart-axis {
  display: flex; justify-content: space-between;
  font-size: 0.6875rem; color: var(--ink-faint); font-variant-numeric: tabular-nums;
  margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border);
}
.legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; font-size: var(--step--1); color: var(--ink-dim); margin-top: var(--sp-3); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 9px; height: 9px; border-radius: 2px; }
/* A fixed four-column rhythm, so every bar list in a row of cards lines up with its
   neighbours instead of each one sizing itself to its own longest label. */
.bar-list { display: flex; flex-direction: column; gap: 10px; }
.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(60px, 1fr) 3.4rem 2.6rem;
  gap: var(--sp-3); align-items: center; font-size: var(--step--1);
}
.bar-name { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { display: block; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; font-weight: 550; color: var(--ink); }
.bar-share { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-faint); }

/* The row of small breakdown cards.
   Exactly three to a row, every card the same height, and the rows inside each card
   spread to fill it. Six related numbers in boxes of different heights with dead space
   under the short ones read as six unrelated ones. */
.insights {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}
.insights > .card { display: flex; flex-direction: column; }
.insights > .card > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
/* space-between, not centred: the first and last rows then line up across every card in
   the row, and the leftover height is distributed between them instead of pooling at the
   bottom. */
.insights .bar-list { flex: 1 1 auto; justify-content: space-between; gap: var(--sp-3); }

@media (max-width: 1180px) { .insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .insights { grid-template-columns: minmax(0, 1fr); }
  .bar-row { grid-template-columns: minmax(0, 8rem) minmax(40px, 1fr) 3rem 2.4rem; }
}

/* ---------------------------------------------------------------------------
   Pager
   --------------------------------------------------------------------------- */
.pager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  font-size: var(--step--1); color: var(--ink-dim);
}
.pager-count strong { color: var(--ink); font-weight: 600; }
.pager-controls { display: flex; align-items: center; gap: var(--sp-3); }
.pager-page { color: var(--ink-faint); }
.btn.is-disabled {
  opacity: 0.4; cursor: default; pointer-events: none;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
}

/* ---------------------------------------------------------------------------
   Date range picker
   --------------------------------------------------------------------------- */
.range { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-end; }
.range-presets {
  display: inline-flex; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--r-1); padding: 2px; gap: 2px;
}
.range-preset {
  padding: 4px 11px; border-radius: 5px; font-size: var(--step--1); font-weight: 520;
  color: var(--ink-dim); white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.range-preset:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.range-preset[aria-current="true"] {
  background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm);
}
.range-custom {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-1); padding: 3px 3px 3px var(--sp-3);
}
.range-custom input[type="date"] {
  width: auto; height: 28px; padding: 0 var(--sp-2);
  border: none; background: transparent; font-size: var(--step--1);
  color: var(--ink); font-family: var(--font-sans);
}
.range-custom input[type="date"]:focus { outline: none; box-shadow: none; }
.range-icon { color: var(--ink-faint); display: grid; place-items: center; }
.range-dash { color: var(--ink-faint); }
@media (max-width: 760px) {
  .range { justify-content: flex-start; }
  .range-custom { width: 100%; }
}

/* ---------------------------------------------------------------------------
   Misc blocks
   --------------------------------------------------------------------------- */
.secret {
  background: var(--warn-soft); border: 1px dashed var(--warn-line); color: var(--ink);
  border-radius: var(--r-2); padding: var(--sp-4);
  font-family: var(--font-mono); font-size: var(--step--1); word-break: break-all;
}
pre {
  margin: 0; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-2); padding: var(--sp-4); overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink);
}
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.steps li { counter-increment: step; padding-left: 38px; position: relative; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: var(--step--1); font-weight: 650;
}
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.checklist .done { color: var(--ok); }
.checklist .todo { color: var(--ink-faint); }
.prose { display: flex; flex-direction: column; gap: var(--sp-3); color: var(--ink-dim); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--sp-2); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); font-size: var(--step--1); }
.kv dt { color: var(--ink-dim); }
.kv dd { margin: 0; font-family: var(--font-mono); word-break: break-all; }
.logo-frame {
  display: inline-grid; place-items: center; padding: var(--sp-3);
  background: #ffffff; border: 1px solid var(--border); border-radius: var(--r-2);
}
.logo-frame img { max-height: 64px; max-width: 220px; display: block; }
.plan-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.plan { display: flex; flex-direction: column; gap: var(--sp-3); }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.plan-name { font-size: var(--step-1); font-weight: 650; }
.plan-spacer { flex: 1 1 auto; }

/* ---------------------------------------------------------------------------
   The marketing one-pager
   --------------------------------------------------------------------------- */
.site { display: flex; flex-direction: column; min-height: 100vh; }

/* Sticky translucent nav. The backdrop filter is behind a fallback colour, because
   without one an unsupporting browser gets a transparent bar over scrolling text. */
.site-nav {
  position: sticky; top: 0; z-index: 20;
  height: 64px; display: flex; align-items: center; gap: var(--sp-5);
  padding: 0 var(--sp-5);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-nav-inner {
  width: 100%; max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: var(--sp-5);
}
.site-nav-links { display: flex; gap: var(--sp-5); font-size: var(--step--1); }
.site-nav-links a { color: var(--ink-dim); font-weight: 520; }
.site-nav-links a:hover { color: var(--ink); text-decoration: none; }
@media (max-width: 860px) { .site-nav-links { display: none; } }

.site-main { flex: 1 1 auto; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-5); }
.wrap-narrow { width: 100%; max-width: 820px; margin: 0 auto; padding: 0 var(--sp-5); }

section.band { padding: var(--sp-9) 0; }
section.band + section.band { padding-top: 0; }
.band-tint {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--accent-2);
}

.section-head { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-6); max-width: 70ch; }
.section-head h2 { font-size: clamp(1.55rem, 1.15rem + 1.35vw, 2.2rem); line-height: 1.2; }
.section-head p { color: var(--ink-dim); font-size: var(--step-1); }

/* --- hero ---------------------------------------------------------------- */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--sp-8); align-items: center;
  padding: var(--sp-9) 0 var(--sp-8);
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); } }
.hero-copy { display: flex; flex-direction: column; gap: var(--sp-5); }
/* A size below --step-5. The old value topped out near 69px, which on a wide screen
   read as a billboard rather than a headline and pushed the first paragraph of the pitch
   below the fold. */
.hero-copy h1 {
  font-size: clamp(2rem, 1.25rem + 2.5vw, 3.05rem);
  letter-spacing: -0.028em; line-height: 1.12; max-width: 20ch;
}
.hero-copy h1 em {
  font-style: normal;
  background-image: var(--accent-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: var(--step-2); color: var(--ink-dim); max-width: 54ch; line-height: 1.5; }
.hero-cta { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: center; }
.btn-xl { height: 48px; padding: 0 var(--sp-5); font-size: var(--step-1); border-radius: var(--r-2); }
.hero-note { font-size: var(--step--1); color: var(--ink-faint); }
.tiers + .hero-note { margin-top: var(--sp-5); }
.site-foot .dim { font-size: var(--step--1); margin-top: var(--sp-3); max-width: 44ch; }

/* The hero visual: a mock Windows logon tile. Pure CSS, because a screenshot of a
   product that has not shipped would be a claim this page is not entitled to make. */
.logon {
  border-radius: var(--r-4);
  border: 1px solid var(--border);
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), var(--surface) 62%);
  box-shadow: var(--shadow-lg), var(--glow);
  padding: var(--sp-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  position: relative; overflow: hidden;
}
.logon::before {
  /* A faint grid, the way a lock screen has a wallpaper. */
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 4%, transparent) 0 1px, transparent 1px 28px);
  mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%);
  pointer-events: none;
}
.logon-avatar {
  width: 76px; height: 76px; border-radius: 50%;
  background-image: var(--accent-grad);
  color: var(--accent-ink);
  display: grid; place-items: center;
  font-size: var(--step-3); font-weight: 650; letter-spacing: -0.02em;
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--accent) 70%, transparent);
  z-index: 1;
}
.logon-name { font-weight: 600; font-size: var(--step-1); z-index: 1; }
.logon-sub { font-size: var(--step--1); color: var(--ink-dim); z-index: 1; }
.logon-code { display: flex; gap: var(--sp-2); z-index: 1; }
.logon-digit {
  width: 38px; height: 48px; border-radius: var(--r-1);
  border: 1px solid var(--border-strong); background: var(--surface);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--step-2); font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.logon-digit.filled { border-color: var(--accent); color: var(--accent); }
.logon-digit.caret { border-color: var(--accent); }
.logon-hint {
  z-index: 1; font-size: var(--step--1); color: var(--ink-dim);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-full);
}
.logon-foot {
  z-index: 1; margin-top: var(--sp-2); display: flex; gap: var(--sp-4);
  font-size: var(--step--1); color: var(--ink-faint);
}

/* --- marquee of facts ---------------------------------------------------- */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--sp-5); padding: var(--sp-6) 0;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.fact { display: flex; flex-direction: column; gap: 2px; }
.fact-value {
  font-family: var(--font-display); font-size: var(--step-2); font-weight: 640; letter-spacing: -0.03em;
}
.fact-label { font-size: var(--step--1); color: var(--ink-dim); }

/* --- feature grid -------------------------------------------------------- */
.features { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.feature {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: var(--shadow-sm), var(--glow);
  transition: transform var(--t-med), box-shadow var(--t-med);
}
.feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-md), var(--glow); }
.feature-icon {
  width: 38px; height: 38px; border-radius: var(--r-2);
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.feature h3 { font-size: var(--step-1); }
.feature p { color: var(--ink-dim); font-size: var(--step-0); }

/* --- the flow ------------------------------------------------------------ */
.flow { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); counter-reset: flow; }
.flow-step {
  counter-increment: flow; position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: var(--shadow-sm), var(--glow);
}
.flow-step::before {
  content: counter(flow); width: 30px; height: 30px; border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink);
  display: grid; place-items: center; font-size: var(--step--1); font-weight: 700;
}
.flow-step h3 { font-size: var(--step-0); }
.flow-step p { color: var(--ink-dim); font-size: var(--step--1); }

/* --- two-column honest comparison --------------------------------------- */
.ledger { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.ledger-col {
  border-radius: var(--r-3); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  border: 1px solid var(--border); background: var(--surface);
}
.ledger-col.yes { border-color: var(--ok-line); background: color-mix(in srgb, var(--ok-soft) 55%, var(--surface)); }
.ledger-col.no { border-color: var(--bad-line); background: color-mix(in srgb, var(--bad-soft) 45%, var(--surface)); }
.ledger-col h3 { font-size: var(--step-1); display: flex; align-items: center; gap: var(--sp-2); }
.ledger-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.ledger-list li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--step-0); color: var(--ink-dim); }
.ledger-list .glyph { flex: none; margin-top: 2px; }
.ledger-col.yes .glyph { color: var(--ok); }
.ledger-col.no .glyph { color: var(--bad); }

/* --- header actions ------------------------------------------------------ */
/* Links, not buttons. The only filled button above the fold should be the one the page
   wants pressed, and it is in the hero. */
.site-nav-actions { display: flex; align-items: center; gap: var(--sp-5); }
.site-nav-action {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--step--1); font-weight: 550; color: var(--ink-dim);
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; text-decoration: none; white-space: nowrap;
  transition: color var(--t-fast);
}
.site-nav-action:hover { color: var(--ink); text-decoration: none; }
.site-nav-action-strong { color: var(--accent); font-weight: 600; }
.site-nav-action-strong:hover { color: var(--accent); text-decoration: underline; }
/* The chevron points along the reading direction, so it turns around in Persian. */
[dir="rtl"] .site-nav-action-strong svg { transform: scaleX(-1); }
@media (max-width: 560px) { .site-nav-actions { gap: var(--sp-4); } }

/* --- the drawn schematic -------------------------------------------------- */
.schematic { margin: var(--sp-6) 0 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.schematic-svg { width: 100%; height: auto; max-height: 260px; overflow: visible; }
.schematic-box {
  fill: var(--surface); stroke: var(--border-strong); stroke-width: 1.5;
}
.schematic-icon { color: var(--accent); }
.schematic-label {
  fill: var(--ink); font-family: var(--font-sans); font-size: 14px; font-weight: 600;
}
.schematic-sub { fill: var(--ink-faint); font-family: var(--font-sans); font-size: 11px; }
.schematic-edge {
  stroke: var(--border-strong); stroke-width: 1.5; fill: none; stroke-dasharray: 5 4;
}
.schematic-arrowhead { fill: var(--border-strong); }
.schematic-edge-label {
  fill: var(--ink-dim); font-family: var(--font-sans); font-size: 11.5px;
}
.schematic-note {
  font-size: var(--step--1); color: var(--ink-faint); max-width: 70ch;
  border-inline-start: 2px solid var(--accent-2); padding-inline-start: var(--sp-3);
}
@media (max-width: 720px) { .schematic { display: none; } }

/* --- the screenshot ------------------------------------------------------- */
.shot { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.shot-img {
  width: 100%; height: auto; display: block; border-radius: var(--r-3);
  border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg);
  background: var(--surface-2);
}
/* The provenance, not a caption in the decorative sense. It stays legible. */
.shot-caption {
  font-size: var(--step--1); color: var(--ink-faint); max-width: 76ch;
  border-inline-start: 2px solid var(--border-strong); padding-inline-start: var(--sp-3);
}

/* --- quote / pull ------------------------------------------------------- */
.pull {
  border-inline-start: 3px solid var(--accent-2); padding-inline-start: var(--sp-5);
  font-family: var(--font-display); font-size: var(--step-2); line-height: 1.45;
  letter-spacing: -0.015em; max-width: 60ch;
}
.pull-attr { margin-top: var(--sp-3); font-size: var(--step--1); color: var(--ink-faint); font-family: var(--font-sans); }

/* --- pricing ------------------------------------------------------------ */
.tiers { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: start; }
.tier {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
  box-shadow: var(--shadow-sm), var(--glow);
}
.tier.featured {
  border-color: var(--accent); box-shadow: var(--shadow-md), var(--glow);
  position: relative;
}
.tier-badge {
  position: absolute; top: -11px; inset-inline-start: var(--sp-5);
  background: var(--accent); color: var(--accent-ink);
  font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 10px; border-radius: var(--r-full);
}
.tier h3 { font-size: var(--step-2); }
.tier-seats { font-size: var(--step--1); color: var(--ink-dim); }
.tier-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--step--1); color: var(--ink-dim); }
.tier-list li { display: flex; gap: var(--sp-2); align-items: flex-start; }
.tier-list .glyph { color: var(--accent); flex: none; margin-top: 1px; }
.tier-spacer { flex: 1 1 auto; min-height: var(--sp-2); }

/* --- faq ---------------------------------------------------------------- */
.faq { display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2);
  padding: var(--sp-4) var(--sp-5);
}
.faq-item h3 { font-size: var(--step-0); margin-bottom: var(--sp-2); }
.faq-item p { color: var(--ink-dim); font-size: var(--step-0); }

/* --- closing call ------------------------------------------------------- */
.cta {
  border-radius: var(--r-4); padding: var(--sp-8) var(--sp-6);
  background-image: var(--accent-grad);
  color: var(--accent-ink);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center;
  box-shadow: var(--shadow-lg);
}
.cta h2 { font-size: clamp(1.55rem, 1.15rem + 1.35vw, 2.2rem); max-width: 26ch; color: inherit; }
.cta p { max-width: 54ch; opacity: 0.88; font-size: var(--step-1); }
.cta .btn {
  background: var(--accent-ink); color: var(--accent); border-color: transparent;
}
.cta .btn:hover { background: var(--accent-ink); filter: brightness(1.08); }

/* --- site footer -------------------------------------------------------- */

/* --- Persian ------------------------------------------------------------- */
/*
   Scoped to [dir="rtl"], so it costs the English page nothing.

   Inter, Jakarta and JetBrains Mono are LATIN SUBSETS -- see fonts.ts. They have no
   Persian glyphs at all, so naming them first would make every Persian paragraph fall
   through, one word at a time, to whatever the browser picked.

   Vazirmatn is SELF-HOSTED, like the Latin faces, and that is the whole fix for how this
   page used to look. The first version of this stack named Vazirmatn, Sahel and IRANSans
   and hoped one of them was installed; almost nobody has any of them, so every visitor
   got the Tahoma fallback, which is a UI font from 1999 with no real bold. 46 KB behind a
   unicode-range is the right price -- an English reader never downloads it, because the
   range contains no character their page uses.
*/
[dir="rtl"] {
  --font-sans: "Vazirmatn", "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif;
  --font-display: "Vazirmatn", "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif;
}
/*
   Negative tracking is a Latin display trick. Arabic script is cursive -- the letters of
   a word are joined -- so pulling them together damages the joins and can collapse a word
   into an unreadable smear. Line height goes the other way: Persian has taller ascenders
   and deeper descenders than Latin at the same size, and the Latin value crowds them.
*/
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4,
[dir="rtl"] .hero-copy h1, [dir="rtl"] .fact-value, [dir="rtl"] .pull,
[dir="rtl"] .auth-pitch, [dir="rtl"] .eyebrow {
  letter-spacing: normal;
}
[dir="rtl"] body { line-height: 1.7; }
[dir="rtl"] h1, [dir="rtl"] h2 { line-height: 1.35; }
/* A measure set in 'ch' is calibrated to Latin character widths; Persian runs narrower,
   so the same number of 'ch' is a longer line than was designed. */
[dir="rtl"] .hero-copy h1 { max-width: 26ch; }
[dir="rtl"] .hero-sub { max-width: 60ch; }
[dir="rtl"] .pull { max-width: 66ch; }
/* Persian uses its own digits, and CSS can count in them. */
[dir="rtl"] .flow-step::before { content: counter(flow, persian); }
/* The uppercase transform is meaningless in a script with no letter case, and the wide
   tracking that goes with it only breaks the joins. */
[dir="rtl"] .tier-badge, [dir="rtl"] .site-foot h4, [dir="rtl"] .eyebrow {
  text-transform: none; letter-spacing: 0.01em;
}


.site-foot {
  border-top: 1px solid var(--border); background: var(--surface);
  padding: var(--sp-7) 0 var(--sp-6);
}
.site-foot-grid {
  display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(150px, 1fr));
}
.site-foot h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: var(--sp-3); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--step--1); }
.site-foot ul a { color: var(--ink-dim); }
.site-foot-note { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--border); font-size: var(--step--1); color: var(--ink-faint); display: flex; gap: var(--sp-4); flex-wrap: wrap; justify-content: space-between; }

/* ---------------------------------------------------------------------------
   Public pages
   --------------------------------------------------------------------------- */
.public { min-height: 100vh; display: flex; flex-direction: column; }
.public-bar {
  height: var(--topbar); display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5); border-bottom: 1px solid var(--border); background: var(--surface);
}
.public-main { flex: 1 1 auto; width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); }
.public-foot {
  border-top: 1px solid var(--border); padding: var(--sp-5);
  font-size: var(--step--1); color: var(--ink-faint);
  display: flex; flex-direction: column; gap: var(--sp-1); align-items: center; text-align: center;
}
.hero { padding: var(--sp-7) 0 var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.hero h1 { font-size: var(--step-4); max-width: 26ch; }
.hero p { color: var(--ink-dim); max-width: 64ch; font-size: var(--step-1); }
.auth-card { max-width: 440px; margin: var(--sp-7) auto; }

/* ---------------------------------------------------------------------------
   Sign in and sign up
   --------------------------------------------------------------------------- */
.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
@media (max-width: 940px) { .auth { grid-template-columns: 1fr; } }

/* The left panel: brand, one sentence, and three facts. It is the only decorative
   surface in the product, and it exists so the sign-in page does not look like a form
   floating on nothing. */
.auth-aside {
  position: relative; overflow: hidden;
  padding: var(--sp-7) var(--sp-7) var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-6);
  color: #fff;
  background-color: #10204a;
  background-image:
    radial-gradient(120% 90% at 8% 4%, rgba(63, 166, 255, 0.55), transparent 58%),
    radial-gradient(90% 80% at 96% 96%, rgba(35, 85, 240, 0.75), transparent 62%),
    linear-gradient(160deg, #11225080, #060c1e);
}
.auth-aside::after {
  /* A faint grid, the way a lock screen has a wallpaper. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px);
  mask-image: radial-gradient(80% 70% at 30% 30%, #000, transparent 78%);
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside .brand { color: #fff; }
.auth-aside .brand-mark { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: none; }
.auth-pitch { font-family: var(--font-display); font-size: var(--step-4); letter-spacing: -0.028em; line-height: 1.14; max-width: 18ch; }
.auth-sub { color: rgba(255, 255, 255, 0.72); max-width: 44ch; font-size: var(--step-1); }
.auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); margin-top: auto; }
.auth-points li { display: flex; gap: var(--sp-3); align-items: flex-start; color: rgba(255, 255, 255, 0.82); font-size: var(--step-0); }
.auth-points svg { color: var(--accent-2); margin-top: 2px; }
.auth-foot { color: rgba(255, 255, 255, 0.45); font-size: var(--step--1); }
@media (max-width: 940px) {
  .auth-aside { padding: var(--sp-5); gap: var(--sp-4); }
  .auth-pitch { font-size: var(--step-3); }
  .auth-points { display: none; }
}

/* The right panel: the form, vertically centred, with room to breathe. */
.auth-main {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: var(--sp-7) var(--sp-5);
  background: var(--bg);
}
.auth-form { width: 100%; max-width: 408px; display: flex; flex-direction: column; gap: var(--sp-5); }
.auth-head { display: flex; flex-direction: column; gap: var(--sp-2); }
.auth-head h1 { font-size: var(--step-3); }
.auth-head p { color: var(--ink-dim); }
.auth-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-3); padding: var(--sp-6);
  box-shadow: var(--shadow-md), var(--glow);
}
.auth-alt { font-size: var(--step-0); color: var(--ink-dim); text-align: center; }
.auth-legal { font-size: var(--step--1); color: var(--ink-faint); text-align: center; }
.btn-block { width: 100%; }
.auth-mobile-brand { display: none; }
@media (max-width: 940px) { .auth-mobile-brand { display: flex; } }

@media (max-width: 900px) {
  .shell, .shell.rail { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .nav { flex-direction: row; overflow-x: auto; gap: var(--sp-4); padding: var(--sp-3); }
  .nav-group { flex-direction: row; gap: var(--sp-1); }
  .nav-group-title, .sidebar-foot-text { display: none; }
  .nav-item { height: 34px; }
  .content { padding: var(--sp-4); }
  .hero h1 { font-size: var(--step-3); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
@media print {
  .sidebar, .topbar { display: none; }
  .shell { grid-template-columns: 1fr; }
}