/* Стратегия Риска — site styles */

@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/Onest-400-700-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/Onest-400-700-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; }

:root {
  --paper: #ffffff;
  --paper-2: #f5f5f6;
  --paper-3: #e7e7e9;
  --ink: #111214;
  --ink-2: #3d3f44;
  --muted: #6b6e75;
  --line: #e3e4e7;
  --brand: #e85f2e;          /* logo colour: marks, rules, large type */
  --brand-ink: #c4461a;      /* brand colour dark enough for text and buttons */
  /* Accent sections: light grey with dark text (no dark backgrounds anywhere) */
  --night: #f5f5f6;
  --night-2: #ececee;
  --night-line: #dcdde0;
  --night-text: #2a2c31;
  --night-muted: #5f6269;
  --head: var(--ink);

  --display: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text: var(--display);

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.62 var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
::selection { background: var(--brand); color: #fff; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; margin: 0 0 .6em; color: var(--ink); }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); }
h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem); }
h3 { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: calc(800px + 2 * var(--gutter)); }
.section { padding: clamp(56px, 8vw, 112px) 0; }
.section + .section { padding-top: 0; }
.section--tint { background: var(--paper-2); }
.section--tint + .section, .section + .section--tint { padding-top: clamp(56px, 8vw, 112px); }
.section--night { background: var(--night); color: var(--night-text); }
.section--night h2, .section--night h3 { color: var(--head); }
.section--night + .section, .section + .section--night { padding-top: clamp(56px, 8vw, 112px); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 8px 12px; }

/* Eyebrow: a short brand rule followed by a small caps label */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 600 .78rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--brand); }
.section--night .eyebrow { color: var(--night-muted); }
.lead { font-size: clamp(1.08rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--ink-2); }
.section--night .lead { color: var(--night-text); }
.muted { color: var(--muted); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 24px; border: 1.5px solid var(--ink); border-radius: 4px; background: var(--ink); color: var(--paper); font: 600 .97rem/1.2 var(--text); text-decoration: none; cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.btn:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.btn--brand { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.btn--brand:hover { background: var(--ink); border-color: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn .arr { transition: transform .18s; }
.btn:hover .arr { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.textlink { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; height: var(--header-h); }
.logo { flex: none; display: block; }
.logo img { width: 168px; height: auto; }
.nav { margin-left: auto; }
.nav > ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav li { position: relative; }
.nav > ul > li > a, .nav > ul > li > button { white-space: nowrap; display: flex; align-items: center; gap: 6px; height: var(--header-h); padding: 0 12px; background: none; border: 0; font: 500 .94rem/1 var(--text); color: var(--ink); text-decoration: none; cursor: pointer; }
.nav > ul > li > button::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .6; }
.nav > ul > li > a[aria-current="page"], .nav > ul > li.is-current > button { box-shadow: inset 0 -2px 0 var(--brand); }
.nav > ul > li:hover > a, .nav > ul > li:hover > button { color: var(--brand-ink); }
.nav .sub { position: absolute; top: calc(100% - 8px); left: -8px; min-width: 290px; list-style: none; margin: 0; padding: 10px; background: var(--paper); border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(23, 25, 30, .25); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s, transform .16s, visibility 0s .16s; }
.nav li:hover > .sub, .nav li:focus-within > .sub, .nav li.open > .sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav .sub a { display: block; padding: 9px 12px; color: var(--ink); text-decoration: none; font-size: .94rem; line-height: 1.35; }
.nav .sub a:hover { background: var(--paper-2); color: var(--brand-ink); }
.nav .sub a[aria-current="page"] { color: var(--brand-ink); font-weight: 600; }
.nav .sub .ext::after { content: ' ↗'; color: var(--muted); }
.header-link { flex: none; font-weight: 600; font-size: .9rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.header-link:hover { color: var(--brand-ink); }
.header-cta { flex: none; min-height: 42px; padding: 0 18px; font-size: .9rem; }
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; border-radius: 2px; cursor: pointer; position: relative; }
.burger span, .burger span::before, .burger span::after { position: absolute; left: 11px; width: 20px; height: 1.5px; background: var(--ink); content: ''; transition: transform .2s, top .2s; }
.burger span { top: 21px; }
.burger span::before { left: 0; top: -6px; }
.burger span::after { left: 0; top: 6px; }
.nav-open .burger span { background: transparent; }
.nav-open .burger span::before { top: 0; transform: rotate(45deg); }
.nav-open .burger span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1100px) {
  .nav > ul > li > a, .nav > ul > li > button { padding: 0 8px; font-size: .9rem; }
  .header-cta, .header-link { display: none; }
}
@media (max-width: 920px) {
  :root { --header-h: 64px; }
  .logo img { width: 140px; }
  .burger { display: block; }
  .nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--paper); overflow-y: auto; padding: 8px var(--gutter) 40px; display: none; }
  .nav-open .nav { display: block; }
  .nav-open { overflow: hidden; }
  /* backdrop-filter makes the header the containing block of the fixed menu and clips it */
  .nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
  .nav > ul { flex-direction: column; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid var(--line); }
  .nav > ul > li > a, .nav > ul > li > button { height: 56px; width: 100%; padding: 0; font-size: 1.05rem; justify-content: space-between; }
  .nav .sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 12px; min-width: 0; display: none; background: transparent; }
  .nav li.open > .sub { display: block; }
  .nav .sub a { padding: 10px 0 10px 14px; border-left: 2px solid var(--line); }
  .nav > ul > li.open > button::after { transform: translateY(2px) rotate(-135deg); }
}
.nav .mobile-cta { display: none; }
@media (max-width: 920px) {
  .nav .mobile-cta { display: flex; margin-top: 24px; width: 100%; justify-content: center; }
}

/* Breadcrumbs */
.crumbs { font-size: .86rem; color: var(--muted); margin-bottom: 28px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand-ink); }
.crumbs span[aria-hidden] { margin: 0 8px; color: var(--line); }

/* Inline SVG art follows the palette tokens (overrides the presentation attributes) */
svg [stroke="#e85f2e"] { stroke: var(--brand); }
svg [fill="#e85f2e"] { fill: var(--brand); }
svg [stroke="#d6cdbd"] { stroke: var(--line); }
svg [stroke="#17191e"] { stroke: var(--ink); }
svg [fill="#17191e"] { fill: var(--ink); }
svg [fill="#3a3d45"] { fill: var(--ink-2); }
svg [fill="#6a665f"] { fill: var(--muted); }

