/* Страница «ИИ-мониторинг инфополя». Общая основа — product.css (заголовки,
   отступы секций, галочки, сноска о ценах). Здесь то, что отличает эту
   страницу от Пресс-Офиса: центрованный первый экран с потоком, полоса
   источников, скриншоты на всю ширину, линия пути, сетка разного размера,
   столбики «было и стало», цены строками. */

/* ---------- первый экран ---------- */
.mn-hero { padding: clamp(48px, calc(6vw / var(--z, 1)), 88px) 0 clamp(40px, calc(4vw / var(--z, 1)), 64px); text-align: center; }
.mn-hero h1 { font-size: var(--fs-hero); font-weight: 400; line-height: 1.04; letter-spacing: -.02em; color: var(--ink-2); }
.mn-hero .lead { max-width: 34em; margin: 24px auto 0; font-size: var(--fs-lead); font-weight: 300; color: rgba(220, 230, 255, .78); }
.mn-hero .hero-actions { margin-top: 36px; }
.mn-hero .btn { min-height: 57px; font-size: 20px; }
.mn-hero-art { margin-top: clamp(40px, calc(5vw / var(--z, 1)), 72px); }
.mn-hero-art .mf { display: block; width: 100%; height: auto; overflow: visible; }
.mn-hero-art .mf-v { display: none; }

.mf text { font-family: var(--f-text); }
.mf-dot { fill: rgba(169, 198, 255, .55); }
.mf-dot.is-ok { fill: #a9c6ff; }
.mf-gate { fill: rgba(77, 141, 255, .16); stroke: rgba(169, 198, 255, .45); stroke-width: 1; }
.mf-slit { fill: rgba(169, 198, 255, .35); }
.mf-lab { font-size: 15px; font-weight: 300; fill: var(--muted); }
.mf-card-bg { fill: rgba(255, 255, 255, .045); stroke: rgba(169, 198, 255, .3); stroke-width: 1; }
.mf-k { font-size: 13px; font-weight: 300; fill: var(--muted); }
.mf-ph { font-size: 18px; font-weight: 400; fill: var(--ink-2); }
.mf-led { fill: #4d8dff; }
.mf-card.is-hot .mf-card-bg { stroke: rgba(240, 88, 96, .7); animation: mf-hot 2.4s ease-in-out infinite; }
.mf-card.is-hot .mf-led { fill: #f05860; animation: mf-led 1.2s ease-in-out infinite; }
@keyframes mf-hot { 50% { fill: rgba(240, 88, 96, .1); } }
@keyframes mf-led { 50% { opacity: .35; } }

/* ---------- источники ---------- */
.mn-sources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; padding-top: 32px; border-top: 1px solid var(--glass-line); }
.mn-sources h3 { font-size: 22px; font-weight: 400; color: var(--ink-2); }
.mn-sources p { margin-top: 10px; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--soft); }
.mn-sources .mn-sources-note { grid-column: 1 / -1; max-width: 70ch; margin-top: 28px; font-size: 15px; color: var(--muted); }

/* ---------- скриншоты ---------- */
.mn-shot { margin: 40px 0 0; border-radius: 24px; overflow: hidden; background: #0c0d0f; box-shadow: 0 0 0 1px rgba(169, 198, 255, .14), 0 40px 100px rgba(0, 0, 0, .45); }
.mn-shot img { display: block; width: 100%; height: auto; }
.mn-split-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, calc(5vw / var(--z, 1)), 80px); align-items: end; }
.mn-split-head h2 { font-size: var(--fs-h2); }
.mn-split-head p { margin-top: 18px; font-size: var(--fs-body); font-weight: 300; color: var(--soft); }
.mn-split-head .pp-checks { margin-top: 0; }

