/* ============================================================
   UZSCINET — стили внутренних страниц услуг.
   Дополняет styles.css (токены, хедер, футер, кнопки, .feat, .reveal).
   Подключать ПОСЛЕ styles.css. Структура страницы (по ресёрчу конкурентов):
   Hero → Преимущества → Тарифы → Доп.услуги → Гарантии → Кому подходит → FAQ → CTA.
   ============================================================ */

/* ---------- активный пункт подменю на странице услуги ---------- */
.subnav__pill a[aria-current="page"]{color:var(--accent-ink);background:var(--chip-bg)}

/* ---------- ХЛЕБНЫЕ КРОШКИ ---------- */
.crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-family:var(--mono);
  font-size:var(--fs-caption);color:var(--text-dimmer);margin-bottom:var(--sp-5)}
.crumbs a{color:var(--text-dim);transition:color var(--dur) var(--ease-out)}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs i{font-style:normal;color:var(--line);user-select:none}
.crumbs b{font-weight:500;color:var(--text)}

/* ---------- ШАПКА СТРАНИЦЫ (page hero) ---------- */
.phero{padding:var(--sp-8) 0 var(--sp-6)}
.phero__grid{display:grid;grid-template-columns:1.25fr .9fr;gap:48px;align-items:center}
.phero__title{font-size:var(--fs-h1);font-weight:800;line-height:var(--lh-tight);letter-spacing:-.03em;margin:0 0 var(--sp-4)}
.phero__lead{max-width:54ch;color:var(--text-dim);font-size:var(--fs-lead);line-height:var(--lh-body);margin-bottom:var(--sp-5)}
.phero__lead b{color:var(--text);font-weight:700}
.phero__cta{display:flex;gap:var(--sp-3);flex-wrap:wrap}

/* карточка ключевых фактов справа от заголовка */
.phero__card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);
  box-shadow:var(--card-shadow);padding:24px;position:relative;overflow:hidden}
:root[data-theme="dark"] .phero__card{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.phero__card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(380px 220px at 92% -12%,rgba(28,157,216,.12),transparent 70%)}
.phero__card h2{font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-family:var(--mono);
  color:var(--text-dimmer);margin-bottom:16px}
.fact{display:flex;align-items:flex-start;gap:13px;padding:11px 0;border-bottom:1px dashed var(--line-soft);position:relative;z-index:1}
.fact:last-child{border-bottom:0;padding-bottom:0}
.fact__ico{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;flex-shrink:0;
  background:var(--icon-bg);border:1px solid var(--icon-bd)}
.fact__ico svg{width:20px;height:20px;stroke:var(--icon-ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fact__txt b{display:block;font-size:15px;font-weight:700;color:var(--text);line-height:1.25}
.fact__txt span{font-size:13.5px;color:var(--text-dim)}

@media(max-width:900px){
  .phero{padding:var(--sp-6) 0 var(--sp-4)}
  .phero__grid{grid-template-columns:1fr;gap:32px}
}

/* ---------- СЕКЦИЯ (общий блок) ---------- */
.section{margin-top:var(--sp-10)}
.section__head{margin-bottom:var(--sp-6);max-width:64ch}
.section__head--center{text-align:center;margin-left:auto;margin-right:auto}
.section__title{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.025em;line-height:var(--lh-snug);margin-top:10px}
.section__lead{color:var(--text-dim);font-size:var(--fs-lead);margin-top:14px;line-height:var(--lh-body)}
@media(max-width:680px){.section{margin-top:var(--sp-8)}}

/* ---------- ПРОЗА: вступительный текст по темам ---------- */
.prose{display:grid;grid-template-columns:1fr 1fr;gap:18px 34px}
.prose p{font-size:16px;color:var(--text-dim);line-height:var(--lh-body)}
.prose p b{color:var(--text);font-weight:700}
@media(max-width:760px){.prose{grid-template-columns:1fr;gap:16px}}

/* ---------- ПРАЙС-ТАБЛИЦА (à la carte) ---------- */
.ptable-wrap{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);
  box-shadow:var(--card-shadow);overflow:auto hidden} /* на узких экранах таблица скроллится, а не давится */
:root[data-theme="dark"] .ptable-wrap{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ptable{width:100%;border-collapse:collapse;font-size:15px}
.ptable caption{text-align:left;padding:18px 22px 0;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-dimmer)}
.ptable th,.ptable td{padding:13px 22px;text-align:left}
.ptable thead th{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-dimmer);font-weight:500;border-bottom:1px solid var(--line)}
.ptable tbody tr{border-bottom:1px dashed var(--line-soft)}
.ptable tbody tr:last-child{border-bottom:0}
.ptable tbody tr:hover{background:var(--field-bg)}
.ptable td:first-child{color:var(--text-dim)}
.ptable td:first-child b{color:var(--text);font-weight:600}
.ptable .ptable__price{text-align:right;font-family:var(--mono);font-weight:700;color:var(--text);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.ptable .ptable__price u{text-decoration:none;font-size:12px;color:var(--text-dimmer);font-weight:500;margin-left:4px}
.ptable .ptable__price.is-soft{color:var(--accent-ink)}
.ptable tfoot td{padding:14px 22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--text-dim)}
@media(max-width:560px){
  .ptable th,.ptable td{padding:11px 15px}
  .ptable caption{padding:15px 15px 0}
}

