/* ════════════════════════════════════════════════════════════════════
   ОБЩИЙ ШАБЛОН САЙТОВ halflight.page и ikona.page — размеры и раскладка.
   Владелец, 02.11.2026: «единый шаблон… по шрифтам, по кнопкам, по
   расположению элементов». Мерка — Ikona, какой она стояла в проде
   («у иконы здесь нормальный размер»).

   Источник ОДИН: legal/tools/site-base.css. В public/*-site/base.css лежат
   копии; `python3 tools/sites.py sync` их обновляет, `deploy` без свежих
   копий не выкладывает. Цвета и гарнитуры — у каждого сайта свои
   (site.css), здесь только размеры, отступы, сетка.
   ════════════════════════════════════════════════════════════════════ */

:root{--col:720px}
/* ── колонка: 720, по 20 по краям; лента и статья — уже ── */
main, footer, .foot{max-width:720px!important;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px))!important;padding-right:max(20px,env(safe-area-inset-right,0px))!important}
.feed, .tagbar{max-width:640px}

/* ── шапка: 64 на телефоне, 80 на компьютере; логотип 24 ── */
.top{height:calc(64px + env(safe-area-inset-top,0px))!important}
body{padding-top:calc(64px + env(safe-area-inset-top,0px))!important}
.logo span{font-size:24px!important;line-height:1}
@media (min-width:900px){
  .top{height:calc(80px + env(safe-area-inset-top,0px))!important}
  body{padding-top:calc(80px + env(safe-area-inset-top,0px))!important}
}

/* ── заголовки и текст страницы приложения ── */
.apph1, .h1.apph{font-size:32px!important;line-height:1.05!important;letter-spacing:-.5px}
@media (min-width:600px){ .apph1, .h1.apph{font-size:36px!important} }
#plans h2, .plans-h{font-size:24px!important;line-height:1.1;font-weight:500}
.r{display:grid;grid-template-columns:48px minmax(0,1fr)!important;gap:14px!important;align-items:start}
.r h3{font-size:22px!important;line-height:1.15!important;margin:0 0 4px!important}
.r p{font-size:15px!important;line-height:1.5!important;margin:0}
.tile{width:48px!important;height:48px!important;border-radius:12px!important}

/* ── тарифы ── */
.plans{display:flex;flex-direction:column;gap:10px}
.plan{padding:14px 16px!important;border-radius:16px!important;line-height:1.3}
.plan b{font-size:15.5px!important;font-weight:600}
.plan small{font-size:12.5px!important;margin-top:2px}
.plan .pr{font-size:15.5px!important;font-weight:600}

/* ── главная кнопка: 54, скругление 15, 16 полужирный ── */
.btn.wide, .btn-p{height:54px!important;border-radius:15px!important;font-size:16px!important;font-weight:600!important;padding:0 22px}

/* ── магазины: две кнопки 56 в ряд ── */
.stores{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
.stores .store, .store2{height:56px!important;border-radius:14px!important;font-size:16px!important;font-weight:600!important;display:flex;align-items:center;justify-content:center;gap:10px}
.stores .store small, .store2 small{display:block;font-size:11px!important;font-weight:400!important}

/* ── скриншоты: на компьютере все пять в ряд, одного размера ── */
@media (min-width:720px){
  .shots{overflow:hidden!important;gap:14px!important;margin-inline:0!important;padding:6px 0 10px!important}
  .shots img{width:calc((100% - 56px) / 5)!important;border-radius:16px!important}
}

/* ── мелкий текст под тарифами ── */
.fine{font-size:13px!important;line-height:1.5!important;text-align:center}

/* ── основной текст и пункты меню ── */
body{font-size:16px}
.nav a, .dnav a{font-size:15px!important;font-weight:500!important}

/* ── шапка на компьютере: логотип слева, меню и кнопки справа, поля как у колонки 1160 ── */
@media (min-width:900px){
  .top{display:flex!important;align-items:center;gap:8px;padding-left:max(40px,calc((100vw - 1160px) / 2 + 40px))!important;padding-right:max(40px,calc((100vw - 1160px) / 2 + 40px))!important}
  .top > .nav, .top > .dnav{flex:0 0 auto!important;margin-left:auto!important}
}

/* ── круглые кнопки шапки: 44, заливка своего сайта ── */
.top .ib, .top .acct{width:44px!important;height:44px!important;border-radius:999px!important;display:grid;place-items:center;flex:none}
.top .ib.txt{width:auto!important;min-width:44px;padding:0 12px}
.top .tools, .top .lang{gap:8px!important}

/* ── шапка на телефоне: логотип не сжимается, меню прижато к кнопкам ── */
.top .logo{flex:none;margin-right:auto}
.top > .nav{flex:0 1 auto!important;margin-left:auto!important;min-width:0}
@media (max-width:899px){
  .top{gap:4px!important;padding-left:max(16px,env(safe-area-inset-left,0px))!important;padding-right:max(12px,env(safe-area-inset-right,0px))!important}
  .top .ib, .top .acct{width:40px!important;height:40px!important}
  .top .ib.txt{min-width:40px;padding:0 10px}
  .top .tools, .top .lang{gap:4px!important}
}

/* ── просмотр скриншотов — тот же, что на maverk.app (styles.css → .lb):
   счётчик сверху, стрелки вплотную к кадру, без подложек. Скрипт — lightbox.js. ── */
.lb{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:56px 8px 32px;background:rgba(0,0,0,.88);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lb.on{display:grid}
.lb:focus{outline:none}
.lb-stage{display:flex;align-items:center;gap:clamp(14px,4vw,48px);max-width:100%}
.lb figure{margin:0;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px}
.lb img{max-height:72vh;width:auto;max-width:min(100%,420px);border-radius:18px}
.lb-count{position:absolute;top:20px;left:50%;transform:translateX(-50%);color:rgba(237,237,240,.7);font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.lb button{flex:none;border:0;background:none;padding:6px 4px;cursor:pointer;color:rgba(255,255,255,.55);font-size:38px;line-height:1;transition:color .15s}
.lb button:hover{color:#fff}
.shots img{cursor:zoom-in}

/* ── вертикальный ритм: блоки страницы через 28, внутри блока через 14 ── */
main{display:flex!important;flex-direction:column;gap:28px}
main > *{margin-top:0!important;margin-bottom:0!important}
.stk{gap:14px!important}
.benefits{display:flex;flex-direction:column;gap:20px!important}
.shots img{height:auto!important;max-height:none!important;align-self:flex-start}

/* ── скриншоты шире колонки: на компьютере ряд до 1160, каждый кадр ~210, как на maverk.app
   (владелец, 02.11.2026: «хули они такие микроскопические»). Колонка текста остаётся 720. ── */
@media (min-width:760px){
  .shots{margin-left:calc(50% - min(580px, 50vw - 40px))!important;margin-right:calc(50% - min(580px, 50vw - 40px))!important;gap:16px!important}
  .shots img{width:calc((100% - 64px) / 5)!important;border-radius:18px!important}
}

/* ── текст для поисковиков (tools/seo.py): виден без скрипта, со скриптом страницу рисует приложение ── */
html.js .pre{display:none}
.pre{max-width:720px;margin:0 auto;line-height:1.6}
.pre h1{font-size:32px;line-height:1.1} .pre a{text-decoration:underline}