/* =============================================================
   Velon Suite — application detail pages (shared shell)
   ============================================================= */

/* ---------- Hero ---------- */
.app-hero {
  position: relative;
  background:
    radial-gradient(110% 80% at 85% 0%, rgba(201,123,61,0.12), transparent 58%),
    linear-gradient(180deg, var(--ink-2), var(--ink));
  padding: clamp(60px, 7vw, 110px) 0 clamp(40px, 5vw, 70px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
/* technical grid + scanning accent line behind the hero */
.app-hero::before {
  content: '';
  position: absolute; inset: 0; z-index: -2;
  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: 48px 48px;
  mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 75%);
}
.app-hero::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0; width: 38%; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(201,123,61,0.07), transparent);
  animation: heroScan 9s var(--ease) infinite;
  pointer-events: none;
}
@keyframes heroScan {
  0% { transform: translateX(-60%); opacity: 0; }
  35% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateX(280%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .app-hero::after { animation: none; opacity: 0; } }
.app-hero .container { position: relative; z-index: 1; }
.app-hero .breadcrumb { margin-bottom: clamp(34px, 4vw, 56px); }
.app-id {
  display: flex; align-items: center; gap: 18px; margin-bottom: 22px;
}
.app-id .ai-code {
  font-family: var(--font-mono);
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 600; letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--copper-hi);
  padding: 6px 16px; border-radius: 6px;
  box-shadow: 0 8px 30px rgba(201,123,61,0.35);
}
.app-id .ai-pillar {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text-mute);
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 8px 14px;
}
.app-id .ai-pillar.p2 { color: var(--copper-hi); border-color: var(--copper); }
.app-id .ai-pillar.p3 { color: #8ec5ff; border-color: #8ec5ff; }
.app-id .ai-pillar.foundation { color: var(--signal); border-color: var(--signal); }
.app-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.6vw, 64px); line-height: 1.02;
  letter-spacing: -0.03em; font-weight: 500;
  max-width: 12.1em; text-wrap: balance;
}
.app-hero h1 em { font-style: normal; color: var(--copper-hi); }
.app-tagline {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(18px, 1.7vw, 24px); line-height: 1.4;
  color: var(--text-mute); max-width: 39.6em;
  margin-top: 22px; text-wrap: pretty;
}
.app-tagline strong { color: var(--text); font-weight: 500; }
.app-desc { color: var(--text-mute); font-size: 16px; line-height: 1.6; max-width: 46.2em; margin-top: 18px; }

/* ---------- KPI strip ---------- */
.app-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.app-kpi {
  background: var(--ink);
  padding: clamp(22px, 2.4vw, 34px) clamp(18px, 2vw, 28px);
  display: flex; flex-direction: column; gap: 8px;
  position: relative;
  transition: background 0.3s var(--ease);
}
.app-kpi::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: var(--copper); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.app-kpi:hover { background: var(--ink-2); }
.app-kpi:hover::before { transform: scaleX(1); }
.app-kpi .ak-v {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.7vw, 39px); line-height: 0.95;
  letter-spacing: -0.03em; color: var(--copper-hi);
}
.app-kpi .ak-k {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-mute);
}
@media (max-width: 760px) { .app-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Context band ("why it matters now") ---------- */
.app-driver {
  background: var(--ink);
  padding: clamp(28px, 3.4vw, 44px) 0;
}
.app-driver-lede {
  font-family: var(--font-sans);
  font-size: clamp(15.5px, 1.45vw, 19px);
  line-height: 1.6;
  color: var(--text-mute);
  max-width: 59.4em;
}
.app-driver-lede .adl-tag {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--copper-hi);
  display: inline-block; margin-inline-end: 14px;
}
.app-driver-lede strong { color: var(--text); font-weight: 500; }

