/* ==========================================================================
   vquity.com design system — v3 "Meridian" (extends v2 "Aurora")
   Dark premium marketing surface. Brand: blue major (the Vquity mark) —
   gradient #2C78F6 → #12C6AC, accents #F819D3 / #FFAA16.
   Fonts: Poppins (display) + Inter (body) + Tajawal (Arabic)
   v3 adds: real product screenshots in glass frames with 3D hero tilt,
   an animated SVG chart engine (.vz), bento grids, marquee rails,
   spotlight tabs, lightbox, full RTL + Arabic localization.
   All motion gated behind prefers-reduced-motion.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/assets/fonts/poppins-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("/assets/fonts/noto-kufi-arabic-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}

:root {
  --bg: #040b16;
  --bg-raise: #071120;
  --panel: rgba(255, 255, 255, 0.032);
  --panel-solid: #0b1626;
  --line: rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.055);
  --ink: #f5f3f9;
  --muted: #a8a3b8;
  --faint: #706b82;
  --brand-a: #197aee;
  --brand-b: #00a7f5;
  --brand-grad: linear-gradient(100deg, #197aee, #00a7f5);
  --brand-grad-soft: linear-gradient(100deg, rgba(25, 122, 238, 0.16), rgba(0, 167, 245, 0.13));
  --brand-tint: rgba(25, 122, 238, 0.11);
  --accent: #5fc6ff;
  --good: #3ddc97;
  --warn: #ffc555;
  --bad: #ff6b6b;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Poppins", "Inter", system-ui, sans-serif;
  --radius: 16px;
  --radius-lg: 24px;
  --container: 1200px;
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 24px 80px rgba(0, 0, 0, 0.5);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; interpolate-size: allow-keywords; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--ink); text-decoration: none; }
p a, li a, td a { color: #63e6a0; text-decoration: underline; text-decoration-color: rgba(99, 230, 160, 0.35); text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
p a:hover, li a:hover, td a:hover { text-decoration-color: #63e6a0; }
.nav-menu a, .dropdown a, .footer-col a, .footer-bottom a, .search-results a, .glossary-az a, .lesson-nav a, .toc a { text-decoration: none; }
::selection { background: rgba(25, 122, 238, 0.4); }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.16; letter-spacing: -0.022em; margin: 0 0 0.5em; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 5.4vw, 3.9rem); font-weight: 700; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.45rem); }
h3 { font-size: 1.26rem; }
h4 { font-size: 1.05rem; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 840px; }

/* Cross-document view transitions (progressive; Chromium 126+) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 0.18s ease both; }
  ::view-transition-new(root) { animation: vt-in 0.24s ease both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

.grad-text {
  background: linear-gradient(100deg, #197aee 10%, #00a7f5 45%, #8fd4ff 60%, #00a7f5 75%, #197aee 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-shimmer 7s ease-in-out infinite;
}
@keyframes grad-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* --- ambient mesh ------------------------------------------------------- */
.mesh { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.mesh::before {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(42% 40% at 18% 8%, rgba(25, 122, 238, 0.13), transparent 65%),
    radial-gradient(46% 44% at 85% 12%, rgba(0, 167, 245, 0.11), transparent 65%),
    radial-gradient(50% 55% at 50% 105%, rgba(120, 30, 200, 0.12), transparent 70%);
}
.mesh::after {
  content: ""; position: absolute; inset: 0; opacity: 0.35;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.4px);
  background-size: 36px 36px;
  mask-image: radial-gradient(60% 45% at 50% 0%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(60% 45% at 50% 0%, #000 0%, transparent 100%);
}
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; animation: drift 26s ease-in-out infinite alternate; }
.orb-a { width: 480px; height: 480px; left: -140px; top: -120px; background: radial-gradient(circle, rgba(25, 122, 238, 0.32), transparent 62%); }
.orb-b { width: 560px; height: 560px; right: -180px; top: 60px; background: radial-gradient(circle, rgba(0, 167, 245, 0.26), transparent 62%); animation-delay: -9s; }
.orb-c { width: 640px; height: 640px; left: 30%; bottom: -300px; background: radial-gradient(circle, rgba(6, 112, 60, 0.30), transparent 62%); animation-delay: -17s; }
@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(60px, 40px, 0) scale(1.12); }
}

/* clip-hide (not offscreen-left): left:-9999px creates horizontal scroll in RTL */
.skip-link { position: absolute; inset-inline-start: 0; top: 0; background: var(--panel-solid); padding: 10px 16px; z-index: 300; border-radius: 0 0 10px 10px; clip-path: inset(100%); }
.skip-link:focus { clip-path: none; }

/* --- floating glass header ------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 100; padding: 12px 0; pointer-events: none; }
.nav-wrap { max-width: calc(var(--container) + 8px); margin: 0 auto; padding: 0 20px; pointer-events: auto; }
.nav {
  display: flex; align-items: center; gap: 14px; height: 60px;
  padding: 0 10px 0 20px;
  background: rgba(12, 9, 19, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 18px;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 32px rgba(0, 0, 0, 0.25);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.site-header.scrolled .nav {
  background: rgba(12, 9, 19, 0.82);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 16px 48px rgba(0, 0, 0, 0.45);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; letter-spacing: -0.01em; }
.brand img { transition: transform 0.5s var(--ease-spring); }
.brand:hover img { transform: rotate(-8deg) scale(1.08); }

.nav-menu { display: flex; align-items: center; justify-content: center; gap: 2px; list-style: none; margin: 0 0 0 8px; padding: 0; flex: 1; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; background: none;
  color: var(--muted); font: inherit; font-size: 0.93rem; font-weight: 500; border-radius: 10px; cursor: pointer;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}
.nav-link:hover, .has-dropdown.is-active > .nav-link, a.nav-link.is-active { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.nav-link svg { transition: transform 0.25s var(--ease-out); opacity: 0.6; }
.has-dropdown:hover .nav-link svg, .has-dropdown:focus-within .nav-link svg { transform: rotate(180deg); }

.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 258px;
  background: #14101f; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 8px; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(0.97); transform-origin: top left;
  transition: opacity 0.22s var(--ease-out), transform 0.22s var(--ease-out), visibility 0.22s;
}
.has-dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown, .has-dropdown.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.dropdown a { display: block; padding: 8px 12px; border-radius: 9px; font-size: 0.92rem; color: var(--muted); transition: color 0.15s, background 0.15s, transform 0.2s var(--ease-out); }
.dropdown a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); transform: translateX(3px); }
.dropdown a b { display: block; color: var(--ink); font-weight: 600; font-size: 0.93rem; }
.dropdown a span { display: block; color: var(--faint); font-size: 0.8rem; line-height: 1.45; margin-top: 1px; }
.dropdown a:hover span { color: var(--muted); }
.dropdown-mega { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 620px; padding: 14px 16px; }
.dropdown-mega a { padding: 9px 12px; }
.dropdown-mega li:last-child { grid-column: 1 / -1; }
.dropdown-mega .dropdown-all { text-align: center; border-top: 1px solid var(--line-soft); margin-top: 8px; padding: 14px 12px 8px; color: var(--accent); font-weight: 600; }
.dropdown-mega .dropdown-all:hover { transform: none; background: none; color: #ff7ba0; }

/* grouped dropdown: titled columns + footer link (Solutions) */
.dropdown-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; width: 510px; padding: 14px 16px 8px; }
.dd-col ul { list-style: none; margin: 0; padding: 0; }
.dropdown-group {
  display: block; color: var(--faint); font-family: var(--font-display); font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 12px 8px;
}
.dd-foot { grid-column: 1 / -1; }
.dd-foot .dropdown-all { display: block; text-align: center; border-top: 1px solid var(--line-soft); margin-top: 10px; padding: 12px; color: var(--accent); font-weight: 600; }
.dd-foot .dropdown-all:hover { transform: none; background: none; }

.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-signin { color: var(--muted); font-size: 0.92rem; font-weight: 500; padding: 8px 12px; border-radius: 10px; white-space: nowrap; transition: color 0.18s, background 0.18s; }
.nav-signin:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.search-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line); color: var(--faint); border-radius: 10px; cursor: pointer;
  font: inherit; transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.search-btn:hover { color: var(--muted); border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); }
.nav-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s var(--ease-out), opacity 0.2s; }
.nav-mobile-cta { display: none; }

/* --- buttons ------------------------------------------------------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border-radius: 12px; padding: 11px 22px; font-weight: 600; font-size: 0.97rem;
  font-family: var(--font-display); letter-spacing: 0;
  border: 1px solid transparent; cursor: pointer; overflow: hidden;
  transition: transform 0.2s var(--ease-out), box-shadow 0.25s ease, background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary { background: var(--brand-grad); color: #fff; box-shadow: 0 6px 24px rgba(25, 122, 238, 0.32); }
.btn-primary::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-110%); transition: transform 0.7s var(--ease-out);
}
.btn-primary:hover { box-shadow: 0 10px 36px rgba(25, 122, 238, 0.5); transform: translateY(-2px); }
.btn-primary:hover::before { transform: translateX(110%); }
.btn-ghost { background: rgba(255, 255, 255, 0.05); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.18); transform: translateY(-2px); }
.btn-lg { padding: 14px 30px; font-size: 1.04rem; border-radius: 14px; }
.btn-nav { padding: 8px 18px; font-size: 0.9rem; border-radius: 10px; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* --- hero ---------------------------------------------------------------- */
.page-hero { padding: 96px 0 48px; }
.page-hero-article { padding: 72px 0 8px; }
.kicker { color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 0.84rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 16px; }
.lead { color: var(--muted); font-size: clamp(1.05rem, 1.9vw, 1.22rem); line-height: 1.65; max-width: 46em; margin: 0 0 30px; }
.hero-home .lead { max-width: 40em !important; }
.article-meta { color: var(--faint); font-size: 0.9rem; display: flex; gap: 10px; align-items: center; }
.article-meta .dot { opacity: 0.5; }

.hero-home { padding: 108px 0 36px; text-align: center; }
.hero-home h1 { font-size: clamp(2.7rem, 6.4vw, 4.9rem); max-width: 13.5em; margin: 0 auto 0.4em; line-height: 1.08; }
.hero-home .lead { margin: 0 auto 34px; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: var(--panel);
  border-radius: 999px; padding: 6px 18px 6px 8px; font-size: 0.84rem; color: var(--muted); margin-bottom: 30px;
  transition: border-color 0.2s, background 0.2s, transform 0.25s var(--ease-out);
}
.hero-badge:hover { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.055); transform: translateY(-1px); }
.hero-badge .pill { background: var(--brand-grad); color: #fff; border-radius: 999px; padding: 2px 11px; font-size: 0.76rem; font-weight: 650; }
.hero-trust { color: var(--faint); font-size: 0.88rem; margin-top: 22px; }
.hero-home .btn-row { justify-content: center; }
.hero-home .mock-glow { animation: hero-float 9s ease-in-out infinite; }
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* --- generic sections ---------------------------------------------------- */
.page-section { padding: 88px 0; }
.section-title { text-align: center; margin-bottom: 14px; }
.section-sub { text-align: center; color: var(--muted); max-width: 44em; margin: 0 auto 56px; font-size: 1.06rem; line-height: 1.75; }
.section-kicker { text-align: center; color: var(--accent); font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 12px; }

/* --- cards ---------------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  --mx: 50%; --my: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.022) 58%);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 28px; position: relative; overflow: hidden;
  transition: transform 0.3s var(--ease-out), border-color 0.25s ease, background 0.25s, box-shadow 0.3s ease;
}
.card { display: flex; flex-direction: column; align-items: flex-start; }
.card > * { width: 100%; }
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(25, 122, 238, 0.09), transparent 60%);
  transition: opacity 0.3s ease;
}
.card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.048); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); }
.card:hover::after { opacity: 1; }
.card h3 { margin: 16px 0 8px; }
.card p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.card .card-link { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 0.9rem; margin-top: auto; padding-top: 16px; width: auto; transition: gap 0.2s var(--ease-out); }
.card p { margin-bottom: 0; }
.card:hover .card-link { gap: 10px; }
.card-icon {
  width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-grad-soft); border: 1px solid rgba(25, 122, 238, 0.25); color: var(--accent);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.3s ease;
}
.card:hover .card-icon { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 20px rgba(25, 122, 238, 0.2); }
.card-icon svg { width: 21px; height: 21px; }

/* --- feature split rows --------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 52px 0; }
.split-copy h2 { margin-bottom: 16px; }
.split-copy p { color: var(--muted); }
.split-copy ul { color: var(--muted); padding-left: 0; list-style: none; margin: 20px 0 0; }
.split-copy ul li { padding-left: 32px; position: relative; margin-bottom: 12px; }
.split-copy ul li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 19px; height: 19px; border-radius: 6px;
  background: var(--brand-grad-soft); border: 1px solid rgba(25, 122, 238, 0.3);
}
.split-copy ul li::after {
  content: ""; position: absolute; left: 5px; top: 9px; width: 8px; height: 5px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.split:nth-of-type(even) .split-visual { order: -1; }
.split-visual .mock { transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease; }
.split-visual:hover .mock { transform: translateY(-6px) scale(1.012); box-shadow: 0 32px 90px rgba(0, 0, 0, 0.55); }

/* --- product mockups (pure CSS/HTML fakes) -------------------------------- */
.mock {
  background: linear-gradient(180deg, #17131f, #100d18); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); overflow: hidden; font-size: 0.78rem;
}
.mock-titlebar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); color: var(--faint); }
.mock-titlebar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.mock-titlebar i:first-child { background: rgba(255, 90, 90, 0.7); }
.mock-titlebar i:nth-child(2) { background: rgba(255, 200, 90, 0.7); }
.mock-titlebar i:nth-child(3) { background: rgba(80, 220, 130, 0.7); }
.mock-titlebar span { margin-left: 6px; font-size: 0.74rem; }
.mock-body { padding: 16px; }
.mock table { width: 100%; border-collapse: collapse; }
.mock th { text-align: left; color: var(--faint); font-weight: 600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.07em; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); }
.mock td { padding: 8px; color: var(--muted); border-bottom: 1px solid rgba(255, 255, 255, 0.035); }
.mock td:first-child { color: var(--ink); font-weight: 550; }
.mock .num { text-align: right; font-variant-numeric: tabular-nums; }
.mock .tag { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 0.68rem; font-weight: 600; }
.mock .tag-common { background: rgba(61, 220, 151, 0.12); color: var(--good); }
.mock .tag-pref { background: rgba(129, 140, 248, 0.14); color: #a5b4fc; }
.mock .tag-safe { background: rgba(255, 197, 85, 0.12); color: var(--warn); }
.mock .tag-opt { background: rgba(248, 25, 211, 0.13); color: #ff7dec; }
.mock-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; margin: 12px 0 6px; }
.mock-bar i { display: block; height: 100%; }
.mock-legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--faint); font-size: 0.7rem; }
.mock-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.mock-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.mock-kpi { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px; }
.mock-kpi b { display: block; color: var(--ink); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.mock-kpi span { color: var(--faint); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; }
.mock-glow { position: relative; }
.mock-glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
  background: linear-gradient(120deg, rgba(25, 122, 238, 0.5), rgba(0, 167, 245, 0.5), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* --- tables ---------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
table.cmp { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 560px; }
.cmp th, .cmp td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.cmp thead th { background: rgba(255, 255, 255, 0.04); font-family: var(--font-display); font-weight: 600; font-size: 0.94rem; position: sticky; top: 0; }
.cmp tbody tr { transition: background 0.15s; }
.cmp tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td.y { color: var(--good); font-weight: 650; }
.cmp td.n { color: var(--faint); }
.cmp td.p { color: var(--warn); }
.cmp .row-note { color: var(--faint); font-size: 0.82rem; display: block; margin-top: 2px; font-weight: 400; }

/* --- stats band ------------------------------------------------------------ */
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat {
  text-align: center; padding: 30px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--panel); transition: transform 0.3s var(--ease-out), border-color 0.25s;
}
.stat:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.14); }
.stat b { display: block; font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--muted); font-size: 0.9rem; }

/* --- FAQ ------------------------------------------------------------------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--panel); overflow: hidden; transition: border-color 0.25s, background 0.25s; }
.faq-item:hover, .faq-item[open] { border-color: rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.042); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px 52px 18px 22px; font-weight: 600; position: relative;
  font-size: 1.0rem; font-family: var(--font-display);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-size: 1.35rem; font-weight: 400; color: var(--accent); transition: transform 0.3s var(--ease-out);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item::details-content {
  block-size: 0; overflow: hidden;
  transition: block-size 0.35s var(--ease-out), content-visibility 0.35s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }
.faq-a { padding: 0 22px 20px; color: var(--muted); font-size: 0.96rem; }
.faq-a p { margin: 0 0 10px; }

/* --- CTA band --------------------------------------------------------------- */
@property --cta-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.cta-band { padding: 48px 0 100px; }
.cta-band-inner {
  text-align: center; border-radius: 30px; padding: 72px 36px; position: relative; overflow: hidden;
  background:
    radial-gradient(60% 120% at 20% 0%, rgba(25, 122, 238, 0.2), transparent 60%),
    radial-gradient(60% 120% at 85% 10%, rgba(0, 167, 245, 0.18), transparent 60%),
    var(--bg-raise);
  border: 1px solid transparent;
  background-clip: padding-box;
}
.cta-band-inner::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--cta-angle), rgba(25, 122, 238, 0.7), rgba(0, 167, 245, 0.15), rgba(120, 30, 200, 0.5), rgba(0, 167, 245, 0.15), rgba(25, 122, 238, 0.7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: cta-rotate 7s linear infinite;
}
@keyframes cta-rotate { to { --cta-angle: 360deg; } }
.cta-band-inner h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.cta-band-inner p { color: var(--muted); max-width: 40em; margin: 0 auto 28px; }
.cta-band .btn-row { justify-content: center; }
.cta-trust { font-size: 0.86rem; color: var(--faint) !important; margin-top: 22px !important; }

/* --- prose (articles, legal, academy) ---------------------------------------- */
.prose { max-width: 780px; }
.prose > * { margin-top: 0; }
.prose h2 { margin: 2.1em 0 0.6em; font-size: 1.62rem; }
.prose h3 { margin: 1.7em 0 0.5em; }
.prose p, .prose li { color: #cbc6d8; }
.prose li { margin-bottom: 7px; }
.prose ul, .prose ol { padding-left: 26px; margin: 0 0 1.2em; }
.prose blockquote {
  margin: 1.6em 0; padding: 14px 22px; border-left: 3px solid var(--accent);
  background: var(--panel); border-radius: 0 var(--radius) var(--radius) 0; color: var(--muted);
}
.prose blockquote p { margin: 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 0.92rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.prose th { background: rgba(255, 255, 255, 0.04); font-family: var(--font-display); font-weight: 600; }
.prose td { color: var(--muted); }
.prose code { background: rgba(255, 255, 255, 0.07); border-radius: 6px; padding: 2px 7px; font-size: 0.86em; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.prose pre { background: var(--panel-solid); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose .callout {
  display: flex; gap: 14px; padding: 16px 20px; margin: 1.6em 0;
  background: var(--brand-tint); border: 1px solid rgba(25, 122, 238, 0.25); border-radius: var(--radius);
}
.prose .callout p { margin: 0; color: var(--ink); font-size: 0.95rem; }
.prose .callout::before { content: "→"; color: var(--accent); font-weight: 700; }
.prose .example {
  padding: 18px 22px; margin: 1.6em 0; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.prose .example > p:first-child { color: var(--accent); font-weight: 650; font-size: 0.84rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; }
.prose img { border-radius: var(--radius); border: 1px solid var(--line); }

.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 60px; padding: 38px 0 88px; }
.toc { position: sticky; top: 110px; align-self: start; font-size: 0.88rem; }
.toc h4 { color: var(--faint); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; margin-bottom: 12px; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc li a { display: block; padding: 5px 0 5px 16px; color: var(--faint); border-left: 2px solid transparent; margin-left: -1.5px; transition: color 0.18s, border-color 0.18s; }
.toc li a:hover { color: var(--ink); }
.toc li a.active { color: var(--accent); border-left-color: var(--accent); }

/* --- article/course cards ------------------------------------------------------ */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.post-card {
  --mx: 50%; --my: 50%;
  display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg); padding: 26px; position: relative; overflow: hidden;
  transition: transform 0.3s var(--ease-out), border-color 0.25s, box-shadow 0.3s ease;
}
.post-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--mx) var(--my), rgba(25, 122, 238, 0.08), transparent 60%);
  transition: opacity 0.3s ease;
}
.post-card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); }
.post-card:hover::after { opacity: 1; }
.post-card .post-kicker { color: var(--accent); font-size: 0.76rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; }
.post-card h3 { font-size: 1.12rem; margin: 0 0 8px; }
.post-card p { color: var(--muted); font-size: 0.92rem; margin: 0 0 14px; flex: 1; }
.post-card .post-meta { color: var(--faint); font-size: 0.8rem; }

