/* ═════════════════════════════════════════════════════════════
   MondFx — Platform Upgrade (standalone static page)

   Self-contained copy of the MondFx design system: tokens, type
   scale, buttons and reveals are lifted verbatim from the site's
   app/globals.css so this page is visually identical to the real
   product. No build step, no Node, no external requests.

   Direction is handled entirely with logical properties, so the
   same stylesheet serves index.html (en / ltr) and fa.html
   (fa / rtl) with no per-language special-casing.
   ═════════════════════════════════════════════════════════════ */

/* ─── Fonts (self-hosted; no CDN, no third-party request) ─────
   Sliced by unicode-range exactly as Google Fonts serves them, so
   a browser only downloads the scripts a given page actually uses:
   the English page never fetches the Arabic slice, and vice versa. */

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('fonts/inter-tight-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('fonts/inter-tight-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/vazirmatn-arabic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/vazirmatn-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Estedad';
  src: url('fonts/estedad-vf.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ─── Design tokens ───────────────────────────────────────────
   The page is pinned to the dark palette: the artwork is a dark
   scene and a "system status" moment reads correctly on a deep
   surface. Values are the [data-theme="dark"] block from
   app/globals.css, verbatim. */
:root {
  --bg: #1A1C1E;
  --bg-elev: #232629;
  --bg-muted: #2A2D30;
  --bg-deep: #131517;
  --fg: #FFFFFF;
  --fg-soft: #D6D7D5;
  --fg-muted: #8A8E92;
  --line: #3A3D40;
  --line-strong: #4A4F54;

  --accent: #FF4A1F;
  --accent-ink: #FF6B45;
  --accent-soft: #3A1A12;
  --accent-tint: #3A1A12;
  --accent-tint-2: #4A1E14;
  --accent-glow: rgba(255, 74, 31, 0.25);
  --bull: #22C55E;
  --bear: #FF4A1F;

  --fg-on-dark-soft: rgba(255, 255, 255, 0.7);
  --bg-on-dark-tile: rgba(255, 255, 255, 0.06);
  --bg-on-dark-line: rgba(255, 255, 255, 0.1);

  --font-display: 'Inter Tight', 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, "SF Mono", Menlo, monospace;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  --section-y: clamp(72px, 10vw, 140px);
  --container: 1320px;
  --gutter: clamp(20px, 4vw, 48px);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.3), 0 0 0 1px oklch(1 0 0 / 0.04);
  --shadow-md: 0 4px 16px oklch(0 0 0 / 0.35), 0 0 0 1px oklch(1 0 0 / 0.05);
  --shadow-lg: 0 24px 60px -20px oklch(0 0 0 / 0.6), 0 0 0 1px oklch(1 0 0 / 0.06);
}

/* Per-script font overrides — same cascade as the live site. */
:lang(fa), :lang(ar), :lang(ur) {
  --font-display: 'Estedad', 'Vazirmatn', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: 'Vazirmatn', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Vazirmatn', ui-monospace, "SF Mono", Menlo, monospace;
}

/* ─── Base ────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background: var(--bg-deep);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
p { text-align: justify; hyphens: auto; }

::selection { background: var(--accent); color: white; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ─── Typography primitives ───────────────────────────────────── */
.h-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.96;
}

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tnum { font-variant-numeric: tabular-nums; }
.soft { color: var(--fg-soft); }
.muted { color: var(--fg-muted); }

/* ─── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-accent { background: var(--accent); color: oklch(0.14 0.012 250); }
.btn-accent:hover { background: var(--accent-ink); }

.btn-ghost { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-muted); }

.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 16px; }

.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }
[dir="rtl"] .btn .arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .arrow { transform: translateX(-3px) scaleX(-1); }

/* ─── Scroll reveals ──────────────────────────────────────────
   Same contract as the site's <Reveal>: `.reveal` + a variant,
   `.is-visible` toggled once by an IntersectionObserver. Hidden
   only when JS is running (html.js), so a no-script visitor gets
   the full page immediately. No `will-change` — it would promote
   grid children to their own GPU layers and crack the hairline
   dividers in the `gap: 1px` grid below. */
