/* ==========================================================================
   Таблицы LOOK — tables.vtorge.com (tables.lookmy.info), 2026-10-08
   Всё оформление главной — классы .tl-*. Шрифты: Geologica (заголовки),
   Onest (текст), JetBrains Mono (формулы в макете таблицы).
   Админ-режим оборачивает слова в span.word-highlight: правил на голый
   span нет, текст во flex/grid всегда внутри своего элемента.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Geologica:wght@500;600;700&family=Onest:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap');

:root {
  --tl-ink: #1b2a2f;
  --tl-ink-2: #4b5c61;
  --tl-paper: #f4f7f3;
  --tl-card: #ffffff;
  --tl-line: #dbe4dd;
  --tl-head: #eaf0eb;
  --tl-green: #0b7a57;
  --tl-green-ink: #ffffff;
  --tl-green-soft: #d9efe5;
  --tl-marker: #fff1a8;
  --tl-coral: #f0603f;
  --tl-violet: #6d55f5;
  --tl-wait: #a35a00;
  --tl-wait-bg: #fff0d6;
  --tl-tint: #ebf2ec;
}
body.theme-dark {
  --tl-ink: #e6eeea;
  --tl-ink-2: #a9b8b2;
  --tl-paper: #121a1c;
  --tl-card: #182325;
  --tl-line: #2b3a3c;
  --tl-head: #1f2c2e;
  --tl-green: #3fc28f;
  --tl-green-ink: #0d1a15;
  --tl-green-soft: #18392d;
  --tl-marker: #4a4416;
  --tl-coral: #ff7a5c;
  --tl-violet: #9a88ff;
  --tl-wait: #ffb658;
  --tl-wait-bg: #3a2a12;
  --tl-tint: #162123;
}

body { background: var(--tl-paper); }

.tl { color: var(--tl-ink); font: 400 17px/1.6 'Onest', system-ui, sans-serif; background: var(--tl-paper); overflow-x: clip; }
.tl *, .tl *::before, .tl *::after { box-sizing: border-box; }
.tl a { color: inherit; }
.tl-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* ---- Типографика ---- */
.tl-h1, .tl-h2, .tl-h3 { font-family: 'Geologica', 'Onest', sans-serif; color: var(--tl-ink); letter-spacing: -0.015em; margin: 0; }
.tl-h1 { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.05; font-weight: 700; max-width: 15ch; }
.tl-h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; font-weight: 700; max-width: 22ch; }
.tl-h3 { font-size: 22px; line-height: 1.25; font-weight: 600; }
.tl-lead { font-size: 19px; line-height: 1.55; color: var(--tl-ink-2); margin: 22px 0 0; max-width: 34em; }
.tl-sub { font-size: 18px; color: var(--tl-ink-2); margin: 14px 0 0; max-width: 40em; }
.tl-p { margin: 8px 0 0; color: var(--tl-ink-2); }
.tl-note { margin: 14px 0 0; font-size: 14px; color: var(--tl-ink-2); }
.tl-code { white-space: nowrap; font: 500 14px 'JetBrains Mono', monospace; background: var(--tl-head); padding: 1px 6px; border-radius: 4px; }

