/*
 * Свои стили prdomain.ru поверх стилей шаблона RiteFlow.
 * Подключается после style.css. Исходники шаблона не правим —
 * меняем его переменные и дописываем своё здесь.
 */

/*
 * Шрифты. В шаблонных DM Sans, Urbanist и Instrument Serif нет кириллицы,
 * поэтому заменяем их на шрифты из Google Fonts с кириллицей:
 *   текст       — Inter            (вместо DM Sans)
 *   заголовки   — Manrope          (вместо Urbanist)
 *   акцент      — Playfair Display (вместо Instrument Serif)
 * Файлы лежат локально в ../fonts/prdomain/: вариативные woff2, наборы
 * латиницы и кириллицы. Лицензия SIL OFL 1.1 — тексты рядом со шрифтами.
 * С серверов Google ничего не загружается.
 */

/* Inter, normal, cyrillic-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/prdomain/inter-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Inter, normal, cyrillic */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/prdomain/inter-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Inter, normal, latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/prdomain/inter-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter, normal, latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/prdomain/inter-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope, normal, cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/prdomain/manrope-normal-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* Manrope, normal, cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/prdomain/manrope-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Manrope, normal, latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/prdomain/manrope-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope, normal, latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/prdomain/manrope-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Playfair Display, italic, cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/prdomain/playfair-display-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Playfair Display, italic, latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/prdomain/playfair-display-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Playfair Display, italic, latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/prdomain/playfair-display-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Playfair Display, normal, cyrillic */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/prdomain/playfair-display-normal-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Playfair Display, normal, latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/prdomain/playfair-display-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Playfair Display, normal, latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/prdomain/playfair-display-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
 * Фирменная палитра PrDomain (resources/brand/palette.css) и её раскладка
 * на переменные шаблона. Значения --color-* повторяют @theme файла
 * resources/css/app.css: там — для утилит Tailwind, здесь — для style.css.
 * Два оттенка серого (линии и карточки) — промежуточные между graphite
 * и surface: surface на карточках целиком слишком светлый для тёмной темы.
 */
:root {
  --pd-blue-50: #ecf6fe;
  --pd-blue-100: #cfe9fc;
  --pd-blue-300: #6ebcf7;
  --pd-blue-500: #2a9df4;
  --pd-blue-600: #0a6db8;
  --pd-blue-800: #085691;
  --pd-graphite: #1a1a1a;
  --pd-surface: #343434;
  --pd-muted: #8a8a8a;
  --pd-white: #ffffff;

  --color-primary: var(--pd-blue-500);
  --color-secondary: var(--pd-graphite);
  --color-tertiary: var(--pd-blue-300);
  --color-lineColor: #3a3a3a;
  --color-charcoalBlue: var(--pd-surface);
  --color-slateBlue: var(--pd-blue-300);
  --color-royalBlue: var(--pd-blue-600);
  --color-blue: #232323;

  /* Уровни риска — те же значения, что в @theme файла resources/css/app.css:
     там — для утилит Tailwind, здесь — для своих правил ниже. */
  --pr-risk-low: #34d399;
  --pr-risk-medium: #fbbf24;
  --pr-risk-high: #fb923c;
  --pr-risk-critical: #f87171;

  --font-dmSans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-urbanist: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-instrument: 'Playfair Display', Georgia, serif;
}

/*
 * Плавная прокрутка ScrollSmoother отключена (main.js). Обёртка
 * #smooth-content осталась в вёрстке, но держать её отдельным слоем
 * для трансформаций больше незачем — это только лишняя нагрузка.
 */
#smooth-content {
  will-change: auto;
}

/*
 * Таблица компонента <x-table>: отступы ячеек и разделители строк —
 * единые для всех таблиц сайта (штрафы, реестр проверок, отчёт).
 */
.pr-table th,
.pr-table td {
  padding: 1rem 1.25rem;
  vertical-align: top;
}
/* Цвет по умолчанию: без него ячейки наследуют тёмный текст шаблона
   и сливаются с фоном карточки. :where() обнуляет специфичность, чтобы
   утилиты вроде text-risk-high в самой ячейке перебивали это правило. */
:where(.pr-table td) {
  color: var(--color-offWhite);
}
.pr-table th {
  font-weight: 500;
}
.pr-table tbody tr {
  border-top: 1px solid color-mix(in srgb, var(--color-lineColor) 50%, transparent);
}
@media (width >= 768px) {
  .pr-table th,
  .pr-table td {
    padding-inline: 2rem;
  }
}

