/* === ОТКРЫТАЯ СТРАНИЦА pokolinnia.com (D679) ===
   Шапка, обещания и подвал — по образцу сайта DAMOSTA (`damosta/site/style.css`), цвета — канон приложения
   (`frontend/styles.css`, тот же канон DAMOSTA): сборка берёт их оттуда сама, копий здесь нет. Цвет, записанный
   здесь числом мимо канона, сторож `site/lib/site.test.mjs` не пропустит (исключения названы в нём поимённо).
   Тема — только по настройке устройства (`prefers-color-scheme`): кнопки темы на открытой странице нет
   (владелец 9.10.2026; ручной выбор — в приложении, D668). Скриптов на странице нет вовсе. */

/* ── Цвета, шрифты и размеры канона — сборка вставляет их сюда из `frontend/styles.css` (site/lib/canon.mjs) ── */
:root{--font-head:"Iowan Old Style","Palatino Linotype","Georgia","Rare Scripts",serif;--font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Rare Scripts",sans-serif;--weight-semibold:600;--icon-stroke:1.75;--radius-control:10px;--radius-card:16px;--header-height:62px;--header-height-mobile:54px;--bg:#f5f2ec;--bg2:#f1efe8;--panel:#ffffff;--ink:#1c1814;--muted:#7a7268;--line:#eae5dc;--bd-int:#8a8f84;--accent:#1e3a5f;--ink-inverse:#fff;--gold:#d7b16b;--scene-ink:#1c1814;--shadow-rgb:28,24,20;--warn-bg:#fff8e1;--warn-bd:#f0d68a;--warn-ink:#8a6d1f}
@media (prefers-color-scheme: dark){:root{--bg:#19212d;--bg2:#1e2733;--panel:#202a38;--ink:#f1f3f5;--muted:#b8bdc6;--line:#2d3849;--bd-int:#4a5468;--accent:#a1804b;--ink-inverse:#1b1d20;--gold:#dcc07a;--scene-ink:#f1f3f5;--shadow-rgb:0,0,0;--warn-bg:#2a2310;--warn-bd:#5a4a28;--warn-ink:#ffe194}}

/* ── Своё у открытой страницы (только то, чего в каноне нет) ── */
:root{
  color-scheme:light dark;
  /* Серый текст — Text Secondary сайта DAMOSTA: держит 4,85 на бежевом и 5,41 на белом. Канонный `--muted`
     светлой темы на бежевом не держит 4,5 (TD-606), поэтому серый светлой темы — этот. В тёмной — канон. */
  --text2:#706960;
  /* Шапка-стекло: подложка — Surface Muted канона (`--bg2`, выбор владельца по снимку 9.10.2026). */
  --header-tint:var(--bg2); --header-glass:72%;
  /* Заголовок на картинке: в светлой — синий акцент (выбор владельца по снимку 9.10.2026). */
  --hero-ink:var(--accent);
  --pad:40px;
  /* Полоса «Сайт в разработке» над шапкой (D690) и полная высота верхней рамки: от неё отступают первый экран,
     страницы и вход. Высота знака и меню остаётся от `--header-height` канона. */
  --strip-h:32px;
  --chrome:calc(var(--header-height) + var(--strip-h));
  --chrome-m:calc(var(--header-height-mobile) + var(--strip-h));
  /* Где начинается текст первого экрана — из `site/hero.config.mjs`, подставляет сборка. */
  --hero-left:7%;
}
@media (prefers-color-scheme: dark){
  :root{
    --text2:var(--muted);
    /* Стекло почти сплошное: при прокрутке под шапку въезжает светлый стол, а бронза меню и на сплошном
       графите держит только 4,09 (TD-617) — при 90% она падала до 3,4. */
    --header-glass:95%;
    /* Надпись на картинке — `--scene-ink` (D617, канон §25). */
    --hero-ink:var(--scene-ink);
  }
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:var(--icon-stroke);stroke-linecap:round;stroke-linejoin:round}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-100px;z-index:60;padding:10px 16px;border-radius:var(--radius-control);background:var(--panel);color:var(--accent)}
.skip:focus{top:12px}

/* ── Шапка: стекло поверх картинки (как у Apple), буквы — цвет акцента: синий в светлой, бронза в тёмной ── */
.site-header{position:fixed;top:0;left:0;right:0;z-index:20;border-bottom:1px solid transparent;
  background:color-mix(in srgb,var(--header-tint) var(--header-glass),transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2)}
/* Черта под шапкой появляется при прокрутке, как у DAMOSTA, — без скрипта: прокрутка ведёт анимацию. */
@supports (animation-timeline: scroll()){
  .site-header{animation:header-line linear both;animation-timeline:scroll(root);animation-range:0 8px}
  @keyframes header-line{to{border-bottom-color:var(--line)}}
}
@media (prefers-reduced-transparency: reduce){
  .site-header{background:var(--header-tint);-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* Полоса «Сайт в разработке» (D690): сплошная, спокойная — сведения, а не тревога; как у DAMOSTA. */
.strip{margin:0;height:var(--strip-h);display:flex;align-items:center;justify-content:center;padding:0 var(--pad);
  background:var(--panel);border-bottom:1px solid var(--line);font-size:13px;font-weight:500;line-height:1.2;
  color:var(--ink);text-align:center;white-space:nowrap;overflow:hidden}
.strip-s{display:none}
.hi{max-width:1600px;margin:0 auto;padding:4px var(--pad);height:var(--header-height);display:flex;align-items:center;gap:32px}
.logo{display:block;height:calc(var(--header-height) - 8px);flex:none}
.logo img,.logo picture{display:block;height:100%;width:auto}
/* Знак в шапке (D683): деревце и рядом название той же высоты — буквами из логотипа */
.brand{display:flex;align-items:center;gap:10px;height:calc(var(--header-height) - 14px)}
.brand:hover{text-decoration:none}
.nav{display:flex;gap:32px;margin-left:auto}
.nav a{font-size:14px;color:var(--accent)}
.acts{display:flex;align-items:center;gap:12px}
.ghost{height:40px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--accent);border-radius:8px;color:var(--accent);font-size:14px;font-weight:500;background:transparent;font-family:inherit;cursor:pointer}
.ghost:hover{background:var(--accent);color:var(--ink-inverse);text-decoration:none}
.burger{border:0;background:transparent;padding:0;display:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.burger span{width:22px;height:2px;border-radius:1px;background:var(--accent)}

/* ── Главная кнопка ── */
.cta{height:52px;padding:0 28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:var(--accent);color:var(--ink-inverse);font:500 15px/1 var(--font-body);cursor:pointer}
.cta:hover{box-shadow:inset 0 0 0 200px rgba(255,255,255,.08);text-decoration:none}
.cta:active{box-shadow:inset 0 0 0 200px rgba(255,255,255,.12)}

/* ── Первый экран (D680): по высоте — около двух третей экрана, чтобы обещания были видны сразу; дерево целиком
      справа, во всю высоту блока, левый край картинки растворяется в фоне страницы — шва нет. Текст слева. ── */
/* Первое окно — первый экран и обещания вместе, ровно в высоту окна: обещания видны целиком, подвал начинается точно
   под нижним краем окна (владелец 9.10.2026: «либо первая часть видна, а вторая скрыта по линии, либо видны обе»).
   Первый экран забирает всё, что осталось от окна после обещаний (сетка `1fr auto`), но не ниже 480 точек. */
.top{display:grid;grid-template-rows:1fr auto;min-height:100vh;min-height:100svh}
/* Отступы первого экрана — наименьшие: текст стоит по центру, при свободном месте они не видны. Полоса «в разработке»
   (D690, +32) и воздух в заголовке (.5em) съели запас; на Mac 1440×900 подвал выглядывал на 3 точки (13.10.2026). */
.hero{position:relative;isolation:isolate;min-height:480px;display:flex;align-items:center;
  padding:calc(var(--chrome) + 20px) 0 32px;background:var(--bg);overflow:hidden}
.hero-pic{position:absolute;inset:0;z-index:-1}
.hero-pic img{position:absolute;top:0;right:0;height:100%;width:auto;max-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,black 35%);mask-image:linear-gradient(to right,transparent 0,black 35%)}
.hl{margin:0 0 0 var(--hero-left);max-width:min(580px,44vw)}
.hero h1{margin:0 0 24px;font:var(--weight-semibold) clamp(30px,3vw,44px)/1.12 var(--font-head);color:var(--hero-ink);text-wrap:balance}
/* Заголовок — две фразы владельца (11.10.2026), каждая с новой строки; цвет один — роль текста канона, не золото. */
.hero h1 span{display:block}
.hero h1 span+span{margin-top:.5em}
.lead{margin:0 0 36px;font-size:clamp(15px,1.4vw,18px);line-height:1.55;color:var(--scene-ink);max-width:500px}
/* Две кнопки первого экрана (D728): главная и обведённая «пример древа» — одной высоты, всегда в один ряд. Ряд шире
   колонки текста на планшете (колонка — 44 % окна): перенос второй кнопки уводил обещания за край окна (D680) и клал
   её на картинку. У обведённой — фон страницы: где ряд заходит на картинку, кнопка читается. Телефон — ниже. */
.hero-acts{display:flex;gap:12px;width:max-content}
.hero-alt{height:52px;padding:0 28px;font-size:15px;background:var(--bg)}

/* ── Обещания — как «преимущества» DAMOSTA: фон страницы, черта сверху, шестигранник с золотым значком ── */
.feat{background:var(--bg);border-top:1px solid var(--line);padding:20px 0 24px}
.fin{max-width:1600px;margin:0 auto;padding:24px var(--pad);display:grid;grid-template-columns:repeat(4,1fr);gap:48px;align-items:start;list-style:none}
.f{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.fi{position:relative;width:56px;height:56px;flex:none}
.fi .hex{position:absolute;inset:0}
.fi .hex path{fill:var(--panel);stroke:var(--gold);stroke-width:1.5}
.fi .ic{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;color:var(--gold);stroke-width:1.6}
.f h3{margin:0 0 4px;font-size:15px;font-weight:600;color:var(--accent)}
.f p{margin:0;font-size:13px;line-height:1.45;color:var(--text2)}

/* ── Страницы разделов ── */
.page{padding:calc(var(--chrome) + 72px) 0 120px;background:var(--bg)}
.page .w{max-width:760px;margin:0 auto;padding:0 var(--pad)}
.page h1{margin:0 0 14px;font:var(--weight-semibold) clamp(32px,3.2vw,44px)/1.12 var(--font-head);color:var(--accent);text-wrap:balance}
.page .lead{color:var(--ink)}
.page p{margin:0 0 24px}
.note{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-control);padding:14px 16px;font-size:14px;line-height:1.5;margin:0 0 28px}
.doclist{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:10px}
.doclist a{color:var(--accent)}

/* ── Страница тарифов (D691, D692): два тарифа, что входит в оба (значки — как обещания главной), частые вопросы ── */
.price .w{max-width:1120px}
.price .lead{max-width:640px;font-size:18px;color:var(--text2)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan{display:flex;flex-direction:column;gap:6px;padding:28px;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--panel)}
.plan h2{margin:0;font:var(--weight-semibold) 24px/1.2 var(--font-head);color:var(--accent)}
.price .plan .gb{margin:0;font-size:17px;color:var(--ink)}
.price .plan .sum{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:14px 0 18px}
/* Название тарифа и цена — Accent Primary: на открытом сайте заголовки и цены синим (бронзой в тёмной) — решение
   владельца 14.10.2026 (D693), исключение канона § 5 для открытого сайта. */
.sum b{font:var(--weight-semibold) 44px/1 var(--font-head);color:var(--accent)}
.sum span{color:var(--text2)}
.plan .cta,.plan .ghost{display:inline-flex;width:100%;height:52px;margin-top:auto;font-size:15px}
.price .sec{margin:44px 0 24px;font:var(--weight-semibold) 26px/1.2 var(--font-head);color:var(--accent)}
.inc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:36px 32px}
.inc li{display:flex;align-items:flex-start;gap:16px}
.inc h3{margin:4px 0;font:var(--weight-semibold) 17px/1.3 var(--font-head);color:var(--accent)}
.price .inc p{margin:0;font-size:15px;line-height:1.45;color:var(--text2)}
/* Частые вопросы — карточками в две колонки, один в один как у DAMOSTA (`damosta/site/style.css`, «FAQ accordion»):
   карточка нажимается — рамка Border Interactive (`--bd-int`), уголок — Border Subtle, наведение — Surface Muted. */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.faq details{align-self:start;overflow:hidden;background:var(--panel);border:1.25px solid var(--bd-int);border-radius:var(--radius-control)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:80px;padding:18px 20px;list-style:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--ink);transition:background .15s ease}
.faq summary:hover{background:var(--bg2)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;margin-bottom:3px;border-right:1.5px solid var(--line);border-bottom:1.5px solid var(--line);transform:rotate(45deg);transition:transform .2s ease}
.faq details[open] summary::after{margin-bottom:-3px;transform:rotate(-135deg)}
.price .faq p{margin:0;padding:0 20px 18px;font-size:14px;line-height:1.6;color:var(--text2)}
.price .faq p+p{margin-top:-10px}
.price .faq ul{margin:-10px 0 0;padding:0 20px 18px 40px;font-size:14px;line-height:1.6;color:var(--text2)}
.price .faq ul li+li{margin-top:6px}
.price .faq p+ul,.price .faq ul+p{margin-top:-10px}
@media (max-width:980px){ .plans{grid-template-columns:1fr} .inc{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .inc,.faq{grid-template-columns:1fr} .inc{gap:24px} .sum b{font-size:38px} }

/* ── Подвал — как у DAMOSTA: отдельная полоса «поверхность» (белая; в тёмной #202A38), черта сверху, колонки,
      подписи заглавными, ссылки цветом акцента, нижняя строка через черту по центру ── */
.foot{background:var(--panel);border-top:1px solid var(--line);padding:48px 0 24px}
.footin{max-width:1600px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.4fr;gap:48px}
.fb{display:flex;flex-direction:column;gap:14px}
.fb .logo{height:64px}
.fb p{margin:0;font-size:12px;line-height:1.5;color:var(--text2);max-width:220px;text-wrap:balance}
.fb-about{font-size:13px;color:var(--accent)}
.col{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.col-title{margin:0 0 6px;font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2)}
.col a{font-size:13px;color:var(--accent)}
.fbot{max-width:1600px;margin:32px auto 0;padding:16px var(--pad) 0;border-top:1px solid var(--line);text-align:center;font-size:12px;color:var(--text2)}
.fbot p{margin:0}

/* ── Плашка «Сайт в разработке» и меню телефона: всплывающие окна браузера (`popover`), без скриптов ── */
[popover]{margin:0;padding:0;border:0;color:var(--ink);background:transparent}
.dialog{position:fixed;inset:0;margin:auto;width:min(440px,calc(100% - 32px));height:fit-content;background:var(--panel);
  border-radius:var(--radius-card);box-shadow:0 24px 60px rgba(var(--shadow-rgb),.35);padding:28px 28px 24px}
.dialog::backdrop{background:rgba(var(--shadow-rgb),.45)}
.dialog h2{margin:0 40px 12px 0;font:var(--weight-semibold) clamp(20px,5.2vw,24px)/1.25 var(--font-head);color:var(--accent)}
.dialog p{margin:0 0 10px;font-size:15px;line-height:1.55}
.dialog .age{color:var(--text2);font-size:14px}
.dialog .actions{display:flex;justify-content:flex-end;margin-top:20px}
.dialog .cta{height:44px;padding:0 22px}
.x{position:absolute;top:12px;right:12px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--radius-control);background:transparent;color:var(--ink);cursor:pointer}
.drawer{position:fixed;inset:0 0 0 auto;width:85%;max-width:360px;height:100%;max-height:none;background:var(--bg);flex-direction:column;padding:24px 24px 32px;gap:16px}
.drawer:popover-open{display:flex}
.drawer::backdrop{background:rgba(var(--shadow-rgb),.38)}
.drawer .x{position:static;align-self:flex-end;color:var(--accent)}
.drawer .cta,.drawer .ghost{width:100%}
.drawer ul{list-style:none;padding:0;margin:16px 0;display:flex;flex-direction:column;gap:4px}
.drawer li a{display:block;padding:14px 8px;color:var(--accent);font-size:17px;font-weight:500;border-bottom:1px solid var(--line)}

/* ── Страница входа приложения (D681, D683): одета в сайт, как у Apple и DAMOSTA — шапка с меню (без «Войти»),
      окно входа слева, справа четыре обещания главной на подложке `--bg2`, внизу полный подвал. Окно — «поверхность»
      канона, как плашки сайта; ошибка — жёлтая плашка канона (`--warn-*`), как в приложении. ── */
.auth{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);min-height:calc(100vh - var(--chrome));
  min-height:calc(100svh - var(--chrome));margin-top:var(--chrome);background:var(--bg)}
