/* Общее для всех страниц сайта: надзаголовок, ссылки на страницы раздела и карта сайта в подвале. */
/* Знак «ПроростAI» — игра слов цветом (решение 236, выбор Артёма — «тушь · шалфей · графит»): «Про» — тушь,
   «рост» — шалфей ростка, «AI» — тихий графит, как подпись. Исключение из правила «зелёный — только полоса
   с ростком» только для знака. Знак — логотип, контраст к нему не требуется; графит держит 3,5 : 1 на холсте
   и 3,25 : 1 в подвале, проверки стерегут 3 : 1. Доступное имя ссылки — «Проростай». */
:root{--brand-rost:#3d5a47;--brand-ai:#88857c}
.brand-rost{color:var(--brand-rost)}
.brand-ai{color:var(--brand-ai)}
.hero-kicker{display:block;margin-bottom:18px;font:600 12px/1.4 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
.more-links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:16px}
.more-links a{display:inline-flex;align-items:center;min-height:48px;font-size:15px;color:var(--color-ink);text-underline-offset:4px}
/* Подвал: мягкая полоса на всю ширину окна. Верхний край образует волна, сестра перехода к примерам на главной:
   те же заливки и тонкие линии по изгибу, рисунок отражён по горизонтали. Волна служит границей подвала вместо прямой линии.
   Содержимое держит колонку .shell через внутренние поля. Высоту обеих волн задаёт --wave-height: 64 px,
   на экранах шире 1780 px она растёт до 80 px, чтобы изгиб сохранял глубину; на телефоне 52 px. */
:root{--wave-height:clamp(64px,3.6vw,80px)}
.site-footer.shell{position:relative;z-index:1;width:auto;padding-inline:max(32px,calc((100% - var(--page-width))/2));padding-top:calc(var(--wave-height)/2 + 12px);border-top:0;background:var(--color-surface-soft)}
.site-footer .flow-ending{position:absolute;z-index:-1;left:0;right:0;top:calc(var(--wave-height)/-2);height:var(--wave-height);overflow:hidden;pointer-events:none;user-select:none}
.site-footer .flow-ending svg{display:block;width:100%;height:100%}
/* Бумажный квадрат знака растворяется в полосе подвала, как гравюры на главной. */
.site-footer .brand img{mix-blend-mode:darken}
/* Заливки и линии обеих волн совпадают с фонами соседних полос. Толщина линий задана в пикселях экрана:
   растяжение рисунка по ширине меняет изгиб, а штрих остаётся ровным волосным на любой ширине. */
.flow-canvas{fill:var(--color-canvas)}
.flow-surface{fill:var(--color-surface-soft)}
.flow-lines{fill:none;stroke:var(--color-hairline-strong);stroke-linecap:round;opacity:.9}
.flow-lines path{vector-effect:non-scaling-stroke}
@media(max-width:767px){:root{--wave-height:52px}.site-footer.shell{padding-inline:24px;padding-top:36px}.flow-lines{opacity:.56}}
.site-map,.legal-links{display:flex;flex-wrap:wrap;gap:0 24px;width:100%}
.site-map a{display:inline-flex;align-items:center;min-width:48px;min-height:48px;font-size:14px;color:var(--color-body);text-underline-offset:4px}
.site-map a[aria-current="page"]{color:var(--color-ink);text-decoration-thickness:2px}
/* Документы сервиса (решение 308) — редкое, но находимое: тише разделов, та же высота касания. */
.legal-links a{display:inline-flex;align-items:center;min-height:48px;font-size:14px;color:var(--color-muted);text-underline-offset:4px}
@media(max-width:767px){.hero-kicker{margin-bottom:14px}.site-map,.legal-links{gap:0 20px}}

/* Первый экран главной (решение 338, уточняет 235; аудит — docs/design/hero-oct18). Под слоганом — суть четырьмя
   тезисами-вопросами (кто ты, почему так, зачем ты здесь, что делать), каждый в одну строку от 360 px; листок —
   светлый шалфей ростка, как --sheet-sprout у листа примера. Ниже серая строка о методе и доступе и запись в лист
   ожидания: на телефоне — текстовой ссылкой над гравюрой (не плашкой: плашка «подпирала» гравюру), от 768 px, где
   гравюра в соседней колонке, — главной кнопкой, как .button.primary ниже на странице. */
.hero-points{display:grid;gap:10px;margin:28px 0 0;padding:0;list-style:none;font:400 18px/1.4 var(--font-body);color:var(--color-ink)}
.hero-points li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;align-items:start}
.hero-points svg{width:16px;height:16px;margin-top:.22em;fill:#c4d3c0;stroke:var(--color-band);stroke-width:1.1;stroke-linejoin:round}
.hero-points+.hero-method{max-width:36em;margin-top:22px}
.hero-join{display:inline-flex;align-items:center;min-height:48px;margin-top:6px;font:600 16px/1.3 var(--font-body);color:var(--color-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
@media(min-width:768px){
  .hero-join{justify-content:center;width:fit-content;min-height:52px;margin-top:24px;padding:12px 24px;border-radius:999px;background:var(--color-action);color:var(--color-on-action);font-size:16px;line-height:1.4;text-decoration:none;transition:background-color 180ms ease}
  .hero-join:hover{background:var(--color-action-pressed)}
}
@media(max-width:767px){.hero-points{gap:6px;margin-top:18px;font-size:17px}.hero-points+.hero-method{margin-top:12px}.hero-join{margin-top:0}}
@media(max-width:379px){.hero-points{gap:4px;font-size:16px}}
/* Планшет: колонка текста ~320 px — тезисы мельче, чтобы каждый лёг в строку. */
@media(min-width:768px) and (max-width:1023px){.hero-points{gap:8px;font-size:16px}}

/* Шапка (решения 226 и 238) прилипает к верху окна на всех ширинах: разделы под рукой из любого места страницы.
   Холст шапки — во всю ширину окна, содержимое держит колонку .shell (поля — как у подвала). Когда под шапкой уже
   идёт страница, снизу проступает тонкая линия (класс is-scrolled ставит site.js). Высота — --header-height: 72 px,
   на телефоне 64 px, как у шапки приложения; якоря останавливаются под шапкой (scroll-padding-top).
   От 1024 px шесть разделов и «Войти» — одной строкой. На телефоне и планшете — кнопка «Меню» на <details>
   (работает без JavaScript): панель разделов выпадает из-под шапки поверх страницы, страница под ней затемнена
   и не прокручивается. Закрывают меню кнопка, нажатие на затемнение (оно — часть кнопки), а с site.js ещё Esc,
   «назад» и уход фокуса из шапки (канон поведения, П7). Разделы — две группы по три: о разборе и о сервисе.
   «Войти» на планшете в строке шапки, на телефоне последним пунктом панели. Пока идёт бета, на телефоне над «Войти»
   стоит главная кнопка «Записаться в лист ожидания» (решение 338; уберём в боевом режиме). Знак занимает свою ширину целиком
   и никогда не уходит под кнопку. Браузер без :has() показывает разделы в потоке под шапкой и прячет кнопку —
   там шапка не прилипает. */
:root{--header-height:72px;--header-offset:calc(var(--header-height) + env(safe-area-inset-top,0px))}
html{scroll-padding-top:calc(var(--header-offset) + 24px)}
.skip{z-index:40}
.site-header{position:sticky;top:0;z-index:30;display:grid;grid-template-columns:max-content 1fr auto;grid-template-rows:minmax(var(--header-height),auto);align-items:center;gap:0 24px;min-height:0;background:var(--color-canvas);transition:box-shadow 160ms ease}
.site-header.shell{width:auto;padding-inline:max(32px,calc((100% - var(--page-width))/2))}
.site-header.is-scrolled{box-shadow:0 1px 0 var(--color-hairline)}
.site-header .brand{min-width:max-content}
.site-nav{display:flex;justify-content:flex-end;gap:4px}
.site-nav a{display:flex;align-items:center;min-height:48px;min-width:48px;padding:0 12px;border-radius:999px;font-size:15px;line-height:1.3;color:var(--color-body);text-decoration:none;white-space:nowrap}
.login,.site-nav .nav-login{display:flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:0 20px;border:1px solid var(--color-hairline-strong);border-radius:999px;font-size:15px;font-weight:500;line-height:1.3;color:var(--color-ink);text-decoration:none;white-space:nowrap;transition:background-color 180ms ease}
.site-nav .nav-login,.site-nav .nav-join{display:none}
.menu{display:none}
.menu summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;border:1px solid var(--color-hairline);border-radius:999px;background:var(--color-surface-soft);font-size:15px;font-weight:500;line-height:1;color:var(--color-ink);list-style:none;white-space:nowrap;user-select:none;transition:background-color 180ms ease}
.menu summary::-webkit-details-marker{display:none}
@media(hover:hover) and (pointer:fine){
  .site-nav a:hover{text-decoration:underline;text-underline-offset:5px}
  .login:hover,.site-nav .nav-login:hover,.menu summary:hover{background:var(--color-surface-card);text-decoration:none}
}
.site-nav a[aria-current="page"]{background:var(--color-surface-card);color:var(--color-ink);font-weight:600;text-decoration:none}
.menu summary:active,.menu[open] summary{background:var(--color-surface-cream-strong)}
.menu svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.menu[open] .menu-lines,.menu:not([open]) .menu-close{display:none}
/* Компьютер: между группами короткая тонкая линия, по 8 px воздуха с каждой стороны. */
@media(min-width:1024px){
  .site-nav a:nth-child(4){position:relative;margin-left:13px}
  .site-nav a:nth-child(4)::before{content:'';position:absolute;left:-9px;top:50%;height:16px;margin-top:-8px;border-left:1px solid var(--color-hairline)}
}
@media(min-width:1024px) and (max-width:1199px){
  .site-header{gap:0 16px}
  .site-nav{gap:2px}
  .site-nav a{padding:0 10px}
  .site-nav a:nth-child(4){margin-left:15px}
  .login{padding:0 16px}
}
@media(max-width:1023px){
  .site-header{gap:0}
  .site-header .brand{grid-area:1/1;justify-self:start}
  .menu{grid-area:1/2;justify-self:end;margin-left:16px}
  .login{grid-area:1/3;margin-left:8px}
  /* Панель разделов. Планшет: две колонки, заполняются сверху вниз — слева о разборе, справа о сервисе. */
  .site-nav{grid-area:2/1/3/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:4px 32px;margin-inline:-32px;padding:12px 32px 20px;background:var(--color-surface-soft);border-block:1px solid var(--color-hairline)}
  .site-nav a{position:relative;min-height:52px;margin-inline:-12px;padding:0 12px;border-radius:12px;font-size:17px;color:var(--color-ink);white-space:normal}
  @supports not selector(:has(a)){.site-header{position:static}}
  @supports selector(:has(a)){
    .menu{display:block}
    /* Панель — поверх страницы от нижнего края шапки во всю ширину окна (без места в сетке шапки: иначе рамкой
       служит ячейка, а не шапка целиком); не помещается в окно (телефон лёжа) — прокручивается сама.
       Пока меню открыто, страница не прокручивается. Если на компьютере у окна есть полоса прокрутки (has-scrollbar
       ставит site.js), её место остаётся пустым — страница под затемнением не вздрагивает; панель и затемнение
       шириной 100vw закрывают и его. */
    .site-nav{display:none;grid-area:auto;position:absolute;z-index:1;top:100%;left:0;width:100vw;margin:0;padding-inline:max(32px,calc((100% - var(--page-width))/2));max-height:calc(100vh - var(--header-offset));max-height:calc(100dvh - var(--header-offset));overflow-y:auto;overscroll-behavior:contain}
    .site-header:has(.menu[open]) .site-nav{display:grid;animation:menu-in 180ms ease-out}
    /* Затемнение под панелью — продолжение кнопки «Меню»: нажатие на него закрывает меню и без JavaScript. */
    .menu[open] summary::before{content:'';position:fixed;top:var(--header-offset);bottom:0;left:0;width:100vw;background:rgb(20 20 19 / .32);animation:scrim-in 180ms ease-out}
    html:has(.site-header .menu[open]){overflow:hidden}
    html.has-scrollbar:has(.site-header .menu[open]){scrollbar-gutter:stable}
  }
}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}}
@keyframes scrim-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.site-header{transition:none}.site-header .site-nav,.menu summary::before{animation:none!important}}
@media(max-width:767px){
  :root{--header-height:64px}
  .site-header.shell{padding-inline:24px}
  .login{display:none}
  /* Телефон: одна колонка; тонкая линия между группами и перед «Войти». */
  .site-nav{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;gap:0;margin-inline:-24px;padding:8px 24px 20px}
  @supports selector(:has(a)){.site-nav{margin:0;padding:8px 24px calc(20px + env(safe-area-inset-bottom,0px))}}
  .site-nav a:nth-child(4){margin-top:17px}
  .site-nav a:nth-child(4)::before,.site-nav .nav-join::before{content:'';position:absolute;left:12px;right:12px;top:-9px;border-top:1px solid var(--color-hairline)}
  .site-nav .nav-join,.site-nav .nav-login{display:flex;position:relative;justify-content:center;min-height:48px;margin:8px 0 0;padding:0 20px;border-radius:999px;font-size:16px;white-space:nowrap}
  .site-nav .nav-join{margin-top:21px;background:var(--color-action);color:var(--color-on-action);font-weight:600}
  .site-nav .nav-join:active{background:var(--color-action-pressed)}
  .site-nav .nav-join::before{left:-1px;right:-1px;top:-14px}
  .menu summary{gap:6px;padding:0 16px 0 12px}
}