/* Hero (home) */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 104px); border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero h1 { font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.3rem); margin-bottom: 28px; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero .lead { max-width: 36em; }
.hero__art { position: relative; aspect-ratio: 1 / 1; max-width: 520px; width: 100%; justify-self: end; }
.hero__art svg { width: 100%; height: 100%; overflow: visible; }
.registry { display: inline-flex; align-items: center; gap: 12px; margin-top: 36px; padding: 10px 16px 10px 10px; border: 1px solid var(--line); background: rgba(255,255,255,.4); color: var(--ink); text-decoration: none; font-size: .9rem; line-height: 1.3; }
.registry img { width: 34px; height: 34px; background: var(--ink); padding: 5px; }
.registry strong { display: block; font-weight: 600; }
.registry:hover { border-color: var(--ink); color: var(--ink); }
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { max-width: 340px; justify-self: start; order: -1; margin-bottom: -8px; aspect-ratio: 16 / 10; }
}

/* Page hero (inner pages) */
.page-hero { padding: clamp(36px, 5vw, 72px) 0 clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
.page-hero h1 { margin-bottom: 20px; max-width: 18em; }
.page-hero .lead { max-width: 40em; margin-bottom: 0; }
.page-hero .product-tag { font: 600 .82rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 18px; display: block; }
.page-hero--product { background: var(--night); color: var(--night-text); border-bottom: 0; }
.page-hero--product h1 { color: var(--head); }
.page-hero--product .lead { color: var(--night-text); }
.page-hero--product .crumbs, .page-hero--product .crumbs a { color: var(--night-muted); }
.page-hero--product .product-tag { color: var(--brand); }
.page-hero--product .registry { color: var(--night-text); border-color: var(--night-line); background: transparent; }
.page-hero--product .registry:hover { border-color: var(--ink); }
@media (max-width: 760px) { .page-hero__grid { grid-template-columns: 1fr; } }

/* Product row on home: big numbered rows instead of a card grid */
.products { border-top: 1px solid var(--line); }
.product-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(20px, 4vw, 56px); padding: clamp(32px, 5vw, 64px) 0; border-bottom: 1px solid var(--line); align-items: center; }
.product-row__num { font: 400 clamp(2.4rem, 2rem + 2vw, 3.8rem)/1 var(--display); color: var(--ink); align-self: start; }
.product-row__kind { font: 600 .8rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; display: block; }
.product-row h3 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin-bottom: 16px; }
.product-row h3 a { color: inherit; text-decoration: none; }
.product-row h3 a:hover { color: var(--brand-ink); }
.product-row p { color: var(--ink-2); }
.product-row__shot { border: 1px solid var(--line); background: #fff; }
@media (max-width: 860px) {
  .product-row { grid-template-columns: 1fr; }
  .product-row__num { font-size: 2.2rem; }
}

/* Generic grids */
.grid { display: grid; gap: clamp(20px, 3vw, 36px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split__sticky { position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 860px) { .split, .split--even { grid-template-columns: 1fr; } .split__sticky { position: static; } }

/* Feature blocks: hairline top rule, number, title, text */
.feature { border-top: 1px solid var(--ink); padding-top: 22px; }
.feature__num { font: 500 .85rem/1 var(--display); color: var(--brand-ink); display: block; margin-bottom: 18px; }
.feature h3 { margin-bottom: 10px; }
.feature p { color: var(--ink-2); margin: 0; }
.section--night .feature { border-top-color: var(--brand); }
.section--night .feature p { color: var(--night-muted); }
.section--night .feature__num { color: var(--brand); }

/* Numbered list (benefits) */
.numlist { list-style: none; margin: 0; padding: 0; counter-reset: n; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px); }
.numlist li { counter-increment: n; position: relative; padding: 20px 0 20px 56px; border-top: 1px solid var(--line); color: var(--ink-2); }
.numlist li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 22px; font: 500 .85rem/1 var(--display); color: var(--brand-ink); }
.section--night .numlist li { border-top-color: var(--night-line); color: var(--night-text); }
.section--night .numlist li::before { color: var(--brand); }
@media (max-width: 760px) { .numlist { grid-template-columns: 1fr; } }

/* Check list */
.checks { list-style: none; margin: 0 0 1.2em; padding: 0; }
.checks li { position: relative; padding: 9px 0 9px 32px; border-bottom: 1px dashed var(--line); }
.checks li::before { content: ''; position: absolute; left: 2px; top: 17px; width: 12px; height: 7px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.checks--cols { columns: 2; column-gap: 48px; }
.checks--cols li { break-inside: avoid; }
@media (max-width: 760px) { .checks--cols { columns: 1; } }

/* Question list (what the product answers) */
.questions { list-style: none; margin: 0; padding: 0; }
.questions li { font: 400 clamp(1.05rem, 1rem + .4vw, 1.3rem)/1.35 var(--display); padding: 18px 0; border-top: 1px solid var(--night-line); color: var(--head); letter-spacing: -.01em; }
.questions li:last-child { border-bottom: 1px solid var(--night-line); }
.questions li::before { content: '?'; color: var(--brand); margin-right: 14px; font-weight: 600; }

/* Quote */
.quote { margin: 0; }
.quote p { font: 400 clamp(1.3rem, 1rem + 1.5vw, 2.1rem)/1.35 var(--display); letter-spacing: -.015em; color: var(--head); margin-bottom: 28px; }
.quote p::before { content: '«'; color: var(--brand); }
.quote p::after { content: '»'; color: var(--brand); }
.quote footer { color: var(--night-muted); font-size: .95rem; }
.quote footer strong { color: var(--night-text); display: block; font-weight: 600; }
.quote--light p { color: var(--ink); }
.quote--light footer { color: var(--muted); }
.quote--light footer strong { color: var(--ink); }

/* Use cases */
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); }
.case { padding: 24px 0; border-top: 1px solid var(--line); }
.case h3 { font-size: 1.08rem; margin-bottom: 8px; }
.case p { margin: 0; color: var(--ink-2); font-size: .98rem; }
@media (max-width: 760px) { .cases { grid-template-columns: 1fr; } }

/* Stats strip */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); }
.stat { padding: 28px 24px 28px 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--night-line); }
.stat b { display: block; font: 500 clamp(2rem, 1.5rem + 2vw, 3.2rem)/1 var(--display); color: var(--head); margin-bottom: 10px; }
.stat span { color: var(--night-muted); font-size: .95rem; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat:nth-child(3) { border-left: 0; padding-left: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--night-line); } }

