/* The document used to be one 820px column, hero included. The hero is not
   body text, so it now sits in the same 1180px band every other page uses and
   the reading measure moved to the blocks that need it (the hero lead,
   .legal-section). Nothing else on the site centres its prose, and neither
   does this: the sections stay left-aligned with the hero copy above them. */
.legal-page {
  --legal-shell-pad: 32px;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: var(--legal-shell-pad) 0 80px;
  color: var(--trainys-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.7;
}

/* The global .seo-breadcrumbs sizes itself as a page-wide centered band
   (calc(100% - 40px)); inside the narrow .legal-page container that double
   inset pushed "Trainys / …" ~20px right of the hero kicker. Full width
   aligns the crumbs with «ДОКУМЕНТЫ» below. */
.legal-page .seo-breadcrumbs {
  width: 100%;
}

/* Legal hero: the sitewide `.seo-hero` composition (app.css), tuned here for a
   document header — a closing rule under it, and a type scale one step below
   the topic hero's. The figure is a price or a law number, and the dark shell
   cannot carry body ink. The values stay in this sheet so the other 170 pages
   do not carry them; everything they tune is a shared custom property, and the
   properties set directly are meant to hold at every width. `width: 100%`
   cancels the shared 1180px band: the hero already sits inside `.legal-page`,
   which is that band.

   It keeps the sitewide first-screen floor, and its shell is the only one
   wider than header + trail: the page's top padding and this hero's 8px margin
   go into `--hero-fold` too. */
.seo-hero.seo-hero--legal {
  --hero-fold: calc(var(--site-header-height) + var(--seo-breadcrumbs-height) + var(--legal-shell-pad) + 8px);
  --hero-figure: clamp(28px, 3.4vw, 40px);
  --hero-unit-pull: -8px;
  --hero-unit: 13px;
  --hero-note: 14px;
  --hero-copy-gap: 14px;
  width: 100%;
  margin: 8px 0 40px;
  border-bottom: 1px solid var(--trainys-line);
  padding-block: 0 32px;
}

.seo-hero.seo-hero--legal::before {
  content: none;
}

/* Sized to «конфиденциальности», one 18-character word: it fits the copy
   column unbroken at both ends of the range — 48px against a 640px column,
   28px against a phone's 366px. */
.seo-hero.seo-hero--legal h1 {
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.seo-hero.seo-hero--legal .seo-hero-lead {
  max-width: 52ch;
  font-size: 17px;
  line-height: 1.5;
}

.legal-section {
  max-width: 72ch;
  margin: 0 0 34px;
}

.legal-section h2 {
  margin: 0 0 12px;
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--trainys-ticket);
}

.legal-section p {
  margin: 0 0 14px;
  color: var(--trainys-text-body);
}

.legal-section ul {
  margin: 0 0 14px;
  padding-left: 22px;
  color: var(--trainys-text-body);
}

.legal-section li {
  margin: 0 0 8px;
}

.legal-section a {
  color: var(--trainys-coral-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-section a:hover {
  text-decoration: none;
}

.legal-section a:focus-visible {
  outline: 3px solid rgba(255, 116, 79, .44);
  outline-offset: 3px;
  border-radius: 4px;
}

.legal-section code {
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(36, 36, 47, .06);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
}

.legal-requisites {
  list-style: none;
  margin: 0 0 14px;
  padding: 18px 20px;
  border: 1px solid var(--trainys-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .55);
}

.legal-requisites li {
  margin: 0 0 8px;
}

.legal-requisites li:last-child {
  margin-bottom: 0;
}

/* Bare URLs in legal copy have no break opportunity on a narrow screen. */
.legal-page a {
  overflow-wrap: break-word;
}

.legal-table {
  width: 100%;
  margin: 4px 0 18px;
  border-collapse: collapse;
  font-size: 15px;
}

.legal-table th,
.legal-table td {
  padding: 10px 12px;
  border: 1px solid var(--trainys-line);
  text-align: left;
  vertical-align: top;
}

.legal-table thead th {
  background: rgba(36, 36, 47, .05);
  font-weight: 800;
  color: var(--trainys-ticket);
}

.legal-table td {
  color: var(--trainys-text-body);
}

@media (max-width: 560px) {
  /* A property, not a literal: `--hero-fold` above reads this padding back. */
  .legal-page {
    --legal-shell-pad: 24px;
    width: min(1180px, calc(100% - 24px));
    padding: var(--legal-shell-pad) 0 64px;
  }

  .legal-table {
    font-size: 14px;
  }

  .legal-table th,
  .legal-table td {
    padding: 8px 10px;
    overflow-wrap: break-word;
  }

  /* Auto layout cannot shrink a column below its longest word, so the cookie
     table overflowed at 360px. Fixed layout plus proportions guarantees fit. */
  .legal-table {
    table-layout: fixed;
  }

  .legal-table th:first-child,
  .legal-table td:first-child {
    width: 27%;
  }

  .legal-table th:last-child,
  .legal-table td:last-child {
    width: 20%;
  }
}