/* ═══════════════════════════════════════════════════════════════════════════
   doc.css — the legal pages (/oferta, /pryvatnist, /rekomendacii).

   They load app.css first and then this, so they inherit the SAME fonts, the
   same tokens, the same hairlines and the same footer as the landing page.
   That is not tidiness: before this, the legal pages loaded Google Fonts and
   rendered the wordmark in Cormorant Garamond, which meant the two documents a
   buyer opens to check whether we are real had a DIFFERENT LOGO from the page
   that sent them there — and a third-party IP leak the main page does not have,
   which the privacy policy then had to disclose. Both are now gone.
   ═══════════════════════════════════════════════════════════════════════════ */

.doc-nav{border-bottom:var(--hair-w) solid var(--hair);background:var(--paper)}
.doc-nav .wrap{display:flex;align-items:center;gap:var(--s-5);height:var(--nav-h)}
.doc-nav .nav-mk{margin-right:auto}
.doc-back{font-size:var(--fs-small);letter-spacing:var(--ls-small);color:var(--ink-3);
  display:inline-flex;align-items:center;gap:7px}
.doc-back:hover{color:var(--ink)}
.doc-back svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}

.doc{max-width:74ch;margin:0 auto;padding:clamp(44px,7vh,88px) var(--gutter) var(--section-y)}
.doc h1{font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-.03em;
  max-width:22ch}
.doc .doc-sub{margin-top:var(--s-4);font-size:var(--fs-small);letter-spacing:var(--ls-small);
  color:var(--ink-3);max-width:60ch}
.doc h2{font-size:var(--fs-h3);line-height:1.3;letter-spacing:var(--ls-h3);
  font-weight:var(--fw-strong);margin:var(--s-8) 0 var(--s-3);max-width:44ch}
.doc h3{font-size:var(--fs-body);font-weight:var(--fw-strong);letter-spacing:-.006em;
  margin:var(--s-5) 0 6px}
.doc p{margin-bottom:var(--s-3);color:var(--ink-2);max-width:70ch}
.doc ul,.doc ol{display:grid;gap:8px;margin-bottom:var(--s-4)}
.doc li{color:var(--ink-2);padding-left:18px;position:relative;max-width:68ch}
.doc li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1px;
  background:var(--hair-strong)}
.doc ol{counter-reset:n}
.doc ol>li{counter-increment:n;padding-left:26px}
.doc ol>li::before{content:counter(n) ".";width:auto;height:auto;background:none;
  top:0;color:var(--ink-4);font-variant-numeric:tabular-nums}

/* The gap-marker. Every unfilled registration detail is wrapped in one of
   these and nothing else on these pages looks like it. Inventing a ЄДР number
   or a РНОКПП would be the one defect on this site that is a LEGAL problem
   rather than a credibility one, so the placeholder stays visible and stays
   loud until Ihor supplies the real values. */
.gap{display:inline-block;background:#FBF0DC;border:var(--hair-w) solid #E8D3A8;
  border-radius:var(--r-xs);padding:1px 7px;font-size:.94em;color:#6B4A15;
  font-weight:var(--fw-strong)}

.doc-note{background:var(--surface);border:var(--hair-w) solid var(--hair);
  border-left:3px solid var(--accent);border-radius:var(--r-sm);
  padding:16px 18px;margin:var(--s-6) 0;
  box-shadow:inset 0 1px 0 0 var(--hair-lit)}
.doc-note p{margin-bottom:0;font-size:var(--fs-small);line-height:1.55;
  letter-spacing:var(--ls-small);color:var(--ink-2)}
.doc-note p+p{margin-top:8px}

.doc-table{width:100%;border-collapse:collapse;margin:var(--s-4) 0 var(--s-6);
  font-size:var(--fs-small);letter-spacing:var(--ls-small)}
.doc-table th,.doc-table td{text-align:left;padding:10px 14px 10px 0;
  border-bottom:var(--hair-w) solid var(--hair);vertical-align:top}
.doc-table th{font-weight:var(--fw-strong);color:var(--ink);white-space:nowrap}
.doc-table td{color:var(--ink-2)}
/* a table is the one element on these pages that can exceed the measure at
   360 px, so it gets its own scroll container rather than growing the page */
.doc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.doc-toc{margin:var(--s-6) 0 var(--s-8);padding-top:var(--s-5);
  border-top:var(--hair-w) solid var(--hair);display:grid;gap:7px}
.doc-toc a{font-size:var(--fs-small);letter-spacing:var(--ls-small)}
@media (min-width:700px){ .doc-toc{grid-template-columns:1fr 1fr;column-gap:var(--s-8)} }