/* Счётчик посещений (решения 312, 313; metrika.js). Короткое предупреждение снизу поверх страницы, ниже шапки
   и меню, после первой прокрутки — первый экран с гравюрой остаётся чистым. Одна заметная кнопка «Хорошо»
   (светлая с рамкой тушью, как «Войти» в шапке: мягкая палитра без тёмных пятен), рядом тихая «Отказаться» — как ссылки подвала. Бежевая карточка, как монета «Сила», текст тушью.
   Появление — сдвиг и прозрачность. «Счётчик посещений» в подвале — как ссылки документов, открывает плашку снова. */
.ym-consent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;max-width:640px;margin:0 auto;padding:16px 16px 16px 20px;border:1px solid var(--color-hairline-strong);border-radius:16px;background:var(--color-surface-card);box-shadow:var(--shadow-sheet);color:var(--color-ink);opacity:0;transform:translateY(24px);transition:opacity 240ms ease,transform 240ms ease}
.ym-consent.is-shown{opacity:1;transform:none}
.ym-consent p{margin:0;font:400 15px/1.5 var(--font-body)}
.ym-consent-text{flex:1 1 280px}
.ym-consent-state{flex-basis:100%;color:var(--color-muted)}
.ym-consent a{color:var(--color-ink);text-underline-offset:3px;white-space:nowrap}
.ym-consent-actions{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.ym-consent button{min-height:48px;border-radius:999px;font:600 15px/1.3 var(--font-body);cursor:pointer}
.ym-consent-ok{min-width:128px;padding:10px 24px;border:1px solid var(--color-ink);background:var(--color-canvas);color:var(--color-ink);transition:background-color 180ms ease}
.ym-consent-ok:hover{background:#fff}
.ym-consent-no{padding:10px 16px;border:0;background:none;color:var(--color-muted);font-weight:400;text-decoration:underline;text-underline-offset:4px}
.ym-consent-no:hover{color:var(--color-ink)}
.ym-consent button:focus-visible,.ym-settings:focus-visible{outline:2px solid var(--color-focus);outline-offset:3px}
@media(max-width:559px){.ym-consent{padding:16px}.ym-consent-actions{flex:1 1 100%}.ym-consent-ok{flex:1}}
.ym-settings{display:inline-flex;align-items:center;min-height:48px;padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--color-muted);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.ym-toast{position:fixed;left:50%;z-index:31;width:max-content;max-width:calc(100% - 48px);margin:0;padding:12px 20px;border-radius:12px;background:var(--color-surface-dark);color:var(--color-on-dark-body);box-shadow:var(--shadow-sheet);font:400 14px/1.45 var(--font-body);opacity:0;transform:translate(-50%,-8px);transition:opacity 200ms ease,transform 200ms ease;pointer-events:none}
.ym-toast.is-shown{opacity:1;transform:translate(-50%,0)}
@media(prefers-reduced-motion:reduce){.ym-consent,.ym-toast{transition:none}}