.stats--light { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; border-color: var(--line); }
.stats--light .stat { border-color: var(--line); }
.stats--light .stat:nth-child(3) { border-left: 0; padding-left: 0; }
.stats--light .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
.stats--light .stat b { color: var(--ink); }
.stats--light .stat span { color: var(--muted); }

/* Screenshot gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.gallery button { padding: 0; border: 1px solid var(--line); background: #fff; cursor: zoom-in; aspect-ratio: 16 / 10; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .3s; }
.gallery button:hover img { transform: scale(1.03); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: min(1400px, 94vw); max-height: 92vh; }
.lightbox::backdrop { background: rgba(15, 16, 20, .88); }
.lightbox img { max-height: 86vh; width: auto; margin: 0 auto; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; color: #fff; font-size: .9rem; }
.lightbox__bar button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.4); padding: 8px 14px; cursor: pointer; font: inherit; }
.lightbox__bar button:hover { background: #fff; color: var(--ink); }

/* Big figure */
.figure { margin: 0; border: 1px solid var(--line); background: #fff; padding: 8px; }
.figure figcaption { font-size: .88rem; color: var(--muted); padding: 10px 4px 2px; }

/* Clients */
.clients { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.clients li { list-style: none; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; place-items: center; padding: clamp(16px, 2.5vw, 28px); aspect-ratio: 16 / 8; }
.clients img { max-height: 54px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .75; mix-blend-mode: multiply; transition: filter .2s, opacity .2s; }
.clients li:hover img { filter: none; opacity: 1; }
.clients { margin: 0; padding: 0; }
@media (max-width: 900px) { .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* CTA band */
.cta-band { background: var(--paper-2); border-top: 1px solid var(--line); color: var(--ink); padding: clamp(48px, 6vw, 80px) 0; position: relative; overflow: hidden; }
.cta-band h2 { color: var(--head); margin-bottom: 12px; max-width: 20em; }
.cta-band p { color: var(--ink-2); margin: 0; max-width: 40em; }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; position: relative; z-index: 1; }
.cta-band .btn:not(.btn--ghost) { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }
.cta-band .btn:not(.btn--ghost):hover { background: var(--ink); border-color: var(--ink); }
@media (max-width: 760px) { .cta-band .wrap { grid-template-columns: 1fr; } }

/* Trial strip (inside product pages) */
.trial { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 28px 32px; border: 1px solid var(--ink); border-radius: 4px; background: var(--paper); }
.trial__days { font: 600 3rem/1 var(--display); color: var(--brand); }
.trial__days small { display: block; font: 600 .78rem/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.trial h3 { margin: 0 0 4px; }
.trial p { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) { .trial { grid-template-columns: 1fr; padding: 24px; } }

/* Pricing */
.price-group + .price-group { margin-top: 56px; }
.price-group__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; margin-bottom: 28px; }
.price-group__head p { color: var(--ink-2); margin: 0; }
@media (max-width: 860px) { .price-group__head { grid-template-columns: 1fr; gap: 12px; } }
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.price { border: 1px solid var(--line); border-radius: 4px; background: var(--paper); padding: 28px; display: flex; flex-direction: column; }
.price__product { font: 600 .8rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 10px; }
.price h3 { margin-bottom: 22px; }
.price__amount { font: 500 clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem)/1 var(--display); letter-spacing: -.02em; margin-bottom: 6px; }
.price__unit { color: var(--muted); font-size: .92rem; margin-bottom: 24px; }
.price .btn { margin-top: auto; align-self: flex-start; }
.price--dark { background: var(--night); color: var(--night-text); border-color: var(--night-line); }
.price--dark h3 { color: var(--head); }
.price--dark .price__product { color: var(--brand-ink); }
.price--dark .price__unit { color: var(--night-muted); }
@media (max-width: 640px) { .prices { grid-template-columns: 1fr; } }
.note { border-left: 3px solid var(--brand); padding: 14px 20px; background: var(--paper-2); color: var(--ink-2); margin: 28px 0; }
.note strong { color: var(--ink); }

/* Downloads */
.dl-group + .dl-group { margin-top: 48px; }
.dl-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.dl-list li { border-bottom: 1px solid var(--line); }
.dl-list a { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 4px; color: var(--ink); text-decoration: none; }
.dl-list a:hover { background: var(--paper-2); }
.dl-list a:hover .dl-title { color: var(--brand-ink); }
.dl-type { font: 600 .72rem/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); border: 1px solid currentColor; padding: 6px 0; text-align: center; }
.dl-title { font-weight: 600; display: block; }
.dl-desc { color: var(--muted); font-size: .9rem; display: block; margin-top: 2px; }
.dl-size { color: var(--muted); font-size: .88rem; white-space: nowrap; }
.dl-size::after { content: ' ↓'; color: var(--brand-ink); }

/* Specs table */
.specs { width: 100%; border-collapse: collapse; font-size: .97rem; }
.specs th, .specs td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--line); }
.specs th { width: 36%; font-weight: 600; color: var(--ink-2); }
.spec-card { border-top: 2px solid var(--ink); padding-top: 18px; }
.spec-card h3 { margin-bottom: 4px; }
.spec-card h4 { font-family: var(--text); font-weight: 600; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); margin: 24px 0 6px; }

