/* ==========================================================================
   WalletBureau — design tokens + prototype stylesheet
   Pure CSS. No external requests. System font stack only.
   Theme: dark by default, light via prefers-color-scheme. No JS switcher.
   ========================================================================== */

:root {
  /* --- Color: surfaces & text (dark, default) ------------------------- */
  --c-bg:            #0e1211;
  --c-surface:       #151b19;
  --c-surface-2:     #1b2220;
  --c-ink:           #e7ece9;   /* 14.6:1 on --c-bg */
  --c-ink-2:         #a7b2ad;   /*  7.5:1 on --c-bg */
  --c-ink-3:         #8b9691;   /*  5.4:1 on --c-bg */
  --c-line:          #28312e;
  --c-line-strong:   #3a4642;
  --c-focus:         #7fd7b0;

  /* --- Color: accent (security green) --------------------------------- */
  --c-accent:        #5fc99a;   /*  9.6:1 on --c-bg */
  --c-accent-ink:    #0e1211;   /* text on accent fill */
  --c-accent-soft:   #13291f;

  /* --- Color: verdict schemes (word + color, never color alone) ------- */
  --v-ok-fg:         #5fc99a;
  --v-ok-bg:         #13291f;
  --v-ok-border:     #2f7a58;
  --v-caution-fg:    #e0b25c;
  --v-caution-bg:    #2a2314;
  --v-caution-border:#8a6c26;
  --v-avoid-fg:      #ec8078;
  --v-avoid-bg:      #2c1917;
  --v-avoid-border:  #8f4a44;
  --v-neutral-fg:    #a7b2ad;
  --v-neutral-bg:    #1b2220;
  --v-neutral-border:#3a4642;

  /* --- Color: flag severity ------------------------------------------- */
  --sev-low:         #8b9691;
  --sev-med:         #e0b25c;
  --sev-high:        #ec8078;

  /* --- Typography ------------------------------------------------------ */
  --f-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --s-1: 12px;   /* micro label */
  --s-2: 13px;   /* small / code */
  --s-3: 15px;   /* body */
  --s-4: 17px;   /* lede, long-read body */
  --s-5: 20px;   /* h3 */
  --s-6: 26px;   /* h2 */
  --s-7: 32px;   /* page h1 (inner pages) */
  --s-8: 52px;   /* score numeral / hero h1 cap */
  --lh-tight: 1.15;
  --lh-body: 1.6;
  --lh-read: 1.72;
  --measure: 68ch;

  /* --- Spacing (4px step) ---------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* --- Radii ------------------------------------------------------------ */
  --r-1: 3px; --r-2: 6px; --r-3: 10px; --r-pill: 999px;

  /* --- Shadows (used sparingly; dark theme leans on borders) ----------- */
  --sh-1: 0 1px 2px rgba(0,0,0,.30);
  --sh-2: 0 4px 16px rgba(0,0,0,.35);

  /* --- Layout & breakpoints -------------------------------------------- */
  --w-page: 1140px;
  --w-read: 720px;
  --bp-sm: 480px;
  --bp-md: 720px;
  --bp-lg: 960px;
}

@media (prefers-color-scheme: light) {
  :root {
    --c-bg:            #fbfbfa;
    --c-surface:       #ffffff;
    --c-surface-2:     #f3f5f3;
    --c-ink:           #16191a;   /* 15.8:1 */
    --c-ink-2:         #4c5359;   /*  7.9:1 */
    --c-ink-3:         #63696d;   /*  5.6:1 */
    --c-line:          #e2e5e1;
    --c-line-strong:   #c3c8c2;
    --c-focus:         #16694a;

    --c-accent:        #14603f;   /*  8.4:1 */
    --c-accent-ink:    #ffffff;
    --c-accent-soft:   #e6f0ea;

    --v-ok-fg:         #14603f;
    --v-ok-bg:         #e6f0ea;
    --v-ok-border:     #14603f;
    --v-caution-fg:    #74500a;
    --v-caution-bg:    #f6eedc;
    --v-caution-border:#74500a;
    --v-avoid-fg:      #97231e;
    --v-avoid-bg:      #f8e6e4;
    --v-avoid-border:  #97231e;
    --v-neutral-fg:    #4c5359;
    --v-neutral-bg:    #f3f5f3;
    --v-neutral-border:#c3c8c2;

    --sev-low:         #63696d;
    --sev-med:         #74500a;
    --sev-high:        #97231e;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--s-3);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; text-wrap: pretty; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-1); }

code, pre, .mono, .num { font-family: var(--f-mono); }
.num { font-variant-numeric: tabular-nums; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--sp-4); }
.wrap--read { max-width: var(--w-read); }
.section { padding: var(--sp-7) 0; }
.section + .section { border-top: 1px solid var(--c-line); }
.stack { display: grid; gap: var(--sp-4); }
.stack--lg { display: grid; gap: var(--sp-5); }

.skip-link {
  position: absolute; left: var(--sp-4); top: -60px; z-index: 10;
  background: var(--c-accent); color: var(--c-accent-ink);
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-2); text-decoration: none;
}
.skip-link:focus { top: var(--sp-3); }

