/* Quite Brilliant Limited — styles
   Концепция: сайт как документ (меморандум). Слева — оглавление, справа — «лист».
   Все цвета, отступы и кегли — токенами в :root. */

:root {
  /* palette */
  --desk: #e9e5db;        /* фон «стола» вокруг листа */
  --paper: #fbf9f4;       /* сам лист */
  --paper-2: #f3f0e8;
  --ink: #15171c;
  --muted: #50545d;
  --faint: #6a6c71;
  --line: #dcd6c8;
  --line-strong: #b9b2a2;

  --it: #2a45d4;          /* IT — cobalt */
  --legal: #9a2d3e;       /* Legal — claret */
  --both: #5a2e86;        /* The Gap — violet */
  --both-soft: #c3a4ee;
  --on-dark: #f4f1ea;
  --on-dark-dim: #b4b3ad;
  --line-dark: #363a44;

  --ok: #1e6b45;
  --err: #a3242f;

  --scrim: 21, 23, 28;    /* --ink триплетом */
  --it-rgb: 42, 69, 212;
  --legal-rgb: 154, 45, 62;
  --desk-rgb: 233, 229, 219;

  /* type */
  --f-display: "Newsreader", Georgia, "Times New Roman", serif;
  --f-body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --t-hero: clamp(38px, 4.6vw, 68px);
  --t-h2: clamp(30px, 3vw, 44px);
  --t-h3: clamp(18px, 1.35vw, 21px);
  --t-h3-serif: clamp(22px, 1.9vw, 28px);
  --t-num: clamp(22px, 2vw, 30px);
  --t-abstract: clamp(19px, 1.6vw, 23px);
  --t-lead: clamp(17px, 1.3vw, 19.5px);
  --t-input: 20px;
  --t-body: 16px;
  --t-ui: 15px;
  --t-small: 14px;
  --t-note: 13px;
  --t-label: 12px;
  --t-micro: 11.5px;

  /* layout */
  --pad-x: clamp(12px, 3vw, 48px);
  --sheet-px: clamp(20px, 5vw, 80px);
  --section-py: clamp(52px, 6.5vw, 96px);
  --indent: 76px;         /* отступ текста от номера пункта */
  --toc-w: 220px;
  --nav-h: 64px;
  --radius: 12px;
  --radius-sm: 8px;
  --gap: clamp(16px, 2vw, 28px);

  --ease: cubic-bezier(.2, .7, .2, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--desk);
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0 auto;
  max-width: 1440px;
  overflow-x: hidden;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; }

h1, h2 {
  font-family: var(--f-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; font-weight: 400; }

h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
}

:focus-visible {
  outline: 2px solid var(--it);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
}
.skip:focus { top: 12px; }

[hidden] { display: none !important; }

/* номер пункта «1.1», «5.2» и т.п. */
.def-n {
  display: inline-block;
  min-width: 2.8em;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  font-style: normal;
  letter-spacing: .04em;
  color: var(--faint);
  vertical-align: .15em;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--f-body);
  font-size: var(--t-ui);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--ink); color: var(--on-dark); }
.btn-primary:hover { background: var(--it); box-shadow: 0 8px 24px -10px rgba(var(--it-rgb), .7); }
.btn-primary:active { box-shadow: none; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }

.btn[disabled] { opacity: .6; cursor: progress; transform: none; }

/* ---------- topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(var(--desk-rgb), .9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.progress {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
}
.progress span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--it), var(--both), var(--legal));
}

.topbar-inner {
  height: 100%;
  padding: 0 var(--pad-x);
  display: flex;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand-word {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
}
.brand-word em { font-style: italic; font-weight: 400; color: var(--muted); }

.topbar-ref {
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .08em;
  color: var(--faint);
}
.topbar-cta { min-height: 40px; padding: 0 18px; font-size: var(--t-small); }

/* ---------- layout ---------- */

.layout {
  display: grid;
  grid-template-columns: var(--toc-w) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding: clamp(12px, 2vw, 28px) var(--pad-x) clamp(40px, 5vw, 72px);
}

/* ---------- contents ---------- */

.toc {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  padding-top: 8px;
}
.toc-title {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
}
.toc-list { border-left: 1px solid var(--line-strong); }
.toc-list a {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 7px 0 7px 16px;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s;
}
.toc-list a span {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  color: var(--faint);
  padding-top: 1px;
}
.toc-list a::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--ink);
  transform: scaleY(0);
  transition: transform .25s var(--ease);
}
.toc-list a:hover,
.toc-list a.is-active { color: var(--ink); }
.toc-list a.is-active span { color: var(--both); }
.toc-list a.is-active::before { transform: scaleY(1); }

.toc-foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--t-note);
}
.toc-foot a { color: var(--muted); text-decoration: none; }
.toc-foot a:hover { color: var(--it); text-decoration: underline; }

