/* ──────────────────────────────────────────────────────────────────────
   Vodlix landing pages — PRODUCT ELEMENT LIBRARY

   Self-contained blocks that show the Vodlix ecosystem as product
   mockups: Vertex (CRM), Vodlix Intel (AI for video) and Vimo (reels),
   plus the frames, the ecosystem strip, feature cards and one system
   animation. Every rule is layered ON the Vodlix 2026 design system
   (vodlix-2026.css must load first) and uses only its tokens, type,
   spacing and radius.

   The ONE permitted departure from the DS: inside a product mockup the
   product's own UI accent may appear, so the mockup reads as that
   product and not as a Vodlix widget. Vertex teal is the only such
   accent here (its own tokens.css: teal-600 on light, teal-400 on dark).
   Intel is a Vodlix product and stays brand red. Vimo has no documented
   brand colour, so its chrome stays neutral.

   Prefix: `.el-`. Mobile-first: every block holds at 360px, container
   queries only ever ADD as room appears. Mockups reflow or scroll inside
   their own frame, never the page.

   Served at https://landing.vodlix.com/shared/lp/elements/elements.css
   Gallery + snippets: index.html beside this file. Usage: README.md.
   ────────────────────────────────────────────────────────────────────── */

/* ── Product accent tokens (mode-scoped, inherit like the DS tokens) ── */
:root, .theme-v2 {
  --el-vx:#0d9488;                 /* Vertex teal-600, app light primary */
  --el-vx-soft:#f0fdfa;            /* Vertex teal-50 */
  --el-vx-ink:#0f766e;             /* Vertex teal-700, reading colour on the tint */
  --el-vx-on:#ffffff;
  --el-mock-bg:var(--bg);          /* app canvas inside a frame */
  --el-mock-line:var(--line);
  --el-shade:rgba(12,12,14,.06);   /* skeleton / thumbnail wash */
  --el-face:rgba(255,255,255,.55); /* face-box stroke on the video */
}
:root[data-mode="dark"], .theme-v2[data-mode="dark"] {
  --el-vx:#2dd4bf;                 /* Vertex teal-400, app dark primary */
  --el-vx-soft:#042f2e;            /* Vertex teal-950 */
  --el-vx-ink:#2dd4bf;
  --el-vx-on:#042f2e;
  --el-shade:rgba(255,255,255,.07);
  --el-face:rgba(255,255,255,.7);
}

/* ── Shared mockup typography: real UI density, DS body face ────────── */
.el { container-type:inline-size; min-width:0; font-family:var(--ff-body), 'Noto Sans Arabic','Noto Sans SC','Noto Sans JP', sans-serif; color:var(--ink); }
.el, .el * { box-sizing:border-box; }
.el svg { display:inline-block; vertical-align:middle; flex:0 0 auto; }
.el-ui { font-size:12.5px; line-height:1.45; }
.el-ui b, .el-ui strong { font-weight:600; }
.el-mono { font-variant-numeric:var(--num); }
.el-muted { color:var(--faint); }
.el-sub { color:var(--sub); }

/* Chips used across mockups — DS badge shape at UI density */
.el-chip { display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px; border-radius:999px;
  font-size:11px; font-weight:600; line-height:1; white-space:nowrap; background:var(--track); color:var(--sub); }
.el-chip--ok { background:var(--ok-tint); color:var(--ok-ink); }
.el-chip--warn { background:var(--orange-tint); color:var(--orange-ink); }
.el-chip--brand { background:var(--brand-tint); color:var(--accent-ink); }
.el-chip--line { background:transparent; border:1px solid var(--line); color:var(--sub); }
.el-chip--vx { background:var(--el-vx-soft); color:var(--el-vx-ink); }
.el-chip svg { width:11px; height:11px; }

/* Avatar — initials in a tinted circle */
.el-avatar { width:28px; height:28px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; background:var(--icon-chip-bg); border:1px solid var(--icon-chip-line); color:var(--accent-ink); flex:0 0 auto; }
.el-avatar--vx { background:var(--el-vx-soft); border-color:transparent; color:var(--el-vx-ink); }
.el-avatar--lg { width:40px; height:40px; font-size:14px; }

/* Small UI buttons inside mockups (not the DS pill — these are product UI) */
.el-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:28px; padding:0 11px; border-radius:8px;
  font-size:12px; font-weight:600; line-height:1; border:1px solid var(--line); background:var(--surface); color:var(--ink); white-space:nowrap; }
.el-btn--vx { background:var(--el-vx); border-color:var(--el-vx); color:var(--el-vx-on); }
.el-btn--dark { background:var(--btn-bg-default); border-color:var(--btn-bg-default); color:var(--btn-ink-default); }
.el-btn--pill { border-radius:999px; }
.el-btn svg { width:13px; height:13px; }

/* ══════════════════════════════════════════════════════════════════════
   1. FRAMES — a browser frame and a phone frame any mockup sits in
   ══════════════════════════════════════════════════════════════════════ */
.el-frame { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden; }
.el-frame__bar { display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); background:var(--bg); }
.el-frame__dots { display:flex; gap:5px; }
.el-frame__dots i { width:9px; height:9px; border-radius:50%; background:var(--track); border:1px solid var(--line); }
.el-frame__url { flex:1 1 auto; min-width:0; height:24px; display:flex; align-items:center; gap:6px; padding:0 10px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-size:11.5px; color:var(--sub); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.el-frame__url svg { width:11px; height:11px; color:var(--icon-muted); }
.el-frame__body { background:var(--el-mock-bg); min-width:0; }
/* A wide mockup that must not reflow scrolls INSIDE the frame. */
.el-frame__body--scroll { overflow-x:auto; scrollbar-width:thin; }

/* The bezel is always dark hardware: ink on light, graphite (the dark --track) on dark. */
.el-phone { --el-bezel:#0c0c0e; position:relative; width:100%; max-width:240px; margin:0 auto; aspect-ratio:9/19; border-radius:32px; padding:8px;
  background:var(--el-bezel); border:1px solid var(--line); }
[data-mode="dark"] .el-phone { --el-bezel:#2c2c33; }
.el-phone__screen { position:relative; width:100%; height:100%; border-radius:24px; overflow:hidden; background:var(--bg); }
.el-phone__notch { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:34%; height:18px; border-radius:999px; background:var(--el-bezel); z-index:2; }
.el-phone--sm { max-width:200px; }

/* ══════════════════════════════════════════════════════════════════════
   2. VERTEX — chat CRM inbox
   Real screens: /inbox list (channels, Inbox/Spam folders, Support tab),
   /inbox/:id thread with the anchor banner, AI teammate draft that
   Needs approval, Review-with-edit → Approve & send.
   ══════════════════════════════════════════════════════════════════════ */
.el-vx { --el-line:var(--line); }
.el-vx-inbox { display:grid; grid-template-columns:1fr; min-height:420px; }
.el-vx-inbox__list { display:none; border-right:1px solid var(--line); background:var(--surface); min-width:0; }
.el-vx-inbox__thread { display:flex; flex-direction:column; min-width:0; background:var(--el-mock-bg); }
.el-vx-inbox__rail { display:none; border-left:1px solid var(--line); background:var(--surface); padding:14px; min-width:0; }
@container (min-width: 620px) {
  .el-vx-inbox { grid-template-columns:220px 1fr; }
  .el-vx-inbox__list { display:block; }
}
@container (min-width: 940px) {
  .el-vx-inbox { grid-template-columns:230px 1fr 220px; }
  .el-vx-inbox__rail { display:block; }
}
/* list */
.el-vx-inbox__head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 12px 8px; }
.el-vx-inbox__head b { font-size:13px; }
.el-vx-folders { display:flex; gap:2px; padding:0 8px 8px; }
.el-vx-folders span { font-size:11.5px; font-weight:600; color:var(--sub); padding:4px 8px; border-radius:6px; }
.el-vx-folders span[aria-current] { background:var(--el-vx-soft); color:var(--el-vx-ink); }
.el-vx-row { display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:start; padding:10px 12px; border-top:1px solid var(--line); }
.el-vx-row[aria-current] { background:var(--el-vx-soft); box-shadow:inset 2px 0 0 var(--el-vx); }
.el-vx-row > * { min-width:0; }
.el-vx-row > span:nth-child(2) { display:grid; gap:1px; }
.el-vx-row__who { font-size:12.5px; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.el-vx-row__snip { font-size:11.5px; color:var(--sub); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.el-vx-row__meta { display:grid; justify-items:end; gap:4px; font-size:10.5px; color:var(--faint); }
.el-vx-row__meta svg { width:12px; height:12px; color:var(--icon-muted); }
.el-vx-row__dot { width:7px; height:7px; border-radius:50%; background:var(--el-vx); }
/* thread */
.el-vx-thread__head { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface); }
.el-vx-thread__head b { font-size:13px; display:block; }
.el-vx-thread__head small { font-size:11px; color:var(--faint); display:block; }
.el-vx-thread__head .el-chip { margin-left:auto; }
.el-vx-anchor { display:flex; align-items:center; gap:8px; padding:7px 14px; font-size:11.5px; color:var(--sub); background:var(--el-vx-soft); border-bottom:1px solid var(--line); }
.el-vx-anchor svg { width:12px; height:12px; color:var(--el-vx-ink); }
.el-vx-anchor b { color:var(--el-vx-ink); }
.el-vx-msgs { display:grid; gap:12px; padding:14px; align-content:start; flex:1 1 auto; }
.el-vx-msg { display:grid; grid-template-columns:auto 1fr; gap:9px; max-width:92%; }
.el-vx-msg--out { grid-template-columns:1fr auto; margin-left:auto; }
.el-vx-msg--out .el-vx-msg__b { order:-1; }
.el-vx-msg__b { border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:9px 12px; font-size:12.5px; line-height:1.5; }
.el-vx-msg--out .el-vx-msg__b { background:var(--el-vx-soft); border-color:transparent; }
.el-vx-msg__m { font-size:10.5px; color:var(--faint); margin-top:4px; }
/* AI teammate draft — Needs approval */
.el-vx-draft { margin:0 14px 14px; border:1px solid var(--el-vx); border-radius:12px; background:var(--surface); overflow:hidden; }
.el-vx-draft__h { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--el-vx-soft); font-size:11.5px; color:var(--el-vx-ink); flex-wrap:wrap; }
.el-vx-draft__h svg { width:13px; height:13px; }
.el-vx-draft__h .el-chip { margin-left:auto; }
.el-vx-draft__b { padding:10px 12px; font-size:12.5px; line-height:1.5; }
.el-vx-draft__cite { display:flex; flex-wrap:wrap; gap:6px; padding:0 12px 10px; font-size:11px; color:var(--sub); }
.el-vx-draft__cite span { display:inline-flex; align-items:center; gap:4px; }
.el-vx-draft__cite svg { width:11px; height:11px; color:var(--icon-muted); }
.el-vx-draft__f { display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--line); flex-wrap:wrap; }
.el-vx-draft__f .el-muted { font-size:11px; align-self:center; margin-left:auto; }
/* right rail */
.el-vx-rail__t { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:0 0 10px; }
.el-vx-kv { display:grid; grid-template-columns:auto 1fr; gap:6px 10px; font-size:12px; }
.el-vx-kv dt { color:var(--faint); }
.el-vx-kv dd { margin:0; font-weight:500; }
.el-vx-rail hr { border:0; border-top:1px solid var(--line); margin:12px 0; }

