/* Readability layer (release 2026-10-18). Loaded after zeadmin-layout.css on every page.
   Typography scale, line length, text contrast, catalog grid, service price chips and case structure. */
:root {
  --zv-muted: #46566c;          /* body copy on light surfaces: 7.3:1 on white (was #5d6b82, 5.3:1) */
  --za-muted: #4a5a70;
  --zr-ink: #13233a;
  --zr-text: #2c3c52;           /* long-form text: 10.6:1 on white */
  --zr-label: #4b5d75;          /* small labels: 6.6:1 on white */
  --zr-accent: #1747b8;
  --zr-line: #d7e0eb;
  --zr-measure: 70ch;
  --zl-body-size: 17px;
  --zl-card-title: 21px;
}
@media (max-width: 640px) {
  :root { --zl-body-size: 16.5px; --zl-card-title: 19px; }
}

/* Base text: comfortable size, line height and measure. */
html body.zv-enabled main .za-card :is(p, li),
html body main .zr-editorial .za-card :is(p, li) { line-height: 1.62; }
html body.zv-enabled .za-section__lead {
  font-size: 19px; line-height: 1.6; max-width: 62ch; color: var(--zv-muted);
}
html body main .za-section p:not([class]),
html body main .zc-faq p,
html body main .zc-geo-note p { max-width: var(--zr-measure); }
html body main .zc-faq p { color: var(--zr-text); line-height: 1.7; }
html body main .zc-faq summary { line-height: 1.45; }
html body main .zr-group-title { line-height: 1.25; margin: 48px 0 20px; }
html body main .zr-editorial .zr-group-title:first-of-type { margin-top: 24px; }
html body main td { color: var(--zr-text); }
html body main .za-section__lead { max-width: 65ch; }
html body main :is(.zp-footnote, .zp-updated, .zp-calc__note) { max-width: var(--zr-measure); }
html body main .zp-calc__note { font-size: 15px; color: var(--zr-text); }
/* Home case strip labels were 9px grey (3.7:1); contacts field names 13px grey (3.8:1). */
html body main .zp5-case__meta span { font-size: 12px; letter-spacing: .04em; color: var(--zr-label); }
html body main .zc-data-row dt { color: var(--zr-label); }
/* Home request form sits on navy: brand blue links were 3.3:1. */
html body main .zr-request a.zn-inline-link { color: #9cc2ff; }
html body main .zp5-cases__intro { font-size: 16px; color: var(--zr-text); }
html body main .zp5-case__body > p { color: var(--zr-text); }
html body main .zp5-case__body li { font-size: 15.5px; line-height: 1.55; color: var(--zr-text); }

/* Tiny labels were 11–13px; keep them small but legible. */
html body main .zv-summary-item small { font-size: 14px; color: var(--zr-label); }
html body main .zc-hero-price span { font-size: 12.5px; letter-spacing: .04em; color: var(--zr-label); }
html body main .zc-hero-price p { font-size: 15.5px; color: var(--zr-text); }
html body main .zc-delivery-badge { font-size: 12.5px; }
html body main .zn-inline-link { text-underline-offset: .18em; }

/* Articles (blog, service long reads): prose at 18px and ~70 characters per line. */
html body.zv-enabled main .zc-article :is(p, li) {
  font-size: 18px; line-height: 1.7; color: var(--zr-text); max-width: var(--zr-measure);
}
html body.zv-enabled main .zc-article :is(h2) { margin-top: 1.6em; }
html body.zv-enabled main .zc-article section:first-child > h2 { margin-top: 0; }
html body.zv-enabled main .zc-article :is(td, th) { font-size: 16px; max-width: none; }
html body.zv-enabled main .zc-article .zc-faq p { font-size: 17px; }

/* Catalog grids: rows follow their own content instead of the tallest card of the whole grid. */
html body main :is(.zr-editorial .za-grid-3, .zc-catalog-grid, .zc-related-grid) { grid-auto-rows: auto; }
html body main a.za-card.zc-link-card,
html body main .zr-editorial a.za-card {
  border: 1px solid var(--zr-line);
  box-shadow: 0 1px 2px rgba(16, 38, 72, .05), 0 8px 24px rgba(16, 38, 72, .06);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
html body main a.za-card.zc-link-card:hover,
html body main a.za-card.zc-link-card:focus-visible {
  border-color: #9db7e6;
  box-shadow: 0 2px 4px rgba(16, 38, 72, .06), 0 14px 32px rgba(16, 38, 72, .10);
  transform: translateY(-2px);
}
html body main a.za-card.zc-link-card h3 { color: var(--zr-ink); }
html body main a.za-card.zc-link-card > p { color: var(--zv-muted); margin-bottom: 0; }
html body main a.za-card.zc-link-card > span:last-child { color: var(--zr-accent); font-weight: 750; }

/* Service price chip: price stays on the card's bottom line, above the link. */
html body main a.za-card .zr-card-price {
  display: block;
  margin-top: auto; padding: 18px 0 0; border-top: 0;
  font-size: 18px; line-height: 1.3; font-weight: 750; color: var(--zr-ink);
  font-variant-numeric: tabular-nums;
}
html body main a.za-card .zr-card-price small {
  display: block; margin: 0 0 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--zr-label);
}
html body main a.za-card .zr-card-price + span:last-child { margin-top: 0; padding-top: 10px; }

/* ---------- Cases ---------- */
.case-story .cs-kicker { font-size: 13.5px; color: #1f4ea6; }
.case-story .cs-lead { color: #34465e; max-width: 62ch; }
.case-story .cs-back { font-size: 15px; color: var(--zr-label); }
.case-story .cs-chapter p,
.case-story .cs-result > p:not(.cs-kicker),
.case-story .cs-fit > p {
  font-size: 18px; line-height: 1.7; color: var(--zr-text); max-width: 68ch;
}
.case-story .cs-chapter p + p { margin-top: 1em; }
html body main .case-story h2 { font-size: 26px; line-height: 1.25; }
.case-story .cs-chapter { margin: 0 0 44px; }
.case-story .cs-checks ul { color: var(--zr-text); }
.case-story .cs-services { font-size: 15px; }
html body main .case-story .cs-services-label { font-size: 14px; color: var(--zr-label); }

/* Step labels: Задача → Решение → Результат (decorative pseudo-content, page text is unchanged). */
.case-story .cs-step-task > h2::before,
.case-story .cs-step-solution > h2::before {
  display: block; width: max-content; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px;
  font-size: 12.5px; line-height: 1.5; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
}
.case-story .cs-step-task > h2::before { content: "Задача"; color: #8a3b00; background: #fff1e6; }
.case-story .cs-step-solution > h2::before { content: "Решение"; color: #1747b8; background: #eaf1ff; }
.case-story .cs-step-solution ~ .cs-step-solution > h2::before { content: none; }
.case-story .cs-result {
  border-left: 0; border-radius: 16px; background: #eefaf4; border: 1px solid #c9ecd9; padding: 28px 32px;
}
.case-story .cs-result .cs-kicker { color: #0b6b43; text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }

/* Summary at the top of the story. */
.case-story .cs-summary {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  margin: 0 0 48px; border: 1px solid var(--zr-line); border-radius: 16px; overflow: hidden; background: #fff;
}
.case-story .cs-summary__item { padding: 20px 22px; min-width: 0; }
.case-story .cs-summary__item + .cs-summary__item { border-left: 1px solid var(--zr-line); }
.case-story .cs-summary__item--task { background: #fffaf5; }
.case-story .cs-summary__item--solution { background: #f6f9ff; }
.case-story .cs-summary__item--result { background: #f3fbf7; }
.case-story .cs-summary__label {
  margin: 0 0 8px; font-size: 12.5px; line-height: 1.4; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
}
.case-story .cs-summary__item--task .cs-summary__label { color: #8a3b00; }
.case-story .cs-summary__item--solution .cs-summary__label { color: #1747b8; }
.case-story .cs-summary__item--result .cs-summary__label { color: #0b6b43; }
.case-story .cs-summary p:not(.cs-summary__label),
.case-story .cs-summary li { margin: 0; font-size: 16px; line-height: 1.55; color: var(--zr-ink); font-weight: 600; }
.case-story .cs-summary ul { margin: 0; padding-left: 18px; }
.case-story .cs-summary li + li { margin-top: 6px; }

/* Facts plaque. */
.case-story .cs-facts {
  position: sticky; top: 104px; padding: 20px 20px 18px; border: 1px solid var(--zr-line); border-radius: 16px;
  background: #f7f9fc; font-size: 15px; color: var(--zr-text);
}
.case-story .cs-facts dt { font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--zr-label); }
.case-story .cs-facts dd { color: var(--zr-ink); margin-bottom: 16px; }
.case-story .cs-facts dl { margin-bottom: 18px; }

/* Cases index: projects as cards. */
.case-story .cs-projects { gap: 24px; margin-top: 28px; }
.case-story .cs-project {
  padding: 26px 28px 24px; border: 1px solid var(--zr-line); border-radius: 18px; background: #fff;
  box-shadow: 0 1px 2px rgba(16, 38, 72, .05), 0 8px 24px rgba(16, 38, 72, .05);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.case-story .cs-project:hover { border-color: #9db7e6; box-shadow: 0 2px 4px rgba(16, 38, 72, .06), 0 14px 32px rgba(16, 38, 72, .09); }
html body main .case-story .cs-project h3 { font-size: 22px; margin-bottom: 10px; }
.case-story .cs-project-meta { margin: 0 0 12px; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--zr-label); }
.case-story .cs-project > p:not(.cs-kicker):not(.cs-project-meta) { font-size: 17px; line-height: 1.65; color: var(--zr-text); }
.case-story .cs-index-nav a.za-btn { padding: 10px 18px; min-height: 44px; }
.case-story .cs-collection > h2 { border-bottom-width: 1px; border-color: var(--zr-line); }
.case-story a:not([target="_blank"]) > span[aria-hidden="true"] { display: none; }
.case-story .cs-text-link:not([target="_blank"])::after { content: " →"; }
.case-story .cs-project > .cs-text-link {
  padding: 8px 14px; border-radius: 10px; background: #eef3fc; color: var(--zr-accent);
}
.case-story .cs-project > .cs-text-link:hover { background: #e1eafb; text-decoration: none; }

@media (max-width: 900px) {
  .case-story .cs-summary { grid-template-columns: minmax(0, 1fr); }
  .case-story .cs-summary__item + .cs-summary__item { border-left: 0; border-top: 1px solid var(--zr-line); }
  .case-story .cs-facts { position: static; }
}
@media (max-width: 640px) {
  .case-story .cs-chapter p,
  .case-story .cs-result > p:not(.cs-kicker),
  .case-story .cs-fit > p,
  html body.zv-enabled main .zc-article :is(p, li) { font-size: 17px; line-height: 1.68; }
  html body main .case-story h2 { font-size: 23px; }
  .case-story .cs-projects { gap: 16px; }
  .case-story .cs-project { padding: 22px 20px 20px; }
  .case-story .cs-result { padding: 22px 20px; }
  html body.zv-enabled .za-section__lead { font-size: 17.5px; }
  html body main a.za-card .zr-card-price { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html body main a.za-card.zc-link-card,
  .case-story .cs-project { transition: none; }
  html body main a.za-card.zc-link-card:hover,
  html body main a.za-card.zc-link-card:focus-visible { transform: none; }
}