/* ---------- sheet ---------- */

.sheet {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(var(--scrim), .04), 0 40px 80px -60px rgba(var(--scrim), .45);
  padding: 0 var(--sheet-px);
  min-width: 0;
}

.clause {
  padding: var(--section-py) 0;
  border-top: 1px solid var(--line);
}
.clause:first-child { border-top: 0; }
.clause:not(.cover) > :not(.cl-head) { margin-left: var(--indent); }

.cl-head {
  display: grid;
  grid-template-columns: var(--indent) minmax(0, 1fr);
  align-items: baseline;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.cl-num {
  grid-row: span 2;
  font-family: var(--f-mono);
  font-size: var(--t-num);
  color: var(--both);
  line-height: 1;
}
.cl-head h2 {
  font-size: var(--t-h2);
  line-height: 1.08;
}
.cl-lede {
  grid-column: 2;
  margin-top: 12px;
  font-size: var(--t-lead);
  color: var(--muted);
  max-width: 36em;
}

.sub {
  font-size: var(--t-h3);
  font-weight: 600;
  margin-bottom: 18px;
}

/* ---------- 00 cover ---------- */

.cover { padding-top: clamp(36px, 5vw, 72px); }

.memo {
  border-top: 3px double var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 18px 0 20px;
  margin-bottom: clamp(36px, 4.4vw, 60px);
}
.memo-kind {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.memo-head { display: grid; gap: 6px; }
.memo-head div {
  display: grid;
  grid-template-columns: var(--indent) minmax(0, 1fr);
  font-size: var(--t-ui);
}
.memo-head dt {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 2px;
}
.memo-head dd { font-weight: 500; }

.cover h1 {
  font-size: var(--t-hero);
  line-height: 1.04;
  max-width: 15em;
  margin-bottom: clamp(28px, 3.4vw, 44px);
}
.cover h1 em { color: var(--both); }

.cover-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 250px);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(32px, 3.6vw, 48px);
}
.abstract {
  font-family: var(--f-display);
  font-size: var(--t-abstract);
  line-height: 1.5;
  max-width: 32em;
}

.note {
  padding-left: 16px;
  border-left: 2px solid var(--both);
  font-size: var(--t-note);
  line-height: 1.55;
  color: var(--muted);
}
.note-mark {
  font-family: var(--f-display);
  font-size: 18px;
  line-height: 0;
  color: var(--both);
  margin-right: 4px;
}

.cover-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- 01 definitions ---------- */

.defs { border-top: 1px solid var(--line); }
.def {
  display: grid;
  grid-template-columns: minmax(180px, 250px) minmax(0, 1fr);
  gap: 8px clamp(20px, 3vw, 40px);
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.def dt {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}
.def dd { color: var(--muted); max-width: 38em; }
.def dd p + figure { margin-top: 20px; }

.gap-fig { max-width: 300px; }
.gap-fig svg { width: 100%; height: auto; }
.fig-it,
.fig-legal { stroke-width: 1.5; mix-blend-mode: multiply; }
.fig-it { fill: rgba(var(--it-rgb), .12); stroke: var(--it); }
.fig-legal { fill: rgba(var(--legal-rgb), .12); stroke: var(--legal); }
.fig-label { font-family: var(--f-display); font-style: italic; font-size: 22px; }
.fig-label--it { fill: var(--it); }
.fig-label--legal { fill: var(--legal); }
.fig-gap {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  fill: var(--both);
}
.gap-fig figcaption {
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: var(--faint);
}

/* ---------- 02 situations ---------- */

.sit-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.sit-tab {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
  font: inherit;
  font-size: var(--t-ui);
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s;
}
.sit-tab span {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  color: var(--muted);
}
.sit-tab:hover { border-color: var(--line-strong); background: var(--paper-2); }
.sit-tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-dark);
}
.sit-tab[aria-selected="true"] span { border-color: var(--both-soft); color: var(--both-soft); }
.no-js .sit-tabs { display: none; }   /* без JS показываем все ситуации списком */

.sit-panel {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  padding: clamp(22px, 3vw, 36px);
}
.no-js .sit-panel + .sit-panel { margin-top: 14px; }
.sit-panel.is-entering { animation: sit-in .35s var(--ease); }
@keyframes sit-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.sit-q {
  font-family: var(--f-display);
  font-size: var(--t-h3-serif);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 24px;
}
.sit-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
}
.sit-col { padding-top: 14px; border-top: 3px solid var(--it); }
.sit-col--legal { border-top-color: var(--legal); }
.sit-col--out { border-top-color: var(--both); }
.sit-k {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--it);
  margin-bottom: 8px;
}
.sit-col--legal .sit-k { color: var(--legal); }
.sit-col--out .sit-k { color: var(--both); }
.sit-col p:not(.sit-k) { font-size: var(--t-ui); color: var(--muted); }
.sit-col--out p:not(.sit-k) { color: var(--ink); font-weight: 500; }