/* Article body (long-form pages) */
.prose { max-width: 760px; }
.prose > * + h2 { margin-top: 1.9em; }
.prose > * + h3 { margin-top: 1.6em; }
.prose h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); }
.prose h3 { font-size: 1.18rem; }
.prose h4, .prose h5, .prose h6 { font-family: var(--text); font-weight: 600; font-size: 1.02rem; letter-spacing: 0; margin: 1.4em 0 .5em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--brand); }
.prose img { margin: 1.6em 0; border: 1px solid var(--line); background: #fff; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; display: block; overflow-x: auto; }
.prose th, .prose td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.prose th { background: var(--paper-2); }
.prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--brand); font-size: 1.08rem; color: var(--ink-2); }
.prose code, .formula { font: 500 .92em/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; background: var(--paper-2); padding: 1px 6px; }
.prose p code, .prose li code, .prose td code { overflow-wrap: anywhere; }
.prose details, .faq details { border-top: 1px solid var(--line); }
.prose details:last-of-type, .faq details:last-of-type { border-bottom: 1px solid var(--line); }
.prose summary, .faq summary { list-style: none; cursor: pointer; padding: 18px 40px 18px 0; position: relative; font-weight: 600; font-size: 1.04rem; }
.prose summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.prose summary::after, .faq summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font: 400 1.6rem/1 var(--display); color: var(--brand-ink); transition: transform .2s; }
.prose details[open] summary::after, .faq details[open] summary::after { transform: rotate(45deg); }
.prose details > *:not(summary), .faq details > *:not(summary) { color: var(--ink-2); }
.prose details > p:last-child, .faq details > p:last-child { margin-bottom: 20px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(32px, 6vw, 96px); align-items: start; }
.article-aside { position: sticky; top: calc(var(--header-h) + 32px); font-size: .94rem; }
.article-aside h2 { font: 600 .78rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.article-aside ul { list-style: none; margin: 0 0 32px; padding: 0; border-left: 1px solid var(--line); }
.article-aside li a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.article-aside li a:hover, .article-aside li a.active { color: var(--brand-ink); border-left-color: var(--brand); }
.aside-box { border: 1px solid var(--line); padding: 20px; background: var(--paper-2); }
.aside-box p { margin-bottom: 14px; color: var(--ink-2); }
.aside-box .btn { width: 100%; }
@media (max-width: 980px) { .article-layout { grid-template-columns: minmax(0, 1fr); } .article-aside { position: static; } .article-aside .toc { display: none; } }

/* Code compare (migration) */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); margin: 1.4em 0; }
.compare > div { padding: 16px 18px; }
.compare > div + div { border-left: 1px solid var(--line); background: #fff; }
.compare h4 { margin: 0 0 10px !important; font-size: .78rem !important; letter-spacing: .12em !important; text-transform: uppercase; color: var(--muted); }
.compare > div + div h4 { color: var(--brand-ink); }
.compare code { display: block; background: none; padding: 3px 0; white-space: pre-wrap; word-break: break-word; }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } .compare > div + div { border-left: 0; border-top: 1px solid var(--line); } }

/* Forms */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-weight: 600; font-size: .9rem; }
.field label .req { color: var(--brand-ink); }
.field input, .field textarea, .field select { font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--line); border-bottom: 1.5px solid var(--ink-2); border-radius: 0; padding: 12px 14px; width: 100%; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--brand); }
.field fieldset { border: 0; margin: 0; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chips label { position: relative; font-weight: 500; font-size: .94rem; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 10px 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; transition: all .15s; }
.chips input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.chips input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.consent { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; font-size: .88rem; color: var(--ink-2); }
.consent input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--brand-ink); flex: none; }
.form .hp { position: absolute; left: -9999px; }
.form-status { grid-column: 1 / -1; padding: 14px 18px; display: none; }
.form-status.ok { display: block; background: #e6efe2; border-left: 3px solid #3d7a37; }
.form-status.err { display: block; background: #f6e2da; border-left: 3px solid var(--brand-ink); }
@media (max-width: 640px) { .form { grid-template-columns: 1fr; } }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: clamp(22px, 3vw, 40px); }
.test-bar { background: #fff4d6; color: #5a4300; text-align: center; font-size: .85rem; padding: 6px 16px; border-bottom: 1px solid #f0dfa8; }

/* Steps (trial flow) */
.steps { display: flex; gap: 0; margin: 0 0 32px; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; flex: 1; padding: 14px 0 0; border-top: 3px solid var(--line); color: var(--muted); font-size: .92rem; font-weight: 600; }
.steps li::before { content: 'Шаг ' counter(s) ' · '; }
.steps li.done { border-top-color: var(--ink); color: var(--ink-2); }
.steps li.now { border-top-color: var(--brand); color: var(--ink); }
.steps li + li { margin-left: 8px; }

/* Contact cards */
.contact-list { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.contact-list li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-list dt, .contact-list .k { color: var(--muted); font-size: .9rem; padding-top: 2px; }
.contact-list .v { font-size: 1.08rem; }
.contact-list .v a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-list .v a:hover { color: var(--brand-ink); border-color: currentColor; }
@media (max-width: 520px) { .contact-list li { grid-template-columns: 1fr; gap: 4px; } }

/* Partners */
.partner { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 32px 0; border-top: 1px solid var(--line); }
.partner__logo { background: #fff; border: 1px solid var(--line); display: grid; place-items: center; padding: 24px; aspect-ratio: 3 / 2; }
.partner__logo img { max-height: 70px; width: auto; }
@media (max-width: 640px) { .partner { grid-template-columns: 1fr; } .partner__logo { max-width: 240px; } }

/* Version cards */
.version { border: 1px solid var(--line); border-radius: 4px; background: var(--paper); padding: 28px; }
.version__num { font: 500 2.6rem/1 var(--display); letter-spacing: -.02em; margin: 10px 0 20px; }
.version__num small { font: 600 .78rem/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 8px; }

/* Footer */
.site-footer { background: var(--paper-2); border-top: 1px solid var(--line); color: var(--muted); padding: clamp(56px, 7vw, 88px) 0 32px; font-size: .94rem; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--brand-ink); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
.footer-brand img { width: 170px; margin-bottom: 20px; }
.footer-brand p { max-width: 26em; }
.site-footer h2 { font: 600 .76rem/1 var(--text); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 6px 0 18px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: 10px; }
.footer-contacts { font-size: 1.05rem; }
.footer-contacts a { color: var(--ink); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding-top: 28px; font-size: .84rem; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-bottom li + li { margin-top: 0; }
.footer-legal span + span::before { content: '·'; margin: 0 10px; color: var(--line); }
.social { display: flex; gap: 10px; margin-top: 22px; }
.social a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line); font-size: .86rem; }
.social a:hover { border-color: var(--brand); }
@media (max-width: 900px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } }

/* Cookie notice */
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin-left: auto; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); padding: 18px 20px; display: none; gap: 16px; align-items: center; font-size: .9rem; box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); }
.cookie.show { display: flex; }
.cookie p { margin: 0; }
.cookie a { color: var(--brand-ink); }
.cookie .btn { min-height: 40px; padding: 0 18px; background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; flex: none; }
.cookie .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.cookie .btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cookie-actions { display: flex; flex-direction: column; gap: 8px; flex: none; }
@media (max-width: 520px) { .cookie-actions { flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 520px) { .cookie { flex-direction: column; align-items: flex-start; } }

/* Section heading row */
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); margin-bottom: clamp(32px, 4vw, 56px); align-items: end; }
.sec-head h2 { margin: 0; }
.sec-head p { margin: 0; color: var(--ink-2); }
.section--night .sec-head p { color: var(--night-muted); }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }

/* Values grid */
.values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--night-line); }
.value { padding: 28px 24px 8px 0; }
.value + .value { padding-left: 24px; border-left: 1px solid var(--night-line); }
.value h3 { font-size: 1.15rem; margin-bottom: 10px; }
.value p { color: var(--night-muted); font-size: .96rem; }
@media (max-width: 980px) { .values { grid-template-columns: repeat(2, minmax(0, 1fr)); } .value:nth-child(3) { border-left: 0; padding-left: 0; } .value:nth-child(n+3) { border-top: 1px solid var(--night-line); } }
@media (max-width: 520px) { .values { grid-template-columns: 1fr; } .value + .value { border-left: 0; padding-left: 0; border-top: 1px solid var(--night-line); } }

/* Service tiles (Pelican) */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.tile { padding: 28px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tile h3 { font-size: 1.05rem; margin: 18px 0 8px; }
.tile p { margin: 0; color: var(--ink-2); font-size: .95rem; }
.tile__icon { width: 40px; height: 40px; color: var(--brand-ink); }
@media (max-width: 980px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }

.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mt-l { margin-top: clamp(32px, 4vw, 56px); }
.center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Content round 2 (2026-10-31): conversion blocks ---------- */
.faq { max-width: 860px; }
.faq summary { font-size: 1.08rem; }
.faq details > p { margin-top: 0; }

/* proof points under the hero */
.proof { display: flex; flex-wrap: wrap; gap: 10px 24px; list-style: none; margin: 32px 0 0; padding: 0; font-size: .94rem; color: var(--ink-2); }
.proof li { display: flex; align-items: center; gap: 8px; }
.proof li::before { content: ''; width: 12px; height: 7px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg) translateY(-2px); flex: none; }

/* compact logo strip right under the hero */
.logo-strip { padding: 28px 0; border-bottom: 1px solid var(--line); }
.logo-strip .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; }
.logo-strip p { margin: 0; font: 600 .78rem/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); max-width: 12em; }
.logo-strip ul { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 28px; list-style: none; margin: 0; padding: 0; }
.logo-strip img { height: 34px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .7; mix-blend-mode: multiply; }
@media (max-width: 760px) { .logo-strip .wrap { grid-template-columns: 1fr; gap: 16px; } .logo-strip ul { justify-content: flex-start; } .logo-strip li:nth-child(n+7) { display: none; } }

/* product cards */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); overflow: hidden; }
.card__shot { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: #fff; }
.card__shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .3s; }
.card:hover .card__shot img { transform: scale(1.03); }
.card__body { display: flex; flex-direction: column; flex: 1; padding: 24px 24px 28px; }
.card__kind { font: 600 .74rem/1.3 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 10px; }
.card h3 { font-size: 1.5rem; margin-bottom: 6px; }
.card h3 a { color: inherit; text-decoration: none; }
.card h3 a:hover { color: var(--brand-ink); }
.card__tagline { font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.card p { color: var(--ink-2); }
.card .checks { font-size: .95rem; margin-bottom: 20px; }
.card .checks li { padding: 6px 0 6px 28px; }
.card .checks li::before { top: 13px; }
.card .btn-row { margin-top: auto; }
.card .btn { min-height: 44px; padding: 0 18px; font-size: .94rem; }
@media (max-width: 980px) { .cards { grid-template-columns: 1fr; } .card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .card__shot { aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); } }
@media (max-width: 640px) { .card { display: flex; } .card__shot { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line); } }

/* industries: tiles with the products used */
.tile__tags { margin-top: 14px; font-size: .84rem; color: var(--muted); }
.tile__tags b { color: var(--brand-ink); font-weight: 600; }
.tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .tiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles--3 { grid-template-columns: 1fr; } }

/* replacement table: imported tool -> our product */
.swap { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.swap li { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.swap .from { color: var(--muted); }
.swap .from small, .swap .to small { display: block; font-size: .85rem; color: var(--muted); }
.swap .arrow { color: var(--brand); font-size: 1.4rem; text-align: center; }
.swap .to { font-weight: 600; }
.swap .to a { color: var(--ink); text-decoration: none; }
.swap .to a:hover { color: var(--brand-ink); }

/* choice cards (free trial hub, pricing) */
.prices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .prices--3 { grid-template-columns: 1fr; } }
.price .checks { font-size: .95rem; margin-bottom: 24px; }
.price--accent { border-color: var(--ink); box-shadow: inset 0 3px 0 var(--brand); }
@media (max-width: 760px) { .prices { grid-template-columns: 1fr; } .price-group__head { grid-template-columns: 1fr; gap: 12px; } }

/* what happens after the form */
.next-steps { list-style: none; margin: 0 0 32px; padding: 0; counter-reset: ns; }
.next-steps li { counter-increment: ns; position: relative; padding: 0 0 22px 52px; }
.next-steps li::before { content: counter(ns); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border: 1.5px solid var(--brand); border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: var(--brand-ink); }
.next-steps li:not(:last-child)::after { content: ''; position: absolute; left: 17px; top: 36px; bottom: 4px; width: 1px; background: var(--line); }
.next-steps strong { display: block; color: var(--ink); }
.next-steps span { color: var(--ink-2); font-size: .96rem; }
/* phones: headline and buttons first, the chart is decoration */
@media (max-width: 640px) { .hero__art { display: none; } .hero .registry { margin-top: 24px; } }

.tile h3 a { color: inherit; text-decoration: none; }
.tile h3 a:hover { color: var(--brand-ink); }
.tile h3 a::after { content: ' →'; color: var(--brand-ink); }
.more-list summary { cursor: pointer; font-weight: 600; color: var(--brand-ink); padding: 12px 0; list-style: none; }
.more-list summary::-webkit-details-marker { display: none; }
.more-list[open] summary { display: none; }
/* small decorative icons inside articles (ERM page) */
.prose img.icon { width: 64px; height: 64px; border: 0; background: none; margin: 2.2em 0 -1.2em; }
.prose figure:has(> img.icon) { margin: 0; }

/* login to the customer portal */
.header-login { display: inline-flex; align-items: center; gap: 6px; }
.header-login svg { flex: none; }
.mobile-login { display: none; }
@media (max-width: 1100px) { .header-login { display: inline-flex; } }
@media (max-width: 920px) {
  .header-login { display: none; }
  .mobile-login { display: block; margin-top: 14px; text-align: center; font-weight: 600; color: var(--brand-ink); text-decoration: none; }
}

/* ---------- Motion: home hero chart and scroll reveal ----------
   Hidden start states only apply with JS on (html.js) and when the visitor has not asked for
   reduced motion, so without either the page shows everything at once. site.js adds .is-in. */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }

  .js .art .art-tick { opacity: 0; transform: translateY(-14px); transform-box: fill-box; }
  .js .art .art-late { opacity: 0; }
  .js .art .art-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }

  .js .art.is-in .art-tick { animation: art-tick .45s ease-out forwards; animation-delay: calc(var(--i) * 35ms + 900ms); }
  .js .art.is-in .art-draw { animation: art-draw 1.6s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: .9s; }
  .js .art--hero.is-in .art-draw { animation-delay: .2s; }
  .js .art.is-in .art-late { animation: art-fade .6s ease forwards; animation-delay: 2.2s; }
}
@keyframes art-tick { to { transform: none; opacity: 1; } }
@keyframes art-draw { to { stroke-dashoffset: 0; } }
@keyframes art-fade { to { opacity: 1; } }

