/* Document pages — Terms, Privacy, Cookie Policy, Deposit Limits.
 * Mockup: hero [79:826] 360px on the page background, document-body [79:839]
 * on #ece9f2 with a 1100px column inside 1440 (padding 100). */

.doc-hero {
  position: relative; overflow: hidden; background: var(--color-bg);
  display: flex; align-items: center;
  min-height: 360px; padding-block: var(--space-80);
}
.doc-hero__watermark {
  top: 60px; left: 120px;
  font-size: 180px; line-height: 230px; color: #fff; opacity: .03;
}
.doc-hero__inner {
  position: relative; z-index: var(--z-content);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-48);
}
.doc-hero__left { display: flex; flex-direction: column; gap: var(--space-16); width: 720px; }
.doc-hero__title {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: 64px; line-height: 67px; text-transform: uppercase; color: var(--color-white);
}
.doc-hero__lead { margin: 0; font-size: var(--fs-body-sm); line-height: 23px; color: var(--color-muted); }
/* hero-visual [79:35]: место 320×200. Свечение — общий .hero-blob. */
.doc-hero__visual { width: 320px; height: 200px; flex: none; align-self: flex-end; }

.doc-body { padding: var(--space-80) 100px; background: var(--color-light-tint); }
.doc-body__inner { width: 100%; max-width: 1100px; margin-inline: auto; }

.doc-section { display: flex; gap: var(--space-48); align-items: flex-start; }
.doc-section__num {
  width: 100px; flex: none; margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); line-height: 51px; color: var(--color-brand);
}
.doc-section__content { flex: 1; display: flex; flex-direction: column; gap: var(--space-16); }
.doc-section__heading {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h5); line-height: 36px; color: var(--color-text-dark);
}
.doc-section__content p { margin: 0; font-size: var(--fs-body); line-height: 26px; color: var(--color-muted-3); }
.doc-list { display: grid; gap: var(--space-12); }
.doc-list li {
  position: relative; padding-left: var(--space-20);
  font-size: var(--fs-body); line-height: 26px; color: var(--color-muted-3);
}
.doc-list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand);
}
/* У <hr> есть браузерный margin-block: .5em — иначе блоки разъезжаются на 8px. */
.doc-divider { margin: var(--space-48) 0; border: 0; border-top: 1px solid rgba(17, 16, 20, .1); }

@media (max-width: 1199px) {
  .doc-body { padding-inline: var(--space-40); }
  .doc-hero__left { width: auto; }
}

/* Rich sections (Responsible Gambling): eyebrow, numbered cards, sub-headings. */
.doc-section__content .eyebrow { color: var(--color-brand); }
.doc-section__card-num {
  margin: var(--space-16) 0 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); line-height: 51px; color: var(--color-brand);
}
.doc-section__sub {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-lead); line-height: 23px; color: var(--color-text-dark);
}
.doc-section__link { margin: 0; }

.doc-hero__left .eyebrow { color: var(--color-brand-light); }   /* герой на тёмном */
.doc-hero__title .accent { color: var(--color-brand); }
.doc-hero__support { display: grid; gap: var(--space-8); margin-top: var(--space-8); }
.doc-hero__support p { margin: 0; font-size: var(--fs-ui); line-height: 18px; color: var(--color-muted); }
.doc-hero__support-label { font-weight: 700; color: var(--color-white) !important; }

.doc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin: var(--space-8) 0 0; }

/* Responsible Gambling: каждая секция — полноширинная полоса (макет section-01…09),
   а не блок внутри общей колонки: иначе метки меряют 1100 против 1440 в макете. */
.doc-sections { background: var(--color-bg); }
.doc-strip { padding: var(--space-80) var(--container-pad); }

.doc-strip__inner { display: block; }
.doc-hero__left--wide { width: 1092px; max-width: 100%; }

@media (max-width: 767px) {
  .doc-strip { padding: var(--space-40) var(--container-pad-mobile); }
}

