:root {
  --srez-ink: #151917;
  --srez-mineral: #173B34;
  --srez-ivory: #F3F1E9;
  --srez-stone: #DDD9D0;
  --srez-steel: #89948F;
  --srez-observation: #B07836;
  --srez-risk: #8A4138;
  --srez-white: #FCFCF8;
  --srez-line: rgba(21,25,23,.16);
  --srez-line-strong: rgba(21,25,23,.28);
  --srez-radius-sm: 4px;
  --srez-radius-md: 8px;
  --srez-radius-lg: 14px;
  --srez-max: 1240px;
  --srez-reading: 760px;
  --srez-font-display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --srez-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --srez-font-data: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --paper: var(--srez-ivory);
  --ink: var(--srez-ink);
  --muted: #5F6965;
  --line: var(--srez-line);
  --accent: var(--srez-mineral);
  --accent-2: #28584F;
  --signal: var(--srez-observation);
  --warn: var(--srez-risk);
  --ok: #2D6B56;
  --white: var(--srez-white);
  --max: var(--srez-max);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--srez-ivory); color: var(--srez-ink); font-family: var(--srez-font-body); line-height: 1.55; }
a { color: inherit; }
button, input, textarea { font: inherit; }
img { max-width: 100%; }
.shell { width: min(calc(100% - 40px), var(--srez-max)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 20; background: rgba(243,241,233,.94); backdrop-filter: blur(14px); border-bottom: 1px solid var(--srez-line); }
.header-inner { min-height: 68px; display: flex; justify-content: space-between; align-items: center; gap: 22px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 900; letter-spacing: .07em; }
.brand img { width: 34px; height: 34px; }
.brand small { display: block; color: var(--muted); font: 700 10px/1.2 var(--srez-font-data); letter-spacing: .1em; text-transform: uppercase; }
.nav { display: flex; gap: 20px; align-items: center; font-size: 14px; }
.nav a { text-decoration: none; color: #39433F; }
.nav a:hover { color: var(--srez-mineral); }
.nav .nav-cta { padding: 10px 15px; border: 1px solid var(--srez-mineral); border-radius: var(--srez-radius-md); background: var(--srez-mineral); color: #fff; font-weight: 800; }
.mobile-toggle { display: none; background: none; border: 0; padding: 8px; font-size: 24px; }
.hero, .page-hero { padding: 82px 0 62px; border-bottom: 1px solid var(--srez-line); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(330px,.92fr); gap: 72px; align-items: center; }
.eyebrow { margin: 0 0 18px; color: var(--srez-mineral); font: 800 12px/1.25 var(--srez-font-data); text-transform: uppercase; letter-spacing: .12em; }
h1, h2, h3 { font-family: var(--srez-font-display); font-weight: 850; letter-spacing: 0; line-height: 1.03; margin-top: 0; }
h1 { font-size: clamp(44px,5.5vw,72px); max-width: 920px; margin-bottom: 24px; }
h2 { font-size: clamp(30px,3.4vw,46px); margin-bottom: 20px; }
h3 { font-size: 24px; margin-bottom: 12px; }
.lead { font-size: clamp(18px,2vw,22px); color: #46514D; max-width: 780px; margin: 0 0 30px; }
.micro { color: var(--muted); font-size: 13px; }
.url-form, .inputline { display: flex; gap: 10px; max-width: 720px; margin-top: 30px; }
.url-form input, .inputline input, .compare-form input, .lead-form input[type="text"], .lead-form textarea { flex: 1; min-width: 0; border: 1px solid rgba(21,25,23,.34); background: var(--srez-white); color: var(--srez-ink); border-radius: var(--srez-radius-md); padding: 16px 18px; outline: none; }
.url-form input:focus, .inputline input:focus, .compare-form input:focus, .lead-form input[type="text"]:focus, .lead-form textarea:focus { border-color: var(--srez-mineral); box-shadow: 0 0 0 3px rgba(23,59,52,.12); }
.button, .url-form button, .inputline button, .compare-form button { border: 0; border-radius: var(--srez-radius-md); background: var(--srez-mineral); color: #fff; padding: 16px 21px; font-weight: 850; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.button:hover, .url-form button:hover, .inputline button:hover, .compare-form button:hover { background: #28584F; }
.button.secondary { background: transparent; color: var(--srez-mineral); border: 1px solid var(--srez-mineral); }
.text-link { color: var(--srez-mineral); font-weight: 850; text-decoration: none; border-bottom: 1px solid rgba(23,59,52,.35); }
.hero-actions { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 14px; }
.section { padding: 76px 0; border-bottom: 1px solid var(--srez-line); }
.section-head { display: grid; grid-template-columns: .76fr 1.24fr; gap: 52px; margin-bottom: 42px; }
.section-head p:last-child, .kicker, .prose p, .prose li { color: #46514D; }
.kicker { max-width: 720px; font-size: 17px; }
.split { display: grid; grid-template-columns: .76fr 1.24fr; gap: 64px; }
.layers { position: relative; border-left: 1px solid var(--srez-line); padding-left: 26px; }
.layer { position: relative; padding: 13px 0 13px 74px; border-bottom: 1px solid var(--srez-line); font: 800 12px/1.2 var(--srez-font-data); letter-spacing: .08em; }
.layer::before { content: ""; position: absolute; left: 0; top: 50%; width: 56px; border-top: 6px solid var(--srez-mineral); }
.layers::after { content: ""; position: absolute; width: 3px; height: 210px; background: var(--srez-observation); left: 132px; top: 7px; transform: rotate(22deg); transform-origin: top; }
.annotation { margin-top: 22px; padding-left: 164px; font-size: 13px; color: #59635F; }
.evidence { background: var(--srez-ink); color: var(--srez-white); padding: 34px; border-radius: var(--srez-radius-md); }
.evidence .row { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.evidence .row:last-child { border-bottom: 0; }
.num, .fnum { font: 850 12px/1.2 var(--srez-font-data); color: var(--srez-mineral); letter-spacing: .08em; }
.evidence .num { color: #BFD1CB; }
.evidence strong { display: block; margin-bottom: 5px; }
.evidence p, .dark p { color: #C7CFCC; margin-bottom: 0; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--srez-line); border-left: 1px solid var(--srez-line); }
.steps article { padding: 28px; border-right: 1px solid var(--srez-line); border-bottom: 1px solid var(--srez-line); }
.evidence-chain { display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid var(--srez-line); border-left: 1px solid var(--srez-line); }
.evidence-chain span { min-width: 0; padding: 18px 10px; border-right: 1px solid var(--srez-line); border-bottom: 1px solid var(--srez-line); text-align: center; color: #46514D; font-size: 13px; overflow-wrap: anywhere; }
.dark { background: var(--srez-ink); color: var(--srez-white); }
.dark .eyebrow { color: #A7C9C1; }
.depth { border-top: 1px solid var(--srez-line); }
.depth article, .product-row { display: grid; grid-template-columns: 90px 1.2fr .8fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--srez-line); }
.price { font-size: 24px; font-weight: 900; text-align: right; color: var(--srez-mineral); }
.research-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; }
.research-item, .data-panel, .payment-note, .contact-success { border: 1px solid var(--srez-line); background: rgba(252,252,248,.72); border-radius: var(--srez-radius-md); padding: 24px; }
.research-item dl { display: grid; grid-template-columns: 88px 1fr; gap: 6px 14px; margin: 18px 0 0; font-size: 13px; }
.research-item dt { color: var(--muted); }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tag { display: inline-flex; padding: 7px 10px; border: 1px solid var(--srez-line); border-radius: var(--srez-radius-md); color: #52605C; font-size: 12px; }
.workspace, .check-workspace, .compare-workspace { background: #ECEAE3; min-height: 100vh; }
.workhead { border-bottom: 1px solid var(--srez-line); padding: 18px 0; }
.workgrid { display: grid; grid-template-columns: 230px 1fr; min-height: calc(100vh - 70px); }
.sidebar { padding: 28px 22px; border-right: 1px solid var(--srez-line); }
.sideitem { padding: 11px 0; color: #606A66; font-size: 13px; }
.sideitem.active { color: var(--srez-ink); font-weight: 850; }
.mainwork { padding: 36px 42px; }
.summary { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; padding: 26px 0 34px; border-bottom: 1px solid var(--srez-line); }
.stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.stat { padding: 14px; border-left: 2px solid var(--srez-mineral); background: rgba(252,252,248,.62); }
.stat strong { display: block; font-size: 24px; }
.stat span { color: var(--muted); font-size: 12px; }
.finding, .evidence-finding { display: grid; grid-template-columns: 70px 1.25fr .75fr; gap: 26px; padding: 30px 0; border-bottom: 1px solid var(--srez-line); }
.finding h2, .finding h3 { margin-bottom: 8px; }
.finding p, .meta, .evidence-finding p { color: #59635F; }
.meta { font-size: 14px; }
.matrix { border-top: 1px solid var(--srez-line); margin: 20px 0; }
.matrix-row { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--srez-line); }
.partial, .limit-box, .callout { border-left: 3px solid var(--srez-observation); padding: 22px; margin: 24px 0; background: #F5F0E6; }
.expert-next { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; border: 1px solid var(--srez-mineral); background: var(--srez-white); border-radius: var(--srez-radius-md); padding: 24px; }
.expert-next ul, .limit-box ul, .compare-insights ul { margin: 0; padding-left: 20px; color: #46514D; }
.price-line { display: block; color: var(--srez-mineral); font-size: 28px; margin: 4px 0 12px; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.check-shell { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 28px; align-items: start; }
.check-panel, .compare-panel { background: var(--srez-white); border: 1px solid var(--srez-line); border-radius: var(--srez-radius-lg); padding: 28px; }
.check-result { min-height: 360px; }
.check-empty { color: var(--muted); padding: 40px 0; }
.progress { display: none; height: 4px; overflow: hidden; border-radius: var(--srez-radius-sm); background: #E4DED3; margin: 22px 0; }
.progress.is-on { display: block; }
.progress span { display: block; height: 100%; width: 35%; background: var(--srez-mineral); animation: scan 1.2s infinite ease-in-out; }
@keyframes scan { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
.processing-notes { display: grid; gap: 8px; margin: 20px 0; color: var(--muted); font-size: 13px; }
.layer-map { display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid var(--srez-line); border-bottom: 1px solid var(--srez-line); }
.layer-map > div { min-height: 136px; padding: 20px 16px; border-right: 1px solid var(--srez-line); display: flex; flex-direction: column; justify-content: space-between; position: relative; }
.layer-map > div:last-child { border-right: 0; }
.layer-map span { color: var(--srez-mineral); font: 800 12px/1.2 var(--srez-font-data); }
.layer-map strong { font-size: 20px; }
.layer-map em { color: var(--muted); font-style: normal; font-size: 13px; }
.layer-map .cut-layer::after { content: ""; position: absolute; top: -1px; bottom: -1px; right: 24px; width: 3px; background: var(--srez-observation); transform: skew(-14deg); }
.compare-form { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 12px; align-items: end; }
.compare-form label { display: grid; gap: 8px; font-weight: 850; }
.compare-and { color: var(--muted); font-weight: 850; padding: 16px 0; }
.compare-insights { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 24px 0; }
.signal-card { border: 1px solid var(--srez-line); border-radius: var(--srez-radius-md); background: var(--srez-white); padding: 18px; }
.signal-card-top { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-bottom: 12px; }
.signal-card-top span { color: var(--muted); font: 800 12px/1.2 var(--srez-font-data); text-transform: uppercase; letter-spacing: .08em; }
.signal-card-top strong { white-space: nowrap; font-size: 12px; border-radius: var(--srez-radius-md); padding: 6px 9px; color: var(--ok); border: 1px solid rgba(46,109,88,.3); }
.signal-card.warn .signal-card-top strong { color: var(--srez-observation); border-color: rgba(176,120,54,.4); }
.signal-card.check .signal-card-top strong { color: var(--srez-risk); border-color: rgba(138,65,56,.4); }
.status-table { display: grid; gap: 0; border-top: 1px solid var(--srez-line); }
.status-table > div { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--srez-line); }
.audit-matrix, .ai-cards, .yandex-chain { display: grid; gap: 0; border-top: 1px solid var(--srez-line); border-left: 1px solid var(--srez-line); background: var(--srez-white); }
.audit-matrix { grid-template-columns: repeat(2,1fr); }
.ai-cards { grid-template-columns: repeat(3,1fr); }
.yandex-chain { grid-template-columns: repeat(5,1fr); }
.audit-matrix article, .ai-cards article, .yandex-chain article { padding: 24px; border-right: 1px solid var(--srez-line); border-bottom: 1px solid var(--srez-line); }
.content-grid { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 64px; padding: 62px 0 80px; }
.side-nav { position: sticky; top: 100px; align-self: start; display: grid; gap: 9px; font-size: 13px; }
.side-nav a { text-decoration: none; color: var(--muted); }
.prose { max-width: 880px; }
.prose h2 { margin-top: 56px; }
.prose table { width: 100%; border-collapse: collapse; margin: 28px 0; background: var(--srez-white); }
.prose th, .prose td { text-align: left; padding: 13px 14px; border: 1px solid var(--srez-line); vertical-align: top; }
.contact-section { padding-top: 46px; }
.contact-layout { display: grid; grid-template-columns: minmax(0,700px) minmax(280px,1fr); gap: 52px; align-items: start; }
.lead-form { display: grid; gap: 22px; }
.form-row { display: grid; gap: 8px; }
.lead-form label, .consent-check { font-weight: 850; color: #22302D; }
.lead-form textarea { resize: vertical; min-height: 170px; }
.lead-form [aria-invalid="true"] { border-color: var(--srez-risk); box-shadow: 0 0 0 3px rgba(138,65,56,.1); }
.field-meta { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.field-error { min-height: 20px; margin: 0; color: var(--srez-risk); font-size: 13px; }
.field-meta span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.hp-row { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.consent-check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; line-height: 1.45; }
.consent-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--srez-mineral); }
.form-status { min-height: 24px; color: var(--muted); font-weight: 700; }
.form-status[data-state="validation"], .form-status[data-state="rate"], .form-status[data-state="error"] { color: var(--srez-risk); }
.form-status[data-state="disabled"] { color: var(--srez-observation); }
.contact-submit { width: fit-content; min-width: 190px; }
.next-steps { border-left: 1px solid var(--srez-line); padding-left: 34px; }
.next-steps ol { margin: 0 0 28px; padding-left: 22px; color: #46514D; }
.footer { padding: 44px 0 60px; }
.footer-grid { display: grid; grid-template-columns: 1.1fr .9fr .9fr; gap: 40px; }
.footer p, .footer a { color: var(--muted); font-size: 13px; }
.footer a { display: block; margin: 6px 0; text-decoration: none; }
.footer strong { display: block; margin-bottom: 12px; }
.consent { position: fixed; right: 18px; bottom: 18px; z-index: 50; width: min(470px,calc(100% - 36px)); background: var(--srez-ink); color: #fff; padding: 20px; border-radius: var(--srez-radius-lg); display: none; }
.consent.is-visible { display: block; }
.consent p { margin: 0 0 14px; color: #D3DBD8; font-size: 13px; }
.consent-actions { display: flex; gap: 8px; }
.consent button { border: 1px solid #80908C; background: transparent; color: #fff; border-radius: var(--srez-radius-md); padding: 9px 12px; cursor: pointer; }
.consent button.primary { background: #fff; color: var(--srez-ink); border-color: #fff; font-weight: 850; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}
@media (max-width: 980px) {
  .hero-grid, .section-head, .split, .content-grid, .check-shell, .contact-layout, .expert-next, .summary { grid-template-columns: 1fr; }
  .workgrid { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .compare-form { grid-template-columns: 1fr; }
  .compare-and { padding: 0; text-align: center; }
  .steps, .compare-insights, .audit-matrix, .ai-cards, .yandex-chain, .research-grid { grid-template-columns: 1fr; }
  .evidence-chain { grid-template-columns: repeat(2,1fr); }
  .layer-map { grid-template-columns: repeat(2,1fr); }
  .depth article, .product-row { grid-template-columns: 46px 1fr; }
  .price { text-align: left; grid-column: 2; }
}
@media (max-width: 760px) {
  .shell { width: min(calc(100% - 28px), var(--srez-max)); }
  .header-inner { min-height: 66px; }
  .mobile-toggle { display: block; }
  .nav { display: none; position: absolute; top: 66px; left: 0; right: 0; background: var(--srez-ivory); padding: 18px 20px 24px; border-bottom: 1px solid var(--srez-line); flex-direction: column; align-items: stretch; }
  .nav.is-open { display: flex; }
  .hero, .page-hero { padding: 48px 0 44px; }
  h1 { font-size: 42px; }
  h2 { font-size: 32px; }
  .url-form, .inputline { flex-direction: column; }
  .url-form button, .inputline button, .result-actions .button, .contact-submit { width: 100%; }
  .section { padding: 54px 0; }
  .mainwork { padding: 26px 18px; }
  .stats { grid-template-columns: 1fr; }
  .finding, .evidence-finding { grid-template-columns: 46px 1fr; gap: 16px; }
  .finding .meta, .evidence-finding .meta { grid-column: 2; }
  .matrix-row, .status-table > div { grid-template-columns: 1fr; gap: 5px; }
  .layer-map { grid-template-columns: 1fr; }
  .layer-map > div { min-height: 92px; border-right: 0; border-bottom: 1px solid var(--srez-line); }
  .layer-map > div:last-child { border-bottom: 0; }
  .annotation { padding-left: 0; }
  .field-meta { flex-direction: column; gap: 4px; }
  .next-steps { border-left: 0; border-top: 1px solid var(--srez-line); padding-left: 0; padding-top: 28px; }
  .consent { right: 10px; bottom: 10px; width: calc(100% - 20px); padding: 14px; }
}

/* ==========================================================================
   Variant 2 visual layer — editorial display type, cube hero, relief closer
   and native motion. Appended so nothing above is rewritten; content, forms,
   analytics and consent behaviour are untouched.
   ========================================================================== */

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-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;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root { --srez-font-editorial: "Playfair Display", "Bodoni MT", Didot, Georgia, serif; }

/* display serif for the brand and the two top heading levels only; h3, labels,
   forms and technical copy stay in the sans stack */
h1, h2 {
  font-family: var(--srez-font-editorial);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -.004em;
  /* the display serif sets wider than the previous sans stack: long Russian
     compounds must be allowed to break instead of pushing the page sideways */
  overflow-wrap: break-word;
  hyphens: auto;
}

.brand > span {
  font-family: var(--srez-font-editorial);
  font-weight: 700;
  letter-spacing: .02em;
}

.brand small { font-family: var(--srez-font-data); letter-spacing: .14em; }

/* ---------- hero art ---------- */

/* the tilt canvas is 118% of this box, so the box itself must stay narrow
   enough that the headroom never pushes a horizontal scrollbar */
.art {
  position: relative;
  margin: 0 auto;
  width: fit-content;
  max-width: 84%;
  display: flex;
  justify-content: center;
}

.art img {
  width: min(100%, 470px);
  height: auto;
  mix-blend-mode: multiply;
}

.fx-nodes,
.fx-cube { position: absolute; pointer-events: none; }

/* canvas is a replaced element: inset alone keeps its intrinsic 300x150 box,
   so both canvases get an explicit size */
.fx-nodes { inset: 0; width: 100%; height: 100%; z-index: 0; }
.fx-cube { inset: -9%; width: 118%; height: 118%; z-index: 2; }

.art picture { position: relative; z-index: 1; display: block; }
.art.fx-on img { opacity: 0; }

.layer-marks {
  margin: 26px 0 0;
  padding: 0 0 0 26px;
  list-style: none;
  border-left: 1px solid var(--srez-line);
  display: grid;
  gap: 14px;
}

.layer-marks li {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 800 11px/1.2 var(--srez-font-data);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #39433F;
  transition: color .25s ease;
}

.layer-marks li:hover { color: var(--srez-observation); }

.layer-marks svg {
  flex: none;
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- relief closer ---------- */

.relief { margin: 0; padding: 26px 0 0; }

.relief img {
  display: block;
  width: 100%;
  mix-blend-mode: multiply;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 28%, #000 88%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 28%, #000 88%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.relief figcaption {
  margin-top: 4px;
  text-align: center;
  font: 800 10px/1.4 var(--srez-font-data);
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
}

/* ---------- motion ---------- */

@view-transition { navigation: auto; }

@keyframes srez-rise {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: none; }
}

@keyframes srez-cube-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@keyframes srez-drift {
  from { transform: translateY(10px); }
  to { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero .eyebrow { animation: srez-rise .8s cubic-bezier(.2,.7,.2,1) both; }
  .hero h1 { animation: srez-rise .8s cubic-bezier(.2,.7,.2,1) .08s both; }
  .hero .lead { animation: srez-rise .8s cubic-bezier(.2,.7,.2,1) .16s both; }
  .hero .url-form { animation: srez-rise .8s cubic-bezier(.2,.7,.2,1) .24s both; }
  .hero .micro, .hero .hero-actions { animation: srez-rise .8s cubic-bezier(.2,.7,.2,1) .3s both; }
  .art { animation: srez-cube-in 1.1s cubic-bezier(.2,.7,.2,1) .1s both; }
  .layer-marks li { animation: srez-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .layer-marks li:nth-child(1) { animation-delay: .34s; }
  .layer-marks li:nth-child(2) { animation-delay: .40s; }
  .layer-marks li:nth-child(3) { animation-delay: .46s; }
  .layer-marks li:nth-child(4) { animation-delay: .52s; }
  .layer-marks li:nth-child(5) { animation-delay: .58s; }
  .layer-marks li:nth-child(6) { animation-delay: .64s; }

  .nav a, .text-link, .tag, .research-item, .signal-card, .depth article {
    transition: color .25s ease, background-color .25s ease,
                border-color .25s ease, transform .25s ease;
  }

  .button:hover, .url-form button:hover, .inputline button:hover,
  .compare-form button:hover { transform: translateY(-1px); }

  @supports (animation-timeline: view()) {
    /* ranges finish inside `entry`: an element resting at the very bottom of a
       document can never scroll far enough to complete a range that ends in
       `cover`, and would stay half-transparent permanently. Result containers
       are deliberately excluded - generated findings must never depend on a
       scroll position to become readable. */
    .section-head,
    .split > *,
    .steps article,
    .depth article,
    .research-item,
    .evidence .row,
    .audit-matrix article,
    .ai-cards article,
    .yandex-chain article,
    .layer-map > div,
    .prose h2,
    .relief figcaption {
      animation: srez-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }

    .steps article:nth-child(2),
    .depth article:nth-child(2),
    .research-item:nth-child(2),
    .evidence .row:nth-child(2) { animation-range: entry 5% entry 40%; }

    .steps article:nth-child(3),
    .depth article:nth-child(3),
    .evidence .row:nth-child(3) { animation-range: entry 10% entry 45%; }

    .relief img {
      animation: srez-drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

@media (max-width: 980px) {
  .layer-marks { margin-top: 22px; }
  .art img { width: min(100%, 360px); }
}

/* pre-existing defect, surfaced by the 360px sweep: the three-column footer
   grid had no narrow-viewport rule and pushed 20px of horizontal scroll on
   every page below ~380px */
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}