/* ============================================================
   Ария Огнева — документы: ceny.html, oferta.html, konfidencialnost.html, vozvrat.html
   Подключается после site.css и info.css только на этих четырёх страницах.
   Раскладка одна на все документы:
     заголовок + строка редакции → колонка текста ~720px;
     оглавление на ПК — липкое слева, на телефоне и планшете — сворачиваемое (details) над текстом;
     внизу — переключатель документов. Без JS.
   Цвета — только переменные из :root site.css (палитру потом меняют);
   оттенки — color-mix() от тех же переменных. Поверхности — классы .glass / .card из site.css.
   ============================================================ */

.lg{position:relative;padding:clamp(108px,11vw,150px) 0 clamp(40px,5vw,72px)}
.lg-grid{display:grid;grid-template-columns:minmax(0,720px);justify-content:center;column-gap:56px}
.lg-side{display:none}

/* ---------- заголовок ---------- */
.lg-head{margin-bottom:clamp(26px,3.4vw,40px)}
.lg-head .kick{margin-bottom:10px}
/* без .split: слова-блоки анимации не дают переносить «информационно-образовательных» по дефису */
.lg-head h1{font-size:clamp(28px,3.4vw,44px);line-height:1.14;overflow-wrap:break-word}
.lg-ed{margin:16px 0 0;font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- оглавление ---------- */
.lg-toc-h,.lg-docs-h{margin:0 0 12px;font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.lg-toc ol,.lg-toc-m ol{list-style:none;margin:0;padding:0}
.lg-toc a,.lg-doc .lg-toc-m a{display:flex;align-items:baseline;gap:8px;font-weight:600;color:var(--ink-2);text-decoration:none;transition:color .25s,border-color .25s}
.lg-toc a:hover,.lg-doc .lg-toc-m a:hover{color:var(--ink)}
.lg-n{flex:none;color:var(--pink-2);font-variant-numeric:tabular-nums}
/* ПК: тонкая линия слева, пункт подсвечивается при наведении */
.lg-toc ol{border-left:1px solid var(--line)}
.lg-toc a{margin-left:-1px;padding:6px 8px 6px 14px;border-left:2px solid transparent;font-size:14px;line-height:1.35}
.lg-toc a:hover{border-left-color:var(--pink)}
.lg-toc .lg-n{min-width:1.5em}
/* телефон и планшет: свёрнутый список над текстом */
.lg-toc-m{margin:0 0 32px;border-radius:var(--r)}
.lg-toc-m summary{display:flex;align-items:center;gap:10px;min-height:54px;padding:14px 20px;border-radius:inherit;cursor:pointer;list-style:none;font-weight:700;font-size:15.5px;line-height:1.3}
.lg-toc-m summary::-webkit-details-marker{display:none}
.lg-toc-m summary:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.lg-toc-m summary small{font-weight:600;font-size:13px;color:var(--ink-3)}
.lg-toc-m summary::after{content:"";flex:none;width:9px;height:9px;margin:-5px 4px 0 auto;border-right:2px solid var(--pink-2);border-bottom:2px solid var(--pink-2);transform:rotate(45deg);transition:transform .3s var(--ease),margin .3s var(--ease)}
.lg-toc-m[open] summary::after{margin-top:5px;transform:rotate(-135deg)}
.lg-toc-m ol{padding:0 12px 10px}
.lg-doc .lg-toc-m a{padding:10px 8px;border-top:1px solid var(--line);font-size:15px;line-height:1.35}
.lg-toc-m .lg-n{min-width:1.7em}

/* ---------- текст документа ---------- */
.lg-doc{min-width:0;font-size:16.5px;line-height:1.7}
.lg-doc>p,.lg-doc>ul,.lg-doc>ol{margin:0 0 14px}
.lg-lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--ink-2)}
.lg-doc h2{margin:clamp(40px,5vw,56px) 0 16px;font-size:clamp(24px,2.3vw,30px);line-height:1.2;scroll-margin-top:100px}
.lg-toc-m+h2,.lg-doc>h2:first-child{margin-top:0}
.lg-doc h3{margin:26px 0 10px;font:700 16.5px/1.4 var(--f-body);letter-spacing:0}
.lg-doc h3 .lg-n{margin-right:.2em}
.lg-doc b{font-weight:700}
.lg-doc a:not(.btn){color:var(--pink-2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--pink-2) 40%,transparent);transition:text-decoration-color .25s}
.lg-doc a:not(.btn):hover{text-decoration-color:currentColor}
.lg-doc .lg-toc-m a{text-decoration:none}