/* --- Header / footer --------------------------------------------------- */

.site-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  padding: var(--sp-4) 0; border-bottom: 1px solid var(--c-line);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--c-ink); text-decoration: none;
  font-family: var(--f-mono); font-weight: 600; letter-spacing: -0.01em;
}
/* Знак вставляется инлайновым SVG (см. partials/header.html): щит наследует цвет текста
   через currentColor, галочка — фиксированный акцент. Заглушка-квадрат заменена 11.08.2026. */
.brand__mark { width: 18px; height: 18px; flex: 0 0 auto; color: var(--c-ink); }
.nav { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-5); font-family: var(--f-mono); font-size: var(--s-2); }
.nav a { color: var(--c-ink-2); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--c-ink); text-decoration: underline; }

.site-footer { border-top: 1px solid var(--c-line); padding: var(--sp-6) 0 var(--sp-8); display: grid; gap: var(--sp-3); }
.site-footer p { color: var(--c-ink-2); font-size: var(--s-2); }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-4); list-style: none; font-size: var(--s-2); }
.lang { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); font-size: var(--s-2); color: var(--c-ink-2); }
.lang ul { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); list-style: none; }
.lang [aria-current="true"] { color: var(--c-ink); }

/* --- Breadcrumbs -------------------------------------------------------- */

.breadcrumbs { font-size: var(--s-2); color: var(--c-ink-3); padding: var(--sp-4) 0 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; }
.breadcrumbs li + li::before { content: "→"; margin-right: var(--sp-2); color: var(--c-ink-3); }

/* ==========================================================================
   Buttons, tags, notices
   ========================================================================== */

.btn {
  display: inline-block; font: inherit; font-weight: 600; text-align: center;
  padding: 12px 22px; border-radius: var(--r-2); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; max-width: 100%;
}
.btn--primary { background: var(--c-accent); color: var(--c-accent-ink); }
.btn--primary:hover { filter: brightness(1.06); }
.btn--secondary { background: var(--c-surface-2); color: var(--c-ink); border-color: var(--c-line-strong); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn--block { display: block; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }

.btn-mini {
  font-family: var(--f-mono); font-size: var(--s-1); line-height: 1.4;
  background: transparent; color: var(--c-ink-2);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-1);
  padding: 3px 8px; cursor: pointer;
}
.btn-mini:hover { color: var(--c-ink); border-color: var(--c-ink-3); }

.tag {
  display: inline-block; font-family: var(--f-mono); font-size: var(--s-1);
  color: var(--c-ink-2); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-1); padding: 1px 6px; white-space: nowrap;
}

.eyebrow {
  font-family: var(--f-mono); font-size: var(--s-1); letter-spacing: .08em;
  text-transform: uppercase; color: var(--c-ink-3);
}
.caption { font-size: var(--s-2); color: var(--c-ink-3); }

.notice {
  border: 1px solid var(--c-line-strong); border-left-width: 3px;
  border-radius: var(--r-2); background: var(--c-surface);
  padding: var(--sp-3) var(--sp-4); font-size: var(--s-2); color: var(--c-ink-2);
  display: grid; gap: var(--sp-2);
}
.notice strong { color: var(--c-ink); font-weight: 600; }
.notice--error { border-left-color: var(--v-avoid-fg); background: var(--v-avoid-bg); color: var(--c-ink); }
.notice--info  { border-left-color: var(--c-accent); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); align-items: start; padding: var(--sp-7) 0; }
.hero__title { font-size: clamp(30px, 6vw, 44px); line-height: var(--lh-tight); max-width: 18ch; }
.lede { margin-top: var(--sp-4); font-size: var(--s-4); color: var(--c-ink-2); max-width: 54ch; }

@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: var(--sp-8); }
}

/* ==========================================================================
   Live counters
   ========================================================================== */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-5); }
.stat__num {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: var(--s-7); line-height: 1.1; letter-spacing: -0.03em;
}
.stat__label { font-size: var(--s-2); color: var(--c-ink-2); margin-top: 2px; }
.stats-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }

/* ==========================================================================
   Demo form
   ========================================================================== */