.auth-l{display:flex;align-items:center;justify-content:center;padding:48px var(--pad)}
.auth-r{display:flex;align-items:center;padding:48px clamp(32px,4.5vw,64px);background:var(--bg2);border-left:1px solid var(--line)}
.auth-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:32px;max-width:460px}
.auth-list .f{flex-direction:row;align-items:flex-start;text-align:left;gap:20px}
.lc{width:400px;max-width:100%;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-card);box-shadow:0 18px 50px rgba(var(--shadow-rgb),.12);padding:28px 30px 24px}
.lc .auth-step{display:flex;flex-direction:column;gap:14px}
.lc h1{margin:0 0 2px;font:var(--weight-semibold) 24px/1.25 var(--font-head);color:var(--accent);text-wrap:balance}
.lc-note,.lc-hint{margin:0;font-size:14px;line-height:1.5;color:var(--text2)}
.lc-hint{font-size:13px}
.lc-field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--text2)}
.lc-field input{height:46px;width:100%;border:1px solid var(--line);border-radius:var(--radius-control);padding:0 12px;
  font:16px/1 var(--font-body);background:var(--bg);color:var(--ink)}
.lc-field input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* «Глазик» в поле пароля (D686): кнопка внутри поля справа, цвет подписей канона (не золото), касание 40×40. */
.pw{position:relative;display:block}
.lc-field .pw input{padding-right:48px}
.pw-btn{position:absolute;top:50%;right:3px;transform:translateY(-50%);width:40px;height:40px;display:inline-flex;
  align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--radius-control);background:transparent;
  color:var(--text2);cursor:pointer}