.course-list { display: flex; flex-direction: column; gap: 16px; counter-reset: course; }
.course-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items: center;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 24px 28px;
  transition: border-color 0.25s, transform 0.3s var(--ease-out), background 0.25s;
}
.course-row:hover { border-color: rgba(255, 255, 255, 0.18); transform: translateX(6px); background: rgba(255, 255, 255, 0.045); }
.course-row .course-n { counter-increment: course; font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.course-row .course-n::before { content: "0" counter(course); }
.course-row h3 { margin: 0 0 4px; }
.course-row p { margin: 0; color: var(--muted); font-size: 0.93rem; }
.course-row .course-meta { color: var(--faint); font-size: 0.84rem; white-space: nowrap; }

.lesson-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.lesson-nav a { flex: 1; max-width: 46%; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; font-size: 0.9rem; color: var(--muted); transition: border-color 0.2s, color 0.2s, transform 0.25s var(--ease-out); }
.lesson-nav a:hover { border-color: rgba(255, 255, 255, 0.2); color: var(--ink); transform: translateY(-2px); }
.lesson-nav a b { display: block; color: var(--ink); font-size: 0.97rem; margin-top: 3px; }
.lesson-nav a.next { text-align: right; margin-left: auto; }

/* --- calculators ------------------------------------------------------------------ */
.calc { display: grid; grid-template-columns: 380px 1fr; gap: 28px; align-items: start; }
.calc-inputs { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 100px; }
.calc-field label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.calc-field input, .calc-field select {
  width: 100%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); color: var(--ink);
  border-radius: 11px; padding: 12px 14px; font: inherit; font-variant-numeric: tabular-nums;
  transition: border-color 0.2s, background 0.2s;
}
.calc-field input:hover, .calc-field select:hover { border-color: rgba(255, 255, 255, 0.18); }
.calc-field input:focus, .calc-field select:focus { outline: 2px solid rgba(25, 122, 238, 0.55); outline-offset: 1px; border-color: transparent; }
.calc-field .hint { color: var(--faint); font-size: 0.78rem; margin-top: 5px; }
.calc-results { display: flex; flex-direction: column; gap: 18px; }
.calc-out { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; }
.calc-out h3 { font-size: 0.86rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }
.calc-big { font-family: var(--font-display); font-size: 2.3rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-note { color: var(--faint); font-size: 0.85rem; }
.calc-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.calc-table th { text-align: left; color: var(--faint); font-weight: 600; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.07em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.calc-table td { padding: 9px 10px; border-bottom: 1px solid var(--line-soft); color: var(--muted); }
.calc-table td:first-child { color: var(--ink); }
.calc-table .num { text-align: right; }
.calc-table tr.hl td { color: var(--ink); font-weight: 600; background: var(--brand-tint); }

/* --- glossary ------------------------------------------------------------------ */
.glossary-az { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 36px; }
.glossary-az a { border: 1px solid var(--line); border-radius: 10px; min-width: 36px; text-align: center; padding: 6px 0; color: var(--muted); font-weight: 600; font-size: 0.9rem; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.glossary-az a:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.05); }
.glossary-group { margin-bottom: 44px; }
.glossary-group h2 { font-size: 1.9rem; color: var(--accent); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.glossary-term { margin-bottom: 20px; }
.glossary-term h3 { font-size: 1.06rem; margin-bottom: 4px; }
.glossary-term p { color: var(--muted); font-size: 0.95rem; margin: 0; max-width: 760px; }

/* --- changelog ------------------------------------------------------------------- */
.release { border-left: 2px solid var(--line); padding: 0 0 48px 34px; position: relative; }
.release::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-grad); box-shadow: 0 0 0 4px rgba(25, 122, 238, 0.18); }
.release-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.release-head h2 { margin: 0; font-size: 1.5rem; }
.release-head .ver { background: var(--brand-grad-soft); border: 1px solid rgba(25, 122, 238, 0.3); color: var(--accent); border-radius: 999px; padding: 2px 12px; font-weight: 650; font-size: 0.84rem; }
.release .prose h2 { font-size: 1.15rem; margin: 1.4em 0 0.5em; }

/* --- misc ------------------------------------------------------------------------ */
.pill-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.pill-item { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 9px 20px; font-size: 0.9rem; color: var(--muted); transition: border-color 0.2s, background 0.2s, transform 0.25s var(--ease-out), color 0.2s; }
.pill-item:hover { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.055); transform: translateY(-2px); color: var(--ink); }
.pill-item b { color: var(--ink); font-weight: 600; }

.checklist { list-style: none; padding: 0; margin: 18px 0; }
.checklist li { padding: 7px 0 7px 32px; position: relative; color: var(--muted); }
.checklist li::before { content: ""; position: absolute; left: 0; top: 11px; width: 18px; height: 18px; border-radius: 6px; background: var(--brand-grad-soft); border: 1px solid rgba(25, 122, 238, 0.3); }
.checklist li::after { content: ""; position: absolute; left: 5px; top: 16px; width: 8px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

.notice { border: 1px solid rgba(255, 197, 85, 0.3); background: rgba(255, 197, 85, 0.07); border-radius: var(--radius); padding: 14px 20px; color: #e8d5ab; font-size: 0.92rem; }

/* --- footer -------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.015); margin-top: 24px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 36px; padding: 64px 28px 44px; }
.footer-brand p { color: var(--faint); font-size: 0.88rem; margin: 16px 0 0; max-width: 30em; }
.footer-lisan a { color: var(--muted); text-decoration: underline; }
.footer-col h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint); font-family: var(--font-body); font-weight: 650; margin-bottom: 15px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: var(--muted); font-size: 0.9rem; transition: color 0.18s; }
.footer-col a:hover { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 28px 32px; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: 0.84rem; }
.footer-bottom ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.footer-bottom a { color: var(--faint); transition: color 0.18s; }
.footer-bottom a:hover { color: var(--muted); }

/* --- search modal ----------------------------------------------------------------- */
.search-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 20px 20px; }
.search-modal[hidden] { display: none; }
.search-backdrop { position: absolute; inset: 0; background: rgba(4, 3, 8, 0.7); backdrop-filter: blur(6px); animation: fade-in 0.2s ease; }
.search-panel {
  position: relative; width: 100%; max-width: 640px; background: rgba(18, 14, 30, 0.96);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-pop); overflow: hidden;
  backdrop-filter: blur(24px); animation: search-pop 0.28s var(--ease-out);
}
@keyframes search-pop { from { opacity: 0; transform: translateY(-14px) scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }
.search-input { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); font: inherit; font-size: 1.05rem; padding: 19px 24px; }
.search-input:focus { outline: none; }
.search-results { list-style: none; margin: 0; padding: 8px; max-height: 46vh; overflow-y: auto; }
.search-results li a { display: block; padding: 11px 14px; border-radius: 11px; transition: background 0.12s; }
.search-results li a .sr-section { color: var(--accent); font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.09em; display: block; }
.search-results li a .sr-title { font-weight: 600; font-size: 0.97rem; }
.search-results li a .sr-desc { color: var(--faint); font-size: 0.84rem; display: block; }
.search-results li a:hover, .search-results li.sel a { background: rgba(255, 255, 255, 0.06); }
.search-hint { color: var(--faint); font-size: 0.78rem; padding: 10px 24px 14px; margin: 0; border-top: 1px solid var(--line-soft); }
.search-hint kbd { border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-size: 0.72rem; margin: 0 1px; }

/* --- reveal animation ---------------------------------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(26px); filter: blur(7px);
  transition:
    opacity 0.75s var(--ease-out) var(--rd, 0s),
    transform 0.75s var(--ease-out) var(--rd, 0s),
    filter 0.75s var(--ease-out) var(--rd, 0s);
  will-change: opacity, transform, filter;
}
.reveal.in { opacity: 1; transform: none; filter: none; will-change: auto; }

/* --- reduced motion -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orb, .grad-text, .cta-band-inner::before, .hero-home .mock-glow { animation: none; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .btn-primary::before { display: none; }
  .card, .post-card, .stat, .pill-item, .course-row, .btn, .lesson-nav a, .split-visual .mock { transition: none; }
}

/* --- responsive ------------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .card-grid, .card-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .prose { min-width: 0; max-width: 100%; }
  .dropdown-mega { width: 520px; }
}
/* squeeze band between full desktop nav and the burger: drop the quiet links */
@media (max-width: 1060px) and (min-width: 861px) {
  .nav-signin { display: none; }
  .nav-menu { gap: 0; margin-left: 2px; }
  .nav-link { padding: 8px 10px; }
}
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 34px 0; }
  .mock { max-width: 100%; overflow-x: auto; }
  .split:nth-of-type(even) .split-visual { order: 0; }
  .calc { grid-template-columns: 1fr; }
  .calc-inputs { position: static; }
  .site-header { padding: 10px 0; }
  .nav-wrap { padding: 0 12px; }
  .nav { height: 56px; padding: 0 6px 0 16px; }
  .nav-menu {
    display: none; position: fixed; inset: 0; padding: 92px 28px 28px; background: rgba(7, 5, 12, 0.97);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: -1;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0; overflow-y: auto;
  }
  .nav-menu.open { display: flex; animation: fade-in 0.25s ease; }
  .nav-menu > li { border-bottom: 1px solid var(--line-soft); }
  .nav-link { width: 100%; justify-content: space-between; padding: 16px 4px; font-size: 1.05rem; border-radius: 0; }
  .nav-link:hover { background: none; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; border: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0 0 12px 14px; display: none; min-width: 0; }
  .dropdown a span { display: none; }
  .dropdown a b { font-weight: 500; color: var(--muted); }
  .dropdown a:hover b { color: var(--ink); }
  .dropdown-mega { width: auto; grid-template-columns: 1fr; gap: 0; }
  .dropdown-mega .dropdown-all { text-align: left; border-top: 0; margin-top: 0; padding-top: 9px; }
  .dropdown-groups { width: auto; grid-template-columns: 1fr; gap: 0; padding: 0 0 12px 14px; }
  .dropdown-group { padding: 10px 12px 4px 0; }
  .dd-foot .dropdown-all { text-align: left; border-top: 0; margin-top: 0; padding: 9px 12px; }
  .has-dropdown.open .dropdown { display: block; }
  .has-dropdown.open > .nav-link svg { transform: rotate(180deg); }
  .has-dropdown::after { display: none; }
  .nav-mobile-cta { position: sticky; bottom: 0; display: block; padding: 16px 4px calc(16px + env(safe-area-inset-bottom)); margin-top: auto; background: rgba(7, 5, 12, 0.97); border-top: 1px solid var(--line-soft); border-bottom: 0 !important; }
  .nav-mobile-cta .btn { width: 100%; }
  .nav-burger { display: flex; }
  .nav-signin, .btn-nav { display: none; }
  .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  body.nav-open { overflow: hidden; }
  body.nav-open .site-header { z-index: 100; }
  /* backdrop-filter would make .nav the containing block for the fixed menu */
  body.nav-open .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; border-color: transparent; box-shadow: none; }
}
@media (max-width: 620px) {
  .hero-badge { font-size: 0.78rem; max-width: calc(100vw - 48px); }
  .hero-badge > :last-child { min-width: 0; }
  .card-grid, .card-grid-2, .card-grid-4, .post-grid { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .page-hero { padding: 60px 0 28px; }
  .hero-home { padding: 68px 0 24px; }
  .page-section { padding: 60px 0; }
  .section-sub { margin-bottom: 38px; }
  .course-row { grid-template-columns: 1fr; gap: 8px; }
  .course-row .course-n { font-size: 1.4rem; }
  .course-row:hover { transform: none; }
  .lesson-nav { flex-direction: column; }
  .lesson-nav a { max-width: none; }
  .btn-row .btn { flex: 1 1 100%; }
  .cta-band-inner { padding: 52px 24px; }
}

/* ==========================================================================
   v3 "Meridian" layer — screenshots, charts, bento, marquee, RTL, lightbox
   ========================================================================== */

/* --- product screenshots (real captures in glass frames) ------------------ */
.shot {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #0c0916;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}
.shot img { display: block; width: 100%; height: auto; }
.shot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), transparent 24%);
}
.shot-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.025);
}
.shot-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.13); flex: none; }
.shot-bar i:first-child { background: rgba(255, 90, 90, 0.65); }
.shot-bar i:nth-child(2) { background: rgba(255, 200, 90, 0.65); }
.shot-bar i:nth-child(3) { background: rgba(80, 220, 130, 0.65); }
.shot-bar span { color: var(--faint); font-size: 0.74rem; margin-left: 6px; }
[dir="rtl"] .shot-bar span { margin-left: 0; margin-right: 6px; }

/* gradient halo wrapper: green leads, blue and violet round it out */
.shot-glow { position: relative; }
.shot-glow::before {
  content: ""; position: absolute; inset: -1px; border-radius: 25px; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(120deg, rgba(25, 122, 238, 0.55), rgba(88, 130, 246, 0.4) 45%, rgba(139, 127, 240, 0.35) 72%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.shot-glow::after {
  content: ""; position: absolute; inset: -8% -14% -18%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 58% at 24% 14%, rgba(25, 122, 238, 0.22), transparent 62%),
    radial-gradient(52% 58% at 78% 22%, rgba(88, 130, 246, 0.16), transparent 62%),
    radial-gradient(46% 52% at 55% 88%, rgba(139, 127, 240, 0.13), transparent 65%);
  filter: blur(28px);
}

/* hero screenshot: 3D perspective + cursor tilt (JS sets --rx/--ry) */
.hero-stage { perspective: 1400px; max-width: 1040px; margin: 52px auto 0; }
.hero-stage .shot {
  transform: rotateX(calc(6deg + var(--rx, 0deg))) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform 0.35s var(--ease-out);
  will-change: transform;
}
.hero-stage:hover .shot { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hero-reflection {
  height: 110px; margin: -4px auto 0; max-width: 1040px; pointer-events: none;
  background: linear-gradient(180deg, rgba(25, 122, 238, 0.09), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
  mask-image: linear-gradient(180deg, #000, transparent 80%);
  border-radius: var(--radius-lg); opacity: 0.6;
}

/* split visuals: gentle float on hover */
.split-visual .shot { transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease; }
.split-visual:hover .shot { transform: translateY(-6px) scale(1.012); box-shadow: 0 34px 96px rgba(0, 0, 0, 0.6); }

/* clickable zoom affordance */
.shot-zoom { cursor: zoom-in; }

/* --- lightbox -------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  padding: 4vh 4vw; background: rgba(4, 3, 8, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: fade-in 0.22s ease;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 94vw; max-height: 90vh; width: auto; height: auto; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 40px 140px rgba(0, 0, 0, 0.8);
  animation: search-pop 0.3s var(--ease-out);
}
.lightbox-close {
  position: absolute; top: 22px; right: 26px; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--ink);
  font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, transform 0.25s var(--ease-out);
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.15); transform: rotate(90deg); }
.lightbox-cap { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; color: var(--muted); font-size: 0.9rem; }

/* --- vz: the chart engine --------------------------------------------------
   Categorical palette validated (dataviz six checks) on #0d0a16:
   1 #3b82f6 · 2 #0fa48b · 3 #c77d06 · 4 #e01fb5 · 5 #8b7ff0
   (blue-major; all-pairs CVD + lightness validated on #0d0a16)             */
:root {
  --vz-1: #3b82f6; --vz-2: #0fa48b; --vz-3: #c77d06; --vz-4: #e01fb5; --vz-5: #8b7ff0;
  --vz-rest: rgba(255, 255, 255, 0.13);
  --vz-grid: rgba(255, 255, 255, 0.07);
  --vz-surface: #0d0a16;
}
.vz {
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 24px 24px 18px; position: relative;
}
.vz-title { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; margin: 0 0 2px; }
.vz-sub { color: var(--faint); font-size: 0.8rem; margin: 0 0 16px; }
.vz svg { display: block; width: 100%; height: auto; overflow: visible; }
.vz text { font-family: var(--font-body); fill: var(--muted); font-size: 11.5px; }
.vz .vz-axis text { fill: var(--faint); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.vz .vz-gridline { stroke: var(--vz-grid); stroke-width: 1; }
.vz .vz-baseline { stroke: rgba(255, 255, 255, 0.16); stroke-width: 1; }
.vz .vz-val { fill: var(--ink); font-weight: 600; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.vz .vz-lbl { fill: var(--muted); font-size: 11px; }
.vz-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.vz-legend span { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 0.8rem; }
.vz-legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.vz-tip {
  position: fixed; z-index: 350; pointer-events: none; opacity: 0; transform: translateY(4px);
  background: #17121f; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px;
  padding: 8px 12px; font-size: 0.8rem; color: var(--muted); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  transition: opacity 0.15s ease, transform 0.15s ease; max-width: 260px;
}
.vz-tip.on { opacity: 1; transform: translateY(0); }
.vz-tip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.vz-tip .t-name { display: flex; align-items: center; gap: 7px; }
.vz-tip .t-name i { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* mark hovers */
.vz [data-vzi] { transition: opacity 0.18s ease, filter 0.18s ease; cursor: default; }
.vz.vz-dim [data-vzi] { opacity: 0.32; }
.vz.vz-dim [data-vzi].on { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.12)); }

/* draw-in animations (triggered by .in from the reveal observer) */
.vz .vz-bar { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; }
.vz.in .vz-bar { animation: vz-grow 0.9s var(--ease-out) forwards; animation-delay: var(--vzd, 0s); }
@keyframes vz-grow { to { transform: scaleY(1); } }
/* charts keep an LTR internal coordinate system in both site languages */
.vz svg { direction: ltr; }
.vz .vz-barh { transform: scaleX(0); transform-box: fill-box; transform-origin: left; }
.vz.in .vz-barh { animation: vz-groww 0.9s var(--ease-out) forwards; animation-delay: var(--vzd, 0s); }
@keyframes vz-groww { to { transform: scaleX(1); } }
.vz .vz-arc { transition: stroke-dashoffset 1.1s var(--ease-out); transition-delay: var(--vzd, 0s); }
.vz .vz-path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.vz.in .vz-path { animation: vz-draw 1.4s var(--ease-out) forwards; animation-delay: var(--vzd, 0s); }
@keyframes vz-draw { to { stroke-dashoffset: 0; } }
.vz .vz-fade { opacity: 0; }
.vz.in .vz-fade { animation: vz-fadein 0.7s ease forwards; animation-delay: var(--vzd, 0.6s); }
@keyframes vz-fadein { to { opacity: 1; } }
.vz-donut-total { font-family: var(--font-display); font-weight: 700; fill: var(--ink); }
.vz .vz-donutg { transform: rotate(-40deg) scale(0.92); opacity: 0; transform-box: fill-box; transform-origin: center; transition: transform 1s var(--ease-out), opacity 0.7s ease; }
.vz.in .vz-donutg { transform: none; opacity: 1; }
/* still mode: calculators re-render on every input — no re-entry animation */
.vz.vz-still .vz-bar, .vz.vz-still .vz-barh, .vz.vz-still.in .vz-bar, .vz.vz-still.in .vz-barh { animation: none; transform: none; }
.vz.vz-still .vz-path, .vz.vz-still.in .vz-path { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
.vz.vz-still .vz-fade, .vz.vz-still.in .vz-fade { animation: none; opacity: 1; }
.vz.vz-still .vz-donutg { transition: none; transform: none; opacity: 1; }
.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; }

/* --- bento grid ------------------------------------------------------------ */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bento-item {
  --mx: 50%; --my: 50%;
  grid-column: span 2; position: relative; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.022) 58%);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 26px; display: flex; flex-direction: column; min-height: 210px;
  transition: transform 0.3s var(--ease-out), border-color 0.25s, background 0.25s, box-shadow 0.3s;
}
.bento-item::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(380px circle at var(--mx) var(--my), rgba(25, 122, 238, 0.09), transparent 62%);
  transition: opacity 0.3s ease;
}
.bento-item:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.045); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35); }
.bento-item:hover::after { opacity: 1; }
.bento-item h3 { font-size: 1.14rem; margin: 0 0 6px; }
.bento-item p { color: var(--muted); font-size: 0.92rem; margin: 0 0 14px; }
.bento-wide { grid-column: span 4; }
.bento-half { grid-column: span 3; }
.bento-full { grid-column: span 6; }
.bento-kpi { justify-content: center; min-height: 150px; }
.bento-kpi b { font-family: var(--font-display); font-size: 2.4rem; font-weight: 700; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bento-kpi span { color: var(--muted); font-size: 0.92rem; }
.bento-item .shot { margin-top: auto; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); }
.bento-item .shot img { transition: transform 0.6s var(--ease-out); }
.bento-item:hover .shot img { transform: scale(1.025); }