/* RG-полоса: две колонки макета (left 384 / right 872, gap 24). */
.doc-strip__content { display: flex; gap: var(--space-24); align-items: flex-start; }
.doc-strip__left { width: 384px; flex: none; display: flex; flex-direction: column; gap: var(--space-12); }
.doc-strip__right { flex: 1; display: flex; flex-direction: column; gap: var(--space-20); }
.doc-strip__right p { margin: 0; font-size: var(--fs-ui); line-height: 21px; color: var(--color-muted-3); }
.doc-list--split { grid-template-columns: repeat(2, 1fr); gap: var(--space-12) var(--space-24); }
.doc-list--split li { font-size: var(--fs-ui); line-height: 21px; }
.doc-list--split li::before { top: 8px; }

@media (max-width: 1199px) {
  .doc-strip__content { flex-direction: column; }
  .doc-strip__left { width: 100%; }
}
@media (max-width: 767px) {
  .doc-list--split { grid-template-columns: 1fr; }
}

/* Полоса без деления надвое: у section-02, 08 и 09 макет ведёт надзаголовок,
   заголовок и содержимое во всю ширину контейнера, друг под другом. */
.doc-strip--full .doc-strip__content { flex-direction: column; gap: var(--space-40); }
.doc-strip--full .doc-strip__left { width: 100%; }
.doc-strip--full .doc-strip__right { width: 100%; }

/* Плитки «HISTORY / ACTIVITY / SPEND / REVIEW» (section-05 labels, 200×90). */
.doc-labels { display: grid; grid-template-columns: repeat(4, minmax(0, 200px)); gap: var(--space-24); }
.doc-label {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--space-16); border-radius: var(--radius-xl);
  background: var(--fill-glass-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .078);
}
.doc-strip__right .doc-label__title {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small);
  line-height: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-brand-light);
}
.doc-strip__right .doc-label__note { font-size: var(--fs-ui); line-height: 18px; color: var(--color-muted); }
@media (max-width: 1023px) { .doc-labels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .doc-labels { grid-template-columns: 1fr; } }

/* Карточки инструментов RG (section-02 tools-grid, section-05 плитки). */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); }
/* tools-grid [53:82]: шесть колонок по 193px, последняя карточка занимает две. */
.tool-grid--tools { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; }
.tool-grid--tools > :nth-child(5):last-child { grid-column: span 2; }
/* responsibilities-grid [53:175]: три колонки по 394px, между ними — тонкая
   брендовая линия [53:180] 1×220 на равном отступе 24px с каждой стороны. */
.tool-grid--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 49px; align-items: start; }
.tool-grid--thirds .tool-card + .tool-card { position: relative; }
.tool-grid--thirds .tool-card + .tool-card::before {
  content: ''; position: absolute; left: -25px; top: 0;
  width: 1px; height: 220px; background: var(--color-brand);
}
.tool-card {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--space-24); border-radius: var(--radius-xl);   /* макет: 394 − 346 = 24 */
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-border-light);
}
/* Номер карточки в макете — крупная цифра 48px/61.25 обычного начертания
   ([53:85], [53:177]), а не мелкая подпись. Селектор с .doc-strip__right взят
   намеренно: правило контейнера `.doc-strip__right p` тут же перебивало класс
   карточки по специфичности и сажало цифру на 14px. */
.tool-card__num,
.doc-strip__right .tool-card p.tool-card__num {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: 48px; line-height: 61.25px; color: var(--color-brand);
}
.tool-card__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lead); line-height: 23px; color: var(--color-text-dark); }
.tool-card p,
.doc-strip__right .tool-card p { font-size: var(--fs-ui); line-height: 21px; color: var(--color-muted-3); }

@media (max-width: 1199px) {
  .tool-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-grid--tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-grid--tools > :nth-child(5):last-child { grid-column: span 2; }
}
@media (max-width: 767px) {
  .tool-grid,
  .tool-grid--tools,
  .tool-grid--thirds { grid-template-columns: 1fr; }
  .tool-grid--tools > :nth-child(5):last-child { grid-column: auto; }
}

/* ── мобильный фрейм документа [130:343] ──────────────────────────────────
   Числа из макета: герой pad 48/20 gap 16, заголовок 40/42, лид 14/21;
   тело pad 48/20 gap 48, секция gap 12 (номер 30/38, заголовок 24/31, текст 15/24). */
