/* ═══════════════════════════════════════════════════════════════════
   SELFYDE — colour corrections
   Shared by both typography candidates (/v2a, /v2b). Loaded after
   main.css and hero-v2.css so it wins on equal specificity.

   Every ratio in the comments is measured against --bg-0 (#06080b),
   not estimated. AA for body text is 4.5:1.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Was #4d5462 = 2.64:1. This tier carries meaning, not decoration:
     the footer disclaimer, the footer links, research citations,
     testimonial attributions and the section numbers all sat on it.
     main.css already flagged this at .rsec__ref but only patched the
     one place. */
  --ink-faint: #7b8494;            /* 5.32:1 */

  /* Was #cfe0ff = 15.05:1 — high enough that the eye resolves it as
     white, so the accent did no work anywhere: FREE/PREVIEW tags and
     the institution names read as plain white text. Dropped until it
     registers as a colour while staying comfortably AA. */
  --glow: #7aa5e8;                 /* 8.00:1 */
}

/* The hero was the only #000 on the site; everything else is #06080b,
   and the seam showed along the hero's bottom border. Unifying on
   --bg-0 rather than on #000 — pure black also smears on OLED. */
.hv { background: var(--bg-0); }

/* Hero greys ran on their own rgba ladder, below AA at the bottom.
   0.55 = 6.26:1; the old values are in each comment. */
.hv__trust          { color: rgba(255, 255, 255, 0.55); }  /* was .42 → 4.03 */
.hv__scan-note      { color: rgba(255, 255, 255, 0.55); }  /* was .45 → 4.48 */
.hv__science-lead   { color: rgba(255, 255, 255, 0.55); }  /* was .40 → 3.74 */
.hv__science a i    { color: rgba(255, 255, 255, 0.55); }  /* was .36 → 3.23 */
.hv__scan-legend b  { color: rgba(255, 255, 255, 0.55); }  /* was .40 → 3.74 */
.hv__science a i::after { color: rgba(255, 255, 255, 0.62); }

/* Not colour: max-width: 20ch overrode the <br> authored in the closing
   headline and broke the line mid-phrase — "ONE PHOTO. A FEW / MINUTES."
   With the cap gone the second line is 39 mono caps wide, which needs the
   size ceiling dropped from 46px to fit 1104px of column; balance keeps
   the wrap even on the narrower widths where it still has to break. */
.final h2 {
  max-width: none;
  font-size: clamp(19px, 2.9vw, 40px);
  text-wrap: balance;
}

/* Accent values that were hardcoded rather than tokenised, so the
   --glow change above would have skipped them and left two blues. */
::selection            { background: rgba(122, 165, 232, 0.3); }
.report__row .tag--free { border-color: rgba(122, 165, 232, 0.55); }

/* The zone numbers stay white — they label the plate rather than
   flag anything, and the accent read as noise against the mesh.
   Same hue as before, lifted off the old 0.5 alpha so they clear AA. */
.hv__cuts .znum text   { fill: rgba(231, 234, 239, 0.72); }
.hv__cuts .zname text  { fill: var(--ink); }

/* ── тестовая страница /new-copy: список «что вы узнаете» в герое ──────
   Самое продающее содержание лежало в секции /02, ниже трёх экранов.
   Здесь оно поднято на первый экран, на место технической легенды. */
.hv__reveal-lead {
  grid-column: 1 / -1;
  margin-bottom: 2px;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.hv__scan-legend span:not(.hv__reveal-lead)::before {
  content: "— ";
  color: rgba(255, 255, 255, 0.35);
}
.hv__scan-legend { gap: 11px 20px; }

/* The list is the selling content now, so the plate gives up the height:
   at full width the mesh left ~110px of dead space and pushed the hero
   past the fold (956px against a 900px viewport). */
.hv__plate {
  max-width: 370px;
  margin: 0 auto;
}

/* ── /new-copy: стена институтов вместо колец-печатей ──────────────────
   Настоящие знаки (щит, тигр, дерево) — чужие товарные знаки, а институты
   Selfyde не одобряют: об этом прямо сказано в примечании ниже секции.
   Кольцо с инициалом изображало герб, то есть намекало ровно на то, чего
   нет. Чистый словесный знак — это просто название, факт, и он же ближе
   к референсу. */
.instwall { margin: -14px 0 52px; }
.instwall__lead,
.instwall__note {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.instwall__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px 20px;
  align-items: center;
  margin: 26px 0 22px;
}
.instwall__grid span {
  font-size: clamp(15px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(231, 234, 239, 0.82);
  white-space: nowrap;
}
.instwall__note { letter-spacing: 0.1em; text-transform: none; }

/* строки исследований: кольцо ушло, название стало самим знаком */
.research__row { grid-template-columns: 132px 1fr auto; }
.research__row .inst {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(231, 234, 239, 0.82);
  transition: color 0.25s;
}
.research__row:hover .inst { color: var(--ink); }

@media (max-width: 900px) {
  .instwall__grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .research__row .inst { font-size: 12px; }
  /* tokens-v3.css loads after main.css, so the unguarded rule above beat
     main.css's own mobile rule — media queries carry no extra specificity.
     Re-assert the single column here. */
  .research__row { grid-template-columns: 1fr; }
}

/* Числа в списке — акцент: это единственные цифры на первом экране, и
   каждая сверена с LIST_LENGTHS в src/report/generate.ts. */
.hv__scan-legend b {
  display: inline-block;
  min-width: 2.2em;
  color: var(--ink);
  font-weight: 700;
}
.hv__scan-legend span:not(.hv__reveal-lead)::before { content: none; }
.hv__scan-legend { grid-template-columns: 1fr 1fr; gap: 10px 22px; }

/* ── /new-copy: образец разбора вместо перечня возможностей ────────────
   Список фич дублировал подзаголовок слева. Здесь вместо него показан
   сам результат: архетип, пять осей из SCALE_AXES (warmth, trustworthiness,
   dominance, energy, tension) и разворот fuels_you / drains_you из
   OperatingManual — то есть ровно тот вопрос, ради которого приходят:
   где я на своём месте, а где нет. */
.spec { display: block; margin-top: 20px; }
.spec__lead {
  display: block;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--glow);
}
.spec__lead em { font-style: normal; color: rgba(255, 255, 255, 0.4); }
.spec__name {
  margin: 13px 0 7px;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.spec__essence {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}
.spec__block { margin: 20px 0 18px; }
.spec__key {
  display: block;
  margin-bottom: 9px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.spec__key b { color: rgba(255, 255, 255, 0.7); font-weight: 400; }

.spec__scale {
  display: grid;
  grid-template-columns: 9ch 1fr 3ch;
  align-items: center;
  gap: 12px;
  padding: 3px 0;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}
.spec__scale i {
  position: relative;
  display: block;
  height: 5px;
  background: rgba(255, 255, 255, 0.09);
}
/* the 50 = average-face marker, same idea as .scale__mid in the report */
.spec__scale i::after {
  content: "";
  position: absolute;
  top: -2px; bottom: -2px; left: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
}
.spec__scale u {
  display: block;
  height: 100%;
  background: var(--glow);
}
.spec__scale b {
  text-align: right;
  color: var(--ink);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.spec__fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.spec__fit p {
  font-size: 11.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}
.hv__plate { max-width: 300px; }

@media (max-width: 700px) {
  .spec__fit { grid-template-columns: 1fr; gap: 14px; }
}