/* ══════════════════════════════════════════════════════════════════════
   2b. VERTEX — deals pipeline (kanban, stage SLA, deal score)
   Stages from pipeline-transitions.md: New → Engaged → Call scheduled →
   Proposal → Won. Columns scroll inside the frame on a phone.
   ══════════════════════════════════════════════════════════════════════ */
.el-vx-pipe { display:grid; gap:0; }
.el-vx-pipe__top { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface); flex-wrap:wrap; }
.el-vx-pipe__top b { font-size:13px; }
.el-vx-pipe__top .el-chip { margin-left:auto; }
.el-vx-cols { display:grid; grid-auto-flow:column; grid-auto-columns:200px; gap:10px; padding:12px 14px 14px; overflow-x:auto;
  scroll-snap-type:x proximity; scrollbar-width:thin; }
.el-vx-cols > * { scroll-snap-align:start; }
@container (min-width: 1020px) {
  .el-vx-cols { grid-auto-flow:row; grid-template-columns:repeat(5, minmax(0,1fr)); grid-auto-columns:auto; overflow:visible; }
}
.el-vx-col { display:grid; gap:8px; align-content:start; min-width:0; }
.el-vx-col__h { display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:0 2px 2px; }
.el-vx-col__h em { font-style:normal; font-weight:600; color:var(--faint); font-variant-numeric:var(--num); }
.el-vx-col__h small { margin-left:auto; font-size:10px; font-weight:500; color:var(--faint); white-space:nowrap; }
.el-vx-col__h i { width:8px; height:8px; border-radius:50%; background:var(--track); }
.el-vx-col--won .el-vx-col__h i { background:var(--ok); }
.el-vx-deal { border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:10px 11px; display:grid; gap:6px; }
.el-vx-deal b { font-size:12.5px; line-height:1.35; }
.el-vx-deal span { font-size:11px; color:var(--sub); }
.el-vx-deal__f { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.el-vx-deal__f .el-avatar { width:20px; height:20px; font-size:8.5px; }
.el-vx-deal__f small { font-size:10.5px; color:var(--faint); margin-left:auto; font-variant-numeric:var(--num); }
.el-vx-deal--stale { border-color:var(--orange); }
.el-vx-deal--ai { border-color:var(--el-vx); }
.el-vx-score { display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:var(--el-vx-ink); font-variant-numeric:var(--num); }
.el-vx-score i { width:28px; height:4px; border-radius:999px; background:var(--track); overflow:hidden; display:inline-block; }
.el-vx-score i::after { content:""; display:block; height:100%; width:var(--pct, 50%); background:var(--el-vx); border-radius:999px; }

/* ══════════════════════════════════════════════════════════════════════
   2c. VERTEX — subscriber / contact record card
   lifecycle (target · lead · prospect · active · churned · inactive),
   consent ledger per channel, timezone-aware sending, last contact.
   ══════════════════════════════════════════════════════════════════════ */
.el-vx-contact { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); overflow:hidden; }
.el-vx-contact__h { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); }
.el-vx-contact__h b { display:block; font-size:14px; }
.el-vx-contact__h small { display:block; font-size:11.5px; color:var(--sub); }
.el-vx-contact__h .el-chip { margin-left:auto; }
.el-vx-life { display:flex; gap:4px; padding:12px 16px 0; overflow-x:auto; scrollbar-width:none; }
.el-vx-life::-webkit-scrollbar { display:none; }
.el-vx-life span { flex:1 0 auto; text-align:center; font-size:10.5px; font-weight:600; color:var(--faint); padding:5px 6px; border-radius:6px; background:var(--track); white-space:nowrap; }
.el-vx-life span[aria-current] { background:var(--el-vx); color:var(--el-vx-on); }
.el-vx-life span[data-done] { color:var(--sub); }
.el-vx-contact__grid { display:grid; gap:14px; padding:14px 16px 16px; }
@container (min-width: 560px) { .el-vx-contact__grid { grid-template-columns:1fr 1fr; } }
.el-vx-contact__grid h6 { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin:0 0 8px; }
.el-vx-kv--tight { gap:5px 10px; }
.el-vx-consent { display:grid; gap:6px; }
.el-vx-consent div { display:flex; align-items:center; gap:8px; font-size:12px; }
.el-vx-consent div small { margin-left:auto; font-size:10.5px; color:var(--faint); white-space:nowrap; }
.el-vx-consent svg { width:14px; height:14px; }
.el-vx-consent .on { color:var(--ok); }
.el-vx-consent .off { color:var(--icon-muted); }
.el-vx-contact__f { display:flex; align-items:center; gap:10px; padding:10px 16px; border-top:1px solid var(--line); background:var(--bg); font-size:11.5px; color:var(--sub); flex-wrap:wrap; }
.el-vx-contact__f svg { width:13px; height:13px; color:var(--el-vx-ink); }
.el-vx-contact__f b { color:var(--ink); }

/* ══════════════════════════════════════════════════════════════════════
   2d. VERTEX — automation flow (trigger → action → wait → branch)
   Nodes from automation/nodes.md: trigger (segment.entered), sendEmail
   "Send as teammate", wait until reply, branch, moveDealToStage,
   notifyTeam. The GDPR guard runs before every send, from any node.
   ══════════════════════════════════════════════════════════════════════ */
