/* Публичный сайт luksii.ru. Отдельная статика от Mini App: приложение живёт на /app,
   здесь витрина и правовые документы. Требование модерации Робокассы (2026-07-29):
   описание услуг, цены, порядок оплаты и возврата, реквизиты должны открываться по
   ссылке на сайте, а не лежать файлами.

   Гамма продукта: тиффани #0abab5 как акцент, тёмная база. Тема следует за системой. */

:root{
  --bg:#f7faf9; --raised:#ffffff; --sunk:#eef4f3;
  --border:#dde6e4; --border-soft:#e9f0ef;
  --text:#0f1716; --muted:#5b6f6c; --faint:#839996;
  --accent:#068a86; --accent-soft:#0abab5; --accent-bg:#e6f5f4;
  --gold:#9c7c2c; --gold-bg:#faf4e6; --gold-line:#e3d0a4;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c0f0f; --raised:#141a19; --sunk:#101615;
    --border:#1f2726; --border-soft:#182120;
    --text:#dfe6e4; --muted:#93a7a4; --faint:#6d817f;
    --accent:#0abab5; --accent-soft:#81d8d0; --accent-bg:#0f2422;
    --gold:#d9b877; --gold-bg:#1d1913; --gold-line:#4a3d21;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* Флекс-элемент по умолчанию не сжимается ниже ширины содержимого (min-width:auto),
   поэтому широкая таблица или длинная строка адреса растягивали ВСЮ страницу, и на
   телефоне контент уезжал за правый край. Разрешаем колонкам сжиматься, а длинным
   значениям переноситься. */
.wrap, .wrap *{min-width:0}
.tablewrap, .plans, .grid2, .steps, .docs, .doc-nav{max-width:100%}
/* break-word переносит по словам и рвёт только то, что длиннее строки. anywhere оставлен
   там, где реально бывают длинные неразрывные значения: адрес в реквизитах и таблицы. */
h1, h2, h3, p, li{overflow-wrap:break-word}
td, th{overflow-wrap:break-word}
.req span, .price{overflow-wrap:anywhere}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
.wrap{max-width:860px;margin:0 auto;padding:0 22px 90px;
  display:flex;flex-direction:column;gap:54px}
.wrap.docpage{gap:34px;max-width:780px}
section{display:flex;flex-direction:column;gap:18px;scroll-margin-top:20px}
p{margin:0;max-width:68ch;color:var(--muted)}
p.lead{color:var(--text)}
h2{font-family:var(--serif);font-size:clamp(21px,3.2vw,28px);line-height:1.24;margin:0;
  font-weight:700;letter-spacing:-.01em;color:var(--text)}
h3{font-size:16px;margin:0;font-weight:700;color:var(--text)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent)}
a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
a:hover{border-bottom-color:currentColor}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
b,strong{font-weight:700;color:var(--text)}
ul,ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;color:var(--muted)}
li{max-width:64ch}
li::marker{color:var(--accent-soft)}

header{padding:60px 0 44px;display:flex;flex-direction:column;gap:20px;
  border-bottom:1px solid var(--border)}
.mark{display:flex;align-items:center;gap:11px}
.mark .dot{width:11px;height:11px;border-radius:50%;background:var(--accent-soft);
  box-shadow:0 0 0 5px var(--accent-bg)}
.mark span{font-family:var(--mono);font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--text)}
.mark a{border-bottom:none;color:var(--text)}
h1{font-family:var(--serif);font-size:clamp(30px,5.6vw,48px);line-height:1.1;margin:0;
  font-weight:700;letter-spacing:-.022em;text-wrap:balance;color:var(--text)}
h1.doc-title{font-size:clamp(25px,4.4vw,36px)}
.hero-sub{font-size:17.5px;color:var(--muted);max-width:56ch;margin:0}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:15.5px;font-weight:650;padding:14px 26px;border-radius:12px;
  background:var(--accent);color:var(--bg);border:1px solid var(--accent);
  transition:transform .12s ease}
.btn:hover{border-bottom-color:var(--accent);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border)}
.tiny{font-size:13.5px;color:var(--faint)}

.card{background:var(--raised);border:1px solid var(--border);border-radius:16px;
  padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
.plan{background:var(--raised);border:1px solid var(--border);border-radius:18px;
  padding:24px;display:flex;flex-direction:column;gap:14px}
.plan.flagship{border-color:var(--gold-line);background:var(--gold-bg)}
.plan-head{display:flex;flex-direction:column;gap:4px}
.plan-name{font-size:17px;font-weight:700}
.plan-note{font-size:13.5px;color:var(--faint)}
.price{font-family:var(--serif);font-size:37px;line-height:1;font-weight:700;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px}
.price small{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--muted)}
.flagship .price{color:var(--gold)}
.plan ul{font-size:14.5px;gap:7px}