/* списки: маркер — грань кристалла; нумерованные — номер в кружке */
.lg-doc>ul,.lg-doc>ol{padding:0;list-style:none;display:grid;gap:8px}
.lg-doc>ul>li,.lg-plan ul>li{position:relative;padding-left:24px}
.lg-doc>ul>li::before,.lg-plan ul>li::before{content:"";position:absolute;left:2px;top:calc(.85em - 5px);width:10px;height:10px;background:var(--pink-2);-webkit-mask:var(--gem) center/contain no-repeat;mask:var(--gem) center/contain no-repeat}
.lg-doc>ol{counter-reset:lg-c}
.lg-doc>ol>li{position:relative;min-height:28px;padding-left:40px;counter-increment:lg-c}
.lg-doc>ol>li::before{content:counter(lg-c);position:absolute;left:0;top:calc(.85em - 13px);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  font-size:13px;font-weight:800;line-height:1;color:var(--pink-2);background:color-mix(in srgb,var(--pink) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pink) 26%,transparent)}

/* ---------- врезки: реквизиты сверху оферты, примечания ---------- */
.lg-card,.lg-note{margin:22px 0;padding:18px 22px;border-radius:var(--r);font-size:15.5px;line-height:1.65}
.lg-card{margin-top:0}
.lg-card p,.lg-note p{margin:0 0 10px}
.lg-card p:last-child,.lg-note p:last-child{margin-bottom:0}
.lg-note::after{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--grad-fire)}

/* ---------- таблицы ---------- */
.lg-tbl{margin:8px 0 20px;border-radius:var(--r);overflow:hidden}
.lg-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.lg-table th,.lg-table td{padding:13px 20px;text-align:left;vertical-align:top}
.lg-table th{font-weight:700;font-size:13.5px;color:var(--ink-2)}
.lg-table thead th{font-weight:600;color:var(--ink-3)}
.lg-table thead th b{color:var(--ink-2)}
.lg-table tr+tr>*,.lg-table thead+tbody tr:first-child>*{border-top:1px solid var(--line)}
.lg-table td{overflow-wrap:anywhere}
.lg-table--req th{width:36%}
.lg-table--price{table-layout:fixed}
.lg-table--price thead th:first-child{width:56%}

/* ---------- цены: карточки тарифов ---------- */
.lg-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}
.lg-plans--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lg-plan{display:flex;flex-direction:column;padding:22px 20px 20px;border-radius:var(--r)}
.lg-plan-tag{position:absolute;top:0;left:18px;transform:translateY(-50%);padding:3px 10px 4px;border-radius:999px;white-space:nowrap;
  font-size:11.5px;font-weight:700;line-height:1.3;letter-spacing:.02em;color:var(--pink-2);background:var(--bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pink) 32%,transparent)}
.lg-doc .lg-plan h3{margin:0;font-family:var(--f-display);font-style:var(--em-style);font-weight:var(--fw-display);font-size:20px;line-height:1.2;letter-spacing:-.01em}
.lg-plan-price{margin:10px 0 4px;font-family:var(--f-display);font-weight:var(--fw-display);font-size:clamp(30px,2.6vw,36px);line-height:1.05;letter-spacing:-.01em;
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.lg-plan-sub{margin:0 0 16px;font-size:13px;line-height:1.45;color:var(--ink-3)}
.lg-plan ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:7px;align-content:start;font-size:14.5px;line-height:1.45}
.lg-plan ul>li{padding-left:20px}
.lg-plan ul>li::before{left:1px;top:calc(.725em - 5px)}
.lg-plan-term{margin:auto 0 14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;line-height:1.45;color:var(--ink-2)}
.lg-plan-pay{display:grid;gap:8px}
.lg-plan .btn.btn-sm{width:100%;min-height:44px;padding:0 16px;font-size:14px;line-height:1.2;white-space:normal;text-align:center}
/* один модуль — широкая карточка: слева цена и кнопки, справа состав */
.lg-plan--wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:32px;margin:22px 0;padding:24px 26px}
.lg-plan-a,.lg-plan-b{display:flex;flex-direction:column;min-width:0}
.lg-plan-a .lg-plan-pay{margin-top:auto}
.lg-plan-b ul{margin-top:4px}