.sit-other { margin-top: 20px; font-size: var(--t-ui); color: var(--muted); }
.sit-other a { color: var(--it); font-weight: 600; }

/* ---------- 03 scope ---------- */

.scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
.scope-block h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3-serif);
  font-weight: 500;
  padding-bottom: 14px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--it);
}
.scope-block--legal h3 { border-bottom-color: var(--legal); }

.items li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-ui);
}
.items li > span {
  font-family: var(--f-mono);
  font-size: var(--t-label);
  color: var(--faint);
  padding-top: 3px;
}
.items p { color: var(--muted); }
.items strong { color: var(--ink); font-weight: 600; }

.scope-block--gap {
  grid-column: 1 / -1;
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
  position: relative;
  overflow: hidden;
}
.scope-block--gap::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(to right, var(--it), var(--both), var(--legal));
}
.scope-block--gap h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 18px; }
.scope-block--gap .def-n { color: var(--both-soft); }
.items--inline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.items--inline li {
  grid-template-columns: 30px minmax(0, 1fr);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-sm);
  padding: 14px;
}
.items--inline li > span { color: var(--both-soft); }
.items--inline strong { color: var(--on-dark); }
.scope-gap-note { margin-top: 18px; font-size: var(--t-small); color: var(--on-dark-dim); }

/* ---------- 04 method ---------- */

.timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 1px;
  background: var(--line-strong);
}
.timeline li {
  position: relative;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.timeline li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--it);
}
.timeline li:nth-child(2)::before { border-color: var(--both); }
.timeline li:nth-child(3)::before { border-color: var(--legal); }
.timeline li:nth-child(4)::before { border-color: var(--ink); background: var(--ink); }
.tl-n { font-family: var(--f-mono); font-size: var(--t-label); color: var(--faint); }
.timeline h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3-serif);
  font-weight: 500;
  line-height: 1.1;
}
.timeline p { font-size: var(--t-ui); color: var(--muted); }
.timeline .tl-out {
  padding-top: 12px;
  border-top: 1px dashed var(--line-strong);
  color: var(--ink);
  font-weight: 600;
  font-size: var(--t-small);
}
.tl-out span {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 2px;
}

/* ---------- 05 terms ---------- */

.table-wrap { margin-bottom: clamp(32px, 4vw, 52px); }
.terms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-ui);
}
.terms-table thead th {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: left;
  white-space: nowrap;
  padding: 0 16px 12px 0;
  border-bottom: 1.5px solid var(--ink);
}
.terms-table tbody th {
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.terms-table tbody th,
.terms-table td {
  padding: 18px 16px 18px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.terms-table td { color: var(--muted); }
.terms-table td:last-child { color: var(--ink); font-weight: 600; }

.terms-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(24px, 4vw, 56px);
}
.terms-list li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: var(--t-ui);
}
.terms-list .def-n { padding-top: 3px; }
.terms-list p { color: var(--muted); }
.terms-list strong { color: var(--ink); }

/* ---------- 06 interpretation ---------- */

.faq { border-top: 1px solid var(--line); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: baseline;
  padding: 20px 44px 20px 0;
  position: relative;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background:
    linear-gradient(var(--ink), var(--ink)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 11px no-repeat;
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover::after { border-color: var(--ink); }
.faq details p { padding: 0 44px 22px 44px; color: var(--muted); }

/* ---------- 07 execution ---------- */

.exec {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.notices-intro { color: var(--muted); font-size: var(--t-ui); margin-bottom: 18px; }
.notices-list div {
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.notices-list div:last-child { border-bottom: 1px solid var(--line); }
.notices-list dt {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 2px;
}
.notices-list dd { font-weight: 500; font-size: 16.5px; }
.notices-list a {
  text-decoration: none;
  background: linear-gradient(var(--it), var(--it)) left bottom / 100% 1.5px no-repeat;
  padding-bottom: 1px;
}
.notices-list a:hover { color: var(--it); }
.notices-list address { font-style: normal; line-height: 1.5; }

.signing {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 36px);
}
.contact-form { display: flex; flex-direction: column; gap: 22px; }

.form-field { display: flex; flex-direction: column; gap: 2px; }
.form-field label {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* поля — как линии для заполнения в бланке */
.form-field input,
.form-field textarea {
  width: 100%;
  font-family: var(--f-display);
  font-size: var(--t-input);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--line-strong);
  border-radius: 0;
  padding: 8px 0;
  transition: border-color .2s, box-shadow .2s;
}
.form-field textarea {
  --rule: var(--line-strong);
  resize: vertical;
  min-height: 160px;
  line-height: 32px;
  padding: 0;
  border-bottom: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--rule) 31px, var(--rule) 32px);
  background-attachment: local;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--faint); font-style: italic; }