.steps{display:flex;flex-direction:column;counter-reset:s}
.step{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--border-soft)}
.step:first-child{border-top:none}
.step-n{counter-increment:s;flex:0 0 auto;width:28px;height:28px;border-radius:9px;
  background:var(--accent-bg);color:var(--accent);font-family:var(--mono);font-size:13px;
  font-weight:700;display:flex;align-items:center;justify-content:center}
.step-n::before{content:counter(s)}
.step-body{display:flex;flex-direction:column;gap:4px}
.step-body b{font-size:15.5px}
.step-body p{font-size:15px}

/* Таблица не сжимается в кашу: у неё есть минимальная ширина, а узкий экран
   прокручивает её ВНУТРИ рамки. Селектор с .tablewrap обязателен, иначе правило
   .wrap * {min-width:0} выше окажется специфичнее и обнулит минимум. */
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;
  background:var(--raised);-webkit-overflow-scrolling:touch}
.tablewrap table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--border-soft);vertical-align:top}
th{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--faint);font-weight:600;background:var(--sunk)}
tr:last-child td{border-bottom:none}
td.k{color:var(--muted)}
td.v{font-variant-numeric:tabular-nums}

.req{font-family:var(--mono);font-size:14px;display:flex;flex-direction:column;gap:9px}
.req div{display:flex;flex-wrap:wrap;gap:10px}
.req .k{color:var(--faint);min-width:120px}
.frame{border-left:3px solid var(--accent);background:var(--accent-bg);
  border-radius:0 12px 12px 0;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.frame p{color:var(--text);opacity:.88}
.docs{display:flex;flex-wrap:wrap;gap:10px}
.doc{display:inline-flex;align-items:center;gap:9px;font-size:14.5px;padding:11px 16px;
  border:1px solid var(--border);border-radius:11px;background:var(--raised);color:var(--text)}
.doc:hover{border-color:var(--accent);border-bottom-color:var(--accent)}
footer{border-top:1px solid var(--border);padding-top:26px;display:flex;flex-direction:column;
  gap:9px;font-size:14px;color:var(--faint)}
footer a{color:var(--faint)}

/* ВНИМАНИЕ: класс .doc занят кнопкой-ссылкой на документ (display:inline-flex, рамка,
   фон). Контейнер страницы документа поэтому называется .docpage, а не .doc: при
   совпадении имён обёртка получала стили кнопки, схлопывалась в узкую колонку и теряла
   центрирование на всех экранах. */

/* документы: нумерация разделов и пунктов */
.doc-meta{font-family:var(--mono);font-size:12.5px;color:var(--faint);display:flex;
  flex-wrap:wrap;gap:14px}
.doc-nav{display:flex;flex-wrap:wrap;gap:8px;font-size:13.5px}
.doc-nav a{padding:7px 12px;border:1px solid var(--border);border-radius:9px;color:var(--muted)}
.clause{display:flex;flex-direction:column;gap:10px}
.clause h2{font-size:19px}
/* Нумерация абсолютной позицией, а НЕ флексом. Флекс превращал каждый inline-элемент
   внутри пункта (например <b>Предмет.</b>) в отдельную колонку, и жирное слово
   рассыпалось в столбик по буквам. Абсолютная цифра оставляет текст обычным потоком. */
ol.num{counter-reset:c;list-style:none;padding-left:0;gap:11px}
ol.num > li{counter-increment:c;position:relative;padding-left:32px;max-width:none;
  display:block}
ol.num > li::before{content:counter(c) ".";position:absolute;left:0;top:1px;
  font-family:var(--mono);font-size:13px;color:var(--accent);min-width:24px}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}
@media (max-width:560px){
  body{font-size:15.5px}
  .wrap{padding:0 16px 70px;gap:38px}
  .wrap.docpage{gap:26px}
  header{padding:38px 0 30px}
  h1{font-size:26px}
  h1.doc-title{font-size:22px;line-height:1.22}
  h2{font-size:19px}
  .btn{width:100%}
  .hero-sub{font-size:16px}
  /* реквизиты: подпись над значением, иначе длинный адрес ломает строку */
  .req div{flex-direction:column;gap:2px}
  .req .k{min-width:0}
  /* навигация по документу: не растягивать чипами, разрешить перенос слов */
  .doc-nav{gap:6px}
  .doc-nav a{padding:6px 10px;font-size:12.5px}
  /* таблицы на узком экране прокручиваются внутри рамки */
  .tablewrap table{min-width:520px}
  th,td{padding:10px 12px;font-size:14px}
  .plan,.card{padding:18px 16px}
  ol.num > li{gap:9px}
}