/* linked feature cards: icon + copy + accent "Explore" row, arrow slides on hover */
a.bento-card { color: inherit; text-decoration: none; }
.bento-card .card-icon { margin-bottom: 16px; }
.bento-card h3 { letter-spacing: -0.01em; }
.bento-card p { flex: 1; line-height: 1.62; }
.bento-card .card-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
  color: var(--accent); font-weight: 600; font-size: 0.88rem;
}
.bento-card .card-link .arr { font-style: normal; transition: transform 0.25s var(--ease-out); }
.bento-card:hover .card-link .arr { transform: translateX(4px); }
.bento-card:hover .card-icon { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 20px rgba(25, 122, 238, 0.2); }
.bento-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- marquee rail ----------------------------------------------------------- */
.marquee { overflow: hidden; position: relative; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; gap: 14px; width: max-content; animation: marquee-scroll 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { to { transform: translateX(calc(-50% - 7px)); } }
.marquee .pill-item { white-space: nowrap; }

/* --- feature tabs / showcase -------------------------------------------------- */
.showcase { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
.showcase-tabs { display: flex; flex-direction: column; gap: 8px; }
.showcase-tab {
  text-align: left; background: none; border: 1px solid transparent; border-radius: 14px; cursor: pointer;
  padding: 14px 18px; color: var(--muted); font: inherit;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}
[dir="rtl"] .showcase-tab { text-align: right; }
.showcase-tab b { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; margin-bottom: 2px; }
.showcase-tab span { font-size: 0.84rem; line-height: 1.5; display: block; }
.showcase-tab:hover { background: rgba(255, 255, 255, 0.04); transform: translateX(3px); }
[dir="rtl"] .showcase-tab:hover { transform: translateX(-3px); }
.showcase-tab.on {
  background: rgba(25, 122, 238, 0.07); border-color: rgba(25, 122, 238, 0.35);
  box-shadow: inset 2px 0 0 var(--brand-a), 0 4px 18px rgba(25, 122, 238, 0.1);
}
[dir="rtl"] .showcase-tab.on { box-shadow: inset -2px 0 0 var(--brand-a), 0 4px 18px rgba(25, 122, 238, 0.1); }
.showcase-tab.on b { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.showcase-pane { position: relative; }
.showcase-pane .shot, .showcase-pane .demo, .showcase-pane .appframe { animation: pane-in 0.45s var(--ease-out); }
@keyframes pane-in { from { opacity: 0; transform: translateY(10px) scale(0.99); } }

/* --- word-by-word headline reveal --------------------------------------------- */
.words .w { display: inline-block; opacity: 0; transform: translateY(20px) rotate(1.5deg); filter: blur(6px); }
.words.in .w { animation: word-in 0.65s var(--ease-out) forwards; animation-delay: calc(var(--wi) * 70ms); }
@keyframes word-in { to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .words .w, .words.in .w { opacity: 1; transform: none; filter: none; animation: none; } }

/* --- flow timeline (how it works) ---------------------------------------------- */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: flow; }
.flow-step {
  position: relative; background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 26px 26px 24px; transition: transform 0.3s var(--ease-out), border-color 0.25s;
}
.flow-step:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.15); }
.flow-step::before {
  counter-increment: flow; content: "0" counter(flow);
  font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; margin-bottom: 14px;
}
.flow-step h3 { font-size: 1.08rem; margin: 0 0 6px; }
.flow-step p { color: var(--muted); font-size: 0.92rem; margin: 0; }

/* --- language switcher ----------------------------------------------------------- */
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  background: rgba(255, 255, 255, 0.045); border: 1px solid var(--line); color: var(--muted);
  border-radius: 10px; cursor: pointer; font: inherit; font-size: 0.86rem; font-weight: 600;
  transition: color 0.18s, border-color 0.18s, background 0.18s; text-decoration: none; white-space: nowrap;
}
.lang-btn:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.07); }

/* ===========================================================================
   RTL + Arabic
   =========================================================================== */