/* ---------- Product walkthrough (macro m.tour, initTour in site.js) ---------- */
.section--tour { padding-top: clamp(48px, 6vw, 88px); }
.tour { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: start; }
.tour__steps { list-style: none; margin: 0; padding: 0; counter-reset: none; border-top: 1px solid var(--line); }
.tour__steps li { border-bottom: 1px solid var(--line); }
.tour__item { position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; width: 100%; padding: 13px 0; background: none; border: 0; text-align: left; font: inherit; color: var(--muted); cursor: pointer; }
.tour__n { font: 600 .8rem/1.6 var(--text); letter-spacing: .06em; color: var(--muted); }
.tour__t { font-weight: 600; line-height: 1.35; color: var(--ink-2, var(--ink)); }
.tour__d { grid-column: 2; display: none; margin-top: 6px; font-size: .94rem; line-height: 1.5; color: var(--ink-2, var(--ink)); }
.tour__item:hover .tour__t { color: var(--brand-ink); }
.tour__item.is-active .tour__n, .tour__item.is-active .tour__t { color: var(--brand-ink); }
.tour__item.is-active .tour__d { display: block; }
.tour__p { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--brand); }
.tour__item.is-active .tour__p { width: 100%; }
.tour.is-playing .tour__item.is-active .tour__p { width: 0; animation: tour-progress var(--ms, 5000ms) linear forwards; }
.tour.is-paused .tour__item.is-active .tour__p { animation-play-state: paused; }
@keyframes tour-progress { to { width: 100%; } }

