/* ============================================================
   veloq lab — стили правовых страниц (политики, согласие, cookie)
   Используется: cookies.html, /en/privacy.html, /en/consent.html,
   /en/cookies.html
   ============================================================ */
:root{
  --bg: oklch(97.5% 0.008 92);
  --bg-2: oklch(99.2% 0.005 92);
  --bg-3: oklch(95% 0.011 92);
  --ink: oklch(22% 0.02 288);
  --ink-2: oklch(46% 0.014 288);
  --ink-3: oklch(62% 0.012 288);
  --line: oklch(89% 0.011 92);
  --line-2: oklch(84% 0.014 92);
  --accent: oklch(53% 0.235 288);
  --accent-press: oklch(46% 0.225 288);
  --accent-soft: oklch(94% 0.05 288);
  --spark: oklch(84% 0.2 128);
  --spark-ink: oklch(48% 0.16 132);
  --card: oklch(99.5% 0.004 92);
  --dark: oklch(24% 0.03 288);
  --ease: cubic-bezier(0.16,1,0.3,1);
  --maxw: 860px;
  --r: 18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Manrope',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;overflow-x:hidden}
a{color:var(--accent);text-decoration:none;font-weight:600;transition:color .25s}
a:hover{color:var(--accent-press)}
::selection{background:var(--accent);color:var(--bg-2)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Header */
header{position:sticky;top:0;z-index:50;background:oklch(97.5% 0.008 92 / .85);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:flex-start;gap:24px;padding:16px 0;position:relative}
.nav > .vq-langsel,.nav-right .vq-langsel{position:absolute;right:150px;top:50%;transform:translateY(-50%)}
.nav > .back,.nav-right .back{right:0;white-space:nowrap}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;color:var(--ink)}
.mark{width:36px;height:36px;background:var(--dark);border-radius:11px;display:grid;place-items:center;font-family:'Unbounded';font-weight:700;color:oklch(93% 0.02 92);font-size:1rem;letter-spacing:-.04em;flex-shrink:0}
.brand b{font-family:'Unbounded';font-weight:600;font-size:1.04rem;letter-spacing:-.02em}
.brand span{color:var(--ink-3);font-weight:600}
.nav-right{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:12px;height:46px}
.back{display:inline-flex;align-items:center;gap:8px;font-size:.94rem;color:var(--ink-2)}
.back svg{width:17px;height:17px}
.back:hover{color:var(--accent)}

/* Hero */
.doc-hero{padding:80px 0 44px}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:2px}
.doc-hero h1{font-family:'Unbounded';font-weight:700;font-size:clamp(2rem,5vw,3rem);letter-spacing:-.035em;margin:18px 0 12px;line-height:1.06}
.doc-hero .upd{color:var(--ink-3);font-weight:600;font-size:.94rem}

/* Body */
.doc{padding:0 0 100px}
.intro{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 28px;margin-bottom:44px;color:var(--ink-2);font-weight:500}
.intro b{color:var(--ink)}
.doc section{margin-bottom:40px;scroll-margin-top:90px}
.doc h2{font-family:'Unbounded';font-weight:600;font-size:1.28rem;letter-spacing:-.02em;margin-bottom:14px;display:flex;align-items:baseline;gap:12px}
.doc h2 .idx{font-size:.95rem;color:var(--accent);font-weight:700;font-family:'Manrope'}
.doc p{color:var(--ink-2);font-weight:500;margin-bottom:12px}
.doc ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin:8px 0 12px}
.doc ul li{position:relative;padding-left:28px;color:var(--ink-2);font-weight:500}
.doc ul li::before{content:"";position:absolute;left:6px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--spark)}
.doc strong{color:var(--ink);font-weight:700}

/* Cookie table */
.tbl-wrap{overflow-x:auto;margin:16px 0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table.ck{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px}
table.ck th,table.ck td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
table.ck th{background:var(--bg-3);font-weight:800;color:var(--ink);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase}
table.ck tr:last-child td{border-bottom:none}
table.ck td{color:var(--ink-2);font-weight:500}
table.ck td code{background:var(--bg-3);padding:2px 7px;border-radius:6px;font-size:.86rem;color:var(--ink);font-weight:600}
.badge{display:inline-block;font-size:.76rem;font-weight:800;padding:3px 10px;border-radius:100px;white-space:nowrap}
.badge.need{background:oklch(94% 0.09 128);color:var(--spark-ink)}
.badge.opt{background:var(--accent-soft);color:var(--accent)}

/* Contact card */
.contact{background:var(--dark);color:oklch(92% 0.01 92);border-radius:var(--r);padding:32px 30px;margin-top:8px}
.contact h3{font-family:'Unbounded';font-weight:600;color:#fff;font-size:1.16rem;margin-bottom:14px;letter-spacing:-.02em}
.contact .rows{display:flex;flex-direction:column;gap:12px}
.contact .row{display:flex;align-items:center;gap:12px;font-weight:600}
.contact .row svg{width:19px;height:19px;color:var(--spark);flex-shrink:0}
.contact a{color:var(--spark)}
.contact a:hover{color:oklch(90% 0.15 128)}

footer{border-top:1px solid var(--line);padding:28px 0;color:var(--ink-3);font-size:.88rem;font-weight:500}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}

@media(max-width:600px){
  .doc-hero{padding:52px 0 32px}
  /* Лого слева, язык рядом с крупным крестиком справа */
  .nav{justify-content:flex-start;padding-left:12px;padding-right:108px}
  .nav > .vq-langsel,.nav-right .vq-langsel{right:52px}
  .nav > .back,.nav-right .back{right:6px;white-space:normal}
  .nav-right{right:0;gap:10px}
  .nav-right .vq-langsel{margin-right:0}
  .nav-right .back{right:0}
  .back span{display:none}
  .back{gap:0;width:46px;height:46px;justify-content:center;border-radius:50%;
    border:1.5px solid var(--line-2);background:var(--card);color:var(--ink);
    box-shadow:0 10px 22px -16px var(--ink);transition:background .25s,transform .25s var(--ease)}
  .back svg{width:24px;height:24px;stroke-width:2.4}
  .back:active{background:var(--bg-3);transform:scale(.93)}
}