.form-field input:hover { border-bottom-color: var(--muted); }
.form-field input:focus,
.form-field textarea:focus { outline: none; }
.form-field input:focus { border-bottom-color: var(--it); box-shadow: 0 1.5px 0 var(--it); }
.form-field textarea:focus { --rule: var(--it); }
.form-field input[aria-invalid="true"] { border-bottom-color: var(--err); }
.form-field textarea[aria-invalid="true"] { --rule: var(--err); }

.form-error {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--err);
  padding-left: 12px;
  border-left: 3px solid var(--err);
}
.form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
.form-note { flex: 1 1 200px; font-size: var(--t-note); color: var(--muted); }
.form-success {
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: #e3efe7;
  border-left: 3px solid var(--ok);
  color: #134a2f;
  font-size: var(--t-ui);
}
.form-success strong { display: block; }

/* ---------- end of document ---------- */

.doc-end {
  border-top: 3px double var(--ink);
  padding: 28px 0 36px;
  font-size: var(--t-note);
  color: var(--muted);
}
.doc-end-mark {
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--t-label);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 22px;
}
.doc-end-row {
  display: flex;
  justify-content: space-between;
  gap: 12px 40px;
  flex-wrap: wrap;
}
.doc-end-row p { max-width: 44em; }

/* ---------- reveal ---------- */

.reveal,
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in,
.reveal-stagger.in > * { opacity: 1; transform: none; }
.reveal-stagger.in > *:nth-child(2) { transition-delay: .08s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .16s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .24s; }
.no-js .reveal,
.no-js .reveal-stagger > * { opacity: 1; transform: none; }

/* ---------- tablet ---------- */

@media (max-width: 1100px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }

  /* оглавление превращается в липкую горизонтальную ленту под шапкой */
  .toc {
    top: var(--nav-h);
    z-index: 40;
    margin: 0 calc(-1 * var(--pad-x)) 12px;
    padding: 0 var(--pad-x);
    background: rgba(var(--desk-rgb), .95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .toc-title,
  .toc-foot { display: none; }
  .toc-list {
    display: flex;
    gap: 4px;
    border-left: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .toc-list::-webkit-scrollbar { display: none; }
  .toc-list a {
    white-space: nowrap;
    padding: 12px;
    gap: 8px;
  }
  .toc-list a::before {
    left: 12px;
    right: 12px;
    top: auto;
    bottom: 0;
    width: auto;
    height: 2px;
    transform: scaleX(0);
  }
  .toc-list a.is-active::before { transform: scaleX(1); }

  html { scroll-padding-top: calc(var(--nav-h) + 64px); }

  .sit-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scope { grid-template-columns: minmax(0, 1fr); }
  .items--inline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .timeline::before { display: none; }
  .exec { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- mobile ---------- */

@media (max-width: 760px) {
  :root { --indent: 0px; --nav-h: 60px; }

  .topbar-ref { display: none; }
  .topbar-cta { margin-left: auto; }
  .brand-word { font-size: 20px; }

  .layout { padding-left: 0; padding-right: 0; }
  .toc { margin: 0; }
  .sheet { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }

  .cl-head { grid-template-columns: minmax(0, 1fr); }
  .cl-num { grid-row: auto; margin-bottom: 10px; font-size: 20px; }
  .cl-lede { grid-column: 1; }

  .memo-head div { grid-template-columns: 4.2em minmax(0, 1fr); }
  .cover-body { grid-template-columns: minmax(0, 1fr); }
  .cover-actions .btn { flex: 1 1 100%; }

  .def { grid-template-columns: minmax(0, 1fr); }

  .sit-tabs,
  .sit-cols,
  .items--inline,
  .timeline,
  .terms-list { grid-template-columns: minmax(0, 1fr); }

  .terms-table thead { display: none; }
  .terms-table,
  .terms-table tbody,
  .terms-table tr,
  .terms-table th,
  .terms-table td { display: block; width: 100%; }
  .terms-table tr { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .terms-table tbody th,
  .terms-table td { padding: 4px 0; border: 0; }
  .terms-table tbody th { margin-bottom: 6px; }
  .terms-table td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--f-mono);
    font-size: var(--t-micro);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--faint);
    font-weight: 400;
  }

  .faq summary { font-size: 16.5px; }
  .faq details p { padding-right: 0; }

  .form-submit { flex: 1 1 100%; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal,
  .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sit-panel.is-entering { animation: none !important; }
  .btn,
  .btn:hover,
  .btn:active { transform: none !important; transition: none !important; }
  .toc-list a::before,
  .faq summary::after { transition: none !important; }
}