/* =====================================================================
   Locus — общий слой для служебных страниц (terms, privacy, subscribed,
   unsubscribed). Та же тёмная «предрассветная» база, что и на лендинге, но
   без арт-дирекшна лендинга. Шрифты и дизайн-токены — из общего styles/tokens.css
   (подключается <link>'ом перед этим файлом). Здесь — только база и компоненты
   служебных страниц.
   ===================================================================== */

/* ----------------------------- База ------------------------------------*/
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:var(--font-ui);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  /* лёгкий предрассветный отблеск сверху — эхо лендинга, без анимации */
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(224,163,107,.07), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 30%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,ul,ol{ margin:0; }
a{ color:inherit; text-decoration:none; }
:focus:not(:focus-visible){ outline:none; }
:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:3px; border-radius:3px; }
::selection{ background:rgba(224,163,107,.28); color:#fff; }
img{ max-width:100%; display:block; }

.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;
}

/* ----------------------------- Topbar ----------------------------------*/
.topbar{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(11,13,20,.82), rgba(11,13,20,.42) 70%, transparent);
}
.topbar__inner{
  max-width:var(--maxw); margin-inline:auto; padding:0 clamp(16px,5vw,48px);
  min-height:var(--topbar-h);
  display:flex; align-items:center; gap:16px;
}
.logo{ display:inline-block; padding:8px 0; line-height:1; }
.logo__word{ font-family:var(--font-display); font-weight:500; font-size:1.32rem; --track:.07em; letter-spacing:var(--track); color:var(--ink); }
/* Знак вместо «o»: та же форма, что в иконке приложения, — /images/logo-mark.svg,
   подставленный маской и залитый акцентом. Размер и база подогнаны к строчной «o»
   Lora: центр кольца стоит там же, где центр очка «o» — 0,25em над базовой
   линией. Диаметр заметно больше высоты буквы, поэтому знак выходит и над
   строчными, и под базовую линию: он читается как знак, а не как ещё одна
   буква. Поля разные, и оба выведены, а не подобраны. Левое ставит центр кольца
   туда же, где центр буквы: 0,375em (полполя знака) минус 0,2925em (полширины
   «o» в Lora). Правое возвращает слову ширину настоящего «Locus»: место буквы —
   это её ширина плюс разрядка, а разрядку после инлайн-блока браузер, в отличие
   от буквы, не добавляет — отсюда var(--track) в calc(). Симметричные поля
   уводили бы знак к «cus». */
.logo__mark{
  display:inline-block; width:.75em; height:.75em;
  vertical-align:-.12em; margin-inline:-.0825em calc(var(--track) - .0825em);
  background-color:var(--accent);
  -webkit-mask-image:url(/images/logo-mark.svg); mask-image:url(/images/logo-mark.svg);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}

/* ----------------------------- Footer ----------------------------------*/
.footer{
  border-top:1px solid var(--line);
  padding-block:clamp(28px,5vh,44px);
  padding-bottom:calc(clamp(28px,5vh,44px) + env(safe-area-inset-bottom));
}
.footer__nav{
  max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px);
  display:flex; flex-wrap:wrap; align-items:center; gap:.7em 1em;
  font-size:.95rem;
}
.footer__nav a{ color:var(--ink-dim); border-bottom:1px solid transparent; padding-bottom:1px; transition:color .18s var(--ease), border-color .18s var(--ease); }
.footer__nav a:hover{ color:var(--ink); border-color:var(--line-strong); }
.footer__sep{ color:var(--line-strong); }

/* Иконки соцсетей: прижаты к правому краю строки футера */
.footer__social{ margin-left:auto; display:inline-flex; align-items:center; gap:.6em; }
/* Иконки — отдельные SVG (см. /images/*.svg), подключённые маской: currentColor
   красит их в цвет текста и меняет на hover, единый размер для единообразия. */
.footer__nav .footer__icon{
  display:inline-block; width:20px; height:20px; border-bottom:0; padding-bottom:0;
  color:var(--ink-dim); background-color:currentColor;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  transition:color .18s var(--ease);
}
.footer__nav .footer__icon:hover{ color:var(--accent); }
.footer__icon--vk{ -webkit-mask-image:url(/images/vk.svg); mask-image:url(/images/vk.svg); }
.footer__icon--tg{ -webkit-mask-image:url(/images/telegram.svg); mask-image:url(/images/telegram.svg); }

/* На узком экране ссылки идут в столбик: при переносе по ширине строка рвётся
   произвольно, а разделитель повисает в конце. */
@media (max-width:599px){
  .footer__nav{ flex-direction:column; align-items:flex-start; gap:.55em; }
  .footer__sep{ display:none; }
  .footer__social{ margin-left:0; margin-top:1.1em; }
}