/*
 * Брендирование: цвета, которые шаблон прописал значениями, а не через
 * переменные. Перекрываем точечно, исходники шаблона не трогаем.
 */

/* Основная кнопка: по палитре на тёмном фоне — синяя с тёмным текстом
   (белый текст на pd-blue-500 не проходит по контрасту). */
.button-primary {
  background: linear-gradient(to bottom, var(--pd-blue-300) 0%, var(--pd-blue-500) 51%, var(--pd-blue-300) 100%);
  background-size: auto 200%;
  color: var(--pd-graphite);
}
.button-primary:disabled,
.button-primary[aria-disabled='true'] {
  color: var(--pd-graphite);
}

/* Заголовок с градиентом и логотип-текст в прелоадере. */
.gradient-text {
  background: linear-gradient(180deg, #f8f8f8 62.71%, var(--pd-blue-300) 90.4%);
  -webkit-background-clip: text;
  background-clip: text;
}
.loader-title div {
  background: linear-gradient(180deg, #f8f8f8 10.71%, var(--pd-blue-300) 90.4%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Рамки и градиенты карточек. */
.border-\[\#7D76FF\]\/20 {
  border-color: color-mix(in oklab, var(--pd-blue-300) 20%, transparent);
}
.from-\[\#27295A\] {
  --tw-gradient-from: #2c2c2c;
}
.to-\[\#191A4C\] {
  --tw-gradient-to: #202020;
}
.from-slateBlue\/20 {
  --tw-gradient-from: color-mix(in srgb, var(--pd-blue-300) 12%, transparent);
}
.to-royalBlue\/20 {
  --tw-gradient-to: color-mix(in srgb, var(--pd-blue-600) 12%, transparent);
}
.to-primary\/20 {
  --tw-gradient-to: color-mix(in srgb, var(--pd-blue-500) 20%, transparent);
}
.from-tertiary\/20 {
  --tw-gradient-from: color-mix(in srgb, var(--pd-blue-300) 20%, transparent);
}
.border-tertiary\/20 {
  border-color: color-mix(in srgb, var(--pd-blue-300) 20%, transparent);
}
.border-lineColor\/50 {
  border-color: color-mix(in srgb, var(--color-lineColor) 50%, transparent);
}
.border-lineColor\/70 {
  border-color: color-mix(in srgb, var(--color-lineColor) 70%, transparent);
}
.from-secondary\/0 {
  --tw-gradient-from: color-mix(in srgb, var(--pd-graphite) 0%, transparent);
}
.to-secondary\/0 {
  --tw-gradient-to: color-mix(in srgb, var(--pd-graphite) 0%, transparent);
}
.to-secondary\/50 {
  --tw-gradient-to: color-mix(in srgb, var(--pd-graphite) 50%, transparent);
}
.gradient-border,
.demoGradient-text {
  background: linear-gradient(90deg, #262626 15%, var(--pd-blue-500) 50%, #262626 85%);
}
.verticle-gradient-bg {
  background: linear-gradient(0deg, #262626 15%, var(--pd-blue-500) 50%, #262626 85%);
}
.glowing-border::before {
  background: linear-gradient(0deg, var(--pd-blue-300), var(--pd-blue-500));
}
.border-moving::before {
  background: linear-gradient(var(--gradient-angle), var(--pd-blue-300), transparent);
}
.testimonial-overlay {
  background-image: linear-gradient(90deg, var(--pd-graphite), transparent 15% 85%, var(--pd-graphite)),
    linear-gradient(var(--pd-graphite), transparent 15% 85%, var(--pd-graphite));
}
.demo-slider-overlay {
  background: linear-gradient(0deg, var(--pd-graphite), transparent);
}
.home-banner-dashboard {
  box-shadow: 0 -20px 100px 0 color-mix(in srgb, var(--pd-blue-500) 40%, transparent);
}
.floating-cubes .cube {
  background: linear-gradient(45deg, var(--pd-blue-300), var(--pd-blue-600));
}

/* Шапка: фон при прокрутке и выпадающее мобильное меню. */
.header-area.sticky-header {
  background-color: color-mix(in srgb, var(--pd-graphite) 80%, transparent);
}
@media (max-width: 1024px) {
  .main-menu {
    background-color: var(--color-charcoalBlue);
  }
}

/* Полоса прокрутки. */
body::-webkit-scrollbar-track {
  background-color: color-mix(in srgb, var(--pd-blue-300) 30%, transparent);
}
body::-webkit-scrollbar-thumb {
  background: var(--pd-blue-500);
}

/* Свечение первого экрана главной. */
.pr-hero-glow {
  background: radial-gradient(
    ellipse 38% 48% at 50% 45%,
    color-mix(in srgb, var(--pd-blue-500) 42%, transparent) 0%,
    color-mix(in srgb, var(--pd-blue-600) 16%, transparent) 50%,
    transparent 100%
  );
}

/* Растровые фоны блока рассылки нарисованы в фиолетовом. Вместо
   перерисовки сдвигаем оттенок к pd-blue-500: фиолетовый шаблона —
   около 245°, наш синий — около 206°. */
img[src*='newsletter-'],
video[src*='newsletter'],
video:has(source[src*='newsletter']) {
  filter: hue-rotate(-40deg);
}

/* Выпадающий список <x-select>: пункты открытого списка рисует браузер,
   без фона они белые на белом в тёмной теме. */
.pr-select option {
  background-color: var(--color-charcoalBlue);
  color: var(--color-offWhite);
}

/* Поле с ошибкой после отправки формы без перезагрузки (prdomain.js). */
input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] {
  border-color: var(--pr-risk-critical) !important;
}

/*
 * Типографика длинных текстов: правовые документы и статьи (класс .pr-prose).
 * Шаблон сбрасывает отступы и списки, здесь они возвращаются.
 */
.pr-prose {
  color: color-mix(in srgb, var(--color-offWhite) 80%, transparent);
  line-height: 1.7;
}
.pr-prose > * + *,
.pr-prose section > * + * {
  margin-top: 1rem;
}
.pr-prose section {
  scroll-margin-top: 6rem;
}
.pr-prose section + section {
  margin-top: 2.5rem;
}
.pr-prose h2 {
  color: var(--color-offWhite);
  font-family: var(--font-urbanist);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  scroll-margin-top: 6rem;
}
.pr-prose h3 {
  color: var(--color-offWhite);
  font-weight: 600;
  font-size: 1.125rem;
  margin-top: 1.75rem;
}
.pr-prose ul,
.pr-prose ol {
  padding-left: 1.4rem;
}
.pr-prose ul {
  list-style: disc;
}
.pr-prose ol {
  list-style: decimal;
}
.pr-prose li + li {
  margin-top: 0.4rem;
}
.pr-prose li::marker {
  color: var(--pd-blue-300);
}
.pr-prose a {
  color: var(--color-tertiary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pr-prose a:hover {
  color: var(--color-offWhite);
}
.pr-prose strong {
  color: var(--color-offWhite);
  font-weight: 600;
}
.pr-prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.pr-prose th,
.pr-prose td {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--color-lineColor);
  text-align: left;
  vertical-align: top;
}
.pr-prose th {
  color: var(--color-offWhite);
  background: var(--color-blue);
  font-weight: 500;
}
.pr-prose blockquote {
  border-left: 3px solid var(--color-primary);
  padding-left: 1rem;
  color: var(--color-offWhite);
}
@media (width < 1024px) {
  .pr-toc:not([open]) ol {
    display: none;
  }
}

/* Отчёт: разделы не прячутся под закреплённой шапкой и навигацией при переходе по якорю. */
.pr-report-section {
  scroll-margin-top: 140px;
}
.pr-scrollbar-none {
  scrollbar-width: none;
}
.pr-scrollbar-none::-webkit-scrollbar {
  display: none;
}
@media print {
  .pr-no-print {
    display: none !important;
  }
}

/* Просмотрщик скриншотов (prdomain.js): открывается по ссылкам [data-lightbox]. */
.pr-lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-offWhite);
}
/* Значением, не переменной: ::backdrop не наследует переменные :root в части браузеров. */
.pr-lightbox::backdrop {
  background: rgba(26, 26, 26, 0.94);
}
.pr-lightbox-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 56px 16px 24px;
}
.pr-lightbox img {
  max-width: min(1200px, 100%);
  max-height: calc(100vh - 140px);
  object-fit: contain;
  border-radius: 12px;
  border: 1px solid var(--color-lineColor);
}
.pr-lightbox-caption {
  font-size: 14px;
  color: color-mix(in srgb, var(--color-offWhite) 70%, transparent);
  text-align: center;
}
.pr-lightbox button {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--color-lineColor);
  background: var(--color-charcoalBlue);
  color: var(--color-offWhite);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.pr-lightbox button:hover {
  border-color: var(--color-primary);
}
.pr-lightbox [data-close] {
  top: 12px;
  right: 12px;
}
.pr-lightbox [data-prev] {
  left: 12px;
  top: 50%;
}
.pr-lightbox [data-next] {
  right: 12px;
  top: 50%;
}

/* Шаги проверки на /scan/{id}: состояние задаёт data-status у контейнера. */
[data-status='queued'] [data-step='queued'],
[data-status='running'] [data-step='running'] {
  border-color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}
[data-status='queued'] [data-step='queued'] .pr-scan-dot,
[data-status='running'] [data-step='running'] .pr-scan-dot {
  border-color: var(--color-primary);
  color: var(--color-primary);
  animation: pr-pulse 1.4s ease-in-out infinite;
}
[data-status='running'] [data-step='queued'] .pr-scan-dot {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--pd-graphite);
}
[data-status='queued'] [data-step='running'],
[data-status='queued'] [data-step='analysis'],
[data-status='running'] [data-step='analysis'] {
  opacity: 0.55;
}
@keyframes pr-pulse {
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 20%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pr-scan-dot {
    animation: none !important;
  }
}

/* Статьи: выноска, таблица с прокруткой на узком экране, код, рисунки. */
.pr-prose .pr-callout {
  padding: 1rem 1.25rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--pr-risk-high) 40%, transparent);
  background: color-mix(in srgb, var(--pr-risk-high) 10%, transparent);
}
.pr-prose .pr-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
}
.pr-prose .pr-table-wrap table {
  min-width: 520px;
}
.pr-prose code {
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  background: var(--color-charcoalBlue);
  color: var(--color-offWhite);
  font-size: 0.9em;
}
.pr-prose figure img {
  border-radius: 14px;
  border: 1px solid var(--color-lineColor);
}
.pr-prose figcaption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--color-offWhite) 60%, transparent);
}

