/* =========================================================================
   Статьи блога о доработке и поддержке сайтов (/blog/dorabotka-sajtov/…):
   иллюстрации первого экрана. Раскладка статьи, оглавление, чек-листы, врезки и блок
   «если не хотите разбираться сами» — из chek-list-tehnicheskogo-seo.css (статья S02).
   Иллюстрации статичные: без JS и при «уменьшить движение» выглядят так же.
   ========================================================================= */

/* ---------- «Как найти проблемы на сайте»: карточка правки ---------- */
.fx { width: 100%; max-width: 470px; margin: 0 0 0 auto; }
.fx-stack { position: relative; padding: 18px 0 0 18px; }
.fx-back { position: absolute; inset: 0 18px 18px 0; border-radius: var(--radius-lg); background: var(--night-3); border: 1px solid var(--night-line); transform: rotate(-3deg); }
.fx-back + .fx-back { transform: rotate(2deg); background: var(--night-2); }
.fx-card { position: relative; display: grid; gap: 14px; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--radius-lg); background: #fff; color: var(--ink); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7); }
.fx-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--paper-line); }
.fx-top b { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; }
.fx-prio { padding: 3px 10px; border-radius: 999px; background: #ffe9e6; color: #b3271a; font-size: 0.75rem; font-weight: 700; }
.fx-rows { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 0.9rem; line-height: 1.4; }
.fx-rows dt { color: var(--ink-soft); }
.fx-rows dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.fx-rows .is-now { color: #b3271a; }
.fx-rows .is-goal { color: #17694b; }
.fx-shot { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: var(--paper); font-size: 0.82rem; color: var(--ink-soft); }
.fx-shot i { display: block; height: 72px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px var(--paper-line); position: relative; overflow: hidden; }
.fx-shot i::before { content: ""; position: absolute; left: 8px; right: 8px; top: 10px; height: 6px; border-radius: 3px; background: #dfe4ee; box-shadow: 0 12px 0 #dfe4ee, 0 24px 0 #dfe4ee; }
.fx-shot i::after { content: ""; position: absolute; left: 20px; right: -12px; bottom: 9px; height: 12px; border-radius: 999px; background: var(--signal); }
.fx figcaption { margin-top: 14px; color: var(--fog-dim); font-size: 0.85rem; line-height: 1.4; }

/* ---------- «Что входит в техподдержку»: план работ на месяц ---------- */
.mplan { width: 100%; max-width: 480px; margin: 0 0 0 auto; padding: clamp(16px, 2.2vw, 24px); border-radius: var(--radius-lg); background: linear-gradient(160deg, rgba(24, 38, 74, 0.72), rgba(17, 28, 51, 0.92)); border: 1px solid var(--night-line); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6); }
.mplan-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.mplan-top b { font-family: var(--font-display); font-weight: 600; font-size: var(--step-1); letter-spacing: -0.02em; color: #eef2fb; }
.mplan-top span { color: var(--fog-dim); font-size: 0.82rem; }
.mplan-head, .mplan-row { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 0.5fr)); gap: 6px; align-items: center; }
.mplan-head { margin-bottom: 6px; color: var(--fog-dim); font-size: 0.75rem; text-align: center; }
.mplan-row { padding: 7px 0; border-top: 1px solid var(--night-line); }
.mplan-row > span:first-child { color: #eef2fb; font-size: 0.86rem; font-weight: 600; line-height: 1.3; }
.mplan-row i { justify-self: center; width: 14px; height: 14px; border-radius: 50%; background: var(--night-line); }
.mplan-row i.on { background: var(--signal); box-shadow: 0 0 0 4px rgba(255, 176, 32, 0.15); }
.mplan-row i.ok { background: var(--ok); box-shadow: 0 0 0 4px rgba(47, 191, 138, 0.15); }
.mplan-row .line { grid-column: 2 / -1; height: 8px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--ok) 0 10px, rgba(47, 191, 138, 0.45) 10px 14px); }
.mplan-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; color: var(--fog); font-size: 0.8rem; }
.mplan-key span { display: inline-flex; align-items: center; gap: 6px; }
.mplan-key i { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }
.mplan-key i.ok { background: var(--ok); }
.mplan figcaption { margin-top: 12px; color: var(--fog-dim); font-size: 0.85rem; line-height: 1.4; }

@media (max-width: 1080px) {
  .fx, .mplan { margin: 0 auto; }
}
@media (max-width: 640px) {
  .fx-stack { padding: 12px 0 0 12px; }
  .fx-back { inset: 0 12px 12px 0; }
  .fx-rows { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fx-rows dd { margin-bottom: 8px; }
  .mplan-head, .mplan-row { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 0.4fr)); }
  .mplan-row > span:first-child { font-size: 0.8rem; }
}