html[lang="ar"] body { font-family: "Noto Kufi Arabic", "Inter", system-ui, sans-serif; letter-spacing: 0; }
[lang="ar"]:not(html) { font-family: "Noto Kufi Arabic", "Inter", system-ui, sans-serif; letter-spacing: 0; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .btn, html[lang="ar"] .brand, html[lang="ar"] .kicker, html[lang="ar"] .section-kicker {
  font-family: "Noto Kufi Arabic", "Poppins", sans-serif; letter-spacing: 0;
}
html[lang="ar"] h1 { line-height: 1.42; font-size: clamp(2rem, 4.6vw, 3.3rem); }
html[lang="ar"] h2 { line-height: 1.5; }
html[lang="ar"] h3 { line-height: 1.6; }
html[lang="ar"] .lead, html[lang="ar"] p { line-height: 2; }
html[lang="ar"] .kicker, html[lang="ar"] .section-kicker, html[lang="ar"] .post-kicker { letter-spacing: 0.02em; }
html[lang="ar"] .hero-home h1 { line-height: 1.4; }

[dir="rtl"] .dropdown { left: auto; right: 0; transform-origin: top right; }
[dir="rtl"] .nav-actions { margin-left: 0; margin-right: auto; }
[dir="rtl"] .nav-menu { margin: 0 8px 0 0; }
[dir="rtl"] .split-copy ul li { padding-left: 0; padding-right: 32px; }
[dir="rtl"] .split-copy ul li::before { left: auto; right: 0; }
[dir="rtl"] .split-copy ul li::after { left: auto; right: 5px; }
[dir="rtl"] .checklist li { padding: 7px 32px 7px 0; }
[dir="rtl"] .checklist li::before { left: auto; right: 0; }
[dir="rtl"] .checklist li::after { left: auto; right: 5px; }
[dir="rtl"] .faq-item summary { padding: 18px 22px 18px 52px; }
[dir="rtl"] .faq-item summary::after { right: auto; left: 20px; }
[dir="rtl"] .prose blockquote { border-left: 0; border-right: 3px solid var(--accent); border-radius: var(--radius) 0 0 var(--radius); }
[dir="rtl"] .toc ul { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .toc li a { padding: 5px 16px 5px 0; border-left: 0; border-right: 2px solid transparent; margin-left: 0; margin-right: -1.5px; }
[dir="rtl"] .toc li a.active { border-right-color: var(--accent); }
[dir="rtl"] .release { border-left: 0; border-right: 2px solid var(--line); padding: 0 34px 48px 0; }
[dir="rtl"] .release::before { left: auto; right: -7px; }
[dir="rtl"] .lesson-nav a.next { text-align: left; margin-left: 0; margin-right: auto; }
[dir="rtl"] .dropdown a:hover { transform: translateX(-3px); }
[dir="rtl"] .course-row:hover { transform: translateX(-6px); }
[dir="rtl"] .prose .callout::before { content: "←"; }
[dir="rtl"] .lightbox-close { right: auto; left: 26px; }

/* --- synthetic diagrams (v3.1): phone, hub card, vertical flow ---------------- */
.flow-vert { display: flex; flex-direction: column; gap: 14px; counter-reset: flow; max-width: 420px; }
.flow-vert .flow-step { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; }
.flow-vert .flow-step::before { position: static; flex: none; margin-top: 2px; }
.flow-vert .flow-step > div { min-width: 0; }

.hub-card {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel-solid);
  box-shadow: var(--shadow-pop); overflow: hidden; max-width: 560px; margin: 0 auto;
}
.hub-card .hub-body { display: flex; align-items: flex-start; gap: 18px; padding: 28px; }
.hub-icon { flex: none; width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(25, 122, 238, 0.08); border: 1px solid rgba(25, 122, 238, 0.22); }
.hub-icon svg { width: 40px; height: 40px; display: block; }
.hub-meta { min-width: 0; flex: 1; }
.hub-meta h3 { margin: 2px 0 4px; font-size: 1.3rem; }
.hub-meta p { margin: 0 0 10px; color: var(--muted); font-size: 0.94rem; }
.hub-cat { display: inline-block; font-size: 0.74rem; color: var(--faint); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; }
.hub-ver { flex: none; font-size: 0.82rem; font-weight: 600; color: var(--accent);
  background: var(--brand-grad-soft); border: 1px solid rgba(25, 122, 238, 0.3); border-radius: 999px; padding: 4px 12px; }

.phone-stage { display: grid; place-items: center; position: relative; padding: 12px 0; }
.phone {
  position: relative; width: min(300px, 80vw); border-radius: 46px; padding: 10px;
  background: linear-gradient(160deg, #3a3644, #17141f 40%, #211d2c 85%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 30px 80px rgba(0, 0, 0, 0.6), 0 0 90px rgba(25, 122, 238, 0.14);
}
.phone-sbtn { position: absolute; top: 108px; inset-inline-end: -2px; width: 3px; height: 56px;
  border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
.phone-screen {
  border-radius: 38px; background: linear-gradient(180deg, #0e0a18 0%, #0b0812 45%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden; padding: 12px 16px 18px; min-height: 510px; position: relative;
  display: flex; flex-direction: column;
}
/* status bar with a dynamic-island pill */
.phone-status { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 2px 6px 0; }
.phone-status b { font-size: 0.74rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.phone-island { width: 78px; height: 21px; border-radius: 999px; background: #000; border: 1px solid rgba(255, 255, 255, 0.07); flex: none; }
.phone-sices { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); opacity: 0.9; }
.phone-head { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.phone-head .phone-ava { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 700; color: #fff; letter-spacing: 0.02em;
  background: var(--brand-grad); box-shadow: 0 4px 14px rgba(25, 122, 238, 0.35); }
.phone-head > div { flex: 1; min-width: 0; }
.phone-head > div b { font-size: 0.88rem; display: block; line-height: 1.3; }
.phone-head > div span { font-size: 0.68rem; color: var(--faint); display: block; }
.phone-bell { position: relative; width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--muted);
  border: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.03); }
.phone-bell i { position: absolute; top: 7px; right: 8px; width: 6px; height: 6px; border-radius: 50%;
  background: #00a7f5; box-shadow: 0 0 6px rgba(0, 167, 245, 0.8); }
.phone-ring { position: relative; width: 150px; height: 150px; margin: 6px auto 14px; border-radius: 50%;
  display: grid; place-content: center; row-gap: 2px;
  background: conic-gradient(#197aee 0deg, #00a7f5 126deg, rgba(255, 255, 255, 0.07) 126deg 360deg);
  filter: drop-shadow(0 6px 22px rgba(25, 122, 238, 0.22)); }
.phone-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #0c0914; }
.phone-ring b { position: relative; z-index: 1; text-align: center; line-height: 1.05;
  font-family: var(--font-display); font-size: 1.72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.phone-ring i { position: relative; z-index: 1; text-align: center; max-width: 92px; margin: 0 auto;
  font-style: normal; font-size: 0.6rem; line-height: 1.35; color: var(--faint); }
/* value card with sparkline */
.phone-value { display: flex; align-items: center; gap: 10px; padding: 12px 13px;
  border: 1px solid rgba(25, 122, 238, 0.22); border-radius: 16px; margin-top: 2px;
  background: linear-gradient(180deg, rgba(25, 122, 238, 0.09), rgba(0, 167, 245, 0.04)); }
.phone-value-meta { flex: 1; min-width: 0; }
.phone-value-meta span { display: block; font-size: 0.66rem; color: var(--muted); }
.phone-value-meta b { display: block; font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.35; }
.phone-value-meta u { display: block; text-decoration: none; font-size: 0.62rem; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phone-spark { width: 86px; flex: none; }
.phone-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 14px; margin-top: 9px;
  background: rgba(255, 255, 255, 0.02); }
.phone-row span { font-size: 0.72rem; color: var(--muted); }
.phone-row b { font-size: 0.84rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* bottom tab bar */
.phone-tabs { display: flex; justify-content: space-around; gap: 2px; margin-top: auto;
  padding: 12px 4px 4px; border-top: 1px solid var(--line-soft); }
.phone-tab { display: grid; justify-items: center; gap: 3px; color: var(--faint); min-width: 0; }
.phone-tab em { font-style: normal; font-size: 0.56rem; font-weight: 600; }
.phone-tab.on { color: #5fc6ff; }
.phone-badge { position: absolute; top: 20px; inset-inline-end: -12px; z-index: 2;
  font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--brand-grad);
  border-radius: 999px; padding: 6px 14px; box-shadow: 0 8px 24px rgba(25, 122, 238, 0.35);
  transform: rotate(6deg); }
[dir="rtl"] .phone-badge { transform: rotate(-6deg); }

/* ==========================================================================
   v3.2 "Cinema" — scripted product demos (assets/demos.js)
   Synthetic simplified product UI that plays a scripted flow on scroll.
   Layout is forced LTR (like the app itself); demos.js drives the timeline.
   ========================================================================== */
[data-demo] { min-height: 300px; }
.demo {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: radial-gradient(130% 110% at 50% -8%, #151126 0%, #0c0916 56%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
  font-size: 0.78rem; text-align: left; min-height: 300px;
}
.demo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.06), transparent 24%);
}
.dm-bar {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.025);
}
.dm-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.13); flex: none; }
.dm-bar i:first-child { background: rgba(255, 90, 90, 0.65); }
.dm-bar i:nth-child(2) { background: rgba(255, 200, 90, 0.65); }
.dm-bar i:nth-child(3) { background: rgba(80, 220, 130, 0.65); }
.dm-bar span { color: var(--faint); font-size: 0.74rem; margin-left: 6px; }
.dm-body { position: relative; padding: 18px; }
.dm-grid2 { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; }
.dm-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015) 55%);
  border: 1px solid var(--line-soft);
  border-radius: 14px; padding: 12px 14px; min-width: 0;
}
.dm-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.dm-ph span { color: var(--faint); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.dm-faint { text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; }
.dm-btn {
  background: linear-gradient(120deg, #197aee, #00a7f5); color: #fff; border: 0; border-radius: 9px; padding: 6px 14px;
  font: inherit; font-size: 0.76rem; font-weight: 650; pointer-events: none;
  box-shadow: 0 4px 14px rgba(25, 122, 238, 0.35); transition: transform 0.15s ease, box-shadow 0.2s;
}
.dm-btn.pressed { transform: scale(0.94); box-shadow: 0 2px 8px rgba(25, 122, 238, 0.5); }
.dm-row {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px;
  border: 1px solid transparent; margin-bottom: 3px; background: rgba(255, 255, 255, 0.015);
}
.dm-row b { color: var(--ink); font-weight: 550; font-size: 0.78rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-row u { text-decoration: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.76rem; white-space: nowrap; }
.dm-row.hl { border-color: rgba(25, 122, 238, 0.45); background: rgba(25, 122, 238, 0.08); }
.dm-row.hl u { color: var(--ink); font-weight: 650; }
.dm-tag {
  font-style: normal; border-radius: 999px; padding: 1px 9px; font-size: 0.66rem; font-weight: 600;
  white-space: nowrap; flex: none;
}
.t-common { background: rgba(61, 220, 151, 0.12); color: var(--good); }
.t-pref { background: rgba(129, 140, 248, 0.16); color: #a5b4fc; }
.t-safe { background: rgba(255, 197, 85, 0.13); color: var(--warn); }
.t-opt { background: rgba(248, 25, 211, 0.13); color: #ff7dec; }
.dm-scan { background: rgba(255, 255, 255, 0.06); color: var(--faint); animation: dm-pulse 1.1s ease-in-out infinite; }
@keyframes dm-pulse { 50% { opacity: 0.45; } }
.dm-tag.pop, .dm-badge.pop { animation: dm-pop 0.45s var(--ease-spring); }
@keyframes dm-pop { 0% { transform: scale(0.6); } 70% { transform: scale(1.12); } }

/* ownership stack strip */
.dm-stackwrap { margin-top: 10px; }
.dm-stacklbl { color: var(--faint); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.dm-stack { display: flex; gap: 2px; height: 12px; border-radius: 999px; overflow: hidden; margin-top: 5px; background: rgba(255, 255, 255, 0.04); }
.dm-stack i { display: block; height: 100%; transition: width 0.2s linear; min-width: 0; }

/* wizard steps */
.dm-step {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  border: 1px solid var(--line-soft); margin-bottom: 6px; background: rgba(255, 255, 255, 0.015);
  transition: border-color 0.25s, background 0.25s;
}
.dm-step i {
  font-style: normal; width: 20px; height: 20px; flex: none; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.68rem; font-weight: 700;
  background: rgba(255, 255, 255, 0.06); color: var(--faint);
  transition: background 0.25s, color 0.25s;
}
.dm-step > div { flex: 1; min-width: 0; }
.dm-step b { display: block; color: var(--ink); font-size: 0.76rem; font-weight: 600; }
.dm-step span { display: block; color: var(--faint); font-size: 0.68rem; }
.dm-step u { flex: none; color: var(--good); opacity: 0; transform: scale(0.5); transition: opacity 0.3s, transform 0.35s var(--ease-spring); }
.dm-step.on { border-color: rgba(25, 122, 238, 0.45); background: rgba(25, 122, 238, 0.08); }
.dm-step.on i { background: linear-gradient(120deg, #197aee, #00a7f5); color: #fff; }
.dm-step.done u { opacity: 1; transform: scale(1); }
.dm-step.done { border-color: rgba(61, 220, 151, 0.25); background: rgba(61, 220, 151, 0.045); }

/* meter (pool) */
.dm-meterrow { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; }
.dm-meterrow > span { color: var(--faint); font-size: 0.7rem; flex: none; }
.dm-meterrow b { color: var(--ink); font-size: 0.76rem; font-variant-numeric: tabular-nums; flex: none; min-width: 42px; text-align: right; }
.dm-meter { flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); overflow: hidden; }
.dm-meter i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #197aee, #00a7f5); transition: width 0.2s linear; }

/* chips + toast */
.dm-chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 5px 12px; color: var(--faint); font-size: 0.7rem;
  opacity: 0.45; transition: opacity 0.35s, border-color 0.35s, color 0.35s; max-width: 100%;
}
.dm-chip.on { opacity: 1; border-color: rgba(61, 220, 151, 0.35); color: var(--good); }
.dm-toast {
  grid-column: 1 / -1; justify-self: end;
  display: flex; align-items: center; gap: 8px;
  background: #17121f; border: 1px solid rgba(61, 220, 151, 0.35); border-radius: 12px;
  padding: 9px 14px; font-size: 0.76rem; color: var(--ink); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(10px); transition: opacity 0.35s ease, transform 0.4s var(--ease-spring);
}
.dm-toast i { color: var(--good); display: grid; place-items: center; }
.dm-toast.on { opacity: 1; transform: translateY(0); }

/* fake cursor */
.dm-cursor {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  transform: translate(40px, 40px); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
.dm-cursor .dm-ripple {
  position: absolute; left: -7px; top: -7px; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75); opacity: 0; transform: scale(0.3);
}
.dm-cursor.click .dm-ripple { animation: dm-ripple 0.38s ease-out; }
@keyframes dm-ripple { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.15); } }

/* vesting ring */
.dm-center { display: flex; flex-direction: column; }
.dm-ringwrap { position: relative; margin: 4px auto 10px; width: 132px; height: 132px; }
.dm-ringtxt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dm-ringtxt b { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; color: var(--ink); }
.dm-ringtxt span { color: var(--faint); font-size: 0.62rem; max-width: 90px; line-height: 1.4; }
.dm-steps text { font-family: var(--font-body); }
.dm-cliffdot, .dm-clifflbl { opacity: 0; transition: opacity 0.4s ease; }

/* data room files + extraction */
.dm-file {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px;
  border: 1px solid var(--line-soft); margin-bottom: 5px; background: rgba(255, 255, 255, 0.015);
  opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.45s var(--ease-out);
}
.dm-file.in { opacity: 1; transform: none; }
.dm-file i { color: var(--faint); display: grid; place-items: center; flex: none; }
.dm-file b { color: var(--ink); font-weight: 550; font-size: 0.74rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-extract { margin-top: 12px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.dm-field { display: flex; align-items: baseline; gap: 10px; padding: 4px 2px; }
.dm-field span { color: var(--faint); font-size: 0.7rem; min-width: 88px; flex: none; }
.dm-field b { color: var(--ink); font-size: 0.76rem; font-variant-numeric: tabular-nums; min-height: 1.2em; }
.dm-field b:not(:empty)::after { content: ""; display: inline-block; width: 1px; height: 0.9em; background: var(--accent); margin-left: 2px; vertical-align: -1px; animation: dm-caret 0.8s steps(1) infinite; }
@keyframes dm-caret { 50% { opacity: 0; } }
.dm-score { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 8px; }
.dm-score b { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--ink); }
.dm-score b i { font-style: normal; font-size: 1rem; color: var(--faint); font-weight: 600; }
.dm-score span { color: var(--faint); font-size: 0.74rem; }
.dm-scorebar { margin-bottom: 12px; }
.dm-check { display: flex; align-items: center; gap: 9px; padding: 6px 2px; color: var(--faint); font-size: 0.76rem; transition: color 0.3s; }
.dm-check u { width: 17px; height: 17px; border-radius: 6px; flex: none; display: grid; place-items: center; color: transparent; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-soft); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.dm-check.on { color: var(--muted); }
.dm-check.on u { background: rgba(61, 220, 151, 0.15); border-color: rgba(61, 220, 151, 0.4); color: var(--good); }

/* waterfall slider + cascade */
.dm-sliderrow { display: flex; align-items: center; gap: 14px; padding: 4px 4px 16px; }
.dm-sliderrow > span { color: var(--faint); font-size: 0.72rem; flex: none; }
.dm-sliderrow b { color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; min-width: 58px; text-align: right; }
.dm-slider { position: relative; flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); }
.dm-slidefill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #197aee, #00a7f5); }
.dm-handle {
  position: absolute; top: 50%; left: calc(60% - 8px); width: 18px; height: 18px; border-radius: 50%;
  transform: translateY(-50%); background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(25, 122, 238, 0.3);
  transition: box-shadow 0.25s;
}
.dm-handle.grab { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 0 7px rgba(25, 122, 238, 0.4); }
.dm-wf { display: flex; gap: 10px; align-items: flex-end; height: 196px; padding: 0 4px; }
.dm-wfslot { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.dm-wfbar { width: min(38px, 100%); border-radius: 5px 5px 3px 3px; }
.dm-wfbar.hl { box-shadow: 0 0 18px rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.34) !important; }
.dm-wfval { color: var(--ink); font-size: 0.72rem; font-weight: 650; font-variant-numeric: tabular-nums; margin-bottom: 5px; }
.dm-wfslot span { color: var(--faint); font-size: 0.64rem; margin-top: 7px; text-align: center; line-height: 1.3; }
.dm-wfnote { margin: 14px 4px 0; }
.dm-wfnote b { color: inherit; font-variant-numeric: tabular-nums; }

/* overview scene */
.dm-ovbody { display: grid; gap: 14px; }
.dm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dm-kpi {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.018) 60%);
  border: 1px solid var(--line-soft); border-radius: 13px; padding: 12px 14px; min-width: 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity 0.55s ease, transform 0.6s var(--ease-out);
}
.dm-kpi.in { opacity: 1; transform: none; }
.dm-kpi span { display: block; color: var(--faint); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-kpi b { display: block; font-family: var(--font-display); font-size: 1.32rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; }
.dm-kpi u { display: block; text-decoration: none; color: var(--faint); font-size: 0.64rem; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-owngrid { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.dm-donutwrap { position: relative; width: 150px; height: 150px; }
.dm-donuttxt { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dm-donuttxt span { color: var(--faint); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.dm-donuttxt b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dm-donuttxt.dm-rise { opacity: 0; transform: translateY(5px); transition: opacity 0.5s ease, transform 0.55s var(--ease-out); }
.dm-donuttxt.dm-rise.in { opacity: 1; transform: none; }
.dm-hrows { min-width: 0; }
.dm-hrow { padding: 5px 0; opacity: 0; transform: translateY(9px); transition: opacity 0.5s ease, transform 0.55s var(--ease-out); }
.dm-hrow.in { opacity: 1; transform: none; }
.dm-hmeta { display: flex; align-items: center; gap: 9px; min-width: 0; }
.dm-hmeta i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dm-hmeta b { color: var(--ink); font-weight: 550; font-size: 0.78rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-hmeta u { text-decoration: none; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; font-size: 0.78rem; margin-left: auto; flex: none; }
.dm-hbar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); margin: 5px 0 3px 17px; overflow: hidden; }
[dir="rtl"] .dm-hbar { margin: 5px 17px 3px 0; }
[dir="rtl"] .dm-bar span { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .dm-hmeta u { margin-left: 0; margin-right: auto; }
.dm-hbar i { display: block; height: 100%; border-radius: 999px; width: 0; }
.t-founder { background: rgba(25, 122, 238, 0.16); color: #5fc6ff; }
.t-vc { background: rgba(248, 25, 211, 0.13); color: #ff7dec; }
.t-angel { background: rgba(0, 167, 245, 0.14); color: #62f0d1; }
.t-ent { background: rgba(255, 255, 255, 0.07); color: var(--muted); }
.dm-tl { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding-top: 6px; }
.dm-tlline { position: absolute; top: 13px; left: 12.5%; right: 12.5%; height: 2px; background: rgba(255, 255, 255, 0.07); border-radius: 999px; }
.dm-tlline i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #197aee, #00a7f5 55%, #f819d3); }
.dm-tlnode { text-align: center; min-width: 0; }
.dm-tlnode i {
  display: block; width: 14px; height: 14px; border-radius: 50%; margin: 0 auto 7px;
  background: rgba(255, 255, 255, 0.08); border: 2px solid rgba(255, 255, 255, 0.14);
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; position: relative; z-index: 1;
}
.dm-tlnode.on i { background: #197aee; border-color: rgba(115, 189, 255, 0.55); box-shadow: 0 0 12px rgba(25, 122, 238, 0.4); }
.dm-tlnode.plan.on i { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.3); box-shadow: none; }
.dm-tlnode b { display: block; color: var(--ink); font-size: 0.7rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-tlnode span { display: block; color: var(--faint); font-size: 0.62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* v3.3 scene family — shared pieces for the per-feature demos */
.dm-grid1 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.dm-badge {
  font-style: normal; border-radius: 6px; padding: 1px 7px; font-size: 0.62rem; font-weight: 700;
  background: rgba(25, 122, 238, 0.16); color: #5fc6ff; white-space: nowrap; flex: none;
}
.dm-badge.amber { background: rgba(255, 170, 22, 0.14); color: #ffc45e; }
.dm-badge.teal { background: rgba(0, 167, 245, 0.14); color: #62f0d1; }
.dm-badge.grey { background: rgba(255, 255, 255, 0.07); color: var(--muted); }
.dm-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--line-soft); margin-top: 8px; padding: 9px 2px 1px;
}
.dm-total span { color: var(--faint); font-size: 0.7rem; }
.dm-total b { color: var(--ink); font-family: var(--font-display); font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; transition: opacity 0.4s ease; }
.dm-diff { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line-soft); margin-bottom: 4px; background: rgba(255, 255, 255, 0.015); opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.45s var(--ease-out); }
.dm-diff.in { opacity: 1; transform: none; }
.dm-diff b { color: var(--ink); font-weight: 550; font-size: 0.74rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-diff del { text-decoration: none; color: var(--faint); font-size: 0.72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-diff ins { text-decoration: none; color: #62f0d1; font-size: 0.72rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-diff .dm-arrow { color: var(--faint); font-size: 0.66rem; flex: none; }
.dm-conf { font-style: normal; border-radius: 999px; padding: 0 7px; font-size: 0.62rem; font-weight: 650; background: rgba(0, 167, 245, 0.13); color: #62f0d1; flex: none; font-variant-numeric: tabular-nums; transition: opacity 0.35s ease; }
.dm-conf.low { background: rgba(255, 170, 22, 0.15); color: #ffc45e; }
.dm-tabbar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.dm-tab {
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px 11px;
  color: var(--faint); font-size: 0.68rem; font-weight: 600; transition: color 0.25s, border-color 0.25s, background 0.25s;
}
.dm-tab.on { color: var(--ink); border-color: rgba(25, 122, 238, 0.5); background: rgba(25, 122, 238, 0.1); }
.dm-flow { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 6px 0 10px; }
.dm-flownode {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-soft);
  border-radius: 11px; padding: 7px 13px; color: var(--faint); font-size: 0.74rem; font-weight: 600;
  background: rgba(255, 255, 255, 0.025);
  transition: color 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
.dm-flownode.on {
  color: var(--ink); border-color: rgba(25, 122, 238, 0.5); background: rgba(25, 122, 238, 0.1);
  box-shadow: 0 0 14px rgba(25, 122, 238, 0.18);
}
.dm-flowarrow { position: relative; flex: none; width: 46px; height: 2px; background: rgba(255, 255, 255, 0.1); border-radius: 999px; overflow: hidden; }
.dm-flowarrow i { position: absolute; inset: 0; width: 40%; border-radius: 999px; background: linear-gradient(90deg, transparent, #197aee); transform: translateX(-120%); }
.dm-flowarrow.go i { animation: dm-flow 1s linear infinite; }
@keyframes dm-flow { to { transform: translateX(300%); } }
.dm-mbars { display: flex; align-items: flex-end; gap: 6px; height: 88px; padding: 2px 2px 0; }
.dm-mbars i { flex: 1; border-radius: 4px 4px 2px 2px; min-height: 3px;
  background: linear-gradient(180deg, rgba(25, 122, 238, 0.85), rgba(25, 122, 238, 0.35));
  transition: height 0.3s var(--ease-out), opacity 0.3s, background 0.3s; }
.dm-mbars i:last-child { background: linear-gradient(180deg, #00a7f5, rgba(0, 167, 245, 0.35)); }
.dm-mbars i.out { opacity: 0.18; background: rgba(255, 255, 255, 0.25); }
.dm-mlbls { display: flex; gap: 4px; padding: 4px 2px 0; }
.dm-mlbls span { flex: 1; text-align: center; color: var(--faint); font-size: 0.56rem; white-space: nowrap; overflow: hidden; }
.dm-sig { display: block; margin: 2px auto 0; }
.dm-sig path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dm-paper {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px;
  color: var(--muted); font-size: 0.76rem; line-height: 1.85;
}
.dm-paper h5 { color: var(--ink); font-size: 0.8rem; font-weight: 650; margin: 0 0 6px; letter-spacing: 0.01em; }
.dm-mchip {
  display: inline-block; border-radius: 6px; padding: 0 6px; margin: 0 1px;
  background: rgba(25, 122, 238, 0.14); color: #5fc6ff; font-size: 0.7rem; font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; transition: background 0.3s, color 0.3s;
}
.dm-mchip.set { background: rgba(0, 167, 245, 0.13); color: #62f0d1; }
.dm-gaugelbl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 2px 0 6px; }
.dm-gaugelbl span { color: var(--faint); font-size: 0.7rem; }
.dm-gaugelbl b { color: var(--ink); font-size: 0.82rem; font-variant-numeric: tabular-nums; font-weight: 650; }
.dm-limit { position: relative; }
.dm-limit::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 80%; width: 2px; border-radius: 2px; background: rgba(255, 170, 22, 0.7); }
.dm-vrow { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-radius: 9px; margin-bottom: 4px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.015); opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.45s var(--ease-out), border-color 0.3s, background 0.3s; }
.dm-vrow.in { opacity: 1; transform: none; }
.dm-vrow.hl { border-color: rgba(25, 122, 238, 0.45); background: rgba(25, 122, 238, 0.08); }
.dm-vrow b { color: var(--ink); font-weight: 550; font-size: 0.74rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-vrow u { text-decoration: none; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.72rem; white-space: nowrap; }
.dm-vrow em:not(.dm-tag):not(.dm-badge) { font-style: normal; color: var(--faint); font-size: 0.66rem; flex: none; font-variant-numeric: tabular-nums; }
.split-visual [data-demo] { width: 100%; }
/* the wide overview scene, when placed at split half-width, stacks like mobile */
.split-visual .dm-kpis { grid-template-columns: repeat(2, 1fr); }
.split-visual .dm-owngrid { grid-template-columns: 1fr; justify-items: center; }
.split-visual .dm-hrows { width: 100%; }
.split-visual .dm-tl { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
.split-visual .dm-tlline { display: none; }
/* at half width the funding rail makes the overview card too tall; drop it */
.split-visual [data-demo="overview"] .dm-ovbody > .dm-panel:last-of-type { display: none; }
.split-visual .dm-grid2 { grid-template-columns: 1fr; }

/* demo layout helpers */
.demo-stage { max-width: 880px; margin: 0 auto; }
.demo-cap { text-align: center; color: var(--faint); font-size: 0.8rem; margin: 12px auto 0; max-width: 46em; }
.demo-cap a { color: var(--muted); }
@media (max-width: 860px) {
  .dm-grid2 { grid-template-columns: 1fr; }
  .dm-cursor { display: none; }
  .dm-kpis { grid-template-columns: repeat(2, 1fr); }
  .dm-owngrid { grid-template-columns: 1fr; justify-items: center; }
  .dm-hrows { width: 100%; }
  .dm-tl { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .dm-tlline { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-cursor, .dm-toast { transition: none; }
  .dm-cursor { display: none; }
  .dm-scan { animation: none; }
  .dm-field b:not(:empty)::after { display: none; }
  .dm-file { opacity: 1; transform: none; transition: none; }
  .dm-hrow, .dm-kpi, .dm-donuttxt.dm-rise { opacity: 1; transform: none; transition: none; }
  .dm-diff, .dm-vrow { opacity: 1; transform: none; transition: none; }
  .dm-flowarrow.go i, .dm-flowarrow i { animation: none; }
}

/* ==========================================================================
   v3.4 microinteractions — small, consistent, blue
   ========================================================================== */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid rgba(25, 122, 238, 0.75); outline-offset: 2px; border-radius: 6px;
}
.btn:focus-visible { outline-offset: 3px; }
/* link arrows glide, never jump */
.card-link, .btn { will-change: transform; }
/* checkbox-style list ticks brighten on row hover */
.split-copy ul li { transition: color 0.2s; }
.split-copy ul li:hover { color: var(--ink); }
.split-copy ul li:hover::after { border-color: #8fd4ff; }
/* stat numbers get a soft glow on hover */
.stat { transition: transform 0.25s var(--ease-out); }
.stat:hover { transform: translateY(-2px); }
/* pills carry a faint blue wash on hover instead of plain white */
.pill-item:hover { border-color: rgba(25, 122, 238, 0.4); background: rgba(25, 122, 238, 0.07); }
/* demo cards lift very slightly under the pointer, like the shots did */
.split-visual .demo { transition: transform 0.5s var(--ease-out), box-shadow 0.5s ease; }
.split-visual:hover .demo { transform: translateY(-6px); box-shadow: 0 34px 96px rgba(0, 0, 0, 0.6), 0 0 60px rgba(25, 122, 238, 0.08); }
@media (prefers-reduced-motion: reduce) {
  .split-visual .demo, .split-visual:hover .demo { transform: none; transition: none; }
  .showcase-tab, .showcase-tab:hover, [dir="rtl"] .showcase-tab:hover { transform: none; }
  .stat, .stat:hover { transform: none; }
}

/* --- responsive additions ----------------------------------------------------- */
@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-item, .bento-wide, .bento-half, .bento-full { grid-column: span 2; }
  .showcase { grid-template-columns: 1fr; }
  .showcase-tabs { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
  .showcase-tab { flex: none; max-width: 260px; }
}
@media (max-width: 620px) {
  .bento { grid-template-columns: 1fr; }
  .bento-item, .bento-wide, .bento-half, .bento-full { grid-column: span 1; min-height: 0; }
  .flow { grid-template-columns: 1fr; }
  .hero-stage { margin-top: 36px; }
  .hero-reflection { display: none; }
  .vz { padding: 18px 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .hero-stage .shot, .hero-stage:hover .shot { transform: none; transition: none; }
  .vz .vz-bar, .vz.in .vz-bar, .vz .vz-barh, .vz.in .vz-barh { transform: none; animation: none; }
  .vz .vz-path, .vz.in .vz-path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .vz .vz-fade, .vz.in .vz-fade { opacity: 1; animation: none; }
  .vz .vz-arc { transition: none; }
  .bento-item, .flow-step, .shot, .split-visual .shot, .showcase-pane .shot { transition: none; animation: none; }
}

/* ======================================================================
   WriteX editor mockups — synthetic app UI (no screenshots needed).
   A framed app window with an optional real shell (sidebar nav, toolbar,
   status strip) holding finance widgets: paper invoices, dark ledger
   statements, animated bank-reconciliation matches, sparkline KPI tiles,
   a chart-of-accounts tree, and activity feeds. Internal layout is LTR.
   ====================================================================== */
.appframe {
  position: relative;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 120% at 50% -10%, rgba(31, 139, 240, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.06);
  overflow: hidden;
  container-type: inline-size;
  direction: ltr;
  text-align: left;
}
.appframe i { font-style: normal; }
.appframe-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 14px; border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,0.02);
}
.af-app {
  width: 20px; height: 20px; border-radius: 6px; flex: none;
  display: grid; place-items: center; color: #040b16;
  background: var(--brand-grad);
}
.appframe-title { font-size: 0.74rem; color: var(--muted); font-weight: 600; letter-spacing: 0.01em; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-winctl { display: flex; gap: 4px; flex: none; }
.af-winctl i { width: 22px; height: 18px; border-radius: 5px; display: grid; place-items: center; font-size: 0.58rem; font-style: normal; color: var(--faint); background: rgba(255,255,255,0.03); }
.af-winctl i:last-child { color: rgba(255, 143, 143, 0.75); }
.appframe-body { padding: 16px; min-width: 0; }

/* App shell: sidebar + main (activates when appFrame gets a nav) */
.af-shell { display: grid; grid-template-columns: 152px minmax(0, 1fr); }
.af-side {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 8px 10px; border-right: 1px solid var(--line-soft);
  background: rgba(0, 0, 0, 0.18); font-size: 0.72rem;
}
.af-ws { display: flex; align-items: center; gap: 7px; padding: 2px 6px 8px; border-bottom: 1px solid var(--line-soft); }
.af-ws b { font-size: 0.68rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.af-ws-dot {
  width: 18px; height: 18px; border-radius: 6px; flex: none;
  display: grid; place-items: center; font-size: 0.62rem; font-weight: 700; color: #040b16;
  background: var(--brand-grad);
}
.af-nav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.af-nav span, .af-nav button, .af-side-foot {
  display: flex; align-items: center; gap: 8px; padding: 4.5px 8px;
  border-radius: 8px; color: var(--faint); white-space: nowrap;
}
.af-nav button { border: 0; background: none; font: inherit; text-align: left; cursor: pointer; width: 100%; transition: color 0.18s ease, background 0.18s ease; }
.af-nav button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.af-nav button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.af-nav span svg, .af-nav button svg, .af-side-foot svg { flex: none; opacity: 0.85; }
.af-nav span.on, .af-nav button.on { color: var(--accent); background: rgba(31, 139, 240, 0.12); box-shadow: inset 2px 0 0 var(--brand-a); }
.af-side-foot { border-top: 1px solid var(--line-soft); padding-top: 8px; margin-top: 4px; }
.af-main { min-width: 0; display: flex; flex-direction: column; }
.af-main .appframe-body { flex: 1; }
@container (max-width: 519px) { .af-side { display: none; } .af-shell { grid-template-columns: 1fr; } }

/* Breadcrumb toolbar + actions */
.af-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 16px; border-bottom: 1px solid var(--line-soft); font-size: 0.7rem;
}
.af-crumb { display: flex; align-items: center; gap: 6px; color: var(--faint); min-width: 0; white-space: nowrap; overflow: hidden; }
.af-crumb b { font-weight: 400; opacity: 0.5; }
.af-crumb span:last-child { color: var(--ink); font-weight: 600; }
.af-actions { display: flex; gap: 6px; flex: none; }
.af-act { padding: 3.5px 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.af-act.pri { background: var(--brand-grad); border-color: transparent; color: #040b16; }

/* Interactive shell: pre-rendered panes, demos.js switches them */
.af-pane { display: none; flex: 1; flex-direction: column; min-width: 0; }
.af-pane.on { display: flex; }
.af-pane .appframe-body { flex: 1; }
.af-live .af-pane.on { animation: af-pane-in 0.32s var(--ease-out); }
@keyframes af-pane-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* micro-interactions: rows and tiles respond to the pointer */
.af-live .led-kpi, .af-live .mf-row, .af-live .rec-row, .af-live .af-tr:not(.af-th) { transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease; }
.af-live .led-kpi:hover { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.14); transform: translateY(-1px); }
.af-live .mf-row:hover span { color: #fff; }
.af-live .rec-row:hover { background: rgba(255, 255, 255, 0.035); }
.af-live .af-act { cursor: pointer; transition: transform 0.15s var(--ease-out), box-shadow 0.2s ease, border-color 0.18s ease; }
.af-live .af-act:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.22); }
.af-live .af-act.pri:hover { box-shadow: 0 6px 18px rgba(31, 139, 240, 0.35); border-color: transparent; }

/* newest feed item: live pulse */
.mf-row.live i { animation: mf-pulse 2.2s ease-out infinite; }
@keyframes mf-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(61, 220, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); } }

/* records table (invoice lists etc.) */
.af-table { font-size: 0.74rem; border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; }
.af-tr { display: grid; grid-template-columns: 1.05fr 1.5fr 0.9fr 0.8fr; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line-soft); align-items: center; }
.af-tr:last-child { border-bottom: none; }
.af-tr span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-tr span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.af-th { background: rgba(255, 255, 255, 0.028); color: var(--faint); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; }
.af-chip { font-style: normal; font-size: 0.62rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.af-chip.paid { color: #00a7f5; background: rgba(31, 139, 240, 0.13); }
.af-chip.sent { color: #79b3ff; background: rgba(59, 130, 246, 0.13); }
.af-chip.over { color: #ffc555; background: rgba(199, 125, 6, 0.15); }

/* "try me" nudge inside the status strip */
.af-hint { font-style: normal; color: var(--faint); }
.af-hint::before { content: "✦ "; color: var(--accent); }

/* every shell control is a real button */
.af-nav .af-side-foot, button.af-side-foot { border: 0; background: none; font: inherit; text-align: left; cursor: pointer; width: 100%; transition: color 0.18s ease; }
button.af-side-foot:hover { color: var(--ink); }
.af-act { background: none; font: inherit; cursor: pointer; }
.af-act.af-press, .af-nav button.af-press { transform: scale(0.96); }

.af-live .af-window { position: relative; }

/* demo toast (auto-tour + button feedback) */
.af-toast {
  position: absolute; right: 14px; bottom: 44px; z-index: 7;
  display: flex; align-items: center; gap: 8px; max-width: min(320px, 80%);
  background: #10231a; border: 1px solid rgba(61, 220, 151, 0.4); border-radius: 12px;
  padding: 9px 14px; font-size: 0.76rem; color: var(--ink);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s var(--ease-out);
}
.af-toast i { color: var(--good); display: grid; place-items: center; flex: none; }
.af-toast.on { opacity: 1; transform: translateY(0); }

/* fake cursor for the self-driving tour */
.af-cursor {
  position: absolute; left: 0; top: 0; z-index: 8; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
  transition: opacity 0.4s ease;
}
.af-cursor.on { opacity: 1; }
.af-cursor .af-ripple {
  position: absolute; left: -7px; top: -7px; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.75); opacity: 0; transform: scale(0.3);
}
.af-cursor.click .af-ripple { animation: af-ripple 0.38s ease-out; }
@keyframes af-ripple { 0% { opacity: 0.9; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.15); } }

/* Match-all: suggest row settles into a matched one */
.rec-row.matching { transition: border-color 0.5s ease, background 0.5s ease; border-color: rgba(0, 167, 245, 0.4); background: rgba(0, 167, 245, 0.05); }
.rec-row.just-matched { animation: rec-settle 0.6s var(--ease-out); }
@keyframes rec-settle { 0% { transform: scale(0.985); } 55% { transform: scale(1.008); } 100% { transform: none; } }

/* --- module color identities: each sidebar icon keeps its own hue ---------- */
.af-nav [data-k] svg { opacity: 1; }
.af-nav [data-k="dash"] svg { color: #00a7f5; }
.af-nav [data-k="sales"] svg { color: #79b3ff; }
.af-nav [data-k="purchases"] svg { color: #ffb95e; }
.af-nav [data-k="banking"] svg { color: #6ee7d8; }
.af-nav [data-k="accounting"] svg { color: #b7aaff; }
.af-nav [data-k="inventory"] svg { color: #ffd166; }
.af-nav [data-k="payroll"] svg { color: #ff9ecb; }
.af-nav [data-k="projects"] svg { color: #8ad6ff; }
.af-nav [data-k="reports"] svg { color: #c3f461; }
.af-nav [data-k="automation"] svg { color: #ffcf6b; }
.af-nav span.on svg, .af-nav button.on svg { color: inherit; }

/* KPI tiles pick up tone accents */
.led-kpi { border-top: 2px solid transparent; }
.led-kpi:nth-child(4n+1) { border-top-color: rgba(0, 167, 245, 0.5); }
.led-kpi:nth-child(4n+2) { border-top-color: rgba(121, 179, 255, 0.5); }
.led-kpi:nth-child(4n+3) { border-top-color: rgba(183, 170, 255, 0.5); }
.led-kpi:nth-child(4n+4) { border-top-color: rgba(255, 209, 102, 0.55); }

/* paper document + dark side rail (payment timeline etc.) */
.doc-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.doc-split .doc-mock { max-width: 560px; }
.doc-rail { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 18px 20px 14px; }
.doc-rail .vz-title { margin-bottom: 6px; }
.doc-rail-note { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); font-size: 0.72rem; color: var(--faint); line-height: 1.7; }
.doc-rail-note b { color: var(--ink); font-variant-numeric: tabular-nums; }
@container (max-width: 620px) { .doc-split { grid-template-columns: 1fr; } .doc-split .doc-mock { max-width: none; } }

@media (prefers-reduced-motion: reduce) {
  .af-live .af-pane.on { animation: none; }
  .mf-row.live i { animation: none; }
}

/* Status strip (structured caption under the body) */
.af-status {
  padding: 8px 16px; border-top: 1px solid var(--line-soft); font-size: 0.72rem;
  color: var(--muted); background: rgba(0, 0, 0, 0.14);
}
.af-status b { color: var(--accent); font-weight: 600; }

/* Freestanding caption under a mock */
.mock-note { font-size: 0.78rem; color: var(--muted); margin: 10px 2px 0; }
.appframe .mock-note { margin: 12px 2px 0; }

/* Document (invoice / bill) mockup — rendered as paper */
.doc-mock {
  background: linear-gradient(180deg, #fdfdfa, #f2f1ea);
  color: #22312a; border: 1px solid rgba(8, 30, 20, 0.25); border-radius: 12px;
  padding: 18px 22px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 8px 18px rgba(0, 0, 0, 0.32),
    0 28px 68px rgba(0, 0, 0, 0.5),
    0 1.5px 0 rgba(255, 255, 255, 0.09) inset;
}
.doc-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid rgba(8, 30, 20, 0.1); }
.doc-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.doc-brand b { font-family: var(--font-display); font-size: 0.86rem; color: #14231b; display: block; line-height: 1.2; }
.doc-brand span { font-size: 0.64rem; color: #7b857e; display: block; }
.doc-logo {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: 0.78rem; color: #fff;
  background: linear-gradient(135deg, #197aee, #0c7a48);
}
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.doc-head h4 { font-size: 0.98rem; margin: 0 0 2px; color: #14231b; letter-spacing: 0.01em; }
.doc-num { color: #0c7a48; }
.doc-head .doc-sub { font-size: 0.72rem; color: #66716a; }
.doc-chips { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; flex: none; }
.doc-chips span { font-size: 0.62rem; color: #66716a; background: rgba(8, 30, 20, 0.05); border: 1px solid rgba(8, 30, 20, 0.09); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.doc-status { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 999px; flex: none; }
.doc-status.paid { color: #0c7a48; background: rgba(31, 139, 240, 0.14); border: 1px solid rgba(31, 139, 240, 0.35); }
.doc-status.sent { color: #1d5fae; background: rgba(59, 130, 246, 0.1); border: 1px solid rgba(59, 130, 246, 0.3); }
.doc-status.over { color: #9a6a00; background: rgba(199, 125, 6, 0.12); border: 1px solid rgba(199, 125, 6, 0.35); }
.doc-lines { display: flex; flex-direction: column; gap: 7px; }
.doc-line { display: grid; grid-template-columns: 1fr auto; gap: 10px; font-size: 0.8rem; padding: 6px 0; border-bottom: 1px dashed rgba(8, 30, 20, 0.13); }
.doc-line span:last-child { font-variant-numeric: tabular-nums; color: #22312a; }
.doc-line .muted { color: #57625b; }
.doc-total { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 2px solid rgba(8, 30, 20, 0.55); font-weight: 700; color: #14231b; }
.doc-total .big { font-size: 1.22rem; font-variant-numeric: tabular-nums; }
.doc-foot { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(8, 30, 20, 0.1); font-size: 0.66rem; color: #7b857e; }

/* Mini financial statement (P&L / balance sheet) — dark ledger */
.stmt { font-size: 0.82rem; }
.stmt-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.stmt-row span:last-child { font-variant-numeric: tabular-nums; }
.stmt-row.sub { color: var(--muted); padding-left: 14px; font-size: 0.78rem; }
.stmt-row.tot { font-weight: 700; border-bottom: none; border-top: 1.5px solid var(--line); margin-top: 4px; }
.stmt-row.tot.good span:last-child { color: #00a7f5; }

/* Bank reconciliation row (matched / suggested) with flow connector */
.rec-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 12px; margin-bottom: 8px; background: rgba(255,255,255,0.015); }
.rec-row .rec-match { display: flex; align-items: center; justify-content: center; gap: 2px; }
.rec-chip { font-size: 0.7rem; color: var(--ink); min-width: 0; }
.rec-chip .rec-amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.rec-chip .rec-meta { color: var(--faint); font-size: 0.66rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-link { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(0, 167, 245, 0.14); color: #00a7f5; }
.rec-flow { width: 26px; height: 8px; overflow: visible; }
@container (max-width: 600px) { .rec-flow { width: 12px; } .rec-row { gap: 8px; } }
.rec-flow line { stroke: rgba(0, 167, 245, 0.5); stroke-width: 1.6; stroke-dasharray: 0.12 0.1; }
.rec-row.matched { border-color: rgba(0, 167, 245, 0.28); }
.rec-row.matched .rec-flow line { animation: rec-flow-move 1.6s linear infinite; }
@keyframes rec-flow-move { to { stroke-dashoffset: -0.44; } }
.rec-row.suggest { border-style: dashed; border-color: rgba(255, 197, 85, 0.3); }
.rec-row.suggest .rec-link { background: rgba(255, 197, 85, 0.14); color: var(--warn); }
.rec-row.suggest .rec-flow line { stroke: rgba(255, 197, 85, 0.4); }

/* KPI ledger tiles (dashboard) with sparklines */
.led-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.led-kpi { position: relative; overflow: hidden; background: rgba(255,255,255,0.02); border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; }
.led-kpi .k { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.led-kpi .v { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 3px; font-family: var(--font-display); }
.led-kpi .d { font-size: 0.7rem; margin-top: 2px; }
.led-kpi .d.up { color: #00a7f5; }
.led-kpi .d.down { color: #ff8f8f; }
.led-spark { position: absolute; right: 10px; bottom: 10px; width: 84px; height: 22px; }
.led-spark .sp-fill { fill: rgba(31, 139, 240, 0.14); }
.led-spark .sp-line { fill: none; stroke: #00a7f5; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: spark-draw 1.3s var(--ease-out) 0.45s forwards; }
.reveal:not(.in) .led-spark .sp-line { animation-play-state: paused; }
@keyframes spark-draw { to { stroke-dashoffset: 0; } }
@container (max-width: 340px) { .led-spark { display: none; } }

/* Chart of accounts / list tree */
.coa { font-size: 0.8rem; }
.coa-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.coa-row .coa-code { color: var(--faint); font-variant-numeric: tabular-nums; font-size: 0.72rem; width: 44px; }
.coa-row .coa-bal { font-variant-numeric: tabular-nums; color: var(--muted); }
.coa-row.head { color: var(--accent); font-weight: 600; border-bottom-color: var(--line); }
.coa-row.indent .coa-name { padding-left: 16px; color: var(--muted); }

/* Activity feed */
.mini-feed { display: flex; flex-direction: column; }
.mf-row { display: flex; align-items: baseline; gap: 9px; padding: 7px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.78rem; }
.mf-row:last-child { border-bottom: none; }
.mf-row i { width: 7px; height: 7px; border-radius: 50%; flex: none; align-self: center; background: var(--faint); }
.mf-row.ok i { background: var(--good); box-shadow: 0 0 8px rgba(61, 220, 151, 0.5); }
.mf-row.warn i { background: var(--warn); }
.mf-row span { color: var(--ink); flex: 1; min-width: 0; }
.mf-row em { font-style: normal; color: var(--faint); font-size: 0.68rem; white-space: nowrap; }

/* Hero dashboard: chart + activity feed side by side */
.hero-grid2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: stretch; }
.hero-feed { background: var(--panel); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 18px 20px 10px; }
.hero-feed .vz-title { margin-bottom: 6px; }
@container (max-width: 620px) { .hero-grid2 { grid-template-columns: 1fr; } }

/* Mockup motion respects reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .rec-row.matched .rec-flow line { animation: none; }
  .led-spark .sp-line, .reveal:not(.in) .led-spark .sp-line { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
}
/* RTL pages: frames stay LTR internally (like the app), notes flow with page */
[dir="rtl"] .mock-note { direction: rtl; }

/* ---- Pricing cards ---------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1160px) { .price-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
.price-card { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow-card); }
.price-card.price-featured { border-color: rgba(31, 139, 240, 0.5); background: linear-gradient(180deg, rgba(31, 139, 240, 0.07), rgba(255,255,255,0.02)); box-shadow: var(--shadow-pop); }
.price-flag { position: absolute; top: -11px; left: 24px; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #040b16; background: linear-gradient(100deg, #197aee, #00a7f5); padding: 4px 11px; border-radius: 999px; }
.price-card h3 { font-size: 1.3rem; margin: 0 0 8px; }
.price-amount { font-family: var(--font-display); font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
.price-amount span { font-size: 0.9rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-blurb { color: var(--muted); font-size: 0.9rem; margin: 8px 0 18px; min-height: 2.6em; }
.btn-block { display: block; text-align: center; width: 100%; }
.price-list { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 10px; }
.price-list li { position: relative; padding-left: 26px; font-size: 0.9rem; color: var(--ink); }
.price-list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 9px; border-left: 2px solid #00a7f5; border-bottom: 2px solid #00a7f5; transform: rotate(-45deg); }
[dir="rtl"] .price-flag { left: auto; right: 24px; }
[dir="rtl"] .price-list li { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .price-list li::before { left: auto; right: 0; }
@media (max-width: 720px) { .price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

/* ==========================================================================
   WriteX domain mocks — editor surface, correction cards, categories,
   score ring, style-guide rules, entity cards, transforms.
   ========================================================================== */

.wx-doc { background: linear-gradient(180deg, #0b1626, #091320); color: #e8ecf6; border: 1px solid rgba(255,255,255,0.09); border-radius: 12px; padding: 20px 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 36px rgba(0,0,0,0.4); font-size: 0.92rem; line-height: 1.85; }
.wx-doc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid rgba(255,255,255,0.09); padding-bottom: 10px; margin-bottom: 12px; }
.wx-doc-head b { font-family: var(--font-display); font-size: 0.95rem; }
.wx-doc-head span { font-size: 0.72rem; color: var(--faint); }
.wx-p { margin: 0 0 10px; }
.wx-p:last-child { margin-bottom: 0; }
.wx-p[dir="rtl"] { font-size: 1.02rem; }
[dir="rtl"] .wx-doc[dir="rtl"],
[dir="rtl"] .wx-p[dir="rtl"] { text-align: start; }

.wx-err { --err: #ff5c8a; background-image: linear-gradient(to right, var(--err), var(--err)); background-repeat: no-repeat; background-size: 100% 2.5px; background-position: 0 100%; padding-bottom: 2px; cursor: pointer; transition: background-color 0.2s; border-radius: 3px 3px 0 0; }
.wx-err:hover { background-color: color-mix(in srgb, var(--err) 14%, transparent); }
.wx-err.fixed { background-image: none; color: #4be3a2; font-weight: 600; }

.wx-fix { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.wx-fix-top { display: flex; align-items: center; gap: 10px; font-size: 0.98rem; flex-wrap: wrap; }
/* the wrong form: dotted underline, never a line through the glyphs
   (a strikethrough over Arabic letterforms makes them unreadable) */
.wx-fix-top s { color: #c9ccd8; text-decoration: none; border-bottom: 1.5px dotted rgba(255, 128, 149, 0.75); padding-bottom: 1px; }
.wx-arrow { color: var(--faint); font-size: 0.85rem; }
.wx-to { color: var(--accent); }
.wx-fix-cat { display: flex; align-items: center; gap: 7px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.wx-fix-cat i { width: 8px; height: 8px; border-radius: 50%; }
.wx-why { margin: 0; font-size: 0.83rem; color: var(--muted); line-height: 1.6; border-inline-start: 2px solid var(--line); padding-inline-start: 10px; }
.wx-fix-actions { display: flex; gap: 14px; align-items: center; margin-top: 2px; }
.wx-accept { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-grad); color: #fff; font-size: 0.78rem; font-weight: 700; border-radius: 8px; padding: 5px 12px; }
.wx-dismiss { font-size: 0.78rem; color: var(--faint); }

.wx-cats { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 190px; }
.wx-cats-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft); font-size: 0.78rem; color: var(--muted); }
.wx-correct-all { background: var(--brand-grad); color: #04121f; font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.wx-cat { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; padding: 4px 0; color: var(--ink); }
.wx-cat i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.wx-cat b { margin-left: auto; font-size: 0.78rem; background: rgba(255,255,255,0.07); border-radius: 999px; min-width: 22px; text-align: center; padding: 1px 6px; }
.wx-cat.zero { opacity: 0.38; }

.wx-score { display: flex; align-items: center; gap: 18px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; }
.wx-ring { --deg: 200deg; width: 86px; height: 86px; border-radius: 50%; background: conic-gradient(#197aee 0deg, #00a7f5 var(--deg), rgba(255,255,255,0.07) var(--deg) 360deg); display: grid; place-items: center; position: relative; flex: none; }
.wx-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--panel-solid); }
.wx-ring b { position: relative; }
.wx-ring b { font-size: 1.6rem; font-family: var(--font-display); line-height: 1; letter-spacing: -0.01em; }
.wx-ring-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: none; }
.wx-ring-label { font-size: 0.63rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); text-align: center; line-height: 1.25; max-width: 104px; }
.wx-score-stats { display: flex; flex-direction: column; gap: 6px; }
.wx-score-stats div { display: flex; justify-content: space-between; gap: 18px; font-size: 0.8rem; }
.wx-score-stats span { color: var(--muted); }

.wx-rule { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; }
.wx-rule-main b { font-size: 0.88rem; }
.wx-rule-main p { margin: 4px 0 0; font-size: 0.78rem; color: var(--muted); line-height: 1.55; }
.wx-rule-tag { display: inline-block; margin-top: 7px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); background: var(--brand-tint); border-radius: 999px; padding: 2px 9px; }
.wx-toggle { width: 34px; height: 20px; border-radius: 999px; background: rgba(255,255,255,0.12); position: relative; flex: none; margin-top: 2px; transition: background 0.2s; }
.wx-toggle i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #cfd2dd; transition: transform 0.2s; }
.wx-toggle.on { background: var(--brand-grad); }
.wx-toggle.on i { transform: translateX(14px); background: #fff; }

.wx-entity { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.wx-entity-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.wx-entity-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-grad); color: #04121f; display: grid; place-items: center; font-weight: 700; font-size: 1rem; flex: none; }
.wx-entity-head b { display: block; font-size: 0.9rem; }
.wx-entity-head span { font-size: 0.7rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.wx-entity p { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.65; }
.wx-entity-more { display: inline-block; margin-top: 9px; font-size: 0.76rem; font-weight: 600; color: var(--accent); }

.wx-transform { background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.wx-transform-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.wx-transform-row { border: 1px solid var(--line-soft); border-radius: 9px; padding: 9px 12px; }
.wx-transform-row .k { display: block; font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; }
.wx-transform-row p { margin: 0; font-size: 0.87rem; line-height: 1.7; }
.wx-transform-row.out { border-color: rgba(0, 167, 245, 0.35); background: var(--brand-tint); }

/* editor + sidebar composition helper */
.wx-editor-split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 720px) { .wx-editor-split { grid-template-columns: 1fr; } }
.wx-side-stack { display: flex; flex-direction: column; gap: 12px; }

/* --- AI agent cards (mirrors the product's agent panel) ------------------- */
.wx-agent { --ag: #1f8bf0; display: flex; align-items: flex-start; gap: 12px; background: var(--panel-solid); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; transition: border-color 0.2s ease, transform 0.2s var(--ease-out); }
.wx-agent:hover { border-color: color-mix(in srgb, var(--ag) 55%, transparent); transform: translateY(-1px); }
.wx-agent-ic { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center; color: var(--ag); background: color-mix(in srgb, var(--ag) 14%, transparent); }
.wx-agent-info b { display: block; font-size: 0.88rem; margin-bottom: 2px; }
.wx-agent-info p { margin: 0; font-size: 0.78rem; color: var(--muted); line-height: 1.55; }
.wx-agent-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 640px) { .wx-agent-grid { grid-template-columns: 1fr; } }

/* --- real product screenshot frames --------------------------------------- */
.real-shot { border-radius: var(--radius-lg); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); }
.real-shot img { display: block; width: 100%; height: auto; }


/* ======================================================================
   Live proofreader — the real WriteX engine on the page.
   Gradient-framed light editor + suggestion rail + hover popup, mirroring
   the product PopupSuggester. Category colors come from the app registry
   (statics/Errors). Fully bidirectional: the editor flips direction per
   text, and the whole widget mirrors when the page locale is Arabic.
   ====================================================================== */
.lc {
  position: relative;
  container-type: inline-size;
  border-radius: 18px;
  padding: 1px;                       /* gradient hairline frame */
  background: linear-gradient(135deg, rgba(0, 167, 245, 0.85), rgba(25, 122, 238, 0.45) 45%, rgba(180, 139, 255, 0.7));
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
  border: 0;
  overflow: visible;
  direction: ltr;
  text-align: start;
}
.lc[dir="rtl"] { direction: rtl; }
.lc-bar, .lc-grid, .lc-status { background: linear-gradient(180deg, #0a1220, #070d18); }
.lc-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 16px; border-radius: 17px 17px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.lc-app {
  width: 22px; height: 22px; border-radius: 7px; flex: none;
  display: grid; place-items: center; color: #04121f; background: var(--brand-grad);
}
.lc-title { font-size: 0.76rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.lc-live {
  display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; flex: none;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #3ddc97;
}
.lc-live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: lc-pulse 2.2s ease-out infinite; }
@keyframes lc-pulse {
  0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(61, 220, 151, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 220, 151, 0); }
}

/* language pills: Auto / Arabic / English / Spanish */
.lc-langs { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); flex: none; }
.lc-lang {
  font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer;
  padding: 4px 12px; border-radius: 999px; border: 0; background: none; color: var(--muted);
  transition: color 0.18s ease, background 0.18s ease;
}
.lc-lang:hover { color: var(--ink); background: rgba(255, 255, 255, 0.07); }
.lc-lang.on { background: var(--brand-grad); color: #04121f; }
.lc-lang:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.lc-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(268px, 1fr); }
@container (max-width: 739px) { .lc-grid { grid-template-columns: 1fr; } }

.lc-editor-col { padding: 18px; min-width: 0; }
.lc-editor {
  background: var(--lc-paper); color: var(--lc-ink);
  border-radius: 14px; padding: 24px 26px; min-height: 236px;
  box-shadow: inset 0 0 0 1px rgba(10, 20, 40, 0.08), 0 10px 26px rgba(0, 0, 0, 0.3);
  font-size: 1.06rem; line-height: 2.15; outline: none; caret-color: #197aee;
  overflow-wrap: break-word;
}
.lc-editor:focus-visible {
  box-shadow: inset 0 0 0 1px rgba(25, 122, 238, 0.45), 0 0 0 3px rgba(25, 122, 238, 0.25), 0 10px 26px rgba(0, 0, 0, 0.3);
}
.lc-editor:empty::before { content: attr(data-placeholder); color: #9aa0b0; }
.lc-editor[dir="rtl"] { font-size: 1.14rem; line-height: 2.3; }

/* the underline: category color beneath DARK text on the light page */
.lc-err {
  --err: #ff407f;
  background: transparent; color: inherit;
  background-image: linear-gradient(to right, var(--err), var(--err));
  background-repeat: no-repeat; background-size: 100% 2px; background-position: 0 100%;
  padding-bottom: 2px; border-radius: 3px 3px 0 0; cursor: pointer;
  transition: background-color 0.18s ease;
}
.lc-err:hover, .lc-err.hot, .lc-err:focus-visible {
  background-color: color-mix(in srgb, var(--err) 18%, transparent);
  outline: none;
}
.lc-hint { margin: 12px 4px 0; font-size: 0.76rem; color: var(--faint); }

/* ---- suggestion rail --------------------------------------------------- */
.lc-side {
  display: flex; flex-direction: column; gap: 11px; min-width: 0;
  padding: 16px; border-inline-start: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(0, 0, 0, 0.22);
}
@container (max-width: 739px) {
  .lc-side { border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); }
}
.lc-side-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.lc-correct-all {
  font: inherit; font-size: 0.74rem; font-weight: 700; cursor: pointer;
  padding: 5px 13px; border-radius: 9px; border: 0;
  background: var(--brand-grad); color: #04121f;
  transition: transform 0.15s var(--ease-out), box-shadow 0.2s ease, opacity 0.2s;
}
.lc-correct-all:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(31, 139, 240, 0.35); }
.lc-correct-all:disabled { opacity: 0.4; cursor: default; }

.lc-cards { display: flex; flex-direction: column; gap: 8px; max-height: 328px; overflow-y: auto; scrollbar-width: thin; padding-inline-end: 3px; }
.lc-card {
  --err: #ff407f;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--err); border-radius: 11px; padding: 11px 13px;
  display: flex; flex-direction: column; gap: 7px; cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.lc-card:hover { background: color-mix(in srgb, var(--err) 9%, rgba(255, 255, 255, 0.04)); }
.lc-card-cat { display: flex; align-items: center; gap: 7px; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.lc-card-cat i { width: 8px; height: 8px; border-radius: 50%; background: var(--err); flex: none; }
.lc-card-fix { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.98rem; }

/* The wrong form, readable on dark. A dotted underline in the category
   color replaces the old red line-through, which crossed the glyphs and
   made Arabic words unreadable. Applies to the legacy wx-fix cards too. */
.lc-from,
.lc-pop-fix s,
.wx-fix-top s {
  color: #c9ccd8;
  text-decoration: none;
  border-bottom: 1.5px dotted color-mix(in srgb, var(--err, #ff8095) 75%, transparent);
  padding-bottom: 1px;
}
.lc-fix-arrow, .wx-arrow { color: var(--faint); font-size: 0.85rem; flex: none; }
[dir="rtl"] > .lc-fix-arrow, .lc-card-fix[dir="rtl"] .lc-fix-arrow { transform: scaleX(-1); }
.lc-apply, .lc-pop-apply {
  font: inherit; font-size: 0.96rem; font-weight: 700; color: #7fc9ff;
  background: rgba(31, 139, 240, 0.14); border: 1px solid rgba(31, 139, 240, 0.28);
  border-radius: 8px; padding: 2px 10px; cursor: pointer;
  transition: background 0.16s, border-color 0.16s, color 0.16s;
}
.lc-apply:hover, .lc-pop-apply:hover { background: rgba(31, 139, 240, 0.28); border-color: rgba(31, 139, 240, 0.55); color: #fff; }
.lc-apply.alt, .lc-pop-apply.alt { font-size: 0.9rem; color: var(--muted); background: rgba(255, 255, 255, 0.05); border-color: var(--line-soft); }
.lc-apply.alt:hover, .lc-pop-apply.alt:hover { color: var(--ink); border-color: var(--line); }
.lc-card-why { margin: 0; font-size: 0.76rem; color: var(--muted); line-height: 1.7; }
.lc-card-actions { display: flex; gap: 12px; align-items: center; }
.lc-accept.lc-apply { font-size: 0.74rem; background: var(--brand-grad); border-color: transparent; color: #04121f; border-radius: 8px; padding: 4px 13px; }
.lc-accept.lc-apply:hover { color: #04121f; box-shadow: 0 5px 14px rgba(31, 139, 240, 0.32); }
.lc-ignore { font: inherit; font-size: 0.74rem; color: var(--faint); background: none; border: 0; cursor: pointer; }
.lc-ignore:hover { color: var(--ink); }
.lc-clean { font-size: 0.82rem; color: var(--muted); padding: 18px 6px; text-align: center; line-height: 1.7; }

/* ---- footer meter: gauge + stats, redesigned so nothing overflows ------ */
.lc-meter {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center;
  border-top: 1px solid var(--line-soft); margin-top: 2px; padding-top: 14px;
}
.lc-gauge { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.lc-ring {
  --deg: 300deg; width: 62px; height: 62px; border-radius: 50%;
  background: conic-gradient(from -90deg, #197aee 0deg, #00a7f5 var(--deg), rgba(255, 255, 255, 0.09) var(--deg) 360deg);
  display: grid; place-items: center; position: relative; transition: background 0.5s ease;
}
.lc-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #0a1220; }
.lc-ring b {
  position: relative; display: flex; align-items: baseline; gap: 1px;
  font-family: var(--font-display); font-size: 1.28rem; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.lc-ring b i { font-style: normal; font-size: 0.6rem; color: var(--muted); font-weight: 600; }
.lc-gauge-label {
  font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--faint); text-align: center; line-height: 1.3; max-width: 88px;
}
.lc-stats { display: flex; flex-direction: column; gap: 0; margin: 0; min-width: 0; }
.lc-stats > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.lc-stats > div:last-child { border-bottom: 0; }
.lc-stats dt { font-size: 0.76rem; color: var(--muted); margin: 0; }
.lc-stats dd { margin: 0; font-size: 0.84rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }

.lc-open {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: 0.78rem; font-weight: 600; color: var(--accent);
  padding: 7px 13px; border-radius: 9px; border: 1px solid rgba(31, 139, 240, 0.3);
  background: rgba(31, 139, 240, 0.09);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.16s var(--ease-out);
}
.lc-open svg { transition: transform 0.18s var(--ease-out); }
.lc-open:hover { background: rgba(31, 139, 240, 0.18); border-color: rgba(31, 139, 240, 0.6); text-decoration: none; }
.lc-open:hover svg { transform: translateX(3px); }
.lc[dir="rtl"] .lc-open svg { transform: scaleX(-1); }
.lc[dir="rtl"] .lc-open:hover svg { transform: scaleX(-1) translateX(3px); }

.lc-status {
  min-height: 32px; padding: 8px 16px; border-radius: 0 0 17px 17px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.74rem; color: var(--muted);
}
.lc-status.ok { color: #3ddc97; }
.lc-status.warn { color: #ffc555; }
.lc.checking .lc-live i { animation-duration: 0.65s; }

/* ---- hover popup (mirrors the product PopupSuggester) ------------------ */
.lc-pop {
  --err: #ff407f;
  position: absolute; z-index: 20; width: min(320px, 88%);
  background: #0d1524; border: 1px solid rgba(255, 255, 255, 0.13);
  border-top: 3px solid var(--err); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  padding: 11px 13px; display: flex; flex-direction: column; gap: 7px;
  animation: lc-pop-in 0.16s var(--ease-out);
}
.lc-pop[hidden] { display: none; }   /* display:flex would beat [hidden] */
.lc-pop.flip { border-top: 1px solid rgba(255, 255, 255, 0.13); border-bottom: 3px solid var(--err); }
@keyframes lc-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lc-pop-head { display: flex; align-items: center; gap: 7px; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.lc-pop-head i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lc-pop-head span { flex: 1; min-width: 0; }
.lc-pop-x { font: inherit; font-size: 1rem; line-height: 1; color: var(--faint); background: none; border: 0; cursor: pointer; padding: 0 2px; }
.lc-pop-x:hover { color: var(--ink); }
.lc-pop-fix { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1rem; }
.lc-pop-why { margin: 0; font-size: 0.76rem; color: var(--muted); line-height: 1.7; border-top: 1px solid var(--line-soft); padding-top: 7px; }

@media (prefers-reduced-motion: reduce) {
  .lc-live i { animation: none; }
  .lc-pop { animation: none; }
}
.lc-lang.soft { opacity: 0.62; }
.lc-lang.soft::after { content: "•"; margin-inline-start: 5px; color: #ffc555; }
.lc-lang.soft.on { opacity: 1; }

/* ---- paper themes: dark by default, light on demand -------------------- */
.lc[data-theme="dark"] {
  --lc-paper: #0d1420;
  --lc-paper-2: #101927;
  --lc-ink: #e9edf6;
  --lc-ink-soft: #98a1b5;
  --lc-paper-line: rgba(255, 255, 255, 0.09);
}
.lc[data-theme="light"] {
  --lc-paper: #fbfcfe;
  --lc-paper-2: #f2f5fa;
  --lc-ink: #16181d;
  --lc-ink-soft: #5b6070;
  --lc-paper-line: rgba(10, 20, 40, 0.1);
}
.lc-editor {
  background: linear-gradient(180deg, var(--lc-paper), var(--lc-paper-2));
  color: var(--lc-ink);
  box-shadow: inset 0 0 0 1px var(--lc-paper-line), 0 10px 26px rgba(0, 0, 0, 0.28);
}
.lc-editor:empty::before { color: var(--lc-ink-soft); }
/* On dark paper the underline needs a touch more presence. */
.lc[data-theme="dark"] .lc-err { background-size: 100% 2.5px; }
.lc[data-theme="dark"] .lc-err:hover,
.lc[data-theme="dark"] .lc-err.hot,
.lc[data-theme="dark"] .lc-err:focus-visible { background-color: color-mix(in srgb, var(--err) 26%, transparent); }

/* theme toggle button */
.lc-theme {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; padding: 0; cursor: pointer;
  border-radius: 9px; border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.04); color: var(--muted);
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}
.lc-theme:hover { color: var(--ink); background: rgba(255, 255, 255, 0.09); border-color: var(--line); }
.lc-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lc-theme svg { grid-area: 1 / 1; transition: opacity 0.2s ease, transform 0.25s var(--ease-out); }
.lc[data-theme="dark"] .lc-ic-sun { opacity: 1; transform: none; }
.lc[data-theme="dark"] .lc-ic-moon { opacity: 0; transform: rotate(-40deg) scale(0.7); }
.lc[data-theme="light"] .lc-ic-sun { opacity: 0; transform: rotate(40deg) scale(0.7); }
.lc[data-theme="light"] .lc-ic-moon { opacity: 1; transform: none; }

/* ---- full-height layout ------------------------------------------------
   The frame gets one comfortable height (a share of the viewport, bounded
   so it never dwarfs the page). The editor fills its whole column, and the
   suggestion list absorbs the slack in the rail, so only that list scrolls
   however many suggestions the engine returns. */
.lc-grid { align-items: stretch; height: clamp(360px, 62vh, 560px); }
.lc-editor-col { display: flex; flex-direction: column; min-height: 0; }
.lc-editor { flex: 1; min-height: 0; overflow-y: auto; }
.lc-side { min-height: 0; }
.lc-cards { flex: 1; max-height: none; min-height: 96px; }
@container (max-width: 739px) {
  .lc-grid { height: auto; }
  .lc-editor { min-height: 240px; }
  .lc-cards { max-height: 320px; }
}

/* ---- scrollbars: thin, branded, no chrome-default arrows -------------- */
.lc-cards { scrollbar-width: thin; scrollbar-color: rgba(120, 160, 220, 0.35) transparent; overscroll-behavior: contain; }
.lc-cards::-webkit-scrollbar { width: 6px; }
.lc-cards::-webkit-scrollbar-track { background: transparent; }
.lc-cards::-webkit-scrollbar-thumb {
  background: rgba(120, 160, 220, 0.3); border-radius: 999px;
  transition: background 0.2s ease;
}
.lc-cards:hover::-webkit-scrollbar-thumb { background: rgba(120, 160, 220, 0.5); }
.lc-cards::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.lc-cards::-webkit-scrollbar-corner { background: transparent; }
.lc-editor { scrollbar-width: thin; scrollbar-color: rgba(120, 160, 220, 0.3) transparent; }
.lc-editor::-webkit-scrollbar { width: 6px; }
.lc-editor::-webkit-scrollbar-thumb { background: rgba(120, 160, 220, 0.28); border-radius: 999px; }
.lc-editor::-webkit-scrollbar-button { display: none; }
/* fade the list edges so cut-off cards read as "more below" */
.lc-cards { mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 12px), transparent 100%); }

/* ---- gauge label must never overflow the ring (AR labels are long) ---- */
.lc-gauge { max-width: 104px; }
.lc-gauge-label {
  max-width: 104px; font-size: 0.58rem; letter-spacing: 0.04em;
  overflow-wrap: break-word; hyphens: auto;
}

/* ---- polish pass: spacing, motion, and app-like hover feedback ---------
   Everything here is timing and rhythm: a single easing curve, one spacing
   scale, and the editor's own interaction cues (a mark lifts a tinted plate,
   its card mirrors the highlight, the popup rises into place). */
.lc {
  --lc-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lc-gap: 14px;
}

/* top bar: breathing room, and the pill group centred against the title */
.lc-bar { padding: 12px 18px; gap: 14px; row-gap: 10px; }
.lc-title { letter-spacing: 0.01em; }
.lc-langs { padding: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
.lc-lang { padding: 5px 13px; transition: color 0.2s var(--lc-ease), background 0.2s var(--lc-ease), box-shadow 0.2s var(--lc-ease); }
.lc-lang.on { box-shadow: 0 3px 12px rgba(31, 139, 240, 0.35); }
.lc-lang:not(.on):active { transform: scale(0.97); }

/* editor: generous type, calm padding, and a focus ring that fades in */
.lc-editor-col { padding: 20px; gap: 0; }
.lc-editor {
  padding: 28px 30px;
  border-radius: 16px;
  transition: box-shadow 0.28s var(--lc-ease), background 0.35s var(--lc-ease), color 0.35s var(--lc-ease);
}
.lc-hint { margin: 14px 6px 0; opacity: 0.85; transition: opacity 0.25s var(--lc-ease); }
.lc-editor-col:hover .lc-hint { opacity: 1; }

/* the underline, as the app does it: a soft plate lifts under the word */
.lc-err {
  transition: background-color 0.22s var(--lc-ease), box-shadow 0.22s var(--lc-ease);
  border-radius: 4px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--err) 30%, transparent);
}
.lc-err:hover, .lc-err.hot, .lc-err:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 16%, transparent);
}
.lc-err.hot { background-size: 100% 100%; background-image: none; }
.lc[data-theme="dark"] .lc-err.hot { background-color: color-mix(in srgb, var(--err) 30%, transparent); }
.lc[data-theme="light"] .lc-err.hot { background-color: color-mix(in srgb, var(--err) 22%, transparent); }
/* a freshly applied fix flashes green, then settles (the app's accept cue) */
@keyframes lc-fixed { 0% { background-color: rgba(61, 220, 151, 0.35); } 100% { background-color: transparent; } }
.lc-fixed-flash { animation: lc-fixed 0.9s var(--lc-ease); border-radius: 4px; }

/* rail: consistent rhythm, and cards that respond like list rows */
.lc-side { padding: 18px; gap: 13px; }
.lc-side-head { padding-bottom: 2px; letter-spacing: 0.01em; }
.lc-cards { gap: 9px; }
.lc-card {
  padding: 13px 15px; gap: 8px;
  transition: background 0.22s var(--lc-ease), border-color 0.22s var(--lc-ease),
              transform 0.22s var(--lc-ease), box-shadow 0.22s var(--lc-ease);
}
.lc-card:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--err) 45%, var(--line));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.lc-card:active { transform: translateY(0); }
.lc-card-cat { letter-spacing: 0.08em; }
.lc-card-cat i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 18%, transparent); }
.lc-card-fix { gap: 9px; }
.lc-card-why { padding-top: 1px; }
.lc-card-actions { margin-top: 2px; gap: 14px; }
.lc-apply, .lc-pop-apply { transition: background 0.2s var(--lc-ease), border-color 0.2s var(--lc-ease), color 0.2s var(--lc-ease), transform 0.16s var(--lc-ease); }
.lc-apply:active, .lc-pop-apply:active { transform: scale(0.97); }
.lc-accept.lc-apply { padding: 5px 14px; }
.lc-ignore { transition: color 0.18s var(--lc-ease); padding: 2px 0; }

/* new cards fade up as the engine answers, staggered like the app's list */
@keyframes lc-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lc-cards .lc-card { animation: lc-card-in 0.32s var(--lc-ease) backwards; }
.lc-cards .lc-card:nth-child(1) { animation-delay: 0.02s; }
.lc-cards .lc-card:nth-child(2) { animation-delay: 0.06s; }
.lc-cards .lc-card:nth-child(3) { animation-delay: 0.1s; }
.lc-cards .lc-card:nth-child(4) { animation-delay: 0.14s; }
.lc-cards .lc-card:nth-child(n+5) { animation-delay: 0.18s; }

/* popup: rises from the word, with a arrow-free soft shadow */
.lc-pop { padding: 13px 15px; gap: 8px; border-radius: 14px; }
@keyframes lc-pop-in { from { opacity: 0; transform: translateY(-6px) scale(0.985); } to { opacity: 1; transform: none; } }
.lc-pop { animation: lc-pop-in 0.2s var(--lc-ease); }
.lc-pop.flip { animation-name: lc-pop-in-up; }
@keyframes lc-pop-in-up { from { opacity: 0; transform: translateY(6px) scale(0.985); } to { opacity: 1; transform: none; } }
.lc-pop-head { letter-spacing: 0.08em; }
.lc-pop-head i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--err) 20%, transparent); }
.lc-pop-x { border-radius: 6px; width: 20px; height: 20px; display: grid; place-items: center; transition: color 0.18s var(--lc-ease), background 0.18s var(--lc-ease); }
.lc-pop-x:hover { background: rgba(255, 255, 255, 0.08); }

/* meter + CTA: aligned to the same rhythm */
.lc-meter { gap: 20px; padding-top: 16px; margin-top: 4px; }
.lc-stats > div { padding: 6px 0; }
.lc-correct-all { transition: transform 0.16s var(--lc-ease), box-shadow 0.22s var(--lc-ease), opacity 0.2s var(--lc-ease); }
.lc-correct-all:active:not(:disabled) { transform: translateY(0) scale(0.98); }
.lc-status { padding: 9px 18px; transition: color 0.25s var(--lc-ease); }

/* the whole frame lifts a touch on hover, like a focused app window */
.lc { transition: box-shadow 0.4s var(--lc-ease), transform 0.4s var(--lc-ease); }
.lc:hover { box-shadow: 0 30px 84px rgba(0, 0, 0, 0.55), 0 2px 10px rgba(0, 0, 0, 0.35); }

@media (prefers-reduced-motion: reduce) {
  .lc, .lc-card, .lc-err, .lc-pop, .lc-apply, .lc-correct-all { transition: none; }
  .lc-cards .lc-card, .lc-pop, .lc-fixed-flash { animation: none; }
  .lc:hover, .lc-card:hover { transform: none; }
}

/* bar without the title/badge: pills lead, theme sits at the far end, and
   the freed vertical space goes to the editor */
.lc-bar { padding: 10px 14px; justify-content: flex-start; }
.lc-langs { margin: 0; }
.lc-theme { margin-inline-start: auto; }

/* footer meter, v2: the ring is a compact dial and every label lives in the
   stat list, so long Arabic labels can never overflow the circle */
.lc-meter { grid-template-columns: auto minmax(0, 1fr); gap: 16px; }
.lc-ring { width: 54px; height: 54px; }
.lc-ring::before { inset: 4.5px; }
.lc-ring b { font-size: 1.05rem; }
.lc-ring b i { font-size: 0.52rem; }
.lc-stats > div.lead dt { color: var(--ink); font-weight: 600; }
.lc-stats > div.lead dd { color: var(--accent); font-size: 0.9rem; }
.lc-gauge, .lc-gauge-label { display: none; }

/* ---- proportions: give the text room, keep the rail tight ---------------
   The rail only ever holds one column of cards, so capping it hands the
   freed width to the writing surface. The card list then takes every pixel
   the rail is not using for its head and meter. */
.lc-grid { grid-template-columns: minmax(0, 1fr) clamp(288px, 30%, 348px); height: clamp(400px, 68vh, 620px); }
.lc-side { padding: 14px 15px; gap: 10px; }
.lc-editor-col { padding: 16px; }
.lc-editor { padding: 24px 26px; }
/* two-line clamp on the explanation keeps cards uniform and the list dense;
   the full rule is always available in the hover popup */
.lc-card-why {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 0.74rem; line-height: 1.6;
}
.lc-card { padding: 11px 13px; gap: 6px; }
.lc-card-actions { margin-top: 1px; }
.lc-meter { gap: 14px; padding-top: 12px; margin-top: 2px; }
.lc-stats > div { padding: 4.5px 0; }
.lc-open { padding: 8px 14px; justify-content: center; align-self: stretch; }
@container (max-width: 739px) {
  .lc-grid { grid-template-columns: 1fr; }
}

/* ---- accuracy as a slim bar, not a dial --------------------------------
   The ring plus a duplicate label ate a third of the rail; one strip says
   the same thing in three lines and hands the space back to the cards. */
.lc-meter { display: block; padding-top: 11px; margin-top: 0; }
.lc-ring { display: none; }
.lc-acc-bar { display: flex; flex-direction: column; gap: 5px; margin-bottom: 9px; }
.lc-acc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.76rem; }
.lc-acc-top span { color: var(--muted); }
.lc-acc-top b { color: var(--accent); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.lc-acc-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.lc-acc-track i { display: block; height: 100%; border-radius: 999px; background: var(--brand-grad); transition: width 0.55s var(--lc-ease); }
.lc-stats > div { padding: 4px 0; }
.lc-stats > div:first-child { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.lc-open { margin-top: 10px; }

/* ---- final rhythm pass -------------------------------------------------
   The bar is one row: pills at the start, theme at the end. The editor is
   sized to the text it actually holds (the demo is a short paragraph), and
   the rail matches it, so no big empty plate under either column. */
.lc-bar { padding: 9px 14px; align-items: center; }
.lc-grid { height: auto; align-items: stretch; }
.lc-editor-col { padding: 14px; }
.lc-editor { min-height: 220px; max-height: 46vh; }
.lc-side { padding: 14px; }
.lc-cards { max-height: none; flex: 1 1 auto; min-height: 120px; }
/* the hint sits right under the paper, not adrift at the column foot */
.lc-hint { margin: 10px 4px 0; }
/* height:auto let the card list grow unbounded; bound the frame again so the
   editor and the rail share one predictable, screen-friendly height */
.lc-grid { height: clamp(380px, 56vh, 520px); }
.lc-editor { max-height: none; min-height: 0; }

/* ---- Correct button: white on blue, as in the app ---------------------- */
.lc-accept.lc-apply, .lc-correct-all {
  color: #fff;
  background: linear-gradient(135deg, #197aee, #00a7f5);
  border-color: transparent;
  text-shadow: 0 1px 2px rgba(0, 20, 50, 0.25);
}
.lc-accept.lc-apply:hover, .lc-correct-all:hover:not(:disabled) {
  color: #fff;
  background: linear-gradient(135deg, #2a89f7, #29b8fb);
  box-shadow: 0 6px 18px rgba(31, 139, 240, 0.4);
}

/* ---- text stats: collapsed by default, so the cards own the rail ------- */
.lc-details { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.lc-details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 2px; cursor: pointer; list-style: none;
  font-size: 0.74rem; color: var(--muted); user-select: none;
  transition: color 0.18s var(--lc-ease);
}
.lc-details > summary::-webkit-details-marker { display: none; }
.lc-details > summary:hover { color: var(--ink); }
.lc-details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.lc-details > summary svg { flex: none; transition: transform 0.22s var(--lc-ease); }
.lc-details[open] > summary svg { transform: rotate(180deg); }
.lc-details .lc-stats { padding-bottom: 4px; }
.lc-details .lc-stats > div:first-child { border-top: 0; }
.lc-meter { padding-top: 10px; }
.lc-acc-bar { margin-bottom: 4px; }

/* ---- meter: one row that IS the disclosure ------------------------------
   Collapsed, the rail shows only the accuracy figure and its bar with a
   chevron; the label row is gone and the counts live behind the click. */
.lc-meter {
  display: block; border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 0; margin-top: 2px;
}
.lc-meter > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: 4px 10px; padding: 9px 2px; cursor: pointer; list-style: none;
  border-radius: 8px; transition: background 0.18s var(--lc-ease);
}
.lc-meter > summary::-webkit-details-marker { display: none; }
.lc-meter > summary:hover { background: rgba(255, 255, 255, 0.035); }
.lc-meter > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.lc-meter .lc-acc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 0.74rem; grid-column: 1; }
.lc-meter .lc-acc-track { grid-column: 1; height: 4px; }
.lc-meter .lc-chev { grid-column: 2; grid-row: 1 / span 2; color: var(--faint); transition: transform 0.22s var(--lc-ease), color 0.18s var(--lc-ease); }
.lc-meter > summary:hover .lc-chev { color: var(--ink); }
.lc-meter[open] .lc-chev { transform: rotate(180deg); }
.lc-meter .lc-stats { padding: 2px 2px 4px; }
.lc-meter .lc-stats > div:first-child { border-top: 1px solid rgba(255, 255, 255, 0.05); }
.lc-details { display: none; }

/* --- category deep-dive (proofreading sub-checks) ---------------------- */
.wx-cat-deep { display: grid; gap: 14px; margin-top: 22px; }
.wx-cat-block {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.026);
  padding: 22px 24px;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.wx-cat-block:hover { border-color: rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.04); }
.wx-cat-block > h3 {
  margin: 10px 0 6px; font-size: 1.16rem;
}
.wx-cat-block > p { color: var(--muted); font-size: 0.95rem; margin: 0 0 4px; max-width: 78ch; }
.wx-subchecks { display: grid; gap: 12px; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); }
.wx-subcheck {
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(4, 11, 22, 0.45);
  padding: 14px 16px;
}
.wx-subcheck h4 {
  margin: 0 0 6px; font-size: 0.9rem; font-weight: 650; letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 8px;
}
.wx-subcheck h4::before {
  content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cat, var(--accent)); transform: translateY(-2px);
}
.wx-subcheck p { margin: 0; color: var(--muted); font-size: 0.855rem; line-height: 1.62; }
[dir="rtl"] .wx-subcheck h4 { flex-direction: row; }

/* Arabic mock chrome: uppercase/letter-spacing are Latin-only typography. */
[dir="rtl"] .wx-fix-cat { letter-spacing: 0; text-transform: none; font-size: 0.78rem; }

/* --- surface brand marks (real product logos on the download grid) ------ */
.wx-brand-mark {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.35s var(--ease-spring), box-shadow 0.3s ease, background 0.25s ease;
}
.wx-brand-mark svg { width: 26px; height: 26px; display: block; }
.card:hover .wx-brand-mark, .wx-surface:hover .wx-brand-mark {
  transform: translateY(-2px) scale(1.06);
  background: rgba(255, 255, 255, 0.085);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

/* Surface card: logo + copy on one row, action pinned to the bottom. */
.wx-surface-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.wx-surface {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px; border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.026);
  transition: transform 0.3s var(--ease-out), border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease;
}
.wx-surface:hover {
  transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.17);
  background: rgba(255, 255, 255, 0.048); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}
.wx-surface-head { display: flex; align-items: center; gap: 13px; }
.wx-surface-head h3 { margin: 0; font-size: 1.03rem; line-height: 1.25; }
.wx-surface-head .wx-surface-tag {
  display: block; font-size: 0.7rem; font-weight: 600; color: var(--faint);
  letter-spacing: 0.03em; text-transform: uppercase; margin-top: 3px;
}
.wx-surface > p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.62; }
.wx-surface-cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-weight: 650; font-size: 0.88rem;
  transition: gap 0.2s var(--ease-out);
}
.wx-surface:hover .wx-surface-cta { gap: 11px; }
.wx-surface.soon .wx-surface-cta { color: var(--faint); }

/* Conversion block at the top of the download page. */
.wx-start {
  display: grid; grid-template-columns: minmax(0, 1.5fr) auto; gap: 26px; align-items: center;
  padding: 30px 32px; border-radius: 20px;
  border: 1px solid rgba(25, 122, 238, 0.28);
  background:
    radial-gradient(130% 140% at 0% 0%, rgba(25, 122, 238, 0.16), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.wx-start h2 { margin: 8px 0 8px; }
.wx-start > div > p { color: var(--muted); margin: 0; max-width: 60ch; }
.wx-start .btn-row { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 860px) {
  .wx-start { grid-template-columns: 1fr; padding: 24px; }
  .wx-start .btn-row { justify-content: flex-start; }
}

/* --- comparison table (/compare/ pages) -------------------------------- */
.wx-cmp {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.022);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 44px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
.wx-cmp-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.wx-cmp-table th,
.wx-cmp-table td {
  padding: 17px 20px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.wx-cmp-table tbody tr:last-child td { border-bottom: 0; }
.wx-cmp-table th {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.028);
  border-bottom-color: rgba(255, 255, 255, 0.1);
  white-space: nowrap;
}
.wx-cmp-table th.crit,
.wx-cmp-table td.crit { text-align: left; }
.wx-cmp-table th.win {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(25, 122, 238, 0.22), rgba(25, 122, 238, 0.1));
  box-shadow: inset 0 2px 0 var(--brand-a);
}
/* The winning column reads as one continuous panel down the table. */
.wx-cmp-table td.win { background: rgba(25, 122, 238, 0.07); }
.wx-cmp-table tbody tr:hover td { background: rgba(255, 255, 255, 0.032); }
.wx-cmp-table tbody tr:hover td.win { background: rgba(25, 122, 238, 0.115); }
.wx-cmp-table td.crit b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.99rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.wx-cmp-table td.crit span {
  display: block;
  margin-top: 3px;
  font-size: 0.84rem;
  color: var(--faint);
  line-height: 1.5;
}
.wx-cmp-table .af-chip { font-size: 0.8rem; padding: 5px 12px; }

@media (max-width: 720px) {
  .wx-cmp-table { font-size: 0.94rem; }
  .wx-cmp-table thead { display: none; }
  .wx-cmp-table tr { display: block; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .wx-cmp-table tbody tr:last-child { border-bottom: 0; }
  .wx-cmp-table td { display: flex; align-items: center; justify-content: space-between; gap: 14px; text-align: right; border: 0; padding: 8px 16px; }
  .wx-cmp-table td.crit { padding-top: 14px; }
  .wx-cmp-table td.win { background: none; }
  /* Without the header row each cell has to name its own column. */
  .wx-cmp-table td[data-col]::before {
    content: attr(data-col);
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--faint);
  }
  .wx-cmp-table td.win[data-col]::before { color: var(--accent); }
}

/* --- verdict block ----------------------------------------------------- */
.wx-verdict { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; margin-top: 26px; }
.wx-verdict-col {
  padding: 26px 28px; border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.024);
}
.wx-verdict-col.win {
  border-color: rgba(25, 122, 238, 0.3);
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(25, 122, 238, 0.15), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}
.wx-verdict-col h3 { margin: 8px 0 10px; font-size: 1.28rem; }
.wx-verdict-col p { color: var(--muted); margin: 0; }
.wx-verdict-col .btn { margin-top: 18px; }
.wx-verdict-col .kicker { margin: 0; }
@media (max-width: 860px) { .wx-verdict { grid-template-columns: 1fr; } }

/* --- click-to-load video ------------------------------------------------ */
.wx-video {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #060e1a;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.4);
  aspect-ratio: 16 / 9;
}
.wx-video iframe, .wx-video-btn { display: block; width: 100%; height: 100%; border: 0; }
.wx-video-btn {
  position: relative; padding: 0; cursor: pointer; background: none;
  font: inherit; color: inherit; text-align: left;
}
.wx-video-btn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease-out), opacity 0.3s ease; }
.wx-video-btn:hover img { transform: scale(1.035); opacity: 0.9; }
/* This poster is a white-background title card, which reads as a bright slab
   dropped into the dark page. A vignette settles its edges into the surface
   without touching the artwork itself. */
.wx-video-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(4, 11, 22, 0.5) 100%),
    linear-gradient(180deg, rgba(4, 11, 22, 0.28), transparent 30%);
}
.wx-video-play {
  position: absolute; inset: 0; margin: auto; z-index: 2;
  width: 66px; height: 66px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-grad); color: #fff;
  box-shadow: 0 12px 34px rgba(25, 122, 238, 0.5);
  transition: transform 0.32s var(--ease-spring), box-shadow 0.3s ease;
}
.wx-video-btn:hover .wx-video-play { transform: scale(1.1); box-shadow: 0 16px 44px rgba(25, 122, 238, 0.62); }
.wx-video-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.wx-video-cap {
  position: absolute; inset-inline: 0; bottom: 0; z-index: 2;
  padding: 34px 22px 16px;
  font-family: var(--font-display); font-size: 0.94rem; font-weight: 600; color: #fff;
  background: linear-gradient(to top, rgba(3, 8, 16, 0.9), transparent);
}

/* The sidebar's full nav list was setting a height floor, so a frame with
   short content grew dead space under it. Let the nav scroll instead. */
.af-shell { align-items: stretch; }
.af-side { min-height: 0; overflow: hidden; }
.af-side .af-nav { min-height: 0; overflow-y: auto; scrollbar-width: none; }
.af-side .af-nav::-webkit-scrollbar { width: 0; height: 0; }

/* ==========================================================================
   Diagram kit (.wx-dg-*) — see src/diagrams.mjs
   Built from HTML boxes so the text stays selectable, reflows on a phone, and
   MIRRORS on the Arabic pages. Motion is index-staggered off `--i` and only
   runs once .in lands, so a still render is a complete render.
   ========================================================================== */

.wx-dg {
  margin: 0;
  padding: 26px 26px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(900px 340px at 50% -10%, rgba(25, 122, 238, 0.1), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}
.wx-dg::before {
  /* Faint grid so the diagram reads as a schematic, not a card. */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(680px 300px at 50% 0%, #000, transparent 72%);
  pointer-events: none;
}
.wx-dg > * { position: relative; }

.wx-dg-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 20px; }
.wx-dg-kicker {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-b);
}
.wx-dg-head b { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; letter-spacing: -0.015em; }
[dir="rtl"] .wx-dg-kicker { letter-spacing: 0; text-transform: none; }
.wx-dg-note { margin: 18px 0 0; font-size: 0.82rem; color: var(--faint); line-height: 1.6; }

/* --- flow ---------------------------------------------------------------- */
.wx-dg-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  gap: 0;
  flex-wrap: wrap;
}
.wx-dg-node {
  flex: 1 1 0;
  min-width: 128px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel-solid);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  transition: transform 0.25s var(--ease-out), border-color 0.25s, box-shadow 0.25s;
}
.wx-dg-node b { font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
.wx-dg-node span { font-size: 0.76rem; color: var(--muted); line-height: 1.5; }
.wx-dg-node:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32); }
.wx-dg-node[data-kind="in"] { border-color: rgba(95, 198, 255, 0.34); background: linear-gradient(180deg, rgba(95, 198, 255, 0.09), rgba(255, 255, 255, 0.02)); }
.wx-dg-node[data-kind="out"] { border-color: rgba(61, 220, 151, 0.36); background: linear-gradient(180deg, rgba(61, 220, 151, 0.1), rgba(255, 255, 255, 0.02)); }
.wx-dg-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-b);
}
[dir="rtl"] .wx-dg-badge { letter-spacing: 0; text-transform: none; }

/* Connector: a chevron rail between siblings. It is drawn on the gap, so the
   nodes themselves keep a clean box and the arrow flips with the page. */
.wx-dg-track > .wx-dg-node + .wx-dg-node { margin-inline-start: 30px; }
.wx-dg-track > .wx-dg-node + .wx-dg-node::before {
  content: "";
  position: absolute;
  inset-inline-start: -30px;
  top: 50%;
  width: 30px;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.07), rgba(25, 122, 238, 0.5));
}
[dir="rtl"] .wx-dg-track > .wx-dg-node + .wx-dg-node::before {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.07), rgba(25, 122, 238, 0.5));
}
.wx-dg-track > .wx-dg-node + .wx-dg-node::after {
  content: "";
  position: absolute;
  inset-inline-start: -11px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid var(--brand-a);
  border-inline-end: 2px solid var(--brand-a);
  transform: translateY(-50%) rotate(45deg);
}
[dir="rtl"] .wx-dg-track > .wx-dg-node + .wx-dg-node::after { transform: translateY(-50%) rotate(-135deg); }

/* Vertical variant: the cascade. */
.wx-dg[data-dir="down"] .wx-dg-track { flex-direction: column; gap: 0; }
.wx-dg[data-dir="down"] .wx-dg-track > .wx-dg-node + .wx-dg-node { margin-inline-start: 0; margin-top: 30px; }
.wx-dg[data-dir="down"] .wx-dg-track > .wx-dg-node + .wx-dg-node::before {
  inset-inline-start: 30px;
  top: -30px;
  width: 2px;
  height: 30px;
  transform: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(25, 122, 238, 0.5));
}
.wx-dg[data-dir="down"] .wx-dg-track > .wx-dg-node + .wx-dg-node::after {
  inset-inline-start: 27px;
  top: -9px;
  transform: rotate(135deg);
}

/* --- layered stack ------------------------------------------------------- */
.wx-dg-io {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 17px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.022);
}
.wx-dg-io b { font-size: 0.9rem; font-weight: 600; }
.wx-dg-io span { font-size: 0.76rem; color: var(--muted); }
.wx-dg-io[data-io="in"] { border-color: rgba(95, 198, 255, 0.4); color: #cdeaff; }
.wx-dg-io[data-io="out"] { border-color: rgba(61, 220, 151, 0.42); color: #c6f5df; }

/* The spine carries a travelling pulse: the visual claim that text flows
   THROUGH the components rather than sitting beside them. */
.wx-dg-spine {
  position: relative;
  width: 2px;
  height: 26px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(95, 198, 255, 0.55), rgba(25, 122, 238, 0.25));
  overflow: hidden;
}
.wx-dg-pulse { position: absolute; inset-inline-start: -2px; width: 6px; height: 12px; border-radius: 3px; background: #7fd4ff; filter: blur(1px); opacity: 0; }
.wx-dg.in .wx-dg-pulse { animation: dg-pulse-down 2.6s 0.5s linear infinite; }
@keyframes dg-pulse-down {
  0% { opacity: 0; transform: translateY(-14px); }
  15% { opacity: 0.95; }
  85% { opacity: 0.95; }
  100% { opacity: 0; transform: translateY(30px); }
}

.wx-dg-bands { display: flex; flex-direction: column; gap: 10px; margin: 0 0 0; }
.wx-dg-band {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 17px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--c);
  border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 12%, transparent), rgba(255, 255, 255, 0.018));
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}
[dir="rtl"] .wx-dg-band { background: linear-gradient(270deg, color-mix(in srgb, var(--c) 12%, transparent), rgba(255, 255, 255, 0.018)); }
.wx-dg-band:hover { transform: translateX(3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); }
[dir="rtl"] .wx-dg-band:hover { transform: translateX(-3px); }
.wx-dg-band-n {
  flex: none;
  min-width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--c) 26%, #0b1626);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wx-dg-band-txt b { display: block; font-size: 0.9rem; font-weight: 600; }
.wx-dg-band-txt p { margin: 2px 0 0; font-size: 0.79rem; color: var(--muted); line-height: 1.55; }
.wx-dg-stack .wx-dg-spine:last-of-type { margin-bottom: 0; }
.wx-dg-stack > .wx-dg-io + .wx-dg-spine { margin-bottom: 0; }
.wx-dg-stack .wx-dg-bands + .wx-dg-io { margin-top: 26px; position: relative; }
.wx-dg-stack .wx-dg-bands + .wx-dg-io::before {
  content: "";
  position: absolute;
  top: -26px;
  inset-inline-start: 50%;
  width: 2px;
  height: 26px;
  background: linear-gradient(180deg, rgba(25, 122, 238, 0.25), rgba(61, 220, 151, 0.55));
}

/* --- topology ------------------------------------------------------------ */
.wx-dg-topo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wx-dg-topo {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-solid);
  text-align: center;
  transition: transform 0.25s var(--ease-out), border-color 0.25s, box-shadow 0.25s;
}
.wx-dg-topo:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34); }
.wx-dg-topo[data-hl="1"] { border-color: rgba(61, 220, 151, 0.4); background: linear-gradient(180deg, rgba(61, 220, 151, 0.08), rgba(255, 255, 255, 0.02)); }
.wx-dg-topo-art { color: var(--brand-b); margin-bottom: 10px; }
.wx-dg-topo[data-hl="1"] .wx-dg-topo-art { color: var(--good); }
.wx-dg-topo-art svg { width: 100%; max-width: 116px; height: auto; }
.wx-dg.in .wx-dg-topo-art path, .wx-dg.in .wx-dg-topo-art rect { stroke-dasharray: 320; stroke-dashoffset: 320; animation: dg-draw 1.1s var(--ease-out) forwards; animation-delay: calc(var(--i) * 160ms + 120ms); }
@keyframes dg-draw { to { stroke-dashoffset: 0; } }
.wx-dg-topo > b { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.wx-dg-topo > p { margin: 5px 0 0; font-size: 0.81rem; color: var(--muted); line-height: 1.55; }
.wx-dg-chips { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 11px; }
.wx-dg-chips span {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
}

/* --- wheel --------------------------------------------------------------- */
.wx-dg-wheel-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1;
  margin: 6px auto 0;
  display: grid;
  place-items: center;
}
.wx-dg-hub {
  width: 40%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2px;
  padding: 8px;
  background: radial-gradient(circle at 50% 35%, rgba(25, 122, 238, 0.3), rgba(7, 17, 32, 0.9) 70%);
  border: 1px solid rgba(95, 198, 255, 0.32);
  box-shadow: 0 0 60px rgba(25, 122, 238, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 2;
}
.wx-dg-hub b { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; line-height: 1.2; }
.wx-dg-hub span { font-size: 0.7rem; color: var(--muted); line-height: 1.35; }
.wx-dg-rings { position: absolute; inset: 0; display: grid; place-items: center; }
.wx-dg-rings i { position: absolute; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.1); }
.wx-dg-rings i:first-child { inset: 22%; }
.wx-dg-rings i:last-child { inset: 4%; border-style: solid; border-color: rgba(255, 255, 255, 0.055); }
.wx-dg.in .wx-dg-rings i:last-child { animation: dg-spin 68s linear infinite; }
@keyframes dg-spin { to { transform: rotate(360deg); } }

.wx-dg-spoke {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: start center;
  /* Rotate the whole arm, then counter-rotate the pill so its text stays
     upright at every angle. */
  transform: rotate(var(--a));
  pointer-events: none;
}
/* The arm: a line from the pill in to the hub edge (at 20% of the stage, since
   the hub is 40% wide), so the spokes read as radiating from the sentence.
   Drawn BEHIND the pills: a pill rotated to the horizontal covers its own WIDTH
   along the arm axis, so a line sized to clear every pill would barely exist. */
.wx-dg-spoke::before {
  content: "";
  position: absolute;
  top: 42px;
  left: 50%;
  width: 2px;
  height: calc(20% - 42px);
  transform: translateX(-50%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 15%, transparent), var(--c));
  opacity: 0.55;
  transform-origin: bottom center;
  z-index: 0;
}
.wx-dg-spoke::after {
  content: "";
  position: absolute;
  top: calc(20% - 3px);
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--c);
  box-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent);
  z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .wx-dg[data-dg] .wx-dg-spoke::before { transform: translateX(-50%) scaleY(0); transition: transform 0.6s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
  .wx-dg[data-dg] .wx-dg-spoke::after { opacity: 0; transition: opacity 0.4s; transition-delay: calc(var(--i, 0) * 90ms + 260ms); }
  .wx-dg[data-dg].in .wx-dg-spoke::before { transform: translateX(-50%) scaleY(1); }
  .wx-dg[data-dg].in .wx-dg-spoke::after { opacity: 1; }
}
.wx-dg-spoke-pill {
  transform: rotate(calc(var(--a) * -1));
  pointer-events: auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 11px;
  border-radius: 11px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--c);
  background: #0b1626;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38);
  width: max-content;
  max-width: 132px;
  text-align: center;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s, border-color 0.25s;
}
.wx-dg-spoke-pill:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); border-color: var(--c); }
.wx-dg-spoke-pill i { width: 100%; height: 3px; border-radius: 2px; background: var(--c); opacity: 0.85; }
.wx-dg-spoke-pill b { font-size: 0.78rem; font-weight: 600; line-height: 1.25; }
.wx-dg-spoke-pill span { font-size: 0.66rem; color: var(--faint); line-height: 1.3; }

/* --- tracks -------------------------------------------------------------- */
.wx-dg-sentence {
  margin: 0 0 16px;
  padding: 13px 16px;
  border-radius: 12px;
  background: #091320;
  border: 1px solid var(--line);
  font-size: 0.95rem;
  line-height: 1.85;
}
.wx-dg-rails { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.wx-dg-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}
.wx-dg-rail[data-hl="1"] { border-color: rgba(25, 122, 238, 0.42); background: linear-gradient(90deg, rgba(25, 122, 238, 0.12), rgba(255, 255, 255, 0.02)); }
[dir="rtl"] .wx-dg-rail[data-hl="1"] { background: linear-gradient(270deg, rgba(25, 122, 238, 0.12), rgba(255, 255, 255, 0.02)); }
.wx-dg-rail-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.wx-dg-rail-head b { font-family: var(--font-display); font-size: 1rem; font-weight: 600; }
.wx-dg-rail-head span { font-size: 0.76rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.wx-dg-rail[data-hl="1"] .wx-dg-rail-head span { color: var(--good); }

.wx-dg-slots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wx-dg-slot {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.81rem;
  line-height: 1.5;
  color: var(--faint);
}
.wx-dg-slot[data-on="1"] { color: var(--ink); }
/* The marker: a filled check when caught, a hollow ring when missed. */
.wx-dg-slot > i {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 3px;
  border-radius: 50%;
  border: 1.6px solid rgba(255, 255, 255, 0.15);
  position: relative;
}
.wx-dg-slot[data-on="1"] > i { background: var(--good); border-color: var(--good); box-shadow: 0 0 12px rgba(61, 220, 151, 0.35); }
.wx-dg-slot[data-on="1"] > i::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 3.5px;
  width: 5px;
  height: 2.5px;
  border-left: 1.7px solid #06251a;
  border-bottom: 1.7px solid #06251a;
  transform: rotate(-45deg);
}
.wx-dg.in .wx-dg-slot[data-on="1"] > i { animation: dg-dot-pop 0.5s var(--ease-spring) backwards; animation-delay: calc(var(--j) * 90ms + 250ms); }
@keyframes dg-dot-pop { from { transform: scale(0.2); opacity: 0; } }

/* --- entry stagger (all variants) ---------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .wx-dg[data-dg] .wx-dg-node,
  .wx-dg[data-dg] .wx-dg-band,
  .wx-dg[data-dg] .wx-dg-topo,
  .wx-dg[data-dg] .wx-dg-spoke-pill,
  .wx-dg[data-dg] .wx-dg-rail {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .wx-dg[data-dg] .wx-dg-spoke-pill { transform: rotate(calc(var(--a) * -1)) scale(0.86); }
  .wx-dg[data-dg].in .wx-dg-node,
  .wx-dg[data-dg].in .wx-dg-band,
  .wx-dg[data-dg].in .wx-dg-topo,
  .wx-dg[data-dg].in .wx-dg-rail { opacity: 1; transform: none; }
  .wx-dg[data-dg].in .wx-dg-spoke-pill { opacity: 1; transform: rotate(calc(var(--a) * -1)); }
  /* The connector rail draws in after its node lands. */
  .wx-dg[data-dg] .wx-dg-track > .wx-dg-node + .wx-dg-node::before { transform-origin: left center; }
}
@media (prefers-reduced-motion: reduce) {
  .wx-dg .wx-dg-node, .wx-dg .wx-dg-band, .wx-dg .wx-dg-topo, .wx-dg .wx-dg-rail { opacity: 1; transform: none; }
  .wx-dg .wx-dg-spoke-pill { opacity: 1; transform: rotate(calc(var(--a) * -1)); }
  /* The arms are drawn by a transition in the no-preference block; without this
     they would sit collapsed at scaleY(0) and the wheel would lose its spokes. */
  .wx-dg .wx-dg-spoke::before { transform: translateX(-50%) scaleY(1); }
  .wx-dg .wx-dg-spoke::after { opacity: 1; }
  .wx-dg .wx-dg-pulse, .wx-dg .wx-dg-rings i, .wx-dg .wx-dg-slot > i { animation: none !important; }
  .wx-dg .wx-dg-topo-art path, .wx-dg .wx-dg-topo-art rect { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; animation: none !important; }
  .wx-dg-node:hover, .wx-dg-topo:hover, .wx-dg-band:hover, .wx-dg-band:hover, .wx-dg-spoke-pill:hover { transform: none; }
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .wx-dg { padding: 20px 18px 18px; }
  .wx-dg-topo-grid { grid-template-columns: 1fr; }
  /* The flow becomes a vertical stack: five boxes across a phone is unreadable. */
  .wx-dg-track { flex-direction: column; }
  .wx-dg-track > .wx-dg-node + .wx-dg-node { margin-inline-start: 0; margin-top: 26px; }
  .wx-dg-track > .wx-dg-node + .wx-dg-node::before {
    inset-inline-start: 26px;
    top: -26px;
    width: 2px;
    height: 26px;
    transform: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(25, 122, 238, 0.5));
  }
  .wx-dg-track > .wx-dg-node + .wx-dg-node::after { inset-inline-start: 23px; top: -8px; transform: rotate(135deg); }
  [dir="rtl"] .wx-dg-track > .wx-dg-node + .wx-dg-node::after { transform: rotate(135deg); }
  /* The wheel cannot survive a narrow column: fall back to a plain grid. */
  .wx-dg-wheel-stage { aspect-ratio: auto; display: block; max-width: none; }
  .wx-dg-wheel-stage .wx-dg-rings { display: none; }
  .wx-dg-hub { width: 100%; aspect-ratio: auto; border-radius: 13px; padding: 15px; margin-bottom: 12px; }
  /* width:100% is explicit: the arm keeps `place-items` from the wheel layout,
     which shrink-wraps it even as a block, so a pill set to 100% would resolve
     against the shrunk arm rather than the column. */
  .wx-dg-spoke { position: static; inset: auto; transform: none; display: block; width: 100%; margin-bottom: 8px; }
  .wx-dg-spoke::before, .wx-dg-spoke::after { display: none; }
  .wx-dg-spoke-pill,
  .wx-dg[data-dg] .wx-dg-spoke-pill,
  .wx-dg[data-dg].in .wx-dg-spoke-pill { transform: none; max-width: none; width: 100%; flex-direction: row; align-items: center; gap: 9px; text-align: start; }
  .wx-dg-spoke-pill i { width: 3px; height: 20px; flex: none; }
  .wx-dg-rails { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Motion polish
   ========================================================================== */

/* --- reading progress ----------------------------------------------------
   Driven by a scroll-progress timeline where supported, so it costs no JS and
   never fights the main thread. Browsers without it simply get no bar (the
   element stays at scaleX(0)), which is why it is decorative and aria-hidden. */
.scroll-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 200;
  pointer-events: none;
  background: transparent;
}
.scroll-progress > i {
  display: block;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--brand-a), var(--brand-b) 60%, var(--good));
  box-shadow: 0 0 12px rgba(0, 167, 245, 0.5);
}
[dir="rtl"] .scroll-progress > i { transform-origin: right center; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress > i {
      animation: sp-grow linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes sp-grow { to { transform: scaleX(1); } }

/* --- section titles: the accent rule draws itself in ----------------------- */
.section-title { position: relative; }
.section-kicker + .section-title::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  width: 46px;
  height: 2px;
  border-radius: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  background: var(--brand-grad);
  opacity: 0.85;
}
.section-kicker + .section-title { margin-bottom: 30px; }
@media (prefers-reduced-motion: no-preference) {
  .section-kicker + .section-title::after { transition: transform 0.7s 0.15s var(--ease-out); }
  .section-kicker + .section-title.in::after { transform: translateX(-50%) scaleX(1); }
  /* A title without .reveal never gets .in, so show its rule unconditionally. */
  .section-kicker + .section-title:not(.reveal)::after { transform: translateX(-50%) scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .section-kicker + .section-title::after { transform: translateX(-50%) scaleX(1); }
}

/* --- cards: lift the whole grid neighbourhood, not just the hovered card ---
   A grid where only the hovered card reacts feels flat; dimming its siblings
   slightly makes the pointer feel like a light source. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card-grid:has(.card:hover) .card:not(:hover) { opacity: 0.72; }
  .card-grid .card { transition: transform 0.25s var(--ease-out), border-color 0.25s, background 0.25s, box-shadow 0.25s, opacity 0.3s; }
}

/* --- diagram bands: the number counts up when the stack lands ------------- */
.wx-dg-band-n { transition: transform 0.4s var(--ease-spring); }
@media (prefers-reduced-motion: no-preference) {
  .wx-dg-stack:not(.in) .wx-dg-band-n { transform: scale(0.7); }
}

/* --- io nodes breathe once on entry -------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .wx-dg-stack.in .wx-dg-io[data-io="out"] { animation: dg-io-in 0.7s 0.9s var(--ease-out) backwards; }
  @keyframes dg-io-in { from { opacity: 0; transform: translateY(8px); } }
}

/* --- ecosystem brand switcher (shared: websites/_shared/brand-switch.mjs) ---
   The brand stays a home link; the caret opens a directory of every product
   site + the Lisan platform. Marks under /assets/marks/ come from
   brand/gen-logos.mjs. Same block on all seven sites. */
.brand-switch { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.brand-caret {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 2px; border: 0; background: none; border-radius: 0;
  font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none;
  color: var(--muted);
  transition: color 0.25s;
}
.brand-switch:hover .brand-caret, .brand-switch:focus-within .brand-caret { color: var(--ink); }
.brand-switch:hover .brand-caret svg, .brand-switch:focus-within .brand-caret svg { transform: rotate(180deg); }
.brand-caret svg { display: block; transition: transform 0.3s var(--ease-out); }
.brand-caret:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.4); outline-offset: 2px; border-radius: 4px; }

.brand-menu {
  position: absolute; top: calc(100% + 14px); inset-inline-start: -8px; z-index: 200;
  width: 308px; padding: 12px;
  background: rgba(13, 14, 16, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 18px;
  backdrop-filter: blur(24px) saturate(1.25);
  -webkit-backdrop-filter: blur(24px) saturate(1.25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 70px rgba(0, 0, 0, 0.55);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98);
  transform-origin: top left;
  transition: opacity 0.25s ease, visibility 0.25s, transform 0.3s var(--ease-out);
}
[dir="rtl"] .brand-menu { transform-origin: top right; }
/* hover bridge so the pointer can travel down without closing */
.brand-switch::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.brand-switch:hover .brand-menu, .brand-switch:focus-within .brand-menu {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.bs-head {
  color: var(--faint); font-size: 0.72rem; font-weight: 640; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 6px 10px 8px; margin: 0;
}
.brand-menu ul { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.brand-menu li a, .brand-menu a { text-decoration: none; }
.bs-item, .bs-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 12px;
  transition: background 0.2s ease;
}
.bs-item:hover, .bs-foot:hover { background: rgba(255, 255, 255, 0.055); }
.bs-logo {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px;
  background: color-mix(in srgb, var(--pa, #9da3ae) 13%, rgba(255, 255, 255, 0.03));
  border: 1px solid color-mix(in srgb, var(--pa, #9da3ae) 28%, transparent);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}
.bs-item:hover .bs-logo {
  transform: scale(1.06);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--pa) 30%, transparent);
}
.bs-logo img { width: 22px; height: 22px; object-fit: contain; }
.bs-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bs-text b { font-family: var(--font-display); font-weight: 600; font-size: 0.94rem; color: var(--ink); }
.bs-text i { font-style: normal; color: var(--faint); font-size: 0.78rem; }
.bs-arr {
  margin-inline-start: auto; color: var(--faint); font-size: 0.85rem;
  opacity: 0; transform: translate(-4px, 2px); transition: opacity 0.2s, transform 0.25s var(--ease-out);
}
.bs-item:hover .bs-arr, .bs-foot:hover .bs-arr { opacity: 1; transform: translate(0, 0); }
.bs-current { background: rgba(255, 255, 255, 0.04); }
.bs-foot { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); border-radius: 0 0 12px 12px; }
.bs-logo-hub { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }

@media (max-width: 980px) {
  /* On mobile the burger menu handles navigation; keep the brand simple. */
  .brand-caret, .brand-menu { display: none; }
}

/* ---------- pricing v2 (ported from the meetrix kit, WriteX blue) ---------- */
.bill-toggle { display: flex; justify-content: center; gap: 0; margin: 0 auto 30px; width: max-content; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.bill-toggle button { appearance: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 0.92rem; font-weight: 600; padding: 8px 18px; border-radius: 999px; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: background 0.18s ease, color 0.18s ease; }
.bill-toggle button.on { background: var(--brand-grad); color: #fff; }
.bt-badge { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 2px 8px; }
.bill-toggle button:not(.on) .bt-badge { background: rgba(25, 122, 238, 0.2); color: var(--accent); }

.price-card { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; display: flex; flex-direction: column; }
.price-card:hover { transform: translateY(-3px); border-color: rgba(31, 139, 240, 0.4); }
@supports (grid-template-rows: subgrid) {
  .price-grid .price-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; }
}
.price-amount span.price-num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.price-was { text-decoration: line-through; color: var(--faint); font-size: 1.05rem !important; font-weight: 500 !important; margin-inline-end: 8px; }
.price-was:empty { display: none; }
.price-head { align-self: start; }
.price-cta { align-self: start; padding-top: 6px; }
.price-sub { color: var(--muted); font-size: 0.8rem; margin: 4px 0 0; min-height: 2.2em; }
.price-eff { color: var(--faint); font-size: 0.8rem; margin: 2px 0 12px; }
.price-alt { display: block; text-align: center; margin-top: 10px; font-size: 0.82rem; color: var(--muted); }
.price-alt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.btn-soft { background: rgba(25, 122, 238, 0.14); border: 1px solid rgba(31, 139, 240, 0.5); color: #7fc4ff; }
.btn-soft:hover { background: rgba(25, 122, 238, 0.24); border-color: rgba(31, 139, 240, 0.75); color: #fff; }
.price-flag.muted { background: rgba(255, 255, 255, 0.09); color: var(--muted); }
.price-featured { box-shadow: 0 14px 48px rgba(25, 122, 238, 0.26), var(--shadow-pop); }
.price-incl { text-transform: uppercase; font-size: 0.66rem !important; letter-spacing: 0.07em; color: var(--faint) !important; padding-left: 0 !important; margin-bottom: -2px; }
.price-incl::before { display: none !important; }
[dir="rtl"] .price-incl { padding-right: 0 !important; }

.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 26px auto 0; color: var(--muted); font-size: 0.88rem; }
.trust-strip span { display: inline-flex; align-items: center; gap: 8px; }
.trust-strip svg { flex: 0 0 auto; color: var(--brand-b); }

.anchor-band { text-align: center; background: linear-gradient(180deg, rgba(25, 122, 238, 0.09), rgba(255, 255, 255, 0.02)); border: 1px solid rgba(31, 139, 240, 0.3); border-radius: var(--radius-lg); padding: 30px 24px; }
.anchor-band .ab-big { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.8rem); font-weight: 700; margin: 0 0 6px; }
.anchor-band p { color: var(--muted); margin: 0; font-size: 0.95rem; }

/* v2/v3 engine cards on the pricing page */
.engine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.engine-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.engine-card.v3 { border-color: rgba(31, 139, 240, 0.45); background: linear-gradient(180deg, rgba(25, 122, 238, 0.08), rgba(255, 255, 255, 0.02)); }
.engine-tag { display: inline-block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; border-radius: 999px; padding: 3px 10px; margin-bottom: 10px; background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.engine-card.v3 .engine-tag { background: var(--brand-grad); color: #fff; }
.engine-card h3 { margin: 0 0 6px; font-size: 1.15rem; }
.engine-card p { color: var(--muted); font-size: 0.92rem; margin: 0 0 10px; }
.engine-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.engine-card li { position: relative; padding-left: 22px; font-size: 0.88rem; }
.engine-card li::before { content: ""; position: absolute; left: 0; top: 6px; width: 13px; height: 8px; border-left: 2px solid var(--brand-b); border-bottom: 2px solid var(--brand-b); transform: rotate(-45deg); }
[dir="rtl"] .engine-card li { padding-left: 0; padding-right: 22px; }
[dir="rtl"] .engine-card li::before { left: auto; right: 0; }
@media (max-width: 860px) { .engine-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .bill-toggle { width: 100%; justify-content: stretch; } .bill-toggle button { flex: 1; justify-content: center; } }