/* ---------- переключатель документов ---------- */
.lg-docs{margin-top:clamp(44px,6vw,72px);padding-top:26px;border-top:1px solid var(--line)}
.lg-docs ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lg-docs a{position:relative;display:flex;align-items:center;gap:12px;min-height:60px;padding:12px 16px;border:1px solid var(--glass-edge);border-radius:16px;
  background:var(--glass);box-shadow:var(--glass-rim);font-weight:700;font-size:15px;line-height:1.3;color:var(--ink);text-decoration:none;transition:transform .3s var(--ease)}
.lg-docs a::before{content:"";flex:none;width:22px;height:22px;background:var(--pink-2);-webkit-mask:var(--doc) center/contain no-repeat;mask:var(--doc) center/contain no-repeat}
.lg-docs a:hover{transform:translateY(-2px)}
.lg-docs .arr{flex:none;margin-left:auto}
.lg-docs a:hover .arr{transform:translateX(4px)}
.lg-docs a[aria-current="page"]{border-color:color-mix(in srgb,var(--pink) 34%,transparent);background:color-mix(in srgb,var(--pink) 8%,transparent);box-shadow:none}
.lg-docs a[aria-current="page"]:hover{transform:none}
.lg-docs small{flex:none;margin-left:auto;font-size:12px;font-weight:700;color:var(--pink-2)}

/* ============================================================
   АДАПТИВ
   ============================================================ */
/* ПК: оглавление — колонка слева, липнет под шапкой */
@media (min-width:1100px){
  .lg-grid{grid-template-columns:220px minmax(0,720px);grid-template-areas:". head" "side doc" ". docs"}
  .lg-head{grid-area:head}
  .lg-side{display:block;grid-area:side}
  .lg-doc{grid-area:doc}
  .lg-docs{grid-area:docs}
  .lg-toc{position:sticky;top:106px;max-height:calc(100vh - 130px);overflow:auto;overscroll-behavior:contain;padding-bottom:8px}
  .lg-toc-m{display:none}
}

@media (max-width:700px){
  .lg-plans,.lg-plans--2{grid-template-columns:minmax(0,1fr);gap:20px}
  /* широкая карточка становится обычной: состав — до кнопок */
  .lg-plan--wide{display:flex;padding:22px 20px 20px}
  .lg-plan-a,.lg-plan-b{display:contents}
  .lg-plan--wide .lg-plan-pay{order:1}
  .lg-plan-b ul{margin-top:0}
}

@media (max-width:560px){
  .lg-doc{font-size:16px;line-height:1.65}
  .lg-doc h2{font-size:23px;scroll-margin-top:88px}
  .lg-card,.lg-note{padding:16px 18px}
  .lg-table th,.lg-table td{padding:12px 14px}
  /* реквизиты: подпись над значением */
  .lg-table--req,.lg-table--req tbody,.lg-table--req tr,.lg-table--req th,.lg-table--req td{display:block;width:auto}
  .lg-table--req tr+tr>*{border-top:0}
  .lg-table--req tr+tr{border-top:1px solid var(--line)}
  .lg-table--req th{padding:12px 16px 0}
  .lg-table--req td{padding:2px 16px 12px}
  .lg-table--price thead th:first-child{width:54%}
  .lg-docs ul{grid-template-columns:minmax(0,1fr)}
}

/* печать: только сам документ */
@media print{
  .hdr,.mmenu,.promo,.pt,.ftr,.fshards,.lg-side,.lg-toc-m,.lg-docs,.lg-plan-pay{display:none!important}
  body::before{display:none}
  .lg{padding:0}
  .lg-grid{display:block}
  .glass,.card{box-shadow:none}
}