/* Конструктор баннера (/script): выбор вариантами, переключатели, ползунки. */
.pr-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--color-lineColor);
  font-size: 13px;
  text-align: center;
  color: color-mix(in srgb, var(--color-offWhite) 75%, transparent);
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}
.pr-choice:hover {
  color: var(--color-offWhite);
}
.pr-choice:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-offWhite);
}
.pr-choice:has(input:focus-visible) {
  outline: 2px solid var(--color-tertiary);
  outline-offset: 2px;
}
.pr-toggle {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-lineColor);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-offWhite) 70%, transparent);
  cursor: pointer;
}
.pr-toggle[aria-pressed='true'] {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-offWhite);
}
.pr-range {
  accent-color: var(--color-primary);
  width: 100%;
}
.pr-color::-webkit-color-swatch-wrapper {
  padding: 3px;
}
.pr-color::-webkit-color-swatch {
  border: 0;
  border-radius: 6px;
}
details > summary::-webkit-details-marker {
  display: none;
}

/* Конструктор документа: шаги анкеты и «лист» предпросмотра. */
.pr-step > span:first-child {
  background: var(--color-lineColor);
  transition: background-color 0.3s;
}
.pr-step {
  color: color-mix(in srgb, var(--color-offWhite) 50%, transparent);
  cursor: pointer;
}
.pr-step.is-done > span:first-child {
  background: color-mix(in srgb, var(--color-primary) 55%, transparent);
}
.pr-step[aria-current='step'] > span:first-child {
  background: var(--color-primary);
}
.pr-step[aria-current='step'] {
  color: var(--color-offWhite);
}
.pr-paper {
  background: #ffffff;
  color: #1f2328;
  border-radius: 14px;
  padding: 40px 36px;
  font-family: 'Times New Roman', Georgia, serif;
  font-size: 15px;
  line-height: 1.6;
  max-height: calc(100vh - 160px);
  overflow: auto;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.6);
}
/* Шаблон красит абзацы и списки в светлый цвет тёмной темы — на листе он не читается. */
.pr-paper :where(h2, p, li, ol, ul, span, strong) {
  color: #1f2328;
}
.pr-paper h2 {
  text-align: center;
  font-weight: 700;
  font-size: 17px;
  text-transform: uppercase;
  margin-bottom: 20px;
  font-family: inherit;
}
.pr-paper p + p,
.pr-paper p + ol,
.pr-paper ol + p {
  margin-top: 10px;
}
.pr-paper ol {
  list-style: decimal;
  padding-left: 1.4rem;
}
.pr-paper .pr-empty {
  background: #fff3c4;
  color: #8a5a00;
  border-radius: 3px;
  padding: 0 3px;
}
@media (width < 640px) {
  .pr-paper {
    padding: 24px 18px;
    font-size: 14px;
    max-height: none;
  }
}