/* ---------- путь публикации ---------- */
.mn-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 48px 0 0; padding: 0; list-style: none; }
.mn-track::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, rgba(77, 141, 255, .15), #4d8dff 50%, rgba(77, 141, 255, .15)); background-size: 200% 100%; animation: mn-run 4s linear infinite; }
@keyframes mn-run { to { background-position: -200% 0; } }
.mn-track li { position: relative; padding-top: 40px; }
.mn-track li::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px #7fb0ff; }
.mn-track li:last-child::before { box-shadow: inset 0 0 0 2px #f05860; }
.mn-track h3 { font-size: 22px; font-weight: 400; color: var(--ink-2); }
.mn-track p { margin-top: 10px; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--soft); }

/* ---------- сюжет ---------- */
.mn-story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, calc(4vw / var(--z, 1)), 64px); align-items: center; }
.mn-story .mn-shot { margin: 0; }
.mn-story h2 { font-size: var(--fs-h2); }
.mn-story-lead { margin-top: 18px; font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--soft); }
.mn-phases { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.mn-phases span { padding: 7px 14px; border-radius: 999px; background: rgba(77, 141, 255, .12); font-size: 14px; color: var(--accent-ink); }
.mn-phases span.is-hot { background: rgba(240, 88, 96, .14); color: #ff9aa0; }

/* ---------- сетка возможностей ---------- */
.mn-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.mn-tile { display: flex; flex-direction: column; padding: 30px; border-radius: 28px; background: rgba(255, 255, 255, .035); }
.mn-tile.is-big { grid-row: span 2; background: #f4f7ff; color: var(--light-ink); }
/* последняя плитка — широкая полоса: заголовок слева, текст справа */
.mn-tile.is-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: baseline; }
.mn-tile.is-wide p { max-width: 62ch; margin-top: 0; font-size: 18px; }
.mn-tile h3 { font-size: 24px; font-weight: 400; color: var(--ink-2); }
.mn-tile.is-big h3 { color: var(--light-ink); }
.mn-tile p { margin-top: 12px; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--soft); }
.mn-tile.is-big p { color: rgba(4, 18, 43, .72); }
.mn-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.mn-chips span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 14px; color: var(--soft); }
.mn-day { margin-top: auto; padding-top: 40px; }
.mn-day-line { position: relative; height: 96px; border-bottom: 2px solid rgba(4, 18, 43, .15); }
.mn-day-line span { position: absolute; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--light-ink); }
.mn-day-line span b, .mn-day-line span em { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.mn-day-line span b { bottom: 44px; font-family: var(--f-num); font-weight: 400; font-size: 24px; }
.mn-day-line span em { bottom: 22px; font-style: normal; font-size: 13px; color: rgba(4, 18, 43, .6); }
.mn-day-line span.is-alert { width: 10px; height: 10px; margin-left: -5px; bottom: -6px; background: #f05860; animation: mf-led 1.6s ease-in-out infinite; }
.mn-day-axis { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--f-num); font-size: 13px; color: rgba(4, 18, 43, .5); }
.mn-day-axis i { font-style: normal; }

/* ---------- эффект: столбики ---------- */
.mn-bars { display: grid; gap: 18px; margin-top: 48px; }
.mn-bar-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) 110px; gap: 20px; align-items: center; }
.mn-bar-name { font-size: 17px; color: var(--soft); }
.mn-bar-row > b { font-family: var(--f-num); font-weight: 400; font-size: clamp(24px, calc(2.2vw / var(--z, 1)), 32px); color: var(--ink-2); text-align: right; white-space: nowrap; }
.mn-bar { display: flex; gap: 3px; height: 56px; }
.mn-bar i { display: flex; align-items: center; padding: 0 14px; border-radius: 10px; background: rgba(255, 255, 255, .07); font-style: normal; font-size: 14px; color: var(--soft); white-space: nowrap; overflow: hidden; }
.mn-bar.is-short { width: var(--w); }
.mn-bar.is-short i { flex: 1; background: #2559d0; color: #fff; }
.mn-bars-note { max-width: 70ch; margin-top: 24px; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--muted); }

