/* ============================================================
   SupaLab — шапка и подвал

   Вынесены из прототипа, чтобы юридические страницы получали ту же
   навигацию без копирования правил в каждый файл.
   ============================================================ */

.nav{border-bottom:1px solid var(--line-section);background:var(--surface-page)}
.nav__in{display:flex;align-items:center;gap:36px;height:76px}
.nav__logo{display:block;align-self:center;width:auto;height:26px}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:16px}
/* Вход ведёт на платформу, адреса пока нет — ссылка видна, но не кликается */
.nav__login{font-size:15px;font-weight:700;color:var(--ink)}
/* ---- Компонент: кнопка ----
   Базовые правила живут внутри главной страницы, и юридическим
   страницам они не доставались: кнопка «Попробовать» выходила без
   рамки и отступов. Здесь полная копия того же компонента, значения
   один в один с главной. */
.sl-btn{display:inline-flex;align-items:center;gap:11px;border-radius:var(--radius);
  cursor:pointer;text-decoration:none;background:none;white-space:nowrap;
  transition:all var(--dur-hover) var(--ease)}
.sl-btn:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.sl-btn--primary{border:var(--border-strong) solid var(--ink);color:var(--ink);
  padding:17px 26px;font-size:17px;font-weight:700;box-shadow:var(--shadow-button)}
.sl-btn--primary:hover{box-shadow:var(--shadow-button-hover);
  transform:translate(4px,4px);color:var(--ink)}

/* В шапке кнопки компактнее, чем в тексте страницы: там они ведут
   разговор, здесь просто указывают дорогу. Правило с двумя классами
   выигрывает у базового без восклицательного знака. */
.sl-btn.sl-btn--sm{padding:10px 16px;font-size:15px;font-weight:700;gap:9px;
  border-radius:var(--radius);display:inline-flex;align-items:center;
  white-space:nowrap;cursor:pointer;text-decoration:none;
  border:var(--border-strong) solid var(--ink);color:var(--ink);
  background:none;box-shadow:4px 4px 0 var(--pink)}
.sl-btn.sl-btn--sm:hover{box-shadow:2px 2px 0 var(--pink);transform:translate(2px,2px)}

/* Палочка внутри кнопки — метка, а не каретка набора, поэтому
   не мерцает. Мигание оставлено только там, где идёт настоящий ввод. */
.sl-caret{width:3px;height:1.05em;background:var(--pink);display:block;
  flex:0 0 auto;animation:none}
.sl-btn[disabled]{background:var(--surface-paper);border-color:var(--line-paper);
  color:var(--ink-muted);cursor:default;pointer-events:none}
.sl-btn[disabled] .sl-caret{background:var(--line-control)}

/* ---- Первый экран ---- */
.hero{padding:40px 0 32px}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,484px);gap:40px;align-items:center}

/* ---- Меню с разделами ---- */
.nav__menu{display:flex;align-items:center;gap:26px;font-size:16px;font-weight:700}
.nav__item{position:relative}
.nav__top{display:inline-flex;align-items:center;gap:7px;padding:0;background:none;
  border:0;font:inherit;color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:color var(--dur-hover) var(--ease)}
.nav__top:hover{color:var(--pink)}
.nav__top svg{transition:transform var(--dur-hover) var(--ease)}
.nav__item:hover .nav__top svg,.nav__item:focus-within .nav__top svg{transform:rotate(180deg)}
/* Метка «скоро» и в меню, и в подвале: страницы ещё нет,
   но план сайта видеть полезно. */
.nav__soon,.ft__soon{display:inline-block;margin-left:6px;padding:2px 6px;
  border-radius:var(--radius);font-size:9.5px;font-weight:800;font-style:normal;
  letter-spacing:0.08em;text-transform:uppercase;vertical-align:1px}
.nav__soon{background:var(--surface-paper);color:var(--status-amber)}
.nav__top--soon{color:var(--ink-muted)}

/* Раскрывается по наведению и по фокусу с клавиатуры */
.nav__drop{position:absolute;left:-18px;top:100%;padding-top:14px;min-width:330px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity var(--dur-hover) var(--ease),transform var(--dur-hover) var(--ease),
             visibility var(--dur-hover)}