.pw-btn .ic{width:20px;height:20px}
.pw-btn:hover{color:var(--ink)}
.pw-btn:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.lc-err{padding:10px 12px;border:1px solid var(--warn-bd);border-radius:var(--radius-control);background:var(--warn-bg);
  color:var(--warn-ink);font-size:14px;line-height:1.45}
.lc .cta{width:100%;margin-top:4px}
.lc-alt{margin:0;text-align:center;font-size:14px;color:var(--text2)}
.lc-alt a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.pw-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pw-meter{display:flex;align-items:center;gap:10px}
.pw-bars{display:inline-flex;gap:4px}
.pw-bars i{width:26px;height:4px;border-radius:2px;background:var(--line)}
.pw-bars i.on{background:var(--accent)}
.pw-label{font-size:13px;color:var(--text2)}

/* Очень высокое окно: если первый экран (640), обещания и подвал помещаются целиком — видна вся страница, а подвал
   дотягивается до низа окна. Пороги — по замеру высоты обещаний и подвала на этих ширинах (сторож site-smoke). */
@media (min-width:921px) and (min-height:1360px), (min-width:641px) and (max-width:920px) and (min-height:1720px){
  body{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
  .top{min-height:0}
  .hero{min-height:640px}
  .foot{flex:1 0 auto}
}
/* Меню из пяти пунктов в одну строку помещается от 1024 точек; уже — пункты переносились («Как это / работает»),
   поэтому на планшетах — три черты, как на телефоне; «Войти» остаётся на виду. */
/* Невысокий ноутбук (1280×760, 1366×768): длинный заголовок иначе уводит обещания за нижний край окна, а правило
   D680 — первый экран и обещания видны вместе. */
@media (min-width:641px) and (max-height:820px){
  .hero{padding-top:calc(var(--chrome) + 12px);padding-bottom:20px}
  .hero h1{font-size:clamp(28px,2.7vw,38px);margin-bottom:16px}
  .lead{margin-bottom:24px}
}
@media (max-width:1023px){
  .nav{display:none}
  .acts{margin-left:auto}
  .burger{display:inline-flex}
}
@media (max-width:920px){
  /* Вход: окно первым, обещания под ним */
  .auth{grid-template-columns:1fr}
  .auth-r{border-left:0;border-top:1px solid var(--line);padding:40px var(--pad)}
  .fin{grid-template-columns:1fr 1fr}
  .footin{grid-template-columns:1fr 1fr;gap:32px}
}
/* Планшет стоя (D729, выбор владельца по картинкам 23.10.2026): как на компьютере — текст слева, дерево справа, но
   дерево не лежит под текстом, а стоит своей колонкой и видно целиком (самое большое, что помещается: колонка дерева
   шире колонки текста); обе кнопки — одним рядом под ними. Лишняя высота дерева уходит над заголовком (первая строка
   сетки `1fr`), а не в щель между текстом и кнопками. Обещания остаются в первом окне (D680). Раньше картинка
   на всю высоту блока справа ложилась под заголовок, текст и кнопки (TD-690). */
@media (min-width:641px) and (max-width:1100px) and (orientation:portrait){
  .hero{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-rows:1fr auto auto;column-gap:8px;
    align-items:center;align-content:center;padding-left:var(--pad);padding-right:0}
  .hl{display:contents}
  .hero h1{grid-column:1;grid-row:1;align-self:end}
  .hero .lead{grid-column:1;grid-row:2;align-self:start;margin-bottom:28px}
  .hero-acts{grid-column:1 / -1;grid-row:3}
  .hero-pic{grid-column:2;grid-row:1 / 3;position:relative;inset:auto;z-index:0;align-self:center}
  .hero-pic img{position:static;display:block;width:100%;height:auto;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:640px){
  :root{--pad:20px}
  .strip-l{display:none}
  .strip-s{display:inline}
  .hi{gap:12px;height:var(--header-height-mobile)}
  .logo{height:calc(var(--header-height-mobile) - 8px)}
  .nav,.acts .ghost{display:none}
  .acts{margin-left:auto}
  .burger{display:inline-flex}
  /* Телефон: текст сверху, дерево целиком под ним — отдельной полосой, не за буквами при любой длине текста */
  .top{display:block;min-height:0}
  .hero{min-height:0;flex-direction:column;align-items:stretch;padding:calc(var(--chrome-m) + 28px) 0 0}
  .hero-pic{position:relative;inset:auto;z-index:0;order:2;height:300px;margin-top:8px}
  .hero-pic img{top:0;height:100%}
  .hl{margin:0;max-width:none;padding:0 20px}
  .brand{height:calc(var(--header-height-mobile) - 14px);gap:8px}
  .auth{margin-top:var(--chrome-m);min-height:0}
  .auth-l{padding:24px 20px 32px}
  .lc{width:100%;padding:24px 20px 20px}
  .hero h1{font-size:28px}
  .lead{font-size:16px;margin-bottom:28px}
  .hero-acts{flex-direction:column;width:auto}
  .hero-acts>*{width:100%}
  .fin{grid-template-columns:1fr;gap:32px;padding:24px 20px}
  .page{padding-top:calc(var(--chrome-m) + 40px)}
}