/* ---------- безопасность ---------- */
.mn-sec { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, calc(5vw / var(--z, 1)), 80px); align-items: start; }
.mn-sec h2 { font-size: var(--fs-h2); }
.mn-sec p { margin-top: 18px; font-size: var(--fs-body); font-weight: 300; color: var(--soft); }
.mn-sec-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.mn-sec-list li { padding: 24px 26px; border-radius: 22px; background: rgba(255, 255, 255, .035); }
.mn-sec-list b { display: block; font-weight: 400; font-size: 19px; color: var(--ink-2); }
.mn-sec-list span { display: block; margin-top: 6px; font-size: 15px; font-weight: 300; color: var(--muted); }

/* ---------- цены строками ---------- */
.mn-prices { margin-top: 40px; border-top: 1px solid var(--glass-line); }
.mn-price { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, .8fr); gap: 24px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--glass-line); }
.mn-price h3 { font-size: 24px; font-weight: 400; color: var(--ink-2); }
.mn-price p { font-size: 17px; font-weight: 300; color: var(--soft); }
.mn-price b { font-family: var(--f-num); font-weight: 400; font-size: clamp(26px, calc(2.4vw / var(--z, 1)), 34px); letter-spacing: -.02em; color: var(--ink-2); text-align: right; white-space: nowrap; }