@media (max-width: 767px) {
  .doc-hero { min-height: 0; padding: var(--space-48) var(--space-20); }
  .doc-hero__inner { flex-direction: column; align-items: flex-start; gap: var(--space-16); }
  .doc-hero__left { width: auto; gap: var(--space-16); }
  .doc-hero__watermark { font-size: 96px; line-height: 122px; left: var(--space-20); top: 40px; }
  .doc-hero__title { font-size: 40px; line-height: 42px; }
  .doc-hero__lead { font-size: var(--fs-ui); line-height: 21px; }
  .doc-hero__visual { display: none; }

  .doc-body { padding: var(--space-48) var(--space-20); }
  .doc-section { flex-direction: column; gap: var(--space-12); }
  .doc-section__num { width: auto; font-size: 30px; line-height: 38.28px; }
  .doc-section__content { gap: var(--space-12); }
  .doc-section__heading { font-size: var(--fs-h6); line-height: 31px; }
  .doc-section__content p,
  .doc-list li { font-size: var(--fs-body-sm); line-height: 24px; }
  .doc-list { gap: var(--space-12); }
  /* В макете блоки разделяет зазор 48 и линия без собственных отступов. */
  .doc-divider { margin: var(--space-24) 0; }

  .doc-strip { padding: var(--space-40) var(--space-20); }
  .doc-strip__content { flex-direction: column; gap: var(--space-16); }
  .doc-strip__left { width: 100%; }
  .doc-section__card-num { font-size: 30px; line-height: 38.28px; }
}

/* Лид героя: макет даёт разные тексты для 1440 и 390 (M2), поэтому в разметке
   лежат оба, а показывается ровно один — скрытый display:none не читается
   ни скринридером, ни поиском как дубль на экране. */
.doc-hero__lead--narrow { display: none; }
@media (max-width: 767px) {
  .doc-hero__lead--wide { display: none; }
  .doc-hero__lead--narrow { display: block; }
}

/* Дата обновления документа — тихая строка в конце, не спорит с текстом. */
.doc-updated {
  margin: var(--space-48) 0 0;
  font-size: var(--fs-small); line-height: 17px; color: var(--color-muted-2);
}
/* Полоса даты продолжает последнюю секцию документа: собственного фона у неё нет —
   в макете такой строки вовсе нет, и светлой полосой она рвала чередование. */
.doc-strip--updated { padding-block: 0 var(--space-48); }
.doc-strip--updated.section--deep .doc-updated,
.doc-strip--updated.section--base .doc-updated { color: var(--color-muted); }
.doc-strip--updated .doc-updated { margin-top: 0; }

/* Герой страницы RG в макете залит градиентом, а не сплошным фоном. */
.doc-hero--gradient { background: var(--grad-hero); }

/* ── полосы документа на тёмном фоне ──────────────────────────────────────
   Базовые цвета документа рассчитаны на светлую подложку (#ece9f2). Когда полоса
   тёмная — как чередует макет на /responsible-gambling — текст обязан развернуться,
   иначе заголовок печатается тёмным по тёмному. */
.doc-strip.section--deep .doc-section__heading,
.doc-strip.section--base .doc-section__heading,
.doc-strip.section--deep .doc-section__sub,
.doc-strip.section--base .doc-section__sub { color: var(--color-white); }

.doc-strip.section--deep .doc-strip__right p,
.doc-strip.section--base .doc-strip__right p,
.doc-strip.section--deep .doc-list li,
.doc-strip.section--base .doc-list li { color: var(--color-muted); }

.doc-strip.section--deep .doc-section__num,
.doc-strip.section--base .doc-section__num,
.doc-strip.section--deep .tool-card__num,
.doc-strip.section--base .tool-card__num { color: var(--color-brand-light); }
.doc-strip.section--deep .eyebrow,
.doc-strip.section--base .eyebrow { color: var(--color-brand-light); }

.doc-strip.section--deep .tool-card,
.doc-strip.section--base .tool-card {
  background: var(--fill-glass-soft);
  box-shadow: inset 0 0 0 1px var(--color-border-brand);
}
.doc-strip.section--deep .tool-card__title,
.doc-strip.section--base .tool-card__title { color: var(--color-white); }
.doc-strip.section--deep .tool-card p,
.doc-strip.section--base .tool-card p { color: var(--color-muted); }
.doc-strip.section--deep .link-accent,
.doc-strip.section--base .link-accent { color: var(--color-brand-light); }