/* ---- Кнопки ---- */
.tl-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.tl-btn { display: inline-block; padding: 14px 24px; border-radius: 10px; font: 600 16px/1.2 'Onest', sans-serif; text-decoration: none !important; border: 2px solid var(--tl-green); transition: background .15s, color .15s; }
.tl-btn--main { background: var(--tl-green); color: var(--tl-green-ink) !important; }
.tl-btn--main:hover { background: color-mix(in srgb, var(--tl-green) 86%, #000); }
.tl-btn--ghost { color: var(--tl-green) !important; background: transparent; }
.tl-btn--ghost:hover { background: var(--tl-green-soft); }
.tl-btn:focus-visible, .tl-q summary:focus-visible { outline: 3px solid var(--tl-violet); outline-offset: 3px; }

/* ---- Первый экран: лист в клетку ---- */
.tl-hero {
  padding: 72px 0 64px;
  background-color: var(--tl-paper);
  background-image:
    linear-gradient(var(--tl-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--tl-line) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}
.tl-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.tl-hero__text { background: var(--tl-paper); padding: 8px 8px 8px 0; box-shadow: 0 0 0 24px var(--tl-paper); }

/* Макет таблицы */
.tl-sheet { background: var(--tl-card); border: 1px solid var(--tl-line); border-radius: 14px; box-shadow: 0 24px 60px -28px rgba(20, 50, 40, .45); overflow: hidden; font-size: 14px; }
.tl-sheet__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--tl-line); }
.tl-sheet__file { flex: 1 1 auto; font-weight: 600; font-size: 14px; }
.tl-sheet__fx { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--tl-line); background: var(--tl-head); }
.tl-sheet__ref { font: 500 13px 'JetBrains Mono', monospace; color: var(--tl-ink-2); min-width: 32px; }
.tl-sheet__formula { font: 500 13px 'JetBrains Mono', monospace; color: var(--tl-green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tl-grid th, .tl-grid td { border: 1px solid var(--tl-line); padding: 6px 9px; height: 33px; white-space: nowrap; overflow: visible; position: relative; text-align: left; }
.tl-grid thead th, .tl-grid tbody th { background: var(--tl-head); color: var(--tl-ink-2); font-weight: 500; font-size: 12px; text-align: center; }
.tl-grid tbody th, .tl-grid thead th:first-child { width: 36px; }
.tl-grid thead th:nth-child(2) { width: 34%; }
.tl-grid td { overflow: hidden; text-overflow: ellipsis; }
.tl-grid .tl-cur { overflow: visible; }
.tl-grid .tl-h { font-weight: 600; }
.tl-grid .tl-n { text-align: right; font-variant-numeric: tabular-nums; }
.tl-ok, .tl-wait { display: inline-block; font-style: normal; font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 20px; }
.tl-ok { background: var(--tl-green-soft); color: var(--tl-green); }
.tl-wait { background: var(--tl-wait-bg); color: var(--tl-wait); }
.tl-sel { background: var(--tl-marker); font-weight: 700; box-shadow: inset 0 0 0 2px var(--tl-green); }
.tl-cur--a { box-shadow: inset 0 0 0 2px var(--tl-coral); }
.tl-cur--o { box-shadow: inset 0 0 0 2px var(--tl-violet); }
.tl-tag { position: absolute; top: -11px; right: -2px; z-index: 2; font: 600 10px/1 'Onest', sans-serif; font-style: normal; color: #fff; padding: 3px 6px; border-radius: 4px 4px 4px 0; }
.tl-cur--a .tl-tag { background: var(--tl-coral); }
.tl-cur--o .tl-tag { background: var(--tl-violet); }

/* Аватары участников */
.tl-ava { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; color: #fff; font: 600 11px/1 'Onest', sans-serif; font-style: normal; }
.tl-ava--a { background: var(--tl-coral); }
.tl-ava--o { background: var(--tl-violet); }
.tl-ava--g { background: var(--tl-green); }

/* Одна анимация на странице: Олег дописывает сумму в B6 */
.tl-typing__v { font-weight: 400; display: inline-block; overflow: hidden; vertical-align: bottom; max-width: 7ch; }
@media (prefers-reduced-motion: no-preference) {
  .tl-typing__v { animation: tl-type 7s steps(6, end) 1.2s infinite; }
  .tl-cur--o { animation: tl-blink 7s ease-in-out 1.2s infinite; }
}
@keyframes tl-type { 0% { max-width: 0; } 30%, 100% { max-width: 7ch; } }
@keyframes tl-blink { 0%, 100% { box-shadow: inset 0 0 0 2px var(--tl-violet); } 45% { box-shadow: inset 0 0 0 3px var(--tl-violet); } }

/* ---- Короткие факты ---- */
.tl-facts { border-top: 1px solid var(--tl-line); border-bottom: 1px solid var(--tl-line); background: var(--tl-card); }
.tl-facts__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tl-fact { margin: 0; padding: 26px 24px 26px 0; display: flex; gap: 14px; align-items: baseline; }
.tl-fact + .tl-fact { padding-left: 24px; border-left: 1px solid var(--tl-line); }
.tl-fact__big { font: 700 32px/1 'Geologica', sans-serif; color: var(--tl-green); flex: 0 0 auto; }
.tl-fact__txt { display: block; font-size: 15px; color: var(--tl-ink-2); }

/* ---- Секции ---- */
.tl-sec { padding: 88px 0; }
.tl-sec--tint { background: var(--tl-tint); }
.tl-final { padding: 96px 0; background: var(--tl-green); color: var(--tl-green-ink); }

/* Возможности — таблицей */
.tl-ftable { width: 100%; margin-top: 36px; border-collapse: collapse; background: var(--tl-card); border: 1px solid var(--tl-line); border-radius: 14px; overflow: hidden; }
.tl-ftable thead th { background: var(--tl-head); font-size: 13px; font-weight: 500; color: var(--tl-ink-2); text-align: left; padding: 10px 20px; }
.tl-ftable tbody th, .tl-ftable tbody td { padding: 16px 20px; border-top: 1px solid var(--tl-line); vertical-align: top; text-align: left; }
.tl-ftable tbody th { width: 30%; font: 600 17px/1.35 'Geologica', sans-serif; }
.tl-ftable tbody td { color: var(--tl-ink-2); }
.tl-ftable tbody tr:hover th { box-shadow: inset 3px 0 0 var(--tl-green); }

/* Две колонки */
.tl-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.tl-list { margin: 26px 0 0; padding: 0; list-style: none; }
.tl-list li { position: relative; padding: 0 0 12px 30px; }
.tl-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border: 2px solid var(--tl-green); border-radius: 3px; background: var(--tl-green-soft); }

/* Окно доступа */
.tl-share { background: var(--tl-card); border: 1px solid var(--tl-line); border-radius: 14px; padding: 22px; box-shadow: 0 24px 60px -30px rgba(20, 50, 40, .4); }
.tl-share p { margin: 0; }
.tl-share__title { font: 600 18px 'Geologica', sans-serif; margin-bottom: 14px !important; }
.tl-share__field { border: 1px solid var(--tl-line); border-radius: 8px; padding: 9px 12px; color: var(--tl-ink); }
.tl-share__btn { display: inline-block; margin: 10px 0 18px !important; background: var(--tl-green); color: var(--tl-green-ink); border-radius: 8px; padding: 8px 14px; font-weight: 600; font-size: 14px; }
.tl-share__label { font-size: 13px; font-weight: 600; color: var(--tl-ink-2); margin-bottom: 4px !important; }
.tl-share__row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--tl-line); font-size: 15px; }
.tl-share__name { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-share__ok, .tl-share__wait { font-style: normal; font-size: 13px; flex: 0 0 auto; }
.tl-share__ok { color: var(--tl-green); }
.tl-share__wait { color: var(--tl-ink-2); }

/* Приложения */
.tl-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 2px solid var(--tl-ink); }
.tl-app { padding: 24px 28px 8px 0; }
.tl-app + .tl-app { padding-left: 28px; border-left: 1px solid var(--tl-line); }
.tl-app__fmt { margin: 14px 0 0; font-size: 14px; color: var(--tl-green); font-weight: 500; }

/* netOS — список определений */
.tl-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; margin: 36px 0 0; }
.tl-dl__item { padding: 20px 0; border-top: 1px solid var(--tl-line); }
.tl-dl dt { font: 600 19px/1.3 'Geologica', sans-serif; }
.tl-dl dd { margin: 6px 0 0; color: var(--tl-ink-2); }