.demo { display: grid; gap: var(--sp-4); }
.form { display: grid; gap: var(--sp-3); }
.label { font-family: var(--f-mono); font-size: var(--s-1); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); }
.field-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.input {
  flex: 1 1 260px; min-width: 0; width: 100%;
  font-family: var(--f-mono); font-size: var(--s-2);
  padding: 12px; color: var(--c-ink); background: var(--c-surface);
  border: 1px solid var(--c-line-strong); border-radius: var(--r-2);
}
.input::placeholder { color: var(--c-ink-3); }
.input[aria-invalid="true"] { border-color: var(--v-avoid-fg); box-shadow: 0 0 0 1px var(--v-avoid-fg); }
.field-error { font-size: var(--s-2); color: var(--v-avoid-fg); }
.hint { font-size: var(--s-2); color: var(--c-ink-3); }

.progress {
  height: 3px; border-radius: 2px; background: var(--c-surface-2); overflow: hidden;
}
.progress > span { display: block; height: 100%; width: 40%; background: var(--c-accent); }
@media (prefers-reduced-motion: no-preference) {
  .progress > span { animation: wb-slide 1.4s ease-in-out infinite; }
}
@keyframes wb-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--s-2); color: var(--c-ink-2); }

/* ==========================================================================
   Result card
   ========================================================================== */

.card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-3); overflow: hidden;
}
.card__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface-2); border-bottom: 1px solid var(--c-line);
}
.card__body { padding: var(--sp-4); border-bottom: 1px solid var(--c-line); }
.addr { font-family: var(--f-mono); font-size: var(--s-2); color: var(--c-ink-2); word-break: break-all; }
.score-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-4); margin-top: var(--sp-4); }
.score {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: var(--s-8); line-height: .9; letter-spacing: -0.04em;
}
.verdict {
  display: inline-block; font-family: var(--f-mono); font-size: var(--s-4); font-weight: 600;
  padding: 4px 12px; border-radius: var(--r-2); border: 1px solid;
}
.verdict--ok      { color: var(--v-ok-fg);      background: var(--v-ok-bg);      border-color: var(--v-ok-border); }
.verdict--caution { color: var(--v-caution-fg); background: var(--v-caution-bg); border-color: var(--v-caution-border); }
.verdict--avoid   { color: var(--v-avoid-fg);   background: var(--v-avoid-bg);   border-color: var(--v-avoid-border); }
.verdict--neutral { color: var(--v-neutral-fg); background: var(--v-neutral-bg); border-color: var(--v-neutral-border); }

.score--ok { color: var(--v-ok-fg); }
.score--caution { color: var(--v-caution-fg); }
.score--avoid { color: var(--v-avoid-fg); }
.score--neutral { color: var(--v-neutral-fg); }

.track { height: 6px; border-radius: 3px; background: var(--c-surface-2); overflow: hidden; margin-top: var(--sp-4); }
.track > span { display: block; height: 100%; background: currentColor; }
.track-scale { display: flex; justify-content: space-between; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--s-1); color: var(--c-ink-3); margin-top: var(--sp-1); }

.flags { list-style: none; padding: var(--sp-2) 0; }
.flag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.flag + .flag { border-top: 1px solid var(--c-line); }
.flag__code { font-family: var(--f-mono); font-size: var(--s-2); }
.flag__reason { font-size: var(--s-2); color: var(--c-ink-2); }
.sev {
  font-family: var(--f-mono); font-size: var(--s-1); line-height: 1.5;
  border: 1px solid currentColor; border-radius: var(--r-1); padding: 1px 6px;
  height: fit-content; white-space: nowrap;
}
.sev--low  { color: var(--sev-low); }
.sev--med  { color: var(--sev-med); }
.sev--high { color: var(--sev-high); }

.flags-empty {
  display: grid; gap: var(--sp-1); padding: var(--sp-4);
  border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line);
  background: var(--c-accent-soft);
}
.flags-empty strong { font-weight: 600; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-3) var(--sp-4); margin: 0; padding: var(--sp-4); border-top: 1px solid var(--c-line); }
.kv dt { font-family: var(--f-mono); font-size: var(--s-1); text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); }
.kv dd { margin: 2px 0 0; font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--s-2); }
.card__foot { margin: 0; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-line); font-size: var(--s-2); color: var(--c-ink-3); }

/* ==========================================================================
   Code blocks & tables
   ========================================================================== */

.code {
  margin: 0; padding: var(--sp-4);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-2);
  font-family: var(--f-mono); font-size: var(--s-2); line-height: 1.65;
  color: var(--c-ink); overflow-x: auto; tab-size: 2;
}
.code .c { color: var(--c-ink-3); }

.table-scroll { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r-2); }
.table { width: 100%; border-collapse: collapse; font-size: var(--s-2); min-width: 480px; }
.table th, .table td { text-align: left; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); vertical-align: top; }
.table thead th { background: var(--c-surface-2); font-family: var(--f-mono); font-size: var(--s-1); text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-2); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table code { font-size: var(--s-2); color: var(--c-ink); }
.table .req { color: var(--c-accent); font-family: var(--f-mono); font-size: var(--s-1); }

/* ==========================================================================
   Long-read typography (methodology, docs, articles)
   ========================================================================== */