.js .reveal {
  opacity: 0;
  transition:
    opacity 720ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.js .reveal-up    { transform: translateY(24px); }
.js .reveal-fade  { /* opacity only */ }
.js .reveal-scale { transform: scale(0.965); transform-origin: 50% 65%; }
.js .reveal-blur  { transform: translateY(14px); filter: blur(8px); }

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ─── Page chrome ─────────────────────────────────────────────── */
.page {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  position: relative;
  isolation: isolate;
}

/* Ambient brand wash behind the whole page — a single soft red
   bloom rising from the inline-start edge. Keeps the deep surface
   from reading as flat black without adding a decorative element. */
.page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 50% at 12% 0%, rgba(255, 74, 31, 0.10), transparent 68%),
    radial-gradient(60% 60% at 92% 105%, rgba(255, 74, 31, 0.06), transparent 70%);
  pointer-events: none;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  border-block-end: 1px solid var(--line);
}

.topbar-logo { display: inline-flex; align-items: center; }
.topbar-logo img { height: 34px; width: auto; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-soft);
}

.lang-switch:hover { color: var(--fg); border-color: var(--fg-muted); }

/* The globe is a symbol, not a directional affordance — it must not
   mirror in RTL, so it deliberately carries no .arrow / .arrow-flip. */
.lang-switch svg { opacity: 0.75; }

/* ─── Hero ────────────────────────────────────────────────────── */
.hero {
  flex: 1;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 96px);
}

.hero-copy { min-width: 0; }

.hero h1 {
  margin: 0;
  font-size: clamp(38px, 4.4vw, 60px);
  text-wrap: balance;
}

.hero h1 .muted-line {
  color: var(--fg-muted);
  display: block;
}

/* The global `p { text-align: justify }` is tuned for long-form prose
   (legal pages, blog). At hero-lead width the same rule stretches word
   spacing into visible rivers, so these short paragraphs align to the
   inline-start edge instead. */
.hero-lead {
  margin: 26px 0 0;
  font-size: 16.5px;
  color: var(--fg-soft);
  max-width: 54ch;
  text-align: start;
}

/* ─── Status strip ────────────────────────────────────────────
   Mono label + value with a live dot, over an indeterminate
   progress hairline. Reads as a console status line rather than
   a marketing badge — deliberate for an infrastructure message. */
.status {
  margin-block-start: 34px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-on-dark-tile);
  max-width: 520px;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.status-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding-inline-end: 12px;
  border-inline-end: 1px solid var(--line);
}

.status-value {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--fg-soft);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  flex-shrink: 0;
  animation: mfx-pulse 2.4s ease-in-out infinite;
}

@keyframes mfx-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); opacity: 1; }
  50%      { box-shadow: 0 0 0 6px rgba(255, 74, 31, 0); opacity: 0.55; }
}

.status-track {
  position: relative;
  margin-block-start: 14px;
  height: 2px;
  border-radius: 999px;
  background: var(--bg-on-dark-line);
  overflow: hidden;
}

.status-track::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 38%;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: mfx-scan 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

/* Translate percentages resolve against the element's own box, and the
   sweep is 38% of the track — so 100/38 ≈ 263% carries it from fully
   before the start to fully past the end with no dead frame. translateX
   is a physical axis and does not follow `direction`, hence the mirrored
   keyframes for RTL below rather than a single shared pair. */
@keyframes mfx-scan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(263%); }
}

[dir="rtl"] .status-track::after { animation-name: mfx-scan-rtl; }

@keyframes mfx-scan-rtl {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-263%); }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: 32px;
}

/* ─── Hero visual ─────────────────────────────────────────────── */
.visual {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--bg-deep);
  box-shadow: var(--shadow-lg);
}

.visual img {
  width: 100%;
  height: auto;
  display: block;
}

/* Blends the artwork's edges into the panel so the animation reads
   as part of the surface rather than a pasted-in rectangle. */
.visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 52%, rgba(19, 21, 23, 0.55) 100%),
    linear-gradient(to bottom, rgba(19, 21, 23, 0.28), transparent 22%, transparent 78%, rgba(19, 21, 23, 0.34));
}

/* ─── Motion pause control (WCAG 2.2.2) ───────────────────────
   The artwork loops indefinitely beside body copy, so it needs a stop.
   Pausing swaps in the poster frame over the animation and freezes the
   status indicators; `hidden` is cleared by script, since without JS the
   control could not do anything. */
.visual-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.motion-paused .visual-poster { opacity: 1; }

.motion-paused .status-dot,
.motion-paused .status-track::after { animation-play-state: paused; }

.visual-pause {
  position: absolute;
  inset-block-end: 14px;
  inset-inline-end: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--bg-on-dark-line);
  background: rgba(19, 21, 23, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fg-on-dark-soft);
  opacity: 0.55;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.visual:hover .visual-pause,
.visual-pause:hover,
.visual-pause:focus-visible {
  opacity: 1;
  color: var(--fg);
  border-color: var(--line-strong);
}