/* ---------- Section scaffold ---------- */
.app-section { padding: clamp(48px, 6.5vw, 96px) 0; }
.app-section.dark { background: var(--ink); }
.app-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--copper-hi);
  display: inline-flex; align-items: center; gap: 14px; margin-bottom: 20px;
}
.app-eyebrow::before { content: ''; width: 22px; height: 1px; background: var(--copper); }
.app-section h2 {
  font-family: var(--font-display);
  font-size: clamp(25px, 3vw, 43px); line-height: 1.04;
  letter-spacing: -0.03em; max-width: 14.8em; text-wrap: balance;
}
.app-section h2 em { font-style: normal; color: var(--copper-hi); }
.app-section .as-lede {
  color: var(--text-mute); font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55; max-width: 42.2em; margin-top: 18px;
}

/* ---------- Figure frame (the interactive visual) ---------- */
.fig {
  margin-top: clamp(34px, 4vw, 56px);
  background:
    radial-gradient(140% 120% at 50% -20%, rgba(201,123,61,0.05), transparent 60%),
    var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8);
}
.fig-bar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 14px clamp(18px, 2vw, 28px);
  border-bottom: 1px solid var(--line);
  background: var(--ink-3);
}
.fig-bar .fb-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-mute);
}
.fig-bar .fb-scenario { color: var(--copper-hi); }
.fig-toggles { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.fig-toggle {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--text-mute);
  cursor: pointer; transition: all 0.25s var(--ease);
  display: inline-flex; align-items: center; gap: 7px;
}
.fig-toggle .ft-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.5; }
.fig-toggle:hover { border-color: var(--copper); color: var(--text); }
.fig-toggle.on { border-color: var(--copper); color: var(--copper-hi); background: rgba(201,123,61,0.10); }
.fig-toggle.on .ft-dot { opacity: 1; }
.fig-body {
  padding: clamp(20px, 2.6vw, 38px);
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: center;
}
.fig svg { display: block; width: 100%; height: auto; }
.fig-foot {
  padding: 14px clamp(18px, 2vw, 28px);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-dim); line-height: 1.5;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.fig-foot .ff-read { color: var(--text-mute); max-width: 52.8em; }

/* chart primitives */
.axis-line { stroke: rgba(255,255,255,0.16); stroke-width: 1; }
.grid-line { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.axis-label { font-family: var(--font-mono); font-size: 11px; fill: var(--text-dim); letter-spacing: 0.08em; }
.axis-tick { font-family: var(--font-mono); font-size: 10px; fill: var(--text-dim); }
.limit-line { stroke: #d96b4b; stroke-width: 1.2; stroke-dasharray: 5 4; }
.limit-label { font-family: var(--font-mono); font-size: 10px; fill: #e07a55; letter-spacing: 0.1em; }

/* ---------- two-col layout (visual + side facts) ---------- */

/* ---------- "Inside the engine" steps ---------- */
.engine-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin-top: clamp(34px, 4vw, 56px);
}
.engine-step {
  background: var(--ink-2);
  padding: clamp(22px, 2.4vw, 34px);
  display: flex; flex-direction: column; gap: 12px;
  transition: background 0.3s var(--ease);
}
.engine-step:hover { background: var(--ink-3); }
.engine-step .es-num {
  font-family: var(--font-display); font-size: clamp(28px, 2.8vw, 43px);
  line-height: 0.8; color: var(--copper-hi); letter-spacing: -0.03em;
}
.engine-step h3 { font-family: var(--font-display); font-size: clamp(17px, 1.6vw, 21px); line-height: 1.15; color: var(--text); }
.engine-step p { font-size: 13.5px; line-height: 1.5; color: var(--text-mute); }
@media (max-width: 900px) { .engine-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .engine-steps { grid-template-columns: 1fr; } }

/* ---------- "The read" callout ---------- */
.app-read {
  margin-top: clamp(34px, 4vw, 56px);
  display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding: clamp(28px, 3vw, 46px);
  border: 1px solid var(--copper);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, rgba(201,123,61,0.10), rgba(11,17,24,0)), var(--ink-2);
}
.app-read .ar-tag {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--copper-hi);
  writing-mode: vertical-rl; transform: rotate(180deg);
  align-self: stretch; display: flex; align-items: center;
}
.app-read .ar-text {
  font-family: var(--font-display); font-size: clamp(19px, 2.1vw, 30px);
  line-height: 1.2; color: var(--text); text-wrap: pretty;
}
.app-read .ar-text strong { color: var(--copper-hi); font-weight: 400; font-style: normal; }
@media (max-width: 640px) {
  .app-read { grid-template-columns: 1fr; }
  .app-read .ar-tag { writing-mode: horizontal-tb; transform: none; }
}

