/* Document pages — deposit-limits[45:200], betstop[40:4], cookie-policy[45:8],
 * privacy-policy[45:425], terms-and-conditions[45:700] and their mobile twins.
 *
 * They share one layout: a plain hero, an intro paragraph above a rule, then a
 * list of numbered sections — a 120px numeral column and an 864px text column,
 * separated by a hairline. NOTE the container here is 1280 wide (80px side
 * padding), not the 1360 of the marketing pages.
 */

.doc-container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--space-80);
}

/* ── hero (deposit-limits[45:224]) ────────────────────────────────────── */
.doc-hero { padding-block: 96px var(--space-80); }
.doc-hero__stack { display: flex; flex-direction: column; gap: var(--space-12); }
.doc-hero__title {
  font-size: var(--fs-h1); line-height: 68.4px; font-weight: 800;
  text-transform: uppercase;
}
.doc-hero__mark {
  background: var(--color-violet); color: #fff;
  border-radius: var(--radius-sm); padding: 6px 12px;
}
.doc-hero__meta { font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800; text-transform: uppercase; color: var(--color-muted); }

/* ── intro (deposit-limits[45:235]) ───────────────────────────────────── */
/* 207 in the frame = 40 top + the 127 text wrapper + 40 — the bottom padding of
   the section frame does not add to its height (deposit-limits[45:235]). */
.doc-intro { padding-block: var(--space-40) 0; }
.doc-intro__inner { border-top: 1px solid var(--color-border); }
.doc-intro__text {
  max-width: 740px; padding-block: var(--space-40);
  font-size: var(--fs-lg); line-height: 29px; font-weight: 500;
}

/* ── numbered sections (deposit-limits[45:239]) ───────────────────────── */
.doc-sections { padding-bottom: var(--space-80); }
.doc-section {
  display: flex; gap: var(--space-48);
  padding-block: var(--space-48);
  border-bottom: 1px solid var(--color-border);
}
.doc-section__num {
  flex: 0 0 120px;
  font-size: var(--fs-h3); line-height: 55.44px; font-weight: 800;
  color: var(--color-lime);
}
.doc-section__num--violet { color: var(--color-violet); }
/* content-col[45:270] в макете жёстко 864, а не растянут на остаток строки:
   иначе строка текста длиннее макетной и абзацы переносятся иначе. */
.doc-section__body { flex: 0 1 864px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-24); }
/* 45:744: в макете у заголовка разрядка 0.04em (на 24px это ровно 1px) */
.doc-section__title { font-size: var(--fs-lead); line-height: 30.24px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.doc-prose { display: flex; flex-direction: column; gap: var(--space-16); }
/* Текст статей в макете приглушён до 0.8 (45:794 и соседние, 122 узла на
   Terms / Privacy / Cookie / Deposit Limits). Задаём это ЦВЕТОМ, а не opacity:
   прозрачность родителя нельзя отменить у вложенной ссылки — фиолетовые ссылки
   гасли вместе с абзацем до 3.87:1. rgb(72,72,72) — тот же тон, 9.15:1. */
.doc-prose p, .doc-prose li { font-size: var(--fs-body); line-height: 26px; color: rgb(72, 72, 72); }
.doc-prose a { font-weight: 700; color: var(--color-violet); text-decoration: underline; text-underline-offset: 2px; }
.doc-prose a:hover { color: var(--color-ink); }
.doc-prose ul { display: flex; flex-direction: column; gap: var(--space-8); }
.doc-prose li { padding-left: var(--space-20); position: relative; }
/* 45:256: маркер — фиолетовый круг 8×8 на 8px от верха строки (ROUNDED_RECTANGLE
   с радиусом 4), а не лаймовый квадрат. На мобильном он 6×6 (81:601). */
.doc-prose li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--color-violet);
}

/* callout (deposit-limits[45:274]) */
/* 45:274: заливка #f9fafb и лаймовая полоса слева 4px (inset-тень в макете) */
.doc-callout {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding: var(--space-20); background: var(--color-surface-2);
  box-shadow: inset 4px 0 0 0 var(--color-lime);
}
.doc-callout__label { font-size: var(--fs-2xs); line-height: 15.12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.doc-callout p { font-size: var(--fs-small); line-height: 21px; }

/* definition rows («Daily — resets at midnight», «Decreasing a limit — …») */
.doc-defs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); }
.doc-def {
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-20); border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.doc-def__term { font-size: var(--fs-small); line-height: 18px; font-weight: 800; text-transform: uppercase; }
.doc-def__text { font-size: var(--fs-xs); line-height: 20px; }

.doc-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); }

/* ── mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .doc-container { padding-inline: var(--container-pad-m); }
  .doc-hero { padding-block: var(--space-32) var(--space-24); }
  .doc-hero__title { font-size: 38px; line-height: 38px; }
  .doc-hero__mark { padding: 4px 10px; }
  .doc-intro { padding-block: var(--space-16); }
  .doc-intro__text { padding-block: var(--space-24); font-size: var(--fs-body-sm); line-height: 24px; }
  /* The mobile frames lay a section out differently from the desktop column:
     the numeral and the title share one row (numeral 40 wide, gap 12), and the
     body drops below with a 40px indent. Sections are 24 apart with a 32px tail
     and no rule (deposit-limits-mobile[81:579]). */
  .doc-sections { padding-bottom: var(--space-48); }
  .doc-sections > .doc-container { display: flex; flex-direction: column; gap: var(--space-24); }
  .doc-section {
    display: grid; grid-template-columns: 40px 1fr;
    column-gap: var(--space-12); row-gap: var(--space-16);
    padding-block: 0 var(--space-32); border-bottom: 0;
  }
  .doc-section__body { display: contents; }
  .doc-section__num { grid-row: 1; grid-column: 1; font-size: var(--fs-h6); line-height: 35.28px; }
  .doc-section__title { grid-row: 1; grid-column: 2; align-self: center; font-size: var(--fs-lg); line-height: 23px; }
  .doc-prose { grid-row: 2; grid-column: 1 / -1; padding-left: var(--space-40); gap: var(--space-12); }
  .doc-prose p, .doc-prose li { font-size: var(--fs-small); line-height: 22px; }
  .doc-defs { grid-template-columns: 1fr; gap: var(--space-10); }
  .doc-callout { padding: var(--space-16); }
}

/* ── subsections «3.1 …» (cookie-policy[45:68], terms-and-conditions[45:792]) ──
 * A label over its paragraph inside .doc-prose: 16/20 ExtraBold + 15/24 body,
 * gap 8 (subsection frame), rows spaced by the .doc-prose gap of 16.
 * Mixed case in the mockup — no uppercase here, unlike .doc-section__title.
 * Mobile numbers from cookie-policy-mobile[81:406] — 14/18 over 13/20.
 */
.doc-sub { display: flex; flex-direction: column; gap: var(--space-8); }
.doc-sub__title { font-size: var(--fs-body); line-height: 20px; font-weight: 800; }
.doc-prose .doc-sub p { font-size: var(--fs-body-sm); line-height: 24px; }

/* stacked definition rows (terms-and-conditions[45:753] definition-row: full
 * 864 wide, gap 4 inside, gap 12 between, term 15/19, text 15/23 — no card
 * frame, unlike the 3-up .doc-defs grid). Mobile: 13/16 both, from
 * terms-and-conditions-mobile[81:1047]. */
.doc-defs--rows { grid-template-columns: 1fr; gap: var(--space-12); }
.doc-defs--rows .doc-def { padding: 0; border-radius: 0; box-shadow: none; gap: var(--space-4); }
.doc-defs--rows .doc-def__term { font-size: var(--fs-body-sm); line-height: 19px; text-transform: none; }
.doc-defs--rows .doc-def__text { font-size: var(--fs-body-sm); line-height: 23px; }

@media (max-width: 1199px) {
  .doc-sub__title { font-size: var(--fs-small); line-height: 18px; }
  .doc-prose .doc-sub p { font-size: var(--fs-xs); line-height: 20px; }
  .doc-defs--rows { gap: var(--space-12); }
  .doc-defs--rows .doc-def__term,
  .doc-defs--rows .doc-def__text { font-size: var(--fs-xs); line-height: 16px; }
}

/* «Related information» link column (cookie-policy[45:122] links-list: column,
 * gap 12, 14/18 Bold violet — plain links, not buttons). */
.doc-links { display: flex; flex-direction: column; gap: var(--space-12); }
.doc-prose .doc-links a { font-size: var(--fs-small); line-height: 18px; }
/* 14/18 leaves an 18px-tall target; raise it to 24 with a pseudo-element, as
   .tap-target does elsewhere. The 12px gap keeps neighbours from touching. */
.doc-links a { position: relative; }
.doc-links a::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%;
  height: 100%; min-height: 24px; z-index: 1;
}

/* На мобильном маркер меньше — 6px и ближе к тексту (81:601). */
@media (max-width: 1199px) {
  .doc-prose li { padding-left: 18px; }
  .doc-prose li::before {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-violet); top: 8px;
  }
  /* the mobile frames drop the card frame around a definition: it is just a
     term over its text, 12 apart (deposit-limits-mobile[81:620] subheadings) */
  .doc-defs { gap: var(--space-12); }
  .doc-def { padding: 0; border-radius: 0; box-shadow: none; gap: var(--space-4); }
  .doc-def__term { font-size: var(--fs-small); line-height: 21px; text-transform: none; }
  .doc-def__text { font-size: var(--fs-small); line-height: 21px; }
}

/* The four document frames belong to the 51px utility-strip group, not the 44px
   one the shared block is built for (deposit-limits-mobile[85:2150]):
   gap 6, warning 11/15.4, links 11/14 with gap 12. */
@media (max-width: 1199px) {
  .u-strip { font-size: var(--fs-3xs); line-height: 15.4px; }
  .u-strip__inner { gap: var(--space-6); }
  .u-strip__links { font-size: var(--fs-3xs); line-height: 14px; gap: var(--space-12); }
}