/* Спільні стилі юридичних сторінок лендингу (оферта, політика, повернення).
   Токени — ті самі, що в index.html (docs/design-system). Файл окремий, бо
   три сторінки ділять одну верстку, а дублювати <style> у кожній означало б
   правити колір у трьох місцях. */

:root {
  --gr-paper: #F7F3EE;
  --gr-surface: #FFFFFF;
  --gr-surface-tint: #FDF9F6;
  --gr-soft: #F1EBE3;
  --gr-line: #E7E0D6;
  --gr-ink: #1E1913;
  --gr-body: #4A4133;
  --gr-muted: #877868;
  --gr-label: #927C5D;
  --gr-primary: #12100E;
  --gr-on-primary: #F7F3EE;
  --gr-accent: #8D6948;
  --gr-taupe: #B8A89A;
  --gr-dark-line: rgba(247, 243, 238, .14);
  --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --r-default: 12px; --r-card: 18px;
  --font: "Montserrat", system-ui, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font: 400 16px/1.7 var(--font);
  color: var(--gr-body);
  background: var(--gr-paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gr-accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--gr-ink); }

.gr-container { width: min(100% - 2 * var(--sp-5), 820px); margin-inline: auto; }

/* ── Шапка ─────────────────────────────────────────────── */
.legal-nav {
  background: var(--gr-primary);
  padding-block: var(--sp-4);
}
.legal-nav .gr-container { display: flex; align-items: center; gap: var(--sp-5); }
.legal-nav img { height: 26px; width: auto; }
.legal-nav a.back {
  margin-left: auto; color: var(--gr-taupe); font-size: 14px; text-decoration: none;
}
.legal-nav a.back:hover { color: var(--gr-on-primary); }

/* ── Тіло документа ────────────────────────────────────── */
.legal-main { padding-block: var(--sp-8) var(--sp-7); }

.legal-title { font-size: clamp(26px, 4.5vw, 36px); line-height: 1.2; color: var(--gr-ink); font-weight: 600; }
.legal-meta {
  margin-top: var(--sp-3); color: var(--gr-muted); font-size: 14px;
  padding-bottom: var(--sp-5); border-bottom: 1px solid var(--gr-line);
}

.legal-main h2 {
  font-size: 20px; line-height: 1.3; color: var(--gr-ink); font-weight: 600;
  margin-top: var(--sp-7); margin-bottom: var(--sp-4);
}
.legal-main h3 {
  font-size: 17px; color: var(--gr-ink); font-weight: 600;
  margin-top: var(--sp-5); margin-bottom: var(--sp-3);
}
.legal-main p { margin-bottom: var(--sp-4); }
.legal-main ul, .legal-main ol { margin: 0 0 var(--sp-4) var(--sp-5); }
.legal-main li { margin-bottom: var(--sp-2); }
.legal-main strong { color: var(--gr-ink); font-weight: 600; }

/* Нумерація пунктів «1.1.» — вручну в тексті, щоб на неї можна було
   послатися з іншого документа і щоб копіювання зберігало номер. */
.legal-main .clause { display: block; }

.legal-card {
  background: var(--gr-surface); border: 1px solid var(--gr-line);
  border-radius: var(--r-card); padding: var(--sp-5);
  margin-block: var(--sp-5);
}
.legal-card p:last-child { margin-bottom: 0; }

.legal-table { width: 100%; border-collapse: collapse; margin-block: var(--sp-4); font-size: 15px; }
.legal-table th, .legal-table td {
  text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--gr-line); vertical-align: top;
}
.legal-table th { color: var(--gr-ink); font-weight: 600; }
.legal-wrap { overflow-x: auto; }

.legal-toc {
  background: var(--gr-surface-tint); border: 1px solid var(--gr-line);
  border-radius: var(--r-card); padding: var(--sp-5); margin-block: var(--sp-6);
}
.legal-toc ol { margin-bottom: 0; }

/* ── Підвал ────────────────────────────────────────────── */
.legal-footer { background: var(--gr-primary); color: var(--gr-taupe); padding-block: var(--sp-6); font-size: 13px; }
.legal-footer a { color: var(--gr-taupe); }
.legal-footer a:hover { color: var(--gr-on-primary); }
.legal-footer .req { margin-bottom: var(--sp-4); line-height: 1.8; }
.legal-footer .links { display: flex; flex-wrap: wrap; gap: var(--sp-5); }

@media (max-width: 640px) {
  .legal-main { padding-block: var(--sp-6) var(--sp-6); }
  body { font-size: 15px; }
}