/* ---------- ТАРИФНЫЕ КАРТОЧКИ (hosting / vps) ---------- */
.tariffs{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.tcard{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--radius);box-shadow:var(--card-shadow);padding:24px;transition:transform .3s,border-color .3s,box-shadow .3s}
:root[data-theme="dark"] .tcard{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
/* тарифная карточка кликабельна только кнопкой → без hover-подъёма (он обещает клик по всей карточке) */
.tcard:hover{border-color:var(--icon-bd)}
.tcard--featured{border-color:var(--chip-border);box-shadow:var(--shadow-accent)}
.tcard__tag{align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-dimmer);background:var(--icon-bg);border:1px solid var(--icon-bd);padding:3px 9px;border-radius:7px;margin-bottom:14px}
.tcard__name{font-family:var(--mono);font-size:14px;color:var(--text-dimmer);letter-spacing:.04em;margin-bottom:6px}
.tcard__price{display:flex;align-items:baseline;gap:5px;font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-weight:800;font-size:28px;color:var(--text);letter-spacing:-.01em;margin-bottom:4px}
.tcard__price u{text-decoration:none;font-size:13px;color:var(--text-dimmer);font-weight:500}
.tcard__min{font-size:12.5px;color:var(--text-dimmer);min-height:18px;margin-bottom:16px}
.tcard__list{display:flex;flex-direction:column;gap:9px;margin:0 0 20px;flex:1}
.tcard__list li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--text-dim);line-height:1.45}
.tcard__list svg{flex-shrink:0;width:17px;height:17px;margin-top:2px;stroke:var(--primary);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tcard__list b{color:var(--text);font-weight:700}
.tcard .btn{width:100%;margin-top:auto}

/* ---------- КОМУ ПОДХОДИТ (персоны) ---------- */
.persona{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* персона — информационная карточка (не интерактивная): плоский вид, без тени/подъёма */
.persona__item{display:flex;align-items:center;gap:13px;background:var(--field-bg);border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);padding:15px 17px}
:root[data-theme="dark"] .persona__item{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.persona__ico{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;flex-shrink:0;
  background:var(--icon-bg);border:1px solid var(--icon-bd)}
.persona__ico svg{width:21px;height:21px;stroke:var(--icon-ink);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.persona__item b{font-size:15px;font-weight:700;color:var(--text);display:block;line-height:1.2}
.persona__item span{font-size:13px;color:var(--text-dim)}

/* ---------- ВЫНОСКА / ПРИМЕЧАНИЕ ---------- */
.callout{display:flex;gap:14px;align-items:flex-start;margin-top:var(--sp-5);
  background:var(--chip-bg);border:1px solid var(--chip-border);border-radius:var(--radius-sm);padding:16px 18px}
.callout svg{flex-shrink:0;width:22px;height:22px;stroke:var(--primary);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.callout p{font-size:14.5px;color:var(--text-dim);line-height:1.55}
.callout p b{color:var(--text);font-weight:700}

/* ---------- FAQ (аккордеон) ---------- */
.faq{display:flex;flex-direction:column;gap:12px;max-width:860px}
.faq__item{background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius-sm);
  box-shadow:var(--card-shadow);overflow:hidden}
:root[data-theme="dark"] .faq__item{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.faq__q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:var(--sans);font-size:16px;font-weight:700;color:var(--text);
  padding:18px 20px;min-height:var(--tap);transition:color var(--dur) var(--ease-out)}
.faq__q:hover{color:var(--accent-ink)}
.faq__q svg{flex-shrink:0;width:20px;height:20px;stroke:var(--primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--dur) var(--ease-out)}
.faq__item.is-open .faq__q svg{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease-out)}
.faq__a-inner{padding:0 20px 18px;color:var(--text-dim);font-size:15px;line-height:var(--lh-body)}
.faq__a-inner b{color:var(--text);font-weight:700}

/* ---------- CTA-БЭНД (как .contact, но компактнее) ---------- */
.cta-band{margin-top:var(--sp-10);text-align:center;background:var(--card-bg);border:1px solid var(--card-border);
  border-radius:var(--radius);box-shadow:var(--card-shadow);padding:48px 32px;position:relative;overflow:hidden}
:root[data-theme="dark"] .cta-band{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cta-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(560px 280px at 50% -20%,rgba(28,157,216,.12),transparent 70%)}
.cta-band__title{font-size:var(--fs-h2);font-weight:800;letter-spacing:-.025em;line-height:var(--lh-snug);margin-bottom:12px;position:relative;z-index:1}
.cta-band__lead{color:var(--text-dim);font-size:var(--fs-lead);max-width:52ch;margin:0 auto 24px;position:relative;z-index:1}
.cta-band__actions{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
@media(max-width:680px){.cta-band{padding:36px 22px}}

/* ---------- ВСТРОЕННЫЙ КОНФИГУРАТОР (страница colocation) ---------- */
/* центрируем калькулятор с главной; .calc на главной = grid-элемент (span 5),
   здесь родитель не grid → grid-column игнорируется, задаём ширину явно */
.calc-embed{max-width:640px;margin-inline:auto}
.calc-embed .calc{width:100%;min-height:0}

/* split-режим: две карточки рядом — равной ширины (1fr/1fr) и высоты (grid-stretch) */
.calc-embed--split{max-width:none;margin-inline:0;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.calc-embed--split>.calc{grid-column:auto}   /* перебиваем .calc{grid-column:span 5} от бенто главной */
/* тело чека заполняет карточку → «Итого» и кнопка прижаты к низу */
.calc__result{display:flex;flex-direction:column;flex:1}
.calc__result .calc__total{margin-top:auto}
/* «Рассчитать стоимость» (слева) и «Прикрепить к заявке» (справа) — на одной линии.
   go прижата к низу карточки (как .calc__total справа). Зазор от сегмента периода даёт
   margin-bottom периода, т.к. auto у кнопки иначе «съедает» её собственный margin-top.
   min-height правой заметки уравнивает «хвост» под кнопками (слева заметка+ссылка чуть выше). */
.calc-embed--split #calc .calc__go{margin-top:auto}
.calc-embed--split #calc .calc__period{margin-bottom:14px}
.calc-embed--split #calcResult .calc__note{min-height:43px}
/* summary всегда РОВНО одна строка (пустая или с текстом) → высота шапки постоянна:
   пункты на уровне «Размещение» И не прыгают при расчёте */
.calc__result #calcSummary{height:1.5em;line-height:1.5em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* стоимость-плейсхолдер в каркасе до расчёта: приглушённый «— сум» */
.bd__cost--ph{color:var(--text-dimmer);font-weight:600;font-size:14px;text-transform:none;letter-spacing:0}
/* «Конфигурация» — заголовок списка ровно на уровне «Размещение» (те же метрики, что у .ctrl label) */
.calc__bd-title{display:flex;align-items:flex-end;min-height:34px;margin:0;font-size:14px;font-weight:600;color:var(--text-dim);line-height:1.2}
@media(max-width:900px){
  .calc-embed--split{grid-template-columns:1fr}
}

/* мобильная версия: конфигуратор «переворачивается» в чек (как флип-карточка на главной);
   на десктопе остаётся split — обе карточки рядом */
.calc__back-m{display:none}
@media(max-width:680px){
  .calc-embed--split #calcResult{display:none}                 /* чек скрыт до «Рассчитать» */
  .calc-embed--split.result-shown #calc{display:none}          /* после расчёта — конфигуратор скрыт */
  .calc-embed--split.result-shown #calcResult{display:flex;animation:calcFlipIn .5s cubic-bezier(.4,0,.2,1) both}
  .calc__back-m{display:inline-flex;width:100%}                 /* «Изменить конфигурацию» → возврат к конфигуратору */
  .calc__result .calc__actions{flex-direction:column}
  .calc__result .calc__actions .btn{width:100%}
}

/* ---------- ССЫЛКА «Подробно о формировании цены» (в калькуляторе) ---------- */
.calc__pricelink{display:inline-flex;align-items:center;align-self:flex-start;gap:6px;margin-top:4px;
  padding:0;border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--accent-ink);
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--chip-border);
  transition:color var(--dur) var(--ease-out)}
.calc__pricelink:hover{color:var(--accent-d);text-decoration-color:currentColor}

/* ---------- МОДАЛ: прайс Colocation (position:fixed → положение в DOM не важно) ---------- */
.pmodal{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;
  padding:5vh 16px;opacity:0;transition:opacity var(--dur) var(--ease-out)}
.pmodal[hidden]{display:none}
.pmodal.is-open{opacity:1}
.pmodal__overlay{position:absolute;inset:0;background:rgba(8,18,28,.55)}
.pmodal__dialog{position:relative;z-index:1;width:min(720px,100%);max-height:90vh;overflow:auto;
  background:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--radius);
  box-shadow:var(--card-shadow);padding:30px;transform:translateY(10px);transition:transform var(--dur) var(--ease-out)}
:root[data-theme="dark"] .pmodal__dialog{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pmodal.is-open .pmodal__dialog{transform:none}
.pmodal__close{position:absolute;top:12px;right:12px;display:flex;align-items:center;justify-content:center;
  width:var(--tap);height:var(--tap);border:0;background:none;color:var(--text-dim);cursor:pointer;border-radius:10px;
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.pmodal__close:hover{background:var(--field-bg);color:var(--text)}
.pmodal__close svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.pmodal__body .section__head{margin-bottom:var(--sp-4);max-width:none;padding-right:36px}
.pmodal__body .ptable-wrap{box-shadow:none}
body.pmodal-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .pmodal,.pmodal__dialog{transition:none}
}
/* Safari/iOS: 90vh/5vh учитывают адресную строку и «прыгают» при её сворачивании.
   dvh = динамическая высота видимой области → модалка стабильнее. Прогрессивное
   усиление: идёт ПОСЛЕ базовых vh-правил, чтобы выиграть по каскаду там, где dvh есть. */
@supports (height:100dvh){
  .pmodal{padding:5dvh 16px}
  .pmodal__dialog{max-height:90dvh}
}

/* ---------- УТИЛИТЫ ---------- */
.lead-strong{color:var(--text);font-weight:700}

/* ============================================================
   MOBILE-FIRST FIXES (аудит 2026-06-20) — страницы услуг.
   pages.css грузится ПОСЛЕ styles.css -> эти правила выигрывают каскад над базой .ptable.
   ============================================================ */

/* BUG 3 — снять залипшую подсветку строки таблицы на тач */
@media (hover:none){ .ptable tbody tr:hover{background:transparent} }

/* BUG 2 — модалка прайса не уезжает под системную полосу снизу */
.pmodal{padding-bottom:max(5dvh,env(safe-area-inset-bottom))}

/* BUG 5 — прайс-таблица (Домены / модалка Colocation) -> карточки label/value на >=480px вниз */
@media (max-width:480px){
  .ptable-wrap{border:0;background:transparent;box-shadow:none;overflow:visible}
  :root[data-theme="dark"] .ptable-wrap{backdrop-filter:none;-webkit-backdrop-filter:none}
  .ptable{display:block;font-size:14.5px}
  .ptable caption{padding:0 2px 12px}
  .ptable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .ptable tbody{display:block}
  .ptable tbody tr{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
    padding:12px 14px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;margin-bottom:8px}
  .ptable tbody tr:last-child{border-bottom:1px solid var(--card-border)}  /* перебить border:0 десктопного last-child */
  .ptable td{display:block;padding:0;border:0}
  .ptable td:first-child{flex:1 1 auto;color:var(--text)}
  .ptable .ptable__price{flex:0 0 auto;text-align:right;white-space:nowrap}
  .ptable tfoot{display:block}
  .ptable tfoot td{display:block;padding:12px 14px 0;border-top:0;font-size:12.5px}
}