/* ============================================================================
   «Норма» — дизайн-система сайта.
   Палитра и шрифты один в один из приложения (ios/Norma/Design/Theme.swift,
   тёмная тема), чтобы сайт и приложение читались как одна вещь.
   Здесь только общее: оболочка, типографика, карточки, формы, таблицы.
   Тяжёлая анимация лендинга — в landing.css.
   ========================================================================= */

@font-face{font-family:"Unbounded";src:url(/static/fonts/Unbounded-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Unbounded";src:url(/static/fonts/Unbounded-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Unbounded";src:url(/static/fonts/Unbounded-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Golos Text";src:url(/static/fonts/GolosText-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Golos Text";src:url(/static/fonts/GolosText-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Golos Text";src:url(/static/fonts/GolosText-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Golos Text";src:url(/static/fonts/GolosText-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/static/fonts/IBMPlexMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/static/fonts/IBMPlexMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  /* цвета — Theme.swift, dark */
  --bg:#161016;        --bg-2:#1C141E;
  --card:#221826;      --card2:#2C2032;
  --ink:#F3ECF1;       --ink2:#B7A5B5;      --ink3:#8A7889;
  --line:#392A3E;      --line-soft:#2E2233;
  --granat:#E03A58;    --granat-ink:#F48CA0; --granat-soft:#421B27;
  --fist:#93BB52;      --fist-soft:#22301A;
  --kuraga:#E89A3C;    --kuraga-soft:#3A2711;
  /* совместимость со старой разметкой кабинета */
  --pom:var(--granat); --surface2:var(--card2);

  --r-s:12px; --r:20px; --r-l:28px; --r-xl:36px;
  --display:"Unbounded",system-ui,sans-serif;
  --text:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --w:1180px; --pad:24px; --hdr-h:72px;
  /* Одна кривая на весь сайт: резкий старт, длинный выкат — движение «дотягивается» */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --shadow:0 24px 60px -28px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--text);
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* Атмосфера: два тёплых пятна на фоне, чтобы плоский тёмный не выглядел «пустым».
   fixed + pointer-events:none — не мешают скроллу и не рисуют лишних слоёв при прокрутке. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120vw 70vh at 78% -10%, rgba(224,58,88,.14), transparent 60%),
    radial-gradient(90vw 60vh at 4% 8%, rgba(232,154,60,.07), transparent 62%),
    radial-gradient(100vw 80vh at 50% 108%, rgba(147,187,82,.07), transparent 60%);
}
/* Зерно поверх всего: убирает «пластик» из плоских заливок. Одна маленькая SVG-текстура. */
body::after{
  content:"";position:fixed;inset:-50%;z-index:9999;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

a{color:var(--ink);text-decoration:none}
a:hover{color:#fff}
p a,li a,td a,.link{color:var(--fist);text-decoration:underline;text-decoration-color:rgba(147,187,82,.38);text-underline-offset:3px;transition:text-decoration-color .2s}
p a:hover,li a:hover,.link:hover{color:var(--fist);text-decoration-color:var(--fist)}
img{max-width:100%;height:auto;display:block}
::selection{background:var(--granat);color:#fff}
:focus-visible{outline:2px solid var(--kuraga);outline-offset:3px;border-radius:6px}

h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.08;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(34px,6.2vw,68px);font-weight:700;letter-spacing:-.035em}
h2{font-size:clamp(26px,3.8vw,44px);letter-spacing:-.03em}
h3{font-size:clamp(18px,2vw,22px);letter-spacing:-.015em}
p{margin:0 0 1em}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.muted{color:var(--ink2)}
.small{font-size:14px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(64px,9vw,120px) 0;position:relative}
.section-tight{padding:44px 0}

/* Надзаголовок: мелкий моно-капс с точкой — «этикетка прибора» */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:18px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--granat);flex:0 0 6px}
.eyebrow.fist::before{background:var(--fist)}
.eyebrow.kuraga::before{background:var(--kuraga)}
.lead{font-size:clamp(17px,1.6vw,21px);color:var(--ink2);max-width:64ch;line-height:1.55}

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .g3.keep{grid-template-columns:repeat(3,1fr);gap:8px}.keep .stat{padding:12px 10px}.keep .stat b{font-size:22px}
  :root{--pad:18px}
}

/* ---------- появление при скролле ----------
   Класс .js вешает JS в <head>: без него ничего не прячем, страница читается всегда. */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0ms);will-change:opacity,transform}