.el-vx-flow { display:grid; gap:0; }
.el-vx-flow__top { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface); flex-wrap:wrap; }
.el-vx-flow__top b { font-size:13px; }
.el-vx-flow__top .el-chip { margin-left:auto; }
.el-vx-nodes { display:grid; gap:0; padding:16px 14px; }
.el-vx-node { position:relative; display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; padding-bottom:18px; }
.el-vx-node:last-child { padding-bottom:0; }
.el-vx-node::before { content:""; position:absolute; left:15px; top:32px; bottom:-2px; width:1px; background:var(--line); }
.el-vx-node:last-child::before { display:none; }
.el-vx-node__ico { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--track); color:var(--sub); z-index:1; }
.el-vx-node__ico svg { width:15px; height:15px; }
.el-vx-node--trigger .el-vx-node__ico { background:var(--el-vx); color:var(--el-vx-on); }
.el-vx-node--ai .el-vx-node__ico { background:var(--el-vx-soft); color:var(--el-vx-ink); }
.el-vx-node__c { border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:9px 12px; min-width:0; }
.el-vx-node__k { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.el-vx-node__t { font-size:12.5px; font-weight:600; margin-top:1px; }
.el-vx-node__d { font-size:11.5px; color:var(--sub); margin-top:2px; line-height:1.45; }
.el-vx-branch { display:grid; gap:10px; }
.el-vx-branch__l { font-size:10.5px; font-weight:700; color:var(--faint); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.el-vx-branch__l.yes { color:var(--ok-ink); }
.el-vx-branch__l.no { color:var(--orange-ink); }
@container (min-width: 720px) {
  .el-vx-nodes { grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,.85fr) minmax(0,1.9fr); gap:14px; align-items:start; }
  .el-vx-node { grid-template-columns:1fr; padding-bottom:0; }
  .el-vx-node::before { left:auto; right:-14px; top:15px; bottom:auto; width:14px; height:1px; }
  .el-vx-node__ico { margin-bottom:-6px; }
  .el-vx-branch { grid-template-columns:1fr 1fr; }
}
@container (min-width: 720px) and (max-width: 979px) { .el-vx-branch { grid-template-columns:1fr; } }
.el-vx-flow__f { display:flex; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--line); background:var(--surface); font-size:11.5px; color:var(--sub); flex-wrap:wrap; }
.el-vx-flow__f svg { width:13px; height:13px; color:var(--ok); }

/* ══════════════════════════════════════════════════════════════════════
   3. VODLIX INTEL — capability cards + face timeline
   Intel is a Vodlix product: brand red, DS card language.
   ══════════════════════════════════════════════════════════════════════ */