.visual-pause .ico-play { display: none; }
.motion-paused .visual-pause .ico-pause { display: none; }
.motion-paused .visual-pause .ico-play { display: block; }

/* ─── Assurance band ──────────────────────────────────────────
   A single full-width statement between hairlines: heading on the
   inline-start, body beside it. */
.pillars {
  border-block-start: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
}

.pillar { padding-block: 40px 44px; }

.pillar-body {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(20px, 5vw, 72px);
  align-items: start;
}

.pillar h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
}

.pillar p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--fg-muted);
  text-align: start;
  max-width: 62ch;
}

/* ─── Footer ──────────────────────────────────────────────────── */
.footer {
  padding-block: 30px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  flex-wrap: wrap;
}

.footer-contact {
  display: flex;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  font-size: 14px;
}

.footer-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.footer-contact a {
  color: var(--fg-soft);
  border-block-end: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-contact a:hover { color: var(--fg); border-block-end-color: var(--line-strong); }

/* Phone numbers and email addresses are LTR strings regardless of the
   page direction — isolate them so the leading + and the digits do not
   get reordered inside a Persian paragraph. */
.ltr { direction: ltr; unicode-bidi: isolate; }

.footer-note {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0;
  text-align: start;
}

/* ─── RTL typography corrections ──────────────────────────────
   Arabic-script letterforms are joined: negative tracking breaks the
   connections, and the taller ascenders/descenders need more leading
   than the Latin display scale gets away with. Lifted from
   app/globals.css. */
[dir="rtl"] .h-display,
[dir="rtl"] .btn,
[dir="rtl"] .mono,
[dir="rtl"] .pillar h2,
[dir="rtl"] .status-label,
[dir="rtl"] .status-value,
[dir="rtl"] .footer-label {
  letter-spacing: 0 !important;
}

[dir="rtl"] .h-display { line-height: 1.18; }
[dir="rtl"] .h-display { font-size-adjust: 0.485; }
[dir="rtl"] .hero h1 { font-size: clamp(34px, 4.6vw, 62px); }
[dir="rtl"] .pillar h2 { line-height: 1.45; }
[dir="rtl"] .hero-lead { line-height: 1.85; }
[dir="rtl"] .pillar p { line-height: 1.9; }

/* Uppercasing is meaningless in Arabic script and only costs the
   shaper work. */
[dir="rtl"] .status-label,
[dir="rtl"] .footer-label { text-transform: none; }

/* ─── Breakpoints ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-block: 48px 56px;
  }

  .hero-lead { max-width: none; }
  .status { max-width: none; }
  .visual { max-width: 720px; }
}

@media (max-width: 860px) {
  .pillar-body { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 700px) {
  :root { --gutter: 18px; }

  .topbar { padding-block: 16px; }
  .topbar-logo img { height: 28px; }

  .hero { padding-block: 34px 44px; gap: 34px; }
  .hero h1 { font-size: clamp(30px, 8.4vw, 42px); margin-block-start: 18px; }
  [dir="rtl"] .hero h1 { font-size: clamp(26px, 7.2vw, 36px); }
  .hero-lead { font-size: 15px; margin-block-start: 20px; }

  /* Stacked: at this width the value wraps below the label anyway, which
     would leave the label's divider rule dangling at the end of its line. */
  .status { padding: 14px 15px; margin-block-start: 26px; }
  .status-row { flex-direction: column; align-items: flex-start; gap: 9px; }
  .status-label { border-inline-end: none; padding-inline-end: 0; }
  .status-value { font-size: 12px; }

  .hero-actions { margin-block-start: 26px; gap: 10px; }
  .hero-actions .btn { flex: 1 1 100%; }

  .visual { border-radius: var(--radius-lg); }
  .visual-pause { inset-block-end: 10px; inset-inline-end: 10px; opacity: 1; }

  .pillar { padding-block: 30px 34px; }
  .pillar h2 { font-size: 19px; }
  .pillar p { font-size: 14.5px; }

  .footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-block: 26px 34px;
  }

  .footer-contact { gap: 8px 16px; }
}

/* ─── Reduced motion ──────────────────────────────────────────
   Entrance animations, the status pulse and the scan sweep all stop.
   The animated artwork is swapped for its static poster frame by the
   <picture> media query in the markup, so nothing moves at all. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .status-dot,
  .status-track::after { animation: none; }

  .status-track::after { inset-inline-start: 0; width: 100%; opacity: 0.4; }

  .btn:hover { transform: none; }

  /* Nothing is moving, so the pause control has nothing to act on. */
  .visual-pause { display: none; }
}