:root {
  /* SOVA: цвета журнала marketing-journal — почти чёрный, белый, оранжевый #FFA300 */
  --ink: #0b0b0b;
  --ink-2: #3d3d3d;
  --ink-3: #7c7c7c;
  --bg: #f3f2ef;
  --card: #ffffff;
  --line: #e4e2dc;
  --navy: #080808;
  --navy-2: #151515;
  --accent: #ffa300;
  --accent-2: #ffb733;
  --accent-dark: #b36f00;
  --accent-ink: #0b0b0b;
  --crit: #f2542d;   /* «критично» — огненно-оранжевый, в гамме журнала */
  --crit-bg: #ffece5;
  --imp: #f08c00;
  --imp-bg: #fff3e0;
  --min: #6f6f6f;
  --min-bg: #efeeeb;
  --ok: #1f9d63;
  --ok-bg: #e6f6ee;
  --r: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 12px 30px -14px rgba(0, 0, 0, .18);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.55 Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
[hidden] { display: none !important; }

.demo-bar { background: #fff4c7; color: #6b5200; text-align: center; font-size: 13px; font-weight: 600; padding: 7px 16px; }

/* кнопки */
.btn { text-decoration: none; border: 0; border-radius: 12px; padding: 14px 22px; font-weight: 700; font-size: 15px; white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:active { transform: translateY(1px); }
.btn--accent { color: var(--accent-ink); background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 22px -8px rgba(59, 108, 255, .7); }
.btn--accent:hover { box-shadow: 0 12px 28px -8px rgba(59, 108, 255, .85); }
.btn--ghost { color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); }
.btn--ghost:hover { background: rgba(255, 255, 255, .18); }
.btn--line { color: var(--ink); background: #fff; border: 1px solid var(--line); }
.btn--line:hover { border-color: #c9d0de; }
.btn--wide { width: 100%; }
.linkish { background: none; border: 0; padding: 0; color: #9fb6ff; text-decoration: underline; text-underline-offset: 3px; }

/* шапка */
.top { background: var(--navy); position: relative; z-index: 2; }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.logo { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.logo__mark { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 20px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.logo__text { display: flex; flex-direction: column; line-height: 1.2; }
.logo__text b { font-size: 16px; }
.logo__text small { color: #9aa6c4; font-size: 12px; }

/* первый экран */
.hero { position: relative; overflow: hidden; background: radial-gradient(1200px 500px at 50% -10%, var(--navy-2), var(--navy) 70%); color: #fff; padding: 64px 0 88px; }
.hero__glow { position: absolute; inset: auto -20% -60% -20%; height: 520px; background: radial-gradient(closest-side, rgba(106, 77, 255, .35), transparent); pointer-events: none; }
.hero__in { position: relative; text-align: center; max-width: 1120px; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.hero .kicker { color: #9fb6ff; }
.hero h1 { font-size: clamp(28px, 4.6vw, 54px); line-height: 1.08; font-weight: 800; margin: 14px auto 20px; }
.hero__sub { color: #b8c2dc; font-size: 17px; max-width: none; margin: 0 auto 34px; text-align: justify; text-align-last: center; hyphens: auto; -webkit-hyphens: auto; }
.check { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 16px; padding: 8px; max-width: 640px; margin: 0 auto; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6); }
.check__icon { color: var(--ink-3); padding-left: 10px; display: flex; }
.check input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink); padding: 12px 6px; background: transparent; }
.check input::placeholder { color: #aab2c4; font-weight: 500; }
.check:focus-within { box-shadow: 0 0 0 3px rgba(59, 108, 255, .5), 0 24px 60px -20px rgba(0, 0, 0, .6); }
.check__error { max-width: 640px; margin: 14px auto 0; background: rgba(242, 84, 45, .15); border: 1px solid rgba(242, 84, 45, .5); color: #ffd1d2; border-radius: 12px; padding: 10px 14px; font-size: 15px; }
.perks { list-style: none; margin: 30px auto 0; padding: 6px; display: inline-flex; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.perks li { display: flex; align-items: center; gap: 12px; padding: 12px 26px; text-align: left; position: relative; }
.perks li + li::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .22), transparent); }
.perks b { font-size: 38px; font-weight: 800; line-height: 1; letter-spacing: -.03em; white-space: nowrap; background: linear-gradient(135deg, #ffffff 10%, #9fb6ff 55%, #b9a6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.perks span { color: #b8c2dc; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.hero__try { margin-top: 14px; color: #8190b3; font-size: 14px; }

/* прогресс */
.progress { margin-top: -48px; position: relative; z-index: 3; margin-bottom: 64px; }
.progress__card { max-width: 640px; margin: 0 auto; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 28px; }
.progress__head { display: flex; align-items: center; gap: 16px; }
.progress__title { font-size: 18px; font-weight: 600; word-break: break-all; }
.progress__hint { color: var(--ink-3); font-size: 14px; }
.spinner { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 3px solid #e3e8f7; border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress__bar { height: 6px; background: #eef1f7; border-radius: 6px; margin: 22px 0 18px; overflow: hidden; }
.progress__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 6px; transition: width .6s ease; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.steps li { display: flex; align-items: center; gap: 10px; color: #b3bbcc; font-size: 15px; transition: color .3s; }
.steps li::before { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid #dde2ec; transition: all .3s; }
.steps li.is-now { color: var(--ink); font-weight: 600; }
.steps li.is-now::before { border-color: var(--accent); border-top-color: transparent; animation: spin .8s linear infinite; }
.steps li.is-done { color: var(--ink-2); }
.steps li.is-done::before { border-color: transparent; border-width: 0; width: 20px; height: 20px; background: url("img/ok2.png?v=1") center/contain no-repeat; }

/* отчёт */
.report { margin-top: -48px; position: relative; z-index: 3; margin-bottom: 72px; }
.report__head { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 28px; display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; }
.score { position: relative; width: 150px; height: 150px; }
.score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score circle { fill: none; stroke-width: 11; }
.score__track { stroke: #efeeeb; }
.score__val { stroke: var(--ok); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1), stroke .3s; }
.score__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score__num b { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.score__num small { color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.report__sum h2 { font-size: clamp(22px, 3vw, 30px); margin: 6px 0 8px; word-break: break-all; }
.report__verdict { color: var(--ink-2); max-width: 520px; }
.counts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.count { font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 12px; display: inline-flex; align-items: center; gap: 6px; position: relative; }
.count.is-zero { opacity: .45; }
.count--critical.is-hot { color: #fff; background: var(--crit); box-shadow: 0 8px 20px -8px rgba(242, 84, 45, .8); }
.count--critical.is-hot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .8); } 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0); } }
.count b { font-size: 18px; line-height: 1; }
.count--critical { color: var(--crit); background: var(--crit-bg); }
.count--important { color: #b56400; background: var(--imp-bg); }
.count--minor { color: var(--min); background: var(--min-bg); }
.report__actions { display: flex; flex-direction: column; gap: 10px; }

.stats { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stats li { background: var(--card); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
.stats b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.stats span { color: var(--ink-3); font-size: 13px; }

.serp { margin-top: 28px; }
.serp__label { font-size: 14px; font-weight: 700; color: var(--ink-2); margin-bottom: 10px; }
.serp__card { background: #fff; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 22px 26px; font-family: Arial, sans-serif; }
.serp__url { display: flex; align-items: center; gap: 8px; color: #5f6b7a; font-size: 13px; margin-bottom: 4px; word-break: break-all; }
.serp__fav { width: 18px; height: 18px; border-radius: 4px; background: #e8ecf5 center/16px no-repeat; flex: none; }
.serp__title { display: block; color: #1a0dab; font-size: 19px; line-height: 1.3; margin-bottom: 4px; text-decoration: none; }
.serp__desc { color: #333; font-size: 14px; line-height: 1.45; }
.serp__cut { background: var(--crit-bg); color: var(--crit); border-radius: 3px; }
.serp__missing { color: var(--crit); font-style: italic; }
.serp__note { font-size: 13px; color: var(--ink-3); margin-top: 8px; }

.block-title { font-size: 22px; margin: 44px 0 18px; display: flex; align-items: center; gap: 16px; }
.block-title::before { content: "!"; width: 32px; height: 32px; flex: none; margin-left: 5px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 17px; font-weight: 800; background: var(--crit); box-shadow: 0 0 0 5px var(--crit-bg); }
.block-title--ok::before { content: ""; width: 38px; height: 38px; margin-left: 2px; background: url("img/ok2.png?v=1") center/contain no-repeat; box-shadow: none; }

.issues { display: grid; gap: 12px; }
.issue { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 20px 22px; border-left: 5px solid var(--min); }
.issue--critical { border-left-color: var(--crit); background: linear-gradient(90deg, #fff0ea, #fff 55%); box-shadow: 0 1px 2px rgba(242, 84, 45, .08), 0 14px 34px -14px rgba(242, 84, 45, .35); }
.issue--important { border-left-color: var(--imp); background: linear-gradient(90deg, #fff6ea, #fff 55%); }
.issue__top { display: flex; align-items: center; gap: 12px; }
.issue__top h4 { flex: 1; }
.sev-ico { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 17px; line-height: 1; }
.sev-ico--critical { background: var(--crit); box-shadow: 0 0 0 5px var(--crit-bg); }
.sev-ico--important { background: var(--imp); border-radius: 9px; box-shadow: 0 0 0 5px var(--imp-bg); }
.sev-ico--minor { background: var(--min); font-family: Georgia, serif; font-style: italic; box-shadow: 0 0 0 5px var(--min-bg); }
.issue h4 { margin: 0; font-size: 17px; line-height: 1.3; }
.tag { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 99px; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.tag--critical { color: #fff; background: var(--crit); }
.tag--important { color: #b56400; background: var(--imp-bg); }
.tag--minor { color: var(--min); background: var(--min-bg); }
.issue__why { color: var(--ink-2); margin-top: 8px; font-size: 15px; }
.issue__fix { margin-top: 12px; background: #f1f5ff; border-radius: 10px; padding: 11px 14px; font-size: 15px; }
.issue__fix b { color: var(--accent); }
.issue__pages { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.issue__pages li { display: flex; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed var(--line); }
.issue__pages code { font: 600 13px/1.5 ui-monospace, Consolas, monospace; color: var(--ink); background: #f3f5fa; padding: 1px 6px; border-radius: 5px; word-break: break-all; }
.issue__pages span { color: var(--ink-2); word-break: break-word; }
.issue__more { color: var(--ink-3); font-size: 13px; margin-top: 6px; }

.locked { position: relative; margin-top: 12px; }
.issues--locked .issue { filter: blur(5px); user-select: none; pointer-events: none; }
.locked.is-open .issues--locked .issue { filter: none; user-select: auto; pointer-events: auto; }
.locked__veil { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 30px; background: linear-gradient(180deg, rgba(244, 246, 251, .2), rgba(244, 246, 251, .85) 40%); }
.locked.is-open .locked__veil { display: none; }
.locked__box { background: var(--card); border-radius: var(--r); box-shadow: 0 20px 50px -18px rgba(15, 26, 46, .35); padding: 26px; text-align: center; max-width: 440px; margin: 0 16px; }
.locked__box p { color: var(--ink-2); margin-bottom: 16px; }
.locked__title { font-size: 19px; font-weight: 700; color: var(--ink) !important; margin-bottom: 6px !important; }
.locked--empty { display: none; }

.passed { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.passed li { background: var(--card); border-radius: 12px; padding: 12px 16px 12px 44px; position: relative; font-size: 15px; box-shadow: var(--shadow); }
.passed li::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: url("img/ok2.png?v=1") center/contain no-repeat; }

.cta { margin-top: 40px; border-radius: var(--r); padding: 32px; color: #fff; background-color: var(--navy); background-image: radial-gradient(ellipse at 90% 0%, rgba(106, 77, 255, .5), transparent 55%); display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.cta h3 { font-size: 24px; margin-bottom: 8px; }
.cta p { color: #b8c2dc; max-width: 600px; }

/* что проверяем */
.what { margin-top: 88px; margin-bottom: 96px; text-align: center; }
.what h2 { font-size: clamp(28px, 3.6vw, 40px); margin: 10px 0 14px; }
.what__lead { color: var(--ink-2); font-size: clamp(17px, 1.9vw, 22px); line-height: 1.5; margin: 0 auto 40px; text-align: justify; text-align-last: center; hyphens: auto; -webkit-hyphens: auto; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; text-align: left; }
.feat { position: relative; overflow: hidden; background: var(--card); border-radius: 22px; padding: 30px 30px 26px; box-shadow: var(--shadow); border: 1px solid rgba(227, 231, 240, .7); display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.feat::before { content: ""; position: absolute; top: -80px; right: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(closest-side, rgba(106, 77, 255, .10), transparent); pointer-events: none; }
.feat:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(15, 26, 46, .05), 0 22px 44px -16px rgba(15, 26, 46, .24); }
.feat__n { position: absolute; top: 22px; right: 26px; font-size: 44px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: #e4e8f2; }
.feat__ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 22px -10px rgba(59, 108, 255, .8); float: left; margin: 4px 18px 8px 0; }
.feat__body { flex: 1; display: flow-root; }
.feat__ico svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feat h3 { font-size: 21px; margin: 2px 56px 10px 0; position: relative; }
.feat p { color: var(--ink-2); font-size: 15.5px; line-height: 1.6; flex: 1; }
.feat__ex { margin-top: 20px; display: flex; align-items: stretch; background: #f5f7fc; border: 1px solid #dfe4ee; border-radius: 12px; overflow: hidden; font: 600 13px/1.4 ui-monospace, Consolas, monospace; color: var(--ink); }
.feat__ex:has(.dot--crit) { background: #fff2ec; border-color: #f7bca8; }
.feat__ex:has(.dot--imp) { background: #fff7ec; border-color: #f1cf9c; }
.feat__ex span { order: 2; word-break: break-word; padding: 11px 14px; align-self: center; }
.dot { flex: none; order: 0; display: flex; align-items: center; justify-content: center; min-width: 108px; padding: 0 12px; font: 800 11px/1 Manrope, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .07em; color: #fff; }
.dot--crit { background: var(--crit); }
.dot--imp { background: var(--imp); }
.dot--min { background: var(--min); }
.report:not([hidden]) ~ .what { display: none; }

.foot { background: var(--navy); color: #8190b3; font-size: 14px; }
.foot__in { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 26px; padding-bottom: 26px; }

/* форма */
.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal__back { position: absolute; inset: 0; background: rgba(8, 14, 32, .6); backdrop-filter: blur(4px); }
.modal__box { position: relative; background: #fff; border-radius: 22px; padding: 32px; width: 100%; max-width: 440px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .5); animation: pop .25s ease; }
@keyframes pop { from { transform: translateY(12px) scale(.98); opacity: 0; } }
.modal__x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 28px; color: var(--ink-3); line-height: 1; padding: 6px; }
.modal h3 { font-size: 24px; margin-bottom: 8px; }
.modal__sub { color: var(--ink-2); margin-bottom: 20px; font-size: 15px; }
.modal form { display: grid; gap: 14px; }
.modal label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.modal input[type=text] { font: inherit; font-size: 16px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; outline: 0; color: var(--ink); }
.modal input[type=text]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 108, 255, .2); }
.modal input.is-bad { border-color: var(--crit); }
.modal .agree { display: flex; align-items: flex-start; gap: 8px; font-weight: 500; font-size: 13px; color: var(--ink-3); }
.done__icon { width: 72px; height: 72px; background: url("img/ok2.png?v=1") center/contain no-repeat; font-size: 0; margin-bottom: 14px; filter: drop-shadow(0 10px 18px rgba(31, 157, 99, .3)); }
#modalDone p { color: var(--ink-2); margin-bottom: 12px; }

/* адаптив */
@media (max-width: 900px) {
  .report__head { grid-template-columns: auto 1fr; }
  .report__actions { grid-column: 1 / -1; flex-direction: row; }
  .report__actions .btn { flex: 1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  .top .btn--ghost { display: none; }
  .hero { padding: 40px 0 76px; }
  .hero__sub { font-size: 15px; }
  .perks { display: flex; padding: 4px; margin-top: 24px; }
  .perks li { flex: 1; flex-direction: column; gap: 6px; padding: 12px 4px; text-align: center; }
  .perks b { font-size: 28px; }
  .perks span { font-size: 12px; }
  .check { flex-wrap: wrap; padding: 6px; }
  .check__icon { display: none; }
  .check input { padding: 12px 10px; }
  .check .btn { width: 100%; }
  .report__head { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 24px 18px; }
  .counts { justify-content: center; }
  .report__actions { flex-direction: column; width: 100%; }
  .score { width: 132px; height: 132px; }
  .issue { padding: 16px; }
  .issue__top { flex-wrap: wrap; row-gap: 6px; }
  .issue__top h4 { flex: 1 1 calc(100% - 44px); }
  .issue__top .tag { margin-left: 44px; }
  .passed { grid-template-columns: 1fr; }
  .cta { flex-direction: column; align-items: stretch; padding: 24px; }
  .cta .btn { white-space: normal; }
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .what { margin-top: 56px; margin-bottom: 64px; }
  .what__lead { font-size: 16px; margin-bottom: 28px; }
  .feat { padding: 24px 20px 20px; border-radius: 18px; }
  .feat__n { font-size: 36px; top: 18px; right: 18px; }
  .feat h3 { font-size: 19px; margin-right: 40px; }
  .feat__ico { width: 48px; height: 48px; border-radius: 14px; margin-right: 14px; }
  .feat__ico svg { width: 24px; height: 24px; }
  .feat__ex { font-size: 12.5px; }
  .dot { min-width: 86px; padding: 0 8px; font-size: 10px; letter-spacing: .05em; }
  .feat__ex span { padding: 10px 12px; }
  .btn { white-space: normal; }
}

/* печать = PDF */
@media print {
  .demo-bar, .top .btn, .hero, .progress, .no-print, .what, .foot, .modal, .locked__veil { display: none !important; }
  .cta { background-image: none; break-inside: avoid; }
  body { background: #fff; }
  .report { margin: 0; }
  .issues--locked .issue { filter: none !important; }
  .issue, .stats li, .passed li, .report__head { box-shadow: none; border: 1px solid var(--line); break-inside: avoid; }
  .top { background: #fff; }
  .logo { color: var(--ink); }
  html, body { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .serp__tabs { display: none !important; }
  .serp, .serp__card { break-inside: avoid; }
  .block-title { break-after: avoid; }
  .print-only { display: flex !important; }
}
.print-only { display: none; }
.print-foot { margin-top: 28px; padding: 18px 22px; border-radius: 14px; background: var(--navy); color: #fff; justify-content: space-between; align-items: center; gap: 16px; break-inside: avoid; }
.print-foot b { font-size: 16px; }
.print-foot span { color: #b8c2dc; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.count i { font-style: normal; }
.h1-q { display: block; font-size: clamp(24px, 4.3vw, 51px); line-height: 1.15; letter-spacing: -.015em; }
.h1-accent { display: block; font-size: clamp(34px, 7.4vw, 88px); line-height: 1.05; letter-spacing: -.03em; margin-top: 6px; padding-bottom: 4px; background: linear-gradient(90deg, #8fb0ff, #b9a6ff 60%, #e0b6ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* выдача: Яндекс / Google */
.serp__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.serp__head .serp__label { margin: 0; }
.serp__tabs { display: inline-flex; background: #ebe9e4; border-radius: 10px; padding: 3px; }
.serp__tabs button { border: 0; background: none; padding: 6px 14px; border-radius: 8px; font-weight: 700; font-size: 13px; color: var(--ink-2); }
.serp__tabs button.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15, 26, 46, .15); }
.serp__site { display: flex; flex-wrap: wrap; column-gap: 2px; }
.serp__site b { font-weight: 400; }
.serp__card--ya .serp__site b { color: #5f6b7a; }
.serp__card--ya .serp__url span[id="serpUrl"] { display: none; }
.serp__card--g { font-family: Arial, sans-serif; }
.serp__card--g .serp__url { align-items: center; gap: 12px; margin-bottom: 6px; }
.serp__card--g .serp__fav { width: 28px; height: 28px; border-radius: 50%; background-color: #f1f3f4; background-size: 18px; border: 1px solid #e3e5e8; }
.serp__card--g .serp__site { flex-direction: column; line-height: 1.3; }
.serp__card--g .serp__site b { color: #202124; font-size: 14px; }
.serp__card--g #serpUrl { color: #4d5156; font-size: 12px; }
.serp__card--g .serp__title { color: #1a0dab; font-size: 20px; }
.serp__card--g .serp__desc { color: #4d5156; }

/* режим сборки PDF-файла */
.pdf-mode .report { margin-top: 0; }
.pdf-mode .no-print, .pdf-mode .serp__tabs, .pdf-mode .locked__veil { display: none !important; }
.pdf-mode .cta { background-image: none !important; }
.pdf-mode .issues--locked .issue { filter: none !important; }
.pdf-mode .print-only { display: flex !important; }
.pdf-mode .issue, .pdf-mode .stats li, .pdf-mode .passed li, .pdf-mode .report__head, .pdf-mode .serp__card { box-shadow: none !important; border-top: 1px solid #e3e7f0; border-right: 1px solid #e3e7f0; border-bottom: 1px solid #e3e7f0; }
.pdf-mode .stats li, .pdf-mode .passed li, .pdf-mode .report__head, .pdf-mode .serp__card { border-left: 1px solid #e3e7f0; }
.pdf-mode .demo-bar, .pdf-mode .top, .pdf-mode .hero, .pdf-mode .progress, .pdf-mode .what, .pdf-mode .foot { display: none !important; }
.pdf-mode .count--critical.is-hot { box-shadow: none; }
.pdf-mode .score__val { transition: none; }
.pdf-brand { align-items: center; gap: 12px; margin-bottom: 16px; }
.pdf-brand b { display: block; font-size: 16px; }
.pdf-brand small { color: var(--ink-3); font-size: 12px; }
@media print { .top { display: none !important; } }

/* адреса страниц в карточках проблем */
.issue__pages li { align-items: baseline; }
.issue__urls { font: 600 13px/1.5 ui-monospace, Consolas, monospace; max-width: 100%; word-break: break-all; }
.issue__urls a, .issue__pages span a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(59, 108, 255, .3); word-break: break-all; }
.issue__urls a:hover, .issue__pages span a:hover { border-bottom-color: var(--accent); }
.issue__urls i { font-style: normal; color: var(--ink-3); font-weight: 500; }

/* ============ SOVA: оформление в стиле журнала ============ */
h1, h2, h3, h4 { font-weight: 800; }
.demo-bar { background: var(--accent); color: var(--accent-ink); font-weight: 700; letter-spacing: .02em; }

/* кнопки: плоские «таблетки», как «Перейти →» в журнале */
.btn { border-radius: 999px; font-weight: 700; letter-spacing: .01em; }
.btn--accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 24px -12px rgba(255, 163, 0, .9); }
.btn--accent:hover { background: var(--accent-2); box-shadow: 0 14px 28px -12px rgba(255, 163, 0, 1); }
.btn--line { border-radius: 999px; }
.btn--line-light { color: #fff; background: transparent; border: 1.5px solid var(--accent); }
.btn--line-light:hover { background: rgba(255, 163, 0, .12); }
.linkish { color: var(--accent); }

/* шапка */
.top { background: var(--navy); border-bottom: 1px solid #1d1d1d; }
.logo { gap: 14px; }
.logo__word { font-weight: 900; font-size: 26px; letter-spacing: .06em; color: #fff; line-height: 1; }
.logo__word::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 3px; background: var(--accent); border-radius: 50%; vertical-align: baseline; }
.logo__sub { color: #9a9a9a; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; border-left: 1px solid #333; padding-left: 14px; }
.top__right { display: flex; align-items: center; gap: 14px; }
.lang { display: inline-flex; border: 1px solid #333; border-radius: 999px; padding: 3px; }
.lang button { border: 0; background: none; color: #9a9a9a; font-weight: 700; font-size: 13px; padding: 5px 11px; border-radius: 999px; letter-spacing: .06em; }
.lang button.is-on { background: var(--accent); color: var(--accent-ink); }

/* первый экран: чёрный, оранжевый акцент, крупные заголовки капсом */
.hero { background: var(--navy); background-image: radial-gradient(900px 420px at 50% 115%, rgba(255, 163, 0, .16), transparent 70%); }
.hero__glow { display: none; }
.hero .kicker { color: var(--accent); }
.kicker { color: var(--accent-dark); }
.hero h1 { text-transform: uppercase; font-weight: 900; letter-spacing: -.01em; }
.h1-q { letter-spacing: -.005em; }
.h1-accent { background: none; color: var(--accent); -webkit-background-clip: border-box; background-clip: border-box; letter-spacing: -.02em; }
.hero__sub { color: #bdbdbd; }
.check { border-radius: 999px; padding: 7px; }
.check__icon { padding-left: 14px; }
.check:focus-within { box-shadow: 0 0 0 3px rgba(255, 163, 0, .55), 0 24px 60px -20px rgba(0, 0, 0, .6); }
.perks { background: rgba(255, 255, 255, .03); border-color: #2a2a2a; box-shadow: none; }
.perks b { background: none; color: var(--accent); -webkit-background-clip: border-box; background-clip: border-box; }
.perks span { color: #bdbdbd; }
.perks li + li::before { background: linear-gradient(180deg, transparent, #3a3a3a, transparent); }
.hero__try { color: #8a8a8a; }

/* прогресс */
.spinner { border-color: #eee; border-top-color: var(--accent); }
.progress__bar span { background: var(--accent); }
.steps li.is-now::before { border-color: var(--accent); border-top-color: transparent; }

/* отчёт */
.report__sum h2 { font-weight: 900; }
.block-title { text-transform: uppercase; letter-spacing: .01em; font-weight: 900; }
.stats b { font-weight: 900; }
.issue__fix { background: #fff6e5; }
.issue__fix b { color: var(--accent-dark); }
.issue__urls a, .issue__pages span a { color: var(--accent-dark); border-bottom-color: rgba(179, 111, 0, .35); }
.issue__urls a:hover, .issue__pages span a:hover { border-bottom-color: var(--accent-dark); }
.serp__tabs button.is-on { color: var(--ink); }
.locked__veil { background: linear-gradient(180deg, rgba(243, 242, 239, .2), rgba(243, 242, 239, .88) 40%); }
.locked__title { font-weight: 800; }
.cta { background-color: var(--navy); background-image: radial-gradient(ellipse at 95% 0%, rgba(255, 163, 0, .28), transparent 55%); }
.cta h3 { text-transform: uppercase; font-weight: 900; }
.cta p { color: #bdbdbd; }
.cta__btns { display: flex; flex-direction: column; gap: 10px; flex: none; }
.print-foot { background: var(--navy); border-left: 6px solid var(--accent); }
.print-foot span { color: #bdbdbd; }
.pdf-brand { gap: 14px; }
.pdf-brand .logo__word { color: var(--ink); }
.pdf-brand small { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); border-left: 1px solid var(--line); padding-left: 14px; }

/* что проверяем */
.what h2 { text-transform: uppercase; font-weight: 900; }
.feat { border-radius: 16px; border-color: var(--line); }
.feat::before { background: radial-gradient(closest-side, rgba(255, 163, 0, .12), transparent); }
.feat__n { color: #ecebe6; font-weight: 900; }
.feat__ico { background: var(--navy); border-radius: 14px; box-shadow: none; }
.feat__ico svg { stroke: var(--accent); }
.feat h3 { font-weight: 800; }
.dot { font-family: Montserrat, sans-serif; font-weight: 800; }

/* подвал */
.foot { background: var(--navy); color: #8a8a8a; border-top: 1px solid #1d1d1d; }
.foot__in { align-items: center; }
.logo__word--sm { font-size: 18px; }

/* форма */
.modal__back { background: rgba(0, 0, 0, .65); }
.modal__box { border-top: 6px solid var(--accent); }
.modal h3 { text-transform: uppercase; font-weight: 900; }
.modal input[type=text]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 163, 0, .25); }

@media (max-width: 900px) {
  .top .btn--line-light { display: none; }
}
@media (max-width: 640px) {
  .logo__sub { display: none; }
  .check { border-radius: 22px; }
  .cta__btns { width: 100%; }
}
/* Montserrat шире прежнего шрифта — размеры, чтобы строки заголовка шли во всю ширину */
.hero .h1-q { font-size: clamp(20px, 2.95vw, 35px); }
.hero .h1-accent { font-size: clamp(30px, 5.35vw, 64px); }
/* строка проблемы без адреса страницы — отметка-галочка «добавить» */
.issue__pages li.is-plain span { position: relative; padding-left: 18px; color: var(--ink); }
.issue__pages li.is-plain span::before { content: "+"; position: absolute; left: 0; top: -1px; font-weight: 800; color: var(--accent-dark); }

/* скорость по данным Google */
.psi { margin-top: 16px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 22px 24px; }
.psi__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.psi__head h3 { font-size: 17px; text-transform: uppercase; font-weight: 900; }
.psi__wait { color: var(--ink-3); font-size: 13px; }
.psi__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.psi__col { display: flex; gap: 18px; align-items: center; }
.psi__col h4 { font-size: 15px; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.psi__col p { font-size: 13.5px; color: var(--ink-2); margin: 2px 0; }
.psi__col p b { color: var(--ink); }
.psi__score { width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 6px solid currentColor; }
.psi__score b { font-size: 26px; font-weight: 900; color: var(--ink); }
.psi__score--ok { color: var(--ok); }
.psi__score--imp { color: var(--imp); }
.psi__score--crit { color: var(--crit); }

/* сравнение с конкурентом */
.compare { margin-top: 40px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 26px 28px; border-top: 5px solid var(--accent); }
.compare__head h3 { font-size: 22px; text-transform: uppercase; font-weight: 900; margin-bottom: 6px; }
.compare__head p { color: var(--ink-2); }
.compare__form { display: flex; gap: 8px; margin-top: 16px; max-width: 640px; }
.compare__form input { flex: 1; min-width: 0; font: inherit; font-size: 16px; font-weight: 600; padding: 12px 18px; border: 1.5px solid var(--line); border-radius: 999px; outline: 0; }
.compare__form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 163, 0, .25); }
.compare__err { margin-top: 10px; color: var(--crit); font-size: 14px; }
.compare__sum { margin-top: 20px; font-weight: 700; font-size: 16px; }
.compare__wrap { overflow-x: auto; margin-top: 10px; }
.compare__table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.compare__table th, .compare__table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.compare__table thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.compare__table thead th small { display: block; font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 700; word-break: break-all; }
.compare__table tbody th { font-weight: 600; color: var(--ink-2); width: 42%; }
.compare__table td { font-weight: 700; }
.compare__table td.is-win { color: var(--ok); background: var(--ok-bg); }
.compare__table td.is-lose { color: var(--crit); background: var(--crit-bg); }
@media (max-width: 640px) {
  .psi__grid { grid-template-columns: 1fr; }
  .compare { padding: 20px 16px; }
  .compare__form { flex-direction: column; }
}
.pdf-mode .compare__form { display: none !important; }

/* полный отчёт специалиста */
.full-badge { display: inline-block; margin-bottom: 12px; background: var(--navy); color: var(--accent); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 14px; border-radius: 999px; }

/* повторная проверка: было / стало */
.prev { margin-top: 16px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 20px 24px; border-left: 6px solid var(--accent); }
.prev__head { display: flex; align-items: center; gap: 18px; }
.prev__head h4 { margin: 0 0 4px; font-size: 16px; text-transform: uppercase; font-weight: 900; }
.prev__head p { color: var(--ink-2); }
.prev__delta { flex: none; min-width: 64px; text-align: center; font-size: 26px; font-weight: 900; padding: 8px 10px; border-radius: 12px; background: var(--min-bg); color: var(--ink-2); }
.prev__delta.is-up { background: var(--ok-bg); color: var(--ok); }
.prev__delta.is-down { background: var(--crit-bg); color: var(--crit); }
.prev > p { margin-top: 10px; font-size: 14.5px; color: var(--ink-2); }
.prev__fixed b { color: var(--ok); }
.prev__added b { color: var(--crit); }

/* чек-лист / план */
.todo { margin-top: 32px; background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 24px 26px; }
.todo__title { font-size: 20px; text-transform: uppercase; font-weight: 900; }
.todo__p { color: var(--ink-3); font-size: 14px; margin: 4px 0 14px; }
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.check-list label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.check-list input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.check-list b { display: block; font-size: 15px; }
.check-list small { display: block; color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.check-list input:checked + span { opacity: .5; text-decoration: line-through; }
.plan__group { margin-top: 14px; }
.plan__group h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; padding: 5px 12px; border-radius: 999px; display: inline-block; color: #fff; }
.plan__group--critical h4 { background: var(--crit); }
.plan__group--important h4 { background: var(--imp); }
.plan__group--minor h4 { background: var(--min); }
.plan__group ol { margin: 0; padding-left: 24px; display: grid; gap: 8px; }
.plan__group li b { display: block; font-size: 15px; }
.plan__group li span { color: var(--ink-2); font-size: 14px; }
.pdf-mode .todo, .pdf-mode .prev { box-shadow: none !important; border: 1px solid #e3e7f0; }
/* пример «в отчёте»: без рамки — только заливка, как у цветной части */
.feat__ex, .feat__ex:has(.dot--crit), .feat__ex:has(.dot--imp) { border: 0; }
.feat__ex { background: #f3f2ef; }
/* наведение на карточку «что проверяем»: без подъёма (у края курсора карточка дёргалась) —
   подсвечиваем рамку, иконку и номер */
.feat { transition: border-color .25s, box-shadow .25s; }
.feat:hover { transform: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 18px 40px -18px rgba(255, 163, 0, .45); }
.feat__ico, .feat__ico svg, .feat__n { transition: background .25s, stroke .25s, color .25s; }
.feat:hover .feat__ico { background: var(--accent); }
.feat:hover .feat__ico svg { stroke: var(--navy); }
.feat:hover .feat__n { color: var(--accent); }

/* ============ прямые углы, как в журнале SOVA ============
   круглыми остаются кнопки-таблетки, строка ввода адреса и круговые шкалы оценки */
:root { --r: 0; }
.report__head, .stats li, .serp__card, .issue, .issue__fix, .locked__box, .passed li, .cta,
.feat, .feat__ico, .feat__ex, .dot, .modal__box, .modal input[type=text], .progress__card,
.psi, .compare, .prev, .todo, .check-list label, .perks, .count, .tag, .full-badge, .print-foot,
.serp__tabs, .serp__tabs button, .prev__delta, .issue__pages code, .check__error,
.sev-ico, .sev-ico--important, .sev-ico--critical, .sev-ico--minor, .block-title::before,
.plan__group h4, .lang, .lang button, .compare__table td, .serp__fav, .logo__word::after { border-radius: 0; }
.block-title::before { box-shadow: 0 0 0 5px var(--crit-bg); }
.logo__word::after { width: 7px; height: 7px; }

/* заголовки групп по важности: одна полоса на группу вместо метки на каждой карточке */
.sev-head { margin: 22px 0 2px; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #fff; padding: 9px 16px; }
.sev-head:first-child { margin-top: 0; }
.sev-head b { font-size: 14px; background: rgba(255, 255, 255, .25); padding: 1px 9px; }
.sev-head--critical { background: var(--crit); }
.sev-head--important { background: var(--imp); }
.sev-head--minor { background: var(--min); }
.issues--locked .sev-head { filter: blur(4px); }
.locked.is-open .issues--locked .sev-head { filter: none; }
.pdf-mode .issues--locked .sev-head { filter: none !important; }

/* ширина как у журнала на Тильде: контейнер 1200, контент 1160 */
.wrap { max-width: 1200px; }
.hero__in { max-width: 1200px; }
.hero .h1-q { font-size: clamp(20px, 2.95vw, 37.5px); }
.hero .h1-accent { font-size: clamp(30px, 5.35vw, 68.5px); }
.hero .h1-q { font-size: clamp(20px, 3.5vw, 44.5px); }
.hero .h1-accent { font-size: clamp(30px, 6.4vw, 82px); }

/* ============ без теней, как в журнале: плоские кнопки, поля и карточки ============ */
:root { --shadow: none; }
.btn--accent, .btn--accent:hover, .check, .count--critical.is-hot, .issue--critical, .locked__box,
.modal__box, .feat, .serp__tabs button.is-on, .progress__card, .report__head, .stats li, .passed li,
.serp__card, .issue, .psi, .compare, .prev, .todo { box-shadow: none; }
.check:focus-within { box-shadow: 0 0 0 3px rgba(255, 163, 0, .55); }
.feat:hover { box-shadow: 0 0 0 1px var(--accent); }
.done__icon { filter: none; }

/* наведение на карточку: пример «в отчёте» заливается цветом своей важности */
.feat__ex, .feat__ex span, .dot { transition: background .25s, color .25s, box-shadow .25s; }
.feat:hover .feat__ex:has(.dot--crit) { background: var(--crit); color: #fff; }
.feat:hover .feat__ex:has(.dot--imp) { background: var(--imp); color: var(--ink); }
.feat:hover .feat__ex:has(.dot--min) { background: var(--min); color: #fff; }
.feat:hover .dot { background: var(--navy); color: #fff; } /* метка важности — чёрная, поле — цветом важности */

/* «что проверяем» группами по важности: слово один раз — полосой над группой */
.feat-group { margin-top: 26px; text-align: left; }
.feat-group:first-of-type { margin-top: 0; }
.feat-group .sev-head { margin: 0 0 14px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--3 .feat { padding: 26px 22px 22px; }
.grid--3 .feat h3 { font-size: 19px; margin-right: 44px; }
.grid--3 .feat__n { font-size: 38px; top: 20px; right: 20px; }
.feat__ex .dot { display: none; }  /* слово важности теперь в полосе группы */
.feat__ex { border-left: 6px solid var(--min); }
.feat__ex:has(.dot--crit) { border-left-color: var(--crit); }
.feat__ex:has(.dot--imp) { border-left-color: var(--imp); }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } }
.feat__ex:has(.dot--crit) { border-left: 6px solid var(--crit); }
.feat__ex:has(.dot--imp) { border-left: 6px solid var(--imp); }
.feat__ex:has(.dot--min) { border-left: 6px solid var(--min); }

/* плашки без тонких рамок, как в журнале; оранжевая рамка — только при наведении */
.feat { border: 1px solid transparent; }
.feat:hover { border-color: var(--accent); }
.serp__card { border: 0; }
.check-list label { border: 0; background: #f6f5f1; }

/* заголовок группы — маленькая аккуратная метка по ширине слова, а не полоса на всю ширину */
.sev-head { display: inline-flex; width: auto; font-size: 11px; letter-spacing: .07em; padding: 6px 12px; gap: 8px; margin: 22px 0 10px; }
.sev-head b { font-size: 11px; padding: 0 6px; }
.feat-group .sev-head { margin: 0 0 12px; }
.issues > .sev-head { justify-self: start; }

/* ============ монохром: чёрный · белый · бежевый + один акцент (оранжевый) ============
   важность: критично — чёрный, важно — оранжевый, желательно — серый; зелёный — только «всё хорошо» */
:root {
  --crit: #0b0b0b;
  --crit-bg: #ecebe6;
  --imp: #ffa300;
  --imp-bg: #fff4dc;
  --min: #a3a19b;
  --min-bg: #f0efeb;
}
.issue--critical { background: #fff; }
.issue--important { background: #fff; }
.sev-ico--critical { color: var(--accent); }
.sev-ico--important { color: var(--ink); }
.block-title::before { background: var(--ink); color: var(--accent); box-shadow: none; }
.tag--important { color: var(--ink); background: var(--imp); }
.count--critical { color: var(--ink); background: var(--crit-bg); }
.count--critical.is-hot { color: #fff; background: var(--ink); }
.count--important { color: var(--ink); background: var(--imp-bg); }
.count--minor { color: var(--ink-3); }
.serp__cut { background: var(--imp-bg); color: var(--accent-dark); }
.serp__missing { color: var(--accent-dark); }
.check__error { background: rgba(255, 163, 0, .12); border-color: rgba(255, 163, 0, .5); color: #ffd79a; }
.compare__err, .modal input.is-bad { color: var(--accent-dark); border-color: var(--accent-dark); }
.compare__table td.is-lose { color: var(--ink-3); background: transparent; }
.prev__delta.is-down { background: var(--crit-bg); color: var(--ink); }
.psi__score--crit { color: var(--ink); }
.feat__ex:has(.dot--crit) { background: #efeee9; border-left-color: var(--ink); }
.feat__ex:has(.dot--imp) { background: #fff6e3; }
.feat:hover .feat__ex:has(.dot--crit) { background: var(--ink); color: #fff; }
.feat:hover .feat__ex:has(.dot--imp) { background: var(--imp); color: var(--ink); }
.feat:hover .feat__ex:has(.dot--min) { background: var(--min); color: #fff; }
.plan__group--critical h4 { background: var(--ink); }
.plan__group--important h4 { background: var(--imp); color: var(--ink); }

/* заголовок группы: чёрное слово капсом + квадратик цвета важности + серое число */
.sev-head { display: flex; align-items: center; gap: 10px; background: none !important; color: var(--ink); padding: 0; margin: 26px 0 12px; font-size: 16px; font-weight: 900; letter-spacing: .06em; }
.sev-head::before { content: ""; width: 12px; height: 12px; flex: none; background: var(--min); }
.sev-head--critical::before { background: var(--ink); }
.sev-head--important::before { background: var(--imp); }
.sev-head b { background: none; color: var(--ink-3); font-size: 15px; padding: 0; font-weight: 700; }
.feat-group .sev-head { margin: 0 0 12px; }

/* логотип как в шапке журнала: обычная насыщенность, без разрядки и без точки */
.logo__word { font-weight: 500; font-size: 20px; letter-spacing: .01em; }
.logo__word::after { display: none; }
.logo__word--sm { font-size: 17px; }

/* хиро как заголовки журнала: капс средней насыщенности, плотные строки */
.hero h1 { font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.hero .h1-q, .hero .h1-accent { display: block; }
.hero .h1-q { margin-bottom: .45em; }

/* «Исправить с помощью специалиста»: как было, а при наведении — коралл контактов журнала (#FF8242) */
:root { --coral: #ff8242; }
.btn--line-light.js-lead[data-kind="fix"]:hover { border-color: var(--coral); background: rgba(255, 130, 66, .08); }
.btn--accent.js-lead[data-kind="fix"]:hover { background: var(--coral); }

/* ============ призывы к специалисту ============ */
/* после оценки — по результату */
.rep-cta { margin-top: 16px; font-size: 15px; color: var(--ink-2); max-width: 620px; }
.rep-cta .linkish, .mini-cta .linkish { color: var(--ink); font-weight: 700; text-decoration-color: var(--accent); text-decoration-thickness: 2px; white-space: nowrap; }
.rep-cta .linkish::after, .mini-cta .linkish::after { content: " →"; }
.rep-cta .linkish:hover, .mini-cta .linkish:hover { color: var(--coral); text-decoration-color: var(--coral); }
/* после главных проблем */
.mini-cta { margin: 16px 0 4px; padding: 16px 20px; background: #fff; border-left: 4px solid var(--accent); font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
/* сравнение: конкурент впереди */
.compare__cta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; font-weight: 700; }
.compare__cta .btn:hover { background: var(--coral); }
/* финальный блок: кто поможет (попадает и в PDF) */
.cta__main { min-width: 0; }
.cta__who { display: flex; gap: 14px; align-items: center; margin-top: 22px; }
.cta__who img { width: 64px; height: 64px; object-fit: cover; flex: none; }
.cta__who b { display: block; font-size: 16px; text-transform: uppercase; letter-spacing: .02em; }
.cta__who span { display: block; font-size: 13px; color: #bdbdbd; line-height: 1.45; }
.cta .cta__contacts { margin-top: 4px; color: #bdbdbd; }
.cta__contacts a { color: var(--accent); text-decoration: none; }
.cta__contacts a:hover { color: var(--coral); }
.pdf-mode .cta { break-inside: avoid; }
.pdf-mode .compare.is-empty { display: none !important; }
@media print { .compare.is-empty { display: none !important; } }
/* группы Критично / Важно / Желательно — побольше воздуха между ними, чтобы заголовок не терялся */
.issues > .sev-head { margin-top: 44px; }
.issues > .sev-head:first-child { margin-top: 0; }
.feat-group { margin-top: 40px; }
.feat-group:first-of-type { margin-top: 0; }
/* подстановка из подсказок браузера: голубую заливку Chrome перекрываем белой изнутри (фон под всеми полями белый) */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important; box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color: var(--ink) !important; caret-color: var(--ink);
}
/* маленькие призывы — таблеткой как «Перейти →» в журнале: рамка 2px, стрелка-значок журнала */
.rep-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.rep-cta .linkish, .mini-cta .linkish {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 18px;
  border: 2px solid var(--accent); border-radius: 30px; text-decoration: none;
  font-size: 14px; font-weight: 700; color: var(--ink); background: transparent; transition: border-color .15s, background .15s;
}
.rep-cta .linkish::after, .mini-cta .linkish::after {
  content: ""; width: 20px; height: 20px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.9443 11.3252C21.2563 11.6377 21.2566 12.1438 20.9443 12.4561L15.4434 17.957L14.3125 16.8262L18.4238 12.7148H4V11.1152H18.4727L14.3125 6.95508L14.8779 6.38965L15.4434 5.82324L20.9443 11.3252Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.9443 11.3252C21.2563 11.6377 21.2566 12.1438 20.9443 12.4561L15.4434 17.957L14.3125 16.8262L18.4238 12.7148H4V11.1152H18.4727L14.3125 6.95508L14.8779 6.38965L15.4434 5.82324L20.9443 11.3252Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rep-cta .linkish:hover, .mini-cta .linkish:hover { color: var(--ink); border-color: var(--coral); background: rgba(255, 130, 66, .08); }
.mini-cta { align-items: center; }
/* переключатель выдачи Яндекс / Google: выбранный — чёрным ярлычком, чтобы было видно */
.serp__tabs button.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.serp__tabs button:not(.is-on):hover { color: var(--ink); }
/* кнопки у оценки: главная — «Обсудить со специалистом» (оранжевая), остальные прозрачные с рамкой, как «Перейти» в журнале */
.btn--ghost { color: var(--ink); background: transparent; border: 2px solid var(--accent); border-radius: 999px; }
.btn--ghost:hover { border-color: var(--coral); background: rgba(255, 130, 66, .08); }
.report__actions .btn { text-align: center; }
.report__actions .btn--accent { border: 2px solid transparent; }
/* без серой подложки: выбранная выдача — чёрная, вторая — белая, одной высоты */
.serp__tabs { background: none; padding: 0; gap: 0; }
.serp__tabs button { background: #fff; color: var(--ink-2); padding: 8px 16px; }
.serp__tabs button.is-on { background: var(--ink); color: #fff; }
.serp__label { font-size: 18px; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .01em; line-height: 1.2; }
/* заголовок выдачи крупный — больше воздуха сверху (как у «Что исправить») и до карточки */
.serp { margin-top: 44px; }
.serp__head { margin-bottom: 16px; }
/* «Что уже в порядке»: заголовок — чёрный квадрат с оранжевой галочкой (в пару к «Что исправить» с «!»),
   пункты — тонкая галочка без круга */
.block-title--ok::before { content: ""; width: 32px; height: 32px; margin-left: 5px; border-radius: 0; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23ffa300' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center / 22px no-repeat; box-shadow: none; }
.passed li::before { width: 18px; height: 18px; left: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%230b0b0b' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") center / contain no-repeat; }
.done__icon { filter: none; }
/* кольцо загрузки: плавная дуга — медленно вращается и «дышит» (вместо рывков куска рамки) */
.spinner { border: 0; border-radius: 0; animation: spin 1.8s linear infinite; }
.spinner svg { display: block; width: 100%; height: 100%; }
.spinner circle { fill: none; stroke-width: 4; }
.spinner__track { stroke: #ebe9e4; }
.spinner__arc { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 1 132; stroke-dashoffset: 0; animation: spin-dash 1.8s ease-in-out infinite; }
@keyframes spin-dash {
  0% { stroke-dasharray: 1 132; stroke-dashoffset: 0; }
  50% { stroke-dasharray: 80 132; stroke-dashoffset: -26; }
  100% { stroke-dasharray: 80 132; stroke-dashoffset: -130; }
}
.steps li.is-now::before { border-color: #ebe9e4; border-top-color: var(--accent); animation: spin 1.2s linear infinite; }
/* при отключённых в системе анимациях индикатор загрузки всё равно крутится — спокойно, без мельтешения */
@media (prefers-reduced-motion: reduce) {
  .spinner, .spinner__arc { animation-duration: 1.8s !important; }
  .steps li.is-now::before { animation-duration: 1.2s !important; }
}
/* «Не хотите разбираться сами?» после главных проблем — чёрная плашка, чтобы не сливалась с карточками */
.mini-cta { background: var(--ink); color: #fff; border-left: 0; padding: 18px 24px; }
.mini-cta .linkish { color: #fff; }
.mini-cta .linkish:hover { color: #fff; border-color: var(--coral); background: rgba(255, 130, 66, .12); }
/* блок специалиста стоит после главных проблем — отступы как у соседних блоков; фото — высотой с текст */
.cta { margin: 24px 0 8px; }
.pdf-mode .cta { margin-top: 32px; }
.cta__who img { width: 85px; height: 85px; }
/* PDF-библиотека не рисует SVG в фоне — там те же галочки картинкой */
.pdf-mode .passed li::before { background-image: url("img/chk.png?v=1"); }
.pdf-mode .block-title--ok::before { background: url("img/chk-box.png?v=1") center / contain no-repeat; }
/* метка полного отчёта (видит только специалист): без своей плашки, строкой по центру; в PDF не нужна */
.full-badge { display: block; background: none; padding: 0; margin: 0 0 14px; text-align: center; font-size: 12px; letter-spacing: .08em; }
.pdf-mode .full-badge { display: none !important; }
@media print { .full-badge { display: none !important; } }
/* «Что мы проверяем»: группы важности заметно отдельно друг от друга */
.feat-group { margin-top: 64px; }
.feat-group:first-of-type { margin-top: 0; }
.feat-group .sev-head { margin: 0 0 18px; }

/* ============ блок специалиста: фото во всю высоту слева, внизу — кнопка и контакты в одну строку ============ */
.cta { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0; padding: 0; align-items: stretch; overflow: hidden; }
.cta__photo { width: 100%; height: 100%; min-height: 220px; object-fit: cover; object-position: 50% 15%; display: block; }
.cta__main { padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; }
.cta__main p { max-width: 720px; }
.cta__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 22px; }
.cta__btns { flex-direction: row; flex-wrap: wrap; width: auto; }
.cta__who { display: block; margin: 0; min-width: 0; }
.cta__who b { font-size: 14px; }
.cta__who span { font-size: 13px; }
@media (max-width: 720px) {
  .cta { grid-template-columns: 1fr; }
  .cta__photo { width: 96px; height: 96px; min-height: 0; margin: 24px 0 0 24px; }
  .cta__main { padding: 18px 24px 24px; }
  .cta__btns, .cta__btns .btn { width: 100%; }
}
.pdf-mode .cta__photo { min-height: 180px; }
/* низ блока: слева — кто и контакты, справа — кнопка */
.cta__foot { flex-wrap: nowrap; justify-content: space-between; }
.cta__who { order: 1; flex: 1 1 auto; }
.cta__btns { order: 2; flex: none; }
@media (max-width: 900px) { .cta__foot { flex-wrap: wrap; } .cta__btns { order: 3; } }
/* без большого фото: круглый портрет рядом с именем, как на сайте Андрея */
.cta { grid-template-columns: minmax(0, 1fr); }
.cta__main { padding: 32px 36px; }
.cta__ava { order: 0; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: none; background: #fff; }
.cta__foot { gap: 14px 18px; }
.cta__who { margin-right: auto; }
@media (max-width: 720px) { .cta__main { padding: 24px; } .cta__ava { width: 60px; height: 60px; } .cta__who { flex: 1 1 200px; } }
.cta__ava { object-position: 50% 50%; }
/* на узком (и в PDF) имя остаётся рядом с фото, на новую строку переходит только кнопка */
@media (max-width: 900px) { .cta__who { flex: 1 1 0; min-width: 0; } .cta__btns { flex-basis: 100%; } }
.pdf-mode .cta__foot { flex-wrap: nowrap; }
.pdf-mode .cta__who { flex: 1 1 0; min-width: 0; }

/* ============ кнопки: прямоугольные, чёрно-белые; оранжевый — акцент при наведении ============ */
.btn, .btn--line, .btn--ghost, .btn--line-light { border-radius: 0 !important; box-shadow: none !important; transition: background .15s, color .15s, border-color .15s; }
/* основная на светлом: чёрная */
.btn--accent, .btn--accent.js-lead[data-kind="fix"] { background: var(--ink); color: #fff; border: 2px solid var(--ink); }
.btn--accent:hover, .btn--accent.js-lead[data-kind="fix"]:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
/* второстепенная на светлом: прозрачная с чёрной рамкой */
.btn--ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.btn--ghost:hover { background: transparent; border-color: var(--accent); color: var(--ink); }
/* на тёмном: основная белая, второстепенная — белая рамка */
.cta .btn--accent, .cta .btn--accent.js-lead[data-kind="fix"] { background: #fff; color: var(--ink); border-color: #fff; }
.cta .btn--accent:hover, .cta .btn--accent.js-lead[data-kind="fix"]:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--line-light, .btn--line-light.js-lead[data-kind="fix"] { background: transparent; color: #fff; border: 2px solid #fff; }
.btn--line-light:hover, .btn--line-light.js-lead[data-kind="fix"]:hover { background: transparent; border-color: var(--accent); color: var(--accent); }
/* поля — тоже прямоугольные, без тени */
.check { border-radius: 0 !important; box-shadow: none; }
.compare__form input { border-radius: 0; }
.modal input[type=text] { border-radius: 0; }
/* текст в блоке специалиста — на всю ширину чёрного блока */
.cta p, .cta__main p { max-width: none; }
/* значки важности в карточках — одна заливка, без светлого кольца вокруг */
.sev-ico, .sev-ico--critical, .sev-ico--important, .sev-ico--minor { box-shadow: none !important; }
/* главная кнопка «Проверить сайт» в хиро — оранжевая: чёрная сливается с тёмным фоном вокруг поля */
#checkBtn { background: var(--accent); border-color: var(--accent); color: var(--ink); }
#checkBtn:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--ink); }
/* строка специалиста: фото, имя и кнопка — по одной верхней линии */
.cta__foot { align-items: flex-start; }
/* номера в плане исправлений — жирные, как заголовок пункта */
.plan__group li::marker { font-weight: 700; color: var(--ink); }
/* «Что уже в порядке»: галочка и текст вместе, по центру ячейки — соседняя двухстрочная ячейка не «ломает» строку */
.passed li { display: flex; align-items: center; gap: 12px; padding-left: 16px; }
.passed li::before { position: static; transform: none; flex: none; }
/* строка специалиста: фото, текст и кнопка — по центру строки */
.cta__foot { align-items: center; }
/* «желательно» — лампочка вместо курсивной i */
.sev-ico--minor { font-family: inherit; font-style: normal; color: #fff; }
.sev-ico--minor svg { display: block; }
/* отчёт: группы важности — такие же отступы, как на главной (64 / 18) */
.issues > .sev-head { margin: 64px 0 18px; }
#issuesTop > .sev-head:first-child { margin-top: 0; }
.cta { margin: 40px 0 24px; }
#issuesRest > .sev-head:first-child { margin-top: 40px; }
/* у .issues gap 12px — вычитаем, чтобы вышло ровно 64 / 18 */
.issues > .sev-head { margin: 52px 0 6px; }
#issuesTop > .sev-head:first-child { margin-top: 0; }
#issuesRest > .sev-head:first-child { margin-top: 40px; }
/* план исправлений: больше воздуха между его группами и до следующего блока */
.plan__group { margin-top: 24px; }
.plan__group:first-child { margin-top: 0; }
.todo + .block-title { margin-top: 64px; }
/* крупные блоки отчёта — единый шаг 64px, как на главной */
#report > .serp, #report > .block-title, #report > .todo, #report > .compare { margin-top: 64px; }
#report > .block-title { margin-bottom: 18px; }
/* в отчёте число проблем — в квадрате цвета группы вместо маленького квадратика (на главной без изменений) */
.sev-head--count { gap: 12px; }
.sev-head--count::before { display: none; }
.sev-head--count b { display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; font-size: 14px; font-weight: 800; letter-spacing: 0; color: #fff; background: var(--min); }
.sev-head--critical.sev-head--count b { background: var(--ink); color: #fff; }
.sev-head--important.sev-head--count b { background: var(--imp); color: var(--ink); }
/* все квадраты-значки одного размера (32px) и по одной левой линии */
.sev-head--count b { min-width: 32px; height: 32px; font-size: 15px; }
.block-title::before, .block-title--ok::before { margin-left: 0; }
.sev-head--count, .block-title { gap: 14px; }
/* «Критично» на главной — плашка-пример сразу чёрная (не путается с серой «желательно»), при наведении текст оранжевый */
.feat__ex:has(.dot--crit) { background: var(--ink); color: #fff; }
.feat:hover .feat__ex:has(.dot--crit) { background: var(--ink); color: var(--accent); }
/* «Критично» на главной: тёмно-серая плашка с чёрной полосой слева (полоса видна, как у остальных групп) */
.feat__ex:has(.dot--crit) { background: #e2e1dc; color: var(--ink); border-left: 6px solid var(--ink); }
.feat:hover .feat__ex:has(.dot--crit) { background: var(--ink); color: #fff; }
/* план исправлений и чек-лист: больше воздуха внутри */
.todo { padding: 36px 40px; }
.todo__p { margin: 8px 0 28px; }
.plan__group { margin-top: 40px; }
.plan__group:first-child { margin-top: 0; }
.plan__group h4 { margin-bottom: 16px; }
.plan__group ol { gap: 18px; }
.plan__group li span { display: block; margin-top: 4px; }
@media (max-width: 720px) { .todo { padding: 24px 20px; } }
/* без свечения за номерами карточек — сайт плоский */
.feat::before { display: none; }
/* номера карточек убраны: порядок задают группы важности, а цифры налезали на длинные заголовки */
.feat__n { display: none; }
/* табличка под полем — ровно той же ширины, что поле проверки */
.perks { box-sizing: border-box; width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; justify-content: space-evenly; }
/* кнопка в шапке — аккуратнее: одной высоты с RU/EN, тоньше рамка, мельче текст */
.top .btn--line-light { height: 38px; padding: 0 18px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 700; border-width: 1px; border-color: rgba(255, 255, 255, .6); }
.top .btn--line-light:hover { border-color: var(--accent); color: var(--accent); }
/* сравнение с конкурентом — больше воздуха */
.compare { padding: 36px 40px; }
.compare__head h3 { margin-bottom: 10px; }
.compare__form { margin-top: 24px; }
.compare__sum { margin-top: 28px; }
.compare__wrap { margin-top: 14px; }
.compare__table th, .compare__table td { padding: 14px 16px; }
.compare__cta { margin-top: 28px; }
@media (max-width: 720px) { .compare { padding: 24px 20px; } .compare__table th, .compare__table td { padding: 10px 10px; } }
/* единые внутренние отступы всех карточек отчёта */
.report__head, .issue, .todo, .compare, .prev, .psi, .serp__card, .cta__main { padding: 32px 36px; }
@media (max-width: 720px) {
  .report__head, .issue, .todo, .compare, .prev, .psi, .serp__card, .cta__main { padding: 22px 20px; }
}
/* в PDF «Что уже в порядке» — одной колонкой: библиотека переносит пункты по одному, в сетке они рвались и съезжали */
.pdf-mode .passed { display: block; }
.pdf-mode .passed li { margin-bottom: 8px; break-inside: avoid; }
@media print { .passed { display: block; } .passed li { margin-bottom: 8px; break-inside: avoid; } }
/* PDF: обе выдачи подряд с подписями, исходная карточка скрыта */
.serp__pdf { display: none; }
.pdf-mode .serp__pdf { display: block; break-inside: avoid; }
.pdf-mode #serpCard { display: none; }
.serp__pdf-label { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin: 16px 0 8px; }
.serp__pdf:first-of-type .serp__pdf-label { margin-top: 0; }
.serp__pdf-note { margin-top: 14px; font-size: 13px; color: var(--ink-2); }
.pdf-mode .serp__cut { background: none !important; }
/* окно «Спасибо!»: иконка слева, текст её обтекает — как в карточках; иконка — чёрный квадрат с оранжевой галочкой */
.done__icon { float: left; width: 56px; height: 56px; margin: 4px 18px 8px 0; border-radius: 0;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23ffa300' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center / 34px no-repeat; }
#modalDone .js-pdf { clear: both; }
#modalDone::after { content: ""; display: block; clear: both; }
/* обтекание: без отступов сверху/снизу у иконки — иначе целая строка уходит вправо и под иконкой пустота */
.feat__ico, .done__icon { margin-top: 0; margin-bottom: 0; }
/* PDF: большие блоки можно разрывать (иначе целиком переезжают и оставляют пустые страницы) */
.pdf-mode .serp__pdf, .pdf-mode .issue, .pdf-mode .serp, .pdf-mode .todo, .pdf-mode .compare { break-inside: auto; }
/* карточки и окно «Спасибо»: без обтекания — иконка и заголовок в строку (заголовок по центру иконки), текст ниже на всю ширину */
.feat__body { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 18px; align-items: center; }
.feat__ico { float: none; margin: 0; }
.feat__body h3, .grid--3 .feat__body h3 { margin: 0; }
.feat__body p { grid-column: 1 / -1; }
#modalDone { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; row-gap: 16px; align-items: center; }
#modalDone .done__icon { float: none; margin: 0; }
#modalDone h3 { margin: 0; }
#modalDone > :not(.done__icon):not(h3) { grid-column: 1 / -1; margin: 0; }
#modalDone::after { display: none; }
@media (max-width: 720px) { .feat__body, #modalDone { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; } }
.feat__body { align-content: start; }
/* сборка PDF: без плавных переходов — иначе отступы переноса «доезжают» уже после снимка */
.pdf-mode *, .pdf-mode *::before, .pdf-mode *::after { transition: none !important; animation: none !important; }
/* ссылка у оценки — к блоку сравнения */
.rep-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rep-link:hover { color: var(--accent-dark); }
html { scroll-behavior: smooth; }
#compare { scroll-margin-top: 24px; }
/* кнопка-ссылка у оценки — выглядит как остальные */
.report__actions a.btn { display: block; text-decoration: none; }
/* главная: необязательное поле сайта конкурента под основным */
.rival { max-width: 640px; margin: 14px auto 0; }
.rival .linkish { font-size: 14px; font-weight: 600; }
#rivalInput { width: 100%; box-sizing: border-box; border: 0; border-radius: 0; background: #fff; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; padding: 14px 20px; outline: 0; }
#rivalInput::placeholder { color: #aab2c4; font-weight: 500; }
#rivalInput:focus { box-shadow: inset 0 0 0 2px var(--accent); }
/* планшет: четыре кнопки у оценки — сеткой 2×2, телефон — столбиком */
@media (max-width: 900px) { .report__actions { display: grid; grid-template-columns: 1fr 1fr; } .report__actions .btn { white-space: normal; } }
@media (max-width: 640px) { .report__actions { grid-template-columns: 1fr; } }

/* хиро: переключатель «Проверить сайт / Сравнить с конкурентом» над полем */
.mode { display: flex; justify-content: center; max-width: 640px; margin: 0 auto 12px; gap: 0; }
.mode button { flex: 1; border: 0; border-radius: 0; padding: 11px 16px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  background: transparent; color: #bdbdbd; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); transition: background .15s, color .15s; }
.mode button:hover { color: #fff; }
.mode button.is-on { background: #fff; color: var(--ink); box-shadow: none; }
/* режим сравнения: два поля в одной строке, между ними тонкая черта */
.check__rival { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 17px; font-weight: 600; color: var(--ink); padding: 12px 14px; background: transparent; border-left: 1px solid #dcdad3; }
.check__rival::placeholder { color: #aab2c4; font-weight: 500; }
@media (max-width: 640px) {
  .mode button { font-size: 13px; padding: 10px 8px; }
  .check[data-mode="cmp"] { flex-wrap: wrap; }
  .check[data-mode="cmp"] .check__rival { flex-basis: 100%; border-left: 0; border-top: 1px solid #dcdad3; }
}
.check__rival { border-left: 1px solid #b9b7af; padding-left: 20px; }
@media (max-width: 640px) { .check[data-mode="cmp"] .check__rival { border-left: 0; border-top: 1px solid #b9b7af; padding-left: 14px; } }
/* «хорошо / лучше» — мятный с сайта Андрея (маркетолог-россия.рф, #43D991) вместо зелёного */
:root { --ok: #1f975d; --ok-bg: #e3f9ee; --mint: #43d991; }
/* поле «ваш сайт» — тем же размером, что «сайт конкурента» */
.check input { font-size: 16px; }
/* ожидание проверки конкурента */
.cmp-wait { display: flex; align-items: center; gap: 16px; margin-top: 24px; padding: 20px 24px; background: var(--bg); }
.cmp-wait .spinner { width: 38px; height: 38px; flex: none; }
.cmp-wait__t { font-weight: 700; }
.cmp-wait__s { font-size: 14px; color: var(--ink-3); margin-top: 2px; }
/* мятный — настоящий цвет Андрея (#43D991) заливкой, текст чёрный */
.compare__table td.is-win { background: var(--mint); color: var(--ink); }
.prev__delta.is-up { background: var(--mint); color: var(--ink); }
/* иконка в поле — цветом подсказки, ровный глобус */
.check__icon { color: #aab2c4; }
.check__icon svg { display: block; flex: none; }
/* блок специалиста — после всего списка проблем, шаг 64 как у остальных крупных блоков */
#report > .cta { margin: 64px 0 0; }
#issuesRest > .sev-head:first-child { margin-top: 52px; }
/* блок специалиста внутри списка проблем (перед «Желательно»): до и после — шаг 64 */
.issues > .cta { margin: 52px 0 0; }
/* приписка у технических пунктов: «Нет доступа к коду сайта? Это сделает специалист →» */
.issue__help { margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.issue__help .linkish { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.issue__help .linkish::after { content: " →"; }
.issue__help .linkish:hover { color: var(--accent-dark); }

/* закрытая часть без размытия: проблемы видны (заголовок + почему важно), советы — в полном отчёте; приглашение — блоком под списком */
.issues--locked .issue, .issues--locked .sev-head { filter: none !important; user-select: auto; pointer-events: auto; }
.locked__veil { position: static; inset: auto; display: block; padding: 0; background: none !important; margin-top: 24px; }
.locked__box { max-width: none; margin: 0; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 18px 32px; flex-wrap: wrap;
  padding: 32px 36px; background: var(--card); box-shadow: none; border-left: 6px solid var(--accent); }
.locked__box p { margin-bottom: 0; }
.locked__title { font-size: 18px; margin-bottom: 6px !important; }
.locked__box .btn { flex: none; }
@media (max-width: 720px) { .locked__box { padding: 22px 20px; } .locked__box .btn { width: 100%; } }
.inner { margin-top: 24px; }
.scope-box { margin-top: 24px; }
.scope-box[hidden] { display: none; }
/* заголовок блока — белым по чёрной плашке, на всю ширину над текстом и кнопкой */
.scope-box__t { flex-basis: 100%; margin: 0 !important; background: var(--ink); color: #fff !important; font-weight: 800; font-size: 17px; line-height: 1.35; padding: 10px 16px; }
.scope-box__p2 { margin-top: 8px !important; color: var(--ink) !important; font-weight: 600; }
.scope-box .locked__box > div { flex: 1 1 420px; }
.counts-note { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.list-note { margin: -4px 0 18px; font-size: 15px; color: var(--ink-2); max-width: 820px; }
.list-note[hidden] { display: none; }
/* подсказка конкурентов во вкладке сравнения на главной (тёмный фон) */
.hero-rivals { max-width: 640px; margin: 14px auto 0; text-align: left; font-size: 14px; color: #bdbdbd; }
.hero-rivals[hidden] { display: none; }
.hero-rivals__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.hero-rivals__list button { font: inherit; font-size: 14px; font-weight: 600; padding: 7px 12px; background: transparent; color: #fff; border: 1px solid #fff; border-radius: 0; cursor: pointer; }
.hero-rivals__list button:hover, .hero-rivals__list button:focus-visible, .hero-rivals__list button.is-on { border-color: var(--accent); background: var(--accent); color: #080808; }
/* подсказка конкурентов из Google — кнопки-адреса над полем сравнения */
.rivals { margin: 0 0 14px; }
.rivals[hidden] { display: none; }
.rivals__t { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; }
.rivals__list { display: flex; flex-wrap: wrap; gap: 8px; }
.rivals__list button { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 14px; background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 0; cursor: pointer; }
.rivals__list button:hover, .rivals__list button:focus-visible { border-color: var(--accent); background: var(--accent); }
.inner[hidden] { display: none; }

/* чек-лист: квадратные галочки в стиле сайта (рамка 2px; отмечено — чёрный квадрат с оранжевой галочкой) */
.check-list input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border: 2px solid var(--ink); border-radius: 0; background: #fff; cursor: pointer; flex: none; }
.check-list input:checked { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23ffa300' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center / 16px no-repeat; }
.check-list input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* галочка — по центру пункта (по высоте текста) */
.check-list label { align-items: center; }
.check-list input { margin: 0; }
/* под чек-листом посетителя — явный призыв: полный план у специалиста */
.todo__cta { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.todo__cta p { color: var(--ink-2); flex: 1 1 360px; max-width: none; }
.todo__cta p b { color: var(--ink); }
@media (max-width: 720px) { .todo__cta .btn { width: 100%; } }
/* без переносов слов; вместо выравнивания по ширине — по центру (иначе дыры между словами) */
.hero__sub, .what__lead { hyphens: manual; -webkit-hyphens: manual; text-align: center; text-align-last: auto; }
body { hyphens: manual; }

/* строка под цифрами: что проверено и что — у специалиста */
.scope { margin-top: 14px; font-size: 14px; color: var(--ink-3); }

/* поля без свечения: чёрная рамка 2px, при фокусе — оранжевая (как рамочные кнопки) */
.compare__form input { border: 2px solid var(--ink); box-shadow: none; }
.compare__form input:focus, .modal input[type=text]:focus { border-color: var(--accent); box-shadow: none; }
.rivals__list button { border-width: 2px; }
/* подзаголовок хиро — уже заголовка, строки ровные */
.hero__sub, .what__lead { max-width: 960px; }
/* строка-призыв под оценкой — заметная: чёрный полужирный текст и оранжевая полоса слева */
.rep-cta { color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.45; padding-left: 14px; border-left: 4px solid var(--accent); }
/* сообщения об ошибке: вторая строка — пояснение (перенос \n в тексте) */
.check__error, .compare__err { white-space: pre-line; }
/* окно заявки шире — заголовок «Исправлю ошибки за вас» в одну строку */
.modal__box { max-width: 600px; }
/* окно заявки в общем стиле: поля с чёрной рамкой 2px, галочка согласия — как в чек-листе */
.modal input[type=text] { border: 2px solid var(--ink); border-radius: 0; }
.modal .agree { align-items: center; }
.modal .agree input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; border: 2px solid var(--ink); border-radius: 0; background: #fff; cursor: pointer; flex: none; }
.modal .agree input:checked { background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23ffa300' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") center / 14px no-repeat; }
.modal .agree input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal h3 { margin-bottom: 14px; }
/* крестик окна в стиле сайта: квадрат, крест из двух линий 2px, при наведении — оранжевая заливка */
.modal__x { top: 14px; right: 14px; width: 36px; height: 36px; padding: 0; font-size: 0; color: transparent; border-radius: 0; background: transparent; cursor: pointer; transition: background .15s; }
.modal__x::before, .modal__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: var(--ink); }
.modal__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal__x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal__x:hover, .modal__x:focus-visible { background: var(--accent); outline: 0; }
.modal h3 { padding-right: 36px; }
/* телефон: три ячейки «20+ / 0 / 0 ₽» делят ширину поровну и не вылезают за край */
@media (max-width: 640px) { .perks li { flex: 1 1 0; min-width: 0; padding-left: 2px; padding-right: 2px; } }
/* телефон: длинная кнопка в шапке не помещается рядом с логотипом и RU/EN — прячем, помощь предлагается в отчёте */
@media (max-width: 640px) { .top .btn--line-light { display: none; } }
/* телефон, режим сравнения: у обоих полей одинаковый отступ — подсказки на одной вертикали */
@media (max-width: 640px) { .check[data-mode="cmp"] #urlInput, .check[data-mode="cmp"] #rivalInput { padding-left: 14px; padding-right: 14px; } }
/* подвал на телефоне: строки столбиком, с воздухом от краёв и между собой */
@media (max-width: 640px) { .foot__in { flex-direction: column; align-items: flex-start; gap: 10px; padding: 28px 20px; } }
/* телефон: шапка с тем же воздухом от краёв, что подвал */
@media (max-width: 640px) { .top__in { padding-left: 20px; padding-right: 20px; } }
.psi__tips { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line, #e6e6e6); }
.psi__tips h4 { font-size: 15px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; }
.psi__tips ul { margin: 0; padding-left: 20px; }
.psi__tips li { font-size: 14px; color: var(--ink-2); margin: 4px 0; line-height: 1.45; }
.psi__tips li b { color: var(--ink); }

/* «замазанные» ошибки внутренних страниц у посетителя: размытые карточки-заглушки и замок поверх */
.inner { position: relative; }
.teaser { filter: blur(3.5px); opacity: .75; pointer-events: none; user-select: none; }
.teaser .issue { margin-bottom: 12px; }
.teaser__bar { display: block; height: 12px; border-radius: 6px; background: #d9d6cf; margin: 8px 0; }
.teaser .issue__top .teaser__bar { height: 18px; background: #bdb9b1; margin: 0; flex: none; }
.inner .teaser + .locked__box { position: relative; z-index: 1; margin-top: -150px; box-shadow: 0 20px 50px -12px rgba(15, 26, 46, .35); }
.teaser__lock { display: block; font-size: 24px; line-height: 1; margin-bottom: 8px; }
@media (max-width: 720px) { .inner .teaser + .locked__box { margin-top: -110px; } }

/* подпись про бесплатную проверку под формой и окно «больше проверок» */
.check__note { margin: 10px 0 0; font-size: 13px; color: rgba(255, 255, 255, .6); }
.modal__btns { display: grid; gap: 10px; margin-top: 18px; }
.modal__btns .btn { text-align: center; text-decoration: none; }
.nowrap { white-space: nowrap; font-weight: 600; }