.el-intel { display:grid; gap:14px; }
.el-intel__grid { display:grid; gap:12px; }
@container (min-width: 560px) { .el-intel__grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@container (min-width: 900px) { .el-intel__grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.el-intel__grid .card { padding:16px; display:grid; gap:6px; align-content:start; }
.el-intel__grid .card .card__ico { margin-bottom:6px; }
.el-intel__grid .card h5 { font-size:15px; margin:0; }
.el-intel__grid .card p { font-size:13px; margin:0; }
.el-intel__grid .card .el-chip { justify-self:start; margin-top:4px; }
.el-intel__note { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--sub); flex-wrap:wrap; }
.el-intel__note svg { width:14px; height:14px; color:var(--accent-ink); }

/* Face timeline — a video with tagged faces, timestamps, and chapters */
.el-faces { display:grid; gap:0; }
.el-faces__top { display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface); flex-wrap:wrap; }
.el-faces__top b { font-size:13px; }
.el-faces__top .el-chip { margin-left:auto; }
.el-faces__body { display:grid; gap:14px; padding:14px; }
@container (min-width: 760px) { .el-faces__body { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:start; } }
.el-video { position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; border:1px solid var(--line);
  background:
    radial-gradient(60% 70% at 30% 40%, rgba(230,29,44,.28) 0%, transparent 60%),
    radial-gradient(50% 60% at 78% 70%, rgba(248,148,54,.22) 0%, transparent 60%),
    linear-gradient(180deg, #1a1a20 0%, #0c0c0e 100%); }
.el-video__fig { position:absolute; bottom:0; border-radius:40% 40% 0 0; background:rgba(255,255,255,.08); }
.el-video__fig--a { left:16%; width:22%; height:62%; }
.el-video__fig--b { left:58%; width:24%; height:70%; }
.el-face { position:absolute; border:1.5px solid var(--el-face); border-radius:6px; }
.el-face--a { left:22%; top:30%; width:10%; aspect-ratio:1; }
.el-face--b { left:63%; top:34%; width:11%; aspect-ratio:1; }
.el-face__tag { position:absolute; left:-1.5px; bottom:calc(100% + 4px); white-space:nowrap; font-size:10px; font-weight:600; color:#fff;
  background:rgba(12,12,14,.78); border-radius:5px; padding:3px 6px; line-height:1; }
.el-face__tag b { color:#fff; font-variant-numeric:var(--num); }
.el-face--match { border-color:var(--brand); }
.el-face--match .el-face__tag { background:var(--brand); }
.el-video__t { position:absolute; left:12px; top:10px; font-size:11px; font-weight:600; color:rgba(255,255,255,.85); }
.el-video__tc { position:absolute; right:12px; top:10px; font-size:10.5px; color:rgba(255,255,255,.7); font-variant-numeric:var(--num); }
/* scrubber with chapters and appearance ticks */
.el-scrub { position:absolute; left:12px; right:12px; bottom:10px; height:6px; border-radius:999px; background:rgba(255,255,255,.22); }
.el-scrub i { position:absolute; top:0; height:100%; border-radius:999px; }
.el-scrub .ch { background:rgba(255,255,255,.55); }
.el-scrub .tick { width:3px; margin-left:-1.5px; background:var(--brand); }
.el-scrub .head { width:12px; height:12px; top:-3px; margin-left:-6px; border-radius:50%; background:#fff; }
.el-scrub__lbl { position:absolute; bottom:calc(100% + 4px); font-size:9.5px; color:rgba(255,255,255,.75); white-space:nowrap; }
/* people list */
.el-people { display:grid; gap:8px; align-content:start; }
.el-person { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:9px 10px; }
.el-person__crop { width:36px; height:36px; border-radius:8px; background:linear-gradient(160deg, #3a3a42, #1a1a20); position:relative; overflow:hidden; }
.el-person__crop::after { content:""; position:absolute; left:25%; right:25%; bottom:0; height:60%; border-radius:45% 45% 0 0; background:rgba(255,255,255,.14); }
.el-person b { font-size:12.5px; display:block; }
.el-person small { font-size:11px; color:var(--sub); display:block; }
.el-stamps { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.el-stamps span { font-size:10.5px; font-weight:600; font-variant-numeric:var(--num); padding:2px 7px; border-radius:999px; background:var(--track); color:var(--sub); }
.el-stamps span[data-hq] { background:var(--brand-tint); color:var(--accent-ink); }
.el-chapters { display:flex; gap:6px; flex-wrap:wrap; font-size:11px; color:var(--sub); }
.el-chapters span { display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; border:1px solid var(--line); font-variant-numeric:var(--num); }
.el-chapters svg { width:11px; height:11px; color:var(--icon-muted); }

/* ══════════════════════════════════════════════════════════════════════
   4. VIMO — reel builder, scene by scene, with a 9:16 preview
   Reel 441 structure: 4 scenes (hook / pain / turn / CTA), Editorial
   style (off-white frame, display face, red accent, pill CTA), voice
   + music + word-timed captions. Vimo chrome stays neutral.
   ══════════════════════════════════════════════════════════════════════ */
.el-vimo { display:grid; gap:0; }
.el-vimo__top { display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface); flex-wrap:wrap; }
.el-vimo__top b { font-size:13px; }
.el-vimo__top .el-chip { margin-left:0; }
.el-vimo__top .el-btn { margin-left:auto; }
.el-vimo__body { display:grid; gap:16px; padding:14px; }
@container (min-width: 640px) { .el-vimo__body { grid-template-columns:minmax(0,1fr) 220px; align-items:start; } }
@container (min-width: 900px) { .el-vimo__body { grid-template-columns:minmax(0,1fr) 250px; } }
.el-scenes { display:grid; gap:8px; }
.el-scene { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:9px 11px; }
.el-scene > * { min-width:0; }
.el-scene > span:nth-child(2) { display:grid; gap:1px; }
.el-scene[aria-current] { border-color:var(--brand); }
.el-scene__n { width:26px; height:26px; border-radius:8px; background:var(--track); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--sub); font-variant-numeric:var(--num); }
.el-scene[aria-current] .el-scene__n { background:var(--brand); color:var(--on-brand); }
.el-scene b { font-size:12.5px; display:block; }
.el-scene small { font-size:11px; color:var(--sub); display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.el-scene__dur { font-size:11px; color:var(--faint); font-variant-numeric:var(--num); white-space:nowrap; }
.el-layers { display:flex; gap:4px; flex-wrap:wrap; margin-top:5px; }
.el-layers span { font-size:10px; font-weight:600; padding:2px 6px; border-radius:999px; background:var(--track); color:var(--sub); }
.el-layers span[data-on] { background:var(--brand-tint); color:var(--accent-ink); }
.el-tracks { display:grid; gap:6px; margin-top:4px; }
.el-track { display:grid; grid-template-columns:64px 1fr; gap:8px; align-items:center; font-size:11px; color:var(--sub); }
.el-track__bar { height:14px; border-radius:6px; background:var(--track); position:relative; overflow:hidden; }
.el-track__bar i { position:absolute; top:2px; bottom:2px; border-radius:4px; background:var(--el-shade); border:1px solid var(--line); }
.el-track__bar .cap { background:var(--brand-tint); border-color:transparent; }
/* the scene inside the phone — Editorial (S2) frame */
.el-vimo .el-phone { max-width:220px; }
.el-s2 { position:absolute; inset:0; display:flex; flex-direction:column; padding:22% 9% 9%; background:#fbfbfc; color:#0c0c0e; }
.el-s2__h { font-family:var(--ff-display), system-ui, sans-serif; font-weight:700; font-size:clamp(14px, 9cqi, 20px); line-height:1.08; letter-spacing:var(--h-tracking); }
.el-s2__h em { font-style:normal; color:#E61D2C; }
.el-s2__caps { margin-top:auto; margin-bottom:18%; font-family:var(--ff-display), system-ui, sans-serif; font-weight:700; font-size:clamp(11px, 7.5cqi, 15px); line-height:1.25; }
.el-s2__caps span { display:inline-block; margin-right:.3em; opacity:0; transform:translateY(4px); animation:el-cap 6s ease-out infinite; animation-delay:calc(var(--i) * .28s); }
@keyframes el-cap { 0% { opacity:0; transform:translateY(4px); } 6% { opacity:1; transform:none; } 70% { opacity:1; transform:none; } 78%, 100% { opacity:0; transform:translateY(4px); } }
.el-s2__cta { align-self:flex-start; display:inline-flex; align-items:center; height:22px; padding:0 10px; border-radius:999px; background:#0c0c0e; color:#fff; font-size:9.5px; font-weight:600; }
.el-s2__mark { position:absolute; right:9%; bottom:6%; height:12px; width:auto; }
.el-s2__devices { display:flex; gap:8px; margin-top:8px; font-size:9px; font-weight:600; }
.el-s2__devices span { display:inline-flex; align-items:center; gap:3px; }
.el-s2__devices i { width:10px; height:10px; border-radius:50%; background:#E61D2C; display:inline-flex; align-items:center; justify-content:center; }
.el-s2__devices svg { width:7px; height:7px; color:#fff; }

/* ══════════════════════════════════════════════════════════════════════
   5. ECOSYSTEM STRIP — Vodlix at the centre, Vertex / Intel / Vimo around
   ══════════════════════════════════════════════════════════════════════ */
.el-eco { display:grid; gap:12px; }
.el-eco__hub { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); padding:18px 20px; display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center; }
.el-eco__hub img { height:36px; width:36px; display:block; }
.el-eco__hub .el-logo--dark { display:none; }
[data-mode="dark"] .el-eco__hub .el-logo--light { display:none; }
[data-mode="dark"] .el-eco__hub .el-logo--dark { display:block; }
.el-eco__hub b { font-family:var(--ff-display), system-ui, sans-serif; font-size:17px; font-weight:700; letter-spacing:var(--h-tracking); display:block; }
.el-eco__hub p { font-size:13.5px; color:var(--sub); line-height:1.5; margin:3px 0 0; }
.el-eco__sats { display:grid; gap:12px; }
@container (min-width: 640px) { .el-eco__sats { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.el-eco__sat { position:relative; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); padding:16px 18px; display:grid; gap:8px; align-content:start; transition:border-color .15s ease; }
.el-eco__sat:hover { border-color:rgba(230,29,44,.45); }
.el-eco__sat .ico { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--icon-chip-bg); border:1px solid var(--icon-chip-line); color:var(--accent-ink); }
.el-eco__sat .ico svg { width:18px; height:18px; }
.el-eco__sat--vx .ico { background:var(--el-vx-soft); border-color:transparent; color:var(--el-vx-ink); }
.el-eco__sat b { font-size:15px; font-weight:600; }
.el-eco__sat p { font-size:13px; color:var(--sub); line-height:1.5; margin:0; }
.el-eco__sat small { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
/* connector: one hairline from the hub down to the satellites at width */
@container (min-width: 640px) {
  .el-eco { position:relative; }
  .el-eco__hub { position:relative; }
  .el-eco__hub::after { content:""; position:absolute; left:50%; top:100%; width:1px; height:12px; background:var(--line); }
  .el-eco__sat::before { content:""; position:absolute; left:50%; top:-12px; width:1px; height:12px; background:var(--line); }
}

/* ══════════════════════════════════════════════════════════════════════
   6. FEATURE CARDS — DS .card in a responsive grid (rail on a phone)
   ══════════════════════════════════════════════════════════════════════ */
.el-features { display:grid; grid-auto-flow:column; grid-auto-columns:80%; gap:12px; overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; padding:2px 20px 14px; margin:0 -20px; scrollbar-width:none; }
.el-features::-webkit-scrollbar { display:none; }
.el-features > * { scroll-snap-align:center; min-width:0; }
@container (min-width: 640px) { .el-features { grid-auto-flow:row; grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-columns:auto; overflow:visible; padding:0; margin:0; scroll-snap-type:none; } }
@container (min-width: 960px) { .el-features { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.el-features .card { display:grid; gap:0; align-content:start; }
.el-features .card h5 { margin-bottom:6px; }
.el-features .card p { color:var(--sub); }
/* app pipeline inside a card: configure → generated → approved → live */
.el-steps4 { display:flex; align-items:center; gap:4px; margin-top:12px; font-size:10.5px; font-weight:600; color:var(--sub); flex-wrap:wrap; }
.el-steps4 span { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; background:var(--track); white-space:nowrap; }
.el-steps4 span[data-on] { background:var(--ok-tint); color:var(--ok-ink); }
.el-steps4 svg { width:10px; height:10px; color:var(--icon-muted); }

/* ══════════════════════════════════════════════════════════════════════
   7. SYSTEM ANIMATION — a deal advancing a stage (looping, small,
   reduced-motion safe, no library). Three mini columns; one card
   travels Engaged → Call scheduled and its score ticks up.
   ══════════════════════════════════════════════════════════════════════ */
.el-anim { border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); padding:14px; display:grid; gap:10px; }
.el-anim__h { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--sub); }
.el-anim__h b { color:var(--ink); }
.el-anim__h .el-chip { margin-left:auto; }
.el-anim__cols { position:relative; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.el-anim__col { border:1px dashed var(--line); border-radius:10px; min-height:96px; padding:8px; background:var(--bg); }
.el-anim__col > span { display:block; font-size:10.5px; font-weight:700; color:var(--faint); margin-bottom:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.el-anim__ghost { border:1px solid var(--line); border-radius:8px; height:34px; background:var(--surface); opacity:.55; margin-top:6px; }
.el-anim__card { position:absolute; top:30px; left:8px; width:calc((100% - 16px) / 3 - 16px); border:1px solid var(--el-vx); border-radius:8px; background:var(--surface); padding:7px 8px; display:grid; gap:4px;
  animation:el-move 7s cubic-bezier(.2,.8,.2,1) infinite; }
.el-anim__card b { font-size:11px; line-height:1.3; }
.el-anim__card .el-vx-score { font-size:10px; }
.el-anim__card .el-vx-score > i::after { animation:el-score 7s cubic-bezier(.2,.8,.2,1) infinite; }
/* the number: two layers cross-fade, so nothing depends on animating `content` */
.el-anim__num { position:relative; display:inline-block; width:2.2ch; height:1.2em; line-height:1.2em; }
.el-anim__num i { position:absolute; left:0; top:0; font-style:normal; width:auto; height:auto; background:none; animation:el-num-a 7s steps(1, end) infinite; }
.el-anim__num i::after { display:none; }
.el-anim__num i:last-child { animation-name:el-num-b; }
@keyframes el-move {
  0%, 38% { transform:translateX(0); }
  50%, 100% { transform:translateX(calc(100% + 24px)); }
}
@keyframes el-score { 0%, 40% { width:52%; } 55%, 100% { width:74%; } }
@keyframes el-num-a { 0%, 48% { opacity:1; } 49%, 100% { opacity:0; } }
@keyframes el-num-b { 0%, 48% { opacity:0; } 49%, 100% { opacity:1; } }
.el-anim__f { font-size:11px; color:var(--faint); display:flex; align-items:center; gap:6px; }
.el-anim__f svg { width:12px; height:12px; color:var(--el-vx-ink); }

/* Reduced motion: everything lands in its final state and stays there. */
@media (prefers-reduced-motion: reduce) {
  .el-s2__caps span { animation:none; opacity:1; transform:none; }
  .el-anim__card { animation:none; transform:translateX(calc(100% + 24px)); }
  .el-anim__card .el-vx-score > i::after { animation:none; width:74%; }
  .el-anim__num i { animation:none; opacity:0; }
  .el-anim__num i:last-child { opacity:1; }
  .el-eco__sat, .el-vx-row, .el-scene { transition:none; }
}

/* ── No-code control: headline + the five capabilities ──
   Art: shared/mockups/no-code-control.svg inlined (theme-aware via the DS tokens
   it reads). Phones get the list, 640px+ the illustration; it animates once when
   the block adds .nc-anim on entering view. */
.el-nocode { display:grid; gap:22px; }
.el-nocode__head { text-align:center; max-width:62ch; margin:0 auto; display:grid; gap:10px; }
.el-nocode__head h3 { margin:0; font-family:var(--ff-display); font-size:clamp(22px, 3.2vw, 34px); font-weight:600; letter-spacing:var(--h-tracking); line-height:1.15; text-wrap:balance; }
.el-nocode__head p { margin:0; color:var(--sub); }
/* phones: the five capabilities as a readable list; the illustration would be a 880px strip to swipe */
.el-nocode__list { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.el-nocode__list li { display:grid; grid-template-columns:44px 1fr; gap:12px; align-items:start; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-card); background:var(--surface); }
.el-nocode__list .ico { width:44px; height:44px; border-radius:50%; background:var(--brand-tint); color:var(--brand); display:grid; place-items:center; }
.el-nocode__list b { display:block; font-weight:700; letter-spacing:-.01em; }
.el-nocode__list span:last-child { color:var(--sub); font-size:13.5px; }
.el-nocode__art { display:none; }
.el-nocode__svg { display:block; width:100%; height:auto; aspect-ratio:16/9; }
/* Phones showed the list and hid the art entirely, so the illustration we
   built was invisible on a phone. The whole 16:9 canvas does not shrink to
   375px (the tile labels land at ~4px), but the dashboard inside it does:
   crop to it and the phone gets the real product shot, with the list under
   it for the words. Maths in scripts/, from the measured #dashboard bBox. */
@media (max-width: 639.98px) {
  .el-nocode__art { display:block; overflow:hidden; border-radius:var(--r-card); }
  .el-nocode__svg { display:block; width:177.78%; min-width:0; aspect-ratio:16/9;
    margin-left:-38.89%; margin-top:-2.22%; margin-bottom:-41.11%; }
}
@media (min-width: 640px) {
  .el-nocode__list { display:none; }
  .el-nocode__art { display:block; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; margin:0 -20px; padding:0 20px 8px; }
  .el-nocode__art::-webkit-scrollbar { display:none; }
  .el-nocode__svg { min-width:880px; }
}
@media (min-width: 960px) { .el-nocode__art { overflow:visible; margin:0; padding:0; } .el-nocode__svg { min-width:0; } }

/* ══════════════════════════════════════════════════════════════════════
   10. ISOMETRIC SCENE — `.el-isoscene`, and the object vocabulary

   A reusable way to draw a platform as a 3D scene: whole-cell slabs on one
   projection, an illustrated OBJECT standing on each slab, wires on the
   ground between them, small cargo objects riding the wires, and one tinted
   ground region that says which slabs are ours.

   The set is a VOCABULARY, not one picture. A page picks objects by name —
   library, packager, cdn, licence, device, plus the two cargo pieces (key,
   file) — and places them on slabs. Ten pages therefore share one geometry
   instead of ten copies of it.

   ── PROJECTION ── 2:1 dimetric, held for every solid. One footprint cell
   has half-width c (`--c`, 20px), so a slab of `--n` cells is 2nc wide and
   nc tall on screen: every 2px across is exactly 1px down. The top face is
   the rhombus polygon(50% 0,100% 50%,50% 100%,0 50%) in a 2nc × nc box; the
   left face is that box's lower-left edge skewed by atan(0.5) = 26.56505deg
   and the right face by its negative. Wires and the ground region use the
   same three directions (±26.56505deg, plus horizontal and vertical, which
   are the ground plane's 45° diagonals). Nothing in a scene may use another
   angle.

   ── FOOTPRINT GRID ── a slab is authored as `--n:6`, a COUNT of cells, not
   a width. A footprint that is not a whole number of cells is therefore not
   expressible. `--cx` is the slab's centre on screen and `--y` its back
   vertex: both are outputs of the projection, so do not nudge them by eye.

   ── LIGHT ── one source, upper left, never moving. Three tones per solid
   from ONE base and ONE formula: top = base, left = base darkened 12%,
   right = base darkened 24%, rim = base darkened 28%.

   The base is the only thing that changes between modes, and it is set on
   the SCENE, not on the slab. That is load-bearing. In the first build the
   dark-mode rule set the three tones directly at `:root[data-mode] .iso`
   (0,3,0) and beat `.iso--hero` (0,1,0), so the hero rendered brand red in
   light and grey in dark — the payoff of the whole scene, lost to a
   specificity accident. Now a mode rule can only set `--iso-base` on an
   ancestor, and the hero sets `--iso-base` on itself; an element's own
   declaration always wins over an inherited one, whatever the ancestor's
   specificity. The bug is unrepresentable rather than merely fixed.

   The light base is also deliberately BELOW the ground: `--surface` is
   #ffffff on a #fbfbfc ground, a 1.03:1 step, so every top face was
   invisible and each slab read as a pair of floating side-fins. The crown
   now reads on tone; the rim is refinement, not the thing holding it up.

   ── LABELS ── flat and upright, never rotated into the plane. Each slab
   carries real HTML text on its top face, below its object. Only the short
   all-caps pills lie on a face.

   ── THE FOLD ── under 520px the scene is a written 2D stack: same DOM,
   same words, same objects, faces off, the edge labels become the pipe
   between cards. An isometric scene squeezed into a phone column is a
   smear, so this is written deliberately, not left to shrink.
   ══════════════════════════════════════════════════════════════════════ */

.el-isoscene { display:block; }
.el-isoscene__stage { position:relative; width:520px; height:800px; margin:0 auto;
  --c:20px;                       /* half a footprint cell */
  --iso-slope:26.56505deg;        /* atan(0.5) — the only angle in the scene */
  /* the three tones, one formula, from one base */
  --iso-base:color-mix(in srgb, var(--surface) 88%, var(--ink));
  --iso-shade:black;
  /* object-local tokens: every object reads these and nothing else, so one
     override re-skins a whole object on a different ground (see the hero) */
  --o-surface:var(--surface);
  --o-line:color-mix(in srgb, var(--ink) 36%, transparent);
  --o-fill:color-mix(in srgb, var(--ink) 13%, transparent);
  --o-soft:color-mix(in srgb, var(--ink) 9%, transparent);
  --o-ink:var(--sub);
  --o-spark:color-mix(in srgb, var(--ink) 26%, transparent);
  --o-blob:color-mix(in srgb, white 62%, transparent);
  --o-cs:rgba(0,0,0,.18);
  --iso-shadow:rgba(0,0,0,.20);
  --wire-neutral:color-mix(in srgb, var(--faint) 52%, transparent);
  --plate-fill:color-mix(in srgb, var(--faint) 9%, transparent);
  --plate-line:color-mix(in srgb, var(--faint) 30%, transparent); }
:root[data-mode="dark"] .el-isoscene__stage,
.theme-v2[data-mode="dark"] .el-isoscene__stage {
  /* darkening #16161a walks both side faces into the #0e0e11 ground, so the
     base is lifted toward --ink first; the light model (top > left > right)
     is what is preserved, not the arithmetic */
  --iso-base:color-mix(in srgb, var(--surface) 74%, var(--ink));
  --o-line:color-mix(in srgb, var(--ink) 48%, transparent);
  --o-fill:color-mix(in srgb, var(--ink) 22%, transparent);
  --o-soft:color-mix(in srgb, var(--ink) 15%, transparent);
  --o-blob:color-mix(in srgb, white 10%, transparent);
  --o-cs:rgba(0,0,0,.5);
  --iso-shadow:rgba(0,0,0,.55);
  --plate-fill:color-mix(in srgb, var(--faint) 13%, transparent);
  --plate-line:color-mix(in srgb, var(--faint) 34%, transparent); }
/* the payoff glows, faintly, and it is painted first so it sits behind */
.el-isoscene__stage::before { content:""; position:absolute; left:60px; top:500px;
  width:400px; height:300px; pointer-events:none;
  background:radial-gradient(ellipse 50% 46% at 50% 50%,
    color-mix(in srgb, var(--brand) 13%, transparent), transparent 70%); }

/* ── the ground region: "this is ours, that is yours", with no words ─────
   A polygon on the GROUND PLANE, so it is part of the projection and not a
   panel pasted behind it: an apex between the two ±26.56505deg edges, two
   vertical sides and a horizontal bottom — and horizontal and vertical ARE
   ground directions in 2:1 dimetric (the ground's 45° diagonals). The
   hairline is the parent, the fill is the child offset 1.5px inward along
   each edge's normal; the five vertices of the inner polygon are computed,
   not eyeballed. Coordinates are the scene's, in px. */
.el-isoscene__plate { position:absolute; inset:0; pointer-events:none; background:var(--plate-line);
  clip-path:polygon(260px 176px, 514px 303px, 514px 534px, 6px 534px, 6px 303px); }
.el-isoscene__plate::after { content:""; position:absolute; inset:0; background:var(--plate-fill);
  clip-path:polygon(260px 177.7px, 512.5px 303.9px, 512.5px 532.5px, 7.5px 532.5px, 7.5px 303.9px); }
.el-isoscene__plate-name { position:absolute; left:var(--px,14px); top:var(--py,508px);
  font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); pointer-events:none; }

/* ── one solid ──────────────────────────────────────────────────────── */
.el-isoslab { position:absolute; --w:calc(var(--n) * 2 * var(--c)); --h:16px;
  left:calc(var(--cx) - var(--w) / 2); top:var(--y);
  width:var(--w); height:calc(var(--w) / 2 + var(--h));
  --iso-top:var(--iso-base);
  --iso-left:color-mix(in srgb, var(--iso-base) 88%, var(--iso-shade));
  --iso-right:color-mix(in srgb, var(--iso-base) 76%, var(--iso-shade));
  --iso-rim:color-mix(in srgb, var(--iso-base) 72%, var(--iso-shade)); }
/* exactly one hero, at the payoff, in brand — and it owns its base, so no
   mode rule can reach it (see the light note at the top of this section) */
.el-isoslab--hero { --iso-base:var(--brand);
  --o-surface:color-mix(in srgb, var(--on-brand) 15%, transparent);
  --o-line:color-mix(in srgb, var(--on-brand) 72%, transparent);
  --o-fill:color-mix(in srgb, var(--on-brand) 32%, transparent);
  --o-soft:color-mix(in srgb, var(--on-brand) 22%, transparent);
  --o-ink:var(--on-brand);
  --o-spark:color-mix(in srgb, var(--on-brand) 55%, transparent);
  --o-blob:color-mix(in srgb, white 22%, transparent);
  --o-cs:rgba(0,0,0,.22); }
/* the flat, faint footprint a lifted slab is NOT standing on */
.el-isoslab--ghost { --iso-base:color-mix(in srgb, var(--faint) 16%, transparent);
  --iso-rim:color-mix(in srgb, var(--faint) 40%, transparent); }

.el-isoslab__sh { position:absolute; left:9px; top:calc(var(--h) + 11px);
  width:var(--w); height:calc(var(--w) / 2); pointer-events:none; filter:blur(7px);
  background:radial-gradient(ellipse 44% 42% at 50% 50%, var(--iso-shadow), transparent 70%); }
/* The crown also carries a hairline. Two vertical drop-shadows are enough:
   no edge of a 2:1 rhombus is horizontal, so a 1px vertical offset lands
   0.89px perpendicular on all four of them. */
.el-isoslab__t { position:absolute; left:0; top:0; width:var(--w); height:calc(var(--w) / 2);
  background:var(--iso-top); clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  filter:drop-shadow(0 1px 0 var(--iso-rim)) drop-shadow(0 -1px 0 var(--iso-rim)); }
.el-isoslab__l { position:absolute; left:0; top:calc(var(--w) / 4);
  width:calc(var(--w) / 2); height:var(--h); background:var(--iso-left);
  transform-origin:0 0; transform:skewY(var(--iso-slope)); }
.el-isoslab__r { position:absolute; left:calc(var(--w) / 2); top:calc(var(--w) / 2);
  width:calc(var(--w) / 2); height:var(--h); background:var(--iso-right);
  transform-origin:0 0; transform:skewY(calc(-1 * var(--iso-slope))); }

/* ── labels: upright, never rotated into the plane ──────────────────── */
.el-isoslab__lab { position:absolute; left:50%; top:calc(var(--w) / 4 + var(--ld, 14px));
  transform:translateX(-50%); width:var(--labw); text-align:center; }
.el-isoslab__lab b { display:block; font-size:13px; font-weight:700; line-height:1.28;
  letter-spacing:-.01em; color:var(--ink); }
.el-isoslab__lab small { display:block; font-size:10.5px; line-height:1.34; color:var(--sub);
  margin-top:2px; }
.el-isotag { display:inline-block; margin:5px 2px 0; padding:2px 7px; border-radius:999px;
  font-size:9.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--sub); background:color-mix(in srgb, var(--faint) 22%, transparent); }
.el-isoslab--hero .el-isoslab__lab b,
.el-isoslab--hero .el-isoslab__lab small { color:var(--on-brand); }
.el-isoslab--hero .el-isoslab__lab b { font-size:13.5px; }
.el-isoslab--hero .el-isotag { color:var(--on-brand);
  background:color-mix(in srgb, var(--on-brand) 22%, transparent); }

/* ── wires on the ground, and what they mean ────────────────────────────
   SOLID = a request travelling out. DASHED = the response coming back.
   A pipe (5px) carries every byte of video; a hairline (2px) carries one
   licence per viewer. The dash is painted through the skew, so each dash is
   a parallelogram lying on the ground plane rather than a screen-space tick. */
/* Thickness is a VARIABLE, not a height, and orientation decides which axis
   it lands on. Written as two competing `height` declarations it was a
   source-order accident: `--key` (a tone) and `--v` (an orientation) both
   have specificity (0,1,0), so `--key`'s height:2px silently truncated every
   vertical key wire to a 2px stub and the licence exchange drew nothing but
   its arrowheads. A wire cannot now be given a thickness on the wrong axis. */
.el-isowire { position:absolute; left:var(--wx); top:var(--wy); --wt:4px;
  width:var(--wl); height:var(--wt);
  border-radius:3px; background:var(--wire-c, var(--wire-neutral)); transform-origin:0 0; }
.el-isowire--pipe { --wt:5px; }
.el-isowire--key { --wire-c:var(--brand); --wt:2px; }
.el-isowire--dr { transform:skewY(var(--iso-slope)); }
.el-isowire--dl { transform:skewY(calc(-1 * var(--iso-slope))); }
.el-isowire--v { width:var(--wt); height:var(--wl); transform:none; }
.el-isowire--dash { border-radius:0;
  background:repeating-linear-gradient(90deg, var(--wire-c, var(--wire-neutral)) 0 7px, transparent 7px 13px); }
.el-isowire--dash.el-isowire--v {
  background:repeating-linear-gradient(180deg, var(--wire-c, var(--wire-neutral)) 0 6px, transparent 6px 11px); }
/* the dashed drop that marks a lifted slab's empty footprint */
.el-isodrop { position:absolute; left:var(--wx); top:var(--wy); width:0; height:var(--wl);
  border-left:1px dashed color-mix(in srgb, var(--faint) 60%, transparent); }
/* direction marker: a triangle rotated onto the wire's own screen angle, its
   TIP pinned to the point given (transform-origin sits on the tip) */
.el-isoarrow { position:absolute; left:var(--ax); top:var(--ay); width:10px; height:10px;
  margin:-5px 0 0 -10px; background:var(--wire-c, var(--wire-neutral));
  clip-path:polygon(0 0, 100% 50%, 0 100%);
  transform-origin:100% 50%; transform:rotate(var(--ad, 0deg)); }
.el-isoarrow--key { --wire-c:var(--brand); width:8px; height:8px; margin:-4px 0 0 -8px; }

/* ── edge labels: upright, in the page's own text layer ─────────────── */
.el-isoedge { position:absolute; left:var(--ex); top:var(--ey); width:var(--ew);
  text-align:var(--ea, left); }
/* --sub, not --faint: at 9.5px an all-caps kicker in --faint is 3.1:1 on the
   light ground, and this one names the whole idea ("Key path"). */
.el-isoedge i { display:block; font-style:normal; font-size:9.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:var(--sub); }
.el-isoedge span { display:block; font-size:10.5px; line-height:1.35; color:var(--sub); }
.el-isoedge--key i { color:var(--brand); }
/* the line-style key, inline with its label: this is what teaches the reader
   that solid goes out and dashed comes back */
.el-isoswatch { display:inline-block; width:15px; height:0; vertical-align:middle;
  margin:0 6px 2px 0; border-top:2px solid var(--brand); }
.el-isoswatch--dash { border-top-style:dashed; }
.el-isoswatch--n { border-top-color:var(--wire-neutral); }

/* ══ THE OBJECTS ════════════════════════════════════════════════════════
   Every node gets its OWN illustrated object, standing upright on its slab
   and facing the viewer — the same reason labels stay upright. Each sits on
   a soft blob with a couple of sparkle marks, which is what stops an object
   reading as clip art dropped in a box. All of them are built from the same
   primitives (`.el-isowin`, `.el-isotile`, `.el-isorows`, `.el-isobadge`,
   `.el-isostrip`, `.el-isocloud`) and read only the `--o-*` tokens, so a new
   object is a new arrangement, not a new colour system. */
/* `--ob` walks the object's standing point back along the slab (negative is
   further back); the label then has the wide middle of the rhombus to itself.
   Both are measured from the top face's centre, so they cannot drift apart. */
.el-isoobj { position:absolute; left:calc(50% - var(--ow) / 2);
  top:calc(var(--w) / 4 + var(--ob, 0px) - var(--oh));
  width:var(--ow); height:var(--oh); color:var(--o-ink); }
.el-isoobj::before { content:""; position:absolute; left:-18%; top:-16%; width:136%; height:132%;
  pointer-events:none;
  background:radial-gradient(ellipse 46% 46% at 50% 50%, var(--o-blob), transparent 70%); }
.el-isoobj__cs { position:absolute; left:4%; bottom:-5px; width:100%; height:12px; border-radius:50%;
  filter:blur(3px); pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%, var(--o-cs), transparent 70%); }
.el-isosp { position:absolute; left:var(--sx); top:var(--sy); width:var(--ss, 7px); height:var(--ss, 7px);
  pointer-events:none;
  background:linear-gradient(var(--o-spark), var(--o-spark)) 50% 0 / 1.4px 100% no-repeat,
             linear-gradient(var(--o-spark), var(--o-spark)) 0 50% / 100% 1.4px no-repeat; }
.el-isosp--dot { background:var(--o-spark); border-radius:50%; width:3px; height:3px; }

/* primitives */
.el-isowin { position:absolute; inset:0; border-radius:6px; background:var(--o-surface);
  border:1px solid var(--o-line); overflow:hidden; display:flex; flex-direction:column; }
.el-isowin__bar { flex:0 0 auto; display:flex; align-items:center; gap:3px; height:11px; padding:0 5px;
  border-bottom:1px solid var(--o-line); background:var(--o-soft); }
.el-isowin__bar s { width:3px; height:3px; border-radius:50%; background:var(--o-line); text-decoration:none; }
.el-isowin__body { flex:1; display:flex; gap:6px; padding:7px; align-items:center; }
.el-isotile { flex:0 0 auto; width:34px; height:24px; border-radius:3px; background:var(--o-fill);
  display:grid; place-items:center; }
.el-isotile svg { width:11px; height:11px; }
.el-isorows { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.el-isorows s { display:block; height:3px; border-radius:2px; background:var(--o-fill); text-decoration:none; }
.el-isorows s:nth-child(1) { width:100%; }
.el-isorows s:nth-child(2) { width:70%; }
.el-isorows s:nth-child(3) { width:86%; }
.el-isobadge { position:absolute; width:22px; height:22px; border-radius:50%; background:var(--o-surface);
  border:1px solid var(--o-line); display:grid; place-items:center; }
.el-isobadge svg { width:11px; height:11px; }
.el-isobadge--tr { right:-4px; top:-2px; }
.el-isobadge--br { right:-5px; bottom:-3px; }
.el-isobadge--shield { border-radius:7px; }

/* 1 · library — a window of content: one play tile and its rows */
.el-isoobj--library { --ow:82px; --oh:56px; }

/* 2 · packager — segments in a strip, the last two scrambled, sealed */
.el-isoobj--packager { --ow:86px; --oh:56px; }
.el-isostrip { position:absolute; left:0; right:0; bottom:0; height:40px; border-radius:6px;
  background:var(--o-surface); border:1px solid var(--o-line);
  display:flex; align-items:center; justify-content:center; gap:4px; padding:0 8px; }
.el-isostrip s { display:block; width:13px; height:22px; border-radius:2px; background:var(--o-fill);
  text-decoration:none; }
.el-isostrip s.is-enc {
  background:repeating-linear-gradient(135deg, var(--o-line) 0 1.5px, transparent 1.5px 4.5px), var(--o-fill); }

/* 3a · CDN — a cloud, and the edges under it */
.el-isoobj--cdn { --ow:84px; --oh:50px; }
.el-isocloud { position:absolute; left:50%; top:0; transform:translateX(-50%); width:62px; height:36px;
  color:var(--o-line); }
.el-isocloud svg { display:block; width:100%; height:100%; fill:var(--o-fill); stroke:currentColor;
  stroke-width:1.5; stroke-linejoin:round; }
.el-isonodes { position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  display:flex; align-items:center; gap:13px; }
.el-isonodes::before { content:""; position:absolute; left:3px; right:3px; top:50%; height:1px;
  background:var(--o-line); }
.el-isonodes s { position:relative; width:7px; height:7px; border-radius:50%; background:var(--o-surface);
  border:1.4px solid var(--o-line); text-decoration:none; }

/* 3b · licence service — a window with a shield clipped to its corner */
.el-isoobj--licence { --ow:80px; --oh:56px; }
.el-isowin__body--ctr { justify-content:center; gap:7px; }
.el-isokey { width:17px; height:17px; }

/* 4 · client device — a laptop WITH a phone overlapping it */
.el-isoobj--device { --ow:96px; --oh:62px; }
.el-isolap { position:absolute; left:0; bottom:4px; width:78px; height:53px; }
.el-isolap__scr { position:absolute; left:0; top:0; right:0; height:48px; border-radius:5px;
  border:1.6px solid var(--o-line); background:var(--o-surface); display:grid; place-items:center; }
.el-isolap__scr svg { width:15px; height:15px; }
.el-isolap__base { position:absolute; left:-7px; right:-7px; bottom:0; height:5px; border-radius:0 0 4px 4px;
  background:var(--o-line); }
.el-isophone { position:absolute; right:0; bottom:0; width:24px; height:42px; border-radius:6px;
  border:1.6px solid var(--o-line); background:var(--o-surface); display:grid; place-items:center; }
.el-isophone svg { width:10px; height:10px; }

/* ── cargo: what is actually travelling, sitting ON the wire ────────────
   The knockout ring is not elevation — it is the wire being interrupted so
   the object reads as being carried rather than drawn over the line. */
.el-isocargo { position:absolute; left:var(--gx); top:var(--gy); transform:translate(-50%, -50%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  border-radius:5px; background:var(--o-surface); border:1px solid var(--o-line); color:var(--o-ink);
  box-shadow:0 0 0 2px var(--bg); }
.el-isocargo--file { width:44px; height:26px; }
.el-isocargo--file s { display:block; text-decoration:none; letter-spacing:.09em;
  font:700 7.5px/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  color:color-mix(in srgb, var(--o-ink) 78%, transparent); }
.el-isocargo--key { width:32px; height:22px; border-radius:999px; color:var(--brand);
  border-color:color-mix(in srgb, var(--brand) 55%, transparent); }
.el-isocargo--key svg { width:15px; height:15px; }

.el-isoscene__foot { font-size:12px; line-height:1.5; color:var(--faint); text-align:center;
  max-width:340px; margin:14px auto 0; }

/* ── the fold: under 520px this is a written 2D stack, not a smear ───── */
@container (max-width: 519.98px) {
  .el-isoscene__stage { position:static; width:auto; height:auto; display:flex; flex-direction:column; }
  .el-isoscene__stage > * { order:var(--fo, 50); }
  .el-isoscene__stage::before,
  .el-isoscene__plate, .el-isoscene__plate-name,
  .el-isowire, .el-isoarrow, .el-isodrop, .el-isocargo, .el-isoslab--ghost,
  .el-isoslab__t, .el-isoslab__l, .el-isoslab__r, .el-isoslab__sh { display:none; }
  .el-isoslab { position:static; width:auto; height:auto; display:flex; align-items:center; gap:13px;
    padding:13px 15px; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-card, 16px);
    box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06); }
  :root[data-mode="dark"] .el-isoslab, .theme-v2[data-mode="dark"] .el-isoslab {
    box-shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35); }
  .el-isoslab--key { border-style:dashed; border-left:3px solid var(--brand); }
  .el-isoslab--hero { background:var(--brand); border-color:var(--brand); }
  .el-isoobj { position:relative; left:auto; top:auto; flex:0 0 auto; }
  .el-isoobj__cs { display:none; }
  .el-isoslab__lab { position:static; transform:none; width:auto; flex:1; min-width:0; text-align:left; }
  .el-isoslab__lab b, .el-isoslab--hero .el-isoslab__lab b { font-size:14.5px; }
  .el-isoslab__lab small { font-size:12.5px; margin-top:3px; }
  .el-isotag { font-size:10px; margin:8px 4px 0 0; }
  /* the edge label becomes the pipe between two cards */
  .el-isoedge { position:static; width:auto; text-align:left; padding:11px 0 11px 26px; margin-left:19px;
    background:linear-gradient(var(--wire-neutral), var(--wire-neutral)) 0 0 / 2px 100% no-repeat; }
  .el-isoedge--key { background-image:linear-gradient(var(--brand), var(--brand)); }
  .el-isoedge i { font-size:10.5px; }
  .el-isoedge span { font-size:12.5px; }
  .el-isoswatch { width:13px; }
  .el-isoscene__foot { text-align:left; max-width:none; margin:14px 0 0; }
}

/* ── PAGE CHROME shown in the gallery (added 2026-09-15) ──────────────────
   The header, the phone sheet and the platform row are the parts every
   landing page shares, and until now they existed ONLY as page-local CSS
   copied into eleven files. The gallery loads neither of those copies, so
   the platform row rendered with the DS default: each brand's own colour on
   a pink chip in light, and an unreadable maroon blob in dark.

   This is the church page's treatment, which is the one the owner picked.
   It is duplicated here deliberately and temporarily: the real fix is to
   lift `.vp-plats` out of the eleven pages into one shared landing-page
   stylesheet, which is a separate job. Until that happens, a change to the
   row has to be made in both places — that is the cost of the copy, and it
   is written down here so the next person knows.

   Why one ink colour rather than each brand's own: on a dark page Apple,
   Apple TV and AirPlay were black on black, Samsung, LG and Roku were faint
   wordmarks too small to read, and the rest were an unrelated set of
   greens, oranges and purples. One ink keeps each brand's SHAPE, which is
   what makes it recognisable, and lets the row read as a single set. */
.vp-plats .ico { width:auto; height:auto; background:none; border:0; padding:0; }
.vp-plats .ico img { height:24px; width:auto; max-width:76px; object-fit:contain; display:block;
  filter:brightness(0); opacity:.82; transition:opacity .15s ease; }
.vp-plats > div:hover .ico img { opacity:1; }
/* `.theme-v2[data-mode="dark"]` is the gallery's per-pane dark; the pages use
   `:root[data-mode="dark"]`. Both are listed so one definition serves both. */
:root[data-mode="dark"] .vp-plats .ico img,
.theme-v2[data-mode="dark"] .vp-plats .ico img { filter:brightness(0) invert(1); opacity:.9; }
/* A LIGHT pane inside a dark document. The gallery shows both modes at once,
   so the document root is dark while one pane is light: without this the
   inverted white marks sit on a white tile and vanish. Pages never hit this
   because a page is only ever one mode at a time. */
.theme-v2[data-mode="light"] .vp-plats .ico img { filter:brightness(0); opacity:.82; }
@media (max-width: 639.98px) {
  .vp-plats { grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
  .vp-plats > div { padding:12px 6px; }
}

/* The header's secondary CTA. Page-local on all eleven pages, so the gallery
   rendered it as a bare underlined anchor. Same temporary duplication as
   .vp-plats above, and the same fix: lift it into a shared landing-page
   stylesheet. Hidden below 860px, where the burger takes over. */
.vp-navghost { display:none; align-items:center; justify-content:center; height:38px;
  padding:0 14px; border-radius:999px; border:1px solid var(--line); color:var(--ink);
  background:var(--surface); font-size:13px; font-weight:600; text-decoration:none;
  white-space:nowrap; transition:background .15s ease, border-color .15s ease; }
.vp-navghost:hover { background:var(--btn-soft); border-color:var(--line); }
@media (min-width: 860px) { .vp-navghost { display:inline-flex; } }

/* THE LOGO, per pane. The gallery shows light and dark at once, so the
   document is one mode while a pane is the other. The DS picks the logo file
   from `[data-mode]` and from `.pg`, both of which see the DOCUMENT — so in a
   light pane on a dark document the white wordmark was served onto white and
   only the red mark survived. That is the same white-on-white the section
   above warns about, reproduced by the gallery itself.
   Specificity beats `.pg .d-nav__logo .lg-bar` (0,3,0) at 0,4,0. */
.theme-v2[data-mode="light"] .d-nav__logo .lg-bar.lg-light,
.theme-v2[data-mode="dark"]  .d-nav__logo .lg-bar.lg-dark { display:block !important; height:26px; }
.theme-v2[data-mode="light"] .d-nav__logo .lg-bar.lg-dark,
.theme-v2[data-mode="dark"]  .d-nav__logo .lg-bar.lg-light,
.theme-v2 .d-nav__logo .lg-hero,
.theme-v2 .d-nav__logo .lg-ico { display:none !important; }
/* `!important` earns its place exactly here and nowhere else in this file:
   the DS switches the logo from the DOCUMENT's mode and its `.pg` breakpoint
   rules, and the gallery is the one surface that shows both modes at once, so
   the pane has to overrule the document rather than out-specify it. */

/* Industry cards. Page-local like the two above, and duplicated here for the
   same reason — the gallery loads none of the eleven page copies. */
.vp-inds { display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
@media (min-width: 900px) { .vp-inds { grid-template-columns:repeat(4,1fr); } }
.vp-ind { padding:0; overflow:hidden; }
.vp-ind img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.vp-ind div { padding:14px 16px; }
.vp-ind h4 { font-size:14.5px; font-weight:600; margin-bottom:3px; }
.vp-ind p { font-size:12.5px; color:var(--sub); line-height:1.5; }