.page-head { padding: var(--sp-6) 0 var(--sp-5); border-bottom: 1px solid var(--c-line); }
.page-head h1 { font-size: clamp(26px, 5vw, var(--s-7)); line-height: 1.2; max-width: 22ch; }
.page-meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-3); font-size: var(--s-2); color: var(--c-ink-3); }

.prose { max-width: var(--measure); font-size: var(--s-4); line-height: var(--lh-read); }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { font-size: var(--s-6); line-height: 1.25; margin-top: var(--sp-8); scroll-margin-top: var(--sp-5); }
.prose h3 { font-size: var(--s-5); line-height: 1.3; margin-top: var(--sp-6); scroll-margin-top: var(--sp-5); }
.prose h2 + p, .prose h3 + p { margin-top: var(--sp-3); }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: var(--sp-3); }
.prose li { padding-left: .2em; }
.prose li strong { font-weight: 650; }
.prose blockquote {
  margin: 0; padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
  border-left: 3px solid var(--c-accent); color: var(--c-ink-2);
}
.prose figure { margin: 0; display: grid; gap: var(--sp-2); }
.prose figcaption { font-size: var(--s-2); color: var(--c-ink-3); }
.prose .code, .prose .table-scroll { font-size: var(--s-2); }

.ph {
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-2);
  background: repeating-linear-gradient(135deg, transparent 0 8px, var(--c-surface-2) 8px 16px);
  display: grid; place-items: center; min-height: 180px; padding: var(--sp-5);
}
.ph span { font-family: var(--f-mono); font-size: var(--s-2); color: var(--c-ink-3); text-align: center; }

/* --- Table of contents -------------------------------------------------- */

.toc {
  border: 1px solid var(--c-line); border-radius: var(--r-2);
  background: var(--c-surface); padding: var(--sp-4); display: grid; gap: var(--sp-3);
}
.toc h2, .toc p.toc__title { font-family: var(--f-mono); font-size: var(--s-1); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-3); font-weight: 600; }
.toc ol, .toc ul { list-style: none; display: grid; gap: var(--sp-2); font-size: var(--s-2); }
.toc a { color: var(--c-ink-2); text-decoration: none; }
.toc a:hover { color: var(--c-accent); text-decoration: underline; }

.doc-layout { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); padding: var(--sp-6) 0 var(--sp-8); }
@media (min-width: 960px) {
  .doc-layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
  .doc-layout .toc { position: sticky; top: var(--sp-5); }
}

/* ==========================================================================
   Developers block, disclaimer, 404
   ========================================================================== */

.dev-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: start; }
@media (min-width: 900px) { .dev-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--sp-8); } }
.price-line { font-family: var(--f-mono); font-size: var(--s-2); color: var(--c-ink-2); }
.optional-line {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: baseline;
  border: 1px dashed var(--c-line-strong); border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4);
  font-size: var(--s-2); color: var(--c-ink-2);
}

.disclaimer { max-width: 62ch; display: grid; gap: var(--sp-4); }
.disclaimer p { font-size: var(--s-4); color: var(--c-ink-2); }

.page-404 { padding: var(--sp-9) 0; display: grid; gap: var(--sp-4); max-width: 46ch; }
.page-404 h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.15; }

/* ==========================================================================
   States playground (prototype-only scaffolding)
   ========================================================================== */

.lab { display: grid; gap: var(--sp-6); padding: var(--sp-6) 0 var(--sp-9); }
.lab__item { display: grid; gap: var(--sp-3); }
.lab__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); border-bottom: 1px solid var(--c-line); padding-bottom: var(--sp-2); }
.lab__num { font-family: var(--f-mono); font-size: var(--s-1); color: var(--c-ink-3); }
.lab__title { font-size: var(--s-5); }
.lab__note { font-size: var(--s-2); color: var(--c-ink-3); max-width: var(--measure); }
.lab__frame { max-width: 640px; }

/* ==========================================================================
   Утилиты вместо атрибута style
   CSP витрины запрещает инлайновые стили (style-src 'self'), поэтому переносим
   в классы то, что в прототипе стояло атрибутом. Обнаружено Lighthouse 11.08.2026:
   полоса скора рисовалась во всю ширину, блок демо терял отбивку.
   ========================================================================== */

.u-mt-1 { margin-top: var(--sp-1); }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-h2 { font-size: var(--s-6); }
.u-flush-top { padding-top: 0; }

.demo--split { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--c-line); }
.dev-copy { color: var(--c-ink-2); max-width: 46ch; }
.page-404 .lede-404 { color: var(--c-ink-2); font-size: var(--s-4); }

/* Ширина полосы у живого результата задаётся из JS (CSSOM разрешён), у статичного
   примера на лендинге — классом: атрибут style до браузера не доедет. */
.track__fill--sample { width: 34%; }