.js .rv.in{opacity:1;transform:none}
.js .rv-x{opacity:0;transform:translateX(-28px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0ms)}
.js .rv-x.in{opacity:1;transform:none}
/* Заголовки въезжают из-под маски — строка «раскрывается», а не проявляется */
.js .rv-mask{overflow:hidden;display:block}
.js .rv-mask>*{display:block;transform:translateY(105%);transition:transform .9s var(--ease);transition-delay:var(--d,0ms)}
.js .rv-mask.in>*{transform:none}

/* ---------- шапка ---------- */
.hdr{position:sticky;top:0;z-index:120;transition:background .35s var(--ease),border-color .35s,backdrop-filter .35s;border-bottom:1px solid transparent}
.hdr .wrap{display:flex;align-items:center;gap:18px;height:var(--hdr-h)}
.hdr.stuck{background:rgba(22,16,22,.88);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-bottom-color:var(--line-soft)}
.logo{flex:0 0 auto;display:inline-flex;align-items:center;gap:11px;color:var(--ink)}
.logo:hover{color:#fff}
.logo-mark{display:block;border-radius:24%;flex:0 0 auto;transition:transform .5s var(--ease)}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.05)}
.logo-word{font-family:var(--display);font-weight:700;font-size:21px;letter-spacing:-.045em;line-height:1}
.ftr .logo-word{font-size:19px}
.logo img{height:30px;width:auto;transition:opacity .2s}
.logo:hover img{opacity:.82}
.nav{display:flex;gap:4px;align-items:center;margin-left:auto;font-weight:500;font-size:15px}
.nav>a{position:relative;color:var(--ink2);padding:9px 12px;border-radius:999px;transition:color .2s}
.nav>a:not(.btn)::after{
  content:"";position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)
}
.nav>a:not(.btn):hover::after,.nav>a.on:not(.btn)::after{transform:scaleX(1)}
.nav>a:hover,.nav>a.on{color:var(--ink)}
.nav .btn{padding:11px 20px;font-size:14px;margin-left:6px}
.nav .btn::after{display:none}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:14px;width:46px;height:46px;color:var(--ink);cursor:pointer;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.burger:hover{border-color:var(--ink3)}
.burger svg{transition:transform .3s var(--ease)}
.burger[aria-expanded="true"] svg{transform:rotate(90deg)}
@media(max-width:1060px){
  .nav{
    display:none;position:fixed;left:0;right:0;top:var(--hdr-h);bottom:0;margin:0;
    background:rgba(22,16,22,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    flex-direction:column;align-items:stretch;gap:2px;padding:22px var(--pad) 40px;overflow-y:auto;font-size:20px;
  }
  .nav.open{display:flex}
  .nav>a{padding:14px 4px;border-bottom:1px solid var(--line-soft);border-radius:0;color:var(--ink)}
  .nav>a:not(.btn)::after{display:none}
  .nav .btn{margin:14px 0 0;justify-content:center;font-size:16px;padding:16px 24px;border-bottom:0}
  .burger{display:inline-flex}
}
/* Полоса прогресса чтения — тонкая, не спорит с шапкой */
.progress{position:fixed;left:0;top:0;height:2px;z-index:130;width:100%;transform:scaleX(var(--p,0));transform-origin:left;
  background:linear-gradient(90deg,var(--granat),var(--kuraga) 55%,var(--fist));pointer-events:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--granat);color:#fff;padding:12px 18px;border-radius:0 0 12px 0;z-index:200}
.skip:focus{left:0}

/* ---------- кнопки ----------
   --mx/--my ставит JS: кнопка чуть тянется к курсору (только на мыши). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;
  background:var(--granat);color:#fff;border:0;border-radius:999px;padding:16px 30px;
  font:600 16px var(--text);cursor:pointer;white-space:nowrap;isolation:isolate;
  transform:translate(var(--mx,0),var(--my,0));
  transition:transform .35s var(--ease),background .25s,box-shadow .35s var(--ease),color .2s;
  box-shadow:0 8px 24px -14px rgba(224,58,88,.9);
}
/* Блик уезжает слева направо при наведении */
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.btn:hover::before{transform:translateX(120%)}
.btn:hover{background:#ea4c68;color:#fff;box-shadow:0 16px 36px -16px rgba(224,58,88,.95)}
.btn:active{transform:translate(var(--mx,0),var(--my,0)) scale(.97)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--ink);box-shadow:none}
.btn-ghost:hover{background:var(--card2);border-color:var(--ink3);color:#fff;box-shadow:none}
.btn-fist{background:var(--fist);color:#161016;box-shadow:0 8px 24px -14px rgba(147,187,82,.9)}
.btn-fist:hover{background:#a3cc60;color:#161016;box-shadow:0 16px 36px -16px rgba(147,187,82,.95)}
.btn-kuraga{background:var(--kuraga);color:#161016;box-shadow:0 8px 24px -14px rgba(232,154,60,.9)}
.btn-kuraga:hover{background:#f0a94f;color:#161016}
.btn-block{width:100%}
.btn[disabled],.btn.is-soon{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn[disabled]::before,.btn.is-soon::before{display:none}

/* ---------- карточки ----------
   Пятно под курсором (--gx/--gy от JS) — карточка «замечает» мышь. */
.card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:30px;
  transition:border-color .35s var(--ease),transform .45s var(--ease),background .35s;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(320px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.07),transparent 62%);
}
.card:hover::before{opacity:1}
.card2{background:var(--card2)}
.card h3{margin-top:0}
.card-hover:hover{border-color:var(--ink3);transform:translateY(-4px)}

.chip{display:inline-flex;align-items:center;gap:7px;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--ink2);font-weight:500;transition:border-color .25s,color .25s,transform .25s var(--ease)}
a.chip:hover{border-color:var(--ink3);color:var(--ink);transform:translateY(-2px)}
.chip.hot{color:var(--kuraga);border-color:rgba(232,154,60,.4)}
.chip.good{color:var(--fist);border-color:rgba(147,187,82,.4)}
.chip.bad{color:var(--granat);border-color:rgba(224,58,88,.45)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.tag{font-family:var(--mono);font-size:11px;color:var(--ink3);letter-spacing:.12em;text-transform:uppercase}

/* ---------- формы ---------- */
.field{display:flex;flex-direction:column;gap:8px}
label{font-size:14px;color:var(--ink2);font-weight:500}
input[type=text],input[type=tel],input[type=search],input[type=email],textarea,.inp{
  width:100%;background:rgba(22,16,22,.6);border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink);
  padding:15px 16px;font:500 17px var(--text);outline:none;transition:border-color .2s,background .2s;
}
input::placeholder,textarea::placeholder{color:var(--ink3)}
input:focus,textarea:focus,.inp:focus{border-color:var(--kuraga);background:rgba(22,16,22,.9)}
input.code{font-family:var(--mono);font-size:28px;letter-spacing:.35em;text-align:center}
.form-row{display:flex;gap:12px;flex-wrap:wrap}
.form-row input{flex:1 1 220px}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.note{font-size:14px;color:var(--ink3);line-height:1.5}
.alert{border-radius:var(--r-s);padding:14px 18px;font-size:15px;border:1px solid}
.alert.err{border-color:rgba(224,58,88,.5);background:rgba(224,58,88,.1);color:var(--granat-ink)}
.alert.ok{border-color:rgba(147,187,82,.5);background:rgba(147,187,82,.1);color:#d2e9b0}
.alert.warn{border-color:rgba(232,154,60,.5);background:rgba(232,154,60,.1);color:#ffd7a8}

/* ---------- вопросы ---------- */
.faq details{border-bottom:1px solid var(--line-soft);padding:0;transition:border-color .3s}
.faq details[open]{border-bottom-color:var(--line)}
.faq summary{cursor:pointer;font-family:var(--display);font-weight:500;font-size:clamp(17px,1.7vw,21px);letter-spacing:-.02em;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;transition:color .25s}
.faq summary:hover{color:#fff}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:0 0 26px;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);
  background:linear-gradient(currentColor,currentColor) center/11px 1.5px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.5px 11px no-repeat;
  color:var(--kuraga);transition:transform .35s var(--ease),border-color .3s;
}
.faq details[open] summary::after{transform:rotate(135deg);border-color:var(--kuraga)}
.faq details p{color:var(--ink2);margin:0 0 24px;max-width:76ch}

/* ---------- таблицы ---------- */
.table{width:100%;border-collapse:collapse;font-size:16px}
.table th,.table td{padding:13px 12px;text-align:left;border-bottom:1px solid var(--line-soft)}
.table th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);font-weight:500}
.table td.n,.table th.n{text-align:right;font-family:var(--mono)}
.table tbody tr{transition:background .2s}
.table tbody tr:hover{background:rgba(255,255,255,.025)}
.table tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.table-wrap .table td,.table-wrap .table th{padding:14px 18px}

/* ---------- хлебные крошки ---------- */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--ink3);margin:26px 0 10px;font-family:var(--mono)}
.crumbs a{color:var(--ink3)}.crumbs a:hover{color:var(--ink)}
.crumbs span::before{content:"/";margin:0 6px;color:var(--line)}
.crumbs span:first-child::before{content:none}

/* ---------- данные: плитки, кольца, полосы ---------- */
.stat{background:var(--card2);border-radius:var(--r);padding:18px 20px;border:1px solid var(--line)}
.stat b{display:block;font-family:var(--mono);font-size:30px;font-weight:500;line-height:1.1}
.stat span{font-size:13px;color:var(--ink2)}
.stat.granat b{color:var(--granat)}.stat.fist b{color:var(--fist)}.stat.kuraga b{color:var(--kuraga)}
.big{font-family:var(--mono);font-size:clamp(40px,6vw,64px);font-weight:500;line-height:1}
.macro{display:flex;height:10px;border-radius:99px;overflow:hidden;background:var(--line)}
.macro i{display:block;height:100%}
.macro .p{background:var(--fist)}.macro .f{background:var(--kuraga)}.macro .c{background:var(--granat)}
.legend{display:flex;gap:16px;font-size:13px;color:var(--ink2);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}

/* лесенка (кабинет) */
.stairs{display:flex;flex-direction:column;gap:8px}
.stair{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:14px 18px;border-radius:var(--r-s);background:var(--card2);border:1px solid var(--line);position:relative;overflow:hidden}
.stair .bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(224,58,88,.28),rgba(224,58,88,.05));z-index:0}
.stair.min .bar{background:linear-gradient(90deg,rgba(147,187,82,.32),rgba(147,187,82,.06))}
.stair>*{position:relative;z-index:1}
.stair .share{font-weight:600}
.stair .share small{display:block;font-weight:400;color:var(--ink2);font-size:13px}
.stair .price{font-family:var(--mono);font-size:22px;font-weight:500}
.stair.min .price{color:var(--fist)}
.stair.now{outline:2px solid var(--kuraga)}