.nav__item:hover .nav__drop,.nav__item:focus-within .nav__drop{
  opacity:1;visibility:visible;transform:translateY(0)}
.nav__drop a{display:block;padding:12px 18px;background:var(--surface-page);
  border:1px solid var(--line-box);border-bottom:0}
.nav__drop a:first-child{border-radius:var(--radius) var(--radius) 0 0}
.nav__drop a:last-child{border-bottom:1px solid var(--line-box);
  border-radius:0 0 var(--radius) var(--radius)}
.nav__drop a:hover{background:var(--surface-band)}
.nav__drop b{display:block;font-size:15px;font-weight:800;letter-spacing:-0.02em}
.nav__drop span{display:block;margin-top:3px;font-size:13px;color:var(--ink-3)}

/* ---- Подвал ----
   Тёмное поле закрывает страницу. Ссылки приглушены до 62% белого,
   заголовки колонок — метками, розовый только на наведении. */
.ft{background:var(--frame-dark);color:#fff;padding:64px 0 34px;margin-top:0}
.ft__grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(4,minmax(0,1fr));
  gap:40px 32px}
.ft__logo{display:block;height:24px;width:auto}
.ft__brand p{margin:18px 0 0;font-size:16px;line-height:1.55;color:rgba(255,255,255,.62)}
.ft__head{margin:0 0 14px;font-size:var(--t-label-size);font-weight:var(--t-label-weight);
  letter-spacing:var(--t-label-tracking);text-transform:uppercase;color:rgba(255,255,255,.45)}
.ft__col a{display:block;padding:5px 0;font-size:15px;color:rgba(255,255,255,.78);
  transition:color var(--dur-hover) var(--ease)}
.ft__col a:hover{color:#fff}
.ft__soon{background:rgba(255,255,255,.12);color:rgba(255,255,255,.62)}

.ft__legal{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;
  flex-wrap:wrap;margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.12)}
.ft__docs{display:flex;flex-wrap:wrap;gap:8px 26px}
.ft__docs a,.ft__link{font-size:14px;color:rgba(255,255,255,.62);
  transition:color var(--dur-hover) var(--ease)}
.ft__docs a:hover,.ft__link:hover{color:#fff}
.ft__entity{margin:0;font-size:14px;line-height:1.6;color:rgba(255,255,255,.45);text-align:right}

.ft__bottom{display:flex;justify-content:space-between;align-items:center;gap:24px;
  flex-wrap:wrap;margin-top:26px;font-size:14px;color:rgba(255,255,255,.45)}
.ft__tg{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.62);
  transition:color var(--dur-hover) var(--ease)}
.ft__tg:hover{color:var(--pink)}

/* Документы стоят колонкой, значит колонок четыре, а не три */
.ft__grid{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}

@media (max-width:1080px){
  .ft__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
  .ft__brand{grid-column:1 / -1}
}
/* ---- Кнопка меню ----
   Видна только на узких экранах. Три полоски рисуем псевдоэлементами,
   чтобы не заводить ещё один знак в наборе. */
.nav__burger{display:none;position:relative;width:40px;height:40px;margin-left:auto;
  background:none;border:0;padding:0;cursor:pointer;color:var(--ink)}
.nav__burger span,.nav__burger::before,.nav__burger::after{
  content:"";position:absolute;left:9px;width:22px;height:2px;background:currentColor;
  transition:transform var(--dur-hover) var(--ease),opacity var(--dur-hover) var(--ease)}
.nav__burger::before{top:13px}
.nav__burger span{top:19px}
.nav__burger::after{top:25px}
.nav--open .nav__burger::before{transform:translateY(6px) rotate(45deg)}
.nav--open .nav__burger span{opacity:0}
.nav--open .nav__burger::after{transform:translateY(-6px) rotate(-45deg)}
.nav__burger:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

