/* ============================================================
   p-legal.css — только две страницы: /privacy/ и /404.html
   Цвета берутся из переменных :root в app.css, своих hex нет.
   Ни один блок здесь не полагается на JS: страницы обязаны
   читаться с выключенными скриптами (поэтому без data-rise).
   ============================================================ */

/* ---------- Колонка юридического текста ---------- */

.legal {
  max-width: 68ch;
}

.legal-meta {
  margin: 0 0 clamp(30px, 3.4vw, 48px);
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--gold);
  font-size: clamp(13px, 1.05vw, 14.5px);
  line-height: 1.6;
  color: var(--ink-mute);
}
.legal-meta b { color: var(--ink-soft); font-weight: 500; }

/* Раздел политики: номер вынесен в поле слева, на узком экране встаёт над текстом. */
.legal-sec + .legal-sec {
  margin-block-start: clamp(34px, 3.8vw, 56px);
  padding-block-start: clamp(34px, 3.8vw, 56px);
  border-block-start: 1px solid var(--line);
}

.legal-sec h2 {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.2vw, 16px);
  margin: 0 0 clamp(14px, 1.5vw, 20px);
  font-family: 'Roboto Condensed', 'Roboto', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.16;
  letter-spacing: .005em;
  text-transform: uppercase;
  text-wrap: balance;
}

.legal-sec h2 .n {
  flex: none;
  min-width: 1.9em;
  font-size: clamp(14px, 1.2vw, 17px);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.legal-sec h2 .n::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-block-start: .5em;
  background: var(--red);
}

.legal p {
  margin: 0 0 1.05em;
  font-size: clamp(14px, 1.12vw, 16px);
  line-height: 1.72;
  color: var(--ink-soft);
}
.legal p:last-child { margin-block-end: 0; }

.legal b,
.legal strong { color: var(--ink); font-weight: 500; }
.legal .gold { color: var(--gold); }

.legal a:not(.btn) {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: rgba(217, 172, 99, .45);
  transition: color .2s, text-decoration-color .2s;
  overflow-wrap: anywhere;
}
.legal a:not(.btn):hover {
  color: var(--gold-lite);
  text-decoration-color: currentColor;
}

/* ---------- Списки ---------- */

.legal-list {
  margin: 0 0 1.15em;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .72em;
}

.legal-list li {
  position: relative;
  padding-inline-start: 22px;
  font-size: clamp(14px, 1.12vw, 16px);
  line-height: 1.66;
  color: var(--ink-soft);
}

.legal-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: .62em;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
}

.legal-list--contacts li::before { background: var(--red); }

/* ---------- Хвост страницы ---------- */

.legal-rule {
  width: 100%;
  height: 1px;
  margin-block: clamp(38px, 4.2vw, 60px) clamp(26px, 3vw, 38px);
  background: var(--line);
}

.legal-cta { margin-block-start: 0; }

/* ============================================================
   404
   ============================================================ */

.e404 {
  padding-block: clamp(86px, 11vw, 168px) clamp(52px, 6.4vw, 92px);
}

.e404-code {
  margin: 0 0 clamp(10px, 1.2vw, 18px);
  font-family: 'Roboto Condensed', 'Roboto', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(76px, 15vw, 190px);
  line-height: .82;
  letter-spacing: -.02em;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-deep);
  opacity: .55;
  user-select: none;
}

/* Safari/Firefox без -webkit-text-stroke оставили бы прозрачный текст — подстраховка. */
@supports not (-webkit-text-stroke: 1px currentColor) {
  .e404-code { color: var(--gold-deep); opacity: .3; }
}

.e404-rule {
  width: 100%;
  height: 1px;
  margin-block: clamp(34px, 4vw, 56px) clamp(22px, 2.6vw, 34px);
  background: var(--line);
}

.e404-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  max-width: 1000px;
}

.e404-links a {
  display: block;
  padding: clamp(14px, 1.5vw, 20px) clamp(16px, 1.7vw, 22px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, .02);
  transition: border-color .25s cubic-bezier(.16, 1, .3, 1),
              background-color .25s cubic-bezier(.16, 1, .3, 1);
}
.e404-links a:hover {
  border-color: rgba(217, 172, 99, .38);
  background: rgba(217, 172, 99, .06);
}

.e404-links b {
  display: block;
  margin-block-end: 5px;
  font-family: 'Roboto Condensed', 'Roboto', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.2vw, 17px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
.e404-links a:hover b { color: var(--gold); }

.e404-links span {
  display: block;
  font-size: clamp(12.5px, 1vw, 14px);
  line-height: 1.5;
  color: var(--ink-mute);
}

/* ---------- Узкие экраны ---------- */

@media (max-width: 560px) {
  .legal-sec h2 {
    display: block;
  }
  .legal-sec h2 .n {
    display: block;
    margin-block-end: 10px;
  }
  .legal-sec h2 .n::after { width: 34px; }
}