/* иконка функции */
.feature .ico{width:54px;height:54px;border-radius:18px;background:var(--card2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;margin-bottom:20px;color:var(--kuraga);transition:transform .45s var(--ease),color .3s,border-color .3s}
.feature:hover .ico{transform:translateY(-3px) rotate(-4deg);border-color:currentColor}
.feature .ico svg{width:26px;height:26px}
.feature p{color:var(--ink2);margin:0}

.role{border-top:3px solid var(--line)}
.role.granat{border-top-color:var(--granat)}.role.fistashka{border-top-color:var(--fist)}.role.kuraga{border-top-color:var(--kuraga)}
.role .price{font-family:var(--mono);font-size:20px;margin:6px 0 16px}
.role ul{margin:0;padding-left:18px;color:var(--ink2)}
.role li{margin:6px 0}

/* ---------- списки ссылок ---------- */
.linklist{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.linklist a{display:flex;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:15px 17px;font-weight:500;font-size:15px;transition:border-color .25s,transform .3s var(--ease),background .25s}
.linklist a:hover{border-color:var(--kuraga);transform:translateY(-2px);background:var(--card2)}
.linklist a .num{color:var(--ink3);font-size:14px;white-space:nowrap}
.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.tile{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;transition:border-color .3s,transform .4s var(--ease)}
.tile::after{content:"→";position:absolute;right:20px;bottom:18px;font-family:var(--mono);color:var(--ink3);opacity:0;transform:translateX(-8px);transition:.4s var(--ease)}
.tile:hover{border-color:var(--kuraga);transform:translateY(-4px)}
.tile:hover::after{opacity:1;transform:none}
.tile b{display:block;font-family:var(--display);font-weight:500;font-size:16px;margin-bottom:6px}
.tile .num{color:var(--ink3);font-size:14px}

ol.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:12px}
ol.steps li{position:relative;padding:16px 18px 16px 62px;background:var(--card2);border:1px solid var(--line);border-radius:var(--r-s)}
ol.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:18px;top:14px;width:30px;height:30px;border-radius:50%;background:var(--kuraga);color:#161016;font:500 15px var(--mono);display:flex;align-items:center;justify-content:center}
.mistake{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--card2)}
.mistake.danger{border-color:rgba(224,58,88,.5)}
.mistake .dot{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--kuraga);margin-top:8px}
.mistake.danger .dot{background:var(--granat)}
.week{display:grid;gap:12px}
.day{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.day.rest{opacity:.55}
.day .dn{font-family:var(--display);font-weight:500;font-size:15px}
.day .dn small{display:block;font-family:var(--mono);color:var(--ink2);font-size:12px;margin-top:4px}
.day ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.day li{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.day li .num{color:var(--ink2);white-space:nowrap}
@media(max-width:600px){.day{grid-template-columns:1fr}}

/* ---------- текст ---------- */
.prose{max-width:74ch}
.prose p{color:var(--ink2)}
.prose h2{margin-top:52px}
.prose h3{margin-top:32px}
.prose ul{color:var(--ink2);padding-left:20px}
.prose li{margin:8px 0}
.draft{border:1px dashed rgba(232,154,60,.6);color:var(--kuraga);border-radius:var(--r-s);padding:13px 17px;font-size:14px;background:rgba(232,154,60,.05)}

/* ---------- подвал ---------- */
.ftr{border-top:1px solid var(--line-soft);padding:60px 0 44px;color:var(--ink2);font-size:14px;position:relative}
.ftr .wrap{display:grid;grid-template-columns:1.6fr repeat(4,minmax(0,1fr));gap:32px}
.ftr b{display:block;color:var(--ink);font-weight:600;margin-bottom:12px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-family:var(--mono)}
.ftr a{display:block;color:var(--ink2);margin:8px 0;width:fit-content;transition:color .2s,transform .3s var(--ease)}
.ftr a:hover{color:var(--ink);transform:translateX(3px)}
.ftr .logo img{height:26px;margin-bottom:14px}
.ftr-legal{border-top:1px solid var(--line-soft);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--ink3);line-height:1.6}
.ftr-legal b{display:block;color:var(--ink2);font-family:var(--text);font-size:13px;letter-spacing:0;text-transform:none;font-weight:600;margin-bottom:4px}
.ftr-legal>div:last-child{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.ftr-legal a{display:inline;margin:0}
.ftr-bottom{border-top:0;margin-top:20px;padding-top:0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--ink3);font-size:13px}
@media(max-width:1000px){.ftr .wrap{grid-template-columns:1.4fr 1fr 1fr}}
@media(max-width:720px){.ftr .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ftr .wrap{grid-template-columns:1fr}}

/* ---------- кабинет ---------- */
.cab{max-width:780px;margin:0 auto;padding:36px var(--pad) 90px}
.cab-hdr{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:28px}
.cab-hdr .who{font-size:14px;color:var(--ink2)}
.ring{--v:0;width:150px;height:150px;border-radius:50%;background:conic-gradient(var(--fist) calc(var(--v)*1%),var(--line) 0);display:flex;align-items:center;justify-content:center;flex:0 0 150px}
.ring div{width:118px;height:118px;border-radius:50%;background:var(--card);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring b{font-family:var(--mono);font-size:30px;font-weight:500;line-height:1}
.ring span{font-size:12px;color:var(--ink2)}
.auth{max-width:460px;margin:70px auto;padding:0 var(--pad)}
.auth .card{padding:34px}
.auth .logo{display:block;margin:0 auto 26px;width:150px}
.dev{font-family:var(--mono);font-size:14px;color:var(--kuraga);background:rgba(232,154,60,.08);border:1px dashed rgba(232,154,60,.5);border-radius:12px;padding:10px 14px}
.hist{display:grid;gap:8px}
.hist div{display:grid;grid-template-columns:1fr auto auto;gap:14px;padding:12px 14px;background:var(--card2);border-radius:12px;font-size:15px;align-items:center}
.hist .st{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.st.ok,.st.succeeded{color:var(--fist)}.st.pending,.st.waiting{color:var(--kuraga)}.st.canceled,.st.no{color:var(--granat)}
.bar{height:7px;background:var(--line);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--granat);border-radius:99px}
.spark{display:flex;align-items:flex-end;gap:5px;height:64px}
.spark>i{flex:1;background:linear-gradient(180deg,var(--granat),rgba(224,58,88,.35));border-radius:4px 4px 0 0}
.chat{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto}
.chat .msg{max-width:78%;padding:10px 13px;border-radius:14px;background:var(--card2);white-space:pre-wrap}
.chat .msg.mine{align-self:flex-end;background:var(--granat);color:#fff}

/* ---------- баннер cookie ----------
   Полоса снизу, а не модалка: не закрывает содержимое и не требует «закрыть».
   Пока JS не решил, что выбор ещё не сделан, элемент скрыт — не мигает у вернувшихся. */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:140;padding:0 var(--pad) max(14px,env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .55s var(--ease)}
.cc.show{transform:none}
.cc-in{max-width:var(--w);margin:0 auto;display:flex;align-items:center;gap:24px;flex-wrap:wrap;
  background:rgba(34,24,38,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:var(--r-l);padding:18px 22px;box-shadow:0 20px 50px -24px rgba(0,0,0,.9)}
.cc-text{flex:1 1 380px;min-width:0}
.cc-text b{display:block;font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.02em;margin-bottom:5px}
.cc-text p{margin:0;font-size:14px;color:var(--ink2);line-height:1.5;max-width:78ch}
.cc-btns{display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto}
.cc-btns .btn{padding:13px 22px;font-size:15px}
@media(max-width:640px){
  .cc-in{padding:15px 16px;gap:13px;border-radius:var(--r)}
  .cc-text p{font-size:13.5px}
  .cc-btns{width:100%;gap:8px;flex-wrap:nowrap}
  .cc-btns .btn{flex:1 1 0;min-width:0;justify-content:center;padding:12px 10px;font-size:14px}
}

/* ---------- юридические страницы ---------- */
.legal-meta{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--ink3);
  letter-spacing:.04em;margin:22px 0 30px}
.legal-meta span+span::before{content:"·";margin-right:18px;color:var(--line)}
.legal-toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px;
  border:1px solid var(--line);border-radius:var(--r-l);padding:18px;background:rgba(34,24,38,.45);margin-bottom:44px}
.legal-toc a{display:flex;gap:12px;align-items:baseline;padding:8px 10px;border-radius:10px;font-size:14px;color:var(--ink2);transition:background .2s,color .2s}
.legal-toc a:hover{background:rgba(255,255,255,.05);color:var(--ink)}
.legal-toc i{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--ink3);flex:0 0 auto}
.legal-body{max-width:80ch}
.legal-body h2{font-size:clamp(19px,2.1vw,25px);margin-top:52px;scroll-margin-top:calc(var(--hdr-h) + 20px)}
.legal-body h2:first-child{margin-top:0}
.legal-body .table{margin:20px 0;font-size:15px}
.legal-body .table td{vertical-align:top}
.legal-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.legal-links a{border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:14px;color:var(--ink2);transition:.25s var(--ease)}
.legal-links a:hover{border-color:var(--ink3);color:var(--ink)}
.legal-links a.on{border-color:var(--granat);color:var(--granat)}

/* ---------- уважение к настройкам ----------
   Кто просил не двигать — тому ничего не двигается, но всё видно. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .rv,.js .rv-x{opacity:1!important;transform:none!important}
  .js .rv-mask>*{transform:none!important}
}

/* Юр-таблицы на телефоне: мельче шрифт и уже поля, чтобы прокрутки было меньше */
@media(max-width:560px){
  .legal-body .table-wrap .table{font-size:13.5px}
  .legal-body .table-wrap .table td,.legal-body .table-wrap .table th{padding:11px 12px}
}