.tour__screen { position: relative; aspect-ratio: 16 / 9.4; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px -24px rgba(17, 18, 20, .22); }
.tour__layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transform-origin: 0 0; transition: opacity .5s ease, transform 1s cubic-bezier(.45, 0, .2, 1); will-change: transform; }
.tour__layer.is-active { opacity: 1; z-index: 1; }
.tour__layer img { display: block; width: 100%; height: 100%; }
.tour__ring { position: absolute; border: 2px solid var(--brand); border-radius: 4px; box-shadow: 0 0 0 4000px rgba(17, 18, 20, .16); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.tour__ring.is-on { opacity: 1; }
.tour__cursor { position: absolute; left: 50%; top: 110%; z-index: 3; width: 22px; height: 26px; margin: -2px 0 0 -2px; transition: left .75s cubic-bezier(.45, 0, .2, 1), top .75s cubic-bezier(.45, 0, .2, 1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); pointer-events: none; }
.tour__cursor svg { display: block; position: relative; z-index: 1; }
.tour__click { position: absolute; left: 2px; top: 2px; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(232, 95, 46, .35); border: 2px solid var(--brand); opacity: 0; transform: scale(.2); }
.tour__click.is-on { animation: tour-click .7s ease-out; }
@keyframes tour-click { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(1.4); } }
.tour__pp { position: absolute; right: 12px; bottom: 12px; z-index: 4; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .92); cursor: pointer; display: grid; place-items: center; }
.tour__pp span { width: 10px; height: 12px; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); }
.tour.is-paused .tour__pp span, .tour:not(.is-playing) .tour__pp span { width: 0; height: 0; border: 0; border-left: 11px solid var(--ink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.tour__pp:focus-visible, .tour__item:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
@media (max-width: 900px) {
  .tour { grid-template-columns: 1fr; }
  .tour__steps { order: 2; }
  .tour__steps li { display: none; }
  .tour__steps li:has(.is-active) { display: block; }
  .tour__item { cursor: default; }
}
@media (prefers-reduced-motion: reduce) {
  .tour__layer, .tour__cursor, .tour__ring { transition: none; }
  .tour__cursor { display: none; }
}

/* Excel + МоделРиск mock-up inside the walkthrough (_scene_modelrisk.html), drawn at 1280×752 */
.tour__html { position: absolute; left: 0; top: 0; width: 1280px; height: 752px; transform-origin: 0 0; }
.xl { position: relative; width: 1280px; height: 752px; background: #fff; font: 13px/1.2 "Segoe UI", Onest, Arial, sans-serif; color: #222; overflow: hidden; }
.xl-title { height: 34px; background: #217346; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.xl-tabs { height: 28px; display: flex; gap: 22px; align-items: center; padding-left: 16px; background: #f3f3f3; font-size: 13px; }
.xl-tabs .is-on { font-weight: 700; border-bottom: 3px solid #217346; padding-bottom: 2px; color: #217346; }
.xl-ribbon { position: relative; height: 88px; background: #f8f8f8; border-bottom: 1px solid #d6d6d6; }
.xl-btn { position: absolute; top: 6px; width: 92px; text-align: center; font-size: 12px; line-height: 1.15; border-radius: 3px; padding: 2px 0 3px; }
.xl-btn svg { display: block; width: 34px; height: 26px; margin: 0 auto 3px; }
.xl-group { position: absolute; bottom: 4px; text-align: center; font-size: 11px; color: #666; border-top: 1px solid #e2e2e2; padding-top: 2px; }
.xl-iter { position: absolute; top: 12px; width: 100px; font-size: 12px; text-align: center; }
.xl-iter b { display: block; font-weight: 400; margin-bottom: 4px; }
.xl-iter span { display: inline-block; border: 1px solid #aaa; background: #fff; padding: 2px 14px; }
.xl-fbar { height: 32px; display: flex; align-items: center; gap: 10px; padding: 0 8px; border-bottom: 1px solid #d6d6d6; }
.xl-name { width: 80px; border: 1px solid #c8c8c8; padding: 3px 6px; }
.xl-fx { font-style: italic; color: #777; }
.xl-formula { flex: 1; border: 1px solid #c8c8c8; padding: 3px 8px; font-family: Consolas, "Courier New", monospace; font-size: 13.5px; white-space: nowrap; overflow: hidden; }
.xl-colh { position: relative; height: 20px; background: #efefef; border-bottom: 1px solid #d0d0d0; }
.xl-colh span { position: absolute; top: 0; height: 20px; line-height: 20px; text-align: center; color: #555; font-size: 12px; border-left: 1px solid #ddd; }
.xl-grid { position: absolute; left: 0; top: 0; width: 100%; }
.xl-row { position: absolute; left: 0; width: 100%; height: 26px; border-bottom: 1px solid #ececec; }
.xl-rh { position: absolute; left: 0; width: 36px; height: 100%; background: #efefef; color: #555; font-size: 12px; text-align: center; line-height: 26px; border-right: 1px solid #d0d0d0; }
.xl-c { position: absolute; top: 0; height: 26px; line-height: 26px; padding: 0 8px; white-space: nowrap; }
.xl-b { left: 50px; width: 280px; background: #44546a; color: #fff; }
.xl-plain { background: none; color: #222; }
.xl-n { text-align: right; font-variant-numeric: tabular-nums; }
.xl-head .xl-c { background: #2f3d50; color: #fff; text-align: center; font-weight: 600; }
.xl-sec { background: #5b6b82; color: #fff; text-align: center; line-height: 26px; font-size: 13px; }
.xl-sec span:not(.xl-rh) { display: block; margin-left: 330px; width: 730px; }
.xl-banner { background: linear-gradient(#fff 0 0) 0 0 / 36px 100% no-repeat, #0e9ad7; }
.xl-banner__t { position: absolute; right: 230px; top: 4px; color: #fff; font-size: 34px; font-weight: 300; }
.xl-npv { background: #ffc000; font-weight: 700; transition: box-shadow .3s; }
.xl-in { background: #dde7f6; }
.xl-out { position: absolute; left: 590px; top: 4px; font-size: 11px; font-weight: 700; color: #fff; background: #c0392b; border-radius: 3px; padding: 2px 6px; opacity: 0; transition: opacity .3s; }
.xl-sheets { position: absolute; left: 0; bottom: 0; width: 100%; height: 26px; background: #f3f3f3; border-top: 1px solid #d0d0d0; display: flex; gap: 4px; padding-left: 50px; font-size: 12px; }
.xl-sheets span { padding: 5px 14px; }
.xl-sheets .is-on { background: #fff; color: #217346; font-weight: 700; border-bottom: 2px solid #217346; }
.xl .is-sel { outline: 2px solid #217346; outline-offset: -2px; z-index: 2; }
/* distribution cells, output marker, popup and progress dialog switch on with data-state */
.xl .is-dist { background: #fde3d6; color: #8a2e0c; font-weight: 600; transition: background .4s; }
.xl[data-state="output"] .xl-out, .xl[data-state="sim"] .xl-out { opacity: 1; }
.xl[data-state="output"] .xl-npv, .xl[data-state="sim"] .xl-npv { box-shadow: inset 0 0 0 2px #c0392b; }
.xl-pop { position: absolute; left: 712px; top: 470px; width: 236px; padding: 10px 12px 8px; background: #fff; border: 1px solid #c8c8c8; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); border-radius: 6px; font-size: 12px; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.xl-pop b { display: block; margin-bottom: 4px; }
.xl-pop svg { display: block; width: 100%; height: 70px; }
.xl-pop__l { display: flex; justify-content: space-between; padding: 0 2px; font-variant-numeric: tabular-nums; }
.xl-pop__l i { font-style: normal; }
.xl-pop__c { display: block; margin-top: 4px; color: #666; font-size: 11px; text-align: center; }
.xl[data-state="dist1"] .xl-pop { opacity: 1; transform: none; }
.xl-sim { position: absolute; left: 470px; top: 380px; width: 340px; padding: 16px 18px; background: #fff; border: 1px solid #bbb; border-radius: 6px; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); font-size: 13px; opacity: 0; transition: opacity .3s; }
.xl-sim > b { display: block; margin-bottom: 10px; font-size: 14px; }
.xl-sim__bar { display: block; height: 14px; background: #e6e6e6; border-radius: 7px; overflow: hidden; margin-bottom: 8px; }
.xl-sim__bar i { display: block; height: 100%; width: 0; background: #2b8ad8; }
.xl[data-state="sim"] .xl-sim { opacity: 1; }

/* ---------- Industry pages: hero chart, lifecycle, question cards, one model ---------- */
.ind-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.ind-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.chartcard { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 18px 18px 14px; box-shadow: 0 1px 2px rgba(17, 18, 20, .04), 0 12px 32px -18px rgba(17, 18, 20, .18); }
.chartcard__kind { display: block; font: 600 .7rem/1.2 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.chartcard figcaption { font-size: .95rem; color: var(--ink-2); border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--text); }
.chart__t { font-size: 12px; fill: var(--muted); }
.chart__t--l { fill: var(--ink-2); font-size: 13px; }
.chart__t--b { fill: var(--ink); font-weight: 700; }
.chart__x { font-size: 12px; fill: var(--muted); }
.chart__p { font-size: 14px; font-weight: 600; fill: var(--ink-2); }
.chart__p--brand { fill: var(--brand-ink); }
.chart__m { font-size: 12.5px; fill: var(--ink); font-weight: 500; }
.chart__m--brand { fill: var(--brand-ink); font-weight: 700; }
html.js .chart__bar { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform .5s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 12ms); }
html.js .chart__gbar { transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 80ms + 100ms); }
html.js .is-in .chart__bar, html.js .is-in .chart__gbar { transform: none; }
html.js .chartcard--hero .chart__bar { transition-delay: calc(var(--i) * 14ms + 250ms); }

.lifecycle { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 0; border-top: 2px solid var(--ink); overflow-x: auto; }
.lifecycle li { position: relative; border-right: 1px solid var(--line); }
.lifecycle li:last-child { border-right: 0; }
.lifecycle li > a, .lifecycle li > div { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 18px 16px 20px; color: inherit; text-decoration: none; transition: background .2s; }
.lifecycle li > a:hover { background: var(--paper-2); }
.lifecycle li > a:hover b { color: var(--brand-ink); }
.lifecycle li::before { content: ''; position: absolute; top: -7px; left: 16px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid var(--paper); }
.lifecycle__n { font: 600 .78rem/1 var(--text); color: var(--muted); margin-top: 6px; }
.lifecycle b { font-size: 1.05rem; line-height: 1.25; }
.lifecycle__sub { color: var(--ink-2); font-size: .92rem; line-height: 1.35; flex: 1; }
.lifecycle__p { font-size: .78rem; font-weight: 600; color: var(--brand-ink); margin-top: 8px; }

.qcards { display: grid; gap: 20px; }
.qcard { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 56px); align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: clamp(20px, 3vw, 36px); }
.qcard:nth-child(even) .qcard__text { order: 2; }
.qcard h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; margin: 0 0 12px; }
.qcard__text > p:last-child { color: var(--ink-2); margin: 0; }
.qcard__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; align-items: center; }
.qcard__stage { font: 600 .72rem/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.qcard .chartcard { box-shadow: none; background: #fff; }
.ptags { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ptags a { font: 600 .78rem/1 var(--text); padding: 6px 10px; border-radius: 999px; background: #fdeee8; color: var(--brand-ink); text-decoration: none; }
.ptags a:hover { background: var(--brand); color: #fff; }

.regtable { overflow-x: auto; }
.regtable table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.regtable th { text-align: left; font-weight: 600; color: var(--muted); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; padding: 8px 8px; border-bottom: 1px solid var(--ink); }
.regtable td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.regtable .num { text-align: center; }
.score { display: inline-block; min-width: 28px; padding: 3px 6px; border-radius: 4px; font-weight: 700; font-size: .8rem; }
.score--hi { background: #f9d4c4; color: #8f2c0a; }
.score--mid { background: #fbe9c8; color: #6e4a00; }
.score--lo { background: #dcefe0; color: #1d5a2c; }

.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; counter-reset: f; }
.flow li { position: relative; border-top: 1px solid var(--ink); padding-top: 20px; }
.flow li:not(:last-child)::after { content: '→'; position: absolute; top: 14px; right: -14px; color: var(--brand); font-weight: 700; }
.flow__n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 700; font-size: .9rem; margin-bottom: 12px; }
.flow h3 { font-size: 1.1rem; margin: 0 0 6px; }
.flow p { color: var(--ink-2); font-size: .95rem; margin: 0 0 12px; }

@media (max-width: 980px) {
  .ind-hero__grid, .qcard { grid-template-columns: minmax(0, 1fr); }
  .qcard:nth-child(even) .qcard__text { order: 0; }
  .flow { grid-template-columns: 1fr 1fr; }
  .flow li::after { display: none; }
  .lifecycle { grid-auto-flow: row; grid-template-columns: 1fr 1fr; border-top: 0; }
  .lifecycle li { border-right: 0; border-top: 2px solid var(--ink); }
}
@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; }
  .chartcard { padding: 12px 10px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .chart__bar, html.js .chart__gbar { transform: none; transition: none; }
}
.qcard--wide { grid-template-columns: minmax(0, 1fr); }
.qcard--wide .qcard__text { order: 0 !important; max-width: 760px; }
@media (max-width: 560px) {
  .chart__t, .chart__x { font-size: 19px; }
  .chart__t--l { font-size: 20px; }
  .chart__p { font-size: 22px; }
  .chart__m { font-size: 19px; }
}
.tile__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 12px; background: #fdeee8; color: var(--brand-ink); margin-bottom: 14px; transition: background .2s, color .2s, transform .2s; }
.tile--ind:hover .tile__icon { background: var(--brand); color: #fff; transform: translateY(-2px); }
.tile--ind .tile__icon { display: grid; }
.tile--ind .tile__icon svg { width: 30px; height: 30px; }
.tile--ind h3 { margin-top: 0; }

/* SEO 2026-11: the search phrase sits inside the H1 as its kicker line; looks the same as the
   eyebrow / product tag that used to stand above the heading. */
h1 > .eyebrow { display: flex; width: max-content; max-width: 100%; line-height: 1.35; }
.page-hero h1 > .product-tag { display: block; line-height: 1.35; }

/* ---------- Articles (/stati/) ---------- */
.byline { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 18px 0 0; font-size: .92rem; color: var(--muted); }
.byline a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--line); }
.byline a:hover { color: var(--brand-ink); border-bottom-color: var(--brand); }
.byline span::before { content: '·'; margin-right: 18px; color: var(--line); }
.prose .figure { margin: 1.8em 0; }
.prose .figure img { margin: 0; border: 0; }
.prose .figure .chart { margin: 6px 0 2px; }
.prose .formula { display: block; padding: 12px 16px; margin: 1.2em 0; overflow-x: auto; white-space: pre; }
.prose td.num, .prose th.num { text-align: right; white-space: nowrap; }
.prose .answer { font-size: 1.06rem; }
.trial--article { margin: 40px 0 0; }
.trial--article .trial__days { font-size: 2.4rem; }
.author { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; margin: 40px 0 0; padding: 24px 0 0; border-top: 1.5px solid var(--ink); }
.author__mark { width: 64px; height: 64px; border-radius: 50%; background: var(--paper-2); border: 1px solid var(--line); display: grid; place-items: center; font: 600 1.15rem/1 var(--display); color: var(--brand-ink); }
.author p { margin: 0 0 6px; color: var(--ink-2); font-size: .97rem; }
.author .author__name { font-weight: 700; color: var(--ink); font-size: 1.05rem; margin: 0; }
.author .author__role { color: var(--muted); font-size: .9rem; margin-bottom: 10px; }
.see-also { margin: 40px 0 0; }
.see-also h2 { font-size: 1.2rem; }
.see-also ul { margin-top: 12px; }
.stati-topic { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); margin-bottom: 22px; }
.stati-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.5px solid var(--ink); }
.stati-list li { border-bottom: 1px solid var(--line); }
.stati-list li:nth-child(odd) { border-right: 1px solid var(--line); }
.stati-list a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 22px 20px 0; color: var(--ink); text-decoration: none; transition: background .2s; }
.stati-list li:nth-child(even) a { padding-left: 22px; }
.stati-list a:hover { background: var(--paper-2); }
.stati-list a:hover .stati-list__t { color: var(--brand-ink); }
.stati-list__t { font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.stati-list__d { color: var(--ink-2); font-size: .94rem; line-height: 1.45; }
.stati-list__m { color: var(--muted); font-size: .82rem; margin-top: auto; padding-top: 4px; }
@media (max-width: 760px) {
  .stati-list { grid-template-columns: 1fr; }
  .stati-list li:nth-child(odd) { border-right: 0; }
  .stati-list li:nth-child(even) a, .stati-list a { padding-left: 0; padding-right: 0; }
}