@media (max-width:900px){
  .nav{position:relative}
  .nav__burger{display:block;order:3}
  .nav__right{order:2;margin-left:auto}

  /* Меню становится панелью под шапкой. Раньше здесь стояло просто
     display:none, и с телефона из шапки нельзя было попасть ни
     на тарифы, ни на сегментные лендинги. */
  .nav__menu{display:none;position:absolute;left:0;right:0;top:100%;z-index:70;
    flex-direction:column;align-items:stretch;gap:0;
    padding:6px var(--gutter) 16px;
    background:var(--surface-page);border-bottom:1px solid var(--line-section);
    box-shadow:0 18px 30px -26px rgba(0,23,46,.45)}
  .nav--open .nav__menu{display:flex}

  .nav__item{width:100%}
  .nav__top{display:flex;width:100%;justify-content:space-between;
    padding:14px 0;font-size:17px}
  .nav__item + .nav__item .nav__top,.nav__menu > .nav__top{
    border-top:1px solid var(--line-2)}

  /* Выпадающий список раскрывается нажатием, а не наведением */
  .nav__drop{position:static;min-width:0;padding:0 0 8px;
    opacity:1;visibility:hidden;transform:none;height:0;overflow:hidden}

  /* Наведение здесь не должно делать ничего. На сенсорном экране
     первое касание уходит на наведение, если у элемента есть правила
     :hover, меняющие содержимое: из-за этого список открывался
     со второго, а то и с третьего раза. Оставляем только нажатие. */
  .nav__item:hover .nav__drop,
  .nav__item:focus-within .nav__drop{visibility:hidden;height:0;opacity:1}
  .nav__item:hover .nav__top svg{transform:none}
  .nav__item.is-open .nav__drop{visibility:visible;height:auto;opacity:1}
  .nav__item.is-open .nav__top svg{transform:rotate(180deg)}
  .nav__drop a,.nav__drop a:first-child,.nav__drop a:last-child{
    border:0;border-radius:0;padding:10px 0 10px 14px;background:none}
  .nav__drop a:hover{background:none;color:var(--pink)}
  .nav__drop span{color:var(--ink-muted)}
}
@media (max-width:680px){
  /* Одна колонка. Раньше сюда доезжали три по 47 пикселей: заголовки
     наезжали друг на друга, а «Политика в отношении обработки
     персональных данных» рвалась по одному слову в строку. */
  .ft__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .ft__legal,.ft__bottom{flex-direction:column;align-items:flex-start}
  .ft__entity{text-align:left}
}

/* Реквизиты переехали под логотип: слева, а не справа */
.ft__entity{margin:16px 0 0;text-align:left;font-size:14px;line-height:1.6;
  color:rgba(255,255,255,.45)}
/* «Настройки cookie» — кнопка, но выглядеть должна ссылкой колонки */
.ft__cookies{display:block;padding:5px 0;font-family:var(--font);font-size:15px;
  font-weight:400;line-height:inherit;color:rgba(255,255,255,.78);
  background:none;border:0;text-align:left;cursor:pointer}
.ft__cookies:hover{color:#fff}

@media (max-width:680px){
  :root{--gutter:20px}
  .nav__in{gap:14px;height:64px}
  .nav__logo{height:22px}
  .nav__right{gap:12px}
}

/* ---- Узкие экраны, 320-380 ----
   На 320 пикселях шапка не помещалась: логотип, «Войти», кнопка
   и бургер вместе шире экрана, страницу тянуло вбок на 64 пикселя.
   «Войти» переехало в панель меню, остальное ужато. Ряд призыва
   съедал треть ширины полями, а его кнопка не умела переносить
   подпись и потому не сжималась. */
.nav__login-m{display:none}

@media (max-width:900px){
  .nav__login{display:none}
  .nav__menu .nav__login-m{display:block}
}

@media (max-width:380px){
  .nav__in{gap:10px}
  .nav__logo{height:20px}
  .nav__right .sl-btn--sm{font-size:14px;padding:9px 13px}
  .sl-btn{box-shadow:4px 4px 0 var(--pink)}
  .cta-row{padding:22px 18px}
  .cta-row .sl-btn{font-size:15px;padding:12px 15px}
}

/* Подпись кнопки в шапке. На узком экране полная не помещается:
   на 320px строка логотип + кнопка + бургер выходила за экран
   и появлялась горизонтальная прокрутка. */
.nav__cta-short{display:none}
@media (max-width:419px){
  .nav__cta-full{display:none}
  .nav__cta-short{display:inline}
}