/* ---------- призыв ---------- */
.mn-cta { padding: clamp(48px, calc(6vw / var(--z, 1)), 88px) clamp(24px, calc(4vw / var(--z, 1)), 64px); border-radius: 36px; text-align: center; background: radial-gradient(70% 120% at 50% 0%, rgba(77, 141, 255, .35), transparent 70%), rgba(255, 255, 255, .03); }
.mn-cta h2 { font-size: var(--fs-h2); }
.mn-cta p { max-width: 34em; margin: 18px auto 0; font-size: 18px; font-weight: 300; line-height: 1.5; color: var(--soft); }
.mn-cta .hero-actions { margin-top: 32px; }

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .mn-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
  .mn-split-head, .mn-story, .mn-sec { grid-template-columns: minmax(0, 1fr); }
  .mn-track { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 36px; }
  .mn-track::before { left: 7px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(180deg, rgba(77, 141, 255, .15), #4d8dff 50%, rgba(77, 141, 255, .15)); background-size: 100% 200%; animation-name: mn-run-v; }
  @keyframes mn-run-v { to { background-position: 0 -200%; } }
  .mn-track li { padding-top: 0; }
  .mn-track li::before { left: -36px; top: 4px; }
  .mn-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-tile.is-big { grid-column: 1 / -1; grid-row: auto; }
  .mn-tile.is-wide { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .mn-bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .mn-bar-row .mn-bar { grid-column: 1 / -1; grid-row: 2; }
  .mn-bar i { padding: 0 10px; }
}
@media (max-width: 760px) {
  .mn-hero h1 { font-size: calc(9.4vw / var(--z, 1)); }
  .mn-hero .hero-actions .btn { flex: 1 1 100%; }
  .mn-hero-art .mf-h { display: none; }
  .mn-hero-art .mf-v { display: block; max-width: 360px; margin: 0 auto; }
  .mn-sources { grid-template-columns: minmax(0, 1fr); }
  /* на телефоне кадр показывает крупно левую часть: время, тон, канал, суть */
  .mn-shot { border-radius: 16px; }
  .mn-shot img { width: 175%; max-width: none; }
  .mn-bento { grid-template-columns: minmax(0, 1fr); }
  .mn-bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .mn-bar-row .mn-bar { grid-column: 1 / -1; grid-row: 2; }
  .mn-bar i { font-size: 0; padding: 0; }
  .mn-bar.is-short { width: 22%; }
  .mn-sec-list { grid-template-columns: minmax(0, 1fr); }
  .mn-price { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mn-price b { text-align: left; }
  .mn-cta .hero-actions .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-dot { display: none; }
  .mf-card.is-hot .mf-card-bg, .mf-card.is-hot .mf-led, .mn-track::before, .mn-day-line span.is-alert { animation: none; }
}

/* =============== интерфейс продукта в вёрстке (.mx-*) ===============
   Цвета и шрифт — из самого продукта (apps/web/app/globals.css):
   фон #0c0d0f, акцент #4c8dff, негатив #f05860, внимание #e5a83b, рост #42c88a. */
.mx-app { --mx-bg: #0c0d0f; --mx-panel: #131418; --mx-line: #22242a; --mx-ink: #eceef2; --mx-mut: #8a909c; --mx-acc: #4c8dff;
  font-family: "Onest", var(--f-text); color: var(--mx-ink); background: var(--mx-bg); text-align: left; letter-spacing: 0; }
.mn-shot { background: #0c0d0f; }
.mx-chrome { display: flex; align-items: center; gap: 22px; padding: 14px 20px; border-bottom: 1px solid var(--mx-line); }
.mx-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.mx-brand img { width: 26px; height: 26px; }
.mx-nav { display: flex; gap: 6px; }
.mx-nav span { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--mx-line); font-size: 13px; color: #c4c8d0; white-space: nowrap; }
.mx-nav span.is-on { background: var(--mx-acc); border-color: var(--mx-acc); color: #fff; }
.mx-chrome-end { display: flex; gap: 8px; margin-left: auto; }
.mx-chrome-end i { position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--mx-line); }
.mx-chrome-end i.is-bell::after { content: "25"; position: absolute; top: -7px; right: -9px; padding: 1px 5px; border-radius: 999px; background: #e5484d; font: 600 10px/1.4 "Onest", sans-serif; color: #fff; }
.mx-chrome-end i.is-me { background: var(--mx-acc); border-color: var(--mx-acc); }

.mx-bar { display: flex; align-items: center; gap: 14px; padding: 14px 20px 10px; }
.mx-seg { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--mx-panel); }
.mx-seg span { padding: 6px 12px; border-radius: 9px; font-size: 13.5px; color: #b5bac4; white-space: nowrap; }
.mx-seg span i { margin-left: 4px; font-style: normal; color: var(--mx-mut); font-variant-numeric: tabular-nums; }
.mx-seg span.is-on { background: #1d1f25; color: #fff; }
.mx-new { padding: 5px 11px; border-radius: 999px; background: rgba(76, 141, 255, .16); color: #8db4ff; font-size: 13px; font-weight: 500; animation: mx-new 3.2s ease-in-out infinite; }
@keyframes mx-new { 50% { background: rgba(76, 141, 255, .28); } }
.mx-found { margin-left: auto; font-size: 13px; color: var(--mx-mut); font-variant-numeric: tabular-nums; }
.mx-filters { display: flex; gap: 8px; padding: 2px 20px 14px; border-bottom: 1px solid var(--mx-line); }
.mx-filters span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--mx-line); font-size: 13px; color: #c4c8d0; white-space: nowrap; }
.mx-filters span::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 0 3px 8px; border-right: 1.3px solid currentColor; border-bottom: 1.3px solid currentColor; transform: rotate(45deg); opacity: .7; }

.mx-row { display: grid; grid-template-columns: 16px 52px 44px 200px minmax(0, 1fr) 110px 74px; gap: 14px; align-items: center; padding: 0 20px; height: 44px; border-bottom: 1px solid #191b20; font-size: 14px; }
.mx-row:not(.mx-head) { transition: background-color .2s ease; }
.mx-row:not(.mx-head):hover { background: #15171c; }
.mx-head { height: 38px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mx-mut); background: #0f1013; }
.mx-cb { width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid #3a3d45; }
.mx-time { color: var(--mx-mut); font-variant-numeric: tabular-nums; }
.mx-tone { font-variant-numeric: tabular-nums; color: #b5bac4; }
.mx-tone.is-pos { color: #42c88a; }
.mx-tone.is-neg { color: #f05860; }
.mx-ch { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-text { color: #c9cdd5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-tags { display: flex; justify-content: flex-end; }
.mx-tag { padding: 2px 9px; border-radius: 7px; border: 1px solid #3a3d45; font-size: 12.5px; color: #c4c8d0; white-space: nowrap; }
.mx-tag.is-warn { border-color: rgba(229, 168, 59, .5); background: rgba(229, 168, 59, .12); color: #f0c060; }
.mx-reach { display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: #b5bac4; font-variant-numeric: tabular-nums; }
.mx-reach svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; opacity: .7; }
.mx-reach.is-up { animation: mx-up 1.6s ease-out; }
@keyframes mx-up { 0% { color: #42c88a; } 100% { color: #b5bac4; } }
.mx-row.is-sel { background: #15171c; box-shadow: inset 2px 0 0 var(--mx-acc); }
.mx-feed { max-height: 660px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); }

/* карточка сюжета */
.mx-story { padding: 26px 28px 28px; }
.mx-story-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; }
.mx-muted { color: var(--mx-mut); }
.mx-watch { padding: 7px 14px; border-radius: 10px; background: var(--mx-acc); color: #fff; font-size: 13px; font-weight: 500; white-space: nowrap; }
.mx-story .mx-title { margin-top: 16px; font-family: "Onest", sans-serif; font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--mx-ink); letter-spacing: 0; }
.mx-story .mx-sum { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: #c9cdd5; }
.mx-story .mx-change { margin-top: 12px; font-size: 13.5px; line-height: 1.55; color: var(--mx-ink); }
.mx-dev { margin-top: 18px; border-radius: 16px; background: #101115 radial-gradient(circle at 1px 1px, #1d1f25 1px, transparent 1.2px) 0 0 / 12px 12px; border: 1px solid var(--mx-line); }
.mx-dev-head { display: flex; gap: 12px; align-items: baseline; padding: 14px 18px 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mx-mut); }
.mx-dev-head b { font-weight: 600; color: #c4c8d0; }
.mx-dev-head .mx-date { margin-left: auto; text-transform: none; letter-spacing: 0; }
.mx-dev-body { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; padding: 10px 18px 16px; }
.mx-stats { display: grid; gap: 12px; margin: 0; }
.mx-stats dt { font-size: 26px; font-weight: 600; line-height: 1; color: var(--mx-ink); font-variant-numeric: tabular-nums; }
.mx-stats dd { margin: 4px 0 0; font-size: 12px; line-height: 1.35; color: var(--mx-mut); }
.mx-chart { width: 100%; height: auto; align-self: end; }
.mx-chart text { font: 11px "Onest", sans-serif; fill: var(--mx-mut); }
.mx-base { stroke: #2a2d34; stroke-width: 1; }
.mx-col { fill: #5b8cf0; transform-box: fill-box; transform-origin: bottom; }
.mx-col.is-dim { fill: #3550a0; }
.mx-tick { fill: #3a3d45; }
.mx-line { fill: none; stroke: #aab0bb; stroke-width: 1.4; stroke-dasharray: 600; stroke-dashoffset: 600; }
.mx-pt { fill: #fff; opacity: 0; }
.mn-shot.is-in .mx-col { animation: mx-grow .9s cubic-bezier(.22, 1, .36, 1) both; }
.mn-shot.is-in .mx-col.is-dim { animation-delay: .25s; }
.mn-shot.is-in .mx-line { animation: mx-draw 1.4s .3s cubic-bezier(.22, 1, .36, 1) forwards; }
.mn-shot.is-in .mx-pt { animation: mx-pt .4s 1.5s forwards; }
@keyframes mx-grow { from { transform: scaleY(0); } }
@keyframes mx-draw { to { stroke-dashoffset: 0; } }
@keyframes mx-pt { to { opacity: 1; } }
.mx-event { position: relative; margin-top: 18px; padding: 14px 0 0 22px; border-top: 1px solid var(--mx-line); font-size: 14px; line-height: 1.5; color: var(--mx-ink); }
.mx-event::before { content: ""; position: absolute; left: 2px; top: 22px; width: 8px; height: 8px; border-radius: 50%; background: var(--mx-acc); box-shadow: 0 0 0 4px rgba(76, 141, 255, .2); }
.mx-event .mx-muted { display: block; margin-bottom: 3px; font-size: 12.5px; }

@media (max-width: 1100px) {
  .mx-nav span:nth-child(n + 4) { display: none; }
}
@media (max-width: 760px) {
  .mn-shot img { width: 100%; }
  .mx-chrome { gap: 12px; padding: 12px 14px; }
  .mx-nav, .mx-chrome-end { display: none; }
  .mx-bar { flex-wrap: wrap; padding: 12px 14px 8px; }
  .mx-found { display: none; }
  .mx-filters { padding: 0 14px 12px; overflow: hidden; }
  .mx-row { grid-template-columns: 40px 36px minmax(0, 1fr); grid-template-rows: auto auto; gap: 2px 10px; height: auto; padding: 10px 14px; font-size: 13.5px; }
  .mx-row .mx-cb, .mx-row .mx-tags, .mx-row .mx-reach { display: none; }
  .mx-row .mx-text { grid-column: 1 / -1; }
  .mx-head { display: none; }
  .mx-story { padding: 20px 18px; }
  .mx-dev-body { grid-template-columns: minmax(0, 1fr); }
  .mx-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .mx-new { animation: none; }
  .mn-shot.is-in .mx-col, .mn-shot.is-in .mx-line, .mn-shot.is-in .mx-pt { animation: none; }
  .mx-line { stroke-dashoffset: 0; }
  .mx-pt { opacity: 1; }
}

/* =============== первый экран: поток на canvas (.mf-*) ===============
   Вёрстка задаёт места источников, фильтров и сюжетов; monitor.js читает их
   координаты и рисует поток. Без скрипта остаются подписи и карточки. */
.mn-hero-art[data-flow] { position: relative; aspect-ratio: 1200 / 440; margin-top: clamp(48px, calc(6vw / var(--z, 1)), 88px); text-align: left;
  background: radial-gradient(60% 80% at 50% 55%, rgba(77, 141, 255, .07), transparent 70%); }
.mn-hero-art[data-flow]::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 1px 1px, rgba(169, 198, 255, .09) 1px, transparent 1.3px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent); }
.mf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.mf-srcs { position: absolute; left: 0; top: 6%; bottom: 6%; width: 17%; display: flex; flex-direction: column; justify-content: space-around; }
.mf-src { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 10px 16px 10px 12px; border-radius: 999px;
  background: rgba(10, 20, 40, .85); box-shadow: inset 0 0 0 1px rgba(169, 198, 255, .2); font-size: 15px; color: var(--ink-2); white-space: nowrap; }
.mf-src i { width: 10px; height: 10px; border-radius: 3px; background: #a9c6ff; box-shadow: 0 0 12px currentColor; }
.mf-src[data-c="tg"] i { background: #4fa3ff; color: #4fa3ff; }
.mf-src[data-c="web"] i { background: #a9c6ff; color: #a9c6ff; }
.mf-src[data-c="intl"] i { background: #b49cff; color: #b49cff; }

.mf-gate { position: absolute; top: 9%; bottom: 9%; width: 2px; }
.mf-gate[data-gate="1"] { left: 35%; }
.mf-gate[data-gate="2"] { left: 57%; }
.mf-gate span { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -12px); padding: 6px 12px; border-radius: 999px;
  background: rgba(10, 20, 40, .85); box-shadow: inset 0 0 0 1px rgba(169, 198, 255, .2); font-size: 14px; color: var(--soft); white-space: nowrap; }

.mf-cards { position: absolute; right: 0; top: 4%; bottom: 4%; width: 25%; display: flex; flex-direction: column; justify-content: space-around; }
.mf-card { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 10px 14px; align-items: center;
  padding: 16px 20px; border-radius: 20px; background: rgba(12, 22, 44, .9); box-shadow: inset 0 0 0 1px rgba(169, 198, 255, .22);
  transition: box-shadow .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1); }
.mf-card.is-hit { animation: mf-hit .5s ease-out; }
@keyframes mf-hit { 0% { box-shadow: inset 0 0 0 1px rgba(169, 198, 255, .7), 0 0 28px rgba(77, 141, 255, .35); } 100% { box-shadow: inset 0 0 0 1px rgba(169, 198, 255, .22); } }
.mf-led { width: 10px; height: 10px; border-radius: 50%; background: #4d8dff; box-shadow: 0 0 10px #4d8dff; font-style: normal; }
.mf-card-t small { display: block; font-size: 13px; color: var(--muted); }
.mf-card-t b { display: block; margin-top: 2px; font-weight: 400; font-size: 19px; color: var(--ink-2); white-space: nowrap; }
.mf-meter { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.mf-meter i { height: 4px; border-radius: 2px; background: rgba(169, 198, 255, .12); transition: background-color .3s ease; }
.mf-meter i.is-pos { background: #42c88a; }
.mf-meter i.is-neu { background: #7fb0ff; }
.mf-meter i.is-neg { background: #f05860; }
.mf-card.is-hot { box-shadow: inset 0 0 0 1px rgba(240, 88, 96, .55); animation: mf-hotpulse 2.6s ease-in-out infinite; }
.mf-card.is-hot .mf-led { background: #f05860; box-shadow: 0 0 12px #f05860; animation: mf-led 1.2s ease-in-out infinite; }
.mf-card.is-hot.is-hit { animation: mf-hit-hot .6s ease-out, mf-hotpulse 2.6s ease-in-out infinite; }
@keyframes mf-hotpulse { 50% { box-shadow: inset 0 0 0 1px rgba(240, 88, 96, .9), 0 0 32px rgba(240, 88, 96, .22); } }
@keyframes mf-hit-hot { 0% { transform: scale(1.02); } 100% { transform: none; } }

.mn-blog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.mn-blog-head h2 { font-size: var(--fs-h2); }

@media (max-width: 1100px) {
  .mn-hero-art[data-flow] { aspect-ratio: 1200 / 520; }
  .mf-src { font-size: 13px; padding: 8px 12px 8px 10px; }
  .mf-card { padding: 12px 14px; }
  .mf-card-t b { font-size: 16px; }
}
/* телефон: поток сверху вниз */
@media (max-width: 760px) {
  .mn-hero-art[data-flow] { aspect-ratio: 360 / 600; max-width: 420px; margin-inline: auto; }
  .mf-srcs { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 12%; flex-direction: row; justify-content: space-between; gap: 6px; }
  .mf-src { align-self: center; flex-direction: column; gap: 6px; padding: 8px 6px; border-radius: 14px; font-size: 11.5px; flex: 1; text-align: center; white-space: normal; line-height: 1.15; }
  .mf-gate { top: auto; bottom: auto; left: 3% !important; right: 3%; width: auto; height: 2px; }
  .mf-gate[data-gate="1"] { top: 34%; }
  .mf-gate[data-gate="2"] { top: 56%; }
  .mf-gate span { bottom: auto; top: 50%; left: auto; right: 0; transform: translateY(-140%); font-size: 12px; padding: 4px 10px; }
  .mf-cards { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 22%; flex-direction: row; gap: 6px; }
  .mf-card { flex: 1; grid-template-columns: 1fr; padding: 10px; border-radius: 14px; gap: 6px; }
  .mf-led { display: none; }
  .mf-card-t small { font-size: 11px; }
  .mf-card-t b { font-size: 13.5px; white-space: normal; }
  .mf-meter { grid-template-columns: repeat(6, 1fr); }
  .mf-meter i:nth-child(n + 7) { display: none; }
  .mn-blog-head { margin-bottom: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .mf-card.is-hot, .mf-card.is-hot .mf-led { animation: none; }
}

/* блог на странице продукта: карточки как на главной, без кегля h3 страницы */
.pp .bl-title { font-size: 20px; line-height: 1.15; letter-spacing: -.01em; }

/* одна статья: широкая карточка, обложка слева, текст справа */
.bl-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.bl-grid.is-single .bl-link { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, calc(4vw / var(--z, 1)), 56px); align-items: center; }
.pp .bl-grid.is-single .bl-title { font-size: clamp(24px, calc(2.4vw / var(--z, 1)), 32px); line-height: 1.15; padding-right: 0; }
.bl-grid.is-single .bl-note { font-size: 15px; }
@media (max-width: 760px) {
  .bl-grid.is-single .bl-link { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}