/* ONLINE PARK — база: сброс, токены, типографика, утилиты.
   Токены сняты машинно из переменных макета Figma (файл mGzjCZCfYhNub98och2XrS). */

:root {
    /* Цвета макета */
    --ink: #060606;
    --bg: #F7F7F7;
    --bg-grey: #EEEEEA;
    --white: #FFFFFF;
    --blue: #5E55EE;
    --blue-h: #463EC7;
    --orange: #F8692A;
    --green: #DCFF46;
    --green-t: #A1BE23;
    --cyan: #46FFAF;
    --red: #EE5555;

    /* Производные — прозрачности от чёрного, как в макете */
    --ink-3: rgba(6, 6, 6, .03);
    --ink-10: rgba(6, 6, 6, .1);
    --ink-30: rgba(6, 6, 6, .3);
    --ink-40: rgba(6, 6, 6, .4);
    --ink-50: rgba(6, 6, 6, .5);

    /* Сетка: контент 1400 при поле 20 (1440 = 20 + 1400 + 20), поле 20 на любой ширине */
    --wrap: 1400px;
    --gutter: 20px;

    --r-4: 4px;
    --r-8: 8px;
    --r-12: 12px;
    --r-16: 16px;
    --r-24: 24px;
    --r-64: 64px;

    --ctrl-h: 50px;   /* высота контролов шапки */
    --ctrl-sm: 48px;

    --font: 'Onest', 'Involve', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; }
h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 20px; }
h4 { font-size: 16px; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 12px; padding-left: 20px; }

table { border-collapse: collapse; width: 100%; }

/* ── Раскладка ───────────────────────────────────────────── */

/* Контент до 1400px при поле 20px (1440 = 20 + 1400 + 20).
   padding входит в max-width, поэтому предел считается вместе с полями,
   иначе колонка получается уже макета на две ширины padding. */
.wrap,
.bleed {
    width: 100%;
    max-width: calc(var(--wrap) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Только вертикальные отступы: сокращённый padding затирал боковые поля .wrap,
   и контент страницы уезжал во всю ширину вместо колонки 1400. */
.page { padding-top: 24px; padding-bottom: 48px; }

.stack   { display: flex; flex-direction: column; }
.row     { display: flex; align-items: center; }
.row-top { display: flex; align-items: flex-start; }
.between { justify-content: space-between; }
.wrapf   { flex-wrap: wrap; }
.grow    { flex: 1 0 0; min-width: 0; }

.g-4  { gap: 4px; }  .g-8  { gap: 8px; }   .g-12 { gap: 12px; }
.g-16 { gap: 16px; } .g-24 { gap: 24px; }  .g-32 { gap: 32px; }

.grid { display: grid; gap: 20px; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

/* ── Типографика и мелочи ────────────────────────────────── */

.muted   { opacity: .4; }
.muted-3 { opacity: .3; }
.tiny    { font-size: 11px; }
.sm      { font-size: 13px; }
.lg      { font-size: 16px; }
.b       { font-weight: 600; }
.bb      { font-weight: 700; }
.center  { text-align: center; }
.nowrap  { white-space: nowrap; }
.strike  { text-decoration: line-through; opacity: .5; }
.blue    { color: var(--blue); }
.orange  { color: var(--orange); }
.red     { color: var(--red); }

.icon { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.icon svg { display: block; width: 100%; height: 100%; }
.i-8  { width: 8px; height: 8px; }
.i-12 { width: 12px; height: 12px; }
.i-16 { width: 16px; height: 16px; }
.i-20 { width: 20px; height: 20px; }
.i-24 { width: 24px; height: 24px; }

.hide { display: none !important; }
/* Класс с display переопределяет браузерное [hidden] — возвращаем ему силу */
[hidden] { display: none !important; }
.only-mobile { display: none; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Брейкпоинты ─────────────────────────────────────────── */
/* Макет нарисован только для 1440 и 360 — промежуточные ширины спроектированы здесь. */

@media (max-width: 1199px) {          /* ноутбук */
    .grid-6 { grid-template-columns: repeat(4, 1fr); }
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
}

@media (max-width: 991px) {           /* планшет */
    .grid-6 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {           /* телефон */
    body { font-size: 13px; }
    .grid { gap: 12px; }
    .grid-6, .grid-4, .grid-3, .grid-2 { grid-template-columns: repeat(2, 1fr); }
    h1 { font-size: 22px; }
    h2 { font-size: 19px; }
    h3 { font-size: 17px; }
    .only-mobile { display: block; }
    .no-mobile { display: none !important; }
    .page { padding-top: 16px; padding-bottom: 32px; }
}

@media (max-width: 479px) {
    .grid-1-xs { grid-template-columns: 1fr; }
}