/* Переезд — по шагам (это последовательность) */
.tl-steps { margin: 0; padding: 0; list-style: none; counter-reset: tl-step; }
.tl-step { counter-increment: tl-step; position: relative; padding: 0 0 26px 56px; }
.tl-step::before { content: counter(tl-step); position: absolute; left: 0; top: -2px; width: 38px; height: 38px; border-radius: 8px; background: var(--tl-card); border: 2px solid var(--tl-green); color: var(--tl-green); font: 700 17px/34px 'Geologica', sans-serif; text-align: center; }
.tl-step + .tl-step::after { content: ""; position: absolute; left: 18px; top: -26px; height: 24px; border-left: 2px dashed var(--tl-line); }
.tl-step__t { display: block; font: 600 19px/1.3 'Geologica', sans-serif; }
.tl-step__d { display: block; margin-top: 4px; color: var(--tl-ink-2); }

/* Тарифы */
.tl-prices { display: grid; grid-template-columns: repeat(var(--tl-cols, 3), minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.tl-price { background: var(--tl-card); border: 1px solid var(--tl-line); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; }
.tl-price--main { border: 2px solid var(--tl-green); }
.tl-price__name { font: 600 21px 'Geologica', sans-serif; margin: 0; }
.tl-price__sum { margin: 12px 0 0; font: 700 34px/1.1 'Geologica', sans-serif; }
.tl-price__per { display: inline-block; font: 400 15px 'Onest', sans-serif; color: var(--tl-ink-2); margin-left: 4px; }
.tl-price__list { margin: 16px 0 22px; padding: 0 0 0 20px; color: var(--tl-ink-2); flex: 1 1 auto; }
.tl-price__list li { margin-bottom: 6px; }
.tl-price .tl-btn { text-align: center; }

/* Вопросы */
.tl-faq-wrap { max-width: 860px; }
.tl-faq { margin-top: 28px; border-top: 1px solid var(--tl-line); }
.tl-q { border-bottom: 1px solid var(--tl-line); }
.tl-q summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 0; position: relative; font: 600 18px/1.35 'Geologica', sans-serif; }
.tl-q summary::-webkit-details-marker { display: none; }
.tl-q summary::after { content: "+"; position: absolute; right: 6px; top: 14px; font: 400 26px/1 'Onest', sans-serif; color: var(--tl-green); }
.tl-q[open] summary::after { content: "−"; }
.tl-q .tl-p { margin: 0 0 18px; max-width: 44em; }

/* Финальный призыв */
.tl-final__in { text-align: center; }
.tl-final .tl-h2 { color: var(--tl-green-ink); margin: 0 auto; }
.tl-final .tl-sub { color: var(--tl-green-ink); opacity: .85; margin: 14px auto 28px; }
.tl-final .tl-btn--main { background: var(--tl-green-ink); color: var(--tl-green) !important; border-color: var(--tl-green-ink); }

/* Подвал */
.tl-foot { font-family: 'Onest', system-ui, sans-serif; padding: 26px 24px; font-size: 13px; color: var(--tl-ink-2); text-align: center; line-height: 1.6; }
.tl-foot p { margin: 4px auto; max-width: 60em; }
.tl-foot a { color: var(--tl-ink-2); }

/* ---- Узкие экраны ---- */
@media (max-width: 960px) {
  .tl-hero__grid, .tl-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .tl-hero { padding: 44px 0 48px; }
  .tl-apps { grid-template-columns: minmax(0, 1fr); }
  .tl-app + .tl-app { padding-left: 0; border-left: 0; border-top: 1px solid var(--tl-line); }
  .tl-prices { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .tl { font-size: 16px; }
  .tl-wrap { padding: 0 16px; }
  .tl-sec { padding: 60px 0; }
  .tl-facts__row { grid-template-columns: minmax(0, 1fr); }
  .tl-fact { padding: 18px 0; }
  .tl-fact + .tl-fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--tl-line); }
  .tl-dl { grid-template-columns: minmax(0, 1fr); }
  .tl-ftable thead { display: none; }
  .tl-ftable tbody th, .tl-ftable tbody td { display: block; width: auto; }
  .tl-ftable tbody td { border-top: 0; padding-top: 0; }
  .tl-grid th, .tl-grid td { padding: 5px 6px; font-size: 12px; }
  .tl-grid tbody tr > :nth-child(5), .tl-grid thead tr > :nth-child(5) { display: none; }
  .tl-hero__text { box-shadow: 0 0 0 16px var(--tl-paper); }
  .tl-cta .tl-btn { width: 100%; text-align: center; }
}

/* Подвал: ссылки на документы */
.tl-foot__links a { display: inline-block; margin: 0 10px; }

/* Документы (/license, /privacy) */
.tl-doc { max-width: 760px; margin: 0 auto; padding: 8px 0 48px; font: 400 16px/1.65 'Onest', system-ui, sans-serif; color: var(--tl-ink); }
.tl-doc h2 { font: 600 21px/1.3 'Geologica', sans-serif; margin: 28px 0 8px; }
.tl-doc p, .tl-doc li { color: var(--tl-ink-2); }
.tl-doc a { color: var(--tl-green); }