/* ---------- module nav (prev / all / next) ---------- */
.app-nav {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border-top: 1px solid var(--line);
}
.app-nav a {
  background: var(--ink);
  padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 32px);
  text-decoration: none; color: var(--text);
  display: flex; flex-direction: column; gap: 8px;
  transition: background 0.3s var(--ease);
}
.app-nav a:hover { background: var(--ink-2); }
.app-nav a.next { text-align: right; align-items: flex-end; }
.app-nav a.all { text-align: center; align-items: center; }
.app-nav .an-dir {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-dim);
}
.app-nav .an-name { font-family: var(--font-display); font-size: clamp(16px, 1.6vw, 22px); color: var(--text); }
.app-nav a:hover .an-name { color: var(--copper-hi); }
@media (max-width: 700px) { .app-nav { grid-template-columns: 1fr; } }

/* ---------- generic small chips row ---------- */
.app-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.app-chips .chip {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-2); color: var(--text-mute);
}

/* reveal fallback */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { transform: none; } }

/* ============================================================
   Network Reduction — Analytical reduction & EMT validation
   ============================================================ */

/* colour tokens */

/* 7-stage workflow strip */

/* preconditioning block */

/* indicators */

/* validation tests */

/* validation report panel */

/* ---- GridCAM interactive embeds ---- */
.gc-embed{position:relative;width:100%;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#FBFAF6;box-shadow:0 18px 50px -28px rgba(0,0,0,.6);}
.gc-embed iframe{position:absolute;top:0;left:0;border:0;transform-origin:top left;}

/* PVA voltage heatmap */
.pva-heat{background:var(--ink-2,#111a25);border:1px solid var(--line,#1e2a38);border-radius:14px;overflow:hidden;margin-top:clamp(24px,3vw,36px)}
.ph-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line,#1e2a38);background:rgba(255,255,255,.015)}
.ph-title{font-family:var(--font-mono,monospace);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute,#8a8d93)}
.ph-sub{font-family:var(--font-mono,monospace);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim,#6b7480)}
.ph-body{display:grid;grid-template-columns:280px 1fr;gap:0}
.ph-map{padding:20px;border-right:1px solid var(--line,#1e2a38)}
.ph-tw{overflow-x:auto;padding:10px 16px}
.ph-table{width:100%;border-collapse:collapse;font-family:var(--font-mono,monospace);font-size:12px;color:var(--text,#f3efe7)}
.ph-table thead th{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim,#6b7480);text-align:left;padding:8px 6px;border-bottom:1px solid var(--line,#1e2a38)}
.ph-table tbody tr{border-bottom:1px solid rgba(255,255,255,.04)}
.ph-table td{padding:7px 6px;white-space:nowrap}
.ph-table td.r{text-align:right}
.ph-table td.nm{font-weight:600;font-size:13px}
.tp{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600;letter-spacing:.08em}
.tp.hv{background:#c23b3b;color:#fff}
.tp.lv{background:#c97b3d;color:#0b1118}
.tp.mx{background:#6a6a5a;color:#fff}
.hbar{width:120px;height:10px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden}
.hfill{height:100%;border-radius:5px}
@media(max-width:900px){.ph-body{grid-template-columns:1fr}.ph-map{border-right:none;border-bottom:1px solid var(--line,#1e2a38)}}

/* ---------- Study pages: related case studies ---------- */
.svc-cases { margin-top: clamp(26px, 3vw, 40px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.svc-case { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px 56px 24px 24px; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; background: rgba(255,255,255,0.02); text-decoration: none; color: var(--text); transition: border-color .3s, transform .3s var(--ease); }
.svc-case:hover { border-color: rgba(201,123,61,0.55); transform: translateY(-2px); }
.svc-case .sc-k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copper-hi); }
.svc-case .sc-t { font-family: var(--font-display); font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.svc-case .sc-d { font-size: 14.5px; line-height: 1.55; color: var(--text-mute); }
.svc-case .sc-go { position: absolute; top: 22px; inset-inline-end: 22px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); display: grid; place-items: center; color: var(--copper-hi); transition: background .3s, color .3s; }
.svc-case:hover .sc-go { background: var(--copper); color: var(--ink); }
html[dir="rtl"] .svc-case { padding: 24px 24px 24px 56px; }
html[dir="rtl"] .svc-case .sc-go { transform: scaleX(-1); }
@media (max-width: 760px) { .svc-cases { grid-template-columns: minmax(0, 1fr); } }
.mod-close .cta-c .cta-rel { margin: 30px auto 0; max-width: 46em; font-size: 14px; line-height: 1.7; color: var(--tp-mute); }
.mod-close .cta-c .cta-rel a { color: var(--tp-acc); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Module pages: hero with a "how it works" flow card ---------- */
.mod2 .app-hero { padding-bottom: clamp(48px, 6vw, 84px); }
.m2-hg { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 4.5vw, 72px); align-items: center; }
.mod2 .app-hero h1 { font-size: clamp(32px, 4vw, 58px); }
.m2-btns { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.m2-btns .btn-ghost { color: var(--text); border-color: var(--line-2); }
.m2-btns .btn-ghost:hover { color: var(--ink); }
.m2-flow { position: relative; margin: 0; background: #0a1017; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 14px 20px 10px; box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8); }
.m2-flow-h { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 2px 0 12px; border-bottom: 1px solid rgba(255,255,255,0.07); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.m2-flow-h h2 { font: inherit; letter-spacing: inherit; color: var(--copper-hi); }
.m2-flow ol { list-style: none; }
.m2-flow li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
.m2-flow li + li { border-top: 1px dashed rgba(255,255,255,0.06); }
.m2-flow li::before { content: ''; position: absolute; top: 50px; bottom: -16px; inset-inline-start: 16.5px; width: 1px; background: rgba(232,229,223,0.16); }
.m2-flow li:last-child::before { display: none; }
.m2-flow li::after { content: ''; position: absolute; top: 50px; inset-inline-start: 14.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--copper-hi); box-shadow: 0 0 8px rgba(233,165,102,0.8); opacity: 0; animation: m2Pulse 4.8s linear infinite; animation-delay: calc(1.2s + var(--i, 0) * 1.2s); }
.m2-flow li:last-child::after { display: none; }
.m2-n { position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #0a1017; border: 1px solid rgba(233,165,102,0.5); font-family: var(--font-mono); font-size: 11.5px; color: var(--copper-hi); }
.m2-flow li.out .m2-n { border-color: rgba(93,210,166,0.7); color: #5dd2a6; background: rgba(93,210,166,0.08); }
.m2-flow h3 { font-family: var(--font-display); font-weight: 500; font-size: 17.5px; line-height: 1.25; color: var(--text); padding-top: 6px; }
.m2-flow li.out h3 { color: #5dd2a6; }
.m2-flow p { margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--text-mute); text-wrap: pretty; }
.reveal:not(.in) .m2-flow li, .reveal:not(.in).m2-flow li { opacity: 0; }
.reveal.in.m2-flow li { animation: m2In 0.5s var(--ease) both; animation-delay: calc(0.25s + var(--i, 0) * 0.12s); }
.m2-flow.is-offscreen li::after { animation-play-state: paused; }
@keyframes m2In { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes m2Pulse { 0% { top: 50px; opacity: 0; } 4% { opacity: 1; } 22% { top: calc(100% + 10px); opacity: 0; } 100% { top: calc(100% + 10px); opacity: 0; } }

/* example section: numbers above the chart, read below it */
.m2-note { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.m2-kpis { margin-top: clamp(26px, 3vw, 40px); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.m2-kpis .app-kpi { background: var(--ink-2); }
.m2-kpis + .fig { margin-top: 14px; }
.mod2 .app-read { margin-top: 14px; }
html[dir="rtl"] :is(.m2-flow-h, .m2-note) { letter-spacing: 0; font-size: 12px; }
@media (max-width: 960px) {
  .m2-hg { grid-template-columns: minmax(0, 1fr); }
  .m2-flow { max-width: 620px; }
}
@media (prefers-reduced-motion: reduce) {
  .m2-flow li::after { animation: none; }
}
/* EMT compliance: requirements as a 2 x 2 grid, label above the line */
.emt-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.emt-caps .cons-cap { font-size: 14.5px; line-height: 1.5; padding: 18px 20px; }
.emt-caps .cons-cap strong { display: block; margin-bottom: 4px; font-weight: 500; font-size: 16px; color: var(--text); }
@media (max-width: 640px) { .emt-caps { grid-template-columns: minmax(0, 1fr); } }

/* Phones: charts keep a readable size and scroll sideways instead of shrinking to unreadable */
@media (max-width: 760px) {
  .fig-body { overflow-x: auto; overscroll-behavior-x: contain; direction: ltr; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; -webkit-overflow-scrolling: touch; }
  .fig-body > svg { width: 680px; max-width: none; }
  .fig-body::before { content: 'Swipe to see the whole chart \2192'; position: sticky; left: 0; display: block; width: max-content; padding: 10px 14px 2px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-mute); }
  html[lang="ar"] .fig-body::before { content: 'اسحب لرؤية المخطط كاملًا'; letter-spacing: 0; font-size: 12px; font-family: var(--font-sans); }
}

/* EMT compliance: coverage checklist beside the title */
.emt-cov { margin: 0; background: #0a1017; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 14px 20px 16px; box-shadow: 0 30px 80px -40px rgba(0,0,0,0.8); }
.emt-cov .m2-flow-h h2 span { color: var(--text-dim); }
.emt-cov ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.emt-cov li { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: start; padding: 10px 12px; border: 1px solid rgba(93,210,166,0.22); border-radius: 10px; background: rgba(93,210,166,0.05); }
.emt-cov li svg { grid-row: span 2; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: #5dd2a6; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.emt-cov li b { font-weight: 500; font-size: 14.5px; line-height: 1.3; color: var(--text); }
.emt-cov li span { font-family: var(--font-mono); font-size: 11px; color: var(--text-mute); text-align: start; }
html[dir="rtl"] .emt-cov li span { text-align: right; }
.emt-cov-f { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--text-mute); }
.reveal:not(.in) .emt-cov li { opacity: 0; }
.reveal.in.emt-cov li { animation: m2In 0.45s var(--ease) both; }
.reveal.in.emt-cov li:nth-child(2) { animation-delay: .32s; } .reveal.in.emt-cov li:nth-child(3) { animation-delay: .39s; } .reveal.in.emt-cov li:nth-child(4) { animation-delay: .46s; }
.reveal.in.emt-cov li:nth-child(5) { animation-delay: .53s; } .reveal.in.emt-cov li:nth-child(6) { animation-delay: .60s; } .reveal.in.emt-cov li:nth-child(7) { animation-delay: .67s; }
.reveal.in.emt-cov li:nth-child(8) { animation-delay: .74s; } .reveal.in.emt-cov li:nth-child(9) { animation-delay: .81s; } .reveal.in.emt-cov li:nth-child(10) { animation-delay: .88s; }
.reveal.in.emt-cov li:first-child { animation-delay: .25s; }
@media (max-width: 960px) { .emt-cov { max-width: 620px; } }
@media (max-width: 520px) { .emt-cov { padding: 12px 14px 14px; } .emt-cov li { padding: 9px 10px; column-gap: 8px; } .emt-cov li svg { width: 15px; height: 15px; } .emt-cov li { grid-template-columns: 15px minmax(0, 1fr); } .emt-cov li b { font-size: 13px; } .emt-cov li span { font-size: 10px; } }
@media (max-width: 359px) { .emt-cov ul { grid-template-columns: minmax(0, 1fr); } }